/* ==========================================================================
   ODUSE Ads — design system + site styles
   Single stylesheet. No external requests. CSP-safe (no inline styles anywhere).
   ========================================================================== */

/* ---------- Typeface -----------------------------------------------------
   偏离方案 §4.4 的记录：原计划自托管 Inter woff2 子集。改用系统 UI 字体栈。
   理由：① 下载字体文件需要外部请求与用户授权，本次未取得；
        ② 系统栈在各平台解析为 SF Pro / Segoe UI Variable / Roboto，
           质量足够，且体积 0 字节、请求 0 次，对 Lighthouse 与 CSP 更有利；
        ③ 完全满足方案「无外部请求」的原始意图。
   代价：跨操作系统字形不完全一致。已记入交付文档的偏离项。
   -------------------------------------------------------------------------*/

/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* structure */
  --c-ink-900:#14162B; --c-ink-700:#2C317E; --c-ink-600:#3A3F9E; --c-ink-400:#6B70B8;
  --c-surface:#FFFFFF; --c-surface-2:#F7F8FC; --c-surface-3:#EEF0F8;
  --c-border:#DFE2F0; --c-border-strong:#C4C9E4;
  /* accent */
  --c-accent:#0A6470; --c-accent-hover:#083F49; --c-positive:#0B6A4F; --c-warn:#7A4804;
  --c-text:#1B1D33; --c-text-muted:#4E5372;
  --c-text-on-dark:#EDEFFB; --c-muted-on-dark:#B9BEE6;
  /* typography */
  --f-sans:ui-sans-serif,system-ui,-apple-system,"SF Pro Text","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem; --fs-5xl:3.75rem;
  --lh-tight:1.15; --lh-snug:1.3; --lh-normal:1.6; --lh-relaxed:1.75;
  --ls-tight:-.02em; --ls-normal:0; --ls-wide:.08em;
  /* spacing */
  --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.5rem;
  --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem; --s-10:8rem;
  /* radii */
  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-full:999px;
  /* shadows */
  --sh-1:0 1px 2px rgba(20,22,43,.06);
  --sh-2:0 4px 16px rgba(20,22,43,.08);
  --sh-3:0 12px 40px rgba(20,22,43,.12);
  --sh-dark:0 20px 60px rgba(11,13,35,.45);
  /* borders */
  --bw-1:1px; --bw-2:2px;
  /* motion */
  --d-fast:140ms; --d-base:240ms; --d-slow:420ms; --d-chart:900ms;
  --e-out:cubic-bezier(.16,.84,.44,1); --e-inout:cubic-bezier(.65,.05,.36,1);
  /* layout */
  --container-max:1200px;
  --nav-h:68px;
}

/* ---------- Reset -------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--f-sans);font-size:var(--fs-base);line-height:var(--lh-normal);
  color:var(--c-text);background:var(--c-surface);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;line-height:var(--lh-tight);letter-spacing:var(--ls-tight);font-weight:700;color:var(--c-ink-900)}
p{margin:0}
ul,ol{margin:0;padding:0}
a{color:var(--c-accent);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--c-accent-hover)}
:focus-visible{outline:var(--bw-2) solid var(--c-accent);outline-offset:2px;border-radius:2px}

/* ---------- Language toggle (bilingual marketing pages) ------------------ */
body.en .lang-zh{display:none}
body.zh .lang-en{display:none}

