/* 14+1 Sports — shared shell for the product demos (dark stage, Outfit, palm-green accent, ball yellow) */
:root{
  --stage:#0B0F10; --stage-2:#121617; --panel:#151A1B; --ink:#ECEAE3; --ink-2:#BDBBB3; --muted:#87857E; --hair:rgba(236,234,227,.14); --hair-2:rgba(236,234,227,.3);
  --accent:#3CC4A4; --accent-deep:#0A6B5B; --ball:#F5D000; --signal:#FF5A5A; --amber:#F2B544;
  --font:"Outfit","Avenir Next","Segoe UI",system-ui,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-spring:cubic-bezier(.32,.72,0,1);
  --r:18px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
a{color:inherit}
.app{position:relative;width:100%;height:100%;overflow:hidden}

/* top bar */
.bar{position:absolute;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 16px;pointer-events:none}
.bar > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--ball);box-shadow:0 0 0 4px rgba(245,208,0,.18)}
.brand .prod{color:var(--ink-2);font-weight:500}
.brand .prod::before{content:"/";margin:0 8px;color:var(--muted)}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(236,234,227,.06);border:1px solid var(--hair);backdrop-filter:blur(10px)}
.seg button{appearance:none;border:0;background:transparent;color:var(--ink-2);padding:7px 13px;border-radius:999px;cursor:pointer;font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;transition:background-color .25s var(--ease-out),color .25s var(--ease-out)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--stage)}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.spacer{flex:1}
.pill{appearance:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair-2);background:rgba(11,15,16,.6);color:var(--ink);padding:0 14px;height:36px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;backdrop-filter:blur(10px);transition:background-color .25s var(--ease-out),border-color .25s var(--ease-out),color .25s var(--ease-out)}
.pill:hover{border-color:var(--ink);}
.pill.primary{background:var(--ink);color:var(--stage);border-color:var(--ink)}
.pill.primary:hover{background:#fff}
.pill .ic{width:14px;height:14px}

/* caption + progress (bottom centre) */
.cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;width:min(680px,calc(100% - 32px));pointer-events:none}
.cap .box{background:rgba(11,15,16,.78);border:1px solid var(--hair);border-radius:14px;padding:12px 16px 10px;backdrop-filter:blur(14px);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.cap .step{display:flex;align-items:baseline;gap:12px}
.cap .no{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums;white-space:nowrap}
.cap .txt{font-size:15.5px;color:var(--ink);line-height:1.35;min-height:1.35em}
.cap .txt b{color:var(--ball);font-weight:600}
.cap .bar-track{height:2px;background:var(--hair);border-radius:2px;margin-top:10px;overflow:hidden}
.cap .bar-fill{height:100%;background:var(--accent);width:0%;transform-origin:0 50%}
.cap.hidden{opacity:0;transition:opacity .4s var(--ease-out)}

/* fake cursor used by the tour */
.cursor{position:absolute;z-index:60;left:0;top:0;width:22px;height:22px;pointer-events:none;opacity:0;transition:transform 1.1s var(--ease-spring),opacity .4s var(--ease-out);will-change:transform}
.cursor svg{display:block;width:22px;height:22px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.cursor .ring{position:absolute;left:-12px;top:-12px;width:46px;height:46px;border-radius:50%;border:2px solid var(--ball);opacity:0;transform:scale(.4)}
.cursor.click .ring{animation:ring .55s var(--ease-out) both}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.25)}}
.cursor.on{opacity:1}

/* counters strip */
.stats{display:flex;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.stats::-webkit-scrollbar{display:none}
.stat{flex:0 0 auto;min-width:118px;padding:9px 12px;border-radius:12px;background:rgba(11,15,16,.7);border:1px solid var(--hair);backdrop-filter:blur(10px)}
.stat .v{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat .v small{font-size:12px;color:var(--ink-2);margin-left:2px;letter-spacing:0}
.stat .k{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:5px;white-space:nowrap}

/* generic chips / kv */
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--hair);border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink-2);background:rgba(236,234,227,.04)}
.chip b{color:var(--ink);font-weight:600}
.chip.good{border-color:rgba(60,196,164,.5);color:var(--accent)}
.chip.good b{color:var(--accent)}
.chip.warn{border-color:rgba(242,181,68,.5);color:var(--amber)}
.chip.bad{border-color:rgba(255,90,90,.45);color:var(--signal)}

@media (prefers-reduced-motion: reduce){
  .cursor{transition:none}
}
@media (max-width:720px){
  .bar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .brand .prod{display:none}
  .seg{order:3;width:100%;justify-content:center;margin-left:0 !important}
  .seg button{padding:6px 9px;font-size:10.5px;white-space:nowrap;flex:1;text-align:center}
  .pill{height:32px;padding:0 11px;font-size:11px}
  .cap{bottom:12px}
  .cap .txt{font-size:14px}
}