/* ============================================================================
   GEARS · 3134G — Apple-clean. SF Pro, light by default, one accent, real
   whitespace. The 3D bot lives in its own zone and never sits under text.
   ========================================================================== */

:root {
  /* light is the default ground */
  --bg:      #ffffff;
  --bg-2:    #f5f5f7;   /* alternating sections / product stage */
  --ink:     #1d1d1f;   /* primary text */
  --ink-2:   #6e6e73;   /* secondary */
  --ink-3:   #86868b;   /* tertiary / captions / labels */
  --line:    rgba(0,0,0,0.10);
  --line-2:  rgba(0,0,0,0.16);
  --red:     #e01e2b;   /* the one accent — team red, tuned to read on white */
  --red-ink: #c00d1c;

  --sans: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-6:24px; --s-8:32px;
  --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;

  --maxw: 1120px;
  --gutter: clamp(22px, 6vw, 80px);
  --section-pad: clamp(84px, 14vh, 160px);
  --radius: 18px;
  --radius-sm: 12px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg:     #000000;
  --bg-2:   #101012;
  --ink:    #f5f5f7;
  --ink-2:  #a1a1a6;
  --ink-3:  #86868b;
  --line:   rgba(255,255,255,0.12);
  --line-2: rgba(255,255,255,0.20);
  --red:    #ff453a;
  --red-ink:#ff6a61;
  color-scheme: dark;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
img { display:block; max-width:100%; }
::selection { background: color-mix(in srgb, var(--red) 22%, transparent); }
:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:4px; }
a { color: var(--red-ink); text-decoration:none; }

/* ── type ─────────────────────────────────────────────────────────────── */
h1,h2,h3 { font-weight:600; letter-spacing:-0.028em; line-height:1.05; }
.eyebrow { font-weight:600; font-size:13px; letter-spacing:0.01em; color:var(--red); text-transform:none; }
.deck    { font-size:clamp(19px,2.2vw,22px); line-height:1.45; color:var(--ink-2); font-weight:400; letter-spacing:-0.012em; }
.muted   { color:var(--ink-2); }
.tiny    { font-size:12px; color:var(--ink-3); letter-spacing:0; }

/* ── layout ───────────────────────────────────────────────────────────── */
.wrap { max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
/* bot sections run full-bleed so the copy hugs the left edge (the model owns
   the right); only content sections stay in the centered measure */
#hero.wrap, #machine.wrap, .subsystem.wrap, #reassembly.wrap { max-width:none; }
@media (max-width:900px){
  #hero.wrap, #machine.wrap, .subsystem.wrap, #reassembly.wrap { max-width:var(--maxw); }
}
.reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.armed { opacity:0; transform:translateY(20px); }
.reveal.armed.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal.armed{ opacity:1; transform:none; } }

/* the 3D bot: its OWN zone. Desktop = right 52%; text lives left of it and can
   never overlap. Mobile = a top band, copy sits below. */
/* the bot lives in the right zone with breathing room on every edge so the
   viewer frames the whole model and it never clips */
#stage { position:fixed; top:4vh; right:1vw; bottom:4vh; left:40%; z-index:0; pointer-events:none; }
#stage bot-viewer { width:100%; height:100%; min-height:0 !important; display:block; }
#flow { position:relative; z-index:1; }
@media (max-width:900px){
  #stage { left:0; right:0; top:8vh; height:40vh; bottom:auto; }
}

/* ============================================================================
   LOADER
   ========================================================================== */
#loader { position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; transition:opacity .55s var(--ease); text-align:center; }
#loader.gone { opacity:0; pointer-events:none; }
#loader .glyph { width:96px; height:96px; animation:spin 3.4s linear infinite; }
@keyframes spin { to{ transform:rotate(360deg);} }
#loader .mark { font-weight:600; font-size:26px; letter-spacing:-0.02em; }
#loader .mark b { color:var(--red); }
#loader .rail { width:min(200px,52vw); height:3px; background:var(--line-2); overflow:hidden; border-radius:3px; }
#loader .rail i { display:block; height:100%; width:38%; background:var(--red);
  border-radius:3px; animation:sweep 1.15s ease-in-out infinite; }
