/* ============================================================
   PlayerLynk — Direction B ("The Athlete") dark redesign
   Cinematic deep-navy theme · glass data panels · brand blue
   Keeps all copy + data from the original site; elevates the
   execution: smoother scroll, premium matrix + lineup, glass
   readouts wired to a wireframe shooter.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#070e1b;
  --bg-grad:radial-gradient(135% 115% at 74% -8%, #11253f 0%, #0a1626 50%, #070e1b 100%);
  --panel:rgba(12,20,37,.62);
  --panel-solid:#0d182b;
  --raise:rgba(22,38,64,.55);
  --line:rgba(120,180,255,.13);
  --line-2:rgba(120,180,255,.22);

  /* ink */
  --ink:#eef4ff;
  --muted:#aebfd6;
  --muted2:#7588a0;

  /* brand + signals */
  --blue:#008afc;
  --blue-l:#5ab0ff;
  --blue-d:#0066cc;
  --green:#3fcf95;
  --green-d:#0e8a5f;
  --amber:#e6a93f;
  --red:#ff7a70;
  --gold:#ffd27a;

  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1180px;
  --r:16px;
  --r-lg:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  background-image:var(--bg-grad);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}
/* faint starfield/grid texture so dark fields never read flat */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(150,195,255,.35), transparent 60%),
    radial-gradient(1px 1px at 70% 18%, rgba(150,195,255,.25), transparent 60%),
    radial-gradient(1px 1px at 85% 65%, rgba(150,195,255,.22), transparent 60%),
    radial-gradient(1px 1px at 38% 78%, rgba(150,195,255,.2), transparent 60%);
  opacity:.6;
}
main,header,footer,section{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;letter-spacing:-.035em;font-weight:700;line-height:1.04}
p{margin:0}
.mono{font-family:var(--mono)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- glow utility ---------- */
.glow{color:var(--blue-l);text-shadow:0 0 30px rgba(90,176,255,.45)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{position:sticky;top:0;z-index:60;padding:16px 0;
  backdrop-filter:saturate(1.2) blur(2px);}
.header-pill{
  position:relative;
  display:flex;align-items:center;gap:22px;height:62px;padding:0 14px 0 20px;
  background:rgba(10,18,32,.66);backdrop-filter:blur(14px);
  border:1px solid var(--line-2);border-radius:999px;
  box-shadow:0 18px 50px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.04);
}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:18px;font-style:italic;letter-spacing:-.02em}
.brand b{color:var(--blue-l);font-style:italic}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 12px var(--blue)}
.nav{display:flex;gap:2px;margin-right:auto}
.nav a{padding:8px 13px;border-radius:10px;font-size:14px;color:var(--muted);transition:.18s var(--ease)}
.nav a:hover{color:#fff;background:rgba(120,180,255,.08)}
.social{display:flex;gap:9px;align-items:center}
.social a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--blue-l);
  border-radius:9px;transition:.18s var(--ease)}
