/* =====================================================================
   SOTECH v5 — "WARP"
   The site speaks the language of the SoTech reel: ink-black space,
   ember + cyan light from the mark, chrome type, HUD labels.
   Display: Archivo (variable width) · Body: Geist · HUD: Geist Mono
   ===================================================================== */
:root{
  --ink:#06070A; --ink2:#0B0D11; --ink3:#12151B; --ink4:#1A1E26;
  --chalk:#F2F4F7; --fog:#A4ABB6; --dust:#6B7280; --line:rgba(242,244,247,.08); --line2:rgba(242,244,247,.14); --line3:rgba(242,244,247,.24);
  --ember:#FF7A2F; --ember2:#FFB27F; --cyan:#37E0D8; --cyan2:#9AF2EC;
  --ac:var(--ember); --ac2:var(--ember2);
  --chrome:linear-gradient(180deg,#FFFFFF 0%,#DCE7F2 38%,#8C97A6 72%,#E9F1F8 100%);
  --f-d:'Archivo',system-ui,sans-serif; --f-b:'Geist',system-ui,sans-serif; --f-m:'Geist Mono',ui-monospace,monospace;
  --eo:cubic-bezier(.16,1,.3,1); --eio:cubic-bezier(.76,0,.24,1);
  --pad:clamp(18px,4.4vw,72px); --max:1680px; --nav:76px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ink);scrollbar-color:#2a2f38 var(--ink)}
body{font-family:var(--f-b);font-size:16px;line-height:1.6;color:var(--chalk);background:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--ember);color:#000}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type primitives ---------- */
.hud{font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--fog);display:inline-flex;align-items:center;gap:10px}
.hud b{color:var(--ac);font-weight:500}
.hud--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 12px var(--ac)}
.disp{font-family:var(--f-d);font-weight:800;font-stretch:112%;letter-spacing:-.035em;line-height:.9}
.chrome,.chrome .ch{background:var(--chrome);-webkit-background-clip:text;background-clip:text;color:transparent}
.ember{color:var(--ember)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;height:54px;padding:0 26px;border-radius:100px;font-family:var(--f-m);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line3);color:var(--chalk);overflow:hidden;isolation:isolate;transition:color .45s var(--eo),border-color .45s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--chalk);border-radius:inherit;transform:translateY(101%);transition:transform .55s var(--eo)}
.btn:hover{color:#000;border-color:var(--chalk)}
.btn:hover::before{transform:none}
.btn .arw{display:inline-block;transition:transform .45s var(--eo)}
.btn:hover .arw{transform:translate(3px,-3px)}
.btn--ember{background:var(--ember);border-color:var(--ember);color:#160700}
.btn--ember::before{background:#fff}
.btn--wa{background:#25D366;border-color:#25D366;color:#03170A}
.btn--wa::before{background:#fff}
.btn--wa:hover{color:#03170A}
.wa-ico{width:19px;height:19px;flex:none}
[data-magnet]{will-change:transform}

/* ---------- atmosphere ---------- */
.grain{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:.045;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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:400;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--chalk);mix-blend-mode:difference;display:grid;place-items:center;transition:width .45s var(--eo),height .45s var(--eo),margin .45s var(--eo),background .3s}
.cursor span{font-family:var(--f-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#000;opacity:0;transition:opacity .25s}
.cursor.is-hot{width:46px;height:46px;margin:-23px 0 0 -23px}
.cursor.is-view{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--ember);mix-blend-mode:normal}
.cursor.is-view span{opacity:1}
@media (hover:none){.cursor{display:none}}

/* ---------- cold open ---------- */
.cold{position:fixed;inset:0;z-index:500;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.cold.is-out{pointer-events:none}
.cold__win{position:relative;width:min(36vw,480px);aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--ink3);border:1px solid var(--line2)}
.cold__win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.cold__count{position:absolute;left:var(--pad);bottom:7vh;font-family:var(--f-d);font-weight:800;font-stretch:125%;font-size:clamp(72px,15vw,230px);line-height:.8;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cold__count small{display:block;margin-top:14px;font-family:var(--f-m);font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--fog);font-stretch:100%}
.cold__hud{position:absolute;left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;gap:20px}
.cold__hud.t{top:28px}.cold__hud.b{bottom:28px;justify-content:flex-end}
.cold__mark{position:absolute;right:var(--pad);bottom:7vh;width:clamp(54px,6vw,86px)}
.cold__bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ember);transform-origin:left;transform:scaleX(0)}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:0 var(--pad);transition:transform .6s var(--eo)}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(6,7,10,.9),rgba(6,7,10,0));pointer-events:none}
.nav.is-hidden{transform:translateY(-110%)}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__logo img{width:34px;height:34px}
.nav__logo b{font-family:var(--f-d);font-weight:700;font-stretch:125%;font-size:14px;letter-spacing:.24em}
.nav__links{display:flex;gap:6px;padding:6px;border:1px solid var(--line2);border-radius:100px;background:rgba(11,13,17,.72)}
.nav__links a{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);padding:9px 16px;border-radius:100px;transition:color .3s,background .3s}
.nav__links a:hover,.nav__links a.is-on{color:var(--chalk);background:var(--ink4)}
.nav__cta{height:44px;padding:0 20px;font-size:11px}
.nav__menu{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line3);position:relative}
.nav__menu i{position:absolute;left:14px;right:14px;height:1.5px;background:var(--chalk);transition:transform .45s var(--eo)}
.nav__menu i:first-child{top:18px}.nav__menu i:last-child{top:26px}
body.menu-open .nav__menu i:first-child{transform:translateY(4px) rotate(45deg)}
body.menu-open .nav__menu i:last-child{transform:translateY(-4px) rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:190;background:var(--ink);padding:calc(var(--nav) + 6vh) var(--pad) calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:space-between;
  clip-path:circle(0% at calc(100% - var(--pad) - 23px) calc(var(--nav)/2));transition:clip-path .8s var(--eio);visibility:hidden}
