/* ===== الصفحة الرئيسية - 13 قسماً بتنويعات تخطيط ===== */

.reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(4px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out)
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0)
}

.reveal-3d {
  transform: translateY(32px) perspective(900px) rotateX(8deg);
  transform-origin: center bottom
}

.reveal-3d.is-visible {
  transform: translateY(0) perspective(900px) rotateX(0)
}

.section { padding: clamp(2rem, 5vw, 3.75rem) 0 }
.section-head { margin-bottom: clamp(1.25rem, 3vw, 2rem) }
.section-head p { margin-top: var(--space-2); max-width: 44rem }

.btn-coral {
  background: var(--color-secondary);
  color: #FFFFFF;
  border-color: var(--color-secondary)
}

.btn-coral:hover {
  background: #04342C;
  border-color: #04342C;
  color: #FFFFFF
}

.btn-ghost-white {
  background: #FFFFFF;
  color: #04342C;
  border-color: #FFFFFF;
  box-shadow: none
}

.btn-ghost-white:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
  color: #04342C
}

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
  font-size: var(--fs-badge);
  font-weight: 700
}

/* ===== 1 Hero ===== */
.hero-v2 {
  position: relative;
  overflow: hidden;
  margin: var(--space-3) auto 0;
  width: min(100% - 1.75rem, var(--container));
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: 1.75rem;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft)
}

.hero-v2 .container {
  width: 100%;
  margin: 0
}

.hero-v2-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center
}

.hero-v2-copy h1 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.5rem, 2.8vw, 2.1rem)
}

.hero-v2-lead {
  margin-bottom: var(--space-4);
  max-width: 38rem;
  font-size: var(--fs-body)
}

.hero-search-row {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3)
}

.hero-search-row input,
.hero-search-row select {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-body)
}

.hero-search-row input:focus,
.hero-search-row select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow)
}

.quick-keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2)
}

.quick-key {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-badge);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease
}

.quick-key:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light)
}

.hero-visual-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3)
}

.network-stage-v2 {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 420 / 340
}

.network-svg-v2 {
  display: block;
  width: 100%;
  height: auto
}

.network-svg-v2 .hub { fill: var(--color-primary-dark) }
.network-svg-v2 .spoke {
  stroke: var(--color-primary);
  stroke-width: 2;
  fill: none;
  opacity: 0.55
}

.network-svg-v2 .node {
  fill: var(--color-surface);
  stroke: var(--color-primary);
  stroke-width: 2
}

.network-svg-v2 .node-coral {
  fill: var(--color-surface);
  stroke: var(--color-secondary);
  stroke-width: 2.5
}

.net-fab-v2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.05rem;
  line-height: 1;
  transform: translate(-50%, -50%);
  pointer-events: none
}

.net-fab-v2.is-coral { color: var(--color-secondary) }
.hub-fab-v2 {
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  color: #FFFFFF;
  font-size: 1.35rem;
  background: transparent
}

.net-pos-1 { top: 18%; left: 18% }
.net-pos-2 { top: 18%; left: 82% }
.net-pos-3 { top: 58%; left: 12% }
.net-pos-4 { top: 58%; left: 88% }
.net-pos-5 { top: 88%; left: 50% }

