:root{
  --navy:#0A0F2C; --deep:#050819;
  --cream:#FDF8F1; --muted:#8C92AD;
  --orange:#FF8D01; --orange2:#FFB347; --green:#22C55E;
  --border:rgba(255,255,255,0.08);
  --surface:rgba(255,255,255,0.05);
  --radius:14px; --maxw:1080px;
  --font:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --serif:'Fraunces',Georgia,serif;
  --card-bg:var(--surface); --card-border:var(--border); --card-radius:var(--radius);
  --accent:#FF8D01; --accent-text:#FFB347;
  --accent-08:rgba(255,141,1,0.08); --accent-15:rgba(255,141,1,0.15);
  --accent-30:rgba(255,141,1,0.30); --accent-50:rgba(255,141,1,0.50);
}
[data-product="clips"]{
  --accent:#9061F9;
  --accent-08:rgba(144,97,249,0.08); --accent-15:rgba(144,97,249,0.15);
  --accent-30:rgba(144,97,249,0.30); --accent-50:rgba(144,97,249,0.50);
}
[data-product="spaces"]{
  --accent:#F0776B;
  --accent-08:rgba(240,119,107,0.08); --accent-15:rgba(240,119,107,0.15);
  --accent-30:rgba(240,119,107,0.30); --accent-50:rgba(240,119,107,0.50);
}
[data-product="games"]{
  --accent:#5B8DD9;
  --accent-08:rgba(91,141,217,0.08); --accent-15:rgba(91,141,217,0.15);
  --accent-30:rgba(91,141,217,0.30); --accent-50:rgba(91,141,217,0.50);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--deep);color:var(--cream);font-family:var(--font);
  min-height:100dvh;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(640px 420px at 50% -8%,var(--accent-08) 0%,transparent 70%)}
a{color:inherit}
.hb-topbar{height:8px;background:var(--accent)}
.hb-nav{max-width:var(--maxw);margin:0 auto;padding:18px 24px;
  display:flex;align-items:center;gap:28px}
.hb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.hb-mark{width:36px;height:36px;border-radius:10px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hb-mark svg{width:22px;height:22px;display:block}
.hb-wm{font-weight:900;font-size:1.25rem;letter-spacing:-0.5px;white-space:nowrap}
.hb-wm-a{color:var(--cream)} .hb-wm-b{color:var(--accent)}
.hb-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.hb-links a{color:var(--muted);text-decoration:none;font-size:0.88rem;font-weight:500}
.hb-links a:hover,.hb-links a.is-active{color:var(--cream)}
.hb-cta{background:var(--accent);color:var(--deep);font-weight:700;font-size:0.82rem;
  padding:9px 18px;border-radius:100px;text-decoration:none;white-space:nowrap}
.hb-wrap{max-width:var(--maxw);margin:0 auto;padding:32px 24px 64px;
  display:flex;flex-direction:column;gap:28px}
.hb-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hb-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* Multi-page nav: abbreviate instead of hiding. Opt-in via .hb-nav--compact. */
.hb-short{display:none}
@media(max-width:820px){
  .hb-links{display:none}
  .hb-grid-2,.hb-grid-3{grid-template-columns:1fr}
  .hb-nav--compact .hb-links{display:flex;gap:13px}
  .hb-nav--compact .hb-links a{font-size:11px}
  .hb-nav--compact .hb-full{display:none}
  .hb-nav--compact .hb-short{display:inline}
  .hb-nav--compact .hb-cta{font-size:11px;padding:7px 14px}
  .hb-nav--compact{gap:16px}
}
@media(max-width:520px){
  .hb-nav--compact .hb-wm{display:none}
  .hb-nav--compact .hb-mark{width:24px;height:24px;border-radius:6px}
  .hb-nav--compact .hb-mark svg{width:15px;height:15px}
  .hb-nav--compact{padding:13px 16px;gap:10px}
  .hb-nav--compact .hb-links{gap:10px}
  .hb-nav--compact .hb-links a{font-size:10.5px}
  .hb-nav--compact .hb-cta{font-size:10.5px;padding:6px 12px}
}
.hb-connect.is-on{background:transparent;border:1px solid var(--accent);
  color:var(--accent);font-family:var(--mono);font-size:0.76rem;letter-spacing:0.02em}
.hb-links a.hb-cta{color:var(--deep);font-weight:700;font-size:0.8rem;
  padding:8px 16px;margin-left:6px}
.hb-links a.hb-cta:hover{color:var(--deep);filter:brightness(1.08)}
.hb-links a.hb-cta.is-on{color:var(--accent)}
html{scroll-behavior:smooth;scroll-padding-top:90px}
.wrap{padding-left:24px;padding-right:24px}
.hb-nav,.wrap{width:100%}
@media(max-width:520px){.hb-nav{padding:14px 16px}.wrap{padding-left:16px;padding-right:16px}}
@keyframes hb-bar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hb-pop{from{opacity:0;transform:scale(0.82)}to{opacity:1;transform:scale(1)}}
@keyframes hb-slide{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.hb-topbar{transform-origin:left center;animation:hb-bar 620ms cubic-bezier(.22,1,.36,1) both}
.hb-mark{animation:hb-pop 520ms cubic-bezier(.34,1.4,.64,1) 90ms both;transition:transform 180ms ease}
.hb-wm{animation:hb-slide 460ms cubic-bezier(.22,1,.36,1) 220ms both}
.hb-links a{animation:hb-slide 420ms cubic-bezier(.22,1,.36,1) 320ms both}
.hb-brand:hover .hb-mark{transform:scale(1.07)}
@media(prefers-reduced-motion:reduce){
  .hb-topbar,.hb-mark,.hb-wm,.hb-links a{animation:none}
  .hb-brand:hover .hb-mark{transform:none}
}
[data-product="clips"]{--accent-text:#B79CFF}
[data-product="spaces"]{--accent-text:#FFA79C}
[data-product="games"]{--accent-text:#9DC0F0}
.card-label,.hcd-label,.step-num,.creator-chip,.help a,.hb-links a.hb-cta.is-on{color:var(--accent-text)}
.hb-wm-b{color:var(--accent-text)}
.hb-notice{max-width:var(--maxw);margin:14px auto 0;padding:16px 20px;
  background:var(--accent-08);border:1px solid var(--accent-30);
  border-radius:var(--radius);display:flex;gap:16px;align-items:flex-start}
.hb-notice[hidden]{display:none}
.hb-notice-body{flex:1;min-width:0}
.hb-notice-title{font-size:0.78rem;font-weight:800;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:6px}
.hb-notice-text{font-size:0.9rem;line-height:1.55;color:var(--cream)}
.hb-notice-text b{color:var(--accent-text);font-weight:700}
.hb-notice-x{background:transparent;border:1px solid var(--border);color:var(--muted);
  border-radius:100px;padding:6px 14px;font-size:0.78rem;font-weight:700;
  cursor:pointer;font-family:var(--font);flex-shrink:0}
.hb-notice-x:hover{color:var(--cream);border-color:var(--accent-30)}
@media(max-width:640px){.hb-notice{flex-direction:column;margin:12px 16px 0}}