/* ─────────────────────────────────────────────────────────────────────────────
   landing.css — Katalor Vantage marketing lander (warm-cream redesign, 2026-07).
   Ported from the Design System handoff (design_handoff_vantage_landing). The
   lander is prerendered static HTML; its ONLY client script is same-origin
   reveal.js (scroll-reveal, under CSP script-src 'self' — Gunnar-approved). Hero
   pipeline fills animate via CSS on-load scaleX. Brand rules: no navy/dark
   surfaces, no em/en dashes.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  --ink:#12162e; --ink-2:#3a4066; --ink-soft:#5b6187;
  --paper:#FCFAF4; --paper-2:#F4EFE3; --paper-3:#EDE6D6;
  --line:#ddd5c4; --line-2:#cfc6b2;
  /* "navy"/"window" names are LEGACY — remapped to warm off-white (no dark surfaces). */
  --navy:#FEFCF7; --navy-2:#F7F1E6; --navy-line:#E6DECB; --navy-dim:#8a8168;
  --accent:#FE5F28; --alt:#DB1C7D;
  --teal:#3DBFA0; --blue:#3B82F6; --yellow:#FBBF24; --purple:#A855F7;
  --grad:linear-gradient(135deg,#FE5F28,#DB1C7D);
  --disp:'Space Grotesk',sans-serif; --body:'Outfit',sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --mx:clamp(20px,6vw,120px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{font-family:var(--body);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;line-height:1.6;overflow-x:hidden;}
::selection{background:rgba(254,95,40,.22);}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--alt);}
img,svg{display:block;}
.mono{font-family:var(--mono);}

/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.5;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(252,250,244,.82);backdrop-filter:blur(14px) saturate(1.1);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;gap:40px;padding:0 var(--mx);height:70px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand .ring{width:30px;height:30px;flex:0 0 auto;}
.brand .rot{transform-origin:100px 100px;animation:spin 34s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
@media(prefers-reduced-motion:reduce){.brand .rot{animation:none;}}
.brand .wm{font-family:var(--disp);line-height:.92;}
.brand .wm b{display:block;font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--ink);}
.brand .wm span{display:block;font-size:8.5px;letter-spacing:.34em;color:var(--ink-soft);font-weight:500;}
nav{display:flex;gap:30px;margin-left:8px;}
nav a{font-size:14px;color:var(--ink-2);position:relative;padding:4px 0;font-weight:400;}
nav a::after{content:"";position:absolute;left:0;bottom:-1px;width:0;height:1.5px;background:var(--grad);transition:width .28s cubic-bezier(.4,0,.2,1);}
nav a:hover{color:var(--ink);}
nav a:hover::after{width:100%;}
.bar .right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.signin{font-size:13.5px;color:var(--ink-2);padding:9px 14px;font-weight:500;}
.signin:hover{color:var(--ink);}
.btn{font-family:var(--body);font-weight:600;font-size:13.5px;border:none;cursor:pointer;border-radius:50px;padding:11px 22px;letter-spacing:.005em;transition:transform .2s,box-shadow .2s,background .2s,color .2s;display:inline-flex;align-items:center;gap:8px;}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 6px 20px rgba(254,95,40,.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(254,95,40,.42);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.btn-arrow svg{transition:transform .25s;}
.btn-arrow:hover svg{transform:translateX(3px);}
@media(max-width:940px){nav,.signin{display:none;}}

/* ---------- shared section furniture ---------- */
section{padding:clamp(72px,10vw,140px) var(--mx);position:relative;z-index:2;}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);}
.eyebrow .num{color:var(--accent);font-weight:600;}
.eyebrow .tick{width:22px;height:1px;background:var(--line-2);}
h2.big{font-family:var(--disp);font-weight:700;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:1.04;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.lead{font-size:clamp(1.05rem,1.6vw,1.32rem);line-height:1.65;color:var(--ink-2);font-weight:300;max-width:38ch;text-wrap:pretty;}
.rule{height:1px;background:var(--line);border:none;}

/* entrance motion — the design's scroll-triggered rise-in. reveal.js (external,
   same-origin, under CSP script-src 'self') adds `.in` as each element enters the
   viewport, and sets `.js` on <html> before first paint. Gated on `.js`, so with
   no JS the content is ALWAYS visible (opacity:1) and the prerendered copy stays
   fully crawlable — the reveal is pure enhancement. Reduced-motion: no reveal.
   (A CSS-only view() scroll-timeline was tried twice and proved unreliable — it
   left content at opacity:0 in Chrome despite reported support.) */
.rise,.stagger>*{opacity:1;transform:none;}
@media(prefers-reduced-motion:no-preference){
  html.js .rise{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1);}
  html.js .rise.in{opacity:1;transform:none;}
  html.js .stagger>*{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1);}
  html.js .stagger.in>*{opacity:1;transform:none;}
  html.js .stagger.in>*:nth-child(2){transition-delay:.08s;}
  html.js .stagger.in>*:nth-child(3){transition-delay:.16s;}
  html.js .stagger.in>*:nth-child(4){transition-delay:.24s;}
}

