/* ============================================================
   EL1 Bot — Landing v2 stylesheet
   Node.js/Hono SSR build (no Cloudflare, no build step).
   Served from /static/landing-v2.css
   No-Grid Rule: no repeating square/dot meshes anywhere.
   ============================================================ */
/* ============================================================
   EL1 BOT — Landing Experience
   Brand identity preserved: #7c3aed / #06b6d4 / #050510
   ============================================================ */

:root{
  --primary:#7c3aed;
  --primary-lt:#a78bfa;
  --primary-dk:#4c1d95;
  --accent:#06b6d4;
  --pink:#ec4899;
  --green:#22c55e;
  --amber:#f59e0b;
  --twitch:#9146ff;
  --bg:#050510;
  --bg-2:#08081a;
  --surface:#0c0c1d;
  --surface-2:#12122a;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --txt:#ffffff;
  --txt-2:rgba(255,255,255,.62);
  --txt-3:rgba(255,255,255,.38);
  --glow:rgba(124,58,237,.35);
  --r-sm:10px; --r:16px; --r-lg:24px; --r-xl:32px;
  --ff:'Inter',system-ui,-apple-system,sans-serif;
  --ff-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --maxw:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--ff);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[dir="rtl"] body{font-family:'Tajawal',var(--ff)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
::selection{background:rgba(124,58,237,.4);color:#fff}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#07071a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--primary),var(--primary-dk));border-radius:10px;border:2px solid #07071a}
::-webkit-scrollbar-thumb:hover{background:var(--primary-lt)}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* ============ BOOT SCREEN ============ */
#boot{
  position:fixed;inset:0;z-index:9999;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  transition:opacity .35s ease,visibility .35s;
}
#boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot-core{position:relative;width:120px;height:120px;display:grid;place-items:center}
/* 66px keeps the mark clear of the inner ring (a 96px circle at inset:12px);
   at 74px it touched both rings and read as a squashed blob. height:auto +
   object-fit guarantee the logo never distorts. */
.boot-core img{width:66px;height:auto;object-fit:contain;
  filter:drop-shadow(0 0 26px var(--glow));animation:bootPulse 1.4s ease-in-out infinite}
.boot-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:var(--primary);border-right-color:var(--accent);animation:spin 1s linear infinite}
.boot-ring:nth-child(2){inset:12px;border-top-color:var(--accent);border-right-color:transparent;border-bottom-color:var(--primary-lt);animation-duration:1.6s;animation-direction:reverse}
@keyframes bootPulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.boot-bar{width:200px;height:3px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.boot-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--accent));animation:bootFill 1.5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bootFill{to{width:100%}}
.boot-txt{font-family:var(--ff-mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-3)}

/* ============ AMBIENT BACKGROUND ============ */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-grid{position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(124,58,237,.16), transparent 60%),
    radial-gradient(ellipse 50% 45% at 88% 32%, rgba(6,182,212,.11), transparent 62%),
    radial-gradient(ellipse 55% 35% at 40% 92%, rgba(236,72,153,.09), transparent 60%);
  animation:washDrift 34s ease-in-out infinite}
@keyframes washDrift{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-2%,1.5%)}}
.bg-mask{position:absolute;inset:0;background:radial-gradient(ellipse 70% 55% at 50% 22%,transparent 10%,var(--bg) 78%)}
.orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.32}
.orb-1{width:620px;height:620px;background:var(--primary);top:-220px;inset-inline-start:-180px;animation:drift 20s ease-in-out infinite}
.orb-2{width:520px;height:520px;background:var(--accent);top:38%;inset-inline-end:-200px;opacity:.18;animation:drift 26s ease-in-out infinite reverse}
.orb-3{width:480px;height:480px;background:var(--pink);bottom:-180px;inset-inline-start:26%;opacity:.14;animation:drift 32s ease-in-out infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-50px) scale(1.13)}}
.scanline{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}

/* ============ NAV ============ */
.nav{position:fixed;top:0;inset-inline:0;z-index:900;transition:all .35s cubic-bezier(.4,0,.2,1)}
.nav.stuck{background:rgba(5,5,16,.82);backdrop-filter:blur(22px) saturate(160%);border-bottom:1px solid var(--line);box-shadow:0 8px 40px rgba(0,0,0,.5)}
.nav-in{display:flex;align-items:center;gap:20px;height:70px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand img{width:36px;height:36px;filter:drop-shadow(0 0 14px var(--glow));transition:transform .4s}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
.brand b{font-size:19px;font-weight:900;letter-spacing:-.02em;
  background:linear-gradient(135deg,#fff 20%,var(--primary-lt));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand small{display:block;font-size:8.5px;letter-spacing:.22em;color:var(--txt-3);text-transform:uppercase;font-weight:700;margin-top:-3px}
.nav-links{display:flex;gap:4px;margin-inline-start:auto}
.nav-links a{position:relative;padding:9px 14px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--txt-2);transition:.22s}
.nav-links a:hover{color:#fff;background:rgba(124,58,237,.12)}
.nav-links a::after{content:'';position:absolute;bottom:4px;inset-inline-start:50%;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--primary),var(--accent));transform:translateX(-50%);transition:width .28s}
html[dir="rtl"] .nav-links a::after{transform:translateX(50%)}
.nav-links a:hover::after{width:22px}
.nav-side{display:flex;align-items:center;gap:9px;margin-inline-start:auto}
.nav-links + .nav-side{margin-inline-start:0}

.pill-live{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  background:rgba(34,197,94,.09);border:1px solid rgba(34,197,94,.28);font-size:11.5px;font-weight:700;color:#4ade80;line-height:1}
.dot{position:relative;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(34,197,94,.9);flex-shrink:0}
.dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(34,197,94,.5);animation:ping 1.9s cubic-bezier(.4,0,.6,1) infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.9}70%,100%{transform:scale(2);opacity:0}}

