/* ═══════════════════════════════════════════════════
   Atomi — Non-Hero Cinematic Continuity
   Keeps the frozen Hero untouched. These rules only
   connect the remaining sections with restrained light,
   depth, and scroll-driven atmospheric movement.
   ═══════════════════════════════════════════════════ */

:where(.categories, .trust-section, .marketplace, .statistics, .why, .testimonials, .pricing, .cta-section, .footer) {
  --section-shift: 0px;
  --section-glow: 0.72;
}

@media (min-width: 1121px) {
  :where(.categories, .trust-section, .marketplace, .statistics, .why, .testimonials, .pricing, .cta-section, .footer) {
    isolation: isolate;
  }

  :where(.categories-inner, .trust-section-inner, .marketplace-inner, .statistics-inner, .why-inner, .testimonials-inner, .pricing-inner, .cta-section-inner, .footer-inner) {
    position: relative;
    z-index: 2;
  }

  .categories::before,
  .trust-section::before,
  .marketplace::before,
  .statistics::before,
  .why::before,
  .testimonials::before,
  .pricing::before,
  .cta-section::after,
  .footer::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    transform: translate3d(0, var(--section-shift), 0);
    opacity: var(--section-glow);
    will-change: transform, opacity;
  }

  .categories::before {
    left: 0;
    right: 0;
    bottom: -112px;
    height: 230px;
    background:
      radial-gradient(ellipse 38% 70% at 18% 38%, oklch(0.84 0.12 72 / 0.18), transparent 68%),
      radial-gradient(ellipse 34% 64% at 82% 26%, oklch(0.72 0.16 294 / 0.08), transparent 70%),
      linear-gradient(180deg, transparent 0%, oklch(0.99 0.012 82 / 0.54) 48%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 12%, black 88%, transparent 100%);
  }

  .trust-section::before {
    left: 7%;
    right: 7%;
    top: -64px;
    height: 180px;
    border-radius: 999px;
    background:
      radial-gradient(ellipse 52% 80% at 50% 42%, oklch(0.84 0.12 72 / 0.13), transparent 70%),
      linear-gradient(90deg, transparent 0%, oklch(0.62 0.035 76 / 0.16) 34%, oklch(0.72 0.16 294 / 0.16) 50%, oklch(0.62 0.035 76 / 0.12) 66%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, black 34%, transparent 100%);
  }

  .marketplace::before {
    left: 4%;
    right: 4%;
    top: 20%;
    height: 54%;
    border-radius: 999px;
    background:
      radial-gradient(ellipse 48% 52% at 28% 52%, oklch(0.84 0.12 72 / 0.10), transparent 66%),
      radial-gradient(ellipse 42% 60% at 72% 42%, oklch(0.72 0.16 294 / 0.075), transparent 68%),
      linear-gradient(102deg, transparent 0%, oklch(0.99 0.012 82 / 0.36) 48%, transparent 100%);
    mask-image: radial-gradient(ellipse at center, black 0%, black 42%, transparent 72%);
  }

  .statistics::before {
    left: 12%;
    right: 12%;
    top: -38px;
    height: 116px;
    border-top: 1px solid oklch(0.62 0.035 76 / 0.16);
    background:
      radial-gradient(ellipse 42% 120% at 50% 0%, oklch(0.84 0.12 72 / 0.10), transparent 64%),
      linear-gradient(90deg, transparent 0%, oklch(0.72 0.16 294 / 0.08) 50%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, black 16%, black 84%, transparent 100%);
  }

  .why::before {
    left: -4%;
    top: 8%;
    width: 54%;
    height: 76%;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 62% 58% at 46% 44%, oklch(0.84 0.12 72 / 0.16), transparent 64%),
      radial-gradient(ellipse 42% 44% at 60% 58%, oklch(0.72 0.16 294 / 0.08), transparent 68%);
  }

  .testimonials::before {
    right: 8%;
    top: -22px;
    width: min(420px, 34vw);
    height: 160px;
    border-radius: 999px;
    background:
      radial-gradient(ellipse 60% 84% at 50% 50%, oklch(0.84 0.12 72 / 0.12), transparent 68%),
      linear-gradient(90deg, transparent, oklch(0.72 0.16 294 / 0.06), transparent);
    mask-image: linear-gradient(180deg, transparent 0%, black 30%, transparent 100%);
  }

  .pricing::before {
    left: 50%;
    top: 48%;
    width: min(760px, 54vw);
    height: 300px;
    border-radius: 50%;
    background:
      radial-gradient(ellipse 52% 62% at 46% 42%, oklch(0.84 0.12 72 / 0.12), transparent 64%),
      radial-gradient(ellipse 42% 56% at 62% 58%, oklch(0.72 0.16 294 / 0.075), transparent 68%);
    transform: translate3d(-50%, var(--section-shift), 0);
  }

  .cta-section::after {
    left: 8%;
    right: 8%;
    top: -22px;
    height: 120px;
    background:
      radial-gradient(ellipse 48% 80% at 50% 0%, oklch(0.84 0.12 72 / 0.13), transparent 68%),
      linear-gradient(90deg, transparent 0%, oklch(0.72 0.16 294 / 0.10) 50%, transparent 100%);
    mask-image: linear-gradient(180deg, black 0%, transparent 86%);
  }

  .footer {
    position: relative;
    overflow: hidden;
  }

  .footer::before {
    left: 50%;
    top: -92px;
    width: min(820px, 64vw);
    height: 210px;
    border: 1px solid oklch(0.62 0.035 76 / 0.16);
    border-radius: 50%;
    background:
      radial-gradient(ellipse 60% 84% at 50% 0%, oklch(0.84 0.12 72 / 0.10), transparent 72%),
      radial-gradient(ellipse 34% 50% at 74% 36%, oklch(0.72 0.16 294 / 0.07), transparent 72%);
    transform: translate3d(-50%, var(--section-shift), 0) rotate(-2deg);
  }
}

