/* ==========================================================================
   VigiAMS landing page — v2 design system
   Hand-written (no Tailwind build step). Dark hero + light body.
   Brand: purple #881080 · rose #c83048 · DM Sans display / Inter body.
   All animation respects prefers-reduced-motion (see bottom).
   ========================================================================== */

:root {
  --brand:      #881080;
  --brand-deep: #6f0c69;
  --brand-hi:   #c93abc;   /* lifted purple for dark backgrounds */
  --brand-pale: #fbeffa;
  --brand-ring: #f3d3ef;
  --rose:       #c83048;
  --rose-hi:    #ef6a80;
  --green:      #16a34a;
  --green-bg:   #dcfce7;
  --green-ink:  #15803d;
  --amber:      #d97706;
  --amber-bg:   #fef3c7;
  --amber-ink:  #b45309;
  --red-bg:     #ffe4e6;
  --red-ink:    #be123c;

  --ink:    #0f172a;
  --body:   #46556b;
  --muted:  #64748b;
  --faint:  #94a3b8;
  --line:   #e2e8f0;
  --line-soft: #eef2f7;
  --bg-soft: #f8fafc;

  --dark:    #2b1350;
  --dark-2:  #3a1a68;
  --dark-line: rgba(255,255,255,.12);

  --grad-brand: linear-gradient(120deg, #a81499, #881080 55%, #c83048 130%);
  --grad-text:  linear-gradient(96deg, #f07ae2 5%, #c93abc 45%, #ef6a80 100%);

  --shadow-card: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px -12px rgba(15,23,42,.12);
  --shadow-lift: 0 2px 6px rgba(15,23,42,.06), 0 18px 40px -16px rgba(15,23,42,.22);
  --shadow-brand: 0 4px 14px -4px rgba(136,16,128,.45), 0 16px 40px -18px rgba(136,16,128,.4);

  --ease-out: cubic-bezier(.22, .8, .3, 1);
  --font-display: 'DM Sans', 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* ── Reset-ish ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: #f3c9ee; color: #4a0845; }

.display { font-family: var(--font-display); letter-spacing: -0.022em; }
.mono { font-family: var(--font-mono); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 1024px) { .wrap { padding: 0 2rem; } }

.section { scroll-margin-top: 84px; }

/* Eyebrow label above section headings */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.eyebrow::before {
  content: ''; width: 1.4rem; height: 2px; border-radius: 2px;
  background: var(--grad-brand);
}
.on-dark .eyebrow, .eyebrow.light { color: var(--brand-hi); }

.h2 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  line-height: 1.12; color: var(--ink);
  margin-top: .9rem;
}
.sub { margin-top: 1rem; font-size: 1.06rem; color: var(--body); max-width: 40rem; }

/* ── Scroll reveal (blur-in — modern soft-focus entrance) ──────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(9px);
  transition: opacity .75s var(--ease-out), transform .75s var(--ease-out), filter .75s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform, filter;
}
[data-reveal].in { opacity: 1; transform: none; filter: none; }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal="pop"] { transform: translateY(14px) scale(.96); }

/* ── Beta bar ──────────────────────────────────────────────────────────── */
#beta-bar {
  position: relative; z-index: 60;
  background: #1c0b38;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: #e2e8f0; font-size: .8rem;
}
#beta-bar .bar-in {
  max-width: 76rem; margin: 0 auto; padding: .5rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
.beta-chip {
  display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
  padding: .16rem .55rem; border-radius: .45rem;
  background: rgba(245,158,11,.12); box-shadow: inset 0 0 0 1px rgba(245,158,11,.45);
  color: #fbbf24; font-family: var(--font-mono);
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
#beta-bar .msg { color: #cbd5e1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#beta-bar .msg strong { color: #fff; font-weight: 600; }
#beta-bar .msg a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
#beta-bar .msg a:hover { color: var(--brand-hi); }
#beta-close { color: #64748b; padding: .25rem; flex-shrink: 0; border-radius: .4rem; transition: color .15s; }
#beta-close:hover { color: #fff; }
#beta-close svg { width: .85rem; height: .85rem; display: block; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
/* NOTE: no border-bottom here — a border (even transparent) adds 1px of
   layout height that the hero's negative margin can't cancel, leaving a
   1px white line at the very top. The scrolled hairline is a box-shadow. */
#site-nav {
  position: sticky; top: 0; z-index: 50;
  transition: background .35s, box-shadow .35s;
  background: transparent;
}
#site-nav .nav-in {
  max-width: 76rem; margin: 0 auto; padding: 0 1.25rem;
  height: 4.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo-chip {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: .8rem; padding: .42rem .7rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.logo-chip img { height: 1.9rem; width: auto; }
#site-nav .links { display: none; align-items: center; gap: .25rem; font-size: .9rem; font-weight: 500; }
#site-nav .links a {
  padding: .45rem .85rem; border-radius: .6rem; color: #cbd5e1;
  transition: color .15s, background .15s;
}
#site-nav .links a:hover { color: #fff; background: rgba(255,255,255,.08); }
#site-nav .actions { display: flex; align-items: center; gap: .5rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .9rem; font-weight: 600; border-radius: .8rem;
  padding: .62rem 1.15rem; transition: transform .18s var(--ease-out), box-shadow .18s, background .18s, color .18s, border-color .18s;
  position: relative; overflow: hidden;
}
.btn svg { width: 1rem; height: 1rem; }
.btn-primary {
  background: var(--grad-brand); color: #fff;
  box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 18px -4px rgba(136,16,128,.55), 0 22px 48px -18px rgba(136,16,128,.5); }
