:root{
  --brand:#00b4a6; --brand-hover:#00968a; --brand-light:#e6f7f6;
  --ink:#0f172a; --body:#334155; --muted:#64748b; --border:#e2e8f0; --bg:#fafafa;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.nav-inner{max-width:72rem; margin:0 auto; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.25rem; color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{height:2rem; width:2rem}
.nav-links{display:flex; align-items:center; gap:1.75rem}
.nav-links a{color:#475569; font-weight:600; font-size:.875rem}
.nav-links a:hover{color:var(--brand); text-decoration:none}

/* layout */
.container{max-width:46rem; margin:0 auto; padding:3rem 1.5rem}

/* article */
article h1{font-size:2.25rem; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:0 0 1rem}
article h2{font-size:1.5rem; font-weight:800; letter-spacing:-.01em; margin:2.5rem 0 .75rem}
article h3{font-size:1.15rem; font-weight:700; margin:1.75rem 0 .5rem}
article p{color:var(--body); margin:0 0 1.15rem}
article ul,article ol{color:var(--body); margin:0 0 1.15rem; padding-left:1.4rem}
article li{margin:.4rem 0}
article strong{color:var(--ink); font-weight:700}
article code{background:var(--brand-light); color:var(--brand-hover); padding:.1rem .4rem; border-radius:.35rem; font-size:.9em}
.lead{font-size:1.2rem; color:var(--muted); margin-bottom:1rem}
.meta{font-size:.85rem; color:var(--muted); margin-bottom:2rem}

/* CTA */
.cta{margin:2.75rem 0 1rem; padding:2rem; border-radius:1.5rem; background:var(--brand); color:#fff; text-align:center}
.cta p{color:rgba(255,255,255,.92); margin:0 0 1.25rem; font-size:1.05rem; font-weight:500}
.btn{display:inline-block; background:#fff; color:var(--brand); font-weight:700; padding:.8rem 1.75rem; border-radius:1rem}
.btn:hover{text-decoration:none; background:#f1f5f9}

/* blog index cards */
.page-head{text-align:center; margin-bottom:2.5rem}
.page-head h1{font-size:2.5rem; font-weight:800; letter-spacing:-.02em; margin:0 0 .5rem}
.page-head p{color:var(--muted); font-size:1.15rem; margin:0}
.post-card{display:block; padding:1.75rem; border:1px solid var(--border); border-radius:1.5rem; background:#fff; margin-bottom:1.25rem; transition:box-shadow .2s, transform .2s}
.post-card:hover{text-decoration:none; box-shadow:0 12px 32px rgba(0,0,0,.06); transform:translateY(-2px)}
.post-card h2{margin:0 0 .5rem; font-size:1.3rem; color:var(--ink); font-weight:700}
.post-card p{margin:0; color:var(--muted)}
.post-card .more{color:var(--brand); font-weight:600; font-size:.9rem; display:inline-block; margin-top:.75rem}

/* footer */
.footer{border-top:1px solid var(--border); background:#fff; padding:3rem 1.5rem; margin-top:3rem}
.footer-inner{max-width:72rem; margin:0 auto; text-align:center; color:#94a3b8; font-size:.85rem}
.footer-links{display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.5rem}
.footer-links a{color:#64748b; font-weight:500}

@media (max-width:640px){
  article h1{font-size:1.75rem}
  .page-head h1{font-size:2rem}
  .nav-links{gap:1rem}
  .brand span{display:none}
}