.preview-card {
  display: none;
  width: min(100%, 320px);
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(11, 90, 72, 0.12);
  border-top-color: rgba(255, 255, 255, 0.95);
  border-right-color: rgba(11, 90, 72, 0.08);
  border-radius: var(--radius-card);
  background: var(--gradient-card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 0 rgba(4, 52, 44, 0.04) inset,
    8px 18px 0 -6px rgba(4, 52, 44, 0.06),
    14px 32px 40px -12px rgba(4, 52, 44, 0.22),
    0 10px 24px rgba(4, 52, 44, 0.1);
  transform: perspective(900px) rotateX(8deg) rotateY(-12deg) translateZ(0);
  transform-style: preserve-3d;
  transform-origin: center bottom;
  animation: previewFloat 4.5s var(--ease-out) infinite alternate;
  transition: transform 0.3s ease, box-shadow 0.3s ease
}

.preview-card:hover {
  transform: perspective(900px) rotateX(4deg) rotateY(-6deg) translateY(-6px) translateZ(12px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 -1px 0 rgba(4, 52, 44, 0.04) inset,
    6px 14px 0 -6px rgba(4, 52, 44, 0.08),
    18px 40px 48px -14px rgba(4, 52, 44, 0.28),
    0 14px 28px rgba(4, 52, 44, 0.12);
  animation-play-state: paused
}

@keyframes previewFloat {
  from {
    transform: perspective(900px) rotateX(8deg) rotateY(-12deg) translateY(0)
  }
  to {
    transform: perspective(900px) rotateX(6deg) rotateY(-10deg) translateY(-8px)
  }
}

[data-theme="dark"] .preview-card {
  border-color: rgba(43, 191, 151, 0.18);
  border-top-color: rgba(231, 247, 241, 0.12);
  box-shadow:
    0 1px 0 rgba(231, 247, 241, 0.08) inset,
    8px 18px 0 -6px rgba(0, 0, 0, 0.25),
    14px 32px 40px -12px rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.3)
}

[data-theme="dark"] .preview-card:hover {
  box-shadow:
    0 1px 0 rgba(231, 247, 241, 0.1) inset,
    6px 14px 0 -6px rgba(0, 0, 0, 0.3),
    18px 40px 48px -14px rgba(0, 0, 0, 0.55),
    0 14px 28px rgba(0, 0, 0, 0.35)
}

.preview-card h3 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
  font-size: var(--fs-body)
}

.preview-card h3 i { color: var(--color-primary) }
.preview-card p { font-size: var(--fs-badge) }

/* ===== 2 Stats showcase ===== */
.stats-showcase {
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border)
}

.stats-showcase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 36rem;
  margin-inline: auto
}

.stats-showcase-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 40%;
  padding: 0 var(--space-4);
  text-align: center;
  gap: 0.4rem
}

.stats-showcase-item + .stats-showcase-item {
  border-right: 1px solid var(--color-border)
}

.stats-showcase-item > i {
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-primary);
  background: none
}

.stats-showcase-item > i.is-coral { color: var(--color-secondary) }

.stats-showcase-value {
  display: block;
  font-size: var(--fs-trust);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-primary)
}

.stats-showcase-value.is-coral { color: var(--color-secondary) }

.stats-showcase-label {
  display: block;
  font-size: var(--fs-badge);
  color: var(--color-text-muted)
}

/* ===== 3 Problem ===== */
.problem-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem)
}

.problem-col {
  display: grid;
  gap: var(--space-2);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border-radius: var(--radius-card);
  background: var(--gradient-soft);
  box-shadow: var(--shadow-soft);
  text-align: right;
  justify-items: start;
  transition: transform var(--dur-med) var(--ease-out)
}

.problem-col:hover { transform: translateY(-4px) }

.problem-col i {
  display: block;
  margin: 0;
  font-size: 1.65rem;
  line-height: 1;
  color: var(--color-primary);
  background: transparent;
  justify-self: start
}

.problem-col h3 { font-size: var(--fs-h3) }

/* ===== 4 Comparison characters ===== */
.compare-v2 {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem)
}

.compare-v2-col {
  padding: 0.55rem 0.65rem 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--gradient-card);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out)
}

.compare-v2-col:hover {
  transform: translateY(-6px) perspective(900px) rotateX(2deg);
  box-shadow: var(--shadow-lift)
}

.compare-v2-col.without {
  background: linear-gradient(180deg, var(--color-neutral-soft) 0%, var(--color-surface) 100%)
}

.compare-v2-col.with-side {
  background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-surface) 100%)
}

.compare-v2-col h3 {
  margin: 0.45rem 0 0.65rem;
  font-size: var(--fs-h3);
  text-align: center
}

.compare-v2-col.without h3 { color: var(--color-text-muted) }
.compare-v2-col.with-side h3 { color: var(--color-primary) }

.compare-media {
  display: grid;
  place-items: center;
  overflow: visible;
  width: min(100%, 260px);
  margin: 0 auto;
  background: transparent;
  box-shadow: none
}

.compare-img {
  width: 100%;
  max-width: 260px;
  height: auto;
  object-fit: contain;
  background: transparent;
  transform: scale(1);
  transition: transform var(--dur-med) var(--ease-out)
}

.compare-v2-col:hover .compare-img { transform: scale(1.03) }

.compare-points {
  display: grid;
  gap: 0;
  direction: rtl;
  text-align: right
}