.social a:hover{color:#fff;background:rgba(0,138,252,.16);transform:translateY(-1px)}
.social svg{width:20px;height:20px;fill:currentColor}

/* hamburger toggle (mobile only) */
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;flex:0 0 auto;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:12px;cursor:pointer}
.nav-toggle span{display:block;width:19px;height:2px;border-radius:2px;background:#eaf2ff;transition:.22s var(--ease)}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* CTA shown only inside the open mobile menu */
.nav-cta-m{display:none}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{font-family:inherit;font-weight:600;border:none;cursor:pointer;border-radius:13px;
  font-size:15px;padding:14px 22px;transition:.2s var(--ease);display:inline-flex;align-items:center;gap:8px}
.btn-sm{padding:11px 16px;font-size:13.5px;border-radius:11px}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 14px 34px -12px rgba(0,138,252,.8)}
.btn-primary:hover{background:#1b97ff;transform:translateY(-2px);box-shadow:0 20px 42px -12px rgba(0,138,252,.95)}
.btn-secondary{background:rgba(255,255,255,.06);color:#fff;border:1px solid var(--line-2)}
.btn-secondary:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.header-cta{font-family:inherit;font-weight:600;border:none;cursor:pointer;border-radius:11px;font-size:13.5px;
  padding:11px 17px;background:var(--blue);color:#fff;box-shadow:0 10px 26px -12px rgba(0,138,252,.8);transition:.2s var(--ease)}
.header-cta:hover{background:#1b97ff;transform:translateY(-1px)}

/* ============================================================
   GLASS CARD
   ============================================================ */
.card{
  background:var(--panel);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 28px 60px -36px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
.chip{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12px;font-weight:600;border-radius:8px;padding:5px 10px}
.chip-green{background:rgba(63,207,149,.16);color:var(--green)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-l)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:46px 0 34px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,205,110,.1);
  border:1px solid rgba(255,205,110,.42);color:var(--gold);border-radius:999px;padding:7px 15px;font-size:12.5px;margin-bottom:24px}
.eyebrow-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold)}
.hero h1{font-size:clamp(40px,5vw,60px);margin-bottom:20px}
.hero-sub{font-size:18px;line-height:1.55;color:var(--muted);max-width:31em;margin-bottom:30px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}

.trust-strip{display:flex;gap:24px;margin-top:36px;flex-wrap:wrap}
.trust-pill{display:flex;align-items:baseline;gap:0;font-family:var(--mono);font-size:13px;color:var(--muted)}
.trust-strip{align-items:center}
.trust-sep{width:1px;height:30px;background:var(--line-2)}
.trust-pill b{color:#fff;font-size:24px;font-weight:600;margin-right:7px}

/* hero figure — wireframe shooter wired to glass chips */
.hero-figure{display:flex;align-items:center;justify-content:center;width:100%}
.shooter-stage{position:relative;width:100%;max-width:470px;min-width:260px;aspect-ratio:1}
.shooter-glow{position:absolute;left:50%;top:44%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(0,138,252,.55),transparent 66%);filter:blur(46px);
  animation:breathe 5s var(--ease) infinite}
.shooter-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(0,138,252,.5)) brightness(1.28) saturate(1.25);animation:floaty 7s var(--ease) infinite}
.wire-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.chip-card{position:absolute;width:158px;background:rgba(10,16,30,.66);backdrop-filter:blur(10px);
  border:1px solid rgba(90,176,255,.3);border-radius:13px;padding:11px 13px;
  box-shadow:0 18px 50px -20px rgba(0,0,0,.8);animation:floaty 7s var(--ease) infinite}
.chip-card .ck{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-l);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.chip-card .cv{display:flex;align-items:baseline;gap:6px;font-family:var(--mono)}
.chip-card .cv .big{font-size:21px;font-weight:600;color:#eaf2ff}
.chip-card .cv .u{font-size:10px;color:var(--muted2)}
.chip-card .tag{font-family:var(--mono);font-size:9px;font-weight:600;border-radius:6px;padding:2px 6px}
.tag-elite{background:rgba(63,207,149,.18);color:var(--green)}
.tag-watch{background:rgba(230,169,63,.2);color:var(--amber)}
.mini-track{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:8px}
.mini-track i{display:block;height:100%;border-radius:3px}

/* ============================================================
   SECTION SCAFFOLD
   ============================================================ */
.act-intro{padding:64px 0 30px;text-align:center;max-width:780px;margin:0 auto}
.act-tag{display:inline-flex;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  border-radius:999px;padding:7px 15px;margin-bottom:18px}
.act-tag.blue{background:rgba(0,138,252,.14);color:var(--blue-l);border:1px solid rgba(90,176,255,.3)}
.act-tag.green{background:rgba(63,207,149,.14);color:var(--green);border:1px solid rgba(63,207,149,.3)}
.act-intro h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:14px}
.act-intro p{color:var(--muted2);font-family:var(--mono);font-size:13px;letter-spacing:.04em}

h2.section{font-size:clamp(26px,3.4vw,34px)}
.frag{display:grid;gap:30px;padding:30px 0}

/* ============================================================
   ACT 1 — scroll-scan (sticky figure + fragments)
   ============================================================ */
