:root{
  --bg:#f5f7fa;
  --card:#ffffff;
  --text:#222;
  --primary:#346ffd;
  --error:#ff3b30;
  --border:#e4e7eb;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0d0f;
    --card:#1a1a1c;
    --text:#fff;
    --primary:#5291ff;
    --error:#ff5e57;
    --border:#333;
  }
}
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
body{
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--border);
}
header h1{
  color:var(--primary);
}
nav a{
  margin-left:16px;
  color:var(--text);
  text-decoration:none;
  font-weight:500;
}
.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px 24px;
}
.hero h2{
  font-size:32px;
  margin-bottom:16px;
}
.hero p{
  font-size:18px;
  margin-bottom:32px;
  opacity:.8;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 24px;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:.2s;
}
.btn:hover{
  opacity:.9;
}
footer{
  text-align:center;
  padding:24px;
  font-size:14px;
  opacity:.6;
}