/* === blog-style.css === */
:root{--primary:#0ea5e9;--accent:#10b981;--dark:#0f172a;--dark-2:#1e293b;--text:#e2e8f0;--text-muted:#94a3b8;--white:#ffffff;--gradient:linear-gradient(135deg,#0ea5e9 0%,#10b981 100%);--radius:16px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;scroll-behavior:smooth;}
body{font-family:'Open Sans',sans-serif;background:var(--dark);color:var(--text);line-height:1.7;}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;font-weight:700;line-height:1.3;}
a{color:var(--primary);text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
strong,b{font-weight:700;}
.container{width:100%;max-width:1100px;margin:0 auto;padding:0 20px;}

/* NAV */
.navbar{background:rgba(15,23,42,0.98);border-bottom:1px solid rgba(14,165,233,0.2);padding:14px 0;position:sticky;top:0;z-index:100;}
.nav-container{display:flex;align-items:center;justify-content:space-between;max-width:1100px;margin:0 auto;padding:0 20px;}
.nav-logo{display:flex;align-items:center;gap:10px;color:var(--white);font-family:'Montserrat',sans-serif;font-weight:900;font-size:18px;}
.nav-logo img{border-radius:50%;border:2px solid var(--primary);width:36px;height:36px;}
.nav-links-blog{display:flex;align-items:center;gap:20px;}
.nav-links-blog a{color:var(--text-muted);font-size:14px;font-weight:600;transition:color 0.2s;}
.nav-links-blog a:hover{color:var(--primary);}
.btn-nav{background:var(--gradient);color:var(--white) !important;font-family:'Montserrat',sans-serif;font-weight:700;padding:10px 22px;border-radius:50px;font-size:14px;min-height:44px;display:inline-flex;align-items:center;}

/* BLOG LAYOUT */
.blog-main{padding:60px 0 80px;}
.blog-container{max-width:1100px;margin:0 auto;padding:0 20px;display:grid;grid-template-columns:1fr 280px;gap:40px;align-items:start;}
.blog-article{max-width:760px;}
.article-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.blog-tag{display:inline-block;background:rgba(14,165,233,0.15);border:1px solid rgba(14,165,233,0.3);color:var(--primary);font-size:11px;font-weight:700;padding:4px 14px;border-radius:50px;font-family:'Montserrat',sans-serif;letter-spacing:1px;}
.meta-date{font-size:13px;color:var(--text-muted);}
.blog-article h1{font-size:clamp(26px,3.5vw,38px);color:var(--white);margin-bottom:20px;}
.article-intro{font-size:17px;color:var(--text);margin-bottom:32px;padding:20px;background:rgba(14,165,233,0.07);border-left:4px solid var(--primary);border-radius:0 8px 8px 0;}
.blog-article h2{font-size:clamp(20px,2.5vw,26px);color:var(--white);margin:36px 0 14px;}
.blog-article h3{font-size:18px;color:var(--primary);margin:24px 0 10px;}
.blog-article p{color:var(--text-muted);margin-bottom:16px;font-size:15px;line-height:1.8;}
.blog-article ul{list-style:none;margin:0 0 20px;padding:0;}
.blog-article ul li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.06);font-size:15px;color:var(--text-muted);}
.blog-article ul li:last-child{border-bottom:none;}

/* CTA Box */
.cta-box{background:linear-gradient(135deg,rgba(14,165,233,0.12) 0%,rgba(16,185,129,0.08) 100%);border:1px solid rgba(14,165,233,0.3);border-radius:16px;padding:28px;text-align:center;margin:32px 0;}
.cta-box p{color:var(--text);font-size:16px;margin-bottom:14px;}
.btn-cta{display:inline-block;background:var(--gradient);color:var(--white);font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;padding:14px 32px;border-radius:50px;transition:transform 0.2s,box-shadow 0.2s;box-shadow:0 4px 20px rgba(14,165,233,0.4);min-height:48px;}
.btn-cta:hover{transform:scale(1.04);box-shadow:0 8px 32px rgba(14,165,233,0.6);}
.cta-note{font-size:13px;color:var(--text-muted);margin-top:10px;margin-bottom:0;}

/* Internal Links */
.internal-links{background:var(--dark-2);border:1px solid rgba(14,165,233,0.15);border-radius:12px;padding:24px;margin-top:40px;}
.internal-links h3{font-size:17px;color:var(--white);margin-bottom:14px;}
.internal-links ul{list-style:none;}
.internal-links ul li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.internal-links ul li:last-child{border-bottom:none;}
.internal-links ul li a{color:var(--primary);font-size:14px;font-weight:600;}

/* SIDEBAR */
.blog-sidebar{position:sticky;top:80px;}
.sidebar-cta{background:var(--dark-2);border:1px solid rgba(14,165,233,0.2);border-radius:16px;padding:24px;text-align:center;margin-bottom:24px;}
.sidebar-cta img{max-height:150px;margin:0 auto 16px;object-fit:contain;}
.sidebar-cta h3{font-size:18px;color:var(--white);margin-bottom:8px;}
.sidebar-cta p{font-size:13px;color:var(--text-muted);margin-bottom:14px;}
.sidebar-cta .btn-cta{display:block;width:100%;}
.sidebar-posts{background:var(--dark-2);border:1px solid rgba(14,165,233,0.15);border-radius:12px;padding:20px;}
.sidebar-posts h4{font-size:15px;color:var(--white);margin-bottom:14px;}
.sidebar-posts a{display:block;color:var(--primary);font-size:14px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.07);}
.sidebar-posts a:last-child{border-bottom:none;}
.sidebar-posts a:hover{color:var(--accent);}

/* FOOTER */
.footer{background:#070e1a;border-top:1px solid rgba(14,165,233,0.1);padding:32px 0;text-align:center;}
.footer p{font-size:13px;color:var(--text-muted);margin-bottom:6px;}
.footer a{color:var(--primary);}

@media(max-width:767px){
  .blog-container{grid-template-columns:1fr;}
  .blog-sidebar{position:static;}
  .nav-links-blog a:not(.btn-nav){display:none;}
}