/* ============================================================================
   ByondAPI — developer/CPaaS marketing site.
   Shares the Byond TYPE FAMILY (JetBrains Mono) + structural DNA (logo lockup,
   "© B'Yond … is a B'Yond product" footer, .rv scroll reveals, mobile drawer)
   with byondvoice/byondcx — but carries ByondAPI's own DEVELOPER identity:
   a near-black "TERMINAL VIOLET" theme (electric violet + terminal-green signal)
   instead of byondvoice's light cyan->indigo paper. Code-forward, dot-grid +
   gradient-mesh + grain atmosphere. No build step — plain CSS.
   ============================================================================ */
:root{
  /* near-black canvas */
  --bg:#08070D; --bg-2:#0C0B14; --panel:#100E1A; --panel-2:#15131F;
  --ink:#ECEAF6; --ink-soft:#B9B4CF; --muted:#7E7896; --faint:#574F70;
  --line:rgba(160,140,255,.13); --line-2:rgba(160,140,255,.07);
  --hair:rgba(255,255,255,.06);

  /* TERMINAL VIOLET accent + terminal-green signal */
  --v1:#7C5CFF; --v2:#A855F7; --v3:#C77DFF;
  --accent:#8B5CF6;
  --grad:linear-gradient(118deg,#7C5CFF 0%,#A855F7 52%,#C77DFF 100%);
  --grad-soft:linear-gradient(118deg,rgba(124,92,255,.22),rgba(199,125,255,.10));
  --green:#3DF5A0; --green-glow:rgba(61,245,160,.55);
  --amber:#FFB454;

  /* syntax tokens */
  --tk-cmt:#5E5780; --tk-fn:#C77DFF; --tk-str:#3DF5A0; --tk-prop:#8FB6FF;
  --tk-num:#FFB454; --tk-key:#FF7AC6; --tk-brace:#B9B4CF; --tk-ok:#3DF5A0;

  --r:18px; --maxw:1200px;
  --display:"Syne",sans-serif; --sans:"Hanken Grotesk",sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; line-height:1.55; overflow-x:hidden;
  position:relative;
}
/* gradient-mesh glow */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% -8%, rgba(124,92,255,.30), transparent 60%),
    radial-gradient(48% 44% at 6% 4%, rgba(199,125,255,.14), transparent 58%),
    radial-gradient(60% 60% at 50% 116%, rgba(61,245,160,.07), transparent 60%);
}
/* dot-grid + faint film grain */
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(circle, rgba(160,140,255,.10) 1px, transparent 1.4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:30px 30px, 160px 160px;
  mask-image:radial-gradient(130% 100% at 50% 0%,#000,transparent 78%);
}
body.locked{overflow:hidden}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 30px; position:relative; z-index:1}
.mono{font-family:var(--mono); font-weight:500; letter-spacing:.01em}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.code-il{font-size:.92em; background:rgba(124,92,255,.14); border:1px solid var(--line); border-radius:6px; padding:.5px 6px; color:#D6CBFF; white-space:nowrap}
::selection{background:rgba(124,92,255,.4); color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(124,92,255,.32);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(124,92,255,.5)}

/* shared signal dot */
.dot-ok{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green-glow), 0 0 8px var(--green-glow);animation:pulseG 2s infinite;flex:none;display:inline-block}
@keyframes pulseG{0%,100%{box-shadow:0 0 0 0 var(--green-glow),0 0 8px var(--green-glow)}50%{box-shadow:0 0 0 5px rgba(61,245,160,0),0 0 8px var(--green-glow)}}

