:root { color-scheme: light; --ink:#172033; --muted:#5e687b; --line:#dce2ea; --paper:#fff; --soft:#f4f7fb; --accent:#3157d5; --accent-dark:#203e9f; --max:1080px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font:17px/1.65 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color:var(--accent-dark); text-underline-offset:3px; }
a:hover { color:var(--accent); }
header, main, footer { width:min(calc(100% - 40px), var(--max)); margin-inline:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font-weight:800; text-decoration:none; letter-spacing:-.02em; }
nav { display:flex; flex-wrap:wrap; gap:10px 18px; font-size:14px; }
nav a { color:var(--muted); text-decoration:none; }
main { min-height:70vh; padding:72px 0 56px; }
.hero { display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:center; gap:64px; }
.eyebrow { margin:0 0 12px; color:var(--accent-dark); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1, h2, h3 { line-height:1.15; letter-spacing:-.035em; }
h1 { max-width:820px; margin:0 0 24px; font-size:clamp(42px,7vw,76px); }
h2 { margin:52px 0 16px; font-size:clamp(28px,4vw,40px); }
h3 { margin:28px 0 8px; font-size:21px; }
.lede { max-width:800px; margin:0; color:#354057; font-size:clamp(19px,2.5vw,24px); line-height:1.55; }
.avatar { position:relative; display:grid; place-items:center; width:220px; aspect-ratio:1; overflow:hidden; border:1px solid #cbd5e1; border-radius:28px; background:linear-gradient(145deg,#e8edff,#dce8f1); color:var(--accent-dark); font-size:64px; font-weight:800; }
.avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.facts, .cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:24px; }
.card { padding:24px; border:1px solid var(--line); border-radius:18px; background:var(--soft); }
.card h3 { margin-top:0; }
.tags { display:flex; flex-wrap:wrap; gap:10px; padding:0; list-style:none; }
.tags li { padding:7px 12px; border:1px solid #cad4e6; border-radius:999px; background:#fff; font-size:14px; }
.answer { max-width:800px; padding:22px 24px; border-left:4px solid var(--accent); background:var(--soft); font-size:19px; }
.faq-list { max-width:850px; }
.faq-list article { padding:22px 0; border-bottom:1px solid var(--line); }
.faq-list h2 { margin:0 0 8px; font-size:22px; letter-spacing:-.02em; }
.faq-list p { margin:0; }
.related { margin-top:64px; padding-top:28px; border-top:1px solid var(--line); }
.related ul { display:flex; flex-wrap:wrap; gap:10px 24px; padding-left:20px; }
footer { padding:28px 0 40px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
@media (max-width:720px) { header { align-items:flex-start; flex-direction:column; } main { padding-top:48px; } .hero { grid-template-columns:1fr; gap:32px; } .avatar { width:160px; order:-1; border-radius:22px; } .facts,.cards { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }