:root{--ink:#223c51;--mid:#527083;--line:#dce5eb;--surface:#f4f7fa;--blue:#163751;--cyan:#b2d6df;--gold:#edc58b}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.65}
a{color:#245e7e}
.container{width:min(1100px,calc(100% - 42px));margin-inline:auto}
.header{display:flex;justify-content:space-between;align-items:center;padding:18px 0;gap:20px;flex-wrap:wrap}
.wordmark{font-size:27px;letter-spacing:-.03em;font-weight:800;text-decoration:none;color:#1e4256}
.small{font-size:11px;color:var(--mid);letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.nav{display:flex;gap:20px;flex-wrap:wrap;font-size:13px}
.hero{background:radial-gradient(circle at 70% 0%,#335b73 0,#17354b 40%,#0e2637 100%);color:#fff;padding:70px 0 55px}
.hero-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:50px;align-items:center}
.hero h1{font-size:clamp(40px,5.5vw,68px);letter-spacing:-.05em;line-height:1.09;margin:18px 0}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p{color:#d6e7f0;font-size:17px;line-height:1.85}
.hero .small{color:#f3c88f}
.hero-box{padding:25px;border:1px solid #7b9cac;background:#ffffff0e;border-radius:14px}
.hero-box .metric{display:block;color:var(--gold);font-size:29px;font-weight:850;line-height:1.2;letter-spacing:-.025em}
.hero-box p{font-size:14px;margin:7px 0 20px}
.meta{display:flex;gap:25px;justify-content:space-between;flex-wrap:wrap;margin-top:50px;padding-top:15px;border-top:1px solid #ffffff33;font-size:12px;color:#bed3db}
.section{padding:74px 0}
.section.soft{background:var(--surface)}
.section.dark{background:var(--blue);color:#fff}
.section.dark h2{color:#fff}
.kicker{color:#2e7590;font-weight:900;letter-spacing:.13em;font-size:12px;text-transform:uppercase;margin:0 0 14px}
.dark .kicker{color:var(--gold)}
h2{font-size:clamp(27px,3.6vw,42px);line-height:1.2;letter-spacing:-.03em;margin:0 0 24px}
h3{font-size:20px;line-height:1.2;letter-spacing:-.02em;margin:10px 0}
.lead{max-width:870px;color:var(--mid);font-size:17px}
.cols,.grid{display:grid;gap:18px}
.cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:45px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:white;border:1px solid var(--line);border-radius:12px;padding:25px}
.card p{color:var(--mid);font-size:14px}
.card .label{font-size:11px;color:#186981;letter-spacing:.1em;text-transform:uppercase;font-weight:850}
.diagram{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:28px 0}
.diagram b{border:1px solid #bdd0dc;border-radius:7px;background:white;padding:12px 16px;font-size:13px}
.diagram span{color:#a37430;font-weight:850}
.notice{border-left:4px solid #d7a360;background:#fffaf2;color:#5e6570;padding:15px 21px;line-height:1.8;border-radius:0 9px 9px 0;margin-top:24px}
.dark .notice{background:#ffffff0c;color:#e2eef4;border-color:#edc58b}
.timeline{border-left:2px solid #9abcc9;margin:30px 0 0 12px;padding:0;list-style:none}
.timeline li{position:relative;padding:0 0 26px 27px}
.timeline li:before{content:"";width:14px;height:14px;position:absolute;left:-8px;top:4px;background:#247a92;border:3px solid #f4f7fa;border-radius:50%}
.timeline .when{font-weight:850;font-size:12px;color:#32809a;letter-spacing:.05em}
.timeline p{margin:9px 0;color:#506d7d}
.dark .grid .card{background:#ffffff10;border-color:#ffffff32}
.dark .grid .card p{color:#dcebf0}
.dark .grid .card h3{color:#fff}
footer{background:#edf2f5;padding:30px 0;font-size:12px;color:#506575}
.footerline{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap}
a:focus-visible{outline:3px solid #dfa24b;outline-offset:3px}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}.cols{grid-template-columns:1fr;gap:10px}.grid.three{grid-template-columns:1fr 1fr}}
@media(max-width:570px){.section{padding:45px 0}.hero{padding:45px 0 30px}.grid.two,.grid.three{grid-template-columns:1fr}.hero h1{font-size:40px}.meta{gap:8px}.hero-box{padding:17px}}
@media print{.hero{background:white!important;color:#111}.hero *{color:#111!important}.section{padding:23px 0}.grid{display:block}.card{break-inside:avoid;margin:14px 0}.dark{background:white!important;color:#111!important}.dark *{color:#111!important}}