:root{color-scheme:light;--bg:#eeecff;--ink:#17163f;--muted:#51507d;--line:#cfcaf5;--accent:#4b3df5;--sun:#ffc857;--chip:#dcd8ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.65 "DM Sans",system-ui,sans-serif;overflow-x:hidden}
.sun{position:absolute;top:-9rem;right:-8rem;width:26rem;height:26rem;border-radius:50%;background:var(--sun);animation:rise 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{transform:translateY(7rem);opacity:0}to{transform:none;opacity:1}}
.wrap{position:relative;max-width:46rem;margin:0 auto;padding:2.5rem 1.25rem 4rem}
nav,header,section,footer{position:relative}
nav{display:flex;gap:1.5rem;font-weight:500}
a{color:var(--accent);text-underline-offset:4px}
nav a{color:var(--ink)}
a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
h1,h2{font-family:"Unbounded",system-ui,sans-serif;margin:0;line-height:1.1}
h1{font-size:clamp(2rem,10vw,4.75rem);font-weight:800;letter-spacing:-.02em;margin:7rem 0 1.25rem}
h2{font-size:1.25rem;font-weight:600;margin-bottom:1rem}
.lead{font-size:1.25rem;max-width:32rem;margin:0}
.lead b{color:var(--accent);font-weight:600}
section{margin-top:4rem}
ul{list-style:none;padding:0;margin:0}
.work li{padding:1.1rem 0;border-top:1px solid var(--line)}
.work strong{display:block;font-weight:600}
.work span{color:var(--muted)}
.flow{display:block;width:100%;max-width:30rem;height:auto;margin:1.25rem 0}
.flow .box{fill:var(--chip);stroke:var(--accent);stroke-width:1.5}
.flow .t{fill:var(--ink);font:600 15px "DM Sans",system-ui,sans-serif}
.flow .s,.flow .l{fill:var(--muted);font:12px "DM Sans",system-ui,sans-serif}
.flow .ln{stroke:var(--accent);stroke-width:1.8;fill:none}
.flow .dash{stroke-dasharray:5 4}
.flow .head{fill:var(--accent)}
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:1.1rem 0 1.1rem 3rem;border-top:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:0;top:1.1rem;font-family:"Unbounded",system-ui,sans-serif;font-weight:600;color:var(--accent)}
.steps strong{display:block;font-weight:600}
.steps span{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chips li{background:var(--chip);padding:.3rem .9rem;border-radius:2rem;font-weight:500;font-size:.95rem}
footer{margin-top:4rem;color:var(--muted);font-size:.9rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sun{animation:none}}