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

:root {
  --bg: #000000;
  --bg2: #0a0a0a;
  --bg3: #0f0f0f;
  --card: #111111;
  --border: #1a1a1a;
  --border2: #222222;
  --gold: #c9a84c;
  --gold2: #f0d080;
  --gold3: #a07830;
  --red: #cc3333;
  --text: #ffffff;
  --text2: #888888;
  --text3: #444444;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Inter', Arial, sans-serif;
  --radius: 4px;
  --shadow: 0 4px 24px rgba(0,0,0,0.6);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:var(--gold); text-decoration:none; transition:color 0.2s; }
a:hover { color:var(--gold2); }

h1,h2,h3 { font-family:var(--serif); }
h1 { font-size:clamp(2.2rem,5vw,4rem); font-weight:900; line-height:1.1; }
h2 { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; }
h3 { font-size:1.2rem; font-weight:700; }
p { color:var(--text2); line-height:1.75; }

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

/* NAVBAR */
#navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(0,0,0,0.95);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--gold);
  transition:all 0.3s;
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:64px; max-width:1200px; margin:0 auto; padding:0 24px;
}
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo-icon {
  width:40px; height:40px; background:var(--gold);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:900; color:#000; font-family:var(--serif);
  flex-shrink:0;
}
.nav-logo-text { font-size:14px; font-weight:900; font-family:var(--serif); color:#fff; white-space:nowrap; }
.nav-logo-text span { color:var(--gold); }
.nav-logo-sub { font-size:8px; color:var(--gold); letter-spacing:3px; text-transform:uppercase; margin-top:1px; }
.nav-links { display:flex; align-items:center; gap:24px; list-style:none; }
.nav-links a { color:var(--text2); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; transition:color 0.2s; }
.nav-links a:hover { color:var(--text); }
.nav-divider { width:1px; height:20px; background:var(--border2); }
.nav-cta {
  background:var(--gold); color:#000; padding:8px 18px; border-radius:var(--radius);
  font-weight:900; font-size:11px; text-transform:uppercase; letter-spacing:1px;
  white-space:nowrap; border:none; cursor:pointer; transition:all 0.2s;
}
.nav-cta:hover { background:var(--gold2); color:#000; }

/* TICKER */
#ticker-bar {
  background:var(--bg2); border-bottom:1px solid var(--border);
  padding:7px 0; overflow:hidden; margin-top:64px;
}
.ticker-track { display:flex; gap:40px; animation:ticker 35s linear infinite; white-space:nowrap; }
.ticker-item { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text2); }
.ticker-win { color:var(--gold); }
.ticker-loss { color:var(--red); }
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* HERO */
#hero {
  min-height:88vh; display:flex; align-items:center;
  background:#000; padding:80px 0 60px; border-bottom:1px solid var(--border);
}
.hero-inner { max-width:1200px; margin:0 auto; padding:0 24px; text-align:center; }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--gold3); color:var(--gold);
  padding:5px 16px; border-radius:2px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px;
  margin-bottom:24px;
}
.hero-badge-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.hero-title { margin-bottom:20px; }
.hero-title .line1 { color:var(--text); display:block; }
.hero-title .line2 { color:var(--gold); display:block; }
.hero-title .line3 { color:var(--text); display:block; }
.hero-sub { font-size:1.05rem; color:var(--text2); max-width:520px; margin:0 auto 32px; }
.hero-cta-group { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; }

/* BUTTONS */
.btn-gold {
  background:var(--gold); color:#000; padding:14px 32px;
  border-radius:var(--radius); font-weight:900; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; border:none; cursor:pointer;
  transition:all 0.2s; display:inline-block;
}
.btn-gold:hover { background:var(--gold2); color:#000; transform:translateY(-1px); }
.btn-outline {
  background:transparent; color:var(--text); padding:14px 32px;
  border-radius:var(--radius); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; border:1px solid var(--border2);
  cursor:pointer; transition:all 0.2s; display:inline-block;
}
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }

/* STATS BAR */
.stats-bar {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; background:var(--border); border:1px solid var(--border);
  border-radius:var(--radius); max-width:780px; margin:0 auto;
}
.stat-item { background:var(--bg2); padding:20px; text-align:center; }
.stat-num { font-size:2rem; font-weight:900; color:var(--gold); font-family:var(--serif); display:block; line-height:1; margin-bottom:4px; }
.stat-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; font-weight:700; }

/* GAME OF THE DAY */
.gotd-wrap { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:48px 0; }
.gotd-card {
  background:var(--bg3); border:1px solid var(--border2);
  border-left:4px solid var(--gold); border-radius:var(--radius);
  padding:28px; display:grid; grid-template-columns:1fr auto;
  gap:24px; align-items:center; max-width:900px; margin:0 auto;
}
.gotd-sport { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; }
.gotd-matchup { font-size:1.6rem; font-weight:900; font-family:var(--serif); color:var(--text); margin-bottom:8px; }
.gotd-analysis { font-size:13px; color:var(--text2); line-height:1.7; }
.gotd-pick-box {
  text-align:center; background:var(--bg); border:1px solid var(--gold3);
  border-radius:var(--radius); padding:20px 28px; min-width:160px; flex-shrink:0;
}
.gotd-pick-label { font-size:9px; color:var(--gold3); text-transform:uppercase; letter-spacing:2px; margin-bottom:6px; }
.gotd-pick-value { font-size:1.6rem; font-weight:900; color:var(--gold); font-family:var(--serif); }

