/* ASTEROID · site.css
   Plasma system: void, white, one magenta, one cyan, ultraviolet as light only.
   Type: Poppins (headlines) · Tanker (sub-heads, numbers) · Satoshi (text) · JetBrains Mono (labels) */

@font-face{font-family:"Poppins";src:url(../assets/fonts/Poppins-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Poppins";src:url(../assets/fonts/Poppins-800.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tanker";src:url(../assets/fonts/Tanker-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../assets/fonts/Satoshi-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --void:#0B0B12; --void-2:#101019; --ink:#F4F4F8; --mute:#9A9AB0; --line:rgba(255,255,255,.08); --card:#111118;
  --mag:#FF2D95; --cyan:#22E8FF; --uv:#7A5CFF; --orange:#FF7A1A;
  --paper:#F2F1EE; --paper-ink:#111114; --paper-mute:#6B6B72; --paper-line:rgba(0,0,0,.1);
  --head:"Poppins","Helvetica Neue",Arial,sans-serif;
  --sub:"Tanker",Impact,"Arial Narrow",sans-serif;
  --body:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(18px,4.5vw,72px); --max:1440px; --sp:clamp(72px,9vw,148px); --sp-s:clamp(40px,5vw,80px);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--void);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
section,footer{min-width:0}
section[id]{scroll-margin-top:84px}
.about,.flow,.machine,.leaks,.vids,.ba,.price,.hero,.end{overflow:hidden}
.hero,.end{position:relative}
.wrap{min-width:0}
body.locked{overflow:hidden}
h1,h2,h3,h4,p,ul,figure{margin:0}
p,li,dd,small,address{overflow-wrap:anywhere}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
::selection{background:var(--mag);color:#fff}
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type ---------- */
.h-display{font-family:var(--head);font-weight:700;letter-spacing:-.025em;line-height:1.04;text-wrap:balance}
.h-sub{font-family:var(--sub);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.05}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);display:inline-flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--cyan);box-shadow:0 0 8px rgba(34,232,255,.8)}
.light .eyebrow{color:var(--paper-mute)}
.light .eyebrow::before{background:var(--paper-ink);box-shadow:none}
.lead{font-size:clamp(16px,1.2vw,19px);color:var(--mute);max-width:56ch}
.light .lead{color:var(--paper-mute)}
.cy{color:var(--cyan);text-shadow:0 0 22px rgba(34,232,255,.45)}
.mg{color:var(--mag);text-shadow:0 0 22px rgba(255,45,149,.4)}
.num{font-family:var(--sub);font-variant-numeric:tabular-nums;letter-spacing:.01em}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.45em;border-radius:4px;font-weight:700;font-size:14px;line-height:1;letter-spacing:.01em;border:1px solid transparent;overflow:hidden;transition:transform .35s var(--ease-out),box-shadow .35s,color .3s,border-color .3s;white-space:nowrap}
.btn .t{display:inline-block;overflow:hidden;height:1.2em;line-height:1.2;vertical-align:top}
.btn .t i{display:block;font-style:normal;position:relative;transition:transform .45s var(--ease-out)}
.btn .t i::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap}
.btn:hover .t i{transform:translateY(-100%)}
.btn .ar{display:inline-block;transition:transform .35s var(--ease-out)}
.btn:hover .ar{transform:translateX(4px)}
.btn-p{background:var(--mag);color:#fff;box-shadow:0 0 18px rgba(255,45,149,.45)}
.btn-p:hover{box-shadow:0 0 34px rgba(255,45,149,.75)}
.btn-s{border-color:rgba(34,232,255,.6);color:var(--cyan)}
.btn-s:hover{border-color:var(--cyan);box-shadow:0 0 22px rgba(34,232,255,.25)}
.btn-k{border-color:var(--paper-ink);color:var(--paper-ink)}
.btn-k:hover{background:var(--paper-ink);color:var(--paper)}
.btn-w{background:var(--ink);color:var(--void)}
.link{position:relative;display:inline-block;padding-bottom:3px}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- cursor ---------- */
.cur{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:var(--ink);pointer-events:none;z-index:200;transform:translate(-50%,-50%);mix-blend-mode:difference;transition:width .25s,height .25s,opacity .25s;opacity:0}
.cur.on{opacity:1}
.cur.big{width:56px;height:56px}
@media (pointer:coarse){.cur{display:none}}

/* ---------- preloader: the ring, breathing ---------- */
.pre{position:fixed;inset:0;z-index:150;background:#000;display:grid;place-items:center;overflow:hidden}
.pre .pring{width:clamp(120px,22vmin,220px);height:auto;animation:breathe 2.6s ease-in-out infinite;will-change:opacity,transform}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
.pre .pct{position:absolute;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:#5c5c70;font-variant-numeric:tabular-nums}
.pre.done{pointer-events:none}
.no-js .pre{display:none}
@media (prefers-reduced-motion:reduce){.pre .pring{animation:none;opacity:1}}

/* ---------- stars ---------- */
.stars{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55}
main{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;left:0;right:0;top:0;z-index:100;padding-top:env(safe-area-inset-top,0px);transition:background .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(11,11,18,.72);backdrop-filter:blur(14px);border-color:var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:72px}
.nav .wm{display:flex;align-items:center;gap:10px;flex:none;font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:.2em;text-transform:uppercase;line-height:1}
.wm .mark{width:28px;height:28px;flex:none}
.wm .wmt{display:grid;gap:5px}
.wm .wmt span{display:block}
.wm .wmt small{font-family:var(--sub);font-size:7px;letter-spacing:.2em;color:var(--ink)}
.nav .links{display:flex;gap:26px;margin-left:auto}
.nav .links a{font-size:14px;color:var(--mute);position:relative;padding:6px 0}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.nav .links a:hover,.nav .links a.on{color:var(--ink)}
.nav .links a:hover::after,.nav .links a.on::after{transform:scaleX(1);transform-origin:left}
.nav .cta{margin-left:6px}
.burger{display:none;margin-left:auto;width:44px;height:44px;position:relative}
.burger i{position:absolute;left:10px;right:10px;height:2px;background:var(--ink);transition:transform .4s var(--ease-out),opacity .3s,top .4s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:22px}.burger i:nth-child(3){top:28px}
.burger[aria-expanded="true"] i:nth-child(1){top:22px;transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:22px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:90;background:var(--void);display:grid;align-content:center;padding:calc(var(--gutter) + 72px) var(--gutter) var(--gutter);clip-path:circle(0 at calc(100% - 44px) 36px);transition:clip-path .7s var(--ease-out);visibility:hidden}
.menu.open{clip-path:circle(150% at calc(100% - 44px) 36px);visibility:visible}
.menu[aria-hidden="true"]{pointer-events:none}
.menu a{font-family:var(--head);font-weight:700;font-size:clamp(30px,8vw,56px);letter-spacing:-.02em;line-height:1.15;display:block;color:var(--ink);opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s var(--ease-out)}
.menu.open a{opacity:1;transform:none}
.menu a:nth-child(1){transition-delay:.15s}.menu a:nth-child(2){transition-delay:.2s}.menu a:nth-child(3){transition-delay:.25s}.menu a:nth-child(4){transition-delay:.3s}.menu a:nth-child(5){transition-delay:.35s}.menu a:nth-child(6){transition-delay:.4s}
.menu .mf{margin-top:36px;color:var(--mute);font-size:14px;display:grid;gap:10px}
.menu .mf a{min-height:44px;display:flex;align-items:center;color:var(--ink)}
@media (max-width:1100px){.nav .links{gap:18px}.nav .links a{font-size:13px}}
@media (max-width:900px){.nav .links,.nav .cta{display:none}.burger{display:block}}

/* ---------- sections ---------- */
section{position:relative}
.light{background:var(--paper);color:var(--paper-ink);color-scheme:light}
.pad{padding-block:var(--sp)}
.glow{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);z-index:0}
.glow.m{background:radial-gradient(circle,rgba(255,45,149,.32),rgba(255,45,149,0) 65%)}
.glow.u{background:radial-gradient(circle,rgba(122,92,255,.28),rgba(122,92,255,0) 65%)}
.glow.c{background:radial-gradient(circle,rgba(34,232,255,.22),rgba(34,232,255,0) 65%)}
.js [data-reveal]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--ease),transform 1s var(--ease-out),filter .9s var(--ease)}
[data-reveal].in{opacity:1;transform:none;filter:blur(0)}
[data-reveal].out{opacity:.55;filter:blur(3px);transition-duration:.6s}
.words .w{display:inline-block;overflow:hidden;vertical-align:bottom}
.js .words .w i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform .9s var(--ease-out)}
.words .w i{display:inline-block;font-style:normal}
.words.in .w i{transform:none}

/* ---------- 1 · hero ---------- */
.hero{min-height:100svh;display:grid;align-content:end;padding-top:112px;background:#000;padding-bottom:clamp(28px,4vw,56px);overflow:hidden;isolation:isolate}
.hero .bg{position:absolute;inset:0;z-index:-1}
.hero .bg picture,.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
@media (min-width:901px) and (max-height:760px){.hero h1{font-size:clamp(38px,5vw,70px)}}
.hero .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.35) 40%,rgba(0,0,0,0) 62%),linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 62%,rgba(0,0,0,.92) 100%)}
.hero .top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:start;margin-bottom:clamp(24px,4vw,56px)}
.hero .top .intro{grid-column:1}
.hero .intro{max-width:46ch;color:var(--ink);font-size:clamp(15px,1.15vw,17px);display:grid;gap:18px;justify-items:start}
.hero .pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-content:start}
.hero .pills span{font-size:12px;letter-spacing:.04em;padding:9px 14px;border:1px solid rgba(255,255,255,.28);border-radius:999px;backdrop-filter:blur(6px);background:rgba(11,11,18,.25);display:inline-flex;align-items:center;gap:8px}
.hero .pills span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(34,232,255,.9)}
.hero h1{font-size:clamp(38px,5.6vw,84px);font-weight:800;width:100%;margin-bottom:clamp(22px,3vw,40px);position:relative;z-index:2;max-width:14ch;letter-spacing:-.03em;line-height:1}
.hero h1 .cy{display:inline-block}
.hero .bot{display:flex;gap:clamp(20px,4vw,56px);flex-wrap:wrap;padding-top:22px;border-top:1px solid rgba(255,255,255,.14);max-width:960px}
.hero .bot span{display:grid;gap:4px;min-width:0}
.hero .bot b{font-family:var(--sub);font-weight:400;font-size:clamp(17px,1.4vw,21px);letter-spacing:.03em;text-transform:uppercase;line-height:1}
.hero .bot small{font-size:12px;color:var(--mute);letter-spacing:.02em}
.scroll-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(180deg,var(--cyan),transparent);animation:drop 1.8s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:900px){
  .hero{padding-top:100px}
  .hero .top{grid-template-columns:minmax(0,1fr)}
  .hero .pills{justify-content:flex-start}
  .hero{padding-top:min(44svh,380px)}
  .hero .bg picture img{object-position:50% 0%}
  .hero .bg::after{background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 30%,rgba(0,0,0,.9) 46%,#000 62%)}
  .hero h1{font-size:clamp(34px,9.6vw,58px);max-width:none}
  .hero .bot{gap:14px 24px}
  .hero .bot span:nth-child(2){display:none}
  .scroll-hint{display:none}
}

/* ---------- marquee ---------- */
.ticker{border-block:1px solid var(--line);overflow:hidden;padding:14px 0;background:rgba(11,11,18,.6)}
.ticker .tk{display:flex;width:max-content;animation:mq 46s linear infinite}
.ticker .row{display:flex;flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.ticker .row span{padding-right:48px;display:inline-flex;gap:0 .5em}
.ticker .row span b{color:var(--ink);font-weight:500}
.ticker .row span::after{content:"·";margin-left:48px;color:var(--mag)}
@keyframes mq{to{transform:translateX(-50%)}}
.ticker:hover .tk{animation-play-state:paused}
@media (max-width:700px){.ticker .tk{animation-duration:70s}.ticker .row{font-size:11px}}
@media (prefers-reduced-motion:reduce){.ticker .tk{animation:none;width:auto}.ticker .row{flex-wrap:wrap;white-space:normal;gap:8px 0}.ticker .row[aria-hidden]{display:none}.ticker .row span::after{display:none}}

/* ---------- 2 · videos ---------- */
.vids .head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:40px}
.vids h2{font-size:clamp(28px,3.4vw,48px)}
.vgrid{display:flex;gap:16px;height:clamp(420px,52vh,560px)}
.vcard{position:relative;flex:1;min-width:0;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:#000;cursor:pointer;transition:flex .8s var(--ease-out);isolation:isolate}
.vcard video,.vcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.8);transition:filter .9s var(--ease),transform 1.2s var(--ease-out)}
.vcard.on{flex:2.2}
.vcard.on video,.vcard.on img{filter:brightness(1) saturate(1);transform:scale(1.03)}
.vcard .cap{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.85));display:grid;gap:8px}
.vcard .cap .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.vcard .cap h3{font-family:var(--sub);font-weight:400;font-size:clamp(20px,2vw,28px);text-transform:uppercase;letter-spacing:.02em}
.vcard .cap p{font-size:14px;color:var(--mute);max-width:40ch;max-height:0;overflow:hidden;opacity:0;transition:max-height .8s var(--ease-out),opacity .6s .1s}
.vcard.on .cap p{max-height:8em;opacity:1}
@media (max-width:1100px){.vgrid{height:clamp(380px,46vh,480px)}}
@media (max-width:900px){.vids .head{grid-template-columns:minmax(0,1fr)}.vgrid{flex-direction:column;height:auto;gap:12px}.vcard{height:210px;flex:none!important;transition:height .7s var(--ease-out)}.vcard.on{height:340px}.vcard .cap p{max-height:none;opacity:1}}

