/* ============================================================
   HAANK — Set in Code, Compiled Live
   ============================================================ */
:root{
  --navy:#0F1E33; --navy-deep:#0A1626; --navy-panel:#16273F;
  --gold:#E5A93C; --gold-lt:#F4C465; --cream:#F7F5EF; --grey:#8A94A3;
  --hair:rgba(247,245,239,.12); --hair-2:rgba(247,245,239,.07);
  --disp:'Space Grotesk',system-ui,sans-serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --e:cubic-bezier(.16,1,.3,1);
  --gut:clamp(24px,8vw,140px);
  --maxw:1280px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.lenis{scroll-behavior:auto}
body{
  font-family:var(--sans);background:var(--navy-deep);color:var(--cream);
  line-height:1.6;font-size:clamp(1rem,1.15vw,1.2rem);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body::before{ /* faint static grain to kill banding */
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--disp);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.mono{font-family:var(--mono)}
img,svg{display:block}
::selection{background:var(--gold);color:var(--navy-deep)}

.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--gold);color:var(--navy-deep);
  padding:10px 16px;border-radius:8px;font-family:var(--mono);font-size:.85rem;transition:top .2s}
.skip:focus{top:12px}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}

.label{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.tagbr{color:var(--gold);opacity:.7}
.sec-head{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.sec-h2{font-size:clamp(1.9rem,4vw,3.4rem);margin-top:14px;max-width:18ch}
.sec-lede{color:var(--grey);max-width:56ch;margin-top:18px;font-size:1.05rem}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background .4s var(--e),border-color .4s var(--e)}
.nav::after{content:"";position:absolute;inset:0;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  background:rgba(10,22,38,.72);opacity:0;transition:opacity .4s var(--e);z-index:-1;border-bottom:1px solid transparent}
.nav.stuck::after{opacity:1;border-bottom:1px solid var(--hair)}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:16px var(--gut);display:flex;align-items:center;justify-content:space-between;gap:20px}
.mark--nav{display:block;height:26px;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--e),transform .5s var(--e)}
.nav.stuck .mark--nav{opacity:1;transform:none}
.mark,.foot-mark{aspect-ratio:700/168}
.mark-svg{display:block;width:100%;height:100%;overflow:visible}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a[data-nav]{font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:#c7cfdb;position:relative;padding:4px 0}
.nav-links a[data-nav]::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e)}
.nav-links a[data-nav]:hover::after,.nav-links a[data-nav].active::after{transform:scaleX(1)}
.pill{font-family:var(--mono);font-size:.82rem;background:var(--gold);color:var(--navy-deep);
  padding:9px 16px;border-radius:9px;font-weight:500;transition:transform .18s var(--e),background .18s}
.pill:hover{background:var(--gold-lt);transform:translateY(-2px)}
.langswitch{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--gold);
  border:1px solid rgba(229,169,60,.35);border-radius:8px;padding:5px 11px;transition:background .18s var(--e),border-color .18s}
.langswitch:hover{background:rgba(229,169,60,.12);border-color:var(--gold)}
@media(max-width:760px){.nav-links a[data-nav]{display:none}}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;padding:120px var(--gut) 64px}
.hero::before{ /* soft radial glow top-right */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 80% at 82% 8%, rgba(26,47,77,.7) 0%, rgba(10,22,38,0) 60%)}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);margin-bottom:26px}
.hero-mark-slot{height:clamp(56px,9vw,116px);margin-bottom:26px}
.mark--hero{display:inline-block;height:100%}
.hero-h1{font-size:clamp(2.6rem,7vw,6.4rem);line-height:1.02;letter-spacing:-.025em;font-weight:500;max-width:16ch}
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .w{display:inline-block}
.accent{color:var(--gold);position:relative}
.accent::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:3px;background:var(--gold);
  transform-origin:left;animation:breathe 3.4s var(--e) infinite}