/* ---------- Layout primitives -------------------------------------------- */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--s-5)}
.section{padding-block:var(--s-9)}
.section--tight{padding-block:var(--s-8)}
.section--alt{background:var(--c-surface-2)}
.section--dark{background:var(--c-ink-900);color:var(--c-text-on-dark)}
.section--dark h2,.section--dark h3{color:var(--c-text-on-dark)}
.stack>*+*{margin-top:var(--s-4)}
.grid{display:grid;gap:var(--s-5)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:100;
  background:var(--c-ink-900);color:#fff;padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm);font-weight:500;text-decoration:none;
  transition:top var(--d-fast) var(--e-out);
}
.skip-link:focus{top:var(--s-4);color:#fff}

/* ---------- Typography helpers ------------------------------------------- */
.eyebrow{
  font-size:var(--fs-sm);font-weight:600;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--c-accent);margin-bottom:var(--s-4);
}
.section--dark .eyebrow,.hero .eyebrow{color:#5FD3E0}
.h-display{font-size:clamp(2.25rem,5.2vw,3.75rem);letter-spacing:-.03em}
.h-section{font-size:clamp(1.75rem,3.4vw,2.25rem);margin-bottom:var(--s-4)}
.lede{font-size:var(--fs-lg);line-height:var(--lh-relaxed);color:var(--c-text-muted);max-width:62ch}
.section--dark .lede,.hero .lede{color:var(--c-muted-on-dark)}
/* Body links inside dark sections must not inherit the light-background
   accent: measured 2.17:1 on #14162B before this rule existed. */
.section--dark a:not(.btn),.hero a:not(.btn),.panel a:not(.btn){color:#7FD9E6}
.section--dark a:not(.btn):hover,.hero a:not(.btn):hover,.panel a:not(.btn):hover{color:#B4EBF3}
.muted{color:var(--c-text-muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.measure{max-width:70ch}

/* ---------- Buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  min-height:44px;padding:var(--s-3) var(--s-5);border-radius:var(--r-sm);
  font-weight:600;font-size:var(--fs-base);text-decoration:none;cursor:pointer;
  border:var(--bw-1) solid transparent;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out),
             transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out);
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--c-ink-700);color:#fff;box-shadow:var(--sh-1)}
.btn--primary:hover{background:var(--c-ink-600);color:#fff;box-shadow:var(--sh-2)}
.btn--ghost{background:transparent;color:var(--c-ink-700);border-color:var(--c-border-strong)}
.btn--ghost:hover{background:var(--c-surface-3);color:var(--c-ink-700);border-color:var(--c-ink-400)}
.section--dark .btn--ghost,.hero .btn--ghost{color:var(--c-text-on-dark);border-color:rgba(237,239,251,.42)}
.section--dark .btn--ghost:hover,.hero .btn--ghost:hover{background:rgba(237,239,251,.12);color:#fff;border-color:rgba(237,239,251,.7)}
.btn--onDark{background:#fff;color:var(--c-ink-700)}
.btn--onDark:hover{background:var(--c-surface-2);color:var(--c-ink-700)}

/* ---------- Navigation --------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:var(--bw-1) solid var(--c-border);
}
.nav__inner{display:flex;align-items:center;gap:var(--s-5);min-height:var(--nav-h)}
.nav__logo{display:flex;align-items:center;text-decoration:none;flex:none}
.nav__logo img{height:30px;width:auto}
.nav__links{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;list-style:none}
.nav__links a{
  display:block;padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  color:var(--c-text);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.nav__links a:hover{background:var(--c-surface-3);color:var(--c-ink-700)}
.nav__links a[aria-current="page"]{color:var(--c-ink-700);font-weight:600}
.nav__actions{display:flex;align-items:center;gap:var(--s-3);flex:none}
.lang{display:inline-flex;border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-sm);overflow:hidden}
.lang button{
  min-height:34px;padding:0 var(--s-3);border:0;background:transparent;cursor:pointer;
  font-family:inherit;font-size:var(--fs-xs);font-weight:600;color:var(--c-text-muted);
  transition:background var(--d-fast) var(--e-out),color var(--d-fast) var(--e-out);
}
.lang button:hover{background:var(--c-surface-3)}
.lang button[aria-pressed="true"]{background:var(--c-ink-700);color:#fff}
.nav__toggle{display:none;min-height:44px;min-width:44px;align-items:center;justify-content:center;
  background:transparent;border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-sm);cursor:pointer}
.nav__toggle span{display:block;width:18px;height:2px;background:var(--c-ink-900);position:relative}
.nav__toggle span::before,.nav__toggle span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:var(--c-ink-900)}
.nav__toggle span::before{top:-6px} .nav__toggle span::after{top:6px}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative;background:var(--c-ink-900);color:var(--c-text-on-dark);overflow:hidden}
.hero__grid-bg{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(107,112,184,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(107,112,184,.16) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 32%,transparent 76%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 0%,#000 32%,transparent 76%);
  animation:gridDrift 40s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0,0 0}to{background-position:64px 64px,64px 64px}}
.hero__inner{position:relative;padding-block:var(--s-9) var(--s-8)}
.hero h1{color:#fff;margin-bottom:var(--s-5)}
.hero .lede{color:var(--c-muted-on-dark);margin-bottom:var(--s-6)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.hero__note{margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--c-muted-on-dark);max-width:60ch}

/* ---------- Cards -------------------------------------------------------- */
.card{
  background:var(--c-surface);border:var(--bw-1) solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--s-5);box-shadow:var(--sh-1);
  transition:transform var(--d-fast) var(--e-out),box-shadow var(--d-fast) var(--e-out),
             border-color var(--d-fast) var(--e-out);
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-3);border-color:var(--c-border-strong)}
.card h3{font-size:var(--fs-xl);margin-bottom:var(--s-3)}
.card p{color:var(--c-text-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed)}
.card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-3)}
.card__head h3{margin-bottom:0}
.card__icon{width:36px;height:36px;flex:none;color:var(--c-accent)}

/* ---------- Status badges (capability_status) ---------------------------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--s-1);flex:none;
  padding:3px var(--s-2);border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;white-space:nowrap;
  border:var(--bw-1) solid;
}
.badge--current{color:var(--c-positive);border-color:#B7E0D1;background:#EEF9F5}
.badge--prototype{color:var(--c-ink-700);border-color:#C9CCEC;background:#F1F2FB}
.badge--planned{color:var(--c-text-muted);border-color:var(--c-border);background:var(--c-surface-2)}
.badge--approval{color:var(--c-warn);border-color:#EBD5AE;background:#FBF5E9}
.badge--demo{color:var(--c-warn);border-color:#EBD5AE;background:#FBF5E9}

/* ---------- Product preview panel ---------------------------------------- */
.panel{
  background:linear-gradient(180deg,#1B1E3D 0%,var(--c-ink-900) 100%);
  border:var(--bw-1) solid rgba(107,112,184,.34);
  border-radius:var(--r-lg);box-shadow:var(--sh-dark);
  color:var(--c-text-on-dark);overflow:hidden;
}
.panel__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);border-bottom:var(--bw-1) solid rgba(107,112,184,.28);
  background:rgba(255,255,255,.03);
}
.panel__title{font-size:var(--fs-sm);font-weight:600;color:#fff}
.panel__sub{font-size:var(--fs-xs);color:var(--c-muted-on-dark)}
.panel__body{padding:var(--s-4)}
.panel__foot{
  padding:var(--s-3) var(--s-4);border-top:var(--bw-1) solid rgba(107,112,184,.28);
  font-size:var(--fs-xs);color:var(--c-muted-on-dark);
}

/* metric row */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3);margin-bottom:var(--s-4)}
.metric{background:rgba(255,255,255,.045);border:var(--bw-1) solid rgba(107,112,184,.22);
  border-radius:var(--r-md);padding:var(--s-3)}
