/* ==========================================================================
   Pulsar Theory — deep field build
   Digital Strategy · Design · Development
   One page. No framework, no build step, no dependencies.
   ========================================================================== */

:root {
  /* ground */
  --void:    #04060D;
  --deep:    #080C18;
  --panel:   rgba(18,26,46,.42);
  --panel-2: rgba(12,18,34,.66);

  /* lines */
  --line:    rgba(120,190,255,.20);
  --line-2:  rgba(120,190,255,.10);
  --line-3:  rgba(120,190,255,.055);

  /* ink */
  --ink:     #EAF2FF;
  --mute:    #A6B8D8;
  --dim:     #71839F;

  /* signal — electric neon */
  --neon:    #45E0FF;
  --neon-hi: #A8F2FF;
  --neon-lo: #1C9BC4;
  --aqua:    #5FE3C0;
  --iris:    #7B8CFF;
  --glow:    rgba(69,224,255,.55);
  --glow-s:  rgba(69,224,255,.16);

  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Cormorant Garamond", Georgia, serif;

  --shell: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.7,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

img, svg { max-width: 100%; height: auto; display: block; }
h1,h2,h3,p,figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection { background: var(--neon); color: var(--void); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; z-index: 999; background: var(--neon); color: var(--void); padding: .75rem 1.25rem; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.section { padding-block: clamp(5rem, 12vw, 10.5rem); position: relative; }

/* ==========================================================================
   1 — Ignition
   ========================================================================== */
.boot {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center;
  background: var(--void);
  transition: opacity .7s var(--ease), visibility .7s;
}
.boot.gone { opacity: 0; visibility: hidden; }
.boot__in { display: grid; justify-items: center; gap: 1.6rem; }
.boot__mark { width: 92px; height: 92px; overflow: visible; }
.boot__mark circle { fill: none; stroke: var(--neon); }
.boot__r1, .boot__r2, .boot__r3 {
  stroke-width: 1; transform-origin: 60px 60px;
  stroke-dasharray: 40 260; opacity: .5;
  animation: bootSpin 2.4s linear infinite;
}
.boot__r2 { animation-duration: 1.7s; animation-direction: reverse; stroke-dasharray: 26 160; opacity: .75; }
.boot__r3 { animation-duration: 1.1s; stroke-dasharray: 14 90; }
.boot__core { fill: var(--neon); stroke: none; animation: bootCore 1.3s var(--ease) infinite; filter: drop-shadow(0 0 12px var(--glow)); }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@keyframes bootCore { 0%,100% { r: 4; opacity: .7 } 50% { r: 6.5; opacity: 1 } }

.boot__t {
  display: flex; gap: .34em;
  font-family: var(--mono); font-size: .74rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--mute);
}
.boot__t i { width: .5em; }
.boot__t span { opacity: 0; animation: bootLetter .5s var(--ease) forwards; }
.boot__t span:nth-child(1){animation-delay:.05s} .boot__t span:nth-child(2){animation-delay:.1s}
.boot__t span:nth-child(3){animation-delay:.15s} .boot__t span:nth-child(4){animation-delay:.2s}
.boot__t span:nth-child(5){animation-delay:.25s} .boot__t span:nth-child(6){animation-delay:.3s}
.boot__t span:nth-child(8){animation-delay:.38s} .boot__t span:nth-child(9){animation-delay:.43s}
.boot__t span:nth-child(10){animation-delay:.48s} .boot__t span:nth-child(11){animation-delay:.53s}
.boot__t span:nth-child(12){animation-delay:.58s} .boot__t span:nth-child(13){animation-delay:.63s}
@keyframes bootLetter { from { opacity: 0; transform: translateY(8px); filter: blur(4px) } to { opacity: 1; transform: none; filter: none } }

.boot__bar { width: 160px; height: 1px; background: var(--line-2); overflow: hidden; }
.boot__bar span { display: block; height: 100%; width: 0; background: var(--neon); box-shadow: 0 0 10px var(--glow); transition: width .2s linear; }

/* ==========================================================================
   2 — Deep field background
   ========================================================================== */
.field { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* painted fallback — the page is never flat black, even without WebGL */
.field__fall {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 42% at 74% 12%,  rgba(69,224,255,.30) 0%, transparent 62%),
    radial-gradient(52% 44% at 14% 26%,  rgba(123,140,255,.28) 0%, transparent 64%),
    radial-gradient(66% 50% at 50% 104%, rgba(95,227,192,.20) 0%, transparent 66%),
    radial-gradient(70% 60% at 88% 72%,  rgba(140,70,220,.18) 0%, transparent 68%),
    radial-gradient(150% 110% at 50% 40%, #101A38 0%, #0A1024 46%, #05070F 100%);
}
.field__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.4s var(--ease); }
.field__gl.on { opacity: 1; }

.field__grid {
  position: absolute; inset: -10%;
  background-image:
    linear-gradient(to right, var(--line-3) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-3) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, transparent 72%);
  transform: translate3d(0,0,0);
}
.field__vig {
  position: absolute; inset: 0;
  background: radial-gradient(105% 78% at 50% 42%, transparent 38%, rgba(2,4,10,.55) 78%, rgba(2,4,10,.9) 100%);
}
.field__grain {
  position: absolute; inset: -200%;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%{transform:translate(0,0)} 16%{transform:translate(-3%,-4%)} 33%{transform:translate(2%,-2%)}
  50%{transform:translate(-2%,3%)} 66%{transform:translate(3%,2%)} 83%{transform:translate(-3%,1%)} 100%{transform:translate(0,0)}
}

