
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
src:url(/fonts/archivo-latin.woff2) format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;
src:url(/fonts/spline-sans-mono-500-latin.woff2) format('woff2')}
:root{--azure:#1656F0;--azure-50:#ECF2FE;--azure-100:#D6E2FE;--electric:#29C5FF;--paper:#fff;
--ink-25:#F7F8FB;--ink-100:#E6E9F1;--ink-200:#D2D7E3;--ink-500:#646E85;--ink-600:#4A5266;--ink-900:#11151F;
--font-sans:'Archivo',-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:'Spline Sans Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink-900);font:17px/1.65 var(--font-sans)}
a{color:var(--azure)}
.bar{position:sticky;top:0;z-index:3;background:rgba(255,255,255,.94);border-bottom:1px solid var(--ink-200)}
.bar-in{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.08rem;text-decoration:none;color:var(--ink-900)}
.brand b{color:var(--azure);font-weight:800}
.mark{width:20px;height:20px}.mark-a{fill:var(--azure)}.mark-b{fill:var(--electric)}
.bar nav{display:flex;gap:22px;font-size:.92rem}
.bar nav a{color:var(--ink-600);text-decoration:none}
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--ink-200)}
.hero-in{max-width:1180px;margin:0 auto;padding:110px 24px 90px;position:relative}
.circuit{position:absolute;right:-20px;top:20px;width:540px;max-width:60vw;fill:none;stroke:var(--azure-100);stroke-width:2}
.circuit circle{fill:var(--azure-100)}
.eyebrow{font:500 .78rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--azure);margin:0 0 14px}
h1{font-weight:900;font-size:clamp(2.6rem,7vw,5.2rem);line-height:.98;letter-spacing:-.035em;margin:0 0 28px;position:relative}
h1 span{background:linear-gradient(90deg,var(--electric),var(--azure)) no-repeat 0 88%/100% .14em}
.lead{max-width:620px;font-size:1.15rem;color:var(--ink-600);margin:0}
.facts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.fact{border:1px solid var(--ink-200);border-radius:8px;padding:10px 16px;font-size:.92rem;background:var(--paper)}
.fact strong{color:var(--azure)}
.layout{max-width:1180px;margin:0 auto;padding:40px 24px 80px;display:grid;grid-template-columns:240px 1fr;gap:56px}
.toc{position:sticky;top:90px;align-self:start;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.toc a{color:var(--ink-600);text-decoration:none;padding:4px 0 4px 12px;border-left:2px solid var(--ink-100)}
.toc a:hover{color:var(--azure);border-color:var(--azure)}
section{padding:34px 0;border-bottom:1px solid var(--ink-100);max-width:720px}
h2{font-weight:800;font-size:1.75rem;line-height:1.15;letter-spacing:-.02em;margin:0 0 14px}
ul{padding-left:1.2em}
li{margin:.4em 0}
.key{font-weight:700;font-size:1.15rem;border-left:4px solid var(--azure);padding:10px 16px;background:var(--azure-50);border-radius:0 8px 8px 0}
.cases{list-style:none;padding:0}
.cases li{border:1px solid var(--ink-200);border-radius:8px;padding:12px 16px;background:var(--ink-25)}
footer{border-top:1px solid var(--ink-200);color:var(--ink-500);font-size:.86rem}
footer div{max-width:1180px;margin:0 auto;padding:28px 24px}
:focus-visible{outline:3px solid var(--electric);outline-offset:3px;border-radius:4px}
@media (max-width:860px){.layout{grid-template-columns:1fr}.toc,.bar nav{display:none}.hero-in{padding:70px 20px 60px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