.act1{padding:10px 0 0}
.act1-stage{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:start;position:relative}
.figure-pin{position:sticky;top:96px;height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center}
.figure{position:relative;width:100%;max-width:430px;aspect-ratio:.82;transition:transform .1s linear,opacity .1s linear}
.figure-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 16px rgba(0,138,252,.45)) brightness(1.25) saturate(1.2);opacity:1;
  animation:floaty 7s var(--ease) infinite}
.figure::after{content:"";position:absolute;left:50%;top:45%;width:62%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,rgba(0,138,252,.4),transparent 66%);filter:blur(40px);z-index:-1;
  animation:breathe 5s var(--ease) infinite}
.figure.beat::after{background:radial-gradient(circle,rgba(255,122,112,.4),transparent 66%)}
.scan-line{position:absolute;left:6%;right:6%;height:2px;top:10%;opacity:0;
  background:linear-gradient(90deg,transparent,var(--blue-l),transparent);
  box-shadow:0 0 16px 2px rgba(90,176,255,.6);transition:top .12s linear,opacity .3s}
.node{position:absolute;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);
  background:rgba(150,200,255,.35);transition:.35s var(--ease)}
.node.lit{background:var(--blue-l);box-shadow:0 0 10px 3px rgba(90,176,255,.7);transform:translate(-50%,-50%) scale(1.5)}
.connector{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;opacity:0;transition:opacity .3s}
.connector.on{opacity:1}
.connector path{stroke:var(--blue-l);stroke-width:1.5;stroke-dasharray:3 4;filter:drop-shadow(0 0 4px rgba(90,176,255,.7))}

.frag-track{display:flex;flex-direction:column;gap:120px;padding:18vh 0 24vh}
.frag-card{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.frag-card.is-shown{opacity:1;transform:none}
.frag-card.wide{grid-column:1 / -1}
.frag-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-l);margin-bottom:12px}
.frag-card h3{font-size:25px;margin-bottom:12px}
.frag-card>p{color:var(--muted);margin-bottom:18px;max-width:34em}
.frag-cta{margin-top:18px}

/* honesty beat */
.honesty{display:flex;gap:22px;align-items:center;padding:18px 20px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(255,122,112,.07),rgba(255,122,112,.02));
  border:1px solid rgba(255,122,112,.3);border-left:3px solid var(--red);border-radius:14px;margin-bottom:14px}
.honesty .big{font-family:var(--mono);font-size:42px;font-weight:600;color:var(--red);line-height:.9}
.honesty .ttl{font-weight:600;margin-bottom:6px;font-size:15px}
.honesty p{font-size:13px;color:var(--muted)}
.hcol.grow{flex:1;min-width:200px}

