@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(../fonts/instrument-serif-italic.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}

:root{
  --ink:#08080a;--ink-2:#0f0f13;--ink-3:#16161b;
  --ivory:#f2efe8;--mute:#8e8a83;--dim:#55524d;
  --line:rgba(242,239,232,.09);--line-2:rgba(242,239,232,.18);
  --accent:#ff5b2e;--ok:#6fe39a;
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Instrument Serif",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --gut:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,p,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.skip{position:fixed;left:16px;top:-60px;z-index:300;background:var(--accent);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:16px}
.wrap{width:100%;max-width:1480px;margin:0 auto;padding:0 var(--gut)}

/* ---------- type ---------- */
.display{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(40px,8vw,142px);line-height:.9;letter-spacing:-.02em}
.display em{display:inline-block;font:italic 400 1.12em/1 var(--serif);text-transform:none;letter-spacing:-.01em;color:var(--accent);padding-right:.06em}
.display.sm{font-size:clamp(34px,5.6vw,96px)}
.display.big{font-size:clamp(40px,min(7vw,14vh),150px)}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln>span{display:block}

/* line reveal */
.js .rv .ln>span,.js .intro .ln>span{transform:translateY(110%);transition:transform 1.2s var(--ease)}
.js .rv .ln+.ln>span,.js .intro .ln+.ln>span{transition-delay:.08s}
.js .intro .ln:nth-child(3)>span{transition-delay:.16s}
.js .rv.in .ln>span,.ready .intro .ln>span{transform:none}
.js .rv:not(.display){opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in:not(.display){opacity:1;transform:none}

/* ---------- cursor ---------- */
.cur{display:none}
.fine .cur{display:block;position:fixed;left:0;top:0;z-index:250;pointer-events:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;border-radius:50%;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--accent)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1px solid rgba(242,239,232,.45);display:grid;place-items:center;transition:width .4s var(--ease),height .4s var(--ease),margin .4s var(--ease),background .3s,border-color .3s}
.cur-ring em{font:600 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink);font-style:normal;opacity:0;transition:opacity .2s}
.cur.hover .cur-ring{width:64px;height:64px;margin:-32px 0 0 -32px;border-color:var(--accent)}
.cur.label .cur-ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--accent);border-color:var(--accent)}
.cur.label .cur-ring em{opacity:1}
.cur.label .cur-dot{opacity:0}
.fine body,.fine a,.fine button{cursor:none}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:20px var(--gut);transition:background .4s,padding .4s}
.nav.solid{background:rgba(8,8,10,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:12px}
.mark{width:40px;height:40px;border-radius:50%;border:1px solid var(--accent);display:grid;place-items:center;font-weight:800;font-stretch:125%;font-size:12px;letter-spacing:.02em}
.brand-txt{display:grid;line-height:1.15}
.brand-txt b{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:13px;letter-spacing:.04em}
.brand-txt small{font:10px var(--mono);color:var(--mute);text-transform:uppercase;letter-spacing:.14em}
.links{display:flex;gap:40px;font:12px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--mute)}
.links a{transition:color .3s}
.links a:hover{color:var(--ivory)}
.nav-end{display:flex;align-items:center;gap:22px}
.avail{display:flex;align-items:center;gap:8px;font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--mute)}
.avail i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(111,227,154,.6)}70%,100%{box-shadow:0 0 0 9px rgba(111,227,154,0)}}
.hire{--mx:0px;--my:0px;display:inline-flex;align-items:center;height:44px;padding:0 24px;border:1px solid var(--line-2);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.2em;position:relative;overflow:hidden;isolation:isolate;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease),color .4s,border-color .4s}
.hire::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--accent);transform:translateY(101%);transition:transform .5s var(--ease)}
.hire:hover{color:var(--ink);border-color:var(--accent)}
.hire:hover::before{transform:none}