@keyframes sweep { from{ transform:translateX(-110%);} to{ transform:translateX(360%);} }
#loader .boast { font-size:13px; letter-spacing:0; color:var(--ink-3); min-height:16px; font-weight:500; }
@media (prefers-reduced-motion: reduce){ #loader .glyph{ animation:none;} #loader .rail i{ animation:none; width:100%; } }

/* ============================================================================
   TOP BAR
   ========================================================================== */
#topbar { position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter); height:52px; pointer-events:none;
  border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease); }
#topbar.solid { background:color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter:saturate(180%) blur(18px); -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom-color:var(--line); }
#topbar .brand { display:flex; align-items:center; gap:9px; pointer-events:auto; }
#topbar .brand svg { width:20px; height:20px; }
#topbar .brand b { font-weight:600; font-size:17px; letter-spacing:-0.02em; }
#topbar .brand em { font-style:normal; font-size:12px; color:var(--ink-3); font-weight:500; }
#topbar .right { display:flex; align-items:center; gap:26px; pointer-events:auto; }
#topbar .right a { font-size:13px; color:var(--ink-2); font-weight:400; transition:color .2s; letter-spacing:-0.006em; }
#topbar .right a:hover { color:var(--ink); }
#progress { position:fixed; top:0; left:0; height:2px; width:100%; z-index:31; background:var(--red);
  transform:scaleX(0); transform-origin:0 50%; will-change:transform; }
/* phones: the one-page scroll doesn't need the nav — keep just the brand */
@media (max-width:640px){ #topbar .right { display:none; } }

#theme { position:fixed; right:max(16px,2vw); bottom:20px; z-index:30;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line-2);
  background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:blur(10px);
  display:grid; place-items:center; cursor:pointer; color:var(--ink-2); pointer-events:auto;
  transition:color .2s,border-color .2s,transform .2s var(--ease); }
#theme:hover { color:var(--red); border-color:var(--red); transform:translateY(-2px); }
#theme svg { width:17px; height:17px; }

/* ============================================================================
   HERO
   ========================================================================== */
#hero { min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--section-pad); }
#hero .col { max-width:min(46%, 620px); }
#hero .eyebrow { margin-bottom:18px; display:block; font-size:19px; }
#hero h1 { font-weight:600; font-size:clamp(3.2rem, 7.5vw, 6rem); line-height:0.98;
  letter-spacing:-0.035em; }
#hero h1 .r { color:var(--red); }
#hero .lead { margin-top:24px; max-width:34ch; }
#hero .cta { margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:500;
  padding:11px 22px; border-radius:980px; letter-spacing:-0.01em; transition:all .2s var(--ease); cursor:pointer; border:1px solid transparent; }
.btn-primary { background:var(--red); color:#fff; }
.btn-primary:hover { filter:brightness(1.06); transform:translateY(-1px); }
.btn-ghost { color:var(--red-ink); }
.btn-ghost:hover { color:var(--red); }
#hero .scrollcue { margin-top:44px; font-size:13px; color:var(--ink-3); display:flex; align-items:center; gap:10px; }
#hero .scrollcue .chev { width:16px; height:16px; animation:bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(4px);} }
@media (max-width:900px){
  /* bot occupies the top band (fixed); start the copy clearly below it */
  #hero { justify-content:flex-start; min-height:auto;
    padding-top:calc(8vh + 42vh + 20px); padding-bottom:12vh; }
  #hero .col { max-width:100%; }
}

/* ============================================================================
   SECTIONS
   ========================================================================== */
.section { padding-block:var(--section-pad); }
.section.tint { background:var(--bg-2); }
.section-head { max-width:640px; margin-bottom:clamp(36px,6vh,64px); }
/* sections where the bot is on stage keep their content in the left zone so it
   never sits under the model */
#machine, #reassembly { min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
#machine .section-head, #reassembly .section-head { max-width:min(46%,520px); }
#reassembly .stats { max-width:min(46%,520px); grid-template-columns:1fr; gap:28px; }
#reassembly .stats .num { font-size:clamp(2.6rem,6vw,3.6rem); }
@media (max-width:900px){
  #machine .section-head, #reassembly .section-head, #reassembly .stats { max-width:100%; }
  #reassembly .stats { grid-template-columns:repeat(3,1fr); }
}
.section-head .eyebrow { display:block; margin-bottom:14px; }
.section-head h2 { font-size:clamp(2.2rem,5vw,3.6rem); letter-spacing:-0.03em; }
.section-head .deck { margin-top:18px; max-width:52ch; }