.kicker{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--v3); display:inline-flex; align-items:center; gap:8px; text-transform:lowercase}
.kicker::before{content:""; width:18px; height:1px; background:linear-gradient(90deg,transparent,var(--v2))}
.micro{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.kick-rot{color:var(--green)}

/* ---------- logo lockup (shared Byond logo + product wordmark) ---------- */
.ba-logo{display:flex; align-items:center; gap:10px}
.ba-mark{display:flex; align-items:center; flex:none}
/* the "yond" text is black -> invert to white on the dark canvas */
.ba-mark img{height:26px; width:auto; display:block; filter:brightness(0) invert(1)}
.foot-logo .ba-mark img{height:23px}
.ba-word{font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); line-height:1}
.ba-word .api{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-weight:600; font-size:14.5px; border-radius:12px; padding:12px 19px; transition:transform .18s ease, box-shadow .22s ease, background .2s, border-color .2s, color .2s; cursor:pointer; border:1px solid transparent; white-space:nowrap; font-family:var(--sans)}
.btn-accent{background:var(--grad); color:#fff; box-shadow:0 10px 30px -10px rgba(124,92,255,.8), inset 0 1px 0 rgba(255,255,255,.22)}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(124,92,255,.95), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(160,140,255,.05)}
.btn-ghost:hover{border-color:var(--v2); color:#fff; transform:translateY(-2px); background:rgba(124,92,255,.1)}
.btn-arrow::after{content:"→"; font-family:var(--mono); transition:transform .2s}
.btn-arrow:hover::after{transform:translateX(3px)}
.btn-lg{padding:15px 26px; font-size:15.5px; border-radius:13px}
.btn-key .key-ico{width:16px;height:16px;stroke:#fff;stroke-width:2;fill:none}
.ghostlink{font-size:14px; font-weight:600; color:var(--ink-soft); display:inline-flex; align-items:center; gap:5px; transition:color .2s}
.ghostlink:hover{color:#fff}
.ghostlink .arrow{font-family:var(--mono); font-size:12px; color:var(--v3)}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(14px); background:rgba(8,7,13,.72); border-bottom:1px solid var(--line-2)}
.nav-in{display:flex; align-items:center; justify-content:space-between; height:72px; gap:18px}
.nav-links{display:flex; gap:30px; font-size:14.5px; font-weight:500; font-family:var(--mono)}
.nav-links a{color:var(--ink-soft); transition:color .2s; position:relative; letter-spacing:.01em}
.nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px; background:var(--grad); transition:right .25s ease}
.nav-links a:hover{color:#fff}
.nav-links a:hover::after{right:0}
.nav-cta{display:flex; align-items:center; gap:18px}
.menu-btn{display:none; width:42px;height:42px; border:1px solid var(--line); border-radius:12px; background:rgba(160,140,255,.05); cursor:pointer; align-items:center; justify-content:center}
.menu-btn svg{width:18px;height:18px;stroke:var(--ink);stroke-width:1.8;fill:none}
.nav-scrim{position:fixed; inset:0; background:rgba(4,3,8,.7); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:48}
.nav-scrim.open{opacity:1; visibility:visible}

/* ---------- hero ---------- */
.hero{padding:84px 0 30px; display:grid; grid-template-columns:1.02fr 1.06fr; gap:52px; align-items:center}
h1{font-family:var(--display); font-weight:800; font-size:clamp(42px,5.6vw,76px); line-height:.98; letter-spacing:-.03em}
.hero-copy .lead{margin-top:26px; font-size:clamp(16.5px,1.35vw,19px); color:var(--ink-soft); max-width:42ch}
.hero-cta{margin-top:32px; display:flex; gap:14px; flex-wrap:wrap}
.hero-meta{margin-top:30px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:12.5px}
.hm-pill{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); color:var(--ink-soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px; background:rgba(160,140,255,.04)}
.hm-sep{color:var(--faint)}
.hm-base{color:var(--muted); font-size:12px}
.hm-base b{color:var(--v3); font-weight:500}

/* hero terminal */
.hero-term{position:relative; min-height:420px; display:flex; align-items:center; justify-content:center}
.term-glow{position:absolute; inset:-12% -6% -18% -6%; background:radial-gradient(60% 60% at 60% 30%,rgba(124,92,255,.4),transparent 70%); filter:blur(34px); z-index:0; animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}
.term{position:relative; z-index:1; width:min(560px,100%); background:linear-gradient(180deg,rgba(21,19,31,.96),rgba(13,12,20,.98)); border:1px solid var(--line); border-radius:16px; box-shadow:0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(124,92,255,.08), inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden; backdrop-filter:blur(4px)}
.term-bar{display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--hair); background:rgba(255,255,255,.015)}
.tb-dots{display:flex; gap:7px}
.tb-dots i{width:11px;height:11px;border-radius:50%;background:#2A2738}
.tb-dots i:nth-child(1){background:#FF5F57}.tb-dots i:nth-child(2){background:#FEBC2E}.tb-dots i:nth-child(3){background:#28C840}
.tb-title{font-size:11.5px; color:var(--muted); flex:1; text-align:center; letter-spacing:.04em}
.tb-status{font-size:10.5px; color:var(--green); display:inline-flex; align-items:center; gap:6px}
.term-body{padding:18px 4px 18px 18px}
.code{font-family:var(--mono); font-size:13px; line-height:1.85; color:var(--ink-soft); white-space:pre; overflow-x:auto; tab-size:2}
.code::-webkit-scrollbar{height:7px}
.code .ln{display:block}
.code .cmt{color:var(--tk-cmt); font-style:italic}
.code .fn{color:var(--tk-fn); font-weight:600}
.code .str{color:var(--tk-str)}
.code .prop{color:var(--tk-prop)}
.code .num{color:var(--tk-num)}
.code .key{color:var(--tk-key)}
.code .brace{color:var(--tk-brace)}
.code .ok{color:var(--tk-ok); font-weight:600}
/* typed reveal of request lines */
#reqCode .ln{opacity:0; animation:lineIn .42s ease forwards}
#reqCode .ln:nth-child(1){animation-delay:.5s}
#reqCode .ln:nth-child(2){animation-delay:.66s}
#reqCode .ln:nth-child(3){animation-delay:.82s}
#reqCode .ln:nth-child(4){animation-delay:.96s}
#reqCode .ln:nth-child(5){animation-delay:1.08s}
#reqCode .ln:nth-child(6){animation-delay:1.18s}
#reqCode .ln:nth-child(7){animation-delay:1.28s}
#reqCode .ln:nth-child(8){animation-delay:1.38s}
#reqCode .ln:nth-child(9){animation-delay:1.48s}
#reqCode .ln:nth-child(10){animation-delay:1.58s}
@keyframes lineIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.term-resp{margin:8px 18px 0 0; border-top:1px dashed var(--line); padding-top:14px; opacity:0; transform:translateY(8px); animation:respIn .5s ease 1.9s forwards}
@keyframes respIn{to{opacity:1; transform:none}}
.resp-tag{font-size:10.5px; color:var(--green); display:inline-flex; align-items:center; gap:7px; margin-bottom:8px}
.resp-tag .dot-ok{width:6px;height:6px}
.code.resp{font-size:12.5px; line-height:1.8}

/* floating chips */
.chip{position:absolute; z-index:3; background:linear-gradient(180deg,rgba(24,21,36,.96),rgba(16,14,26,.96)); border:1px solid var(--line); border-radius:13px; padding:11px 14px; box-shadow:0 24px 50px -26px rgba(0,0,0,.8); display:flex; flex-direction:column; gap:3px; animation:floaty 6s ease-in-out infinite; backdrop-filter:blur(6px)}
.chip b{font-size:14px; color:#fff; font-weight:600}
.chip b small{font-size:10px; color:var(--muted); font-weight:500}
.chip-1{top:6%; left:-22px; animation-delay:.3s}
.chip-1 b{color:var(--green)}
.chip-2{bottom:8%; right:-26px; animation-delay:1.6s}
.chip-2 b{font-size:11.5px; color:var(--v3)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- channel marquee ---------- */
.marquee{margin-top:34px; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); overflow:hidden; padding:16px 0; position:relative; z-index:1; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex; align-items:center; gap:26px; white-space:nowrap; width:max-content; animation:scrollX 28s linear infinite; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--faint)}
.mq-track span{transition:color .3s}
.mq-track .mq-dot{color:var(--v2); font-family:var(--sans)}
@keyframes scrollX{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:88px 0; position:relative}
.sec-head{max-width:640px; margin-bottom:46px}
.sec-head h2{font-family:var(--display); font-weight:700; font-size:clamp(30px,3.6vw,46px); letter-spacing:-.025em; line-height:1.04; margin-top:16px}
.sec-head p{margin-top:16px; color:var(--ink-soft); font-size:17px; max-width:60ch}
.sec-head p b{color:var(--ink)}

/* ---------- products grid ---------- */
.prod-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.prod{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:24px 23px 22px; background:linear-gradient(180deg,rgba(21,19,31,.7),rgba(13,12,20,.55)); transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s; overflow:hidden; display:flex; flex-direction:column}
.prod::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%, var(--ac-glow,rgba(124,92,255,.14)), transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none}
.prod:hover{transform:translateY(-5px); border-color:var(--ac-line,rgba(124,92,255,.5)); box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.prod:hover::before{opacity:1}
.prod[data-accent="violet"]{--ac:var(--v2); --ac-line:rgba(168,85,247,.5); --ac-glow:rgba(124,92,255,.16)}
.prod[data-accent="green"]{--ac:var(--green); --ac-line:rgba(61,245,160,.45); --ac-glow:rgba(61,245,160,.12)}
.prod[data-accent="amber"]{--ac:var(--amber); --ac-line:rgba(255,180,84,.45); --ac-glow:rgba(255,180,84,.12)}
.prod-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.prod-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line); color:var(--ac); position:relative}
.prod-ic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none}
.prod-state{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:7px; font-weight:600}
.prod-state.live{color:var(--green); background:rgba(61,245,160,.1); border:1px solid rgba(61,245,160,.28)}
.prod-state.live::before{content:"● "; font-size:7px; vertical-align:middle}
.prod-state.soon{color:var(--amber); background:rgba(255,180,84,.1); border:1px solid rgba(255,180,84,.28)}
.prod-state.partial{color:var(--v3); background:rgba(168,85,247,.12); border:1px solid rgba(168,85,247,.3)}
.prod h3{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-bottom:9px}
.prod p{color:var(--ink-soft); font-size:14.2px; line-height:1.55; flex:1}
.prod p a{color:var(--v3); border-bottom:1px solid rgba(199,125,255,.4)}
.prod p a:hover{color:#fff}
.mini{font-family:var(--mono); font-size:12px; line-height:1.7; color:var(--ink-soft); background:rgba(0,0,0,.32); border:1px solid var(--line-2); border-radius:10px; padding:11px 13px; margin:16px 0 16px; white-space:pre; overflow-x:auto}
.mini .m-mth{color:var(--v3); font-weight:600}
.mini .m-cm{color:var(--tk-cmt)}
.prod-link{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink); display:inline-flex; align-items:center; gap:7px; transition:gap .2s, color .2s; margin-top:auto}
.prod-link span{color:var(--ac); transition:transform .2s}
.prod-link:hover{color:#fff}
.prod-link:hover span{transform:translateX(3px)}

/* products CTA card */
.prod-cta{background:linear-gradient(150deg,rgba(124,92,255,.18),rgba(199,125,255,.06)); border-color:rgba(168,85,247,.4); justify-content:center; align-items:flex-start; gap:6px}
.prod-cta .ic-key{width:48px;height:48px;border-radius:14px;background:var(--grad);border:none;display:grid;place-items:center;margin-bottom:8px;box-shadow:0 12px 28px -12px rgba(124,92,255,.9)}
.prod-cta .ic-key svg{width:24px;height:24px;stroke:#fff;stroke-width:1.8;fill:none}
.prod-cta h3{margin-bottom:8px}
.prod-cta p{flex:0}
.prod-cta-btn{margin-top:18px}

/* ---------- why strip ---------- */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:linear-gradient(180deg,rgba(21,19,31,.5),rgba(13,12,20,.4))}
.why{padding:30px 26px 32px; border-right:1px solid var(--line); position:relative; transition:background .3s}
.why:last-child{border-right:none}
.why:hover{background:rgba(124,92,255,.06)}
.why-no{position:absolute; top:18px; right:20px; font-size:12px; color:var(--faint); letter-spacing:.1em}
.why-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line);color:var(--v3);margin-bottom:18px}
.why-ic svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none}
.why h3{font-family:var(--display); font-weight:700; font-size:19px; letter-spacing:-.01em; margin-bottom:8px}
.why p{color:var(--ink-soft); font-size:13.8px; line-height:1.55}