/* ================= SCENE ================= */
.scene{position:relative;height:620vh}
.stage{--p:0;--h:0;--a:0;--s:0;--b:0;--code:0;--sh:0;--l:0;--o:0;--gy:0px;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sky{position:absolute;inset:0;background:radial-gradient(70% 45% at 50% 64%,rgba(255,91,46,.28),transparent 70%),radial-gradient(40% 30% at 50% 66%,rgba(255,140,60,.2),transparent 70%);opacity:calc(.35 + var(--a) * .35 + var(--l) * .3)}
.sky::after{content:"";position:absolute;left:0;right:0;top:64%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,120,70,.6),transparent)}
.floor{position:absolute;left:0;right:0;bottom:0;height:36%;perspective:360px;perspective-origin:50% 0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 40%);mask-image:linear-gradient(transparent,#000 40%)}
.floor-grid{position:absolute;left:-50%;right:-50%;top:0;height:300%;transform-origin:50% 0;transform:rotateX(64deg) translate3d(0,var(--gy),0);background-image:linear-gradient(rgba(242,239,232,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(242,239,232,.1) 1px,transparent 1px);background-size:80px 80px}

/* intro */
.intro{--mx:0;--my:0;position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(88px,12vh,120px) var(--gut) clamp(96px,14vh,136px);transform:translateY(calc(var(--h) * -90px));opacity:calc(1 - var(--h) * 1.3);z-index:5}
.kicker{display:flex;align-items:center;gap:14px;font:12px var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--mute);margin-bottom:clamp(18px,3vh,28px)}
.kicker span{width:40px;height:1px;background:var(--accent)}
.intro .display{font-size:clamp(44px,min(6.1vw,12vh),132px)}
.intro .ln>span{white-space:nowrap}
.ch{transition:font-weight .5s var(--ease),font-stretch .5s var(--ease),color .5s;font-weight:calc(800 - var(--k,0) * 600);font-stretch:calc(125% - var(--k,0) * 50%);color:color-mix(in srgb,var(--accent) calc(var(--k,0) * 100%),var(--ivory))}
.intro-sub{margin-top:clamp(18px,3vh,30px);max-width:520px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--mute)}
.intro-sub b{font-weight:500;color:var(--ivory)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,3.6vh,36px)}
.btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 28px;border-radius:999px;background:var(--accent);color:var(--ink);border:1px solid var(--accent);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.16em;white-space:nowrap;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease),background .4s,color .4s,border-color .4s}
.btn i{font-style:normal;transition:transform .5s var(--ease)}
.btn:hover{background:var(--ivory);border-color:var(--ivory)}
.btn:hover i{transform:translateX(4px)}
.btn.ghost{background:transparent;color:var(--ivory);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--ivory)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:clamp(22px,4vh,40px);font:500 13px var(--sans);color:var(--ivory);opacity:.8}
.trust small{font:10px var(--mono);text-transform:uppercase;letter-spacing:.22em;color:var(--dim);margin-right:18px}
.trust span+span::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--accent);margin:0 12px 2px;vertical-align:middle;opacity:.7}
.js .kicker,.js .intro-sub,.js .cta-row,.js .trust{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .5s,transform 1.2s var(--ease) .5s}
.js .cta-row{transition-delay:.62s}.js .trust{transition-delay:.74s}
.ready .kicker,.ready .intro-sub,.ready .cta-row,.ready .trust{opacity:1;transform:none}
.js .trust{opacity:0}.ready .trust{opacity:.8}

