/* =====================================================
   Clubbix Landing Page — styles.css
   Design System: the same "glass" as the application (Inter, #10B981 primary,
   ambient background with blurred blobs, frosted cards, glass top bar).
   The tokens below mirror those in frontend/src/styles.scss 1:1 — if the app's
   palette changes, this file has to be updated too.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- CSS Variables ---------- */
:root {
  --primary: #10B981;
  --primary-light: #34D399;
  --primary-dark: #059669;
  --secondary: #0F172A;
  --bg: #F8FAFC;
  --text: #334155;
  --text-light: #64748B;
  --text-muted: #94A3B8;
  --border: #E2E8F0;
  --neutral-dark: #E2E8F0;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);

  /* ── Glass (identical to the app's --cb-glass-*) ── */
  --glass-bg: rgba(255, 255, 255, 0.50);
  --glass-bg-strong: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-divider: rgba(15, 23, 42, 0.08);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --glass-blur: saturate(190%) blur(24px);
  --glass-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 30px rgba(15, 23, 42, 0.05);
  --glass-shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.04), 0 24px 60px rgba(15, 23, 42, 0.09);

  /* Controls that "float" on the ambient wash (white buttons, theme toggle) */
  --control-bg: #FFFFFF;
  --control-border: rgba(15, 23, 42, 0.1);
  --hover-tint: rgba(15, 23, 42, 0.035);
}

[data-theme="dark"] {
  --secondary: #E2E8F0;
  --text: #CBD5E1;
  --text-light: #94A3B8;
  --text-muted: #64748B;
  --border: #1E293B;
  --neutral-dark: #334155;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);

  --glass-bg: rgba(20, 28, 43, 0.50);
  --glass-bg-strong: rgba(20, 28, 43, 0.7);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-divider: rgba(255, 255, 255, 0.08);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.28);
  --glass-shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.25), 0 24px 60px rgba(0, 0, 0, 0.38);

  --control-bg: #1A2332;
  --control-border: rgba(255, 255, 255, 0.1);
  --hover-tint: rgba(255, 255, 255, 0.07);
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
}