.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--txt-2);font-size:12px;font-weight:700;transition:.22s}
.lang-btn:hover{color:#fff;border-color:rgba(124,58,237,.45);background:rgba(124,58,237,.12)}
.lang-btn i.fa-chevron-down{font-size:9px;transition:transform .25s}
.lang-wrap.open .lang-btn i.fa-chevron-down{transform:rotate(180deg)}

/* language dropdown (15 locales, real per-language URLs) */
.lang-wrap{position:relative}
.lang-menu{position:absolute;top:calc(100% + 10px);inset-inline-end:0;z-index:960;
  width:210px;max-height:60vh;overflow-y:auto;padding:7px;
  background:rgba(12,12,29,.97);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 26px 60px rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transform:translateY(-8px);transition:.24s cubic-bezier(.16,1,.3,1)}
.lang-wrap.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--txt-2);transition:.18s}
.lang-menu a:hover{color:#fff;background:rgba(124,58,237,.16)}
.lang-menu a[aria-current="true"]{color:#fff;background:rgba(124,58,237,.22)}
.lang-menu a span.lm-flag{font-size:15px;line-height:1}
.lang-menu a small{display:block;font-size:10px;color:var(--txt-3);font-weight:600}
.lang-menu::-webkit-scrollbar{width:6px}
.lang-menu::-webkit-scrollbar-thumb{background:rgba(124,58,237,.5);border-radius:6px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;
  padding:13px 24px;border-radius:12px;font-size:14px;font-weight:700;letter-spacing:-.01em;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s,background .3s;white-space:nowrap}
.btn-primary{color:#fff;background:linear-gradient(135deg,var(--twitch),var(--primary) 55%,#6d28d9);
  box-shadow:0 8px 26px rgba(124,58,237,.42),inset 0 1px 0 rgba(255,255,255,.22);position:relative;overflow:hidden}
.btn-primary::after{content:'';position:absolute;top:0;inset-inline-start:-120%;width:60%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:skewX(-20deg);animation:sheen 3.6s ease-in-out infinite}
@keyframes sheen{0%,72%{inset-inline-start:-120%}100%{inset-inline-start:160%}}
.btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 40px rgba(124,58,237,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{color:var(--primary-lt);background:rgba(124,58,237,.08);border:1.5px solid rgba(124,58,237,.32)}
.btn-ghost:hover{color:#fff;background:rgba(124,58,237,.18);border-color:rgba(124,58,237,.6);transform:translateY(-3px)}
.btn-lg{padding:16px 32px;font-size:15.5px;border-radius:14px}
.btn-sm{padding:10px 18px;font-size:13px}

.burger{display:none;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;cursor:pointer;align-items:center;justify-content:center;font-size:16px}

/* ============ SECTION PRIMITIVES ============ */
section{position:relative;z-index:2}
.sec{padding:110px 0}
.sec-head{text-align:center;max-width:720px;margin:0 auto 60px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:99px;margin-bottom:20px;
  background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(6,182,212,.07));border:1px solid rgba(124,58,237,.26);
  font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-lt)}
.eyebrow i{font-size:11px}
h2.title{margin:0 0 16px;font-size:clamp(30px,4.6vw,50px);line-height:1.1;font-weight:900;letter-spacing:-.035em}
.sub{margin:0;font-size:16.5px;line-height:1.7;color:var(--txt-2)}
.grad{background:linear-gradient(120deg,var(--primary-lt) 0%,var(--accent) 50%,var(--pink) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* reveal */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============================================================
   HERO — cinematic broadcast control room
   ============================================================ */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:130px 0 110px;overflow:hidden;isolation:isolate}

/* ---- backdrop stack ---- */
.hero-stage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}

/* aurora mesh */
.aurora{position:absolute;inset:-20%;filter:blur(90px);opacity:.55}
.aurora i{position:absolute;display:block;border-radius:50%}
.aurora i:nth-child(1){width:52vw;height:52vw;background:radial-gradient(circle,rgba(124,58,237,.85),transparent 65%);
  top:-14%;inset-inline-start:-8%;animation:aur1 19s ease-in-out infinite}
.aurora i:nth-child(2){width:44vw;height:44vw;background:radial-gradient(circle,rgba(6,182,212,.55),transparent 65%);
  top:8%;inset-inline-end:-10%;animation:aur2 24s ease-in-out infinite}
.aurora i:nth-child(3){width:38vw;height:38vw;background:radial-gradient(circle,rgba(236,72,153,.4),transparent 65%);
  bottom:-16%;inset-inline-start:32%;animation:aur3 28s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(9vw,7vh) scale(1.2)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-8vw,10vh) scale(.9)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,-9vh) scale(1.25)}}

/* perspective floor grid */
.hero-floor{position:absolute;bottom:0;inset-inline:0;height:46vh;overflow:hidden;opacity:.5;
  mask-image:linear-gradient(0deg,#000 10%,transparent 92%);
  -webkit-mask-image:linear-gradient(0deg,#000 10%,transparent 92%)}
.hero-floor svg{position:absolute;bottom:0;inset-inline-start:0;width:200%;height:100%}
.wv{fill:none;stroke-linecap:round}
.wv-1{stroke:rgba(124,58,237,.5);stroke-width:1.6;animation:wvRun 17s linear infinite}
.wv-2{stroke:rgba(6,182,212,.32);stroke-width:1.3;animation:wvRun 23s linear infinite}
.wv-3{stroke:rgba(236,72,153,.2);stroke-width:1.1;animation:wvRun 31s linear infinite}
@keyframes wvRun{to{transform:translateX(-50%)}}
html[dir="rtl"] .wv{animation-name:wvRunR}
@keyframes wvRunR{to{transform:translateX(50%)}}

/* volumetric beam */
.hero-beam{position:absolute;top:-10%;inset-inline-start:50%;width:min(760px,88vw);height:78vh;
  transform:translateX(-50%);
  background:conic-gradient(from 180deg at 50% 0%,transparent 42%,rgba(124,58,237,.3) 50%,rgba(6,182,212,.16) 55%,transparent 62%);
  filter:blur(34px);opacity:.7;animation:beamSway 9s ease-in-out infinite}
html[dir="rtl"] .hero-beam{transform:translateX(50%)}
@keyframes beamSway{0%,100%{opacity:.5;filter:blur(34px)}50%{opacity:.85;filter:blur(26px)}}

.hero-vignette{position:absolute;inset:0;
  background:radial-gradient(ellipse 88% 72% at 50% 34%,transparent 22%,var(--bg) 88%)}
.hero-noise{position:absolute;inset:0;opacity:.5;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px)}

/* falling chat rain */
.chat-rain{position:absolute;inset:0;overflow:hidden;opacity:.42}
.rain-msg{position:absolute;top:-40px;font-family:var(--ff-mono);font-size:11px;white-space:nowrap;
  color:rgba(167,139,250,.4);text-shadow:0 0 12px rgba(124,58,237,.4)}
.rain-msg.c{color:rgba(103,232,249,.34)}
.rain-msg.p{color:rgba(244,114,182,.3)}

/* ---- layout ---- */
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center;width:100%;
  position:relative;z-index:2}
.hero-left,.hero-right{will-change:transform}

/* ---- badge ---- */
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:7px 8px 7px 8px;border-radius:99px;margin-bottom:28px;
  background:linear-gradient(120deg,rgba(124,58,237,.16),rgba(6,182,212,.07));
  border:1px solid rgba(124,58,237,.3);font-size:12.5px;font-weight:700;color:#c9bcff;
  box-shadow:0 6px 24px rgba(124,58,237,.18);
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .16s forwards}
.hb-live{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;
  background:rgba(239,25,22,.16);border:1px solid rgba(239,25,22,.35);color:#ff8b88;
  font-size:10px;font-weight:900;letter-spacing:.12em}
