.blog-index{max-width:1180px}
.featured-article{display:grid;grid-template-columns:1fr .92fr;min-height:390px;border:1px solid var(--line);background:linear-gradient(125deg,rgba(15,23,42,.96),rgba(22,30,51,.75));border-radius:24px;overflow:hidden}
.featured-article-copy{padding:42px;align-self:center}
.article-category{color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.article-category span{padding:0 8px;color:var(--purple)}
.featured-article h2{max-width:570px;margin:20px 0 14px;font-family:var(--display);font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-1.5px}
.featured-article h2 a{color:#fff;text-decoration:none}
.featured-article h2 a:hover{color:#c8c2ff}
.featured-article-copy>p:not(.article-category){max-width:520px;color:var(--muted);font-size:16px;line-height:1.75}
.text-link{display:inline-flex;gap:12px;align-items:center;margin-top:16px;color:#fff;font-weight:700;text-decoration:none}
.text-link span{color:var(--cyan)}
.featured-article-visual{position:relative;display:grid;place-items:center;min-height:340px;padding:42px;background:radial-gradient(ellipse at 68% 42%,rgba(84,213,227,.22),transparent 35%),linear-gradient(140deg,rgba(79,140,255,.18),rgba(156,124,255,.13))}
.visual-label{position:absolute;right:28px;top:26px;color:#b5c0d9;font-size:10px;letter-spacing:1.4px;text-transform:uppercase}
.visual-browser{position:relative;width:min(100%,390px);overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:#0b1223;box-shadow:0 35px 70px rgba(0,0,0,.42);transform:rotate(-3deg)}
.browser-top{height:38px;display:flex;align-items:center;gap:6px;padding:0 13px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.browser-top i{width:7px;height:7px;border-radius:50%;background:#fb7185}.browser-top i:nth-child(2){background:#fbbf24}.browser-top i:nth-child(3){background:#34d399}
.browser-top span{margin-left:12px;color:#8591aa;font-size:9px}
.browser-content{position:relative;z-index:1;min-height:250px;padding:36px 30px;background:linear-gradient(145deg,#10192f,#111b32 58%,#172943)}
.browser-kicker{display:block;margin-bottom:16px;color:#81dcea;font-size:9px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.browser-content strong{display:block;font-family:var(--display);font-size:34px;line-height:1.02;letter-spacing:-1.5px}
.browser-button{display:inline-flex;align-items:center;gap:22px;margin-top:24px;padding:9px 12px;border:1px solid rgba(84,213,227,.45);border-radius:5px;color:#dceaff;font-size:10px}
.browser-button b{color:var(--cyan)}
.browser-glow{position:absolute;right:-100px;bottom:-140px;width:270px;height:270px;border-radius:50%;background:rgba(79,140,255,.22);filter:blur(40px)}
.blog-index-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:34px;padding:0 2px}
.blog-index-footer p{color:var(--muted)}
.blog-article-page{max-width:1180px;padding-top:60px}
.article-breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:38px;color:var(--muted);font-size:12px}
.article-breadcrumb a{color:#c5d4ef;text-decoration:none}
.article-breadcrumb a:hover{color:var(--cyan)}
.article-header{max-width:900px;margin:0 auto 48px}
.article-header h1{max-width:880px;font-size:clamp(44px,6.3vw,76px);line-height:1.02;letter-spacing:-3px}
.article-deck{max-width:760px;color:#c1cadd;font-size:21px;line-height:1.65}
.article-meta{display:flex;gap:22px;margin-top:28px;color:var(--muted);font-size:12px}
.article-meta span+span{position:relative}
.article-meta span+span::before{content:"";position:absolute;left:-12px;top:5px;width:3px;height:3px;border-radius:50%;background:var(--cyan)}
.article-layout{display:grid;grid-template-columns:205px minmax(0,760px);justify-content:center;gap:60px}
.article-toc{position:sticky;top:28px;align-self:start;display:grid;gap:11px;padding:18px 0;border-top:1px solid var(--line)}
.article-toc p{margin:0 0 5px;color:#fff;font-size:12px;font-weight:700}
.article-toc a{color:var(--muted);font-size:11px;line-height:1.4;text-decoration:none}
.article-toc a:hover{color:var(--cyan)}
.article-content{min-width:0;color:#d0d8e8;font-size:16px;line-height:1.85}
.article-content>p{margin:0 0 20px}
.article-content section{scroll-margin-top:28px;margin-top:50px}
.article-content h2{margin:0 0 14px;color:#fff;font-family:var(--display);font-size:clamp(26px,3vw,34px);line-height:1.2;letter-spacing:-.6px}
.article-content section p{margin:0 0 17px}
.article-content ul{display:grid;gap:8px;padding-left:23px;margin:0 0 20px}
.article-content li{padding-left:3px}
.article-content li::marker{color:var(--cyan)}
.article-cta{margin:54px 0 28px;padding:28px;border:1px solid rgba(84,213,227,.26);border-radius:18px;background:linear-gradient(115deg,rgba(79,140,255,.13),rgba(156,124,255,.09))}
.article-cta .eyebrow{margin:0 0 16px;font-size:10px}
.article-cta h2{max-width:580px;margin-bottom:22px}
.article-contact-link{display:inline-block;margin-left:18px;color:#d5e5ff;font-size:12px;text-decoration:none}
.article-contact-link span{color:var(--cyan)}
.back-to-blog{display:inline-block;margin:4px 0 20px;color:var(--cyan);font-size:13px;text-decoration:none}
@media(max-width:800px){.featured-article{grid-template-columns:1fr}.featured-article-copy{padding:30px}.featured-article-visual{min-height:300px}.article-layout{grid-template-columns:1fr;gap:18px}.article-toc{position:static;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025)}.article-toc p{grid-column:1/-1}.article-header{margin-bottom:32px}.article-content section{margin-top:38px}}
@media(max-width:520px){.blog-index-footer{align-items:flex-start;flex-direction:column}.featured-article-copy{padding:24px}.featured-article-visual{padding:25px;min-height:270px}.browser-content{min-height:215px;padding:30px 24px}.browser-content strong{font-size:30px}.article-header h1{font-size:44px;letter-spacing:-2px}.article-deck{font-size:17px}.article-toc{grid-template-columns:repeat(2,minmax(0,1fr))}.article-cta{padding:22px}.article-contact-link{display:block;margin:16px 0 0}}
