@font-face{
  font-family:"Satoshi";
  src:url("/assets/fonts/Satoshi-Variable.woff2") format("woff2-variations"),
      url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight:300 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Space Mono";
  src:url("/assets/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

:root{
  --glow-alpha:.32;
  --hover-glow-alpha:.07;
  --hover-glow-rgb:150,122,240;
  --hover-in:.25s;
  --hover-out:.45s;
  --breathe-period:3.4s;
  --reveal-rise:14px;
  --reveal-dur:.55s;
  --beat-delay:.45s;
  --ticker-period:22s;
  --panel-stagger:90ms;
  --shimmer-period:7s;
  --section-y:3.8rem;
  --flow-period:2.4s;
  --reconnect-period:5.6s;
  --carousel-period:7s;
  --h1-dim:.5;

  --bg:#100E18;
  --bg-rgb:16,14,24;
  --bg-2:#0E0D15;
  --card:#141320;
  --card-2:#181627;
  --line:rgba(225,214,255,.09);
  --line-bright:rgba(225,214,255,.2);
  --text:#F4F2FA;
  --muted:#A8A2C0;
  --faint:#716B8E;
  --brand:#967AF0;
  --brand-deep:#6942D6;
  --grad-a:#7960C3;
  --grad-b:#E1D6FF;
  --ok:#3ECF6E;
  --warn:#FFA23E;

  --display:"Satoshi",-apple-system,BlinkMacSystemFont,sans-serif;
  --body:"Satoshi",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --radius:18px;
  --container:1104px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
::selection{background:rgba(150,122,240,.35)}
a{color:inherit;text-decoration:none}
code{
  font-family:var(--mono);
  font-size:.85em;
  background:rgba(225,214,255,.08);
  border:1px solid var(--line);
  border-radius:6px;
  padding:.08em .4em;
  color:#CFC5F2;
}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}

.container{max-width:var(--container);margin:0 auto;padding:0 24px}

h1,h2,.display{
  font-family:var(--display);
  letter-spacing:-.035em;
  font-weight:400;
}
h1{font-size:clamp(2.89rem,6.85vw,4.82rem);line-height:1.06}
h2{font-size:clamp(1.98rem,3.85vw,2.78rem);line-height:1.12;font-weight:450;letter-spacing:-.028em}
h3{font-family:var(--display);font-size:1.44rem;letter-spacing:-.02em;line-height:1.25;font-weight:500}
h4{font-size:1.09rem;font-weight:550;letter-spacing:-.012em}
.lede{color:var(--muted);font-size:clamp(1.09rem,1.6vw,1.25rem);max-width:56ch}
.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brand);
}
.micro{font-size:.78rem;color:var(--faint)}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.92rem;font-weight:600;letter-spacing:-.005em;
  padding:.72rem 1.35rem;border-radius:999px;
  transition:transform .18s ease,box-shadow .25s ease,background .2s ease,border-color .2s ease;

  /* .btn-ghost needs a border, so .btn reserves 1px of transparent one.
     Gradient buttons must then set background-origin; see .btn-primary. */
  cursor:pointer;border:1px solid transparent;white-space:nowrap;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{
  background:linear-gradient(180deg,#A78BFF 0%,var(--brand-deep) 120%);

  /* MUST come after the shorthand, which resets it to padding-box. Left at
     padding-box the gradient is sized inside .btn's transparent border but
     painted to the border box, so that strip tiles and shows a pale rim. */
  background-origin:border-box;
  color:#fff;

  box-shadow:0 8px 24px -8px rgba(105,66,214,.55);
}

/* background-IMAGE, not the shorthand: the shorthand resets background-origin
   above and brings the pale rim back on hover. */
.btn-primary:hover{
  background-image:linear-gradient(180deg,#C4AEFF 0%,#7E52EA 120%);

  box-shadow:0 14px 54px -4px rgba(186,150,255,.5);
}
.btn-ghost{
  background:rgba(225,214,255,.05);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--line-bright);background:rgba(225,214,255,.08)}

.chip{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line);border-radius:999px;
  padding:.34rem .8rem;
  background:rgba(225,214,255,.04);
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.chip-row{display:flex;gap:.5rem;flex-wrap:wrap}

nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s ease;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(var(--bg-rgb),.72);
  backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--line);
}
.nav-inner{
  max-width:var(--container);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:1.5rem;
}
.nav-logo{display:flex;align-items:center;gap:.6rem}
.nav-logo svg{height:21px;width:auto;display:block}

