:root{
  --bk:#060606;--bk2:#0d0d0d;--bk3:#151515;--ln:#222;--ln2:#333;
  --wh:#f4f3ef;--mu:#8c8c88;--mu2:#5c5c59;
  --blue:#1f7fc4;--blue0:#00558C;--green:#3fae50;--green0:#319B42;
  --disp:"Anton","Impact",system-ui,sans-serif;--sans:"Inter Tight","Inter",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(16px,4vw,56px)
}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bk);color:var(--wh);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:17px;line-height:1.55;background:var(--bk);overflow-x:hidden}
html.locked body{overflow:hidden}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut);position:relative}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.disp{font-family:var(--disp);font-weight:400;text-transform:uppercase;line-height:.88;letter-spacing:.005em}
.out{color:transparent;-webkit-text-stroke:2px var(--wh)}
.k{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mu)}
.k:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--blue),var(--green))}
h2.disp{font-size:clamp(56px,8.6vw,132px);margin-top:18px}
.nb{white-space:nowrap}

/* preloader */
#pre{position:fixed;inset:0;z-index:100;background:var(--bk);display:flex;flex-direction:column;justify-content:space-between;padding:28px var(--gut);transition:transform .9s cubic-bezier(.76,0,.24,1)}
#pre .row{display:flex;justify-content:space-between;color:var(--mu)}
#pre .pre-n{display:flex;align-items:flex-end;justify-content:space-between}
#pre .n{font-family:var(--disp);font-size:clamp(120px,24vw,340px);line-height:.8}
#pre .bar{height:2px;background:var(--ln);margin-top:20px}
#pre .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue0),var(--green0));transform-origin:left;transform:scaleX(0)}
#pre.done{transform:translateY(-100%)}
html.seen #pre{display:none}

