@font-face{font-family:"Audiowide";src:url(fonts/Audiowide-Arrive.woff) format("woff");font-display:block}
:root{--main:#762EFF;--panel:#F4EEFF;--ink:#0B001F;--spark:#07F49E;
  --bg:#0B001F;--fg:#F4EEFF;--fgr:244,238,255;--muted:rgba(244,238,255,.76);
  --m1:#1B0A45;--m2:#2E1070;--m3:#4A1BB0;--hi:rgba(118,46,255,.55);
  --card:rgba(244,238,255,.07);--line:rgba(244,238,255,.16);--glass:rgba(11,0,31,.55);--spot:rgba(244,238,255,.06);--slide:#2A1A52;--menu:rgba(18,6,44,.9);--lift:0 1px 0 rgba(244,238,255,.08) inset,0 2px 4px rgba(8,0,24,.3),0 20px 40px -18px rgba(8,0,24,.6);
  --mark:var(--spark);--btn-bg:var(--panel);--btn-fg:var(--ink);--focus:var(--spark);
  --ease:cubic-bezier(.22,1,.36,1)}
:root[data-theme=light]{--bg:#F4EEFF;--fg:#0B001F;--fgr:11,0,31;--muted:rgba(11,0,31,.74);
  --m1:#E3D6FF;--m2:#DCCBFF;--m3:#CDB6FF;--hi:rgba(165,123,255,.55);
  --card:rgba(255,255,255,.72);--line:rgba(11,0,31,.12);--glass:rgba(255,255,255,.62);--spot:rgba(165,123,255,.1);--slide:#FBF8FF;--menu:rgba(255,255,255,.9);--lift:0 2px 4px rgba(70,30,160,.07),0 20px 40px -20px rgba(70,30,160,.3);
  --mark:var(--main);--btn-bg:var(--ink);--btn-fg:var(--panel);--focus:var(--main)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{font:400 1.0625rem/1.55 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;color:var(--fg);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
main:focus{outline:none}
.nb{white-space:nowrap}
a,button,summary,label{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:8px}
.wrap{width:min(1120px,calc(100% - 32px));margin-inline:auto}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:var(--btn-bg);color:var(--btn-fg);padding:10px 16px;border-radius:99px;z-index:50}
.skip:focus{top:12px}
.wm{font-family:"Audiowide","SF Pro Rounded",-apple-system,sans-serif;font-weight:400;letter-spacing:.5px;text-decoration:none}

/* mesh: four soft blobs on composited layers; JS adds pointer + scroll parallax */
.mesh{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.b{position:absolute;border-radius:50%;will-change:transform;animation:drift 24s ease-in-out 2 alternate}
.b1{width:80vmax;height:80vmax;left:-30vmax;top:-38vmax;background:radial-gradient(closest-side,var(--m3),transparent)}
.b2{width:70vmax;height:70vmax;right:-38vmax;top:14vh;background:radial-gradient(closest-side,var(--m2),transparent);animation-duration:30s;animation-delay:-8s}
.b3{width:90vmax;height:90vmax;left:-42vmax;bottom:-52vmax;background:radial-gradient(closest-side,var(--m1),transparent);animation-duration:34s;animation-delay:-3s}
.b4{width:44vmax;height:44vmax;left:48vw;top:-10vmax;background:radial-gradient(closest-side,var(--hi),transparent);animation-duration:20s;animation-delay:-12s}
@keyframes drift{to{translate:5vw 4vh;scale:1.14}}

/* nav: a glass capsule and a round theme button floating beside it; both scale together on scroll */
.nav{position:fixed;top:12px;left:50%;translate:-50% 0;z-index:30;width:min(860px,calc(100% - 24px));display:flex;align-items:center;gap:10px;transition:scale .5s var(--ease)}
.nav.small{scale:.96}
.navbar,.theme{height:60px;border-radius:99px;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);transition:box-shadow .4s}
.nav.small .navbar,.nav.small .theme{box-shadow:0 10px 40px -12px rgba(0,0,0,.45)}
.navbar{flex:1;min-width:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;--pl:22px;--pr:7px;padding:0 var(--pr) 0 var(--pl)}
.navbar .wm{justify-self:start}
.navbar .btn{justify-self:end}
.nav .wm{font-size:1.625rem;line-height:1;display:inline-block;padding:8px 0}
.nav nav{display:flex;gap:2px;translate:calc((var(--pr) - var(--pl)) / 2) 0} /* centres the links in the pill despite the uneven side padding */
.nav nav a{padding:11px 12px;border-radius:99px;text-decoration:none;font-size:0.9375rem;white-space:nowrap;color:var(--muted);transition:background .25s,color .25s}
.nav .btn{white-space:nowrap}
.nav nav a:hover{background:rgba(var(--fgr),.1);color:var(--fg)}
@media (max-width:760px){.nav nav{display:none}.navbar{display:flex;justify-content:space-between}}
.theme{flex:none;width:56px;height:56px;display:grid;place-items:center;padding:0;color:var(--fg);cursor:pointer;transition:box-shadow .4s,scale .3s var(--ease)}
.theme:hover{scale:1.0714} /* 56px -> 60px: exactly the height of the bar */
.theme:active{scale:1}
/* the sun turns into the moon: the disc grows while a hidden disc slides over it, the rays fold away and the icon turns */
.theme svg{width:28px;height:28px;overflow:visible;transform:rotate(-90deg);transition:transform .5s cubic-bezier(.65,0,.35,1) .05s}
.theme .rays{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transform-box:view-box;transform-origin:50% 50%;transition:transform .5s cubic-bezier(.65,0,.35,1) .05s,opacity .3s .05s}
.theme .body{fill:currentColor;transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.65,0,.35,1) .05s}
.theme .cut{transform:translate(14px,-14px);transition:transform .5s cubic-bezier(.65,0,.35,1) .05s}
:root[data-theme=dark] .theme svg{transform:rotate(0)}
:root[data-theme=dark] .theme .rays{transform:rotate(90deg) scale(.5);opacity:0}
:root[data-theme=dark] .theme .body{transform:scale(1.9)}
:root[data-theme=dark] .theme .cut{transform:translate(3.1px,-2.6px)}
.themewrap{position:relative;flex:none}
.thememenu{position:absolute;top:calc(100% + 10px);right:0;min-width:180px;padding:6px;display:grid;gap:2px;border-radius:24px;background:var(--menu);border:1px solid var(--line);backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);box-shadow:var(--lift);transform-origin:100% 0}
.thememenu button{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 14px;border:0;border-radius:18px;background:none;color:var(--fg);font:inherit;font-size:.9375rem;font-weight:550;text-align:left;cursor:pointer;transition:background .2s}
.thememenu button:hover,.thememenu button:focus-visible{background:rgba(var(--fgr),.1)}
.thememenu svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.thememenu .ck{margin-left:auto;opacity:0;stroke:var(--mark);stroke-width:2.2;transition:opacity .2s}
.thememenu [aria-checked=true] .ck{opacity:1}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:0 26px;border-radius:99px;font-family:inherit;font-weight:600;font-size:1rem;line-height:1;text-decoration:none;border:1px solid transparent;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);will-change:transform}
.btn.sm{min-height:46px;padding:0 18px;font-size:0.9375rem}