/* hero visual: live work, tilting with the cursor */
.hero-vis{position:relative;height:min(58vh,560px);perspective:1400px}
.hero-vis::before{content:"";position:absolute;inset:-10%;background:radial-gradient(closest-side,rgba(255,91,46,.26),transparent 72%);filter:blur(10px)}
.rig{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(calc(-12deg + var(--mx) * 9deg)) rotateX(calc(5deg - var(--my) * 7deg));transition:transform 1.2s var(--ease)}
.js .rig{opacity:0;scale:.92;transition:transform 1.2s var(--ease),opacity 1.4s var(--ease) .3s,scale 1.6s var(--ease) .3s}
.ready .rig{opacity:1;scale:1}
.shot{position:absolute;width:74%;aspect-ratio:16/10.6;border-radius:12px;overflow:hidden;background:var(--ink-3);border:1px solid var(--line-2);box-shadow:0 50px 90px -30px rgba(0,0,0,.95);animation:float 7s ease-in-out infinite}
.shot-bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 10px;background:#121217;border-bottom:1px solid var(--line)}
.shot-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.shot img{width:100%;height:calc(100% - 22px);object-fit:cover;object-position:top}
.s1{left:0;top:0;transform:translate3d(calc(var(--h) * -60%),calc(var(--h) * -40%),-160px) rotate(-6deg);filter:brightness(.55) saturate(.7);animation-delay:-2s}
.s2{right:-4%;top:16%;transform:translate3d(calc(var(--h) * 60%),calc(var(--h) * -20%),-70px) rotate(4deg);filter:brightness(.75) saturate(.8);animation-delay:-4.5s}
.s3{left:6%;bottom:6%;transform:translate3d(calc(var(--h) * -20%),calc(var(--h) * 60%),30px) rotate(-1.5deg)}
@keyframes float{50%{translate:0 -14px}}
.term{position:absolute;right:-2%;bottom:0;width:min(330px,64%);transform:translate3d(calc(var(--h) * 80%),calc(var(--h) * 40%),120px);border-radius:12px;background:rgba(11,11,15,.92);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 40px 80px -24px rgba(0,0,0,.95);font:12px/1.65 var(--mono);animation:float 6s ease-in-out -1s infinite}
.term-bar{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-bottom:1px solid var(--line)}
.term-bar i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.term-bar span{margin-left:auto;font-size:10px;color:var(--dim)}
.term-body{padding:12px 14px 14px;min-height:calc(5 * 1.65em + 26px);white-space:pre;overflow:hidden}
.term-body p{color:var(--mute)}
.term-body .cmd{color:var(--ivory)}
.term-body .cmd::before{content:"$ ";color:var(--accent)}
.term-body .ok{color:var(--ok)}
.term-body .go{color:var(--accent)}
.term-body .typing::after{content:"";display:inline-block;width:7px;height:13px;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:caret 1s steps(1) infinite}
.badge{position:absolute;left:2%;top:-4%;display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:rgba(20,20,25,.86);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:12px var(--mono);white-space:nowrap;transform:translate3d(calc(var(--h) * -80%),calc(var(--h) * -80%),90px);animation:float 5s ease-in-out -3s infinite}
.badge i{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:ping 2s infinite}

/* device */
.device{position:absolute;left:50%;top:48%;width:min(880px,74vw,94vh);z-index:2;transform:translate(-50%,-50%) translateY(calc((1 - var(--a)) * 24vh - var(--o) * 6vh)) scale(calc(.4 + var(--a) * .6 - var(--o) * .14));opacity:calc(var(--a) * 1.4 - .4 - var(--o) * .9);will-change:transform,opacity}
.device::before{content:"";position:absolute;inset:-12%;background:radial-gradient(closest-side,rgba(255,91,46,.32),transparent);opacity:var(--sh);z-index:-1}
.win{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:16/10;background:linear-gradient(180deg,#121217,#0b0b0e);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;box-shadow:0 60px 120px -40px rgba(0,0,0,.9)}
.win-bar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line)}
.win-bar>i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.url{margin:0 auto;font:11px var(--mono);color:var(--mute);padding:4px 18px;border-radius:999px;background:rgba(242,239,232,.05)}
.live{display:flex;align-items:center;gap:6px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--ok);opacity:var(--l);position:absolute;right:14px}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 1.6s infinite}
.win-body{position:absolute;inset:34px 0 0;display:grid;grid-template-columns:17% 1fr;gap:3%;padding:3%}
.caret{position:absolute;left:50%;top:50%;width:3px;height:30px;margin:-15px 0 0;background:var(--accent);opacity:calc(1 - var(--s) * 4);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{visibility:hidden}}