@keyframes breathe{0%,100%{opacity:.55;transform:scaleX(.92)}50%{opacity:1;transform:scaleX(1)}}
.hero-sub{color:var(--grey);max-width:52ch;margin-top:26px;font-size:1.12rem}
.hero-cta{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;align-items:center}
.hero-meta{display:flex;gap:clamp(14px,3vw,44px);flex-wrap:wrap;align-items:center;margin-top:min(9vh,90px);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}
.scrollcue{color:var(--cream);display:inline-flex;gap:8px;align-items:center}
.scrollcue i{color:var(--gold);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.98rem;
  padding:14px 24px;border-radius:12px;position:relative;transition:transform .18s var(--e);will-change:transform}
.btn-gold{background:var(--gold);color:var(--navy-deep);overflow:hidden;isolation:isolate}
.btn-gold .caret{transition:transform .2s var(--e)}
.btn-gold::before{content:"";position:absolute;inset:0;background:var(--gold-lt);transform:translateX(-101%);
  transition:transform .4s var(--e);z-index:-1}
.btn-gold:hover::before{transform:none}
.btn-gold:hover .caret{transform:translateX(4px)}
.btn-ghost{border:1.5px solid var(--hair);color:var(--cream);font-family:var(--mono);font-weight:400;font-size:.92rem}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn.big{padding:18px 34px;font-size:1.05rem}

/* ---------- PROOF STRIP ---------- */
.proof{background:var(--navy);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);position:relative;overflow:hidden;z-index:2}
.proof-inner{max-width:var(--maxw);margin:0 auto;padding:20px var(--gut);display:flex;gap:clamp(16px,3vw,40px);
  flex-wrap:wrap;align-items:center;font-size:.82rem;letter-spacing:.06em;color:var(--grey)}
.proof .ok{color:var(--gold)}
.proof b{color:var(--cream);font-weight:500}
.proof[data-scanline] .proof-inner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(229,169,60,.16),transparent);transform:translateX(-100%)}
.proof.scan .proof-inner::before{animation:scan 1.1s var(--e) forwards}
@keyframes scan{to{transform:translateX(100%)}}

/* ---------- STATEMENT ---------- */
.statement{padding:clamp(90px,16vh,200px) var(--gut);max-width:var(--maxw);margin:0 auto}
.statement .label{margin-bottom:26px}
.stmt{font-size:clamp(1.6rem,3.6vw,3.1rem);line-height:1.28;font-weight:400;font-family:var(--disp);max-width:24ch}
.stmt .line{display:block}
.stmt .line.dim{color:var(--grey)}
.gold-lead{color:var(--gold)}

/* ---------- WORK / LEDGER ---------- */
.work{padding:40px 0 60px}
.ledger{list-style:none;max-width:var(--maxw);margin:40px auto 0;padding:0 var(--gut)}
.row{border-top:1px solid var(--hair);position:relative;transition:opacity .4s var(--e)}
.row:last-child{border-bottom:1px solid var(--hair)}
.row-link{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"num name go" "num cat go" "num desc go";
  gap:2px 22px;align-items:center;padding:30px 8px;position:relative}
.num{grid-area:num;font-size:.9rem;color:var(--grey);align-self:start;padding-top:6px;transition:color .3s var(--e)}
.pname{grid-area:name;font-family:var(--disp);font-weight:700;font-size:clamp(2rem,6vw,4.6rem);line-height:1;
  letter-spacing:-.03em;overflow-wrap:break-word;background:linear-gradient(var(--gold),var(--gold)) left bottom / 0% 3px no-repeat;
  transition:background-size .5s var(--e)}
.cat{grid-area:cat;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-top:8px}
.desc{grid-area:desc;color:var(--grey);max-width:44ch;margin-top:6px;font-size:1rem}
.go{grid-area:go;color:var(--gold);font-size:.82rem;opacity:0;transform:translateX(-6px);transition:.3s var(--e)}
.preview{grid-area:go;position:absolute;right:8px;top:50%;transform:translateY(-50%) translateX(20px);
  width:200px;max-width:34vw;opacity:0;pointer-events:none;transition:opacity .45s var(--e),transform .45s var(--e)}