main, .mast, .foot, .rail, .prog { position: relative; z-index: 2; }

/* scroll trace */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; background: transparent; }
.prog span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--iris), var(--neon) 55%, var(--aqua));
  box-shadow: 0 0 14px var(--glow);
}

/* ==========================================================================
   3 — Orbit rail
   ========================================================================== */
.rail {
  position: fixed; left: max(1.15rem, 2.2vw); top: 50%; transform: translateY(-50%);
  z-index: 60; display: grid; gap: 1.15rem;
  opacity: 0; transition: opacity .6s var(--ease);
}
.rail.on { opacity: 1; }
.rail__i { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.rail__d {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  transition: all .45s var(--ease); flex: 0 0 auto;
}
.rail__l {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--dim);
  opacity: 0; transform: translateX(-6px);
  transition: all .45s var(--ease); white-space: nowrap;
}
.rail__i:hover .rail__l, .rail__i.on .rail__l { opacity: 1; transform: none; }
.rail__i:hover .rail__d { border-color: var(--neon); }
.rail__i.on .rail__d { background: var(--neon); border-color: var(--neon); box-shadow: 0 0 0 4px var(--glow-s), 0 0 14px var(--glow); }
.rail__i.on .rail__l { color: var(--neon); }
@media (max-width: 1180px) { .rail { display: none; } }

/* ==========================================================================
   4 — Cursor
   ========================================================================== */
.cur, .cur__ring { position: fixed; top: 0; left: 0; z-index: 300; pointer-events: none; opacity: 0; transition: opacity .3s; }
.cur__atom { width: 34px; height: 34px; margin: -17px 0 0 -17px; overflow: visible; }
.cur__orbits ellipse { stroke: var(--neon); stroke-opacity: .55; }
.o1 { transform: rotate(0deg); transform-origin: 30px 30px; animation: cSpin 5s linear infinite; }
.o2 { transform: rotate(60deg); transform-origin: 30px 30px; animation: cSpin 7s linear infinite reverse; }
.o3 { transform: rotate(120deg); transform-origin: 30px 30px; animation: cSpin 9s linear infinite; }
@keyframes cSpin { to { transform: rotate(360deg); } }
.cur__nuc { fill: var(--neon); filter: drop-shadow(0 0 8px var(--glow)); }
.cur__e { fill: var(--aqua); }
.e1 { offset-path: path("M4 30a26 10 0 1 1 52 0a26 10 0 1 1 -52 0"); animation: cOrbit 3.4s linear infinite; }
.e2 { offset-path: path("M4 30a26 10 0 1 1 52 0a26 10 0 1 1 -52 0"); animation: cOrbit 4.6s linear infinite reverse; }
@keyframes cOrbit { to { offset-distance: 100%; } }

