:root{--navy:#0b1f3a;--navy2:#13305a;--sky:#2f8cff;--sky2:#7cc0ff;--bg:#f6f8fb;--card:#fff;--txt:#0f1d33;--mut:#5b6b82;--line:#e3e8f0;--sans:'Plus Jakarta Sans','Segoe UI',Helvetica,Arial,sans-serif;--r:18px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.wrap{width:min(1220px,92vw);margin:0 auto}
h1,h2,h3{letter-spacing:-.03em;line-height:1.08;font-weight:800}
h2{font-size:clamp(2.1rem,4.2vw,3.4rem)}h2 span{color:var(--sky)}
.ey{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:40px;background:#e8f1ff;color:#1d63c9;font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.ey i{width:6px;height:6px;border-radius:50%;background:var(--sky)}
.sec{padding:110px 0}.center{text-align:center}.center p.sub{margin-left:auto;margin-right:auto}
p.sub{color:var(--mut);font-size:1.1rem;max-width:620px;margin-top:14px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:12px;font-weight:700;transition:transform .2s,box-shadow .2s,background .2s}
.btn-p{background:var(--sky);color:#fff;box-shadow:0 12px 30px -10px rgba(47,140,255,.7)}.btn-p:hover{transform:translateY(-2px);background:#1f7cf0}
.btn-n{background:var(--navy);color:#fff}.btn-n:hover{transform:translateY(-2px)}
.btn-w{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}.btn-w:hover{background:rgba(255,255,255,.24)}
.nav{position:fixed;top:14px;left:0;right:0;z-index:50;transition:top .3s}
.nav-in{display:flex;align-items:center;gap:28px;height:70px;padding:0 14px 0 22px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5);color:#fff;transition:background .3s,color .3s,box-shadow .3s}
.nav.scrolled{top:8px}.nav.scrolled .nav-in{background:rgba(255,255,255,.86);color:var(--txt);border-color:rgba(11,31,58,.08);box-shadow:0 14px 40px -18px rgba(11,31,58,.35)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;letter-spacing:-.02em}.logo svg{width:36px;height:36px}.logo small{display:block;font-size:.66rem;letter-spacing:.22em;font-weight:700;opacity:.7;margin-top:-2px}
.links{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:.95rem}.links a{opacity:.85}.links a:hover{opacity:1;color:var(--sky)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid currentColor}
.burger span,.burger span:before,.burger span:after{display:block;width:18px;height:2px;background:currentColor;margin:auto;position:relative}.burger span:before,.burger span:after{content:"";position:absolute}.burger span:before{top:-6px}.burger span:after{top:6px}
.mnav{display:none;position:fixed;top:92px;left:4vw;right:4vw;z-index:49;background:#fff;border-radius:18px;padding:12px 22px;box-shadow:0 30px 60px -20px rgba(11,31,58,.4)}.mnav.open{display:block}.mnav a{display:block;padding:14px 0;font-weight:700;border-bottom:1px solid var(--line)}.mnav a:last-child{border:0}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden;padding:150px 0 90px}
.hero .bg{position:absolute;inset:0;background:url(assets/dusk-house.jpg) center 40%/cover;animation:kb 22s ease-in-out infinite alternate;will-change:transform}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,31,58,.55) 0%,rgba(11,31,58,.25) 35%,rgba(11,31,58,.88) 100%),linear-gradient(90deg,rgba(11,31,58,.7),transparent 70%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.hero h1{font-size:clamp(2.9rem,6.6vw,5.6rem);margin:18px 0 20px}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(30px);animation:wu .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wu{to{opacity:1;transform:none}}
.hero p{font-size:1.18rem;max-width:560px;opacity:.9}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.rating{display:flex;align-items:center;gap:14px;margin-top:34px;font-size:.92rem}.rating .av{display:flex}.rating .av i{width:36px;height:36px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.8rem;color:#fff}.rating .av i:first-child{margin-left:0}
.hcard{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-radius:24px;padding:28px;box-shadow:0 30px 70px -20px rgba(0,0,0,.5)}
.hcard h3{font-size:1.4rem;margin-bottom:4px}.hcard p{font-size:.92rem;opacity:.8;margin-bottom:18px}
.hcard .row{display:flex;gap:10px}.hcard input{flex:1;min-width:0;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:inherit;outline:none}.hcard input::placeholder{color:rgba(255,255,255,.7)}
.hcard .perks{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px;font-size:.85rem}.hcard .perks span:before{content:"✓ ";color:var(--sky2);font-weight:800}
.hmsg{font-size:.85rem;margin-top:12px;min-height:1.2em;color:#bfe0ff}
/* trust strip */
.trust{background:#fff;border-bottom:1px solid var(--line)}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:28px 0;flex-wrap:wrap}
.trust .b{display:flex;align-items:center;gap:10px;font-weight:700;color:#7a879a;font-size:.95rem}.trust .b svg{width:30px;height:30px;stroke:#9aa8bc;fill:none;stroke-width:1.6}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:50px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px}
.stat b{font-size:clamp(2.4rem,4vw,3.2rem);font-weight:800;letter-spacing:-.04em;color:var(--navy);line-height:1}.stat b span{color:var(--sky)}
.stat p{color:var(--mut);margin-top:8px;font-size:.95rem}
.note{font-size:.78rem;color:#97a3b6;margin-top:14px;letter-spacing:.06em;text-transform:uppercase;font-weight:600}
/* services bento */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:250px;gap:20px;margin-top:50px}
.tile{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);padding:30px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .35s,box-shadow .35s}
.tile:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(11,31,58,.45)}
.tile.big{grid-column:span 2;grid-row:span 2;color:#fff;border:0}.tile.wide{grid-column:span 2}
.tile.img{color:#fff;border:0}.tile.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}.tile.img:hover img{transform:scale(1.06)}
.tile.img:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(11,31,58,.9))}
.tile>*{position:relative;z-index:2}.tile.img>img{z-index:0}
.tile .ic{width:52px;height:52px;border-radius:14px;background:#e8f1ff;display:grid;place-items:center;margin-bottom:auto}.tile .ic svg{width:26px;height:26px;stroke:var(--sky);fill:none;stroke-width:1.8}
.tile h3{font-size:1.35rem;margin-bottom:6px}.tile p{font-size:.94rem;color:var(--mut)}.tile.img p,.tile.big p{color:rgba(255,255,255,.82)}
.tile.big h3{font-size:2rem}.tile.navy{background:var(--navy);color:#fff;border:0}.tile.navy p{color:#a9bad3}.tile.navy .ic{background:rgba(124,192,255,.14)}
/* estimator */
.est{background:var(--navy);color:#fff;border-radius:32px;padding:60px;display:grid;grid-template-columns:1fr 1fr;gap:60px;position:relative;overflow:hidden}
.est:before{content:"";position:absolute;width:600px;height:600px;right:-200px;top:-200px;border-radius:50%;background:radial-gradient(rgba(47,140,255,.35),transparent 65%)}
.est>*{position:relative}
.est h2{color:#fff}.est .sub{color:#a9bad3}
.ctl{margin-top:28px}.ctl label{display:flex;justify-content:space-between;font-weight:700;font-size:.92rem;margin-bottom:12px;color:#d3def0}.ctl label b{color:var(--sky2)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--sky) var(--v,40%),rgba(255,255,255,.15) var(--v,40%));outline:none}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:6px solid var(--sky);box-shadow:0 4px 14px rgba(0,0,0,.4);cursor:grab}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:6px solid var(--sky)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.seg button{padding:14px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-weight:700;font-size:.92rem;transition:.2s}.seg button small{display:block;font-weight:500;font-size:.76rem;opacity:.7}
.seg button.on{background:#fff;color:var(--navy);border-color:#fff}
.out{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:34px;display:flex;flex-direction:column}
.out .roof{height:170px;margin:-6px 0 18px}
.out .lab{font-size:.85rem;color:#a9bad3;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.out .big{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;margin:6px 0 4px}
.out .mo{color:var(--sky2);font-weight:700}
.out .bars{display:grid;gap:12px;margin:24px 0}
.out .bar{display:grid;grid-template-columns:110px 1fr 50px;gap:12px;align-items:center;font-size:.85rem;color:#d3def0}
.out .bar i{height:8px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}.out .bar i b{display:block;height:100%;background:linear-gradient(90deg,var(--sky),var(--sky2));border-radius:8px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.out .btn{margin-top:auto;justify-content:center}
/* storm */
.storm{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.storm .ph{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:4/4.4}
.storm .ph img{position:absolute;left:0;top:-15%;width:100%;height:130%;object-fit:cover;will-change:transform}
.storm .ph .tagc{position:absolute;left:20px;bottom:20px;right:20px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center;font-size:.9rem}
.storm .ph .tagc i{width:44px;height:44px;border-radius:12px;background:#fff2e3;display:grid;place-items:center;font-style:normal;font-size:1.3rem;flex:0 0 44px}
.tl{margin-top:34px;position:relative;padding-left:34px}
.tl:before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line)}
.tl .tlp{position:absolute;left:11px;top:6px;width:2px;height:0;background:var(--sky);transition:height 1.6s ease}
.tl.in .tlp{height:calc(100% - 12px)}
.tl .it{position:relative;padding-bottom:26px}.tl .it:before{content:"";position:absolute;left:-29px;top:4px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--sky)}
.tl .it b{display:block;font-size:1.08rem}.tl .it span{color:var(--mut);font-size:.95rem}
/* materials tabs */
.tabs{display:flex;gap:8px;justify-content:center;margin:40px auto 30px;background:#fff;border:1px solid var(--line);padding:6px;border-radius:16px;width:max-content;max-width:100%;overflow:auto}
.tabs button{padding:12px 22px;border-radius:12px;font-weight:700;color:var(--mut);white-space:nowrap;transition:.25s}.tabs button.on{background:var(--navy);color:#fff}
.mat{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;background:#fff;border:1px solid var(--line);border-radius:28px;padding:22px;align-items:center}
.mat .mi{border-radius:20px;overflow:hidden;aspect-ratio:16/11}.mat .mi img{width:100%;height:100%;object-fit:cover;transition:opacity .4s,transform .6s}
.mat .mc{padding:20px}.mat h3{font-size:1.9rem}.mat p{color:var(--mut);margin:10px 0 22px}
.spec{display:grid;gap:14px}.spec div{display:grid;grid-template-columns:120px 1fr 64px;align-items:center;gap:12px;font-size:.9rem;font-weight:600}.spec i{height:8px;border-radius:8px;background:#edf1f7;overflow:hidden}.spec i b{display:block;height:100%;width:0;background:var(--sky);border-radius:8px;transition:width .8s cubic-bezier(.2,.8,.2,1)}.spec em{font-style:normal;color:var(--mut);text-align:right}
/* projects */
.proj{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.pj{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;color:#fff}
.pj img{width:100%;height:100%;object-fit:cover;transition:transform .8s}.pj:hover img{transform:scale(1.07)}
.pj:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 45%,rgba(11,31,58,.92))}
.pj .c{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}.pj .c small{display:inline-block;padding:4px 10px;border-radius:30px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}.pj .c b{display:block;font-size:1.2rem}.pj .c span{font-size:.88rem;opacity:.8}
/* reviews */
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}
.rev{background:#fff;border:1px solid var(--line);border-radius:22px;padding:30px}
.rev .st{color:#f5a524;letter-spacing:2px}.rev p{margin:14px 0 22px;font-size:1.04rem}
.rev .who{display:flex;gap:12px;align-items:center}.rev .who i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--sky),var(--navy2))}.rev .who small{display:block;color:var(--mut);font-size:.85rem}
/* financing + area */
.fin{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fcard{border-radius:28px;padding:44px;background:#fff;border:1px solid var(--line)}
.fcard.dark{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border:0}
.fcard h3{font-size:1.9rem;margin:14px 0 10px}.fcard p{color:var(--mut)}.fcard.dark p{color:#a9bad3}
.fcard .apr{display:flex;gap:30px;margin:26px 0}.fcard .apr b{display:block;font-size:2.4rem;letter-spacing:-.04em}.fcard .apr span{font-size:.85rem;color:#a9bad3}
.amap{position:relative;border-radius:20px;overflow:hidden;margin-top:20px;aspect-ratio:16/9;background:#eef3fa}.amap svg{width:100%;height:100%;display:block}
/* contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:start}
.cform{background:#fff;border:1px solid var(--line);border-radius:28px;padding:40px;box-shadow:0 30px 60px -40px rgba(11,31,58,.4)}
.cform .g{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cform .fl{margin-bottom:12px}
.fl{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:12px;font:inherit;background:#f9fbfd;outline:none;transition:border .2s,box-shadow .2s}.fl:focus{border-color:var(--sky);box-shadow:0 0 0 4px rgba(47,140,255,.12)}
.cform .btn{width:100%;justify-content:center;margin-top:6px}
.cinfo div{display:flex;gap:16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.cinfo i{width:48px;height:48px;border-radius:14px;background:#e8f1ff;display:grid;place-items:center;font-style:normal;font-size:1.2rem}.cinfo small{display:block;color:var(--mut);font-size:.82rem}
.okmsg{display:none;margin-top:14px;padding:14px 16px;border-radius:12px;background:#e9f8ef;color:#13703a;font-weight:600}.okmsg.show{display:block}
/* faq */
.faq{max-width:860px;margin:40px auto 0;display:grid;gap:12px}
.qa{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.qa button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 26px;font-weight:700;font-size:1.06rem;text-align:left}
.qa button i{flex:0 0 32px;height:32px;border-radius:50%;background:#eef3fa;display:grid;place-items:center;font-style:normal;transition:transform .3s,background .3s}.qa.open button i{transform:rotate(45deg);background:var(--sky);color:#fff}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s}.qa.open .a{grid-template-rows:1fr}.qa .a>div{overflow:hidden}.qa .a p{padding:0 26px 22px;color:var(--mut)}
footer{background:var(--navy);color:#c5d2e6;padding:80px 0 30px;margin-top:60px}
.fg{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}footer h5{color:#fff;font-size:.95rem;margin-bottom:14px}footer p,footer a{display:block;font-size:.94rem;margin-bottom:6px;color:#9fb0c9}footer a:hover{color:#fff}
.fb{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:50px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:.85rem;color:#7f92ae}
.spaced{display:inline-flex !important;gap:8px;margin:0 !important}.spaced b{letter-spacing:.24em;background:linear-gradient(90deg,#e6ecff,#7da2ff,#a873ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
@media(max-width:1060px){.links{display:none}.burger{display:block}.hero .wrap,.est,.storm,.mat,.fin,.contact{grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr}.stats{grid-template-columns:1fr 1fr}.proj,.revs{grid-template-columns:1fr 1fr}.fg{grid-template-columns:1fr 1fr}.nav-in .btn{display:none}}
@media(max-width:680px){body{font-size:16px}.sec{padding:76px 0}.hero{padding:130px 0 60px}.bento{grid-template-columns:1fr;grid-auto-rows:220px}.tile.big,.tile.wide{grid-column:auto}.tile.big{grid-row:span 1}.proj,.revs{grid-template-columns:1fr}.est{padding:28px;border-radius:24px}.out{padding:22px}.out .bar{grid-template-columns:90px 1fr 44px}.fcard{padding:28px}.cform{padding:24px}.cform .g{grid-template-columns:1fr}.fg{grid-template-columns:1fr}.hcard .row{flex-direction:column}.spec div{grid-template-columns:100px 1fr 54px}.trust .wrap{justify-content:center;gap:18px 26px}.stats{gap:12px}.stat{padding:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.hero h1 .w{opacity:1;transform:none}}
.est>*,.storm>*,.mat>*,.contact>*,.fin>*,.hero .wrap>*{min-width:0}
.fcard .apr b{white-space:nowrap}
@media(max-width:680px){.tile.big{grid-row:span 2}.tile.big h3{font-size:1.6rem}.fcard .apr{gap:18px}.fcard .apr b{font-size:2rem}.out .roof{height:130px}}