/* ============================================
   Levin Video Production — Landing
   Red / Black / White + chrome 3D accents
============================================ */

:root {
  --red: #E10B1E;
  --red-deep: #6B0A14;
  --red-dark: #3a0609;
  --black: #0a0b0e;
  --black-2: #121318;
  --surface: #181a20;
  --white: #ffffff;
  --cream: #f6f5f1;
  --gray-50: #f2f3f5;
  --gray-100: #e6e7eb;
  --gray-300: #c0c3ca;
  --gray-500: #6b6f78;
  --gray-700: #2c2e35;

  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;

  --shadow-card: 0 10px 40px rgba(225, 11, 30, 0.08), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-lift: 0 24px 80px rgba(225, 11, 30, 0.18);

  --ff-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --ff-display: "Onest", "Inter", sans-serif;

  --container: 1240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--ff-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============ HEADER ============ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(10, 11, 14, 0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 24px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--white);
  line-height: 1;
}
.logo-img {
  display: block;
  height: 28px;
  width: auto;
}
.logo-img-light { display: none; }
html.light .logo-img-dark { display: none; }
html.light .logo-img-light { display: block; }
.logo-word {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.logo-arrow {
  display: inline-block;
  width: 0.55em;
  height: 0.68em;
  color: var(--red);
  margin: 0 -0.04em;
  transform: translateY(0.08em);
  filter: drop-shadow(0 0 10px rgba(225,11,30,0.55));
}
.logo-ai {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  font-family: var(--ff-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  background: var(--red);
  color: var(--white);
  border-radius: 4px;
  line-height: 1;
  /* The logo PNG has ~7.7px top padding and ~1.7px bottom padding (when rendered
     at 28px tall). Align the AI square with the visible "n" glyph, not the
     image bounds, by anchoring to the top with an offset that matches the n's
     top edge. */
  align-self: flex-start;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(225,11,30,0.45),
              inset 0 1px 0 rgba(255,255,255,0.25);
}
.logo-sm { font-size: 22px; }

.nav {
  display: flex;
  gap: 32px;
  font-weight: 500;
  font-size: 15px;
}
.nav a {
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
  position: relative;
}
.nav a:hover { color: var(--white); }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--red);
  transition: width 0.25s;
}
.nav a:hover::after { width: 100%; }

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.25s, background 0.2s;
  white-space: nowrap;
}
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-xl { padding: 20px 36px; font-size: 17px; }

.btn-primary {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(225, 11, 30, 0.35),
              inset 0 1px 0 rgba(255,255,255,0.2);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25), transparent 50%);
  pointer-events: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(225, 11, 30, 0.5),
              inset 0 1px 0 rgba(255,255,255,0.25);
}

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.25);
}

.btn-arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}
.btn:hover .btn-arrow { transform: translateX(3px); }

/* ============ HERO ============ */
.hero {
  position: relative;
  padding: 140px 0 20px;
  min-height: min(100vh, 820px);
  overflow: hidden;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(225,11,30,0.22), transparent 60%),
              radial-gradient(800px 400px at 20% 100%, rgba(107,10,20,0.3), transparent 60%),
              var(--black);
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, transparent 0%, var(--black) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.grid-lines {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
}
.grid-lines-red {
  background-image:
    linear-gradient(rgba(225,11,30,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(225,11,30,0.08) 1px, transparent 1px);
}

/* === 3D CHROME SHAPES (liquid metal PNG renders) === */
.shape-3d {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
  object-fit: contain;
  will-change: transform;
  z-index: 1;
  /* Base target opacity (GSAP animates to this via --shape-opacity) */
  opacity: var(--shape-opacity, 0.85);
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.55))
          drop-shadow(0 10px 30px rgba(225,11,30,0.22));
  /* Soft perimeter fade — hides hard cutoffs on all 4 edges when the shape is
     clipped by a section boundary. Intersects a vertical and horizontal gradient
     so every side gets a ~14% fade. */
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 6%, #000 14%, #000 86%, rgba(0,0,0,0.4) 94%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, rgba(0,0,0,0.4) 6%, #000 14%, #000 86%, rgba(0,0,0,0.4) 94%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 6%, #000 14%, #000 86%, rgba(0,0,0,0.4) 94%, transparent 100%),
    linear-gradient(90deg,  transparent 0%, rgba(0,0,0,0.4) 6%, #000 14%, #000 86%, rgba(0,0,0,0.4) 94%, transparent 100%);
          mask-composite: intersect;
}