.cur__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 1px solid rgba(69,224,255,.3);
  display: grid; place-items: center;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease),
              background-color .45s var(--ease), border-color .45s var(--ease), opacity .3s;
}
.cur__word {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--void); opacity: 0; transform: scale(.7); transition: all .35s var(--ease);
}
body.hot .cur__ring { width: 62px; height: 62px; margin: -31px 0 0 -31px; border-color: var(--neon); background: rgba(69,224,255,.09); }
body.view .cur__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--neon); border-color: var(--neon); box-shadow: 0 0 40px var(--glow); }
body.view .cur__word { opacity: 1; transform: none; }
body.view .cur { opacity: 0 !important; }
body.press .cur__ring { transform: scale(.82); }
@media (hover: none), (pointer: coarse) { .cur, .cur__ring { display: none; } }

/* ==========================================================================
   5 — Type
   ========================================================================== */
.label {
  display: inline-flex; align-items: flex-start; gap: .7rem;
  font-family: var(--mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--neon);
}
.label__d {
  width: 6px; height: 6px; margin-top: .48em; flex: 0 0 auto;
  border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 0 0 var(--glow); animation: ping 2.6s var(--ease) infinite;
}
@keyframes ping { 0%{box-shadow:0 0 0 0 rgba(69,224,255,.5)} 70%{box-shadow:0 0 0 10px rgba(69,224,255,0)} 100%{box-shadow:0 0 0 0 rgba(69,224,255,0)} }

.h1 {
  font-size: clamp(2.7rem, 7.6vw, 6.1rem);
  line-height: .99; letter-spacing: -.04em; font-weight: 500;
}
.h2 {
  font-size: clamp(1.95rem, 4.6vw, 3.35rem);
  line-height: 1.05; letter-spacing: -.03em; font-weight: 500;
}
.h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.18; letter-spacing: -.018em; font-weight: 500; }
.lede { font-size: clamp(1.05rem, 1.35vw, 1.22rem); line-height: 1.62; color: var(--mute); max-width: 54ch; }
em {
  font-style: normal;
  color: var(--neon);
  text-shadow: 0 0 28px rgba(69,224,255,.42), 0 0 78px rgba(69,224,255,.16);
}
em .c { color: var(--neon); }

/* split-text engine */
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.c {
  display: inline-block; will-change: transform;
  transform: translateY(115%) rotate(6deg);
  opacity: 0;
  transition: transform .95s var(--ease), opacity .7s var(--ease);
  transition-delay: calc(var(--i) * 16ms);
}
.in .c { transform: none; opacity: 1; }
.in .c { animation: chWave 8s var(--ease) infinite; animation-delay: calc(1.2s + var(--i) * 34ms); }
@keyframes chWave {
  0%, 84%, 100% { text-shadow: none; }
  89% { text-shadow: 0 0 24px rgba(69,224,255,.55), 0 0 62px rgba(69,224,255,.25); }
}

/* ==========================================================================
   6 — Masthead
   ========================================================================== */
.mast {
  position: sticky; top: 0; z-index: 70;
  border-bottom: 1px solid transparent;
  transition: background-color .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
}
.mast.stuck {
  background: rgba(5,8,16,.72);
  backdrop-filter: saturate(170%) blur(16px);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  border-bottom-color: var(--line-2);
}
.mast__in { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 82px; }

.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: 0 0 auto; overflow: visible; }
.bm__c { fill: var(--neon); filter: drop-shadow(0 0 8px var(--glow)); }
.bm__o1, .bm__o2 { fill: none; stroke: var(--neon); transform-origin: 20px 20px; }
.bm__o1 { stroke-opacity: .55; stroke-dasharray: 22 36; animation: bmSpin 9s linear infinite; }
.bm__o2 { stroke-opacity: .28; stroke-dasharray: 40 58; animation: bmSpin 14s linear infinite reverse; }
.bm__b { stroke: var(--neon); stroke-opacity: .6; stroke-width: 1.4; transform-origin: 20px 20px; animation: bmSpin 6s linear infinite; }
@keyframes bmSpin { to { transform: rotate(360deg); } }
.brand__name { font-size: 1.02rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }

/* the tagline — readable, lit, alive */
.mast__tag {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase;
  color: #C9DCF5;
}
.mast__tag .tg { position: relative; transition: color .4s var(--ease); }
.mast__tag .tg.lit { color: var(--neon); text-shadow: 0 0 16px var(--glow); }
.tg__s {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--neon); opacity: .5; flex: 0 0 auto;
}
@media (max-width: 980px) { .mast__tag { display: none; } }

