/* ============================================================
   Crane Sections — Per-section styles for the cinematic redesign
   ============================================================ */

/* ---- Fixed gradient background layer ---- */
.bg-layer {
  position: fixed; inset: 0; z-index: -2;
  pointer-events: none;
  background: var(--bg);
  transition: background 3.5s ease;
}
/* Night mode: match the hero image sky — deep navy top, warm mauve mid, dark bottom */
[data-theme="night"] .bg-layer {
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%, rgba(45,30,60,0.4) 0%, transparent 70%),
    linear-gradient(
      180deg,
      #0d0b18 0%,
      #161028 20%,
      #1e1535 35%,
      #2a1e40 45%,
      #332848 50%,
      #2a1e40 55%,
      #1e1535 65%,
      #161028 80%,
      #0d0b18 100%
    );
}

/* Dusk mode: golden-hour gradient */
[data-theme="dusk"] .bg-layer {
  background:
    radial-gradient(ellipse 120% 80% at 50% 40%, rgba(210,120,40,0.32) 0%, transparent 70%),
    linear-gradient(
      180deg,
      #3a2820 0%,
      #46312a 20%,
      #593a30 35%,
      #714632 45%,
      #86523a 50%,
      #714632 55%,
      #593a30 65%,
      #46312a 80%,
      #3a2820 100%
    );
}

/* ---- Hero background image layers (Day/Dusk/Night crossfade) ---- */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.001;
  transition: opacity 3.5s ease;
  pointer-events: none;
  will-change: opacity;
}
.hero-bg-day { background-image: url('../assets/hero-bg-day.webp'); }
.hero-bg-dusk { background-image: url('../assets/hero-bg-dusk.webp'); }
.hero-bg-night { background-image: url('../assets/hero-bg-night.webp'); }
[data-theme="day"] .hero-bg-day { opacity: 1; }
[data-theme="dusk"] .hero-bg-dusk { opacity: 1; }
[data-theme="night"] .hero-bg-night { opacity: 1; }
/* Default (no data-theme attribute): show night */
:root:not([data-theme]) .hero-bg-night { opacity: 1; }

/* ---- Noise texture overlay ---- */
.noise-overlay {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: url('../assets/noise-256.png');
  background-repeat: repeat;
  background-size: 256px 256px;
  opacity: var(--noise-opacity, 0.035);
  mix-blend-mode: overlay;
}

/* ---- Global section defaults ---- */
section {
  position: relative;
  padding: var(--section-pad) 0;
  overflow: hidden;
}
/* Dark mode: sections are transparent so the fixed bg gradient shows through */
[data-theme="night"] section {
  background: transparent !important;
}
section h2 {
  font-size: 2.2rem; font-weight: 800;
  letter-spacing: -0.02em; text-align: center;
}
section .section-sub {
  text-align: center; color: var(--slate-400);
  margin-top: 12px; font-size: 1.05rem;
  max-width: 600px; margin-left: auto; margin-right: auto;
}

/* ============================================================
   SECTION 1: HERO — "The Hook"
   ============================================================ */
.hero {
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  text-align: center;
  padding: 100px 24px 40px;
  position: relative;
  overflow: hidden;
}

/* Hero background — cover with focal point on the person (left-center).
   cover guarantees no gaps on ANY screen size. The image's dark sky
   region (center-right) naturally sits behind the centered text. */
