/* welcome-visual-max.css — the dramatic pass for the SERVED public home (welcome.html).
   Additive-only enhancement layer in the #427/#449 visual language, aimed at welcome's
   REAL markup (the #427 overhaul targeted index.html's app classes and never rendered
   at / — the orphan this file corrects). Every layer is compositor-safe (transform/
   opacity/filter only), reduced-motion-gated, and carries data or hierarchy — no
   decoration without function. CSP-safe: pure CSS, no external assets. */

/* 1. hero: living gradient wash behind the headline (theme-var driven, zero on motion-reduce) */
.hero { position: relative; isolation: isolate; }
.hero::before {
  content: ""; position: absolute; inset: -12% -8% auto -8%; height: 70%; z-index: -1;
  background: radial-gradient(55% 60% at 22% 18%, var(--glow, rgba(37,99,235,.14)), transparent 65%),
              radial-gradient(40% 50% at 80% 8%, rgba(45,212,191,.10), transparent 60%);
  filter: blur(2px);
 pointer-events: none;
}

/* 2. hero title: gradient ink on the wordmark line */
.hero h1 {
  background: linear-gradient(92deg, var(--text) 55%, var(--action-ink, #60a5fa) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* 3. primary CTA: depth + focus pull (hover lift is transform-only) */
.hero .btn.primary, .btn.primary {
  box-shadow: 0 6px 24px -8px var(--action, #2563eb);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -8px var(--action, #2563eb); }

/* 4. stats-band: glass treatment — the six proof numbers read as one instrument strip */
.stats-band {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface, #11131a) 82%, transparent), transparent);
  backdrop-filter: blur(6px); border-radius: 10px; padding-left: 8px; padding-right: 8px;
}
.stats-band strong { font-variant-numeric: tabular-nums; }

/* 5. intel-stack: the four intelligence modules get card depth + accent rail */
.intel-stack { position: relative; overflow: hidden; }
.intel-stack::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--action, #2563eb), var(--teal-ink, #2dd4bf));
 pointer-events: none;
}
.intel-list li { transition: transform .18s ease, border-color .18s ease; }
.intel-list li:hover { transform: translateY(-2px); border-color: var(--line-strong, rgba(255,255,255,.16)); }

/* 6. surfaces trio + why-cards + tool-cards: unified hover elevation (one product family) */
.surface, .why-card, .tool-card {
  transition: transform .18s ease, box-shadow .18s ease;
}
.surface:hover, .why-card:hover, .tool-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .55);
}

/* 7. pricing cards: the paid tier gets a quiet always-on aura; all cards lift on hover */
.price-card { transition: transform .18s ease, box-shadow .18s ease; }
.price-card:hover { transform: translateY(-3px); }
.price-card[data-tier="pro"], .price-card.featured {
  box-shadow: 0 0 0 1px var(--action, #2563eb), 0 12px 40px -16px var(--action, #2563eb);
}

/* 8. section headers: kicker treatment — mono, tracked, accent tick */
.sec-head { letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.sec-head::before { content: "// "; color: var(--action-ink, #60a5fa); }

/* 9. scroll-reveal for below-fold sections (native CSS animation-timeline; no JS) */
@supports (animation-timeline: view()) {
  .why, .funnel, .atlas-browse, .tools-preview, .faq, .pricing {
    animation: wvm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%;
  }
  @keyframes wvm-rise { from { opacity: .35; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* 10. motion honesty: every animated layer collapses to static under reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero::before { filter: none; }
  .btn.primary, .intel-list li, .surface, .why-card, .tool-card, .price-card { transition: none !important; }
  .btn.primary:hover, .intel-list li:hover, .surface:hover, .why-card:hover, .tool-card:hover, .price-card:hover { transform: none; }
  .why, .funnel, .atlas-browse, .tools-preview, .faq, .pricing { animation: none !important; opacity: 1; transform: none; }
}