/* ---------- pricing teaser ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.price{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; background:linear-gradient(180deg,rgba(21,19,31,.6),rgba(13,12,20,.5)); display:flex; flex-direction:column; transition:transform .25s, border-color .25s}
.price:hover{transform:translateY(-4px); border-color:rgba(124,92,255,.4)}
.price.feat{border-color:transparent; background:linear-gradient(180deg,rgba(124,92,255,.16),rgba(199,125,255,.05)); box-shadow:0 36px 70px -38px rgba(124,92,255,.7), inset 0 0 0 1px rgba(168,85,247,.4); transform:translateY(-10px)}
.price.feat:hover{transform:translateY(-14px)}
.price-badge{position:absolute; top:-11px; left:26px; font-size:9.5px; letter-spacing:.12em; padding:5px 11px; border-radius:7px; background:var(--grad); color:#fff; box-shadow:0 8px 20px -8px rgba(124,92,255,.9)}
.price-tag{font-size:11px; letter-spacing:.12em; color:var(--v3)}
.price-amt{font-family:var(--display); font-weight:800; font-size:46px; letter-spacing:-.03em; margin:14px 0 4px; color:#fff; display:flex; align-items:baseline; gap:2px}
.price-amt .cur{font-size:26px; color:var(--v3)}
.price-amt .unit{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--muted); margin-left:6px; letter-spacing:0}
.price-amt.soon-amt{font-size:34px; color:var(--amber)}
.price-fine{font-size:13px; color:var(--ink-soft); margin-bottom:18px}
.price-fine .tbd{font-family:var(--mono); font-size:11px; color:var(--amber); background:rgba(255,180,84,.1); border:1px solid rgba(255,180,84,.28); border-radius:6px; padding:1px 7px; white-space:nowrap; margin-left:4px}
.price ul{list-style:none; display:flex; flex-direction:column; gap:11px; font-size:13.6px; color:var(--ink-soft); margin-bottom:22px}
.price li{display:flex; gap:9px; align-items:flex-start}
.price li svg{width:15px;height:15px;stroke:var(--green);stroke-width:2.6;fill:none;flex:none;margin-top:3px}
.price-cta{margin-top:auto; justify-content:center}
.price-disclaimer{margin-top:26px; font-size:11.5px; color:var(--faint); text-align:center; line-height:1.6}

/* ---------- docs / quickstart ---------- */
.docs-shell{display:grid; grid-template-columns:.92fr 1.08fr; gap:46px; align-items:center; border:1px solid var(--line); border-radius:24px; padding:46px; background:linear-gradient(150deg,rgba(21,19,31,.7),rgba(11,10,18,.6)); position:relative; overflow:hidden}
.docs-shell::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 80% at 100% 0%,rgba(124,92,255,.16),transparent 55%); pointer-events:none}
.docs-copy{position:relative; z-index:1}
.docs-copy h2{font-family:var(--display); font-weight:700; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.025em; line-height:1.05; margin-top:14px}
.docs-sub{margin-top:16px; color:var(--ink-soft); font-size:15.5px; max-width:46ch}
.docs-steps{list-style:none; margin:26px 0 28px; display:flex; flex-direction:column; gap:14px}
.docs-steps li{display:flex; gap:14px; align-items:flex-start}
.ds-no{width:28px;height:28px;border-radius:9px;background:var(--grad-soft);border:1px solid var(--line);color:var(--v3);display:grid;place-items:center;font-size:13px;font-weight:600;flex:none}
.docs-steps b{display:block; font-size:15px; color:var(--ink); font-weight:600; margin-bottom:2px}
.docs-steps span{font-size:13.5px; color:var(--ink-soft)}
.docs-cta{display:flex; gap:13px; flex-wrap:wrap}