/* Light-section shapes: desaturate and blend with cream bg */
.section-light .shape-3d {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 20px 50px rgba(0,0,0,0.15));
  z-index: 0;
}

/* --- Hero --- */
.shape-hero-1 {
  --shape-opacity: 0.9;
  width: 520px; height: 780px;
  top: -120px; right: -140px;
}
.shape-hero-2 {
  --shape-opacity: 0.55;
  width: 340px; height: 500px;
  bottom: -160px; left: -120px;
}

/* --- Pain (dark) --- */
.shape-pain {
  --shape-opacity: 0.4;
  width: 560px; height: 400px;
  top: 40px; right: -180px;
}

/* --- Result (light) --- */
.shape-result {
  --shape-opacity: 0.55;
  width: 440px; height: 560px;
  top: -40px; right: -160px;
}

/* --- Program (dark) --- */
.shape-program {
  --shape-opacity: 0.5;
  width: 360px; height: 560px;
  top: 12%; left: -140px;
}

/* --- Author (light) --- */
.shape-author {
  --shape-opacity: 0.45;
  width: 600px; height: 420px;
  bottom: -120px; right: -200px;
}

/* --- Testimonials (dark) --- */
.shape-testimonials {
  --shape-opacity: 0.45;
  width: 440px; height: 620px;
  top: 60px; left: -160px;
}

/* --- Price (feature — big center shape) --- */
.shape-price {
  --shape-opacity: 0.55;
  width: 640px; height: 640px;
  top: 50%; left: 50%;
  margin: -320px 0 0 -320px;
  z-index: 0;
}

/* --- FAQ (light) --- */
.shape-faq {
  --shape-opacity: 0.5;
  width: 380px; height: 480px;
  bottom: -140px; left: -140px;
}

/* --- Final CTA --- */
.shape-final {
  --shape-opacity: 0.6;
  width: 760px; height: 1000px;
  bottom: -340px; right: -240px;
}

.red-glow {
  position: absolute;
  width: 700px; height: 700px;
  top: 20%; left: 28%;
  margin-left: -350px;
  background: radial-gradient(circle, rgba(225,11,30,0.25), transparent 60%);
  filter: blur(40px);
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding-bottom: 80px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(225,11,30,0.12);
  border: 1px solid rgba(225,11,30,0.3);
  color: #ffb3ba;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.tag-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

.hero-title {
  font-family: var(--ff-display);
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}

.title-accent {
  color: var(--red);
  position: relative;
  display: inline-block;
}
.title-sep {
  display: inline-block;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
  margin: 0 0.15em;
  transform: translateY(-0.04em);
}
html.light .title-sep { color: rgba(10, 11, 14, 0.2); }
.title-accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 6%;
  height: 14%;
  background: var(--red);
  opacity: 0.18;
  z-index: -1;
  filter: blur(8px);
}

.hero-sub {
  font-size: 19px;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}

.hero-meta {
  display: flex;
  gap: 40px;
  list-style: none;
  flex-wrap: wrap;
}
.hero-meta li {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-meta strong {
  color: var(--white);
  font-size: 20px;
  font-family: var(--ff-display);
  font-weight: 600;
}

/* HERO VISUAL */
.hero-visual {
  position: relative;
  aspect-ratio: 1/1;
  max-width: 560px;
  justify-self: end;
  width: 100%;
  z-index: 3;
}

.visual-frame {
  position: absolute;
  top: 5%; left: 10%;
  width: 62%;
  aspect-ratio: 9/16;
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 10px 30px rgba(225,11,30,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  background: #000;
  transform: rotate(-4deg);
  z-index: 2;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 92%, rgba(0,0,0,0.25));
  pointer-events: none;
}
.visual-badge {
  position: absolute;
  bottom: 14px; left: 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--white);
}

