@font-face{font-family:'Inter';src:url(fonts/Inter-Regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/Inter-SemiBold.woff) format('woff');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url(fonts/Inter-Bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:'Inter Display';src:url(fonts/InterDisplay-ExtraBold.woff) format('woff');font-weight:800;font-display:swap}
:root{--bg:#080b10;--blue:#3478ff;--blue-d:#1f5fe0;--ink:#0a0d12;--muted:#5a6372;--line:#e2e6ec;--soft:#f4f6f9}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',Arial,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
h1,h2,h3,.brand{font-family:'Inter Display','Inter',Arial,sans-serif;font-weight:800}
.wrap{width:min(1240px,90%);margin:auto}.narrow{width:min(760px,90%);margin:auto}
a:focus-visible,button:focus-visible{outline:3px solid #91b8ff;outline-offset:4px}
/* header */
.site-header{position:sticky;top:0;z-index:20;background:#080b10f7;border-bottom:1px solid #ffffff15;color:#fff}
.site-header .wrap{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:27px;font-style:italic;letter-spacing:-1.5px;color:#fff}
.brand img{height:22px;width:auto}.brand span{font-size:.42em;align-self:flex-start;margin:4px 0 0 -6px;font-family:Inter,Arial;font-style:normal;font-weight:700;color:var(--blue)}
.site-nav{display:flex;gap:26px;font-size:13px;color:#bdc3cc}.site-nav a:hover,.site-nav a[aria-current]{color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 22px;background:var(--blue);color:#fff;border-radius:100px;font-size:13px;font-weight:700;transition:background .2s,transform .2s;border:0;cursor:pointer}
.btn:hover{background:#5290ff;transform:translateY(-2px)}
.btn.ghost{background:transparent;border:1px solid #404754}
.menu-btn{display:none;background:none;border:1px solid #2a3240;color:#fff;border-radius:6px;padding:8px 11px;font-size:16px}
/* blog hero */
.blog-hero{background:radial-gradient(ellipse at 85% 30%,#16295080,transparent 55%),var(--bg);color:#fff;padding:70px 0 60px}
.label{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#6b9cff;margin-bottom:16px}
.blog-hero h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2.5px;line-height:1.02;margin:0 0 18px;max-width:820px}
.blog-hero h1 em{font-style:normal;color:#6a9aff}
.blog-hero p{color:#a0a8b6;max-width:620px;font-size:16px;line-height:1.7;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.filters button{font:600 12px Inter,Arial;padding:9px 15px;border-radius:30px;border:1px solid #314361;background:#0c1728;color:#bacbe3;cursor:pointer}
.filters button[aria-pressed=true]{background:var(--blue);border-color:var(--blue);color:#fff}
/* grid */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 26px;padding:56px 0 90px}
.card{display:flex;flex-direction:column;border-radius:16px;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card .thumb{border-radius:14px;overflow:hidden;aspect-ratio:1200/630;background:#0e131b}
.card .thumb img{width:100%;height:100%;object-fit:cover}
.card .meta{font-size:12px;color:var(--muted);margin:16px 0 8px;display:flex;gap:10px;align-items:center}
.card .cat{color:var(--blue-d);font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:11px}
.card h2{font-size:21px;line-height:1.25;letter-spacing:-.5px;margin:0 0 10px}
.card p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}
.card.featured{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.card.featured h2{font-size:clamp(26px,3vw,38px);letter-spacing:-1.2px}
.card.featured p{font-size:16px}
/* article */
.crumbs{font-size:12px;color:#8a93a1;margin-bottom:22px}.crumbs a:hover{color:#fff}.crumbs span{margin:0 7px}
.post-hero{background:var(--bg);color:#fff;padding:54px 0 0}
.post-hero h1{font-size:clamp(32px,4.4vw,54px);letter-spacing:-2px;line-height:1.06;margin:0 0 20px}
.post-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:13px;color:#a0a8b6;padding-bottom:36px}
.post-meta .author{display:flex;align-items:center;gap:10px;color:#fff;font-weight:600}
.post-meta .author img{width:34px;height:34px;border-radius:50%;background:#1b4fd6;padding:8px}
.cover-wrap{background:linear-gradient(var(--bg) 50%,#fff 50%)}
.cover-wrap img{border-radius:18px;box-shadow:0 20px 60px #0a0d1230;width:100%;height:auto}
.article{font-size:17.5px;line-height:1.8;color:#232a35;padding:46px 0 30px}
.article h2{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:46px 0 14px;color:var(--ink)}
.article h3{font-size:21px;letter-spacing:-.4px;margin:30px 0 8px;color:var(--ink)}
.article p{margin:0 0 20px}.article strong{color:var(--ink)}
.article ul,.article ol{padding-left:22px;margin:0 0 24px}.article li{margin:6px 0}.article li::marker{color:var(--blue)}
.article a{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
.article figure{margin:34px auto;max-width:440px}
.article figure img{border-radius:16px;width:100%;height:auto}
.article figcaption{font-size:13px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}
.cta-box{margin:40px 0;padding:32px;border-radius:18px;background:linear-gradient(120deg,#102658,#0d1422 70%);color:#fff;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}
.cta-box strong{display:block;font-family:'Inter Display',Inter;font-size:23px;letter-spacing:-.6px;line-height:1.2;margin-bottom:6px;color:#fff}
.cta-box p{margin:0;color:#b9c4d6;font-size:14px;line-height:1.6}
.cta-box .btn{text-decoration:none!important;color:#fff!important;white-space:nowrap}
.author-box{display:flex;gap:18px;align-items:flex-start;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--soft);margin:10px 0 60px}
.author-box img{width:54px;height:54px;border-radius:14px;background:#080b10;padding:12px;flex-shrink:0}
.author-box strong{font-size:16px}.author-box p{margin:6px 0 0;font-size:14px;line-height:1.65;color:var(--muted)}
.related{background:var(--soft);padding:60px 0 80px;border-top:1px solid var(--line)}
.related h2{font-size:30px;letter-spacing:-1px;margin:0 0 30px}
.related .posts{padding:0}
/* footer */
.site-footer{background:var(--bg);color:#a0a8b6;padding:46px 0 90px;font-size:13px}
.site-footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-footer h3{font-size:14px;color:#fff;margin:0 0 12px;font-family:Inter,Arial;font-weight:700}
.site-footer p{line-height:1.7;margin:12px 0 0}.site-footer a{display:block;margin:6px 0}.site-footer a:hover{color:#fff}
.floating{position:fixed;right:20px;bottom:20px;padding:13px 18px;border:1px solid #5378af;border-radius:40px;background:#162a48;color:#fff;font-size:12px;box-shadow:0 8px 30px #0006;z-index:15}
@media(max-width:950px){.posts{grid-template-columns:1fr 1fr}.card.featured{grid-template-columns:1fr;gap:10px}.site-nav{gap:16px}.site-header .btn{display:none}}
@media(max-width:650px){.site-nav{display:none;position:absolute;top:70px;left:0;right:0;background:#101620;flex-direction:column;padding:22px 5%;gap:20px;border-bottom:1px solid #222a36}.site-nav.open{display:flex}.menu-btn{display:block}.site-header .wrap{height:70px}
.posts{grid-template-columns:1fr;gap:34px}.blog-hero{padding:50px 0 44px}.article{font-size:16.5px}.article h2{font-size:25px}.cta-box{grid-template-columns:1fr;padding:26px}.site-footer .wrap{grid-template-columns:1fr}}
.faq-list details{border-bottom:1px solid var(--line);padding:16px 0}.faq-list details:first-child{border-top:1px solid var(--line)}
.faq-list summary{cursor:pointer;font-weight:700;color:var(--ink);font-size:17px;line-height:1.5;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq-list summary::after{content:'+';color:var(--blue);font-size:22px;line-height:1}.faq-list details[open] summary::after{content:'–'}
.faq-list summary::-webkit-details-marker{display:none}.faq-list p{margin:10px 0 0;font-size:16px;color:#3a4250}
html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){html,body{overflow-x:clip}}