:root{--ch:66vh;--top:17vh;--ink:#101014;--ink2:#4b4a55;--mono:'JetBrains Mono',monospace;--ease:cubic-bezier(.16,1,.3,1);--acc:#f90273}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip}
body{font-family:'Poppins',sans-serif;color:var(--ink);background:#f1ead6;overflow-x:hidden;overflow-x:clip}
a{color:inherit;text-decoration:none}

/* giant faint mark drifting behind everything, the way Lusion drifts a leaf shadow */
.ghost{fill:#ff7a03;position:fixed;left:8vw;top:-12vh;width:95vh;opacity:.055;pointer-events:none;z-index:0;will-change:transform}

/* ---------- header ---------- */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 30px;pointer-events:none}
header > *{pointer-events:auto}
.logo{display:flex;align-items:center;gap:9px;font-family:'Anton',sans-serif;font-size:24px;letter-spacing:.03em;color:var(--ink);transition:color .35s}
.logo svg{height:25px;width:auto}
header.over .logo{color:#fff}
.hpill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:99px;background:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 6px 18px rgba(16,16,20,.08);transition:transform .4s var(--ease)}
.hpill:hover{transform:translateY(-2px)}
.hpill.dark{background:#15151b;color:#fff}
.hpill i{width:5px;height:5px;border-radius:50%;background:currentColor}
.hmid{position:absolute;left:50%;transform:translateX(-50%)}
.crumbs{display:flex;gap:6px;align-items:center}
.crumb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:99px;background:rgba(255,255,255,.92);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(16,16,20,.1);cursor:pointer;opacity:0;transform:translateY(-10px) scale(.85);transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s;pointer-events:none;backdrop-filter:blur(8px);white-space:nowrap}
.crumb.on{opacity:1;transform:none;pointer-events:auto}
.crumb:hover{transform:translateY(-2px);background:#fff}
.crumb i{width:5px;height:5px;border-radius:50%;flex:none}
header.over .crumb{background:rgba(21,21,27,.85);color:#f3f2f7;box-shadow:0 4px 14px rgba(0,0,0,.25)}
header.over .crumb:hover{background:rgba(21,21,27,.95)}
.hright{display:flex;gap:8px}
.hpill.back{color:#101014}

/* ---------- the strip ---------- */
#stage{position:fixed;inset:0;overflow:hidden;z-index:1}
#strip{position:absolute;left:0;top:0;height:100%;display:flex;align-items:flex-start;will-change:transform}
#spacer{width:1px}
.intro{flex:none;width:max(46vw,600px);height:100%;padding:0 4vw 0 30px;display:flex;flex-direction:column;justify-content:center;position:relative}
.intro h1{font-size:clamp(40px,4.6vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1.02;overflow:hidden;padding-bottom:.08em}
.intro h1 span{display:block}
.intro .tag{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(16,16,20,.25);border-radius:99px;padding:5px 10px;margin-bottom:22px}
.intro .cols{display:grid;grid-template-columns:1.25fr .75fr;gap:44px;margin-top:30px}
.intro p{font-size:13.5px;line-height:1.65;color:var(--ink2);max-width:42ch}
.intro .lst b{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);font-weight:500;margin:0 0 8px}
.intro .lst span{display:block;font-size:13px;line-height:1.55}
.intro .lst b + span{margin-top:0}.intro .lst b:not(:first-child){margin-top:20px}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;height:44px;padding:0 20px;border-radius:99px;background:#fff;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 8px 22px rgba(16,16,20,.1);transition:transform .4s var(--ease),background .3s,color .3s}
.cta i{width:6px;height:6px;border-radius:50%;background:var(--acc)}
.cta:hover{transform:translateY(-2px);background:#15151b;color:#fff}
.scrollhint{position:absolute;right:4vw;bottom:9vh;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}

.card{flex:none;height:var(--ch);margin-top:var(--top);margin-right:38px;border-radius:14px;overflow:hidden;position:relative;background:#16161d;
  box-shadow:0 30px 70px rgba(16,16,20,.16);will-change:transform}
.w258{width:calc(var(--ch)*2.58)}.w074{width:calc(var(--ch)*.735)}.w195{width:calc(var(--ch)*1.95)}.w178{width:calc(var(--ch)*1.78)}.w165{width:calc(var(--ch)*1.65)}.w150{width:calc(var(--ch)*1.5)}.w140{width:calc(var(--ch)*1.4)}
.cap{position:absolute;left:18px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);z-index:4}
.card.light .cap{color:rgba(16,16,20,.5)}

/* full-bleed breaker panels */
.breaker{flex:none;width:82vw;height:100%;position:relative;overflow:hidden;margin-right:38px;background:#0b0b10}
.breaker > img{position:absolute;top:0;left:-14%;width:128%;height:100%;object-fit:cover;will-change:transform;filter:saturate(.95) contrast(1.05)}
.breaker::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 45%,transparent 30%,rgba(7,7,10,.55));pointer-events:none}
.device{position:absolute;z-index:2;will-change:transform}
.phone{left:50%;top:50%;width:min(30vh,300px);aspect-ratio:9/19;margin:-32vh 0 0 -15vh;border-radius:38px;background:#0c0c11;border:7px solid #1d1d25;transform:rotate(-16deg);
  box-shadow:0 60px 90px rgba(0,0,0,.55),inset 0 0 0 1.5px rgba(255,255,255,.14);overflow:hidden}
.phone.flat{transform:rotate(58deg) skewX(-18deg) scale(1.1)}
.laptop{left:50%;top:50%;width:min(92vh,62vw);margin:-30vh 0 0 calc(min(92vh,62vw) / -2)}
.laptop .scr{aspect-ratio:16/10;border-radius:14px 14px 0 0;background:#0c0c11;border:8px solid #1d1d25;border-bottom-width:12px;overflow:hidden;box-shadow:0 50px 90px rgba(0,0,0,.5)}
.laptop .base{height:14px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#c9c9d0,#8d8d98)}

/* mini product UI used inside cards and devices */
.ui{position:absolute;inset:0;background:linear-gradient(180deg,#15151d,#0b0b10);color:#f3f2f7;padding:5.5% 6%;display:flex;flex-direction:column;gap:4.5%;font-size:calc(var(--ch)*.019)}
.device .ui{font-size:11px}
.ui .bar{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.82em;color:#8d8c9c;letter-spacing:.08em;text-transform:uppercase}
.ui .bar b{display:flex;align-items:center;gap:.5em;color:#fff;font-family:'Anton',sans-serif;font-size:1.5em;letter-spacing:.04em;font-weight:400}
.ui .big{font-size:3.6em;font-weight:600;letter-spacing:-.04em;line-height:1}
.ui .big small{display:block;font-family:var(--mono);font-size:.22em;letter-spacing:.14em;text-transform:uppercase;color:#8d8c9c;font-weight:400;margin-top:.9em}
.ui .row{display:flex;justify-content:space-between;align-items:center;padding:.85em 1em;border-radius:.7em;background:linear-gradient(180deg,#1c1c26,#12121a);border:1px solid rgba(255,255,255,.06);font-family:var(--mono);font-size:.86em;color:#a6a5b4}
.ui .row em{font-style:normal;padding:.25em .6em;border-radius:.4em;background:var(--acc);color:#fff;font-size:.85em}
.ui .row.ok em{background:#1f8f5f}
.ui .grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:5%;flex:1;min-height:0}
.ui .col{display:flex;flex-direction:column;gap:.7em;min-height:0}
.ui svg.spark{width:100%;flex:1;min-height:0}
.ui .btn{align-self:flex-start;padding:.8em 1.3em;border-radius:99px;background:var(--acc);color:#fff;font-weight:600;font-size:.9em}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* live hero card */
.live canvas{position:absolute;inset:0;width:100%;height:100%}

/* code card */
.code{background:#111117;font-family:var(--mono);font-size:calc(var(--ch)*.0215);line-height:1.75;color:#a6a5b4;padding:calc(var(--ch)*.075) calc(var(--ch)*.09)}
.code .tabs{display:flex;gap:1.6em;font-size:.8em;color:#6f6e7c;margin-bottom:1.6em;letter-spacing:.06em}
.code .tabs b{color:#fff;font-weight:500;border-bottom:1.5px solid var(--acc);padding-bottom:.4em}
.code i{font-style:normal;color:#6f6e7c}.code u{text-decoration:none;color:var(--acc)}.code s{text-decoration:none;color:#ffce03}

/* ---------- shipped product: Glitch9, shown in its own black, green and type ---------- */
.intro.dark{color:#f3f2f7}
.intro.dark p{color:#a9a8b6}
.intro.dark .lst span{color:#e4e3ec}
.intro.g9 h1{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.005em;font-size:clamp(52px,6.2vw,104px);line-height:1;white-space:nowrap}
.intro.g9 h1 em{font-style:normal;color:var(--acc)}
.intro.g9 .tag{display:inline-flex;align-items:center;gap:8px;border-color:rgba(255,255,255,.25);font-family:'Geist Mono',var(--mono)}
.intro.g9 .tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.intro.g9 p,.intro.g9 .lst span{font-family:'Geist','Poppins',sans-serif}
.intro.g9 .lst b{font-family:'Geist Mono',var(--mono)}
.intro.g9 .cta{background:var(--acc);color:#050505}
.intro.g9 .cta i{background:#050505}
.intro.g9 .cta:hover{background:#fff;color:#050505}
/* ---------- shipped product: RadiantView, in its own navy, cyan and type ---------- */
.intro.rv h1{font-family:'Titillium Web',sans-serif;font-weight:600;letter-spacing:-.015em;font-size:clamp(46px,5.5vw,92px);line-height:1.04;white-space:nowrap}
.intro.rv h1 em{font-style:normal;color:var(--acc)}
.intro.rv .tag{display:inline-flex;align-items:center;gap:8px;border-color:rgba(255,255,255,.25)}
.intro.rv .tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.intro.rv p,.intro.rv .lst span{font-family:'Inter','Poppins',sans-serif}
.intro.rv .cta{background:#fff;color:#0b1120}
.intro.rv .cta:hover{background:var(--acc);color:#0b1120}
/* ---------- shipped product: BitNautic, in its own navy, blue and type ---------- */
.intro.bn h1{font-family:'Jost',sans-serif;font-weight:500;letter-spacing:-.02em;font-size:clamp(40px,4.3vw,72px);line-height:1.06;white-space:nowrap}
.intro.bn h1 em{font-style:normal;color:var(--acc)}
.intro.bn .tag{display:inline-flex;align-items:center;gap:8px;border-color:rgba(255,255,255,.25)}
.intro.bn .tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.intro.bn p,.intro.bn .lst span{font-family:'Jost','Poppins',sans-serif;font-size:14.5px}
.intro.bn .cta{background:var(--acc);color:#fff}
.intro.bn .cta i{background:#fff}
.intro.bn .cta:hover{background:#fff;color:#10152e}
/* ---------- shipped product: ARC PEM, in its own ink, indigo and type ---------- */
.intro.arc h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;letter-spacing:-.035em;font-size:clamp(42px,4.8vw,80px);line-height:1.04;white-space:nowrap}
.intro.arc h1 em{font-style:normal;color:var(--acc)}
.intro.arc .tag{display:inline-flex;align-items:center;gap:8px;border-color:rgba(255,255,255,.25)}
.intro.arc .tag i{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
.intro.arc p,.intro.arc .lst span{font-family:'Inter','Poppins',sans-serif}
.intro.arc .cta{background:var(--acc);color:#fff}
.intro.arc .cta i{background:#fff}
.intro.arc .cta:hover{background:#fff;color:#0f1024}
.intro.sc .cta{background:var(--acc);color:#0a0a0a}
.intro.sc .cta i{background:#0a0a0a}
.intro.sc .cta:hover{background:#fff;color:#0a0a0a}
.card.shot{background:#050505;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.shot img,.device img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
/* RadiantView, BitNautic and ARC PEM screens get a soft vignette, so the bright ones sit in the dark page */
.shot.rvs::after,.shot.bns::after,.shot.arcs::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(115% 105% at 50% 46%,transparent 52%,rgba(7,11,22,0.5) 86%,rgba(7,11,22,0.82) 100%)}
.shot .cap{left:14px;bottom:12px;padding:7px 10px;border-radius:7px;background:rgba(5,5,5,.78);color:rgba(255,255,255,.8)}
.breaker.g9b{--edge:#050505;--glow:rgba(69,248,130,.34)}
.breaker.rvb{--edge:#0b1120;--glow:rgba(65,184,213,.4)}
.breaker.bnb{--edge:#10152e;--glow:rgba(61,141,255,.42)}
.breaker.arcb{--edge:#0f1024;--glow:rgba(99,102,241,.45)}
.breaker.g9b,.breaker.rvb,.breaker.bnb,.breaker.arcb{background:var(--edge)}
/* behind the phones: a frame from the product's own home screen, far out of focus, under a light in its accent colour */
.breaker.g9b > img,.breaker.rvb > img,.breaker.bnb > img,.breaker.arcb > img{object-position:88% 40%;transform:scale(1.14);filter:blur(22px) brightness(.84) saturate(1.35)}
.breaker.rvb > img{object-position:80% 55%;filter:blur(18px) brightness(1.15) saturate(1.3)}
.breaker.bnb > img{object-position:70% 40%;filter:blur(20px) brightness(.62) saturate(1.25)}
.breaker.arcb > img{object-position:70% 40%;filter:blur(20px) brightness(.4) saturate(1.4)}
.breaker.g9b::before,.breaker.rvb::before,.breaker.bnb::before,.breaker.arcb::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 34% at 50% 86%,var(--glow),transparent 72%),linear-gradient(color-mix(in srgb,var(--edge) 50%,transparent),transparent 30%,transparent 66%,color-mix(in srgb,var(--edge) 85%,transparent)),linear-gradient(90deg,var(--edge),transparent 16%,transparent 84%,var(--edge))}
.trio{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:3.4vh}
.trio .ph{position:relative;flex:none;width:min(25vh,250px);aspect-ratio:390/844;border-radius:30px;border:6px solid #1d1d25;background:#0c0c11;overflow:hidden;will-change:transform;
  box-shadow:0 50px 90px rgba(0,0,0,.6),inset 0 0 0 1.5px rgba(255,255,255,.14)}
.trio .ph:nth-child(1){transform:translateY(5vh) rotate(-6deg)}
.trio .ph:nth-child(2){transform:translateY(-3vh)}
.trio .ph:nth-child(3){transform:translateY(5vh) rotate(6deg)}
.trio .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* next project teaser + end */
.next{flex:none;width:72vw;height:100%;position:relative;display:flex;align-items:center;padding-left:9vw}
.next h2{font-size:clamp(40px,4.6vw,76px);font-weight:500;letter-spacing:-.045em;line-height:1.02;color:rgba(16,16,20,.28)}
.next .np{position:absolute;left:9vw;bottom:9vh;display:flex;align-items:center;gap:14px;font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.next .np u{display:block;width:90px;height:2px;background:rgba(128,128,136,.35);text-decoration:none;position:relative}
.next .np u i{position:absolute;left:0;top:0;bottom:0;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
.end{flex:none;width:100vw;height:100%;display:flex;flex-direction:column;justify-content:center;padding:0 9vw;color:#f3f2f7}
.end small{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8d8c9c}
.end a.h{font-size:clamp(46px,7vw,120px);font-weight:500;letter-spacing:-.05em;line-height:1;margin-top:18px;display:inline-block;align-self:flex-start;position:relative}
.end a.h::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.045em;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.end a.h:hover::after{transform:scaleX(1)}
.end .row{display:flex;gap:10px;margin-top:38px}
.end .hpill{color:#101014}

/* load-in */
.rise{transform:translateY(110%);transition:transform 1.1s var(--ease)}
.ready .rise{transform:none}
.fadein{opacity:0;transform:translateY(14px);transition:opacity .9s .25s,transform .9s .25s var(--ease)}
.ready .fadein{opacity:1;transform:none}
.slidein{transform:translateX(26vw);opacity:0;transition:transform 1.4s var(--ease),opacity .8s}
.ready .slidein{transform:none;opacity:1}

/* phones: plain vertical stack */
@media (max-width:900px){
  :root{--ch:54vw;--top:0px}
  #stage{position:static;overflow:visible}
  #strip{position:static;flex-direction:column;height:auto;transform:none !important;padding-top:90px}
  #spacer{display:none}
  .intro{width:100%;height:auto;padding:20px 20px 40px}.intro .cols{grid-template-columns:1fr}
  .scrollhint{display:none}
  .card{width:calc(100% - 32px) !important;margin:0 16px 16px}
  .breaker{width:100%;height:84vw;margin:10px 0 26px}
  .next{width:100%;height:auto;padding:60px 20px}.next .np{position:static;margin-top:20px}
  .next{flex-direction:column;align-items:flex-start}
  .end{width:100%;height:auto;padding:90px 20px;background:#0b0b10}
  .hmid:not(.crumbs){display:none}
  .hpill.back span{display:none}
  .crumbs{position:static;transform:none;margin-left:auto;margin-right:8px;flex-wrap:wrap;gap:4px}
  .phone{width:38vw;margin:-40vw 0 0 -19vw}
  body{transition:background .5s}
  .intro.g9 h1{font-size:13.5vw}
  .intro.rv h1{font-size:12vw}
  .intro.bn h1{font-size:9.4vw}
  .intro.arc h1{font-size:9.6vw}
  .card.shot.fit{height:auto}.card.shot.fit img{position:static;height:auto}
  .trio{gap:3vw}.trio .ph{width:27vw;border-radius:18px;border-width:4px}
  .laptop{width:86vw;margin:-28vw 0 0 -43vw}
}