/* GOALCUT extras on top of home.css: code-drawn pitch backdrop and the phone "goal" scene. */
*{box-sizing:border-box}
html{background:#05080A}
body.home{--bg:#05080A;--bg2:#0A100C}
.home .h-logo i{color:var(--tq)}
.pitch-bg{position:absolute;inset:0;z-index:-3;overflow:hidden;background:#06120A}
.pitch-bg .turf{position:absolute;inset:-10% -20%;transform:perspective(900px) rotateX(58deg) translateY(8%);transform-origin:50% 100%;
  background:repeating-linear-gradient(90deg,#0c2a14 0 9%,#0f3318 9% 18%);animation:turf 30s linear infinite}
@keyframes turf{to{background-position:400px 0}}
.pitch-bg svg{position:absolute;inset:-10% -20%;width:140%;height:120%;transform:perspective(900px) rotateX(58deg) translateY(8%);transform-origin:50% 100%;opacity:.55}
.pitch-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 70% at 72% 40%,rgba(5,8,10,.1),rgba(5,8,10,.8) 70%),
  linear-gradient(90deg,rgba(5,8,10,.97) 0%,rgba(5,8,10,.75) 40%,rgba(5,8,10,.3) 72%,rgba(5,8,10,.75) 100%),
  linear-gradient(180deg,rgba(5,8,10,.6) 0%,rgba(5,8,10,0) 30%,#05080A 100%)}
.floodlight{position:absolute;z-index:-2;top:-30%;width:40vw;height:90vh;background:radial-gradient(ellipse at top,rgba(220,255,230,.18),transparent 60%);filter:blur(10px);pointer-events:none;animation:flick 6s ease-in-out infinite alternate}
.floodlight.l{left:-5%;transform:rotate(18deg)}.floodlight.r{right:-5%;transform:rotate(-18deg);animation-delay:-3s}
@keyframes flick{to{opacity:.6}}

/* phone scene: a ball curls into the top corner, the net ripples, GOAL slams in */
.scene{position:relative;width:100%;height:100%;border-radius:34px;overflow:hidden;background:linear-gradient(180deg,#0a2412,#0f3a1c 55%,#0b2a14)}
.scene .stripes{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.035) 0 12%,transparent 12% 24%)}
.scene .goal{position:absolute;left:14%;right:14%;top:20%;height:20%;border:3px solid #fff;border-bottom:0;border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 10px),repeating-linear-gradient(-45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 10px);animation:net 4s ease-in-out infinite}
@keyframes net{0%,46%,70%,100%{transform:none}52%{transform:scale(1.04,1.08) translateY(-3px)}58%{transform:scale(.98,1.02)}}
.scene .box{position:absolute;left:6%;right:6%;top:40%;height:22%;border:2px solid rgba(255,255,255,.5);border-top:0}
.scene .spot{position:absolute;left:50%;top:70%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgba(255,255,255,.6)}
.scene .ball{position:absolute;width:22px;height:22px;margin:-11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 35%,#ddd 60%,#999);box-shadow:0 0 0 2px rgba(0,0,0,.15),0 6px 10px rgba(0,0,0,.4);
  offset-path:path("M 140 470 C 70 380, 60 250, 230 190");animation:shot 4s cubic-bezier(.3,.6,.4,1) infinite}
@keyframes shot{0%,10%{offset-distance:0%;transform:scale(1.1)}48%{offset-distance:100%;transform:scale(.55)}100%{offset-distance:100%;transform:scale(.55)}}
.scene .hook{position:absolute;top:13.5%;left:50%;transform:translateX(-50%);background:#FFD43D;color:#111;font:800 1.05rem/1 var(--disp);letter-spacing:-.01em;padding:8px 12px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.4)}
.scene .bang{position:absolute;left:0;right:0;top:50%;text-align:center;font:800 3.6rem/1 var(--disp);letter-spacing:-.04em;color:#fff;text-shadow:0 0 30px rgba(59,255,138,.9),0 4px 0 #0a3a1a;opacity:0;animation:bang 4s ease-in-out infinite}
@keyframes bang{0%,48%{opacity:0;transform:scale(2.4)}54%{opacity:1;transform:scale(1)}82%{opacity:1;transform:scale(1)}92%,100%{opacity:0;transform:scale(.9)}}
.scene .score{position:absolute;top:8.5%;left:50%;transform:translateX(-50%);display:flex;gap:6px;align-items:center;font:700 .62rem var(--body);color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:6px}
.scene .score b{display:inline-block;min-width:22px;text-align:center;background:#fff;color:#111;border-radius:3px}
.scene .score b{display:inline-grid;min-width:34px;padding:0 3px}.scene .score b span{grid-area:1/1}
.scene .score .s1{opacity:0;animation:sc 4s steps(1) infinite}.scene .score .s0{animation:sc0 4s steps(1) infinite}
@keyframes sc{0%{opacity:0}52%{opacity:1}}@keyframes sc0{0%{opacity:1}52%{opacity:0}}
.scene .wm{position:absolute;right:6%;bottom:4%;font:800 .7rem var(--disp);color:#fff;opacity:.85}.scene .wm i{font-style:normal;color:var(--tq)}
.scene .flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 4s ease-out infinite;pointer-events:none}
@keyframes flash{0%,48%{opacity:0}50%{opacity:.55}62%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.scene .bang{opacity:1}.scene .ball{offset-distance:100%}}

/* waveform card colors for crowd roars */
.home .wave i.hit{background:var(--tq);box-shadow:0 0 12px var(--tq)}
.home .beta{display:inline-block;padding:3px 9px;border-radius:999px;font:700 .7rem var(--body);letter-spacing:.1em;background:rgba(59,255,138,.14);color:var(--tq)}
.home .legal{max-width:760px;margin:0 auto;padding:140px 20px 80px;color:var(--mute);line-height:1.75}
.home .legal h1{color:var(--ink);font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:10px}
.home .legal h2{color:var(--ink);font-size:1.4rem;margin:2em 0 .4em}
.home .legal a{color:var(--tq)}
.home .rot span{white-space:nowrap}