/* Apple product-page visual layer.
   Same dark theme and lime accent; Apple's layout language:
   centered statements, generous space, borderless rounded tiles, fewer and larger words.
   Revert: remove the <link> to this file in index.html. */
:root{
  --a-bg:#000;
  --a-tile:#111213;
  --a-tile-2:#17181a;
  --a-text:#f5f5f7;
  --a-secondary:#a1a1a6;
  --a-tertiary:#6e6e73;
  --a-accent:#cefa91;
  --a-radius:28px;
  --a-radius-sm:18px;
  --a-section:clamp(96px,12vw,168px);
  --a-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Inter","Segoe UI Variable Display","Segoe UI",system-ui,sans-serif;
}

/* ---------- Canvas & type ---------- */
html body{padding-top:0!important;background:var(--a-bg);color:var(--a-text);font-family:var(--a-font);font-size:17px;line-height:1.47;letter-spacing:-.022em}
body .wrap{width:min(1068px,calc(100% - 44px))}
body h1,body h2,body h3{font-family:var(--a-font);color:var(--a-text)}
body main h2{font-size:clamp(40px,5.6vw,64px)!important;line-height:1.06!important;font-weight:700!important;letter-spacing:-.035em!important;margin:0}
body main .runtime-strip h2{font-size:15px!important;font-weight:500!important;letter-spacing:-.01em!important}
body h3{font-weight:600;letter-spacing:-.02em}
body p{letter-spacing:-.016em}
body code{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace}

/* Eyebrows: sentence-weight accent line instead of mono micro-caps. */
body main .eyebrow{display:block;font-family:var(--a-font)!important;font-size:clamp(17px,1.6vw,21px)!important;font-weight:600!important;letter-spacing:-.01em!important;text-transform:lowercase!important;color:var(--a-accent)!important;margin:0 0 14px!important}
body .eyebrow>span:empty{display:none}
body .eyebrow{font-variant:normal}
body main .eyebrow::first-letter{text-transform:uppercase}

/* Decorative technical labels compete with the message — remove them. */
.map-label,.coordinate,.demo-label,.example-tag,.lobby-top,.lobby-bottom,.stage-number,
.distribution-toolbar>span,.terminal-bottom>span:first-child,.network-grid{display:none!important}

/* ---------- Navigation: thin full-width glass bar ---------- */
body .header{position:sticky!important;top:0!important;left:0!important;transform:none!important;width:100%!important;max-width:none!important;margin:0!important;
  border-radius:0!important;border:0!important;border-bottom:1px solid #ffffff14!important;
  background:rgba(22,22,23,.72)!important;backdrop-filter:saturate(180%) blur(20px)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;box-shadow:none!important}
