/* Geist and Geist Mono (SIL OFL 1.1), latin subset, served from our own domain. */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/geist-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/geist-mono-latin.woff2) format('woff2')}

:root{
  --void:#05060A;
  --ink:#D6D9E1;
  --ink-2:#9A9FAD;
  --hair:rgba(214,217,225,.14);
  --ion-500:#3D7BFF; --ion-600:#2563EB;
  --ease:cubic-bezier(.16,1,.3,1);
  --edge:clamp(12px,1.6vw,24px);
  --bar-h:44px;
  --sans:'Geist',ui-sans-serif,system-ui,sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--sans);background:var(--void);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:1px solid var(--ion-500);outline-offset:3px}
::selection{background:var(--ion-600);color:#fff}

/* ---------- hero ---------- */
.hero{position:relative;height:220svh}
.hero-pin{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;isolation:isolate;background:var(--void)}

.hero-title{position:absolute;left:0;right:0;top:0;z-index:1;text-align:center;text-transform:uppercase;
  font-weight:700;line-height:.81;letter-spacing:-.077em;color:var(--ink);font-size:14vw;
  padding-top:.1em;white-space:nowrap;user-select:none}
.hero-title .line{display:block;overflow:hidden;padding:0 .04em .06em}
.hero-title .in{display:inline-block;transform:translateY(105%);transition:transform 1.25s var(--ease)}
.ready .hero-title .in{transform:none}
.ready .hero-title .line:nth-child(2) .in{transition-delay:.09s}

.hero-media{position:absolute;inset:0;z-index:2;mix-blend-mode:screen;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease) .35s}
.ready .hero-media{opacity:1}
/* Glass passes behind the headline and dims inside the headline zone, so the letters always read. */
.hero-media{z-index:0;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) var(--hb,40%),#000 calc(var(--hb,40%) + var(--hr,16%)));mask-image:linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,.3) var(--hb,40%),#000 calc(var(--hb,40%) + var(--hr,16%)))}
.hero-media .stage{position:absolute;inset:0;will-change:transform}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media video{opacity:0;transition:opacity 1s var(--ease)}
.hero-media video.on{opacity:1}

.plus{position:absolute;z-index:3;width:13px;height:13px;color:rgba(214,217,225,.45);pointer-events:none}
.plus::before,.plus::after{content:'';position:absolute;background:currentColor}
.plus::before{left:6px;top:0;width:1px;height:13px}
.plus::after{top:6px;left:0;height:1px;width:13px}

