:root { color-scheme: light; --ink:#14213d; --muted:#596579; --line:#d8e0ec; --accent:#0a7cff; --ok:#18a058; --warn:#e79f13; --bg:#f8fafc; }
* { box-sizing: border-box; }
html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--bg); }
body { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
header { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
nav { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { font-size: 20px; font-weight: 800; letter-spacing: 0; }
.links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; }
.hero { min-height: 78vh; display: grid; align-items: center; padding: 56px 0 48px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg,#fff 0%,#eef6ff 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr); gap: 42px; align-items: center; }
h1 { font-size: clamp(40px, 7vw, 86px); line-height: .95; margin: 0 0 20px; letter-spacing: 0; }
.lead { font-size: 20px; line-height: 1.6; color: var(--muted); max-width: 820px; }
.panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 22px; box-shadow: 0 18px 60px rgba(27,46,83,.08); }
.metrics { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.metric { min-height: 104px; border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: #fbfdff; }
.metric b { display:block; font-size: 28px; }
.metric span { color: var(--muted); font-size: 13px; }
.band { padding: 64px 0; border-bottom: 1px solid var(--line); background: #fff; }
.band:nth-of-type(even) { background: #f4f8fd; }
h2 { font-size: 34px; margin: 0 0 14px; letter-spacing: 0; }
p { line-height: 1.7; color: var(--muted); }
.cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background:#fff; min-height: 172px; }
.card h3 { margin: 0 0 10px; font-size: 18px; }
.flow { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 24px; }
.step { border-left: 4px solid var(--accent); padding: 16px; background: #fff; border-radius: 8px; border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.chart { min-height: 280px; display: grid; align-items: end; grid-template-columns: repeat(6,1fr); gap: 14px; padding: 18px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.bar { border-radius: 6px 6px 0 0; background: linear-gradient(180deg,#0a7cff,#0a9b8e); min-height: 44px; }
.article-list { columns: 2; column-gap: 36px; }
.article-list a { display: block; break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line); }
footer { padding: 42px 0; color: var(--muted); }
@media (max-width: 820px) { .hero-grid,.cards,.flow { grid-template-columns: 1fr; } .article-list { columns: 1; } }