*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#10B981;
  --brand-dark:#059669;
  --bg:#F9FAFB;
  --card:#fff;
  --text:#111827;
  --text2:#6B7280;
  --text3:#9CA3AF;
  --border:#E5E7EB;
  --radius:16px;
  --max-w:680px;
}
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0F172A;
    --card:#1E293B;
    --text:#F1F5F9;
    --text2:#94A3B8;
    --text3:#64748B;
    --border:#334155;
  }
}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 24px;
}

/* ── Navbar ── */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:48px;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:20px;
  font-weight:800;
  color:var(--text);
  text-decoration:none;
}
.nav-brand:hover{text-decoration:none}
.nav-brand svg{flex-shrink:0}
.nav-links{display:flex;gap:24px;font-size:14px;font-weight:500}
.nav-links a{color:var(--text2)}
.nav-links a:hover{color:var(--brand)}

/* ── Hero ── */
.hero{text-align:center;padding:40px 0 56px}
.hero h1{font-size:clamp(32px,5vw,48px);font-weight:800;line-height:1.15;margin-bottom:16px}
.hero h1 span{color:var(--brand)}
.hero p{font-size:18px;color:var(--text2);max-width:480px;margin:0 auto 32px}
.badges{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--text);color:var(--bg);
  padding:12px 24px;border-radius:12px;
  font-weight:600;font-size:15px;
  transition:transform .15s;
}
.badge:hover{transform:translateY(-2px);text-decoration:none}
.badge svg{flex-shrink:0}

/* ── Features grid ── */
.features{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;
  padding:48px 0;
}
.feat{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
}
.feat-icon{
  width:44px;height:44px;border-radius:12px;
  background:rgba(16,185,129,.12);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;
  font-size:22px;
}
.feat h3{font-size:16px;font-weight:700;margin-bottom:6px}
.feat p{font-size:14px;color:var(--text2);line-height:1.5}

/* ── Legal pages ── */
.legal{padding:0 0 64px}
.legal h1{font-size:28px;font-weight:800;margin-bottom:8px}
.legal .updated{font-size:13px;color:var(--text3);margin-bottom:32px}
.legal h2{font-size:18px;font-weight:700;margin:32px 0 12px}
.legal p,.legal ul{font-size:15px;color:var(--text2);line-height:1.7;margin-bottom:16px}
.legal ul{padding-left:24px}
.legal li{margin-bottom:8px}
.legal a{color:var(--brand)}

/* ── Support page ── */
.support-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:32px;margin-bottom:24px;
}
.support-card h2{font-size:18px;font-weight:700;margin-bottom:12px}
.support-card p{font-size:15px;color:var(--text2);line-height:1.6}
.support-card a{font-weight:600}

/* ── Join page ── */
.join-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:48px 32px;
  text-align:center;max-width:420px;margin:80px auto;
}
.join-icon{
  width:80px;height:80px;border-radius:24px;
  background:rgba(16,185,129,.12);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:20px;font-size:36px;
}
.join-card h1{font-size:22px;font-weight:700;margin-bottom:8px}
.join-card p{font-size:15px;color:var(--text2);margin-bottom:24px}
.join-code{
  display:inline-block;
  font-size:28px;font-weight:800;letter-spacing:4px;
  color:var(--brand);
  background:rgba(16,185,129,.08);
  padding:12px 24px;border-radius:12px;
  margin-bottom:24px;
}
.open-btn{
  display:inline-block;
  background:var(--brand);color:#fff;
  padding:14px 32px;border-radius:12px;
  font-weight:700;font-size:16px;
  border:none;cursor:pointer;
  transition:background .15s;
  margin-bottom:16px;
}
.open-btn:hover{background:var(--brand-dark);text-decoration:none}
.join-badges{margin-top:24px;padding-top:24px;border-top:1px solid var(--border)}
.join-badges p{font-size:13px;color:var(--text3);margin-bottom:12px}

/* ── Footer ── */
.footer{
  border-top:1px solid var(--border);
  padding:24px 0;margin-top:48px;
  text-align:center;
  font-size:13px;color:var(--text3);
}
.footer-links{display:flex;gap:20px;justify-content:center;margin-bottom:8px}
.footer-links a{color:var(--text3);font-weight:500}
.footer-links a:hover{color:var(--brand)}