/* Headline colour: the promise in white, the brand line in Ion. */
.hero-title{letter-spacing:-.06em;word-spacing:.08em}
.word{display:inline-block;color:#EEF1F7}
.brandline .word{color:var(--ion-500)}

/* mobile-only tagline under the headline */
.hero-tag-m{display:none}

/* ---------- HUD bar (starts mid-hero, sticks to the top) ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:40;height:var(--bar-h);display:grid;grid-template-columns:1fr auto;align-items:stretch;
  padding-left:var(--edge);will-change:transform;opacity:0;transition:opacity .9s var(--ease) .25s}
.ready .bar{opacity:1}
.bar::before{content:'';position:absolute;inset:0;background:var(--void);border-bottom:1px solid var(--hair);opacity:var(--solid,0);z-index:-1;transition:opacity .3s}
.brand{font-weight:800;font-size:19px;letter-spacing:-.045em;text-transform:uppercase;display:inline-flex;align-items:center;gap:7px;justify-self:start;align-self:center}
.brand i{width:7px;height:7px;background:var(--ion-500);display:inline-block;transform:translateY(-1px)}
.tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:-16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;opacity:var(--tag,1);pointer-events:none}
.tag p{text-shadow:0 0 14px rgba(5,6,10,.95),0 0 4px rgba(5,6,10,.9);font-size:15px;font-weight:500;letter-spacing:-.03em;line-height:1.25;color:var(--ink);max-width:340px}
.seal{width:22px;height:22px;border:1px solid rgba(214,217,225,.5);border-radius:50%;display:grid;place-items:center}
.seal svg{width:10px;height:12px;stroke:var(--ink);fill:none;stroke-width:1.3}
.right{justify-self:end;display:flex;align-items:center;height:100%}
.coords{text-shadow:0 0 14px rgba(5,6,10,.95),0 0 4px rgba(5,6,10,.9);font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;color:var(--ink);display:flex;gap:26px;margin-right:34px;font-variant-numeric:tabular-nums}
.coords b{font-weight:500;display:inline-block;min-width:4ch;text-align:right}
.cta{height:100%;min-width:206px;display:flex;align-items:center;justify-content:center;gap:12px;background:var(--ion-600);color:#fff;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;transition:background .35s}
.cta span{transition:transform .45s var(--ease)}
.cta:hover{background:var(--ion-500)}
.cta:hover span:first-child{transform:translateX(-4px)}
.cta:hover span:last-child{transform:translateX(4px)}

/* ---------- cursor: full-screen crosshair ---------- */
.cx,.cy{position:fixed;z-index:60;pointer-events:none;background:rgba(255,255,255,.2);mix-blend-mode:difference;opacity:0;transition:opacity .4s}
.cx{left:0;right:0;top:0;height:1px}
.cy{top:0;bottom:0;left:0;width:1px}
.cc{position:fixed;left:0;top:0;z-index:61;pointer-events:none;width:0;height:0;opacity:0;transition:opacity .4s}
.cc{mix-blend-mode:difference}
.cc::before,.cc::after{content:'';position:absolute;background:#fff}
.cc::before{left:-8px;top:0;width:17px;height:1px}
.cc::after{top:-8px;left:0;height:17px;width:1px}
.has-cursor .cx,.has-cursor .cy,.has-cursor .cc{opacity:1}
@media (hover:hover) and (pointer:fine){.has-cursor,.has-cursor a{cursor:none}}

@media (max-width:1180px) and (min-width:701px){.coords{display:none}}
@media (min-width:1440px){.s2-lead p{max-width:72vw}}

/* ---------- section 2: statement (light inversion, like Dialect) ---------- */
:root{--paper:#D6D9E0;--ink-d:#0B0D13;--ink-d2:#2E3340;--hair-d:rgba(11,13,19,.16)}
.s2{position:relative;z-index:5;margin-top:-100svh;background:var(--paper);color:var(--ink-d);padding:calc(var(--bar-h) + 4svh) 0 0;overflow:hidden;box-shadow:0 -30px 60px rgba(0,0,0,.35)}
.s2 .hline{position:relative;height:1px;background:var(--hair-d)}
.s2 .hline .plus{left:calc(50% - 6px);top:-6px;color:var(--ink-d)}
.s2 .plus{color:rgba(11,13,19,.55)}
.s2-grid{display:grid;grid-template-columns:1fr 1fr;position:relative}
.big{font-weight:700;text-transform:uppercase;font-size:min(9.6vw,11.5svh);line-height:.86;letter-spacing:-.065em;padding:0 var(--edge);white-space:nowrap}
.big .line{display:block;overflow:hidden;padding-bottom:.04em}
.big .in{display:inline-block;transform:translateY(105%);transition:transform 1.2s var(--ease)}
.big.seen .in{transform:none}
.big.seen .line:nth-child(2) .in{transition-delay:.08s}
.big .amp{color:var(--ion-500)}
.a-title{grid-column:1;grid-row:1}
.a-copy{grid-column:2;grid-row:1/3;align-self:end;padding:0 var(--edge) 0 4vw;max-width:calc(4vw + 460px)}
.small p{font-size:clamp(14px,1vw,16px);font-weight:500;letter-spacing:-.03em;line-height:1.35;color:var(--ink-d)}
.small p+p{margin-top:12px}
.mlink{display:inline-flex;flex-direction:column;gap:2px;margin-top:22px;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.mlink i{font-style:normal;font-family:var(--sans);font-size:15px;letter-spacing:0;transition:transform .45s var(--ease)}
.mlink:hover i{transform:translateX(6px)}
.b-title{grid-column:1/3;grid-row:3;margin-top:6svh;position:relative;z-index:1;padding-bottom:5svh}
.s2-lead{padding:64px var(--edge) 64px}
.s2-lead p{text-wrap:pretty;font-size:clamp(20px,2.1vw,36px);font-weight:500;letter-spacing:-.035em;line-height:1.2;max-width:80vw}
.s2-lead p .hl{color:#1D4ED8}

/* the HUD row over light sections */
.bar.light .brand,.bar.light .coords{color:var(--ink-d)}
.bar.light .coords{text-shadow:none}
.bar.light::before{background:var(--paper);border-bottom-color:var(--hair-d)}

/* ---------- section 3: inside rotor (Dialect "capabilities") ---------- */
.s3{position:relative;background:var(--paper);color:var(--ink-d);z-index:5}
.s3>.hline{position:relative;height:1px;background:var(--hair-d)}
.s3>.hline .plus{left:calc(50% - 6px);top:-6px;color:var(--ink-d)}
.label{font-size:11px;font-weight:700;letter-spacing:-.01em;text-transform:uppercase}
.s3{padding-bottom:clamp(48px,8svh,88px)}
.s3-head{display:flex;justify-content:space-between;padding:clamp(40px,6svh,64px) var(--edge) 20px}
.s3-head .label{font-size:16px;letter-spacing:-.04em}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--hair-d)}
.cell{position:relative;min-height:clamp(300px,46svh,420px);padding:20px var(--edge) 24px;border-right:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.cell:last-child{border-right:0}
.cell::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 60% at var(--mx,50%) var(--my,50%),rgba(61,123,255,.14),transparent 70%);opacity:0;transition:opacity .5s}
.cell:hover::before{opacity:1}
.cell .plus{left:-7px;top:-7px;color:var(--ink-d)}
.cell:first-child .plus{display:none}
.cell .num{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;position:relative}
.cell .fig{font-weight:700;text-transform:uppercase;font-size:clamp(28px,2.9vw,56px);line-height:.9;letter-spacing:-.06em;white-space:nowrap;font-variant-numeric:tabular-nums;position:relative;transition:color .5s}
.cell:hover .fig{color:var(--ion-600)}
.cell .t{font-size:17px;font-weight:500;letter-spacing:-.03em;margin-bottom:6px;position:relative}
.cell p{font-size:14px;line-height:1.4;letter-spacing:-.02em;position:relative;max-width:30ch}

/* ---------- rail: every continent ---------- */
.rail{position:relative;z-index:5;background:var(--paper);color:var(--ink-d);border-top:1px solid var(--hair-d);border-bottom:1px solid var(--hair-d);overflow:hidden;height:52px;display:flex;align-items:center}
.rail-track{display:flex;width:max-content;animation:rail 36s linear infinite}
.rail span{display:inline-flex;align-items:center;gap:40px;padding-right:40px;font-weight:700;font-size:17px;letter-spacing:-.04em;text-transform:uppercase;white-space:nowrap}
.rail span::after{content:'';width:7px;height:7px;background:var(--ink-d)}
@keyframes rail{to{transform:translateX(-50%)}}

/* ---------- footer: get rotor ---------- */
.foot{position:relative;z-index:5;background:var(--paper);color:var(--ink-d);overflow:hidden;min-height:100svh;display:grid;grid-template-rows:auto auto 1fr auto}
.foot-head{padding:clamp(64px,6.5vw,110px) 0 0;position:relative;z-index:3}
.foot-head .big{font-size:8.2vw}
.foot-head .big .line:nth-child(2){color:var(--ion-600)}
.foot-sub{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:18px var(--edge) 0;position:relative;z-index:3}
.foot-sub .label{letter-spacing:.02em}
.store{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 20px 0 16px;background:#000;color:#fff;border-radius:11px;transition:transform .5s var(--ease)}
.store:hover{transform:translateY(-2px)}
.store svg{width:21px;height:25px;fill:#fff}
.store small{display:block;font-size:9px;line-height:1;letter-spacing:.02em}
.store b{display:block;font-size:19px;font-weight:600;letter-spacing:-.03em;line-height:1.05}
.foot .hline{position:relative;height:1px;background:var(--hair-d);margin-top:clamp(40px,5vw,72px);z-index:3}
.foot .hline .plus{left:calc(50% - 6px);top:-6px;color:var(--ink-d)}
.foot-body{position:relative;display:grid;grid-template-columns:1fr 1fr;z-index:3;padding:28px 0 0}
.links{display:grid;grid-template-columns:110px 1fr;row-gap:12px;padding:0 var(--edge);align-content:start}
.links ul{list-style:none;display:grid;gap:0;margin-top:-7px}
.links li a{display:inline-block;padding:7px 0}
.links a{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;position:relative}
.links a::after{content:'';position:absolute;left:0;right:0;bottom:5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.links a:hover::after{transform:scaleX(1);transform-origin:left}
.sculpt{position:absolute;right:8%;bottom:17vw;width:min(420px,30vw);aspect-ratio:3/4;z-index:1;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 52%,#000 58%,transparent 100%)}
.sculpt img{width:100%;height:100%;object-fit:cover;will-change:transform}
.glow{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#E9EFFF 35%,#9DBBFF 78%,#6E9BFF 100%)}
.foot-bottom{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start;padding:40px var(--edge) 0;overflow:hidden}
.wordmark{font-size:29.6vw;font-weight:700;text-transform:uppercase;letter-spacing:-.075em;line-height:.74;margin:10px 0 0 -.04em;white-space:nowrap;user-select:none;display:flex;align-items:flex-end;background:linear-gradient(180deg,var(--ink-d) 0%,rgba(11,13,19,.75) 55%,rgba(11,13,19,.15) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark i{width:.12em;height:.12em;background:var(--ion-600);display:inline-block;margin-left:.04em;margin-bottom:.06em}
.foot-bottom small{font-size:10px;font-weight:500;letter-spacing:-.01em}

/* placeholder for the next sections */
.next{height:100svh;display:grid;place-items:center;border-top:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-2);text-transform:uppercase}

/* ---------- mobile ---------- */
@media (max-width:700px){
  .s2{padding-top:calc(var(--bar-h) + 40px)}
  .s2 .hline .plus{display:none}
  .s2-grid{grid-template-columns:1fr}
  .big,.foot-head .big{font-size:11vw}
  .a-title,.a-copy,.b-title{grid-column:1;grid-row:auto}
  .a-title{order:1}.b-title{order:2;margin-top:0;padding-bottom:0}.a-copy{order:3}
  .a-copy{padding:28px 16px 40px;max-width:none;align-self:start}
  .small p{font-size:14px}
  .s2-lead{padding:40px 16px 48px}
  .s2-lead p{max-width:none}
  .foot .hline .plus{display:none}
  .pgrid{grid-template-columns:1fr 1fr}
  .cell{min-height:220px;padding:16px}
  .cell:nth-child(2n){border-right:0}
  .cell .fig{font-size:5.6vw}
  .cell .t{font-size:15px}
  .cell p{font-size:13px}
  .s3-head{flex-direction:column;gap:4px;padding:40px 16px 16px}
  .rail span{font-size:15px}
  .foot-sub{padding:20px 16px 0}
  .foot-body{grid-template-columns:1fr;padding:24px 0 0}
  .links{padding:0 16px;grid-template-columns:96px 1fr}
  .sculpt{position:absolute;order:0;right:-6vw;top:calc(13.4vw + 150px);width:44vw;margin:0;z-index:1}
  .foot-sub{padding-bottom:56px;flex-direction:column;align-items:flex-start;gap:14px}
  .foot-sub{order:2}.foot-head{order:1}.foot-body-wrap{order:4}
  .foot-bottom{order:10}
  .foot{grid-template-rows:auto auto auto auto auto}
  .foot-bottom{padding:24px 16px 0}
  :root{--bar-h:48px;--edge:16px}
  .hero{height:230svh}
  .bar{background:var(--void)}
  .bar.light{background:var(--paper)}
  .tag,.coords{display:none}
  .cta{min-width:0;padding:0 18px;font-size:11px}
  .hero-title{top:calc(var(--bar-h) + 11svh);line-height:.86}
  .hero-tag-m{display:flex;position:absolute;left:0;right:0;z-index:3;flex-direction:column;align-items:center;gap:12px;text-align:center;
    opacity:0;transition:opacity 1s var(--ease) .4s}
  .ready .hero-tag-m{opacity:1}

  .hero-tag-m p{font-size:16px;font-weight:500;letter-spacing:-.03em;line-height:1.25;max-width:290px}
}
@media (prefers-reduced-motion:reduce){
  .rail-track{animation-play-state:paused}
  .hero-title .in{transform:none;transition:none}
  .hero-media,.bar,.hero-tag-m{transition:none}
}