/* ---------- 3 · about ---------- */
.about .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.about .ghost{position:relative}
.about .ghost::before{content:attr(data-ghost);position:absolute;left:-.04em;top:-.9em;font-family:var(--head);font-weight:800;font-size:clamp(56px,7.5vw,120px);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);text-transform:uppercase;line-height:1;pointer-events:none;white-space:nowrap}
.about h2{font-size:clamp(30px,3.8vw,54px);position:relative}
.about .by{margin-top:18px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:12px}
.about .by::before{content:"";width:32px;height:1px;background:var(--mag)}
.about .copy{display:grid;gap:22px}
.about .copy h3{font-family:var(--sub);font-weight:400;font-size:clamp(20px,1.8vw,26px);text-transform:uppercase;letter-spacing:.02em;max-width:30ch}
.about .copy p{color:var(--mute);max-width:58ch}
.about .founder{display:flex;align-items:center;gap:14px;margin-top:6px}
.about .founder .av{width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#2a2a3a,#0B0B12);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--sub);font-size:16px}
.about .founder .who{display:grid;gap:2px;min-width:0}
.about .founder b{display:block;font-weight:700;font-size:15px}
.about .founder small{display:block;color:var(--mute);font-size:13px}
.about .founder .sig{margin-left:auto;font-family:var(--sub);font-size:13px;letter-spacing:.2em;color:var(--mute)}
.about .lower{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,5vw,80px);margin-top:clamp(40px,6vw,80px)}
.about .pic{border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:#000}
.about .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)}
.about .pic:hover img{transform:scale(1.04)}
.about .panel{display:grid;align-content:center;gap:28px}
.about .vm{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.about .vm h4{font-family:var(--sub);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.about .vm p{font-size:15px;color:var(--mute)}
@media (max-width:900px){.about .grid,.about .lower,.about .vm{grid-template-columns:minmax(0,1fr)}.about .pic{aspect-ratio:4/3}.about .lower{grid-template-areas:"panel" "pic"}.about .pic{grid-area:pic}.about .panel{grid-area:panel}.about .pic{aspect-ratio:1/1}.about .founder .sig{display:none}}

/* ---------- 4 · statement (light) ---------- */
.state{padding-block:clamp(96px,12vw,170px);overflow:hidden}
.state .big{font-family:var(--head);font-weight:800;letter-spacing:-.03em;font-size:clamp(34px,6.4vw,92px);line-height:1.02;text-align:center;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .22em;position:relative;z-index:1}
.state .tile{display:inline-grid;place-items:center;width:1em;height:1em;vertical-align:middle}
.state .tile img{width:100%;height:100%;object-fit:contain}
.state .cap{margin:30px auto 0;max-width:38ch;font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.06em;text-transform:uppercase;color:var(--paper-mute);text-align:center}
.state .sfoot{position:absolute;left:var(--gutter);bottom:22px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--paper-mute)}

/* ---------- X-ray · revenue flow ---------- */
.flow{min-height:100svh;padding-block:clamp(88px,10vw,140px);overflow:hidden}
.flow .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:start}
.flow h2{font-size:clamp(30px,3.6vw,52px)}
.flow .lead{margin-top:20px}
.flow .verdict{margin-top:28px;padding:20px 22px;border:1px solid var(--line);border-left:2px solid var(--mag);border-radius:4px;background:rgba(16,16,25,.6);font-size:16px;max-width:46ch}
.flow .verdict b{color:var(--ink)}
.flow .stage-note{margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.xray{position:relative;display:grid;grid-template-columns:1fr auto;gap:0 22px;align-items:stretch}
.xray canvas{width:100%;height:100%;grid-column:1;grid-row:1/-1;border-radius:6px;background:linear-gradient(180deg,rgba(16,16,25,.6),rgba(11,11,18,.2));border:1px solid var(--line)}
.xray .stages{grid-column:2;display:grid;align-content:space-between;gap:10px;padding-block:14px}
.xray .st{display:grid;gap:2px;min-width:150px}
.xray .st .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.xray .st .n{font-family:var(--sub);font-size:clamp(24px,2.4vw,34px);line-height:1;font-variant-numeric:tabular-nums}
.xray .st .l{font-size:12px;color:var(--mag);font-variant-numeric:tabular-nums;opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s}
.xray .st.lit .l{opacity:1;transform:none}
.xray .st:last-child .n{color:var(--cyan)}
@media (max-width:900px){.flow .wrap{grid-template-columns:minmax(0,1fr)}.xray{grid-template-columns:minmax(0,1fr)}.xray canvas{grid-row:1;grid-column:1;height:380px}.xray .stages{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 10px;padding-top:16px}.xray .st{min-width:0}.xray .st .l{font-size:11px;line-height:1.3}}
@media (max-width:420px){.xray .stages{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 5 · scanner ---------- */
.scan{min-height:100svh;display:grid;align-items:center;overflow:hidden;background:radial-gradient(70% 60% at 70% 50%,#121028 0%,var(--void) 65%)}
.scan .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(24px,4vw,64px);align-items:center}
.scan h2{font-size:clamp(32px,4.2vw,60px)}
.scan .lead{margin-top:18px}
.scan form{margin-top:22px;display:grid;gap:12px;max-width:520px}
.scan .field{display:flex;border:1px solid rgba(255,255,255,.18);border-radius:4px;background:rgba(16,16,25,.7);padding:6px 6px 6px 18px;align-items:center;gap:12px;transition:border-color .3s,box-shadow .3s}
.scan .field:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,232,255,.12)}
.scan .field .pre{position:static;background:none;display:block;font-family:var(--mono);font-size:12px;color:var(--mute)}
.scan input{flex:1;min-width:0;background:none;border:0;padding:12px 0;font-size:16px;color:var(--ink)}
.scan input::placeholder{color:#5c5c70}
.scan .opts{display:flex;flex-wrap:wrap;gap:10px}
.scan .opts button{font-size:13px;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:4px;color:var(--mute);display:inline-flex;gap:10px;align-items:center;transition:border-color .3s,color .3s}
.scan .opts button:hover{border-color:var(--cyan);color:var(--ink)}
.scan .opts button .ar{transition:transform .3s}
.scan .opts button:hover .ar{transform:translateX(3px)}
.scan .demo{font-size:14px;color:var(--mute);margin-top:14px;max-width:52ch;padding-left:14px;border-left:2px solid var(--cyan)}
.scan .demo b{color:var(--ink);font-weight:700}
.scan .err{font-size:13px;color:var(--mag);margin:0}
.scan .field.bad{border-color:var(--mag);box-shadow:0 0 0 3px rgba(255,45,149,.14)}
.orb{position:relative;aspect-ratio:1;max-width:620px;margin-inline:auto;width:100%;isolation:isolate}
.orb::before{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(63,184,255,.16),rgba(63,184,255,0) 70%);filter:blur(28px);z-index:-1}
.orb canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity 1.2s;z-index:1}
.orb.live canvas{opacity:1}
.orb .term{position:absolute;left:0;bottom:-8px;right:0;z-index:2;font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--mute);pointer-events:none;letter-spacing:.02em;text-shadow:0 1px 6px #000,0 0 14px #000}
.orb .term span{display:block;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.orb .term span.on{opacity:1;transform:none}
.orb .term span b{color:var(--cyan);font-weight:500}
.report{display:none;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,40px);align-items:start;margin-top:30px;padding:clamp(20px,2.4vw,30px);border:1px solid var(--line);border-radius:6px;background:rgba(16,16,25,.75);backdrop-filter:blur(10px)}
.report.show{display:grid}
.report .gauge{position:relative;width:150px;height:150px}
.report .gauge svg{width:100%;height:100%;transform:rotate(-90deg)}
.report .gauge .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:8}
.report .gauge .fg{fill:none;stroke:var(--cyan);stroke-width:8;stroke-linecap:round;stroke-dasharray:408;stroke-dashoffset:408;filter:drop-shadow(0 0 8px rgba(34,232,255,.7));transition:stroke-dashoffset 1.6s var(--ease-out)}
.report .gauge .v{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.report .gauge .v b{font-family:var(--sub);font-size:44px;line-height:1;font-variant-numeric:tabular-nums}
.report .gauge .v small{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.report .hd{display:flex;align-items:baseline;gap:10px 14px;flex-wrap:wrap}
.report .hd .dom{overflow-wrap:anywhere;min-width:0}
.report .hd h3{font-family:var(--sub);font-weight:400;font-size:26px;text-transform:uppercase;letter-spacing:.02em}
.report .hd .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 9px;border-radius:3px;background:rgba(255,45,149,.15);color:var(--mag);border:1px solid rgba(255,45,149,.4)}
.report .bars{display:grid;gap:10px;margin-top:16px}
.report .bar{display:grid;grid-template-columns:minmax(80px,110px) minmax(0,1fr) 34px;gap:12px;align-items:center;font-size:13px}
.report .bar i{height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden;display:block}
.report .bar i b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--uv),var(--cyan));transition:width 1.2s var(--ease-out)}
.report .bar.low i b{background:linear-gradient(90deg,#7a1a46,var(--mag))}
.report .bar span:last-child{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;color:var(--mute)}
.report .obs{margin-top:18px;display:grid;gap:8px;font-size:14px;color:var(--mute)}
.report .obs li{padding-left:16px;position:relative}
.report .obs li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--mag)}
.report .act{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.report .fine{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b80;margin-top:10px}
@media (max-width:900px){.scan .wrap{grid-template-columns:minmax(0,1fr)}.scan .field{flex-wrap:wrap;padding:6px}.scan input{flex:1 1 100%;padding:12px}.scan .field .pre{display:none}.scan .field .btn{flex:1 1 100%;justify-content:center}.scan h2{font-size:clamp(32px,9vw,60px)}.orb{max-width:420px;margin-bottom:150px}.orb .term{top:100%;bottom:auto;margin-top:14px}.report{grid-template-columns:1fr}.report .gauge{margin-inline:auto}}

/* ---------- 5.5 · leaks grid ---------- */
.leaks .head{text-align:center;max-width:62ch;margin-inline:auto;display:grid;gap:14px;justify-items:center;margin-bottom:46px}
.leaks h2{font-size:clamp(26px,3.2vw,46px)}
.lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lcard{position:relative;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:26px;min-height:230px;display:grid;grid-template-rows:auto 1fr auto;gap:18px;overflow:hidden;transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s;isolation:isolate}
.lcard::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(122,92,255,.95),rgba(255,45,149,.75));opacity:0;transition:opacity .5s;z-index:-1}
.lcard.lit{border-color:transparent;box-shadow:0 20px 60px rgba(122,92,255,.25)}
.lcard.lit::before{opacity:1}
.lcard .ic{width:40px;height:40px;color:var(--cyan);transition:color .4s}
.lcard.lit .ic{color:#fff}
.lcard .go{position:absolute;right:18px;top:18px;width:28px;height:28px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--mute);transition:transform .4s var(--ease-out),border-color .4s,color .4s}
.lcard.lit .go{border-color:rgba(255,255,255,.5);color:#fff;transform:rotate(45deg)}
.lcard h3{font-family:var(--sub);font-weight:400;font-size:22px;text-transform:uppercase;letter-spacing:.02em;align-self:end}
.lcard p{font-size:14px;color:var(--mute);transition:color .4s}
.lcard.lit p{color:rgba(255,255,255,.88)}
@media (max-width:1000px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.lgrid{grid-template-columns:minmax(0,1fr)}.lcard{min-height:0;gap:12px;padding:22px}}

/* ---------- 6 · start (light) ---------- */
.start .lab{display:inline-block;background:var(--mag);color:#fff;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;border-radius:3px;margin-bottom:22px}
.start h2{font-size:clamp(34px,4.8vw,70px);line-height:.95}
.start h2 .ghost{color:transparent;-webkit-text-stroke:1.5px rgba(17,17,20,.22);display:block}
.start h2 .dot{color:var(--mag);text-shadow:none}
.start .steps{margin-top:clamp(40px,6vw,80px);display:grid;gap:0}
.start .step{display:grid;grid-template-columns:48px minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start;padding-block:clamp(26px,3.4vw,44px);border-top:1px solid var(--paper-line)}
.start .step:last-child{border-bottom:1px solid var(--paper-line)}
.start .step .n{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper-mute);padding-top:.6em}
.start .step h3{font-family:var(--head);font-weight:700;letter-spacing:-.02em;font-size:clamp(20px,2.4vw,32px);line-height:1;color:var(--paper-ink)}
.start .step p{font-size:15px;color:var(--paper-mute);max-width:46ch}
.start .step p b{color:var(--paper-ink);font-weight:500}
@media (max-width:800px){.start .step{grid-template-columns:36px minmax(0,1fr);gap:10px 16px}.start .step p{grid-column:2}}

/* ---------- 7 · machine timeline ---------- */
.machine .head{text-align:center;display:grid;gap:14px;justify-items:center;margin-bottom:clamp(48px,6vw,80px)}
.machine h2{font-size:clamp(26px,3.2vw,46px)}
.tl{position:relative;display:grid;gap:clamp(40px,6vw,88px)}
.tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);transform:translateX(-50%)}
.tl .prog{position:absolute;left:50%;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--uv),var(--mag));transform:translateX(-50%);box-shadow:0 0 12px rgba(255,45,149,.6)}
.tl .row{display:grid;grid-template-columns:1fr 64px 1fr;align-items:center;gap:0}
.tl .node{grid-column:2;justify-self:center;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:var(--sub);font-size:16px;background:radial-gradient(circle at 35% 30%,#ff7ab8,var(--mag) 60%);box-shadow:0 0 0 6px rgba(255,45,149,.15),0 0 30px rgba(255,45,149,.45);color:#fff;position:relative;z-index:1;transform:scale(.6);opacity:.5;transition:transform .6s var(--ease-out),opacity .6s}
.tl .row.in .node{transform:scale(1);opacity:1}
.tl .txt{display:grid;gap:8px;max-width:40ch}
.tl .txt h3{font-family:var(--sub);font-weight:400;font-size:clamp(20px,2vw,26px);text-transform:uppercase;letter-spacing:.02em}
.tl .txt p{font-size:15px;color:var(--mute)}
.tl .ui{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,#15151f,#0f0f17);padding:18px;display:grid;gap:10px;box-shadow:0 0 80px rgba(122,92,255,.08);transition:box-shadow .6s}
.tl .row.in .ui{box-shadow:0 0 90px rgba(122,92,255,.22)}
.tl .ui .ln{height:10px;border-radius:5px;background:rgba(255,255,255,.08)}
.tl .ui .ln.s{width:45%}.tl .ui .ln.m{width:70%}
.tl .ui .chip{display:inline-block;padding:6px 10px;border-radius:4px;background:rgba(34,232,255,.12);color:var(--cyan);font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;justify-self:start;max-width:100%;white-space:normal}
.tl .ui{min-width:0}
.tl .ui .msg{font-size:13px;padding:10px 12px;border-radius:8px;background:rgba(255,255,255,.06);max-width:85%}
.tl .ui .msg.me{background:rgba(255,45,149,.18);justify-self:end}
.tl .ui .msg .tx{display:block}
.tl .ui .msg small{display:block;font-family:var(--mono);font-size:9px;color:var(--mute);margin-top:4px;letter-spacing:.08em}
.tl .row:nth-child(odd) .txt{grid-column:3;padding-left:clamp(16px,3vw,40px)}
.tl .row:nth-child(odd) .ui{grid-column:1;grid-row:1;margin-right:clamp(16px,3vw,40px)}
.tl .row:nth-child(even) .txt{grid-column:1;grid-row:1;justify-self:end;text-align:right;padding-right:clamp(16px,3vw,40px)}
.tl .row:nth-child(even) .ui{grid-column:3;margin-left:clamp(16px,3vw,40px)}
.tl .row:nth-child(even) .txt{justify-items:end}
.machine .phone{border:1px solid var(--line);border-radius:22px;background:#0d0d14;padding:16px;display:grid;gap:8px;max-width:min(360px,100%);margin-inline:auto;width:100%;min-width:0}
.machine .phone .hdr{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid var(--line)}
.machine .phone .m{font-size:13px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.07);max-width:88%;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.machine .phone .m.in{opacity:1;transform:none}
.machine .phone .m.me{background:rgba(34,232,255,.14);justify-self:end}
.machine .phone .m .tx{display:block}
.machine .phone .m small{display:block;font-family:var(--mono);font-size:9px;color:var(--mute);margin-top:4px;letter-spacing:.06em}
.machine .phone .m[dir="rtl"]{text-align:right;font-family:"Segoe UI",Tahoma,var(--body)}
.machine .phone .m[dir="rtl"] small{text-align:right;direction:ltr;unicode-bidi:isolate}
.machine .phone .m.me[dir="rtl"]{justify-self:end}
.machine .phone .m[dir="rtl"]:not(.me){justify-self:start}
@media (max-width:900px){
  .tl::before,.tl .prog{left:20px}
  .tl .row{grid-template-columns:40px minmax(0,1fr)}
  .tl .node{grid-column:1;grid-row:1;width:32px;height:32px;font-size:13px}
  .tl .row .txt,.tl .row:nth-child(even) .txt{grid-column:2;grid-row:1;text-align:left;justify-items:start;padding:0 0 0 12px;justify-self:start}
  .tl .row .ui,.tl .row:nth-child(odd) .ui,.tl .row:nth-child(even) .ui{grid-column:2;grid-row:2;margin:14px 0 0 12px}
  .tl .row > .txt{grid-column:2!important;grid-row:1!important;justify-self:stretch!important;text-align:left!important;justify-items:start!important;padding:0 0 0 12px!important;max-width:none}
  .tl .row > .ui{grid-column:2!important;grid-row:2!important;margin:14px 0 0 12px!important}
}

/* ---------- 8 · before / after ---------- */
.ba h2{font-size:clamp(26px,3.2vw,46px)}
.ba .head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:28px}
.ba .head p{color:var(--mute);max-width:52ch}
.cmp{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;border:1px solid var(--line);user-select:none;touch-action:pan-y;background:#000}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp .after{clip-path:inset(0 0 0 var(--x,50%))}
.cmp .hand{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;background:var(--ink);transform:translateX(-50%);pointer-events:none}
.cmp .hand::before{content:"";position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border-radius:50%;background:var(--void);border:1px solid var(--ink);box-shadow:0 0 24px rgba(34,232,255,.5)}
.cmp .hand::after{content:"◂ ▸";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:.1em;color:var(--ink)}
.cmp .tag{position:absolute;top:16px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(11,11,18,.75);border:1px solid var(--line);backdrop-filter:blur(6px)}
.cmp .tag.b{left:16px}.cmp .tag.a{right:16px;color:var(--cyan);border-color:rgba(34,232,255,.5)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:none}
.cmp input:focus-visible~.hand::before{outline:2px solid var(--cyan);outline-offset:3px}
.cmp .hand{z-index:2}
.cmp .tag{z-index:3}
.ba .fine{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#6b6b80}
@media (max-width:900px){.ba .head{grid-template-columns:minmax(0,1fr)}}

/* ---------- industries (straddle) ---------- */
.ind{padding:0;position:relative;isolation:isolate}
.ind .band{position:absolute;left:0;right:0;z-index:-1}
.ind .band.t{top:0;height:30%;background:var(--void)}
.ind .band.m{top:30%;height:52%;background:var(--paper)}
.ind .band.b{bottom:0;height:18%;background:#000}
.ind .wrap{padding-block:clamp(60px,8vw,110px)}
.ind .head{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-bottom:clamp(30px,4vw,56px)}
.ind h2{font-size:clamp(26px,3.2vw,46px);color:var(--ink)}
.ind .head p{color:var(--mute);max-width:44ch;font-size:15px}
.igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1040px;margin-inline:auto}
.icard{aspect-ratio:1/.92;border-radius:6px;background:#1A1140;color:var(--ink);display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding:24px;position:relative;overflow:hidden;transition:transform .5s var(--ease-out),background .5s,box-shadow .5s;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.icard .ic{width:48px;height:48px;color:var(--cyan);transition:color .4s,transform .5s var(--ease-out)}
.icard h3{font-family:var(--sub);font-weight:400;font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.icard small{font-size:12px;color:var(--mute);max-width:22ch;transition:color .4s}
.icard:hover,.icard.lit{background:var(--mag);transform:translateY(-6px);box-shadow:0 30px 60px rgba(255,45,149,.35)}
.icard:hover .ic,.icard.lit .ic{color:#fff;transform:scale(1.08)}
.icard:hover small,.icard.lit small{color:rgba(255,255,255,.85)}
@media (max-width:800px){.igrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.icard{padding:16px;gap:10px;aspect-ratio:1/.9}.icard h3{font-size:16px}.ind .head{grid-template-columns:minmax(0,1fr)}}
@media (max-width:460px){.igrid{grid-template-columns:1fr 1fr}.icard .ic{width:36px;height:36px}.icard small{display:none}}
@media (max-width:800px){.ind .head{grid-template-columns:minmax(0,1fr)}}

/* ---------- pricing ---------- */
.price{background:radial-gradient(60% 50% at 50% 0%,#15122c 0%,var(--void) 70%)}
.price .head{text-align:center;display:grid;gap:12px;justify-items:center;margin-bottom:clamp(36px,5vw,64px)}
.price h2{font-size:clamp(26px,3.2vw,46px)}
.price h2 .cy{text-shadow:0 0 30px rgba(34,232,255,.5)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.plan{position:relative;border:1px solid var(--line);border-radius:10px;padding:30px 26px;background:var(--card);display:grid;grid-template-rows:auto auto auto 1fr auto;gap:18px;transition:transform .5s var(--ease-out),border-color .4s,box-shadow .5s}
.plan:hover{transform:translateY(-6px);border-color:rgba(122,92,255,.5)}
.plan.feat{border-color:rgba(34,232,255,.55)}
.plan.feat:hover{transform:translateY(-6px)}
.plan .pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--void);border:1px solid rgba(34,232,255,.6);color:var(--cyan);white-space:nowrap}
.plan .nm{display:flex;align-items:center;gap:14px}
.plan .nm h3{font-family:var(--sub);font-weight:400;font-size:26px;text-transform:uppercase;letter-spacing:.03em;color:var(--cyan)}
.plan.p1 .nm h3{color:var(--uv)}.plan.p3 .nm h3{color:var(--mag)}
.plan .who{font-size:14px;color:var(--mute);min-height:2.6em}
.plan .pr{display:grid;gap:8px;justify-items:start}
.plan .pr b{font-family:var(--sub);font-weight:400;font-size:30px;line-height:1}
.plan .pr small{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding:6px 10px;border:1px solid var(--line);border-radius:999px;width:max-content}
.plan ul{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.plan li{display:flex;gap:10px;align-items:flex-start}
.plan li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1px solid rgba(34,232,255,.6);background:radial-gradient(circle,rgba(34,232,255,.5) 0 30%,transparent 32%);margin-top:3px}
.plan .btn{justify-content:center;border-color:rgba(255,255,255,.22);color:var(--ink)}
.plan .btn:hover{border-color:var(--ink)}
.plan.feat .btn{background:var(--mag);border-color:var(--mag);color:#fff;box-shadow:0 0 18px rgba(255,45,149,.45)}
.price .fine{text-align:center;margin-top:24px;font-size:13px;color:var(--mute)}
@media (max-width:1100px){.plan{padding:26px 20px}.plan .nm h3{font-size:22px}}
@media (max-width:900px){.pgrid{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;gap:28px}.plan.feat:hover{transform:none}}

/* ---------- ending + footer ---------- */
.end{min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;position:relative;background:#000}
.end .bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.8}
.end .veil{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(0,0,0,.72),rgba(0,0,0,.35) 60%,rgba(0,0,0,.1) 100%),linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,#000 100%)}
.end .in{position:relative;z-index:1;display:grid;gap:22px;justify-items:center;padding:18vh var(--gutter) 14vh}
.end .k{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.end h2{font-size:clamp(30px,4.4vw,66px);font-weight:800;max-width:16ch;overflow-wrap:anywhere;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.end .act{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.foot{background:#000;border-top:1px solid var(--line);padding-block:clamp(40px,5vw,64px) calc(28px + env(safe-area-inset-bottom,0px))}
.foot .g{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px}
.foot .wm{display:flex;align-items:center;gap:12px;font-family:var(--head);font-weight:700;font-size:22px;letter-spacing:.18em;text-transform:uppercase;line-height:1}
.foot .wm .mark{width:36px;height:36px}
.foot .wm .wmt small{font-size:9px}
.foot .col{display:grid;gap:8px;align-content:start;font-size:14px;color:var(--mute)}
.foot .col h4{font-family:var(--sub);font-weight:400;font-size:16px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-bottom:6px}
.foot .col a{color:var(--mute);min-height:32px;display:inline-flex;align-items:center;width:max-content}
.foot .col a:hover{color:var(--ink)}
.foot .addr{margin-top:16px;display:grid;gap:8px;font-size:14px;color:var(--mute);font-style:normal}
.foot .addr a{color:var(--ink);overflow-wrap:anywhere;min-height:32px;display:inline-flex;align-items:center}
.foot .base{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:#6b6b80}
.foot .base a{color:#8a8a9e;display:inline-block;padding:8px 0;min-height:32px}
@media (max-width:760px){.foot .g{grid-template-columns:1fr 1fr}.foot .g>:first-child{grid-column:1/-1}}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:#000}
.nf .bgi{position:absolute;left:50%;top:50%;width:max(100vw,100svh);height:max(100vw,100svh);transform:translate(-50%,-50%);object-fit:cover;opacity:.55}
.nf .veil{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 50%,rgba(0,0,0,.75),rgba(0,0,0,.3) 70%)}
.nf .in{position:relative;z-index:1;display:grid;gap:18px;justify-items:center;padding:0 var(--gutter)}
.nf .code{font-family:var(--sub);font-size:clamp(80px,16vw,200px);line-height:.9;letter-spacing:.02em;background:linear-gradient(180deg,#fff,#8a8a9e);-webkit-background-clip:text;background-clip:text;color:transparent}
.nf h1{font-size:clamp(24px,3.2vw,42px)}
.nf p{color:var(--mute);max-width:44ch}

/* ---------- motion prefs ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none;filter:none}
  .words .w i{transform:none}
  .stars{display:none}
  .end .bgv{display:none}
}

/* ASTEROID · hero3.css
   Still figure, the name across the centre of the screen, the reference layout arriving on scroll.
   Only transform and opacity animate. No video, no canvas. */
body.h3{background:var(--void)}

.hero3{position:relative;height:200svh;background:var(--void)}
.hero3 .stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate}
.hero3 .field{position:absolute;inset:0;z-index:0;overflow:hidden;background:
  radial-gradient(38% 46% at 50% 68%,rgba(255,45,80,.34),rgba(255,45,80,0) 70%),
  radial-gradient(60% 55% at 50% 100%,rgba(255,45,149,.26),rgba(255,45,149,0) 70%),
  radial-gradient(55% 60% at 18% 30%,rgba(122,92,255,.30),rgba(122,92,255,0) 70%),
  radial-gradient(50% 55% at 84% 22%,rgba(122,92,255,.22),rgba(122,92,255,0) 70%),
  radial-gradient(40% 45% at 92% 70%,rgba(34,232,255,.10),rgba(34,232,255,0) 70%),
  linear-gradient(180deg,#14112A 0%,#0E0C1E 45%,#0B0B12 100%)}
/* a soft violet ring of light behind the head and a slow drifting haze */
.hero3 .field::before{content:"";position:absolute;left:50%;top:38%;width:min(78vh,760px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(122,92,255,.0) 58%,rgba(122,92,255,.22) 70%,rgba(255,45,149,.10) 82%,rgba(0,0,0,0) 100%);filter:blur(18px);animation:h3breathe 9s ease-in-out infinite}
.hero3 .field::after{content:"";position:absolute;inset:-20%;background:
  radial-gradient(30% 30% at 30% 40%,rgba(122,92,255,.16),rgba(122,92,255,0) 70%),
  radial-gradient(28% 28% at 70% 60%,rgba(255,45,149,.12),rgba(255,45,149,0) 70%);filter:blur(40px);animation:h3drift 22s ease-in-out infinite alternate}
.hero3 .stage::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(80% 80% at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%)}
@keyframes h3breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(.98)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes h3drift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(4%,-3%) rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.hero3 .field::before,.hero3 .field::after{animation:none}}

/* vertical word rail on the far left, like the reference */
.hero3 .side{position:absolute;left:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;z-index:3;display:flex;gap:28px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(244,244,248,.42);transition:opacity .4s;z-index:5}
.hero3 .side span{transition:color .3s,text-shadow .3s;cursor:default}
.hero3 .side span:hover{color:var(--cyan);text-shadow:0 0 12px rgba(34,232,255,.8)}

/* the figure: centred, standing on the bottom edge */
.hero3 .figure{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);z-index:1;height:min(96svh,1300px);width:auto;max-width:none;filter:drop-shadow(0 0 48px rgba(255,45,100,.28))}

/* the name, across the middle of the screen, over the figure */
.hero3 .word{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-family:var(--head);font-weight:800;font-size:clamp(56px,15.5vw,250px);line-height:1;letter-spacing:-.035em;color:var(--ink);white-space:nowrap;mix-blend-mode:screen;text-shadow:0 0 60px rgba(0,0,0,.35);will-change:transform,opacity;display:flex}
.hero3 .word i{display:inline-block;font-style:normal;transition:transform .5s cubic-bezier(.16,1,.3,1),color .4s;will-change:transform}
.hero3 .word i.near{color:#fff}
.hero3 .spot{position:absolute;left:0;top:0;width:60vmin;height:60vmin;border-radius:50%;z-index:3;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,255,255,.10),rgba(122,92,255,.08) 40%,rgba(0,0,0,0) 70%);mix-blend-mode:screen;opacity:0;transition:opacity .6s}
.hero3.hover .spot{opacity:1}
.hero3 .field,.hero3 .figure{will-change:transform}

/* the arriving layout */
.hero3 .copy{position:absolute;inset:0;z-index:4;pointer-events:none}
.hero3 .copy > *{opacity:0;will-change:transform,opacity}
.hero3 .meta{position:absolute;left:clamp(56px,7vw,120px);bottom:clamp(64px,12vh,140px);display:grid;gap:22px;transform:translateY(40vh)}
.hero3 .m{display:grid;gap:5px}
.hero3 .m .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.hero3 .m b{font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.hero3 .head{position:absolute;right:var(--gutter);top:50%;transform:translateY(calc(-50% + 40vh));width:min(560px,44vw);display:grid;gap:16px}
.hero3 .head h1{display:grid;justify-items:start;margin:0;line-height:.9}
.hero3 .head .pre-l{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:14px}
.hero3 .head .big{font-family:var(--head);font-weight:800;font-size:clamp(44px,5.6vw,92px);letter-spacing:-.03em;line-height:.88;color:var(--ink)}
.hero3 .head .big.cy{color:var(--cyan);text-shadow:0 0 30px rgba(34,232,255,.35)}
.hero3 .head .tail{font-family:var(--head);font-weight:700;font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;line-height:1.1;margin-top:10px;color:var(--ink)}
.hero3 .head .sup{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.hero3 .head p{font-size:15px;line-height:1.6;color:rgba(244,244,248,.78);margin-top:6px}
.hero3 .head .act{display:flex;gap:12px;flex-wrap:wrap}
.hero3.on .copy{pointer-events:auto}

.hero3 .hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);display:grid;justify-items:center;gap:8px;transition:opacity .5s}
.hero3 .hint i{width:1px;height:36px;background:linear-gradient(180deg,var(--cyan),transparent);animation:drop 1.8s infinite}
.hero3.moved .hint{opacity:0}

.next{padding:var(--sp) 0;min-height:60svh}
.next h2{font-size:clamp(26px,3.2vw,46px);margin-top:14px;max-width:24ch}

@media (max-width:760px){
  .hero3 .side{display:none}
  .hero3 .spot{display:none}
  .hero3 .figure{height:min(74svh,760px)}
  .hero3 .word{font-size:19.5vw;top:44%}
  .hero3 .meta{display:none}
  .hero3 .head{right:var(--gutter);left:var(--gutter);top:auto;bottom:clamp(28px,6vh,60px);width:auto;transform:translateY(40vh)}
  .hero3 .head::before{content:"";position:absolute;inset:-60px -24px -40px;z-index:-1;background:linear-gradient(180deg,rgba(11,11,18,0),rgba(11,11,18,.82) 30%,rgba(11,11,18,.92))}
  .hero3 .head .big{font-size:clamp(40px,12.5vw,60px)}
  .hero3 .head .tail{font-size:17px;margin-top:6px}
  .hero3 .head{gap:12px;bottom:clamp(20px,4vh,40px)}
  .hero3 .head p{font-size:13.5px;line-height:1.45;max-width:none}
  .hero3 .head .pre-l{margin-bottom:8px}
  .hero3 .head p{font-size:14px;max-width:46ch}
}
@media (prefers-reduced-motion:reduce){
  .hero3{height:auto}
  .hero3 .stage{position:relative;height:auto;min-height:100svh;padding:120px 0 40px;display:grid;gap:32px}
  .hero3 .figure,.hero3 .word{position:relative;inset:auto;transform:none;margin:0 auto}
  .hero3 .figure{height:min(70svh,700px)}
  .hero3 .copy{position:relative;inset:auto;pointer-events:auto;display:grid;gap:28px;padding:0 var(--gutter)}
  .hero3 .copy > *,.hero3 .meta,.hero3 .head{position:relative;inset:auto;opacity:1;transform:none;width:auto}
  .hero3 .hint{display:none}
}
.no-js .hero3{height:auto}
.no-js .hero3 .copy{position:relative;inset:auto;pointer-events:auto;padding:24px var(--gutter)}
.no-js .hero3 .copy > *,.no-js .hero3 .meta,.no-js .hero3 .head{position:relative;inset:auto;opacity:1;transform:none;width:auto}

/* header: ring only on this page */
.h3 .nav .wm.ring-only .mark{width:34px;height:34px}

/* the name glitches now and then: two colour-split slices and a jitter on the letters, driven by a .glitch class */
.hero3 .word{position:absolute}
.hero3 .word .gl{position:absolute;left:0;top:0;width:100%;white-space:nowrap;pointer-events:none;opacity:0;mix-blend-mode:screen}
.hero3 .word .gl.a{color:var(--cyan)}
.hero3 .word .gl.b{color:var(--mag)}
.hero3 .word.glitch .gl.a{opacity:.9;animation:h3ga .46s steps(1,end) 1}
.hero3 .word.glitch .gl.b{opacity:.9;animation:h3gb .46s steps(1,end) 1}
.hero3 .word.glitch i{animation:h3gi .46s steps(1,end) 1}
@keyframes h3ga{0%{clip-path:inset(12% 0 70% 0);transform:translate(-10px,0)}20%{clip-path:inset(55% 0 20% 0);transform:translate(8px,-2px)}40%{clip-path:inset(30% 0 48% 0);transform:translate(-14px,1px)}60%{clip-path:inset(78% 0 4% 0);transform:translate(6px,0)}80%{clip-path:inset(2% 0 86% 0);transform:translate(-5px,2px)}100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes h3gb{0%{clip-path:inset(60% 0 22% 0);transform:translate(9px,1px)}20%{clip-path:inset(8% 0 76% 0);transform:translate(-7px,0)}40%{clip-path:inset(66% 0 10% 0);transform:translate(12px,-1px)}60%{clip-path:inset(24% 0 58% 0);transform:translate(-9px,0)}80%{clip-path:inset(88% 0 0 0);transform:translate(4px,-2px)}100%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes h3gi{0%{transform:translate(2px,-1px) skewX(-6deg)}25%{transform:translate(-3px,1px) skewX(4deg)}50%{transform:translate(1px,0) skewX(-2deg);opacity:.85}75%{transform:translate(-1px,2px) skewX(3deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.hero3 .word.glitch .gl,.hero3 .word.glitch i{animation:none;opacity:0}}

/* macro liquid-chrome background behind everything; the glows above it are kept but quieter */
.hero3 .bgp{position:absolute;inset:-3%;z-index:0;display:block}
.hero3 .bgp img{width:100%;height:100%;object-fit:cover;display:block;max-width:none}
.hero3 .field{opacity:.55;mix-blend-mode:screen}
.hero3 .stage::after{background:radial-gradient(80% 80% at 50% 50%,rgba(0,0,0,0) 45%,rgba(0,0,0,.6) 100%),linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 70%,rgba(0,0,0,.5))}
.hero3 .figure{filter:drop-shadow(0 0 60px rgba(0,0,0,.7)) drop-shadow(0 0 40px rgba(255,45,100,.18))}

/* ASTEROID · s02-03.css
   S02 'Struck through': pure typography. The strike and the underline draw themselves as the section enters.
   S03 'Paper and void': HUMAN on warm paper, AI on void, a seam that says 'We use both.' Phone: stacked. Desktop: side by side. */

/* ---------- S02 ---------- */
.s02{position:relative;background:var(--void);color:var(--ink);padding:clamp(88px,14vh,160px) 0 clamp(72px,10vh,120px);overflow:clip}
.s02 .wrap{max-width:1180px}
.s02 .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:22px}
.s02 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,10.4vw,124px);line-height:.96;letter-spacing:-.035em;text-wrap:balance;max-width:13ch}
.s02 h2 .u,.s02 h2 .x{position:relative;display:inline-block;white-space:nowrap}
.s02 h2 .u::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.06em;background:var(--cyan);box-shadow:0 0 18px rgba(34,232,255,.6);transform:scaleX(0);transform-origin:left}
.s02 h2 .x::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.09em;background:var(--mag);box-shadow:0 0 18px rgba(255,45,149,.6);transform:translateY(-50%) scaleX(0) rotate(-1.5deg);transform-origin:left}
.s02.on h2 .u::after{transform:scaleX(1);transition:transform .7s var(--ease-out) .5s}
.s02.on h2 .x::after{transform:translateY(-50%) scaleX(1) rotate(-1.5deg);transition:transform .45s cubic-bezier(.7,0,.3,1) 1.1s}
.s02 .lines{margin-top:clamp(28px,4vh,44px);display:grid;gap:10px;font-family:var(--mono);font-size:clamp(12px,1vw,14px);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,244,248,.62)}
.s02 .lines span{opacity:0;transform:translateX(-10px)}
.s02.on .lines span{opacity:1;transform:none;transition:opacity .5s var(--d),transform .6s var(--ease-out) var(--d)}
.s02 .lines span::before{content:"";display:inline-block;width:18px;height:1px;background:var(--mag);margin-right:14px;vertical-align:middle}
.s02 .body{margin-top:clamp(32px,5vh,56px);display:grid;gap:18px;max-width:62ch;font-size:clamp(16px,1.2vw,19px);line-height:1.6;color:rgba(244,244,248,.82)}
.s02 .body b{color:var(--ink);font-weight:700}
.s02 .last{margin-top:26px;font-family:var(--head);font-weight:700;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em}
@media (min-width:900px){.s02 h2{font-size:clamp(64px,7.4vw,112px)}.s02 .body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:none;align-items:start}.s02 .body .last{grid-column:1/-1;margin-top:8px}}

/* ---------- S03 ---------- */
.s03{position:relative;color:var(--ink);overflow:clip;isolation:isolate}
.s03 .half{position:relative;padding:clamp(72px,11vh,130px) var(--gutter);min-height:min(92svh,760px);display:grid;align-content:center;gap:22px}
.s03 .half .big{font-family:var(--head);font-weight:800;font-size:clamp(70px,24vw,260px);line-height:.85;letter-spacing:-.05em;margin-left:-.04em}
.s03 .half ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:clamp(15px,1.15vw,18px)}
.s03 .half li{opacity:0;transform:translateY(10px)}
.s03.on .half li{opacity:1;transform:none;transition:opacity .5s var(--d),transform .6s var(--ease-out) var(--d)}
.s03 .half .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.s03 .human{background:#F2F1EE;color:#111114;background-image:radial-gradient(60% 40% at 80% 10%,rgba(0,0,0,.05),transparent 70%),repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px)}
.s03 .human .k{color:#6B6B72}
.s03 .human li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#111114;margin-right:12px;vertical-align:middle}
.s03 .ai{background:#06060B;background-image:radial-gradient(50% 50% at 70% 60%,rgba(34,232,255,.10),transparent 70%),radial-gradient(40% 40% at 20% 90%,rgba(122,92,255,.14),transparent 70%)}
.s03 .ai .big{color:var(--cyan);text-shadow:0 0 40px rgba(34,232,255,.55),0 0 120px rgba(34,232,255,.25)}
.s03 .ai .k{color:var(--cyan)}
.s03 .ai li{color:rgba(244,244,248,.86)}
.s03 .ai li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:12px;vertical-align:middle}
/* the seam */
.s03 .seam{display:none;position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);place-items:center;gap:8px;padding:14px 22px;border-radius:999px;background:#0B0B12;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 40px rgba(0,0,0,.5);font-family:var(--head);font-weight:700;font-size:clamp(15px,1.3vw,20px);letter-spacing:-.01em;white-space:nowrap}
.s03 .seam::before,.s03 .seam::after{content:"";position:absolute;left:50%;width:1px;height:40vh;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0))}
.s03 .seam::before{bottom:100%}.s03 .seam::after{top:100%}
/* the person behind the laptop */
.s03 .who{background:var(--void);padding:clamp(40px,6vh,72px) var(--gutter);display:grid;gap:12px;justify-items:center;text-align:center;border-top:1px solid rgba(255,255,255,.08)}
.s03 .who .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mag)}
.s03 .who p{font-family:var(--head);font-weight:700;font-size:clamp(22px,2.6vw,38px);letter-spacing:-.02em;max-width:22ch;text-wrap:balance}
.s03 .who small{font-size:clamp(14px,1.05vw,16px);color:rgba(244,244,248,.7);max-width:60ch;line-height:1.6}
@media (max-width:899px){
  .s03 .half{min-height:0;padding-block:clamp(64px,10vh,96px)}
  .s03 .seam{top:auto;bottom:auto}
  .s03 .halves{position:relative}
  .s03 .halves .seam{display:none}
  .s03 .seam::before,.s03 .seam::after{display:none}
  .s03 .seam{box-shadow:0 0 0 10px #0B0B12,0 10px 40px rgba(0,0,0,.5)}
}
@media (min-width:900px){
  .s03 .halves{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s03 .half{min-height:100svh;padding-inline:clamp(32px,5vw,96px)}
  .s03 .human{padding-right:clamp(48px,7vw,120px)}
  .s03 .ai{padding-left:clamp(48px,7vw,120px)}
  .s03 .half .big{font-size:min(9.4vw,210px)}
}

/* S02 brand colour (user, 8 Oct 2026: "add my brand guideline colours, the purplish blue"): a UV field behind the type with
   magenta and cyan at the edges, the key word in a UV-to-cyan plasma gradient, the closing line in UV. */
.s02{isolation:isolate}
.s02::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 60% at 78% 22%,rgba(122,92,255,.34),transparent 68%),radial-gradient(40% 45% at 8% 92%,rgba(255,45,149,.16),transparent 70%),radial-gradient(35% 40% at 95% 100%,rgba(34,232,255,.12),transparent 70%)}
.s02::after{content:"";position:absolute;left:-10%;right:-10%;top:-10%;height:60%;z-index:-1;background:radial-gradient(50% 50% at 70% 30%,rgba(122,92,255,.22),transparent 70%);filter:blur(40px);pointer-events:none}
.s02 h2 .u{background:linear-gradient(90deg,#9D84FF 0%,var(--uv) 45%,var(--cyan) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.s02 h2 .u::after{background:linear-gradient(90deg,var(--uv),var(--cyan));box-shadow:0 0 18px rgba(122,92,255,.7)}
.s02 .lines span::before{background:var(--uv);box-shadow:0 0 8px rgba(122,92,255,.8)}
.s02 .last{color:#B9A8FF;text-shadow:0 0 28px rgba(122,92,255,.45)}

@media (prefers-reduced-motion:reduce){.s02 h2 .u::after{transform:scaleX(1)}.s02 h2 .x::after{transform:translateY(-50%) scaleX(1) rotate(-1.5deg)}.s02 .lines span,.s03 .half li{opacity:1;transform:none}}
.no-js .s02 h2 .u::after{transform:scaleX(1)}.no-js .s02 h2 .x::after{transform:translateY(-50%) scaleX(1) rotate(-1.5deg)}.no-js .s02 .lines span,.no-js .s03 .half li{opacity:1;transform:none}

/* ASTEROID · s2.css
   Section 2 · Light painting. The plate lives inside .field at its own aspect ratio, so callouts placed in
   percentages land on the same points of the ribbon at every width. Transform and opacity only. */
.s2{position:relative;background:#000;color:var(--ink);overflow:hidden;isolation:isolate;min-height:100svh}
.s2 .in{position:static}
.s2 .head{position:absolute;left:0;right:0;top:clamp(72px,11vh,130px);z-index:3;text-align:center;display:grid;gap:14px;justify-items:center;padding:0 var(--gutter)}
.s2 .head .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.s2 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,5vw,76px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:14ch;text-shadow:0 2px 24px rgba(0,0,0,.7)}
@media (min-width:761px){.s2 h2{font-size:clamp(30px,4vw,58px);max-width:26ch}.s2 .head{top:clamp(64px,9vh,100px)}}
.s2 h2 .am{color:#F2B35B;text-shadow:0 0 30px rgba(255,170,60,.35)}
.s2 .field{position:absolute;left:0;right:0;bottom:0;aspect-ratio:2560/1099;overflow:visible}
.s2 .plate,.s2 .plate img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.s2 .plate img{object-fit:cover;transform:scale(1.04);will-change:transform}
.s2 .lightflow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 1.2s;transform:scale(1.04)}
.s2.flowing .lightflow{opacity:1}
@media (prefers-reduced-motion:reduce){.s2 .lightflow{display:none}}
.s2 .field::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 86%,#000)}
/* callouts: the text block sits above its dot; the dot marks the point on the ribbon */
.s2 .co{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-100%);width:var(--w,min(250px,22vw));display:grid;gap:6px;opacity:0;will-change:transform,opacity;z-index:2}
.s2 .co .dot{order:2;width:10px;height:10px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.12),0 0 18px rgba(255,190,90,.9);margin-top:10px;position:relative;left:50%;transform:translateX(-50%)}
.s2 .co .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(255,190,90,.6);opacity:0}
.s2 .co.lit .dot::after{opacity:1;animation:s2ring 1.8s ease-out infinite}
.s2 .co .ln{order:1;display:block;width:1px;height:clamp(28px,4vw,64px);margin:4px auto 0;background:linear-gradient(0deg,rgba(255,255,255,.75),rgba(255,255,255,0));transform-origin:bottom;transform:scaleY(0)}
.s2 .co b{font-family:var(--head);font-weight:700;font-size:clamp(15px,1.3vw,21px);letter-spacing:-.01em;text-align:center}
.s2 .co p{font-size:clamp(12px,.95vw,14px);line-height:1.5;color:rgba(244,244,248,.78);margin:0;text-align:center}
.s2.on .co{opacity:1;transition:opacity .7s var(--d,0s)}
.s2.on .co .ln{transform:scaleY(1);transition:transform .8s var(--ease-out) calc(var(--d,0s) + .15s)}
.s2 .foot{text-align:center;display:grid;gap:12px;justify-items:center;max-width:62ch;margin:0 auto;padding:0 var(--gutter)}
.s2 .foot h3{font-family:var(--head);font-weight:700;font-size:clamp(20px,1.9vw,28px);letter-spacing:-.02em}
.s2 .foot p{color:rgba(244,244,248,.74);font-size:clamp(15px,1.15vw,17px);line-height:1.6}
.s2 .steps{display:flex;gap:10px 28px;flex-wrap:wrap;justify-content:center;margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.s2 .steps span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#F2B35B;margin-right:10px;vertical-align:middle;box-shadow:0 0 8px rgba(242,179,91,.8)}
@keyframes s2ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(3.2);opacity:0}}
@media (max-width:760px){
  .s2{min-height:0;height:calc(177.8vw + 180px)}
  .s2 .head{top:clamp(56px,9vh,84px)}
  .s2 .field{aspect-ratio:auto;top:0;overflow:hidden}
  .s2 .plate img,.s2 .lightflow{object-fit:contain;object-position:50% 100%}
  .s2 .field{overflow:hidden}
  .s2 .co{left:var(--mx);top:var(--my);width:min(48vw,200px);transform:translate(-5px,-5px);gap:4px}
  .s2 .co .ln{display:none}
  .s2 .co .dot{order:0;left:0;transform:none;margin:0 0 4px}
  .s2 .co b{font-size:15px;text-align:left;margin-left:46px}
  .s2 .co p{font-size:12px;text-align:left;margin-left:46px}
  .s2 .co[data-side="rt"]{transform:translate(-5px,-5px)}
  .s2 .co[data-side="l"]{transform:translate(calc(-100% + 5px),calc(-100% + 5px))}
  .s2 .co[data-side="l"] .dot{order:3;left:auto;margin:4px 0 0 auto}
  .s2 .co[data-side="l"] b,.s2 .co[data-side="l"] p{text-align:right;margin:0 46px 0 0}
  .s2 .co[data-side="lb"]{transform:translate(calc(-100% + 5px),-5px)}
  .s2 .co[data-side="lb"] .dot{left:auto;margin:0 0 4px auto}
  .s2 .co[data-side="lb"] b,.s2 .co[data-side="lb"] p{text-align:right;margin:0 46px 0 0}
}
@media (prefers-reduced-motion:reduce){.s2 .co{opacity:1}.s2 .co .ln{transform:none}.s2 .co.lit .dot::after{animation:none}}
.no-js .s2 .co{opacity:1}.no-js .s2 .co .ln{transform:none}

/* the journey strip and the call to action */
.s2 .journey{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:clamp(28px,5vh,56px) var(--gutter) clamp(28px,5vh,56px);display:grid;gap:16px;justify-items:center;text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7) 35%,rgba(0,0,0,.92))}
.s2 .journey ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;font-family:var(--mono);font-size:clamp(10px,.85vw,12px);letter-spacing:.2em;text-transform:uppercase;color:rgba(244,244,248,.75)}
.s2 .journey li{display:inline-flex;align-items:center}
.s2 .journey li + li::before{content:"→";margin:0 12px;color:#F2B35B}
.s2 .journey li:nth-child(3),.s2 .journey li:nth-child(4){color:#fff}
.s2 .journey p{margin:0;max-width:56ch;font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:rgba(244,244,248,.78)}
@media (max-width:760px){
  .s2{height:auto}
  .s2 .field{position:relative;top:auto;bottom:auto;height:calc(177.8vw + 180px)}
  .s2 .journey{position:relative;background:#000;padding-top:18px}
  .s2 .journey li + li::before{margin:0 8px}
}

/* ASTEROID · s3.css
   Section 3 · Orbital botany, on Plasma. No photo: a void field with ultraviolet, magenta and cyan light,
   the bio-chamber cut out and floating on it. Phone first; from 761px the chamber takes the left, the protocol the right.
   Transform and opacity only. */
.s3{position:relative;background:var(--void);color:var(--ink);overflow:clip;isolation:isolate}
/* the Plasma field */
.s3 .field{position:absolute;inset:0;z-index:0;background:
  radial-gradient(42% 38% at 30% 42%,rgba(122,92,255,.34),rgba(122,92,255,0) 70%),
  radial-gradient(34% 30% at 32% 70%,rgba(255,45,149,.26),rgba(255,45,149,0) 70%),
  radial-gradient(28% 26% at 84% 18%,rgba(34,232,255,.14),rgba(34,232,255,0) 70%),
  radial-gradient(50% 40% at 70% 90%,rgba(122,92,255,.16),rgba(122,92,255,0) 70%),
  linear-gradient(180deg,#0B0B12,#120F26 50%,#0B0B12)}
.s3 .field::before{content:"";position:absolute;inset:-20%;background:radial-gradient(30% 30% at 40% 50%,rgba(122,92,255,.18),rgba(122,92,255,0) 70%),radial-gradient(26% 26% at 60% 40%,rgba(255,45,149,.12),rgba(255,45,149,0) 70%);filter:blur(40px);animation:s3drift 24s ease-in-out infinite alternate}
.s3 .field::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 80% at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.55) 100%)}
/* fine grid, like a lab readout, very faint */
.s3 .grid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(60% 60% at 35% 50%,#000 20%,transparent 100%);-webkit-mask-image:radial-gradient(60% 60% at 35% 50%,#000 20%,transparent 100%)}

.s3 .in{position:relative;z-index:1;display:grid;gap:0}
.s3 .visual{position:relative;width:100%;height:min(170vw,720px);overflow:visible}
.s3 .chamber{position:absolute;left:50%;top:9%;height:86%;width:auto;max-width:none;transform:translateX(-50%);transform-origin:50% 50%;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) drop-shadow(0 0 50px rgba(179,136,255,.35));will-change:transform;animation:s3float 7s ease-in-out infinite}
/* a soft violet pool under the chamber and a halo behind the lamp */
.s3 .visual::before{content:"";position:absolute;left:50%;top:50%;width:min(90vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(179,136,255,.28),rgba(122,92,255,.12) 45%,rgba(0,0,0,0) 72%);filter:blur(10px);z-index:-1;animation:s3breathe 7s ease-in-out infinite}
.s3 .visual::after{content:"";position:absolute;left:50%;bottom:-10px;width:min(78vw,420px);height:34px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(179,136,255,.45),rgba(179,136,255,0));filter:blur(8px)}
.s3 .tag{position:absolute;left:var(--gutter);top:clamp(20px,4vh,40px);z-index:2;display:grid;gap:6px;max-width:48%}
.s3 .tag .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.s3 .tag .r{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,248,.55)}
.s3 .tag .r i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#7CFF9A;box-shadow:0 0 8px #7CFF9A;margin-right:8px;vertical-align:middle;animation:s3blink 2.4s infinite}
.s3 .copy{position:relative;z-index:2;padding:clamp(28px,5vh,48px) var(--gutter) clamp(56px,8vh,96px);display:grid;gap:22px}
.s3 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,9.4vw,76px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:12ch}
.s3 .lead{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(244,244,248,.8);max-width:52ch}
.s3 ol{list-style:none;margin:8px 0 0;padding:0;display:grid;border-top:1px solid rgba(255,255,255,.12)}
.s3 li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.12);opacity:0;transform:translateY(16px);will-change:transform,opacity}
.s3.on li{opacity:1;transform:none;transition:opacity .6s var(--d,0s),transform .7s var(--ease-out) var(--d,0s)}
.s3 li .n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cyan);padding-top:6px}
.s3 li b{display:block;font-family:var(--head);font-weight:700;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em;margin-bottom:4px}
.s3 li p{margin:0;font-size:14px;line-height:1.55;color:rgba(244,244,248,.76)}
.s3 li.live b::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mag);box-shadow:0 0 10px var(--mag);margin-left:10px;vertical-align:middle}
.s3 .act{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
/* readouts beside the chamber (desktop only) */
.s3 .ro{position:absolute;left:var(--x);top:var(--y);z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,248,.7);display:none;align-items:center;gap:10px;opacity:0;white-space:nowrap}
.s3 .ro::before{content:"";width:28px;height:1px;background:rgba(255,255,255,.5)}
.s3 .ro i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.s3.on .ro{opacity:1;transition:opacity .8s var(--d,0s)}
@keyframes s3blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes s3float{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
@keyframes s3floatC{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 12px))}}
@keyframes s3breathe{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
@keyframes s3drift{0%{transform:translate(0,0)}100%{transform:translate(4%,-3%)}}
@media (min-width:761px){
  .s3 .in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:100svh}
  .s3 .visual{position:sticky;top:72px;align-self:start;height:calc(100svh - 72px);min-height:0}
  .s3 .chamber{top:50%;height:68%;max-width:none;transform:translate(-50%,-50%);animation-name:s3floatC}
  .s3 .visual::before{top:42%;width:min(44vw,640px)}
  .s3 .visual::after{display:none}
  .s3 .copy{padding:clamp(80px,12vh,140px) var(--gutter) clamp(80px,12vh,140px) clamp(16px,2vw,40px)}
  .s3 h2{font-size:clamp(36px,4.2vw,68px)}
  .s3 .ro{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){.s3 li,.s3 .ro{opacity:1;transform:none}.s3 .tag .r i,.s3 .chamber,.s3 .visual::before,.s3 .field::before{animation:none}}
.no-js .s3 li,.no-js .s3 .ro{opacity:1;transform:none}

/* ASTEROID · s4.css
   Section 4 · Six doors. One corridor plate; six light spills that flicker on their own rhythms; a label per door.
   Phone first: tall plate, labels stacked below. Desktop: wide plate, copy on the dark right third. Transform/opacity only. */
.s4{position:relative;background:#000;color:var(--ink);overflow:hidden;isolation:isolate}
.s4 .field{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden}
.s4 .plate,.s4 .plate img{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.s4 .plate img{object-fit:cover}
.s4 .field::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,#000 100%)}
/* each door's light is dimmed, not painted: a black layer shaped to the opening, the spill and the reflection,
   blended with multiply, so when it flickers the room light, the strip under the door and the floor all dim together */
.s4 .door{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none;mix-blend-mode:multiply;will-change:opacity;opacity:0;
  background:radial-gradient(60% 50% at 50% 42%,#000 0%,#000 55%,rgba(0,0,0,.85) 72%,rgba(0,0,0,0) 100%);
  animation:s4flk var(--dur,6.4s) steps(1,end) infinite var(--delay,0s)}
.s4 .door.dark{animation:s4out 1.1s steps(1,end) 1}
/* three rooms drift in colour: a hue layer that comes and goes slowly */
.s4 .tint{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);pointer-events:none;mix-blend-mode:color;will-change:opacity;opacity:0;background:radial-gradient(60% 50% at 50% 42%,var(--t) 0%,var(--t) 60%,transparent 100%);animation:s4hue var(--hdur,11s) ease-in-out infinite var(--hdelay,0s)}
.s4 .caps{display:none}
/* captions (kept in markup for a later layout, hidden for now) */
.s4 .caps{position:absolute;inset:0;pointer-events:none}
.s4 .cap{position:absolute;left:var(--cx);top:var(--cy);transform:translate(var(--tx,0),-50%);display:grid;gap:3px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,248,.55);white-space:nowrap;transition:color .25s}
.s4 .cap b{font-family:var(--head);font-weight:700;font-size:clamp(13px,1.05vw,16px);letter-spacing:0;text-transform:none;color:rgba(244,244,248,.82);transition:color .25s,text-shadow .25s}
.s4 .cap.lit,.s4 .cap.lit b{color:#fff}
.s4 .cap.lit b{text-shadow:0 0 14px var(--c,#fff)}
.s4 .cap::before{content:"";position:absolute;left:-18px;top:50%;width:10px;height:1px;background:rgba(255,255,255,.4)}
.s4 .cap[data-al="r"]{text-align:right}
.s4 .cap[data-al="r"]::before{left:auto;right:-18px}
/* copy */
.s4 .copy{position:relative;z-index:2;padding:clamp(28px,5vh,48px) var(--gutter) clamp(56px,8vh,96px);display:grid;gap:18px}
.s4 .copy .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.s4 h2{font-family:var(--head);font-weight:800;font-size:clamp(36px,9.6vw,76px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:12ch}
.s4 .lead{font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:rgba(244,244,248,.8);max-width:50ch}
.s4 ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.s4 li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(244,244,248,.78);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.s4 li i{width:8px;height:8px;border-radius:50%;background:var(--c,#fff);box-shadow:0 0 10px var(--c,#fff);flex:none;opacity:.55;transition:opacity .25s}
.s4 li.lit i{opacity:1}
.s4 .act{margin-top:8px}
@keyframes s4flk{0%,100%{opacity:0}3%{opacity:.35}3.6%{opacity:0}4.1%{opacity:.5}4.6%{opacity:0}19%{opacity:.18}19.5%{opacity:0}33%{opacity:.6}33.5%{opacity:.1}34%{opacity:.7}34.8%{opacity:0}51%{opacity:.22}51.4%{opacity:0}68%{opacity:.45}68.6%{opacity:0}69.2%{opacity:.3}69.8%{opacity:0}86%{opacity:.15}86.5%{opacity:0}}
@keyframes s4out{0%{opacity:.92}28%{opacity:.92}31%{opacity:.2}35%{opacity:.9}52%{opacity:.9}55%{opacity:0}60%{opacity:.75}66%{opacity:0}100%{opacity:0}}
@keyframes s4hue{0%,100%{opacity:0}35%{opacity:.55}60%{opacity:.4}}
@media (max-width:760px){
  .s4 .door,.s4 .tint{left:var(--mx);top:var(--my);width:var(--mw);height:var(--mh)}
  .s4 .copy{margin-top:-14vh}
}
@media (min-width:761px){
  .s4 .in{display:grid;grid-template-columns:minmax(0,1fr);min-height:100svh}
  .s4 .field{position:absolute;inset:0;aspect-ratio:auto;height:100%}
  .s4 .field::after{background:linear-gradient(90deg,rgba(0,0,0,0) 48%,rgba(0,0,0,.82) 66%,#000 82%),linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0) 20%,rgba(0,0,0,0) 85%,#000)}
  .s4 .copy{position:relative;z-index:2;min-height:100svh;align-content:center;margin-left:auto;width:min(40%,520px);padding:clamp(80px,12vh,140px) var(--gutter) clamp(80px,12vh,140px) 0}
  .s4 h2{font-size:clamp(36px,4.2vw,68px)}
}
@media (prefers-reduced-motion:reduce){.s4 .door,.s4 .tint{animation:none;opacity:0}}

/* names on the doors. Desktop: on the wall above each door, scaled with the perspective, a tick down to the frame.
   Phone: a numbered marker on each door, matched to the numbered list under the corridor. */
.s4 .caps{display:block}
.s4 .cap{position:absolute;left:var(--cx);top:var(--cy);transform:none;display:grid;gap:2px;font-family:var(--mono);font-size:calc(10px * var(--s,1));letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,248,.5);white-space:nowrap;text-align:left;transition:color .25s}
.s4 .cap::before{display:none}
.s4 .cap::after{content:"";position:absolute;left:1px;top:100%;width:1px;height:var(--tick,32px);background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0))}
.s4 .cap b{font-family:var(--head);font-weight:700;font-size:calc(15px * var(--s,1));letter-spacing:0;text-transform:none;color:rgba(244,244,248,.86);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.s4 .cap .no{display:none}
.s4 .cap.lit b{color:#fff;text-shadow:0 0 16px var(--c,#fff)}
.s4 li .no{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--cyan);min-width:22px}
@media (max-width:760px){
  .s4 .cap{left:var(--mcx);top:var(--mcy);transform:translate(-50%,-50%);gap:0}
  .s4 .cap::after,.s4 .cap b,.s4 .cap .k{display:none}
  .s4 .cap .no{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.5);color:#fff;font-size:9px;letter-spacing:.08em;transition:border-color .25s,box-shadow .25s}
  .s4 .cap.lit .no{border-color:var(--mag);box-shadow:0 0 12px rgba(255,45,149,.7)}
  .s4 li .no{display:inline-block}
  .s4 li i{display:none}
}

/* the four groups */
.s4 ul.groups{grid-template-columns:minmax(0,1fr);gap:0}
.s4 ul.groups li{align-items:flex-start;gap:12px;padding:14px 0}
.s4 ul.groups li div{display:grid;gap:3px}
.s4 ul.groups li b{font-family:var(--head);font-weight:700;font-size:clamp(16px,1.3vw,19px);letter-spacing:-.01em;color:var(--ink)}
.s4 ul.groups li small{font-size:13.5px;line-height:1.5;color:rgba(244,244,248,.7)}
.s4 ul.groups li i{margin-top:7px}

/* phone (user, 8 Oct 2026): dots on the doors instead of numbers, the door names under the plate like the desktop labels,
   and the four groups get their coloured dots, not 01 02 04 06 */
.s4 .legend{display:none;list-style:none;margin:0;padding:0}
@media (max-width:760px){
  .s4 .cap .no{width:12px;height:12px;border:0;background:var(--c,#fff);box-shadow:0 0 12px var(--c,#fff);font-size:0;opacity:.7}
  .s4 .cap.lit .no{opacity:1;box-shadow:0 0 18px var(--c,#fff),0 0 5px #fff}
  .s4 li .no{display:none}
  .s4 ul.groups li i{display:block}
  .s4 .legend{display:flex;flex-wrap:wrap;gap:8px 16px;position:relative;z-index:2;margin-top:-13vh;padding:0 var(--gutter)}
  .s4 .legend li{display:flex;align-items:center;gap:7px;font-family:var(--head);font-weight:700;font-size:12.5px;color:rgba(244,244,248,.7);padding:0;border:0;transition:color .25s}
  .s4 .legend li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 8px var(--c);opacity:.6;transition:opacity .25s}
  .s4 .legend li.lit{color:#fff}
  .s4 .legend li.lit::before{opacity:1}
  .s4 .copy{margin-top:0;padding-top:18px}
}

/* ASTEROID · s06-14.css
   S06 ticker, S08 two bars, S10 backlit tiles (S05, S09, S11, S13, S14 appended as they are built). Phone first. */

/* ---------- S06 ticker ---------- */
@media (min-width:900px){
}

/* ---------- S08 two bars ---------- */

/* ---------- S10 backlit tiles ---------- */

/* ---------- S09 floating screens ---------- */
/* phone first: a vertical stack of cards */
/* laptops: screens float in space, tilted, with a little depth */
@media (min-width:1000px){
}

/* S09 social strip: a horizontal scroll of real profile screenshots */

/* ASTEROID · s05-14.css
   S05 folding screen, S11 dot-matrix map, S13 three doors, S14 FAQ. Phone first. */

/* ---------- S05 folding screen ---------- */
@media (min-width:900px){
}

/* ---------- S11 dot-matrix map ---------- */

/* ---------- S13 three doors ---------- */

/* ---------- S14 FAQ ---------- */
.s14{position:relative;background:#000;color:var(--ink);padding:clamp(72px,11vh,130px) 0;overflow:clip;isolation:isolate}
.s14 .wall,.s14 .wall img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;z-index:-1}
.s14 .wall::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 55%,rgba(0,0,0,.82),rgba(0,0,0,.45) 60%,rgba(0,0,0,.25) 100%),linear-gradient(180deg,#000,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 85%,#000)}
.s14 .head{display:grid;gap:14px;margin-bottom:clamp(24px,4vh,40px);text-align:center;justify-items:center}
.s14 .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.s14 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,5.6vw,72px);line-height:.98;letter-spacing:-.03em;text-wrap:balance;max-width:14ch;text-shadow:0 2px 30px rgba(0,0,0,.8)}
.s14 .qs{max-width:820px;margin:0 auto;display:grid;gap:10px}
.s14 details{border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(8,8,14,.8);backdrop-filter:blur(8px);overflow:hidden;transition:border-color .3s}
.s14 details[open]{border-color:rgba(34,232,255,.55)}
.s14 summary{list-style:none;cursor:pointer;padding:18px 54px 18px 20px;font-family:var(--head);font-weight:700;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.01em;position:relative;min-height:44px}
.s14 summary::-webkit-details-marker{display:none}
.s14 summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:20px;color:var(--cyan);transition:transform .3s}
.s14 details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.s14 details p{margin:0;padding:0 20px 20px;font-size:15px;line-height:1.6;color:rgba(244,244,248,.82);max-width:62ch}
/* no-JS fallbacks: everything that waits for a scroll trigger is simply shown */
.no-js .s08 .bar{transform:none}

/* ASTEROID · s05.css
   S05 'What we transform': headline and lead, then the eight areas as a clean grid, each with its number, name and one
   line, a thin rule above each coloured along the spectrum from cyan to magenta. One column on phones, two on tablets,
   four on desktop (two rows), one screen tall on desktop. */

.s05{position:relative;background:var(--void);color:var(--ink);padding:clamp(64px,10vh,110px) 0 clamp(56px,8vh,90px);overflow:clip;isolation:isolate}
.s05::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 40% at 85% 15%,rgba(255,45,149,.08),transparent 70%),radial-gradient(40% 40% at 10% 90%,rgba(34,232,255,.08),transparent 70%)}
.s05 .head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(28px,5vh,52px)}
.s05 .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.s05 h2{font-family:var(--head);font-weight:800;font-size:clamp(32px,5.4vw,66px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0}
.s05 .lead{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(244,244,248,.78);max-width:56ch}
.s05 .areas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:18px 24px}
.s05 .areas li{display:grid;gap:8px;padding-top:16px;border-top:2px solid var(--c,var(--cyan));min-width:0;position:relative}
.s05 .areas li::before{content:"";position:absolute;left:0;top:-2px;width:34px;height:2px;background:#fff;box-shadow:0 0 12px var(--c)}
.s05 .areas .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--c,var(--cyan))}
.s05 .areas b{font-family:var(--head);font-weight:700;font-size:clamp(17px,1.35vw,20px);letter-spacing:-.015em;line-height:1.15}
.s05 .areas p{margin:0;font-size:clamp(13.5px,.98vw,15px);line-height:1.55;color:rgba(244,244,248,.72)}
.s05 .areas li:nth-child(1){--c:#22E8FF}.s05 .areas li:nth-child(2){--c:#35C4FF}.s05 .areas li:nth-child(3){--c:#4F8DFF}.s05 .areas li:nth-child(4){--c:#7A5CFF}
.s05 .areas li:nth-child(5){--c:#A64DFF}.s05 .areas li:nth-child(6){--c:#D23BE0}.s05 .areas li:nth-child(7){--c:#FF2D95}.s05 .areas li:nth-child(8){--c:#FF4D7A}
@media (min-width:600px){.s05 .areas{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .s05{height:100svh;min-height:0;display:grid;align-content:center;padding:clamp(40px,6vh,64px) 0}
  .s05 .head{margin-bottom:clamp(22px,3.5vh,40px)}
  .s05 .areas{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,4vh,40px) clamp(20px,2.4vw,36px)}
}
@media (min-width:1000px) and (max-height:820px){.s05 h2{font-size:clamp(30px,3.8vw,48px)}.s05 .lead{font-size:14px}.s05 .areas p{font-size:13px}}

/* ASTEROID · s11.css
   S11 'Global': the montage film fills the section, a dark veil over it, the words centred in the middle:
   headline, the seven-countries line, the countries. Video plays only while in view (motion.js), hidden under reduced motion. */

.s11{position:relative;background:#000;color:var(--ink);min-height:100svh;display:grid;align-items:center;overflow:clip;isolation:isolate;padding:clamp(80px,12vh,140px) 0}
.s11 .film{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.1)}
.s11 .veil{position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%,rgba(0,0,0,.55),rgba(0,0,0,.78) 70%,rgba(0,0,0,.9)),linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 25%,rgba(0,0,0,0) 75%,rgba(0,0,0,.7))}
.s11 .mid{display:grid;gap:18px;justify-items:center;text-align:center}
.s11 .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.s11 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,6.4vw,84px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0;max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.8)}
.s11 .count{margin:6px 0 0;font-size:clamp(16px,1.4vw,21px);color:rgba(244,244,248,.86);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;justify-content:center}
.s11 .count b{font-family:var(--head);font-weight:800;font-size:clamp(44px,5vw,72px);line-height:1;letter-spacing:-.04em;color:var(--ink);text-shadow:0 0 30px rgba(34,232,255,.45)}
.s11 .places{list-style:none;margin:clamp(16px,3vh,28px) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,244,248,.72)}
.s11 .places li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);margin-right:10px;vertical-align:middle}
@media (min-width:1000px){.s11{height:100svh;min-height:0;padding:0}}
@media (prefers-reduced-motion:reduce){.s11 .film{display:none}.s11{background:#000 url(../assets/img/end.webp) center/cover no-repeat}}

/* ---------- REEL: the showreel after the hero, the whole screen. 16:9 cut on desktop, 9:16 cut on phones ---------- */
.reel{position:relative;background:#000;height:100svh;overflow:clip;isolation:isolate}
.reel .film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
@media (min-width:761px){.reel .film.d{display:block}}
@media (max-width:760px){.reel .film.m{display:block}}
@media (prefers-reduced-motion:reduce){.reel .film{display:none!important}.reel{background:#000 url(../assets/img/reel-poster-1.webp) center/cover no-repeat}}

/* ASTEROID · s06.css
   S06 'The terminal', matched to the chosen render: headline with the last words in a cyan-to-magenta run, a dark terminal
   window with three dots and a title, eight folders as a tree in four columns (two on phones), a prompt line with a
   blinking cursor. js/term.js types it all out when the section arrives. */

.s06{position:relative;background:var(--void);color:var(--ink);padding:clamp(64px,10vh,110px) 0 clamp(56px,8vh,90px);overflow:clip;isolation:isolate}
.s06::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 50% at 8% 60%,rgba(34,232,255,.10),transparent 70%),radial-gradient(35% 45% at 95% 20%,rgba(255,45,149,.10),transparent 70%)}
.s06 .k{font-family:var(--mono);font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);display:block;margin-bottom:18px}
.s06 h2{font-family:var(--head);font-weight:800;font-size:clamp(32px,5.2vw,64px);line-height:1;letter-spacing:-.035em;text-wrap:balance;margin:0 0 clamp(22px,4vh,40px);max-width:16ch}
.s06 h2 .gr{background:linear-gradient(90deg,#fff 0%,var(--cyan) 35%,var(--cyan) 55%,var(--mag) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.s06 .term{position:relative;border-radius:14px;background:#0E0E17;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(34,232,255,.06),inset 0 1px 0 rgba(255,255,255,.06);font-family:var(--mono);font-size:clamp(11px,.95vw,13.5px);line-height:1.55;color:rgba(244,244,248,.86);overflow:hidden}
.s06 .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.025)}
.s06 .bar i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.s06 .bar i:nth-child(2){background:#febc2e}.s06 .bar i:nth-child(3){background:#28c840}
.s06 .bar span{margin-left:8px;color:var(--cyan);font-size:.92em;letter-spacing:.02em}
.s06 .tree{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px;padding:18px 18px 8px}
.s06 .dir{min-width:0}
.s06 .dir b{display:block;min-height:1.55em;font-weight:500;color:var(--cyan);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s06 .dir b::before{content:"\25A0  ";color:var(--cyan);opacity:.7}
.s06 .dir ul{list-style:none;margin:0;padding:0}
.s06 .dir li{padding-left:1.2em;position:relative;min-height:1.55em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(244,244,248,.78)}
.s06 .dir li::before{content:"\2514\2500";position:absolute;left:0;color:rgba(244,244,248,.32)}
.s06 .dir li:not(:last-child)::before{content:"\251C\2500"}
.s06 .prompt{margin:0;min-height:calc(1.55em + 32px);padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.06);display:flex;flex-wrap:wrap;align-items:center;gap:0 .5em;color:var(--ink)}
.s06 .prompt .ps{color:var(--cyan)}
.s06 .prompt a{color:var(--mag);text-decoration:none;border-bottom:1px solid rgba(255,45,149,.6)}
.s06 .prompt .cur{display:inline-block;width:.6em;height:1.1em;background:var(--cyan);vertical-align:-.15em;animation:s06blink 1s steps(1,end) infinite}
@keyframes s06blink{50%{opacity:0}}
/* typing: everything starts hidden, term.js reveals it character by character */
.js .s06 .term.typing .dir b,.js .s06 .term.typing .dir li,.js .s06 .term.typing .prompt .say{visibility:hidden}
.js .s06 .term.typing .dir b.typed,.js .s06 .term.typing .dir li.typed,.js .s06 .term.typing .prompt .say.typed{visibility:visible}
.js .s06 .term.typing .prompt .cur{display:none}
.js .s06 .term.typing.done .prompt .cur{display:inline-block}
@media (min-width:760px){.s06 .tree{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 24px;padding:22px 22px 10px}}
@media (min-width:1000px){.s06{padding:clamp(48px,7vh,72px) 0 clamp(36px,5vh,56px)}.s06 h2{margin-bottom:clamp(18px,3vh,30px)}}
@media (prefers-reduced-motion:reduce){.s06 .prompt .cur{animation:none}.js .s06 .term.typing .dir b,.js .s06 .term.typing .dir li,.js .s06 .term.typing .prompt .say{visibility:visible}}

/* ASTEROID · s08.css
   S08 'The waiting room': the chosen render as a full-bleed plate (its colours untouched), the headline set in type over the
   wall where the render had it, a slow pulse on the lit chair and a flicker on the LED sign. Phones: copy above the plate,
   plate cropped to the lit chair, the sign and the dispenser. Transform and opacity only. */

.s08{position:relative;background:#07070C;color:var(--ink);overflow:clip;isolation:isolate;padding-bottom:clamp(56px,8vh,96px)}
.s08 .room{position:relative;width:100%}
.s08 .plate,.s08 .plate img{display:block;width:100%;height:auto}
.s08 .plate{position:relative;aspect-ratio:2688/1520;overflow:hidden;background:#07070C}
.s08 .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.s08 .room::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(180deg,rgba(7,7,12,0),#07070C);pointer-events:none}
/* light that lives in the plate: pulse and flicker painted with blend modes, placed in plate percent */
.s08 .chairglow,.s08 .ledglow{position:absolute;pointer-events:none;mix-blend-mode:screen;border-radius:50%}
.s08 .chairglow{left:var(--cx,49%);top:var(--cy,58%);width:22%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(34,232,255,.42),rgba(34,232,255,0));animation:s08pulse 4.2s ease-in-out infinite alternate}
.s08 .ledglow{left:var(--lx,77%);top:var(--ly,17%);width:12%;aspect-ratio:2/1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,45,70,.38),rgba(255,45,70,0));animation:s08led 3s steps(1,end) infinite}
@keyframes s08pulse{from{opacity:.35}to{opacity:1}}
@keyframes s08led{0%,88%{opacity:.9}90%{opacity:.4}92%{opacity:.95}95%{opacity:.5}97%,100%{opacity:.9}}
.s08 .copy{display:grid;gap:14px;max-width:46ch}
.s08 .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:14px}
.s08 .k i{display:inline-block;width:44px;height:1px;background:var(--cyan)}
.s08 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,4.6vw,66px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0}
.s08 .copy p{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.5;color:rgba(244,244,248,.86);max-width:30ch}
.s08 .body{display:grid;gap:16px;max-width:62ch;margin-top:clamp(28px,5vh,56px)}
.s08 .body p{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(244,244,248,.78)}
.s08 .ticket{list-style:none;margin:clamp(28px,5vh,48px) 0 0;padding:0;display:grid;gap:14px;grid-template-columns:1fr}
.s08 .ticket li{display:grid;gap:4px;padding:18px 20px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(244,244,248,.03);min-width:0}
.s08 .ticket .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,244,248,.55)}
.s08 .ticket b{font-family:var(--mono);font-weight:500;font-size:clamp(34px,4vw,54px);letter-spacing:.08em;line-height:1;color:#ff4a5a;text-shadow:0 0 18px rgba(255,60,80,.6)}
.s08 .ticket small{font-size:13px;color:rgba(244,244,248,.7)}
.s08 .ticket .lit{border-color:rgba(34,232,255,.5);box-shadow:0 0 30px rgba(34,232,255,.15),inset 0 0 30px rgba(34,232,255,.06)}
.s08 .ticket .lit b{color:var(--cyan);text-shadow:0 0 18px rgba(34,232,255,.7)}
.s08 .ticket .lit .lbl{color:var(--cyan)}
/* phones: copy first, then the plate cropped to the chair, sign and dispenser */
@media (max-width:760px){
  /* phone: copy first, then the two-chair portrait plate (made for phones), whole picture, nothing cropped */
  .s08 .room{display:grid}
  .s08 .copy{padding:clamp(64px,10vh,96px) var(--gutter) 22px}
  .s08 .plate{aspect-ratio:4/5}
  .s08 .plate img{object-fit:cover;object-position:50% 50%}
  .s08 .chairglow{--cx:64%;--cy:60%;width:46%}
  .s08 .ledglow{--lx:69%;--ly:13%;width:30%}
  .s08 .room::after{height:10%}
}
/* wide: the copy sits on the wall where the render put it */
@media (min-width:761px){
  .s08 .copy{position:absolute;z-index:2;left:18%;top:11%;width:44%}
  .s08 .ticket{grid-template-columns:1fr 1fr;max-width:620px}
  .s08 .body{margin-top:clamp(20px,3vh,36px)}
}
@media (min-width:1500px){.s08 h2{font-size:clamp(44px,3.6vw,72px)}}
@media (prefers-reduced-motion:reduce){.s08 .chairglow,.s08 .ledglow{animation:none}}

/* ASTEROID · work.css
   S09 'Floating screens', matched to the chosen render: copy on the left, five floating devices with mono labels on the right,
   a glowing arc bottom-left. Then the full Projects & Proof deck: numbers, seven cases, the rest, social, the deck itself.
   Phone first: copy, then a tighter arrangement of the same five devices; cases stack. Transform and opacity only. */

.s09{position:relative;background:var(--void);color:var(--ink);padding:clamp(80px,12vh,140px) 0 clamp(64px,9vh,110px);overflow:clip;isolation:isolate}
.s09::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 45% at 72% 30%,rgba(122,92,255,.14),transparent 70%),radial-gradient(40% 40% at 30% 85%,rgba(34,232,255,.08),transparent 70%)}
.s09 .arc{position:absolute;z-index:-1;left:-34vw;bottom:-46vw;width:70vw;height:70vw;border-radius:50%;border:2px solid transparent;background:linear-gradient(var(--void),var(--void)) padding-box,linear-gradient(60deg,rgba(34,232,255,0) 20%,var(--cyan) 50%,var(--mag) 75%,rgba(255,45,149,0) 95%) border-box;opacity:.9;filter:drop-shadow(0 0 18px rgba(34,232,255,.35))}
.s09 .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}