/* Card and control polish shared across the non-Hero experience. */
.cat-card:focus-visible,
.trust-feature:focus-within,
.testimonial-card:focus-within,
.pricing-card:focus-within {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

.trust-feature {
  position: relative;
}

.mkt-card::before,
.pricing-card::before,
.testimonial-card::after,
.trust-feature::after,
.stat-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.34s var(--ease);
}

.mkt-card::before,
.pricing-card::before,
.testimonial-card::after {
  background:
    linear-gradient(135deg, oklch(0.99 0.012 82 / 0.34), transparent 42%),
    radial-gradient(circle at 84% 14%, oklch(0.84 0.12 72 / 0.13), transparent 32%);
}

.trust-feature::after,
.stat-card::after {
  background: linear-gradient(90deg, transparent 0%, oklch(0.84 0.12 72 / 0.10) 50%, transparent 100%);
}

.mkt-card:hover::before,
.mkt-card:focus-visible::before,
.pricing-card:hover::before,
.pricing-card:focus-within::before,
.testimonial-card:hover::after,
.testimonial-card:focus-within::after,
.trust-feature:hover::after,
.trust-feature:focus-within::after,
.stat-card:hover::after {
  opacity: 1;
}

.mkt-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  background:
    linear-gradient(115deg, oklch(0.99 0.012 82 / 0.16), transparent 34%),
    radial-gradient(circle at 80% 12%, oklch(0.84 0.12 72 / 0.16), transparent 30%);
  transition: opacity 0.3s var(--ease);
}

.mkt-card:hover .mkt-cover::after,
.mkt-card:focus-visible .mkt-cover::after {
  opacity: 0.3;
}

.mkt-cover,
.mkt-body,
.pricing-card > *,
.testimonial-card > *,
.trust-feature > *,
.stat-card > * {
  position: relative;
  z-index: 1;
}

.pricing-badge,
.mkt-logo,
.mkt-verified {
  z-index: 3;
}

.why-visual-stage {
  transform: translateZ(0);
}

@media (min-width: 1121px) {
  .why-visual-stage::before {
    transform: translate3d(0, var(--section-shift), 0);
  }

  .why-visual-stage::after {
    transform: translate3d(0, var(--section-shift), 0);
  }

  .why-floating-card {
    box-shadow:
      0 14px 34px oklch(0.5 0.12 294 / 0.12),
      0 0 24px oklch(0.84 0.12 72 / 0.08),
      inset 0 1px 0 oklch(0.99 0.01 84 / 0.62);
  }

  .cta-section-inner::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
      linear-gradient(105deg, oklch(0.99 0.012 82 / 0.18), transparent 30%),
      radial-gradient(ellipse 34% 76% at 86% 50%, oklch(0.99 0.012 82 / 0.18), transparent 62%);
  }

  .cta-section-inner > * {
    position: relative;
    z-index: 1;
  }
}

.footer-links a,
.footer-contact a {
  border-radius: 8px;
}

.footer-links a:focus-visible,
.footer-contact a:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 4px;
}

@media (max-width: 1120px) {
  .mkt-card::before,
  .pricing-card::before,
  .testimonial-card::after,
  .trust-feature::after,
  .stat-card::after {
    display: none;
  }

  .mkt-cover::after {
    opacity: 0.12;
  }
}