body.menu-open .menu{clip-path:circle(150% at calc(100% - var(--pad) - 23px) calc(var(--nav)/2));visibility:visible}
.menu__links a{display:flex;align-items:baseline;gap:16px;font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(44px,13vw,96px);line-height:1.04;letter-spacing:-.03em;color:var(--chalk)}
.menu__links a .hud{font-size:11px}
.menu__foot{display:flex;flex-direction:column;gap:14px}

/* =====================================================================
   WARP — fly through every project
   ===================================================================== */
.warp{position:relative;height:340vh}
.warp__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;perspective:1000px;perspective-origin:50% 50%;
  background:radial-gradient(70% 55% at 50% 50%,rgba(55,224,216,.07),transparent 70%),radial-gradient(60% 50% at 50% 50%,rgba(255,122,47,.05),transparent 65%),var(--ink)}
.warp__world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.wcard{position:absolute;width:var(--w,30vw);aspect-ratio:16/10;margin:calc(var(--w,30vw) * -.3125) 0 0 calc(var(--w,30vw) * -.5);border-radius:10px;overflow:hidden;
  background:var(--ink3);border:1px solid var(--line2);backface-visibility:hidden}
.wcard img{width:100%;height:100%;object-fit:cover;object-position:top center}
.wcard figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--f-m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);background:rgba(6,7,10,.78);padding:6px 10px;border-radius:100px}
.warp__vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 85% at 50% 50%,transparent 45%,rgba(6,7,10,.85) 100%)}
.warp__hero{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--pad);will-change:transform,opacity;pointer-events:none}
.warp__hero>*{pointer-events:auto}
.warp__h1{font-family:var(--f-d);font-weight:800;font-size:clamp(46px,9.4vw,168px);line-height:.88;letter-spacing:-.045em;margin:26px 0 0}
.warp__h1 .l1{display:block;font-stretch:125%}
.warp__h1 .l2{display:block;font-stretch:100%;font-weight:300;letter-spacing:-.05em}
.warp__h1 .l1 .chrome{padding-right:.04em}
.warp__sub{max-width:560px;margin:30px auto 0;color:var(--fog);font-size:clamp(15px,1.25vw,18px);line-height:1.65}
.warp__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}
.warp__hud{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;pointer-events:none}
.warp__now{display:flex;flex-direction:column;gap:6px}
.warp__now b{font-family:var(--f-d);font-weight:700;font-stretch:112%;font-size:clamp(15px,1.4vw,20px);letter-spacing:-.01em;color:var(--chalk)}
.warp__meter{width:min(240px,40vw);height:2px;background:var(--line2);position:relative;overflow:hidden;border-radius:2px}
.warp__meter i{position:absolute;inset:0;background:linear-gradient(90deg,var(--cyan),var(--ember));transform-origin:left;transform:scaleX(0)}
.warp__cue{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.warp__cue i{display:block;width:1px;height:46px;background:linear-gradient(var(--ember),transparent);animation:cue 2.2s var(--eo) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.warp__flash{position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}

/* ---------- sector marquee ---------- */
.sectors{position:relative;z-index:2;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;background:var(--ink)}
.sectors__row{display:flex;width:max-content;will-change:transform}
.sectors__row span{display:flex;align-items:center;gap:40px;padding-right:40px;font-family:var(--f-d);font-weight:800;font-stretch:125%;font-size:clamp(34px,5vw,80px);letter-spacing:-.03em;line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(242,244,247,.32)}
.sectors__row span em{font-style:normal;color:var(--chalk);-webkit-text-stroke:0}
.sectors__row span i{width:.32em;height:.32em;border-radius:50%;background:var(--ember);flex:none;box-shadow:0 0 22px var(--ember)}

/* ---------- section heads ---------- */
.shead{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.shead__t{font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(40px,6.6vw,112px);line-height:.9;letter-spacing:-.04em;margin-top:18px}
.shead__t .thin{font-weight:300;font-stretch:100%}
.shead__p{max-width:440px;color:var(--fog);font-size:16px;line-height:1.7}

/* =====================================================================
   FILMS — featured product launches
   ===================================================================== */
.films{position:relative;padding-top:clamp(110px,16vh,190px);background:var(--ink)}
.film{position:relative;height:230vh}
.film__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center}
.film__env{position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 52%,var(--acg),transparent 70%),var(--ink);opacity:.9}
.film__title{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--f-d);font-weight:900;font-stretch:125%;font-size:clamp(70px,19vw,360px);letter-spacing:-.05em;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px rgba(242,244,247,.72);pointer-events:none;will-change:transform,opacity}
.film__win{position:relative;z-index:1;width:100vw;height:100vh;height:100svh;overflow:hidden;will-change:transform;transform:scale(.46);border-radius:22px;background:var(--ink3)}
.film__win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.film__shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(6,7,10,.94) 0%,rgba(6,7,10,.72) 38%,rgba(6,7,10,.1) 70%),linear-gradient(0deg,rgba(6,7,10,.85),transparent 45%)}
.film__info{position:absolute;left:var(--pad);top:50%;transform:translateY(-42%);max-width:min(500px,33vw);z-index:3}
.film__info>*{opacity:0;transform:translateY(34px)}
.film__no{margin-bottom:20px}
.film__name{font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(40px,4.8vw,84px);line-height:.9;letter-spacing:-.04em}
.film__tag{margin-top:20px;font-size:clamp(15px,1.3vw,18px);line-height:1.65;color:#D3D8E0;max-width:48ch}
.film__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 14px;border-radius:100px;border:1px solid var(--line3);background:rgba(6,7,10,.6);color:var(--chalk)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);box-shadow:0 0 10px var(--ac)}
.film__stats{display:flex;gap:clamp(20px,3vw,44px);margin-top:26px}
.film__stats div b{display:block;font-family:var(--f-d);font-weight:800;font-stretch:112%;font-size:clamp(28px,3vw,46px);line-height:1;letter-spacing:-.03em;color:var(--ac2)}
.film__stats div span{display:block;margin-top:8px;font-family:var(--f-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.film__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.film__phone{position:absolute;right:clamp(20px,5vw,110px);bottom:clamp(24px,6vh,80px);z-index:3;width:clamp(150px,14vw,230px);aspect-ratio:9/19;border-radius:34px;padding:8px;
  background:linear-gradient(155deg,#2b313b,#0b0d11 60%);border:1px solid var(--line3);box-shadow:0 50px 100px -30px rgba(0,0,0,.9),0 0 90px -30px var(--ac);opacity:0;will-change:transform}
.film__phone img{width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:27px}
.film__hud{position:absolute;top:calc(var(--nav) + 14px);left:var(--pad);right:var(--pad);display:flex;justify-content:space-between;z-index:3;pointer-events:none;opacity:0}

/* =====================================================================
   ENGINE — one engine, eight schools
   ===================================================================== */
.engine{position:relative;height:280vh;background:var(--ink)}
.engine__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:calc(var(--nav) + 10px) var(--pad) 30px}
.engine__stage::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 60%,rgba(55,224,216,.08),transparent 70%);pointer-events:none}
.engine__head{position:relative;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;max-width:var(--max);width:100%;margin:0 auto 4vh}
.engine__t{font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(36px,5.4vw,92px);line-height:.9;letter-spacing:-.04em}
.engine__t .thin{font-weight:300;font-stretch:100%}
.engine__p{max-width:420px;color:var(--fog);font-size:15.5px}
.engine__deck{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,22px);max-width:var(--max);width:100%;margin:0 auto}
.ecard{position:relative;aspect-ratio:16/10.5;border-radius:12px;overflow:hidden;background:var(--ink3);border:1px solid var(--line2);will-change:transform}
.ecard img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ecard__lab{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(0deg,rgba(6,7,10,.92),transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.ecard__lab b{font-family:var(--f-d);font-weight:700;font-stretch:112%;font-size:clamp(13px,1.15vw,17px);letter-spacing:-.01em;line-height:1.1}
.ecard__lab span{font-family:var(--f-m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ac);white-space:nowrap}
.engine__caps{position:relative;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:var(--max);margin:4vh auto 0}
.engine__caps .chip{opacity:0;transform:translateY(16px)}

/* =====================================================================
   REEL
   ===================================================================== */
.reel{position:relative;padding:clamp(110px,16vh,190px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);align-items:center;max-width:var(--max);margin:0 auto}
.reel__t{font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(40px,6vw,100px);line-height:.9;letter-spacing:-.04em;margin-top:18px}
.reel__t .thin{font-weight:300;font-stretch:100%}
.reel__p{margin-top:26px;max-width:46ch;color:var(--fog);font-size:16.5px;line-height:1.7}
.reel__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.phone{position:relative;width:clamp(250px,25vw,360px);aspect-ratio:9/19.2;border-radius:52px;padding:11px;background:linear-gradient(155deg,#363d49,#0b0d11 55%,#232831);border:1px solid var(--line3);
  box-shadow:0 80px 140px -50px rgba(0,0,0,.95),0 0 160px -40px rgba(255,122,47,.45),0 0 200px -60px rgba(55,224,216,.35)}
.phone::before{content:"";position:absolute;top:22px;left:50%;width:92px;height:26px;margin-left:-46px;border-radius:20px;background:#000;z-index:2}
.phone__scr{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#000}
.phone__scr video,.phone__scr img{width:100%;height:100%;object-fit:cover}
.phone__play{position:absolute;inset:0;z-index:3;display:grid;place-items:center}
.phone__play span{width:78px;height:78px;border-radius:50%;background:rgba(255,122,47,.92);display:grid;place-items:center;box-shadow:0 0 60px rgba(255,122,47,.6);transition:transform .4s var(--eo)}
.phone__play:hover span{transform:scale(1.08)}
.phone__play svg{width:24px;height:24px;margin-left:4px;fill:#160700}
.lightbox{position:fixed;inset:0;z-index:450;background:rgba(3,4,6,.96);display:grid;place-items:center;padding:4vh 4vw;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lightbox.is-open{opacity:1;visibility:visible}
.lightbox video{max-height:92vh;max-width:92vw;aspect-ratio:9/16;border-radius:18px;background:#000}
.lightbox__x{position:absolute;top:22px;right:22px;width:50px;height:50px;border-radius:50%;border:1px solid var(--line3);font-size:20px}

/* =====================================================================
   ARCHIVE — every product
   ===================================================================== */
.archive{position:relative;padding:clamp(110px,16vh,190px) 0 clamp(90px,12vh,150px);border-top:1px solid var(--line)}
.afilters{max-width:var(--max);margin:44px auto 34px;padding:0 var(--pad);display:flex;gap:8px;flex-wrap:wrap}
.afilter{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);height:42px;padding:0 18px;border-radius:100px;border:1px solid var(--line2);display:inline-flex;align-items:center;gap:10px;transition:color .3s,background .3s,border-color .3s}
.afilter sup{font-size:10px;color:var(--dust);transition:color .3s}
.afilter:hover{color:var(--chalk);border-color:var(--line3)}
.afilter[aria-pressed="true"]{background:var(--chalk);border-color:var(--chalk);color:#000}
.afilter[aria-pressed="true"] sup{color:#000}
.agrid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.tile{position:relative;display:block;border-radius:14px;overflow:hidden;background:var(--ink2);border:1px solid var(--line);transition:border-color .4s}
.tile.is-wide{grid-column:span 2}
.tile:hover{border-color:var(--line3)}
.tile__img{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink3)}
.tile.is-wide .tile__img{aspect-ratio:16/7.6}
.tile__img img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 1.1s var(--eo)}
.tile:hover .tile__img img{transform:scale(1.045)}
.tile__no{position:absolute;top:12px;left:12px;font-family:var(--f-m);font-size:10px;letter-spacing:.16em;color:var(--chalk);background:rgba(6,7,10,.75);padding:6px 10px;border-radius:100px}
.tile__live{position:absolute;top:12px;right:12px;font-family:var(--f-m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#03170A;background:var(--cyan);padding:6px 10px;border-radius:100px}
.tile__meta{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 18px 20px}
.tile__name{font-family:var(--f-d);font-weight:700;font-stretch:112%;font-size:clamp(18px,1.5vw,23px);letter-spacing:-.02em;line-height:1.15;transition:color .3s}
.tile:hover .tile__name{color:var(--ac)}
.tile__tag{margin-top:6px;font-size:13.5px;line-height:1.55;color:var(--fog);max-width:46ch}
.tile__sec{font-family:var(--f-m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dust);white-space:nowrap;padding-top:4px;text-align:right}
.tile.is-hidden{display:none}

/* =====================================================================
   CAPABILITIES
   ===================================================================== */
.caps{padding:clamp(100px,14vh,170px) 0;border-top:1px solid var(--line)}
.caps__list{max-width:var(--max);margin:50px auto 0;padding:0 var(--pad)}
.cap{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr) auto;align-items:center;gap:20px;padding:30px 0;border-top:1px solid var(--line)}
.cap:last-child{border-bottom:1px solid var(--line)}
.cap__n{font-family:var(--f-m);font-size:12px;color:var(--dust)}
.cap__t{font-family:var(--f-d);font-weight:800;font-stretch:100%;font-size:clamp(34px,5.6vw,96px);line-height:.95;letter-spacing:-.04em;transition:font-stretch .8s var(--eo),color .4s}
.cap:hover .cap__t{font-stretch:125%;color:var(--ac)}
.cap__d{margin-top:10px;color:var(--fog);font-size:15px;max-width:60ch}
.cap__thumbs{display:flex;gap:8px}
.cap__thumbs img{width:clamp(70px,7vw,120px);aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line2);opacity:.35;transform:translateY(8px);transition:opacity .5s,transform .6s var(--eo)}
.cap:hover .cap__thumbs img{opacity:1;transform:none}
.cap:hover .cap__thumbs img:nth-child(2){transition-delay:.05s}.cap:hover .cap__thumbs img:nth-child(3){transition-delay:.1s}
.cap__count{font-family:var(--f-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog);text-align:right;margin-top:10px}

/* ---------- numbers ---------- */
.nums{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(90px,12vh,150px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px}
.num{padding:36px 0 0;border-top:1px solid var(--line2)}
.num b{display:block;font-family:var(--f-d);font-weight:800;font-stretch:125%;font-size:clamp(46px,6vw,104px);line-height:.85;letter-spacing:-.05em}
.num span{display:block;margin-top:14px;font-family:var(--f-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}

/* =====================================================================
   CLOSE
   ===================================================================== */
.close{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16vh var(--pad) 10vh;overflow:hidden;border-top:1px solid var(--line)}
.close__glow{position:absolute;left:50%;top:50%;width:min(1100px,140vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,47,.22),transparent 70%),radial-gradient(closest-side at 62% 64%,rgba(55,224,216,.18),transparent 70%)}
.close__mark{position:absolute;left:50%;top:50%;width:min(620px,92vw);transform:translate(-50%,-50%);opacity:.06;pointer-events:none}
.close__t{position:relative;font-family:var(--f-d);font-weight:800;font-size:clamp(52px,11vw,200px);line-height:.86;letter-spacing:-.05em}
.close__t .l1{display:block;font-stretch:100%;font-weight:300}
.close__t .l2{display:block;font-stretch:125%}
.close__p{position:relative;margin-top:30px;max-width:500px;color:var(--fog);font-size:16.5px;line-height:1.7}
.vcard{position:relative;display:flex;align-items:center;gap:clamp(16px,3vw,40px);margin:42px auto 0;padding:18px clamp(18px,2.6vw,32px);border:1px solid var(--line2);border-radius:20px;background:rgba(11,13,17,.8);text-align:left;flex-wrap:wrap;justify-content:center}
.vcard img{width:46px;height:46px}
.vcard__who,.vcard__tel{display:flex;flex-direction:column;gap:4px}
.vcard b{font-family:var(--f-d);font-weight:700;font-stretch:112%;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.01em;white-space:nowrap}
.vcard__tel{padding-left:clamp(16px,3vw,40px);border-left:1px solid var(--line2)}
.vcard__tel b{font-family:var(--f-m);font-weight:500;font-stretch:100%;letter-spacing:.02em}
.vcard__tel:hover b{color:var(--ember)}
.close__cta{position:relative;display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:30px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:30px var(--pad) calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot .hud{font-size:10px}

/* ---------- generic reveal ---------- */
.rv{opacity:0;transform:translateY(30px)}
html.reveal-off .rv,html.reveal-off .film__info>*,html.reveal-off .engine__caps .chip{opacity:1!important;transform:none!important}
html.reveal-off .film__win{transform:none!important;border-radius:0!important}
html.reveal-off .film__shade,html.reveal-off .film__phone,html.reveal-off .film__hud{opacity:1!important;transform:none!important}
html.reveal-off .cold{display:none}

/* ---------- page curtain (fallback transition) ---------- */
.curtain{position:fixed;inset:0;z-index:600;background:var(--ink);transform:scaleY(0);transform-origin:bottom;pointer-events:none}
.curtain.is-on{transform:scaleY(1);transition:transform .5s var(--eio)}
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--eio) both}
::view-transition-new(root){animation:vt-in .6s var(--eo) both}
::view-transition-group(vt-cover){animation-duration:.7s;animation-timing-function:var(--eo)}
@keyframes vt-out{to{opacity:0;transform:scale(.97)}}
@keyframes vt-in{from{opacity:0}}

/* =====================================================================
   CASE STUDY
   ===================================================================== */
.cs-hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden}
.cs-hero__img{position:absolute;inset:0;view-transition-name:vt-cover}
.cs-hero__img img{width:100%;height:100%;object-fit:cover;object-position:top center;will-change:transform}
.cs-hero__shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,7,10,.95) 0%,rgba(6,7,10,.84) 34%,rgba(6,7,10,.4) 62%,rgba(6,7,10,.12) 100%),linear-gradient(0deg,rgba(6,7,10,.96) 2%,rgba(6,7,10,.2) 45%,transparent 70%),linear-gradient(180deg,rgba(6,7,10,.6),transparent 20%)}
.cs-hero__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(34px,7vh,80px)}
.cs-hero__t{font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(46px,9vw,164px);line-height:.88;letter-spacing:-.045em;max-width:15ch;margin-top:20px}
.cs-hero__lead{margin-top:22px;max-width:640px;font-size:clamp(15px,1.4vw,19px);line-height:1.65;color:#D3D8E0}
.cs-meta{display:flex;flex-wrap:wrap;gap:22px 44px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line2)}
.cs-meta div{display:flex;flex-direction:column;gap:6px}
.cs-meta span{font-family:var(--f-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
.cs-meta b{font-weight:500;font-size:14px}
.cs-hero--phone .cs-hero__img{display:flex;align-items:center;justify-content:flex-end;gap:22px;padding:0 var(--pad);background:radial-gradient(60% 70% at 72% 50%,var(--acg),transparent 70%),var(--ink)}
.cs-hero--phone .cs-hero__img .fphone{width:clamp(150px,17vw,250px)}
.cs-hero--phone .cs-hero__img .fphone:nth-child(2){transform:translateY(-30px)}
.cs-wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.cs-over{padding:clamp(90px,14vh,170px) 0 clamp(50px,8vh,100px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:clamp(30px,6vw,100px)}
.cs-over__l{display:flex;flex-direction:column;gap:22px}
.cs-over__big{font-family:var(--f-d);font-weight:600;font-stretch:106%;font-size:clamp(22px,2.6vw,40px);line-height:1.22;letter-spacing:-.02em}
.cs-over__p{margin-top:24px;color:var(--fog);font-size:16.5px;line-height:1.75}
.cs-stack{display:flex;flex-wrap:wrap;gap:8px}
.cs-stats{display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:8px}
.cs-stats b{display:block;font-family:var(--f-d);font-weight:800;font-stretch:118%;font-size:clamp(36px,4vw,64px);line-height:1;letter-spacing:-.04em;color:var(--ac2)}
.cs-stats span{display:block;margin-top:8px;font-family:var(--f-m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--fog)}
.cs-beat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);gap:clamp(30px,6vw,100px);align-items:center;padding:clamp(50px,9vh,110px) 0}
.cs-beat.flip .cs-beat__txt{order:2}
.cs-beat__txt h3{font-family:var(--f-d);font-weight:800;font-stretch:112%;font-size:clamp(28px,3.4vw,54px);line-height:.98;letter-spacing:-.035em;margin-top:18px}
.cs-beat__txt p{margin-top:18px;color:var(--fog);font-size:16px;line-height:1.75;max-width:52ch}
.cs-beat--text{grid-template-columns:1fr;max-width:1000px;border-left:2px solid var(--ac);padding-left:clamp(20px,3vw,44px);margin:40px 0}
.fbrowser{border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--ink3);box-shadow:0 60px 120px -50px rgba(0,0,0,.9)}
.fbrowser__bar{display:flex;align-items:center;gap:7px;padding:12px 15px;background:#101319;border-bottom:1px solid var(--line)}
.fbrowser__bar i{width:10px;height:10px;border-radius:50%;background:var(--line3)}
.fbrowser__bar span{margin-left:12px;font-family:var(--f-m);font-size:10.5px;color:var(--dust);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbrowser__img{overflow:hidden}
.fbrowser img{width:100%;display:block;will-change:transform}
.fphone{width:min(300px,70vw);margin:0 auto;border-radius:40px;padding:9px;background:linear-gradient(155deg,#2b313b,#0b0d11 60%);border:1px solid var(--line3);box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.fphone>div{border-radius:31px;overflow:hidden;aspect-ratio:9/19.3;background:#000}
.fphone img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fplain{border-radius:12px;overflow:hidden;border:1px solid var(--line2)}
.cs-sys{margin:clamp(40px,8vh,90px) 0;padding:clamp(30px,4vw,56px);border:1px solid var(--line2);border-radius:20px;background:radial-gradient(80% 120% at 0% 0%,var(--acg),transparent 60%),var(--ink2)}
.cs-sys p{font-family:var(--f-d);font-weight:500;font-stretch:104%;font-size:clamp(18px,1.9vw,27px);line-height:1.45;letter-spacing:-.01em;max-width:62ch;margin-top:18px}
.cs-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);margin:30px 0 clamp(60px,10vh,120px)}
.cs-feat>div{padding:30px 28px;border-radius:16px;border:1px solid var(--line2);background:var(--ink2)}
.cs-feat b{font-family:var(--f-d);font-weight:700;font-stretch:110%;font-size:20px;letter-spacing:-.015em;display:block}
.cs-feat p{margin-top:12px;color:var(--fog);font-size:14.5px;line-height:1.7}
.cs-road{position:relative;padding:20px 0 clamp(60px,10vh,120px) 0;max-width:980px}
.cs-road__line{position:absolute;left:6px;top:28px;bottom:clamp(60px,10vh,120px);width:2px;background:var(--line2)}
.cs-road__fill{position:absolute;left:6px;top:28px;width:2px;height:0;background:linear-gradient(var(--ac),var(--cyan))}
.cs-step{position:relative;padding:0 0 46px 44px}
.cs-step::before{content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:50%;background:var(--ink);border:2px solid var(--line3);transition:.4s}
.cs-step.lit::before{background:var(--ac);border-color:var(--ac);box-shadow:0 0 0 6px rgba(255,255,255,.04),0 0 20px var(--ac)}
.cs-step .hud{font-size:10px}
.cs-step h4{font-family:var(--f-d);font-weight:700;font-stretch:110%;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.02em;margin:10px 0 8px}
.cs-step p{color:var(--fog);font-size:15px;line-height:1.7;max-width:60ch}
.cs-gal{padding:0 0 clamp(70px,12vh,140px)}
.cs-gal__track{display:flex;gap:18px;padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.cs-gal__track::-webkit-scrollbar{display:none}
.cs-gal__track figure{flex:0 0 min(780px,86vw);aspect-ratio:16/10;scroll-snap-align:center;border-radius:14px;overflow:hidden;border:1px solid var(--line2);background:var(--ink3)}
.cs-gal--phone .cs-gal__track figure{flex-basis:min(300px,64vw);aspect-ratio:9/19.3;border-radius:30px}
.cs-gal__track img{width:100%;height:100%;object-fit:cover;object-position:top center;pointer-events:none}
.cs-next{position:relative;display:block;height:86vh;min-height:520px;overflow:hidden;border-top:1px solid var(--line)}
.cs-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.08);transition:transform 1.4s var(--eo)}
.cs-next:hover img{transform:scale(1.02)}
.cs-next__shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,7,10,.95),rgba(6,7,10,.45) 60%,rgba(6,7,10,.7))}
.cs-next__in{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(36px,8vh,90px)}
.cs-next__t{font-family:var(--f-d);font-weight:800;font-stretch:125%;font-size:clamp(46px,9vw,170px);line-height:.86;letter-spacing:-.05em;margin-top:18px}
.cs-sticky{position:fixed;right:var(--pad);bottom:calc(22px + env(safe-area-inset-bottom));z-index:150;transform:translateY(140%);transition:transform .6s var(--eo)}
.cs-sticky.is-on{transform:none}
.modal{position:fixed;inset:0;z-index:460;display:grid;place-items:center;padding:24px;background:rgba(3,4,6,.9);opacity:0;visibility:hidden;transition:.4s}
.modal.is-open{opacity:1;visibility:visible}
.modal__card{max-width:440px;padding:38px;border-radius:20px;border:1px solid var(--line2);background:var(--ink2);text-align:center}
.modal__card h3{font-family:var(--f-d);font-weight:800;font-stretch:112%;font-size:26px;letter-spacing:-.02em;margin:16px 0 12px}
.modal__card p{color:var(--fog);font-size:15px;line-height:1.7;margin-bottom:24px}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1100px){
  .agrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-over,.cs-beat{grid-template-columns:1fr}
  .cs-beat.flip .cs-beat__txt{order:0}
  .cs-feat{grid-template-columns:1fr}
  .reel{grid-template-columns:1fr;justify-items:center;text-align:center}
  .reel__p{margin-left:auto;margin-right:auto}.reel__cta{justify-content:center}
  .cap{grid-template-columns:44px minmax(0,1fr)}
  .cap__side{grid-column:2}
  .cap__thumbs img{opacity:.9;transform:none}
}
@media (max-width:860px){
  :root{--nav:64px}
  .nav__links,.nav__cta{display:none}
  .nav__menu{display:block}
  .nav::before{background:linear-gradient(180deg,rgba(6,7,10,.96),rgba(6,7,10,0))}
  .btn{height:50px;padding:0 22px;font-size:11px}
  .warp{height:260vh}
  .warp__stage{perspective:700px}
  .warp__h1{font-size:clamp(42px,12.6vw,74px)}
  .warp__sub{font-size:15px;margin-top:22px}
  .warp__cue{display:none}
  .wcard figcaption{display:none}
  .wcard{border-radius:7px}
  .sectors{padding:22px 0}
  .film{height:210vh}
  .film__title{font-size:clamp(64px,24vw,140px);-webkit-text-stroke-width:1px}
  .film__win{transform:scale(.62)}
  .film__shade{background:linear-gradient(0deg,rgba(6,7,10,.97) 8%,rgba(6,7,10,.75) 46%,rgba(6,7,10,.2) 80%)}
  .film__info{bottom:calc(28px + env(safe-area-inset-bottom));right:var(--pad)}
  .film__name{font-size:clamp(40px,12vw,64px)}
  .film__tag{font-size:15px}
  .film__stats{gap:22px}
  .film__phone{display:none}
  .film__hud{display:none}
  .engine{height:240vh}
  .engine__deck{grid-template-columns:repeat(2,1fr);gap:9px}
  .ecard__lab{padding:18px 9px 8px}
  .ecard__lab span{display:none}
  .engine__head{margin-bottom:2.4vh}
  .engine__p{font-size:14px}
  .engine__caps{margin-top:2.4vh}
  .engine__caps .chip{font-size:9px;padding:7px 10px}
  .agrid{grid-template-columns:1fr}
  .tile.is-wide{grid-column:auto}
  .tile.is-wide .tile__img{aspect-ratio:16/10}
  .nums{grid-template-columns:repeat(2,1fr);gap:0 20px}
  .vcard{flex-direction:column;text-align:center;width:100%;max-width:420px}
  .vcard__who,.vcard__tel{align-items:center}
  .vcard__tel{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--line2);width:100%}
  .close__cta .btn{flex:1 1 100%;justify-content:center}
  .cs-hero--phone .cs-hero__img{justify-content:center;padding-top:90px;align-items:flex-start}
  .cs-hero--phone .cs-hero__img .fphone{width:40vw}
  .cs-hero--phone .cs-hero__img .fphone:nth-child(3){display:none}
  .cs-sticky{left:var(--pad);right:var(--pad)}
  .cs-sticky .btn{width:100%;justify-content:center}
  .grain{display:none}
}
@media (prefers-reduced-motion:reduce){
  .warp{height:auto}
  .warp__stage{position:relative;height:100svh}
  .film{height:auto}.film__stage{position:relative}
  .film__win{transform:none;border-radius:0}
  .film__shade,.film__phone,.film__hud{opacity:1}
  .film__info>*{opacity:1;transform:none}
  .engine{height:auto}.engine__stage{position:relative;height:auto;padding-top:120px;padding-bottom:120px}
  .engine__caps .chip{opacity:1;transform:none}
  .rv{opacity:1;transform:none}
  .cold{display:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
.film__out{position:absolute;inset:0;z-index:5;background:var(--ink);opacity:0;pointer-events:none}
.agrid{grid-auto-flow:dense}
html.reveal-off .film__out{opacity:0!important}
html.reveal-off .warp__hero{opacity:1!important;transform:none!important;visibility:visible!important}

.warp__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(52% 46% at 50% 50%,rgba(6,7,10,.9),rgba(6,7,10,.55) 55%,transparent 80%)}
.wcard figcaption{transition:opacity .3s}
.wcard.is-near figcaption{opacity:0}
@media (max-width:860px){
  .film__info{top:auto;transform:none;max-width:none}
  .film__title{font-size:clamp(64px,26vw,150px);-webkit-text-stroke-width:1px}
}
html.reveal-off .film__title{opacity:0!important}
html.reveal-off .warp__scrim{opacity:1}

.warp__h1 .wd{white-space:nowrap}
@media (max-width:860px){
  .warp__hero .hud{font-size:9.5px;letter-spacing:.14em}
  .warp__h1 .l1{font-stretch:112%}
  .film__chips,.film__stats{display:none}
  .film__info{bottom:calc(26px + env(safe-area-inset-bottom))}
  .film__name{font-size:clamp(34px,10vw,52px)}
  .film__tag{margin-top:12px;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .film__cta{margin-top:18px}
  .film__no{margin-bottom:12px}
}

.cs-next__t{overflow-wrap:anywhere}
@media (max-width:860px){
  .cs-next__t{font-stretch:108%;font-size:clamp(38px,11.5vw,64px)}
  .cs-hero__t{font-size:clamp(40px,11.5vw,72px)}
  .cs-hero__shade{background:linear-gradient(0deg,rgba(6,7,10,.98) 30%,rgba(6,7,10,.72) 58%,rgba(6,7,10,.35) 82%,rgba(6,7,10,.55))}
  body.case .foot{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}

.warp__streak{position:absolute;inset:-20%;pointer-events:none;opacity:0;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(154,242,236,.0) 0deg,rgba(154,242,236,.0) 2.6deg,rgba(154,242,236,.22) 2.85deg,rgba(255,178,127,.0) 3.1deg,rgba(255,178,127,.0) 5.4deg,rgba(255,178,127,.16) 5.6deg,rgba(255,178,127,0) 5.8deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 18%,#000 48%,transparent 100%);mask-image:radial-gradient(closest-side,transparent 18%,#000 48%,transparent 100%)}

.film__title{font-size:min(19vw,calc(132vw / var(--len,6)))}
@media (max-width:860px){.film__title{font-size:min(26vw,calc(150vw / var(--len,6)))}}

.cs-hero__type{display:grid;place-items:center;background:radial-gradient(60% 60% at 70% 40%,var(--acg),transparent 70%),radial-gradient(50% 50% at 30% 70%,rgba(55,224,216,.1),transparent 70%),var(--ink)}
.cs-hero__type img{position:absolute;right:6vw;top:50%;width:min(44vw,560px);transform:translateY(-50%);opacity:.12}
.cs-hero__type span{position:absolute;right:4vw;top:22%;font-family:var(--f-d);font-weight:900;font-stretch:125%;font-size:min(16vw,calc(120vw / 8));letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(242,244,247,.18);white-space:nowrap}
.cs-hero--type .cs-hero__shade{background:linear-gradient(0deg,rgba(6,7,10,.9),transparent 55%)}
.tile__type{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(70% 80% at 70% 30%,color-mix(in srgb,var(--ac) 38%,transparent),transparent 70%),var(--ink3);overflow:hidden}
.tile__type span{font-family:var(--f-d);font-weight:900;font-stretch:125%;font-size:clamp(34px,4.6vw,72px);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.2px rgba(242,244,247,.45);white-space:nowrap}
@media (max-width:860px){
  .cs-hero__shade{background:linear-gradient(0deg,rgba(6,7,10,.98) 30%,rgba(6,7,10,.72) 58%,rgba(6,7,10,.35) 82%,rgba(6,7,10,.55))}
  .cs-hero__type span{font-size:18vw;top:18%}
}

@media (max-width:860px){
  .engine__stage{justify-content:flex-start;padding-top:calc(var(--nav) + 4px);padding-bottom:16px}
  .engine__t{font-size:clamp(30px,9.6vw,44px)}
  .engine__p{display:none}
  .engine__head{margin-bottom:14px}
  .engine__deck{gap:7px}
  .ecard{aspect-ratio:16/9.4;border-radius:9px}
  .ecard__lab b{font-size:12px}
  .engine__caps{margin-top:12px;gap:6px}
  .engine__caps .chip:nth-child(n+5){display:none}
}
@media (max-width:860px) and (max-height:700px){.ecard{aspect-ratio:16/8}}