/* ---------- Scrollbar (mirrors the app's, frontend/src/styles.scss) ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-dark); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

@media (max-width: 768px) {
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  *::-webkit-scrollbar { display: none; }
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
img { max-width: 100%; height: auto; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

/* ---------- Ambient background ---------- */
/* Exactly the same backdrop as the app (frontend/src/styles.scss → .ambient /
   .ambient-blob-*): a fixed radial wash behind the whole page, with 4 blurred
   blobs drifting slowly. This is what gives the frosted cards something to blur
   — without it behind them the blur has nothing to work with and the cards would
   just look grey. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(1100px 640px at 8% -8%, rgba(52, 211, 153, 0.16) 0%, transparent 55%),
    radial-gradient(900px 560px at 92% 4%, rgba(125, 224, 220, 0.08) 0%, transparent 52%),
    radial-gradient(780px 480px at 72% 100%, rgba(134, 239, 172, 0.12) 0%, transparent 55%),
    linear-gradient(160deg, #FCFEFD 0%, #F4F9F8 48%, #F9FCFB 100%);
}

[data-theme="dark"] .ambient {
  background:
    radial-gradient(1100px 640px at 8% -8%, rgba(16, 185, 129, 0.26) 0%, transparent 55%),
    radial-gradient(900px 560px at 92% 4%, rgba(20, 184, 166, 0.22) 0%, transparent 52%),
    radial-gradient(780px 480px at 72% 100%, rgba(52, 211, 153, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, #0B1120 0%, #101827 48%, #0C1322 100%);
}

.ambient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(56px);
  opacity: 0.14;
  animation: ambient-drift 18s ease-in-out infinite;
  will-change: transform;
}

.ambient-blob-a { width: 420px; height: 420px; left: -80px; top: 20%;     background: #86EFAC; animation-delay: 0s; }
.ambient-blob-b { width: 520px; height: 520px; right: -120px; top: -60px; background: #CCFBF1; opacity: 0.1; animation-delay: -4s; }
.ambient-blob-c { width: 380px; height: 380px; right: 18%; bottom: -80px; background: #A7F3D0; opacity: 0.14; animation-delay: -8s; }
.ambient-blob-d { width: 300px; height: 300px; left: 40%; top: 40%;       background: #6EE7B7; opacity: 0.1; animation-delay: -12s; }

[data-theme="dark"] .ambient-blob-a { opacity: 0.2; }
[data-theme="dark"] .ambient-blob-b { opacity: 0.18; }
[data-theme="dark"] .ambient-blob-c { opacity: 0.12; }
[data-theme="dark"] .ambient-blob-d { opacity: 0.14; }

@keyframes ambient-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(24px, -18px, 0) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-blob { animation: none; }
}

@media (max-width: 768px) {
  .ambient-blob-a { width: 220px; height: 220px; }
  .ambient-blob-b { width: 260px; height: 260px; }
  .ambient-blob-c { width: 200px; height: 200px; }
  .ambient-blob-d { width: 160px; height: 160px; }

  .ambient {
    background:
      radial-gradient(550px 320px at 8% -8%, rgba(52, 211, 153, 0.055) 0%, transparent 55%),
      radial-gradient(450px 280px at 92% 4%, rgba(125, 224, 220, 0.028) 0%, transparent 52%),
      radial-gradient(390px 240px at 72% 100%, rgba(134, 239, 172, 0.045) 0%, transparent 55%),
      linear-gradient(160deg, #FFFFFF 0%, #FCFEFD 48%, #FDFFFE 100%);
  }
}

@media (max-width: 768px) {
  [data-theme="dark"] .ambient {
    background:
      radial-gradient(550px 320px at 8% -8%, rgba(16, 185, 129, 0.18) 0%, transparent 55%),
      radial-gradient(450px 280px at 92% 4%, rgba(20, 184, 166, 0.15) 0%, transparent 52%),
      radial-gradient(390px 240px at 72% 100%, rgba(52, 211, 153, 0.11) 0%, transparent 55%),
      linear-gradient(160deg, #0B1120 0%, #101827 48%, #0C1322 100%);
  }
}

/* ---------- Glass card (identical to the app's .cb-card) ---------- */
.glass-card {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The thread of light along the top edge: what makes a thin fill read as glass
   rather than as a slightly lighter panel. */
.glass-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--glass-edge), transparent);
  pointer-events: none;
}

.glass-card:hover {
  box-shadow: var(--glass-shadow-lg);
}

.navbar {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 100;
  background: var(--glass-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  transition: box-shadow 0.3s;
  max-width: 1200px;
  margin: 0 auto;
}

.navbar.scrolled { box-shadow: var(--glass-shadow-lg); }

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding-left: 20px;
  padding-right: 20px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 22px;
  color: var(--secondary);
}
[data-theme="dark"] .nav-logo { color: #F8FAFC; }

.nav-logo svg { width: 32px; height: 32px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
}

.nav-links a {
  color: var(--text-light);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--primary); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  border: none;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-decoration: none;
}

/* Solid green pill — identical to the app's .btn-primary-pill / .add-btn: same
   gradient, same double shadow, same lift on hover. One single kind of
   "important" green button across the whole site, not three different styles as
   before. */
.btn-primary {
  border-radius: 999px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.24), 0 8px 20px rgba(16, 185, 129, 0.28);
}
.btn-primary:hover {
  filter: saturate(115%);
  box-shadow: 0 2px 4px rgba(5, 150, 105, 0.26), 0 14px 30px rgba(16, 185, 129, 0.36);
  transform: translateY(-1px);
}

/* White button that "floats" on the ambient wash (inside ordinary light/dark
   content) — the same solid disc with --control-bg/-border + --glass-shadow that
   .btn-header-action uses in the app, not a transparent-with-border: a
   transparent edge over an already busy ambient reads as "unfinished". */
.btn-outline {
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--text);
  border: 1px solid var(--control-border);
  box-shadow: var(--glass-shadow);
}
.btn-outline:hover {
  box-shadow: var(--glass-shadow-lg);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-light);
  border: 1px solid transparent;
}
.btn-ghost:hover { color: var(--primary); }