.blk{position:relative;display:block;border-radius:6px}
.blk::before,.blk::after{content:"";position:absolute;inset:0;border-radius:inherit}
.blk::before{border:1px dashed rgba(242,239,232,.6);opacity:calc(clamp(0,calc(var(--s) * 13 - var(--i)),1) * (1 - var(--sh) * 1.6))}
.blk::after{background:var(--fill,#1b1b22);opacity:clamp(0,calc(var(--sh) * 1.8 - var(--i) * .07),1)}
.side{display:flex;flex-direction:column;gap:9%}
.side .logo{height:9%;width:70%;--fill:var(--ivory)}
.side .nav-i{height:6%}
.side .nav-i.on{--fill:rgba(255,91,46,.35)}
.main{display:grid;grid-template-rows:9% 20% 1fr 18%;gap:5%;min-height:0}
.top{display:flex;justify-content:space-between;align-items:stretch}
.top .title{width:38%;--fill:#26262e}
.top .cta{width:20%;--fill:var(--accent)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:5%}
.kpi{padding:8%}
.kpi i,.kpi b{position:relative;z-index:1;display:block;border-radius:3px;opacity:clamp(0,calc(var(--sh) * 2 - .4),1)}
.kpi i{height:16%;width:45%;background:rgba(242,239,232,.25)}
.kpi b{height:30%;width:70%;margin-top:12%;background:var(--ivory)}
.chart svg{position:relative;z-index:1;width:100%;height:100%}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.chart svg,.ph-card svg{clip-path:inset(-10% calc((1 - clamp(0,calc(var(--sh) * 1.6 - .3),1)) * 100%) -10% 0)}
.chart .area{fill:url(#ga);opacity:clamp(0,calc(var(--sh) * 2 - 1),1)}
.rows{display:grid;gap:12%}
/* code editor: lines type in as you scroll */
.code{position:absolute;inset:0;background:#0b0b0f;opacity:var(--code);display:flex;flex-direction:column;z-index:3;font:1.7cqw/1.75 var(--mono);color:rgba(242,239,232,.82)}
.ed-tabs{display:flex;border-bottom:1px solid var(--line);font-size:.86em;color:var(--dim)}
.ed-tabs span{padding:.7em 1.4em;border-right:1px solid var(--line)}
.ed-tabs .on{color:var(--ivory);background:rgba(242,239,232,.04);box-shadow:inset 0 2px 0 var(--accent)}
.ed-main{flex:1;display:grid;grid-template-columns:1fr auto;gap:4%;padding:3.4% 4% 3.4% 0;min-height:0;align-items:center}
.ed-lines{counter-reset:ln}
.ed-lines li{--t:clamp(0,calc(var(--b) * 13 - var(--i)),1);position:relative;display:flex;white-space:pre;counter-increment:ln;padding-left:4.2em}
.ed-lines li::before{content:counter(ln);position:absolute;left:0;width:2.8em;text-align:right;color:var(--dim);opacity:calc(.35 + var(--t) * .65)}
.ed-lines li::after{content:"";position:absolute;inset:0 -4% 0 3.6em;z-index:-1;background:rgba(255,91,46,.08);border-left:2px solid var(--accent);opacity:calc(var(--t) * 4 * (1 - var(--t)))}
.ed-lines code{font:inherit;clip-path:inset(0 calc((1 - var(--t)) * 100%) 0 0)}
.ed-lines b{font-weight:400}
.ed-lines .k{color:#ff7a52}.ed-lines .f{color:#8fb3ff}.ed-lines .s{color:var(--ok)}.ed-lines .t{color:#f2c46d}.ed-lines .a{color:#c49bff}
.ed-checks{display:grid;gap:1.1em;padding-left:1.6em;border-left:1px solid var(--line);font-size:.86em;color:var(--mute)}
.ed-checks li{--d:clamp(0,calc((var(--b) - var(--t)) * 14),1);display:flex;align-items:center;gap:.8em;white-space:nowrap;opacity:calc(.4 + var(--d) * .6)}
.ed-checks i{position:relative;width:1.25em;height:1.25em;border-radius:50%;border:1px solid var(--line-2);background:color-mix(in srgb,var(--ok) calc(var(--d) * 100%),transparent);border-color:color-mix(in srgb,var(--ok) calc(var(--d) * 100%),var(--line-2))}
.ed-checks i::after{content:"";position:absolute;left:36%;top:18%;width:24%;height:44%;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg) scale(var(--d))}
.ed-status{display:flex;gap:2em;padding:.55em 1.4em;border-top:1px solid var(--line);font-size:.78em;color:var(--dim)}
.ed-status .ok{margin-left:auto;color:var(--ok);opacity:clamp(0,calc((var(--b) - .92) * 14),1)}

.phone{position:absolute;right:-5%;bottom:-12%;width:20%;aspect-ratio:9/19;border-radius:22px;border:1px solid var(--line-2);background:linear-gradient(180deg,#141419,#0b0b0e);height:auto;box-shadow:0 40px 80px -20px rgba(0,0,0,.9);opacity:var(--sh);transform:translate(calc((1 - var(--sh)) * 160%),calc((1 - var(--sh)) * 30%)) rotate(calc(8deg - var(--sh) * 8deg))}
.ph-notch{position:absolute;top:4%;left:50%;width:34%;height:3.4%;margin-left:-17%;border-radius:9px;background:#000}
.ph-title{position:absolute;left:9%;top:11%;height:3%;width:50%;border-radius:3px;background:var(--ivory)}
.ph-card{position:absolute;left:9%;right:9%;top:18%;height:26%;border-radius:10px;background:#1b1b22;padding:10% 8%}
.ph-card svg{width:100%;height:100%}
.ph-card path{fill:none;stroke:var(--accent);stroke-width:2.5;vector-effect:non-scaling-stroke}
.ph-row{position:absolute;left:9%;right:9%;height:6%;border-radius:6px;background:#1b1b22}
.ph-row:nth-of-type(4){top:49%}.ph-row:nth-of-type(5){top:58%}.ph-row:nth-of-type(6){top:67%}
.ph-row.short{right:30%}
.ph-btn{position:absolute;left:9%;right:9%;bottom:6%;height:7%;border-radius:999px;background:var(--accent)}

.pop{--x:0;position:absolute;display:flex;align-items:center;gap:10px;white-space:nowrap;padding:10px 16px;border-radius:999px;background:rgba(20,20,25,.86);border:1px solid var(--line-2);font:12px var(--mono);color:var(--ivory);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:var(--x);transform:translateY(calc((1 - var(--x)) * 24px)) scale(calc(.9 + var(--x) * .1));z-index:4}
.pop i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.p1{--x:clamp(0,calc(var(--l) * 3),1);left:-6%;top:16%}
.p2{--x:clamp(0,calc(var(--l) * 3 - 1),1);right:8%;top:-6%}
.p3{--x:clamp(0,calc(var(--l) * 3 - 2),1);left:4%;bottom:-7%}

/* caption */
.caption{position:absolute;left:0;right:0;top:clamp(92px,15vh,140px);text-align:center;z-index:6;font:13px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--ivory);height:20px}
.caption span{position:absolute;left:0;right:0;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.caption span.on{opacity:1;transform:none}

/* outro */
.outro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut);z-index:6;opacity:clamp(0,calc(var(--o) * 2),1);pointer-events:none}
.outro .display{font-size:clamp(38px,min(6.6vw,11vh),118px)}
.outro .ln>span{transform:translateY(calc((1 - clamp(0,calc(var(--o) * 1.6),1)) * 105%))}
.outro p{margin-top:28px;max-width:540px;color:var(--mute);font-size:clamp(15px,1.3vw,18px);opacity:clamp(0,calc(var(--o) * 2 - .8),1)}
.outro .btn{margin-top:30px;opacity:clamp(0,calc(var(--o) * 2 - 1),1)}
.done .outro .btn{pointer-events:auto}

/* hud */
.hud{position:absolute;left:50%;bottom:clamp(18px,4vh,36px);transform:translateX(-50%);display:flex;gap:clamp(24px,5vw,72px);z-index:7;text-align:center}
.hud small{display:block;font:10px var(--mono);text-transform:uppercase;letter-spacing:.24em;color:var(--dim);margin-bottom:6px}
.hud b{font:500 14px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);white-space:nowrap;font-variant-numeric:tabular-nums}
.gauge{position:absolute;right:var(--gut);bottom:clamp(18px,4vh,36px);width:72px;height:72px;display:grid;place-items:center;z-index:7}
.gauge svg{position:absolute;inset:0;transform:rotate(-90deg)}
.gauge circle{fill:none;stroke:var(--line-2);stroke-width:1.5}
.gauge .g-run{stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p))}
.gauge b{font:600 18px var(--sans);font-variant-numeric:tabular-nums;line-height:1;margin-top:6px}
.gauge small{font:9px var(--mono);color:var(--dim);margin-top:-14px}

/* ================= PROOF ================= */
.proof{position:relative;padding:0 0 clamp(100px,14vw,200px);background:var(--ink)}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(22px,3vw,40px) 0;overflow:hidden;margin-bottom:clamp(90px,12vw,180px)}
.band-track{display:flex;align-items:center;width:max-content;animation:band 36s linear infinite}
.band-track span{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(36px,5.6vw,92px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,239,232,.42);white-space:nowrap}
.band-track i{font-style:normal;color:var(--accent);font-size:clamp(16px,2vw,30px);margin:0 clamp(20px,3vw,48px)}
@keyframes band{to{transform:translate3d(-50%,0,0)}}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,8vw,110px);border-top:1px solid var(--line)}
.stats li{padding:32px clamp(12px,2vw,28px) 0 0;display:flex;flex-direction:column;gap:6px}
.stats li+li{padding-left:clamp(12px,2vw,28px);border-left:1px solid var(--line)}
.stats b{font-weight:800;font-stretch:125%;font-size:clamp(52px,6vw,108px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:14px;transition:color .4s}
.stats b i{font-style:normal;color:var(--accent);font-size:.5em;vertical-align:.7em;margin-left:.04em}
.stats li:hover b{color:var(--accent)}
.stats li>span{font-size:clamp(16px,1.3vw,19px)}
.stats small{font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--accent)}
.js .stats li.rv:nth-child(2){transition-delay:.08s}
.js .stats li.rv:nth-child(3){transition-delay:.16s}
.js .stats li.rv:nth-child(4){transition-delay:.24s}

/* ================= WORK ================= */
.work{position:relative;border-top:1px solid var(--line)}
.work-pin{padding:clamp(90px,12vw,160px) 0}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(40px,6vh,72px)}
.hint{font:12px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--mute);white-space:nowrap}
.hint i{font-style:normal;color:var(--accent);display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(6px)}}
.track{display:flex;gap:clamp(16px,2.4vw,36px);padding:0 var(--gut);width:max-content}
.track li{flex:none;width:min(46vw,720px,72vh)}
.card{display:block}
.card-img{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--ink-3);border:1px solid var(--line)}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.04);transform-origin:50% 0;transition:transform 1.2s var(--ease),filter .6s;filter:saturate(.85) brightness(.92)}
.card:hover .card-img img{transform:scale(1.1);filter:none}
.card-meta{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:6px 16px;padding-top:20px}
.card-meta small{font:12px var(--mono);color:var(--accent)}
.card-meta b{font-weight:800;font-stretch:125%;text-transform:uppercase;font-size:clamp(22px,2.2vw,34px);line-height:1;letter-spacing:-.01em}
.card-meta span{grid-column:2;color:var(--mute);font-size:15px}
.card-meta i{grid-row:1;grid-column:3;font-style:normal;font-size:24px;transition:transform .5s var(--ease)}
.card:hover .card-meta i{transform:rotate(45deg);color:var(--accent)}
.pinned .work-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:80px 0 40px}
.pinned .work-head .display{font-size:clamp(30px,min(4.4vw,8vh),76px)}
.pinned .work-head{margin-bottom:clamp(24px,4vh,48px)}
.pinned .track{transform:translate3d(var(--tx,0),0,0);will-change:transform}