/* ---------- operator window (warm product UI, never dark) ---------- */
.win{background:var(--navy);border:1px solid var(--navy-line);border-radius:14px;box-shadow:0 26px 54px -30px rgba(90,66,30,.38),0 2px 8px rgba(90,66,30,.08);overflow:hidden;color:var(--ink);}
.win-bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--navy-line);background:var(--paper-2);}
.win-bar .dots{display:flex;gap:6px;}
.win-bar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2);display:block;}
.win-bar .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-dim);}
.win-bar .live{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--teal);display:flex;align-items:center;gap:6px;}
.win-bar .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(61,191,160,.5);animation:pulse 2.4s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,191,160,.5);}70%{box-shadow:0 0 0 7px rgba(61,191,160,0);}100%{box-shadow:0 0 0 0 rgba(61,191,160,0);}}
@media(prefers-reduced-motion:reduce){.win-bar .live::before{animation:none;}}
.win-body{padding:22px;}
.kicker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-dim);}

/* ---------- hero ---------- */
.hero{padding-top:clamp(56px,7vw,96px);padding-bottom:0;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center;}
.hero h1{font-family:var(--disp);font-weight:700;font-size:clamp(2.9rem,7vw,6rem);line-height:.98;letter-spacing:-.035em;margin:26px 0 0;color:var(--ink);text-wrap:balance;}
.hero .lead{margin-top:26px;max-width:46ch;font-size:clamp(1.08rem,1.5vw,1.3rem);}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center;}
.hero-meta{margin-top:30px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);text-transform:uppercase;display:flex;align-items:center;gap:12px;}
.hero-meta .d{width:4px;height:4px;border-radius:50%;background:var(--accent);}

/* hero window: live pipeline */
.hero-win-wrap{position:relative;}
.ghost-ring{position:absolute;right:-70px;top:-80px;width:320px;height:320px;opacity:.11;z-index:0;pointer-events:none;}
.ghost-ring .rot{transform-origin:100px 100px;animation:spin 60s linear infinite;}
@media(prefers-reduced-motion:reduce){.ghost-ring .rot{animation:none;}}
.pipe-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;}
.pipe-head .n{font-family:var(--disp);font-weight:700;font-size:3.4rem;line-height:1;color:var(--ink);letter-spacing:-.02em;}
.pipe-head .n em{font-style:normal;font-size:1rem;color:var(--navy-dim);font-family:var(--mono);letter-spacing:.1em;margin-left:8px;text-transform:uppercase;}
.stage{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:14px;padding:9px 0;}
.stage+.stage{border-top:1px solid var(--line);}
.stage .lab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--navy-dim);text-transform:uppercase;}
.stage .track{height:7px;border-radius:6px;background:var(--paper-3);overflow:hidden;}
/* fill width is set inline (correct with no JS); scaleX grows it in on load */
/* animation-delay is set inline per stage in the JSX (robust against the
   pipe-head sibling that nth-of-type would miscount). */
