:root{--bg:#f6f9fd;--surface:#fff;--text:#14213d;--muted:#55627a;--blue:#0b57e8;--sky:#6db8f7;--green:#2fc52f;--red:#cb0707;--line:#e1e8f2;--hero:#eaf3ff;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Heebo","Assistant",Arial,sans-serif;line-height:1.7}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
header{background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.logo{background:#fff;border-radius:10px;height:78px;width:auto;max-width:100%}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;background:var(--blue);color:#fff;text-decoration:none;font-weight:700}
.btn.alt{background:transparent;color:var(--text);border:2px solid var(--blue)}
.hero{background:var(--hero);padding:64px 0 72px;border-bottom:4px solid var(--red)}
.hero h1{font-size:clamp(30px,5vw,48px);line-height:1.2;margin:0 0 14px}
.hero h1 span{color:var(--blue)}
.hero p{font-size:18px;color:var(--muted);max-width:560px;margin:0 0 26px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
section{padding:56px 0}
h2{font-size:28px;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 28px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;border-top:5px solid var(--blue)}
.card:nth-child(2){border-top-color:var(--sky)}
.card:nth-child(3){border-top-color:var(--green)}
.card:nth-child(4){border-top-color:var(--red)}
.card h3{margin:0 0 8px;font-size:21px}
.card p{margin:0;color:var(--muted)}
.why{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.why li{padding-right:30px;position:relative;font-weight:600}
.why li:before{content:"✓";position:absolute;right:0;color:var(--green);font-weight:800}
.contact{text-align:center}
.contact .cta{justify-content:center}
.info{color:var(--muted);margin-top:18px}
footer{text-align:center;padding:22px 20px;color:var(--muted);font-size:14px;border-top:1px solid var(--line)}

.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.gal figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;cursor:zoom-in}
.gal img{width:100%;height:auto;display:block}
.gal figcaption{padding:12px 16px;font-weight:600}
.tg{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.tg blockquote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;border-right:5px solid var(--green)}
.tg blockquote p{margin:0 0 14px}
.tg cite{font-style:normal;color:var(--muted);font-size:15px}
.tg cite b{color:var(--text)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;padding:16px;z-index:50;cursor:zoom-out}
.lb.on{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:8px}

.sk{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.sk figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.sk figcaption{padding:12px 16px 16px}
.sk figcaption b{display:block;font-size:18px}
.sk figcaption span{color:var(--muted);font-size:15px}
.sk svg{width:100%;height:auto;display:block;background:var(--hero)}
.sk svg *{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sk .b{stroke:var(--blue)}.sk .r{stroke:var(--red)}.sk .m{stroke:var(--muted)}.sk .s{stroke:var(--sky)}
.sk .fs{fill:var(--surface)}.sk .fm{fill:var(--muted);opacity:.3}.sk .fb{fill:var(--blue);opacity:.3}.sk .fk{fill:var(--sky)}.sk .fr{fill:var(--red)}

.gal{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.gal img{aspect-ratio:4/3;object-fit:cover;transition:transform .35s}
.gal figure{position:relative}
.gal figure:hover img{transform:scale(1.05)}
.gal .imgw{overflow:hidden}
.gal figcaption{display:block}
.gal figcaption b{display:block;font-size:18px}
.gal figcaption span{color:var(--muted);font-size:14px;font-weight:400}
.gal figure:first-child{grid-column:1/-1}
.gal figure:first-child img{aspect-ratio:21/9}

.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.deco{position:absolute;left:12px;bottom:10px;width:min(30vw,240px);height:auto;opacity:.28;z-index:0;pointer-events:none}
.deco .g{fill:var(--green)}.deco .bl{fill:var(--blue)}.deco .sk2{fill:var(--sky)}
.deco .g{animation:fl 6s ease-in-out infinite}
.deco .bl{animation:fl 6s ease-in-out -2s infinite}
.deco .sk2{animation:fl 6s ease-in-out -4s infinite}
@keyframes fl{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-14px)}}
@media (max-width:700px){.deco{opacity:.15;width:160px}}
.hero h1,.hero p,.hero .cta{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.hero p{animation-delay:.15s}.hero .cta{animation-delay:.3s}
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero h1 span{background:linear-gradient(90deg,var(--blue),var(--sky),var(--blue));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sh 5s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.hero{border-bottom:0;position:relative}
.hero:after{content:"";position:absolute;right:0;bottom:0;height:4px;background:var(--red);width:100%;transform-origin:right;animation:ln 1.2s .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes ln{from{transform:scaleX(0)}to{transform:scaleX(1)}}
h2{position:relative;padding-bottom:10px}
h2:after{content:"";position:absolute;right:0;bottom:0;width:56px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--red) 0 40%,var(--blue) 40% 70%,var(--green) 70%);transition:width .8s .15s}
.contact h2:after{right:50%;margin-right:-28px}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.in h2:after{width:110px}
.js h2:after{width:0}
.contact.rv.in h2:after,.js .contact.in h2:after{width:110px}
.card,.gal figure,.sk figure,.tg blockquote{transition:transform .3s,box-shadow .3s}
.card:hover,.sk figure:hover,.tg blockquote:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(11,87,232,.14)}
.gal figure{overflow:hidden}.gal figure:hover{box-shadow:0 14px 30px rgba(11,87,232,.18)}
.btn{transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(11,87,232,.3)}
.sk .fr{animation:pl 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pl{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}
.tools{background:var(--hero);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.chip{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 22px;font-weight:700;font-size:18px;border-right:5px solid var(--blue)}
.chip:nth-child(2){border-right-color:var(--green)}
.chip:nth-child(3){border-right-color:var(--red)}
.chip small{display:block;font-weight:400;color:var(--muted);font-size:14px}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .rv{opacity:1;transform:none}.js h2:after{width:110px}}

header{position:sticky;top:0;z-index:40}
.bar{gap:14px;flex-wrap:wrap}
.nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a{padding:8px 12px;border-radius:999px;color:var(--text);text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover{background:var(--hero)}
.nav a.on{background:var(--hero);color:var(--blue)}
.menu{display:none;background:none;border:2px solid var(--line);border-radius:10px;padding:8px 12px;font:inherit;color:var(--text);cursor:pointer}
@media (max-width:1100px) and (min-width:861px){.nav{gap:0}.nav a{padding:8px 8px;font-size:15px}.bar .btn{padding:10px 16px;font-size:15px}}
@media (max-width:900px) and (min-width:861px){.nav a{padding:8px 5px;font-size:14px}.bar .btn{padding:8px 12px;font-size:14px}}
@media (max-width:860px){.menu{display:block}.nav{display:none;width:100%;flex-direction:column;align-items:stretch;order:5}.nav.open{display:flex}.nav a{padding:12px}.bar .btn{display:none}}
.ph{background:var(--hero);padding:46px 0 40px;border-bottom:4px solid var(--red)}
.ph h1{margin:0 0 8px;font-size:clamp(28px,4.5vw,40px)}
.ph p{margin:0;color:var(--muted);max-width:640px;font-size:18px}
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.svc .card ul{margin:12px 0 0;padding:0;list-style:none}
.svc .card li{padding-right:24px;position:relative;color:var(--muted);margin:6px 0}
.svc .card li:before{content:"✓";position:absolute;right:0;color:var(--green);font-weight:800}
.card a.more{display:inline-block;margin-top:14px;color:var(--blue);font-weight:700;text-decoration:none}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 76px 20px 22px;position:relative}
.steps li:before{content:counter(s);position:absolute;right:20px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:grid;place-items:center;font-size:19px}
.steps li:nth-child(3n+2):before{background:var(--green)}
.steps li:nth-child(3n):before{background:var(--red)}
.steps b{display:block;font-size:19px;margin-bottom:2px}
.steps span{color:var(--muted)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;align-items:start}
.note{background:var(--hero);border-right:5px solid var(--blue);border-radius:12px;padding:16px 20px;color:var(--muted)}
.ctaband{background:var(--blue);color:#fff;text-align:center;padding:48px 0}
.ctaband h2{color:#fff}.ctaband h2:after{display:none}
.ctaband p{margin:0 0 22px;opacity:.92}
.ctaband .btn{background:#fff;color:var(--blue)}
.ctaband .btn.alt{background:transparent;color:#fff;border-color:#fff}
.cbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center;border-top:5px solid var(--blue)}
.cbox big{display:block;font-size:30px;font-weight:800;direction:ltr;margin:6px 0 14px}
.fnav{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:center;margin-bottom:10px}
.fnav a{color:var(--muted);text-decoration:none}.fnav a:hover{color:var(--blue)}
.more-row{text-align:center;margin-top:26px}
.hero:after{display:none}

.nlc{margin:-4px 0 14px}.nlc>b{display:block;font-size:14px;color:var(--blue);margin-bottom:2px}.nlc .nl{margin-top:4px}
.card .nl{font-size:13.5px}
section{padding:60px 0}
h1,h2{text-wrap:balance}
@media (max-width:700px){section{padding:44px 0}.hero{padding:56px 0 60px}}
.sk .solar svg{height:300px;width:100%}
@media (max-width:700px){.sk .solar svg{height:auto}.wafab{padding:9px 15px;font-size:14px;left:12px}}
.sk .solar{grid-column:1/-1}
.nl{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:14px;color:var(--muted)}
.nb{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font:700 11px/1 Heebo,Arial,sans-serif;font-style:normal;margin-inline-end:6px;flex:none}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px;border-top:5px solid var(--green)}
.fcard h3{margin:0 0 14px}
.fcard label{display:block;font-weight:600;font-size:14px;margin-bottom:12px}
.fcard input,.fcard textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:#fff;color:inherit}
.fcard input:focus,.fcard textarea:focus{outline:2px solid var(--blue);border-color:transparent}
.cfm{margin:12px 0 0;font-weight:600;min-height:1.4em}.cfm.ok{color:#1b7f3a}.cfm.err{color:var(--red)}
.btn.wa{background:#1fa855;box-shadow:0 4px 12px rgba(31,168,85,.3)}
.wafab{position:fixed;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;background:#1fa855;color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border-radius:999px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.wafab:hover{background:#188a46}
.svc.apr{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card.sm{padding:18px 20px}.card.sm h3{font-size:18px}
.apr .card:nth-child(4n+1){border-top-color:var(--blue)}.apr .card:nth-child(4n+2){border-top-color:var(--sky)}.apr .card:nth-child(4n+3){border-top-color:var(--green)}.apr .card:nth-child(4n){border-top-color:var(--red)}
.tipl{list-style:none;margin:0;padding:0;display:grid;gap:10px}.tipl li{padding-right:28px;position:relative;color:var(--text)}.tipl li:before{content:"✓";position:absolute;right:0;color:var(--green);font-weight:800}
.gal{grid-template-columns:repeat(auto-fill,minmax(225px,1fr))}
.gal figure:first-child{grid-column:auto}
.gal figure:first-child img{aspect-ratio:4/3}
.chip{flex:1 1 240px}
.pst{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.pst figure{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pst img{width:100%;height:auto;display:block;background:var(--hero)}
.pst figcaption{padding:14px 18px 18px}
.pst b{display:block;font-size:18px}
.pst b i{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;font-size:14px;margin-inline-end:8px}
.pst span{color:var(--muted);font-size:15px}
.pst figure:nth-child(3n+2) b i{background:var(--green)}.pst figure:nth-child(3n) b i{background:var(--red)}
.flow4{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.cimg{margin:-24px -24px 16px;background:#f4f8fd;border-radius:12px 12px 0 0;overflow:hidden;position:relative}
.cimg img{width:100%;height:auto;display:block}
.cimg figcaption{position:absolute;bottom:8px;right:10px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.85);padding:2px 10px;border-radius:999px}
.fcon{margin-bottom:8px}.fcon a{color:#fff;text-decoration:none;font-weight:600}.fcon a:hover{text-decoration:underline}
.m3{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.m3 img{width:100%;height:auto;display:block;max-height:560px;object-fit:contain;background:#f4f8fd}
.m3 figcaption{padding:14px 18px 18px}.m3 figcaption b{display:block;font-size:19px}.m3 figcaption span{color:var(--muted)}
.svc.four{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.gal.g3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.gal.g3 figure:first-child{grid-column:auto}
.gal.g3 figure:first-child img{aspect-ratio:4/3}
:root{color-scheme:light}
body{background:#f4f8fd}
header{background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(20,33,61,.06)}
.bar{padding:10px 0}
.logo{height:62px;background:none;border-radius:0}
.hero{background:linear-gradient(135deg,#eaf3ff 0%,#f7fbff 60%,#e6f1ff 100%);padding:84px 0 92px}
.hero:before,.ph:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(11,87,232,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(11,87,232,.06) 1px,transparent 1px);background-size:36px 36px;pointer-events:none}
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#eaf3ff,#f7fbff)}
.ph .wrap{position:relative}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(32px,5.2vw,54px)}
.card,.steps li,.cbox,.tg blockquote,.sk figure,.gal figure,.chip{box-shadow:0 1px 2px rgba(20,33,61,.04),0 6px 18px rgba(20,33,61,.05)}
section{padding:68px 0}
.btn{box-shadow:0 4px 12px rgba(11,87,232,.22)}
.btn.alt{box-shadow:none}
footer{background:#14213d;color:#b9c6dd;border-top:0;padding:30px 20px}
.fnav a{color:#dbe6fb}.fnav a:hover{color:#fff}
.why li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 46px 14px 14px}
.why li:before{right:16px;top:14px}