/* subsystem: text confined to the left zone (bot is fixed on the right) */
.subsystem { min-height:100svh; display:flex; align-items:center; padding-block:var(--section-pad); }
.subsystem .col { max-width:min(42%, 480px); }
.subsystem .idx { font-size:15px; font-weight:600; color:var(--red); letter-spacing:0; }
.subsystem h2 { font-size:clamp(2rem,4.6vw,3.2rem); margin-top:12px; letter-spacing:-0.03em; max-width:14ch; }
.subsystem p { margin-top:18px; color:var(--ink-2); font-size:19px; line-height:1.5; letter-spacing:-0.01em; }
.subsystem .chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.subsystem .chips span { font-size:13px; color:var(--ink-2); background:var(--bg-2);
  border:1px solid var(--line); border-radius:980px; padding:7px 14px; font-weight:500; }
html[data-theme="dark"] .subsystem .chips span { background:var(--bg-2); }
@media (max-width:900px){
  .subsystem { min-height:100svh; align-items:flex-end; padding-bottom:9vh; }
  .subsystem .col { max-width:100%; }
  .subsystem .chips span { background:color-mix(in srgb, var(--bg) 88%, var(--ink)); }
}

/* ============================================================================
   STATS
   ========================================================================== */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,4vw,48px);
  margin-top:clamp(36px,6vh,56px); }
.stats .num { font-size:clamp(3rem,7vw,5rem); font-weight:600; letter-spacing:-0.04em; line-height:1; }
.stats .num .r { color:var(--red); }
.stats .lbl { font-size:15px; color:var(--ink-2); margin-top:12px; letter-spacing:-0.01em; }
@media (max-width:640px){ .stats{ grid-template-columns:1fr; gap:32px; } }

/* ============================================================================
   TEAM
   ========================================================================== */
.roster { display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(26px,2.6vw,40px) clamp(16px,1.6vw,24px); }
@media (max-width:900px){ .roster { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .roster { grid-template-columns:repeat(2, 1fr); } }
.member .frame { position:relative; aspect-ratio:4/5; overflow:hidden; border-radius:var(--radius-sm);
  background:var(--bg-2); }
.member .frame.noimg { display:grid; place-items:center; }
.member .frame.noimg span { font-weight:600; font-size:clamp(1.8rem,3vw,2.4rem); letter-spacing:-0.02em;
  color:var(--ink-3); }
.member .frame.noimg::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--line);
  border-radius:inherit; pointer-events:none; }
.member .frame img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.member:hover .frame img { transform:scale(1.04); }
.member .nm { font-weight:600; font-size:1.15rem; margin-top:16px; letter-spacing:-0.02em; }
.member .role { font-size:13px; color:var(--red); margin-top:4px; font-weight:500; }
.member .bio { color:var(--ink-2); font-size:14px; line-height:1.5; margin-top:10px;
  max-height:0; opacity:0; overflow:hidden; transition:max-height .5s var(--ease), opacity .4s var(--ease); }
.member:hover .bio, .member:focus-within .bio { max-height:150px; opacity:1; }
@media (hover:none){ .member .bio{ max-height:150px; opacity:1; } }

/* ============================================================================
   RECORD + GLOSSARY
   ========================================================================== */
.datagrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:clamp(28px,4vw,56px); }
.datagrid .block .h { font-weight:600; font-size:1.1rem; letter-spacing:-0.02em; padding-bottom:14px;
  border-bottom:1px solid var(--line); margin-bottom:16px; }
.datagrid ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.datagrid li { color:var(--ink-2); font-size:15px; line-height:1.45; }
.datagrid li strong { color:var(--ink); font-weight:600; }
.datagrid li .yr { color:var(--ink-3); font-size:13px; }

.glossary { border-top:1px solid var(--line); }
.glossary .row { display:grid; grid-template-columns:96px 1fr; gap:clamp(18px,3vw,44px);
  padding:26px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.glossary .term { font-weight:700; font-size:1.4rem; color:var(--red); letter-spacing:-0.02em; }
.glossary .def .t { font-weight:600; font-size:1.1rem; letter-spacing:-0.02em; }
.glossary .def .d { color:var(--ink-2); font-size:15px; line-height:1.5; margin-top:6px; max-width:62ch; }
@media (max-width:620px){ .glossary .row{ grid-template-columns:1fr; gap:6px; } }

/* ============================================================================
   DEDICATION + FOOTER
   ========================================================================== */
#dedication { text-align:center; }
#dedication .rule { width:44px; height:3px; border-radius:3px; background:var(--red); margin:0 auto clamp(28px,5vh,40px); }
#dedication blockquote { font-weight:600; font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.3;
  max-width:20ch; margin:0 auto; letter-spacing:-0.03em; }