.hero::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: url('../assets/hero-bg.jpg') no-repeat;
  background-size: cover;
  background-position: 35% center; /* keeps person+spine visible from the left */
  opacity: 0.25;
  pointer-events: none;
}
/* Gradient vignette — stacked per-theme layers for smooth crossfade */
.hero::after { content: none; }
.hero-vignette {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: 0.001;
  transition: opacity 3.5s ease;
  will-change: opacity;
}
.hero-vignette-day {
  background:
    linear-gradient(180deg, #e0edff 0%, transparent 20%, transparent 85%, #e0edff 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #e0edff 100%);
}
.hero-vignette-dusk {
  background:
    linear-gradient(180deg, #3a2820 0%, transparent 20%, transparent 85%, #3a2820 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #3a2820 100%);
}
.hero-vignette-night {
  background:
    linear-gradient(180deg, #0d0b18 0%, transparent 20%, transparent 85%, #0d0b18 100%),
    radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #0d0b18 100%);
}
[data-theme="day"] .hero-vignette-day { opacity: 1; }
[data-theme="dusk"] .hero-vignette-dusk { opacity: 1; }
[data-theme="night"] .hero-vignette-night { opacity: 1; }
:root:not([data-theme]) .hero-vignette-night { opacity: 1; }

/* Hide old hero-bg.jpg when new hero-bg layers are active */
[data-theme="day"] .hero::before,
[data-theme="dusk"] .hero::before,
[data-theme="night"] .hero::before {
  opacity: 0;
}

/* Day mode hero text — contrast over bright sky */
[data-theme="day"] .hero h1 {
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="day"] .hero .overline {
  color: #f0ecf8;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
[data-theme="day"] .hero .subtitle {
  color: #f5f0ff;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.25);
}
[data-theme="day"] .hero .trust-item {
  color: #e0d8ec;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}

/* Night mode hero text — contrast (lifts text off image) */
[data-theme="night"] .hero h1 {
  color: #f0ecf8;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="night"] .hero .overline {
  color: #c8c0dc;
  text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
[data-theme="night"] .hero .subtitle {
  color: #ddd6ec;
  text-shadow: 0 1px 14px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="night"] .hero .trust-item {
  color: #b0a8c4;
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.hero-content {
  max-width: 720px;
  position: relative; z-index: 2;
}
/* Hero text transitions faster than the rest of the page */
.hero h1, .hero h1 .highlight, .hero .overline,
.hero .subtitle, .hero .trust-item {
  transition: color 1.2s ease, text-shadow 1.2s ease;
}
.hero .overline {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--slate-400);
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.2s forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero h1 {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800; line-height: 1.15;
  letter-spacing: -0.03em;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.4s forwards;
}
.hero h1 .highlight {
  color: var(--blue-600);
  transition: color 3.5s ease;
}
.hero .subtitle {
  margin-top: 24px; font-size: 1.15rem;
  color: var(--slate-400); line-height: 1.7;
  max-width: 560px; margin-left: auto; margin-right: auto;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.6s forwards;
}
.hero .cta-cluster {
  margin-top: 36px;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.8s forwards;
}
.hero .store-buttons {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
}
.hero .trust-row {
  margin-top: 20px; display: flex; gap: 24px;
  flex-wrap: wrap; justify-content: center;
  opacity: 0;
  animation: fadeInUp 0.8s ease 1.0s forwards;
}
.hero .trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--slate-400);
}
.hero .trust-item .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-400);
}
.hero .scroll-prompt {
  position: absolute; bottom: 32px;
  left: 50%; transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  animation: fadeInUp 0.8s ease 1.2s forwards;
}

/* ============================================================
   SECTION 2: SCROLL-DRIVEN DEMO
   ============================================================ */
.demo-section {
  min-height: 160vh;
  position: relative;
  padding: 0;
}

/* Demo narrative panels (fade in as they scroll through view) */
.demo-panels {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 20vh 24px 10vh;
  gap: 10vh;
}
.demo-panel {
  max-width: 480px; text-align: center;
  padding: 24px 32px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.demo-panel.active { opacity: 1; }
.demo-panel h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.demo-panel p { font-size: 0.95rem; color: var(--slate-400); line-height: 1.6; }

[data-theme="night"] .demo-panel {
  background: rgba(30,41,59,0.85);
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ============================================================
   SECTION 3: BIOMECHANICAL CASCADE
   ============================================================ */
.cascade-section { padding: var(--section-pad) 0; }
.cascade-section h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  max-width: 700px; margin: 0 auto;
}

/* Spine degradation SVG viewer */
.spine-viewer {
  display: flex; justify-content: center;
  align-items: center; gap: 40px;
  margin-top: 48px;
  flex-wrap: wrap;
}
.spine-stage {
  text-align: center;
  opacity: 0.3;
  transition: opacity 0.5s ease, transform 0.3s ease;
}
.spine-stage.active { opacity: 1; transform: scale(1.05); }
.spine-stage .force-label {
  font-size: 1.4rem; font-weight: 800;
  margin-top: 8px;
}
.spine-stage .angle-label {
  font-size: 0.8rem; color: var(--slate-400);
}

/* Body cascade diagram */
.cascade-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 48px; align-items: start;
}
.cascade-body {
  display: flex; justify-content: center;
  position: sticky; top: 20vh;
}
.cascade-cards {
  display: flex; flex-direction: column; gap: 20px;
}
.cascade-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cascade-card.visible { opacity: 1; transform: translateY(0); }
.cascade-card .system-label {
  font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.cascade-card .system-label.spine { color: var(--red-400); }
.cascade-card .system-label.lungs { color: var(--amber-400); }
.cascade-card .system-label.brain { color: var(--purple-500); }
.cascade-card .system-label.head { color: var(--red-500); }
.cascade-card .system-label.gut { color: var(--amber-500); }
.cascade-card .stat-source {
  font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--slate-400);
  margin-top: 10px;
}

[data-theme="night"] .cascade-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ============================================================
   SECTION 4: FINANCIAL ANCHOR
   ============================================================ */
.financial-section { padding: var(--section-pad) 0; }

/* Cost counter */
.cost-counter {
  text-align: center; margin: 48px 0;
}
.cost-counter .amount {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--red-400), var(--amber-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cost-counter .label {
  font-size: 1.1rem; color: var(--slate-400);
  margin-top: 8px;
}

/* Compounding timeline */
.timeline-table {
  max-width: 700px; margin: 32px auto 0;
  border-collapse: collapse; width: 100%;
}
.timeline-table th, .timeline-table td {
  padding: 14px 20px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.timeline-table th {
  font-size: 0.8rem; color: var(--slate-500);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.timeline-table td { font-size: 0.9rem; color: var(--slate-400); }
.timeline-table td:first-child { font-weight: 600; color: var(--text); }
.timeline-row {
  opacity: 0; transform: translateX(-12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.timeline-row.visible { opacity: 1; transform: translateX(0); }

/* ============================================================
   SECTION 5: WINDOW OF HOPE
   ============================================================ */
.hope-section { padding: var(--section-pad) 0; }
.hope-stat {
  text-align: center; margin: 48px 0 32px;
}
.hope-stat .big-number {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--green-400), var(--teal-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stat cards (used across multiple sections) */
.stat-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; margin-top: 32px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px; padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.stat-card .stat-number {
  font-size: 1.8rem; font-weight: 800;
  color: var(--blue-600);
}
.stat-card .stat-desc {
  font-size: 0.9rem; color: var(--slate-400);
  margin-top: 4px; line-height: 1.5;
}
.stat-card .stat-source {
  font-size: 0.7rem; color: var(--slate-500);
  margin-top: 8px;
}
[data-theme="night"] .stat-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(80,100,130,0.10);
}
[data-theme="night"] .stat-card .stat-number { opacity: 0.9; }

/* Night mode: hero highlight — vivid cyan */
[data-theme="night"] .hero h1 .highlight {
  color: #00ffd8;
}

/* Dark mode: cost counter — warm red/amber, muted */
[data-theme="night"] .cost-counter .amount {
  background: linear-gradient(135deg, #e06070, #d4a040);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode: hope stat — cyan glow from hero image */
[data-theme="night"] .hope-stat .big-number {
  background: linear-gradient(135deg, #00d4b8, #00e5d0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark mode: feature card accents use cyan instead of blue */
[data-theme="night"] .feature-card .icon {
  background: rgba(0,229,208,0.1);
}
[data-theme="night"] .feature-card .icon svg {
  stroke: #00d4b8;
}

/* Dark mode: demo panel glass effect */
[data-theme="night"] .demo-panel {
  background: rgba(28,23,48,0.8);
  border-color: rgba(120,100,160,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* Dark mode: privacy box accent */
[data-theme="night"] .privacy-box {
  border-color: rgba(0,229,208,0.2);
}

/* Dark mode: pricing featured card */
[data-theme="night"] .price-card.featured {
  background: linear-gradient(135deg, #1c1730, rgba(0,212,184,0.08));
  border-color: #00d4b8;
  box-shadow: 0 4px 24px rgba(0,212,184,0.15);
}
[data-theme="night"] .price-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(120,100,160,0.10);
}

/* Dark mode: science cards */
[data-theme="night"] .science-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(120,100,160,0.10);
}
[data-theme="night"] .science-card .quote {
  border-left-color: #00d4b8;
}

/* Dark mode: cascade cards */
[data-theme="night"] .cascade-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(120,100,160,0.10);
}

/* Dark mode: scroll cue text */
[data-theme="night"] .scroll-cue { color: #6e6882; }
[data-theme="night"] .scroll-cue:hover { color: #00d4b8; }
[data-theme="night"] .section-cue { color: #6e6882; }

/* Dark mode: blue text utility uses cyan */
[data-theme="night"] .text-blue { color: #00d4b8; }

/* Dark mode: buttons */
[data-theme="night"] .btn-gradient {
  box-shadow: 0 4px 32px rgba(0,212,184,0.35), 0 0 60px rgba(0,212,184,0.1);
}
[data-theme="night"] .btn-gradient:hover {
  box-shadow: 0 6px 40px rgba(0,212,184,0.45), 0 0 80px rgba(0,212,184,0.15);
}
[data-theme="night"] .btn-primary {
  background: #3070d0;
  box-shadow: 0 2px 12px rgba(48,112,208,0.3);
}

/* Dark mode: disclaimer */
[data-theme="night"] .disclaimer {
  background: transparent;
}
[data-theme="night"] .disclaimer-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(120,100,160,0.10);
}
/* Dark mode: footer blends into the gradient */
[data-theme="night"] footer {
  background: rgba(13,11,24,0.6);
  border-top-color: rgba(120,100,160,0.10);
}

/* ============================================================
   SECTION 6: PRODUCT REVEAL — "Meet Crane"
   ============================================================ */
.product-section { padding: var(--section-pad) 0; }

/* SVG morph container */
.morph-container {
  display: flex; justify-content: center;
  align-items: center; gap: 32px;
  margin: 48px 0;
}

/* Features grid */
.features-grid {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.feature-card .icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
}
.feature-card h3 { margin-top: 16px; font-size: 1.1rem; font-weight: 700; }
.feature-card p { margin-top: 8px; font-size: 0.9rem; color: var(--slate-400); line-height: 1.6; }

/* Privacy emphasis box */
.privacy-box {
  background: var(--surface);
  border: 2px solid rgba(59,130,246,0.2);
  border-radius: 16px; padding: 32px;
  margin-top: 48px; text-align: center;
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.privacy-box h3 { font-size: 1.2rem; font-weight: 700; }
.privacy-box p { margin-top: 12px; font-size: 0.95rem; color: var(--slate-400); line-height: 1.7; }

/* App screenshots in device frames */
.app-screenshots {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 48px; max-width: 700px;
  margin-left: auto; margin-right: auto;
}
.app-screenshot {
  text-align: center;
}
.app-screenshot img {
  width: 100%; border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.ss-pill {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
  background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.ss-pill-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ss-pill-good { color: #0d9488; }
.ss-pill-good .ss-pill-dot { background: #0d9488; }
.ss-pill-poor { color: #dc2626; }
.ss-pill-poor .ss-pill-dot { background: #dc2626; }

[data-theme="night"] .app-screenshot img { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
[data-theme="night"] .ss-img-light { display: none; }
[data-theme="night"] .ss-img-dark { display: block !important; }
.ss-img-dark { display: none; }

/* ============================================================
   SECTION 7: PRICE REFRAME
   ============================================================ */
.pricing-section { padding: var(--section-pad) 0; }
.pricing-grid {
  margin-top: 48px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  max-width: 780px; margin-left: auto; margin-right: auto;
}
.price-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 32px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.price-card.featured {
  border-color: var(--blue-500);
  background: linear-gradient(135deg, var(--surface), rgba(59, 130, 246, 0.06));
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.15);
  position: relative;
}
.price-card .tier {
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--blue-400);
}
.price-card .price { margin-top: 8px; font-size: 2.4rem; font-weight: 800; }
.price-card .price .period { font-size: 0.9rem; font-weight: 400; color: var(--slate-400); }
.price-card .desc { margin-top: 4px; font-size: 0.85rem; color: var(--slate-400); }
.price-card ul {
  margin-top: 20px; list-style: none;
  display: flex; flex-direction: column; gap: 10px;
}
.price-card li {
  font-size: 0.9rem; color: var(--slate-300);
  display: flex; align-items: flex-start; gap: 8px;
}
.price-card li::before {
  content: ''; width: 18px; height: 18px; flex-shrink: 0;
  background: var(--green-400); border-radius: 50%;
  display: inline-block; margin-top: 2px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;
}

/* Best Value badge */
.best-value-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 4px 14px; border-radius: 20px;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/* Comparison tables */
.compare-table-wrapper {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  max-width: 700px; margin: 32px auto 0;
}
.compare-table {
  border-collapse: collapse; width: 100%; min-width: 440px;
}
.compare-table th, .compare-table td {
  padding: 14px 20px; text-align: left;
  border-bottom: 1px solid var(--border);
}
.compare-table th {
  font-size: 0.8rem; color: var(--slate-500); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.compare-table td { font-size: 0.9rem; color: var(--slate-400); }
.compare-table td:first-child { font-weight: 600; color: var(--text); }
.compare-table .crane-col { color: var(--blue-600); font-weight: 700; }

[data-theme="night"] .price-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
[data-theme="night"] .price-card.featured {
  background: linear-gradient(135deg, var(--surface), rgba(59, 130, 246, 0.12));
  box-shadow: 0 4px 24px rgba(59, 130, 246, 0.25);
}

/* ============================================================
   SECTION 8: BEHAVIORAL SCIENCE + TRUST
   ============================================================ */
.science-section { padding: var(--section-pad) 0; }
.science-grid {
  margin-top: 48px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  align-items: start;
}
.science-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  min-height: 160px;
}
.science-card .quote {
  font-size: 1.05rem; font-style: italic; color: var(--slate-300);
  line-height: 1.6; border-left: 3px solid var(--blue-500); padding-left: 16px;
  min-height: 4.8em;
}
.science-card .cite {
  margin-top: 12px; font-size: 0.78rem; color: var(--slate-500);
}
[data-theme="night"] .science-card { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ============================================================
   SECTION 9: FAQ
   ============================================================ */
.faq { padding: var(--section-pad) 0; }
.faq h2 { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 48px; }
.faq-grid {
  max-width: 800px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 40px;
}
.faq-category { display: flex; flex-direction: column; }
.faq-category h3 {
  font-size: 1rem; font-weight: 700; color: var(--blue-600);
  margin-bottom: 12px; padding-left: 4px;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; padding: 16px 4px;
  font-size: 0.95rem; font-weight: 600; color: var(--text);
  list-style: none; transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--slate-500); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--blue-400); }
.faq-answer {
  padding: 0 4px 16px;
  font-size: 0.9rem; color: var(--slate-400); line-height: 1.7;
}

/* ============================================================
   SECTION 10: FINAL CTA
   ============================================================ */
.final-cta {
  padding: 80px 0;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
}
.final-cta .cta-buttons {
  display: flex; gap: 16px; justify-content: center;
  flex-wrap: wrap; margin-top: 32px;
}
.final-cta .trust-badges {
  display: flex; gap: 24px; justify-content: center;
  flex-wrap: wrap; margin-top: 24px;
  font-size: 0.8rem; color: var(--slate-400);
}

/* ============================================================
   DISCLAIMER
   ============================================================ */
.disclaimer { padding: 48px 0; }
.disclaimer-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 24px 28px;
  max-width: 800px; margin: 0 auto;
}
.disclaimer-box h3 { font-size: 0.9rem; font-weight: 700; color: var(--slate-400); margin-bottom: 12px; }
.disclaimer-box p { font-size: 0.8rem; color: var(--slate-500); line-height: 1.7; }
[data-theme="night"] .disclaimer-box { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }

/* ---- Scroll micro-cue between sections ---- */
.section-cue {
  text-align: center; padding: 24px 0;
  font-size: 0.85rem; font-style: italic;
  color: var(--slate-400);
}

/* ============================================================
   DUSK MODE OVERRIDES
   ============================================================ */
/* Sections transparent so fixed bg shows */
[data-theme="dusk"] section {
  background: transparent !important;
}

/* Hero text contrast */
[data-theme="dusk"] .hero h1 {
  color: #fff8ee;
  text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
[data-theme="dusk"] .hero h1 .highlight {
  color: #ffe082;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
[data-theme="dusk"] .hero .overline {
  color: #f0e8d8;
  text-shadow: 0 1px 12px rgba(0,0,0,0.7);
}
[data-theme="dusk"] .hero .subtitle {
  color: #f5efe0;
  text-shadow: 0 2px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dusk"] .hero .trust-item { color: #dcd0b8; text-shadow: 0 1px 10px rgba(0,0,0,0.5); }
[data-theme="dusk"] .hero::before { opacity: 0; }

/* Demo panels */
[data-theme="dusk"] .demo-panel {
  background: rgba(87,62,53,0.8);
  border-color: rgba(232,180,130,0.2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

/* Cascade / stat / science cards */
[data-theme="dusk"] .cascade-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(232,180,130,0.14);
}
[data-theme="dusk"] .stat-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(232,180,130,0.14);
}
[data-theme="dusk"] .science-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(232,180,130,0.14);
}
[data-theme="dusk"] .science-card .quote { border-left-color: #e6ac40; }

/* Feature card accents use amber */
[data-theme="dusk"] .feature-card .icon { background: rgba(230,172,64,0.14); }
[data-theme="dusk"] .feature-card .icon svg { stroke: #e6ac40; }

/* Privacy box */
[data-theme="dusk"] .privacy-box { border-color: rgba(230,172,64,0.22); }

/* Pricing */
[data-theme="dusk"] .price-card {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(232,180,130,0.14);
}
[data-theme="dusk"] .price-card.featured {
  background: linear-gradient(135deg, #573e35, rgba(230,172,64,0.09));
  border-color: #e6ac40;
  box-shadow: 0 4px 24px rgba(230,172,64,0.16);
}

/* Buttons */
[data-theme="dusk"] .btn-gradient {
  box-shadow: 0 4px 32px rgba(230,172,64,0.35), 0 0 60px rgba(230,172,64,0.1);
}
[data-theme="dusk"] .btn-gradient:hover {
  box-shadow: 0 6px 40px rgba(230,172,64,0.45), 0 0 80px rgba(230,172,64,0.15);
}
[data-theme="dusk"] .btn-primary {
  background: #d6942e;
  box-shadow: 0 2px 12px rgba(214,148,46,0.3);
}

/* Text utility */
[data-theme="dusk"] .text-blue { color: #e6ac40; }

/* Cost counter */
[data-theme="dusk"] .cost-counter .amount {
  background: linear-gradient(135deg, #f87171, #e6ac40);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hope stat */
[data-theme="dusk"] .hope-stat .big-number {
  background: linear-gradient(135deg, #34d399, #e6ac40);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Screenshots */
[data-theme="dusk"] .app-screenshot img { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
[data-theme="dusk"] .ss-img-light { display: none; }
[data-theme="dusk"] .ss-img-dark { display: block !important; }

/* Scroll cues */
[data-theme="dusk"] .scroll-cue { color: #96775c; }
[data-theme="dusk"] .scroll-cue:hover { color: #e6ac40; }
[data-theme="dusk"] .section-cue { color: #96775c; }

/* Disclaimer + footer */
[data-theme="dusk"] .disclaimer { background: transparent; }
[data-theme="dusk"] .disclaimer-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  border-color: rgba(232,180,130,0.14);
}
[data-theme="dusk"] footer {
  background: rgba(58,40,32,0.6);
  border-top-color: rgba(232,180,130,0.14);
}