/* canvas + grain + cursor */
#px{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;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");animation:gr 1s steps(4) infinite}
@keyframes gr{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;display:none}
.cur i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transition:transform .25s,background .25s,border-color .25s}
.cur span{position:absolute;left:26px;top:-6px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.cur.on i{transform:scale(1.8);background:rgba(63,174,80,.15);border-color:var(--green)}
@media (hover:hover) and (pointer:fine){.cur{display:block}body,a,button{cursor:none}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px 0;transition:background .3s,padding .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.sc{background:rgba(6,6,6,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px 0;border-color:var(--ln)}
.nav .wrap{display:flex;align-items:center;gap:28px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none}
.mark b{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--wh);font-family:var(--disp);font-weight:400;font-size:24px;position:relative}
.mark b:after{content:"";position:absolute;right:-4px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--green)}
.mark span{font-family:var(--disp);font-size:20px;letter-spacing:.04em;line-height:1;text-transform:uppercase}
.mark small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--mu);margin-top:4px}
.nav nav{display:flex;gap:28px;margin-left:auto}
.nav nav a{text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#bdbdb8;transition:color .2s}
.nav nav a:hover{color:var(--wh)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;padding:15px 24px;border:1px solid var(--wh);font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;transition:color .35s;white-space:nowrap;background:none;color:var(--wh)}
.btn:before{content:"";position:absolute;inset:0;background:var(--wh);transform:translateY(101%);transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1}
.btn:hover{color:var(--bk)}.btn:hover:before{transform:none}
.btn.f{background:var(--wh);color:var(--bk)}
.btn.f:before{background:var(--green0)}.btn.f:hover{color:#fff}
.ar{transition:transform .3s}.btn:hover .ar{transform:translateX(4px)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.16,1,.3,1),transform 1s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}

/* hero */
main{position:relative;z-index:2}
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:110px 0 70px}
.hero .wrap{position:static}
.hud{position:absolute;display:flex;flex-direction:column;gap:6px;color:var(--mu);font-size:11px}
.hud.tl{left:var(--gut);top:100px}.hud.tr{right:var(--gut);top:100px;text-align:right}
.live{font-style:normal;color:var(--green)}
.live:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;vertical-align:1px;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
.hero-c{max-width:760px;position:relative}
.hn{font-size:clamp(96px,15.5vw,250px);margin:18px 0 26px;display:flex;flex-direction:column}
.hn span{display:block}
.hs{font-size:clamp(16px,1.4vw,19px);color:#cfcfca;max-width:520px}
.tag{font-family:var(--mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin-top:16px}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hint{position:absolute;right:var(--gut);bottom:30px;color:var(--mu);font-size:11px;display:flex;align-items:center;gap:10px}
.hint:before{content:"";width:8px;height:8px;border-radius:50%;border:1px solid var(--green);animation:blink 1.4s infinite}
.hint-m{display:none}
@media (hover:none){.hint-d{display:none}.hint-m{display:inline}}
.scroll{position:absolute;left:var(--gut);bottom:30px;color:var(--mu);font-size:11px;display:flex;align-items:center;gap:12px}
.scroll i{width:40px;height:1px;background:var(--ln2);position:relative;overflow:hidden}
.scroll i:after{content:"";position:absolute;inset:0;background:var(--wh);animation:sl 2s infinite}
@keyframes sl{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* marquee */
.mq{position:relative;z-index:2;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);background:var(--wh);color:var(--bk);overflow:hidden;padding:16px 0}
.mq-t{display:flex;gap:34px;white-space:nowrap;width:max-content;animation:mq 30s linear infinite;font-family:var(--disp);text-transform:uppercase;font-size:clamp(28px,3vw,44px);line-height:1}
.mq-t i{font-style:normal;color:var(--green0);font-size:.6em;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* sections */
.sec{position:relative;padding:clamp(100px,13vw,190px) 0;background:var(--bk)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:clamp(44px,6vw,80px)}
.head p{max-width:400px;color:var(--mu)}

/* manifesto */
.mani{text-align:left}
.mtext{font-size:clamp(46px,7vw,112px);line-height:.95;margin:26px 0 30px;max-width:1200px}
.mtext .w{color:#232323;transition:color .35s}
.mtext .w.on{color:var(--wh)}
.mtext .w.g.on{color:var(--green)}
.msig{color:var(--mu)}

/* dossier */
.file{border-top:1px solid var(--ln)}
.dossier{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.dz{border:1px solid var(--ln2);background:var(--bk2);position:sticky;top:96px}
.dz-top,.dz-bot{display:flex;justify-content:space-between;padding:14px 18px;color:var(--mu);font-size:11px}
.dz-top{border-bottom:1px solid var(--ln)}.dz-bot{border-top:1px solid var(--ln);align-items:center}
.dz-bot b{font-family:var(--disp);font-weight:400;font-size:34px;color:var(--wh);line-height:1}
.dz-img{position:relative;height:clamp(380px,46vw,620px);overflow:hidden;background:radial-gradient(70% 60% at 50% 40%,#1c1c1c,#090909);display:flex;justify-content:center;align-items:flex-end}
.dz-img img{width:100%;height:auto;max-height:100%;object-fit:contain;object-position:bottom;filter:grayscale(1) contrast(1.15);transition:filter .8s}
.dz:hover .dz-img img,.dz.color .dz-img img{filter:none}
.dz-img:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px);pointer-events:none}
.stamp{position:absolute;top:22px;right:18px;border:2px solid var(--green);color:var(--green);padding:6px 10px;transform:rotate(-8deg);font-size:13px;opacity:0;scale:1.6;transition:opacity .4s,scale .5s cubic-bezier(.16,1,.3,1)}
.dz.in .stamp{opacity:1;scale:1;transition-delay:.8s}
.fields{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ln)}
.fld{padding:20px 4px 20px 0;border-bottom:1px solid var(--ln);cursor:default}
.fld:nth-child(odd){padding-right:24px}
.fld dt{color:var(--mu2);font-size:11px;margin-bottom:8px}
.fld dd{font-size:clamp(17px,1.5vw,21px);font-weight:500;min-height:1.4em}
.fld dd .x{color:var(--mu2)}
.rd{background:var(--wh);color:transparent;padding:0 4px;transition:background .5s,color .5s;user-select:none}
.fld.red:hover .rd,.fld.red.open .rd{background:transparent;color:var(--green)}

/* code stack */
.code{border-top:1px solid var(--ln)}
.stack{display:flex;flex-direction:column;gap:22px}
.sc-card{position:sticky;top:calc(110px + var(--i)*22px);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(18px,3vw,48px);align-items:center;padding:clamp(28px,4vw,56px);background:var(--bk2);border:1px solid var(--ln2);min-height:clamp(220px,24vw,320px);box-shadow:0 -20px 50px rgba(0,0,0,.6);transform-origin:top center;overflow:hidden}
.sc-card:nth-child(2){background:#f4f3ef;color:var(--bk);border-color:#f4f3ef}
.sc-card:nth-child(3){background:var(--blue0);border-color:var(--blue0)}
.sc-card:nth-child(4){background:#0c1a10;border-color:#1f3a24}
.sc-n{font-size:clamp(64px,8vw,130px);color:transparent;-webkit-text-stroke:1.5px currentColor;opacity:.9}
.sc-card:nth-child(2) .sc-n{-webkit-text-stroke-color:var(--bk)}
.sc-k{color:var(--mu);margin-bottom:10px}
.sc-card:nth-child(2) .sc-k{color:#6b6b68}.sc-card:nth-child(3) .sc-k{color:rgba(255,255,255,.65)}.sc-card:nth-child(4) .sc-k{color:var(--green)}
.sc-card h3{font-size:clamp(42px,5vw,80px);margin-bottom:12px}
.sc-card p{max-width:520px;opacity:.85}
.sc-ic{font-family:var(--disp);font-size:clamp(140px,18vw,280px);line-height:.7;opacity:.06;user-select:none}

/* off the clock */
.off{border-top:1px solid var(--ln)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--ln);border:1px solid var(--ln)}
.tile{background:var(--bk);padding:clamp(26px,3vw,40px);min-height:440px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:background .5s}
.tile:before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.t-iron:before{background:radial-gradient(80% 60% at 50% 100%,rgba(255,255,255,.12),transparent 70%)}
.t-draft:before{background:radial-gradient(80% 60% at 50% 100%,rgba(63,174,80,.28),transparent 70%)}
.t-fam:before{background:radial-gradient(80% 60% at 50% 100%,rgba(31,127,196,.3),transparent 70%)}
.tile:hover:before,.tile.on:before{opacity:1}
.tk{color:var(--mu)}
.tile .big{font-size:clamp(60px,6vw,96px);margin:auto 0 24px;color:transparent;-webkit-text-stroke:1.5px var(--wh);transition:color .5s}
.tile:hover .big,.tile.on .big{color:var(--wh)}
.t-fam:hover .big,.t-fam.on .big{color:var(--blue)}
.rep{display:inline-block;min-width:1.1em}
.pick{margin:auto 0 24px;border:1px solid #1f3a24;background:#08120b;padding:18px 20px;transition:border-color .4s,transform .5s cubic-bezier(.16,1,.3,1)}
.pick .mono{color:var(--green);font-size:11px}
.pick b{display:block;font-weight:400;font-size:clamp(38px,3.6vw,56px);margin-top:8px}
.t-draft:hover .pick{border-color:var(--green);transform:translateY(-6px) rotate(-1.5deg)}
.tile h3{font-family:var(--disp);font-weight:400;text-transform:uppercase;font-size:30px;line-height:1;margin-bottom:10px}
.tile p{color:#a9a9a4;font-size:15.5px}

/* mission doors */
.mission{border-top:1px solid var(--ln)}
.doors{display:flex;gap:1px;background:var(--ln);border:1px solid var(--ln);min-height:560px}
.door{flex:1;display:flex;flex-direction:column;padding:clamp(28px,3.6vw,52px);text-decoration:none;position:relative;overflow:hidden;transition:flex .7s cubic-bezier(.16,1,.3,1);background:var(--bk2);isolation:isolate}
.door:before{content:"";position:absolute;inset:0;z-index:-1;transform:translateY(101%);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.d-cov:before{background:var(--blue0)}.d-car:before{background:var(--green0)}
.door:hover,.door:focus-visible{flex:1.6}
.door:hover:before,.door:focus-visible:before{transform:none}
.dk{color:var(--mu);transition:color .4s}
.door:hover .dk{color:rgba(255,255,255,.75)}
.dt{font-size:clamp(70px,8.6vw,150px);margin:auto 0 22px}
.dp{max-width:420px;color:#bdbdb8;transition:color .4s}
.door:hover .dp{color:#fff}
.dg{margin-top:26px;display:inline-flex;gap:10px;align-items:center;border-top:1px solid rgba(255,255,255,.25);padding-top:18px}
.door:hover .ar{transform:translateX(6px)}

/* signal */
.signal{text-align:center;border-top:1px solid var(--ln);overflow:hidden}
.sig{display:flex;flex-direction:column;text-decoration:none;font-size:clamp(80px,14vw,230px);margin:26px 0 40px}
.sig .out{transition:color .5s,-webkit-text-stroke-color .5s}
.sig:hover .out{color:var(--green);-webkit-text-stroke-color:var(--green)}
.sig-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px}
.sig-row a{text-decoration:none;color:#bdbdb8;transition:color .2s}
.sig-row a:hover{color:var(--wh)}

/* footer */
footer{position:relative;z-index:2;background:var(--bk);border-top:1px solid var(--ln);padding:60px 0 40px}
.ft{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
.fw{font-size:clamp(70px,12vw,190px)}
.legal{color:var(--mu2);font-size:12.5px;max-width:980px}

/* mobile */
@media (max-width:900px){
  .nav nav{display:none}
  .nav .btn{margin-left:auto;padding:12px 16px}
  .head{flex-direction:column;align-items:flex-start;gap:18px}
  .dossier{grid-template-columns:1fr}
  .dz{position:relative;top:0}
  .tiles{grid-template-columns:1fr}
  .tile{min-height:340px}
  .doors{flex-direction:column;min-height:0}
  .door{min-height:340px}
  .door:hover,.door:focus-visible{flex:1}
}
@media (max-width:760px){
  body{font-size:16px}
  .mark span{display:none}
  .hero{align-items:flex-end;padding:90px 0 96px}
  .hud.tl,.hud.tr{top:80px}
  .hud.tr{display:none}
  .hn{font-size:27vw;margin:14px 0 18px}
  .out{-webkit-text-stroke-width:1.5px}
  .ctas .btn{flex:1;justify-content:center;padding:15px 14px}
  .hint{bottom:30px;right:auto;left:var(--gut)}
  .scroll{display:none}
  h2.disp{font-size:16vw}
  .mtext{font-size:11vw}
  .fields{grid-template-columns:1fr}
  .fld:nth-child(odd){padding-right:0}
  .dz-img{height:440px}
  .sc-card{grid-template-columns:1fr;top:calc(76px + var(--i)*14px);gap:10px;min-height:0;padding:28px 24px}
  .sc-n{font-size:54px}
  .sc-ic{position:absolute;right:-6px;bottom:-14px;font-size:180px}
  .sc-card h3{font-size:46px}
  .dt{font-size:20vw}
  .sig{font-size:21vw}
  .sig-row{flex-direction:column;gap:14px}
  .ft{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.mq-t,.grain{animation:none}}

.signal{background:transparent}
.signal .sig,.signal .sig-row{text-shadow:0 2px 30px rgba(0,0,0,.6)}