.btn-lg { height: 48px; padding: 0 28px; font-size: 16px; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }

/* Theme toggle: the same round disc as .icon-btn in the app's top bar. */
.theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-shadow: var(--glass-shadow);
  color: var(--text);
  font-size: 20px;
  transition: box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.theme-toggle:hover {
  box-shadow: var(--glass-shadow-lg);
  transform: translateY(-1px);
}

.nav-right-mobile {
  display: none;
  align-items: center;
  gap: 8px;
}

/* Mobile menu button: the same disc as .theme-toggle */
.mobile-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  box-shadow: var(--glass-shadow);
  cursor: pointer;
  color: var(--text);
  font-size: 22px;
  align-items: center;
  justify-content: center;
}
.mobile-menu-btn:hover { box-shadow: var(--glass-shadow-lg); }

/* Mobile menu: a drop-down panel, not a floating card — it stays opaque like a
   dropdown/popover in the app (design-system.md §8), not glass. */
.mobile-menu {
  display: none;
  position: fixed;
  top: 88px;
  left: 16px;
  right: 16px;
  background: var(--control-bg);
  border: 1px solid var(--glass-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 16px 24px;
  z-index: 99;
}

.mobile-menu.open { display: block; }

.mobile-menu a {
  display: block;
  padding: 12px 0;
  color: var(--text);
  font-weight: 500;
  border-bottom: 1px solid var(--glass-divider);
}
.mobile-menu a:last-child { border-bottom: none; }

/* ---------- Hero ---------- */
/* Was always dark regardless of the site's own theme toggle (mirroring the
   app sidebar's "always dark" exception) — reverted per explicit feedback:
   the hero should just be part of the normal light/dark flow like every
   other section, transparent over the same ambient wash. */
.hero {
  background: transparent;
  padding: 160px 0 100px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(52,211,153,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-left { max-width: 560px; }
.hero-visual-mobile { display: none !important; }
.mobile-only { display: none !important; }

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(16,185,129,0.13);
  border: none;
  color: #047857;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 24px;
}

[data-theme="dark"] .hero-badge {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  color: #34D399;
}

.hero h1 {
  font-size: 52px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--secondary);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.hero h1 .gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 36px;
  max-width: 480px;
}

.hero-sports {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.hero-sports-label {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero-sports-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hero-sport-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 30px;
  border-radius: 100px;
  background: rgba(16,185,129,0.13);
  border: none;
  color: #047857;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-sport-chip:hover {
  background: rgba(16,185,129,0.2);
  transform: translateY(-1px);
}

[data-theme="dark"] .hero-sport-chip {
  background: rgba(16,185,129,0.15);
  border: 1px solid rgba(16,185,129,0.3);
  color: #34D399;
}

[data-theme="dark"] .hero-sport-chip:hover {
  background: rgba(16,185,129,0.24);
}

.hero-buttons {
  display: flex;
  gap: 12px;
  margin-bottom: 36px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 24px;
  color: var(--text-light);
  font-size: 14px;
}

.hero-proof-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero-proof-item .check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(16,185,129,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-light);
  font-size: 14px;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-mockup {
  width: 100%;
  max-width: 580px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ---------- Social Proof ---------- */
/* No longer a band with an alternating flat background — it sits directly on the
   ambient wash like the rest of the page, with only a hairline separator above
   and below (--glass-divider, not a solid border). */
.social-proof {
  padding: 40px 0;
  border-top: 1px solid var(--glass-divider);
  border-bottom: 1px solid var(--glass-divider);
}

.social-proof-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

.social-proof-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-light);
}

.social-proof-logos {
  display: flex;
  align-items: center;
  gap: 32px;
}

.social-proof-logo {
  height: 48px;
  width: auto;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.social-proof-logo:hover { opacity: 1; }

/* ---------- Stats Widgets ---------- */
.stats-section {
  padding: 60px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat-widget {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
}
.stat-widget:hover {
  transform: translateY(-2px);
}

.stat-widget-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stat-widget-icon .material-symbols-outlined { font-size: 24px; }

/* Same recipe as the app's tinted icon tiles (dashboard.component.scss, "One
   palette for every tinted icon"): a veil of the colour at 12% opacity, which
   works identically in both themes. */
.stat-widget-icon.blue   { background: rgba(59,130,246,0.12); color: #3B82F6; }
.stat-widget-icon.green  { background: rgba(16,185,129,0.12); color: #10B981; }
.stat-widget-icon.orange { background: rgba(245,158,11,0.12); color: #F59E0B; }
.stat-widget-icon.purple { background: rgba(139,92,246,0.12); color: #8B5CF6; }

.stat-widget-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-widget-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--secondary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .stat-widget-value { color: #F8FAFC; }

.stat-widget-label {
  font-size: 13px;
  color: var(--text-light);
  font-weight: 500;
  margin-top: 2px;
}

@media (max-width: 1024px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .stat-widget { padding: 14px; gap: 10px; }
  .stat-widget-value { font-size: 20px; }
  .stat-widget-label { font-size: 11px; }
  .stat-widget-icon { width: 36px; height: 36px; border-radius: 8px; }
  .stat-widget-icon .material-symbols-outlined { font-size: 20px; }
}

/* ---------- Section Common ---------- */
.section {
  padding: 100px 0;
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px;
}

.section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 12px;
}

.section-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--secondary);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
[data-theme="dark"] .section-title { color: #F8FAFC; }

.section-subtitle {
  font-size: 18px;
  color: var(--text-light);
  line-height: 1.7;
}

/* ---------- Features Grid ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  padding: 32px;
}
.feature-card:hover {
  transform: translateY(-2px);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(16,185,129,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 24px;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary);
}
[data-theme="dark"] .feature-card h3 { color: #F8FAFC; }

.feature-card p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ---------- How It Works ---------- */
/* No longer a flat background different from the rest — the ambient wash carries
   on underneath, and the section is set apart by its content alone. */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
}

.step-card {
  text-align: center;
  position: relative;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.24), 0 8px 20px rgba(16, 185, 129, 0.28);
}

.step-card h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary);
}
[data-theme="dark"] .step-card h3 { color: #F8FAFC; }

.step-card p {
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  padding: 40px;
  position: relative;
}

.pricing-card.popular {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), var(--glass-shadow);
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 1px 2px rgba(5, 150, 105, 0.24), 0 8px 20px rgba(16, 185, 129, 0.28);
}

.pricing-name {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary);
}
[data-theme="dark"] .pricing-name { color: #F8FAFC; }

.pricing-desc {
  font-size: 14px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}

.pricing-amount {
  font-size: 48px;
  font-weight: 900;
  color: var(--secondary);
  letter-spacing: -0.02em;
}
[data-theme="dark"] .pricing-amount { color: #F8FAFC; }

.pricing-period {
  font-size: 16px;
  color: var(--text-muted);
}

.pricing-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text);
}

.pricing-features .check {
  color: var(--primary);
  font-size: 18px;
  flex-shrink: 0;
}

.pricing-features .cross {
  color: var(--text-muted);
  font-size: 18px;
  flex-shrink: 0;
}

.pricing-cta { width: 100%; justify-content: center; }

/* ---------- Comparison ---------- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}

.comparison-col {
  padding: 32px;
}

.comparison-after {
  border-color: rgba(16,185,129,0.35);
}
.comparison-after:hover {
  box-shadow: 0 4px 20px rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.5);
}

.comparison-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-divider);
}

.comparison-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comparison-icon .material-symbols-outlined { font-size: 18px; }

.comparison-icon.before {
  background: rgba(239,68,68,0.12);
  color: #EF4444;
}
.comparison-icon.after {
  background: rgba(16,185,129,0.12);
  color: var(--primary);
}

.comparison-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--secondary);
}
[data-theme="dark"] .comparison-label { color: #F8FAFC; }

.comparison-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comparison-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
}

.comparison-x {
  font-size: 18px;
  color: #EF4444;
  flex-shrink: 0;
  margin-top: 1px;
}

.comparison-check {
  font-size: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 768px) {
  .comparison { grid-template-columns: 1fr; }
}

/* ---------- Portals ---------- */
.portals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.portal-card {
  padding: 32px;
  text-align: center;
}
.portal-card:hover { transform: translateY(-2px); }

.portal-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(16,185,129,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  color: var(--primary);
  font-size: 28px;
}

.portal-card h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--secondary);
}
[data-theme="dark"] .portal-card h3 { color: #F8FAFC; }

.portal-card p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.6;
}

