:root{
  --bg:#091225; --surface:#121A32; --surface-soft:#1B2443;
  --primary:#3B82FF; --secondary:#7C5CFF; --accent:#FF6A2B;
  --text:#F7F9FF; --muted:#A7B0C8; --border:#29375F;
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

/* Ambient background glows */
.aura{ position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.aura::before,.aura::after{
  content:""; position:absolute; border-radius:50%; filter:blur(120px); opacity:.5;
}
.aura::before{ width:640px; height:640px; top:-220px; left:-160px;
  background:radial-gradient(circle,var(--primary),transparent 70%); }
.aura::after{ width:560px; height:560px; top:240px; right:-200px;
  background:radial-gradient(circle,var(--secondary),transparent 70%); opacity:.4; }
.grid-lines{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.35;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 40%,transparent 100%);
}

/* Typography helpers */
.gradient-text{
  background:linear-gradient(100deg,#8FB6FF,var(--secondary) 55%,var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow{ letter-spacing:.18em; text-transform:uppercase; font-size:.72rem; font-weight:700; color:var(--muted); }

/* Buttons */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-weight:600; border-radius:14px;
  padding:.85rem 1.35rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ color:#fff; background:linear-gradient(120deg,var(--primary),var(--secondary));
  box-shadow:0 10px 30px -8px rgba(59,130,255,.6); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -10px rgba(124,92,255,.7); }
.btn-accent{ color:#1a0d05; background:linear-gradient(120deg,#FF8A3D,var(--accent));
  box-shadow:0 10px 30px -8px rgba(255,106,43,.55); }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 16px 42px -10px rgba(255,106,43,.7); }
.btn-ghost{ color:var(--text); background:rgba(255,255,255,.04); border:1px solid var(--border); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:var(--primary); }

/* Store buttons */
.store-btn{ display:inline-flex; align-items:center; gap:.7rem; padding:.7rem 1.15rem; border-radius:14px;
  border:1px solid var(--border); background:rgba(255,255,255,.03); transition:.18s; }
.store-btn:hover{ border-color:var(--primary); background:rgba(255,255,255,.06); }
.store-btn small{ display:block; font-size:.66rem; color:var(--muted); line-height:1; }
.store-btn strong{ display:block; font-size:.98rem; line-height:1.2; }
.store-btn .soon{ font-size:.6rem; color:var(--accent); font-weight:700; }

/* Cards */
.card{ background:linear-gradient(180deg,var(--surface),var(--surface-soft));
  border:1px solid var(--border); border-radius:20px; transition:transform .22s ease, border-color .22s ease; }
.card:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--primary) 55%,var(--border)); }
.icon-chip{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(59,130,255,.12); border:1px solid var(--border); }

/* Scenario tiles */
.scene{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--border);
  background:var(--surface); aspect-ratio:1/1; transition:.22s; }
.scene:hover{ transform:translateY(-4px); border-color:var(--primary); }
.scene img{ width:100%; height:100%; object-fit:cover; }
.scene span{ position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem; font-weight:600; font-size:.9rem;
  background:linear-gradient(180deg,transparent,rgba(9,18,37,.92)); }

/* League badges */
.league{ display:flex; flex-direction:column; align-items:center; gap:.5rem; opacity:.55;
  filter:grayscale(.35); transition:.25s; }
.league img{ width:74px; height:74px; object-fit:contain; }
.league.active,.league:hover{ opacity:1; filter:none; transform:translateY(-4px); }
.league b{ font-size:.82rem; }

/* Float animation for hero mascot */
@keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-14px) } }
.floaty{ animation:floaty 5s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .floaty{ animation:none } html{ scroll-behavior:auto } }

/* Forms */
.form-label{ display:block; font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:.45rem; }
.form-input{ width:100%; background:var(--bg); border:1px solid var(--border); border-radius:12px;
  padding:.85rem 1rem; color:var(--text); font-size:.95rem; transition:border-color .15s, box-shadow .15s; }
.form-input::placeholder{ color:#6b769250; color:var(--muted); opacity:.6; }
.form-input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,255,.18); }
.form-textarea{ resize:vertical; min-height:150px; line-height:1.6; }
.input-error{ border-color:#ff5c5c !important; }
.form-error{ display:block; color:#ff9a9a; font-size:.8rem; margin-top:.4rem; }
.form-success{ display:flex; align-items:center; gap:.7rem; padding:1.05rem 1.2rem; border-radius:14px; font-weight:600;
  color:#8ff0b6; background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.35); }
.btn-full{ width:100%; justify-content:center; }

/* Prose (legal / support pages) */
.prose{ color:var(--muted); line-height:1.75; }
.prose h2{ color:var(--text); font-size:1.35rem; font-weight:700; margin:2.2rem 0 .8rem; }
.prose h3{ color:var(--text); font-size:1.05rem; font-weight:600; margin:1.5rem 0 .5rem; }
.prose p{ margin:.7rem 0; }
.prose ul{ margin:.7rem 0 .7rem 1.2rem; list-style:disc; }
.prose li{ margin:.35rem 0; }
.prose a{ color:#8FB6FF; text-decoration:underline; text-underline-offset:3px; }
.prose strong{ color:var(--text); }