/* ============================================================================
   ByondSMS — messaging / A2P marketing site.
   Shares the Byond TYPE FAMILY (Hanken Grotesk body + JetBrains Mono) and the
   structural DNA of the family (logo lockup, "© B'Yond … is a B'Yond product"
   footer, .rv scroll reveals, mobile drawer, staggered load) with byondvoice
   (light cyan->indigo) and byondapi (dark "Terminal Violet") — but carries
   ByondSMS's OWN "SIGNAL CORAL" identity: a deep ink canvas with a warm
   coral -> magenta -> violet "delivered" gradient and a teal "DLR/delivered"
   signal. Display face is Clash-grotesque-style "Sora". No build step.
   ============================================================================ */
:root{
  /* deep ink canvas (warm-leaning, distinct from byondapi's cool near-black) */
  --bg:#0B0710; --bg-2:#120B17; --panel:#171019; --panel-2:#1E1422;
  --ink:#F6ECF2; --ink-soft:#CFBCC9; --muted:#9A8593; --faint:#6A5563;
  --line:rgba(255,120,170,.14); --line-2:rgba(255,120,170,.07);
  --hair:rgba(255,255,255,.06);

  /* SIGNAL CORAL gradient — the ByondSMS brand mark (coral -> magenta -> violet) */
  --c1:#FF6B5E; --c2:#FF3D8B; --c3:#B14BFF;
  --accent:#FF3D8B;
  --grad:linear-gradient(112deg,#FF6B5E 0%,#FF3D8B 50%,#B14BFF 100%);
  --grad-soft:linear-gradient(112deg,rgba(255,107,94,.22),rgba(177,75,255,.12));
  /* teal "delivered / DLR" signal */
  --ok:#2DE3B0; --ok-glow:rgba(45,227,176,.55);
  --amber:#FFB454; --bad:#FF6175;

  /* syntax tokens (code peek) */
  --tk-cmt:#7A6B77; --tk-fn:#FF8FB6; --tk-str:#2DE3B0; --tk-prop:#FFB0CF;
  --tk-num:#FFB454; --tk-key:#FF6B5E; --tk-brace:#CFBCC9; --tk-ok:#2DE3B0;

  --r:18px; --maxw:1200px;
  --display:"Sora",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(58% 48% at 84% -8%, rgba(255,61,139,.30), transparent 60%),
    radial-gradient(46% 42% at 4% 2%, rgba(255,107,94,.16), transparent 58%),
    radial-gradient(60% 60% at 50% 116%, rgba(177,75,255,.10), 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(255,120,170,.09) 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(255,61,139,.13); border:1px solid var(--line); border-radius:6px; padding:.5px 6px; color:#FFC9DD; white-space:nowrap}
::selection{background:rgba(255,61,139,.4); color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,61,139,.32);border-radius:8px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,61,139,.5)}

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

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

/* ---------- logo lockup (shared Byond logo + product wordmark) ---------- */
.bs-logo{display:flex; align-items:center; gap:10px}
.bs-mark{display:flex; align-items:center; flex:none}
/* the "yond" text is black -> invert to white on the dark canvas */
.bs-mark img{height:26px; width:auto; display:block; }
.foot-logo .bs-mark img{height:23px}
.bs-word{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink); line-height:1}
.bs-word .sms{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(255,61,139,.75), inset 0 1px 0 rgba(255,255,255,.24)}
.btn-accent:hover{transform:translateY(-2px); box-shadow:0 16px 38px -12px rgba(255,61,139,.92), inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:rgba(255,120,170,.05)}
.btn-ghost:hover{border-color:var(--c2); color:#fff; transform:translateY(-2px); background:rgba(255,61,139,.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-chat .chat-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(--c3)}

/* ---------- nav ---------- */
header.nav{position:sticky; top:0; z-index:50; backdrop-filter:saturate(150%) blur(14px); background:rgba(11,7,16,.74); 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(255,120,170,.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(6,3,9,.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.04fr 1.02fr; gap:52px; align-items:center}
h1{font-family:var(--display); font-weight:700; font-size:clamp(42px,5.6vw,74px); line-height:1.0; letter-spacing:-.03em}
.hero-copy .lead{margin-top:26px; font-size:clamp(16.5px,1.35vw,19px); color:var(--ink-soft); max-width:44ch}
.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(255,120,170,.04)}
.hm-sep{color:var(--faint)}
.hm-base{color:var(--muted); font-size:12px}
.hm-base b{color:var(--c3); font-weight:500}

/* hero art — phone with chat thread + delivered flourish, behind a code peek */
.hero-art{position:relative; min-height:460px; display:flex; align-items:center; justify-content:center}
.art-glow{position:absolute; inset:-12% -6% -18% -6%; background:radial-gradient(58% 60% at 62% 34%,rgba(255,61,139,.4),transparent 70%); filter:blur(36px); z-index:0; animation:glowPulse 6s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.7}50%{opacity:1}}

/* the phone */
.phone{position:relative; z-index:1; width:min(290px,78%); background:linear-gradient(180deg,#16101C,#0E0913); border:1px solid var(--line); border-radius:34px; padding:13px; box-shadow:0 50px 100px -42px rgba(0,0,0,.9), 0 0 0 1px rgba(255,61,139,.07), inset 0 1px 0 rgba(255,255,255,.05)}
.phone::after{content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%); width:96px; height:22px; background:#0E0913; border-radius:0 0 14px 14px; z-index:3}
.phone-screen{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)); border:1px solid var(--hair); border-radius:24px; padding:14px 13px 16px; position:relative; overflow:hidden}
.ps-head{display:flex; align-items:center; gap:10px; padding:6px 4px 12px; border-bottom:1px solid var(--hair); margin-bottom:12px}
.ps-ava{width:36px;height:36px;border-radius:11px;background:var(--grad);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:14px;color:#fff;flex:none}
.ps-meta{min-width:0;flex:1}
.ps-meta b{display:block;font-size:13.5px;color:#fff;font-weight:600;line-height:1.2}
.ps-meta span{font-family:var(--mono);font-size:9.5px;color:var(--muted);letter-spacing:.04em}
.ps-sig{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.ps-sig .micro{font-size:8.5px}

/* chat bubbles */
.thread{display:flex; flex-direction:column; gap:9px; min-height:200px}
.bub{max-width:84%; padding:9px 12px; border-radius:15px; font-size:12.5px; line-height:1.45; position:relative; opacity:0; transform:translateY(8px) scale(.98); animation:bubIn .5s cubic-bezier(.2,.7,.2,1) forwards}
.bub.in{align-self:flex-start; background:rgba(255,255,255,.07); border:1px solid var(--hair); color:var(--ink); border-bottom-left-radius:5px}
.bub.out{align-self:flex-end; background:var(--grad); color:#fff; border-bottom-right-radius:5px; box-shadow:0 8px 20px -10px rgba(255,61,139,.7)}
.bub .b-tag{font-family:var(--mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase; opacity:.8; display:block; margin-bottom:3px}
.bub.in .b-tag{color:var(--c2)}
.bub.out .b-tag{color:rgba(255,255,255,.85)}
.bub .b-code{font-family:var(--mono); font-weight:600; letter-spacing:.18em; font-size:14px}
.bub-dlr{align-self:flex-end; display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:9.5px; color:var(--ok); opacity:0; animation:bubIn .5s ease forwards; margin-top:-3px}
.bub-dlr svg{width:13px;height:13px;stroke:var(--ok);stroke-width:2.4;fill:none}
.bub:nth-child(1){animation-delay:.5s}
.bub:nth-child(2){animation-delay:1.0s}
.bub:nth-child(3){animation-delay:1.7s}
.bub-dlr{animation-delay:2.3s}
@keyframes bubIn{to{opacity:1; transform:none}}

/* typing indicator that fades out before the reply lands */
.typing{align-self:flex-start; display:inline-flex; gap:4px; padding:11px 13px; background:rgba(255,255,255,.07); border:1px solid var(--hair); border-radius:15px; border-bottom-left-radius:5px; opacity:0; animation:typingShow 1.4s ease .9s 1 forwards}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typingDot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes typingShow{0%{opacity:0}18%{opacity:1}82%{opacity:1}100%{opacity:0;display:none}}

/* code peek card floating over the phone */
.peek{position:absolute; z-index:2; bottom:6%; left:-26px; width:min(330px,82%); background:linear-gradient(180deg,rgba(23,16,25,.97),rgba(14,9,19,.98)); border:1px solid var(--line); border-radius:14px; box-shadow:0 30px 60px -30px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); overflow:hidden; backdrop-filter:blur(6px); animation:floaty 6.5s ease-in-out infinite}
.peek-bar{display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--hair); background:rgba(255,255,255,.015)}
.peek-bar .dots{display:flex;gap:6px}
.peek-bar .dots i{width:9px;height:9px;border-radius:50%;background:#2A2330}
.peek-bar .dots i:nth-child(1){background:#FF5F57}.peek-bar .dots i:nth-child(2){background:#FEBC2E}.peek-bar .dots i:nth-child(3){background:#28C840}
.peek-bar .pb-t{font-family:var(--mono);font-size:10px;color:var(--muted);flex:1;text-align:center;letter-spacing:.04em}
.peek-bar .pb-via{font-family:var(--mono);font-size:8.5px;color:var(--c3);letter-spacing:.04em}
.peek-body{padding:13px 13px 14px}
.code{font-family:var(--mono); font-size:11.5px; line-height:1.8; color:var(--ink-soft); white-space:pre; overflow-x:auto; tab-size:2}
.code::-webkit-scrollbar{height:6px}
.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}
#peekCode .ln{opacity:0; animation:lineIn .42s ease forwards}
#peekCode .ln:nth-child(1){animation-delay:.6s}
#peekCode .ln:nth-child(2){animation-delay:.74s}
#peekCode .ln:nth-child(3){animation-delay:.88s}
#peekCode .ln:nth-child(4){animation-delay:1.0s}
#peekCode .ln:nth-child(5){animation-delay:1.12s}
#peekCode .ln:nth-child(6){animation-delay:1.24s}
#peekCode .ln:nth-child(7){animation-delay:1.36s}
#peekCode .ln:nth-child(8){animation-delay:1.48s}
@keyframes lineIn{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* ---------- 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 30s linear infinite; font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:.01em; color:var(--faint)}
.mq-track span{transition:color .3s}
.mq-track .mq-dot{color:var(--c2); 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:660px; 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)}

/* ---------- channels grid ---------- */
.chan-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.chan{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:26px 24px 24px; background:linear-gradient(180deg,rgba(23,16,25,.7),rgba(14,9,19,.55)); transition:transform .28s cubic-bezier(.2,.7,.2,1), border-color .28s, box-shadow .28s; overflow:hidden; display:flex; flex-direction:column}
.chan::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 80% at 0% 0%, var(--ac-glow,rgba(255,61,139,.14)), transparent 55%); opacity:0; transition:opacity .3s; pointer-events:none}
.chan:hover{transform:translateY(-5px); border-color:var(--ac-line,rgba(255,61,139,.5)); box-shadow:0 30px 60px -34px rgba(0,0,0,.85)}
.chan:hover::before{opacity:1}
.chan[data-accent="coral"]{--ac:var(--c1); --ac-line:rgba(255,107,94,.5); --ac-glow:rgba(255,107,94,.16)}
.chan[data-accent="magenta"]{--ac:var(--c2); --ac-line:rgba(255,61,139,.5); --ac-glow:rgba(255,61,139,.16)}
.chan[data-accent="violet"]{--ac:var(--c3); --ac-line:rgba(177,75,255,.5); --ac-glow:rgba(177,75,255,.14)}
.chan-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px}
.chan-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line); color:var(--ac)}
.chan-ic svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7;fill:none}
.chan-state{font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:7px; font-weight:600}
.chan-state.live{color:var(--ok); background:rgba(45,227,176,.1); border:1px solid rgba(45,227,176,.28)}
.chan-state.live::before{content:"● "; font-size:7px; vertical-align:middle}
.chan-state.soon{color:var(--amber); background:rgba(255,180,84,.1); border:1px solid rgba(255,180,84,.28)}
.chan h3{font-family:var(--display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin-bottom:9px}
.chan p{color:var(--ink-soft); font-size:14.2px; line-height:1.55}
.chan p a{color:var(--c3); border-bottom:1px solid rgba(177,75,255,.4)}
.chan p a:hover{color:#fff}
.chan-uses{list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line-2)}
.chan-uses li{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--ink-soft); background:rgba(255,255,255,.04); border:1px solid var(--line-2); border-radius:7px; padding:4px 9px}