.compare-point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  justify-items: start;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  font-size: var(--fs-body)
}

.compare-point:last-child { border-bottom: none }
.compare-point i {
  font-size: 1.65rem;
  line-height: 1.2;
  background: transparent;
  justify-self: start
}

.compare-v2-col.without .compare-point i { color: var(--color-sand-deep) }
.compare-v2-col.with-side .compare-point i { color: var(--color-primary) }

.compare-v2-split {
  display: none;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--color-primary), transparent);
  margin: 0 auto
}

/* ===== 5 Quality process ===== */
.quality-wrap { position: relative }

.quality-steps {
  display: grid;
  position: relative;
  gap: var(--space-4)
}

.quality-steps::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3px;
  background: var(--color-primary);
  opacity: 0.55;
  transform: translateX(50%);
  z-index: 0
}

.quality-step {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-3);
  align-items: start
}

.quality-track {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem
}

.quality-step:not(:last-child) .quality-track::after { display: none }

.quality-node {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 8px 20px var(--color-primary-glow)
}

.quality-body {
  min-width: 0;
  padding-top: 0.35rem
}

.quality-body h3 {
  margin-bottom: 0.3rem;
  font-size: var(--fs-body)
}

.quality-body p {
  margin: 0;
  font-size: var(--fs-badge);
  color: var(--color-text-muted)
}

.quality-body .verified-badge {
  display: inline-flex;
  margin: 0.35rem 0 0.5rem
}

/* ===== 6 Feature grid ===== */
.feature-grid {
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem)
}

.feature-card {
  display: grid;
  gap: var(--space-2);
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: var(--radius-card);
  background: var(--gradient-card);
  box-shadow: var(--shadow-soft);
  text-align: right;
  justify-items: start;
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out)
}

.feature-card:hover {
  transform: translateY(-6px) perspective(900px) rotateX(3deg);
  box-shadow: var(--shadow-lift)
}

.feature-card .icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: start;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.75rem;
  line-height: 1
}

.feature-card h3 { font-size: var(--fs-h3) }
.feature-card p { font-size: var(--fs-badge); color: var(--color-text-muted) }

.feature-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--fs-badge);
  transition: color 0.15s ease, transform 0.15s ease
}

.feature-link:hover {
  color: var(--color-accent);
  transform: translateX(-3px)
}
.feature-actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4)
}

/* ===== 7 How process - خط مربوط بمركز كل رقم ===== */
.process-v2 { position: relative }

.process-v2-steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0
}

.process-v2-step {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: var(--space-3);
  align-items: start
}

.process-v2-track {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem
}

.process-v2-step:not(:last-child) .process-v2-track::after {
  content: "";
  position: absolute;
  top: 3.25rem;
  bottom: calc(-1 * var(--space-4));
  right: 50%;
  width: 3px;
  background: var(--color-primary);
  transform: translateX(50%);
  opacity: 0.55;
  z-index: 0
}

.process-v2-node {
  display: inline-flex;
  position: relative;
  z-index: 1;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-primary);
  color: #FFFFFF;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 6px var(--color-primary-light), 0 8px 20px var(--color-primary-glow)
}

.process-v2-body {
  min-width: 0;
  padding-top: 0.35rem
}

.process-v2-body h3 {
  margin-bottom: 0.35rem;
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--color-text)
}

.process-v2-body p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--color-text-muted)
}

/* ===== 8 Payment safety ===== */
.pay-safe {
  width: min(100% - 1.75rem, var(--container));
  margin: var(--space-4) auto;
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: 1.75rem;
  background: var(--gradient-soft);
  box-shadow: var(--shadow-soft)
}

.pay-safe .container {
  width: 100%;
  margin: 0
}

.pay-safe-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  direction: rtl;
  text-align: right
}

.pay-safe-inner > i {
  display: block;
  margin: 0.15rem 0 0;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--color-primary);
  background: transparent;
  justify-self: start
}

.pay-safe-inner h2 { margin-bottom: var(--space-2) }

/* ===== Specialist CTA ===== */
.specialist-cta {
  width: min(100% - 1.75rem, var(--container));
  margin: var(--space-4) auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  border-radius: 1.75rem;
  background: var(--gradient-band);
  color: #FFFFFF;
  box-shadow: var(--shadow-lift)
}