/* ==========================================================================
   7 — Buttons
   ========================================================================== */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--mono); font-size: .76rem; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; text-decoration: none;
  padding: 1.1rem 1.7rem; min-height: 52px;
  border: 1px solid var(--line);
  isolation: isolate;
  transition: color .45s var(--ease), border-color .45s var(--ease);
}
.btn__l, .btn__s, .btn__a { position: relative; z-index: 2; }
.btn__s { display: none; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, var(--neon), var(--aqua));
  transform: translateY(101%); transition: transform .55s var(--ease-io);
}
.btn:hover::before { transform: none; }
.btn--go { color: var(--void); border-color: var(--neon); }
.btn--go::before { transform: none; }
.btn--go:hover::before { transform: none; filter: brightness(1.12) saturate(1.1); }
.btn--go { box-shadow: 0 0 0 0 var(--glow); transition: box-shadow .5s var(--ease), color .45s var(--ease); }
.btn--go:hover { box-shadow: 0 10px 44px -10px var(--glow); }
.btn--line { color: var(--ink); }
.btn--line:hover { color: var(--void); border-color: var(--neon); }
.btn__a { width: 20px; height: 1px; background: currentColor; position: relative; transition: width .45s var(--ease); }
.btn__a::after {
  content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px;
  border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg);
}
.btn:hover .btn__a { width: 32px; }
.btns { display: flex; flex-wrap: wrap; gap: .85rem; }
.mag { will-change: transform; }

/* ==========================================================================
   8 — Hero
   ========================================================================== */
.hero { overflow: hidden; position: relative; padding-block: clamp(3.5rem, 9vw, 7rem) clamp(4rem, 10vw, 8rem); min-height: min(92vh, 940px); display: flex; align-items: center; }
@supports (height: 100svh) { .hero { min-height: min(92svh, 940px); } }
.hero__grid {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }
.hero__title { margin-top: 1.6rem; }
.hero__lede { margin-top: 1.8rem; }
.btns { margin-top: 2.4rem; }

.hero__stats { display: flex; flex-wrap: wrap; gap: clamp(1.6rem, 4vw, 3.2rem); margin-top: 3.2rem; padding-top: 2rem; border-top: 1px solid var(--line-3); }
.st { display: grid; gap: .35rem; }
.st__n {
  font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 600; line-height: 1; letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--ink), var(--neon));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.st__l { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }

/* the pulsar */
.orb { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 480px; margin-inline: auto; width: 100%; }
.orb__stage { position: relative; width: 100%; aspect-ratio: 1; transform-style: preserve-3d; perspective: 900px; display: grid; place-items: center; }
.orb__disc {
  position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(69,224,255,.22) 18%, transparent 38%, rgba(123,140,255,.18) 62%, transparent 82%, rgba(95,227,192,.2) 96%, transparent 100%);
  filter: blur(26px); animation: orbSpin 26s linear infinite;
}
.orb__ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(69,224,255,.24);
  transform-style: preserve-3d;
}
.orb__ring.r1 { width: 88%; aspect-ratio: 1; transform: rotateX(74deg) rotateZ(0deg); animation: orbSpin 18s linear infinite; border-color: rgba(69,224,255,.34); }
.orb__ring.r2 { width: 66%; aspect-ratio: 1; transform: rotateX(70deg) rotateY(30deg); animation: orbSpin 12s linear infinite reverse; border-color: rgba(123,140,255,.32); }
.orb__ring.r3 { width: 44%; aspect-ratio: 1; transform: rotateX(66deg) rotateY(-34deg); animation: orbSpin 8s linear infinite; border-color: rgba(95,227,192,.34); }
@keyframes orbSpin { to { transform: rotate(360deg); } }
.orb__ring::after {
  content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%;
  background: var(--neon); box-shadow: 0 0 12px var(--glow); transform: translateX(-50%);
}
.orb__ring.r2::after { background: var(--iris); box-shadow: 0 0 12px rgba(123,140,255,.7); }
.orb__ring.r3::after { background: var(--aqua); box-shadow: 0 0 12px rgba(95,227,192,.7); }

