*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0b0d14;--surface:#141726;--surface2:#1a1e30;--border:#252a3d;--border2:#2e3450;
  --text:#e8eaf4;--text2:#8b92ad;--text3:#565d7a;
  --primary:#6381fa;--primary-hover:#7b94ff;--primary-light:rgba(99,129,250,.1);--primary-glow:rgba(99,129,250,.25);
  --success:#34d399;--warning:#fbbf24;--danger:#ef4444;
  --grad-text:linear-gradient(120deg,#6cc9f0 0%,#9a8cff 28%,#c569e6 54%,#ef6a8f 78%,#f0976d 100%);
  --grad-brand:linear-gradient(120deg,#219ad2 0%,#5e1fb5 42%,#b3317b 73%,#ed4b6e 100%);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --radius:10px;--radius-lg:16px;
}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.65;overflow-x:hidden}
a{color:var(--primary);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:760px;margin:0 auto;padding:0 24px}

/* ===== NAV ===== */
nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(11,13,20,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:0 32px;height:64px;display:flex;align-items:center;justify-content:space-between}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:1.15rem;font-weight:700;color:#fff;letter-spacing:-.3px}
.nav-logo svg{width:28px;height:28px}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{color:var(--text2);font-size:.88rem;font-weight:500;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{background:var(--primary);color:#fff!important;padding:9px 22px;border-radius:var(--radius);font-weight:600;transition:all .2s;font-size:.88rem}
.nav-cta:hover{background:var(--primary-hover);box-shadow:0 4px 20px var(--primary-glow)}

/* ===== BLOG HEADER ===== */
.blog-head{padding:120px 24px 40px;text-align:center;position:relative;overflow:hidden}
.blog-head::before{content:'';position:absolute;left:50%;top:-40px;transform:translateX(-50%);width:760px;height:380px;background:radial-gradient(circle,rgba(154,140,255,.14),rgba(197,105,230,.05) 45%,transparent 70%);pointer-events:none;filter:blur(54px)}
.blog-head .eyebrow{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:2.5px;color:var(--primary);margin-bottom:14px;position:relative}
.blog-head h1{font-size:2.4rem;font-weight:800;letter-spacing:-.5px;line-height:1.15;margin-bottom:14px;position:relative}
.blog-head h1 .gr{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.blog-head p{color:var(--text2);font-size:1.05rem;max-width:560px;margin:0 auto;line-height:1.7;position:relative}

/* ===== BLOG LIST ===== */
.blog-list{max-width:820px;margin:8px auto 0;padding:0 24px 100px;display:grid;gap:20px}
.post-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 30px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.post-card:hover{transform:translateY(-4px);border-color:var(--border2);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.post-card .post-meta{font-size:.78rem;color:var(--text3);margin-bottom:10px;display:flex;gap:12px;flex-wrap:wrap}
.post-card h2{font-size:1.4rem;font-weight:800;letter-spacing:-.3px;line-height:1.25;color:var(--text);margin-bottom:10px}
.post-card:hover h2{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.post-card p{color:var(--text2);font-size:.95rem;line-height:1.65;margin-bottom:14px}
.post-card .read-more{color:var(--primary);font-size:.88rem;font-weight:600}

/* ===== ARTICLE ===== */
.article-wrap{padding:104px 24px 60px}
.breadcrumb{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:none;height:auto;display:block;max-width:760px;margin:0 auto 22px;padding:0;font-size:.82rem;color:var(--text3)}
.breadcrumb a{color:var(--text2)}
.breadcrumb a:hover{color:#fff}
article{max-width:760px;margin:0 auto}
article .eyebrow{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--primary);margin-bottom:14px}
article h1{font-size:2.5rem;font-weight:800;letter-spacing:-.6px;line-height:1.15;margin-bottom:18px}
article .post-meta{font-size:.84rem;color:var(--text3);margin-bottom:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center;padding-bottom:28px;border-bottom:1px solid var(--border)}
article h2{font-size:1.55rem;font-weight:800;letter-spacing:-.3px;line-height:1.3;margin:42px 0 14px}
article h3{font-size:1.18rem;font-weight:700;line-height:1.35;margin:30px 0 10px;color:var(--text)}
article p{color:var(--text2);font-size:1.06rem;line-height:1.8;margin-bottom:20px}
article a{color:var(--primary);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(99,129,250,.4)}
article a:hover{text-decoration-color:var(--primary)}
article strong{color:var(--text);font-weight:700}
article ul,article ol{margin:0 0 22px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:11px}
article ul li,article ol li{color:var(--text2);font-size:1.05rem;line-height:1.7;padding-left:30px;position:relative}
article ul li::before{content:'';position:absolute;left:6px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--primary)}
article ol{counter-reset:li}
article ol li{counter-increment:li}
article ol li::before{content:counter(li);position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--primary-light);color:var(--primary);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
article blockquote{margin:0 0 24px;padding:18px 24px;border-left:3px solid var(--primary);background:var(--surface);border-radius:0 var(--radius) var(--radius) 0;color:var(--text);font-size:1.08rem;line-height:1.7}
article hr{border:none;border-top:1px solid var(--border);margin:40px 0}
.key-takeaway{background:linear-gradient(180deg,rgba(99,129,250,.08),transparent);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:22px 26px;margin:0 0 26px}
.key-takeaway h3{margin:0 0 8px;color:var(--text)}
.key-takeaway p{margin:0;font-size:1rem}

/* ===== CTA BOX ===== */
.post-cta{max-width:760px;margin:50px auto 0;background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--border2);border-radius:var(--radius-lg);padding:36px 38px;text-align:center;position:relative;overflow:hidden}
.post-cta::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:600px;height:400px;background:radial-gradient(circle,rgba(94,31,181,.16),transparent 70%);pointer-events:none;filter:blur(40px)}
.post-cta h3{font-size:1.5rem;font-weight:800;margin-bottom:10px;letter-spacing:-.3px;position:relative}
.post-cta p{color:var(--text2);font-size:1rem;max-width:480px;margin:0 auto 22px;line-height:1.7;position:relative}
.post-cta .btn{display:inline-block;background:var(--primary);color:#fff;padding:13px 30px;border-radius:var(--radius);font-weight:600;font-size:.95rem;transition:all .2s;position:relative}
.post-cta .btn:hover{background:var(--primary-hover);box-shadow:0 6px 24px var(--primary-glow)}

/* ===== FOOTER ===== */
footer{padding:48px 32px 32px;border-top:1px solid var(--border)}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:40px}
.footer-brand{max-width:280px}
.footer-brand .nav-logo{margin-bottom:10px}
.footer-brand p{color:var(--text3);font-size:.82rem;line-height:1.6}
.footer-col h4{font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:12px}
.footer-col a{display:block;color:var(--text2);font-size:.88rem;padding:3px 0;transition:color .15s}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:1100px;margin:32px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-copy{color:var(--text3);font-size:.78rem}

@media(max-width:768px){
  nav{padding:0 18px}
  .nav-links a:not(.nav-cta){display:none}
  .blog-head{padding:104px 18px 30px}
  .blog-head h1{font-size:1.9rem}
  .blog-list{padding:0 18px 70px}
  .post-card{padding:22px 22px}
  .article-wrap{padding:92px 18px 50px}
  article h1{font-size:1.85rem}
  article h2{font-size:1.35rem}
  article p,article ul li,article ol li{font-size:1rem}
  .post-cta{padding:28px 22px}
}