:root { color-scheme: dark; --bg:#02050b; --panel:#09111f; --line:#263755; --text:#f5f7fb; --muted:#a8b3c7; --blue:#62a8ff; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 80% 0,#102449 0,transparent 35%),var(--bg); color:var(--text); font:17px/1.7 system-ui,-apple-system,"Segoe UI",sans-serif; }
a { color:var(--blue); }
header,main,footer { width:min(1080px,calc(100% - 32px)); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; padding:24px 0; }
.brand { color:var(--text); font-weight:800; text-decoration:none; }
.back { text-decoration:none; }
.hero { padding:70px 0 40px; }
.eyebrow { color:var(--blue); font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { max-width:850px; font-size:clamp(2.3rem,6vw,4.6rem); line-height:1.05; margin:.25em 0; }
.lede { max-width:800px; color:var(--muted); font-size:1.2rem; }
.tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.tags span { border:1px solid var(--line); border-radius:999px; padding:6px 13px; background:#08101c; }
.visual { min-height:280px; border:1px solid var(--line); border-radius:22px; padding:28px; display:grid; place-items:center; background:linear-gradient(145deg,#0d1a2f,#050a12); margin:30px 0 50px; }
.flow { width:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; }
.flow span { border:1px solid #4f76aa; border-radius:12px; padding:18px; background:#0b1728; font-weight:700; text-align:center; }
.flow i { color:var(--blue); font-style:normal; font-size:1.5rem; }
.caption { color:var(--muted); text-align:center; margin-top:18px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
article { border:1px solid var(--line); border-radius:18px; background:color-mix(in srgb,var(--panel) 92%,transparent); padding:26px; }
article h2 { margin-top:0; }
article p,article li { color:var(--muted); }
.result { grid-column:1/-1; border-color:#3267a6; }
.cta { margin:48px 0; padding:32px; border:1px solid var(--line); border-radius:18px; text-align:center; }
footer { padding:20px 0 50px; color:var(--muted); }
@media (max-width:700px) { .grid { grid-template-columns:1fr; } .result { grid-column:auto; } .hero { padding-top:40px; } }