/* bars */
.bars{display:flex;flex-direction:column;gap:11px}
.bar-row .lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;margin-bottom:5px;color:var(--muted)}
.bar-row .lab .k{letter-spacing:.06em}
.bar-track{height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.bar-track.tall{height:10px}
.bar-fill-el{display:block;height:100%;width:0;border-radius:5px;transition:width 1s var(--ease)}
.bg-green{background:var(--green-d)}.bg-blue{background:var(--blue)}.bg-amber{background:var(--amber)}
.bg-red{background:#c0342d}.bg-ink{background:#9fb4cc}.bg-grey{background:#5a6b82}
.verdict-chip{font-family:var(--mono);font-size:11px;font-weight:600;border-radius:8px;padding:5px 10px}
.v-avoid{background:rgba(192,52,45,.2);color:var(--red)}
.v-strong{background:rgba(63,207,149,.18);color:var(--green)}
.illus{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}

/* precedent */
.prec-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.prec-side{display:flex;align-items:center;gap:8px}
.swatch{width:11px;height:11px;border-radius:3px;display:inline-block}
.prec-bar-labels{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--muted2);margin-bottom:6px}
.prec-bars{display:flex;gap:3px;height:9px}
.prec-bars .half{flex:1;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;display:flex}
.prec-bars .half.right{justify-content:flex-end}
.prec-bars .half.right .bar-fill-el{border-radius:5px 0 0 5px}

/* projection */
.proj-trans{display:flex;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.proj-box{flex:1;min-width:130px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.proj-box .k{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:6px}
.proj-box .v{font-family:var(--mono);font-size:28px;font-weight:600}
.proj-box .u{font-family:var(--mono);font-size:11px;color:var(--muted2)}
.proj-arrow{font-size:22px;color:var(--blue-l)}
.scenarios{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scen{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:14px}
.scen.up{border-color:rgba(90,176,255,.35);background:rgba(0,138,252,.07)}
.rx-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--muted)}
.rx-row strong{color:#fff}
.rx-row .arrow{color:var(--blue-l);font-weight:700;flex:none}

/* transition */
.act-transition{height:42vh;display:flex;align-items:center;justify-content:center;position:relative;opacity:0;transition:opacity .6s}
.act-transition.show{opacity:1}
.transition-cap{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--blue-l)}

/* ============================================================
   ACT 2 — premium matrix + lineup
   ============================================================ */
.legend{display:flex;gap:14px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.legend span span{font-size:13px}

/* matrix */
.matrix-wrap{overflow-x:auto}
.matrix{display:grid;grid-template-columns:auto repeat(10,1fr);gap:5px;min-width:440px}
.m-corner{}
.m-axis{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:600;
  color:var(--muted2);min-height:20px}
.m-avatar{position:relative;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:9px;font-weight:600;color:#dbe9fb;margin:0 auto;cursor:default;
  background:radial-gradient(circle at 35% 28%,rgba(120,195,255,.5),rgba(12,20,37,.92) 78%);
  border:1.5px solid rgba(90,176,255,.5);
  box-shadow:0 0 10px rgba(0,138,252,.3),inset 0 1px 0 rgba(255,255,255,.14);transition:.18s var(--ease)}
.m-avatar:hover{border-color:var(--blue-l);box-shadow:0 0 14px rgba(0,138,252,.6);transform:translateY(-1px)}
.m-avatar-pos{position:absolute;bottom:-4px;right:-4px;font-size:6.5px;line-height:1;letter-spacing:.02em;
  background:var(--blue);color:#fff;border:1.5px solid #0a1626;border-radius:999px;padding:2px 3px;font-weight:600}
.cell{aspect-ratio:1;border-radius:5px;background:rgba(255,255,255,.04);cursor:pointer;position:relative;
  transition:transform .2s var(--ease),box-shadow .2s}
.cell.intro{animation:cellIn .45s var(--ease) both}
.cell.self{background:rgba(255,255,255,.05)!important;box-shadow:none!important}
.cell:hover{transform:scale(1.18);z-index:3;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.cell .tip{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);white-space:nowrap;
  background:#06101f;border:1px solid var(--line-2);border-radius:7px;padding:5px 9px;font-family:var(--mono);font-size:10px;
  color:#fff;opacity:0;pointer-events:none;transition:.15s;z-index:5}
.cell:hover .tip{opacity:1}

.rail-lbl{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.rail-row{display:flex;justify-content:space-between;font-size:13.5px;padding:5px 0;color:var(--muted);border-top:1px solid var(--line)}
.rail-row:first-of-type{border-top:none}

/* lineup half-court */
.lineup-stage{position:relative;border-radius:var(--r-lg);overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0,#11253f,#0a1626 62%,#070e1b);
  border:1px solid rgba(90,176,255,.16);box-shadow:0 34px 70px -34px rgba(6,28,56,.7);padding:18px}
.lineup-head{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:8px;margin-bottom:6px}
.lineup-head::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-l);box-shadow:0 0 8px var(--blue-l)}
.lineup-row{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:26px 4px 8px}
.player{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;opacity:1}
.sil{position:relative;width:100%;max-width:74px;height:118px;display:flex;align-items:flex-end;justify-content:center}
.sil.flip{transform:scaleX(-1)}
.sil.flip .num{transform:translateX(-50%) scaleX(-1)}
.sil img{height:100%;width:100%;object-fit:contain;object-position:bottom;transform-origin:50% 92%;
  filter:drop-shadow(0 0 10px rgba(0,138,252,.55)) brightness(1.3) saturate(1.32);
  animation:silSway 4.6s var(--ease) infinite;animation-delay:var(--p,0s)}
.sil::after{content:"";position:absolute;left:50%;bottom:-2px;width:60%;height:13px;transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,138,252,.5),transparent 70%);filter:blur(5px);z-index:-1}
.sil .num{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10px;font-weight:600;
  color:#cfe7ff;background:rgba(8,18,32,.85);border:1px solid rgba(90,176,255,.45);border-radius:999px;padding:1px 8px;
  box-shadow:0 0 10px rgba(0,138,252,.4)}
.player.star .sil{max-width:88px;height:132px}
.player.star .sil img{filter:drop-shadow(0 0 16px rgba(0,138,252,.85)) brightness(1.4) saturate(1.4)}
.player.star .sil::after{background:radial-gradient(ellipse,rgba(0,138,252,.8),transparent 70%);width:68%;height:17px}
.player.star .sil .num{background:rgba(0,138,252,.95);border-color:rgba(255,255,255,.5);color:#fff}
.pname{display:flex;align-items:center;gap:6px;background:rgba(8,18,32,.7);border:1px solid var(--line);
  border-radius:9px;padding:5px 10px}
.player.star .pname{border-color:rgba(90,176,255,.45);background:rgba(0,138,252,.1)}
.pname .pos{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--blue-l)}
.pname .nm2{font-size:12px;color:#eaf2ff;white-space:nowrap}
.proj-float{position:absolute;left:-14px;bottom:18px;background:var(--panel-solid);border:1px solid var(--line-2);
  border-radius:15px;padding:13px 17px;box-shadow:0 22px 46px -22px rgba(0,0,0,.8)}
.proj-float .k{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:5px}
.proj-float .v{display:flex;align-items:baseline;gap:8px}
.proj-float .v .n{font-family:var(--mono);font-size:30px;font-weight:600;color:var(--blue-l);line-height:1}

.slot-pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--line);
  border-radius:999px;padding:7px 13px;font-size:13px}
.slot-pill .pos{font-family:var(--mono);font-size:10px;font-weight:600;color:var(--blue-l)}

/* standings */
.stand{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stand .b{border-radius:13px;padding:16px;text-align:center;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.stand .b .k{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px}
.stand .b .v{font-family:var(--mono);font-size:34px;font-weight:600}
.stand .likely{border-color:rgba(90,176,255,.4);background:rgba(0,138,252,.08)}
.stand .likely .v{color:var(--blue-l)}
.swing{display:flex;flex-direction:column;gap:9px}
.swing .s{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;font-size:14px;color:var(--muted)}
.swing .s .n{font-family:var(--mono);font-size:12px;color:var(--blue-l);font-weight:600}

/* ============================================================
   VIDEO · PROOF · CTA · FOOTER
   ============================================================ */
.video-band{padding:64px 0}
.video-inner{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;backdrop-filter:blur(14px)}
.video-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:34px;align-items:center}
.video-grid h2{font-size:30px;margin:12px 0}
.video-grid p{color:var(--muted)}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 120% at 50% 0,#13294a,#0a1626);border:1px solid rgba(90,176,255,.2);display:flex;align-items:center;justify-content:center}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.play .circ{width:64px;height:64px;border-radius:50%;background:rgba(0,138,252,.9);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 10px rgba(0,138,252,.18),0 14px 34px -10px rgba(0,138,252,.8);transition:.2s var(--ease)}
.video-frame:hover .play .circ{transform:scale(1.08)}
.play .tri{width:0;height:0;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:4px}
.thumbtxt{position:absolute;bottom:14px;left:16px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--muted)}

.proof{padding:30px 0 50px;text-align:center}
.proof h2{font-size:clamp(24px,3vw,32px);margin-bottom:28px}
.clubwall{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(10px)}
.club{padding:20px 12px;transition:.2s var(--ease);display:flex;flex-direction:column;align-items:center;gap:9px}
.club:hover{transform:translateY(-3px);border-color:var(--line-2)}
.club-logo{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--blue-l);
  background:#fff;padding:6px;border:1px solid var(--line-2);overflow:hidden}
.club-logo img{width:100%;height:100%;object-fit:contain;display:block}
.club .n{font-weight:600;font-size:15px}
.club .t{font-family:var(--mono);font-size:10px;color:var(--muted2);margin-top:5px;letter-spacing:.04em}
.proof-more{color:var(--muted2);font-size:14px;margin:18px 0 30px}
.bigstats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px}
.bigstat{padding:28px}
.bigstat .v{font-family:var(--mono);font-size:42px;font-weight:600}
.bigstat .l{color:var(--muted2);font-size:13px;margin-top:6px}
.awards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.award{font-family:var(--mono);font-size:12px;color:var(--gold);border:1px solid rgba(255,205,110,.3);
  background:rgba(255,205,110,.07);border-radius:999px;padding:8px 15px}