body .header .nav{width:min(1068px,calc(100% - 44px));min-height:52px;padding-block:0}
body .nav-caption{display:none}
body .nav-wordmark{font-size:19px;font-weight:600;letter-spacing:-.02em}
body .nav-links{background:none!important;border:0!important;box-shadow:none!important;gap:6px}
body .nav-links a{font-size:13px;font-weight:400;color:#d2d2d7cc!important;background:none!important;box-shadow:none!important;padding:6px 12px;letter-spacing:-.01em}
body .nav-links a:hover,body .nav-links a[aria-current="location"]{color:var(--a-text)!important}
body .nav-cta{min-height:30px!important;padding:5px 14px!important;font-size:13px!important;font-weight:500!important;gap:6px!important;border-radius:999px!important;background:var(--a-accent)!important;border-color:var(--a-accent)!important;color:#11170a!important;box-shadow:none!important}
body .nav-cta .nav-arrow{display:none}

/* ---------- Buttons: Apple pill + text link ---------- */
body .button{border-radius:999px;font-family:var(--a-font);font-size:17px;font-weight:500;letter-spacing:-.01em;min-height:48px;padding:12px 24px;gap:10px;box-shadow:none!important}
body .button.primary{background:var(--a-accent);border-color:var(--a-accent);color:#11170a}
body .button.primary:hover{background:#d9fca8;border-color:#d9fca8}
body .button.primary .icon{width:16px;height:16px;animation:none!important}
body .hero-support{background:transparent!important;border-color:transparent!important;color:var(--a-accent)!important;padding-inline:12px}
body .hero-support::after{content:"›";font-size:22px;line-height:1;margin-left:2px;transform:translateY(-1px)}
body .hero-support:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- Hero: centered statement, visual below ---------- */
body .hero{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center;gap:clamp(40px,6vw,72px)!important;padding-top:clamp(72px,10vw,128px)!important;padding-bottom:clamp(40px,6vw,72px)!important;min-height:0!important}
body .hero-copy{display:flex;flex-direction:column;align-items:center;max-width:860px;text-align:center}
body .hero h1{font-size:clamp(48px,8.4vw,96px)!important;line-height:1.02!important;font-weight:700!important;letter-spacing:-.045em!important;margin:0 0 24px!important;text-align:center}
body .hero h1 .headline-line{display:block}
body .hero .headline-accent{color:var(--a-accent);background:linear-gradient(92deg,#e6ffc4,#cefa91 45%,#9fe06a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body .hero-description{font-size:clamp(19px,1.9vw,24px)!important;line-height:1.38!important;font-weight:500;color:var(--a-secondary)!important;max-width:640px!important;margin:0 auto;letter-spacing:-.02em}
body .hero-actions{justify-content:center;margin-top:36px!important;gap:16px!important;flex-wrap:wrap}
body .hero-note{justify-content:center;margin-top:20px;font-size:14px;color:var(--a-tertiary)!important}
body .hero-note .tiny-check{color:var(--a-accent)}
body .hero>.network{width:min(760px,100%)!important;max-width:none!important;margin:0 auto!important;align-self:center!important;aspect-ratio:1.12;background:radial-gradient(ellipse at 50% 50%,#cefa9114,transparent 60%)!important}
body .hero>.network .peer{border-radius:16px;border-color:#ffffff10!important;background:#161718!important;box-shadow:0 10px 30px #0008!important}
body .hero>.network .peer>span{font-family:var(--a-font);font-size:11px!important;letter-spacing:-.005em;color:var(--a-secondary)!important}
body .hero>.network .hub{border-radius:24px}
body .network-caption{font-family:var(--a-font);font-size:13px;letter-spacing:-.01em;color:var(--a-tertiary)!important}

/* ---------- Runtimes: quiet typographic row ---------- */
body .runtime-showcase.runtime-strip{background:none!important;box-shadow:none!important;border:0!important;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0;margin-block:24px 0!important}
body .runtime-strip h2{font-size:15px;font-weight:500;letter-spacing:-.01em;color:var(--a-tertiary);text-transform:none}
body .runtime-name-list{justify-content:center;gap:clamp(24px,4vw,56px)!important;flex-wrap:wrap}
body .runtime-name-list li{border:0!important;background:none!important;align-items:center}
body .runtime-name-list strong{font-family:var(--a-font);font-size:clamp(20px,2.2vw,28px);font-weight:600;letter-spacing:-.025em;color:var(--a-text)}
body .runtime-name-list .runtime-upcoming strong{color:var(--a-tertiary)}
body .runtime-name-list span{font-family:var(--a-font);font-size:12px;letter-spacing:0;text-transform:none;color:var(--a-tertiary)}

/* ---------- Section rhythm ---------- */
body .section,body .start-section,body .contribute-section{padding-block:var(--a-section)!important;margin-block:0!important}
body .section-heading{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center;gap:20px!important;margin:0 auto clamp(48px,6vw,80px)!important;max-width:820px}
body .section-heading h2 br{display:inline}
body .section-aside{font-size:clamp(19px,1.9vw,22px)!important;line-height:1.4!important;font-weight:500;color:var(--a-secondary)!important;max-width:620px!important;width:auto!important;margin:0 auto;text-align:center}

/* ---------- Tiles: borderless, large radius, soft fill ---------- */
body .feature-card,body .terminal-card,body .distribution-demo,body .beta-lobby,body .contribute-card,body .lobby-signup,body .role-card,body .flow-stage,body .distribution-note,body .founding-offer{
  border:0!important;box-shadow:none!important}
body .feature-card,body .contribute-card{background:var(--a-tile)!important;border-radius:var(--a-radius)!important;padding:clamp(28px,3vw,40px)!important}
body .feature-card:hover,body .contribute-card:hover{transform:none!important;background:var(--a-tile-2)!important}
body .benefits-grid{gap:20px!important}
body .benefits-grid .feature-card{min-height:0!important;display:flex;flex-direction:column}
body .feature-card h3{font-size:clamp(22px,2vw,28px);line-height:1.14;margin:22px 0 12px}
body .feature-card p{font-size:17px!important;line-height:1.47!important;color:var(--a-secondary)!important}
body .feature-card .feature-icon{width:32px;height:32px;color:var(--a-accent);stroke:var(--a-accent);padding:0;border:0;background:none}
body .feature-card>div:last-child{margin-top:auto;padding-top:24px}
body .benefit-labels span,body .isolation-art span,body .branch-preview span{font-family:var(--a-font);font-size:12px;letter-spacing:-.005em;border:0!important;background:#ffffff0d!important;border-radius:999px;padding:6px 12px;color:var(--a-secondary)}

/* Deploy section */
body .playground-grid{align-items:center;gap:clamp(32px,5vw,72px)!important}
body .playground-copy h2{text-align:left}
body .playground-copy h2 br{display:inline}
body .playground-copy>p:not(.eyebrow){font-size:19px;line-height:1.47;color:var(--a-secondary);margin-top:18px}
body .use-tabs{gap:8px;margin-top:28px}
body .use-tabs [role="tab"]{border:0!important;border-radius:14px!important;background:transparent!important;color:var(--a-secondary)!important;font-family:var(--a-font);font-size:17px;padding:14px 16px}
body .use-tabs [role="tab"][aria-selected="true"]{background:var(--a-tile-2)!important;color:var(--a-text)!important}
body .terminal-card{background:#0d0d0e!important;border-radius:var(--a-radius)!important;overflow:hidden;box-shadow:0 0 0 1px #ffffff12,0 40px 80px -20px #000!important}
body .terminal-top{border-bottom-color:#ffffff0d!important;background:#161617!important}
body .terminal-bottom{border-top-color:#ffffff0d!important;justify-content:flex-end}
body #replay{border-radius:999px!important;font-family:var(--a-font)}

/* Distribution */
body .distribution-demo{background:var(--a-tile)!important;border-radius:var(--a-radius)!important;padding:clamp(20px,3vw,40px)!important;overflow:hidden}
body .distribution-toolbar{justify-content:center;border:0!important;padding:0 0 12px!important;background:none!important}
body .traffic-controls{background:#ffffff0d;border-radius:999px;padding:3px;border:0!important}
body .traffic-controls button{border:0!important;border-radius:999px!important;font-family:var(--a-font);font-size:14px;padding:8px 18px;background:transparent!important;color:var(--a-secondary)!important}
body .traffic-controls button[aria-pressed="true"]{background:#2c2c2e!important;color:var(--a-text)!important}
body .flow-stage{background:var(--a-tile-2)!important;border-radius:var(--a-radius-sm)!important}
body .flow-stage h3{font-size:21px}
body .flow-stage p,body .distribution-note p{color:var(--a-secondary);font-size:15px!important;line-height:1.45!important}
body .distribution-note h3{font-size:17px!important}
body .distribution-summary p{font-size:15px!important;font-weight:400;color:var(--a-secondary)}
body .diagram-node{border:0!important;background:#ffffff08!important;border-radius:12px!important}
body .distribution-summary{justify-content:center;text-align:center;border:0!important;background:none!important;color:var(--a-secondary)}
body .distribution-notes{gap:20px;border:0!important}
body .distribution-note{background:var(--a-tile-2)!important;border-radius:var(--a-radius-sm)!important;padding:24px!important}
body .distribution-note p{color:var(--a-secondary)}

/* ---------- Beta: one calm, centered stage ---------- */
body .beta-lobby{display:block!important;background:radial-gradient(120% 80% at 50% 0%,#cefa9112,transparent 60%),var(--a-tile)!important;border-radius:36px!important;padding:clamp(48px,7vw,96px) clamp(20px,5vw,72px)!important}
body .lobby-heading{padding:0!important;display:flex;flex-direction:column;align-items:center;text-align:center;max-width:720px;margin:0 auto}

body .lobby-heading h2 br{display:none}
body .lobby-heading h2 span{display:block;color:var(--a-accent)}
body .lobby-heading>p:not(.eyebrow):not(.founding-fine){font-size:21px!important;max-width:560px;color:var(--a-secondary);margin-top:18px}
body .founding-offer{background:#cefa910f!important;border-radius:var(--a-radius-sm)!important;margin-top:28px;text-align:left}
body .founding-fine{color:var(--a-tertiary);font-size:13px}
body .beta-reassurance{justify-content:center;gap:20px}
body .beta-reassurance span{border:0!important;background:none!important;color:var(--a-secondary);font-size:14px}
body .role-options{gap:16px!important;margin:clamp(40px,5vw,64px) auto 16px!important;max-width:none!important}
body .lobby-signup{padding:clamp(24px,3vw,36px)!important;margin:0!important}
body .role-card{background:var(--a-tile-2)!important;border-radius:22px!important;box-shadow:inset 0 0 0 1px transparent!important;text-align:left}
body .role-card.selected{box-shadow:inset 0 0 0 2px var(--a-accent)!important;background:#1a1f15!important}
body .role-card strong{font-size:21px;letter-spacing:-.02em}
body .role-card .role-description{color:var(--a-secondary)}
body .role-number{font-family:var(--a-font)!important;letter-spacing:0!important}
body .lobby-signup{background:#0b0b0c!important;border-radius:24px!important;margin-top:16px}
body .step-label{font-family:var(--a-font)!important;text-transform:none!important;letter-spacing:-.01em!important;font-size:14px!important;color:var(--a-accent)!important}
body #beta-email{border-radius:14px!important;border:1px solid #ffffff1f!important;background:#1c1c1e!important;font-family:var(--a-font);font-size:17px;min-height:52px}
body #beta-email:focus{outline:none;border-color:var(--a-accent)!important;box-shadow:0 0 0 4px #cefa9133}

/* ---------- Contribute ---------- */
body .contribute-grid{gap:20px!important}
body .contribute-top,body .contribute-top span{font-family:var(--a-font)!important;font-size:13px;text-transform:none;letter-spacing:-.01em;color:var(--a-tertiary)}
body .contribute-card h3{font-size:clamp(24px,2.4vw,32px);line-height:1.12;margin:20px 0 10px}
body .contribute-card p{color:var(--a-secondary)!important;font-size:17px!important}
body .contribute-action{border:0!important;background:none!important;padding:0!important;color:var(--a-accent)!important;font-size:17px;font-family:var(--a-font)}
body .contribute-action:hover{text-decoration:underline;text-underline-offset:4px}
body .contribute-footnote{text-align:center;color:var(--a-tertiary);justify-content:center}

/* ---------- Footer ---------- */
body .footer{border-top:1px solid #ffffff14!important;padding-block:28px 40px!important;font-size:12px;color:var(--a-tertiary)}
body .footer a{color:var(--a-secondary)}
body .builder-info small{font-family:var(--a-font);letter-spacing:0;text-transform:none}

/* ---------- Floating chrome ---------- */
body .beta-dock{background:rgba(29,29,31,.72)!important;border:1px solid #ffffff14!important;backdrop-filter:saturate(180%) blur(20px)!important;-webkit-backdrop-filter:saturate(180%) blur(20px)!important;box-shadow:0 20px 40px #0009!important}
body .beta-dock>span{font-family:var(--a-font);font-size:13px!important;color:var(--a-secondary)!important}
body .motion-control{font-family:var(--a-font);border-radius:999px}
body .sponsor-dialog{border:0!important;border-radius:var(--a-radius)!important;background:#1c1c1e!important}
body .sponsor-dialog input,body .sponsor-dialog textarea{border-radius:12px!important;font-family:var(--a-font)}

/* ---------- Small screens ---------- */
@media (max-width:820px){
  body .header .nav{min-height:48px}
  body .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:340px}
  body .hero-actions .button{width:100%;justify-content:center}
  body .playground-copy h2{text-align:center}
  body .playground-copy{text-align:center}
  body .use-tabs{align-items:stretch}
  body .runtime-name-list{gap:18px 28px!important}
}
@media (max-width:580px){
  :root{--a-radius:22px;--a-section:84px}
  body .hero h1{font-size:clamp(40px,11.5vw,56px)!important}
  body .beta-lobby{border-radius:26px!important}
}
@media (prefers-reduced-transparency:reduce){
  body .header,body .beta-dock{background:#161617!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ======================================================================
   Hero v2 + tighter rhythm (dev-infrastructure hero pattern)
   pill → headline → one-line value → CTA + install command → product stage
   ====================================================================== */
:root{--a-section:clamp(56px,7vw,96px)}
body .section-heading{margin-bottom:clamp(36px,4.5vw,56px)!important}
body .runtime-showcase.runtime-strip{margin-block:clamp(48px,6vw,72px) 0!important}

body .hero{padding-top:clamp(56px,8vw,104px)!important;padding-bottom:0!important;gap:clamp(48px,6vw,72px)!important}
body .hero h1{font-size:clamp(46px,7.4vw,88px)!important;margin:0 0 22px!important}
body .hero-description{font-size:clamp(18px,1.7vw,21px)!important;font-weight:400!important;max-width:600px!important;line-height:1.45!important}

/* Announcement pill */
.hero-pill{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;padding:5px 14px 5px 5px;border:1px solid #ffffff1a;border-radius:999px;background:#ffffff08;color:var(--a-secondary);font-size:14px;letter-spacing:-.01em;text-decoration:none;transition:background .3s var(--ease-settle),border-color .3s var(--ease-settle),transform .3s var(--ease-settle)}
.hero-pill:hover{background:#ffffff0f;border-color:#ffffff2e;color:var(--a-text)}
.hero-pill:active{transform:scale(.97);transition-duration:.08s}
.hero-pill-tag{padding:3px 10px;border-radius:999px;background:#cefa911f;color:var(--a-accent);font-size:12px;font-weight:600;letter-spacing:0}
.hero-pill .icon{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s var(--ease-settle)}
.hero-pill:hover .icon{transform:translateX(2px)}

/* CTA row: primary action + copyable install command */
body .hero-actions{align-items:center;margin-top:34px!important;gap:12px!important}
.install-chip{display:inline-flex;align-items:center;gap:12px;min-height:48px;max-width:100%;padding:0 8px 0 20px;border:1px solid #ffffff1f;border-radius:999px;background:#0f1011;color:var(--a-text);font:14px/1 "SF Mono",ui-monospace,Menlo,Consolas,monospace;cursor:pointer;transition:border-color .3s var(--ease-settle),background .3s var(--ease-settle),transform .32s var(--ease-settle)}
.install-chip:hover{border-color:#ffffff3a;background:#141516}
.install-chip:active{transform:scale(.97);transition-duration:.08s}
.install-chip:focus-visible{outline:2px solid var(--a-accent);outline-offset:3px}
.install-chip code{font:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.install-prompt{color:var(--a-accent)}
.install-copy{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#ffffff0d;color:var(--a-secondary);font-size:14px}
.install-chip:hover .install-copy{color:var(--a-text)}

body .hero-note{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin-top:22px!important;font-size:13px!important;color:var(--a-tertiary)!important}
body .hero-note span+span::before{content:"";display:inline-block;width:3px;height:3px;margin:0 12px 3px;border-radius:50%;background:currentColor;opacity:.6}

/* Product stage: framed network with floating glass cards */
.hero-stage{position:relative;width:100%;border-radius:32px;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 55% at 50% 100%,#cefa9118,transparent 70%),radial-gradient(40% 40% at 50% 45%,#cefa910d,transparent 70%),#0b0c0d;
  box-shadow:inset 0 1px 0 #ffffff12,0 0 0 1px #ffffff0d,0 50px 100px -40px #000}
.hero-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#ffffff14 1px,transparent 1px);background-size:22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
body .hero-stage .network{width:min(560px,100%)!important;max-width:none!important;margin:0 auto!important;aspect-ratio:1.12;background:none!important;animation:none}
body .hero-stage .network .peer{border-radius:14px;border-color:#ffffff12!important;background:#161718!important;box-shadow:0 10px 30px #0008!important}
body .hero-stage .network .peer>span{font-family:var(--a-font);font-size:11px!important;letter-spacing:-.005em;color:var(--a-secondary)!important}
body .hero-stage .network .hub{border-radius:22px;border-color:#cefa9140!important}
body .hero-stage .network-caption{display:none}

.stage-card{position:absolute;z-index:2;width:250px;padding:14px 16px 16px;border:1px solid #ffffff17;border-radius:18px;
  background:rgba(24,25,27,.72);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:inset 0 1px 0 #ffffff12,0 24px 48px -12px #000c;font-size:13px;color:var(--a-secondary)}
.stage-card p{display:flex;align-items:center;gap:8px;margin:7px 0 0;letter-spacing:-.005em}
.stage-card b{color:var(--a-accent);font-weight:600;width:12px}
.stage-card em{margin-left:auto;font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;background:#ffffff0d;color:var(--a-secondary)}
.stage-card-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid #ffffff0f;font-size:12px;color:var(--a-tertiary)}
.stage-dots{display:inline-flex;gap:5px}.stage-dots i{width:8px;height:8px;border-radius:50%;background:#ffffff1f}
.stage-cmd,.stage-route{font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--a-text)}
.stage-cmd span{color:var(--a-accent)}
.stage-live{color:var(--a-text)}
.stage-live .status-dot{width:7px;height:7px;border-radius:50%;background:var(--a-accent);box-shadow:0 0 0 4px #cefa9122}
.stage-card-deploy{left:clamp(16px,4vw,48px);top:clamp(24px,7%,56px)}
.stage-card-request{right:24px;bottom:24px;width:236px}

@media (max-width:980px){
  .stage-card{display:none}
}
@media (max-width:820px){
  body .hero-actions{flex-direction:column;align-items:stretch;width:100%;max-width:360px}
  .install-chip{width:100%;justify-content:space-between}
  .hero-pill{font-size:13px}
  .hero-stage{border-radius:24px}
}
@media (max-width:480px){
  body .hero-note span:last-child{display:none}
}
@media (max-width:420px){
  .hero-pill-text{max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (prefers-reduced-transparency:reduce){
  .stage-card{background:#18191b;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ======================================================================
   Navbar v2 — transparent at rest, material on scroll, capsule links
   ====================================================================== */
body .header{background:transparent!important;border-bottom-color:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transition:background .35s var(--ease-settle),border-color .35s var(--ease-settle),box-shadow .35s var(--ease-settle)}
body .header.is-scrolled{background:rgba(12,12,13,.7)!important;border-bottom-color:#ffffff12!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px)!important;backdrop-filter:saturate(180%) blur(20px)!important;box-shadow:0 10px 30px -10px #0008!important}
body .header .nav{min-height:64px;gap:24px}
body .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
body .nav-emblem{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(145deg,#2a3121,#14170f);box-shadow:inset 0 1px 0 #ffffff1c,0 0 0 1px #cefa9126,0 6px 16px -6px #cefa9140}
body .nav-emblem svg{width:22px;height:22px}
body .nav-wordmark{font-size:19px!important;font-weight:650!important;letter-spacing:-.03em!important;color:var(--a-text)}
.nav-badge{padding:2px 8px;border-radius:999px;border:1px solid #cefa9133;background:#cefa9112;color:var(--a-accent);font-size:11px;font-weight:600;letter-spacing:.01em;line-height:1.5}
@media (min-width:701px){
  body .nav-links{position:relative;display:flex;align-items:center;gap:2px!important;margin-inline:auto!important;padding:4px!important;border-radius:999px;
    background:#ffffff08!important;border:1px solid #ffffff12!important;box-shadow:inset 0 1px 0 #ffffff0a!important}
  body .nav-links a{position:relative;z-index:1;padding:7px 16px!important;border-radius:999px;font-size:14px!important;font-weight:450;color:#d2d2d7b3!important;transition:color .25s var(--ease-settle)}
  body .nav-links a:hover,body .nav-links a[aria-current="location"]{color:var(--a-text)!important}
  .nav-indicator{position:absolute;z-index:0;top:4px;bottom:4px;left:0;border-radius:999px;background:#ffffff14;box-shadow:inset 0 1px 0 #ffffff14;opacity:0;pointer-events:none;
    transition:transform .45s var(--ease-settle),width .45s var(--ease-settle),opacity .25s var(--ease-settle)}
}
@media (max-width:700px){.nav-indicator{display:none}}
body .nav-cta{min-height:36px!important;padding:6px 8px 6px 16px!important;font-size:14px!important;font-weight:600!important;gap:8px!important;
  box-shadow:0 0 0 1px #cefa91,0 8px 24px -8px #cefa9166!important}
body .nav-cta .nav-arrow{display:grid!important;place-items:center;width:22px;height:22px;border-radius:50%;background:#11170a;color:var(--a-accent)}
body .nav-cta .nav-arrow .icon{width:12px;height:12px;transition:transform .3s var(--ease-settle)}
body .nav-cta:hover .nav-arrow .icon{transform:translateX(2px)}

/* ======================================================================
   Live stage — traffic packets, typed deploy, pointer depth + light
   ====================================================================== */
.hero-stage{--mx:50%;--my:40%}
.hero-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(420px circle at var(--mx) var(--my),#cefa910f,transparent 60%);transition:opacity .5s var(--ease-settle)}
.hero-stage:hover::after{opacity:1}
body .hero-stage .network,.stage-card{will-change:translate}

/* Base wires: quiet; the dashed loop is replaced by real request packets. */
body .hero-stage .connections>g:first-child{stroke:#ffffff;opacity:.11;stroke-width:1}
body .hero-stage .connections .flow-lines{display:none}
.packet{fill:var(--a-accent)}
.packet-glow{fill:var(--a-accent);opacity:.18}
.packet.response{fill:#f5f5f7}
.packet-glow.response{fill:#f5f5f7;opacity:.12}

/* Nodes react when traffic reaches them. */
body .hero-stage .peer,body .hero-stage .hub{transition:box-shadow .5s var(--ease-settle),border-color .5s var(--ease-settle),scale .5s var(--ease-settle)}
body .hero-stage .peer.is-hit{scale:1.08;border-color:#cefa9180!important;box-shadow:0 0 0 4px #cefa9118,0 0 28px #cefa9133,0 10px 30px #0008!important;transition-duration:.12s}
body .hero-stage .hub.is-hit{scale:1.04;box-shadow:0 0 0 6px #cefa9112,0 0 60px #cefa9140!important;transition-duration:.12s}
body .hero-stage .satellite{width:10px;height:10px;transform:translate(-50%,-50%);background:#0b0c0d;transition:box-shadow .5s var(--ease-settle)}
body .hero-stage .satellite.is-hit{box-shadow:0 0 0 5px #cefa9122;transition-duration:.12s}
body .hero-stage .satellite::after{content:"Visitors";position:absolute;top:16px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--a-tertiary);white-space:nowrap;font-family:var(--a-font)}

/* Cards */
.stage-card .hop{opacity:.45;transition:opacity .35s var(--ease-settle)}
.stage-card .hop.is-active,.stage-card .hop.is-active~.hop[data-hop="__"]{opacity:1}
.stage-card .hop.is-active b{text-shadow:0 0 12px #cefa91}
.stage-card-request [data-hop="done"].is-active{color:var(--a-text)}
.stage-card #stage-path{transition:opacity .2s}
.stage-card .step{opacity:0;translate:0 4px;transition:opacity .4s var(--ease-settle),translate .4s var(--ease-settle)}
.stage-card .step.is-shown{opacity:1;translate:0 0}
.stage-cmd code{font:inherit;color:var(--a-text)}
.stage-cmd .caret{display:inline-block;width:7px;height:14px;margin-left:1px;background:var(--a-accent);opacity:0}
.stage-card-deploy.is-typing .caret{opacity:1;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .stage-card .step,.stage-card .hop{opacity:1;translate:none;transition:none}
  .hero-stage::after{display:none}
}