@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
:root{--bg:#FAF8F4;--ink:#1A1614;--off:#3D3530;--muted:#7A6F69;--dim:#9E9590;--border:rgba(0,0,0,.08);--amber:#F5A623;--amber-d:#D4890A;--surface:rgba(255,255,255,.7);--font:'Plus Jakarta Sans',sans-serif;--ease:cubic-bezier(.4,0,.2,1)}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--amber-d);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}

/* NAV */
.blog-nav{position:sticky;top:0;z-index:100;background:rgba(250,248,244,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0 clamp(20px,5%,80px);display:flex;align-items:center;justify-content:space-between;height:64px}
.nav-logo{font-weight:800;font-size:1.05rem;color:var(--ink);display:flex;align-items:center;gap:8px}
.nav-logo span{display:inline-block;width:26px;height:26px;background:linear-gradient(135deg,#FAC05A,#C47008);border-radius:6px}
.nav-back{font-size:.82rem;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:5px;transition:color .2s}
.nav-back:hover{color:var(--ink);text-decoration:none}
.nav-cta{background:var(--amber-d);color:#fff;padding:9px 22px;border-radius:100px;font-weight:700;font-size:.82rem;transition:.2s}
.nav-cta:hover{background:var(--amber);text-decoration:none}

/* BLOG INDEX */
.blog-hero{max-width:860px;margin:0 auto;padding:64px clamp(20px,5%,80px) 48px;text-align:center}
.blog-hero h1{font-size:clamp(1.8rem,5vw,3rem);font-weight:800;line-height:1.2;margin-bottom:16px}
.blog-hero p{font-size:1.05rem;color:var(--muted);max-width:560px;margin:0 auto}
.blog-grid{max-width:1100px;margin:0 auto;padding:0 clamp(20px,5%,80px) 80px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.blog-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:12px;transition:box-shadow .2s,transform .2s}
.blog-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.08);transform:translateY(-2px);text-decoration:none}
.blog-card-cat{background:rgba(245,166,35,.1);color:var(--amber-d);padding:4px 12px;border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;display:inline-block;width:fit-content}
.blog-card h2{font-size:1.05rem;font-weight:700;color:var(--ink);line-height:1.35}
.blog-card p{font-size:.85rem;color:var(--muted);flex:1}
.blog-card-meta{font-size:.75rem;color:var(--dim);display:flex;gap:12px}

/* ARTICLE */
.article-wrap{max-width:740px;margin:0 auto;padding:56px clamp(20px,5%,40px) 80px}
.article-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.article-cat{background:rgba(245,166,35,.1);color:var(--amber-d);padding:4px 12px;border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.article-date,.article-read{font-size:.78rem;color:var(--dim)}
.article-wrap h1{font-size:clamp(1.5rem,4vw,2.2rem);font-weight:800;line-height:1.25;margin-bottom:14px}
.article-intro{font-size:1.05rem;color:var(--off);line-height:1.75;margin-bottom:36px;padding-bottom:32px;border-bottom:1px solid var(--border)}
.article-wrap h2{font-size:1.25rem;font-weight:700;margin:38px 0 12px;color:var(--ink)}
.article-wrap h3{font-size:1rem;font-weight:700;margin:24px 0 8px;color:var(--ink)}
.article-wrap p{margin-bottom:14px;color:var(--off)}
.article-wrap ul,.article-wrap ol{padding-left:22px;margin-bottom:14px;color:var(--off)}
.article-wrap li{margin-bottom:7px}
.article-wrap strong{color:var(--ink)}
.tip{background:rgba(245,166,35,.08);border-left:3px solid var(--amber);padding:14px 18px;border-radius:0 8px 8px 0;margin:20px 0}
.tip p{margin:0;font-size:.9rem}
.data-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:24px 0}
.data-box p{margin:0;font-size:.9rem}

/* CTA */
.article-cta{background:linear-gradient(135deg,#1A1614 0%,#2D2420 100%);border-radius:20px;padding:40px 36px;margin-top:56px;text-align:center}
.article-cta h3{color:#fff;font-size:1.25rem;font-weight:800;margin-bottom:8px}
.article-cta p{color:rgba(255,255,255,.55);margin-bottom:24px;font-size:.9rem}
.article-cta a{background:var(--amber-d);color:#fff;padding:14px 32px;border-radius:100px;font-weight:700;font-size:.95rem;display:inline-block;transition:.2s}
.article-cta a:hover{background:var(--amber);text-decoration:none}

/* FOOTER */
.blog-footer{text-align:center;padding:28px;font-size:.78rem;color:var(--dim);border-top:1px solid var(--border);margin-top:0}
.blog-footer a{color:var(--dim)}

@media(max-width:600px){.blog-grid{grid-template-columns:1fr}.nav-cta{display:none}}