:root{
  --ink:#05070d; --navy:#0a1224; --panel:#0f1830; --line:#1c2a4a;
  --blue:#3d8bff; --blue-2:#7db4ff; --text:#eef3ff; --muted:#9aa8c7;
  --yt:#ff3b30;
  --head:"Space Grotesk",system-ui,sans-serif; --body:Inter,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* logo: the comma is a glowing data point */
.logo{font:700 20px/1 var(--head);letter-spacing:-.01em;text-decoration:none;display:inline-flex;align-items:baseline;white-space:nowrap}
.logo .comma{color:var(--blue);text-shadow:0 0 10px var(--blue),0 0 3px var(--blue-2);margin-right:.22em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.62em 1.05em;border-radius:10px;font:600 15px/1 var(--body);text-decoration:none;background:var(--blue);color:#fff;border:1px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover{transform:translateY(-1px);background:#5a9cff}
.btn svg{width:1.15em;height:1.15em;fill:currentColor}
.btn.yt{background:var(--yt)}
.btn.yt:hover{background:#ff5a50}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text)}
.btn.ghost:hover{border-color:var(--blue);background:rgba(61,139,255,.08)}
.btn.sm{padding:.5em .85em;font-size:14px}
.btn.big{padding:.85em 1.3em;font-size:16px}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--blue-2);outline-offset:3px}

/* header */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(16px,4vw,48px);background:rgba(5,7,13,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(28,42,74,.6)}
.top nav{display:flex;align-items:center;gap:18px}
.top nav>a:not(.btn){text-decoration:none;color:var(--muted);font-weight:500}
.top nav>a:not(.btn):hover{color:var(--text)}
.icon svg{width:18px;height:18px;fill:currentColor;display:block}

/* hero */
.hero{position:relative;overflow:hidden;padding:clamp(56px,10vw,120px) clamp(16px,4vw,48px) clamp(48px,7vw,88px);background:radial-gradient(120% 90% at 80% 0%,#12224a 0%,var(--navy) 45%,var(--ink) 100%)}
.hero .grid{position:absolute;inset:0;width:100%;height:100%;color:rgba(125,180,255,.07);mask-image:linear-gradient(to bottom,#000 30%,transparent)}
.hero .trace{position:absolute;right:0;bottom:8%;width:min(900px,90%);height:220px;opacity:.75}
.hero .trace path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:1600;stroke-dashoffset:1600;animation:draw 2.4s .3s ease-out forwards;filter:drop-shadow(0 0 6px rgba(61,139,255,.6))}
.hero .trace circle{fill:var(--blue-2);opacity:0;animation:pop .4s ease-out forwards;filter:drop-shadow(0 0 6px var(--blue))}
.hero .trace circle:nth-of-type(1){animation-delay:1s}.hero .trace circle:nth-of-type(2){animation-delay:1.6s}.hero .trace circle:nth-of-type(3){animation-delay:2.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
.hero .in{position:relative;max-width:820px}
.hero h1{font:700 clamp(36px,6vw,68px)/1.02 var(--head);letter-spacing:-.025em;margin:0 0 20px}
.hero h1 span{color:var(--blue-2)}
.hero p{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:620px;margin:0 0 30px}
.acts{display:flex;flex-wrap:wrap;gap:10px}

/* builds grid */
.builds{padding:clamp(40px,6vw,72px) clamp(16px,4vw,48px) 24px;max-width:1360px;margin:0 auto}
.builds .head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:14px}
.builds h2{font:700 28px/1.1 var(--head);margin:0;letter-spacing:-.015em}
.builds .head p{margin:0;color:var(--muted)}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .2s ease,transform .2s ease}
.card:hover{border-color:rgba(61,139,255,.6);transform:translateY(-2px)}
.card .shot{display:block;aspect-ratio:16/9;overflow:hidden;background:#000}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .shot img{transform:scale(1.03)}
.card .meta{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .num{margin:0;font:600 13px/1 var(--head);color:var(--blue-2)}
.card h3{margin:0;font:700 21px/1.2 var(--head);letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card .line{margin:0 0 6px;color:var(--muted);flex:1}
.card .ext{font-size:13px;color:var(--muted)}

/* footer */
.foot{margin-top:64px;border-top:1px solid var(--line);background:linear-gradient(180deg,var(--navy),var(--ink))}
.foot .cta{max-width:820px;margin:0 auto;padding:clamp(48px,8vw,96px) clamp(16px,4vw,48px);text-align:center}
.foot h2{font:700 clamp(30px,4.5vw,48px)/1.05 var(--head);letter-spacing:-.02em;margin:0 0 16px}
.foot .cta p{color:var(--muted);margin:0 auto 28px;max-width:560px;font-size:17px}
.foot .base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:20px clamp(16px,4vw,48px);border-top:1px solid var(--line);color:var(--muted);font-size:14px}
.foot .links{display:flex;gap:18px}
.foot .links a{text-decoration:none}.foot .links a:hover{color:var(--text)}

/* build viewer */
body.viewer{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.bar{display:flex;align-items:center;gap:16px;padding:10px clamp(12px,2vw,24px);background:var(--ink);border-bottom:1px solid var(--line);flex:0 0 auto}
.bar .logo{font-size:17px}
.bar .what{flex:1;min-width:0;display:flex;align-items:baseline;gap:10px;overflow:hidden}
.bar .what .num{font:600 12px/1 var(--head);color:var(--blue-2);white-space:nowrap}
.bar .what strong{font:600 15px/1.2 var(--head);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .acts{flex:0 0 auto;gap:8px}
.stage{flex:1;width:100%;border:0;background:#000}

@media (max-width:720px){
  .grid-cards{grid-template-columns:1fr}
  .bar{flex-wrap:wrap;gap:8px 12px}
  .bar .what{order:3;flex-basis:100%}
  .bar .acts{margin-left:auto}
  .hide-s{display:none}
  .top nav{gap:12px}
  .top nav>a[href="/#builds"]{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .hero .trace path{stroke-dashoffset:0}.hero .trace circle{opacity:1}
}