.visual-shot {
  position: absolute;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.08);
  overflow: hidden;
}
.visual-shot-1 {
  width: 40%;
  aspect-ratio: 9/16;
  top: 0; right: 0;
  transform: rotate(6deg);
  z-index: 3;
}
.visual-shot-2 {
  width: 38%;
  aspect-ratio: 9/16;
  bottom: 4%;
  right: -14%;
  transform: rotate(3deg);
  z-index: 1;
}

.chrome-orb {
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  top: 55%; left: -5%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #c0c3ca 25%, #2a2d33 70%, #0a0b0e 100%);
  box-shadow:
    inset -10px -20px 40px rgba(255,255,255,0.15),
    0 20px 50px rgba(225,11,30,0.4);
  z-index: 4;
  animation: float 8s ease-in-out infinite;
}

/* ============ SECTIONS ============ */
.section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}
/* Tighten the first section right after hero — hero already has bottom padding + fade */
#pain { padding-top: 40px; }
.section > .container { position: relative; z-index: 3; }

.section-dark { background: var(--black); }
.section-black { background: var(--black); }
.section-light {
  background: var(--cream);
  color: var(--black);
}

/* Soft seams: fade top/bottom overlays that blend with previous/next section.
   Multi-stop gradients approximate ease-in-out for a perceptually smooth fade. */
.section-seam-top::before,
.section-seam-bottom::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 260px;
  pointer-events: none;
  z-index: 2;
}
/* dark → light: LIGHT section gets a dark fade at its top (smoothly appears) */
.section-light.section-seam-top::before {
  top: 0;
  height: 280px;
  background: linear-gradient(180deg,
    #0a0b0e 0%,
    rgba(10,11,14,0.97) 8%,
    rgba(10,11,14,0.88) 18%,
    rgba(10,11,14,0.72) 30%,
    rgba(10,11,14,0.52) 45%,
    rgba(10,11,14,0.30) 62%,
    rgba(10,11,14,0.14) 78%,
    rgba(10,11,14,0.04) 92%,
    transparent 100%);
}
/* light → dark: LIGHT section gets a dark fade at its bottom */
.section-light.section-seam-bottom::after {
  bottom: 0;
  height: 280px;
  background: linear-gradient(0deg,
    #0a0b0e 0%,
    rgba(10,11,14,0.97) 8%,
    rgba(10,11,14,0.88) 18%,
    rgba(10,11,14,0.72) 30%,
    rgba(10,11,14,0.52) 45%,
    rgba(10,11,14,0.30) 62%,
    rgba(10,11,14,0.14) 78%,
    rgba(10,11,14,0.04) 92%,
    transparent 100%);
}
/* Dark section's seam-top is intentionally empty in dark theme — the previous
   light section's seam-bottom already carries the full cream→dark fade. Adding
   a cream tint here would create a visible "lighter band" right at the boundary. */
.section-dark.section-seam-top::before {
  display: none;
}