.metric__k{font-size:var(--fs-xs);color:var(--c-muted-on-dark);letter-spacing:.04em;text-transform:uppercase}
.metric__v{font-size:var(--fs-2xl);font-weight:700;color:#fff;line-height:1.2;font-variant-numeric:tabular-nums}
.metric__d{font-size:var(--fs-xs);color:#6FD8B4}

/* tabs */
.tabs{display:flex;gap:var(--s-1);position:relative;border-bottom:var(--bw-1) solid rgba(107,112,184,.28);margin-bottom:var(--s-4)}
.tabs button{
  appearance:none;background:transparent;border:0;cursor:pointer;font-family:inherit;
  padding:var(--s-3) var(--s-4);min-height:44px;
  font-size:var(--fs-sm);font-weight:600;color:var(--c-muted-on-dark);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color var(--d-fast) var(--e-out),border-color var(--d-base) var(--e-out);
}
.tabs button:hover{color:#fff}
.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:#3FBFCE}
.tabpanel[hidden]{display:none}
.tabpanel{animation:fadeIn 160ms var(--e-out)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* demo table */
.dtable{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.dtable th,.dtable td{padding:var(--s-3) var(--s-3);text-align:left;border-bottom:var(--bw-1) solid rgba(107,112,184,.2)}
.dtable th{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted-on-dark);font-weight:600}
.dtable td{color:var(--c-text-on-dark);font-variant-numeric:tabular-nums}
.dtable tr:last-child td{border-bottom:0}
.dtable .num{text-align:right}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* demo chips inside panel */
.chip{display:inline-flex;align-items:center;padding:2px var(--s-2);border-radius:var(--r-full);
  font-size:var(--fs-xs);font-weight:600;white-space:nowrap;border:var(--bw-1) solid}
.chip--ok{color:#7FE3C0;border-color:rgba(127,227,192,.4);background:rgba(127,227,192,.1)}
.chip--warn{color:#F2C778;border-color:rgba(242,199,120,.4);background:rgba(242,199,120,.1)}
.chip--idle{color:var(--c-muted-on-dark);border-color:rgba(185,190,230,.32);background:rgba(185,190,230,.08)}
.chip--info{color:#8FD8E4;border-color:rgba(143,216,228,.4);background:rgba(143,216,228,.1)}

/* demo notice, repeated inside every tabpanel */
.demo-note{
  display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);
  background:rgba(242,199,120,.09);border:var(--bw-1) solid rgba(242,199,120,.3);
  font-size:var(--fs-xs);color:#F2C778;
}

/* audit log */
.log{font-family:var(--f-mono);font-size:var(--fs-xs);line-height:1.9;color:var(--c-muted-on-dark)}
.log li{list-style:none;padding:var(--s-2) 0;border-bottom:var(--bw-1) solid rgba(107,112,184,.16);
  white-space:nowrap;overflow-x:auto}
.log li:last-child{border-bottom:0}
.log .t{color:#8FD8E4} .log .a{color:#fff} .log .ok{color:#7FE3C0} .log .no{color:#F2C778}

/* ---------- Workflow rail ------------------------------------------------ */
.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s-3);position:relative}
.flow__step{text-align:center}
.flow__dot{
  width:40px;height:40px;margin:0 auto var(--s-3);border-radius:var(--r-full);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--fs-sm);
  background:var(--c-surface);border:var(--bw-2) solid var(--c-border-strong);color:var(--c-ink-700);
  transition:border-color var(--d-base) var(--e-out),background var(--d-base) var(--e-out),color var(--d-base) var(--e-out);
}
.flow__step.is-in .flow__dot{border-color:var(--c-accent);background:var(--c-accent);color:#fff}
.flow__step h3{font-size:var(--fs-base);margin-bottom:var(--s-2)}
.flow__step p{font-size:var(--fs-sm);color:var(--c-text-muted)}
.flow__line{position:absolute;top:20px;left:8%;right:8%;height:2px;background:var(--c-border);z-index:-1}

/* ---------- FAQ ---------------------------------------------------------- */
.faq{border-top:var(--bw-1) solid var(--c-border)}
.faq details{border-bottom:var(--bw-1) solid var(--c-border);padding:var(--s-4) 0}
.faq summary{
  cursor:pointer;font-weight:600;font-size:var(--fs-lg);color:var(--c-ink-900);
  list-style:none;display:flex;justify-content:space-between;gap:var(--s-4);min-height:32px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:var(--fs-xl);color:var(--c-accent);line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:var(--s-3);color:var(--c-text-muted);max-width:78ch;line-height:var(--lh-relaxed)}

/* ---------- Identity block ----------------------------------------------- */
.identity{
  background:var(--c-surface);border:var(--bw-1) solid var(--c-border);
  border-radius:var(--r-lg);padding:var(--s-6);box-shadow:var(--sh-1);
}
.identity dl{display:grid;grid-template-columns:minmax(160px,auto) 1fr;gap:var(--s-3) var(--s-5);margin:0}
.identity dt{font-size:var(--fs-sm);font-weight:600;color:var(--c-text-muted)}
.identity dd{margin:0;font-size:var(--fs-sm);color:var(--c-text)}

/* ---------- Legal / prose pages ------------------------------------------ */
.prose{max-width:76ch}
.prose h2{font-size:var(--fs-2xl);margin-top:var(--s-7);margin-bottom:var(--s-4)}
.prose h3{font-size:var(--fs-xl);margin-top:var(--s-6);margin-bottom:var(--s-3)}
.prose p,.prose li{color:var(--c-text-muted);line-height:var(--lh-relaxed)}
.prose p+p{margin-top:var(--s-4)}
.prose ul{margin:var(--s-4) 0;padding-left:var(--s-5)}
.prose li{margin-bottom:var(--s-2);list-style:disc}
.prose strong{color:var(--c-text)}
.page-head{padding-block:var(--s-8) var(--s-6);border-bottom:var(--bw-1) solid var(--c-border)}

/* ---------- Footer ------------------------------------------------------- */
.footer{background:var(--c-ink-900);color:var(--c-muted-on-dark);padding-block:var(--s-8) var(--s-6)}
.footer a{color:var(--c-muted-on-dark);text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:var(--s-6);margin-bottom:var(--s-7)}
.footer h2{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--ls-wide);
  color:#fff;margin-bottom:var(--s-4);font-weight:600}
.footer ul{list-style:none}
.footer li{margin-bottom:var(--s-2);font-size:var(--fs-sm)}
.footer__logo{height:28px;width:auto;margin-bottom:var(--s-4)}
.footer__legal{border-top:var(--bw-1) solid rgba(107,112,184,.26);padding-top:var(--s-5);font-size:var(--fs-xs);line-height:var(--lh-relaxed)}
.footer__legal p+p{margin-top:var(--s-3)}
.footer__entity{color:#fff;font-weight:600}


/* ---------- Nav dashboard button ---------------------------------------- */
.btn--nav{min-height:36px;padding:var(--s-2) var(--s-4);font-size:var(--fs-sm);white-space:nowrap}

/* ---------- Pricing ------------------------------------------------------ */
.grid--4{grid-template-columns:repeat(4,1fr)}
.price-card{display:flex;flex-direction:column}
.price-card--rec{border-color:var(--c-ink-600);box-shadow:var(--sh-2)}
.price-amount{font-size:var(--fs-3xl);font-weight:700;color:var(--c-ink-900);
  line-height:1.1;margin:var(--s-2) 0 var(--s-3);letter-spacing:var(--ls-tight)}
.price-unit{display:block;font-size:var(--fs-sm);font-weight:500;color:var(--c-text-muted);
  letter-spacing:0;margin-top:var(--s-1)}
.price-desc{color:var(--c-text-muted);font-size:var(--fs-sm);line-height:var(--lh-relaxed);
  margin-bottom:var(--s-4);min-height:4.5em}
.price-feats{list-style:none;margin:0 0 var(--s-5);padding:0;flex:1}
.price-feats li{position:relative;padding-left:var(--s-5);margin-bottom:var(--s-2);
  font-size:var(--fs-sm);color:var(--c-text)}
.price-feats li::before{content:"";position:absolute;left:0;top:.45em;width:11px;height:6px;
  border-left:2px solid var(--c-accent);border-bottom:2px solid var(--c-accent);
  transform:rotate(-45deg)}
.price-card .btn{width:100%}
.price-note{margin-top:var(--s-6);max-width:78ch}
@media (max-width:1024px){ .grid--4{grid-template-columns:repeat(2,1fr)} .price-desc{min-height:0} }
@media (max-width:768px){ .grid--4{grid-template-columns:1fr} .btn--nav{width:100%;margin-top:var(--s-2)} }

/* ---------- Scroll reveal ------------------------------------------------
   Default state is VISIBLE. Content is only hidden once boot.js has proved
   that scripting is available (html.js-anim). If JS is off, blocked, or
   fails, every block stays readable — no content is ever trapped behind an
   animation that never runs.
   -------------------------------------------------------------------------*/
.reveal{opacity:1;transform:none;
  transition:transform var(--d-slow) var(--e-out)}
/* Position only — never opacity. Text therefore always renders at full
   contrast, including mid-animation. Removes a whole class of transient
   contrast failures and keeps the motion restrained. */
.js-anim .reveal:not(.is-in){transform:translateY(14px)}
.reveal-d1{transition-delay:60ms} .reveal-d2{transition-delay:120ms}
.reveal-d3{transition-delay:180ms} .reveal-d4{transition-delay:240ms}
/* Hero copy never fades: it animates position only, so the first screen is
   legible from the very first paint. */
.js-anim .hero .reveal:not(.is-in){transform:translateY(10px)}

/* chart draw */
.chart-line{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset var(--d-chart) var(--e-inout)}
.is-in .chart-line{stroke-dashoffset:0}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1024px){
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(3,1fr);gap:var(--s-5)}
  .flow__line{display:none}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  :root{--s-9:4rem;--s-8:3rem}
  .nav__toggle{display:inline-flex}
  .nav__links{
    display:none;position:absolute;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s-3);
    background:#fff;border-bottom:var(--bw-1) solid var(--c-border);box-shadow:var(--sh-2);
  }
  .nav__links.is-open{display:flex}
  .nav__links a{padding:var(--s-3);font-size:var(--fs-base)}
  .grid--3,.grid--2{grid-template-columns:1fr}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .identity dl{grid-template-columns:1fr;gap:var(--s-1) 0}
  .identity dd{margin-bottom:var(--s-3)}
  .hero__grid-bg{animation:none}
  .demo-note{position:sticky;left:0}
}
@media (max-width:480px){
  .metrics{grid-template-columns:1fr}
  .hero__cta .btn{width:100%}
}

/* ---------- Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .reveal,.js-anim .reveal:not(.is-in){transform:none}
  .hero__grid-bg{animation:none}
  .chart-line{stroke-dashoffset:0}
  .btn:hover,.card:hover{transform:none}
}

/* ---------- Print -------------------------------------------------------- */
@media print{
  .nav,.footer,.hero__grid-bg{background:#fff!important;color:#000!important}
  .panel{box-shadow:none;border:1px solid #999}
}