/* ---------- ways to connect ---------- */
.connect-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch}
.conn{position:relative; border:1px solid var(--line); border-radius:var(--r); padding:28px 26px; background:linear-gradient(180deg,rgba(23,16,25,.65),rgba(14,9,19,.5)); display:flex; flex-direction:column; transition:transform .25s, border-color .25s, box-shadow .25s; overflow:hidden}
.conn:hover{transform:translateY(-4px); border-color:rgba(255,61,139,.4); box-shadow:0 30px 60px -36px rgba(0,0,0,.85)}
.conn-no{font-family:var(--mono); font-size:12px; color:var(--faint); letter-spacing:.1em}
.conn-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:var(--grad-soft);border:1px solid var(--line);color:var(--c3);margin:16px 0 16px}
.conn-ic svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;fill:none}
.conn h3{font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.01em; margin-bottom:6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.conn .c-state{font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:6px; font-weight:600}
.conn .c-state.live{color:var(--ok); background:rgba(45,227,176,.1); border:1px solid rgba(45,227,176,.28)}
.conn .c-state.soon{color:var(--amber); background:rgba(255,180,84,.1); border:1px solid rgba(255,180,84,.28)}
.conn p{color:var(--ink-soft); font-size:14px; line-height:1.55; flex:1}
.conn p a{color:var(--c3); border-bottom:1px solid rgba(177,75,255,.4)}
.conn p a:hover{color:#fff}
.conn-bind{font-family:var(--mono); font-size:11.5px; line-height:1.7; color:var(--ink-soft); background:rgba(0,0,0,.34); border:1px solid var(--line-2); border-radius:10px; padding:12px 13px; margin:16px 0 16px; white-space:pre-wrap; word-break:break-word}
.conn-bind b{color:var(--c2); font-weight:600}
.conn-bind .cb-note{display:block; color:var(--muted); font-size:10.5px; margin-top:6px; letter-spacing:.02em}
.conn-foot{margin-top:auto; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.conn-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}
.conn-link span{color:var(--c2); transition:transform .2s}
.conn-link:hover{color:#fff}
.conn-link:hover span{transform:translateX(3px)}
.conn.feat{background:linear-gradient(150deg,rgba(255,61,139,.14),rgba(177,75,255,.05)); border-color:rgba(255,61,139,.38)}

/* ---------- 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(23,16,25,.5),rgba(14,9,19,.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(255,61,139,.06)}
.why-no{position:absolute; top:18px; right:20px; font-size:12px; color:var(--faint); letter-spacing:.1em; font-family:var(--mono)}
.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(--c3);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:18.5px; letter-spacing:-.01em; margin-bottom:8px}
.why p{color:var(--ink-soft); font-size:13.8px; line-height:1.55}
.why p a{color:var(--c3); border-bottom:1px solid rgba(177,75,255,.4)}
.why p a:hover{color:#fff}

/* ---------- 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(23,16,25,.6),rgba(14,9,19,.5)); display:flex; flex-direction:column; transition:transform .25s, border-color .25s}
.price:hover{transform:translateY(-4px); border-color:rgba(255,61,139,.4)}
.price.feat{border-color:transparent; background:linear-gradient(180deg,rgba(255,61,139,.16),rgba(177,75,255,.05)); box-shadow:0 36px 70px -38px rgba(255,61,139,.6), inset 0 0 0 1px rgba(255,61,139,.4); transform:translateY(-10px)}
.price.feat:hover{transform:translateY(-14px)}
.price-badge{position:absolute; top:-11px; left:26px; font-family:var(--mono); 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(255,61,139,.9)}
.price-tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--c2)}
.price-amt{font-family:var(--display); font-weight:700; font-size:44px; letter-spacing:-.03em; margin:14px 0 4px; color:#fff; display:flex; align-items:baseline; gap:2px}
.price-amt .cur{font-size:24px; color:var(--c3)}
.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:32px; 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(--ok);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}

/* ---------- final CTA ---------- */
.ctaband{position:relative; border-radius:28px; padding:64px 56px; background:linear-gradient(135deg,#1B1020 0%,#0C0813 60%); border:1px solid rgba(255,61,139,.3); overflow:hidden; box-shadow:0 50px 100px -50px rgba(255,61,139,.45)}
.ctaband::before{content:""; position:absolute; inset:0; background:radial-gradient(55% 90% at 80% 10%,rgba(255,61,139,.4),transparent 55%), radial-gradient(40% 70% at 8% 100%,rgba(45,227,176,.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:700px}
.ctaband h2{font-family:var(--display); font-weight:700; font-size:clamp(30px,4vw,52px); letter-spacing:-.03em; line-height:1.04; margin-top:14px}
.cta-sub{color:var(--ink-soft); font-size:17px; max-width:56ch; margin:18px 0 28px}
.cta-actions{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* lead form (talk to sales / request access) */
.cta-form{margin-top:30px; max-width:640px}
.cf-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.cf-in{width:100%; font-family:var(--sans); font-size:15px; color:#fff; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:12px; padding:13px 14px; outline:none; transition:border-color .15s ease, background .15s ease}
.cf-in::placeholder{color:rgba(246,236,242,.45)}
.cf-in:focus{border-color:var(--c2); background:rgba(255,255,255,.08)}
.cf-sel{margin-top:12px; appearance:none; -webkit-appearance:none; cursor:pointer; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px}
.cf-sel option{color:#16101C}
.cf-ta{margin-top:12px; resize:vertical; min-height:64px; font-family:var(--sans)}
.cf-hp{position:absolute!important; left:-9999px; top:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.cf-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px; align-items:center}
.cf-msg{margin-top:14px; font-size:14px; min-height:1.2em; font-family:var(--mono)}
.cf-msg.ok{color:var(--ok)}
.cf-msg.err{color:#ffb4a8}
.cta-strip{display:flex; gap:22px; flex-wrap:wrap; margin-top:28px; 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(--c3); 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-family:var(--mono); font-size:11.5px}
.foot-bot .status i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok-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); max-width:min(440px,92vw)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast i{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 9px var(--ok-glow);flex:none}
.toast.err i{background:var(--bad);box-shadow:0 0 9px var(--bad)}

/* ---------- 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}
.chan.rv{transition-delay:calc(var(--si,0) * 70ms)}
.conn.rv{transition-delay:calc(var(--si,0) * 80ms)}
.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){
  .chan-grid{grid-template-columns:repeat(2,1fr)}
  .connect-grid{grid-template-columns:1fr}
  .conn.feat{order:-1}
  .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:48px; padding-top:48px}
  .hero-art{min-height:auto; order:2; margin-top:6px}
  .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}
  /* 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)}
  .chan-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}
  .cf-grid{grid-template-columns:1fr}
  .peek{position:relative; left:0; bottom:0; width:100%; margin-top:18px; animation:none}
  .phone{width:min(280px,86%)}
  .hero-art{flex-direction:column}
  .nav-cta{gap:12px}
  .marquee{margin-top:26px}
  .mq-track{font-size:18px}
  .ctaband h2 br{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .rv,.ld{opacity:1!important; transform:none!important}
  .bub,.bub-dlr,.typing,#peekCode .ln{opacity:1!important; transform:none!important}
  .typing{display:none}
}