.btn-primary:active { transform: translateY(0); }
/* shine sweep */
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.35) 50%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .01s;
}
.btn-primary:hover::after { transform: translateX(120%); transition: transform .7s var(--ease-out); }
.btn-ghost-dark {
  color: #fff; background: rgba(255,255,255,.07);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}
.btn-ghost-dark:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.btn-ghost-light {
  color: #364152; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(15,23,42,.05);
}
.btn-ghost-light:hover { box-shadow: inset 0 0 0 1px #cbd5e1, var(--shadow-card); transform: translateY(-2px); }
.btn-lg { padding: .8rem 1.5rem; font-size: .95rem; border-radius: .9rem; }

#hamb { display: inline-flex; padding: .5rem; border-radius: .6rem; color: #e2e8f0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
#hamb svg { width: 1.25rem; height: 1.25rem; }

/* Nav once scrolled past hero → light glass */
#site-nav.scrolled {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(226,232,240,.8), 0 8px 30px -18px rgba(15,23,42,.18);
}
#site-nav.scrolled .links a { color: #46556b; }
#site-nav.scrolled .links a:hover { color: var(--ink); background: var(--bg-soft); }
#site-nav.scrolled .logo-chip { box-shadow: none; padding-left: 0; }
#site-nav.scrolled #hamb { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
#site-nav.scrolled .btn-ghost-dark { color: #364152; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

#mobile-nav {
  display: none;
  border-top: 1px solid var(--dark-line);
  background: rgba(32,14,60,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#mobile-nav.open { display: block; animation: mobile-drop .3s var(--ease-out); }
@keyframes mobile-drop { from { opacity: 0; transform: translateY(-8px); } }
#mobile-nav .m-in { padding: 1rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .1rem; }
#mobile-nav a.m-link { padding: .65rem .5rem; font-size: .95rem; color: #e2e8f0; border-radius: .5rem; }
#mobile-nav a.m-link:hover { background: rgba(255,255,255,.06); }
#mobile-nav .m-cta { display: flex; gap: .6rem; padding-top: .9rem; }
#mobile-nav .m-cta .btn { flex: 1; }
#site-nav.scrolled #mobile-nav { background: rgba(255,255,255,.97); border-top-color: var(--line); }
#site-nav.scrolled #mobile-nav a.m-link { color: #334155; }

@media (min-width: 880px) {
  #site-nav .links { display: flex; }
  #hamb { display: none; }
}
@media (max-width: 640px) {
  #site-nav .actions .btn { display: none; }
}

/* ── HERO (dark) ───────────────────────────────────────────────────────── */
#hero {
  position: relative;
  background: linear-gradient(180deg, #251044 0%, var(--dark) 45%, #341a5e 100%);
  color: #fff;
  overflow: clip;
  /* pull nav + beta bar onto the dark canvas */
  margin-top: calc(-4.25rem - 0px);
  padding-top: 4.25rem;
}
/* soft hand-off into the light body — an eased (smoothstep) ramp so there is
   no visible band edge, and strong white stays inside the hero's bottom
   padding so hero text never sits on a washed background. */
#hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 16rem;
  background: linear-gradient(180deg,
    rgba(255,255,255,0)    0%,
    rgba(255,255,255,.02)  12.5%,
    rgba(255,255,255,.09)  25%,
    rgba(255,255,255,.20)  37.5%,
    rgba(255,255,255,.37)  50%,
    rgba(255,255,255,.57)  62.5%,
    rgba(255,255,255,.77)  75%,
    rgba(255,255,255,.92)  87.5%,
    #fff 100%);
  pointer-events: none;
}
/* aurora blobs */
.aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora .blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .65;
  will-change: transform;
}
.aurora .b1 {
  width: 46rem; height: 46rem; top: -20rem; left: -12rem;
  background: radial-gradient(circle at 35% 35%, #c026b0, transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.aurora .b2 {
  width: 40rem; height: 40rem; top: -14rem; right: -14rem;
  background: radial-gradient(circle at 60% 40%, #8b3ad1, transparent 62%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.aurora .b3 {
  width: 34rem; height: 34rem; bottom: -20rem; left: 28%;
  background: radial-gradient(circle at 50% 50%, rgba(224,90,110,.8), transparent 60%);
  opacity: .4;
  animation: drift-c 38s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(6rem, 4rem) scale(1.08); } }
@keyframes drift-b { to { transform: translate(-5rem, 5rem) scale(1.12); } }
@keyframes drift-c { to { transform: translate(-6rem, -3rem) scale(1.05); } }
/* faint grid on top of aurora */
.hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 10%, black 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 80% at 50% 10%, black 30%, transparent 78%);
}