/* ---- the floating screens ---- */
.s09 .float{display:grid;gap:36px;align-items:center}
.s09 .copy{display:grid;gap:18px;justify-items:start}
.s09 h2{font-family:var(--head);font-weight:800;font-size:clamp(38px,5.4vw,78px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0;max-width:11ch}
.s09 .intro{font-size:clamp(16px,1.2vw,19px);line-height:1.55;color:rgba(244,244,248,.78);max-width:36ch;margin:0}
.btn-g{display:inline-flex;align-items:center;gap:14px;padding:15px 28px;border-radius:999px;border:1.5px solid transparent;background:linear-gradient(var(--void),var(--void)) padding-box,linear-gradient(90deg,var(--cyan),var(--mag)) border-box;color:var(--ink);font-weight:600;font-size:15px;text-decoration:none;box-shadow:0 0 24px rgba(34,232,255,.12),0 0 40px rgba(255,45,149,.1);transition:transform .35s var(--ease-out),box-shadow .35s}
.btn-g:hover,.btn-g:focus-visible{transform:translateY(-2px);box-shadow:0 0 30px rgba(34,232,255,.3),0 0 60px rgba(255,45,149,.22);outline:none}
.btn-g .ar{font-size:18px;line-height:1;color:var(--cyan)}
.s09 .stage{position:relative;width:100%;aspect-ratio:.92;margin-top:8px;overflow:visible}
.s09 .dev{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:perspective(1600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) rotate(var(--rz,0deg));transform-style:preserve-3d;filter:drop-shadow(0 30px 40px rgba(0,0,0,.65))}
.s09 .dev > *{animation:s09float var(--fd,7s) ease-in-out infinite alternate;animation-delay:var(--fdl,0s)}
@keyframes s09float{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.s09 .dev .scr{position:relative;overflow:hidden;background:#101018;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 26px rgba(34,232,255,.22),0 0 70px rgba(255,45,149,.16),inset 0 0 0 1px rgba(0,0,0,.6)}
.s09 .dev .scr img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:inherit}
.s09 .phone .scr{aspect-ratio:9/19.2;border-radius:14%/6.6%;padding:2.8%}
.s09 .phone .scr img{border-radius:11%/5.2%}
.s09 .phone .scr::after{content:"";position:absolute;left:50%;top:1.6%;width:34%;height:3%;transform:translateX(-50%);border-radius:999px;background:#000}
.s09 .laptop .scr{aspect-ratio:16/10;border-radius:3%/4.6%;padding:2.4% 2.4% 2.8%}
.s09 .laptop .scr img{border-radius:1.5%/2.4%}
.s09 .laptop .base{height:5.5%;margin:0 -6%;background:linear-gradient(180deg,#30303e,#141420 55%,#0a0a10);border-radius:0 0 10px 10px/0 0 18px 18px;box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.14);position:relative}
.s09 .laptop .base::after{content:"";position:absolute;left:50%;top:0;width:18%;height:38%;transform:translateX(-50%);background:#1c1c28;border-radius:0 0 6px 6px}
.s09 .tablet .scr{aspect-ratio:4/3;border-radius:5%/6.6%;padding:3.2%}
.s09 .tablet .scr img{border-radius:2.4%/3.2%}
.s09 .lab{position:absolute;z-index:3;left:var(--lx);top:var(--ly);font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);padding-left:14px;white-space:nowrap;line-height:1}
.s09 .lab::before{content:"";position:absolute;left:0;top:-4px;bottom:-16px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--mag))}
.s09 .lab::after{content:"";display:block;margin-top:10px;height:3px;width:66px;background:repeating-linear-gradient(90deg,rgba(244,244,248,.9) 0 16px,transparent 16px 24px)}
/* phone arrangement (plate percent) */
.s09 .laptop{--x:10%;--y:0%;--w:80%;--ry:-10deg;--rx:5deg;--fd:8s;--fdl:-2s}
.s09 .p1{--x:0%;--y:40%;--w:26%;--rz:-6deg;--ry:14deg;--fd:6.5s}
.s09 .tablet{--x:28%;--y:47%;--w:44%;--ry:12deg;--rx:8deg;--rz:-4deg;--fd:9s;--fdl:-1s}
.s09 .p3{--x:74%;--y:40%;--w:26%;--rz:8deg;--ry:-16deg;--fd:7s;--fdl:-3s}
.s09 .p2{--x:2%;--y:46%;--w:27%;--rz:8deg;--ry:12deg;--fd:7.5s;--fdl:-4s}
.s09 .l2{--lx:0%;--ly:62%}.s09 .l1{--lx:0%;--ly:94%}.s09 .l4{--lx:33%;--ly:100%}.s09 .l5{--lx:70%;--ly:94%}.s09 .l3{--lx:0;--ly:0}
@media (max-width:999px){
  .s09 .p2{display:none}
  .s09 .stage{aspect-ratio:1.02;margin-bottom:128px}
  .s09 .float{gap:28px}
  .s09 .labs{position:absolute;left:0;right:0;top:100%;display:flex;flex-wrap:wrap;gap:18px 26px;padding-top:18px}
  .s09 .lab{position:static;font-size:9px;letter-spacing:.16em;padding-left:10px}
  .s09 .lab::before{top:-2px;bottom:-12px}
  .s09 .lab::after{width:40px;margin-top:8px}
}
@media (min-width:1000px){.s09 .labs{display:contents}}
@media (min-width:1000px){
  .s09 .float{grid-template-columns:minmax(300px,34%) minmax(0,1fr);gap:4vw}
  .s09 .stage{aspect-ratio:1.18;margin:0}
  .s09 .p1{--x:5%;--y:9%;--w:17%;--rz:-5deg;--ry:14deg}
  .s09 .laptop{--x:31%;--y:4%;--w:50%;--ry:-20deg;--rx:6deg}
  .s09 .p2{--x:3%;--y:49%;--w:19%;--rz:9deg;--ry:12deg}
  .s09 .tablet{--x:24%;--y:49%;--w:36%;--ry:16deg;--rx:8deg;--rz:-6deg}
  .s09 .p3{--x:74%;--y:39%;--w:20%;--rz:12deg;--ry:-16deg}
  .s09 .laptop{--x:35%;--y:4%;--w:45%}
  .s09 .p3{--x:72%;--y:40%;--w:19%}
  .s09 .l1{--lx:23%;--ly:14%}.s09 .l2{--lx:80%;--ly:22%}.s09 .l3{--lx:-6%;--ly:62%}.s09 .l4{--lx:56%;--ly:92%}.s09 .l5{--lx:84%;--ly:72%}
  .s09 .lab{font-size:10px}
}

/* ---- by the numbers ---- */
.s09 .nums{margin-top:clamp(64px,10vh,120px);display:grid;gap:20px}
.s09 .nh{display:grid;gap:10px;max-width:60ch}
.s09 .nh p{margin:0;font-size:15px;line-height:1.6;color:rgba(244,244,248,.74)}
.s09 .nums ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}
.s09 .nums li{display:grid;gap:6px;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);align-content:start}
.s09 .nums b{font-family:var(--head);font-weight:800;font-size:clamp(30px,3.2vw,48px);letter-spacing:-.035em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.s09 .nums span{font-size:13px;line-height:1.5;color:rgba(244,244,248,.66)}
@media (min-width:760px){.s09 .nums ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){.s09 .nums ul{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---- the cases: rows (user pick, 8 Oct 2026). Logo on top, one plain sentence of what we did, the small line with
   the figures, the dashboard it came from on the right. One row per client, a hairline between. Phones stack. ---- */
.s09 .cases{margin-top:clamp(40px,7vh,80px);display:grid;gap:0;scroll-margin-top:84px}
.s09 .case{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 40px;padding:clamp(28px,4.5vh,44px) 0;border-top:1px solid rgba(255,255,255,.12)}
.s09 .ct{display:grid;gap:14px;min-width:0;align-content:center}
.s09 .ct .lg{height:52px;display:flex;align-items:center}
.s09 .ct .lg img{height:100%;width:auto;max-width:200px;object-fit:contain;object-position:left;filter:brightness(0) invert(1)}
.s09 .ct .lg img.col{filter:none}
.s09 .ct h3{font-family:var(--head);font-weight:800;font-size:clamp(24px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em;margin:0;text-wrap:balance;max-width:20ch}
.s09 .ct > p{margin:0;font-size:14px;line-height:1.55;color:rgba(244,244,248,.64);max-width:48ch}
.s09 .ct small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:rgba(244,244,248,.42)}
.s09 .shot{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9.5;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 30px 70px rgba(0,0,0,.55),0 0 40px rgba(34,232,255,.06)}
.s09 .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
@media (min-width:860px){
  .s09 .case{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;padding:clamp(32px,5vh,52px) 0}
}
/* ---- the rest ---- */
.s09 .others{margin-top:clamp(64px,10vh,120px);display:grid;gap:22px}
.s09 .oh{display:grid;gap:10px}
.s09 .oh h3,.s09 .sh h3{font-family:var(--head);font-weight:800;font-size:clamp(26px,3vw,42px);letter-spacing:-.03em;line-height:1;margin:0;text-wrap:balance}
.s09 .others ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.s09 .others li{display:grid;gap:6px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:10px;background:rgba(244,244,248,.025);align-content:start;min-width:0}
.s09 .others b{font-family:var(--head);font-weight:700;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.s09 .others span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.s09 .others p{margin:2px 0 0;font-size:13px;line-height:1.5;color:rgba(244,244,248,.7)}
@media (min-width:600px){.s09 .others ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.s09 .others ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1300px){.s09 .others ul{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- social strip ---- */
.s09 .social{margin-top:clamp(56px,9vh,100px);display:grid;gap:18px}
.s09 .sh{display:grid;gap:8px;max-width:62ch}
.s09 .sh p{margin:0;font-size:15px;line-height:1.6;color:rgba(244,244,248,.76)}
.s09 .ig{list-style:none;margin:0;padding:4px 0 14px;display:flex;gap:12px;align-items:start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.s09 .ig::-webkit-scrollbar{display:none}
.s09 .ig li{flex:0 0 auto;width:clamp(150px,38vw,190px);display:grid;gap:6px}
.s09 .ig img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.1);display:block;background:#000}
.s09 .ig span{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cyan);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s09 .ig small{font-size:12px;color:rgba(244,244,248,.7)}

/* ---- the deck ---- */
.s09 .act{margin-top:clamp(40px,7vh,72px);display:grid;gap:14px;justify-items:start}
.s09 .fine{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}

@media (prefers-reduced-motion:reduce){.s09 .dev > *{animation:none}.btn-g:hover{transform:none}}

/* ASTEROID · s10-13.css
   S10 'Backlit tiles': small glass LED squares on a dark wall, one magenta, light pooling on a reflective floor.
   S13 'Three doors': one continuous room (assets/s13/doors-scene.webp) shown as three windows side by side on wide screens
   and stacked one door at a time on phones. Transform and opacity only. */

/* ---------- S10 · lightboxes ---------- */
.s10{position:relative;background:#06060B;color:var(--ink);padding:clamp(72px,11vh,130px) 0 clamp(64px,9vh,110px);overflow:clip;isolation:isolate}
.s10::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 70%,rgba(214,222,255,.07),transparent 70%)}
.s10 .k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);margin-bottom:18px}
.s10 h2{font-family:var(--head);font-weight:800;font-size:clamp(32px,5.2vw,68px);line-height:1;letter-spacing:-.03em;text-wrap:balance;margin:0 0 clamp(10px,1.6vh,16px);max-width:16ch}
.s10 .lead{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(244,244,248,.72);max-width:50ch}
.s10 .rows{display:grid;gap:clamp(14px,2.4vh,24px);margin-top:clamp(28px,5vh,52px);width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.s10 .tiles{list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;animation:s10drift 52s linear infinite;will-change:transform}
.s10 .tiles.r2{animation-direction:reverse;animation-duration:60s}
.s10 .tiles li{position:relative;flex:none;width:clamp(150px,19vw,260px);aspect-ratio:16/8.5;border-radius:8px;display:grid;place-items:center;padding:0 clamp(14px,1.4vw,22px);color:#141528;font-family:var(--head);font-weight:700;font-size:clamp(13px,1.3vw,19px);letter-spacing:-.01em;text-align:center;
  background:radial-gradient(120% 120% at 50% 40%,#ffffff 0%,#eef0f8 55%,#d2d7e8 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 22px rgba(224,230,255,.55),0 0 60px rgba(200,210,255,.3),inset 0 0 18px rgba(255,255,255,.9);transition:background .6s,box-shadow .6s}
.s10 .tiles li::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(255,255,255,0) 45%,rgba(255,255,255,0) 60%,rgba(255,255,255,.25))}
.s10 .tiles img{display:block;width:70%;height:58%;object-fit:contain;filter:brightness(0) opacity(.88)}
.s10 .tiles li[data-c="cleopatra-ink"] img,.s10 .tiles li[data-c="educon"] img{filter:none}
.s10 .tiles li.lit{color:#2b0617;background:radial-gradient(120% 120% at 50% 40%,#ff8ccb 0%,#ff2d95 55%,#c4127a 100%);box-shadow:0 0 0 1px rgba(255,140,203,.7),0 0 24px rgba(255,45,149,.9),0 0 70px rgba(255,45,149,.5)}
.s10 .tiles li.lit2{color:#03262b;background:radial-gradient(120% 120% at 50% 40%,#b3f8ff 0%,#22e8ff 55%,#0ea5b7 100%);box-shadow:0 0 0 1px rgba(179,248,255,.7),0 0 24px rgba(34,232,255,.9),0 0 70px rgba(34,232,255,.5)}
@keyframes s10drift{to{transform:translateX(-50%)}}
.s10 .rows:hover .tiles{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.s10 .tiles{animation:none}}

/* ---------- S13 ---------- */
.s13{position:relative;background:#05050A;color:var(--ink);padding:clamp(72px,11vh,130px) 0 clamp(64px,9vh,110px);overflow:clip}
.s13 .room{display:none}
.s13 .wrap{position:relative}
.s13 .wrap{max-width:1320px}
.s13 .head{display:grid;gap:16px;justify-items:center;text-align:center;margin-bottom:clamp(20px,4vh,40px)}
.s13 .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan);display:inline-flex;align-items:center;gap:16px}
.s13 .k i{display:inline-block;width:56px;height:1px;background:var(--cyan)}
.s13 h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,5.6vw,76px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0;max-width:14ch}
.s13 .tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:clamp(28px,5vh,48px)}
.s13 .tier{display:grid;gap:14px;min-width:0}
.s13 .cut{position:relative;width:100%;aspect-ratio:896/760;background-image:url(../assets/s13/doors-scene.webp);background-size:300% auto;background-repeat:no-repeat;background-position:var(--bp) 0;isolation:isolate}
.s13 .t1 .cut{--bp:0%}.s13 .t2 .cut{--bp:50%}.s13 .t3 .cut{--bp:100%}
.s13 .cut::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;pointer-events:none;opacity:.55;animation:s13pulse var(--pd,5s) ease-in-out infinite alternate}
.s13 .t1 .cut::after{background:radial-gradient(18% 60% at 60% 52%,rgba(34,232,255,.5),transparent 70%);--pd:4.2s}
.s13 .t2 .cut::after{background:radial-gradient(22% 60% at 58% 52%,rgba(255,45,149,.45),transparent 70%);--pd:5.1s}
.s13 .t3 .cut::after{background:radial-gradient(34% 60% at 48% 50%,rgba(150,210,255,.55),transparent 70%);--pd:3.6s}
@keyframes s13pulse{from{opacity:.25}to{opacity:.7}}
.s13 .cap{display:grid;gap:8px;text-align:center;justify-items:center;padding:16px 18px 18px;border-radius:12px;background:rgba(8,8,16,.46);border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
.s13 .cap h3{font-family:var(--mono);font-weight:500;font-size:clamp(13px,1.1vw,16px);letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin:0}
.s13 .cap p{margin:0;font-size:clamp(14px,1.05vw,16px);line-height:1.55;color:rgba(244,244,248,.82);max-width:34ch}
.s13 .cap small{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,244,248,.5);line-height:1.6;max-width:40ch}
.s13 .sum{margin-top:clamp(32px,6vh,60px);display:grid;gap:22px;justify-items:center;text-align:center}
.s13 .sum p{margin:0;font-size:clamp(15px,1.15vw,18px);line-height:1.6;color:rgba(244,244,248,.78);max-width:56ch}
@media (min-width:761px){
  .s13 .tiers{grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
  .s13 .tier{gap:22px}
  .s13 .cut{border-radius:0}
}
@media (max-width:760px){
  /* phones: ONE continuous tall room (doors stacked downward), the three glass boxes beside their doors */
  .s13 .tiers{position:relative;display:block;aspect-ratio:1520/2688;background:#05050A url(../assets/s13/doors-tall-v3.webp) center/cover no-repeat;border-radius:12px;overflow:visible;margin:0 0 28px}
  .s13 .cut{display:none}
  .s13 .tier{position:absolute;left:50%;right:3%;top:var(--t);display:block}
  .s13 .t1{--t:6%}.s13 .t2{--t:35%}
  .s13 .t3{--t:65%}
  .s13 .cap{padding:12px 12px 13px;gap:6px;border-radius:12px;background:rgba(8,8,16,.58)}
  .s13 .cap h3{font-size:10.5px;letter-spacing:.18em}
  .s13 .cap p{font-size:12px;line-height:1.45}
  .s13 .cap small{display:none}
  .s13 .sum{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.s13 .cut::after{animation:none}}
.no-js .s13 .tier{opacity:1;transform:none}

/* ASTEROID · motion.css
   Site-wide motion, all transform/opacity so nothing lags: scroll reveals with stagger, parallax plates, a header that
   steps out of the way on the way down, counters. JS adds data-rv to text blocks; without JS nothing is hidden. */

.js [data-rv]{opacity:0;transform:translateY(22px);will-change:opacity,transform}
.js [data-rv].rv-in{opacity:1;transform:none;transition:opacity .75s ease calc(var(--i,0)*.07s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.07s)}
.js [data-rv="x"]{transform:translateX(-22px)}
.js [data-rv="scale"]{transform:scale(.96)}
[data-px]{will-change:transform}
.nav{transition:transform .5s cubic-bezier(.2,.7,.2,1),background .4s}
.nav.away{transform:translateY(-110%)}
.menu.open ~ * .nav.away,.locked .nav{transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-rv]{opacity:1;transform:none;transition:none}
  [data-px]{transform:none!important}
  .nav{transition:none}.nav.away{transform:none}
}

/* ---------- arrivals from blur: text blocks and word-by-word headlines ---------- */
.js [data-rv]{filter:blur(10px)}
.js [data-rv].rv-in{filter:blur(0);transition:opacity .75s ease calc(var(--i,0)*.07s),transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.07s),filter .8s ease calc(var(--i,0)*.07s)}
.js [data-words] .w{display:inline-block;opacity:0;filter:blur(9px);transform:translateY(.25em)}
.js [data-words].w-in .w{opacity:1;filter:blur(0);transform:none;transition:opacity .6s ease calc(var(--i,0)*.07s),filter .7s ease calc(var(--i,0)*.07s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.07s)}
/* the hero: the figure recedes as you scroll into the site (--p set by hero3.js) */
.hero3 .figure{opacity:calc(1 - .25*var(--p,0))}   /* opacity only: a scaling figure with a drop-shadow re-rasterises every frame */
.hero3 .field::before,.hero3 .field::after{animation:none!important}
@media (prefers-reduced-motion:reduce){.js [data-rv]{filter:none}.js [data-words] .w{opacity:1;filter:none;transform:none}.hero3 .figure{transform:translateX(-50%)}}

/* hero on phones: static figure and field, no blend modes, no per-scroll re-rasterising (user: "hero still lags on phone") */
@media (max-width:760px){
  .hero3 .figure{transform:translateX(-50%)!important;filter:drop-shadow(0 0 30px rgba(0,0,0,.6));will-change:auto;opacity:1!important}
  .hero3 .field{mix-blend-mode:normal;opacity:.5}
  .hero3 .field::before,.hero3 .field::after{animation:none;filter:none}
  .hero3 .word{will-change:auto}
}

/* phones: the original pinned hero (user: "shift it to the previous one"), with a SHORT pin so a flick never crosses dead space */
@media (max-width:760px){
  .hero3{height:140svh}
  .hero3 .stage{height:100svh}
}

/* ASTEROID · pages.css
   Shared pieces for the multi-page site: current-page marker in the nav, the closing call to action, the footer tagline,
   and the temporary stubs for sections still in build. */
.nav .links a[aria-current="page"]{color:var(--ink)}
.nav .links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
body:not(.page-index) .nav{background:rgba(11,11,18,.72);backdrop-filter:blur(14px);border-color:var(--line)}
body:not(.page-index) main{padding-top:72px}

/* closing */
.talk{position:relative;background:var(--void);color:var(--ink);padding:clamp(88px,14vh,160px) 0 clamp(80px,12vh,140px);overflow:clip;isolation:isolate}
.talk::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(50% 60% at 50% 100%,rgba(255,45,149,.16),rgba(255,45,149,0) 70%),radial-gradient(40% 50% at 15% 20%,rgba(122,92,255,.16),rgba(122,92,255,0) 70%)}
.talk .wrap{display:grid;gap:22px;justify-items:start;max-width:980px}
.talk h2{font-family:var(--head);font-weight:800;font-size:clamp(36px,6.2vw,84px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;max-width:14ch}
.talk p{font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:rgba(244,244,248,.8);max-width:52ch}
.talk .act{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.talk .k{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-top:10px}

/* footer extras */
.foot .tag{margin-top:14px;font-family:var(--head);font-weight:700;font-size:16px;letter-spacing:-.01em;max-width:26ch}
.foot .addr span{color:var(--mute)}

/* stubs */
.stub{padding:clamp(80px,12vh,140px) 0;border-top:1px solid rgba(255,255,255,.06)}
.stub h2{font-size:clamp(30px,4.6vw,64px);margin-top:16px;max-width:16ch}
.stub .note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mag)}

/* the empty chair: the plate behind, the copy on the dark side, the buttons in the light */
.talk.chair{background:#000;min-height:min(100svh,900px);display:grid;align-items:center}
.talk.chair::before{display:none}
.talk.chair .plate,.talk.chair .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-1}
.talk.chair .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 70%),linear-gradient(180deg,#000,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 85%,#000)}
.talk .seat{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mag)}
.talk.chair .seat{color:#F2B35B}
.talk.chair h2{text-shadow:0 2px 30px rgba(0,0,0,.8)}
@media (max-width:760px){
  /* phone: the copy on black, then the portrait chair plate as its own picture, whole, never cropped */
  .talk.chair{min-height:0;padding:clamp(64px,10vh,96px) 0 0;display:grid;align-items:start}
  .talk.chair .wrap{order:1;padding-bottom:28px}
  .talk.chair .plate{position:relative;inset:auto;order:2;width:100%;aspect-ratio:4/5;z-index:0}
  .talk.chair .plate img{position:absolute;inset:0;object-position:50% 50%}
  .talk.chair .plate::after{background:linear-gradient(180deg,#000,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 90%,#000 100%)}
}

/* ---------- legal pages (terms, privacy) ---------- */
.legal{padding:clamp(120px,18vh,180px) 0 clamp(64px,10vh,110px);background:var(--void)}
.legal .wrap{max-width:720px}
.legal h1{font-family:var(--head);font-weight:800;font-size:clamp(34px,6vw,60px);letter-spacing:-.03em;line-height:1;margin-bottom:14px}
.legal .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);display:block;margin-bottom:40px}
.legal h2{font-family:var(--head);font-weight:700;font-size:clamp(18px,1.6vw,22px);letter-spacing:-.01em;margin:34px 0 8px}
.legal p{font-size:clamp(15px,1.1vw,17px);line-height:1.65;color:rgba(244,244,248,.82)}
.legal p a{color:var(--cyan)}
.legal .back{margin-top:44px}
.legal .back a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:3px}

/* ---------- Let's Talk page: the chair fills the page, details under the buttons ---------- */
.page-talk .talk.chair{min-height:100svh;padding-top:120px}
.talk .details{margin:34px 0 0;display:grid;gap:16px;grid-template-columns:1fr;max-width:620px}
.talk .details div{display:grid;gap:4px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.talk .details dt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.talk .details dd{margin:0;font-size:15px;line-height:1.5;color:rgba(244,244,248,.86)}
.talk .details a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
@media (min-width:600px){.talk .details{grid-template-columns:1fr 1fr}}

/* ---------- closings per page (8 Oct 2026): bench (How We Work), next page (Work), phone (Let's Talk) ---------- */
.talk.bench,.talk.phone{background:#000;min-height:min(100svh,900px);display:grid;align-items:center}
.talk.bench::before,.talk.phone::before{display:none}
.talk.bench .plate,.talk.bench .plate img,.talk.phone .plate,.talk.phone .plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:-1}
.talk.bench .plate img{object-position:70% 50%}
.talk.phone .plate img{object-position:72% 50%}
.talk.bench .plate::after,.talk.phone .plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.55) 42%,rgba(0,0,0,0) 68%),linear-gradient(180deg,#000,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 86%,#000)}
.talk.bench .seat{color:#B388FF}
.talk.phone .seat{color:var(--cyan)}
.talk.bench h2,.talk.phone h2,.talk.nextpage h2{text-shadow:0 2px 30px rgba(0,0,0,.8)}
/* the next page: copy centred, the blank dashboard under it */
.talk.nextpage{background:#000;min-height:min(100svh,900px);display:grid;align-items:center;overflow:clip}
.talk.nextpage::before{display:none}
.talk.nextpage .wrap{display:grid;justify-items:center;text-align:center;gap:14px}
.talk.nextpage h2{max-width:16ch}
.talk.nextpage .act{justify-content:center}
.talk.nextpage .dash{width:min(100%,880px);margin-top:clamp(22px,4vh,40px);border-radius:12px;background:#0E0E17;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px rgba(255,45,149,.08),0 0 0 1px rgba(255,45,149,.25);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,244,248,.5);text-align:left;position:relative}
.talk.nextpage .dash::after{content:"";position:absolute;left:10%;right:10%;bottom:-30px;height:50px;background:radial-gradient(closest-side,rgba(255,45,149,.35),rgba(255,45,149,0));filter:blur(10px);z-index:-1}
.talk.nextpage .dash .bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.talk.nextpage .dash .field{flex:1;min-width:0;height:30px;border:1px solid rgba(255,255,255,.14);border-radius:6px;display:flex;align-items:center;padding:0 10px}
.talk.nextpage .dash .cur{display:inline-block;width:2px;height:14px;background:var(--cyan);animation:npblink 1s steps(1,end) infinite}
@keyframes npblink{50%{opacity:0}}
.talk.nextpage .dash .pill{padding:7px 10px;border:1px solid rgba(255,255,255,.12);border-radius:6px;white-space:nowrap}
.talk.nextpage .dash .body{padding:14px 16px 18px;display:grid;gap:10px}
.talk.nextpage .dash .grid{height:clamp(120px,22svh,220px);border:1px dashed rgba(255,255,255,.12);border-radius:8px;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 25%,12.5% 100%}
@media (max-width:760px){
  .talk.bench,.talk.phone{min-height:0;padding:clamp(64px,10vh,96px) 0 0;display:grid;align-items:start}
  .talk.bench .wrap,.talk.phone .wrap{order:1;padding-bottom:28px}
  .talk.bench .plate,.talk.phone .plate{position:relative;inset:auto;order:2;width:100%;aspect-ratio:4/5;z-index:0}
  .talk.bench .plate img,.talk.phone .plate img{position:absolute;inset:0;object-position:50% 50%}
  .talk.bench .plate::after,.talk.phone .plate::after{background:linear-gradient(180deg,#000,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 90%,#000 100%)}
  .talk.nextpage{padding:clamp(64px,10vh,96px) 0 clamp(48px,8vh,72px)}
  .talk.nextpage .dash .pill:last-child{display:none}
  .talk.nextpage .dash .grid{height:140px}
}
@media (min-width:1000px) and (max-height:820px){.talk.bench,.talk.phone,.talk.nextpage{min-height:min(100svh,860px)}}
@media (prefers-reduced-motion:reduce){.talk.nextpage .dash .cur{animation:none}}

/* ---------- long-form pages: the engagement, the audit, country pages, insights ---------- */
.long{padding:clamp(112px,16vh,160px) 0 clamp(56px,8vh,90px);background:var(--void)}
.long .wrap{max-width:760px}
.long .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:22px;display:flex;flex-wrap:wrap;gap:8px}
.long .crumbs a{color:var(--cyan);text-decoration:none}
.long h1{font-family:var(--head);font-weight:800;font-size:clamp(32px,5vw,58px);line-height:1.06;letter-spacing:-.03em;margin:0 0 18px;text-wrap:balance}
.long .lead{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:rgba(244,244,248,.82);margin:0 0 34px;max-width:62ch}
.long .body h2{font-family:var(--head);font-weight:700;font-size:clamp(22px,2vw,28px);letter-spacing:-.02em;line-height:1.15;margin:38px 0 10px!important}
.long .body p,.long .body li{font-size:clamp(15.5px,1.1vw,17.5px);line-height:1.65;color:rgba(244,244,248,.84)}
.long .body p{margin:0 0 14px}
.long .body ul,.long .body ol{padding-left:22px;margin:0 0 14px}
.long .body li{margin:6px 0}
.long .body a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(34,232,255,.4)}
.long .body b{color:var(--ink);font-weight:700}
.long .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:28px;border-top:1px solid rgba(255,255,255,.1)}
/* WhatsApp, always one thumb away on phones */
.wa{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:120;width:54px;height:54px;border-radius:50%;background:#25D366;color:#fff;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.12)}
@media (max-width:900px){.wa{display:grid}}
.locked .wa{display:none}
.talk .after{margin:22px 0 0;max-width:62ch;font-size:15px;line-height:1.6;color:rgba(244,244,248,.78)}
.s08 .more{margin-top:clamp(18px,3vh,28px)}
.s08 .more a{color:var(--cyan);text-decoration:none;border-bottom:1px solid rgba(34,232,255,.4)}

/* ASTEROID · fit.css
   Desktop fit pass (user, 8 Oct 2026: "I want each section to fit my desktop screen"). Loaded last. From 1000px up every
   section is held to one screen: tighter paddings, smaller display type, plates capped by viewport height, nothing cropped
   on the door plates. Phones are untouched. */
@media (min-width:1000px){
  /* S02 what is Asteroid */
  .s02{padding:clamp(48px,7vh,80px) 0 clamp(40px,6vh,64px);min-height:100svh;display:grid;align-content:center}
  .s02 h2{font-size:clamp(48px,5.6vw,84px);max-width:14ch}
  .s02 .lines{margin-top:20px;gap:6px}
  .s02 .body{margin-top:clamp(20px,3vh,32px);gap:12px;font-size:clamp(15px,1.05vw,17px)}
  .s02 .body .last{margin-top:4px;font-size:clamp(20px,1.8vw,26px)}
  /* S06 capabilities */
  .s06{padding:clamp(48px,7vh,72px) 0 clamp(36px,5vh,56px);min-height:100svh;display:grid;align-content:center}
  .s06 h2{font-size:clamp(34px,4.4vw,58px)}
  /* S07 how we work */
  .s3 .in{min-height:100svh;align-items:center}
  .s3 .visual{position:relative;top:auto;height:min(70svh,680px);min-height:0;align-self:center}
  .s3 .chamber{height:72%}
  .s3 .copy{padding:clamp(40px,6vh,64px) var(--gutter) clamp(40px,6vh,64px) clamp(16px,2vw,40px);gap:16px}
  .s3 h2{font-size:clamp(32px,3.4vw,54px)}
  /* S08 speed, the waiting room */
  .s08 .plate{aspect-ratio:auto;height:clamp(400px,58svh,640px)}
  .s08 .plate img{object-position:50% 32%}
  .s08 .copy{top:6%}
  .s08 .copy p{max-width:24ch}
  .s08 .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
  .s08 .body{margin-top:clamp(18px,3vh,28px)}
  .s08 .ticket{margin-top:clamp(18px,3vh,28px);max-width:none}
  .s08{padding-bottom:clamp(32px,5vh,56px)}
  /* S12 six doors: the whole plate, never cropped, never taller than the screen */
  .s4 .in{min-height:0;height:100svh;display:grid;place-items:center;position:relative}
  .s4 .field{position:relative;inset:auto;height:auto;width:min(100%,calc(100svh * 16 / 9));aspect-ratio:16/9;margin:0 auto}
  .s4 .copy{position:absolute;right:0;top:50%;transform:translateY(-50%);height:auto;min-height:0;max-height:100%;width:min(38%,500px);padding:0 var(--gutter) 0 0;align-content:center;gap:12px}
  .s4 h2{font-size:clamp(28px,2.9vw,46px)}
  .s4 .copy p{font-size:14px;line-height:1.5}
  .s4 li{padding:8px 0;font-size:13px}
  .s4 ul{margin-top:4px}
  /* the copy centres in the screen BELOW the fixed 72px header and never grows past it; the headline scales with screen
     height too. Before (13 Oct 2026) the column was taller than 720-870px laptop screens, centred on the whole screen,
     so the headline was pushed above the section (which clips) or sat under the header. */
  .s4 .copy{top:calc(50% + 36px);max-height:calc(100svh - 96px)}
  .s4 h2{font-size:clamp(28px,min(2.9vw,5.4svh),46px)}
  /* S13 engagement: the whole room fills the screen (text-free render), headline on the wall, captions on the floor under each door */
  .s13{padding:0;height:100svh;min-height:0;display:block;overflow:clip;background:#05050A}
  .s13 .wrap{max-width:none;padding:0;height:100%}
  .s13 .room{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,calc(100svh * 2688 / 1520));aspect-ratio:2688/1520;background:url(../assets/s13/doors-room-v2.webp) center/cover no-repeat}
  .s13 .head{position:absolute;z-index:2;left:0;right:0;top:4.5%;margin:0;gap:8px}
  .s13 h2{font-size:clamp(34px,4.6vw,66px);text-shadow:0 2px 30px rgba(0,0,0,.7)}
  .s13 .tiers{position:absolute;z-index:2;left:0;right:0;top:70%;width:auto;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:0 6%}
  .s13 .tier{gap:6px}
  .s13 .cut{display:none}
  .s13 .cap{padding:14px 16px 16px;margin:0 1.5vw}
  .s13 .cap h3{font-size:clamp(12px,.95vw,14px)}
  .s13 .cap p{font-size:clamp(13px,1vw,15px);max-width:30ch;text-shadow:0 1px 12px rgba(0,0,0,.8)}
  .s13 .cap small{display:none}
  .s13 .sum{position:absolute;z-index:2;left:0;right:0;bottom:3.5%;margin:0;gap:12px}
  .s13 .sum p{display:none}
  /* S14 faq */
  .s14{padding:clamp(44px,6vh,64px) 0;min-height:100svh;display:grid;align-content:center}
  .s14 h2{font-size:clamp(32px,4vw,54px)}
  .s14 .qs{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
  .s14 details{padding:0}
  .s14 summary{font-size:clamp(15px,1.1vw,17px);padding:14px 54px 14px 20px}
  .s14 .head{margin-bottom:clamp(16px,2.5vh,28px)}
  /* S09 work: hero stage and each case within a screen */
  .s09{padding-top:clamp(56px,8vh,88px)}
  .s09 .float{min-height:calc(100svh - 120px);align-items:center}
  .s09 .stage{max-height:calc(100svh - 160px);aspect-ratio:1.18}
  /* talk */
  .page-talk .talk.chair{padding:88px 0 32px}
  .s10{padding-top:clamp(44px,6vh,64px)}
  .s10 h2{margin-bottom:clamp(24px,4vh,48px)}
  .talk .details{margin-top:24px;gap:12px}
  /* closing chair on the other pages */
  .talk.chair{min-height:min(100svh,860px)}
}
/* short laptop screens (around 768px tall): trim a little more */
@media (min-width:1000px) and (max-height:820px){
  .s13 h2{font-size:clamp(30px,3.6vw,48px)}
  .page-talk .talk.chair{padding:76px 0 24px}.talk .details{margin-top:16px}
}
/* S12 on laptop-height screens: the four groups go two-up so the whole column fits under the header */
@media (min-width:1000px) and (max-height:900px){
  .s4 ul.groups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .s4 ul.groups li{padding:10px 0}
  .s4 .copy{gap:10px}
}
/* very short screens: let the copy flow under the plate instead of clipping */
@media (min-width:1000px) and (max-height:600px){
  .s4 .in{height:auto;min-height:100svh;padding:88px 0 40px}
  .s4 .copy{position:relative;top:auto;transform:none;max-height:none;width:min(100%,900px);margin:24px auto 0;padding:0 var(--gutter)}
}

/* S03 human x AI (761px up): the two panels fill one screen and line up; the 'person behind the laptop' line is its own
   full-width block UNDER the panels (user, 8 Oct 2026: "that should be a different new section on desktop") */
@media (min-width:761px){
  .s03{position:relative;height:auto;overflow:clip}
  .s03 .halves{height:100svh}
  .s03 .half{min-height:0;height:100%;padding-block:clamp(40px,6vh,72px);align-content:center}
  .s03 .half .big{font-size:min(9vw,190px)}
  .s03 .who{position:static;background:var(--void);border-top:1px solid rgba(255,255,255,.08);padding:clamp(40px,7vh,80px) var(--gutter);display:grid;gap:10px;justify-items:center;text-align:center}
  .s03 .who p{font-size:clamp(22px,2.4vw,34px);max-width:24ch;margin:0}
  .s03 .who small{font-size:clamp(14px,1.05vw,16px);max-width:60ch;color:rgba(244,244,248,.7);line-height:1.6}
}
}

/* headlines everywhere: room to breathe between the lines (user, 8 Oct 2026) */
.h3 main h2,.h3 main h1,.h3 .talk h2,.h3 .legal h1{line-height:1.08;letter-spacing:-.022em}
.h3 .hero3 h1 .big{line-height:1.02}
.h3 main h2 .w{margin-right:.02em}

/* no small titles above headlines, and air between a headline and what follows it (user, 8 Oct 2026) */
main span.k:has(+ h1),main span.k:has(+ h2),main span.k:has(+ h3),.talk .seat,.s02 .k,.s03 .who .k,.s03 .half .k,.s09 .nh .k,.s09 .oh .k,.s09 .sh .k,.s08 .copy .k,.s3 .tag{display:none!important}
main h2{margin-bottom:clamp(16px,2.4vh,30px)!important}
main h1 .tail{margin-top:.35em}
.hero3 .head p,.hero3 .head .act{margin-top:clamp(10px,1.6vh,20px)}
main h2 + p,main h2 + .lead,main h2 + .intro,main h2 + .count{margin-top:0}
.s03 .half .big{margin-bottom:clamp(14px,2vh,26px)}

/* footer with the new Read column: four columns on wide screens, one column on the narrowest phones, links wrap */
@media (min-width:900px){.foot .g{grid-template-columns:1.3fr 1fr 1fr 1.3fr}}
@media (max-width:420px){.foot .g{grid-template-columns:1fr;gap:20px}.foot .col a,.foot .addr a{width:auto;white-space:normal;overflow-wrap:anywhere}}

/* ASTEROID · alive.css  (creative pass, 8 Oct 2026)
   One lighting system for the whole site. A fixed ambient glow that changes hue with the section in view, static grain,
   a reading-progress line in the header, one button language (light sweep, press), hover accents on the areas list,
   the process line drawing in, counters that glow when they land, a slow halo behind the closing headline, and one
   LED flicker on the hero the first time the site opens. Desktop (hover + fine pointer) gets the composited layers;
   phones get only the cheap ones. Everything is transform, opacity or a one-off; nothing touches the wheel. */

/* ---- ambient light: two layers crossfade so a hue change is a real fade, not a snap ---- */
.amb{position:fixed;inset:0;z-index:60;pointer-events:none;mix-blend-mode:screen;display:none}
.amb i{position:absolute;inset:-20%;opacity:0;transition:opacity 1.6s ease;background:radial-gradient(42% 38% at var(--ax,72%) var(--ay,40%),var(--c,#22E8FF) 0%,transparent 70%)}
.amb i.on{opacity:.15}
@media (hover:hover) and (pointer:fine){.js .amb{display:block}}

/* ---- grain: one static tile over the void, desktop only ---- */
@media (hover:hover) and (pointer:fine){
  body::after{content:"";position:fixed;inset:0;z-index:61;pointer-events:none;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:220px 220px}
  body.locked::after{display:none}
}

/* ---- header: a thin reading line along the bottom edge ---- */
.nav::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--cyan),var(--uv) 55%,var(--mag));transform:scaleX(var(--sp,0));transform-origin:left;opacity:.9;box-shadow:0 0 10px rgba(34,232,255,.45)}

/* ---- buttons: one language everywhere. A light sweeps across on hover, a slight press on click ---- */
.btn::before{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:34%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-18deg);opacity:0}
.btn:hover::before{opacity:1;transform:translateX(360%) skewX(-18deg);transition:transform .75s cubic-bezier(.2,.7,.2,1),opacity .15s}
.btn .t,.btn .ar{position:relative;z-index:1}
.btn:active{transform:scale(.97)!important;transition:transform .12s}

/* ---- what we transform: each area takes its own hue on hover, a soft wash behind it ---- */
@media (hover:hover){
  .s05 .areas li{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
  .s05 .areas li::after{content:"";position:absolute;left:-14px;right:-14px;top:-14px;bottom:-14px;z-index:-1;border-radius:12px;background:radial-gradient(60% 70% at 50% 0%,var(--c),transparent 72%);opacity:0;transition:opacity .5s}
  .s05 .areas li:hover::after{opacity:.16}
  .s05 .areas li b{transition:color .4s}
  .s05 .areas li:hover b{color:var(--c)}
  .s05 .areas li:hover{transform:translateY(-3px)}
}

/* ---- how we work: a line draws down the steps as the section arrives ---- */
.s3 ol{position:relative}
.s3 ol::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:1;background:linear-gradient(180deg,var(--cyan),var(--uv) 55%,var(--mag));box-shadow:0 0 12px rgba(122,92,255,.55);transform:scaleY(0);transform-origin:top}
.s3.on ol::before{transform:scaleY(1);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .25s}
.s3 li{padding-left:18px!important}

/* ---- work: a number glows for a moment as it lands ---- */
.s09 .nums b{transition:text-shadow 1.2s ease}
.s09 .nums b.done{text-shadow:0 0 30px rgba(34,232,255,.6)}

/* ---- closings: a slow halo breathes behind the last headline ---- */
.talk h2{position:relative;z-index:1}
.talk h2::before{content:"";position:absolute;left:-30%;top:-50%;width:160%;height:200%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,var(--halo,rgba(34,232,255,.16)),transparent);animation:halo 7s ease-in-out infinite}
.talk.bench{--halo:rgba(179,136,255,.16)}
.talk.chair{--halo:rgba(242,179,91,.13)}
.talk.nextpage{--halo:rgba(255,45,149,.13)}
@keyframes halo{0%,100%{transform:scale(.82);opacity:.55}50%{transform:scale(1.06);opacity:1}}

/* ---- hero: a brief LED flicker the first time the site opens (class added once by alive.js) ---- */
.hero3.flick .bgp,.hero3.flick .word,.hero3.flick .side{animation:flick .8s steps(1,end) both}
@keyframes flick{0%{opacity:0}7%{opacity:1}13%{opacity:.2}20%{opacity:1}29%{opacity:.45}35%{opacity:1}52%{opacity:.7}58%{opacity:1}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .amb,body::after{display:none!important}
  .btn::before{display:none}
  .s3 ol::before{transform:none;transition:none}
  .talk h2::before{animation:none}
  .hero3.flick .bgp,.hero3.flick .word,.hero3.flick .side{animation:none}
}

/* ASTEROID · popup.css — the 'Get a demo website now' card. Desktop: centred card over a dim veil. Phone: a sheet from the
   bottom. The page behind stays scrollable; closing is one tap. Transform/opacity only. */
.dpop{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:16px;background:rgba(5,5,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .4s ease}
.dpop.show{opacity:1;pointer-events:auto}
.dpop-card{position:relative;width:min(100%,520px);background:#0E0E17;border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:28px 26px 24px;box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 60px rgba(255,45,149,.12),0 0 0 1px rgba(255,45,149,.2);display:grid;gap:12px;transform:translateY(18px) scale(.98);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.dpop.show .dpop-card{transform:none}
.dpop-x{position:absolute;right:12px;top:10px;width:40px;height:40px;border:0;background:transparent;color:rgba(244,244,248,.7);font-size:26px;line-height:1;cursor:pointer;border-radius:50%}
.dpop-x:hover,.dpop-x:focus-visible{background:rgba(255,255,255,.08);color:#fff;outline:none}
.dpop .k{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan)}
.dpop h2{font-family:var(--head);font-weight:800;font-size:clamp(26px,3vw,36px);line-height:1.04;letter-spacing:-.03em;margin:0;text-wrap:balance}
.dpop p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(244,244,248,.76)}
.dpop-form{display:grid;gap:10px;margin-top:6px}
.dpop-form label{display:grid;gap:5px}
.dpop-form label span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,244,248,.6)}
.dpop-form label em{font-style:normal;text-transform:none;letter-spacing:0;color:rgba(244,244,248,.4)}
.dpop-form input{width:100%;box-sizing:border-box;height:46px;padding:0 14px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#07070C;color:var(--ink);font:inherit;font-size:16px}
.dpop-form input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,232,255,.15)}
.dpop-form input.bad{border-color:var(--mag)}
.dpop .dpop-go{margin-top:8px;justify-content:center;width:100%;box-sizing:border-box}
.dpop > .dpop-card > small{font-size:11.5px;color:rgba(244,244,248,.45);text-align:center}
.dpop-form small{font-size:11.5px;color:rgba(244,244,248,.45);text-align:center}
@media (max-width:600px){
  .dpop{place-items:end center;padding:0}
  .dpop-card{width:100%;border-radius:16px 16px 0 0;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(100%)}
  .dpop h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.dpop,.dpop-card{transition:none}}

/* cookie banner: small, bottom left, void with a white hairline; one magenta button */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;max-width:460px;padding:16px 18px;border-radius:8px;background:rgba(11,11,18,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 40px rgba(0,0,0,.5);display:grid;gap:12px;font-family:var(--body);color:var(--ink)}
.consent[hidden]{display:none}
.consent p{margin:0;font-size:13.5px;line-height:1.5;color:rgba(244,244,248,.86)}
.consent a{color:var(--ink);border-bottom:1px solid rgba(255,255,255,.3);text-decoration:none}
.consent .c-act{display:flex;gap:10px;justify-content:flex-end}
.consent button{font:700 13px/1 var(--head);padding:.85em 1.3em;border-radius:4px;cursor:pointer;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--ink)}
.consent .c-yes{background:var(--mag);border-color:var(--mag);color:#fff;box-shadow:0 0 14px rgba(255,45,149,.4)}
@media (max-width:760px){.consent{bottom:84px}}

/* /talk enquiry form: sits under the contact details, same hairline language */
.talk .enq{margin:44px 0 0;max-width:620px;display:grid;gap:14px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.talk .enq h3{margin:0 0 4px;font:700 clamp(20px,2vw,26px)/1.2 var(--head);letter-spacing:-.02em;color:var(--ink)}
.talk .enq .row2{display:grid;gap:14px;grid-template-columns:1fr}
.talk .enq label{display:grid;gap:6px}
.talk .enq label span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan)}
.talk .enq input,.talk .enq select,.talk .enq textarea{width:100%;box-sizing:border-box;font:400 16px/1.4 var(--body);color:var(--ink);background:rgba(11,11,18,.94);border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:12px 14px;outline:none;transition:border-color .25s,box-shadow .25s}
.talk .enq textarea{resize:vertical;min-height:120px}
.talk .enq select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px;background-repeat:no-repeat}
.talk .enq select option{background:var(--void);color:var(--ink)}
.talk .enq input:focus,.talk .enq select:focus,.talk .enq textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,232,255,.15)}
.talk .enq [aria-invalid="true"]{border-color:var(--mag)}
.talk .enq .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.talk .enq button{justify-self:start;cursor:pointer;font-family:var(--head)}
.talk .enq button[disabled]{opacity:.6;cursor:default}
.talk .enq .enq-msg{margin:0;min-height:1.4em;font-size:14px;color:rgba(244,244,248,.86)}
.talk .enq.sent label,.talk .enq.sent .row2,.talk .enq.sent button{display:none}
.talk .enq.sent .enq-msg{font-size:17px;color:var(--ink)}
@media (min-width:761px){.talk .enq .row2{grid-template-columns:1fr 1fr}}

