:root {
  --void: #07070D;
  --void-deep: #030308;
  --void-soft: #12121F;
  --blue: #2B6CFF;
  --blue-bright: #4D8BFF;
  --purple: #8B3FFF;
  --red: #FF2D55;
  --neon: #2B6CFF;
  --gold: #E8C547;
  --bone: #EDEEF5;
  --bone-dim: #9A9CB0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--void);
  color: var(--bone);
  font-family: 'Space Grotesk', -apple-system, system-ui, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--blue-bright); text-decoration: none; }
a:hover { color: var(--red); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Grid backdrop with a subtle blue glow */
.grid-bg {
  background-image:
    linear-gradient(rgba(43,108,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43,108,255,0.06) 1px, transparent 1px);
  background-size: 44px 44px;
}
.noise {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(43,108,255,0.10), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(255,45,85,0.08), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(139,63,255,0.06), transparent 55%);
}

nav {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: rgba(7,7,13,0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(43,108,255,0.25);
}
nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--bone); }
nav .links { display: flex; gap: 24px; align-items: center; }
nav .links a { font-size: 14px; color: var(--bone-dim); }
nav .links a:hover { color: var(--blue-bright); }

/* Buttons - neon gradient */
.btn {
  display: inline-block; padding: 12px 24px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: -0.01em;
  border: none; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: filter 0.15s;
}
.btn:hover { filter: brightness(1.2); color: #fff; }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid rgba(237,238,245,0.3); }
.btn-ghost:hover { border-color: var(--blue-bright); color: var(--blue-bright); filter: none; }

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

.hero { position: relative; padding: 80px 0; overflow: hidden; }
.hero h1 { font-size: clamp(48px, 9vw, 96px); font-weight: 700; line-height: 0.9; letter-spacing: -0.03em; }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--blue), var(--purple), var(--red));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.hero p.sub { margin-top: 24px; max-width: 580px; font-size: 18px; color: var(--bone-dim); }
.hero .cta-row { margin-top: 32px; display: flex; gap: 16px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--blue-bright);
  border: 1px solid rgba(43,108,255,0.4); padding: 6px 12px; margin-bottom: 24px;
}
.badge .dot { width: 6px; height: 6px; background: var(--red); border-radius: 50%; box-shadow: 0 0 8px var(--red); }

.card {
  background: var(--void-soft);
  border: 1px solid rgba(43,108,255,0.2);
  padding: 24px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.card:hover { border-color: rgba(43,108,255,0.55); }
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.rules .rule { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid rgba(43,108,255,0.15); }
.rules .rule .n { font-family: 'JetBrains Mono', monospace; color: var(--blue-bright); font-weight: 700; min-width: 32px; }
.rules .rule .txt strong { display: block; margin-bottom: 4px; }
.rules .rule .txt span { color: var(--bone-dim); font-size: 15px; }

.form { max-width: 420px; margin: 0 auto; }
.form h2 { font-size: 32px; margin-bottom: 24px; letter-spacing: -0.02em; }
.form label { display: block; font-size: 13px; color: var(--bone-dim); margin: 16px 0 6px; }
.form input {
  width: 100%; padding: 12px 14px;
  background: var(--void-deep); border: 1px solid rgba(43,108,255,0.3);
  color: var(--bone); font-size: 15px; font-family: inherit;
}
.form input:focus { outline: none; border-color: var(--blue-bright); }
.form .btn { width: 100%; margin-top: 24px; text-align: center; }
.form .switch { text-align: center; margin-top: 16px; font-size: 14px; color: var(--bone-dim); }
.msg { padding: 12px; margin-top: 16px; font-size: 14px; }
.msg.error { background: rgba(255,45,85,0.15); border: 1px solid var(--red); color: #ff8fa3; }
.msg.ok { background: rgba(43,108,255,0.15); border: 1px solid var(--blue); color: var(--blue-bright); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid rgba(43,108,255,0.15); }
th { font-size: 12px; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.05em; }
td { font-size: 15px; }
tr:hover td { background: rgba(43,108,255,0.05); }
.rank { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); }
.rank.top { color: var(--red); }

.countdown { font-family: 'JetBrains Mono', monospace; font-size: 28px; color: var(--blue-bright); font-weight: 700; }

.center { text-align: center; }
.dim { color: var(--bone-dim); }
.gold { color: var(--gold); }
.blue { color: var(--blue-bright); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.big-num { font-size: 32px; font-weight: 700; color: var(--blue-bright); }
.footer { border-top: 1px solid rgba(43,108,255,0.2); padding: 32px 0; color: var(--bone-dim); font-size: 14px; }

@media (max-width: 640px) {
  nav .links { display: none; }
  .hero h1 { font-size: 48px; }
}