#dedication .by { font-size:14px; color:var(--ink-3); margin-top:26px; font-weight:500; }

footer { border-top:1px solid var(--line); padding:clamp(36px,6vh,60px) 0; background:var(--bg-2); }
footer .row { display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; font-size:13px; color:var(--ink-3); }
footer .brand { font-weight:600; font-size:15px; color:var(--ink); letter-spacing:-0.02em; }
footer .brand .r { color:var(--red); }
footer a:hover { color:var(--ink); }
footer .push { margin-left:auto; }
@media (max-width:620px){ footer .push{ margin-left:0; } }

/* ============================================================================
   POLISH PASS — bento overview, card micro-interactions, refined motion
   (ui-ux-pro-max: bento showcase · #f5f5f7 cards · 16px radius · hover-scale
    1.02 · staggered reveals · restrained, premium)
   ========================================================================== */

/* centered feature intro (Apple pattern) */
.section-head.center { max-width:720px; margin-inline:auto; text-align:center; }
.section-head.center .deck { margin-inline:auto; }

/* bento overview tiles */
.bento { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tile {
  position:relative; display:flex; flex-direction:column; gap:8px;
  padding:28px 26px 24px; border-radius:20px; background:var(--bg);
  border:1px solid var(--line); color:var(--ink);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change:transform;
}
.tile:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,0.08); border-color:transparent; }
.tile:active { transform:translateY(-1px); }
.tile-idx { font-size:13px; font-weight:600; color:var(--red); letter-spacing:0; }
.tile h3 { font-size:1.35rem; font-weight:600; letter-spacing:-0.028em; margin-top:2px; }
.tile p { color:var(--ink-2); font-size:15px; line-height:1.45; flex:1; }
.tile-go { display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500;
  color:var(--red-ink); margin-top:8px; }
.tile-go svg { width:16px; height:16px; transition:transform .3s var(--ease); }
.tile:hover .tile-go svg { transform:translateX(4px); }
@media (max-width:820px){ .bento { grid-template-columns:1fr; gap:14px; } }

/* refined buttons — subtle depth + press */
.btn-primary { box-shadow:0 1px 2px rgba(224,30,43,0.28); }
.btn-primary:hover { box-shadow:0 8px 22px rgba(224,30,43,0.30); }
.btn:active { transform:translateY(0) scale(0.98); }
.btn-ghost .arrow, .btn-ghost svg { transition:transform .3s var(--ease); }

/* stats — tabular figures, subtle top rule per stat */
.stats .num { font-variant-numeric:tabular-nums; }
#reassembly .stats .stat { padding-top:22px; border-top:1px solid var(--line-2); }

/* team cards — gentle lift, refined caption */
.member .frame { transition:transform .4s var(--ease), box-shadow .4s var(--ease); }
.member:hover .frame { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,0.10); }

/* links — animated underline on inline accent links */
.datagrid a.accent { position:relative; }

/* staggered grid reveals: children lift in sequence */
.reveal.armed.in .stagger-child { }
.bento.armed .tile, .roster.armed .member { opacity:0; transform:translateY(16px); }
.bento.in .tile, .roster.in .member { opacity:1; transform:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease); }
.bento.in .tile:nth-child(1), .roster.in .member:nth-child(1){ transition-delay:.00s; }
.bento.in .tile:nth-child(2), .roster.in .member:nth-child(2){ transition-delay:.06s; }
.bento.in .tile:nth-child(3), .roster.in .member:nth-child(3){ transition-delay:.12s; }
.roster.in .member:nth-child(4){ transition-delay:.18s; }
.roster.in .member:nth-child(5){ transition-delay:.24s; }
.roster.in .member:nth-child(6){ transition-delay:.30s; }
.roster.in .member:nth-child(7){ transition-delay:.36s; }
.roster.in .member:nth-child(8){ transition-delay:.42s; }
.roster.in .member:nth-child(9){ transition-delay:.48s; }
.roster.in .member:nth-child(10){ transition-delay:.54s; }
.roster.in .member:nth-child(11){ transition-delay:.60s; }
.roster.in .member:nth-child(12){ transition-delay:.66s; }
@media (prefers-reduced-motion: reduce){
  .bento.armed .tile, .roster.armed .member { opacity:1; transform:none; }
}

