:root {
--bg: #061d3a; --surface: #0b2a52; --border: #2a5188; --text: #f3f7fc;
--text2: #c7d5e6; --lime: #9bc51e; --cyan: #2ba3f0;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
main { max-width: 1200px; margin: 0 auto; padding: 2rem; }
section { margin: 4rem 0; }
h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 2rem; color: var(--lime); margin-bottom: 1rem; }
p { color: var(--text2); margin-bottom: 1rem; }
.hero { text-align: center; padding: 3rem 0; }
.badges { display: flex; gap: 1rem; justify-content: center; margin: 2rem 0; }
.badge { padding: 1rem 1.5rem; background: #000; border-radius: 8px; opacity: 0.6; }
#waitlist { max-width: 400px; margin: 2rem auto; display: flex; flex-direction: column; gap: 1rem; }
#waitlist input[type="email"] { padding: 1rem; background: var(--surface); border: 2px solid var(--border); border-radius: 8px; color: var(--text); font-size: 1rem; }
#waitlist button { padding: 1rem; background: var(--lime); color: var(--bg); border: none; border-radius: 8px; font-weight: 600; cursor: pointer; }
#waitlist label { font-size: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.unclaimed { background: var(--surface); padding: 2rem; border-radius: 12px; }
.unclaimed .highlight { color: var(--lime); font-weight: 600; font-size: 1.125rem; }
.fee { background: var(--surface); padding: 3rem; border-radius: 16px; border: 2px solid var(--lime); }
.fee .headline { font-size: 1.5rem; color: var(--lime); font-weight: 700; }
.fee .example { margin: 2rem 0; padding: 1.5rem; background: rgba(155,197,30,0.1); border-radius: 12px; border-left: 4px solid var(--lime); }
.fee .label { font-size: 0.875rem; font-style: italic; margin-top: 1rem; }
.clubs { background: var(--surface); padding: 2rem; border-radius: 12px; }
footer { background: var(--surface); padding: 2rem; text-align: center; margin-top: 4rem; border-top: 1px solid var(--border); }
footer .links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; align-items: center; }
footer a { color: var(--text2); text-decoration: none; }
footer #langSwitch { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 0.5rem; border-radius: 4px; }
footer .spl { font-size: 2rem; font-weight: 900; color: var(--lime); letter-spacing: 0.1em; }
@media (max-width: 768px) { h1 { font-size: 2rem; } main { padding: 1rem; } .badges { flex-direction: column; } }