.section-head {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.section-head-tight { margin-bottom: 32px; }

.eyebrow {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  padding: 6px 14px;
  border: 1px solid rgba(225,11,30,0.35);
  border-radius: 999px;
  margin-bottom: 24px;
}
.eyebrow-dark {
  color: var(--red);
  border-color: rgba(225,11,30,0.25);
}

.section-title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 4.4vw, 56px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.section-title-dark { color: var(--black); }

/* In dark theme, force the result section title to white (visible on cream bg) */
:root:not(.light) #result .section-title { color: var(--white); }

.section-lead {
  margin-top: 20px;
  font-size: 18px;
  color: rgba(255,255,255,0.65);
}
.section-title-dark + .section-lead { color: var(--gray-500); }

/* ============ PAIN ============ */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.pain-card {
  position: relative;
  padding: 36px 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--black-2));
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s, border-color 0.3s;
  overflow: hidden;
}
.pain-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}
.pain-card:hover {
  transform: translateY(-4px);
  border-color: rgba(225,11,30,0.3);
}
.pain-card:hover::before { opacity: 1; }
.pain-num {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.pain-card h3 {
  font-family: var(--ff-display);
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.pain-card p {
  color: rgba(255,255,255,0.65);
  font-size: 16px;
}

/* Sub-section divider inside PAIN block */
.pain-divider {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 56px 0 28px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.pain-divider::before {
  content: "";
  width: 36px;
  height: 2px;
  background: rgba(255, 255, 255, 0.35);
}
.pain-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent);
}
.pain-divider--opp { color: var(--red); }
.pain-divider--opp::before { background: var(--red); }
.pain-divider--opp::after { background: linear-gradient(90deg, rgba(225, 11, 30, 0.5), transparent); }

/* Opportunity card variant — always-on red top border */
.pain-card--opp::before { opacity: 1; }
.pain-card--opp {
  background: linear-gradient(180deg, rgba(225, 11, 30, 0.08), var(--black-2));
  border-color: rgba(225, 11, 30, 0.18);
}
.pain-card--opp:hover {
  border-color: rgba(225, 11, 30, 0.45);
}

/* ============ RESULT ============ */
.section-light .eyebrow { background: rgba(225,11,30,0.06); }

.result-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.result-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.3s, box-shadow 0.3s;
}
.result-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(225,11,30,0.15);
}
.result-img {
  aspect-ratio: 9/16;
  background-size: cover;
  background-position: center;
  background-color: #222;
}
.result-body { padding: 22px 22px 26px; }
.result-body h3 {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.result-body p { color: var(--gray-500); font-size: 14px; line-height: 1.45; }

/* Result grid responsive: 4 → 2 columns on tablet, 1 column on mobile */
@media (max-width: 980px) {
  .result-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .result-grid { grid-template-columns: 1fr; }
  .result-img { aspect-ratio: 9/14; }
}

/* ============ PROGRAM ============ */
.modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.module {
  position: relative;
  padding: 40px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(225,11,30,0.06), transparent 40%),
    var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.3s, border-color 0.3s;
}
.module::after {
  content: "";
  position: absolute;
  top: 36px; right: 36px;
  width: 16px; height: 16px;
  background: var(--red);
  clip-path: polygon(20% 0, 100% 50%, 20% 100%, 10% 100%, 60% 50%, 10% 0);
  opacity: 0.4;
}
.module:hover {
  transform: translateY(-4px);
  border-color: rgba(225,11,30,0.3);
}
.module-head { margin-bottom: 24px; }
.module-num {
  display: inline-block;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
  background: rgba(225,11,30,0.12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
  letter-spacing: 0.08em;
}
.module-head h3 {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.module-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.module-list li {
  position: relative;
  padding-left: 22px;
  color: rgba(255,255,255,0.75);
  font-size: 16px;
}
.module-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  background: var(--red);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ============ STRIP ============ */
.strip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.strip-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.06);
}
.strip-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}
.strip-item:hover img { transform: scale(1.04); }
.strip-item span {
  position: absolute;
  bottom: 16px; left: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--white);
}

/* ============ AUTHOR ============ */
.author-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: center;
}
.author-photo-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: 0 30px 60px rgba(0,0,0,0.2);
}
.author-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
}
.author-badge {
  position: absolute;
  bottom: 20px; left: 20px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(225,11,30,0.4);
}
.author-badge svg { width: 20px; height: 20px; color: var(--white); }
.author-badge strong {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.author-badge span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 2px;
}

.author-content .eyebrow { margin-bottom: 20px; }
.author-content .section-title { text-align: left; margin-bottom: 6px; }
.author-role {
  color: var(--red);
  font-weight: 500;
  margin-bottom: 24px;
  font-size: 17px;
}
.author-bio { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.author-bio p { color: var(--gray-700); font-size: 17px; }
.author-stats {
  display: flex;
  gap: 32px;
  list-style: none;
  border-top: 1px solid rgba(0,0,0,0.1);
  padding-top: 24px;
  flex-wrap: wrap;
}
.author-stats li { display: flex; flex-direction: column; gap: 4px; }
.author-stats strong {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--red);
  line-height: 1;
}
.author-stats span { font-size: 13px; color: var(--gray-500); }