#hero .hero-in {
  position: relative; z-index: 1;
  display: grid; gap: 3.25rem; align-items: center;
  padding-top: 3.5rem; padding-bottom: 4.25rem;
}
@media (min-width: 1024px) {
  #hero .hero-in { grid-template-columns: 1.02fr .98fr; padding-top: 4.5rem; padding-bottom: 6rem; }
}

.hero-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .78rem; font-weight: 500; color: #f0d5ec;
  padding: .42rem .9rem; border-radius: 999px;
  background: rgba(136,16,128,.18);
  box-shadow: inset 0 0 0 1px rgba(201,58,188,.35);
}
.pulse-dot { position: relative; display: inline-flex; width: .42rem; height: .42rem; border-radius: 999px; background: var(--brand-hi); }
.pulse-dot::before {
  content: ''; position: absolute; inset: 0; border-radius: 999px;
  background: currentColor; color: var(--brand-hi); opacity: .5;
  animation: ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }

#hero h1 {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.03em;
  font-size: clamp(2.5rem, 6.4vw, 4.35rem);
  line-height: 1.04;
  margin-top: 1.4rem;
}
#hero h1 .grad {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
#hero .lede {
  margin-top: 1.5rem; font-size: 1.13rem; line-height: 1.65;
  color: #d3cbe9; max-width: 34rem;
}
#hero .cta-row { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
#hero .trust {
  margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  font-size: .8rem; color: #b9addc;
}
#hero .trust span { display: inline-flex; align-items: center; gap: .45rem; }
#hero .trust svg { width: 1rem; height: 1rem; color: var(--brand-hi); flex-shrink: 0; }