.tag{
  font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;

  display:inline-flex;align-items:center;line-height:1;
  color:#C9B8FA;background:transparent;
  border:1px solid rgba(150,122,240,.42);border-radius:999px;
  font-weight:400;
  padding:calc(.3rem + .013em) .48rem calc(.3rem - .013em);white-space:nowrap;
}
.nav-tag{transform:translateY(1px)}
.nav-links{display:flex;gap:1.6rem;margin-left:auto;align-items:center}

/* :not(.btn) because this (0,1,1) selector outranks .btn (0,1,0). It cost us
   twice unscoped: the muted colour greyed out the Download label, then
   `transition:color .2s` - a SHORTHAND - replaced .btn's transition list and
   left the nav button snapping to hover while the CTA eased. */
.nav-links a:not(.btn){font-size:.88rem;color:var(--muted);transition:color .2s}
.nav-links a:not(.btn):hover{color:var(--text)}
.nav-links .btn{padding:.5rem 1.05rem;font-size:.85rem}

.nav-links .btn-primary{box-shadow:0 5px 16px -7px rgba(105,66,214,.55)}
.nav-links .btn-primary:hover{box-shadow:0 9px 34px -6px rgba(186,150,255,.5)}
@media(max-width:760px){.nav-links a:not(.btn){display:none}}
@media(max-width:560px){.nav-tag{display:none}}

footer{
  border-top:1px solid var(--line);
  padding:2.2rem 0 3rem;
}
.footer-inner{
  max-width:var(--container);margin:0 auto;padding:0 24px;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.footer-logo{height:20px;width:auto;flex:none;color:var(--muted)}
.footer-inner .micro{margin-left:auto}

@media(max-width:640px){
  .footer-inner{flex-direction:column;justify-content:center;text-align:center;gap:.9rem}
  .footer-inner .micro{margin-left:0}
}

.wordmark{
  --wm-h:15px;
  height:var(--wm-h);width:auto;display:inline-block;
  vertical-align:calc(var(--wm-h) * -.2458);
  color:var(--text);transition:color .2s ease;
}

.footer-inner .micro a.wordmark-link{border-bottom:0}
.wordmark-link:hover .wordmark{color:#fff}
.footer-inner .micro a{color:var(--muted);border-bottom:1px solid var(--line)}
.footer-inner .micro a:hover{color:var(--text)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

.starfield{position:fixed;inset:0;z-index:-1;pointer-events:none}

.roadmap-strip{padding:0 0 var(--section-y)}

.roadmap-block{padding-top:var(--section-y);border-top:1px solid var(--line)}
.road-head{
  font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.022em;
  margin-bottom:1.6rem;
}
.roadmap-strip .roadmap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:14px;
}
@media(max-width:640px){.roadmap-strip .roadmap{grid-template-columns:1fr;gap:1.4rem}}
.road-col{
  display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;
  padding:1.3rem;border:1px solid var(--line);border-radius:14px;
}
.road-col ul{list-style:none}
.road-col li{color:var(--muted);font-size:.9rem;padding:.16rem 0}
.status{
  justify-self:start;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:.28rem .7rem;white-space:nowrap;
}
.status.shipped{background:rgba(62,207,110,.12);color:#6FE39A;border:1px solid rgba(62,207,110,.25)}
.status.testing{background:rgba(255,162,62,.12);color:#FFBE7A;border:1px solid rgba(255,162,62,.3)}
.status.planned{background:rgba(225,214,255,.05);color:var(--muted);border:1px solid var(--line)}
.status.exploring{background:rgba(150,122,240,.1);color:#BBA5F7;border:1px solid rgba(150,122,240,.3)}

.reveal{opacity:0;transform:translateY(var(--reveal-rise));transition:opacity var(--reveal-dur) ease,transform var(--reveal-dur) cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

.beat{opacity:0;transition:opacity var(--reveal-dur) ease}
.reveal.in .beat{opacity:1;transition-delay:var(--beat,var(--beat-delay))}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .beat{opacity:1}
}