:root{
  --bg: #0B1524;
  --bg-2: #0F1D30;
  --surface: #182D4B;
  --blue: #218DC9;
  --petrol: #0078A0;
  --turq: #1FA5BA;
  --white: #FFFFFF;
  --muted: #9FB3CC;
  --line: rgba(255,255,255,0.08);
  --gutter: clamp(24px, 4vw, 88px);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--white); font-family:'Montserrat',sans-serif;
  font-weight:400; line-height:1.65; overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1600px; margin:0 auto; padding:0 var(--gutter);}

header{position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background:rgba(11,21,36,0.92); backdrop-filter:blur(10px);}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px var(--gutter);}
.logo img{height:40px; width:auto; display:block;}
.nav-back{
  flex-shrink:0; white-space:nowrap;
  font-size:13px; font-weight:600; letter-spacing:0.5px; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line); padding:10px 18px; border-radius:8px; transition:all .2s;
}
.nav-back:hover{color:var(--white); border-color:var(--blue);}
@media(max-width:480px){
  .nav{padding:14px var(--gutter);}
  .logo img{height:30px;}
  .nav-back{font-size:11px; padding:8px 12px;}
}

article{padding-top:64px; padding-bottom:40px;}
.article-head{max-width:720px; margin:0 auto 48px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--turq); margin-bottom:20px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--turq);}
.article-head h1{font-size:clamp(28px,4.2vw,42px); font-weight:700; letter-spacing:-0.5px; line-height:1.16; margin-bottom:16px;}
.article-meta{color:var(--muted); font-size:14px;}

.article-body{max-width:720px; margin:0 auto;}
.article-body p{color:var(--muted); font-weight:300; font-size:17px; margin-bottom:22px;}
.article-body h2{font-size:24px; font-weight:700; margin:44px 0 16px; letter-spacing:-0.3px;}
.article-body h3{font-size:19px; font-weight:600; margin:32px 0 12px;}
.article-body ul, .article-body ol{color:var(--muted); font-weight:300; font-size:17px; margin:0 0 22px 22px;}
.article-body li{margin-bottom:10px;}
.article-body strong{color:var(--white); font-weight:600;}

.cta-box{
  max-width:720px; margin:56px auto 0; padding:32px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-2); text-align:center;
}
.cta-box p{color:var(--muted); margin-bottom:20px; font-size:16px;}
.btn-primary{
  display:inline-block; background:var(--blue); color:var(--white); font-weight:600; font-size:14px;
  letter-spacing:0.5px; text-transform:uppercase; padding:14px 28px; border-radius:8px; transition:background .2s;
}
.btn-primary:hover{background:var(--petrol);}

.back-link{display:block; max-width:720px; margin:32px auto 0; color:var(--muted); font-size:14px;}
.back-link:hover{color:var(--turq);}

.blog-index{padding-top:64px; padding-bottom:100px;}
.blog-index h1{font-size:clamp(30px,4.5vw,44px); font-weight:700; letter-spacing:-0.5px; margin-bottom:44px;}
.post-list{max-width:760px; display:flex; flex-direction:column; gap:0;}
.post-card{padding:28px 0; border-bottom:1px solid var(--line);}
.post-card h2{font-size:21px; font-weight:600; margin-bottom:8px;}
.post-card h2 a:hover{color:var(--turq);}
.post-card p{color:var(--muted); font-weight:300; font-size:15px;}

footer{padding:28px 0 32px; border-top:1px solid var(--line); margin-top:40px;}
.footer-grid{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; padding-bottom:28px; border-bottom:1px solid var(--line); margin-bottom:24px; font-size:14px; color:var(--muted);}
.footer-grid a:hover{color:var(--white);}
footer .copy{color:var(--muted); font-size:13px; font-weight:300; text-align:center;}

@media(max-width:640px){
  .footer-grid{flex-direction:column; align-items:flex-start;}
}