:root {
  --bg:#050608;
  --text:#fff;
  --muted:rgba(255,255,255,.74);
  --line:rgba(255,255,255,.15);
  --gold:#b8860b;
  --gold2:#d39a18;
  --paper:#f6f7fb;
  --dark:#07090d
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text)
}

a {
  color:inherit;
  text-decoration:none
}

.site-header {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:20;
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:24px;
  padding:24px clamp(20px,4vw,58px);
  background:linear-gradient(180deg,rgba(0,0,0,.70),rgba(0,0,0,0));
  transition:.25s
}

.site-header.scrolled {
  padding-top:12px;
  padding-bottom:12px;
  background:rgba(5,6,8,.74);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08)
}

.site-header.solid {
  position:sticky;
  background:#090d14;
  border-bottom:1px solid var(--line)
}

.brand-logo img {
  width:94px;
  height:auto;
  display:block;
  transition:.25s
}

.site-header.scrolled .brand-logo img {
  width:72px
}

.nav {
  display:flex;
  justify-content:center;
  gap:34px;
  align-items:center;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  color:rgba(255,255,255,.82)
}

.nav a {
  position:relative;
  padding:8px 0
}

.nav a:hover,.nav a.active {
  color:var(--gold2)
}

.nav a.active:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-10px;
  height:2px;
  background:var(--gold2)
}

.header-actions {
  display:flex;
  justify-content:flex-end;
  gap:14px;
  align-items:center
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  padding:15px 25px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.035em;
  border:1px solid transparent;
  transition:.2s transform,.2s opacity,.2s background;
  white-space:nowrap
}

.btn:hover {
  transform:translateY(-2px)
}

.btn.primary {
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#f4c85d 0%,#e0a42a 42%,#b8860b 100%);
  color:#080808;
  box-shadow:0 12px 35px rgba(184,134,11,.32),inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease
}

.btn.primary:before {
  content:"";
  position:absolute;
  inset:-2px;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 42%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-135%);
  transition:transform .55s ease;
  pointer-events:none
}

.btn.primary:hover {
  transform:translateY(-3px) scale(1.035);
  filter:saturate(1.12);
  box-shadow:0 0 10px rgba(255,224,107,.58),0 0 26px rgba(255,194,48,.46),0 0 54px rgba(255,174,0,.30),0 16px 42px rgba(184,134,11,.35),inset 0 1px 0 rgba(255,255,255,.42)
}

.btn.primary:hover:before {
  transform:translateX(135%)
}

.header-actions .btn.primary {
  animation:goldPulse 2.8s infinite ease-in-out
}

@keyframes goldPulse {
  0%,100% {
    box-shadow:0 0 8px rgba(255,210,70,.18),0 12px 35px rgba(184,134,11,.25)
  }
  50% {
    box-shadow:0 0 18px rgba(255,210,70,.48),0 0 38px rgba(255,184,28,.22),0 12px 35px rgba(184,134,11,.32)
  }

}
.btn.ghost {
  border-color:rgba(255,255,255,.24);
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(10px)
}

.btn.small {
  padding:12px 20px;
  font-size:12px;
  border-radius:6px
}

.hero {
  position:relative;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:118px clamp(20px,4vw,58px) 165px;
  text-align:center
}

.hero-bg {
  position:absolute;
  inset:0;
  background:url('assets/stadium-hero.png') center/cover no-repeat;
  filter:none;
  transform:none
}

.hero-overlay {
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 34%,rgba(0,0,0,.08),rgba(0,0,0,.35) 50%,rgba(0,0,0,.78) 100%),linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.12) 42%,#050608 100%),linear-gradient(90deg,rgba(0,0,0,.42),rgba(0,0,0,.12) 32%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.42))
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:12px;
  font-weight:900;
  color:var(--gold2);
  margin:0 0 20px
}

.hero h1 {
  font-size:clamp(58px,7.7vw,118px);
  line-height:.95;
  margin:0 0 22px;
  letter-spacing:-.04em;
  text-transform:none;
  font-weight:900;
  text-wrap:balance;
  text-shadow:0 12px 45px rgba(0,0,0,.65)
}