/* ================= CONTACT ================= */
.contact{position:relative;padding:clamp(96px,12vh,150px) 0 0;border-top:1px solid var(--line);overflow:hidden}
.contact::before{content:"";position:absolute;left:50%;bottom:-30vmax;width:110vmax;height:70vmax;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,91,46,.22),transparent);pointer-events:none}
.contact .wrap{position:relative}
.contact-sub{margin-top:clamp(20px,3vh,32px);font-size:clamp(17px,1.6vw,22px);color:var(--mute)}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:clamp(24px,4vh,40px)}
.mail-btn{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:20px;max-width:100%;padding:24px 36px;border-radius:999px;background:var(--ivory);color:var(--ink);font-weight:600;font-size:clamp(17px,2.2vw,30px);letter-spacing:-.01em;transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease),background .4s}
.mail-btn span{overflow:hidden;text-overflow:ellipsis}
.mail-btn i{font-style:normal;transition:transform .5s var(--ease)}
.mail-btn:hover{background:var(--accent)}
.mail-btn:hover i{transform:rotate(45deg)}
.copy{height:56px;padding:0 24px;border-radius:999px;border:1px solid var(--line-2);font:12px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--mute);transition:color .3s,border-color .3s}
.copy:hover{color:var(--ivory);border-color:var(--ivory)}
.reach{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:clamp(22px,3.4vh,32px)}
.reach small{font:11px var(--mono);text-transform:uppercase;letter-spacing:.2em;color:var(--mute)}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.socials a{--mx:0px;--my:0px;display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border:1px solid var(--line-2);border-radius:999px;background:rgba(242,239,232,.03);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ivory);transform:translate(var(--mx),var(--my));transition:transform .5s var(--ease),border-color .3s,background .3s,color .3s}
.socials a i{font-style:normal;color:var(--accent);transition:transform .5s var(--ease)}
.socials a:hover{border-color:var(--accent);background:rgba(255,91,46,.1)}
.socials a:hover i{transform:translate(2px,-2px)}
.foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:clamp(90px,12vw,170px);padding-top:24px;padding-bottom:calc(24px + env(safe-area-inset-bottom));border-top:1px solid var(--line);font:11px var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--dim)}
.foot em{font-style:normal;color:var(--mute)}
.foot a:hover{color:var(--ivory)}

