/* CricStream — home page */

/* ── Phone shell (sizes in em; --k scales the whole device) ── */
.phone{--k:1;position:relative;width:calc(300px*var(--k));height:calc(640px*var(--k));font-size:calc(16px*var(--k));flex:none;
  border-radius:3.1em;padding:.7em;
  background:linear-gradient(145deg,#3a4047 0%,#121417 32%,#0b0c0e 60%,#2b3036 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),inset 0 0 0 .09em rgba(255,255,255,.14),0 3em 6em -2em rgba(0,0,0,.85),0 2em 8em -3em rgba(198,255,77,.22)}
.phone::before{content:"";position:absolute;right:-.18em;top:7.5em;width:.2em;height:4em;border-radius:0 .2em .2em 0;background:#2a2f35}
.phone::after{content:"";position:absolute;left:-.18em;top:6em;width:.2em;height:2.4em;border-radius:.2em 0 0 .2em;background:#2a2f35;box-shadow:0 3.2em 0 #2a2f35}
.screen{position:relative;height:100%;border-radius:2.45em;overflow:hidden;background:#08090C;isolation:isolate}
.island{position:absolute;top:.65em;left:50%;width:5.6em;height:1.6em;margin-left:-2.8em;border-radius:1em;background:#000;z-index:20}
.sbar{position:absolute;top:0;left:0;right:0;height:2.9em;display:flex;align-items:center;justify-content:space-between;padding:0 1.6em;font-size:.72em;font-weight:700;z-index:19;color:var(--tx)}
.sbar i{display:flex;gap:.25em;align-items:center}
.sbar i::before{content:"";width:1.4em;height:.7em;border-radius:.2em;border:1px solid currentColor;opacity:.8}
.glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:30;background:linear-gradient(115deg,rgba(255,255,255,.08) 0%,transparent 28%,transparent 70%,rgba(255,255,255,.03))}

/* app chrome */
.app-top{display:flex;justify-content:space-between;align-items:center;padding:3.3em 1.1em .8em}
.wm{font-family:var(--fd);font-weight:700;font-size:1.12em;letter-spacing:-.01em}
.wm b{color:var(--volt)}
.ava{width:2.15em;height:2.15em;border-radius:50%;background:var(--volt);color:#0A0C06;display:grid;place-items:center;font-weight:800;font-size:.85em}
.tabbar{position:absolute;left:.7em;right:.7em;bottom:.7em;height:3.6em;border-radius:1.4em;background:rgba(20,23,26,.92);border:1px solid var(--line);display:flex;justify-content:space-around;align-items:center}
.tabbar span{width:2.4em;height:2.4em;border-radius:.8em;display:grid;place-items:center;color:var(--tx3)}
.tabbar span.on{background:rgba(198,255,77,.16);color:var(--volt)}
.tabbar svg{width:1.15em;height:1.15em}

/* scorebug card */
.sb{position:relative;margin:0 .75em;padding:1em;border-radius:1.3em;overflow:hidden;
  background:linear-gradient(165deg,rgba(198,255,77,.11),rgba(198,255,77,.025) 45%,rgba(255,255,255,.02));border:1px solid rgba(198,255,77,.2)}
.sb::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 2.2em)}
.sb-top{display:flex;justify-content:space-between;align-items:center}
.lv{display:inline-flex;align-items:center;gap:.45em;font-size:.6em;font-weight:800;letter-spacing:.14em;color:#FF7373;border:1px solid rgba(255,77,77,.5);background:rgba(255,77,77,.1);padding:.35em .8em;border-radius:99px}
.lv::before{content:"";width:.55em;height:.55em;border-radius:50%;background:var(--red);animation:blink 1.2s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}
.sb-fmt{font-size:.64em;color:var(--tx3)}
.sb-team{margin-top:.9em;font-size:.7em;font-weight:800;letter-spacing:.07em;display:flex;align-items:center;gap:.55em}
.sb-team::before{content:"";width:.22em;height:1.2em;border-radius:1px;background:var(--blue)}
.sb-main{display:flex;justify-content:space-between;align-items:flex-end;gap:.6em}
.sb-score{font-family:var(--fd);font-weight:700;font-size:3.1em;letter-spacing:-.05em;line-height:1;display:flex;align-items:baseline}
.sb-score small{font-size:.42em;color:var(--tx3);font-weight:500;letter-spacing:0;margin-left:.08em}
.sb-score .bump{display:inline-block;animation:bump .45s var(--ease)}
@keyframes bump{40%{transform:translateY(-.06em) scale(1.06);color:var(--volt)}}
.sb-ov{font-size:.7em;color:var(--volt);font-weight:700;margin-top:.35em}
.sb-bat{text-align:right;font-size:.64em;color:var(--tx3);line-height:1.65;padding-bottom:.2em}
.sb-bat b{color:var(--tx);font-weight:700}
.sb-bat em{font-style:normal;color:var(--tx2)}
.chips{display:flex;gap:.36em;align-items:center;margin-top:1em;min-height:1.75em}
.chips .lbl{font-size:.54em;color:var(--tx3);font-weight:800;letter-spacing:.12em;margin-right:.35em;white-space:nowrap}
.chip{width:1.75em;height:1.75em;border-radius:.45em;display:grid;place-items:center;font-size:.66em;font-weight:800;font-family:var(--fm);
  background:rgba(255,255,255,.07);color:var(--tx2);animation:chipin .4s var(--ease) both}
.chip.c4{background:rgba(77,166,255,.22);color:#a9d2ff}
.chip.c6{background:var(--volt);color:#0A0C06}
.chip.cw{background:rgba(255,77,77,.24);color:#ffa3a3}
.chip.cx{background:rgba(255,209,102,.16);color:var(--gold);font-size:.56em}
.chip.e{background:none;box-shadow:inset 0 0 0 1px var(--line3);animation:none}
@keyframes chipin{from{transform:scale(.4);opacity:0}}
.resume{margin-top:1em;height:3em;border-radius:.85em;background:var(--volt);color:#0A0C06;font-weight:800;font-size:.8em;display:flex;align-items:center;justify-content:center;gap:.5em}
.resume svg{width:.9em;height:.9em;fill:currentColor}

.mini-label{font-size:.56em;font-weight:800;letter-spacing:.16em;color:var(--tx3);margin:1.4em 1.4em .6em}
.mcard{margin:0 .75em .5em;padding:.85em 1em;border-radius:1em;background:var(--s1);border:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:.72em}
.mcard b{display:block;font-size:1.05em}
.mcard small{color:var(--tx3)}
.mcard .res{font-size:.8em;font-weight:800;color:var(--volt);background:var(--volt-a);padding:.35em .7em;border-radius:99px}

/* ── HERO ── */
.hero{position:relative;min-height:100svh;padding:calc(var(--nav-h) + 40px) 0 72px;display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.beam{position:absolute;top:-20%;width:46vw;max-width:720px;height:140%;transform-origin:50% 0;filter:blur(28px);opacity:.75;
  background:linear-gradient(180deg,rgba(198,255,77,.22),rgba(198,255,77,.04) 55%,transparent 75%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%)}
.beam.l{left:-6%;transform:rotate(-24deg);animation:sway 11s ease-in-out infinite alternate}
.beam.r{right:-8%;transform:rotate(26deg);animation:sway2 13s ease-in-out infinite alternate;background:linear-gradient(180deg,rgba(220,235,255,.14),rgba(220,235,255,.03) 55%,transparent 75%)}
@keyframes sway{to{transform:rotate(-14deg)}}
@keyframes sway2{to{transform:rotate(18deg)}}
.lamp{position:absolute;top:2%;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 30px 12px rgba(255,255,255,.35),0 0 120px 40px rgba(198,255,77,.18)}
.lamp.l{left:14%} .lamp.r{right:12%}
.floor{position:absolute;left:-50%;right:-50%;bottom:-8%;height:62%;transform:perspective(600px) rotateX(64deg);transform-origin:bottom;
  background-image:linear-gradient(rgba(198,255,77,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(198,255,77,.12) 1px,transparent 1px);background-size:64px 64px;
  mask-image:linear-gradient(transparent,#000 60%);-webkit-mask-image:linear-gradient(transparent,#000 60%);animation:floor 3.5s linear infinite;opacity:.55}
@keyframes floor{to{background-position:0 64px,0 0}}
.hero .glow.g1{width:560px;height:560px;background:#C6FF4D;opacity:.12;left:52%;top:18%}
.hero .glow.g2{width:420px;height:420px;background:#4DA6FF;opacity:.1;left:-8%;bottom:-10%}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:26px;align-items:flex-start}
.hero-copy .proof{align-self:stretch}
.hero h1 .sheen{padding-right:.04em}
.hing{font-family:var(--fd);font-size:18px;color:var(--tx);opacity:.85;display:flex;align-items:center;gap:10px}
.hing::before{content:"";width:28px;height:2px;background:var(--volt);border-radius:2px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.proof{display:flex;gap:clamp(18px,3vw,40px);list-style:none;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap}
.proof li{display:flex;flex-direction:column;gap:2px}
.proof b{font-family:var(--fd);font-size:clamp(26px,2.6vw,34px);letter-spacing:-.04em;line-height:1}
.proof span{font-size:13px;color:var(--tx3)}
.hero-stage{position:relative;display:grid;place-items:center;min-height:700px;perspective:1400px}
.tilt{transform-style:preserve-3d;transition:transform .6s var(--ease);will-change:transform}
.hero-stage .phone{animation:rise 1.4s var(--ease) both .2s}
@keyframes rise{from{opacity:0;transform:translateY(60px) rotateX(12deg)}}
.halo{position:absolute;width:520px;height:520px;border-radius:50%;border:1px solid var(--line);
  background:radial-gradient(circle,rgba(198,255,77,.08),transparent 60%)}
.halo::before,.halo::after{content:"";position:absolute;inset:-70px;border-radius:50%;border:1px dashed rgba(255,255,255,.06);animation:spin 60s linear infinite}
.halo::after{inset:70px;border-style:solid;border-color:rgba(198,255,77,.1);animation-duration:40s;animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;
  background:rgba(16,18,21,.78);border:1px solid var(--line2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.8);font-size:13px;white-space:nowrap;animation:bob 7s ease-in-out infinite}
.float small{display:block;color:var(--tx3);font-size:11px;letter-spacing:.04em}
.float b{font-weight:700}
.float .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none}
.float .ic svg{width:18px;height:18px}
@keyframes bob{50%{transform:translateY(-12px)}}
.f-live{top:5%;left:-10%;animation-delay:-1s}
.f-code{top:22%;right:-4%;animation-delay:-3s}
.f-code .code{font-family:var(--fm);font-weight:700;font-size:16px;letter-spacing:.24em;color:var(--volt)}
.f-pom{bottom:16%;left:-6%;animation-delay:-5s}
.f-pom .ic{background:linear-gradient(135deg,#FFE29A,#E0A93B);color:#2a1a00}
.f-six{bottom:30%;right:-6%;opacity:0;transform:translateY(10px) scale(.9);transition:opacity .4s var(--ease),transform .4s var(--ease);animation:none}
.f-six.show{opacity:1;transform:none}
.f-six .ic{background:var(--volt);color:#0A0C06;font-family:var(--fd);font-weight:700;font-size:17px}
.scroll-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--fm);font-size:10px;letter-spacing:.2em;color:var(--tx3)}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--volt),transparent);animation:drip 2s var(--ease) infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ── Marquee ── */
.mq{position:relative;border-block:1px solid var(--line);padding:22px 0;overflow:hidden;background:linear-gradient(90deg,var(--bg),transparent 12%,transparent 88%,var(--bg))}
.mq-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq-track span{font-family:var(--fd);font-weight:700;font-size:clamp(28px,4.2vw,56px);letter-spacing:-.035em;padding:0 .45em;white-space:nowrap;line-height:1.1}
.mq-track span:nth-child(4n+1){color:var(--tx)}
.mq-track span:nth-child(4n+3){color:transparent;-webkit-text-stroke:1.2px rgba(255,255,255,.35)}
.mq-track span.st{color:var(--volt);font-size:clamp(20px,2.6vw,34px);align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── DEMO ── */
.demo .glow{width:min(700px,90vw);height:500px;background:#C6FF4D;opacity:.07;right:0;top:10%}
.demo-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.demo-phone{position:sticky;top:110px}
.hint{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13px;color:var(--tx3);justify-content:center}
.hint kbd{font-family:var(--fm);font-size:11px;padding:3px 7px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx2)}
.sc-head{display:flex;align-items:center;gap:.55em;padding:3.2em 1em .8em;font-size:.8em}
.sc-head svg{width:1.2em;height:1.2em;color:var(--tx2)}
.sc-head b{font-weight:800}
.tag{font-size:.7em;font-weight:800;letter-spacing:.1em;color:var(--volt);border:1px solid rgba(198,255,77,.45);padding:.2em .6em;border-radius:.4em}
.sc-head .lv{margin-left:auto;font-size:.68em}
.sc .sb{padding:.85em .95em}
.sc .sb-score{font-size:2.7em}
.bwl{display:flex;align-items:center;gap:.7em;margin:.6em .75em 0;padding:.65em .8em;border-radius:1em;background:var(--s1);border:1px solid var(--line);font-size:.72em}
.bwl .in{width:2.3em;height:2.3em;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85em;background:#1a3a33;color:#7fe0c0}
.bwl small{display:block;color:var(--tx3);font-family:var(--fm)}
.bwl em{margin-left:auto;font-style:normal;color:var(--volt);font-weight:700}
.fh{margin:.55em .75em 0;height:2.2em;border-radius:.7em;display:grid;place-items:center;font-size:.62em;font-weight:800;letter-spacing:.2em;color:var(--gold);
  background:rgba(255,209,102,.08);border:1px solid rgba(255,209,102,.4);opacity:0;transform:scaleY(.6);transition:opacity .3s,transform .3s var(--ease)}
.fh.on{opacity:1;transform:none}
.padbox{position:absolute;left:0;right:0;bottom:0;padding:.75em .75em 1em;background:var(--s1);border-top:1px solid var(--line);border-radius:1.5em 1.5em 0 0}
.padbox .grab{width:2.6em;height:.25em;border-radius:1em;background:var(--line3);margin:0 auto .6em}
.pad-top{display:flex;justify-content:space-between;align-items:center;font-size:.62em;font-weight:800;letter-spacing:.12em;color:var(--tx3);margin:0 .3em .65em}
.pad-top button{display:flex;align-items:center;gap:.4em;color:var(--tx2);font-weight:700;letter-spacing:.02em;font-size:1.15em}
.pad-top button svg{width:1.1em;height:1.1em}
.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em}
.key{height:2.9em;border-radius:.8em;background:var(--s3);font-family:var(--fd);font-weight:700;font-size:1.15em;color:var(--tx);display:grid;place-items:center;
  box-shadow:inset 0 -.12em 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06);transition:transform .12s var(--ease),background .2s,filter .2s}
.key:hover{filter:brightness(1.25)}
.key:active,.key.hit{transform:scale(.92)}
.key.k4{background:rgba(77,166,255,.2);color:#b6daff}
.key.k6{background:var(--volt);color:#0A0C06}
.key.kw{grid-column:span 2;background:rgba(255,77,77,.2);color:#ff9d9d;font-size:.95em;letter-spacing:.06em}
.key.kx{font-size:.78em;background:rgba(255,209,102,.1);color:var(--gold);font-family:var(--fb);font-weight:800}

.cam-col{display:flex;flex-direction:column;gap:18px;min-width:0}
.cam{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#04060a;border:1px solid var(--line2);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.95),0 0 0 6px rgba(255,255,255,.02);container-type:inline-size}
.scene{position:absolute;inset:-5%;animation:pan 16s ease-in-out infinite alternate}
@keyframes pan{to{transform:scale(1.06) translate(-1.5%,1%)}}
.sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% -5%,#15233f 0%,#0a1020 42%,#05070c 68%)}
.crowd{position:absolute;left:0;right:0;top:24%;height:24%;opacity:.5;
  background-image:radial-gradient(circle,rgba(255,255,255,.6) .7px,transparent 1.3px),radial-gradient(circle,rgba(255,214,150,.45) .7px,transparent 1.4px),radial-gradient(circle,rgba(198,255,77,.35) .6px,transparent 1.2px);
  background-size:9px 7px,13px 10px,17px 12px;background-position:0 0,5px 3px,2px 6px;
  mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 35%,#000 75%,transparent)}
.fl{position:absolute;top:5%;width:16%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(235,245,255,.55) 11%,rgba(198,255,77,.12) 32%,transparent 64%);animation:flick 5s ease-in-out infinite}
.fl.l{left:4%} .fl.r{right:4%;animation-delay:-2s}
@keyframes flick{50%{opacity:.82}}
.field{position:absolute;left:-25%;right:-25%;top:43%;bottom:-40%;border-radius:50% 50% 0 0/36% 36% 0 0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 7%,transparent 7% 14%),radial-gradient(70% 90% at 50% 8%,#2f8a43,#1c5c2c 48%,#0e3519 85%)}
.ring{position:absolute;left:12%;right:12%;top:52%;height:70%;border-radius:50%;border:1px dashed rgba(255,255,255,.18)}
.pitch{position:absolute;left:50%;top:46%;width:20%;height:64%;transform:translateX(-50%) perspective(260px) rotateX(55deg);transform-origin:top;
  background:linear-gradient(#e2cb98,#bb9c62 70%,#a88a52);box-shadow:0 0 30px rgba(0,0,0,.3)}
.pitch::before,.pitch::after{content:"";position:absolute;left:-12%;right:-12%;height:1.5%;background:rgba(255,255,255,.9)}
.pitch::before{top:9%} .pitch::after{bottom:9%}
.stumps{position:absolute;left:50%;top:44.2%;width:1.5%;height:4.6%;transform:translateX(-50%);
  background:linear-gradient(90deg,#f4f4f4 0 24%,transparent 24% 38%,#f4f4f4 38% 62%,transparent 62% 76%,#f4f4f4 76%)}
.stumps.out{animation:stumpsout .9s var(--ease)}
@keyframes stumpsout{20%{transform:translateX(-50%) rotate(-14deg) translateY(-8%)}60%{transform:translateX(-50%) rotate(8deg)}}
.ball{position:absolute;left:50%;top:52%;width:1.1%;aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.8);opacity:0}
.ball.go{animation:ballgo 1.2s var(--ease) forwards}
.ball.go6{animation:ballgo6 1.4s var(--ease) forwards}
@keyframes ballgo{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(1800%,-900%) scale(.6)}}
@keyframes ballgo6{0%{opacity:1;transform:none}60%{opacity:1}100%{opacity:0;transform:translate(-1600%,-2600%) scale(.3)}}
.vig{position:absolute;inset:0;background:radial-gradient(120% 95% at 50% 38%,transparent 45%,rgba(0,0,0,.65))}
.scan{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px)}

.hud{position:absolute;inset:0;padding:3% 3.2%;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;font-size:14px;font-size:clamp(9px,1.9cqw,15px)}
.hud-top{display:flex;justify-content:space-between;align-items:flex-start}
.rec{display:flex;gap:.5em;align-items:center}
.rec .on{display:flex;align-items:center;gap:.45em;background:var(--red);color:#fff;font-weight:800;font-size:.85em;letter-spacing:.1em;padding:.4em .75em;border-radius:.4em}
.rec .on::before{content:"";width:.5em;height:.5em;border-radius:50%;background:#fff;animation:blink 1.2s steps(2) infinite}
.rec .t{font-family:var(--fm);font-size:.85em;background:rgba(0,0,0,.55);padding:.4em .7em;border-radius:.4em;color:#fff}
.watch{display:flex;gap:.5em}
.watch span{display:flex;align-items:center;gap:.4em;font-size:.82em;background:rgba(0,0,0,.55);padding:.4em .7em;border-radius:.4em;color:#fff;font-weight:600}
.watch svg{width:1.1em;height:1.1em}
.watch .gd::before{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--volt)}
.toast{align-self:flex-start;margin-bottom:.6em;display:flex;align-items:center;gap:.5em;background:rgba(10,12,14,.75);border:1px solid rgba(198,255,77,.35);color:var(--tx);
  padding:.45em .8em;border-radius:.6em;font-size:.82em;font-weight:600;opacity:0;transform:translateY(.6em);transition:opacity .35s,transform .35s var(--ease)}
.toast.show{opacity:1;transform:none}
.toast i{width:.55em;height:.55em;border-radius:50%;background:var(--volt);flex:none}
.burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.burst b{grid-area:1/1;font-family:var(--fd);font-weight:700;font-size:16cqw;letter-spacing:-.05em;line-height:1;opacity:0}
.burst b.f{color:var(--volt)}
.burst b.s{color:transparent;-webkit-text-stroke:2px var(--volt)}
.burst.w b.f{color:var(--red)} .burst.w b.s{-webkit-text-stroke-color:var(--red)}
.burst.show b.f{animation:burstf 1.3s var(--ease)}
.burst.show b.s{animation:bursts 1.3s var(--ease)}
@keyframes burstf{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1.02)}100%{opacity:0;transform:scale(1.1)}}
@keyframes bursts{0%{opacity:0;transform:scale(.8)}25%{opacity:.9;transform:scale(1.05)}100%{opacity:0;transform:scale(1.7)}}

/* ── Tickers (one DOM, six skins) ── */
.tk{display:flex;align-items:stretch;font-size:1em;line-height:1.1;color:#fff;transition:all .4s var(--ease);min-height:3.4em}
.tk>div{display:flex;flex-direction:column;justify-content:center;padding:.35em .8em;gap:.15em;white-space:nowrap}
.tk-a{font-weight:800;letter-spacing:.06em}
.tk-a .tk-logo{display:flex;align-items:center;gap:.45em}
.tk-a .tk-logo::before{content:"";width:1.3em;height:1.3em;border-radius:.3em;background:linear-gradient(135deg,#4DA6FF,#1c5cd6)}
.tk-b{flex-direction:row!important;align-items:baseline!important;gap:.55em!important}
.tk-score{font-family:var(--fd);font-weight:700;font-size:1.75em;letter-spacing:-.03em}
.tk-ov{font-size:.85em;opacity:.75;font-family:var(--fm)}
.tk-c,.tk-d{font-size:.86em}
.tk-c b,.tk-d b{font-weight:800}
.tk-c i,.tk-d i{font-style:normal;opacity:.6}
.tk-e{margin-left:auto}
.tk-balls{display:flex;gap:.3em}
.tk-balls i{width:1.45em;height:1.45em;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.72em;font-weight:800;background:rgba(255,255,255,.14);font-family:var(--fm)}
.tk-balls i.c4{background:#2f7be0} .tk-balls i.c6{background:var(--volt);color:#0A0C06} .tk-balls i.cw{background:var(--red)} .tk-balls i.cx{background:#a87b16}
.tk-eq{font-size:.78em;opacity:.85;font-weight:600}
@container (max-width:560px){.tk-c,.tk-d{display:none!important}}
@container (max-width:380px){.tk-eq{display:none}}

/* classic broadcast */
.tk[data-style="classic"]{background:linear-gradient(180deg,#0e2a8f,#081c62);border-top:.18em solid #FFB020;box-shadow:0 .6em 1.4em rgba(0,0,0,.5)}
.tk[data-style="classic"] .tk-a{background:#04103d;clip-path:polygon(0 0,100% 0,88% 100%,0 100%);padding-right:1.4em}
.tk[data-style="classic"] .tk-b{background:#fff;color:#0a1a5c;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);padding:0 1.5em}
.tk[data-style="classic"] .tk-c{border-right:1px solid rgba(255,255,255,.18)}
/* neon */
.tk[data-style="neon"]{background:rgba(4,6,8,.86);border:1px solid var(--volt);border-radius:.7em;box-shadow:0 0 1.2em rgba(198,255,77,.45),inset 0 0 1.2em rgba(198,255,77,.12);font-family:var(--fm);margin:0 1.5%}
.tk[data-style="neon"] .tk-score{color:var(--volt);font-family:var(--fm);text-shadow:0 0 .5em rgba(198,255,77,.8)}
.tk[data-style="neon"] .tk-a{color:var(--volt)}
.tk[data-style="neon"]>div+div{border-left:1px solid rgba(198,255,77,.25)}
/* gold minimal */
.tk[data-style="gold"]{background:linear-gradient(180deg,rgba(14,13,10,.94),rgba(6,6,5,.94));border-top:1px solid #D9B45A;border-bottom:1px solid #D9B45A;text-transform:uppercase;letter-spacing:.06em}
.tk[data-style="gold"] .tk-score{color:#F1D184;letter-spacing:0}
.tk[data-style="gold"] .tk-a .tk-logo::before{background:linear-gradient(135deg,#F1D184,#9C7A2B)}
.tk[data-style="gold"] .tk-balls i{background:none;box-shadow:inset 0 0 0 1px rgba(241,209,132,.5);color:#F1D184}
.tk[data-style="gold"] .tk-balls i.c6{background:#F1D184;color:#141008}
/* glass */
.tk[data-style="glass"]{background:linear-gradient(120deg,rgba(124,92,255,.38),rgba(40,30,90,.42));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.25);border-radius:999px;margin:0 2%;padding:0 .6em}
.tk[data-style="glass"]>div+div{border-left:1px solid rgba(255,255,255,.16)}
.tk[data-style="glass"] .tk-a .tk-logo::before{border-radius:50%;background:linear-gradient(135deg,#fff,#b9a6ff)}
/* retro led */
.tk[data-style="led"]{background:#050505;font-family:var(--fm);color:#FFB020;text-shadow:0 0 .45em rgba(255,176,32,.85);border:1px solid #2a1c00;
  background-image:radial-gradient(rgba(255,176,32,.08) 1px,transparent 1.2px);background-size:4px 4px}
.tk[data-style="led"] .tk-score{font-family:var(--fm);letter-spacing:.06em}
.tk[data-style="led"] .tk-a .tk-logo::before{background:#FFB020;border-radius:0;box-shadow:0 0 .6em #FFB020}
.tk[data-style="led"] .tk-balls i{border-radius:0;background:rgba(255,176,32,.15);color:#FFB020}
.tk[data-style="led"] .tk-balls i.c6,.tk[data-style="led"] .tk-balls i.c4{background:#FFB020;color:#050505;text-shadow:none}
.tk[data-style="led"] .tk-balls i.cw{background:#ff3b1f;color:#050505;text-shadow:none}
/* aurora */
.tk[data-style="aurora"]{position:relative;background:rgba(8,12,22,.9);border-radius:.9em;margin:0 1.5%;isolation:isolate}
.tk[data-style="aurora"]::before{content:"";position:absolute;inset:-2px;border-radius:1em;z-index:-1;background:linear-gradient(90deg,#2DE2C6,#7C5CFF,#C6FF4D,#2DE2C6);background-size:300% 100%;animation:aur 6s linear infinite}
.tk[data-style="aurora"]::after{content:"";position:absolute;inset:0;border-radius:.9em;z-index:-1;background:rgba(8,12,22,.95)}
.tk[data-style="aurora"] .tk-score{background:linear-gradient(90deg,#2DE2C6,#C6FF4D);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes aur{to{background-position:300% 0}}

.skins{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.skins .lbl{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--tx3);margin-right:6px}
.skins button{height:38px;padding:0 14px 0 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line2);font-size:13px;font-weight:600;color:var(--tx2);display:flex;align-items:center;gap:8px;transition:background .25s,color .25s,box-shadow .25s}
.skins button:hover{color:var(--tx);box-shadow:inset 0 0 0 1px var(--line3)}
.skins button i{width:16px;height:16px;border-radius:5px;background:var(--sw);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.skins button.on{background:var(--tx);color:#0A0C06;box-shadow:none}
.feed{border-radius:20px;border:1px solid var(--line);background:var(--s1);padding:18px 20px;min-height:208px}
.feed h4{display:flex;justify-content:space-between;font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--tx3);margin-bottom:10px}
.feed ul{list-style:none;display:grid}
.feed li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px;color:var(--tx2);animation:feedin .5s var(--ease)}
.feed li:first-child{border-top:0;color:var(--tx)}
.feed li b{font-family:var(--fm);color:var(--volt);font-size:13px}
.feed li em{font-style:normal;font-weight:800;color:var(--volt)}
.feed li em.r{color:var(--red)}
@keyframes feedin{from{opacity:0;transform:translateY(-8px)}}
.demo-note{font-size:13px;color:var(--tx3)}

/* ── STREAM tutorial ── */
.tut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);position:relative}
.tut-steps{position:relative;padding-left:44px}
.tut-rail{position:absolute;left:11px;top:10vh;bottom:10vh;width:2px;background:var(--line2);border-radius:2px}
.tut-rail i{position:absolute;left:0;top:0;width:100%;height:var(--p,0%);background:var(--volt);border-radius:2px;box-shadow:0 0 12px var(--volt);transition:height .2s linear}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:.25;transition:opacity .6s var(--ease);position:relative}
.step.on{opacity:1}
.step::before{content:"";position:absolute;left:-40px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--line3);transition:all .4s var(--ease)}
.step.on::before{box-shadow:inset 0 0 0 5px var(--volt),0 0 0 6px rgba(198,255,77,.12)}
.step .n{font-family:var(--fm);font-size:13px;letter-spacing:.2em;color:var(--volt)}
.step h3{font-family:var(--fd);font-size:clamp(32px,3.6vw,52px);letter-spacing:-.045em;line-height:.98}
.step p{color:var(--tx2);font-size:17px;max-width:44ch}
.step .note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(255,209,102,.06);border:1px solid rgba(255,209,102,.22);color:var(--tx2);font-size:14px;max-width:46ch}
.step .note svg{width:18px;height:18px;flex:none;color:var(--gold);margin-top:2px}
.tut-stage{position:sticky;top:calc(50vh - 340px);height:680px;display:grid;place-items:center}
.tut-stage .phone{transition:transform 1.1s var(--ease)}
.tut-stage .phone.land{transform:rotate(-90deg) scale(.95)}
.tut-stage .phone .sbar{transition:opacity .4s}
.tut-stage .phone.land .sbar{opacity:0}
.tut-stage .glow{width:460px;height:460px;background:#C6FF4D;opacity:.1}
.scr{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;padding:3.3em .85em 0}
.scr.on{opacity:1;transform:none}
.scr-h{padding:0 .3em .9em}
.scr-h b{display:block;font-family:var(--fd);font-size:1.55em;letter-spacing:-.03em}
.scr-h small{font-size:.74em;color:var(--tx3)}
.yt{display:flex;align-items:center;gap:.8em;padding:.9em;border-radius:1.1em;background:var(--s1);border:1px solid var(--line);font-size:.8em}
.yt .yi{width:2.6em;height:2.6em;border-radius:.8em;background:#1b0e10;display:grid;place-items:center;flex:none}
.yt .yi svg{width:1.4em;height:1.4em}
.yt b{display:block;font-size:1.05em}
.yt small{font-weight:600;color:var(--tx3)}
.yt small.ok{color:var(--volt)}
.scr .lbl{font-size:.58em;font-weight:800;letter-spacing:.16em;color:var(--tx3);margin:1.4em .5em .6em}
.fbtn{display:flex;align-items:center;justify-content:center;gap:.5em;height:3.1em;border-radius:.9em;font-weight:800;font-size:.8em;margin-top:1em}
.fbtn.v{background:var(--volt);color:#0A0C06}
.fbtn.g{background:var(--s2);color:var(--tx2);box-shadow:inset 0 0 0 1px var(--line)}
.gsheet{margin-top:1em;padding:1em;border-radius:1.1em;background:#f4f5f7;color:#1f1f1f;font-size:.74em;box-shadow:0 1em 2em rgba(0,0,0,.5);transform:translateY(1em);opacity:0}
.scr.on .gsheet{animation:sheetup .7s var(--ease) .5s forwards}
@keyframes sheetup{to{transform:none;opacity:1}}
.gsheet .g{display:flex;align-items:center;gap:.5em;font-weight:700;margin-bottom:.7em}
.gsheet .g i{width:1.3em;height:1.3em;border-radius:50%;background:conic-gradient(#4285F4 0 25%,#34A853 0 50%,#FBBC05 0 75%,#EA4335 0)}
.gsheet .acc{display:flex;align-items:center;gap:.6em;padding:.6em;border-radius:.7em;background:#fff;border:1px solid #e3e3e3}
.gsheet .acc span{width:1.9em;height:1.9em;border-radius:50%;background:#C6FF4D;display:grid;place-items:center;font-weight:800;color:#111}
.gsheet .acc small{display:block;color:#666}
.mrow{display:flex;align-items:center;gap:.7em;padding:.85em .9em;border-radius:1em;background:var(--s1);border:1px solid var(--line);font-size:.76em;margin-bottom:.5em;transition:border-color .4s,background .4s}
.mrow .d{width:.55em;height:.55em;border-radius:50%;background:var(--tx3);flex:none}
.mrow .d.l{background:var(--red);box-shadow:0 0 0 .25em rgba(255,77,77,.18)}
.mrow b{display:block}
.mrow small{color:var(--tx3)}
.mrow .rd{margin-left:auto;width:1.2em;height:1.2em;border-radius:50%;box-shadow:inset 0 0 0 .12em var(--line3);flex:none;transition:box-shadow .3s}
.scr.on .mrow.pick{animation:pick .5s var(--ease) .7s forwards}
.scr.on .mrow.pick .rd{animation:pickrd .4s var(--ease) .7s forwards}
@keyframes pick{to{border-color:rgba(198,255,77,.6);background:rgba(198,255,77,.07)}}
@keyframes pickrd{to{box-shadow:inset 0 0 0 .35em var(--volt)}}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.seg span{height:2.6em;border-radius:.8em;display:grid;place-items:center;font-size:.74em;font-weight:700;color:var(--tx3);background:var(--s1);border:1px solid var(--line)}
.seg span.on{color:var(--volt);background:rgba(198,255,77,.08);border-color:rgba(198,255,77,.5)}
.skinrow{display:flex;gap:.5em;overflow:hidden}
.skinrow span{flex:none;width:6.2em;height:3.2em;border-radius:.7em;border:1px solid var(--line2);position:relative;overflow:hidden;background:#0a0d12}
.skinrow span::after{content:"";position:absolute;left:.4em;right:.4em;bottom:.45em;height:.8em;border-radius:.2em;background:var(--sw)}
.skinrow span.on{border-color:var(--volt);box-shadow:0 0 0 .15em rgba(198,255,77,.2)}
.golive{position:relative;margin:2.2em auto 0;width:8.5em;height:8.5em;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#ff7a7a,#e02424);
  color:#fff;font-family:var(--fd);font-weight:700;font-size:1em;letter-spacing:.06em;box-shadow:0 0 0 .6em rgba(255,77,77,.14),0 1.5em 3em -1em rgba(255,40,40,.6)}
.golive::before,.golive::after{content:"";position:absolute;inset:-.6em;border-radius:50%;border:2px solid rgba(255,77,77,.5);animation:ripple 2s var(--ease) infinite}
.golive::after{animation-delay:1s}
@keyframes ripple{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.gl-note{text-align:center;font-size:.72em;color:var(--tx3);margin-top:1.6em}
/* landscape live screen inside a rotated phone */
.scr.live{padding:0;inset:auto;left:50%;top:50%;width:222.5%;height:44.95%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center;opacity:0}
.scr.live.on{opacity:1;transform:translate(-50%,-50%) rotate(90deg)}
.scr.live .cam{position:absolute;inset:0;border-radius:0;border:0;aspect-ratio:auto;box-shadow:none}
.scr.live .endbtn{position:absolute;right:3%;top:50%;transform:translateY(-50%);width:3em;height:3em;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:.6em;font-weight:800;color:#fff;z-index:4}

/* ── BENTO ── */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.b{grid-column:span 3;min-height:360px;padding:28px;display:flex;flex-direction:column;gap:22px}
.b.s2{grid-column:span 2}
.b-vis{flex:1;display:grid;place-items:center;min-height:170px;position:relative}
.b h3{font-family:var(--fd);font-size:24px;letter-spacing:-.03em;line-height:1.1;margin-bottom:8px}
.b p{color:var(--tx2);font-size:15px;line-height:1.55}
.b .k{font-family:var(--fm);font-size:11px;letter-spacing:.16em;color:var(--volt);margin-bottom:10px;display:block}
/* scorecard */
.minisc{width:100%;max-width:440px;font-size:13px;border-radius:16px;background:var(--s1);border:1px solid var(--line);overflow:hidden}
.minisc .h{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.minisc .h b{font-family:var(--fd);font-size:18px}
.minisc .h span{font-family:var(--fd);font-weight:700;font-size:20px}
.minisc table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.minisc th{font-size:10px;letter-spacing:.12em;color:var(--tx3);font-weight:700;text-align:right;padding:8px 10px}
.minisc th:first-child,.minisc td:first-child{text-align:left;padding-left:14px}
.minisc td{padding:7px 10px;text-align:right;border-top:1px solid var(--line);color:var(--tx2);font-family:var(--fm);font-size:12.5px}
.minisc td:first-child{font-family:var(--fb);color:var(--tx);font-weight:600}
.minisc td:first-child small{display:block;color:var(--tx3);font-weight:500;font-size:11px}
.minisc td.r{color:var(--tx);font-weight:700}
.minisc tr{opacity:0;transform:translateX(-10px);transition:all .6s var(--ease)}
.in .minisc tr{opacity:1;transform:none}
.minisc tr:nth-child(2){transition-delay:.1s}.minisc tr:nth-child(3){transition-delay:.2s}.minisc tr:nth-child(4){transition-delay:.3s}
.fow{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line)}
.fow span{font-family:var(--fm);font-size:11px;padding:4px 8px;border-radius:7px;background:rgba(255,77,77,.1);color:#ffa3a3}
.fow span.p{background:var(--volt-a);color:var(--volt)}
/* join code */
.codebox{display:flex;gap:8px}
.codebox span{width:clamp(38px,5vw,54px);height:clamp(50px,6.4vw,68px);border-radius:14px;display:grid;place-items:center;font-family:var(--fm);font-weight:700;font-size:clamp(20px,2.6vw,30px);
  background:var(--s1);box-shadow:inset 0 0 0 1px var(--line2);color:var(--tx);transition:box-shadow .3s,color .3s,transform .3s var(--ease)}
.codebox span.f{box-shadow:inset 0 0 0 1.5px var(--volt),0 0 24px -6px rgba(198,255,77,.6);color:var(--volt);transform:translateY(-3px)}
.codebox span.cur::after{content:"";width:2px;height:40%;background:var(--volt);animation:blink 1s steps(2) infinite}
.joined{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--tx2);display:flex;gap:8px;align-items:center;opacity:0;transition:opacity .4s}
.joined.show{opacity:1}
/* notifications */
.notifs{position:relative;width:100%;max-width:330px;height:190px}
.nt{position:absolute;left:0;right:0;top:0;display:flex;gap:12px;align-items:flex-start;padding:13px 14px;border-radius:18px;background:rgba(28,31,35,.92);border:1px solid var(--line2);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);transition:transform .7s var(--ease),opacity .7s var(--ease);font-size:13px}
.nt img{width:34px;height:34px;border-radius:9px;flex:none}
.nt b{display:block;font-size:13px}
.nt small{color:var(--tx3);font-size:11px;float:right;margin-left:8px}
.nt p{color:var(--tx2);font-size:12.5px;line-height:1.4;margin-top:2px}
.nt[data-pos="0"]{transform:translateY(0) scale(1);opacity:1;z-index:3}
.nt[data-pos="1"]{transform:translateY(66px) scale(.95);opacity:.75;z-index:2}
.nt[data-pos="2"]{transform:translateY(120px) scale(.9);opacity:.4;z-index:1}
.nt[data-pos="out"]{transform:translateY(-40px) scale(1.03);opacity:0;z-index:4}
/* radar */
.radar{position:relative;width:190px;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,transparent 31%,var(--line2) 31.5%,transparent 32.5%,transparent 63%,var(--line2) 63.5%,transparent 64.5%),radial-gradient(circle,rgba(198,255,77,.08),transparent 70%);
  box-shadow:inset 0 0 0 1px var(--line2)}
.radar::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(198,255,77,.45),rgba(198,255,77,0) 22%,transparent);animation:spin 3.2s linear infinite}
.radar .me{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 5px rgba(77,166,255,.2)}
.radar .pt{position:absolute;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--red);animation:ping 1.8s ease-out infinite}
.radar .tag2{position:absolute;font-size:10.5px;font-weight:700;white-space:nowrap;padding:3px 7px;border-radius:7px;background:rgba(16,18,21,.9);border:1px solid var(--line2)}
.radar .tag2 em{font-style:normal;color:var(--tx3);font-weight:600}
/* award */
.award{position:relative;width:230px;padding:18px;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#2b2210,#14110a 60%);border:1px solid rgba(255,209,102,.35)}
.award::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,236,180,.22) 50%,transparent 70%);transform:translateX(-100%);animation:shimmer 3.8s var(--ease) infinite}
@keyframes shimmer{60%,100%{transform:translateX(100%)}}
.award .t{font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--gold)}
.award b{display:block;font-family:var(--fd);font-size:24px;letter-spacing:-.03em;margin:8px 0 2px}
.award small{color:#d9c79a;font-size:12px}
.award .medal{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF1C2,#E0A93B 55%,#9a6b10);display:grid;place-items:center;color:#3b2700;font-weight:800;box-shadow:0 6px 18px rgba(224,169,59,.4)}
.award .row{display:flex;gap:6px;margin-top:14px}
.award .row span{font-size:11px;padding:4px 8px;border-radius:8px;background:rgba(255,209,102,.1);color:var(--gold)}
/* signal / reconnect */
.sig{display:flex;flex-direction:column;align-items:center;gap:18px}
.bars{display:flex;align-items:flex-end;gap:6px;height:64px}
.bars i{width:14px;border-radius:4px;background:var(--volt);animation:bars 6s steps(1) infinite}
.bars i:nth-child(1){height:30%}.bars i:nth-child(2){height:55%;animation-name:bars2}.bars i:nth-child(3){height:78%;animation-name:bars3}.bars i:nth-child(4){height:100%;animation-name:bars3}
@keyframes bars{0%,100%{background:var(--volt)}40%{background:var(--orange)}}
@keyframes bars2{0%,100%{background:var(--volt)}40%,62%{background:var(--s4)}}
@keyframes bars3{0%,100%{background:var(--volt)}30%,70%{background:var(--s4)}}
.sigstate{position:relative;height:34px;min-width:190px}
.sigstate span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;font-family:var(--fm);font-size:12px;font-weight:700;letter-spacing:.12em;animation:sigs 6s steps(1) infinite}
.sigstate .s1{background:rgba(255,77,77,.14);color:#ff8a8a}
.sigstate .s2{background:rgba(255,138,61,.14);color:var(--orange);opacity:0;animation-name:sigs2}
@keyframes sigs{0%,100%{opacity:1}30%,72%{opacity:0}}
@keyframes sigs2{0%,100%{opacity:0}30%,72%{opacity:1}}
.sigstate .s2::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.sigstate .s1::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
/* laws */
.laws{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:440px}
.laws span{padding:8px 13px;border-radius:999px;font-size:13px;font-weight:600;color:var(--tx3);box-shadow:inset 0 0 0 1px var(--line2);animation:law 7.2s var(--ease) infinite;animation-delay:calc(var(--i)*.6s)}
@keyframes law{0%,12%{color:var(--tx3);background:transparent;box-shadow:inset 0 0 0 1px var(--line2)}4%,8%{color:#0A0C06;background:var(--volt);box-shadow:none}}
/* coin */
.coin-wrap{perspective:600px}
.coin{width:110px;height:110px;position:relative;transform-style:preserve-3d;animation:flip 3.6s var(--ease) infinite}
.coin span{position:absolute;inset:0;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);font-weight:700;font-size:30px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:radial-gradient(circle at 35% 30%,#fff4c4,#e5b443 55%,#a77a14);color:#4a3200;box-shadow:inset 0 0 0 6px rgba(255,255,255,.25),inset 0 0 0 8px rgba(120,80,0,.4)}
.coin span:last-child{transform:rotateY(180deg);background:radial-gradient(circle at 35% 30%,#f1ffd0,#b9ee49 55%,#6d9a12);color:#1d2a00}
@keyframes flip{0%{transform:translateY(0) rotateY(0)}35%{transform:translateY(-40px) rotateY(900deg)}55%,100%{transform:translateY(0) rotateY(1080deg)}}
.coin-shadow{width:80px;height:12px;margin:14px auto 0;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(4px);animation:cshadow 3.6s var(--ease) infinite}
@keyframes cshadow{35%{transform:scale(.6);opacity:.4}55%,100%{transform:none;opacity:1}}
/* share card */
.share{position:relative;width:210px;height:250px}
.share .card2{position:absolute;inset:0;border-radius:18px;padding:16px;background:linear-gradient(160deg,#16210a,#0b0e08 70%);border:1px solid rgba(198,255,77,.3);transform:rotate(-6deg);
  box-shadow:0 30px 50px -20px rgba(0,0,0,.9);transition:transform .6s var(--ease)}
.b:hover .share .card2{transform:rotate(0) translateY(-6px)}
.share .card2 small{font-family:var(--fm);font-size:9px;letter-spacing:.16em;color:var(--volt)}
.share .card2 b{display:block;font-family:var(--fd);font-size:20px;margin:10px 0 2px;letter-spacing:-.02em}
.share .card2 .sc{font-family:var(--fd);font-size:30px;font-weight:700;letter-spacing:-.04em;margin-top:12px}
.share .card2 .sc em{font-style:normal;color:var(--tx3);font-size:14px;font-weight:500}
.share .card2 .wm{position:absolute;bottom:14px;left:16px;font-size:12px;white-space:nowrap}
.share .btn-share{position:absolute;right:-12px;bottom:26px;width:44px;height:44px;border-radius:50%;background:var(--volt);display:grid;place-items:center;color:#0A0C06;box-shadow:0 10px 30px -6px rgba(198,255,77,.6)}
.share .btn-share svg{width:18px;height:18px}
/* theme */
.themer{display:flex;gap:10px}
.themer .mini{width:92px;height:150px;border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line2);transition:all .6s var(--ease)}
.themer .mini i{display:block;height:10px;border-radius:4px}
.themer .mini .c{height:46px;border-radius:9px}
.themer .dk{background:#0B0D0F}.themer .dk i{background:#1f2328}.themer .dk .c{background:linear-gradient(160deg,rgba(198,255,77,.25),#14181c)}
.themer .lt{background:#F4F6F1}.themer .lt i{background:#dfe3da}.themer .lt .c{background:linear-gradient(160deg,rgba(130,190,20,.35),#fff)}
.themer .mini i.acc{background:var(--volt);width:60%}
.themer .lt i.acc{background:#7fb51a}
.themer .mini{animation:themer 5s var(--ease) infinite}
.themer .lt{animation-delay:-2.5s}
@keyframes themer{0%,40%{transform:translateY(0);box-shadow:0 0 0 2px var(--volt)}50%,90%{transform:translateY(8px);box-shadow:none;opacity:.55}}

/* ── TOURNAMENTS ── */
.tour{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,72px);align-items:center}
.fmts{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 30px}
.fmts span{padding:9px 14px;border-radius:12px;font-size:13.5px;font-weight:700;background:var(--s1);box-shadow:inset 0 0 0 1px var(--line2)}
.fmts span em{font-style:normal;color:var(--tx3);font-weight:500}
.tl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.tl li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--tx2);line-height:1.45}
.tl li b{display:block;color:var(--tx);font-size:15px;margin-bottom:2px}
.tl .ic{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--volt-a);color:var(--volt)}
.tl .ic svg{width:17px;height:17px}
.tw{border-radius:28px;background:linear-gradient(180deg,var(--s1),#0b0d0f);border:1px solid var(--line2);overflow:hidden;box-shadow:0 60px 120px -60px rgba(198,255,77,.25),0 40px 80px -40px rgba(0,0,0,.9)}
.tw-cover{position:relative;height:120px;background:url("/assets/img/feature.webp") center 40%/cover}
.tw-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,8,.2),rgba(14,16,18,1))}
.tw-head{position:relative;z-index:1;margin-top:-58px;padding:0 22px 14px;display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.tw-head small{font-family:var(--fm);font-size:10px;letter-spacing:.18em;color:var(--volt)}
.tw-head b{display:block;font-family:var(--fd);font-size:24px;letter-spacing:-.03em;line-height:1.1;margin-top:4px}
.tw-head .cd{font-family:var(--fm);font-size:12px;padding:7px 10px;border-radius:10px;background:rgba(0,0,0,.5);border:1px solid var(--line2);white-space:nowrap}
.tw-head .cd b{display:inline;font-family:var(--fm);font-size:12px;color:var(--volt);letter-spacing:.14em}
.tw-tabs{display:flex;gap:4px;margin:0 16px;padding:4px;border-radius:14px;background:var(--bg);border:1px solid var(--line);position:relative}
.tw-tabs button{flex:1;height:38px;border-radius:10px;font-size:13px;font-weight:700;color:var(--tx3);position:relative;z-index:1;transition:color .3s}
.tw-tabs button.on{color:#0A0C06}
.tw-tabs .ind{position:absolute;top:4px;bottom:4px;left:4px;border-radius:10px;background:var(--volt);transition:transform .5s var(--ease),width .5s var(--ease)}
.tw-body{position:relative;height:390px;margin-top:10px}
.tw-p{position:absolute;inset:0;padding:6px 16px 16px;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none;overflow:hidden}
.tw-p.on{opacity:1;transform:none;pointer-events:auto}
.pts{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
.pts th{font-size:10px;letter-spacing:.14em;color:var(--tx3);text-align:right;padding:10px 8px;font-weight:700}
.pts th:nth-child(2),.pts td:nth-child(2){text-align:left}
.pts td{padding:11px 8px;text-align:right;border-top:1px solid var(--line);font-family:var(--fm);color:var(--tx2)}
.pts td:nth-child(2){font-family:var(--fb);color:var(--tx);font-weight:700}
.pts td:first-child{color:var(--tx3);width:36px;white-space:nowrap;text-align:left}
.pts th:first-child{text-align:left}
.pts td.p{color:var(--tx);font-weight:700}
.pts td.nrr.up{color:var(--volt)} .pts td.nrr.dn{color:#ff8a8a}
.pts tr.q td:first-child{color:var(--volt)}
.pts tr.q td:first-child::before{content:"";display:inline-block;width:3px;height:14px;background:var(--volt);border-radius:2px;margin-right:6px;vertical-align:-2px}
.tm{display:inline-flex;align-items:center;gap:9px}
.tm i{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:9px;font-weight:800;color:#0A0C06;background:var(--c)}
.pts tbody tr{opacity:0;transform:translateY(8px)}
.tw-p.on .pts tbody tr{animation:rowin .5s var(--ease) forwards;animation-delay:calc(var(--i)*70ms)}
@keyframes rowin{to{opacity:1;transform:none}}
.qline{font-size:11px;color:var(--tx3);margin-top:10px;display:flex;align-items:center;gap:8px}
.qline::before{content:"";width:3px;height:12px;background:var(--volt);border-radius:2px}
.fx{display:grid;gap:8px}
.fx-r{display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;background:var(--bg);border:1px solid var(--line);font-size:13px}
.fx-r .when{font-family:var(--fm);font-size:11px;color:var(--tx3);line-height:1.3}
.fx-r .vs{display:flex;flex-direction:column;gap:4px}
.fx-r .vs span{display:flex;justify-content:space-between;gap:10px}
.fx-r .vs b{font-family:var(--fm);font-weight:700}
.fx-r .vs .lo{color:var(--tx3)}
.st{font-size:10px;font-weight:800;letter-spacing:.1em;padding:5px 8px;border-radius:8px;white-space:nowrap}
.st.lvv{color:#ff8a8a;background:rgba(255,77,77,.12)}
.st.res{color:var(--volt);background:var(--volt-a)}
.st.up{color:var(--tx2);background:rgba(255,255,255,.05)}
.bk{width:100%;height:100%}
.bk text{font-family:var(--fb);font-size:12px;fill:var(--tx)}
.bk .sm{font-size:10px;fill:var(--tx3);font-family:var(--fm);letter-spacing:.1em}
.bk .box{fill:var(--bg);stroke:var(--line2)}
.bk .win{fill:rgba(198,255,77,.08);stroke:rgba(198,255,77,.55)}
.bk .ln{fill:none;stroke:var(--line3);stroke-width:1.5;stroke-dasharray:240;stroke-dashoffset:240}
.bk .ln.v{stroke:var(--volt)}
.tw-p.on .bk .ln{animation:draw 1.2s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes draw{to{stroke-dashoffset:0}}
.bk .trophy{transform-box:fill-box;transform-origin:center;opacity:0}
.tw-p.on .bk .trophy{animation:troph .8s var(--ease) 1.3s forwards}
@keyframes troph{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
.lb h5{font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--tx3);margin:6px 0 10px;font-weight:700}
.lb-r{display:grid;grid-template-columns:22px 1fr 48px;gap:10px;align-items:center;font-size:13px;margin-bottom:9px}
.lb-r .no{font-family:var(--fm);color:var(--tx3);font-size:12px}
.lb-r .bar{position:relative;height:30px;border-radius:9px;background:var(--bg);border:1px solid var(--line);overflow:hidden;display:flex;align-items:center;padding:0 10px;font-weight:600}
.lb-r .bar::before{content:"";position:absolute;inset:0;width:0;background:linear-gradient(90deg,rgba(198,255,77,.22),rgba(198,255,77,.06));transition:width 1.1s var(--ease)}
.lb-r .bar span{position:relative}
.lb-r .bar span em{font-style:normal;color:var(--tx3);font-weight:500;font-size:11px;margin-left:6px}
.tw-p.on .lb-r .bar::before{width:var(--w)}
.lb-r .v{font-family:var(--fm);font-weight:700;text-align:right}
.lb .wk .bar::before{background:linear-gradient(90deg,rgba(77,166,255,.25),rgba(77,166,255,.06))}

/* ── Gallery ── */
.gal-wrap{position:relative}
.gal{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut))) 40px;scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.gal::-webkit-scrollbar{display:none}
.gal.drag{cursor:grabbing;scroll-snap-type:none}
.gal figure{flex:none;width:clamp(230px,24vw,310px);scroll-snap-align:center;transition:transform .5s var(--ease)}
.gal figure:hover{transform:translateY(-8px)}
.gal img{width:100%;height:auto;aspect-ratio:1/2;object-fit:cover;border-radius:30px;border:1px solid var(--line2);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02);user-select:none;-webkit-user-drag:none;pointer-events:none}
.gal-nav{display:flex;gap:10px}
.gal-nav button{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s,box-shadow .2s}
.gal-nav button:hover{background:var(--volt);color:#0A0C06;box-shadow:none}
.gal-nav svg{width:18px;height:18px}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}

/* ── Spec numbers ── */
.specs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.specs>div{padding:40px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.specs>div:first-child{border-left:0;padding-left:0}
.specs b{font-family:var(--fd);font-size:clamp(44px,5.4vw,76px);letter-spacing:-.05em;line-height:.9}
.specs b sup{font-size:.4em;color:var(--volt);vertical-align:top;margin-left:4px;letter-spacing:0}
.specs p{color:var(--tx2);font-size:14.5px;max-width:26ch}

/* ── FAQ ── */
.faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(32px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:20px}
.faq-g h4{font-family:var(--fm);font-size:11px;letter-spacing:.18em;color:var(--tx3);margin:36px 0 6px}
.faq-g:first-child h4{margin-top:0}
/* ── Responsive ── */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero{padding-top:calc(var(--nav-h) + 48px)}
  .hero-stage{min-height:600px}
  .bento .b,.bento .b.s2{grid-column:span 3}
  .bento .b.full-md{grid-column:span 6}
  .tour{grid-template-columns:1fr}
  .specs{grid-template-columns:1fr 1fr}
  .specs>div:nth-child(3){border-left:0;padding-left:0}
  .specs>div:nth-child(n+3){border-top:1px solid var(--line)}
  .faq{grid-template-columns:1fr}
  .faq-side{position:relative;top:0}
}
@media (max-width:900px){
  .demo-grid{grid-template-columns:1fr}
  .demo-phone{position:relative;top:0;display:flex;flex-direction:column;align-items:center;order:2}
  .cam-col{order:1}
  .tut{grid-template-columns:1fr;gap:0}
  .tut-stage{order:-1;position:sticky;top:64px;height:auto;padding:12px 0 18px;z-index:2;background:linear-gradient(var(--bg) 80%,transparent)}
  .tut-stage .phone{--k:.6}
  .tut-stage .phone.land{transform:rotate(-90deg) scale(.82)}
  .tut-stage .glow{display:none}
  .tut-steps{padding-left:36px}
  .tut-rail{left:7px}
  .step{min-height:64vh;justify-content:flex-end;padding-bottom:9vh}
  .step::before{left:-36px;top:auto;bottom:calc(9vh + 12px)}
  .step p{font-size:16px}
  /* Phones and tablets: drop the GPU-heavy hero effects and shorten the reveal stagger. */
  .beam{display:none}
  .floor{animation:none}
  [data-reveal]{transition-delay:calc(var(--d,0s)/2)}
}
@media (max-width:720px){
  .bento{grid-template-columns:1fr}
  .bento .b,.bento .b.s2,.bento .b.full-md{grid-column:auto;min-height:0}
  .b{padding:22px}
  .tl{grid-template-columns:1fr}
  .tw-body{height:400px}
  .float{font-size:12px;padding:10px 12px;border-radius:14px}
  .float .ic{width:30px;height:30px}
  .f-live{left:0;top:6%}
  .f-code{right:0;top:auto;bottom:6%}
  .f-pom{display:none}
  .f-six{right:0;bottom:30%}
  .hero-stage{min-height:560px}
  .hero-stage .phone{--k:.84}
  .halo{width:380px;height:380px}
  .specs>div{padding:28px 16px 28px 0}
  .specs>div:nth-child(even){padding-left:16px}
  .proof{gap:22px}
  .pts th:nth-child(5),.pts td:nth-child(5){display:none}
  .tm{gap:7px}
}
@media (max-width:380px){
  .hero-stage .phone{--k:.76}
  .demo-phone .phone{--k:.92}
}
@media (max-height:720px) and (max-width:900px){
  .tut-stage .phone{--k:.52}
}