.gold-title {
  background:linear-gradient(180deg,#fff3a3 0%,#ffd447 34%,#f3b51b 62%,#c98605 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#ffd447;
  text-shadow:0 0 10px rgba(255,212,71,.35),0 0 26px rgba(255,184,28,.24)
}

.subtitle {
  font-size:clamp(17px,1.55vw,23px);
  line-height:1.42;
  color:#d2d6dc;
  max-width:760px;
  margin:0 auto 28px;
  font-weight:600;
  text-shadow:0 8px 26px rgba(0,0,0,.75)
}

.hero-actions {
  display:flex;
  gap:14px;
  justify-content:center;
  flex-wrap:wrap
}

.countdown-wrap {
  margin-top:18px
}

.countdown-label {
  margin:0 0 12px;
  text-align:center;
  color:var(--gold2);
  font-size:16px;
  letter-spacing:.055em;
  font-weight:900;
  text-transform:uppercase
}

.countdown {
  display:grid;
  grid-template-columns:repeat(4,96px);
  gap:8px;
  justify-content:center
}

.countdown div {
  border:1px solid rgba(255,255,255,.20);
  background:rgba(12,12,12,.52);
  border-radius:8px;
  padding:12px 8px;
  text-align:center;
  backdrop-filter:blur(8px);
  box-shadow:0 16px 45px rgba(0,0,0,.28)
}

.countdown strong {
  display:block;
  font-size:34px;
  line-height:1
}

.countdown span {
  font-size:10px;
  text-transform:uppercase;
  color:#fff;
  font-weight:900
}

.microcopy {
  margin:10px 0 0;
  text-align:center;
  font-size:13px;
  line-height:1.45;
  color:#fff;
  font-weight:700
}

.microcopy strong {
  color:var(--gold2)
}

.stats-strip {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(6,6,6,.58);
  backdrop-filter:blur(12px);
  border-radius:10px;
  overflow:hidden
}

.hero-stats {
  position:absolute;
  left:clamp(20px,6vw,110px);
  right:clamp(20px,6vw,110px);
  bottom:88px;
  z-index:3
}

.stats-strip div {
  padding:22px 18px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12)
}

.stats-strip div:last-child {
  border-right:0
}

.stats-strip strong {
  display:block;
  font-size:30px;
  color:var(--gold2);
  font-weight:900
}

.stats-strip span {
  display:block;
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:800;
  text-transform:uppercase
}

.section {
  padding:74px clamp(18px,5vw,80px);
  background:var(--paper);
  color:#111
}

.section-head {
  max-width:860px;
  margin:0 auto 32px;
  text-align:center
}

.section h2 {
  font-size:clamp(34px,5vw,62px);
  line-height:1;
  margin:0 0 14px;
  letter-spacing:-.055em
}

.section p {
  color:#465064;
  line-height:1.55
}

.eyebrow.dark {
  color:#8b5a00
}

#ranking,#clubs {
  scroll-margin-top:100px
}

.ranking-card {
  max-width:980px;
  margin:auto;
  background:#fff;
  border-radius:28px;
  box-shadow:0 20px 80px rgba(0,0,0,.11);
  overflow:hidden
}

.ranking-list {
  margin:0;
  padding:0;
  list-style:none
}

.ranking-list li {
  display:grid;
  grid-template-columns:46px 1fr 88px 88px 82px;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  border-bottom:1px solid #edf0f5;
  font-weight:900
}

.ranking-list li:last-child {
  border-bottom:0
}

.rank {
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#111;
  color:#fff;
  font-size:14px
}

.club-line {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.club {
  font-size:15px;
  line-height:1.1
}

.ranking-stats {
  text-align:right
}

.ranking-stats strong {
  display:block;
  font-size:16px;
  color:#111;
  line-height:1
}

.ranking-stats small {
  display:block;
  font-size:8px;
  color:#778094;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-top:2px
}

.mini-icon {
  width:32px;
  height:32px;
  object-fit:contain;
  margin-right:8px
}

.clubs-section {
  min-height:100svh;
  padding-top:110px
}

.clubs-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px 14px;
  max-width:1160px;
  width:100%;
  margin:0 auto
}