/* PICK CARDS */
.picks-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.pick-card {
  background:var(--bg2); border:1px solid var(--border);
  border-top:3px solid var(--gold); border-radius:var(--radius);
  padding:20px; transition:all 0.2s;
}
.pick-card:hover { border-color:var(--border2); transform:translateY(-2px); box-shadow:var(--shadow); }
.pick-sport { font-size:9px; color:var(--gold); text-transform:uppercase; letter-spacing:2px; font-weight:700; margin-bottom:8px; }
.pick-matchup { font-size:1rem; font-weight:900; font-family:var(--serif); color:var(--text); margin-bottom:4px; }
.pick-line { font-size:11px; color:var(--text3); margin-bottom:12px; }
.pick-analysis { font-size:12px; color:var(--text2); line-height:1.65; margin-bottom:16px; }
.pick-result {
  display:inline-block; background:#1a1400; border:1px solid var(--gold3);
  color:var(--gold); padding:6px 14px; font-size:11px; font-weight:900;
  text-transform:uppercase; letter-spacing:1px; border-radius:2px;
}

/* SECTION HEADERS */
.section-head { margin-bottom:36px; }
.section-label { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:3px; color:var(--gold); display:block; margin-bottom:8px; }
.section-title { color:var(--text); }
.section-sub { color:var(--text2); margin-top:8px; max-width:500px; }

/* VIP CARD */
.vip-card {
  background:var(--bg2); border:1px solid var(--border2);
  border-top:3px solid var(--gold); border-radius:var(--radius);
  max-width:520px; margin:0 auto; overflow:hidden;
}
.vip-card-header { background:var(--bg3); border-bottom:1px solid var(--border); padding:28px; text-align:center; }
.vip-title { font-size:1.3rem; font-weight:900; font-family:var(--serif); color:var(--text); margin-bottom:4px; }
.vip-sub { font-size:12px; color:var(--text2); }
.vip-perks { display:flex; justify-content:center; gap:20px; margin-top:16px; flex-wrap:wrap; }
.vip-perk { font-size:11px; color:var(--text2); font-weight:600; }
.vip-perk span { color:var(--gold); }
.vip-card-body { padding:28px; }
.vip-count-bar {
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius); padding:12px 16px; margin-bottom:20px;
}
.vip-count-num { font-size:1.1rem; font-weight:900; color:var(--gold); font-family:var(--serif); }
.vip-count-label { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }
.form-label { display:block; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text2); margin-bottom:6px; }
.form-input {
  width:100%; background:var(--bg3); border:1px solid var(--border2);
  border-radius:var(--radius); padding:12px 14px; color:var(--text);
  font-size:14px; font-family:var(--sans); outline:none; transition:all 0.2s;
  margin-bottom:16px;
}
.form-input:focus { border-color:var(--gold); }
.form-input::placeholder { color:var(--text3); }
.btn-vip {
  width:100%; background:var(--gold); color:#000; padding:14px;
  border:none; border-radius:var(--radius); font-weight:900; font-size:13px;
  text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition:all 0.2s;
}
.btn-vip:hover { background:var(--gold2); }
.vip-note { text-align:center; font-size:10px; color:var(--text3); margin-top:10px; }
.vip-feed { margin-top:20px; border-top:1px solid var(--border); padding-top:16px; }
.vip-feed-title { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--text3); margin-bottom:10px; }
.vip-feed-item { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px solid var(--border); font-size:11px; }
.vip-feed-item:last-child { border-bottom:none; }
.vip-dot { width:6px; height:6px; background:var(--gold); border-radius:50%; flex-shrink:0; animation:pulse 2s infinite; }
.vip-feed-text { color:var(--text2); flex:1; }
.vip-feed-time { color:var(--text3); font-size:10px; }

/* SPORT GRID */
.sport-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.sport-tile {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px; text-align:center;
  transition:all 0.2s; display:block; color:var(--text);
}
.sport-tile:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.sport-emoji { font-size:1.8rem; margin-bottom:8px; }
.sport-name { font-size:13px; font-weight:900; font-family:var(--serif); margin-bottom:4px; }
.sport-vol { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; }

/* FOOTER */
#footer { background:var(--bg2); border-top:3px solid var(--gold); padding:48px 0 0; }
.footer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-bottom:40px; }
.footer-col-title { font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--gold); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.footer-links { list-style:none; }
.footer-links li { margin-bottom:8px; }
.footer-links a { color:var(--text3); font-size:12px; transition:color 0.2s; }
.footer-links a:hover { color:var(--gold); }
.footer-bottom { background:#050505; border-top:1px solid var(--border); padding:14px 24px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-copy { font-size:11px; color:var(--text3); }
.footer-legal-links { display:flex; gap:20px; }
.footer-legal-links a { color:var(--text3); font-size:11px; }
.footer-legal-links a:hover { color:var(--gold); }
.footer-disclaimer { font-size:10px; color:var(--text3); max-width:380px; text-align:right; }

/* RESPONSIVE */
@media(max-width:768px) {
  .nav-links { display:none; }
  .stats-bar { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr; }
  .gotd-card { grid-template-columns:1fr; }
  .hero-cta-group { flex-direction:column; align-items:center; }
}
@media(max-width:480px) {
  .picks-grid { grid-template-columns:1fr; }
  .sport-grid { grid-template-columns:repeat(2,1fr); }
}