/* the tinted machine section must sit ON TOP of the (faded) bot canvas */
.section.tint { position:relative; z-index:1; }

/* ============================================================================
   SCROLL-SCRUBBED VIDEO HERO
   A tall track gives the scroll distance; the pin holds the video full-screen
   while scroll position drives video.currentTime. Text overlays on the left,
   where the turntable render is empty light space.
   ========================================================================== */
#hero { position:relative; min-height:0; padding:0; display:block; }
.vh-track { height:340vh; }                 /* scroll distance to scrub the 10s clip */
.vh-pin { position:sticky; top:0; height:100svh; overflow:hidden; background:var(--bg); }
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:var(--bg);                      /* frame sequence is drawn with cover math in JS */
}
/* soft light wash on the left so dark text stays legible over the render */
.vh-scrim { position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(94deg,
    color-mix(in srgb, var(--bg) 97%, transparent) 0%,
    color-mix(in srgb, var(--bg) 88%, transparent) 30%,
    color-mix(in srgb, var(--bg) 55%, transparent) 46%,
    transparent 66%); }
html[data-theme="dark"] .vh-scrim { background:linear-gradient(94deg,
    color-mix(in srgb, #000 82%, transparent) 0%,
    color-mix(in srgb, #000 60%, transparent) 32%,
    color-mix(in srgb, #000 32%, transparent) 48%,
    transparent 66%); }
.vh-overlay { position:absolute; inset:0; max-width:none; display:flex; flex-direction:column;
  justify-content:center; padding-block:var(--section-pad); }
.vh-overlay .col { max-width:min(40%, 480px); }
.vh-overlay .eyebrow { display:block; margin-bottom:18px; font-size:19px; }
.vh-overlay h1 { font-weight:600; font-size:clamp(3rem,6.6vw,5.4rem); line-height:0.98;
  letter-spacing:-0.035em; }
.vh-overlay h1 .r { color:var(--red); }
.vh-overlay .lead { margin-top:24px; max-width:26ch; }
.vh-overlay .cta { margin-top:34px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }
.vh-overlay .scrollcue { margin-top:44px; font-size:13px; color:var(--ink-3);
  display:flex; align-items:center; gap:10px; }
.vh-overlay .scrollcue .chev { width:16px; height:16px; animation:bob 1.8s var(--ease) infinite; }

@media (max-width:900px){
  /* phones: video fills the top, copy sits in the lower third over the wash */
  .vh-track { height:300vh; }
  #hero-video { object-position:50% 42%; }
  .vh-scrim { background:linear-gradient(180deg,
      transparent 0%, transparent 38%,
      color-mix(in srgb, var(--bg) 70%, transparent) 62%,
      var(--bg) 100%); }
  html[data-theme="dark"] .vh-scrim { background:linear-gradient(180deg,
      transparent 0%, transparent 40%,
      color-mix(in srgb, #000 60%, transparent) 64%, #000 100%); }
  .vh-overlay { justify-content:flex-end; padding-bottom:12vh; }
  .vh-overlay .col { max-width:100%; }
}

/* ============================================================================
   LIQUID GLASS — Apple's 2025 material, translated to CSS.
   Rule from the liquid-glass skill: glass lives ONLY on the navigation /
   controls layer that floats above content (nav, buttons, toggles) — never on
   content itself (cards, text, photos). Layers: frosted translucent body,
   a lit top edge, a specular sheen, and a highlight that follows the pointer.
   ========================================================================== */
:root {
  --glass-bg:     rgba(255,255,255,0.46);
  --glass-rim:    rgba(255,255,255,0.72);
  --glass-edge:   rgba(0,0,0,0.07);
  --glass-hi:     rgba(255,255,255,0.95);
  --glass-shadow: 0 10px 34px rgba(0,0,0,0.10), 0 1px 3px rgba(0,0,0,0.06);
  --glass-blur:   blur(22px) saturate(190%) brightness(1.05);
}
html[data-theme="dark"] {
  --glass-bg:     rgba(38,38,42,0.44);
  --glass-rim:    rgba(255,255,255,0.16);
  --glass-edge:   rgba(0,0,0,0.35);
  --glass-hi:     rgba(255,255,255,0.24);
  --glass-shadow: 0 10px 34px rgba(0,0,0,0.5);
  --glass-blur:   blur(22px) saturate(170%) brightness(0.95);
}

#topbar, #theme, .btn-ghost, .btn-primary, #topbar .right a {
  -webkit-tap-highlight-color:transparent;
}
#topbar, #theme, .btn-ghost {
  isolation:isolate;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-rim);
  box-shadow:inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-edge), var(--glass-shadow);
}
.btn-ghost { position:relative; }
/* specular sheen: light catching the upper curve of the glass */
#topbar::before, #theme::before, .btn-ghost::before, .btn-primary::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1;
  background:linear-gradient(165deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.10) 36%, transparent 58%);
}
html[data-theme="dark"] #topbar::before, html[data-theme="dark"] #theme::before,
html[data-theme="dark"] .btn-ghost::before { opacity:.35; }
/* interactive highlight that tracks the pointer (set by app.js as --mx/--my) */
#theme::after, .btn-ghost::after, .btn-primary::after, #topbar .right a::after {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.45), transparent 60%);
  opacity:0; transition:opacity .25s var(--ease);
}
#theme:hover::after, .btn-ghost:hover::after, .btn-primary:hover::after, #topbar .right a:hover::after { opacity:1; }