/* ---------- App ---------- */
.app-section {
  text-align: center;
}

.app-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.app-badge {
  display: inline-block;
  text-decoration: none;
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0.9;
}
.app-badge:hover {
  transform: scale(1.05);
  opacity: 1;
}

.store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Same "control" recipe as any other chip/button in the app — themed via
     tokens, not a permanently black box. It only happens to read black
     again in dark theme because --control-bg already is dark there. */
  background: var(--control-bg);
  color: var(--text);
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--control-border);
  box-shadow: var(--glass-shadow);
  min-width: 160px;
}

/* The Google Play glyph's <path> has its own hardcoded fill="#fff" attribute
   (unlike the Apple glyph, which has none and just inherits), and a rule on the
   <svg> alone cannot override an attribute set directly on a descendant — so the
   path needs its own rule too.

   This must use real CSS comment syntax: a double slash is not valid CSS, and
   the parser recovers from it by discarding everything up to the next
   semicolon, which silently swallowed the fill rule below and left the glyphs
   white on the light badge. Kept unnested so it does not rely on CSS nesting
   support. */
.store-badge svg,
.store-badge svg path { fill: var(--text) !important; }

.store-badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.store-badge-small {
  font-size: 10px;
  font-weight: 400;
  opacity: 0.8;
}