.preview .art{width:100%;height:auto;filter:drop-shadow(0 0 20px rgba(229,169,60,.12))}
.preview .sel{fill:rgba(229,169,60,.25)}
/* hover / active (desktop) */
@media(hover:hover) and (min-width:820px){
  .ledger:hover .row{opacity:.35}
  .ledger .row:hover,.ledger .row:focus-within{opacity:1}
  .row:hover .pname,.row:focus-within .pname{background-size:100% 3px}
  .row:hover .num,.row:focus-within .num{color:var(--gold)}
  .row:hover .preview,.row:focus-within .preview{opacity:1;transform:translateY(-50%) translateX(0)}
  .row:hover .go,.row:focus-within .go{display:none}
}
/* mobile: always open, previews stacked */
@media(max-width:819px){
  .row-link{grid-template-columns:auto 1fr;grid-template-areas:"num name" "num cat" "num desc" "prev prev"}
  .pname{background-size:100% 3px}
  .go{display:none}
  .preview{grid-area:prev;position:static;transform:none;opacity:1;width:180px;margin-top:16px}
}

/* ---------- POS ---------- */
.demo{padding:clamp(80px,12vh,140px) 0}
.pos-wrap{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gut);display:flex;justify-content:center}
.pos{width:min(760px,100%);background:var(--navy-panel);border:1px solid var(--hair);border-radius:20px;
  overflow:hidden;position:relative;box-shadow:0 0 0 1px rgba(229,169,60,.14),0 30px 80px -40px rgba(0,0,0,.8)}
.pos-top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--hair)}
.pos-brand{font-size:.82rem;letter-spacing:.1em;color:var(--cream);display:flex;align-items:center;gap:9px}
.pos-brand .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.langtoggle{font-family:var(--mono);font-size:.82rem;color:var(--gold);background:rgba(229,169,60,.1);
  border:1px solid rgba(229,169,60,.3);border-radius:8px;padding:9px 14px;min-height:40px;cursor:pointer;transition:.18s}
.langtoggle:hover{background:rgba(229,169,60,.18)}
.langtoggle .ar{font-size:1rem}
.pos-body{display:grid;grid-template-columns:1.35fr 1fr;min-height:340px}
.menu{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:20px;align-content:start;border-right:1px solid var(--hair)}
.mitem{background:var(--navy);border:1px solid var(--hair);border-radius:12px;padding:14px;text-align:left;cursor:pointer;
  transition:transform .15s var(--e),border-color .15s,background .15s;color:var(--cream);font-family:var(--sans)}