.specialist-cta .container,
.trust-band .container {
  width: 100%;
  margin: 0
}
.specialist-cta h2 { color: #FFFFFF }
.specialist-cta p { color: rgba(255, 255, 255, 0.9) }

.cta-points {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
  direction: rtl;
  text-align: right
}

.cta-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2);
  align-items: start;
  justify-items: start;
  font-size: var(--fs-body);
  color: #FFFFFF
}

.cta-points i {
  font-size: 1.35rem;
  line-height: 1.2;
  color: #FFFFFF;
  background: transparent;
  justify-self: start
}

/* ===== 11 Trust band ===== */
.trust-band {
  width: min(100% - 1.75rem, var(--container));
  margin: var(--space-4) auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
  border-radius: 1.75rem;
  background: linear-gradient(145deg, #04342C 0%, #0B5A48 45%, #1A8A7A 100%);
  color: #FFFFFF;
  box-shadow: var(--shadow-lift)
}

.trust-band .section-head h2,
.trust-band .section-head p { color: #FFFFFF }

.trust-band .section-head p { opacity: 0.88 }

.trust-stats {
  display: grid;
  gap: var(--space-4);
  text-align: center
}

.trust-stat strong {
  display: block;
  font-size: var(--fs-trust);
  font-weight: 700;
  line-height: 1.1;
  color: #FFFFFF
}

.trust-stat.is-coral strong { color: var(--color-secondary) }

.trust-stat span {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-badge);
  opacity: 0.88;
  color: #FFFFFF
}

/* ===== 12 FAQ Accordion ===== */
.faq-list { display: grid; gap: 0 }

.faq-item {
  border-bottom: 1px solid var(--color-border)
}

.faq-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: none;
  background: transparent;
  text-align: right;
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text)
}

.faq-btn i {
  transition: transform 0.2s ease;
  color: var(--color-primary)
}

.faq-item.is-open .faq-btn i { transform: rotate(180deg) }

.faq-panel {
  display: none;
  padding: 0 0 var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-primary-muted)
}

.faq-item.is-open .faq-panel { display: block }

/* ===== Categories page ===== */
.categories-page .section .container {
  width: min(100% - clamp(3rem, 8vw, 6rem), var(--container))
}

.cat-circles-page {
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 2.5rem);
  justify-items: start
}

.cat-circle-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: inherit;
  text-align: right;
  transition: color 0.15s ease
}

.cat-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.85rem;
  line-height: 1;
  transition: transform 0.15s ease, color 0.15s ease
}

.cat-circle-item:hover .cat-circle {
  transform: scale(1.08);
  background: transparent;
  color: var(--color-accent)
}

.cat-circle-item strong { font-size: var(--fs-body) }

@media screen and (max-width: 321px) {
  .feature-grid { grid-template-columns: 1fr; gap: 1rem }
  .cat-circles-page { grid-template-columns: 1fr; gap: 1.15rem }
  .stats-showcase-row { max-width: none }
  .stats-showcase-item > i { font-size: 2.1rem }
  .stats-showcase-value { font-size: 1.75rem }
  .hero-v2 {
    width: min(100% - 1.35rem, var(--container));
    margin-top: 0.75rem;
    padding: 1.15rem 0.95rem;
    border-radius: 1.2rem
  }
  .hero-v2-copy h1 { font-size: 1.25rem; line-height: 1.4 }
  .hero-v2-lead { font-size: 0.88rem; margin-bottom: 0.9rem }
  .hero-search-row {
    gap: 0.65rem;
    padding: 0.65rem
  }
  .hero-visual-wrap { margin-top: 1rem }
  .preview-card {
    padding: 0.85rem;
    font-size: 0.85rem
  }
  .compare-media,
  .compare-img {
    max-width: 170px;
    width: min(100%, 170px)
  }
  .compare-v2-col { padding: 0.4rem 0.5rem 0.7rem }
  .compare-v2-col h3 { margin: 0.35rem 0 0.5rem; font-size: 1rem }
  .compare-point {
    padding: 0.55rem 0;
    font-size: 0.88rem;
    gap: 0.55rem
  }
  .compare-point i { font-size: 1.15rem }
  .feature-card {
    padding: 0.95rem;
    gap: 0.55rem
  }
  .feature-card .icon-circle { font-size: 2.1rem }
  .feature-card h3 { font-size: 1rem }
  .feature-card p { font-size: 0.82rem }
  .cat-circle { font-size: 1.45rem }
  .cat-circle-item strong { font-size: 0.9rem }
  .stats-showcase { padding: var(--space-4) 0 }
  .stats-showcase-item > i { font-size: 1.85rem }
  .stats-showcase-value { font-size: 1.5rem }
  .stats-showcase-label { font-size: 0.8rem }
  .problem-grid { gap: 0.85rem }
  .process-v2-steps { gap: 0.95rem }
  .quality-steps { gap: 0.95rem }
  .trust-stats { gap: 0.85rem }
  .trust-stat strong { font-size: 1.35rem }
  .faq-btn { font-size: 0.9rem; padding: 0.75rem 0 }
  .specialist-cta {
    width: min(100% - 1.35rem, var(--container));
    padding: 1.25rem 0.95rem;
    border-radius: 1.2rem
  }
  .specialist-cta h2 { font-size: 1.15rem }
  .specialist-cta p { font-size: 0.88rem }
  .cta-points { gap: 0.55rem }
}