/* staggered load-in for hero copy */
.rise { opacity: 0; transform: translateY(18px); animation: rise .8s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── Dashboard mock (floats on hero) ───────────────────────────────────── */
#dashboard { position: relative; }
#dashboard .glow {
  position: absolute; inset: -2rem;
  background:
    radial-gradient(40% 46% at 30% 25%, rgba(201,58,188,.35), transparent 70%),
    radial-gradient(38% 40% at 75% 75%, rgba(200,48,72,.28), transparent 70%);
  filter: blur(36px); border-radius: 3rem;
  pointer-events: none;
}
.mock-window {
  position: relative;
  background: #fff; border-radius: 1.15rem; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px -22px rgba(0,0,0,.6), 0 10px 30px -10px rgba(136,16,128,.35);
  animation: float 7s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.mock-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1rem; background: var(--bg-soft); border-bottom: 1px solid var(--line);
}
.mock-bar .dots { display: flex; align-items: center; gap: .4rem; }
.mock-bar .dots i { width: .6rem; height: .6rem; border-radius: 999px; }
.mock-bar .dots i:nth-child(1) { background: #fb7185; }
.mock-bar .dots i:nth-child(2) { background: #f59e0b; }
.mock-bar .dots i:nth-child(3) { background: #22c55e; }
.mock-bar .url { margin-left: .75rem; font-family: var(--font-mono); font-size: .68rem; color: var(--muted); }
.live-tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-mono); font-size: .62rem; font-weight: 700; color: var(--brand); letter-spacing: .08em; }
.live-tag i { width: .4rem; height: .4rem; border-radius: 999px; background: var(--brand); animation: blink 1.6s ease infinite; }
@keyframes blink { 50% { opacity: .3; } }

.mock-body { padding: 1.1rem; background: #fbfcfe; display: grid; gap: .9rem; }
.kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.kpi {
  background: #fff; border-radius: .85rem; padding: .8rem .85rem;
  box-shadow: inset 0 0 0 1px var(--line);
}
.kpi .k-label { font-size: .58rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kpi .k-val { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin-top: .15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi .k-val.warn { color: var(--amber); }
.kpi .k-val.bad { color: var(--rose); }
.kpi .k-foot { font-size: .6rem; color: var(--muted); margin-top: .1rem; }

.panel { background: #fff; border-radius: .9rem; padding: .95rem 1rem; box-shadow: inset 0 0 0 1px var(--line); }
.panel .p-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.panel .p-title { font-size: .78rem; font-weight: 700; color: #334155; }
.panel .p-title .dim { color: var(--faint); font-weight: 400; }
.panel .p-meta { font-size: .62rem; color: var(--muted); }

.aware-track { margin-top: .7rem; display: flex; height: .7rem; border-radius: 999px; overflow: hidden; background: var(--line-soft); }
.aware-track .seg { transform: scaleX(0); transform-origin: left; }
.aware-track .seg.grow { animation: grow-x 1.2s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes grow-x { to { transform: scaleX(1); } }
.seg.access { background: #22c55e; }
.seg.watch { background: #f59e0b; }
.seg.reserve { background: #e11d48; }
.aware-legend { margin-top: .55rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .62rem; }
.aware-legend .a { color: var(--green-ink); } .aware-legend .w { color: var(--amber-ink); } .aware-legend .r { color: var(--red-ink); }

/* antibiogram mini heatmap */
#antibiogram-mock { margin-top: .7rem; display: grid; gap: .3rem; }
.ab-row { display: grid; grid-template-columns: 1fr repeat(5, minmax(0, 2.5rem)); gap: .3rem; align-items: center; }
.ab-row .org { font-size: .7rem; font-style: italic; font-weight: 600; color: #334155; }
.ab-head { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .08em; color: var(--faint); text-transform: uppercase; text-align: center; }
.ab-cell {
  text-align: center; font-size: .64rem; font-weight: 700; padding: .28rem 0; border-radius: .35rem;
  opacity: 0; transform: scale(.6);
}
.ab-cell.pop { animation: cell-pop .45s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes cell-pop { to { opacity: 1; transform: scale(1); } }
.ab-S { background: var(--green-bg); color: var(--green-ink); }
.ab-I { background: var(--amber-bg); color: var(--amber-ink); }
.ab-R { background: var(--red-bg); color: var(--red-ink); }
.ab-N { background: var(--line-soft); color: var(--faint); }

.hai-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.hai { background: #fff; border-radius: .8rem; padding: .7rem .8rem; box-shadow: inset 0 0 0 1px var(--line); }
.hai .h-label { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.hai .h-val { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.hai .h-val.bad { color: var(--rose); }
.hai .h-unit { font-size: .56rem; font-weight: 400; color: var(--muted); }

/* ── Continuous light canvas (one surface — no striped sections) ───────── */
.canvas { position: relative; background: #fff; overflow: clip; }
.canvas > section { position: relative; }
.canvas .amb { position: absolute; border-radius: 999px; filter: blur(110px); pointer-events: none; }
.amb.a1 { width: 44rem; height: 44rem; top: 4%;  left: -18rem;  background: rgba(136,16,128,.07); }
.amb.a2 { width: 40rem; height: 40rem; top: 26%; right: -16rem; background: rgba(200,48,72,.05); }
.amb.a3 { width: 46rem; height: 46rem; top: 52%; left: -20rem;  background: rgba(139,58,209,.06); }
.amb.a4 { width: 42rem; height: 42rem; top: 78%; right: -18rem; background: rgba(136,16,128,.06); }

/* ── Problem statement ─────────────────────────────────────────────────── */
#problem .prob-in { max-width: 58rem; margin: 0 auto; padding: 6.5rem 1.25rem 5rem; text-align: center; }
#problem p.big {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.3vw, 2.35rem);
  line-height: 1.32; font-weight: 600; color: var(--ink);
  letter-spacing: -0.02em;
}
#problem .fix {
  font-weight: 700;
  background: linear-gradient(96deg, #a81499, #881080 55%, #c83048 115%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Modules ───────────────────────────────────────────────────────────── */
#modules { padding: 5rem 0 7rem; }
#modules-grid { margin-top: 3rem; display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { #modules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { #modules-grid { grid-template-columns: repeat(4, 1fr); } }

.mod-card {
  position: relative; background: #fff; border-radius: 1.35rem; padding: 1.6rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(76,29,102,.18), inset 0 0 0 1px rgba(226,232,240,.65);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  overflow: hidden;
}
.mod-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease-out);
}
.mod-card:hover { transform: translateY(-6px); box-shadow: 0 2px 4px rgba(15,23,42,.05), 0 26px 52px -22px rgba(136,16,128,.35), inset 0 0 0 1px var(--brand-ring); }
.mod-card:hover::before { transform: scaleX(1); }
.mod-card .m-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.mod-icon {
  width: 2.75rem; height: 2.75rem; border-radius: .9rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(136,16,128,.55);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.mod-card:hover .mod-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 12px 24px -8px rgba(136,16,128,.6); }
.mod-icon svg { width: 1.25rem; height: 1.25rem; }
.mod-tag {
  font-family: var(--font-mono); font-size: .6rem; color: var(--muted);
  background: var(--line-soft); padding: .3rem .5rem; border-radius: .45rem; white-space: nowrap;
}
.mod-card h3 { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; margin-top: 1.15rem; }
.mod-card p { font-size: .85rem; color: var(--body); margin-top: .4rem; line-height: 1.55; }

/* ── Platforms ─────────────────────────────────────────────────────────── */
#platforms { padding: 5.5rem 0; }
.plat-grid { margin-top: 3.25rem; display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .plat-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.plat-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .76rem; font-weight: 700; color: var(--brand);
  padding: .4rem .85rem; border-radius: 999px;
  background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand-ring);
}
.plat-chip svg { width: .9rem; height: .9rem; }
.plat h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 1.1rem; letter-spacing: -0.02em; }
.plat > p { color: var(--body); margin-top: .7rem; max-width: 30rem; }
.plat .feat { margin-top: 1.3rem; display: grid; gap: .55rem; font-size: .9rem; color: #334155; }
.plat .feat li { display: flex; gap: .6rem; }
.plat .feat li::before { content: '→'; color: var(--brand); font-weight: 700; flex-shrink: 0; }

/* committee mini-mock */
.commit-mock {
  margin-top: 2rem; background: #fff; border-radius: 1.1rem; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
}
.commit-mock .grid2 { padding: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mini-stat { background: var(--bg-soft); border-radius: .8rem; padding: .85rem; }
.mini-stat .s-label { font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.mini-stat .s-val { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; margin-top: .2rem; }
.mini-stat .s-val.bad { color: var(--rose); } .mini-stat .s-val.ok { color: var(--brand); }
.mini-bar { height: .3rem; margin-top: .55rem; border-radius: 999px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft); }
.mini-bar i { display: block; height: 100%; border-radius: 999px; transform: scaleX(0); transform-origin: left; }
.mini-bar i.grow { animation: grow-x 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
.mini-bar .rose { background: var(--rose); } .mini-bar .purple { background: var(--brand); }
.mini-chart { grid-column: span 2; background: var(--bg-soft); border-radius: .8rem; padding: .85rem; }
.mini-chart .bars { margin-top: .6rem; display: flex; align-items: flex-end; gap: .35rem; height: 3.6rem; }
.mini-chart .bars i {
  flex: 1; border-radius: .25rem .25rem 0 0; background: var(--brand);
  opacity: calc(.38 + var(--i) * .09);
  height: var(--h);
  transform: scaleY(0); transform-origin: bottom;
}
.mini-chart .bars i.grow { animation: grow-y .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms); }
@keyframes grow-y { to { transform: scaleY(1); } }

/* phone mock */
.phone-stage { margin-top: 2.4rem; display: flex; justify-content: center; }
.phone {
  position: relative; width: 17rem; height: 33.5rem;
  background: #0b1020; border-radius: 2.8rem; padding: .6rem;
  box-shadow: 0 0 0 1px rgba(15,23,42,.25), 0 30px 60px -20px rgba(15,23,42,.45), 0 12px 28px -14px rgba(136,16,128,.35);
  animation: float 8s ease-in-out infinite;
}
.phone .notch { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); width: 6rem; height: 1.25rem; background: #0b1020; border-radius: 0 0 1rem 1rem; z-index: 2; }
.phone .screen { width: 100%; height: 100%; background: #fff; border-radius: 2.2rem; overflow: hidden; display: flex; flex-direction: column; }
.phone .status { padding: 1.6rem 1.3rem .6rem; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .62rem; color: #334155; }
.phone .p-head { padding: 0 1.3rem .7rem; }
.phone .p-head .today { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.phone .p-head .title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.phone .cards { padding: 0 .9rem; display: grid; gap: .55rem; flex: 1; overflow: hidden; align-content: start; }
.p-card { border-radius: .9rem; padding: .7rem .8rem; opacity: 0; transform: translateX(26px); }
.p-card.slide { animation: card-in .55s var(--ease-out) forwards; animation-delay: var(--d, 0s); }
@keyframes card-in { to { opacity: 1; transform: none; } }
.p-card .row { display: flex; justify-content: space-between; align-items: baseline; }
.p-card .st { font-family: var(--font-mono); font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.p-card .ago { font-size: .58rem; color: var(--muted); }
.p-card .drug { font-family: var(--font-display); font-size: .85rem; font-weight: 700; margin-top: .2rem; color: var(--ink); }
.p-card .who { font-size: .6rem; color: var(--muted); margin-top: .05rem; }
.p-card.pend { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; } .p-card.pend .st { color: var(--amber-ink); }
.p-card.ok { background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; } .p-card.ok .st { color: var(--green-ink); }
.p-card.alert { background: #fff1f2; box-shadow: inset 0 0 0 1px #fecdd3; } .p-card.alert .st { color: var(--red-ink); }
.phone .tabbar { border-top: 1px solid var(--line); padding: .6rem .5rem calc(.6rem + 4px); display: flex; justify-content: space-around; font-size: .6rem; color: var(--muted); }
.phone .tabbar .on { color: var(--brand); font-weight: 700; }

/* ── Compliance band (marquee) ─────────────────────────────────────────── */
#compliance { padding: 4.5rem 0 5rem; }
#compliance .comp-head { text-align: center; }
#compliance .comp-head .h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.marquee {
  margin-top: 2.6rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee .track {
  display: flex; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.comp-chip {
  flex-shrink: 0; min-width: 11.5rem; margin-right: 1rem;
  background: #fff; border-radius: 1.05rem; padding: 1.15rem 1.4rem; text-align: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 12px 28px -16px rgba(76,29,102,.16), inset 0 0 0 1px rgba(226,232,240,.65);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.comp-chip:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--brand-ring), 0 14px 30px -14px rgba(136,16,128,.3); }
.comp-chip .c-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.comp-chip .c-sub { font-size: .68rem; color: var(--muted); margin-top: .25rem; }

/* ── How it works ──────────────────────────────────────────────────────── */
#how { padding: 5rem 0 6.5rem; }
.steps-wrap { position: relative; margin-top: 3.2rem; }
.steps-line {
  position: absolute; top: 2.6rem; left: 2rem; right: 2rem; height: 2px;
  background: var(--line-soft); border-radius: 2px;
  display: none;
}
.steps-line i {
  display: block; height: 100%; border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease-out) .2s;
}
.steps-wrap.in .steps-line i { transform: scaleX(1); }
@media (min-width: 880px) { .steps-line { display: block; } }
.steps { display: grid; gap: 1rem; grid-template-columns: 1fr; position: relative; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step {
  background: #fff; border-radius: 1.35rem; padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(76,29,102,.16), inset 0 0 0 1px rgba(226,232,240,.65);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.step:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -22px rgba(136,16,128,.3), inset 0 0 0 1px var(--brand-ring); }
.step .s-top { display: flex; align-items: center; justify-content: space-between; }
.step .s-icon {
  width: 2.6rem; height: 2.6rem; border-radius: .8rem;
  background: var(--brand-pale); color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-ring);
  display: flex; align-items: center; justify-content: center;
}
.step .s-icon svg { width: 1.2rem; height: 1.2rem; }
.step .s-num {
  font-family: var(--font-display); font-size: 1.9rem; font-weight: 700;
  background: linear-gradient(180deg, #e9d8e7, #f6eef5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.step h4 { font-family: var(--font-display); font-weight: 700; margin-top: 1rem; font-size: 1rem; }
.step p { font-size: .85rem; color: var(--body); margin-top: .35rem; }

/* ── Why (on the continuous canvas) ────────────────────────────────────── */
#why { padding: 5rem 0 6.5rem; }
#why .why-grid { margin-top: 3rem; display: grid; gap: 1.1rem; position: relative; }
@media (min-width: 880px) { #why .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card {
  border-radius: 1.35rem; padding: 1.75rem;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -18px rgba(76,29,102,.16), inset 0 0 0 1px rgba(226,232,240,.65);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.why-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px -22px rgba(136,16,128,.3), inset 0 0 0 1px var(--brand-ring); }
.why-icon {
  width: 2.9rem; height: 2.9rem; border-radius: .9rem;
  background: var(--brand-pale); color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand-ring);
  display: flex; align-items: center; justify-content: center;
}
.why-icon svg { width: 1.3rem; height: 1.3rem; }
.why-card h3 { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; margin-top: 1.25rem; color: var(--ink); }
.why-card p { font-size: .9rem; color: var(--body); margin-top: .5rem; line-height: 1.65; }

/* ── Roadmap / coming soon ─────────────────────────────────────────────── */
#roadmap { padding: 5rem 0 6.5rem; }
.road-grid { margin-top: 3rem; display: grid; gap: 1.1rem; }
@media (min-width: 880px) { .road-grid { grid-template-columns: repeat(3, 1fr); } }
.road-card {
  position: relative; border-radius: 1.4rem; padding: 1.8rem;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(201,58,188,.55), rgba(226,232,240,.9) 45%, rgba(200,48,72,.45)) border-box;
  box-shadow: 0 14px 36px -20px rgba(76,29,102,.28);
  transition: transform .3s var(--ease-out), box-shadow .3s;
}
.road-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -22px rgba(136,16,128,.38); }
.soon-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-pale);
  box-shadow: inset 0 0 0 1px var(--brand-ring);
  padding: .32rem .68rem; border-radius: 999px;
}
.road-icon {
  width: 3rem; height: 3rem; border-radius: .95rem; margin-top: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(136,16,128,.55);
}
.road-icon svg { width: 1.35rem; height: 1.35rem; }
.road-card h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-top: 1.1rem; color: var(--ink); }
.road-card p { font-size: .88rem; color: var(--body); margin-top: .45rem; line-height: 1.65; }

/* ── Security band ─────────────────────────────────────────────────────── */
#security { padding: 5rem 0 6rem; }
.sec-card {
  border-radius: 1.75rem; padding: 2.25rem;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, var(--brand-pale), #fff 55%) padding-box,
    linear-gradient(135deg, rgba(201,58,188,.5), rgba(243,211,239,.9) 60%, rgba(200,48,72,.35)) border-box;
  box-shadow: 0 18px 44px -24px rgba(136,16,128,.25);
  display: grid; gap: 1.8rem;
}
@media (min-width: 1024px) { .sec-card { grid-template-columns: 1fr 2fr; padding: 3rem; align-items: center; } }
.sec-card .h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.sec-items { display: grid; gap: 1rem; }
@media (min-width: 640px) { .sec-items { grid-template-columns: repeat(2, 1fr); } }
.sec-item { display: flex; gap: .75rem; font-size: .9rem; }
.sec-item svg { width: 1.3rem; height: 1.3rem; color: var(--brand); flex-shrink: 0; margin-top: .1rem; }
.sec-item .t { font-weight: 600; color: var(--ink); }
.sec-item .d { color: var(--body); font-size: .85rem; }

/* ── Pricing (pilot) ───────────────────────────────────────────────────── */
#pricing { padding: 5rem 0 6.5rem; }
#pricing .p-head { text-align: center; max-width: 38rem; margin: 0 auto; }
.pilot-card {
  position: relative; max-width: 46rem; margin: 2.8rem auto 0;
  border-radius: 1.5rem; overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(201,58,188,.6), rgba(226,232,240,.9) 45%, rgba(200,48,72,.5)) border-box;
  box-shadow: 0 22px 52px -24px rgba(76,29,102,.35);
}
.pilot-card .p-in { padding: 2.3rem; }
@media (min-width: 640px) { .pilot-card .p-in { padding: 2.6rem 3rem; } }
.pilot-flag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .64rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-pale);
  box-shadow: inset 0 0 0 1px var(--brand-ring);
  padding: .35rem .7rem; border-radius: 999px;
}
.pilot-card h3 { font-family: var(--font-display); font-size: 1.65rem; font-weight: 700; margin-top: 1.1rem; letter-spacing: -0.02em; }
.pilot-card .p-sub { color: var(--body); margin-top: .6rem; max-width: 34rem; }
.pilot-feats { margin-top: 1.5rem; display: grid; gap: .6rem; }
@media (min-width: 640px) { .pilot-feats { grid-template-columns: repeat(2, 1fr); } }
.pilot-feats li { display: flex; gap: .6rem; font-size: .88rem; color: #334155; }
.pilot-feats svg { width: 1.15rem; height: 1.15rem; color: var(--brand); flex-shrink: 0; margin-top: .12rem; }
.pilot-cta { margin-top: 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.pilot-note { font-size: .78rem; color: var(--muted); }

/* ── Demo / CTA ────────────────────────────────────────────────────────── */
#demo { padding: 5rem 0 6.5rem; }
.demo-grid { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .demo-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
#demo .pitch .h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
#demo .pitch .checks { margin-top: 2rem; display: grid; gap: .8rem; font-size: .92rem; color: #334155; }
#demo .pitch .checks li { display: flex; gap: .7rem; }
#demo .pitch .checks svg { width: 1.25rem; height: 1.25rem; color: var(--brand); flex-shrink: 0; margin-top: .1rem; }
#demo .social { margin-top: 2.4rem; display: flex; align-items: center; gap: 1rem; }
.avatars { display: flex; }
.avatars span {
  width: 2.5rem; height: 2.5rem; border-radius: 999px; margin-left: -.6rem;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; box-shadow: 0 0 0 2px #fff;
}
.avatars span:first-child { margin-left: 0; }
.avatars .a1 { background: var(--brand-pale); color: var(--brand); }
.avatars .a2 { background: var(--amber-bg); color: var(--amber-ink); }
.avatars .a3 { background: var(--red-bg); color: var(--red-ink); }
#demo .social p { font-size: .85rem; color: var(--muted); }

.form-card {
  background: #fff; border-radius: 1.25rem; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-lift);
}
.form-card .f-head { padding: 1.6rem 1.9rem 1.3rem; border-bottom: 1px solid var(--line-soft); }
.form-card .f-head h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.form-card .f-head p { font-size: .85rem; color: var(--muted); margin-top: .25rem; }
#demo-form { padding: 1.6rem 1.9rem 1.9rem; }
.f-grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .f-grid { grid-template-columns: repeat(2, 1fr); } .f-grid .span2 { grid-column: span 2; } }
.field span { display: block; font-size: .78rem; font-weight: 600; color: #334155; }
.field input, .field select {
  margin-top: .4rem; width: 100%; font: inherit; font-size: .9rem;
  padding: .68rem .85rem; border-radius: .7rem;
  border: 1px solid #cbd5e1; background: #fff; color: var(--ink);
  outline: none; transition: border-color .15s, box-shadow .15s;
  appearance: none; -webkit-appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .7rem center;
  padding-right: 2.2rem;
}
.field input:focus, .field select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(136,16,128,.14);
}
.field input::placeholder { color: #9aa7b8; }
#demo-error { display: none; margin-top: .8rem; font-size: .78rem; font-weight: 600; color: var(--rose); }
#demo-error.show { display: block; }
#demo-submit { width: 100%; margin-top: 1.3rem; }
#demo-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.f-legal { margin-top: .85rem; font-size: .7rem; color: var(--faint); line-height: 1.6; }
.f-legal a { text-decoration: underline; text-underline-offset: 2px; }
.f-legal a:hover { color: var(--muted); }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

#demo-success { display: none; padding: 3rem 1.9rem; text-align: center; }
#demo-success.show { display: block; animation: rise .5s var(--ease-out); }
#demo-success .ok-ring {
  width: 3.6rem; height: 3.6rem; margin: 0 auto; border-radius: 999px;
  background: var(--brand-pale); box-shadow: inset 0 0 0 1px var(--brand-ring);
  display: flex; align-items: center; justify-content: center; color: var(--brand);
}
#demo-success .ok-ring svg { width: 1.8rem; height: 1.8rem; }
#demo-success h4 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin-top: 1.1rem; }
#demo-success p { font-size: .85rem; color: var(--muted); margin-top: .45rem; }
.hidden { display: none !important; }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
#faq-section { padding: 5rem 0 3rem; }
#faq-section .f-head { text-align: center; max-width: 34rem; margin: 0 auto; }
#faq {
  margin-top: 2.6rem; max-width: 46rem; margin-left: auto; margin-right: auto;
  background: #fff; border-radius: 1.35rem; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 16px 40px -20px rgba(76,29,102,.18), inset 0 0 0 1px rgba(226,232,240,.65);
}
#faq details { border-bottom: 1px solid var(--line-soft); }
#faq details:last-child { border-bottom: none; }
#faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.6rem;
  transition: background .15s;
}
#faq summary::-webkit-details-marker { display: none; }
#faq summary:hover { background: #fcfdfe; }
#faq summary .q { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }
.chev { width: 1.2rem; height: 1.2rem; color: var(--faint); flex-shrink: 0; transition: transform .3s var(--ease-out), color .2s; }
details[open] .chev { transform: rotate(180deg); color: var(--brand); }
#faq .a { padding: 0 1.6rem 1.35rem; font-size: .88rem; color: var(--body); line-height: 1.7; max-width: 42rem; }
details[open] .a { animation: faq-open .35s var(--ease-out); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-6px); } }

/* ── Footer ────────────────────────────────────────────────────────────── */
/* Light body flows into the footer through a true colour ramp (white →
   lavender → violet → dark) — no translucent overlay, so no milky band. */
#contact {
  background: linear-gradient(180deg,
    #ffffff 0,
    #f8f2fc 1rem,
    #eddef8 2rem,
    #d6bcee 3rem,
    #b48bdc 4rem,
    #9163c4 5rem,
    #6f42a6 6rem,
    #4b2a80 7rem,
    var(--dark) 8rem);
  color: #b3a9cf; padding: 10.5rem 0 2.75rem; position: relative; overflow: clip;
}
#contact .f-orb { position: absolute; width: 30rem; height: 18rem; left: 50%; top: 7rem; transform: translateX(-50%); background: rgba(136,16,128,.22); filter: blur(90px); border-radius: 999px; pointer-events: none; }
.foot-grid { position: relative; display: grid; gap: 2.5rem; }
@media (min-width: 880px) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.foot-brand p { margin-top: 1.1rem; font-size: .88rem; max-width: 20rem; line-height: 1.65; }
.foot-brand .co { margin-top: .8rem; font-size: .72rem; color: #9182bb; }
.foot-brand .co b { color: #d9d0ef; font-weight: 600; }
.foot-col .head { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #9182bb; }
.foot-col ul { margin-top: 1.1rem; display: grid; gap: .55rem; font-size: .88rem; }
.foot-col a { transition: color .15s; }
.foot-col a:hover { color: #fff; }
.foot-base {
  position: relative; margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .8rem 1.5rem;
  font-size: .74rem; color: #9182bb;
}
.foot-base .l { display: flex; gap: 1.25rem; }
.foot-base a:hover { color: #d9d0ef; }

/* ── Back-to-top affordance on long pages (subtle) ─────────────────────── */
@media (max-width: 640px) {
  #hero .hero-in { padding-top: 2.5rem; padding-bottom: 3rem; }
  #hero::after { height: 10rem; }
  #contact {
    padding-top: 8rem;
    background: linear-gradient(180deg,
      #ffffff 0,
      #f8f2fc .75rem,
      #eddef8 1.5rem,
      #d6bcee 2.25rem,
      #b48bdc 3rem,
      #9163c4 3.75rem,
      #6f42a6 4.5rem,
      #4b2a80 5.25rem,
      var(--dark) 6rem);
  }
  #contact .f-orb { top: 5.5rem; }
  .mock-body { padding: .8rem; gap: .7rem; }
  .pilot-card .p-in { padding: 1.8rem 1.4rem; }
  #demo-form { padding: 1.3rem 1.4rem 1.6rem; }
  .form-card .f-head { padding: 1.3rem 1.4rem 1.1rem; }
}

/* ── Reduced motion: show everything, stop moving ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .marquee .track { animation: none !important; flex-wrap: wrap; gap: 1rem 0; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .rise { opacity: 1; transform: none; animation: none; }
  .aware-track .seg, .mini-bar i, .mini-chart .bars i { transform: none !important; }
  .ab-cell { opacity: 1 !important; transform: none !important; }
  .p-card { opacity: 1 !important; transform: none !important; }
  .mock-window, .phone { animation: none !important; }
}