/* TST · home testimonial, the phone notification. Mobile first: copy, then the lock screen. */
.tst{position:relative;isolation:isolate;background:var(--void);color:var(--ink);padding:clamp(72px,11vh,130px) 0;overflow:clip}
.tst::before,.tst::after{content:"";position:absolute;z-index:-1;width:min(70vw,720px);aspect-ratio:1;border-radius:50%;filter:blur(70px);pointer-events:none}
.tst::before{background:var(--uv);opacity:.24;top:-30%;left:-22%}
.tst::after{background:var(--mag);opacity:.15;bottom:-40%;right:-24%}
.tst .wrap{display:grid;gap:clamp(40px,6vw,72px);grid-template-columns:1fr;align-items:center}
.tst .copy{display:grid;gap:16px;justify-items:start;min-width:0}
.tst .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.tst h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,5.4vw,72px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0;max-width:13ch}
.tst h2 .c{color:var(--cyan);text-shadow:0 0 22px rgba(34,232,255,.35)}
.tst .copy p{margin:0;color:var(--mute);max-width:40ch;font-size:clamp(15px,1.3vw,18px)}
.tst .copy .btn{margin-top:8px}
.tst .phone{width:100%;max-width:460px;justify-self:center}
.tst .lock{font-family:var(--head);font-weight:700;font-size:clamp(56px,10vw,92px);letter-spacing:-.04em;line-height:1;text-align:center;color:rgba(244,244,248,.92)}
.tst .lockd{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin:8px 0 24px}
.tst .stack{position:relative;padding-bottom:34px}
.tst .note{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px;border-radius:20px;background:rgba(30,28,44,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px -24px rgba(122,92,255,.45)}
.tst .note .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tst .nm{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.005em}
.tst .when{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.tst blockquote{margin:4px 0 0;font-size:clamp(15px,1.2vw,16.5px);line-height:1.45;color:var(--ink)}
.tst .back{position:absolute;left:50%;translate:-50% 0;width:92%;bottom:16px;height:60px;border-radius:20px;background:rgba(30,28,44,.55);border:1px solid rgba(255,255,255,.06);z-index:-1}
.tst .back.b2{width:84%;bottom:2px;opacity:.6}
.tst .av{flex:none;width:52px;height:52px;border-radius:14px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.tst .av img{width:82%;height:82%;object-fit:contain}
.tst .av.w{background:#fff}.tst .av.d{background:#000}
.tst .minis{display:flex;gap:8px;justify-content:center;margin-top:20px}
.tst .minis .av{width:34px;height:34px;border-radius:9px}
@media (min-width:900px){.tst .wrap{grid-template-columns:1.05fr 1fr}}

/* TSP · Testimonials page, the group chat. Mobile first: one column of messages, two from 700px, three from 1100px. */
.tsp{position:relative;isolation:isolate;background:var(--void);color:var(--ink);padding:clamp(120px,16vh,170px) 0 clamp(72px,10vh,120px);overflow:clip}
.tsp::before,.tsp::after{content:"";position:absolute;z-index:-1;width:min(80vw,820px);aspect-ratio:1;border-radius:50%;filter:blur(80px);pointer-events:none}
.tsp::before{background:var(--uv);opacity:.22;top:-12%;left:-26%}
.tsp::after{background:var(--mag);opacity:.13;bottom:-20%;right:-28%}
.tsp .head{display:grid;gap:14px;justify-items:start;margin-bottom:clamp(32px,5vw,56px)}
.tsp .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.tsp h2{font-family:var(--head);font-weight:800;font-size:clamp(36px,6vw,80px);line-height:.98;letter-spacing:-.035em;text-wrap:balance;margin:0;max-width:14ch}
.tsp h2 .c{color:var(--cyan);text-shadow:0 0 22px rgba(34,232,255,.35)}
.tsp .head p{margin:0;color:var(--mute);max-width:46ch;font-size:clamp(15px,1.3vw,18px)}
.tsp .chips{display:flex;flex-wrap:wrap;gap:8px;margin:-12px 0 26px}
.tsp .chip{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:9px 13px;border-radius:999px;border:1px solid rgba(244,244,248,.12);background:transparent;color:var(--mute);cursor:pointer}
.tsp .chip[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan)}
.tsp .chip:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.tsp .wall{columns:1;column-gap:20px}
.tsp .msg{break-inside:avoid;margin:0 0 20px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start}
.tsp .msg[hidden]{display:none}
.tsp .who{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:3px 0 7px}
.tsp .nm{font-family:var(--head);font-weight:700;font-size:15px;letter-spacing:-.005em}
.tsp .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.tsp .b{margin:0;padding:11px 14px 9px;border-radius:4px 18px 18px 18px;background:#1A1926;border:1px solid rgba(255,255,255,.05);font-size:16px;line-height:1.5;color:var(--ink)}
.tsp .b .f{display:block;text-align:right;margin-top:5px;font-size:11px;letter-spacing:-.1em;color:var(--cyan)}
.tsp .av{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.tsp .av img{width:82%;height:82%;object-fit:contain}
.tsp .av.w{background:#fff}.tsp .av.d{background:#000}
.tsp .vmsg{border-radius:4px 18px 18px 18px;overflow:hidden;background:#1A1926;border:1px solid rgba(255,255,255,.05)}
.tsp .vmsg video{display:block;width:100%;aspect-ratio:9/12;object-fit:cover;background:#16131F}
.tsp .vmsg .cap{margin:0;padding:9px 12px 10px;font-size:14px;color:rgba(244,244,248,.85)}
@media (min-width:700px){.tsp .wall{columns:2}}
@media (min-width:1100px){.tsp .wall{columns:3}}

/* Every generic class below is scoped to project pages with :where(.pj) (no specificity change): unscoped, .phone/.say/.hint/.ct/.chips leaked into /talk,
   the home hero and S06, Work and Testimonials through bundle.css (fixed 13 Oct 2026). */
/* PORTFOLIO · Selected projects gallery (/work) and the concept project pages (/work/<slug>).
   The shell is Asteroid: void, mono labels, cyan and magenta. Each project's brand section is set in that brand's own colours and fonts.
   Mobile first. Transform and opacity only for motion. */

/* ---------- gallery ---------- */
.cpt{position:relative;background:var(--void);color:var(--ink);padding:clamp(72px,11vh,130px) 0;overflow:clip;isolation:isolate}
.cpt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(45% 35% at 85% 8%,rgba(122,92,255,.16),transparent 70%),radial-gradient(40% 30% at 10% 60%,rgba(34,232,255,.07),transparent 70%)}
.cpt .head{display:grid;gap:16px;max-width:780px;margin-bottom:clamp(26px,4vw,40px)}
.cpt .k{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--cyan)}
.cpt h2{font-family:var(--head);font-weight:800;font-size:clamp(34px,5.4vw,76px);line-height:.98;letter-spacing:-.035em;margin:0;text-wrap:balance}
.cpt .head p{margin:0;color:var(--mute);font-size:clamp(15px,1.25vw,18px);line-height:1.6;max-width:62ch}
.cpt-f{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.cpt-f button{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:11px 16px;border-radius:999px;border:1px solid rgba(244,244,248,.14);background:transparent;color:var(--mute);cursor:pointer;transition:color .3s,border-color .3s,box-shadow .3s}
.cpt-f button[aria-pressed="true"]{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 16px rgba(34,232,255,.22)}
.cpt-f button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cpt-g{display:grid;grid-template-columns:1fr;gap:14px}
.cc{position:relative;display:block;border-radius:14px;overflow:hidden;background:#14141E;color:var(--ink);text-decoration:none;aspect-ratio:16/10;isolation:isolate;outline:1px solid rgba(244,244,248,.06);outline-offset:-1px}
.cc .im{position:absolute;inset:0}
.cc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s var(--ease-out),transform 1.1s var(--ease-out)}
.cc .is{opacity:0}
.cc::after{content:"";position:absolute;inset:auto 0 0;height:55%;background:linear-gradient(180deg,transparent,rgba(8,8,14,.86));z-index:1;pointer-events:none}
.cc .tx{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:grid;gap:3px}
.cc .tx b{font-family:var(--head);font-weight:700;font-size:clamp(16px,1.35vw,20px);letter-spacing:-.01em}
.cc .tx i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,244,248,.7)}
.cc:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (hover:hover){
  .cc:hover img{transform:scale(1.045)}
  .cpt-g[data-view="all"] .cc:hover .is{opacity:1}
  .cpt-g[data-view="all"] .cc:hover .ib{opacity:0}
  .cc:hover{box-shadow:0 0 0 1px rgba(34,232,255,.35),0 18px 50px -20px rgba(34,232,255,.35)}
}
.cpt-g[data-view="social"] .cc{aspect-ratio:4/5}
.cpt-g[data-view="social"] .is{opacity:1}
.cpt-g[data-view="social"] .ib{opacity:0}
.cpt-g[data-view="social"] .cc::after{height:30%}
@media (min-width:640px){
  .cpt-g{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .cpt-g{grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(190px,17vw,270px);grid-auto-flow:dense;gap:16px}
  .cpt-g .cc{aspect-ratio:auto}
  .cpt-g .s-w{grid-column:span 2}
  .cpt-g .s-t{grid-row:span 2}
  .cpt-g .s-b{grid-column:span 2;grid-row:span 2}
  .cpt-g[data-view="social"]{grid-auto-rows:auto}
  .cpt-g[data-view="social"] .cc{grid-column:auto;grid-row:auto;aspect-ratio:4/5}
}

/* ---------- project page ---------- */
.pj{background:var(--void);color:var(--ink)}
.pj-hero{position:relative;overflow:clip;isolation:isolate}
.pj-hero .crumbs{margin-bottom:18px}
.pj-name{margin:0;font-size:clamp(44px,8vw,120px);line-height:.95;letter-spacing:-.02em;text-wrap:balance}
.pj-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.pj-meta span{display:inline-flex;align-items:center;gap:18px}
.pj-meta span+span::before{content:"";width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.6;margin-left:-11px}
.pj-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* variant: full bleed */
.v-full{min-height:min(88svh,860px);display:flex;align-items:flex-end;padding:120px 0 clamp(36px,6vh,64px)}
.v-full .pj-pic{position:absolute;inset:0;z-index:-2}
.v-full .shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,11,18,.55) 0,rgba(11,11,18,0) 30%,rgba(11,11,18,.25) 55%,rgba(11,11,18,.92) 100%)}
.v-full .wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.v-full .pj-meta{color:rgba(244,244,248,.8)}
/* variant: split */
.v-split{display:grid;grid-template-columns:1fr}
.v-split .side{background:var(--hb);color:var(--ht);padding:110px var(--gutter) 40px;display:flex;align-items:flex-end}
.v-split .side .crumbs,.v-split .side .crumbs a{color:var(--ht);opacity:.8}
.v-split .pj-pos{margin:22px 0 0;max-width:44ch;font-size:clamp(15px,1.2vw,18px);line-height:1.55;opacity:.85}
.v-split .pj-pic{aspect-ratio:3/2}
@media (min-width:900px){.v-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:min(86svh,820px)}.v-split .side{padding:120px clamp(28px,4vw,64px) 64px var(--gutter)}.v-split .pj-pic{aspect-ratio:auto;height:100%}}
/* variant: framed */
.v-frame{background:var(--hb);color:var(--ht);padding:120px 0 clamp(28px,5vw,56px)}
.v-frame .crumbs,.v-frame .crumbs a{color:var(--ht);opacity:.75}
.v-frame .wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.v-frame .fr{margin-top:clamp(26px,4vw,48px)}
.v-frame .pj-pic{display:block;aspect-ratio:21/9;border-radius:16px;overflow:hidden}
@media (max-width:760px){.v-frame .pj-pic{aspect-ratio:4/3}}

.pj-note{width:min(100% - 2*var(--gutter),var(--max));margin:22px auto 0}
.pj-note p{margin:0;font-size:14px;line-height:1.55;color:var(--mute);max-width:80ch;border-left:2px solid var(--cyan);padding-left:14px}
.pj-note b{color:var(--ink);font-weight:600}

.pj-h{display:flex;align-items:baseline;gap:16px;margin-bottom:clamp(24px,4vw,44px)}
.pj-h .n{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--cyan)}
.pj-h h2{margin:0;font-family:var(--head);font-weight:800;font-size:clamp(30px,4.4vw,60px);letter-spacing:-.03em;line-height:1}

/* brand section: the brand's own world */
.pj-brand{background:var(--bl);color:var(--bi);padding:clamp(64px,9vw,120px) 0;margin-top:clamp(40px,6vw,72px)}
.pj-brand .pj-h .n{color:var(--bd)}
.pj-brand .pj-h h2{font-family:var(--hf),var(--head);color:var(--bd)}
.pj-brand h3{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bi);opacity:.7;margin:clamp(44px,6vw,72px) 0 16px}
.pj-intro{display:grid;gap:28px}
.pj-intro .pos{margin:0;font-size:clamp(22px,2.6vw,38px);line-height:1.2;color:var(--bd);max-width:30ch;text-wrap:balance}
.pj-intro .facts{display:grid;gap:18px}
.pj-intro .facts span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.pj-intro .facts p{margin:0;font-family:var(--bf),var(--body);font-size:15.5px;line-height:1.55}
:where(.pj) .chips{display:flex;flex-wrap:wrap;gap:6px}
:where(.pj) .chips span{display:inline-block!important;font-family:var(--bf),var(--body)!important;font-size:13px!important;letter-spacing:0!important;text-transform:none!important;opacity:1!important;margin:0!important;padding:6px 12px;border-radius:999px;border:1px solid currentColor}
@media (min-width:900px){.pj-intro{grid-template-columns:1.2fr 1fr;align-items:start}}