.finalcta{padding:30px 0 80px}
.finalcta-inner{padding:50px 34px;text-align:center;background:
  radial-gradient(120% 140% at 50% 0,rgba(0,138,252,.16),transparent 60%),var(--panel);
  border:1px solid var(--line-2)}
.finalcta h2{font-size:clamp(28px,3.6vw,40px);margin-bottom:14px}
.finalcta p{color:var(--muted);max-width:42em;margin:0 auto 24px}
.finalcta .note{font-style:italic;color:var(--muted2);font-size:14px}

.site-footer{border-top:1px solid var(--line);padding:48px 0 30px;background:rgba(6,12,24,.6)}
.footer-grid{max-width:var(--wrap);margin:0 auto;padding:0 28px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.footer-brand p{color:var(--muted2);font-size:13.5px;margin-top:12px;max-width:24em}
.footer-col .h{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.footer-col .links{display:flex;flex-direction:column;gap:9px}
.footer-col .links a{color:var(--muted);font-size:14px;transition:.15s}
.footer-col .links a:hover{color:#fff}
.footer-legal{max-width:var(--wrap);margin:28px auto 0;padding:18px 28px 0;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted2);font-size:12.5px}
.footer-legal .ll{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{color:var(--muted2)}.footer-legal a:hover{color:#fff}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:100;background:rgba(4,9,18,.75);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:24px}
.modal-overlay[hidden]{display:none}
.modal{width:100%;max-width:440px;padding:26px;background:var(--panel-solid);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.modal-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-l)}
.modal-x{background:none;border:none;color:var(--muted);font-size:24px;cursor:pointer;line-height:1}
.type-toggle{display:flex;gap:6px;background:rgba(255,255,255,.05);border-radius:11px;padding:4px;margin-bottom:16px}
.type-toggle button{flex:1;border:none;background:none;color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;
  padding:9px;border-radius:8px;cursor:pointer;transition:.18s}
.type-toggle button.active{background:var(--blue);color:#fff}
.field-col{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.field{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:#fff;
  font-family:inherit;font-size:14px;outline:none;transition:.15s}
.field:focus{border-color:var(--blue);background:rgba(0,138,252,.06)}
.field::placeholder{color:var(--muted2)}
textarea.field{min-height:78px;resize:vertical}
.form-error{color:var(--red);font-size:13px;line-height:1.4;margin-top:10px}
.form-error[hidden]{display:none}
.modal-submit{width:100%;background:var(--blue);color:#fff;border:none;border-radius:11px;padding:14px;font-family:inherit;
  font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 14px 30px -12px rgba(0,138,252,.8)}
.modal-submit:hover{background:#1b97ff}
.reassure{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted2)}
.reassure .ok{color:var(--green)}
.confirm{text-align:center;padding:14px 6px}
.confirm .check{width:56px;height:56px;border-radius:50%;background:rgba(63,207,149,.16);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 16px}
.confirm h3{font-size:21px;margin-bottom:10px}
.confirm p{color:var(--muted);margin-bottom:20px}
.confirm button{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:#fff;border-radius:10px;
  padding:11px 22px;font-family:inherit;font-weight:600;cursor:pointer}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes tokenIn{from{opacity:0;transform:translate(-50%,-30%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes playerIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cellIn{from{opacity:.2;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes silSway{0%,100%{transform:rotate(-3.5deg) translateY(0)}50%{transform:rotate(3.5deg) translateY(-7px)}}
.chip-card:nth-of-type(2){animation-delay:.4s}
.chip-card:nth-of-type(3){animation-delay:.8s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:960px){
  /* ----- layout collapses ----- */
  .hero-grid{grid-template-columns:1fr;gap:24px}
  .hero-figure{order:-1;width:100%;max-width:340px;margin:0 auto}
  .act1-stage{grid-template-columns:1fr;gap:0}
  .figure-pin{display:none}
  .frag-track{gap:48px;padding:10px 0 30px}
  .video-grid{grid-template-columns:1fr}
  .clubwall{grid-template-columns:repeat(3,1fr)}
  .bigstats{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .frag{grid-template-columns:1fr!important}
  /* inline-styled card grids → stack instead of squeezing into skinny columns */
  .g3{grid-template-columns:1fr!important}
  .g4{grid-template-columns:repeat(2,1fr)!important}
  /* hover tooltips are dead weight on touch and overflow the matrix → drop them */
  .cell .tip{display:none}

  /* ----- mobile navigation ----- */
  .nav-toggle{display:inline-flex;margin-left:0;order:3}
  /* keep the social icons in the mobile header, between the logo and the burger */
  .social{display:flex;margin-left:auto;gap:4px}
  .social a{width:31px;height:31px}
  .social svg{width:18px;height:18px}
  .header-cta{display:none}
  .header-pill{gap:12px}
  .nav{
    position:absolute;top:calc(100% + 12px);left:0;right:0;margin:0;
    flex-direction:column;gap:4px;padding:10px;
    background:rgba(9,16,29,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--line-2);border-radius:18px;
    box-shadow:0 30px 60px -22px rgba(0,0,0,.92);
    opacity:0;transform:translateY(-10px);pointer-events:none;
    transition:opacity .22s var(--ease),transform .22s var(--ease);
  }
  body.nav-open .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:14px 15px;border-radius:12px;font-size:16px;color:var(--ink)}
  .nav-cta-m{display:block;width:100%;margin-top:6px;padding:14px 15px;text-align:center;
    background:var(--blue);color:#fff;font-family:inherit;font-size:16px;font-weight:600;
    border:none;border-radius:12px;cursor:pointer;box-shadow:0 12px 26px -12px rgba(0,138,252,.8)}
}
@media (max-width:560px){
  .wrap{padding:0 18px}
  .site-header{padding:12px 0}
  .header-pill{height:56px;padding:0 10px 0 14px}
  .hero{padding:30px 0 26px}
  .hero h1{font-size:clamp(32px,8.5vw,44px)}
  .hero-sub{font-size:16px}
  .cta-row .btn{width:100%;justify-content:center}
  .trust-strip{gap:14px}
  .trust-sep{display:none}
  .act-intro{padding:48px 0 22px}
  .finalcta-inner{padding:36px 22px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:24px}
  .footer-brand{grid-column:1 / -1}
  .footer-legal{flex-direction:column;gap:8px}
  .lineup-row{gap:3px;padding:22px 0 6px}
  .pname{padding:4px 6px}
  .pname .nm2{font-size:10px}
  .sil{max-width:52px;height:84px}
  .player.star .sil{max-width:60px;height:96px}
  .clubwall{grid-template-columns:repeat(2,1fr)}
  .scenarios,.stand{grid-template-columns:1fr}
  /* 10x10 compatibility matrix — shrink to fit the screen instead of overflowing */
  .matrix{min-width:0;gap:3px}
  .m-avatar{width:21px;height:21px;font-size:7.5px;border-width:1px}
  .m-avatar-pos{display:none}
  .m-axis{min-height:12px}
  .cell{border-radius:3px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .figure-img,.frag-card{opacity:1!important;transform:none!important}
  .cell{opacity:1!important;transform:none!important}
}

/* footer social icons */
.f-social{display:flex;gap:9px;align-items:center}
.f-social a{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--blue-l);border-radius:9px;transition:.18s var(--ease)}
.f-social a:hover{color:#fff;background:rgba(0,138,252,.16)}
.f-social svg{width:19px;height:19px;fill:currentColor}