h1,h2,h3{letter-spacing:-.03em}
h1{font-size:clamp(2.9rem,8.4vw,5.9rem);line-height:1;font-weight:700;letter-spacing:-.045em}
h2{font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.04;font-weight:700}
h3{font-size:1.3rem;line-height:1.2;font-weight:650}
.accent{color:var(--mark)}
.lead{font-size:clamp(1.1rem,2.2vw,1.35rem);color:var(--muted);max-width:34em}
.muted{color:var(--muted)}
.fine{font-size:0.875rem;color:var(--muted)}

/* word mask reveal (the app's arrival headline, on the web) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .1em .14em;margin:-.1em -.1em -.14em} /* room for the glyphs that overhang the tight letter-spacing */
.wi{display:inline-block;will-change:transform}

/* hide-before-reveal only when scripting is on; a CSS failsafe un-hides after 2.2 s if the script never runs */
@media (scripting:enabled){
  :is([data-reveal],[data-hero],#phoneWrap,.nav):not(.in),[data-stagger]:not(.in)>*,[data-split]:not(.sp){opacity:0;animation:fs .01s 2.2s forwards}
}
@keyframes fs{to{opacity:1}}

/* spacing: each section below the hero starts with 128 / 96 / 80 px of padding (desktop / tablet / mobile); content inside a section is spaced by half of that */
:root{--sp-top:128px;--sp-gap:64px}
@media (max-width:1024px){:root{--sp-top:96px;--sp-gap:48px}}
@media (max-width:640px){:root{--sp-top:80px;--sp-gap:40px}}
section{padding-top:var(--sp-top)}
main>section:last-child{padding-bottom:var(--sp-gap)}

/* cards */
.card{position:relative;overflow:hidden;box-shadow:var(--lift);background:var(--card);border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}

.copywrap{position:relative;display:inline-block}
.pop{position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 0;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:99px;background:var(--spark);color:var(--ink);font-weight:650;font-size:.9375rem;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;transform-origin:50% 100%;box-shadow:0 8px 20px -8px rgba(8,0,24,.5)}
.pop::after{content:"";position:absolute;left:50%;top:100%;translate:-50% -55%;width:10px;height:10px;rotate:45deg;border-radius:2px;background:var(--spark)}
.pop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
footer{padding-block:48px 36px;border-top:1px solid var(--line)}
.foot{display:grid;gap:18px}
.foot nav{display:flex;gap:22px;flex-wrap:wrap}
.foot .wm{font-size:1.625rem;justify-self:start;padding:8px 0}
.foot nav a{display:inline-block;padding:11px 0;text-decoration:none;color:var(--muted)}
.foot .fine{max-width:70ch}
.foot .copyright{justify-self:center;text-align:center;padding-top:10px}
.foot nav a:hover{color:var(--fg);text-decoration:underline}

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