:root{color-scheme:dark;--bg:#000;--bg2:#111;--tx:#fff;--tx2:#d6d6d6;--mu:#a0a0a0;--mi:#444;--bd:#292929;--nav:rgba(0,0,0,.85);--pop:#0b0b0b;--sh:0 20px 40px rgba(0,0,0,.6);--grid:#1c1c1c;--ink:#fff;--paper:#000;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
:root[data-theme=light]{color-scheme:light;--bg:#fff;--bg2:#f5f5f6;--tx:#0a0a0a;--tx2:#2b2b2b;--mu:#5b5b5f;--mi:#c9c9cd;--bd:#e0e0e4;--nav:rgba(255,255,255,.85);--pop:#fff;--sh:0 20px 40px rgba(0,0,0,.14);--grid:#ececef;--ink:#0a0a0a;--paper:#fff}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font:400 16px/1.6 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--tx);outline-offset:3px}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 5vw;background:var(--nav);backdrop-filter:blur(10px);border-bottom:1px solid var(--bd)}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo i{font-style:normal;color:var(--mu)}
nav .l{display:flex;gap:6px;align-items:center}
nav a.n{padding:8px 14px;color:var(--mu);border-radius:8px;font-size:14px;font-weight:500;transition:.2s}
nav a.n:hover,nav a.n.on{color:var(--tx)}
.btn{display:inline-block;padding:12px 24px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid var(--tx);background:var(--tx);color:var(--bg);transition:.2s;text-align:center}
.btn:hover{background:var(--bg);color:var(--tx)}
.btn.o{background:transparent;color:var(--tx);border-color:var(--bd)}
.btn.o:hover{background:var(--tx);color:var(--bg);border-color:var(--tx)}
nav .btn{padding:8px 16px;font-size:14px}
main{animation:in .45s ease both}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.w{max-width:1160px;margin:0 auto;padding:0 5vw}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding:72px 0 56px}
h1{font-size:clamp(40px,6.4vw,84px);line-height:.98;letter-spacing:-.04em;font-weight:800;margin:0 0 24px}
h2{font-size:clamp(28px,4vw,46px);letter-spacing:-.03em;line-height:1.08;margin:0 0 14px;font-weight:800}
p.lead{color:var(--mu);font-size:18px;max-width:560px;margin:0 0 32px}
.row{display:flex;gap:12px;flex-wrap:wrap}
.chart{border:1px solid var(--bd);border-radius:16px;background:var(--bg2);overflow:hidden;aspect-ratio:5/4}
.chart svg{width:100%;height:100%;display:block}
.tag{font-size:11px;fill:var(--mu);font-family:Manrope,sans-serif}
.sec{padding:72px 0;border-top:1px solid var(--bd)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px;border:1px solid var(--bd);border-radius:16px;overflow:hidden}
.steps div{padding:28px;border-right:1px solid var(--bd)}
.steps div:last-child{border:0}
.steps b{display:block;font-size:18px;margin-bottom:6px}
.steps span,.cc p,.cn small{color:var(--mu);font-size:14px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,1fr);margin-top:32px}
.cc{display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--bd);border-radius:16px;background:var(--bg2);transition:.25s;min-height:220px}
.cc:hover{background:var(--tx);color:var(--bg);transform:translateY(-4px)}
.cc:hover p,.cc:hover .m{color:var(--mi)}
.cc .ltr{font-size:44px;font-weight:800;letter-spacing:-.04em;line-height:1}
.cc h3{margin:0;font-size:20px;letter-spacing:-.02em}
.cc p{margin:0;flex:1}
.cc .m{font-size:13px;font-weight:700;color:var(--mu);display:flex;justify-content:space-between}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center}
.stats div{padding:40px 16px;border:1px solid var(--bd);border-radius:16px}
.stats b{display:block;font-size:clamp(36px,6vw,72px);letter-spacing:-.04em;line-height:1}
.stats span{color:var(--mu)}
.cta{text-align:center;padding:96px 0}
.cta p{color:var(--mu);margin:0 auto 28px;max-width:480px}
.ph{padding:56px 0 24px}
.back{display:inline-block;color:var(--mu);font-size:14px;margin-bottom:24px;font-weight:500}
.back:hover{color:var(--tx)}
.bar{height:3px;background:var(--bd);border-radius:3px;max-width:360px;margin-top:18px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--tx)}
.cn{display:flex;align-items:center;gap:16px;padding:20px 22px;border:1px solid var(--bd);border-radius:14px;background:var(--bg2);transition:.2s}
.cn:hover{background:var(--tx);color:var(--bg);transform:translateY(-3px)}
.cn:hover small{color:var(--mi)}
.cn .no{font-size:24px;font-weight:800;letter-spacing:-.03em;min-width:40px}
.cn div{flex:1;line-height:1.3}
.cn b{display:block;font-size:16px}
.cn .ar{font-size:20px;transition:.2s}
.cn:hover .ar{transform:translateX(4px)}
.slots{display:grid;gap:12px;margin-top:32px}
.slots div{padding:22px;border:1px dashed var(--bd);border-radius:14px;color:var(--mu);font-size:14px}
.slots b{color:var(--tx);display:block;font-size:16px}
.pn{display:flex;justify-content:space-between;gap:12px;margin:48px 0 72px;flex-wrap:wrap}
footer{border-top:1px solid var(--bd);padding:32px 5vw;color:var(--mu);font-size:13px;text-align:center}
.load{height:2px;background:var(--tx);position:fixed;top:0;left:0;z-index:50;width:0;transition:width .35s}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:40px}.grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:1fr}.steps div{border-right:0;border-bottom:1px solid var(--bd)}}
@media(max-width:600px){.grid,.stats{grid-template-columns:1fr}nav a.n.h{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.slots .f{border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-size:15px;line-height:1.7}
.f p{margin:8px 0 0}.f strong{color:var(--tx)}.f ul{margin:8px 0 0;padding-left:20px}.f li{margin:4px 0}
.dg{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.f figure{margin:0}.f figcaption{font-size:13px;color:var(--mu);margin-top:6px}
.f svg{width:100%;display:block;border:1px solid var(--bd);border-radius:10px;background:var(--bg)}
@media(max-width:600px){.dg{grid-template-columns:1fr}}
nav{flex-wrap:wrap}
.sw{position:relative;flex:1;max-width:340px;margin:0 16px}
.sw input{width:100%;padding:9px 12px 9px 36px;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font:inherit;font-size:14px}
.sw input::placeholder{color:var(--mu)}
.sw input:focus{outline:none;border-color:var(--tx)}
.sw svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--mu);fill:none;stroke-width:2;pointer-events:none}
#sl{position:absolute;top:calc(100% + 8px);left:0;width:max(100%,360px);max-height:min(60vh,420px);overflow:auto;background:var(--pop);border:1px solid var(--bd);border-radius:12px;padding:6px;display:none;box-shadow:var(--sh)}
#sl.on{display:block}
#sl a{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:8px;font-size:14px}
#sl a.a,#sl a:hover{background:var(--tx);color:var(--bg)}
#sl .no{color:var(--mu);font-weight:700;min-width:24px}
#sl a.a .no,#sl a:hover .no,#sl a.a .ab,#sl a:hover .ab{color:var(--mi)}
#sl .ab{margin-left:auto;font-size:12px;color:var(--mu);font-weight:700;padding-left:8px}
#sl .em{padding:12px;color:var(--mu);font-size:14px}
@media(max-width:700px){.sw{order:3;flex:1 0 100%;max-width:none;margin:10px 0 0}#sl{width:100%}.sw input{font-size:16px}}

/* theme toggle */
.tt{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;margin-left:4px;background:transparent;color:var(--tx);border:1px solid var(--bd);border-radius:10px;transition:background .2s,border-color .2s}
.tt:hover{border-color:var(--tx)}
.tt svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt .sun{display:none}
:root[data-theme=light] .tt .sun{display:block}
:root[data-theme=light] .tt .moon{display:none}
body,nav,.cc,.cn,.chart,#sl,.sw input,.tt{transition:background-color .25s,color .25s,border-color .25s}
/* responsive */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
img,svg,video{max-width:100%}
h1,h2,h3,.cn b,.back{overflow-wrap:break-word}
nav{padding-left:max(5vw,env(safe-area-inset-left));padding-right:max(5vw,env(safe-area-inset-right))}
.w{padding-left:max(5vw,env(safe-area-inset-left));padding-right:max(5vw,env(safe-area-inset-right))}
footer{padding-left:max(5vw,env(safe-area-inset-left));padding-right:max(5vw,env(safe-area-inset-right))}
@media(min-width:1500px){.w{max-width:1320px}.grid{grid-template-columns:repeat(3,1fr)}body{font-size:17px}}
@media(max-width:1100px){.hero{gap:32px}.sw{max-width:260px}}
@media(max-width:900px){.hero{padding:40px 0 32px}.chart{aspect-ratio:16/10}.sec{padding:56px 0}.cta{padding:72px 0}.stats div{padding:28px 12px}}
@media(max-width:700px){nav{padding-top:10px;padding-bottom:10px;gap:0}.logo{font-size:18px}.sw{margin:10px 0 0}.ph{padding:36px 0 16px}p.lead{font-size:16px;margin-bottom:24px}}
@media(max-width:600px){.hero{padding-top:28px}.chart{aspect-ratio:5/4}.steps div{padding:20px}.cc{min-height:0;padding:22px}.cta{padding:56px 0}.sec{padding:44px 0}.pn{flex-direction:column;margin:32px 0 56px}.pn .btn{width:100%}.row .btn{flex:1 1 100%}nav a.n{padding:8px 10px}}
@media(max-width:420px){nav .btn{display:none}nav .l{gap:2px}.stats b{font-size:44px}.cn{padding:16px;gap:12px}.cn .no{font-size:20px;min-width:32px}}
@media(max-width:340px){nav a.n[data-n=about]{display:none}}
@media(max-height:480px) and (orientation:landscape){.hero{padding:24px 0}nav{position:static}}
@media(pointer:coarse){.btn,nav a.n,.tt,.back{min-height:44px;display:inline-flex;align-items:center;justify-content:center}.tt{width:44px;height:44px}.sw input{min-height:44px}#sl a{min-height:44px}}
@media(hover:none){.cc:hover,.cn:hover{transform:none}}

/* logo image: ring keeps the black disc visible on dark, and the white shapes inside keep it visible on light */
.logo{display:inline-flex;align-items:center;border-radius:50%;line-height:0}
.logo img{width:40px;height:40px;display:block;border-radius:50%;box-shadow:0 0 0 1px var(--mu);transition:transform .25s}
.logo:hover img{transform:rotate(180deg)}
@media(max-width:700px){.logo img{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.logo:hover img{transform:none}}
/* text pages */
.pg{max-width:720px;padding-bottom:80px;color:var(--tx2)}
.pg h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.02em;margin:40px 0 8px}
.pg p{margin:0 0 14px;line-height:1.75}
.pg code{background:var(--bg2);border:1px solid var(--bd);border-radius:6px;padding:1px 6px;font-size:.9em}
.ul{text-decoration:underline;text-underline-offset:3px;color:var(--tx)}
.note{color:var(--mu);font-size:14px}
.cf{display:grid;gap:18px;margin-bottom:24px}
.cf label{display:grid;gap:6px;font-weight:700;font-size:14px;color:var(--tx)}
.cf input,.cf select,.cf textarea{width:100%;padding:12px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:10px;color:var(--tx);font:inherit;font-weight:400;font-size:16px}
.cf textarea{resize:vertical;min-height:140px}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:none;border-color:var(--tx)}
.cf .btn{justify-self:start}
@media(max-width:600px){.cf .btn{justify-self:stretch}}
/* footer links */
.fl{display:flex;justify-content:center;gap:8px 24px;flex-wrap:wrap;margin-bottom:12px}
.fl a{color:var(--tx2);font-weight:500}
.fl a:hover{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
footer p{margin:0}

/* contact form: honeypot (hidden from people, visible to bots) and status */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf .ok{color:var(--tx);font-weight:700}
.cf .err{color:var(--tx);font-weight:700;border-left:3px solid var(--tx);padding-left:12px}
.cf .btn:disabled{opacity:.6;cursor:progress}