/* Football Kicks: footballkicks.9io.ai
   One stylesheet, no build step. Art is SVG and CSS; the penalty game draws on <canvas> (site.js). */

/* Metric-matched fallbacks, so the swap to Anton and Inter doesn't move the layout */
@font-face{font-family:"Anton Fallback";src:local("Impact");size-adjust:94.5%;ascent-override:124.9%;descent-override:34.9%;line-gap-override:0%}
@font-face{font-family:"Anton Fallback 2";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Roboto Bold"),local("Roboto-Bold");size-adjust:68.4%;ascent-override:172.5%;descent-override:48.2%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Roboto"),local("Roboto-Regular");font-weight:400;size-adjust:106.5%;ascent-override:91%;descent-override:22.7%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Roboto Bold"),local("Roboto-Bold");font-weight:700;size-adjust:102%;ascent-override:95%;descent-override:23.7%;line-gap-override:0%}

:root{
  --bg:#03100a;
  --bg-2:#051a10;
  --pitch:#0b2e1b;
  --lime:#d4ff3f;
  --lime-2:#e8ff9a;
  --lime-glow:rgba(212,255,63,.45);
  --text:#f2f7ef;
  --muted:#a9bcad;
  --faint:#7d9784;
  --line:rgba(242,247,239,.1);
  --line-2:rgba(242,247,239,.2);
  --display:"Anton","Anton Fallback","Anton Fallback 2",Impact,sans-serif;
  --sans:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --wrap:1180px;
  --gutter:clamp(16px,4.6vw,40px);
  --header:64px;
  --r:18px;
  --r-lg:28px;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px);background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ol,ul,figure{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.95}
h2{text-wrap:balance}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
svg{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--bg)}

.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:10px;background:var(--lime);color:var(--bg);font-weight:700;text-decoration:none;transition:top .2s}
.skip:focus{top:12px}

.kicker{display:inline-flex;align-items:center;gap:10px;font:700 .75rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.kicker::before{content:"";width:18px;height:2px;border-radius:2px;background:currentColor}

/* Buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:999px;border:1px solid transparent;font:700 1rem/1 var(--sans);letter-spacing:.005em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s,border-color .2s,box-shadow .2s,color .2s;-webkit-tap-highlight-color:transparent}
.btn svg{width:18px;height:18px;flex:none}
.btn-lg{--h:54px;padding:0 26px;font-size:1.0625rem}
.btn-sm{--h:38px;padding:0 16px;font-size:.875rem}
.btn-lime{background:var(--lime);color:#04130b;box-shadow:0 0 0 1px rgba(212,255,63,.5),0 12px 34px -12px rgba(212,255,63,.7)}
.btn-lime:hover{background:#e2ff7a;transform:translateY(-1px);box-shadow:0 0 0 1px rgba(212,255,63,.6),0 16px 40px -12px rgba(212,255,63,.85)}
.btn-ghost{border-color:var(--line-2);color:var(--text);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:rgba(242,247,239,.4);background:rgba(255,255,255,.07);transform:translateY(-1px)}
.btn-store{position:relative;overflow:hidden;border-color:rgba(212,255,63,.3);border-style:dashed;color:var(--lime-2);background:rgba(212,255,63,.05)}
.btn-store:hover{background:rgba(212,255,63,.09)}
.btn-store[data-appstore="live"]{border-style:solid;background:#f2f7ef;color:#04130b}
.btn:active{transform:translateY(0) scale(.98)}
.btn.nudge{animation:fk-nudge .7s var(--ease) 2}
@keyframes fk-nudge{0%,100%{transform:none}30%{transform:translateY(-3px) scale(1.04)}60%{transform:translateY(0) scale(.99)}}

/* Header */
.site-header{position:sticky;top:0;z-index:50;height:var(--header);border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s}
.site-header.is-stuck{background:rgba(3,16,10,.78);-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);border-color:var(--line)}
.header-in{display:flex;align-items:center;gap:24px;height:100%}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;margin-right:auto;border-radius:8px}
.brand-mark{width:32px;height:32px;flex:none}
.brand-name{font:400 1.3rem/1 var(--display);letter-spacing:.04em;text-transform:uppercase}
.nav{display:none}
@media (min-width:920px){
  .nav{display:flex;gap:28px}
  .nav a{font-size:.9rem;font-weight:600;color:var(--muted);text-decoration:none;transition:color .2s}
  .nav a:hover{color:var(--text)}
}