/* floating capsule nav (detached from the edge, like iOS 26) */
#topbar, #topbar.solid {
  top:12px; left:50%; right:auto; transform:translateX(-50%);
  width:min(1120px, calc(100% - 24px)); height:54px; border-radius:999px;
  padding:0 8px 0 20px; pointer-events:auto;
  border-bottom:1px solid var(--glass-rim);
  transition:box-shadow .4s var(--ease), background .4s var(--ease);
}
#topbar.solid { --glass-bg:rgba(255,255,255,0.62); }
html[data-theme="dark"] #topbar.solid { --glass-bg:rgba(38,38,42,0.62); }
#topbar .right { gap:4px; }
#topbar .right a { position:relative; padding:8px 16px; border-radius:999px; overflow:hidden;
  transition:color .2s, background .25s var(--ease); }
#topbar .right a:hover { background:rgba(255,255,255,0.45); color:var(--ink); }
html[data-theme="dark"] #topbar .right a:hover { background:rgba(255,255,255,0.08); }
@media (max-width:640px){
  #topbar, #topbar.solid { left:12px; transform:none; width:auto; padding:0 20px; }
}

/* glass buttons — secondary is clear glass, primary is red-tinted glass */
.btn-ghost { color:var(--ink); overflow:hidden; }
.btn-ghost:hover { color:var(--ink); transform:translateY(-1px); }
.btn-primary { position:relative; overflow:hidden; isolation:isolate;
  background:color-mix(in srgb, var(--red) 86%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,0.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.12),
             0 8px 24px color-mix(in srgb, var(--red) 32%, transparent); }
.btn-primary::before { background:linear-gradient(165deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0.06) 40%, transparent 60%); }
.btn-primary:hover { filter:none; transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -1px 0 rgba(0,0,0,0.12),
             0 12px 30px color-mix(in srgb, var(--red) 38%, transparent); }
.btn:active, #theme:active { transform:scale(0.97); }

/* theme toggle — a glass orb */
#theme { overflow:hidden; color:var(--ink-2); }
#theme:hover { color:var(--red); border-color:var(--glass-rim); transform:translateY(-2px); }

/* browsers without backdrop-filter: fall back to a solid frosted fill */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  #topbar, #theme, .btn-ghost { background:color-mix(in srgb, var(--bg) 92%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
  #topbar, #theme, .btn-ghost { background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* footer credit */
footer .credit { margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-3); letter-spacing:0; }
footer .credit b { color:var(--ink-2); font-weight:600; }

/* whole-team group photo — content, so no glass; just a clean rounded frame */
.team-photo { margin:0 0 clamp(40px,6vh,64px); }
.team-photo img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  object-position:50% 50%; border-radius:var(--radius); background:var(--bg-2); }
.team-photo figcaption { font-size:13px; color:var(--ink-3); margin-top:12px; font-weight:500; }
.roster.in .member:nth-child(13){ transition-delay:.72s; }
footer .credit { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer .crew-link { color:var(--ink-3); font-weight:500; }
footer .crew-link:hover { color:var(--red-ink); }