:root {
  --bg: #070b09;
  --panel: #0d1410;
  --panel-2: #111a14;
  --text: #f4f7f4;
  --muted: #a8b2aa;
  --line: #243027;
  --green: #a7e52f;
  --green-dark: #78ad14;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Montserrat, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }
.header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 28px;
  padding: 18px 5vw;
  background: rgba(5, 8, 6, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand .ball { color: var(--green); font-size: 38px; }
.brand strong { display:block; font-size: 22px; letter-spacing: 1.5px; }
.brand small { display:block; color:var(--green); letter-spacing: 5px; font-weight:700; }
.nav { display:flex; gap:28px; font-size:14px; }
.nav a:hover { color:var(--green); }
.menu { display:none; background:none; border:0; color:white; font-size:28px; }
.button {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 24px; border-radius:9px;
  background:var(--green); color:#10160d; font-weight:700;
  border:1px solid var(--green);
}
.button:hover { background:#bbf64b; }
.button-small { min-height:42px; padding:0 18px; }
.button-outline { background:transparent; color:white; border-color:#667067; }
.hero {
  position:relative; min-height:640px;
  display:flex; align-items:center;
  background:
    radial-gradient(circle at 72% 70%, rgba(167,229,47,.22), transparent 18%),
    linear-gradient(110deg, #071009 0%, #0d2112 50%, #1f3c22 100%);
  overflow:hidden;
}
.hero::after {
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.14) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 61%, rgba(255,255,255,.14) 61.3%, transparent 61.6%);
  opacity:.45;
}
.overlay {
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.38) 52%, rgba(0,0,0,.2) 100%);
}
.hero-content { position:relative; z-index:2; width:min(1100px,90%); margin:auto; padding:90px 0 54px; }
.eyebrow { color:var(--green); font-weight:700; letter-spacing:.5px; }
h1 { margin:10px 0 18px; font-size:clamp(64px,10vw,126px); line-height:.76; letter-spacing:-5px; }
h1 span { color:var(--green); }
.subtitle { font-size:clamp(18px,2vw,25px); color:#e4e9e4; }
.hero-actions { display:flex; gap:16px; margin:30px 0; flex-wrap:wrap; }
.hero-stats { display:flex; gap:48px; margin-top:45px; }
.hero-stats div { display:flex; flex-direction:column; gap:6px; }
.hero-stats span { color:var(--muted); font-size:14px; }
.dashboard {
  display:grid; grid-template-columns:1.15fr .85fr 1fr;
  gap:22px; padding:28px 4vw;
}
.card {
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  border:1px solid var(--line); border-radius:14px; padding:22px;
}
.card-head { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.card h2 { margin:0 0 18px; }
.card-head a { color:var(--green); font-size:13px; }
.event { display:grid; grid-template-columns:62px 1fr auto; gap:14px; align-items:center; padding:15px 0; border-top:1px solid var(--line); }
.date b { font-size:28px; display:block; }
.date span { color:var(--green); font-size:12px; }
.event p, .join-card p, .features p { color:var(--muted); margin:6px 0 0; font-size:14px; line-height:1.6; }
.spots { text-align:right; font-weight:700; }
.spots span { color:var(--muted); font-weight:400; font-size:12px; }
.rating-list { list-style:none; padding:0; margin:0; counter-reset:item; }
.rating-list li { counter-increment:item; display:flex; justify-content:space-between; padding:14px 0; border-top:1px solid var(--line); }
.rating-list li::before { content:counter(item); color:var(--green); margin-right:12px; }
.rating-list span { margin-right:auto; }
.rating-list b { color:var(--green); }
.join-card { display:flex; flex-direction:column; justify-content:center; min-height:100%; background:linear-gradient(135deg,#111911,#243a1d); }
.join-card .button { align-self:flex-start; margin-top:24px; }
.features {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; padding:12px 4vw 42px;
}
.features div { padding:18px 0; border-top:2px solid var(--green-dark); }
.features h3 { color:var(--green); margin:0 0 6px; }
footer {
  display:flex; justify-content:space-between; gap:20px;
  padding:28px 4vw; color:var(--muted); border-top:1px solid var(--line);
}
@media (max-width: 980px) {
  .dashboard { grid-template-columns:1fr; }
  .features { grid-template-columns:repeat(2,1fr); }
  .nav { display:none; position:absolute; top:78px; left:0; right:0; flex-direction:column; padding:24px 5vw; background:#080d0a; }
  .nav.open { display:flex; }
  .menu { display:block; }
  .header > .button-small { display:none; }
}
@media (max-width: 640px) {
  h1 { letter-spacing:-3px; }
  .hero { min-height:580px; }
  .hero-stats { gap:18px; flex-wrap:wrap; }
  .features { grid-template-columns:1fr; }
  .event { grid-template-columns:50px 1fr; }
  .spots { grid-column:2; text-align:left; }
  footer { flex-direction:column; }
}