/* tabbed code panel */
.docs-panel{position:relative; z-index:1; background:linear-gradient(180deg,rgba(13,12,20,.96),rgba(8,7,13,.98)); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 40px 80px -40px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04)}
.dp-tabs{display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--hair); background:rgba(255,255,255,.015)}
.dp-tab{font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--muted); background:none; border:none; border-bottom:2px solid transparent; padding:9px 14px 11px; cursor:pointer; transition:color .2s, border-color .2s; letter-spacing:.02em}
.dp-tab:hover{color:var(--ink-soft)}
.dp-tab.active{color:#fff; border-color:var(--v2)}
.dp-body{position:relative; padding:18px 18px 20px}
.dp-copy{position:absolute; top:14px; right:14px; z-index:2; font-family:var(--mono); font-size:11px; color:var(--ink-soft); background:rgba(160,140,255,.08); border:1px solid var(--line); border-radius:8px; padding:5px 11px; cursor:pointer; transition:.2s; letter-spacing:.04em}
.dp-copy:hover{color:#fff; border-color:var(--v2); background:rgba(124,92,255,.16)}
.dp-copy.copied{color:var(--green); border-color:rgba(61,245,160,.4)}
.dp-pane{display:none; animation:paneIn .3s ease both}
.dp-pane.active{display:block}
@keyframes paneIn{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ---------- final CTA ---------- */
.ctaband{position:relative; border-radius:28px; padding:64px 56px; background:linear-gradient(135deg,#120E22 0%,#0B0A14 60%); border:1px solid rgba(168,85,247,.32); overflow:hidden; box-shadow:0 50px 100px -50px rgba(124,92,255,.5)}
.ctaband::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 90% at 80% 10%,rgba(124,92,255,.4),transparent 55%), radial-gradient(40% 70% at 8% 100%,rgba(61,245,160,.1),transparent 55%); pointer-events:none}
.cta-noise{position:absolute; inset:0; opacity:.5; pointer-events:none; background-image:radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.4px); background-size:22px 22px; mask-image:radial-gradient(80% 80% at 80% 10%,#000,transparent)}
.cta-in{position:relative; z-index:1; max-width:680px}
.ctaband h2{font-family:var(--display); font-weight:800; font-size:clamp(30px,4vw,52px); letter-spacing:-.03em; line-height:1.02; margin-top:14px}
.cta-sub{color:var(--ink-soft); font-size:17px; max-width:54ch; margin:18px 0 30px}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap}
.cta-strip{display:flex; gap:22px; flex-wrap:wrap; margin-top:34px; font-size:12px; color:var(--ink-soft); letter-spacing:.02em}
.cta-strip span{display:inline-flex; align-items:center; gap:8px}

/* ---------- footer (Byond family) ---------- */
footer{border-top:1px solid var(--line); padding:58px 0 36px; margin-top:24px; position:relative; z-index:1}
.foot-top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px}
.foot-logo{margin-bottom:16px}
.foot-blurb{color:var(--ink-soft);font-size:14px;max-width:34ch; margin-bottom:16px}
.foot-status{font-size:11px; color:var(--muted); display:inline-flex; align-items:center; gap:8px}
.foot-col h5{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:15px}
.foot-col a{display:block; color:var(--ink-soft); font-size:14px; padding:5px 0; transition:color .2s, padding-left .2s}
.foot-col a:hover{color:var(--v3); padding-left:4px}
.foot-bot{display:flex; justify-content:space-between; align-items:center; margin-top:44px; padding-top:24px; border-top:1px solid var(--line-2); font-size:13px; color:var(--muted); flex-wrap:wrap; gap:10px}
.foot-bot .status{display:inline-flex; align-items:center; gap:8px; font-size:11.5px}
.foot-bot .status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green-glow);animation:pulseG 2.2s infinite}