/* Hero */
.hero{position:relative;isolation:isolate;margin-top:calc(var(--header) * -1);padding:calc(var(--header) + clamp(18px,4vw,48px)) 0 clamp(36px,6vw,88px);overflow:clip}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-sky{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% -6%,rgba(212,255,63,.13),transparent 62%),radial-gradient(120% 75% at 50% -12%,#0f3a22 0%,#082316 40%,var(--bg) 74%)}
.hero-net{position:absolute;inset:0;background-image:linear-gradient(rgba(242,247,239,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(242,247,239,.06) 1px,transparent 1px);background-size:30px 30px;-webkit-mask-image:radial-gradient(60% 55% at 72% 34%,#000 10%,transparent 72%);mask-image:radial-gradient(60% 55% at 72% 34%,#000 10%,transparent 72%)}
.sparks i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(255,255,255,.7);opacity:0}
.sparks i:nth-child(1){left:8%;top:18%}.sparks i:nth-child(2){left:22%;top:9%}.sparks i:nth-child(3){left:37%;top:21%}.sparks i:nth-child(4){left:49%;top:6%}.sparks i:nth-child(5){left:61%;top:15%}
.sparks i:nth-child(6){left:73%;top:8%}.sparks i:nth-child(7){left:86%;top:19%}.sparks i:nth-child(8){left:94%;top:11%}.sparks i:nth-child(9){left:30%;top:30%}.sparks i:nth-child(10){left:80%;top:28%}

.hero-in{display:grid;gap:clamp(28px,6vw,44px);align-items:center}
@media (min-width:960px){.hero-in{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px}}
.hero-copy{position:relative;z-index:2}
.pill{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 12px;border-radius:999px;background:rgba(212,255,63,.08);border:1px solid rgba(212,255,63,.3);color:var(--lime-2);font:600 .8125rem/1 var(--sans);letter-spacing:.01em}
.pill-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 var(--lime-glow)}
.hero h1{margin-top:22px}
.h1-brand{display:block;margin-bottom:.4em;font-size:clamp(1.25rem,2.4vw,1.625rem);letter-spacing:.09em;color:var(--lime);text-shadow:0 0 24px rgba(212,255,63,.35)}
.h1-line{display:block;font-size:clamp(2.75rem,8.6vw,5.5rem);line-height:.92;letter-spacing:.005em;text-wrap:balance}
.lede{margin-top:20px;max-width:33rem;font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.55;color:var(--muted)}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media (max-width:420px){.hero .cta-row .btn{flex:1 1 auto;padding-inline:18px}}

/* The phone (CSS 3D). The poster frame is the default; motion is added further down. */
.hero-art{position:relative;z-index:1}
.rig{position:absolute;top:-1%;z-index:3;display:flex;gap:4px;padding:4px 5px;border-radius:5px;background:linear-gradient(#2c3430,#0c100e);box-shadow:0 0 0 1px rgba(255,255,255,.1),0 8px 20px rgba(0,0,0,.55)}
.rig i{width:clamp(6px,1.1vw,9px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:0 0 5px 1px #fff,0 0 18px 5px rgba(232,255,190,.5)}
.rig::before{content:"";position:absolute;left:50%;top:50%;width:clamp(130px,22vw,230px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(240,255,215,.42),rgba(240,255,215,.12) 40%,transparent);pointer-events:none}
.rig::after{content:"";position:absolute;left:50%;top:60%;width:clamp(300px,46vw,520px);aspect-ratio:.82;transform:translateX(-50%);background:conic-gradient(from 0deg at 50% 0,transparent 0deg 158deg,rgba(236,255,200,.07) 168deg,rgba(255,255,255,.13) 180deg,rgba(236,255,200,.07) 192deg,transparent 202deg 360deg);filter:blur(5px);mix-blend-mode:screen;pointer-events:none}
.rig-l{left:3%;transform:rotate(-16deg)}
.rig-r{right:3%;transform:rotate(16deg)}
.stage{position:relative;width:100%;max-width:660px;margin-inline:auto;aspect-ratio:10/8.4;perspective:1650px;perspective-origin:50% 26%}
.stage-glow{position:absolute;left:4%;right:4%;top:30%;bottom:2%;background:radial-gradient(48% 44% at 50% 56%,rgba(212,255,63,.22),rgba(212,255,63,.05) 55%,transparent 72%);filter:blur(12px)}
.device{position:absolute;left:15%;top:13%;width:70%;aspect-ratio:1.62;transform-style:preserve-3d;transform:rotateX(-28deg) rotateY(-28deg) rotateZ(1.2deg)}
.floor{position:absolute;left:-75%;width:250%;top:100%;height:260%;transform-origin:50% 0;transform:rotateX(90deg) translateY(-24%) translateZ(-9px);background:radial-gradient(18% 13% at 50% 30%,rgba(0,0,0,.7),transparent 100%),radial-gradient(30% 22% at 50% 36%,rgba(212,255,63,.16),transparent 100%),repeating-linear-gradient(90deg,#0f4123 0 6%,#0c3820 6% 12%);-webkit-mask-image:radial-gradient(42% 34% at 50% 34%,#000 25%,transparent 100%);mask-image:radial-gradient(42% 34% at 50% 34%,#000 25%,transparent 100%)}
.half{position:absolute;inset:0;transform-style:preserve-3d;border-radius:7%/11.3%;padding:2.3%;background:linear-gradient(155deg,#4b5550,#1a1f1c 30%,#0c0f0d 70%,#262c29);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.half::before,.half::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.half::before{background:#3a423e;transform:translateZ(-3px)}
.half::after{background:#121614;transform:translateZ(-6px)}
.half-top{transform-origin:50% 100%;transform:rotateX(11deg)}
.half-bottom{transform-origin:50% 0;transform:translateY(100%) rotateX(90deg)}
.glass{position:relative;width:100%;height:100%;border-radius:5.4%/8.8%;overflow:hidden;background:#020604;box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.13),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.05));pointer-events:none}
.half-bottom .glass::after{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%)}
.scr{width:100%;height:100%}
.hinge{position:absolute;left:3.5%;right:3.5%;top:100%;height:4.2%;margin-top:-2.1%;border-radius:999px;background:linear-gradient(180deg,#050706,#59625d 40%,#1d2320 62%,#050706);transform:rotateX(50deg) translateZ(-3px)}

/* Poster frame: shown with reduced motion and in the share image */
.scr .finger{opacity:0}
.scr .trail-core,.scr .trail-glow{stroke-dasharray:180;stroke-dashoffset:0}
.scr .ball-bot{opacity:0;transform:translate(167px,132px)}
.scr .ball-top{transform:translate(244.6px,68.8px) scale(.267)}
.scr .kp{transform-origin:167px 98.5px;transform:translate(-33px,-9px) rotate(-72deg)}
.scr .kp-arm-l{transform-origin:161.8px 87px;transform:rotate(30deg)}
.scr .kp-arm-r{transform-origin:172.2px 87px;transform:rotate(-30deg)}
.scr .kp-shadow{transform-origin:167px 124.4px;transform:translateX(-36px) scaleX(1.5);opacity:.6}
.scr .net-patch{transform-origin:244.6px 68.8px}
.scr .ring{transform-origin:244.6px 68.8px;transform:scale(2.2);opacity:.55}
.scr .goal-txt{font:400 38px/1 var(--display);fill:var(--lime);letter-spacing:.06em;transform-origin:167px 30px}
.scr .flash{opacity:0}
.scr *{transform-box:view-box}

/* Pill pulse, floodlights powering on, sparks and the shot loop */
@media (prefers-reduced-motion:no-preference){
  .pill-dot{animation:fk-pulse 2.2s ease-out infinite}
  .rig{animation:fk-power 1.6s steps(1,end) both}
  .rig-r{animation-delay:.3s}
  .rig::after{animation:fk-beam 6.4s linear infinite}
  .sparks i{animation:fk-spark 3.6s ease-out infinite}
  .sparks i:nth-child(2n){animation-duration:4.4s;animation-delay:1.1s}
  .sparks i:nth-child(3n){animation-duration:5.2s;animation-delay:2.3s}
  .sparks i:nth-child(5n){animation-delay:.6s}

  .stage:not(.is-static){--t:6.4s}
  .stage:not(.is-static) .finger{animation:fk-finger var(--t) linear infinite}
  .stage:not(.is-static) .trail-core,.stage:not(.is-static) .trail-glow{animation:fk-trail var(--t) linear infinite}
  .stage:not(.is-static) .ball-bot{animation:fk-ballbot var(--t) linear infinite}
  .stage:not(.is-static) .ball-top{animation:fk-balltop var(--t) linear infinite}
  .stage:not(.is-static) .kp{animation:fk-keeper var(--t) cubic-bezier(.3,.6,.35,1) infinite}
  .stage:not(.is-static) .kp-in{animation:fk-sway 1.6s ease-in-out infinite alternate}
  .stage:not(.is-static) .kp-arm-l{animation:fk-arm-l var(--t) ease-out infinite}
  .stage:not(.is-static) .kp-arm-r{animation:fk-arm-r var(--t) ease-out infinite}
  .stage:not(.is-static) .kp-shadow{animation:fk-kpshadow var(--t) ease-out infinite}
  .stage:not(.is-static) .net-patch{animation:fk-net var(--t) linear infinite}
  .stage:not(.is-static) .ring{animation:fk-ring var(--t) ease-out infinite}
  .stage:not(.is-static) .goal-txt{animation:fk-goaltxt var(--t) linear infinite}
  .stage:not(.is-static) .flash{animation:fk-flash var(--t) linear infinite}
  .hero.is-paused *,.hero.is-paused *::before,.hero.is-paused *::after{animation-play-state:paused!important}
}
@keyframes fk-pulse{0%{box-shadow:0 0 0 0 rgba(212,255,63,.55)}70%,100%{box-shadow:0 0 0 10px rgba(212,255,63,0)}}
@keyframes fk-power{0%{opacity:0}9%{opacity:.85}13%{opacity:.1}21%{opacity:1}25%{opacity:.3}33%,100%{opacity:1}}
@keyframes fk-beam{0%,29%{opacity:.75}31%{opacity:1}42%,100%{opacity:.75}}
@keyframes fk-spark{0%,86%{opacity:0;transform:scale(.4)}89%{opacity:1;transform:scale(1.3)}96%,100%{opacity:0;transform:scale(.6)}}
@keyframes fk-finger{
  0%,13%{transform:translate(163px,172px) scale(.5);opacity:0}
  15.5%{transform:translate(163px,170px) scale(1);opacity:1}
  17.5%{transform:translate(172.5px,136.5px) scale(1);opacity:1}
  19.5%{transform:translate(186.9px,97px) scale(1);opacity:1}
  21.5%{transform:translate(205.6px,53px) scale(1);opacity:1}
  23.5%{transform:translate(228px,6px) scale(1);opacity:1}
  26%,100%{transform:translate(236px,-10px) scale(.8);opacity:0}
}
@keyframes fk-trail{
  0%,15.4%{stroke-dashoffset:180;opacity:0}
  15.5%{stroke-dashoffset:180;opacity:1}
  17.5%{stroke-dashoffset:145;opacity:1}
  19.5%{stroke-dashoffset:103;opacity:1}
  21.5%{stroke-dashoffset:55;opacity:1}
  23.5%,36%{stroke-dashoffset:0;opacity:1}
  46%{stroke-dashoffset:0;opacity:0}
  46.1%,100%{stroke-dashoffset:180;opacity:0}
}
@keyframes fk-ballbot{
  0%,17.8%{transform:translate(167px,132px) scale(1);opacity:1}
  19.2%{transform:translate(179px,99px) scale(1.12);opacity:1}
  20.6%{transform:translate(196px,58px) scale(1.24);opacity:1}
  22%{transform:translate(214px,18px) scale(1.32);opacity:.6}
  22.8%,94%{transform:translate(222px,-6px) scale(1.36);opacity:0}
  94.1%{transform:translate(167px,132px) scale(.4);opacity:0}
  98%,100%{transform:translate(167px,132px) scale(1);opacity:1}
}
@keyframes fk-balltop{
  0%,19.9%{transform:translate(206px,226px) scale(1);opacity:0}
  20%{transform:translate(206px,224px) scale(1);opacity:1}
  21.8%{transform:translate(215px,168px) scale(.68);opacity:1}
  23.6%{transform:translate(225px,128px) scale(.5);opacity:1}
  25.4%{transform:translate(233.5px,100px) scale(.39);opacity:1}
  27.2%{transform:translate(240px,81px) scale(.31);opacity:1}
  29%{transform:translate(244.6px,68.8px) scale(.267);opacity:1}
  30.6%{transform:translate(246px,67px) scale(.25);opacity:1}
  33%{transform:translate(246.5px,72px) scale(.25);opacity:1}
  39%{transform:translate(247px,115.5px) scale(.25);opacity:1}
  42%{transform:translate(247.5px,108px) scale(.25);opacity:1}
  45%,88%{transform:translate(248px,115.5px) scale(.25);opacity:1}
  91%,100%{transform:translate(248px,115.5px) scale(.25);opacity:0}
}
@keyframes fk-keeper{
  0%,21%{transform:translate(0,0) rotate(0deg)}
  23%{transform:translate(2px,3px) rotate(4deg)}
  30%{transform:translate(-33px,-9px) rotate(-72deg)}
  35%{transform:translate(-39px,6px) rotate(-84deg)}
  39%,87%{transform:translate(-40px,19px) rotate(-90deg)}
  95%,100%{transform:translate(0,0) rotate(0deg)}
}
@keyframes fk-arm-l{0%,22%{transform:rotate(0deg)}29%,88%{transform:rotate(30deg)}95%,100%{transform:rotate(0deg)}}
@keyframes fk-arm-r{0%,22%{transform:rotate(0deg)}29%,88%{transform:rotate(-30deg)}95%,100%{transform:rotate(0deg)}}
@keyframes fk-kpshadow{0%,22%{transform:none;opacity:1}32%{transform:translateX(-30px) scaleX(1.4);opacity:.35}39%,87%{transform:translateX(-40px) scaleX(2);opacity:.8}95%,100%{transform:none;opacity:1}}
@keyframes fk-sway{from{transform:translateX(-1.6px)}to{transform:translateX(1.6px)}}
@keyframes fk-net{0%,29%{transform:scale(1)}30.2%{transform:scale(.86)}31.6%{transform:scale(1.07)}33%{transform:scale(.95)}34.6%{transform:scale(1.025)}36.4%{transform:scale(.995)}38%,100%{transform:scale(1)}}
@keyframes fk-ring{0%,29%{transform:scale(.4);opacity:0}29.6%{transform:scale(.7);opacity:1}37%,100%{transform:scale(3.6);opacity:0}}
@keyframes fk-goaltxt{0%,30%{transform:scale(.4);opacity:0}32%{transform:scale(1.14);opacity:1}33.6%{transform:scale(.96);opacity:1}35%,70%{transform:scale(1);opacity:1}76%,100%{transform:scale(1.05);opacity:0}}
@keyframes fk-flash{0%,29%{opacity:0}29.8%{opacity:.26}35%,100%{opacity:0}}

/* Ticker */
.ticker-wrap{position:relative;z-index:3;overflow:clip;padding-block:18px;margin-block:-18px}
.ticker{background:var(--lime);color:#04130b;transform:rotate(-1.5deg);margin-inline:-3%;box-shadow:0 18px 60px -18px rgba(212,255,63,.5)}
.ticker-track{display:flex;width:max-content}
.ticker span{display:flex;align-items:center;gap:30px;padding:14px 0 14px 30px;font:400 clamp(1.125rem,2.4vw,1.625rem)/1 var(--display);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.ticker span::after{content:"";width:9px;height:9px;background:currentColor;transform:rotate(45deg)}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:fk-ticker 34s linear infinite}}
@keyframes fk-ticker{to{transform:translateX(-50%)}}

/* Sections */
.section{position:relative;padding-block:clamp(64px,9vw,120px)}
.section-head{max-width:44rem}
.section-head h2{margin-top:16px;font-size:clamp(2.5rem,6.6vw,4.5rem)}
.section-head > p:not(.kicker){margin-top:18px;font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--muted)}

/* Fold */
.fold{background:radial-gradient(60% 50% at 15% 30%,rgba(212,255,63,.06),transparent 70%)}
.fold-grid{display:grid;gap:20px;margin-top:clamp(36px,5vw,56px)}
@media (min-width:960px){.fold-grid{grid-template-columns:1.1fr 1fr;align-items:center;gap:48px}}
.diagram{position:relative;border-radius:var(--r-lg);border:1px solid var(--line);background:radial-gradient(70% 70% at 30% 25%,rgba(212,255,63,.08),transparent 65%),linear-gradient(180deg,#082016,#04130b);padding:clamp(14px,3vw,30px);overflow:hidden}
.diagram::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,247,239,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(242,247,239,.04) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(70% 70% at 40% 40%,#000,transparent 80%);mask-image:radial-gradient(70% 70% at 40% 40%,#000,transparent 80%)}
.diagram svg{position:relative;width:100%;height:auto}
.dg-h{font:400 25px/1 var(--display);letter-spacing:.05em;fill:var(--text)}
.dg-p{font:500 17px/1 var(--sans);fill:var(--muted)}
.dg-c{text-anchor:middle}
.steps{list-style:none;padding:0;display:grid;gap:12px;counter-reset:step}
.step{position:relative;padding:22px 22px 22px 78px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012))}
.step::before{counter-increment:step;content:"0" counter(step);position:absolute;left:22px;top:20px;font:400 2rem/1 var(--display);color:var(--lime)}
.step h3{font-size:1.5rem;letter-spacing:.02em}
.step p{margin-top:8px;color:var(--muted)}

/* Swipe to shoot */
.swipe{background:linear-gradient(180deg,transparent,rgba(13,52,30,.55) 25%,rgba(13,52,30,.55) 75%,transparent)}
.swipe::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 80px,transparent 80px 160px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);pointer-events:none}
.cards{display:grid;gap:16px;margin-top:clamp(36px,5vw,56px)}
@media (min-width:760px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px 14px 24px;border-radius:var(--r-lg);border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.card-art{width:100%;height:auto;aspect-ratio:16/10;border-radius:16px;margin-bottom:8px}
.card h3,.card p{padding-inline:8px}
.card h3{font-size:1.75rem;letter-spacing:.03em}
.card p{color:var(--muted)}
.art-label{font:700 11px/1 var(--sans);letter-spacing:.16em;fill:var(--faint)}
.aim-line{filter:drop-shadow(0 0 6px rgba(212,255,63,.7))}
.gauge-fill{stroke-dasharray:100}
@media (prefers-reduced-motion:no-preference){
  .card.is-pending .needle{transform:rotate(-140deg)}
  .card.is-pending .gauge-fill{stroke-dashoffset:100}
  .card.is-pending .bars rect{transform:scaleY(0)}
  .needle{transform-box:view-box;transform-origin:160px 160px;transition:transform 1.3s var(--ease) .35s}
  .gauge-fill{transition:stroke-dashoffset 1.3s var(--ease) .35s}
  .bars rect{transform-box:fill-box;transform-origin:50% 100%;transition:transform .6s var(--ease)}
  .bars rect:nth-child(2){transition-delay:.06s}.bars rect:nth-child(3){transition-delay:.12s}.bars rect:nth-child(4){transition-delay:.18s}
  .bars rect:nth-child(5){transition-delay:.24s}.bars rect:nth-child(6){transition-delay:.3s}.bars rect:nth-child(7){transition-delay:.36s}.bars rect:nth-child(8){transition-delay:.42s}
  .dg-arc{animation:fk-march 1.2s linear infinite}
}
@keyframes fk-march{to{stroke-dashoffset:-24}}

/* Take a penalty */
.play{background:radial-gradient(50% 45% at 72% 55%,rgba(212,255,63,.1),transparent 70%)}
.play-grid{display:grid;gap:28px;grid-template-areas:"head" "game" "help"}
.play-head{grid-area:head}
.game{grid-area:game}
.play-help{grid-area:help}
@media (min-width:960px){
  .play-grid{grid-template-columns:minmax(0,1fr) minmax(0,470px);grid-template-areas:"head game" "help game";column-gap:72px;row-gap:0;align-content:center}
  .play-head{align-self:end}
  .play-help{align-self:start;padding-top:4px}
}
.play-head h2{margin-top:16px;font-size:clamp(2.5rem,6.6vw,4.5rem)}
.play-lede{margin-top:18px;font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--muted);max-width:32rem}
.howto{list-style:none;padding:0;margin-top:22px;display:grid;gap:12px}
.howto li{display:flex;align-items:center;gap:14px;font-weight:500}
.howto-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(212,255,63,.12);border:1px solid rgba(212,255,63,.35);color:var(--lime);font:400 .95rem/1 var(--display)}
.keys{margin-top:22px;color:var(--muted);font-size:.9375rem}
kbd{display:inline-block;min-width:1.7em;padding:.15em .45em;border-radius:6px;border:1px solid var(--line-2);border-bottom-width:2px;background:rgba(255,255,255,.05);font:600 .8125rem/1.3 var(--sans);text-align:center;color:var(--text)}

.game{position:relative;width:100%;max-width:470px;margin-inline:auto}
.game-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;padding:0 6px}
.hud-score{display:flex;align-items:baseline;gap:8px;font:400 1.75rem/1 var(--display);letter-spacing:.03em}
.hud-label{font:700 .75rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hud-num{color:var(--faint)}
.hud-num b{font-weight:400;color:var(--lime)}
.hud-shots{list-style:none;padding:0;display:flex;gap:8px}
.hud-shots li{position:relative;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(242,247,239,.32);transition:background-color .3s,border-color .3s,transform .3s var(--ease)}
.hud-shots li.is-next{border-color:var(--lime);transform:scale(1.12)}
.hud-shots li.is-goal{background:var(--lime);border-color:var(--lime);box-shadow:0 0 12px rgba(212,255,63,.6)}
.hud-shots li.is-miss{border-color:rgba(242,247,239,.25);background:rgba(242,247,239,.08)}
.hud-shots li.is-miss::before,.hud-shots li.is-miss::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1.6px;border-radius:2px;background:rgba(242,247,239,.6);transform:translate(-50%,-50%) rotate(45deg)}
.hud-shots li.is-miss::after{transform:translate(-50%,-50%) rotate(-45deg)}
.game-device{position:relative;padding:9px;border-radius:38px;background:linear-gradient(150deg,#47504b,#161b18 22%,#0b0e0c 70%,#2a312d);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 50px 90px -40px rgba(0,0,0,.9),0 0 140px -50px rgba(212,255,63,.35)}
.game-screen{position:relative;aspect-ratio:3/4;border-radius:30px;overflow:hidden;background:#04110a;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.game-screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;outline:none}
.game-screen:has(canvas:focus-visible)::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--lime);pointer-events:none}
.game-pad{position:absolute;left:0;right:0;bottom:0;top:50.6%;touch-action:none;cursor:grab}
.game-pad.is-dragging{cursor:grabbing}
.game-pad.is-off{touch-action:pan-y;cursor:default}
.game-noscript{position:absolute;inset:auto 0 45%;text-align:center;color:var(--muted)}
.game-end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:28px;text-align:center;background:radial-gradient(75% 60% at 50% 42%,rgba(3,16,10,.6),rgba(3,16,10,.9));-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.game-end.is-on{opacity:1;visibility:visible}
.end-kicker{font:700 .75rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.end-score{font:400 clamp(4.5rem,20cqw,6.5rem)/.9 var(--display);color:var(--faint)}
.end-score b{font-weight:400;color:var(--text)}
.game-screen{container-type:inline-size}
.end-line{max-width:20rem;font-size:1.0625rem;font-weight:500}
.game-end .btn{margin-top:6px}
.end-link{margin-top:4px;font-size:.875rem;color:var(--muted)}
.end-link:hover{color:var(--text)}
.game-end .end-store{margin-top:0;--h:44px;font-size:.9375rem}
.end-left{font-size:.8125rem;color:var(--muted);min-height:1.2em}
.game-end.is-limit .end-score,.game-end.is-limit [data-again]{display:none}
.game-end.is-limit .end-store{border-style:solid;background:var(--lime);color:#04130b;--h:52px;font-size:1rem}
.game-end.is-limit .end-line{font-size:1.125rem}
.hud-time{margin:0;padding:5px 10px;border-radius:999px;border:1px solid var(--line-2,rgba(242,247,239,.18));font:600 .75rem/1 var(--sans);letter-spacing:.04em;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.hud-time.is-low{border-color:var(--lime);color:var(--lime)}

/* Coming soon */
.launch-card{position:relative;display:grid;gap:40px;padding:clamp(28px,5.5vw,72px);border-radius:36px;overflow:hidden;border:1px solid rgba(212,255,63,.24);background:radial-gradient(80% 70% at 100% 0%,rgba(212,255,63,.16),transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(255,255,255,.04),transparent 70%),linear-gradient(160deg,#0b2b19,#04140c 65%)}
.launch-card::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(242,247,239,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(242,247,239,.045) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(60% 80% at 90% 10%,#000,transparent 75%);mask-image:radial-gradient(60% 80% at 90% 10%,#000,transparent 75%);pointer-events:none}
@media (min-width:960px){.launch-card{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:56px}}
@media (max-width:560px){
  .launch-card{padding:28px 20px 30px;border-radius:28px}
  .launch-copy .cta-row .btn{width:100%;padding-inline:16px;white-space:normal;text-align:center}
}
.launch-copy{position:relative}
.launch-copy h2{margin-top:16px;font-size:clamp(2.5rem,6.2vw,4.25rem)}
.launch-copy > p:not(.kicker){margin-top:16px;max-width:32rem;font-size:clamp(1.0625rem,1.5vw,1.1875rem);color:var(--muted)}
.launch-copy .cta-row{margin-top:30px}
.store-note{min-height:1.6em;margin-top:14px!important;font-size:.9375rem!important;color:var(--lime-2)!important;opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.store-note.is-on{opacity:1;transform:none}

.board{position:relative;min-width:0;padding:22px 18px 24px;border-radius:22px;background:#020805;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 0 7px #0b120e,inset 0 0 0 8px rgba(255,255,255,.06),0 30px 60px -30px rgba(0,0,0,.9);text-align:center;font-family:var(--display);text-transform:uppercase;overflow:hidden}
.board::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 58%,rgba(2,8,5,.5) 60%) 0 0/3px 3px;pointer-events:none}
.board-top{display:flex;align-items:center;justify-content:center;gap:10px;font-size:1rem;letter-spacing:.22em;color:#f2f7ef;text-shadow:0 0 10px rgba(255,255,255,.55)}
.board-dot{width:9px;height:9px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime)}
.board-match{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,22px);margin-top:14px;font-size:clamp(2.2rem,9.5vw,4rem);line-height:1;letter-spacing:.04em;color:var(--lime);text-shadow:0 0 18px rgba(212,255,63,.65)}
.board-match i{font-style:normal;font-size:.5em;color:#f2f7ef;text-shadow:0 0 10px rgba(255,255,255,.5)}
.board-ko{margin-top:14px;font-size:1.05rem;letter-spacing:.18em;color:#f2f7ef;text-shadow:0 0 10px rgba(255,255,255,.45)}
.board-ko b{font-weight:400;color:var(--lime);text-shadow:0 0 12px rgba(212,255,63,.7)}
@media (prefers-reduced-motion:no-preference){
  .board-dot{animation:fk-blink 1.4s steps(1,end) infinite}
  .board-ko b{animation:fk-flicker 5s steps(1,end) infinite}
}
@keyframes fk-blink{50%{opacity:.15}}
@keyframes fk-flicker{0%,100%{opacity:1}92%{opacity:.35}94%{opacity:1}96%{opacity:.5}}

/* FAQ */
.faq-grid{display:grid;gap:clamp(28px,4vw,40px)}
@media (min-width:960px){
  .faq-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start}
  .faq .section-head{position:sticky;top:calc(var(--header) + 40px)}
}
.faq .section-head a{color:var(--lime-2)}
.faq-list{display:grid;gap:12px}
.faq-item{padding:24px 24px 26px;border-radius:var(--r);border:1px solid var(--line);background:rgba(255,255,255,.025)}
.faq-item h3{font:700 1.125rem/1.35 var(--sans);text-transform:none;letter-spacing:0}
.faq-item p{margin-top:10px;color:var(--muted)}
.faq-item a{color:var(--lime-2)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:48px 0 calc(40px + env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--bg),#020a06)}
.footer-in{display:grid;gap:28px}
@media (min-width:860px){.footer-in{grid-template-columns:minmax(0,1fr) auto;align-items:start}.footer-legal{grid-column:1/-1}}
.footer-brand p{margin-top:12px;color:var(--muted);max-width:24rem}
.footer-nav{display:flex;flex-wrap:wrap;gap:10px 24px;padding-top:4px}
@media (min-width:860px){.footer-nav{justify-content:flex-end}}
.footer-nav a{color:var(--muted);text-decoration:none;font-weight:500;font-size:.9375rem}
.footer-nav a:hover{color:var(--text)}
.footer-legal{display:grid;gap:6px;padding-top:24px;border-top:1px solid var(--line);font-size:.875rem;color:var(--faint)}
.footer-legal a{color:var(--text);font-weight:600}

/* Email sheet */
.mailsheet{width:min(420px,calc(100% - 32px));padding:0;border:1px solid var(--line-2);border-radius:24px;background:#0a1d13;color:var(--text);box-shadow:0 40px 80px -20px rgba(0,0,0,.8)}
.mailsheet::backdrop{background:rgba(1,6,3,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ms-in{display:grid;gap:10px;padding:26px 22px 20px}
.ms-title{font:400 1.75rem/1 var(--display);text-transform:uppercase;letter-spacing:.03em}
.ms-text{margin:2px 0 8px;color:var(--muted)}
.ms-text b{color:var(--text)}
.ms-btn{display:flex;align-items:center;justify-content:center;min-height:50px;border-radius:14px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);font-weight:600;text-decoration:none;cursor:pointer}
.ms-btn:hover{background:rgba(255,255,255,.08)}
.ms-primary{background:var(--lime);border-color:var(--lime);color:#04130b}
.ms-primary:hover{background:#e2ff7a}
.ms-btn.is-done{border-color:var(--lime);color:var(--lime)}
.ms-close{justify-self:center;margin-top:4px;padding:8px 14px;border:0;border-radius:10px;background:none;color:var(--muted);font-weight:600;cursor:pointer}
@media (max-width:560px){
  .mailsheet{margin:auto 0 0;width:100%;max-width:100%;border-radius:24px 24px 0 0;border-bottom:0}
  .ms-in{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* Scroll reveal: site.js only hides things that start below the fold */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.is-pending{opacity:0;transform:translateY(26px)}
.steps .reveal:nth-child(2),.cards .reveal:nth-child(2),.faq-list .reveal:nth-child(2n){transition-delay:.08s}
.steps .reveal:nth-child(3),.cards .reveal:nth-child(3){transition-delay:.16s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.is-pending{opacity:1;transform:none;transition:none}
  .btn,.btn:hover{transition:none;transform:none}
}