:root{--bg:#fff;--fg:#111;--muted:#6b7280;--border:#e5e7eb;--card:#f9fafb;--accent:#0f172a}
*{box-sizing:border-box}
html{font-size:16px}
body{
  margin:0;
  font-family:"Inter","IBM Plex Sans","Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
a{color:inherit;text-decoration:none}
a.btn{display:inline-block;padding:.6rem .9rem;border-radius:.55rem;border:1px solid var(--fg)}
a.btn:hover{background:var(--fg);color:#fff}
.container{max-width:1160px;margin:0 auto;padding:0 1rem}
header.site-header{position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);z-index:50}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem}
.brand img{height:84px}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-links a{padding:.3rem .45rem;border-radius:.35rem}
.nav-links a:hover{background:var(--card)}
.hero{
  padding:2.1rem 0 1rem;border-bottom:1px solid var(--border);
  background:
    radial-gradient(circle at 10% 5%, rgba(15,23,42,.04), transparent 45%),
    radial-gradient(circle at 90% 0%, rgba(15,23,42,.03), transparent 55%),
    linear-gradient(180deg,#fff,#fafafa)
}
.hero h1{font-size:1.9rem;margin:0 0 .4rem;letter-spacing:.2px}
.tagline{font-weight:600;letter-spacing:.04em;font-variant:all-small-caps;color:var(--accent);margin:.1rem 0 .2rem;font-size:1.1rem}
.hero p.lead{color:var(--muted);max-width:60rem;margin:.15rem 0 .6rem}
.section{padding:1.5rem 0;border-bottom:1px solid var(--border)}
.section h2{font-size:1.3rem;margin:0 0 .6rem}
.grid{display:grid;gap:.8rem}
.grid.cols-2{grid-template-columns:1fr 1fr}
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem}
ul.clean{padding-left:1.1rem;margin:.4rem 0}ul.clean li{margin:.2rem 0}
footer.site-footer{padding:1.6rem 0;color:var(--muted)}
.small{font-size:.92rem}
.badge{font-size:.75rem;border:1px solid var(--border);border-radius:.4rem;padding:.1rem .4rem;color:var(--muted)}
@media (max-width: 780px){
  .grid.cols-2{grid-template-columns:1fr}
  .hero{padding:1.6rem 0 .9rem}
  .hero h1{font-size:1.6rem}
}