.mitem:hover{border-color:rgba(229,169,60,.5);transform:translateY(-2px)}
.mitem:active{transform:scale(.97)}
.mitem .mn{font-weight:600;font-size:.98rem;display:block}
.mitem .mp{font-family:var(--mono);font-size:.8rem;color:var(--gold);margin-top:6px;display:block}
.cart{display:flex;flex-direction:column;padding:18px}
.cart-head{display:flex;justify-content:space-between;align-items:center;font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--grey);padding-bottom:12px;border-bottom:1px solid var(--hair)}
.clear{background:none;border:none;color:var(--grey);cursor:pointer;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.clear:hover{color:var(--gold)}
.cart-lines{list-style:none;flex:1;overflow-y:auto;max-height:190px;margin:10px 0}
.cline{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;font-size:.92rem;
  border-bottom:1px dashed var(--hair-2)}
.cline .cq{font-family:var(--mono);color:var(--gold);min-width:2.2em}
.cline .cn{flex:1;color:var(--cream)}
.cline .cx{font-family:var(--mono);color:var(--cream)}
.cline .rm{background:none;border:none;color:var(--grey);cursor:pointer;font-size:1rem;line-height:1;padding:6px 10px;min-width:34px;min-height:34px;display:grid;place-items:center}
.cline .rm:hover{color:var(--gold)}
.cart-empty{color:var(--grey);font-size:.82rem;padding:22px 0;text-align:center}
.totals{border-top:1px solid var(--hair);padding-top:12px;font-size:.9rem}
.tr{display:flex;justify-content:space-between;padding:4px 0;color:var(--grey)}
.tr span:last-child{font-family:var(--mono);color:var(--cream)}
.tr.grand{color:var(--cream);font-size:1.05rem;margin-top:6px;padding-top:10px;border-top:1px solid var(--hair)}
.tr.grand span:last-child{color:var(--gold);font-weight:500}
.print{margin-top:14px;background:var(--gold);color:var(--navy-deep);border:none;border-radius:10px;
  padding:12px;font-family:var(--mono);font-size:.86rem;font-weight:500;cursor:pointer;transition:.18s}
.print:hover{background:var(--gold-lt)}
.print:disabled{opacity:.4;cursor:not-allowed}
/* receipt */
.receipt{position:absolute;left:50%;bottom:0;transform:translate(-50%,100%);width:230px;z-index:5;
  transition:transform .6s var(--e);pointer-events:none}
.receipt.out{transform:translate(-50%,10px)}
.r-body{background:var(--cream);color:#1a1a1a;border-radius:6px 6px 0 0;padding:16px 18px;font-size:.72rem;line-height:1.7;
  box-shadow:0 -10px 40px rgba(0,0,0,.5);
  -webkit-mask-image:linear-gradient(#000 92%,transparent 92%),repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 16px);
  -webkit-mask-position:top,bottom;-webkit-mask-size:100% 100%,100% 10px;-webkit-mask-repeat:no-repeat;
  mask-image:linear-gradient(#000 92%,transparent 92%),repeating-linear-gradient(90deg,#000 0 8px,transparent 8px 16px);
  mask-position:top,bottom;mask-size:100% 100%,100% 10px;mask-repeat:no-repeat}
.r-brand{font-weight:700;font-size:.85rem;text-align:center}
.r-sub{text-align:center;color:#666;font-size:.62rem;border-bottom:1px dashed #bbb;padding-bottom:8px;margin-bottom:8px}
.r-lines{display:flex;flex-direction:column;gap:2px}
.rl{display:flex;justify-content:space-between}
.r-tot{border-top:1px dashed #bbb;margin-top:8px;padding-top:8px;font-weight:700;display:flex;justify-content:space-between}
.r-foot{text-align:center;color:#666;margin-top:8px;font-size:.62rem}
/* POS RTL */
.pos[dir="rtl"]{font-family:var(--sans)}
.pos[dir="rtl"] .menu{border-right:none;border-left:1px solid var(--hair)}
.pos[dir="rtl"] .mitem{text-align:right}
@media(max-width:640px){
  .pos-body{grid-template-columns:1fr}
  .menu{border-right:none;border-bottom:1px solid var(--hair);grid-template-columns:repeat(2,1fr)}
  .pos[dir="rtl"] .menu{border-left:none}
}

/* ---------- CAPABILITIES ---------- */
.caps{padding:clamp(80px,12vh,140px) 0}
.caps-code{max-width:var(--maxw);margin:34px auto 0;padding:0 var(--gut);font-size:clamp(.9rem,1.5vw,1.15rem);color:var(--grey)}
.caps-code .kw{color:var(--gold)}
.caps-code .str{color:var(--gold-lt)}
.caps-code .tok{color:var(--cream);cursor:default;border-bottom:1px dashed transparent;transition:.2s}
.caps-code .tok.lit{border-color:var(--gold);color:var(--gold)}
.caps-grid{max-width:var(--maxw);margin:34px auto 0;padding:0 var(--gut);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.cap{background:var(--navy);border:1px solid var(--hair);border-radius:16px;padding:26px 24px;transition:border-color .25s var(--e),transform .25s var(--e)}
.cap.lit,.cap:hover{border-color:rgba(229,169,60,.55);transform:translateY(-3px)}
.capi{width:40px;height:40px;margin-bottom:16px}
.cap h3{font-family:var(--mono);font-weight:500;font-size:1.1rem;color:var(--cream);margin-bottom:8px}
.cap p{font-size:.86rem;color:var(--grey);line-height:1.6}

/* ---------- PROCESS ---------- */
.process{padding:clamp(80px,12vh,140px) 0;background:var(--navy);border-top:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2)}
.pipe{list-style:none;max-width:var(--maxw);margin:40px auto 0;padding:0 var(--gut);display:grid;
  grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.stage{border-top:2px solid var(--hair);padding-top:22px;position:relative}
.stage .chk{position:absolute;top:-13px;left:0;width:26px;height:26px;border-radius:50%;background:var(--navy);
  border:2px solid var(--hair);color:var(--grey);display:grid;place-items:center;font-size:.8rem;transition:.4s var(--e)}
.stage.in .chk{border-color:var(--gold);color:var(--gold);background:var(--navy-deep)}
.stage.in{border-top-color:var(--gold)}
.stage h3{font-family:var(--mono);font-weight:500;font-size:1.15rem;color:var(--cream);margin-bottom:8px}
.stage p{font-size:.84rem;color:var(--grey)}
.pipe-log{max-width:var(--maxw);margin:30px auto 0;padding:0 var(--gut);color:var(--gold);font-size:.9rem}
@media(max-width:720px){.pipe{grid-template-columns:1fr 1fr}}
@media(max-width:440px){.pipe{grid-template-columns:1fr}}

/* ---------- STUDIO / STATS ---------- */
.studio{padding:clamp(80px,12vh,150px) 0}
.stats{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gut);display:grid;
  grid-template-columns:repeat(3,1fr);gap:30px}
.stat{border-left:2px solid var(--hair);padding-left:22px}
.fig{font-family:var(--disp);font-weight:700;font-size:clamp(3rem,8vw,6rem);line-height:1;
  font-variant-numeric:tabular-nums;display:inline-block;position:relative}
.fig::after{content:"";position:absolute;left:0;bottom:-6px;height:3px;width:0;background:var(--gold);transition:width .8s var(--e)}
.stat.in .fig::after{width:1.4em}
.slabel{display:block;margin-top:18px;font-size:.78rem;letter-spacing:.1em;color:var(--grey);text-transform:uppercase}
.avail{max-width:var(--maxw);margin:44px auto 0;padding:0 var(--gut);color:var(--cream);font-size:.92rem;display:flex;align-items:center;gap:10px}
.adot{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(229,169,60,.5);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,169,60,.5)}70%{box-shadow:0 0 0 12px rgba(229,169,60,0)}100%{box-shadow:0 0 0 0 rgba(229,169,60,0)}}
@media(max-width:720px){.stats{grid-template-columns:1fr;gap:22px}}

/* ---------- ARCHITECTURE ---------- */
.arch{padding:clamp(80px,12vh,150px) 0;background:var(--navy);border-top:1px solid var(--hair-2)}
.graph-wrap{max-width:1040px;margin:44px auto 0;padding:0 var(--gut);overflow:hidden}
.graph{width:100%;height:auto;overflow:hidden}
.graph .edge{stroke-dasharray:1;stroke-dashoffset:0;opacity:.5;transition:opacity .3s,stroke-width .3s}
.graph .node rect{fill:var(--navy-deep);stroke:var(--hair);stroke-width:1.4;transition:stroke .3s,fill .3s}
.graph .node text{fill:var(--cream);font-size:15px;text-anchor:middle;dominant-baseline:middle;letter-spacing:.02em}
.graph .node.core rect{stroke:rgba(229,169,60,.6)}
.graph .node.prod rect{fill:var(--navy-panel)}
.graph .node{cursor:pointer}
.graph .node:focus-visible{outline:none}
.graph .node:hover rect,.graph .node:focus-visible rect{stroke:var(--gold);stroke-width:2.4;filter:drop-shadow(0 0 10px rgba(229,169,60,.3))}
.graph .node text{pointer-events:none}
/* dim/highlight state driven by [data-active] on the svg */
.graph[data-active] .node{opacity:.28}
.graph[data-active] .edge{opacity:.08}
.graph[data-active] .node.hot{opacity:1}
.graph[data-active] .edge.hot{opacity:1;stroke-width:2.4}
.graph[data-active] .node.hot rect{stroke:var(--gold)}
.graph-hint{text-align:center;margin-top:26px;color:var(--grey);font-size:.78rem;letter-spacing:.12em}
/* assemble animation */
.js .graph:not(.built) .node{opacity:0;transform:translateY(10px) scale(.96);transform-box:fill-box;transform-origin:center}
.js .graph.built .node{opacity:1;transform:none;transition:opacity .5s var(--e),transform .5s var(--e)}
.js .graph.built .node.prod{transition-delay:.35s}

/* ---------- CONTACT ---------- */
.contact{min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:clamp(90px,14vh,180px) var(--gut);position:relative}
.contact-inner{max-width:760px}
.contact .label{margin-bottom:22px}
.contact-h{font-size:clamp(2.2rem,6vw,4.6rem);line-height:1.05}
.contact-lead{color:var(--grey);max-width:42ch;margin:22px auto 0;font-size:1.08rem}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.prompt{display:inline-flex;align-items:center;gap:12px;margin-top:34px;background:var(--navy);border:1px solid var(--hair);
  border-radius:12px;padding:16px 24px;font-size:clamp(1rem,2vw,1.35rem);color:var(--cream);cursor:pointer;transition:.2s var(--e)}
.prompt:hover{border-color:var(--gold)}
.prompt .pc{color:var(--gold)}
.prompt .copyicon{color:var(--grey);font-size:1rem}
.prompt.copied .copyicon{color:var(--gold)}
.contact-cta{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.contact-sub{margin-top:26px;color:var(--grey);font-size:.9rem;max-width:52ch;margin-left:auto;margin-right:auto}
.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);background:var(--gold);
  color:var(--navy-deep);padding:10px 20px;border-radius:10px;font-size:.85rem;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;z-index:150}
.toast.show{opacity:1;transform:translateX(-50%)}

/* ---------- FOOTER ---------- */
.footer{border-top:1px solid var(--hair);background:var(--navy-deep)}
.foot-inner{max-width:var(--maxw);margin:0 auto;padding:30px var(--gut);display:flex;align-items:center;gap:24px;
  flex-wrap:wrap;font-size:.78rem;color:var(--grey)}
.foot-mark{height:22px;display:inline-block}
.foot-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-links a:hover{color:var(--gold)}
.foot-status{display:flex;align-items:center;gap:8px;margin-left:auto}
.colophon{flex-basis:100%;color:var(--grey);opacity:.7;font-size:.72rem;line-height:1.6;border-top:1px solid var(--hair-2);padding-top:18px}

/* ---------- CURSOR ---------- */
.cursor{position:fixed;top:0;left:0;width:30px;height:30px;border:1.5px solid var(--gold);border-radius:50%;
  pointer-events:none;z-index:300;transform:translate(-50%,-50%);opacity:0;transition:opacity .3s,width .2s,height .2s;
  mix-blend-mode:screen;will-change:transform}
.cursor.on{opacity:.8}
.cursor.big{width:54px;height:54px;background:rgba(229,169,60,.08)}
@media(hover:none),(pointer:coarse){.cursor{display:none}}

/* ============================================================
   MOTION SYSTEM — progressive enhancement (only under .js)
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.js .reveal.in{opacity:1;transform:none}
.js .settle{opacity:0;transform:translateY(10px);transition:opacity .55s var(--e),transform .55s var(--e)}
.js .settle.in{opacity:1;transform:none}
.js .settle-h .w{display:inline-block;opacity:0;transform:translateY(10px);filter:blur(2px);
  transition:opacity .5s var(--e),transform .5s var(--e),filter .5s var(--e)}
.js .settle-h.in .w{opacity:1;transform:none;filter:none}
/* mark self-draw */
.js .mark--hero .draw polyline{stroke-dasharray:170;stroke-dashoffset:170}
.js .mark--hero.drawn .mk-letters polyline{stroke-dashoffset:0;transition:stroke-dashoffset .62s var(--e)}
.js .mark--hero.drawn .mk-tag polyline{stroke-dashoffset:0;transition:stroke-dashoffset .4s var(--e) .5s}
.js .mark--hero .mk-letters polyline:nth-child(n){transition-delay:calc(var(--i,0)*38ms)}
/* graph edges draw */
.js .graph .edge{stroke-dashoffset:var(--len,300)}
.js .graph.built .edge{stroke-dashoffset:0;transition:stroke-dashoffset .8s var(--e) .3s,opacity .3s,stroke-width .3s}

/* ============================================================
   REDUCED MOTION — hard branch
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .settle,.js .settle-h .w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
  .js .mark--hero .draw polyline{stroke-dashoffset:0!important}
  .mark--nav{opacity:1!important;transform:none!important}
  .accent::after{animation:none;opacity:1;transform:none}
  .adot,.scrollcue i{animation:none}
  .js .graph .node{opacity:1!important;transform:none!important}
  .js .graph .edge{stroke-dashoffset:0!important}
  .cursor{display:none!important}
  .proof .proof-inner::before{display:none}
  *{scroll-behavior:auto!important}
}

/* ---------- capture (?shot) mode: neutralize vh + perpetual motion ---------- */
html.shot{scroll-behavior:auto}
html.shot .hero{min-height:auto;padding-top:130px;padding-bottom:70px}
html.shot .contact{min-height:auto;padding-top:120px;padding-bottom:120px}
html.shot .reveal,html.shot .settle,html.shot .settle-h .w{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
html.shot .mark--hero .draw polyline{stroke-dashoffset:0!important}
html.shot .mark--nav{opacity:1!important;transform:none!important}
html.shot .cursor{display:none!important}
html.shot .adot,html.shot .accent::after,html.shot .scrollcue i,html.shot .proof .proof-inner::before{animation:none!important}
html.shot .graph .node{opacity:1!important;transform:none!important}
html.shot .graph .edge{stroke-dashoffset:0!important}
html.shot .stage .chk{border-color:var(--gold);color:var(--gold);background:var(--navy-deep)}
html.shot .stage{border-top-color:var(--gold)}
html.shot .progress,html.shot .cmdk-hint{display:none!important}

/* ---------- creative flourishes ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:210;pointer-events:none}
.clk{font-variant-numeric:tabular-nums}
.cmdk-hint{position:fixed;right:18px;bottom:18px;z-index:140;background:rgba(22,39,63,.85);border:1px solid var(--hair);color:var(--grey);
  border-radius:10px;padding:8px 12px;font-size:.76rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:5px;opacity:.62;transition:opacity .2s,border-color .2s,color .2s}
.cmdk-hint:hover{opacity:1;border-color:var(--gold);color:var(--cream)}
.cmdk-hint kbd{font-family:var(--mono);color:var(--gold);font-size:.85rem}
.cmdk-overlay{position:fixed;inset:0;z-index:250;background:rgba(10,22,38,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14vh;opacity:0;pointer-events:none;transition:opacity .18s var(--e)}
.cmdk-overlay[hidden]{display:none}
.cmdk-overlay.on{opacity:1;pointer-events:auto}
.cmdk{width:min(540px,92vw);background:var(--navy-panel);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  box-shadow:0 30px 90px -30px rgba(0,0,0,.85);transform:translateY(-8px);transition:transform .18s var(--e)}
.cmdk-overlay.on .cmdk{transform:none}
.cmdk-top{display:flex;align-items:center;gap:10px;padding:15px 16px;border-bottom:1px solid var(--hair)}
.cmdk-top .pc{color:var(--gold)}
.cmdk-input{flex:1;background:none;border:none;color:var(--cream);font-family:var(--mono);font-size:1rem;outline:none;min-width:0}
.cmdk-input::placeholder{color:var(--grey)}
.cmdk-top kbd{font-family:var(--mono);font-size:.68rem;color:var(--grey);border:1px solid var(--hair);border-radius:5px;padding:2px 6px}
.cmdk-list{list-style:none;max-height:46vh;overflow-y:auto;padding:8px;margin:0}
.cmdk-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:9px;cursor:pointer;color:var(--cream);font-size:.95rem}
.cmdk-item .ch{color:var(--grey);font-size:.74rem;white-space:nowrap}
.cmdk-item.on{background:rgba(229,169,60,.14)}
.cmdk-item.on .ch{color:var(--gold)}