:root{--ink:#0b0d12;--ink2:#171a21;--g1:#f5f6f8;--g2:#e7e9ee;--mut:#5d6472;--mutd:#9aa1ad;--a:#0D418D;--a2:#2f6fd6;--sun:#ffb547;--r:22px;--f:'Inter',system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--f);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px}
img,svg{max-width:100%;display:block}a{color:var(--a);text-decoration:none}a:hover{text-decoration:underline}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:99}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}.narrow{max-width:760px;margin:0 auto;text-align:center}
h1,h2,h3{font-weight:600;letter-spacing:-.025em;line-height:1.05}
h1{font-size:clamp(44px,7vw,88px)}h2{font-size:clamp(34px,4.6vw,58px)}h3{font-size:22px;letter-spacing:-.01em;line-height:1.2}
.sub{font-size:clamp(18px,1.6vw,21px);color:var(--mut);margin-top:18px;font-weight:400}
.dark .sub,.dark p{color:var(--mutd)}
.tag{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--a);margin-bottom:18px}
.dark .tag{color:#7fa8ec}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 26px;font-weight:500;font-size:15px;border:1px solid transparent;cursor:pointer;transition:.2s;font-family:inherit}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-p{background:var(--a);color:#fff}.btn-p:hover{background:#0a3573}
.btn-g{background:rgba(255,255,255,.9);color:var(--ink)}.btn-l{color:var(--ink);border-color:#c9cdd6;background:transparent}
.dark .btn-l{color:#fff;border-color:rgba(255,255,255,.35)}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
/* nav */
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(0,0,0,.06)}
header.site .wrap{display:flex;align-items:center;height:60px;gap:28px}
header.site img{height:30px;width:auto}
nav.main{flex:1}nav.main ul{list-style:none;display:flex;gap:26px;justify-content:center}
nav.main a{color:var(--ink);font-size:14px;font-weight:500}
.hdr-cta{padding:9px 18px;font-size:14px}
.menu-t{display:none;background:none;border:0;font:500 15px var(--f);cursor:pointer}
@media(max-width:900px){nav.main{position:absolute;top:60px;left:0;right:0;background:#fff;display:none;padding:20px 24px;border-bottom:1px solid var(--g2)}nav.main.open{display:block}nav.main ul{flex-direction:column;gap:16px}.menu-t{display:block;margin-left:auto}.hdr-cta{display:none}}
/* sections */
.sec{padding:clamp(80px,11vw,140px) 0}.sec.tight{padding:80px 0}
.dark{background:var(--ink);color:#fff}.gray{background:var(--g1)}
.hero{position:relative;min-height:min(calc(100vh - 60px),920px);display:flex;align-items:flex-start;justify-content:center;text-align:center;overflow:hidden;color:#fff;background:linear-gradient(180deg,#03050b,#0a1630 70%,#13254a)}
.hero .sky{position:absolute;inset:0;pointer-events:none}
.hero .inner{position:relative;z-index:2;padding:clamp(70px,10vh,120px) 24px 340px}
.hero h1{max-width:900px;margin:0 auto}.hero .sub{color:#c3cbd8;max-width:620px;margin:22px auto 0}
@keyframes rise{from{transform:translate(-50%,200px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
.hero .stars i{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;opacity:.5;animation:tw 4s infinite}
@keyframes tw{50%{opacity:.1}}
.trust{display:flex;gap:40px;justify-content:center;flex-wrap:wrap;font-size:14px;color:var(--mut);font-weight:500}
.trust b{color:var(--ink);font-weight:600}
/* problem */
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.pcard{background:var(--ink2);border-radius:var(--r);padding:36px 30px 30px;min-height:380px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(255,255,255,.06)}
.pcard h3{color:#fff;margin-top:22px}.pcard p{font-size:15px;margin-top:8px}
.bars{display:flex;align-items:flex-end;gap:8px;height:170px}
.bars span{flex:1;background:linear-gradient(#ff6b5b,#a8322a);border-radius:6px 6px 2px 2px;transform-origin:bottom;transform:scaleY(0)}
.in .bars span{animation:grow .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes grow{to{transform:scaleY(1)}}
.bill{font-size:34px;white-space:nowrap;margin-bottom:12px;font-weight:600;letter-spacing:-.03em;color:#ff7a6b}
.houses{height:170px;position:relative}
.houses .win{animation:flick 5s infinite}
@keyframes flick{0%,38%{fill:#ffd27a}40%,42%{fill:#2a2f3a}44%{fill:#ffd27a}46%,90%{fill:#2a2f3a}100%{fill:#ffd27a}}
.dial{height:170px;display:flex;align-items:center;justify-content:center}
.dial .needle{transform-origin:100px 100px;animation:swing 6s ease-in-out infinite}
@keyframes swing{0%,100%{transform:rotate(-60deg)}50%{transform:rotate(55deg)}}
/* flow */
.flow{margin-top:56px;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#eaf1fb,#f7f9fc);position:relative}
.flow svg{width:100%;height:auto}
.flow .dash{stroke-dasharray:6 10;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-32}}
.flow .sunr{animation:spin 30s linear infinite;transform-origin:150px 110px}
@keyframes spin{to{transform:rotate(360deg)}}
.flow .batt{animation:fill 4s ease-in-out infinite alternate;transform-origin:bottom;transform-box:fill-box}
@keyframes fill{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.s3{padding:28px 4px}.s3 .n{font-size:13px;font-weight:600;color:var(--a);letter-spacing:.08em}.s3 h3{margin:10px 0 6px}.s3 p{color:var(--mut);font-size:15px}
/* night */
.night{border-radius:28px;background:linear-gradient(180deg,#05070c,#0f1b33);padding:clamp(48px,7vw,96px);text-align:center;color:#fff;position:relative;overflow:hidden}
.night .glow{position:absolute;inset:auto 0 -40% 0;height:80%;background:radial-gradient(50% 50% at 50% 50%,rgba(47,111,214,.45),transparent);pointer-events:none}
/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:64px}
.wcard{background:#fff;border-radius:var(--r);padding:34px 30px;border:1px solid var(--g2);transition:.25s}
.wcard:hover{transform:translateY(-4px);box-shadow:0 20px 50px -20px rgba(13,65,141,.25)}
.wcard .ic{width:44px;height:44px;border-radius:12px;background:#eef3fb;display:grid;place-items:center;margin-bottom:22px;color:var(--a)}
.wcard p{color:var(--mut);font-size:15px;margin-top:8px}
.compare{margin-top:72px;border-radius:var(--r);overflow:hidden;border:1px solid var(--g2);background:#fff}
.compare table{width:100%;border-collapse:collapse;font-size:15px}
.compare th,.compare td{padding:18px 22px;text-align:left;border-bottom:1px solid var(--g2)}
.compare th{font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.compare td:nth-child(2){color:var(--a);font-weight:600}.compare td:nth-child(3){color:var(--mut)}
.compare tr:last-child td{border:0}
/* steps */
.tl{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:64px;position:relative}
.tl:before{content:"";position:absolute;top:21px;left:10%;right:10%;height:2px;background:linear-gradient(90deg,var(--a),#7fa8ec)}
.tl .st{text-align:center;padding:0 10px;position:relative}
.tl .dot{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--a);margin:0 auto 18px;display:grid;place-items:center;font-weight:600;color:var(--a);font-size:15px}
.tl h3{font-size:18px}.tl p{font-size:14px;color:var(--mut);margin-top:6px}
/* close */
.close{text-align:center;background:radial-gradient(90% 120% at 50% 120%,#13396f,#05070c 70%);color:#fff}
.close .phones{display:flex;gap:40px;justify-content:center;margin-top:40px;flex-wrap:wrap;font-size:15px;color:var(--mutd)}
.close .phones a{color:#fff;font-size:22px;font-weight:600;display:block;margin-top:4px}
/* inner */
.phero{padding:clamp(90px,12vw,150px) 0 clamp(60px,7vw,90px);text-align:center;background:linear-gradient(180deg,#f5f6f8,#fff)}
.phero.dark{background:radial-gradient(100% 120% at 50% 120%,#13396f,#05070c 70%)}
.phero .sub{max-width:640px;margin:20px auto 0}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:var(--g1);border-radius:var(--r);padding:34px 30px}.card p{color:var(--mut);font-size:15px;margin-top:8px}
.dark .card{background:var(--ink2)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.ph{aspect-ratio:4/3;border-radius:var(--r);background:repeating-linear-gradient(135deg,#eef0f4 0 14px,#e6e9ef 14px 28px);display:grid;place-items:center;color:var(--mut);font-size:14px;font-weight:500}
.prose{max-width:760px;margin:0 auto}.prose h2{font-size:28px;margin:40px 0 12px}.prose p{color:var(--mut);margin-bottom:14px}
form.q{display:grid;gap:16px;background:#fff;border:1px solid var(--g2);border-radius:var(--r);padding:36px}
form.q label{display:grid;gap:6px;font-size:14px;font-weight:500}
form.q input,form.q select,form.q textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #d3d7df;border-radius:12px;background:#fff}
form.q input:focus,form.q select:focus,form.q textarea:focus{outline:2px solid var(--a);border-color:transparent}
form.q .consent{display:flex;gap:10px;font-weight:400;font-size:12.5px;color:var(--mut);align-items:flex-start}
form.q .consent input{margin-top:3px}
/* footer */
footer.site{background:var(--ink);color:var(--mutd);padding:72px 0 32px;font-size:14px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
footer h4{color:#fff;font-size:13px;font-weight:600;margin-bottom:14px}footer ul{list-style:none;display:grid;gap:10px}
footer a{color:var(--mutd)}footer a:hover{color:#fff}
footer .legal{display:flex;justify-content:space-between;border-top:1px solid #222731;margin-top:56px;padding-top:24px;flex-wrap:wrap;gap:12px}
/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media(max-width:900px){.prob-grid,.why,.steps3{grid-template-columns:1fr}.tl{grid-template-columns:1fr;gap:28px}.tl:before{display:none}.split{grid-template-columns:1fr;gap:36px}footer .cols{grid-template-columns:1fr 1fr}.compare{overflow-x:auto}}
.hiw{max-width:900px;margin:56px auto 0;background:linear-gradient(180deg,#f7f9fc,#fff);border:1px solid #e7e9ee;border-radius:24px;padding:24px}
.hiw svg{width:100%;height:auto;display:block}.hiw .hw{fill:#cfd8e6;transition:fill .6s}
.hiw .sc{opacity:0;transition:opacity .5s}.hiw[data-s="0"] .sc0,.hiw[data-s="1"] .sc1,.hiw[data-s="2"] .sc2,.hiw[data-s="3"] .sc3,.hiw[data-s="4"] .sc4{opacity:1}
.hiw[data-s="4"] .hw{fill:#ffd27a}
.hiw .arm{transform-box:fill-box;transform-origin:0 100%;animation:wave 1.6s ease-in-out infinite}@keyframes wave{50%{transform:rotate(-10deg)}}
.hiw .pulse{transform-box:fill-box;transform-origin:center;animation:pl 1.6s infinite}@keyframes pl{0%{transform:scale(.5);opacity:1}100%{transform:scale(2);opacity:0}}
.hiw .dp{animation:pop 2.4s infinite both}@keyframes pop{0%,10%{opacity:0}30%,100%{opacity:1}}
.hiw .ip{animation:drop 2.8s infinite both}@keyframes drop{0%{opacity:0;transform:translateY(-30px)}25%,100%{opacity:1;transform:none}}
.hiw .crew{animation:walk 2.8s ease-in-out infinite alternate}@keyframes walk{to{transform:translateX(140px)}}
.hiw .ck{transform-box:fill-box;transform-origin:center;animation:ckp 2.4s infinite}@keyframes ckp{0%,20%{transform:scale(0)}40%,100%{transform:scale(1)}}
.hiw .glowp{animation:gp 1.4s ease-in-out infinite alternate}@keyframes gp{to{fill:#3f86f0}}
.hiw .needle2{transform-box:view-box;transform-origin:635px 250px;animation:nd 2.4s ease-in-out infinite alternate}@keyframes nd{from{transform:rotate(-70deg)}to{transform:rotate(70deg)}}
.hiw .spark{animation:pop 1.6s infinite}
.tl .st{cursor:pointer;transition:opacity .3s}.tl.live .st{opacity:.45}.tl.live .st.on{opacity:1}.tl .st.on .dot{background:var(--a);color:#fff}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.bars span{transform:none}}
.hero .sky-day,.hero .sky-dusk,.hero .stars,.hero .scene,.hero .hero-shade{position:absolute;pointer-events:none}
.hero .sky-day,.hero .sky-dusk,.hero .stars,.hero-shade{inset:0}
.hero .sky-day{background:linear-gradient(180deg,#2b6fd0 0%,#5e9ae6 55%,#b9d6f5 100%);opacity:0;animation:hDay 16s infinite}
.hero .sky-dusk{background:linear-gradient(180deg,#1b2350 0%,#7a4a78 60%,#f29a5c 100%);opacity:0;animation:hDusk 16s infinite}
.hero .stars{animation:hStars 16s infinite}
.hero .scene{left:0;right:0;bottom:0;width:100%;height:340px;z-index:1}
.hero-shade{z-index:1;background:linear-gradient(180deg,rgba(3,8,20,.55) 0%,rgba(3,8,20,.25) 45%,transparent 70%)}
.hero h1,.hero .tag,.hero .sub{text-shadow:0 2px 24px rgba(0,10,30,.45)}
.hero .sun{animation:hSun 16s infinite;transform-box:view-box}
.hero .pv{}
.hero .pvglow{fill:#9cc6ff;opacity:0;animation:hPv 16s infinite;filter:drop-shadow(0 0 8px #7fb2ff)}
.hero .wins rect{fill:#1a2a44}
.hero .wlit rect{fill:#ffcf7a;opacity:0;animation:hLit 16s infinite;filter:drop-shadow(0 0 10px #ffb547)}
.hero .halo{opacity:0;animation:hLit 16s infinite}
.hero .bled{fill:#2f6fd6;opacity:.25;animation:hBat 16s infinite}
.hero .flow-sun,.hero .flow-bat{fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:4 10;animation:hDash .8s linear infinite,hFS 16s infinite}
.hero .flow-sun{stroke:#ffd27a}.hero .flow-bat{stroke:#7fb2ff;animation:hDash .8s linear infinite,hFB 16s infinite}
@keyframes hDash{to{stroke-dashoffset:-28}}
@keyframes hSun{0%,10%{transform:translate(-120px,300px)}28%,48%{transform:translate(0,0)}64%,100%{transform:translate(160px,300px)}}
@keyframes hDay{0%,12%{opacity:0}28%,48%{opacity:1}60%,100%{opacity:0}}
@keyframes hDusk{0%,6%{opacity:0}16%{opacity:.6}26%,46%{opacity:0}56%{opacity:.85}68%,100%{opacity:0}}
@keyframes hStars{0%,10%{opacity:1}24%,54%{opacity:0}66%,100%{opacity:1}}
@keyframes hPv{0%,24%{opacity:0}30%{opacity:.75}33%{opacity:.4}36%{opacity:.8}39%{opacity:.45}42%{opacity:.8}46%{opacity:.5}56%,100%{opacity:0}}
@keyframes hFS{0%,26%{opacity:0}31%,50%{opacity:1}56%,100%{opacity:0}}
@keyframes hLit{0%,4%{opacity:.9}14%,58%{opacity:0}68%,96%{opacity:.95}100%{opacity:.9}}
@keyframes hBat{0%,8%{opacity:1;fill:#5fe08a}30%,50%{opacity:1;fill:#2f6fd6}66%,100%{opacity:1;fill:#5fe08a}}
@keyframes hFB{0%,8%{opacity:1}14%,60%{opacity:0}68%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.hero .sky-day{opacity:1}.hero .stars{opacity:0}.hero .pvglow{opacity:.3}.hero .flow-sun{opacity:1}.hero .flow-bat,.hero .wlit rect,.hero .halo{opacity:0}}

/* HIW v3 scrollytelling */
.hiw-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:56px;margin-top:56px;align-items:start}
.hiw-stick{position:sticky;top:96px}
.hiw-grid .hiw{margin:0;max-width:none}
.hiw-grid .tl{display:block;margin:0;padding:12vh 0 18vh}
.hiw-grid .tl:before{display:none}
.hiw-grid .tl .st{display:flex;gap:18px;text-align:left;width:100%;background:none;border:0;border-left:2px solid #d5dce8;padding:22px 0 22px 22px;min-height:34vh;align-items:flex-start;font:inherit;color:inherit;opacity:1;transition:border-color .3s}
.hiw-grid .tl .st .dot{margin:0;flex:none;border-color:#8a95a8;color:#4a5466;transition:.3s}
.hiw-grid .tl .st h3{font-size:22px;color:#3d4657;transition:color .3s}
.hiw-grid .tl .st p{font-size:16px;color:#4a5466;margin-top:6px;max-width:34ch}
.hiw-grid .tl .st.on{border-left-color:var(--a)}
.hiw-grid .tl .st.on .dot{background:var(--a);border-color:var(--a);color:#fff}
.hiw-grid .tl .st.on h3{color:var(--ink)}.hiw-grid .tl .st.on p{color:#2a3242}
.hiw-grid .tl .st:focus-visible{outline:2px solid var(--a);outline-offset:4px}
.hiw .pn,.hiw .glowp{fill:#0D418D}
.hiw .sc{opacity:0;transition:opacity .45s}
.hiw .sc *{animation-play-state:paused}
.hiw.play[data-s="0"] .sc0 *,.hiw.play[data-s="1"] .sc1 *,.hiw.play[data-s="2"] .sc2 *,.hiw.play[data-s="3"] .sc3 *,.hiw.play[data-s="4"] .sc4 *{animation-play-state:running}
.hiw .aim{stroke-dashoffset:300;animation:aim 1.2s .3s ease-out forwards}@keyframes aim{from{stroke-dasharray:0 400}to{stroke-dasharray:400 0}}
.hiw .bub{opacity:0;animation:fin .5s 1.3s forwards}@keyframes fin{to{opacity:1}}
.hiw .arm{transform-box:fill-box;transform-origin:0 100%;animation:wave 1.6s ease-in-out infinite}
.hiw .ip{opacity:0;animation:drop .6s ease-out forwards}@keyframes drop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.hiw .dp{opacity:0;animation:fin .4s forwards}
.hiw .kw{transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);animation:kw 1.4s .6s ease-out forwards}@keyframes kw{to{transform:scaleX(1)}}
.hiw .climb{animation:climb 2.4s ease-in-out infinite alternate}@keyframes climb{from{transform:translate(0,0)}to{transform:translate(-30px,-110px)}}
.hiw .roofer{animation:none}
.hiw .carry{animation:carry 2.4s ease-in-out infinite}@keyframes carry{0%{transform:translate(0,0);opacity:0}20%{opacity:.85}80%{transform:translate(-160px,-90px);opacity:.85}100%{transform:translate(-160px,-90px);opacity:0}}
.hiw .tk{opacity:0;animation:fin .3s forwards}
.hiw .ck{transform-box:fill-box;transform-origin:center;transform:scale(0);animation:ckp .5s 1.4s forwards}@keyframes ckp{to{transform:scale(1)}}
.hiw .psun{animation:pl2 2s ease-in-out infinite alternate}@keyframes pl2{to{opacity:.7}}
.hiw .glowp{animation:gp 1.2s ease-in-out infinite alternate}
.hiw .pflow{animation:hDash .8s linear infinite}
.hiw .needle2{transform-box:view-box;transform-origin:646px 250px;animation:nd 2s ease-in-out infinite alternate}
.hiw[data-s="4"] .hw{fill:#ffd27a;filter:drop-shadow(0 0 8px #ffb547)}
@media(max-width:900px){.hiw-grid{grid-template-columns:1fr;gap:16px}.hiw-stick{top:64px;z-index:2;background:#fff;padding-bottom:8px}.hiw-grid .tl{padding:4vh 0 10vh}.hiw-grid .tl .st{min-height:40vh}}
@media(prefers-reduced-motion:reduce){.hiw .ip,.hiw .dp,.hiw .bub,.hiw .tk{opacity:1}.hiw .ck,.hiw .kw{transform:none}.hiw .aim{stroke-dasharray:6 6}}