/* ============ Spaikz Sports (/sports) — layered on styles.css ============ */
.sports {
  --soccer: #22c55e; --basketball: #f97316; --futsal: #3b82f6; --any: #a06bff; --fun: #06b6d4;
  --card: rgba(255, 255, 255, 0.035);
  --card-hover: rgba(255, 255, 255, 0.06);
  --shadow: 0 30px 80px rgba(0, 0, 0, .45);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(34, 197, 94, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(110, 168, 254, .12), transparent 60%),
    var(--bg);
}
:root[data-theme="light"] .sports {
  --card: #ffffff;
  --card-hover: #ffffff;
  --shadow: 0 24px 60px rgba(16, 27, 51, .14);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(34, 197, 94, .10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(36, 87, 196, .08), transparent 60%),
    var(--bg);
}

.brand-sub {
  font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soccer); padding: 3px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--soccer) 45%, transparent);
}

/* ---------- hero ---------- */
.sp-hero { position: relative; overflow: hidden; padding: 56px 24px 72px; }
.sp-field {
  position: absolute; inset: 0; width: 100%; height: 100%; color: var(--text); pointer-events: none;
  mask-image: radial-gradient(ellipse 75% 70% at 60% 45%, #000 30%, transparent 100%);
}
.sp-field g { opacity: .08; }
.sp-field .sp-pass { opacity: .55; animation: sp-dash 1.6s linear infinite; }
.sp-field .sp-ball { fill: #fff; filter: drop-shadow(0 0 8px rgba(34, 227, 195, .9)); }
@keyframes sp-dash { to { stroke-dashoffset: -44; } }

.sp-hero-inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.08fr 1fr; gap: 44px; align-items: center;
}
.sp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
  font-weight: 600; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  padding: 7px 14px; border: 1px solid var(--panel-brd); border-radius: 999px; background: var(--panel);
}
.sp-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--soccer); box-shadow: 0 0 0 4px color-mix(in srgb, var(--soccer) 25%, transparent); animation: sp-pulse 2s infinite; }
@keyframes sp-pulse { 50% { box-shadow: 0 0 0 8px transparent; } }
.sp-hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.55rem); line-height: 1.02; margin: 0 0 22px; }
.sp-lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--muted); margin: 0 0 30px; max-width: 560px; }
.sp-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.sp-stats { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 22px; max-width: 600px; }
.sp-stats li { display: flex; flex-direction: column; padding-left: 14px; border-left: 2px solid var(--panel-brd); }
.sp-stats strong { font-family: "Space Grotesk", sans-serif; font-size: 1.7rem; line-height: 1.1; }
.sp-stats span { color: var(--muted); font-size: .85rem; }

