:root{
  --navy-950:#060e1f; --navy-900:#0a1630; --navy-800:#11214a; --navy-700:#1b2f63;
  --gold-500:#c9a55c; --gold-400:#dcbd7b; --gold-100:#f5ecd8;
  --sand:#f7f4ee; --ink:#0f1a2e; --muted:#5b6479; --line:#e6e1d6;
  --wa:#1faa53; --wa-dark:#178a43; --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:400 17px/1.75 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{font-family:Outfit,Inter,sans-serif;line-height:1.18;letter-spacing:-.01em}
.wrap{max-width:1160px;margin:0 auto;padding:0 20px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 Inter,sans-serif;text-decoration:none;padding:17px 26px;border-radius:999px;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dark)}

.header{position:sticky;top:0;z-index:50;background:rgba(10,22,48,.96);border-bottom:1px solid rgba(255,255,255,.06)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand img{width:34px;height:47px;object-fit:contain}
.brand strong{font:700 20px/1 Outfit,sans-serif;letter-spacing:.14em;color:var(--gold-400)}
.nav{display:flex;gap:28px}
.nav a{color:rgba(255,255,255,.8);text-decoration:none;font-weight:500;font-size:15px}
.nav a:hover,.nav a[aria-current]{color:var(--gold-400)}
.header .btn{padding:12px 20px;font-size:14px}

.page-hero{background:linear-gradient(180deg,var(--navy-900),var(--navy-950));color:#fff;padding:56px 0 64px}
.crumbs{font-size:14px;color:rgba(255,255,255,.6);margin-bottom:18px}
.crumbs a{color:rgba(255,255,255,.8);text-decoration:none}
.crumbs a:hover{color:var(--gold-400)}
.page-hero .tag{display:inline-block;font:600 12px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-400);margin-bottom:14px}
.page-hero h1{font-size:clamp(30px,4.6vw,48px);max-width:860px}
.page-hero p{color:rgba(255,255,255,.72);margin-top:16px;max-width:720px;font-size:18px}
.meta{margin-top:20px;font-size:14px;color:rgba(255,255,255,.55)}

.article{max-width:760px;margin:0 auto;padding:56px 20px 24px}
.article p,.article ul,.article ol,.article table{margin-bottom:22px}
.article h2{font-size:clamp(24px,3vw,30px);margin:44px 0 16px}
.article h3{font-size:21px;margin:30px 0 10px}
.article ul,.article ol{padding-left:22px}
.article li{margin-bottom:8px}
.article strong{color:var(--navy-900);font-weight:600}
.article a{color:var(--navy-700);font-weight:600;text-decoration:underline;text-decoration-color:var(--gold-500);text-decoration-thickness:2px;text-underline-offset:3px}
.article a:hover{color:var(--gold-500)}
.article table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.article th,.article td{border-bottom:1px solid var(--line);padding:12px 14px;text-align:left;vertical-align:top}
.article th{background:var(--sand);font-weight:600}

.cta-box{max-width:760px;margin:24px auto 64px;background:linear-gradient(135deg,var(--navy-800),var(--navy-950));color:#fff;border-radius:24px;padding:36px;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.cta-box h2{font-size:26px}
.cta-box p{color:rgba(255,255,255,.72)}
.cta-wrap{padding:0 20px}

.related{background:var(--sand);padding:64px 0}
.related h2{font-size:28px;margin-bottom:28px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.post:hover{transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(6,14,31,.35)}
.post .tag{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-500);margin-bottom:12px}
.post h3{font-size:20px;margin-bottom:10px}
.post p{font-size:15px;color:var(--muted);margin-bottom:18px;line-height:1.6}
.post .more{margin-top:auto;font-weight:600;color:var(--navy-800)}
.blog-list{padding:64px 0 88px}

.footer{background:var(--navy-950);color:rgba(255,255,255,.65);padding:40px 0 110px;font-size:14px}
.footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer a{color:var(--gold-400);text-decoration:none}

.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;width:62px;height:62px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(31,170,83,.8)}
.wa-float svg{width:32px;height:32px;color:#fff}

@media (max-width:1024px){.nav{display:none}.posts{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .header .btn span{display:none}.header .btn{padding:11px 14px}
  .posts{grid-template-columns:1fr}
  .cta-box{padding:28px 22px}
  .article{padding-top:40px}
}