.club-tile {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:66px;
  background:#111824;
  color:white;
  border-radius:15px;
  padding:8px 12px;
  text-align:left;
  border:1px solid rgba(255,255,255,.08);
  transition:.2s
}

.club-tile:hover {
  background:var(--gold);
  color:#111;
  transform:translateY(-2px)
}

.club-tile:hover small {
  color:rgba(0,0,0,.62)
}

.club-tile .club-icon {
  width:50px;
  height:50px;
  object-fit:contain;
  flex:0 0 auto
}

.large-icon {
  border-radius:16px;
  padding:8px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(8px)
}

.club-name {
  display:block;
  font-weight:900;
  line-height:1.03;
  font-size:14px;
  flex:1
}

.club-tile small {
  display:block;
  color:rgba(255,255,255,.55);
  font-size:8px;
  font-weight:900;
  text-transform:uppercase;
  margin-left:auto
}

.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  align-items:start;
  padding-bottom:44px
}

.about-card,.steps div,.club-hero-card,.success-card {
  background:white;
  border-radius:30px;
  padding:36px;
  box-shadow:0 20px 80px rgba(0,0,0,.1)
}

.steps {
  display:grid;
  gap:16px
}

.steps strong {
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#111;
  color:var(--gold);
  margin-bottom:10px
}

.steps h3 {
  margin:0;
  font-size:22px
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  width:100%;
  padding:30px clamp(18px,4vw,56px);
  color:var(--muted);
  border-top:1px solid var(--line);
  background:#090d14
}

.footer strong {
  color:white;
  font-weight:900
}

.footer span {
  text-align:right
}

.club-page {
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:radial-gradient(circle at center,rgba(0,0,0,.02),rgba(0,0,0,.46) 62%,#07090d 100%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(7,9,13,.72) 100%),url('assets/stadium-hero.png') center/cover no-repeat
}

.club-header {
  position:relative;
  flex:0 0 86px;
  height:86px;
  min-height:86px;
  padding:10px clamp(18px,4vw,56px);
  background:rgba(9,13,20,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px)
}

.club-header .brand-logo img {
  width:86px
}

.club-main {
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  padding:6px 20px 8px
}

.club-choice-layout {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:44px;
  width:100%;
  max-width:980px;
  margin:0 auto;
  transform:translateY(-42px)
}

.club-hero-card {
  width:100%;
  max-width:880px;
  min-height:330px;
  text-align:center;
  color:#111;
  padding:22px 48px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 22px 70px rgba(0,0,0,.24)
}

.club-logo {
  width:70px;
  margin:0 auto 6px
}

.club-logo img {
  width:100%;
  display:block
}

.club-hero-card .eyebrow {
  font-size:11px;
  letter-spacing:3px;
  margin-bottom:10px;
  color:#8b5a00
}

.club-hero-card h1 {
  font-size:clamp(56px,5.4vw,78px);
  font-weight:900;
  line-height:.92;
  letter-spacing:-.06em;
  margin:0 0 8px
}

.club-note {
  color:#697386;
  font-weight:900;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.08em;
  margin:0 0 12px
}

.club-hero-card .subtitle {
  font-size:18px;
  line-height:1.25;
  margin:0 auto 18px;
  max-width:560px;
  color:#465064;
  text-shadow:none
}

.club-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin:0 auto;
  max-width:760px;
  width:100%
}

.club-stats div {
  background:rgba(0,0,0,.22);
  border:1px solid rgba(184,134,11,.45);
  border-radius:15px;
  padding:13px 10px;
  backdrop-filter:blur(8px);
  box-shadow:0 0 16px rgba(184,134,11,.18),0 10px 28px rgba(0,0,0,.18)
}

.club-stats strong {
  display:block;
  font-size:34px;
  font-weight:900;
  line-height:1;
  color:var(--gold2)
}