.toast{position:fixed;left:50%;bottom:28px;z-index:260;transform:translate(-50%,20px);opacity:0;background:var(--ivory);color:var(--ink);font:12px var(--mono);text-transform:uppercase;letter-spacing:.14em;padding:12px 20px;border-radius:999px;pointer-events:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* no JS: show everything statically */
.no-js .scene{height:auto}
.no-js .stage{position:relative;--a:1;--s:1;--sh:1;--l:1;height:auto;min-height:100vh}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .links,.avail{display:none}
  .device{width:90vw;top:50%}
  .phone{width:24%;right:-2%}
  .p1{left:-2%;top:10%}.p2{right:2%;top:-10%}.p3{left:2%;bottom:-9%}
  .pop{font-size:10px;padding:8px 12px}
  .intro{grid-template-columns:1fr;align-content:center;gap:clamp(20px,4vh,40px);padding-top:clamp(84px,12vh,110px);padding-bottom:clamp(84px,12vh,110px)}
  .intro .display{font-size:clamp(40px,min(11vw,8vh),96px)}
  .hero-vis{height:clamp(180px,30vh,340px);width:min(100%,560px);justify-self:center}
  .rig{transform:rotateY(-8deg) rotateX(4deg)}
  .term{width:min(260px,62%);font-size:10px}
  .term-body{padding:8px 10px 10px}
  .badge{font-size:10px;padding:8px 12px;top:6%}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats li:nth-child(3){padding-left:0;border-left:0}
  .stats li:nth-child(n+3){margin-top:32px;border-top:1px solid var(--line)}
  .work-head{flex-direction:column;align-items:flex-start}
  .track{overflow-x:auto;width:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px;scroll-padding:0 var(--gut)}
  .track::-webkit-scrollbar{display:none}
  .track li{width:82vw;scroll-snap-align:start}
}
@media (max-width:560px){
  .brand-txt small{display:none}
  .hire{height:38px;padding:0 16px;font-size:11px}
  .hud{gap:18px;left:var(--gut);transform:none;text-align:left}
  .hud b{font-size:11px;letter-spacing:.06em}
  .hud small{font-size:9px}
  .gauge{width:56px;height:56px}
  .gauge b{font-size:14px}
  .caption{font-size:11px;letter-spacing:.12em;padding:0 var(--gut)}
  .intro-sub{font-size:15px}
  .code{font-size:2.3cqw;line-height:1.45}
  .ed-status{display:none}
  .ed-checks,.ed-tabs span:nth-child(3){display:none}
  .ed-main{grid-template-columns:1fr;padding:2.5% 3% 2.5% 0;overflow:hidden}
  .cta-row .btn{flex:1;justify-content:center;height:48px;padding:0 18px;font-size:11px}
  .trust{display:none}
  .s1{display:none}
  .mail-btn{width:100%;justify-content:space-between;padding:20px 24px}
  .copy{width:100%}
  .reach small{width:100%}
  .socials{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .socials a{display:flex;justify-content:center;height:48px;padding:0 12px}
}
@media (max-width:900px) and (max-height:680px){
  .hero-vis{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .band-track{animation:none}
}