/* ---------- toast ---------- */
.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(180%); background:var(--panel-2); color:#fff; padding:13px 20px; border-radius:12px; font-size:13.5px; font-weight:500; z-index:130; box-shadow:0 24px 48px -22px rgba(0,0,0,.8); display:flex; align-items:center; gap:10px; transition:transform .38s cubic-bezier(.2,.7,.2,1); border:1px solid var(--line)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green-glow);flex:none}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.show{opacity:1; transform:none}
/* staggered children inside revealed grids */
.prod.rv{transition-delay:calc(var(--si,0) * 70ms)}
.why.rv{transition-delay:calc(var(--i,0) * 80ms)}
.price.rv{transition-delay:calc(var(--i,0) * 90ms)}

/* hero load-in (independent of scroll) */
.ld{opacity:0; transform:translateY(20px); animation:loadIn .8s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:calc(.08s * var(--d,0))}
@keyframes loadIn{to{opacity:1; transform:none}}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1040px){
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr 1fr}
  .why:nth-child(2){border-right:none}
  .why:nth-child(1),.why:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:920px){
  .hero{grid-template-columns:1fr; gap:40px; padding-top:48px}
  .hero-term{min-height:auto; order:2}
  .docs-shell{grid-template-columns:1fr; gap:34px; padding:34px}
  .price-grid{grid-template-columns:1fr; gap:22px}
  .price.feat{transform:none}
  .price.feat:hover{transform:translateY(-4px)}
  .price-badge{left:24px}
  .nav-links{display:none}
  .menu-btn{display:flex}
  .console-link{display:none}
  .chip-1{left:-6px}.chip-2{right:-8px}
  /* mobile nav drawer */
  .nav-links.open{display:flex; position:fixed; top:72px; left:0; right:0; flex-direction:column; gap:0; background:var(--bg-2); border-bottom:1px solid var(--line); padding:8px 30px 20px; z-index:49}
  .nav-links.open a{padding:15px 0; border-bottom:1px solid var(--line-2); font-size:16px}
  .nav-links.open a::after{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 18px}
  h1{font-size:clamp(38px,11vw,52px)}
  .prod-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why{border-right:none; border-bottom:1px solid var(--line)}
  .why:last-child{border-bottom:none}
  .why:nth-child(1),.why:nth-child(2){border-right:none}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .ctaband{padding:40px 26px}
  .docs-shell{padding:24px}
  .term-body{padding:14px 2px 14px 14px}
  .code{font-size:11.8px}
  .chip{display:none}
  .nav-cta{gap:12px}
  .marquee{margin-top:26px}
  .mq-track{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .rv,.ld{opacity:1!important; transform:none!important}
  #reqCode .ln,.term-resp{opacity:1!important; transform:none!important}
}