.stage .fill{height:100%;border-radius:6px;background:var(--grad);transform-origin:left center;animation:fill-in 1.1s cubic-bezier(.4,0,.2,1) both;}
@keyframes fill-in{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media(prefers-reduced-motion:reduce){.stage .fill{animation:none;}}
.stage .v{font-family:var(--disp);font-weight:600;font-size:14px;text-align:right;color:var(--ink);}
.stage.won .fill{background:var(--teal);}
.stage.won .v{color:var(--teal);}

/* stack strip */
.stack-strip{margin-top:clamp(56px,7vw,96px);padding-top:32px;border-top:1px solid var(--line);display:flex;align-items:center;gap:clamp(20px,4vw,54px);flex-wrap:wrap;}
.stack-strip .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.stack-strip .logos{display:flex;align-items:center;gap:clamp(22px,3.5vw,48px);flex-wrap:wrap;}
.stack-strip .logos span{font-family:var(--disp);font-weight:600;font-size:clamp(1rem,1.6vw,1.35rem);color:var(--ink-2);opacity:.78;letter-spacing:-.01em;transition:opacity .2s,color .2s;}
.stack-strip .logos span:hover{opacity:1;color:var(--ink);}

/* ---------- why: three columns ---------- */
.why-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(44px,6vw,72px);}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px);}
.pillar{border-top:2px solid var(--ink);padding-top:22px;}
.pillar .pn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);}
.pillar h3{font-family:var(--disp);font-weight:700;font-size:1.6rem;margin:16px 0 12px;letter-spacing:-.01em;color:var(--ink);}
.pillar p{color:var(--ink-2);font-size:1.02rem;font-weight:300;line-height:1.7;text-wrap:pretty;}

/* ---------- split feature ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center;}
.split.rev .copy{order:2;}
.feat-list{list-style:none;margin:28px 0 0;}
.feat-list li{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line);font-size:1.02rem;color:var(--ink-2);font-weight:300;align-items:flex-start;}
.feat-list li:last-child{border-bottom:1px solid var(--line);}
.feat-list .mk{flex:0 0 auto;width:20px;height:20px;margin-top:2px;color:var(--accent);}
.split h2.mid{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.08;letter-spacing:-.02em;margin-top:20px;color:var(--ink);text-wrap:balance;}

/* ICP window */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;}
.chip{font-family:var(--mono);font-size:11px;padding:7px 12px;border-radius:6px;border:1px solid var(--navy-line);background:var(--paper-2);color:var(--ink-2);letter-spacing:.03em;}
.chip.on{border-color:rgba(254,95,40,.5);background:rgba(254,95,40,.1);color:#b23c12;}
.estimate{border-top:1px solid var(--navy-line);margin-top:6px;padding-top:20px;}
.estimate .n{font-family:var(--disp);font-weight:700;font-size:3rem;line-height:1;letter-spacing:-.02em;}
.estimate .sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--navy-dim);margin-top:8px;text-transform:uppercase;}

/* pipeline board window */
.board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.board .col{background:var(--paper-2);border:1px solid var(--navy-line);border-radius:9px;padding:11px;min-height:150px;}
.board .col h4{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--navy-dim);margin-bottom:11px;display:flex;justify-content:space-between;}
.card-l{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:7px;padding:10px;margin-bottom:8px;}
.card-l .co{font-family:var(--disp);font-weight:600;font-size:13px;color:var(--ink);}
.card-l .rl{font-size:10.5px;color:var(--navy-dim);margin-top:2px;}
.card-l .sc{float:right;font-family:var(--mono);font-size:12px;font-weight:600;}
.sc.hi{color:var(--teal);} .sc.md{color:var(--blue);}
@media(max-width:560px){.board{grid-template-columns:repeat(2,1fr);}}

