:root{--a:#3d63f5;--a2:#2746d8;--a3:#6f8cff;--ink:#111318;--mut:#565b68;--bg:#f5f5f7;--line:#e6e7ee}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:20px}
body{font-family:Montserrat,'Segoe UI',Arial,sans-serif;font-weight:500;background:#fff;color:var(--ink);font-size:16px;line-height:1.5;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.c{width:100%;max-width:1400px;margin:0 auto;padding:0 20px}
.sr,.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px 16px;border-radius:8px;z-index:100}
:focus-visible{outline:3px solid var(--a3);outline-offset:2px}
.ico{width:1em;height:1em;flex:none}
.sec{padding-top:44px;padding-bottom:44px;position:relative}
.card{background:var(--bg);border-radius:16px;transition:transform .25s,box-shadow .25s}
a.card:hover,.s5 .card:hover,.bc:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(17,19,24,.1)}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}

.ttl{font-size:34px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:18px;margin-bottom:30px}
.ttl i{width:56px;height:56px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--a);color:#fff;font-weight:600;padding:16px 30px;border-radius:12px;font-size:16px;white-space:nowrap;transition:background .2s,transform .2s,box-shadow .2s;border:2px solid transparent}
.btn:hover{background:var(--a2);transform:translateY(-2px);box-shadow:0 10px 24px rgba(61,99,245,.3)}
.btn.w{background:#fff;color:var(--a)}.btn.w:hover{background:#eef2ff}
.btn.g{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}.btn.g:hover{background:rgba(255,255,255,.14)}
.btn .ico{font-size:20px}
.btn[disabled]{opacity:.6;pointer-events:none}

/* шапка */
.hd-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:20px}
.logo{display:flex;align-items:center;gap:14px}
.logo b{display:block;font-size:34px;font-weight:800;line-height:1;color:var(--a2)}
.logo small{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--a2);text-transform:uppercase}
.hd-mid{display:flex;gap:26px;align-items:center}
.tel{font-size:30px;font-weight:700;color:var(--a2);white-space:nowrap}
.soc{display:flex;gap:12px;justify-content:flex-end;margin-bottom:12px}
.soc a{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:.2s}
.soc a:hover{background:var(--a);border-color:var(--a);color:#fff}
.soc .ico{font-size:18px}
.hrs{font-size:14px;color:#6c7280;text-align:right;white-space:nowrap}.hrs b{color:var(--ink)}
.burger{display:none;width:48px;height:48px;border-radius:12px;background:var(--bg);font-size:26px;align-items:center;justify-content:center}
.nv{border-top:1px solid #ececf0;border-bottom:1px solid #ececf0}
.nv .c{display:flex;align-items:center;gap:8px 34px;min-height:82px;font-size:17px;flex-wrap:wrap}
.nv a{padding:10px 0;transition:color .2s}.nv a:hover{color:var(--a)}
.nv a.p{background:var(--a);color:#fff;padding:12px 22px;border-radius:12px;font-weight:600}
.nv .city{margin-left:auto;color:#9a9fab}

/* первый экран */
.hero-wrap{padding-top:22px}
.ban{height:580px;border-radius:20px;position:relative;overflow:hidden;background:var(--a2)}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s}
.slide.on{opacity:1;visibility:visible}
.slide>img,.cta>.bg,.mt>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shape,.shape i{position:absolute;inset:0}
.shape .p1{background:linear-gradient(115deg,var(--a2) 0,var(--a) 60%,var(--a3) 100%);clip-path:polygon(0 0,64% 0,39% 100%,0 100%)}
.shape .p2{background:var(--a3);opacity:.85;clip-path:polygon(55% 0,64% 0,50.5% 54%,41.5% 54%)}
.shape .p3{background:rgba(255,255,255,.1);clip-path:polygon(10% 0,38% 0,14% 100%,0 100%,0 22%)}
.ban .tx{position:absolute;left:72px;top:64px;color:#fff;width:min(720px,54%)}
.lb{display:inline-block;background:rgba(255,255,255,.18);border-radius:8px;padding:6px 14px;font-size:14px;font-weight:600;letter-spacing:.04em;margin-bottom:22px;text-transform:uppercase}
.ban h1,.ban .h1{font-size:clamp(30px,4vw,58px);font-weight:700;line-height:1.1;text-transform:uppercase;letter-spacing:.01em;margin-bottom:26px}
.ban ul{list-style:none;font-size:clamp(18px,2vw,28px);font-weight:400;text-transform:uppercase;letter-spacing:.04em;margin-bottom:34px}
.ban li{margin-bottom:6px}.ban li:before{content:"•";margin-right:14px}
.ar{position:absolute;top:50%;margin-top:-34px;width:56px;height:68px;background:#fff;border-radius:14px;font-size:28px;display:flex;align-items:center;justify-content:center;opacity:.92;transition:.2s}
.ar:hover{opacity:1;transform:scale(1.06)}.ar.next{right:18px}.ar.prev{left:18px;display:none}
.dots{display:flex;gap:10px;justify-content:center;margin-top:18px}
.dots button{width:44px;height:8px;border-radius:4px;background:#d9e0fd;transition:.3s}.dots button.on{background:var(--a);width:64px}

/* формы */
.kr-form input[type=text],.kr-form input[type=tel],.kr-form input[type=number],.kr-form select{width:100%;background:#fff;border:1.5px solid #e2e3ea;border-radius:12px;padding:15px 16px;outline:0;transition:border-color .2s}
.kr-form input:focus,.kr-form select:focus{border-color:var(--a)}
.kr-form .bad{border-color:#e5484d !important}
.kr-form.col{display:grid;gap:10px}
.kr-form.inline{display:grid;grid-template-columns:1fr 1fr auto;gap:12px}
.kr-form .agree{grid-column:1/-1;display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:#6c7280;line-height:1.4;font-weight:400}
.kr-form .agree input{margin-top:2px;accent-color:var(--a)}.kr-form .agree a{text-decoration:underline}
.kr-form .msg{grid-column:1/-1;font-size:14.5px;font-weight:600;min-height:0}.kr-form .msg:empty{display:none}
.kr-form .msg.ok{color:#1a8f4c}.kr-form .msg.err{color:#d63b40}
.kr-form.light .agree{color:rgba(255,255,255,.85)}.kr-form.light .msg.ok,.kr-form.light .msg.err{color:#fff;background:rgba(0,0,0,.25);padding:10px 14px;border-radius:10px}
.kr-form.light input{border-color:transparent}
.lead{display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:12px;align-items:center;padding:20px 24px;margin-top:26px}
.lead h2{font-size:19px;line-height:1.25;margin-right:14px;max-width:220px}.lead h2 span{color:var(--a)}
.lead .in{background:#fff;border:1.5px solid #e2e3ea;border-radius:12px;padding:8px 16px;display:block}
.lead .in:focus-within{border-color:var(--a)}
.lead .in small{display:block;font-size:12px;color:#8a8f9c}
.lead .in input,.lead .in select{border:0 !important;padding:0 !important;font-weight:600;border-radius:0 !important;background:transparent !important}

/* бегущая лента */
.tick{overflow:hidden;padding:54px 0 26px}
.tick .r{background:var(--a);color:#fff;transform:rotate(-1.6deg);width:108%;margin-left:-4%;overflow:hidden;padding:15px 0;box-shadow:0 14px 30px rgba(61,99,245,.35)}
.tick .m{display:inline-flex;gap:30px;align-items:center;white-space:nowrap;font-size:26px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;animation:mq 40s linear infinite}
.tick .o{color:transparent;-webkit-text-stroke:1.5px #fff}
.tick i{font-style:normal;font-size:18px;opacity:.8}
@keyframes mq{to{transform:translateX(-50%)}}

/* преимущества */
.b4{display:grid;grid-template-columns:1fr 1fr 1fr 2.9fr;gap:22px}
.bc{padding:40px 24px;min-height:270px}
.bc .ico{font-size:38px;color:var(--a);margin-bottom:38px}.bc b{display:block;font-size:20px;font-weight:700}.bc span{font-size:15.5px}
.ac{background:var(--a);color:#fff;border-radius:16px;padding:40px 44px;position:relative;overflow:hidden}
.ac h3{font-size:22px;margin-bottom:16px}
.ac ul{list-style:none;display:grid;gap:8px;max-width:340px;margin-bottom:28px;font-weight:600}
.ac li{display:flex;gap:8px;align-items:center}.ac li .ico{font-size:20px}
.ac .ph{position:absolute;right:34px;top:30px;width:220px;height:220px;border-radius:50%;border:8px solid rgba(255,255,255,.35);object-fit:cover}

/* срочный ремонт */
.urg{display:grid;grid-template-columns:1fr 520px;gap:40px;padding:36px;align-items:center}
.urg:hover{transform:none;box-shadow:none}
.urg h2{font-size:30px;margin-bottom:10px}.urg h2 span,.pp .res b span{color:var(--a)}.urg p{color:var(--mut);margin-bottom:20px;font-size:17px}
.chp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.chp div{background:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;font-weight:600}.chp .ico{font-size:24px;color:var(--a)}
.big-tel{font-size:24px;font-weight:700;white-space:nowrap}
.urg .im{height:330px;position:relative;border-radius:14px;overflow:hidden}.urg .im img{width:100%;height:100%;object-fit:cover}
.urg .tm{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:12px 18px;font-size:14px}.urg .tm b{display:block;font-size:26px;font-weight:800;color:var(--a)}

/* услуги и работы */
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sv{padding:12px 12px 22px;display:flex;flex-direction:column}
.sv img{width:100%;height:230px;object-fit:cover;border-radius:14px;margin-bottom:18px}
.sv h3{font-size:20px;padding:0 12px}.sv p{padding:4px 12px 14px;color:var(--mut);font-size:15px;flex:1}
.sv .f{display:flex;justify-content:space-between;align-items:center;padding:0 12px;font-size:19px}.sv .f b{font-weight:700}
.sv .f span{color:var(--a);font-size:15px;font-weight:600;display:flex;gap:6px;align-items:center}.sv:hover .f .ico{transform:translateX(4px)}.sv .f .ico{transition:.2s;font-size:18px}
.pc .im{height:300px;position:relative;margin-bottom:14px;border-radius:14px;overflow:hidden}
.pc .im img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.pc:hover .im img{transform:scale(1.06)}
.pc .im em{position:absolute;left:14px;top:14px;background:#fff;border-radius:10px;padding:6px 14px;font-style:normal;font-weight:700;color:var(--a2)}
.pc b{display:block;font-size:18px;font-weight:700}.pc span{color:var(--mut);font-size:15px}
.pc.hide{display:none}
.tabs{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.tabs button{padding:11px 22px;border-radius:12px;background:var(--bg);font-size:15px;font-weight:600;transition:.2s}.tabs button.a,.tabs button:hover{background:var(--a);color:#fff}

/* баннер с металлочерепицей */
.mt{position:relative;min-height:600px;margin:56px 0 30px;clip-path:polygon(0 64px,100% 0,100% calc(100% - 64px),0 100%);color:#fff;display:flex;align-items:center;padding:110px 0}
.mt .sh{position:absolute;inset:0;background:linear-gradient(100deg,rgba(9,12,26,.9) 0,rgba(9,12,26,.6) 52%,rgba(61,99,245,.62) 100%)}
.mt .c{position:relative;display:flex;justify-content:space-between;align-items:center;gap:40px}
.mt .lb{background:var(--a)}
.mt h2{font-size:clamp(28px,3.4vw,46px);line-height:1.12;margin-bottom:16px;text-transform:uppercase;font-weight:700}.mt h2 span{color:var(--a3);display:block}
.mt p{font-size:18px;max-width:600px;opacity:.9;margin-bottom:30px}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:470px;flex:none}
.gl div{background:rgba(255,255,255,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.32);border-radius:18px;padding:24px 26px;font-size:15px}
.gl b{display:block;font-size:42px;font-weight:800;line-height:1.1}
.gl div:nth-child(even){transform:translateY(26px)}

/* калькулятор */
.pick{display:grid;grid-template-columns:1fr 470px;gap:22px}
.pv{min-height:520px;position:relative;border-radius:18px;overflow:hidden}.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hs{position:absolute;width:38px;height:38px;margin:-19px;border-radius:50%;background:#fff;color:var(--a2);font-weight:800;animation:pl 1.8s ease-out infinite}
.hs.on{background:var(--a);color:#fff}
@keyframes pl{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}100%{box-shadow:0 0 0 20px rgba(255,255,255,0)}}
.tip{position:absolute;left:18px;top:18px;background:#fff;border-radius:14px;padding:14px 18px;font-size:14.5px;font-weight:600;box-shadow:0 16px 40px rgba(0,0,0,.25);max-width:320px}
.pp{padding:30px}.pp:hover{transform:none;box-shadow:none}
.pp .lbl{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8a8f9c;font-weight:600;margin-bottom:10px}.pp .lbl b{color:var(--ink)}
.sg{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.sg button{padding:10px 16px;border-radius:10px;background:#fff;font-weight:600;font-size:14.5px;transition:.2s}.sg button.a{background:var(--a);color:#fff}
.sw{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.sw button{width:40px;height:40px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d8dae3;transition:.2s}.sw button.a{box-shadow:0 0 0 3px var(--a)}.sw button:hover{transform:scale(1.1)}
.pp .nm{font-weight:600;margin-bottom:22px}
.pp input[type=range]{width:100%;accent-color:var(--a);margin-bottom:22px}
.pp .res{background:#fff;border-radius:14px;padding:16px 20px;margin-bottom:16px;font-size:14px;color:var(--mut)}
.pp .res b{display:block;font-size:30px;font-weight:800;color:var(--ink)}.pp .res small{font-size:12.5px}
.pp .btn{width:100%}

/* этапы */
.bigw{position:absolute;right:20px;top:-30px;z-index:-1;font-size:clamp(80px,12vw,170px);font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:2px #dfe5fd;letter-spacing:.02em;text-transform:uppercase;pointer-events:none}
.s5{display:grid;grid-template-columns:repeat(5,1fr);gap:22px;list-style:none}
.s5 .card{padding:28px 24px}
.s5 em{font-style:normal;width:48px;height:48px;border-radius:50%;background:var(--a);color:#fff;font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin-bottom:22px}
.s5 b{display:block;font-size:18px;font-weight:700}.s5 span{font-size:15px;color:var(--mut)}

/* до / после */
.ba{height:460px;position:relative;border-radius:18px;overflow:hidden;margin-bottom:26px;--x:46%;user-select:none;touch-action:pan-y}
.ba>img,.ba .bf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .bf{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.ba.demo .bf img{filter:grayscale(1) contrast(.75) brightness(.72) sepia(.25)}
.ba .hd{position:absolute;top:0;bottom:0;left:var(--x);width:4px;margin-left:-2px;background:#fff;pointer-events:none}
.ba .hd i{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px;border-radius:50%;background:#fff;color:var(--a);font-style:normal;font-weight:800;font-size:22px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.ba .t{position:absolute;top:18px;background:rgba(17,19,24,.7);color:#fff;border-radius:8px;padding:6px 14px;font-weight:600;font-size:14px}.ba .t.l{left:18px}.ba .t.r{right:18px}
.ba .cap{position:absolute;right:18px;bottom:18px;background:#fff;border-radius:12px;padding:12px 18px;font-size:14px;color:var(--mut);pointer-events:none}.ba .cap b{display:block;color:var(--ink);font-size:17px}
.ba input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}

/* цены */
.t2{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.tb{width:100%;border:1.5px solid var(--line);border-radius:16px;overflow:hidden;border-collapse:separate;border-spacing:0}
.tb caption{background:var(--a);color:#fff;padding:18px 26px;font-size:20px;font-weight:700;text-align:left;border-radius:16px 16px 0 0}
.tb th,.tb td{padding:16px 26px;border-top:1px solid #ededf2;text-align:left;font-weight:500}
.tb td{text-align:right;font-weight:700;white-space:nowrap}
.tb tr:nth-child(even) th,.tb tr:nth-child(even) td{background:#fafafc}

/* отзывы */
.rg{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:22px}
.rv{padding:30px}.rv:hover{transform:none;box-shadow:none}.st{color:#ffb400;letter-spacing:2px}.rv blockquote{margin:12px 0 22px;color:#3c404b}
.who{display:flex;gap:12px;align-items:center}.ava{width:46px;height:46px;border-radius:50%;background:var(--a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:none}.who small{display:block;color:#6c7280}
.gr{background:var(--a);color:#fff;border-radius:16px;padding:30px}.gr .ico{font-size:48px;margin-bottom:10px}.gr h3{font-size:24px;line-height:1.2;margin-bottom:12px}
.gr li{list-style:none;display:flex;gap:8px;margin-bottom:6px;font-weight:600}.gr li:before{content:"✓"}

/* вопросы */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;align-items:start}
.q{background:var(--bg);border-radius:14px;padding:0 26px}
.q summary{list-style:none;cursor:pointer;padding:22px 0;font-weight:600;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.q summary::-webkit-details-marker{display:none}
.q summary:after{content:"+";color:var(--a);font-size:24px;line-height:1;transition:transform .2s}.q[open] summary:after{transform:rotate(45deg)}
.q div{color:var(--mut);font-size:15px;padding-bottom:22px}.q div p+p{margin-top:8px}

/* финальный блок */
.cta{min-height:340px;border-radius:20px;position:relative;color:#fff;overflow:hidden}
.cta .p1{background:linear-gradient(115deg,var(--a2),var(--a) 70%,var(--a3));clip-path:polygon(0 0,74% 0,58% 100%,0 100%)}
.cta .p2{background:var(--a3);opacity:.8;clip-path:polygon(70% 0,76% 0,66% 62%,60% 62%)}
.cta .tx{position:relative;padding:50px 60px;width:min(860px,64%)}
.cta h2{font-size:36px;line-height:1.15;margin-bottom:8px}.cta p{font-size:17px;margin-bottom:24px;opacity:.92}

/* подвал */
.ft{margin-top:44px;background:var(--bg);padding:50px 0 110px;color:var(--mut);font-size:15px}
.ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.ft h3{color:var(--ink);margin-bottom:12px;font-weight:700;font-size:16px}.ft p{margin-bottom:6px}.ft a:hover{color:var(--a)}
.ft-logo{font-size:26px;font-weight:800;color:var(--a2);margin-bottom:14px}.ft-tel{color:var(--a2);font-weight:700;font-size:22px}

/* закреплённая панель */
.stick{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;width:min(1100px,calc(100% - 24px));background:var(--ink);color:#fff;border-radius:18px;padding:14px 16px 14px 28px;display:flex;align-items:center;gap:14px;box-shadow:0 18px 50px rgba(17,19,24,.4);animation:up .4s}
.stick[hidden]{display:none}
@keyframes up{from{transform:translate(-50%,120%)}}
.stick-tx{margin-right:auto}.stick b{font-size:17px;font-weight:700}.stick small{display:block;font-size:13px;opacity:.7}
.rnd{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none}
.rnd.wa{background:#25d366}.rnd.tg{background:#2aabee}.rnd.ph{background:rgba(255,255,255,.14);font-size:20px}

/* всплывающее окно */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:16px}.modal[hidden]{display:none}
.modal-bg{position:absolute;inset:0;background:rgba(17,19,24,.6);backdrop-filter:blur(4px)}
.modal-box{position:relative;background:#fff;border-radius:20px;padding:36px;width:min(460px,100%);box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .25s}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.modal-box h2{font-size:26px;line-height:1.2;margin-bottom:8px;padding-right:30px}.modal-sub{color:var(--mut);margin-bottom:18px;font-size:15px}
.modal-x{position:absolute;right:16px;top:16px;width:40px;height:40px;border-radius:50%;background:var(--bg);font-size:20px;display:flex;align-items:center;justify-content:center}

/* внутренние страницы */
.page{padding-top:30px;padding-bottom:30px}
.crumbs{font-size:14px;color:#8a8f9c;margin-bottom:18px}.crumbs a:hover{color:var(--a)}
.page h1{font-size:clamp(28px,3.4vw,44px);line-height:1.15;margin-bottom:22px}
.page-grid.has-aside{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:start}
.page-img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:18px;margin-bottom:24px}
.content{font-size:17px;line-height:1.7;max-width:820px}.content>*+*{margin-top:16px}.content h2{font-size:26px;margin-top:30px}.content h3{font-size:20px;margin-top:24px}
.content ul,.content ol{padding-left:22px}.content a{color:var(--a);text-decoration:underline}
.facts{list-style:none;display:flex;gap:14px;flex-wrap:wrap;margin-bottom:24px}.facts li{background:var(--bg);border-radius:12px;padding:12px 18px}.facts small{display:block;color:#8a8f9c;font-size:13px}.facts b{font-size:18px}
.aside-card{background:var(--bg);border-radius:18px;padding:28px;position:sticky;top:20px}.aside-card h2{font-size:22px;line-height:1.2;margin-bottom:6px}.aside-card p{color:var(--mut);margin-bottom:14px;font-size:15px}
.aside-price{font-size:28px;font-weight:800;color:var(--a2);margin-bottom:10px}
.list{display:grid;gap:14px}.list-item{padding:22px 26px;display:block}.list-item b{display:block;font-size:19px}.list-item span{color:var(--mut)}

/* адаптив */
@media (max-width:1280px){
  .tel{font-size:24px}.logo b{font-size:28px}.hd-right{display:none}
  .b4{grid-template-columns:repeat(3,1fr)}.ac{grid-column:1/-1}
  .s5{grid-template-columns:repeat(3,1fr)}
  .pick{grid-template-columns:1fr 400px}.urg{grid-template-columns:1fr 400px}
  .gl{width:400px}.gl b{font-size:34px}
}
@media (max-width:980px){
  .hd-mid .btn{display:none}.burger{display:flex}
  .nv{display:none;border-top:1px solid #ececf0}.nv.open{display:block}
  .nv .c{flex-direction:column;align-items:stretch;gap:0;padding-top:8px;padding-bottom:12px}
  .nv a,.nv a.p{padding:13px 4px;background:none;color:var(--ink);border-radius:0;border-bottom:1px solid #f0f0f4;font-weight:600}.nv .city{margin:12px 4px 0}
  .ban{height:auto;min-height:540px}.slide{position:absolute}.ban .tx{position:relative;left:0;top:0;width:100%;padding:44px 28px}
  .ban{display:grid}.slide{grid-area:1/1;position:relative;inset:auto}.slide:not(.on){display:none}
  .shape .p1{clip-path:none;opacity:.86}.shape .p2,.shape .p3{display:none}
  .ar{display:none}
  .lead{grid-template-columns:1fr 1fr}.lead h2{grid-column:1/-1;max-width:none}.lead .btn{grid-column:1/-1}
  .g3,.t2,.faq,.rg{grid-template-columns:1fr 1fr}.gr{grid-column:1/-1}
  .urg,.pick,.page-grid.has-aside{grid-template-columns:1fr}.pv{min-height:380px}
  .mt{clip-path:polygon(0 30px,100% 0,100% calc(100% - 30px),0 100%);padding:80px 0}.mt .c{flex-direction:column;align-items:flex-start}.gl{width:100%}.gl div:nth-child(even){transform:none}
  .cta .tx{width:100%;padding:40px 28px}.cta .p1{clip-path:none;opacity:.9}.cta .p2{display:none}
  .ft-grid{grid-template-columns:1fr 1fr}
  .ttl{font-size:26px}.ttl i{width:46px;height:46px;font-size:22px}
  .aside-card{position:static}
}
@media (max-width:620px){
  .c{padding-left:14px;padding-right:14px}
  .logo svg{width:48px;height:40px}.logo b{font-size:22px}.logo small{display:none}.tel{font-size:17px}.hd-top{gap:10px}
  .g3,.t2,.faq,.rg,.b4,.s5,.chp,.ft-grid,.lead,.kr-form.inline{grid-template-columns:1fr}
  .bc{min-height:0;padding:26px 22px}.bc .ico{margin-bottom:16px}
  .ac{padding:28px 22px}.ac .ph{position:static;width:140px;height:140px;margin-top:22px}
  .urg{padding:20px}.urg .im{height:240px}.big-tel{font-size:20px}
  .tick .m{font-size:18px}.tick{padding:34px 0 14px}
  .ba{height:300px}.ba .cap{display:none}
  .tb th,.tb td{padding:13px 14px;font-size:14.5px}.tb caption{padding:14px}
  .pp{padding:22px}.gl b{font-size:28px}.gl div{padding:18px}
  .stick{padding:10px 10px 10px 16px;gap:8px}.stick small,.stick .rnd.wa,.stick .rnd.tg{display:none}.stick b{font-size:14px}.stick .btn{padding:12px 16px;font-size:14px}
  .modal-box{padding:26px 20px}
  .btn{padding:15px 22px}.ban .row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}
.nav-tel{display:none}
@media (max-width:980px){.nv a.nav-tel{display:block;color:var(--a2);font-size:20px;font-weight:700;border-bottom:0}}
@media (max-width:480px){.hd-mid{display:none}.logo b{font-size:21px}}

/* поля форм: цвет текста задаём явно, иначе на цветном фоне он наследуется белым */
.kr-form input[type=text],.kr-form input[type=tel],.kr-form input[type=number],.kr-form select{color:var(--ink);caret-color:var(--a)}
.kr-form input::placeholder{color:#8a8f9c;opacity:1}
.kr-form.light .btn{background:#fff;color:var(--a)}.kr-form.light .btn:hover{background:#eef2ff}

/* этапы: иконка рядом с номером */
.st-top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.s5 .st-top em{margin-bottom:0}
.st-top i{width:48px;height:48px;border-radius:14px;background:#fff;color:var(--a);display:flex;align-items:center;justify-content:center;font-size:26px;box-shadow:0 4px 14px rgba(61,99,245,.12)}

/* этапы: крупная тонкая иконка на свободном месте, при наведении подсвечивается синим */
.st-top{justify-content:space-between;gap:16px;margin-bottom:18px}
.st-top i{width:auto;height:auto;border-radius:0;background:none;box-shadow:none;font-size:84px;color:#b7c4fb;margin-right:6px;transition:color .3s,filter .3s,transform .3s}
.st-top i .ico{stroke-width:1.1}
.s5 .card:hover .st-top i{color:var(--a);filter:drop-shadow(0 0 10px rgba(61,99,245,.55)) drop-shadow(0 0 22px rgba(61,99,245,.3));transform:scale(1.06)}
@media (max-width:1280px){.st-top i{font-size:68px}}

/* «до»: лёгкая приглушённость вместо серого затемнения; старая кровля дорисована поверх фото (old-roof.svg) */
.ba.demo .bf img{filter:none}
.ba.demo .bf{filter:saturate(.72) brightness(.95) contrast(.96)}

/* этапы: при наведении синим подсвечивается сама карточка, а не иконка */
.s5 .card{border:1.5px solid transparent;transition:transform .25s,box-shadow .3s,border-color .3s,background .3s}
.s5 .card:hover{background:#f1f4ff;box-shadow:0 14px 38px rgba(61,99,245,.196)}
.s5 .card:hover .st-top i{color:var(--a);filter:none;transform:none}

.mt .sh{background:linear-gradient(100deg,rgba(9,12,26,.86) 0,rgba(9,12,26,.5) 52%,rgba(61,99,245,.5) 100%)}


/* карточки с цифрами: фото внизу карточки */
.bc{display:flex;flex-direction:column;padding:32px 24px 24px;overflow:hidden}
.bc .ico{margin-bottom:26px}
.bc span{margin-bottom:22px}
.bc img{margin-top:auto;width:100%;height:170px;object-fit:cover;border-radius:12px;transition:transform .5s}
.bc:hover img{transform:scale(1.04)}
@media (max-width:620px){.bc img{height:190px}}

/* единое свечение карточек при наведении: слабое слева и сверху, сильнее справа, сильнее всего снизу; фон карточки не меняется */
a.card:hover,.s5 .card:hover,.bc:hover{background:var(--bg);border-color:transparent;
  box-shadow:-2px -2px 8px rgba(61,99,245,.05),7px 4px 18px rgba(61,99,245,.1),4px 14px 26px rgba(61,99,245,.15)}

/* телефон: короткая подпись в закреплённой панели, фоновое слово «Этапы» не лезет под заголовок */
@media (max-width:620px){
  .stick-tx b{font-size:0}.stick-tx b:after{content:"Расчёт за 1 день";font-size:15px}
  .bigw{display:none}
}
@media (max-width:620px){.sec{padding-top:26px;padding-bottom:26px}}

/* таблицы цен: шапка и строки — одно целое (рамка идёт по ячейкам, скругление только у внешних углов) */
.tb{border:0;border-radius:0;overflow:visible}
.tb caption{border-radius:16px 16px 0 0}
.tb th{border-left:1.5px solid var(--line)}
.tb td{border-right:1.5px solid var(--line)}
.tb tr:first-child th,.tb tr:first-child td{border-top:0}
.tb tr:last-child th,.tb tr:last-child td{border-bottom:1.5px solid var(--line)}
.tb tr:last-child th{border-bottom-left-radius:16px}
.tb tr:last-child td{border-bottom-right-radius:16px}

/* первый экран: светлая плашка сдвинута вправо за край синей заливки и полупрозрачна, как в финальном блоке */
.ban .shape .p2{clip-path:polygon(58.5% 0,67.5% 0,54% 54%,45% 54%);opacity:.72}

/* бегущая лента: «прозрачные» слова — без контура, тонким начертанием и полупрозрачной заливкой (контурный текст плохо читался) */
.tick .o{color:rgba(255,255,255,.62);-webkit-text-stroke:0;font-weight:400;letter-spacing:.06em}

/* первый экран: каска рядом с пунктами; баннер чуть выше, кнопки опущены, чтобы элементам было свободнее */
.ban{height:640px}
.ban ul{margin-bottom:70px}
.ban .tx{top:70px}
.ban .helmet{position:absolute;left:446px;top:208px;width:200px;height:auto;z-index:2;pointer-events:none;filter:drop-shadow(0 14px 22px rgba(10,24,90,.35));animation:helm 5s ease-in-out infinite}
@keyframes helm{50%{transform:translateY(-8px) rotate(-2deg)}}
@media (max-width:1280px){.ban .helmet{left:auto;right:46%;width:170px}}
@media (max-width:980px){.ban{height:auto}.ban .helmet{display:none}.ban ul{margin-bottom:34px}.ban .tx{top:0}}

/* первый экран: каска привязана к списку пунктов (стоит справа от него на любом слайде), кнопки ниже */
.ban .pts{display:flex;align-items:center;gap:40px;min-height:176px;margin:6px 0 38px}
.ban .pts ul{margin-bottom:0;flex:none}
.ban .pts .helmet{position:static;width:186px;flex:none}
@media (max-width:980px){.ban .pts{min-height:0;margin:0 0 30px}}

/* машина замерщика: стоит на месте; при наведении на синий блок заводится — кузов дрожит, из глушителя идёт дым, загорается фара */
.ac .car{position:absolute;right:66px;bottom:26px;width:170px;pointer-events:none}
.ac .car svg{display:block;width:100%;height:auto;overflow:visible}
.car .body,.car .smoke circle,.car .lamp{transform-box:fill-box;transform-origin:center}
.car .smoke circle{opacity:0}
.car .lamp{transition:stroke .2s,filter .2s}
.ac:hover .car .body{animation:car-shake .13s linear infinite}
.ac:hover .car .lamp{stroke:#ffe27a;filter:drop-shadow(0 0 5px #ffe27a)}
.ac:hover .car .smoke circle{animation:car-puff 1.2s ease-out infinite}
.ac:hover .car .smoke circle:nth-child(2){animation-delay:.4s}
.ac:hover .car .smoke circle:nth-child(3){animation-delay:.8s}
@keyframes car-shake{0%,100%{transform:translate(0,0)}25%{transform:translate(.6px,-1px)}50%{transform:translate(-.5px,.6px)}75%{transform:translate(.4px,.9px)}}
@keyframes car-puff{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:.75}100%{opacity:0;transform:translate(-30px,-22px) scale(2.6)}}
@media (max-width:1280px){.ac .car{right:60px}}
@media (max-width:620px){.ac .car{position:static;margin-top:18px;width:150px}}

/* баннер с металлочерепицей: обычное фото без сборки из фрагментов */
.mt .sh{background:linear-gradient(100deg,rgba(9,12,26,.86) 0,rgba(9,12,26,.5) 52%,rgba(61,99,245,.5) 100%)}

/* каска — кнопка: по клику открывает форму «Перезвоните мне» */
.ban .helmet-btn{flex:none;padding:0;line-height:0;border-radius:24px;cursor:pointer;transition:transform .25s}
.ban .helmet-btn:hover{transform:scale(1.07)}
.ban .helmet-btn .helmet{pointer-events:auto}
@media (max-width:980px){.ban .helmet-btn{display:none}}

/* SEO-текст на главной */
.seo-cols{columns:2;column-gap:44px;color:var(--mut);font-size:16px;line-height:1.7}
.seo-cols p{break-inside:avoid;margin-bottom:14px}
@media (max-width:980px){.seo-cols{columns:1}}

/* SEO-текст: подзаголовки */
.seo-cols h3{font-size:19px;color:var(--ink);margin:0 0 8px;break-after:avoid}
.seo-cols p+h3{margin-top:22px}
.bigw{font-size:clamp(70px,9vw,130px)}

/* каска стоит в одном и том же месте на всех слайдах: список пунктов имеет фиксированную ширину, а не ширину своего текста */
.ban .tx{width:min(770px,60%)}
.ban .pts{gap:30px}
.ban .pts ul{flex:0 0 20em}
.ban .pts .helmet{width:170px}

/* каска — вплотную к пунктам, а не у центра баннера: список уже (13em), пункты не переносятся */
.ban .pts ul{flex:0 0 13em}
.ban .pts li{white-space:nowrap}

/* логотип из двух слов: не переносится и немного меньше, чтобы шапка не теснилась */
.logo b{white-space:nowrap;font-size:30px}
@media (max-width:1280px){.logo b{font-size:25px}}
@media (max-width:620px){.logo b{font-size:20px}}
@media (max-width:480px){.logo b{font-size:19px}}

/* всплывающее окно: открывается мгновенно — без анимации и без размытия фона (размытие и давало задержку) */
.modal-bg{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,19,24,.72)}
.modal-box{animation:none}