:root { --bg:#050a12; --surface:#0c1420; --surface2:#111c2e; --accent:#00d4ff; --accent2:#0077ff; --text:#e8f0fe; --muted:#8ca0bf; --border:rgba(0,212,255,0.16); --font-head:'Outfit',sans-serif; --font-body:'DM Sans',sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:radial-gradient(circle at 60% 0%, rgba(0,212,255,0.18), transparent 34%), var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.75; }
a { color:var(--accent); }
nav { display:flex; justify-content:space-between; align-items:center; padding:1.1rem clamp(1rem,4vw,4rem); border-bottom:1px solid var(--border); background:rgba(5,10,18,0.86); position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); }
.brand { color:var(--text); text-decoration:none; font-family:var(--font-head); font-weight:800; font-size:1.1rem; }
.brand span, h1 span { color:var(--accent); }
.nav-links { display:flex; gap:1.1rem; align-items:center; }
.nav-links a { text-decoration:none; color:var(--muted); font-size:0.88rem; }
.article-hero, article, .related { max-width:980px; margin:0 auto; padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,2rem); }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:0.18em; font-size:0.76rem; margin-bottom:1rem; }
h1 { font-family:var(--font-head); font-size:clamp(2.4rem,7vw,5.3rem); line-height:0.95; max-width:900px; margin-bottom:1.1rem; letter-spacing:-0.05em; }
.lead { color:#b6c8e6; font-size:clamp(1.05rem,2vw,1.3rem); max-width:760px; }
.meta { display:flex; flex-wrap:wrap; gap:0.7rem; margin-top:1.6rem; color:var(--muted); font-size:0.9rem; }
.pill { border:1px solid var(--border); background:rgba(0,212,255,0.06); border-radius:999px; padding:0.35rem 0.75rem; }
article { padding-top:1rem; }
.content { background:rgba(12,20,32,0.78); border:1px solid var(--border); border-radius:22px; padding:clamp(1.4rem,4vw,3rem); box-shadow:0 24px 70px rgba(0,0,0,0.26); }
h2 { font-family:var(--font-head); font-size:clamp(1.55rem,3vw,2.2rem); line-height:1.12; margin:2.2rem 0 0.8rem; }
h3 { font-family:var(--font-head); font-size:1.2rem; margin:1.4rem 0 0.4rem; color:#d9e7ff; }
p, li { color:#aebfda; margin-bottom:1rem; }
ul { padding-left:1.2rem; margin-bottom:1.2rem; }
.cta { margin-top:2.5rem; padding:1.5rem; border-radius:18px; background:linear-gradient(135deg, rgba(0,119,255,0.22), rgba(0,212,255,0.12)); border:1px solid var(--border); }
.cta a { display:inline-flex; margin-top:0.8rem; text-decoration:none; background:linear-gradient(135deg,var(--accent2),var(--accent)); color:#fff; padding:0.85rem 1.2rem; border-radius:8px; font-weight:700; }
.related-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
.related-card { text-decoration:none; color:var(--text); background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:1.1rem; }
footer { padding:2rem; text-align:center; color:var(--muted); border-top:1px solid var(--border); }
@media (max-width:720px) { .nav-links { gap:0.7rem; font-size:0.8rem; } .related-grid { grid-template-columns:1fr; } }