.orb__beam {
  position: absolute; width: 190%; height: 2px; left: 50%; top: 50%;
  background: linear-gradient(90deg, transparent, rgba(69,224,255,.0) 12%, rgba(69,224,255,.55) 50%, rgba(69,224,255,0) 88%, transparent);
  transform-origin: 50% 50%; translate: -50% -50%;
  filter: blur(1px);
  animation: beamSweep 7s linear infinite;
}
@keyframes beamSweep { to { rotate: 360deg; } }
.orb__core {
  position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #FFFFFF 0%, var(--neon-hi) 22%, var(--neon) 52%, rgba(28,155,196,.35) 78%, transparent 100%);
  box-shadow: 0 0 60px 10px var(--glow), 0 0 140px 30px var(--glow-s);
  animation: coreBeat 3.2s var(--ease) infinite;
}
@keyframes coreBeat { 0%,100% { transform: scale(1); filter: brightness(1) } 46% { transform: scale(1.11); filter: brightness(1.28) } }
.orb__pulse {
  position: absolute; width: 15%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(69,224,255,.5);
  animation: pulseOut 4.2s var(--ease) infinite;
}
.orb__pulse.d2 { animation-delay: 1.4s; }
.orb__pulse.d3 { animation-delay: 2.8s; }
@keyframes pulseOut {
  0% { transform: scale(1); opacity: .85; }
  100% { transform: scale(6.4); opacity: 0; }
}
.orb__tick {
  position: absolute; font-family: var(--mono); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--dim); white-space: nowrap;
}
.orb__tick::before { content: ""; position: absolute; top: 50%; width: 24px; height: 1px; background: var(--line); }
.orb__tick.t1 { top: 16%; right: 2%; padding-right: 32px; }
.orb__tick.t1::before { right: 0; }
.orb__tick.t2 { bottom: 18%; left: 2%; padding-left: 32px; }
.orb__tick.t2::before { left: 0; }
@media (max-width: 940px) { .orb { max-width: 340px; } .orb__tick { display: none; } }

.cue {
  position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2.2rem); translate: -50% 0;
  display: grid; justify-items: center; gap: .7rem; text-decoration: none;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: var(--dim);
}
.cue__l { width: 1px; height: 46px; background: linear-gradient(180deg, transparent, var(--neon)); position: relative; overflow: hidden; }
.cue__l::after { content: ""; position: absolute; inset: 0; background: var(--neon); animation: cueRun 2.2s var(--ease-io) infinite; }
@keyframes cueRun { 0% { transform: translateY(-100%) } 60%,100% { transform: translateY(100%) } }
@media (max-width: 940px) { .cue { display: none; } }

/* ==========================================================================
   9 — Section heads
   ========================================================================== */
