:root{
  --ink:#22333b;
  --ink-soft:#51606a;
  --brand:#2e6e63;
  --brand-dark:#22554c;
  --brand-soft:#e7f1ee;
  --sand:#faf7f2;
  --card:#ffffff;
  --accent:#c98d5f;
  --wa:#25d366;
  --radius:18px;
  --shadow:0 6px 24px rgba(34,51,59,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Heebo',system-ui,sans-serif;color:var(--ink);background:var(--sand);line-height:1.7;font-size:17px}
img{max-width:100%;display:block}
a{color:var(--brand)}
h1,h2,h3{line-height:1.25;font-weight:900;text-wrap:balance}
h2{font-size:clamp(1.6rem,3.5vw,2.3rem);margin-bottom:.5rem}
.sub{color:var(--ink-soft);max-width:640px;margin-inline:auto;text-wrap:balance}
section{padding:56px 20px}
.wrap{max-width:1080px;margin-inline:auto}
.center{text-align:center}

/* ===== header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(250,247,242,.92);backdrop-filter:blur(8px);border-bottom:1px solid #eee4d8}
.nav{max-width:1080px;margin-inline:auto;display:flex;align-items:center;gap:18px;padding:10px 20px}
.nav img{height:46px;width:auto}
.nav nav{display:flex;gap:4px;flex-wrap:wrap;margin-inline-start:auto}
.nav nav a{color:var(--ink);text-decoration:none;font-weight:500;padding:6px 10px;border-radius:8px;font-size:.95rem}
.nav nav a:hover{background:var(--brand-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:#fff;text-decoration:none;font-weight:700;padding:12px 22px;border-radius:999px;transition:.2s;box-shadow:var(--shadow);border:none;cursor:pointer;font-family:inherit;font-size:1rem}
.btn:hover{background:var(--brand-dark);transform:translateY(-1px)}
.btn.wa{background:var(--wa)}
.btn.wa:hover{background:#1fb959}
.btn.ghost{background:transparent;color:var(--brand);border:2px solid var(--brand);box-shadow:none}
.btn.small{padding:8px 16px;font-size:.9rem}
.btn svg{width:20px;height:20px;fill:currentColor;flex-shrink:0}

/* ===== covers ===== */
.cover{background:linear-gradient(135deg,#f4f9f7,#e7f1ee);border-radius:14px;display:grid;place-items:center;margin-bottom:18px;padding:12px 10px}
.post-card .cover svg{width:170px;height:100px}
.post .cover{padding:20px 10px;margin-bottom:26px}
.post .cover svg{width:240px;height:140px}

/* ===== blog index ===== */
.posts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;max-width:920px;margin-inline:auto}
.post-card{background:#fff;border-radius:var(--radius);padding:30px 28px;box-shadow:var(--shadow);display:flex;flex-direction:column;text-align:center;transition:.2s}
.post-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(34,51,59,.12)}
.post-card h3{font-size:1.15rem;margin-bottom:6px}
.post-card h3 a{color:var(--ink);text-decoration:none}
.post-card h3 a:hover{color:var(--brand-dark)}
.post-card .date{font-size:.85rem;color:var(--accent);font-weight:700;margin-bottom:12px}
.post-card p{color:var(--ink-soft);font-size:.95rem;flex:1;text-wrap:balance}
.post-card .more{margin-top:18px}

/* ===== article ===== */
.post{max-width:760px;margin-inline:auto;background:#fff;border-radius:var(--radius);padding:44px 38px 38px;box-shadow:var(--shadow);text-align:start}
.post h1{font-size:clamp(1.4rem,3.2vw,1.9rem);text-align:center;margin-bottom:8px}
.post .date{color:var(--accent);font-weight:700;font-size:.9rem;text-align:center;margin-bottom:28px}
.post p{margin-bottom:16px;color:var(--ink)}
.post ul,.post ol{margin-bottom:16px;padding-inline-start:24px}
.post li{margin-bottom:12px;color:var(--ink)}
.post .highlight{background:var(--brand-soft);border-radius:14px;padding:16px 20px;margin-bottom:16px}
.post-cta{background:linear-gradient(135deg,#22554c,#2e6e63);color:#fff;border-radius:var(--radius);padding:30px 26px;margin-top:36px;text-align:center}
.post-cta h3{margin-bottom:8px}
.post-cta p{margin-bottom:18px;opacity:.92;color:#fff;text-wrap:balance}
.back-to-blog{text-align:center;margin-top:28px}

footer{background:var(--ink);color:#cfd8dc;text-align:center;padding:28px 20px;font-size:.9rem}
footer a{color:#cfd8dc}

.fab{position:fixed;bottom:22px;inset-inline-end:22px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.fab svg{width:30px;height:30px;fill:#fff}

@media (max-width:860px){
  .nav nav{display:none}
  section{padding:40px 16px}
  .posts{grid-template-columns:1fr}
  .post{padding:32px 22px 28px}
}