/* ============ TESTIMONIALS ============ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.testimonial {
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface), var(--black-2));
  border: 1px solid rgba(255,255,255,0.06);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.tm-stars {
  color: var(--red);
  font-size: 18px;
  letter-spacing: 2px;
}
.tm-text {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.55;
}
.tm-person {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.tm-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tm-avatar-1 { background: radial-gradient(circle at 35% 30%, #ffd6da, #E10B1E 60%, #3a0609); }
.tm-avatar-2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c0c3ca 40%, #2a2d33); }
.tm-avatar-3 { background: radial-gradient(circle at 35% 30%, #ffb3ba, #6B0A14 50%, #1a0308); }
.tm-avatar-4 { background: radial-gradient(circle at 35% 30%, #ffffff, #E10B1E 50%, #3a0609); }
.tm-person strong {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 15px;
}
.tm-person span {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ============ PRICE ============ */
.section-price {
  position: relative;
  background: linear-gradient(180deg, #0a0b0e, #140306 60%, #0a0b0e);
  overflow: hidden;
}
.price-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.price-card {
  position: relative;
  z-index: 2;
  padding: 56px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(225,11,30,0.1), rgba(225,11,30,0.02)),
    rgba(10,11,14,0.7);
  border: 1px solid rgba(225,11,30,0.3);
  backdrop-filter: blur(20px);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
  box-shadow: 0 40px 100px rgba(225,11,30,0.15);
}
.price-left .eyebrow { margin-bottom: 20px; }
.price-title {
  font-family: var(--ff-display);
  font-size: clamp(32px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.price-desc { color: rgba(255,255,255,0.7); margin-bottom: 28px; font-size: 17px; }

.price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
}
.price-features svg {
  width: 14px; height: 14px;
  color: var(--red);
  margin-top: 6px;
  flex-shrink: 0;
}
.price-features .bonus {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(225,11,30,0.1);
  border: 1px dashed rgba(225,11,30,0.4);
  border-radius: 12px;
}
.price-features .bonus strong { color: var(--red); margin-right: 4px; }

.price-right {
  padding: 32px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.price-amount {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}
.price-old {
  font-size: 18px;
  color: rgba(255,255,255,0.4);
  text-decoration: line-through;
}
.price-new {
  font-family: var(--ff-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
  text-shadow: 0 0 30px rgba(225,11,30,0.4);
}
.price-note {
  font-size: 13px;
  color: var(--red);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
  margin-top: 6px;
}
.price-right .btn { width: 100%; margin-bottom: 12px; }
.price-pay {
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}
.price-timer {
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(225,11,30,0.08);
  border: 1px solid rgba(225,11,30,0.25);
}
.price-timer-label {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 10px;
}
.price-timer-clock {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
}
.price-timer-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.price-timer-num {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.price-timer-unit {
  margin-top: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.price-timer-sep {
  font-family: var(--ff-display);
  font-size: 28px;
  font-weight: 700;
  color: rgba(255,255,255,0.35);
  line-height: 1;
  padding-top: 2px;
}

/* ============ FAQ ============ */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: var(--white);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-item[open] {
  border-color: rgba(225,11,30,0.4);
  box-shadow: 0 10px 30px rgba(225,11,30,0.08);
}
.faq-item summary {
  list-style: none;
  padding: 22px 28px;
  cursor: pointer;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--black);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  background: var(--red);
  border-radius: 2px;
  transition: transform 0.3s;
}
.faq-icon::before {
  top: 50%; left: 0;
  width: 100%; height: 2px;
  transform: translateY(-50%);
}
.faq-icon::after {
  top: 0; left: 50%;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
.faq-item[open] .faq-icon::after { transform: translateX(-50%) rotate(90deg); }
.faq-body {
  padding: 0 28px 24px;
  color: var(--gray-500);
  font-size: 16px;
  line-height: 1.6;
}

/* ============ FINAL CTA ============ */
.final-cta {
  position: relative;
  background: linear-gradient(180deg, #0a0b0e 0%, #0a0b0e 30%, #13050a 65%, #1a0308 100%);
  overflow: hidden;
  padding: 100px 0;
  text-align: center;
}
/* Top/bottom fade overlays — hide shape-final's clipped edges where the figure
   meets the section boundary. Overlays use the section bg color so the shape
   dissolves into the background instead of showing a sharp cut. */
.final-cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(180deg, #0a0b0e 0%, rgba(10,11,14,0.7) 40%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.final-cta::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 140px;
  background: linear-gradient(0deg, #1a0308 0%, rgba(26,3,8,0.7) 40%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
.final-title {
  font-family: var(--ff-display);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 20px;
}
.final-sub {
  color: rgba(255,255,255,0.6);
  font-size: 17px;
  margin-bottom: 36px;
}

/* ============ FOOTER ============ */
.footer {
  background: #050608;
  padding: 56px 0 40px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
}
.footer-brand p {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}
.footer-contacts { text-align: center; }
.footer-label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 12px;
  font-family: var(--ff-display);
  font-weight: 600;
}
.footer-buttons {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-contact {
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  transition: all 0.2s;
}
.btn-contact:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-1px);
}
.footer-legal {
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  font-size: 13px;
}
.footer-legal a {
  color: rgba(255,255,255,0.4);
  transition: color 0.2s;
}
.footer-legal a:hover { color: var(--red); }

/* ============ GSAP: initial hidden state (FOUC prevention) ============
   Applied only when <html class="has-js"> — i.e. JS is ready to animate.
   Without JS, elements remain visible (graceful degradation).
   GSAP later animates these to visible via autoAlpha/y. */
html.has-js .tag,
html.has-js .hero-title,
html.has-js .hero-sub,
html.has-js .hero-cta,
html.has-js .hero-meta,
html.has-js .hero-visual,
html.has-js .section-head,
html.has-js .pain-card,
html.has-js .result-card,
html.has-js .module,
html.has-js .strip-item,
html.has-js .testimonial,
html.has-js .author-photo-wrap,
html.has-js .author-content,
html.has-js .price-card,
html.has-js .faq-item,
html.has-js .final-inner {
  opacity: 0;
  visibility: hidden;
}
/* Shapes also start hidden — revealed via scroll or on load */
html.has-js .shape-3d { opacity: 0; }

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-visual { justify-self: center; max-width: 440px; }
  .author-grid { grid-template-columns: 1fr; gap: 40px; }
  .author-photo-wrap { max-width: 400px; justify-self: center; }
  .price-card { grid-template-columns: 1fr; padding: 40px; }
  .pain-grid, .modules, .result-grid, .testimonials-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; text-align: center; }
  .footer-contacts { text-align: center; }
  .footer-legal { justify-content: center; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .nav { display: none; }
  .section { padding: 80px 0; }
  .hero { padding-top: 110px; }
  .section-head { margin-bottom: 44px; }
  .container { padding: 0 18px; }
  .strip-grid { grid-template-columns: 1fr; }
  .price-card { padding: 28px; }
  .price-new { font-size: 44px; }
  .price-timer-cell { min-width: 48px; }
  .price-timer-num { font-size: 26px; }
  .price-timer-sep { font-size: 22px; }
  .pain-card, .module { padding: 28px 22px; }
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { justify-content: center; }
  .hero-meta { gap: 24px; }
  .author-stats { gap: 20px; }
  .author-stats strong { font-size: 26px; }
  .final-cta { padding: 80px 0; }
  .chrome-blob-1 { width: 320px; height: 320px; }
  .chrome-blob-2 { width: 240px; height: 240px; }
}

@media (max-width: 420px) {
  .btn-xl { padding: 16px 24px; font-size: 15px; }
  .logo { font-size: 22px; }
  .logo-arrow { width: 18px; height: 18px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.15s !important; }
  .chrome-blob, .chrome-orb, .tag-dot { animation: none; }
  .marquee-track { animation: none; }
}

/* ============================================================
   [LIGHT THEME] — togglable via html.light
   ROLLBACK: delete this entire block (from the opening comment
   to the closing /* [/LIGHT THEME] */ marker). Nothing outside
   this block references it, so removal is clean.
   ============================================================ */

/* --- Theme toggle button --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  margin-right: 4px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: var(--white);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.theme-toggle:hover { background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.theme-toggle .theme-icon--sun { display: none; }
html.light .theme-toggle {
  border-color: rgba(10,11,14,0.12);
  background: rgba(10,11,14,0.04);
  color: var(--black);
}
html.light .theme-toggle:hover { background: rgba(10,11,14,0.08); }
html.light .theme-toggle .theme-icon--sun { display: block; }
html.light .theme-toggle .theme-icon--moon { display: none; }

/* --- Body & hero --- */
html.light body {
  background: var(--white);
  color: var(--black);
}
html.light .hero {
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(225,11,30,0.09), transparent 60%),
    radial-gradient(800px 400px at 20% 100%, rgba(225,11,30,0.05), transparent 60%),
    var(--white);
}
html.light .grid-lines {
  background-image:
    linear-gradient(rgba(10,11,14,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,11,14,0.05) 1px, transparent 1px);
  opacity: 0.5;
}

/* --- Header --- */
html.light .site-header {
  background: rgba(255,255,255,0.7);
  border-bottom-color: rgba(10,11,14,0.08);
}
html.light .nav a { color: rgba(10,11,14,0.75); }
html.light .nav a:hover { color: var(--black); }

/* --- Buttons --- */
html.light .btn-ghost {
  background: rgba(10,11,14,0.05);
  color: var(--black);
  border: 1px solid rgba(10,11,14,0.1);
}
html.light .btn-ghost:hover { background: rgba(10,11,14,0.1); }

/* --- Text colors --- */
html.light .hero-title,
html.light .hero-sub,
html.light .section-head h2,
html.light .tag,
html.light .module-head h3,
html.light .pain-card h3,
html.light .testimonial p,
html.light .author-content h2,
html.light .faq-item summary,
html.light .faq-item p,
html.light .final-inner h2,
html.light .price-new { color: var(--black); }

html.light .hero-sub,
html.light .pain-card p,
html.light .module-list li,
html.light .author-text p,
html.light .faq-item p,
html.light .hero-meta,
html.light .tm-person span,
html.light .tm-text { color: rgba(10,11,14,0.7); }
html.light .tm-person strong { color: var(--black); }

/* --- Cards (pain / module / testimonial) --- */
html.light .pain-card,
html.light .module,
html.light .testimonial {
  background: linear-gradient(180deg, var(--white), #f7f7f9);
  border-color: rgba(10,11,14,0.08);
  box-shadow: 0 10px 32px rgba(10,11,14,0.06);
}
html.light .pain-card:hover,
html.light .module:hover {
  border-color: rgba(225,11,30,0.35);
  box-shadow: 0 14px 36px rgba(225,11,30,0.12);
}

/* Eyebrow pills */
html.light .eyebrow {
  background: rgba(225,11,30,0.08);
  color: var(--red);
}
html.light .section-light .eyebrow { background: rgba(225,11,30,0.1); }

/* --- Result cards (already on light cream section) --- */
html.light .result-card {
  background: var(--white);
  border-color: rgba(10,11,14,0.08);
  box-shadow: 0 10px 32px rgba(10,11,14,0.06);
}

/* --- Strip items --- */
html.light .strip-item {
  background: var(--white);
  border: 1px solid rgba(10,11,14,0.08);
  box-shadow: 0 10px 32px rgba(10,11,14,0.06);
}
html.light .strip-caption {
  background: rgba(255,255,255,0.85);
  color: var(--black);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(10,11,14,0.08);
}

/* --- Author section --- */
html.light .author-stats strong { color: var(--black); }
html.light .author-stats span { color: rgba(10,11,14,0.65); }

/* In dark theme, force author-stats text to white (readable over silver shape on cream bg) */
:root:not(.light) .author-stats strong { color: var(--white); }
:root:not(.light) .author-stats span { color: rgba(255,255,255,0.7); }

/* --- Price card --- */
html.light .price-card {
  background: var(--white);
  border-color: rgba(10,11,14,0.08);
  box-shadow: 0 20px 60px rgba(10,11,14,0.1);
}
html.light .price-features li { color: rgba(10,11,14,0.75); }
html.light .price-old { color: rgba(10,11,14,0.4); }
html.light .price-timer { background: rgba(225,11,30,0.06); border-color: rgba(225,11,30,0.2); }
html.light .price-timer-label { color: rgba(10,11,14,0.7); }
html.light .price-timer-num { color: var(--black); }
html.light .price-timer-unit { color: rgba(10,11,14,0.5); }
html.light .price-timer-sep { color: rgba(10,11,14,0.3); }

/* --- FAQ --- */
html.light .faq-item {
  background: var(--white);
  border: 1px solid rgba(10,11,14,0.08);
}
html.light .faq-item summary { color: var(--black); }

/* --- Section backgrounds — flip dark to white, keep cream as warm accent --- */
html.light .section-dark { background: var(--white); }
html.light .section-black { background: var(--white); }
html.light .section-light { background: #f4f2ec; }
html.light .section-price {
  background: linear-gradient(180deg, var(--white), #faf9f7 60%, var(--white));
}

/* Seam gradients — flip dark fades to white fades, with smooth multi-stop curves */
html.light .section-light.section-seam-top::before {
  background: linear-gradient(180deg,
    var(--white) 0%,
    rgba(255,255,255,0.95) 12%,
    rgba(255,255,255,0.82) 26%,
    rgba(255,255,255,0.62) 42%,
    rgba(255,255,255,0.38) 60%,
    rgba(255,255,255,0.18) 78%,
    rgba(255,255,255,0.06) 92%,
    transparent 100%);
}
html.light .section-light.section-seam-bottom::after {
  background: linear-gradient(0deg,
    var(--white) 0%,
    rgba(255,255,255,0.95) 12%,
    rgba(255,255,255,0.82) 26%,
    rgba(255,255,255,0.62) 42%,
    rgba(255,255,255,0.38) 60%,
    rgba(255,255,255,0.18) 78%,
    rgba(255,255,255,0.06) 92%,
    transparent 100%);
}
html.light .section-dark.section-seam-top::before,
html.light .final-cta.section-seam-top::before {
  background: linear-gradient(180deg,
    rgba(244,242,236,0.75) 0%,
    rgba(244,242,236,0.52) 22%,
    rgba(244,242,236,0.28) 48%,
    rgba(244,242,236,0.10) 75%,
    transparent 100%);
}

/* --- Final CTA --- */
html.light .final-cta {
  background:
    radial-gradient(1200px 600px at 50% 0%, rgba(225,11,30,0.08), transparent 60%),
    var(--white);
  color: var(--black);
}
html.light .final-inner h2 em { color: var(--red); }

/* --- Footer --- */
html.light .footer {
  background: var(--white);
  color: rgba(10,11,14,0.7);
  border-top: 1px solid rgba(10,11,14,0.08);
}
html.light .footer a { color: rgba(10,11,14,0.75); }

/* --- Shapes: switch to multiply blend everywhere, and dim them
       via filter:opacity() (which composes with GSAP's inline
       opacity — so the fade-in still animates AND runtime theme
       toggles instantly reduce visual weight). --- */
html.light .shape-3d {
  mix-blend-mode: multiply;
  filter: drop-shadow(0 16px 40px rgba(10,11,14,0.08)) opacity(0.5);
}
html.light .shape-price {
  filter: drop-shadow(0 16px 40px rgba(10,11,14,0.08)) opacity(0.25);
}

/* --- Hero-visual overlays / video --- */
html.light .hero-visual::before {
  background: linear-gradient(180deg, rgba(10,11,14,0.02), transparent 40%, rgba(10,11,14,0.06) 100%);
}

/* Hero → next section fade: flip the black tail to white so the seam
   disappears instead of turning grey against the white pain section. */
html.light .hero::after {
  background: linear-gradient(180deg, transparent 0%, var(--white) 100%);
}

/* --- Logo + hero meta (patched for readability on white) --- */
html.light .logo { color: var(--black); }
html.light .hero-meta li { color: rgba(10,11,14,0.55); }
html.light .hero-meta strong { color: var(--black); }

/* Reveal-hidden (animation targets) still apply — no change needed. */
/* [/LIGHT THEME] ============================================ */