:root{
  --ninja:#0B0D10; --soft:#121722; --ink:#111827; --panel:#141b27;
  --white:#F7F8FA; --muted:#8A94A6; --line:rgba(255,255,255,.08);
  --red:#E53935; --cyan:#00D9FF;
  --display:'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --body:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{background:var(--ninja); color:var(--white); font-family:var(--body); line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:var(--cyan); text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:var(--cyan); color:#04222a}

.bg{position:fixed; inset:0; z-index:-2; overflow:hidden}
.bg::before{content:""; position:absolute; inset:-20%;
  background:radial-gradient(45% 35% at 80% 0%, rgba(0,217,255,.08), transparent 70%),radial-gradient(40% 32% at 10% 12%, rgba(229,57,53,.10), transparent 70%)}

/* Header */
header{position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); background:rgba(11,13,16,.6); border-bottom:1px solid var(--line)}
.nav{max-width:920px; margin:0 auto; padding:0 24px; height:64px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:10px}
.brand img{height:28px}
.brand span{font-family:var(--display); font-weight:700; font-size:17px; color:#fff}
.nav .links{display:flex; gap:22px; align-items:center}
.nav .links a{color:var(--muted); font-size:14px; font-weight:500}
.nav .links a:hover{color:#fff; text-decoration:none}

.wrap{max-width:760px; margin:0 auto; padding:0 24px}
.wide{max-width:920px}

/* Article */
article{padding:48px 0 24px}
.crumbs{font-size:13px; color:var(--muted); margin-bottom:20px}
.crumbs a{color:var(--muted)}
.kicker{color:var(--red); font-weight:600; font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-family:var(--display)}
h1{font-family:var(--display); font-weight:700; font-size:clamp(30px,5vw,46px); line-height:1.08; letter-spacing:-.02em; margin:12px 0 16px}
.dek{font-size:20px; color:#c7cdd8; margin-bottom:22px}
.byline{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:14px; border-bottom:1px solid var(--line); padding-bottom:22px; margin-bottom:8px}
.byline img{height:30px; width:30px; border-radius:50%; background:#1a2233; padding:4px}
.byline b{color:#fff; font-weight:600}

.prose{font-size:17.5px}
.prose p{margin:22px 0; color:#d5dae3}
.prose h2{font-family:var(--display); font-size:26px; font-weight:600; margin:40px 0 12px; letter-spacing:-.01em; color:#fff}
.prose h3{font-family:var(--display); font-size:20px; font-weight:600; margin:30px 0 10px; color:#fff}
.prose strong{color:#fff}
.prose ul,.prose ol{margin:18px 0 18px 22px; color:#d5dae3}
.prose li{margin:8px 0}
.prose blockquote{border-left:3px solid var(--red); margin:30px 0; padding:6px 22px; font-family:var(--display); font-size:22px; line-height:1.4; color:#fff}
.prose em{color:#cfd5df}

/* Infographic */
figure{margin:34px 0}
figure svg{width:100%; height:auto; display:block; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#0e131c,#0b0d10)}
figcaption{color:var(--muted); font-size:13px; margin-top:10px; text-align:center}

/* Sources */
.sources{margin:36px 0; padding:22px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02)}
.sources h3{font-family:var(--display); font-size:15px; margin-bottom:10px; color:#fff}
.sources ol{margin-left:18px; font-size:14px; color:var(--muted)}
.sources li{margin:6px 0}

/* FAQ */
details{border:1px solid var(--line); border-radius:12px; padding:2px 20px; background:rgba(255,255,255,.02); margin-bottom:10px}
details[open]{border-color:rgba(0,217,255,.3)}
summary{cursor:pointer; list-style:none; font-family:var(--display); font-weight:600; font-size:16px; padding:16px 0; display:flex; justify-content:space-between; gap:14px; align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; color:var(--cyan); font-size:20px}
details[open] summary::after{content:"–"}
details p{color:var(--muted); padding:0 0 18px; font-size:15px; margin:0}

/* Email capture */
.capture{margin:44px 0; padding:30px; border:1px solid rgba(0,217,255,.25); border-radius:18px; background:linear-gradient(180deg,rgba(0,217,255,.06),rgba(20,27,39,.5)); text-align:center}
.capture h3{font-family:var(--display); font-size:22px; color:#fff; margin-bottom:8px}
.capture p{color:var(--muted); font-size:15px; margin-bottom:18px}
.capture form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center}
.capture input[type=email]{flex:1; min-width:220px; background:#0c1018; border:1px solid var(--line); color:#fff; padding:13px 16px; border-radius:10px; font-size:15px; font-family:var(--body)}
.capture input[type=email]:focus{outline:none; border-color:var(--cyan)}
.capture button{background:#fff; color:#0a0c10; border:none; font-weight:600; font-size:15px; padding:13px 22px; border-radius:10px; cursor:pointer; font-family:var(--display); transition:background .2s}
.capture button:hover{background:var(--cyan)}
.capture .hp{position:absolute; left:-9999px}
.capture .msg{margin-top:14px; font-size:14px; min-height:18px}
.capture small{display:block; margin-top:12px; color:var(--muted); font-size:12px}

/* Author / share / footer */
.endbar{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; border-top:1px solid var(--line); padding:24px 0; margin-top:30px; color:var(--muted); font-size:14px}
.endbar .share a{color:var(--muted); margin-left:14px}
footer{border-top:1px solid var(--line); padding:30px 0; margin-top:20px}
.foot{max-width:920px; margin:0 auto; padding:0 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13px}

/* Blog index */
.idx-head{padding:54px 0 18px}
.idx-head h1{margin-bottom:10px}
.idx-head p{color:var(--muted); font-size:18px}
.posts{display:grid; gap:16px; padding-bottom:30px}
.post-card{display:block; border:1px solid var(--line); border-radius:16px; padding:26px; background:rgba(18,23,34,.5); transition:border-color .2s, transform .2s}
.post-card:hover{border-color:rgba(0,217,255,.35); transform:translateY(-3px); text-decoration:none}
.post-card .date{color:var(--red); font-size:12px; font-weight:600; font-family:var(--display); letter-spacing:.08em; text-transform:uppercase}
.post-card h2{font-family:var(--display); font-size:23px; color:#fff; margin:8px 0; letter-spacing:-.01em}
.post-card p{color:var(--muted); font-size:15px}
.post-card .tags{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.post-card .tag{font-size:12px; color:#b7c0ce; border:1px solid var(--line); padding:3px 10px; border-radius:999px}