.store-badge-big {
  font-size: 18px;
  font-weight: 700;
}

.app-coming-soon {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--secondary);
  text-align: left;
  font-family: inherit;
  transition: color 0.2s;
}
[data-theme="dark"] .faq-question { color: #F8FAFC; }
.faq-question:hover { color: var(--primary); }

.faq-arrow {
  font-size: 20px;
  color: var(--text-muted);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-arrow { transform: rotate(180deg); color: var(--primary); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-answer-inner {
  padding: 0 24px 20px;
  font-size: 15px;
  color: var(--text-light);
  line-height: 1.7;
}

/* ---------- CTA ---------- */
/* Was always dark like the hero, for the same reason — reverted for the
   same reason too: just part of the normal light/dark flow now. */
.cta-section {
  background: transparent;
  padding: 100px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 1000px;
  height: 1000px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,0.12) 0%, transparent 60%);
  pointer-events: none;
}

.cta-content {
  position: relative;
  z-index: 1;
}

.cta-section h2 {
  font-size: 40px;
  font-weight: 900;
  color: var(--secondary);
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

.cta-section p {
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 36px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ---------- Footer ---------- */
/* Sits on the ambient wash like every other section, with just a hairline
   separator above instead of being an opaque panel of its own. */
.footer {
  border-top: 1px solid var(--glass-divider);
  padding: 60px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 14px;
  color: var(--text-light);
  line-height: 1.7;
  margin-top: 12px;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--secondary);
  margin-bottom: 16px;
}
[data-theme="dark"] .footer-col h4 { color: #F8FAFC; }

.footer-col a {
  display: block;
  font-size: 14px;
  color: var(--text-light);
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--primary); }

.footer-bottom {
  border-top: 1px solid var(--glass-divider);
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-muted);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-social {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color 0.2s;
}
.footer-social:hover { color: var(--primary); }

.footer-email {
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-email:hover { color: var(--primary); }

/* ---------- Animations ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate.fade-in { transform: none; }

.animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagger-children.in-view > * {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children.in-view > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.in-view > *:nth-child(2) { transition-delay: 0.06s; }
.stagger-children.in-view > *:nth-child(3) { transition-delay: 0.12s; }
.stagger-children.in-view > *:nth-child(4) { transition-delay: 0.18s; }
.stagger-children.in-view > *:nth-child(5) { transition-delay: 0.24s; }
.stagger-children.in-view > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.in-view > *:nth-child(7) { transition-delay: 0.36s; }
.stagger-children.in-view > *:nth-child(8) { transition-delay: 0.42s; }
.stagger-children.in-view > *:nth-child(9) { transition-delay: 0.48s; }

/* Hero animations (immediate, no scroll trigger) */
.hero-left { animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.hero-visual-desktop { animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.hero-badge { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; }

/* Float effect on hero mockup */
.hero-mockup { animation: float 6s ease-in-out infinite; }

/* Feature card icon bounce on hover */
.feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(-3deg);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Step number pulse */
.step-number {
  transition: transform 0.3s, box-shadow 0.3s;
}
.step-card:hover .step-number {
  transform: scale(1.1);
  box-shadow: 0 0 0 8px rgba(16,185,129,0.15);
}

/* Portal card lift */
.portal-card:hover .portal-icon {
  transform: translateY(-4px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FAQ smooth rotation */
.faq-arrow { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Material Symbols ---------- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; text-align: center; }
  .hero-left { max-width: 100%; margin: 0 auto; }
  .hero-subtitle { margin-left: auto; margin-right: auto; }
  .hero-buttons { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero-sports { justify-content: center; }
  .hero-visual-desktop { margin-top: 48px; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .portals-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
  .hero { padding: 100px 0 40px; min-height: 100dvh; display: flex; align-items: center; }
  .hero .container { display: flex; flex-direction: column; justify-content: center; width: 100%; }
  .section { padding: 56px 0; }
  .stats-section { padding: 40px 0; }

  .nav-links { display: none; }
  .nav-actions { display: none; }
  .nav-right-mobile { display: flex; }
  .mobile-menu-btn { display: flex; }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .feature-card {
    padding: 20px;
  }
  .feature-card h3 {
    font-size: 15px;
  }
  .feature-card p {
    font-size: 13px;
  }
  .feature-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
  }
  .steps-grid { grid-template-columns: 1fr; gap: 24px; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .portals-grid { grid-template-columns: 1fr; }
  .comparison { grid-template-columns: 1fr; }
  .footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 16px;
  }
  .footer-brand {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 8px;
  }
  .footer-brand .nav-logo { justify-content: center; font-size: 22px; }
  .footer-brand p { max-width: 100%; margin-left: auto; margin-right: auto; text-align: center; }
  .footer-grid h4 { font-size: 12px; }
  .footer-grid a { font-size: 13px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
  .footer-bottom-right { justify-content: center; }

  .section-title { font-size: 26px; }
  .section-subtitle { font-size: 15px; }
  .section-header { margin-bottom: 40px; }
  .cta-section h2 { font-size: 26px; }
  .cta-section { padding: 64px 0; }

  .hero-visual-desktop { display: none; }
  .hero-visual-mobile { display: flex !important; margin: 24px 0; }
  .desktop-only { display: none !important; }
  .mobile-only { display: flex !important; }
  .hero-left { max-width: 100%; }
  .hero-subtitle { font-size: 16px; }
  .hero-buttons { flex-direction: column; align-items: stretch; }
  .hero-buttons .btn { justify-content: center; }
  .hero-proof { display: none; }
  .hero-sports { justify-content: center; }
  .hero-sports-label { display: none; }
  /* Six sport chips wrap into two rows on narrow phones. */
  .hero-sports-icons { flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 100%; }
  .hero-sport-chip {
    padding: 0 8px;
    height: 26px;
    gap: 4px;
    font-size: 11px;
  }
  .hero-sport-chip .material-symbols-outlined { font-size: 14px !important; }
  .hero-mockup { max-width: 100%; }

  .stat-widget { padding: 16px; }
  .stat-widget-value { font-size: 24px; }
  .stat-widget-icon { width: 40px; height: 40px; }

  .social-proof-inner { flex-direction: column; gap: 16px; text-align: center; }

  .store-badge-big { font-size: 16px; }

  .comparison-col { padding: 24px; }

  .step-card { padding: 24px; }
  .feature-card { padding: 24px; }
  .portal-card { padding: 24px; }

  .faq-question { font-size: 15px; padding: 16px; }
}

@media (max-width: 380px) {
  .hero h1 { font-size: 26px; }
  .container { padding: 0 16px; }
  .stat-widget-value { font-size: 20px; }
  .stat-widget-label { font-size: 12px; }
}