:root{
  --bg:#0B1220; --bg-soft:#111827; --bg-surface:#0f172a; --panel:#101827; --panel-light:#E5EEF7;
  --text:#E9EEF6; --muted:#A9B4C7; --line:#22324b;
  --primary:#1E6CDE; --primary-2:#2A8FFF; --accent:#E4452F; --accent-soft:#7a1f14;
  --white:#ffffff; --radius:14px; --shadow:0 14px 40px rgba(0,0,0,.25); --shadow-soft:0 8px 24px rgba(0,0,0,.18);
  --focus:0 0 0 3px rgba(42,143,255,.35); --maxw:1140px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
a{color:var(--primary-2);text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.article-hero{position:relative;background:
  radial-gradient(1200px 420px at 15% -10%, rgba(30,108,222,.28), transparent 60%),
  linear-gradient(135deg, #0b1327 0%, #0c1530 60%, #0b1327 100%);
  padding:72px 0 28px;border-bottom:1px solid rgba(255,255,255,.06)}
.article-hero h1{font-size:clamp(30px,4.5vw,50px);margin:.2em 0 .1em}
.article-hero .lede{max-width:860px;color:#dbe8ff}
.pill{display:inline-block;background:rgba(228,69,47,.1);color:#ffd2cc;border:1px solid rgba(228,69,47,.35);padding:6px 10px;border-radius:999px;font-weight:700}
.toc{margin-top:18px;background:linear-gradient(180deg,#0f182c,#0d1526);border:1px solid #1a2740;border-radius:12px;padding:12px 14px;color:var(--muted)}
.toc ul{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;padding:0;list-style:none}
.toc a{font-weight:700}
section{padding:56px 0}
.surface{background:linear-gradient(180deg,#0f172a,#0b1320)}
.dark{background:linear-gradient(180deg,#0b1425,#0b1220)}
.section-title{font-size:clamp(24px,3.4vw,34px);margin:0 0 12px}
.grid{display:grid;gap:24px}
.grid.two{grid-template-columns:1.15fr .85fr;align-items:center}
.grid.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.grid.two{grid-template-columns:1fr}.grid.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid.three{grid-template-columns:1fr}}
.hero-grid,.section-grid{position:absolute;inset:0;pointer-events:none;opacity:.08;
  background-image:linear-gradient(transparent 23px, rgba(255,255,255,.08) 24px),linear-gradient(90deg, transparent 23px, rgba(255,255,255,.08) 24px);
  background-size:24px 24px}
.section-grid.subtle{opacity:.05}
.card{background:linear-gradient(180deg,#0e172b,#0c1627);border:1px solid #1a2842;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-soft)}
.card h3{margin:8px 0}.card p{color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid #22324b;padding:6px 10px;border-radius:999px;font-weight:700}
.feature{background:linear-gradient(180deg,#0f182c,#0d1526);border-left:4px solid var(--accent);border-radius:12px;padding:18px;border:1px solid #1b2841}
.more{font-weight:800}
.media{border-radius:16px;border:1px dashed #26406a;background:rgba(255,255,255,.03);color:#9fb7da;display:grid;place-items:center;min-height:220px;text-align:center;padding:10px}
.media.wide{min-height:280px}.ph-hero{min-height:320px}
.steps{padding-left:18px}.steps li{margin:.4em 0}
.bullets{padding-left:18px}.bullets li{margin:.4em 0}
.faq summary{cursor:pointer;font-weight:800}
.faq{background:linear-gradient(180deg,#0e172b,#0c1627);border:1px solid #1a2842;border-radius:12px;padding:14px 16px;margin:12px 0}
.footer{background:linear-gradient(180deg,#0b1121,#0b0f1b);color:#d6e1f8;padding:32px 0;border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.footer a{color:#eaf2ff}.footer h4{margin:8px 0}
.copyright{border-top:1px solid rgba(255,255,255,.15);margin-top:18px;padding-top:14px;font-size:.95rem;opacity:.9}
@media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr}}
a:focus,button:focus{outline:none;box-shadow:var(--focus)}