:where(.pj) .logos{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
:where(.pj) .logos .t{position:relative;min-width:0;overflow:hidden;margin:0;border-radius:14px;min-height:190px;display:grid;place-items:center;padding:36px 20px 44px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
:where(.pj) .logos .t figcaption{position:absolute;left:16px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--bi);opacity:.7}
:where(.pj) .logos .t-main{min-height:260px}
:where(.pj) .logos .ic{display:block;width:96px;height:96px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
@media (min-width:700px){:where(.pj) .logos{grid-template-columns:repeat(2,minmax(0,1fr))}:where(.pj) .logos .t-main{grid-column:span 2}}
@media (min-width:1100px){:where(.pj) .logos{grid-template-columns:repeat(4,minmax(0,1fr))}:where(.pj) .logos .t-main{grid-column:span 2;grid-row:span 2;min-height:400px}}

/* live lockup */
.lk{--k:calc(var(--s)*var(--fit,1));display:inline-flex;align-items:center;gap:calc(var(--k)*16px);font-size:calc(var(--k)*1px);max-width:100%}
:where(.pj) .lk .mk{flex:none;display:block;height:calc(var(--k)*64px);width:calc(var(--k)*64px*var(--ar));-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
:where(.pj) .lk .wm{display:flex;flex-direction:column;gap:calc(var(--k)*6px);min-width:0}
:where(.pj) .lk .wm b{font-size:calc(var(--k)*40px);line-height:.95;white-space:nowrap}
:where(.pj) .lk .wm i{font-style:normal;font-family:var(--bf),var(--body);font-weight:500;font-size:calc(var(--k)*9.5px);letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
:where(.pj) .lk-s{flex-direction:column;text-align:center}
:where(.pj) .lk-s .mk{height:calc(var(--k)*84px);width:calc(var(--k)*84px*var(--ar))}
:where(.pj) .lk-s .wm{align-items:center}

:where(.pj) .pal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
:where(.pj) .sw{position:relative;display:grid;align-content:end;gap:2px;min-height:150px;padding:14px;border:0;border-radius:14px;background:var(--c);color:var(--t);text-align:left;cursor:pointer;font:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .35s var(--ease-out)}
:where(.pj) .sw .chip{display:none}
:where(.pj) .sw b{font-family:var(--bf),var(--body);font-weight:600;font-size:15px}
:where(.pj) .sw i{font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.06em}
:where(.pj) .sw em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;position:absolute;top:12px;left:14px}
:where(.pj) .sw.ok::after{content:"Copied";position:absolute;top:12px;right:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
:where(.pj) .sw:focus-visible{outline:2px solid var(--bd);outline-offset:3px}
@media (hover:hover){:where(.pj) .sw:hover{transform:translateY(-4px)}}
@media (min-width:700px){:where(.pj) .pal{grid-template-columns:repeat(5,1fr)}:where(.pj) .sw{min-height:220px}}
:where(.pj) .hint{margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

:where(.pj) .type{display:grid;gap:14px}
:where(.pj) .spec{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;background:rgba(255,255,255,.5);border-radius:14px;padding:22px}
:where(.pj) .spec .aa{font-size:clamp(64px,8vw,120px);line-height:.85;color:var(--bd)}
:where(.pj) .spec b{display:block;font-size:clamp(20px,2vw,26px);font-weight:400}
:where(.pj) .spec i{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;margin:6px 0 12px}
:where(.pj) .spec .abc{margin:0;font-size:clamp(16px,1.6vw,22px);line-height:1.35;word-break:break-word}
:where(.pj) .spec .para{margin:0;font-size:15.5px;line-height:1.6;max-width:60ch}
:where(.pj) .hier{list-style:none;margin:0;padding:22px;border-radius:14px;border:1px solid rgba(0,0,0,.1);display:grid;gap:12px;font-size:clamp(15px,1.6vw,19px);color:var(--bi)}
:where(.pj) .hier li:first-child{color:var(--bd)}
@media (min-width:1000px){:where(.pj) .type{grid-template-columns:1fr 1fr}:where(.pj) .hier{grid-column:span 2}}

:where(.pj) .duo{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(8px,3vw,40px)}:where(.pj) .duo>div{min-width:0}
:where(.pj) .duo p{font-family:var(--bf),var(--body);font-size:15.5px;line-height:1.6;max-width:60ch}
:where(.pj) .pat{height:clamp(200px,24vw,320px);border-radius:14px;background-size:cover;background-position:center}
:where(.pj) .duo .ph{display:block;width:100%;height:clamp(240px,28vw,380px);object-fit:cover;border-radius:14px}
:where(.pj) .say{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;font-size:clamp(20px,2.2vw,30px);line-height:1.15;color:var(--bd)}
:where(.pj) .say li{padding-left:18px;border-left:3px solid var(--ba)}
:where(.pj) .space{position:relative;display:grid;place-items:center;padding:34px 46px;width:100%;border:1.5px dashed currentColor;border-radius:4px;opacity:.95;max-width:100%}
:where(.pj) .space .x{position:absolute;font-family:var(--mono);font-size:11px;opacity:.6}
:where(.pj) .space .x1{top:8px;left:50%;transform:translateX(-50%)}:where(.pj) .space .x2{left:12px;top:50%;transform:translateY(-50%)}
:where(.pj) .soc{margin-top:14px}
@media (min-width:900px){:where(.pj) .duo{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* social, chat, overview: back in Asteroid's world */
.pj-social,.pj-chat,.pj-over{padding:clamp(64px,9vw,120px) 0;position:relative}
.pj-social::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(40% 35% at 20% 30%,color-mix(in srgb,var(--bd) 45%,transparent),transparent 70%)}
.pj-social .wrap,.pj-chat .wrap{position:relative}
:where(.pj) .post{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
.pf{margin:0;max-width:540px;width:100%;justify-self:center;border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(244,244,248,.08)}
.pf img{display:block;width:100%;height:auto}
:where(.pj) .pc .k{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
:where(.pj) .pc .cap{font-size:clamp(18px,1.7vw,23px);line-height:1.5;margin:16px 0 0;max-width:44ch}
:where(.pj) .pc .why{color:var(--mute);font-size:15px;line-height:1.6;margin:16px 0 0;max-width:52ch}
@media (min-width:900px){:where(.pj) .post{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

:where(.pj) .chat{display:grid;gap:clamp(24px,4vw,64px);align-items:center}
:where(.pj) .phone{justify-self:center;width:min(100%,340px);border-radius:42px;padding:10px;background:#1b1b24;box-shadow:0 0 0 1px rgba(244,244,248,.1),0 30px 80px -30px rgba(122,92,255,.45)}
:where(.pj) .phone img{display:block;width:100%;height:auto;border-radius:32px}
:where(.pj) .ct p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;margin:0;max-width:42ch}
:where(.pj) .ct .small{margin-top:16px;font-size:14px;color:var(--mute)}
@media (min-width:900px){:where(.pj) .chat{grid-template-columns:auto 1fr}}

:where(.pj) .ovg{display:grid;gap:22px;margin:0}
:where(.pj) .ovg div{border-top:1px solid rgba(244,244,248,.12);padding-top:16px}
:where(.pj) .ovg dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan);margin-bottom:8px}
:where(.pj) .ovg dd{margin:0;font-size:clamp(16px,1.4vw,19px);line-height:1.55;max-width:46ch}
@media (min-width:800px){:where(.pj) .ovg{grid-template-columns:1fr 1fr;gap:28px 48px}}
:where(.pj) .svc{margin-top:36px}
:where(.pj) .svc span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
:where(.pj) .svc ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
:where(.pj) .svc li{padding:8px 14px;border-radius:999px;border:1px solid rgba(34,232,255,.4);font-size:14px}
.pj-over .act{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}

.pj-rel{padding:clamp(48px,7vw,96px) 0 clamp(72px,10vw,130px);border-top:1px solid rgba(244,244,248,.08)}
.pj-rel h2{font-family:var(--head);font-weight:800;font-size:clamp(26px,3vw,40px);letter-spacing:-.03em;margin:0 0 24px}
:where(.pj) .rg{display:grid;gap:16px}
:where(.pj) .rc{display:grid;gap:6px;color:var(--ink);text-decoration:none}
:where(.pj) .rc .im{display:block;border-radius:12px;overflow:hidden;aspect-ratio:3/2}
:where(.pj) .rc img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out)}
:where(.pj) .rc b{font-family:var(--head);font-weight:700;font-size:18px;margin-top:8px}
:where(.pj) .rc i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media (hover:hover){:where(.pj) .rc:hover img{transform:scale(1.05)}}
@media (min-width:760px){:where(.pj) .rg{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){.cc img,:where(.pj) .rc img,:where(.pj) .sw{transition:none}}
/* social view: the post is the picture, so the label only shows on hover or focus */
.cpt-g[data-view="social"] .cc::after,.cpt-g[data-view="social"] .tx{opacity:0;transition:opacity .35s}
.cpt-g[data-view="social"] .cc:hover::after,.cpt-g[data-view="social"] .cc:hover .tx,.cpt-g[data-view="social"] .cc:focus-visible .tx,.cpt-g[data-view="social"] .cc:focus-visible::after{opacity:1}