:root{
  --bg:#0b0f14;
  --surface:#111827;
  --card:#0f172a;
  --border:rgba(255,255,255,.10);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --accent:#60a5fa;
  --accent2:#22c55e;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --max:980px;
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fa;
    --surface:#ffffff;
    --card:#ffffff;
    --border:rgba(0,0,0,.10);
    --text:#111827;
    --muted:#4b5563;
    --accent:#2563eb;
    --accent2:#16a34a;
    --shadow:0 12px 26px rgba(16,24,40,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background:radial-gradient(900px 450px at 50% -120px, rgba(96,165,250,.18), rgba(96,165,250,0) 65%), var(--bg);
  color:var(--text);
  line-height:1.55;
}

a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

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

.header{
  display:flex;gap:16px;align-items:center;justify-content:space-between;
  padding:28px 0 18px;
}

.brand{display:flex;align-items:center;gap:14px}
.avatar{
  width:64px;height:64px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.subtitle{margin:6px 0 0;color:var(--muted)}
.links{display:flex;gap:14px;flex-wrap:wrap}

.hero{
  margin:18px auto 0;
  padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.section{padding:28px 0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}

.card{
  padding:16px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.meta{color:var(--muted)}
.muted{color:var(--muted)}

.clean{list-style:none;margin:0;padding:0}
.clean li{margin:8px 0}

.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
}
.btn.primary{background:var(--accent);border-color:transparent;color:white}

.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.footer{padding:26px 0 40px;color:var(--muted)}