.club-stats span {
  display:block;
  margin-top:5px;
  font-size:10px;
  color:#fff4a3;
  font-weight:900;
  text-transform:uppercase
}

.choice-options-side {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:100%;
  max-width:720px
}

.choice-option {
  min-height:118px;
  display:grid;
  align-content:center;
  background:rgba(255,255,255,.74);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.38);
  box-shadow:0 8px 25px rgba(0,0,0,.16);
  color:#111;
  border-radius:24px;
  padding:24px;
  transition:.25s
}

.choice-option:hover {
  transform:translateY(-4px) scale(1.02);
  background:rgba(255,255,255,.88)
}

.choice-option.premium {
  background:linear-gradient(135deg,#b8860b 0%,#d29a18 48%,#9a6b05 100%);
  border:2px solid #c99214;
  box-shadow:0 0 18px rgba(184,134,11,.52),0 15px 35px rgba(0,0,0,.25)
}

.choice-label {
  display:block;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px
}

.choice-option strong {
  display:block;
  font-size:24px;
  line-height:1.08;
  margin-bottom:8px
}

.choice-option small {
  display:block;
  font-size:13px;
  color:#465064;
  line-height:1.35
}

.club-footer {
  flex:0 0 58px;
  height:58px;
  min-height:58px;
  padding:16px clamp(18px,4vw,56px);
  border-top:1px solid var(--line);
  background:#090d14
}

@media(max-width:1120px) {
  .site-header {
    grid-template-columns:150px 1fr
  }
  .header-actions {
    display:none
  }
  .hero {
    padding-top:120px
  }
  .hero h1 {
    font-size:clamp(54px,9vw,98px)
  }
  .stats-strip {
    grid-template-columns:repeat(4,1fr)
  }

}
@media(max-width:900px) {
  .nav {
    gap:18px;
    font-size:12px
  }
  .clubs-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .about-section {
    grid-template-columns:1fr
  }
  .club-page {
    height:auto;
    overflow:auto
  }
  .club-header {
    height:auto;
    min-height:0
  }
  .club-choice-layout {
    gap:22px;
    transform:none
  }
  .choice-options-side {
    grid-template-columns:1fr;
    max-width:620px
  }
  .club-main {
    padding:40px 20px
  }

}
@media(max-width:800px) {
  .site-header {
    display:flex;
    justify-content:space-between
  }
  .nav {
    display:none
  }
  .hero {
    min-height:auto;
    padding-top:120px;
    padding-bottom:60px
  }
  .countdown {
    grid-template-columns:repeat(2,minmax(120px,1fr))
  }
  .hero-stats {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:34px;
    width:100%
  }
  .stats-strip {
    grid-template-columns:repeat(2,1fr)
  }
  .footer {
    flex-direction:column;
    text-align:center
  }
  .footer span {
    text-align:center
  }

}
.ranking-mobile-row { display:none }

@media(max-width:560px) {
  .desktop-break {
    display:none
  }
  .clubs-grid {
    grid-template-columns:1fr
  }
  .ranking-list li {
    grid-template-columns:32px 1fr 52px 52px 52px;
    padding:14px 10px;
    gap:6px
  }
  .ranking-stats {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center
  }
  .ranking-stats strong {
    font-size:12px;
    color:#111
  }
  .ranking-stats small {
    font-size:6px;
    letter-spacing:.04em
  }
  .mini-icon {
    display:block;
    width:22px;
    height:22px
  }
  .club {
    font-size:12px
  }
  .ranking-mobile-row {
    display:flex;
    gap:14px;
    padding-top:2px
  }
  .hero h1 {
    font-size:46px
  }
  .btn {
    width:100%
  }
  .countdown {
    grid-template-columns:repeat(2,1fr)
  }
  .stats-strip {
    grid-template-columns:1fr
  }
  .stats-strip div {
    border-right:0;
    border-bottom:1px solid var(--line)
  }

}

[data-club-badge] img {
  border-radius:12px;
  mix-blend-mode:multiply;
  background:#f0f0f0
}