.hb-live .dot{background:#ef4444;box-shadow:0 0 8px rgba(239,68,68,.9)}
.hb-live .dot::after{border-color:rgba(239,68,68,.5)}
.hb-arrow{font-size:10px;opacity:.5;margin-inline-end:8px;transition:transform .3s}
html[dir="rtl"] .hb-arrow{transform:scaleX(-1)}
.hero-badge:hover .hb-arrow{transform:translateX(3px)}
html[dir="rtl"] .hero-badge:hover .hb-arrow{transform:scaleX(-1) translateX(3px)}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---- kinetic title ---- */
h1.hero-title{margin:0 0 24px;font-size:clamp(42px,6.4vw,78px);line-height:1.0;
  font-weight:900;letter-spacing:-.05em;
    /* The headline was the ONLY part of the hero with no entrance animation,
       so it painted at 0s while .hero-badge/.hero-p/.hero-cta/... faded in
       after it. That is why the text looked like it arrived "before the rest
       of the site". It now joins the same stagger, first in order. */
    opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .08s forwards}
@media (prefers-reduced-motion:reduce){
  h1.hero-title{opacity:1;animation:none}
}
/* The typed line must never wrap: it swaps between phrases of different
   lengths and a wrap would grow the h1 mid-animation, shoving the hero down.
   Rather than shrink the whole title (which loses the design's scale), the
   TYPED SPAN ALONE is scaled down to whatever fits the longest phrase.
   fitTyped() in landing-v2.js measures that phrase and sets --tfs. */
.hero-title .l2{white-space:nowrap}
#hero-type{white-space:nowrap}
.hero-title .hl{display:block}
/* The word-rise is scoped to .js-split, which the JS adds to the h1 in the
   same tick that it creates these spans. Without that guard the rule applied
   to server-rendered text too, so the headline painted, went blank while JS
   re-wrapped it, then faded back in word by word - a visible flash on every
   load (it used to be hidden behind the boot splash). Now opacity:0 can only
   ever touch spans JS just built, and if JS never runs the server text stays
   on screen untouched. */
.hero-title.js-split .word{display:inline-block;opacity:0;transform:translateY(26px) rotateX(-55deg);
  transform-origin:bottom;animation:wordUp .5s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wordUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .hero-title.js-split .word{opacity:1;transform:none;animation:none}
}
.hero-title .l2{background:linear-gradient(112deg,#fff 0%,var(--primary-lt) 38%,var(--accent) 78%,var(--pink) 100%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:gradShift 7s ease-in-out infinite}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.type-wrap{display:inline-flex;align-items:baseline;min-height:1.05em;
  font-size:var(--tfs,1em);white-space:nowrap}
.type-caret{display:inline-block;width:4px;height:.78em;margin-inline-start:6px;border-radius:2px;
  background:var(--accent);box-shadow:0 0 14px var(--accent);animation:blink 1s steps(2) infinite;
  -webkit-text-fill-color:initial}

.hero-p{margin:0 0 30px;font-size:17.5px;line-height:1.7;color:var(--txt-2);max-width:520px;
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .42s forwards}
.hero-p b{color:#fff;font-weight:700}

.hero-cta{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px;
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .54s forwards}
.play-ic{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:10px;
  background:rgba(124,58,237,.25);border:1px solid rgba(167,139,250,.4);transition:.3s}
.btn-ghost:hover .play-ic{background:var(--primary);border-color:transparent;transform:scale(1.12)}

/* ---- platform-alternating CTA -------------------------------------------
   The two hero CTAs alternate between a Twitch skin and a Kick skin so neither
   platform is presented as the only way in. Only the SKIN changes; the button
   geometry, the label and the href stay put, so layout never shifts. */
.btn-plat{transition:background .55s cubic-bezier(.4,0,.2,1),color .55s,box-shadow .55s,border-color .55s}
.btn-plat .plat-ic{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em}
.btn-plat .plat-ic svg{width:1em;height:1em;fill:currentColor}
/* Twitch skin = the existing primary look */
.btn-plat.is-twitch{color:#fff;background:linear-gradient(135deg,var(--twitch),var(--primary) 55%,#6d28d9);
  box-shadow:0 10px 30px rgba(124,58,237,.4)}
/* Kick skin: Kick green needs dark text to stay readable */
.btn-plat.is-kick{color:#08160a;background:linear-gradient(135deg,#53fc18,#38d612 60%,#22c55e);
  box-shadow:0 10px 30px rgba(83,252,24,.32)}
.btn-plat.is-kick .play-ic{background:rgba(8,22,10,.16);border-color:rgba(8,22,10,.3);color:#08160a}
/* NOTE: the secondary hero button ("Try the console") is deliberately NOT
   skinned per-platform. It opens the in-page demo, not a platform signup, so
   tinting it Twitch/Kick would promise an OAuth flow it does not perform. */
@media (prefers-reduced-motion:reduce){.btn-plat{transition:none}}

/* ---- trust row ---- */
.hero-trust{display:flex;align-items:center;gap:12px;margin-bottom:32px;font-size:12.5px;color:var(--txt-3);
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .66s forwards}
.faces{display:flex}
.faces span{position:relative;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:10.5px;font-weight:900;color:#fff;border:2px solid var(--bg);overflow:hidden;
  margin-inline-start:-9px;box-shadow:0 3px 10px rgba(0,0,0,.5);transition:transform .28s}
/* real streamer avatars: the img covers the circle; the gradient underneath is
   the fallback that shows while loading or if the CDN image fails */
.faces span img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;border-radius:50%}
.faces span.faces-more{font-size:9.5px;letter-spacing:-.02em}
.faces span:first-child{margin-inline-start:0}
.faces span:hover{transform:translateY(-4px) scale(1.12);z-index:5}

/* ---- stats ---- */
.hero-stats{display:flex;gap:14px;flex-wrap:wrap;
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .78s forwards}
.hstat{position:relative;flex:1;min-width:104px;padding:13px 13px;border-radius:14px;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--line);backdrop-filter:blur(8px);transition:.35s cubic-bezier(.16,1,.3,1);overflow:hidden}
.hstat::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .35s;
  background:linear-gradient(160deg,rgba(124,58,237,.16),transparent 70%)}
.hstat:hover{transform:translateY(-5px);border-color:rgba(124,58,237,.4);box-shadow:0 14px 34px rgba(124,58,237,.2)}
.hstat:hover::after{opacity:1}
.hstat b{position:relative;display:block;font-size:23px;font-weight:900;letter-spacing:-.035em;line-height:1.15;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,#fff,var(--primary-lt));-webkit-background-clip:text;background-clip:text;color:transparent}
.hstat small{position:relative;display:block;font-size:9.5px;line-height:1.35;color:var(--txt-3);
  text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* ============ RIG (right column) ============ */
.hero-right{opacity:0;animation:rigIn 1.1s cubic-bezier(.16,1,.3,1) .30s forwards}
@keyframes rigIn{from{opacity:0;transform:translateY(38px) scale(.96)}to{opacity:1;transform:none}}
.rig{position:relative;transform-style:preserve-3d}

/* orbiting event chips */
.rig-orbit{position:absolute;inset:-40px;pointer-events:none;z-index:6}
.ev{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;
  font-size:10.5px;font-weight:800;white-space:nowrap;color:#fff;
  background:rgba(10,10,26,.88);backdrop-filter:blur(12px);
  border:1px solid rgba(167,139,250,.32);box-shadow:0 8px 26px rgba(0,0,0,.55),0 0 20px rgba(124,58,237,.2)}
.ev i{font-size:10px;color:var(--primary-lt)}
.ev b{color:var(--accent)}
.ev-1{top:4%;inset-inline-start:-6%;animation:evF 7s ease-in-out infinite}
.ev-2{top:32%;inset-inline-end:-7%;animation:evF 8.5s ease-in-out -2s infinite}
.ev-3{bottom:22%;inset-inline-start:-9%;animation:evF 9.5s ease-in-out -4s infinite}
.ev-3 i{color:#4ade80}
.ev-4{bottom:4%;inset-inline-end:2%;animation:evF 7.8s ease-in-out -5.5s infinite}
@keyframes evF{0%,100%{transform:translateY(0) translateX(0);opacity:.85}
  25%{transform:translateY(-13px) translateX(5px);opacity:1}
  50%{transform:translateY(-6px) translateX(-4px);opacity:.9}
  75%{transform:translateY(-16px) translateX(3px);opacity:1}}

/* ============================================================
   THE ROUTER — multi-platform unification visual
   ============================================================ */
.router{position:relative;display:grid;grid-template-columns:var(--rt-col) 1fr;gap:0;align-items:center;
  min-height:404px;padding:8px 0;
  /* wire geometry lives in these three vars so CSS and JS never disagree */
  /* Geometry from the original design. These are ROUTER-LOCAL x offsets:
     the core sits 254px from the router's inline start, and the chat card's
     margin is measured from the START OF ITS GRID COLUMN (which begins at
     --rt-col), so 188px puts its left edge at 150+188=338px — comfortably
     clear of the 254px core. Do not "tidy" these into matching numbers. */
  --rt-col:150px;--rt-core-x:254px;--rt-out-x:188px}

/* ---------- incoming sources ---------- */
.rt-sources{display:flex;flex-direction:column;gap:10px;position:relative;z-index:4}
.src{position:relative;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:12px;
  background:linear-gradient(150deg,rgba(18,18,42,.94),rgba(9,9,24,.96));
  border:1px solid var(--line);backdrop-filter:blur(10px);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s}
.src::before{content:'';position:absolute;inset:0;border-radius:13px;opacity:0;transition:opacity .4s;
  background:linear-gradient(120deg,color-mix(in srgb,var(--pc) 16%,transparent),transparent 70%)}
.src:hover{transform:translateX(6px);border-color:color-mix(in srgb,var(--pc) 45%,transparent);
  box-shadow:0 14px 34px color-mix(in srgb,var(--pc) 24%,transparent)}
html[dir="rtl"] .src:hover{transform:translateX(-6px)}
.src:hover::before{opacity:1}
/* active pulse driven by JS */
.src.fire{border-color:var(--pc);box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 40%,transparent),
  0 12px 34px color-mix(in srgb,var(--pc) 35%,transparent)}
.src.fire::before{opacity:1}
.src.fire .src-ic{transform:scale(1.12);box-shadow:0 0 18px color-mix(in srgb,var(--pc) 60%,transparent)}

.src-ic{position:relative;width:27px;height:27px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  font-size:14px;color:var(--pc);
  background:color-mix(in srgb,var(--pc) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--pc) 30%,transparent);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}
.src-tx{position:relative;min-width:0;flex:1}
.src-tx b{display:block;font-size:12px;font-weight:800;letter-spacing:-.015em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-tx small{display:block;font-size:9.5px;color:var(--txt-3);font-weight:600;
  text-transform:uppercase;letter-spacing:.07em}
.src-led{position:relative;width:6px;height:6px;border-radius:50%;flex-shrink:0;background:var(--pc);
  box-shadow:0 0 8px var(--pc)}
.src-led::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--pc) 55%,transparent);animation:ping 2.4s cubic-bezier(.4,0,.6,1) infinite}
.src-soon{opacity:.55;border-style:dashed}
.src-soon .src-ic{background:rgba(255,255,255,.04);border-style:dashed;color:var(--txt-3)}
.src-soon:hover{opacity:.9;transform:translateX(4px)}
html[dir="rtl"] .src-soon:hover{transform:translateX(-4px)}