/* leads handoff */
.handoff{list-style:none;}
.handoff li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--navy-line);border-radius:10px;background:var(--paper-2);margin-bottom:10px;}
.handoff .co{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--ink);}
.handoff .who{font-size:12px;color:var(--navy-dim);margin-top:3px;}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;padding:6px 11px;border-radius:50px;text-transform:uppercase;white-space:nowrap;}
.badge.teal{color:var(--teal);border:1px solid rgba(61,191,160,.4);background:rgba(61,191,160,.09);}
.badge.blue{color:var(--blue);border:1px solid rgba(59,130,246,.4);background:rgba(59,130,246,.09);}
.badge.dim{color:var(--navy-dim);border:1px solid var(--navy-line);}

/* workspace band */
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.doc-row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--navy-line);border-radius:10px;background:var(--paper-2);margin-bottom:10px;}
.doc-row .ic{width:34px;height:34px;flex:0 0 auto;border-radius:8px;background:rgba(254,95,40,.12);border:1px solid rgba(254,95,40,.25);display:grid;place-items:center;color:var(--accent);}
.doc-row .nm{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink);}
.doc-row .mt{font-size:11px;color:var(--navy-dim);margin-top:2px;font-family:var(--mono);letter-spacing:.03em;}
.doc-row .amt{margin-left:auto;text-align:right;}
.doc-row .amt .p{font-family:var(--disp);font-weight:600;font-size:14px;color:var(--ink);}

