:root{
  --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --accent:#4f46e5;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#0f172a,#1e293b); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column;
}
.container{width:min(960px,90%); margin:0 auto; padding:0 16px}
.hero{text-align:center; padding:64px 0 40px}
.logo{font-size:1.1rem; font-weight:700; letter-spacing:.5px; opacity:.9}
.logo span{color:var(--muted)}
h1{font-size:clamp(2.2rem,6vw,3.5rem); margin:16px 0 8px; font-weight:800}
.tagline{color:var(--muted); font-size:1.15rem}
.note{color:var(--muted); font-size:.9rem; text-align:center; margin:10px 0 32px}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; padding-bottom:48px}
.card{background:var(--card); border:1px solid #334155; border-radius:14px; padding:24px}
.card h2{font-size:1.2rem; margin-bottom:8px; color:var(--accent)}
.card p{color:var(--muted); line-height:1.6}
footer{margin-top:auto; border-top:1px solid #334155; padding:20px 0; text-align:center; color:var(--muted); font-size:.9rem}