:root{--blue:#0B5ED7;--sky:#2E7BE0;--light:#5FA4F2;--glow:#6FB2FF;--bg:#0A0F1C;--bg2:#0D1526;
--ink:#EDF2F9;--slate:#9FB0C5;--mut:#6B7E96;--line:rgba(255,255,255,.09);--r:18px}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.75;font-size:16px;-webkit-font-smoothing:antialiased}
body:before{content:'';position:fixed;inset:0;z-index:-2;background:radial-gradient(1000px 640px at 85% -12%,rgba(11,94,215,.15),transparent 60%),radial-gradient(820px 560px at -8% 60%,rgba(46,123,224,.08),transparent 62%)}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px;margin:0 auto;padding:0 28px}
h1,h2,h3{line-height:1.2;font-weight:700;letter-spacing:-.015em}
.gtext{background:linear-gradient(100deg,var(--light),var(--glow) 55%,#9CCBFF);-webkit-background-clip:text;background-clip:text;color:transparent}
/* header */
.hdr{position:sticky;top:0;background:rgba(10,15,28,.82);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);z-index:100}
.nav{display:flex;align-items:center;gap:34px;height:78px}
.brand img{height:44px;display:block}
.menu{display:flex;gap:28px;margin-left:auto;font-size:14.5px;font-weight:500;color:var(--slate)}
.menu a:hover,.menu a.active{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;font-weight:600;font-size:14.5px;transition:.25s;border:none;cursor:pointer}
.btn.pri{background:linear-gradient(120deg,var(--blue),var(--sky));color:#fff;box-shadow:0 12px 28px -12px rgba(11,94,215,.55)}
.btn.pri:hover{transform:translateY(-2px)}
.btn.sec{border:1.5px solid rgba(255,255,255,.16);color:var(--ink)}
.btn.sec:hover{border-color:var(--glow);color:var(--glow)}
@media(max-width:760px){.menu{display:none}}
/* blog index */
.blog-hero{padding:70px 0 40px;text-align:center}
.kick{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.2em;color:var(--glow);text-transform:uppercase;margin-bottom:16px}
.kick:before{content:'';width:26px;height:18px;background:url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 52%22><g transform=%22rotate(-18 32 26)%22><polygon points=%226,13 58,32 20,32%22 fill=%22%235FA4F2%22/><polygon points=%2220,32 58,32 6,51%22 fill=%22%230B5ED7%22/></g></svg>') center/contain no-repeat}
.blog-hero h1{font-size:clamp(32px,4.6vw,52px)}
.blog-hero p{color:var(--slate);max-width:620px;margin:16px auto 0;font-size:17.5px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:20px 0 90px}
.post{display:flex;flex-direction:column;background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:all .3s cubic-bezier(.16,1,.3,1)}
.post:hover{transform:translateY(-5px);border-color:rgba(111,178,255,.35);box-shadow:0 24px 50px -22px rgba(0,0,0,.6)}
.post .cover{height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.post .cover svg{width:56px;height:56px;stroke:#fff;opacity:.92;position:relative;z-index:1}
.post .body{padding:24px;display:flex;flex-direction:column;flex:1}
.post .tag{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--glow);font-weight:600;margin-bottom:9px}
.post h2{font-size:18px;font-weight:600;color:#fff;margin-bottom:8px}
.post p{color:var(--slate);font-size:14px;flex:1}
.post .more{margin-top:16px;color:var(--glow);font-weight:600;font-size:14px}
.post .more:after{content:' →'}
/* article */
.article{padding:48px 0 90px}
.crumb{font-size:13px;color:var(--mut);margin-bottom:22px}
.crumb a:hover{color:var(--glow)}
.article .meta{font-size:13px;color:var(--glow);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.article h1{font-size:clamp(28px,3.8vw,42px);margin-bottom:18px}
.article .lead{font-size:19px;color:var(--slate);margin-bottom:34px}
.article .cover{height:220px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;margin-bottom:40px;overflow:hidden;position:relative}
.article .cover svg{width:76px;height:76px;stroke:#fff;position:relative;z-index:1}
.article h2{font-size:24px;color:#fff;margin:38px 0 14px}
.article h3{font-size:19px;color:#fff;margin:28px 0 10px}
.article p{color:#C4D0DF;margin-bottom:18px}
.article ul,.article ol{color:#C4D0DF;margin:0 0 20px 22px}
.article li{margin-bottom:9px}
.article strong{color:#fff}
.article blockquote{border-left:3px solid var(--glow);padding:6px 20px;margin:24px 0;color:#fff;font-size:19px;background:rgba(46,123,224,.06);border-radius:0 10px 10px 0}
.cta-box{margin-top:46px;background:linear-gradient(130deg,rgba(46,123,224,.14),rgba(255,255,255,.03));border:1px solid rgba(111,178,255,.22);border-radius:var(--r);padding:34px;text-align:center}
.cta-box h3{color:#fff;font-size:22px;margin-bottom:8px}
.cta-box p{color:var(--slate);margin-bottom:22px}
.related{border-top:1px solid var(--line);padding-top:30px;margin-top:50px}
.related h4{color:var(--mut);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.related a{display:block;padding:10px 0;color:var(--slate);border-bottom:1px solid var(--line);transition:.2s}
.related a:hover{color:#fff;padding-left:6px}
/* footer */
.ftr{background:#070B14;border-top:1px solid var(--line);color:var(--mut);padding:56px 0 34px;font-size:14px;text-align:center}
.ftr img{height:38px;margin-bottom:16px}
.ftr p{max-width:440px;margin:0 auto 18px}
.ftr .links{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.ftr .links a:hover{color:#fff}
.ftr .fine{color:#465A75;font-size:12.5px}
@media(max-width:900px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.posts{grid-template-columns:1fr}}

/* ===== modern blog layout v2 ===== */
.blog-hero{padding:64px 0 30px}
.posts{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;padding:16px 0 96px}
.post{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:all .35s cubic-bezier(.16,1,.3,1)}
.post:hover{transform:translateY(-6px);border-color:rgba(111,178,255,.4);box-shadow:0 30px 60px -26px rgba(0,0,0,.7),0 0 50px -22px rgba(11,94,215,.4)}
.post .cover{height:auto;aspect-ratio:16/9;padding:0;display:block;background:#0A0F1C}
.post .cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.post:hover .cover img{transform:scale(1.05)}
.post .body{padding:24px 26px 28px}
.post .metarow{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.post .tag{margin:0;padding:4px 12px;border-radius:999px;background:rgba(46,123,224,.15);color:var(--glow);font-size:10.5px;letter-spacing:.09em}
.post .rt{font-size:12px;color:var(--mut)}
.post h2{font-size:20px;line-height:1.3;margin-bottom:9px}
.post p{font-size:14.5px}
.post .more{margin-top:18px}
/* featured (first) post spans full width, 2-col */
.post.feat{grid-column:1 / -1;display:grid;grid-template-columns:1.15fr 1fr;align-items:stretch}
.post.feat .cover{aspect-ratio:auto;height:100%;min-height:280px}
.post.feat .body{padding:38px 40px;display:flex;flex-direction:column;justify-content:center}
.post.feat .flag{display:inline-block;width:max-content;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#fff;background:linear-gradient(120deg,var(--blue),var(--sky));padding:5px 14px;border-radius:999px;margin-bottom:16px}
.post.feat h2{font-size:30px;line-height:1.18}
.post.feat p{font-size:16px;margin-top:6px}
@media(max-width:860px){.posts{grid-template-columns:1fr}.post.feat{grid-template-columns:1fr}.post.feat .cover{min-height:200px}}
/* article hero cover uses the same thumbnail */
.article .cover{height:auto;aspect-ratio:16/9;max-height:340px}
.article .cover img{width:100%;height:100%;object-fit:cover;display:block}
.article .toc{font-size:13px;color:var(--mut);margin-bottom:30px}
/* ===== engagement animations ===== */
.bprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:300;background:linear-gradient(90deg,var(--blue),var(--glow));border-radius:0 3px 3px 0;transition:width .1s linear}
body.anim .rv{opacity:0;transform:translateY(26px);filter:blur(3px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),filter .8s ease}
body.anim .rv.in{opacity:1;transform:none;filter:none}
.post{opacity:1}
body.anim .post.rv{opacity:0;transform:translateY(30px) scale(.98)}
body.anim .post.rv.in{opacity:1;transform:none}
.post .cover img{will-change:transform}
/* animated stat strip inside articles */
.statgraph{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:34px 0;padding:26px;border:1px solid rgba(111,178,255,.2);border-radius:16px;background:linear-gradient(140deg,rgba(46,123,224,.1),rgba(255,255,255,.02))}
.statgraph .s b{display:block;font-size:34px;font-weight:800;line-height:1.05;background:linear-gradient(120deg,#fff,#9CCBFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.statgraph .s span{font-size:13px;color:var(--slate)}
.statgraph .s .bar{margin-top:10px;height:7px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.statgraph .s .bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--blue),var(--glow));transition:width 1.3s cubic-bezier(.16,1,.3,1)}
.statgraph.in .s .bar i{width:var(--w,70%)}
@media(max-width:600px){.statgraph{grid-template-columns:1fr}}