.head { max-width: 940px; margin-bottom: clamp(2.8rem, 6vw, 4.6rem); }
.head__row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.8rem; }
.head__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; color: var(--neon); }
.head__t { font-family: var(--mono); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--mute); }
.head__r { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.head .lede { margin-top: 1.6rem; }

/* ==========================================================================
   10 — Work
   ========================================================================== */
/* two equal columns: three makes each card too narrow for the copy to survive intact */
.work { display: grid; gap: clamp(1.1rem, 2vw, 1.7rem); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 1000px) { .work { grid-template-columns: 1fr; } }

.card {
  position: relative; text-decoration: none; display: block;
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  overflow: hidden;
  transform-style: preserve-3d;
  display: flex; flex-direction: column; height: 100%;
  transition: border-color .55s var(--ease), transform .5s var(--ease), box-shadow .55s var(--ease);
}
.card::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(69,224,255,.14), transparent 62%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.card:hover::before { opacity: 1; }
.card:hover { border-color: rgba(69,224,255,.42); box-shadow: 0 30px 90px -40px rgba(69,224,255,.4); }

.card__shot { position: relative; overflow: hidden; background: #070A14; }
.card__shot img {
  width: 100%; height: auto; display: block;
  filter: saturate(.72) brightness(.78) contrast(1.05);
  transform: scale(1.02);
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.card__shot img { aspect-ratio: 16/10.2; object-fit: cover; object-position: top center; }
.card:hover .card__shot img { transform: scale(1.07); filter: saturate(1.02) brightness(.95) contrast(1.02); }

.card__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(69,224,255,.16) 46%, rgba(168,242,255,.4) 50%, rgba(69,224,255,.16) 54%, transparent 100%);
  transform: translateY(-110%); opacity: 0;
}
.card:hover .card__scan { animation: scan 1.1s var(--ease-io); }
@keyframes scan { 0% { transform: translateY(-110%); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateY(110%); opacity: 0 } }

.card__go {
  position: absolute; z-index: 4; left: 1.3rem; bottom: 1.3rem;
  display: inline-flex; align-items: center; gap: .7rem;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--void); background: var(--neon); padding: .6rem 1rem;
  opacity: 0; transform: translateY(10px); transition: all .5s var(--ease);
  box-shadow: 0 0 34px var(--glow);
}
.card:hover .card__go { opacity: 1; transform: none; }
.card__arrow { width: 16px; height: 1px; background: currentColor; position: relative; }
.card__arrow::after { content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

.card__meta { padding: clamp(1.3rem, 2.4vw, 1.9rem); position: relative; z-index: 4; flex: 1; display: flex; flex-direction: column; }
.card__top { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.card__name { display: inline-flex; align-items: baseline; gap: .8rem; font-size: clamp(1.08rem, 1.7vw, 1.32rem); font-weight: 500; letter-spacing: -.015em; }
.card__i { font-family: var(--mono); font-size: .66rem; font-style: normal; letter-spacing: .16em; color: var(--neon); }
.card__kind { order: -1; font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.card__did {
  margin-top: .9rem; color: var(--mute); font-size: .92rem; line-height: 1.6; max-width: 62ch;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
  /* a fixed block, not just a clamp, so all six cards are exactly the same height */
  height: calc(4 * 1.6em);
}
.card__live {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: 1.1rem;
  align-self: flex-start;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--aqua);
}
.card__live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 0 rgba(95,227,192,.5); animation: ping 2.6s var(--ease) infinite; }

/* ==========================================================================
   11 — Statement
   ========================================================================== */
.say { padding-block: clamp(4.5rem, 12vw, 9.5rem); }
.say__q {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 4vw, 3.05rem); line-height: 1.24; letter-spacing: -.01em;
  max-width: 22ch; color: var(--ink);
}
.say__q em { font-style: italic; }

/* ==========================================================================
   12 — Marquee
   ========================================================================== */
.mq {
  overflow: hidden; border-block: 1px solid var(--line-3);
  padding-block: 1.4rem;
  background: linear-gradient(90deg, transparent, rgba(69,224,255,.035), transparent);
}
.mq__t { display: flex; gap: 3.2rem; white-space: nowrap; width: max-content; animation: mqRun 34s linear infinite; will-change: transform; }
.mq:hover .mq__t { animation-play-state: paused; }
@keyframes mqRun { to { transform: translateX(-50%); } }
.mq__i {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  display: inline-flex; align-items: center; gap: 3.2rem;
}
.mq__i::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--neon); opacity: .55; }

/* ==========================================================================
   13 — Capability list
   ========================================================================== */
.cap__list { border-top: 1px solid var(--line-3); }
.cap__row {
  display: grid; grid-template-columns: 68px minmax(200px, 1fr) minmax(0, 1.5fr);
  gap: 1.4rem; align-items: baseline;
  padding-block: clamp(1.4rem, 2.6vw, 2.1rem);
  border-bottom: 1px solid var(--line-3);
  position: relative; transition: color .45s var(--ease);
}
.cap__row::before {
  content: ""; position: absolute; left: -1.5rem; right: -1.5rem; top: 0; bottom: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(69,224,255,.07), transparent 70%);
  opacity: 0; transition: opacity .45s var(--ease);
}
.cap__row:hover::before { opacity: 1; }
.cap__row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--neon), transparent);
  transition: width .7s var(--ease);
}
.cap__row:hover::after { width: 100%; }
.cap__n { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em; color: var(--neon); }
.cap__k { font-size: clamp(1.15rem, 2.2vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; transition: transform .5s var(--ease); }
.cap__row:hover .cap__k { transform: translateX(8px); }
.cap__v { color: var(--mute); font-size: .95rem; line-height: 1.6; }
@media (max-width: 780px) {
  .cap__row { grid-template-columns: 46px 1fr; gap: .7rem 1rem; }
  .cap__v { grid-column: 2; }
}

/* ==========================================================================
   14 — How
   ========================================================================== */
.how__grid { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .how__grid { grid-template-columns: 1fr; } }
.how__cell {
  position: relative; padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line-2); background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  transition: border-color .5s var(--ease), transform .5s var(--ease);
}
.how__cell::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(69,224,255,.12), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.how__cell:hover { border-color: rgba(69,224,255,.36); transform: translateY(-4px); }
.how__cell:hover::before { opacity: 1; }
.how__n {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .2em; color: var(--neon);
  display: block; margin-bottom: 1.5rem; position: relative;
}
.how__cell .h3 { position: relative; }
.how__d { margin-top: .9rem; color: var(--mute); font-size: .95rem; line-height: 1.62; position: relative; }

