:root{
  --bg:#0f1724;
  --card:#ffffff;
  --muted:#6b7280;
  --accent:#0ea5a6;
  --container: 1100px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg,#071024 0%, #071A2B 100%);
  color:#0b1220;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

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

.site-header{
  background: linear-gradient(90deg,#071A2B,#041126);
  color:#fff;
  padding:18px 0;
  box-shadow:0 4px 18px rgba(2,6,23,0.6);
}

.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,#0ea5a6,#3ddc97);
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#022;
}

h1{font-size:20px;margin:0}
.lead{color:#c9d6df;margin:4px 0 0;font-size:14px}

.card{
  background:#fff;
  border-radius:10px;
  padding:16px;
  margin-top:16px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.25);
}

.card h2{margin:0 0 8px;font-size:18px}
.card p, .card li{color:#374151}
.card ul{padding-left:18px;margin:8px 0}
.note{background:#f1f7fb;padding:10px;border-left:4px solid var(--accent);border-radius:6px;color:#374151;margin-top:8px}

.site-footer{margin-top:18px;color:#94a3b8;font-size:14px}
.site-footer a{color:var(--accent)}

@media (max-width:900px){
  .container{padding:14px}
  .brand{flex-direction:row;align-items:center}
  .logo{width:48px;height:48px}
  h1{font-size:18px}
  .card{padding:12px}
}
@media (max-width:480px){
  .logo{width:44px;height:44px}
  h1{font-size:16px}
}