/* ---------- wires (geometry set by JS from real DOM boxes) ---------- */
.rt-wires{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.wire{fill:none;stroke:rgba(139,92,246,.42);stroke-width:1.6;vector-effect:non-scaling-stroke;
  stroke-linecap:round;filter:drop-shadow(0 0 3px rgba(124,58,237,.35))}
.wire-dim{stroke:rgba(255,255,255,.11);stroke-width:1.3;stroke-dasharray:3 6;filter:none}
.pkt{filter:drop-shadow(0 0 7px currentColor)}

/* many wires in, ONE wire out — the outbound trunk is the thick one */
.wire-out{stroke:rgba(167,139,250,.55);stroke-width:2.6;
  filter:drop-shadow(0 0 6px rgba(124,58,237,.55));
  transition:stroke .25s,filter .25s}
.wire-out-hot{stroke:rgba(6,182,212,.95);
  filter:drop-shadow(0 0 12px rgba(6,182,212,.85))}
.wire-flow{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:16 200;
  filter:drop-shadow(0 0 8px rgba(6,182,212,.8));
  animation:woutFlow 2.6s linear infinite}
@keyframes woutFlow{from{stroke-dashoffset:216}to{stroke-dashoffset:0}}
/* the plug where the trunk lands on the chat card */
.wire-jack{fill:var(--accent);
  filter:drop-shadow(0 0 9px rgba(6,182,212,.95));
  animation:jackBeat 2.6s ease-in-out infinite}
@keyframes jackBeat{0%,100%{r:3.2;opacity:.85}50%{r:4.4;opacity:1}}
@media (prefers-reduced-motion:reduce){
  .wire-flow,.wire-jack{animation:none}
}

/* ---------- core ---------- */
.rt-core{position:absolute;inset-inline-start:var(--rt-core-x);top:50%;transform:translate(-50%,-50%);z-index:5;
  width:112px;height:112px;display:grid;place-items:center}
html[dir="rtl"] .rt-core{inset-inline-start:auto;inset-inline-end:var(--rt-core-x);transform:translate(50%,-50%)}
.rc-halo{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(124,58,237,.4);
  animation:coreRing 3s ease-out infinite}
.rc-halo:nth-child(2){animation-delay:1.5s;border-color:rgba(6,182,212,.3)}
@keyframes coreRing{0%{transform:scale(.72);opacity:.9}100%{transform:scale(1.75);opacity:0}}
.rc-body{position:relative;width:92px;height:92px;border-radius:26px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;text-align:center;
  background:linear-gradient(155deg,rgba(30,22,62,.97),rgba(9,9,24,.99));
  border:1px solid rgba(167,139,250,.32);
  box-shadow:0 20px 50px rgba(0,0,0,.65),0 0 46px rgba(124,58,237,.3),inset 0 1px 0 rgba(255,255,255,.1);
  transition:border-color .4s,box-shadow .4s}
.rc-body img{width:34px;filter:drop-shadow(0 0 14px rgba(124,58,237,.8));animation:levitate 4.6s ease-in-out infinite}
@keyframes levitate{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.rc-body b{font-size:11.5px;font-weight:900;letter-spacing:.04em;margin-top:3px}
.rc-body small{font-size:8px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.rc-load{position:absolute;bottom:-14px;inset-inline:14px;height:3px;border-radius:3px;
  background:rgba(255,255,255,.08);overflow:hidden}
.rc-load i{display:block;height:100%;width:40%;border-radius:3px;
  background:linear-gradient(90deg,var(--primary),var(--accent));box-shadow:0 0 10px var(--glow);
  animation:loadRun 2.2s ease-in-out infinite}
@keyframes loadRun{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}

/* ---------- the unified chat ---------- */
.rt-out{position:relative;z-index:4;margin-inline-start:var(--rt-out-x);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(160deg,rgba(16,16,40,.95),rgba(6,6,18,.98));
  border:1px solid rgba(167,139,250,.18);
  /* The single 60px purple glow terminated too abruptly and read as a hard
     halo edge behind the card. Split into three progressively wider, weaker
     rings so the falloff is continuous. */
  box-shadow:
    0 40px 90px rgba(0,0,0,.7),
    0 0 40px rgba(124,58,237,.075),
    0 0 90px rgba(124,58,237,.05),
    0 0 170px rgba(124,58,237,.03),
    inset 0 1px 0 rgba(255,255,255,.05)}
/* A soft static top highlight. The previous version rotated a conic-gradient
   ring inside the card, which read as a square frame spinning behind the
   header — visual noise, not a feature. */
.rt-out::before{content:'';position:absolute;inset:0;border-radius:var(--r-lg);z-index:9;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(167,139,250,.085) 0%,
    rgba(167,139,250,.070) 10%,
    rgba(167,139,250,.052) 22%,
    rgba(167,139,250,.036) 34%,
    rgba(167,139,250,.023) 46%,
    rgba(167,139,250,.013) 58%,
    rgba(167,139,250,.006) 70%,
    rgba(167,139,250,.002) 82%,
    rgba(167,139,250,0) 100%);
  mix-blend-mode:screen;opacity:.9}

.rt-out-h{display:flex;align-items:center;gap:8px;padding:11px 14px;position:relative;z-index:2;
  background:rgba(255,255,255,.035);border-bottom:1px solid var(--line);
  font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3)}
.oh-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;
  box-shadow:0 0 9px rgba(34,197,94,.9);animation:blink 2s ease-in-out infinite}
.oh-rate{margin-inline-start:auto;padding:2px 8px;border-radius:5px;letter-spacing:0;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.26);color:#4ade80;font-size:9.5px;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.rt-out-b{position:relative;z-index:2;height:312px;padding:12px 13px;display:flex;flex-direction:column;
  gap:10px;overflow:hidden;justify-content:flex-end}

/* --- a chat message --- */
.msg{display:flex;align-items:flex-start;gap:9px;animation:msgIn .46s cubic-bezier(.16,1,.3,1)}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.msg-pf{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
  margin-top:1px;font-size:10px;color:var(--pc,var(--primary));
  background:color-mix(in srgb,var(--pc,var(--primary)) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--pc,var(--primary)) 32%,transparent)}
.msg-pf-bot{background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(109,40,217,.95));
  border-color:rgba(167,139,250,.5);box-shadow:0 0 14px rgba(124,58,237,.5)}