/* hero collage */
.sp-hero-art { position: relative; aspect-ratio: 1 / .86; perspective: 1400px; }
.sp-window {
  margin: 0; border-radius: 14px; overflow: hidden; background: #0d1322;
  border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--shadow);
}
.sp-window img { display: block; width: 100%; height: auto; }
.sp-window-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #131a2c; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sp-window-bar i { width: 9px; height: 9px; border-radius: 50%; background: #2a3550; }
.sp-window-bar i:nth-child(1) { background: #ff5f57; } .sp-window-bar i:nth-child(2) { background: #febc2e; } .sp-window-bar i:nth-child(3) { background: #28c840; }
.sp-window-bar span { margin-left: 10px; font-size: .74rem; color: #8b96b3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sp-window-main { position: absolute; top: 4%; left: 0; width: 88%; transform: rotateY(-9deg) rotateX(4deg); transform-origin: left center; animation: sp-bob 9s ease-in-out infinite; }
.sp-window-small { position: absolute; bottom: 6%; left: 14%; width: 54%; transform: rotateY(-9deg) rotateX(4deg); animation: sp-bob 9s ease-in-out -3s infinite; }
.sp-poster { position: absolute; right: -2%; top: 22%; width: 27%; height: auto; border-radius: 12px; box-shadow: var(--shadow); transform: rotate(5deg); animation: sp-bob2 8s ease-in-out infinite; border: 1px solid rgba(255, 255, 255, .14); }
@keyframes sp-bob { 50% { translate: 0 -8px; } }
@keyframes sp-bob2 { 50% { translate: 0 10px; rotate: 1deg; } }
.sp-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 14px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  background: rgba(13, 19, 34, .92); color: #e8ecf6; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(8px);
}
.sp-chip-call { top: 0; right: 8%; animation: sp-bob2 7s ease-in-out -2s infinite; }
.sp-chip-call .pulse { width: 9px; height: 9px; border-radius: 50%; background: #facc15; box-shadow: 0 0 0 0 rgba(250, 204, 21, .7); animation: sp-ring 1.8s infinite; }
@keyframes sp-ring { 70% { box-shadow: 0 0 0 9px rgba(250, 204, 21, 0); } 100% { box-shadow: 0 0 0 0 rgba(250, 204, 21, 0); } }
.sp-chip-odds { bottom: 0; left: 0; animation: sp-bob 8s ease-in-out -4s infinite; }
.sp-chip-odds b { color: #34d399; font-family: "Space Grotesk", sans-serif; font-size: 1rem; }

/* ---------- section heads ---------- */
.sp-head { max-width: 680px; margin-bottom: 36px; }
.sp-kicker { margin: 0 0 12px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.sp-sub { color: var(--muted); font-size: 1.08rem; margin: 0; }
.sp-fine { color: var(--muted); font-size: .84rem; margin: 0; }

/* ---------- filters ---------- */
.sp-filters {
  position: sticky; top: 70px; z-index: 20; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 10px; margin: 0 -10px 26px; border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(12px);
}
.sp-filter {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600;
  padding: 9px 16px; border-radius: 999px; color: var(--muted);
  background: var(--panel); border: 1px solid var(--panel-brd); transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.sp-filter em { font-style: normal; font-size: .78rem; opacity: .7; }
.sp-filter:hover { color: var(--text); transform: translateY(-1px); }
.sp-filter.is-on { color: #08101f; background: var(--grad); border-color: transparent; }
.sw { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sw-soccer { background: var(--soccer); } .sw-basketball { background: var(--basketball); } .sw-futsal { background: var(--futsal); }

/* ---------- app grid ---------- */
.sp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sp-app {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--card); border: 1px solid var(--panel-brd);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s;
}
.sp-app::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(600px 220px at 50% 0%, color-mix(in srgb, var(--tint) 22%, transparent), transparent 70%); }
.sp-app:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--tint) 55%, transparent); box-shadow: 0 24px 60px color-mix(in srgb, var(--tint) 16%, transparent); background: var(--card-hover); }
.sp-app:hover::before { opacity: 1; }
.sp-app.is-out { display: none; }
.sp-app.is-in { animation: sp-in .45s var(--ease) both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.sp-app-shot { display: block; position: relative; aspect-ratio: 16 / 8.4; overflow: hidden; background: #0d1322; border-bottom: 1px solid var(--panel-brd); }
.sp-app-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .8s var(--ease); }
.sp-app:hover .sp-app-shot img { transform: scale(1.04); }
.sp-app-shot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(transparent, color-mix(in srgb, var(--tint) 18%, transparent)); }
.sp-app-shot-posters { display: flex; gap: 14px; justify-content: center; align-items: center; padding: 18px; background: radial-gradient(circle at 50% 30%, #2a1c55, #0d1322 70%); }
.sp-app-shot-posters img { width: auto; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.sp-app-shot-posters img:first-child { rotate: -4deg; } .sp-app-shot-posters img:last-child { rotate: 4deg; }
.sp-app-body { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; flex: 1; }
.sp-app-top { display: flex; align-items: center; gap: 14px; }
.sp-icon { width: 56px; height: 56px; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); flex: none; }
.sp-app h3 { margin: 0; font-size: 1.35rem; line-height: 1.1; }
.sp-meta { margin: 4px 0 0; color: var(--muted); font-size: .84rem; display: flex; align-items: center; gap: 8px; }
.tag { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.tag-soccer { color: var(--soccer); background: color-mix(in srgb, var(--soccer) 14%, transparent); }
.tag-basketball { color: var(--basketball); background: color-mix(in srgb, var(--basketball) 14%, transparent); }
.tag-futsal { color: var(--futsal); background: color-mix(in srgb, var(--futsal) 16%, transparent); }
.tag-any { color: var(--any); background: color-mix(in srgb, var(--any) 16%, transparent); }
.sp-app-body > p:not(.sp-fine) { margin: 0; color: var(--muted); }
.sp-links { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.sp-go { font-weight: 700; color: var(--text); display: inline-flex; gap: 4px; transition: gap .2s, color .2s; }
.sp-go::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* whole card is the main link */
.sp-app:hover .sp-go { color: var(--tint); gap: 9px; }
.sp-store { position: relative; z-index: 2; font-size: .84rem; font-weight: 600; color: var(--muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--panel-brd); }
.sp-store:hover { color: var(--text); border-color: var(--tint); }
.sp-app-shot { z-index: 0; }
.sp-app.sp-wide { grid-column: 1 / -1; flex-direction: row; }
.sp-app.sp-wide .sp-app-shot { flex: 0 0 46%; aspect-ratio: auto; height: 320px; align-self: center; border-bottom: 0; border-right: 1px solid var(--panel-brd); }
.sp-app.sp-wide .sp-app-shot-posters img { height: 100%; width: auto; max-width: 46%; }
.sp-app.sp-wide .sp-app-body { justify-content: center; padding: 32px 36px; }
.sp-empty { color: var(--muted); }
.sp-empty button { font: inherit; color: var(--brand); background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* ---------- IQ showcase ---------- */
.sp-iq-wrap { border-radius: 24px; padding: 18px; background: var(--card); border: 1px solid var(--panel-brd); box-shadow: var(--shadow); }
.sp-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 14px; background: var(--panel); border: 1px solid var(--panel-brd); margin-bottom: 18px; flex-wrap: wrap; }
.sp-tabs button { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; padding: 10px 18px; border-radius: 10px; border: 0; color: var(--muted); background: transparent; transition: background .2s, color .2s; }
.sp-tabs button[aria-selected="true"] { background: var(--bg); color: var(--text); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.sp-iq-panel { display: grid; grid-template-columns: 1.45fr 1fr; gap: 28px; align-items: center; }
.sp-iq-window img { transition: opacity .25s; }
.sp-iq-window img.is-swapping { opacity: 0; }
.sp-iq-copy h3 { font-size: 1.5rem; margin: 0 0 14px; }
.sp-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.sp-steps li { counter-increment: s; position: relative; padding-left: 44px; color: var(--muted); }
.sp-steps li b { color: var(--text); }
.sp-steps li::before { content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: "Space Grotesk", sans-serif; font-weight: 700; color: #08101f; background: var(--grad); }
.sp-iq-copy .btn { margin-top: 18px; }

/* ---------- season timeline ---------- */
.sp-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; position: relative; }
.sp-timeline::before { content: ""; position: absolute; top: 20px; left: 4%; right: 4%; height: 2px; background: linear-gradient(90deg, var(--soccer), #14b8a6, var(--any), #ff5a1f, #6366f1); opacity: .5; }
.sp-timeline li { position: relative; padding: 52px 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--panel-brd); transition: transform .3s var(--ease), border-color .3s; }
.sp-timeline li:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tint) 55%, transparent); }
.sp-timeline li::before { content: ""; position: absolute; top: 12px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tint) 22%, transparent); }
.sp-when { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tint); }
.sp-timeline h3 { margin: 6px 0 8px; font-size: 1.08rem; }
.sp-timeline p { margin: 0; color: var(--muted); font-size: .92rem; }
.sp-apps-mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.sp-apps-mini a { font-size: .78rem; font-weight: 600; color: var(--text); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--panel-brd); background: var(--panel); }
.sp-apps-mini a:hover { border-color: var(--tint); }

/* ---------- Sideline band ---------- */
.sp-band { position: relative; overflow: hidden; padding: 84px 24px; color: #eef1fb;
  background: radial-gradient(800px 400px at 80% 50%, rgba(160, 107, 255, .35), transparent 70%), linear-gradient(120deg, #120d2a, #0b0f1a 60%, #0a1f2a); }
.sp-band-inner { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.sp-band-copy p { color: #b6bfd6; font-size: 1.06rem; margin: 0 0 24px; }
.sp-band-copy .sp-fine { color: #8790aa; margin-top: 16px; font-size: .8rem; }
.sp-band .sp-kicker { color: #c4a6ff; }
.sp-fan { position: relative; height: 420px; }
.sp-fan img { position: absolute; top: 50%; left: 50%; width: 260px; height: auto; border-radius: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, .55); border: 1px solid rgba(255, 255, 255, .14); transition: transform .5s var(--ease); }
.sp-fan img:first-child { transform: translate(-85%, -50%) rotate(-8deg); }
.sp-fan img:last-child { transform: translate(-15%, -46%) rotate(6deg); }
.sp-fan:hover img:first-child { transform: translate(-95%, -52%) rotate(-11deg); }
.sp-fan:hover img:last-child { transform: translate(-5%, -48%) rotate(9deg); }

/* ---------- FAQ ---------- */
.sp-faq-list { display: grid; gap: 12px; max-width: 820px; }
.sp-faq details { border-radius: 16px; background: var(--card); border: 1px solid var(--panel-brd); padding: 4px 22px; transition: border-color .2s; }
.sp-faq details[open] { border-color: color-mix(in srgb, var(--brand) 45%, transparent); }
.sp-faq summary { cursor: pointer; list-style: none; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.08rem; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--muted); transition: transform .25s; }
.sp-faq details[open] summary::after { transform: rotate(45deg); }
.sp-faq details p { margin: 0 0 18px; color: var(--muted); }

/* ---------- final CTA ---------- */
.sp-final { padding: 0 24px 96px; }
.sp-final-inner { max-width: var(--maxw); margin: 0 auto; text-align: center; padding: 64px 24px; border-radius: 28px; position: relative; overflow: hidden;
  background: radial-gradient(600px 300px at 20% 0%, rgba(34, 197, 94, .22), transparent 70%), radial-gradient(600px 300px at 80% 100%, rgba(160, 107, 255, .25), transparent 70%), var(--card);
  border: 1px solid var(--panel-brd); }
.sp-final h2 { font-size: clamp(2rem, 4.4vw, 3rem); }
.sp-final p { color: var(--muted); margin: 0 0 26px; }
.sp-final .sp-hero-cta { justify-content: center; margin-bottom: 22px; }
.sp-final .sp-fine a { color: var(--brand); }

/* ---------- light theme ---------- */
:root[data-theme="light"] .sp-field g { opacity: .12; }
:root[data-theme="light"] .sp-field .sp-ball { fill: #0f1626; filter: none; }
:root[data-theme="light"] .sp-app { box-shadow: 0 1px 2px rgba(16, 27, 51, .06); }
:root[data-theme="light"] .sp-tabs button[aria-selected="true"] { background: #fff; box-shadow: 0 2px 8px rgba(16, 27, 51, .12); }
:root[data-theme="light"] .tag-soccer { color: #15803d; } :root[data-theme="light"] .tag-basketball { color: #c2410c; }
:root[data-theme="light"] .tag-futsal { color: #1d4ed8; }
:root[data-theme="light"] .brand-sub { color: #15803d; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .sp-hero-inner, .sp-iq-panel, .sp-band-inner { grid-template-columns: 1fr; }
  .sp-hero-art { max-width: 620px; width: 100%; margin: 0 auto; }
  .sp-timeline { grid-template-columns: repeat(2, 1fr); }
  .sp-timeline::before { display: none; }
}
@media (max-width: 760px) {
  .sp-grid { grid-template-columns: 1fr; }
  .sp-app.sp-wide { flex-direction: column; }
  .sp-app.sp-wide .sp-app-shot { flex: none; width: 100%; height: auto; align-self: stretch; aspect-ratio: 16 / 8.4; border-right: 0; border-bottom: 1px solid var(--panel-brd); }
  .sp-app.sp-wide .sp-app-body { padding: 22px 24px 24px; }
  .sp-stats { grid-template-columns: repeat(2, auto); }
  .sp-filters { top: 60px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .sp-filter { flex: none; }
  .sp-fan { height: 340px; } .sp-fan img { width: 200px; }
  .sp-timeline { grid-template-columns: 1fr; }
  .brand-sub { display: none; }
  .sp-field .sp-ball { display: none; }
  .sp-field .sp-pass { opacity: .3; }
}
@media (max-width: 480px) {
  .sp-hero { padding-top: 32px; }
  .sp-chip-odds { display: none; }
  .sp-chip { font-size: .74rem; padding: 7px 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-field .sp-pass, .sp-window-main, .sp-window-small, .sp-poster, .sp-chip, .sp-eyebrow .dot, .sp-chip-call .pulse { animation: none; }
  .sp-field .sp-ball { display: none; }
  .sp-app, .sp-app-shot img, .sp-fan img { transition: none; }
}