/* ==========================================================================
   15 — Talk
   ========================================================================== */
.talk__grid { display: grid; gap: clamp(2.4rem, 5vw, 4.5rem); grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; }
@media (max-width: 900px) { .talk__grid { grid-template-columns: 1fr; } }
.talk__lede { margin-top: 1.5rem; }
.calls { margin-top: 2.4rem; }
.call {
  display: inline-flex; align-items: center; gap: 1.1rem; text-decoration: none;
  border: 1px solid var(--line-2); padding: 1.1rem 1.5rem;
  background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .45s var(--ease), background-color .45s var(--ease);
}
.call:hover { border-color: var(--neon); background: rgba(69,224,255,.07); }
.call__ico { width: 22px; height: 22px; color: var(--neon); flex: 0 0 auto; }
.call__k { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.call__v { font-size: 1.06rem; font-weight: 500; letter-spacing: -.01em; }
.call__go { width: 18px; height: 1px; background: var(--neon); position: relative; transition: width .45s var(--ease); }
.call__go::after { content: ""; position: absolute; right: 0; top: -2.5px; width: 6px; height: 6px; border-top: 1px solid var(--neon); border-right: 1px solid var(--neon); transform: rotate(45deg); }
.call:hover .call__go { width: 28px; }

.form {
  display: grid; gap: 1.1rem;
  border: 1px solid var(--line-2); padding: clamp(1.5rem, 3vw, 2.4rem);
  background: var(--panel-2); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
}
.hp { position: absolute; left: -9999px; }
.f { display: grid; gap: .5rem; }
.f label { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.f input, .f textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink);
  background: rgba(4,8,18,.55); border: 1px solid var(--line-2);
  padding: .85rem 1rem; border-radius: 0; resize: vertical;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.f input::placeholder, .f textarea::placeholder { color: #56657F; }
.f input:focus, .f textarea:focus {
  outline: none; border-color: var(--neon);
  box-shadow: 0 0 0 1px var(--neon), 0 0 26px -6px var(--glow);
  background: rgba(69,224,255,.05);
}
.form__go { margin-top: .5rem; }

/* ==========================================================================
   16 — Footer
   ========================================================================== */
.foot { padding-block: clamp(3rem, 7vw, 5rem) 2.4rem; border-top: 1px solid var(--line-3); overflow: hidden; }
.foot__big {
  font-size: clamp(2rem, 11.5vw, 11rem); line-height: .9; font-weight: 600; letter-spacing: -.05em;
  color: transparent;
  background: linear-gradient(180deg, rgba(234,242,255,.16) 0%, rgba(69,224,255,.1) 60%, transparent 100%);
  -webkit-background-clip: text; background-clip: text;
  margin-bottom: 2.4rem; white-space: nowrap;
}
.foot__in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding-top: 1.8rem; border-top: 1px solid var(--line-3);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.foot__in a { text-decoration: none; transition: color .4s var(--ease); }
.foot__in a:hover { color: var(--neon); }

/* ==========================================================================
   17 — Reveal
   ========================================================================== */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .95s var(--ease), transform .95s var(--ease); }
.rv[data-d="1"] { transition-delay: .1s; }
.rv[data-d="2"] { transition-delay: .2s; }
.rv[data-d="3"] { transition-delay: .3s; }
.rv.in { opacity: 1; transform: none; }
[data-split].rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv, .c { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .mq__t, .orb__disc, .orb__ring, .orb__beam, .orb__core, .orb__pulse, .field__grain,
  .bm__o1, .bm__o2, .bm__b, .cue__l::after, .label__d, .card__live::before { animation: none !important; }
  .boot { display: none; }
}


/* ==========================================================================
   18 — Mobile
   ========================================================================== */

/* touch has no hover: the live-site badge must simply be there */
@media (hover: none), (pointer: coarse) {
  .card__go { opacity: 1; transform: none; }
  .card__shot img { filter: saturate(.92) brightness(.9) contrast(1.02); }
  .card::before { opacity: 1; }
}

/* the masthead becomes two rows so the tagline survives */
@media (max-width: 980px) {
  .mast__in { flex-wrap: wrap; justify-content: space-between; row-gap: 0; min-height: 0; padding-block: .85rem .5rem; gap: .75rem; }
  .brand { order: 1; }
  .mast__cta { order: 2; padding: .72rem 1rem; min-height: 42px; font-size: .66rem; letter-spacing: .12em; gap: .55rem; }
  .mast__cta .btn__a { width: 13px; }
  .mast__tag {
    display: flex; order: 3; width: 100%; justify-content: center;
    gap: .6rem; margin-top: .7rem; padding-top: .7rem;
    border-top: 1px solid var(--line-3);
    font-size: .58rem; letter-spacing: .17em;
  }
  .mast__tag .tg { white-space: nowrap; }
}

/* on a phone the full CTA label will not sit beside the wordmark: use the short one */
@media (max-width: 620px) {
  .mast__cta .btn__l { display: none; }
  .mast__cta .btn__s { display: inline; }
  .brand__mark { width: 26px; height: 26px; }
  .brand { gap: .6rem; }
  .brand__name { font-size: .86rem; letter-spacing: .11em; }
}
@media (max-width: 380px) {
  .mast__tag { font-size: .52rem; letter-spacing: .1em; gap: .45rem; }
  .brand__name { font-size: .8rem; letter-spacing: .08em; }
  .mast__cta { padding: .7rem .85rem; }
}

@media (max-width: 700px) {
  /* clouds drift, so guarantee the copy always has ground under it */
  .field__vig {
    background:
      radial-gradient(130% 78% at 50% 34%, rgba(4,6,13,.34) 0%, rgba(4,6,13,.62) 62%, rgba(4,6,13,.88) 100%);
  }
  .lede, .how__d, .cap__v, .card__did { color: #B9C9E4; }
  .label { font-size: .66rem; letter-spacing: .2em; }
}

@media (max-width: 640px) {
  .hero { min-height: 0; padding-block: 2.5rem 4rem; }
  .hero__title { margin-top: 1.2rem; }
  .hero__stats { gap: 1.4rem 2rem; margin-top: 2.4rem; padding-top: 1.6rem; }
  .st__l { font-size: .6rem; letter-spacing: .16em; }
  .btns { margin-top: 2rem; }
  .btns .btn { flex: 1 1 100%; justify-content: space-between; }

  .orb { max-width: 290px; }

  /* the grain plate is enormous and costs real battery on a phone */
  .field__grain { inset: -25%; animation-duration: 10s; opacity: .04; }
  .field__grid { background-size: 64px 64px; }

  /* cheaper compositing */
  .card, .how__cell, .form, .call { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

  .card__meta { padding: 1.15rem; }
  .card__did { font-size: .9rem; }
  .card__top { gap: .4rem; }
  .card__go { left: .9rem; bottom: .9rem; font-size: .6rem; padding: .5rem .8rem; }

  .mq { padding-block: 1rem; }
  .mq__t { gap: 2rem; }
  .mq__i { font-size: .68rem; letter-spacing: .18em; gap: 2rem; }

  .say__q { max-width: none; }
  .foot__big { white-space: normal; }
  .foot__in { flex-direction: column; align-items: flex-start; gap: .7rem; font-size: .62rem; }
  .call { width: 100%; }
}

/* headline line-breaks written for a wide screen fight a narrow one */
@media (max-width: 620px) {
  /* the hard breaks are written for a wide screen; each is preceded by a space
     in the markup so removing it still leaves the words apart */
  .h2 br, .say__q br { display: none; }
  .card__did { -webkit-line-clamp: 5; height: calc(5 * 1.6em); }
  .say__q { font-size: clamp(1.4rem, 6.4vw, 2rem); line-height: 1.3; }
}