.msg-pf-bot img{width:13px}
.msg-bd{flex:1;min-width:0;font-size:12.5px;line-height:1.5}
.msg-u{font-weight:800;font-size:11.5px;color:var(--pc,var(--primary));margin-inline-end:6px}
.msg-u-bot{color:var(--primary-lt);display:inline-flex;align-items:center;gap:5px}
.msg-tag{display:inline-flex;align-items:center;gap:3px;padding:1.5px 5px;border-radius:5px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);font-style:normal}
.msg-tag i{display:inline-flex;font-size:8px;line-height:1}
.msg-tag svg{width:8px;height:8px}
.msg-tx{color:var(--txt-2);word-break:break-word}
.msg-tx b{color:#fff;font-weight:800}

/* the bot's own line reads louder */
.msg-bot .msg-tx{color:#e9e6ff}
.msg-bot{padding:7px 9px;border-radius:11px;margin-inline-start:-2px;
  background:linear-gradient(100deg,rgba(124,58,237,.13),rgba(6,182,212,.05) 70%,transparent);
  border:1px solid rgba(167,139,250,.2)}

/* a message that got moderated */
.msg-bad .msg-tx{color:var(--txt-3);text-decoration:line-through;opacity:.65}
.msg-bad .msg-u{opacity:.7}
.msg-mod{background:linear-gradient(100deg,rgba(239,68,68,.13),transparent 70%);
  border-color:rgba(239,68,68,.26)}
.msg-mod .msg-u-bot{color:#f87171}
.msg-mod .msg-pf-bot{background:linear-gradient(135deg,#dc2626,#991b1b);
  border-color:rgba(248,113,113,.5);box-shadow:0 0 14px rgba(239,68,68,.45)}
.msg-act{flex-shrink:0;align-self:center;font-size:8.5px;font-weight:900;letter-spacing:.06em;
  padding:3px 7px;border-radius:6px;font-family:var(--ff-mono);
  color:#f87171;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.28)}
.msg-ai{background:linear-gradient(100deg,rgba(236,72,153,.12),rgba(124,58,237,.06) 70%,transparent);
  border-color:rgba(236,72,153,.24)}
.msg-ai .msg-u-bot{color:#f0abfc}

/* --- composer: EL1 answering everywhere at once --- */
/* min-height pins the composer so toggling .typing cannot change the router
   height; a moving height desyncs the wire viewBox and the lines twitch. */
.rt-out-f{position:relative;z-index:2;display:flex;align-items:center;gap:9px;padding:10px 13px;
  min-height:43px;box-sizing:border-box;
  border-top:1px solid var(--line);background:rgba(255,255,255,.028)}
.of-ava{width:22px;height:22px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;
  background:linear-gradient(135deg,rgba(124,58,237,.9),rgba(109,40,217,.95));
  border:1px solid rgba(167,139,250,.45)}
.of-ava img{width:13px}
.of-in{flex:1;min-width:0;font-size:11px;color:var(--txt-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.of-dots{display:inline-flex;align-items:center;height:6px;gap:3px;flex-shrink:0;opacity:0;transition:opacity .25s}
.of-dots i{width:4px;height:4px;border-radius:50%;background:var(--primary-lt);display:block}
.rt-out-f.typing .of-dots{opacity:1}
.rt-out-f.typing .of-dots i{animation:dotBob 1.1s ease-in-out infinite}
.rt-out-f.typing .of-dots i:nth-child(2){animation-delay:.16s}
.rt-out-f.typing .of-dots i:nth-child(3){animation-delay:.32s}
@keyframes dotBob{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* ---- floating tiles ---- */
.o-node.o-soon{opacity:.42;border-style:dashed}
.o-node.o-soon:hover{opacity:.85}

.tile{position:absolute;z-index:7;display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;
  background:rgba(10,10,26,.9);backdrop-filter:blur(16px);
  border:1px solid rgba(167,139,250,.22);box-shadow:0 18px 46px rgba(0,0,0,.6),0 0 30px rgba(124,58,237,.14)}
.tile b{display:block;font-size:15px;font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.tile small{font-size:9.5px;color:var(--txt-3);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.t-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:13px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-dk));box-shadow:0 0 16px var(--glow)}
.t-ic.cy{background:linear-gradient(135deg,var(--accent),#0e7490)}
.tile-a{bottom:-16px;inset-inline-end:34px;animation:evF 9s ease-in-out -1s infinite}
.tile-b{top:-20px;inset-inline-end:-14px;animation:evF 8s ease-in-out -3.5s infinite}

/* ---- ticker ---- */
.hero-ticker{position:relative;z-index:3;margin-top:58px;width:100%}
.hero-ticker .wrap{display:flex;align-items:center;gap:12px;padding:13px 24px;border-radius:14px;
  background:linear-gradient(100deg,rgba(124,58,237,.09),rgba(6,182,212,.03));
  border:1px solid rgba(124,58,237,.18);
  opacity:0;animation:heroIn .8s cubic-bezier(.16,1,.3,1) .86s forwards}
.tk-label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);flex-shrink:0}
.tk-val{font-size:15px;font-weight:800;color:var(--accent);transition:opacity .3s,transform .3s}

/* ---- scroll cue ---- */
.scroll-cue{position:absolute;bottom:22px;inset-inline-start:50%;transform:translateX(-50%);z-index:5;
  opacity:0;animation:heroIn .8s ease .94s forwards}
html[dir="rtl"] .scroll-cue{transform:translateX(50%)}
.mouse{display:block;width:24px;height:38px;border-radius:14px;border:2px solid rgba(167,139,250,.4);position:relative}
.mouse i{position:absolute;top:7px;inset-inline-start:50%;width:3px;height:7px;border-radius:3px;
  background:var(--primary-lt);transform:translateX(-50%);animation:wheel 1.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,13px)}}
.scroll-cue:hover .mouse{border-color:var(--accent)}

/* ============ MARQUEE ============ */
.marq{position:relative;padding:22px 0;border-block:1px solid var(--line);
  background:linear-gradient(180deg,rgba(124,58,237,.05),transparent);overflow:hidden;z-index:2}
.marq::before,.marq::after{content:'';position:absolute;top:0;width:140px;height:100%;z-index:3;pointer-events:none}
.marq::before{inset-inline-start:0;background:linear-gradient(90deg,var(--bg),transparent)}
.marq::after{inset-inline-end:0;background:linear-gradient(270deg,var(--bg),transparent)}
html[dir="rtl"] .marq::before{background:linear-gradient(270deg,var(--bg),transparent)}
html[dir="rtl"] .marq::after{background:linear-gradient(90deg,var(--bg),transparent)}
.marq-track{display:flex;gap:44px;width:max-content;animation:scrollX 34s linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
html[dir="rtl"] .marq-track{animation-name:scrollXr}
@keyframes scrollXr{to{transform:translateX(50%)}}
.marq-item{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:700;color:var(--txt-3);
  white-space:nowrap;transition:color .25s}
.marq-item:hover{color:#fff}
.marq-item i{font-size:18px;color:var(--primary-lt)}

/* ============ CONSOLE (interactive) ============ */
.console-wrap{display:grid;grid-template-columns:270px 1fr;gap:22px;align-items:start}
.cmd-list{display:flex;flex-direction:column;gap:8px}
.cmd-list h5{margin:0 0 4px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);font-weight:800}
.cmd-btn{display:flex;align-items:center;gap:11px;width:100%;padding:11px 14px;border-radius:12px;cursor:pointer;text-align:start;
  background:rgba(255,255,255,.03);border:1px solid var(--line);color:var(--txt-2);transition:.25s cubic-bezier(.16,1,.3,1)}
.cmd-btn:hover{background:rgba(124,58,237,.12);border-color:rgba(124,58,237,.42);color:#fff;transform:translateX(4px)}
html[dir="rtl"] .cmd-btn:hover{transform:translateX(-4px)}
.cmd-btn.active{background:linear-gradient(100deg,rgba(124,58,237,.24),rgba(6,182,212,.08));border-color:rgba(124,58,237,.55);color:#fff}
.cmd-btn .k{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;font-size:12px;
  background:rgba(124,58,237,.16);color:var(--primary-lt);transition:.25s}
.cmd-btn.active .k,.cmd-btn:hover .k{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.cmd-btn .t{flex:1;min-width:0}
.cmd-btn .t b{display:block;font-family:var(--ff-mono);font-size:12.5px;font-weight:700}
.cmd-btn .t small{display:block;font-size:10.5px;color:var(--txt-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.term{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(14,14,34,.96),rgba(6,6,18,.98));
  box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
.term-h{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.03)}
.term-h .sc-dots{margin-inline-end:4px}
.term-h b{font-size:12px;font-weight:700;color:var(--txt-2)}
.term-h .tag{margin-inline-start:auto;font-family:var(--ff-mono);font-size:10px;padding:3px 8px;border-radius:5px;
  background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3);color:#4ade80;font-weight:700}
.term-b{height:340px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;font-size:13.5px}
.term-b::-webkit-scrollbar{width:6px}
.line{display:flex;gap:9px;align-items:flex-start;animation:msgIn .4s cubic-bezier(.16,1,.3,1)}
.line .av{width:24px;height:24px;border-radius:7px;flex-shrink:0;display:grid;place-items:center;font-size:10px;font-weight:900}
.line .bd{flex:1;min-width:0;line-height:1.55}
.line .nm{font-weight:800;margin-inline-end:6px}
.line.user .av{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.line.user .nm{color:#7dd3fc}
.line.bot .av{background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 0 14px var(--glow)}
.line.bot .nm{color:var(--primary-lt)}
.line.bot .bd{padding:9px 13px;border-radius:11px;background:linear-gradient(100deg,rgba(124,58,237,.15),rgba(6,182,212,.05));
  border:1px solid rgba(124,58,237,.22)}
.line.sys .bd{font-family:var(--ff-mono);font-size:11.5px;color:var(--txt-3);font-style:italic}
.line.sys .av{background:rgba(255,255,255,.06);color:var(--txt-3)}
.term-b code{font-family:var(--ff-mono);font-size:12.5px;padding:2px 6px;border-radius:5px;
  background:rgba(124,58,237,.16);color:#ddd0ff}
.typing{display:inline-flex;gap:4px;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--primary-lt);animation:tp 1.2s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-5px)}}
.term-f{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.025)}
.term-f .pfx{font-family:var(--ff-mono);font-size:14px;font-weight:800;color:var(--primary-lt)}
.term-f input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-family:var(--ff-mono);font-size:13.5px}
.term-f input::placeholder{color:var(--txt-3)}
.term-f .send{width:34px;height:34px;border-radius:9px;border:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--primary),var(--accent));transition:.25s;font-size:13px}
.term-f .send:hover{transform:scale(1.1) rotate(-8deg);box-shadow:0 6px 18px var(--glow)}
html[dir="rtl"] .term-f .send i{transform:scaleX(-1)}

/* ============ FIREWALL ============ */
.fw{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.fw-stage{position:relative;height:400px;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,rgba(124,58,237,.13),transparent 65%),linear-gradient(160deg,#0b0b20,#06060f);
  border:1px solid var(--line-2);box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.fw-shield{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%);width:120px;height:120px;
  display:grid;place-items:center;z-index:4}
html[dir="rtl"] .fw-shield{transform:translate(50%,-50%)}
.fw-shield img{position:relative;width:64px;height:auto;object-fit:contain;
  filter:drop-shadow(0 0 24px var(--glow));z-index:2}
.fw-shield::before,.fw-shield::after{content:'';position:absolute;border-radius:50%;border:1px solid rgba(124,58,237,.35)}
.fw-shield::before{inset:0;animation:shieldPulse 2.6s ease-out infinite}
.fw-shield::after{inset:14px;border-color:rgba(6,182,212,.3);animation:shieldPulse 2.6s ease-out .8s infinite}
@keyframes shieldPulse{0%{transform:scale(.85);opacity:.85}100%{transform:scale(2.1);opacity:0}}
.fw-ring{position:absolute;top:50%;inset-inline-start:50%;width:230px;height:230px;margin:-115px 0 0 -115px;border-radius:50%;
  border:1px dashed rgba(124,58,237,.22);animation:spin 22s linear infinite;z-index:1}
.fw-ring::before{content:'';position:absolute;top:-4px;inset-inline-start:50%;width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 16px var(--accent)}
.threat{position:absolute;padding:6px 12px;border-radius:8px;font-size:11.5px;font-weight:700;white-space:nowrap;z-index:3;
  background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.42);color:#fca5a5;font-family:var(--ff-mono)}
.threat.zap{animation:zap .5s cubic-bezier(.4,0,.2,1) forwards}
@keyframes zap{0%{opacity:1}40%{opacity:1;filter:brightness(2.4);transform:scale(1.16)}100%{opacity:0;transform:scale(.4) rotate(14deg);filter:blur(6px)}}
.fw-hud{position:absolute;bottom:14px;inset-inline:14px;display:flex;gap:9px;z-index:5}
.hud{flex:1;padding:9px 11px;border-radius:11px;background:rgba(5,5,16,.8);backdrop-filter:blur(10px);border:1px solid var(--line);text-align:center}
.hud b{display:block;font-size:19px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.hud small{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.hud.g b{color:#4ade80}.hud.r b{color:#f87171}.hud.p b{color:var(--primary-lt)}

.fw-list{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.fw-item{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.025);border:1px solid var(--line);transition:.3s cubic-bezier(.16,1,.3,1)}
.fw-item:hover{background:rgba(124,58,237,.09);border-color:rgba(124,58,237,.32);transform:translateX(5px)}
html[dir="rtl"] .fw-item:hover{transform:translateX(-5px)}
.fw-item .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-size:13px;
  background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(6,182,212,.14));color:var(--primary-lt)}
.fw-item b{display:block;font-size:14px;margin-bottom:2px}
.fw-item p{margin:0;font-size:12.5px;color:var(--txt-3);line-height:1.55}

/* ============ STREAM DECK ============ */
.deck-wrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.deck{position:relative;padding:20px;border-radius:26px;
  background:linear-gradient(160deg,#1a1a30,#0a0a18);
  border:1px solid var(--line-2);
  box-shadow:0 40px 80px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,255,255,.07),inset 0 -3px 12px rgba(0,0,0,.6);
  transform:perspective(1400px) rotateX(9deg);transition:transform .7s cubic-bezier(.16,1,.3,1)}
.deck:hover{transform:perspective(1400px) rotateX(3deg)}
.deck-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.key{position:relative;aspect-ratio:1;border-radius:13px;cursor:pointer;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(160deg,#22223c,#12121f);
  box-shadow:0 4px 0 rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:6px;
  transition:transform .16s,box-shadow .22s,background .3s;overflow:hidden}
.key i{font-size:19px;color:var(--txt-3);transition:.28s}
.key span{font-size:8.5px;font-weight:800;letter-spacing:.03em;text-align:center;color:var(--txt-3);line-height:1.2;transition:.28s}
.key::after{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at 50% 0%,rgba(124,58,237,.4),transparent 70%)}
.key:hover{transform:translateY(-2px);box-shadow:0 6px 0 rgba(0,0,0,.5),0 10px 26px rgba(124,58,237,.28)}
.key:hover i,.key:hover span{color:#fff}
.key:hover::after{opacity:1}
.key.on{background:linear-gradient(160deg,rgba(124,58,237,.5),rgba(76,29,149,.6));border-color:rgba(167,139,250,.55);
  transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.5),0 0 26px rgba(124,58,237,.55),inset 0 0 22px rgba(167,139,250,.24)}
.key.on i,.key.on span{color:#fff}
.key.on::after{opacity:1}
.deck-brand{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;padding-top:13px;border-top:1px solid rgba(255,255,255,.05)}
.deck-brand img{width:17px;height:17px;object-fit:contain;opacity:.6}
.deck-brand span{font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--txt-3);font-weight:800}

.deck-info{min-height:250px}
.di-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;margin-bottom:16px;
  background:rgba(124,58,237,.14);border:1px solid rgba(124,58,237,.3);font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--primary-lt)}
.di-title{margin:0 0 12px;font-size:clamp(26px,3.4vw,38px);font-weight:900;letter-spacing:-.035em;line-height:1.1}
.di-desc{margin:0 0 20px;font-size:16px;line-height:1.72;color:var(--txt-2)}
.di-points{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.di-points li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--txt-2)}
.di-points li i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:8.5px;
  background:rgba(34,197,94,.16);color:#4ade80}
.di-anim{animation:diIn .5s cubic-bezier(.16,1,.3,1)}
@keyframes diIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ============ GIVEAWAY ============ */
.giv{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.giv-box{position:relative;padding:30px;border-radius:var(--r-lg);text-align:center;
  background:radial-gradient(ellipse at 50% 0%,rgba(236,72,153,.14),transparent 60%),linear-gradient(160deg,rgba(16,16,38,.94),rgba(6,6,18,.97));
  border:1px solid var(--line-2);box-shadow:0 30px 70px rgba(0,0,0,.55);overflow:hidden}
.giv-reel{height:66px;overflow:hidden;border-radius:14px;margin-bottom:18px;position:relative;
  background:rgba(0,0,0,.4);border:1px solid rgba(236,72,153,.24)}
.giv-reel::before,.giv-reel::after{content:'';position:absolute;inset-inline:0;height:22px;z-index:2;pointer-events:none}
.giv-reel::before{top:0;background:linear-gradient(180deg,rgba(6,6,18,.95),transparent)}
.giv-reel::after{bottom:0;background:linear-gradient(0deg,rgba(6,6,18,.95),transparent)}
.giv-strip{transition:transform .1s linear}
.giv-name{height:66px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;
  letter-spacing:-.02em;color:#fff}
.giv-name.win{background:linear-gradient(120deg,var(--pink),var(--primary-lt),var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.giv-meta{display:flex;justify-content:center;gap:22px;margin-bottom:18px}
.giv-meta div b{display:block;font-size:20px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.giv-meta div small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);font-weight:700}
.conf{position:absolute;width:8px;height:14px;top:-20px;z-index:6;pointer-events:none;border-radius:2px}

/* ============ COMPARE ============ */
.cmp{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(14,14,34,.9),rgba(6,6,18,.95));box-shadow:0 30px 70px rgba(0,0,0,.5)}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:15px 18px;text-align:start;font-size:13.5px;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;color:var(--txt-3);
  background:rgba(255,255,255,.03)}
.cmp thead th.el1{color:#fff;background:linear-gradient(180deg,rgba(124,58,237,.24),rgba(124,58,237,.08))}
.cmp thead th.el1 span{display:inline-flex;align-items:center;gap:7px}
.cmp tbody tr{transition:background .22s}
.cmp tbody tr:hover{background:rgba(124,58,237,.06)}
.cmp td:first-child{font-weight:700;color:#fff}
.cmp td.el1{background:rgba(124,58,237,.07);color:#ddd0ff;font-weight:600;border-inline:1px solid rgba(124,58,237,.14)}
.cmp td.el1 i{color:#4ade80;margin-inline-end:7px}
.cmp td.oth{color:var(--txt-3)}
.cmp td.oth i{color:#ef4444;margin-inline-end:7px}
.cmp tbody tr:last-child td{border-bottom:0}

/* ============ PRICING ============ */
.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:28px 22px;border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(16,16,38,.85),rgba(8,8,22,.94));border:1px solid var(--line);
  transition:transform .38s cubic-bezier(.16,1,.3,1),border-color .38s,box-shadow .38s}
.plan:hover{transform:translateY(-8px);border-color:rgba(124,58,237,.42);box-shadow:0 26px 60px rgba(124,58,237,.2)}
.plan.pop{border-color:rgba(124,58,237,.5);background:linear-gradient(170deg,rgba(30,20,60,.9),rgba(10,8,26,.96));
  box-shadow:0 22px 60px rgba(124,58,237,.26)}
.plan.pop::before{content:'';position:absolute;inset:-1px;border-radius:var(--r-lg);padding:1px;z-index:-1;
  background:linear-gradient(140deg,var(--primary),var(--accent),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.plan-tag{position:absolute;top:-11px;inset-inline-start:50%;transform:translateX(-50%);padding:4px 14px;border-radius:99px;
  font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 18px rgba(124,58,237,.45)}
html[dir="rtl"] .plan-tag{transform:translateX(50%)}
.plan-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;font-size:16px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--txt-2)}
.plan.pop .plan-ic{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff;border-color:transparent;
  box-shadow:0 8px 22px rgba(124,58,237,.4)}
.plan h3{margin:0 0 4px;font-size:19px;font-weight:900;letter-spacing:-.02em}
.plan .pdesc{margin:0 0 18px;font-size:12.5px;color:var(--txt-3);line-height:1.5;min-height:38px}
.price{display:flex;align-items:flex-end;gap:5px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.price b{font-size:38px;font-weight:900;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(135deg,#fff,var(--primary-lt));-webkit-background-clip:text;background-clip:text;color:transparent}
.price small{font-size:12px;color:var(--txt-3);font-weight:600;padding-bottom:5px}
.plan ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.plan li{display:flex;align-items:flex-start;gap:9px;font-size:12.8px;color:var(--txt-2);line-height:1.45}
.plan li i{margin-top:3px;font-size:9px;color:#4ade80;flex-shrink:0}
.plan.pop li i{color:var(--primary-lt)}
.plan .btn{width:100%}

/* ============ INTEGRATIONS ORBIT ============ */
.orbit-stage{position:relative;height:400px;display:grid;place-items:center}
.orbit-core{position:relative;width:104px;height:104px;border-radius:26px;display:grid;place-items:center;z-index:5;
  background:linear-gradient(160deg,rgba(124,58,237,.28),rgba(6,182,212,.14));border:1px solid rgba(124,58,237,.4);
  box-shadow:0 0 60px rgba(124,58,237,.4),inset 0 1px 0 rgba(255,255,255,.14)}
.orbit-core img{width:58px;height:58px;object-fit:contain;
  /* The <img> carries width/height=42 attributes. Setting only CSS width let
     the height attribute win, so the square logo rendered 58x42 and looked
     squashed. Both axes must be pinned, and object-fit guards the ratio. */
  filter:drop-shadow(0 0 18px var(--glow))}
.o-ring{position:absolute;border-radius:50%;border:1px solid rgba(124,58,237,.13);top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}
html[dir="rtl"] .o-ring{transform:translate(50%,-50%)}
.o-ring.r1{width:210px;height:210px;animation:orbSpin 22s linear infinite}
.o-ring.r2{width:310px;height:310px;animation:orbSpin 34s linear infinite reverse}
.o-ring.r3{width:400px;height:400px;animation:orbSpin 46s linear infinite;border-style:dashed;border-color:rgba(6,182,212,.1)}
@keyframes orbSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
html[dir="rtl"] .o-ring.r1,html[dir="rtl"] .o-ring.r2,html[dir="rtl"] .o-ring.r3{animation-name:orbSpinR}
@keyframes orbSpinR{to{transform:translate(50%,-50%) rotate(360deg)}}
.o-node{position:absolute;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:19px;
  background:rgba(10,10,26,.92);backdrop-filter:blur(10px);border:1px solid var(--line-2);
  box-shadow:0 8px 26px rgba(0,0,0,.5);transition:transform .3s,box-shadow .3s}
.o-node:hover{transform:scale(1.22);box-shadow:0 10px 30px var(--glow);z-index:9}
.o-node em{position:absolute;bottom:-24px;font-size:9.5px;font-style:normal;font-weight:700;color:var(--txt-3);white-space:nowrap;opacity:0;transition:.25s}
.o-node:hover em{opacity:1}

/* ============ FINAL CTA ============ */
.cta{position:relative;padding:64px 36px;border-radius:var(--r-xl);text-align:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(124,58,237,.28),transparent 62%),linear-gradient(160deg,rgba(18,14,44,.92),rgba(6,6,18,.96));
  border:1px solid rgba(124,58,237,.28);box-shadow:0 40px 100px rgba(124,58,237,.18)}
.cta::before{content:'';position:absolute;inset:0;opacity:.55;
  background:repeating-radial-gradient(circle at 50% 22%,transparent 0 46px,rgba(124,58,237,.13) 46px 47px);
  mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 72%);
  animation:ringOut 9s ease-out infinite}
@keyframes ringOut{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.cta > *{position:relative;z-index:2}
.cta img.logo{width:70px;margin:0 auto 22px;filter:drop-shadow(0 0 32px var(--glow));animation:levitate 5s ease-in-out infinite}
.cta h2{margin:0 0 14px;font-size:clamp(30px,4.6vw,48px);font-weight:900;letter-spacing:-.04em;line-height:1.08}
.cta p{margin:0 auto 30px;max-width:520px;font-size:16.5px;color:var(--txt-2);line-height:1.7}
.cta-btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.cta-note{font-size:12.5px;color:var(--txt-3);display:inline-flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center}
.cta-note span{display:inline-flex;align-items:center;gap:6px}
.cta-note i{color:#4ade80;font-size:11px}

/* ============ FOOTER ============ */
footer{position:relative;z-index:2;padding:64px 0 0;border-top:1px solid var(--line);margin-top:60px;
  background:linear-gradient(180deg,transparent,rgba(124,58,237,.045))}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.f-about p{margin:16px 0 18px;font-size:13.5px;color:var(--txt-3);line-height:1.72;max-width:300px}
.f-social{display:flex;gap:9px}
.f-social a{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;font-size:14px;color:var(--txt-3);
  background:rgba(255,255,255,.04);border:1px solid var(--line);transition:.26s cubic-bezier(.34,1.56,.64,1)}
.f-social a:hover{color:#fff;background:linear-gradient(135deg,var(--primary),var(--accent));border-color:transparent;
  transform:translateY(-4px) rotate(-6deg);box-shadow:0 8px 20px var(--glow)}
.f-col h5{margin:0 0 15px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:800}
.f-col a{display:block;padding:5px 0;font-size:13.5px;color:var(--txt-3);transition:.22s}
.f-col a:hover{color:var(--primary-lt);transform:translateX(4px)}
html[dir="rtl"] .f-col a:hover{transform:translateX(-4px)}
.f-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--txt-3)}
.f-word{position:relative;text-align:center;padding-bottom:10px;overflow:hidden;line-height:.8}
.f-word b{font-size:clamp(70px,17vw,200px);font-weight:900;letter-spacing:-.06em;
  background:linear-gradient(180deg,rgba(124,58,237,.22),transparent 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}

/* ============ TO TOP ============ */
#top{position:fixed;bottom:26px;inset-inline-end:26px;width:44px;height:44px;border-radius:13px;z-index:800;cursor:pointer;
  display:grid;place-items:center;color:#fff;border:1px solid rgba(124,58,237,.4);
  background:rgba(10,10,26,.86);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s cubic-bezier(.16,1,.3,1)}
#top.show{opacity:1;visibility:visible;transform:none}
#top:hover{background:linear-gradient(135deg,var(--primary),var(--accent));transform:translateY(-4px);box-shadow:0 10px 28px var(--glow)}

/* progress bar */
#prog{position:fixed;top:0;inset-inline-start:0;height:2.5px;z-index:950;width:0;
  background:linear-gradient(90deg,var(--primary),var(--accent),var(--pink));box-shadow:0 0 12px var(--glow)}

/* ============ RESPONSIVE ============ */
@media(max-width:1200px){
  .tile-a{inset-inline-start:-12px}
  .tile-b{inset-inline-end:-6px}
  .ev-1,.ev-3{inset-inline-start:-2%}
  .ev-2{inset-inline-end:-2%}
}
@media(max-width:1024px){
  .hero-grid,.fw,.deck-wrap,.giv,.console-wrap{grid-template-columns:1fr;gap:40px}
  .hero{padding:120px 0 90px}
  .hero-left,.hero-right{transform:none!important}
  .hero-p{max-width:none}
  .rig-orbit{display:none}
  .tile-a{bottom:-18px;inset-inline-start:8px}
  .tile-b{top:-18px;inset-inline-end:8px}
  /* router → stacked flow on tablet */
  .router{grid-template-columns:1fr;min-height:0;gap:0}
  .rt-sources{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:9px;margin-bottom:56px}
  .src{flex:0 1 auto;padding:8px 12px}
  .rt-wires{display:none}
  .rt-core{position:relative;inset-inline-start:auto;top:auto;transform:none;
    margin:0 auto 22px;width:max-content}
  .rt-out{margin-inline-start:0}
  .rt-out-b{height:270px}
  .hero-floor{height:44vh}
  .scroll-cue{display:none}
  .plans{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:32px}
  .nav-links{display:none}
  .burger{display:flex}
  .deck{transform:none}
  .cmd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .cmd-list h5{grid-column:1/-1}
}
@media(max-width:768px){
  .sec{padding:76px 0}
  .hero{padding:120px 0 60px;min-height:auto}
  .plans{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .hero-stats{gap:9px}
  .hstat{min-width:calc(50% - 5px);padding:11px 13px}
  .hstat b{font-size:20px}
  .tile{padding:9px 11px}
  .tile b{font-size:13px}
  .hero-ticker{margin-top:38px}
  .hero-ticker .wrap{flex-direction:column;align-items:flex-start;gap:5px;padding:12px 18px}
  .tk-val{font-size:13.5px}
  .chat-rain{opacity:.22}
  .router{padding-top:4px}
  .rt-sources{gap:7px;margin-bottom:44px}
  .src{padding:7px 10px;gap:7px;border-radius:11px}
  .src-ic{width:26px;height:26px;border-radius:8px}
  .src-tx b{font-size:12.5px}
  .src-tx small{font-size:9.5px}
  .rt-out-b{height:238px}
  .rt-out-h{padding:9px 11px;font-size:11px}
  .msg-bd{font-size:11.5px}
  .msg-tag{display:none}
  .of-in{font-size:10px}
  .hero-badge{font-size:11.5px}
  .cmp{overflow-x:auto}
  .cmp table{min-width:540px}
  .orbit-stage{height:330px;transform:scale(.82)}
  .fw-stage{height:330px}
  .term-b{height:290px}
  .cta{padding:44px 22px}
  .nav-side .pill-live{display:none}
  .lang-menu{width:190px;max-height:52vh}
  .lang-btn b{display:none}
}

/* mobile drawer */
#drawer{position:fixed;inset:0;z-index:940;background:rgba(5,5,16,.97);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;visibility:hidden;transition:.35s}
#drawer.open{opacity:1;visibility:visible}
#drawer a{font-size:22px;font-weight:800;padding:12px 26px;border-radius:12px;color:var(--txt-2);transition:.25s}
#drawer a:hover{color:#fff;background:rgba(124,58,237,.14)}
#drawer .close{position:absolute;top:20px;inset-inline-end:20px;width:42px;height:42px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:#fff;font-size:17px;cursor:pointer}

@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- admin global_ai_hidden toggle hook ---------- */
.ai-feature-item[hidden]{display:none!important}
html.ai-hidden .ai-feature-item{display:none!important}