@media screen and (max-width: 376px) {
  .feature-grid { grid-template-columns: 1fr }
  .cat-circles-page { grid-template-columns: 1fr }
  .stats-showcase-item { padding: 0 var(--space-3) }
}

@media screen and (max-width: 394px) {
  .hero-search-row { grid-template-columns: 1fr }
  .trust-stats { grid-template-columns: 1fr 1fr }
}

@media screen and (min-width: 394px) {
  .problem-grid { grid-template-columns: 1fr }
  .feature-grid { grid-template-columns: 1fr }
  .cat-circles-page { grid-template-columns: 1fr 1fr }
  .trust-stats { grid-template-columns: 1fr 1fr }
}

@media screen and (min-width: 767px) {
  .hero-v2-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-5)
  }
  .hero-search-row {
    grid-template-columns: 1fr 1.2fr auto;
    align-items: center
  }
  .preview-card { display: block }
  .problem-grid { grid-template-columns: 1fr 1fr }
  .compare-v2 {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-4)
  }
  .compare-media,
  .compare-img { max-width: 300px; width: min(100%, 300px) }
  .compare-v2-split { display: block }
  .quality-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: start
  }
  .quality-steps::before { display: none }
  .quality-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0
  }
  .quality-track {
    width: 100%;
    height: 3rem;
    margin-bottom: 1.1rem
  }
  .quality-step:not(:last-child) .quality-track::after {
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    width: 50%;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.55;
    transform: translateY(-50%);
    z-index: 0
  }
  .quality-step:not(:first-child) .quality-track::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 50%;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.55;
    transform: translateY(-50%);
    z-index: 0
  }
  .quality-body {
    max-width: 11.5rem;
    padding-top: 0
  }
  .quality-body .verified-badge {
    margin: 0.5rem auto 0.6rem
  }
  .feature-grid { grid-template-columns: 1fr 1fr }
  .process-v2-steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    align-items: start
  }
  .process-v2-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0
  }
  .process-v2-track {
    width: 100%;
    height: 3.5rem;
    margin-bottom: 1.1rem
  }
  .process-v2-step:not(:last-child) .process-v2-track::after {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    width: 50%;
    height: 3px;
    transform: translateY(-50%)
  }
  .process-v2-step:not(:first-child) .process-v2-track::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    left: 50%;
    height: 3px;
    background: var(--color-primary);
    opacity: 0.55;
    transform: translateY(-50%);
    z-index: 0
  }
  .process-v2-node {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.25rem
  }
  .process-v2-body {
    max-width: 11.5rem;
    padding-top: 0
  }
  .process-v2-body h3 {
    font-size: var(--fs-body);
    font-weight: 700
  }
  .cat-circles-page { grid-template-columns: repeat(4, 1fr) }
  .trust-stats { grid-template-columns: repeat(3, 1fr) }
}

@media screen and (min-width: 1023px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr) }
  .cat-circles-page { grid-template-columns: repeat(5, 1fr) }
  .hero-v2 { padding: clamp(2.5rem, 4vw, 4rem) clamp(1.25rem, 3vw, 2.5rem) }
}

@media screen and (min-width: 1439px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr) }
  .cat-circles-page { grid-template-columns: repeat(5, 1fr) }
}