/* proof window */
.proof-canvas{background:linear-gradient(135deg,#F7F1E6,#EDE6D6);border:1px solid var(--navy-line);border-radius:9px;height:150px;position:relative;display:grid;place-items:center;overflow:hidden;}
.proof-canvas .ph{font-family:var(--mono);font-size:11px;color:var(--navy-dim);letter-spacing:.08em;}
.proof-canvas .pin{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;font-family:var(--mono);font-size:10px;font-weight:600;box-shadow:0 4px 12px rgba(254,95,40,.4);}
.proof-foot{display:flex;align-items:center;gap:8px;margin-top:14px;}
.ver{font-family:var(--mono);font-size:11px;padding:6px 11px;border-radius:6px;border:1px solid var(--navy-line);color:var(--navy-dim);}
.ver.on{border-color:rgba(254,95,40,.5);color:#b23c12;background:rgba(254,95,40,.08);}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);counter-reset:s;}
.step{position:relative;padding-top:30px;border-top:2px solid var(--ink);}
.step .sn{font-family:var(--disp);font-weight:700;font-size:2.6rem;color:var(--paper-3);line-height:1;letter-spacing:-.02em;position:absolute;top:22px;right:0;}
.step h3{font-family:var(--disp);font-weight:700;font-size:1.4rem;margin:8px 0 12px;color:var(--ink);letter-spacing:-.01em;}
.step p{color:var(--ink-2);font-weight:300;font-size:1rem;line-height:1.7;max-width:34ch;text-wrap:pretty;}

/* security */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--navy-line);border:1px solid var(--navy-line);border-radius:14px;overflow:hidden;}
.sec-cell{background:var(--navy);padding:28px 24px;}
.sec-cell .ic{color:var(--teal);margin-bottom:18px;}
.sec-cell h4{font-family:var(--disp);font-weight:600;font-size:1.08rem;color:var(--ink);margin-bottom:8px;}
.sec-cell p{font-size:.92rem;color:var(--navy-dim);line-height:1.6;font-family:var(--mono);letter-spacing:.01em;}
@media(max-width:900px){.sec-grid{grid-template-columns:repeat(2,1fr);}.cols3,.steps{grid-template-columns:1fr;}.hero-grid,.split,.why-head{grid-template-columns:1fr;}.split.rev .copy{order:0;}}

/* capabilities grid — asymmetric bento, container-query driven */
.caps-wrap{container-type:inline-size;}
.caps{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}
@container (min-width:620px){.caps{grid-template-columns:repeat(2,1fr);}.cap.feat{grid-column:span 2;}}
@container (min-width:960px){.caps{grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;}.cap.feat{grid-column:span 2;grid-row:span 2;}}
.cap{background:var(--paper);padding:clamp(26px,2.6vw,34px);transition:background .2s;display:flex;flex-direction:column;}
.cap:hover{background:#fff;}
.cap h3{font-family:var(--disp);font-weight:600;font-size:1.18rem;color:var(--ink);margin-bottom:10px;letter-spacing:-.01em;}
.cap p{color:var(--ink-2);font-weight:300;font-size:.98rem;line-height:1.62;text-wrap:pretty;}
.cap .tag{display:inline-block;margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.cap.feat{background:var(--grad);color:#fff;justify-content:flex-end;box-shadow:0 24px 50px -34px rgba(219,28,125,.5);}
.cap.feat:hover{background:var(--grad);}
.cap.feat h3{color:#fff;font-size:clamp(1.5rem,2.4vw,2rem);margin-top:26px;}
.cap.feat p{color:rgba(255,255,255,.9);font-size:clamp(1rem,1.4vw,1.12rem);max-width:36ch;}
.cap.feat .tag{color:rgba(255,255,255,.72);}

/* AI search scorecard window */
.ais-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.ais-head .n{font-family:var(--disp);font-weight:700;font-size:2.4rem;line-height:1;letter-spacing:-.02em;}
.ais-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line);}
.ais-row:first-of-type{border-top:none;}
.ais-row .lab{font-size:13px;color:var(--ink-2);}
.dots5{display:flex;gap:4px;}
.dots5 i{width:8px;height:8px;border-radius:50%;background:var(--paper-3);display:block;}
.dots5 i.on{background:currentColor;}
.ais-row .lvl{font-family:var(--mono);font-size:12px;font-weight:600;width:14px;text-align:right;}

/* final CTA */
.final{background:var(--grad);color:#fff;border-radius:24px;margin:clamp(40px,6vw,90px) var(--mx);padding:clamp(56px,8vw,110px) clamp(28px,6vw,90px);position:relative;overflow:hidden;z-index:2;box-shadow:0 30px 70px -34px rgba(219,28,125,.5);}
.final .bgring{position:absolute;right:-120px;bottom:-140px;width:460px;height:460px;opacity:.22;}
.final .bgring *{fill:#fff!important;stroke:#fff!important;}
.final .bgring .rot{transform-origin:100px 100px;animation:spin 70s linear infinite;}
@media(prefers-reduced-motion:reduce){.final .bgring .rot{animation:none;}}
.final .inner{position:relative;z-index:2;max-width:20ch;}
.final h2{font-family:var(--disp);font-weight:700;font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-.025em;color:#fff;text-wrap:balance;}
.final p{color:rgba(255,255,255,.88);font-size:1.15rem;font-weight:300;margin-top:22px;max-width:44ch;line-height:1.6;}
.final .cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.final .btn-primary{background:#fff;color:var(--ink);box-shadow:0 8px 24px rgba(20,10,0,.22);}
.final .btn-primary:hover{background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,10,0,.3);}
.final .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);}
.final .btn-ghost:hover{border-color:#fff;color:#fff;}

/* footer */
footer{padding:clamp(48px,6vw,80px) var(--mx) 40px;position:relative;z-index:2;}
.foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px;border-bottom:1px solid var(--line);}
.foot-top .about{max-width:34ch;color:var(--ink-2);font-weight:300;font-size:.98rem;line-height:1.65;margin-top:18px;}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:16px;}
.foot-col a{display:block;color:var(--ink-2);font-size:.96rem;padding:6px 0;font-weight:400;}
.foot-col a:hover{color:var(--accent);}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:24px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;flex-wrap:wrap;}
.foot-bot a{color:var(--ink-soft);}
@media(max-width:820px){.foot-top{grid-template-columns:1fr 1fr;}}

/* scroll-driven progress bar (CSS-only, progressive enhancement) */
.scroll-prog{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:var(--grad);z-index:200;pointer-events:none;}
@supports (animation-timeline: scroll()){.scroll-prog{animation:growProg linear both;animation-timeline:scroll(root);}}
@keyframes growProg{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@media(prefers-reduced-motion:reduce){.scroll-prog{display:none;}}