/* stroy-chudovo.ru — «синька»: чертёж белым по синему */
:root{
  --bg:#123a72; --bg2:#0e2f5e; --bg3:#0b264d;
  --ln:rgba(255,255,255,.82); --ln2:rgba(255,255,255,.42); --ln3:rgba(255,255,255,.16);
  --tx:#eef4ff; --tx2:#b9cbe8; --pen:#f3c64b; --pen2:#ffdf86; --bad:#ff8a7a;
  --h:"Fira Sans Extra Condensed",system-ui,sans-serif;
  --b:"Fira Sans Condensed",system-ui,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,monospace;
  --hand:"Bad Script",cursive;
  --w:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;color:var(--tx);font:400 17px/1.5 var(--b);
  background-color:var(--bg);
  background-image:
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),
    radial-gradient(120% 80% at 50% 0,#17468a 0,var(--bg) 55%,var(--bg2) 100%);
  background-size:40px 40px,40px 40px,8px 8px,8px 8px,100% 100%;

  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--pen2)}
h1,h2,h3{font-family:var(--h);font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0}
h2{font-size:clamp(30px,3.6vw,46px)}
h3{font-size:22px;letter-spacing:.03em}
.mono{font-family:var(--m)}
.hand{font-family:var(--hand);color:var(--pen);font-size:19px;line-height:1.25}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}

/* ---- лента этапов ---- */
.lenta{position:sticky;top:0;z-index:50;background:rgba(14,47,94,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--ln2)}
.lenta .wrap{display:flex;align-items:stretch;gap:12px;height:74px}
.lenta .logo{display:flex;flex-direction:column;justify-content:center;font:700 19px/1 var(--h);text-transform:uppercase;
  text-decoration:none;color:var(--tx);padding-right:20px;border-right:1px solid var(--ln3);white-space:nowrap}
.lenta .logo small{font:400 11px/1.3 var(--m);color:var(--tx2);text-transform:none;margin-top:4px}
.lenta ol{list-style:none;margin:0;padding:0;display:flex;flex:1;justify-content:space-between;position:relative}
.lenta li{flex:1}
.lenta ol a{display:flex;flex-direction:column;justify-content:center;height:100%;padding:0 6px;text-decoration:none;
  color:var(--tx2);font:500 15px/1.2 var(--b);transition:color .2s}
.lenta ol a b{font:500 13px/1 var(--m);color:var(--tx2);margin-bottom:5px}
.lenta ol a:hover,.lenta ol a.on{color:var(--tx)}
.lenta ol a.on b{color:var(--pen)}
.lenta .bar{position:absolute;bottom:-1px;height:3px;background:var(--pen);border-radius:2px;
  transition:left .45s cubic-bezier(.3,.7,.2,1),width .45s cubic-bezier(.3,.7,.2,1)}
.lenta .prog{position:absolute;left:0;bottom:-1px;height:1px;background:var(--pen);opacity:.5;width:0}
.lenta .tog{display:none}

/* ---- лист-рамка ---- */
.list{position:relative;border:1px solid var(--ln2);margin:18px auto;max-width:calc(var(--w) - 0px);padding:34px 36px;
  background:linear-gradient(rgba(10,36,74,.18),rgba(10,36,74,.18))}
.list::before,.list::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--ln)}
.list::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.list::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.list .num{position:absolute;right:16px;top:12px;font:400 12px var(--m);color:var(--tx2)}
.list-head{display:flex;align-items:flex-end;gap:28px;margin-bottom:22px;flex-wrap:wrap}
.list-head .hand{max-width:480px;transform:rotate(-2deg)}
@media (min-width:1300px){.list{margin-left:auto;margin-right:auto}}
main{padding:0 24px}

/* ---- первый экран ---- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;min-height:560px;padding-top:44px;padding-bottom:30px;overflow:hidden}
.hero h1{font-size:clamp(54px,6.4vw,92px);line-height:.96}
.hero .under{display:block;width:min(360px,90%);height:14px;margin:12px 0 18px}
.hero .under path{stroke:var(--pen);stroke-width:4;fill:none;stroke-linecap:round}
.hero .sub{font:700 clamp(24px,2.4vw,32px)/1.1 var(--h);text-transform:uppercase;letter-spacing:.03em;margin:0 0 22px}
.hero .lead{color:var(--tx2);max-width:440px;margin:0 0 34px}
.hero .ico{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;max-width:520px}
.hero .ico a{text-decoration:none;color:var(--tx2);font-size:13px;line-height:1.25;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero .ico svg{width:40px;height:40px;stroke:var(--ln);fill:none;stroke-width:1.4;transition:transform .3s,stroke .3s}
.hero .ico a:hover svg{transform:translateY(-3px);stroke:var(--pen)}
.hero-art{position:relative;min-height:520px}
.hero-art .dom{position:absolute;left:-2%;top:96px;width:80%;z-index:2;will-change:transform;filter:drop-shadow(0 0 12px rgba(14,47,94,.9))}
.hero-art .foto{position:absolute;right:0;top:30px;width:38%;border:1px solid var(--ln);padding:6px;background:var(--bg2);
  box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:1;transform:rotate(1.2deg)}
.hero-art .foto img{filter:saturate(.9) contrast(1.02)}
.hero-art .foto::after{content:"";position:absolute;inset:6px;background:linear-gradient(90deg,rgba(18,58,114,.5),transparent 30%);pointer-events:none}
.hero-art .note{position:absolute;z-index:3;white-space:nowrap}
.hero-art .note svg{position:absolute;overflow:visible}
.hero-art .note path{stroke:var(--pen);fill:none;stroke-width:1.6;stroke-linecap:round}
.hero-art .dim{position:absolute;left:-6px;top:58px;bottom:70px;width:70px;z-index:3}
.hero-art .dim i{position:absolute;left:0;font:400 13px var(--m);color:var(--tx);font-style:normal;background:var(--bg);padding:0 3px}
.hero-art .dim::before{content:"";position:absolute;left:58px;top:0;bottom:0;border-left:1px solid var(--ln2)}
.stamp{position:absolute;right:0;bottom:0;z-index:3;display:grid;grid-template-columns:1fr 60px 60px;border:1px solid var(--ln2);
  font:400 11px/1.3 var(--m);color:var(--tx2);background:rgba(14,47,94,.85);width:min(380px,100%)}
.stamp>*{border-right:1px solid var(--ln3);border-bottom:1px solid var(--ln3);padding:6px 8px}
.stamp>*:nth-child(3n){border-right:0}
.stamp b{color:var(--tx);font-weight:500;text-transform:uppercase}
.stamp .c{text-align:center}
/* перекрестие под курсором */
.cross{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:0;transition:opacity .3s}
.hero:hover .cross{opacity:1}
.cross i{position:absolute;background:rgba(243,198,75,.35)}
.cross .x{left:0;right:0;height:1px}
.cross .y{top:0;bottom:0;width:1px}
.cross em{position:absolute;font:400 11px var(--m);color:var(--pen);font-style:normal;transform:translate(8px,8px)}

/* ---- этапы ---- */
.etapy{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.etap{border:1px solid var(--ln2);padding:16px 14px 14px;display:flex;flex-direction:column;background:rgba(11,38,77,.25);
  transition:border-color .25s,background .25s,transform .25s;cursor:pointer;position:relative}
.etap:hover,.etap.open{border-color:var(--ln);background:rgba(11,38,77,.5)}
.etap .n{font:500 26px/1 var(--m);color:var(--tx)}
.etap.cur .n{color:var(--pen)}
.etap h3{font-size:20px;margin:6px 0 10px;text-transform:none;letter-spacing:.01em}
.etap .pic{height:110px;display:flex;align-items:flex-end;justify-content:center;margin:4px 0 12px}
.etap .pic img{max-height:110px;width:auto;opacity:.95;transition:transform .4s}
.etap:hover .pic img{transform:scale(1.05)}
.etap ul{list-style:none;margin:0;padding:0;font-size:14px;color:var(--tx2)}
.etap li{padding:3px 0 3px 10px;position:relative}
.etap li::before{content:"–";position:absolute;left:0}
.etap .more{margin-top:auto;align-self:flex-end;font:400 22px/1 var(--m);color:var(--pen);padding-top:10px;transition:transform .3s}
.etap.open .more{transform:rotate(90deg)}
.etap-full{grid-column:1/-1;border:1px solid var(--ln);padding:26px 28px;display:none;grid-template-columns:repeat(3,1fr);gap:28px;
  background:rgba(11,38,77,.55);position:relative}
.etap-full.on{display:grid;animation:unfold .45s cubic-bezier(.2,.7,.2,1)}
@keyframes unfold{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
.etap-full h4{font:600 13px var(--m);text-transform:uppercase;letter-spacing:.06em;color:var(--pen);margin:0 0 8px}
.etap-full ul{margin:0;padding-left:18px;color:var(--tx)}
.etap-full li{margin:4px 0}
.etap-full .x{position:absolute;right:12px;top:8px;background:none;border:0;color:var(--tx2);font:400 22px var(--m);cursor:pointer}

/* ---- калькулятор ---- */
.calc{display:grid;grid-template-columns:330px minmax(0,1fr) 270px;grid-template-rows:auto auto;gap:18px}
.box{border:1px solid var(--ln2);padding:20px 22px;position:relative}
.box>.t{font:600 14px var(--m);text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px;color:var(--tx)}
.calc .in{grid-row:1/3}
.fld{display:grid;grid-template-columns:1fr 110px;align-items:center;gap:10px;margin:0 0 12px;font-size:15px;color:var(--tx2)}
.fld input[type=number]{width:100%;background:rgba(8,28,58,.6);border:1px solid var(--ln2);color:var(--tx);font:500 17px var(--m);
  padding:9px 10px;border-radius:0;outline:none;transition:border-color .2s}
.fld input:focus{border-color:var(--pen)}
.chk{display:flex;align-items:center;gap:10px;margin:4px 0 14px;font-size:15px;color:var(--tx);cursor:pointer}
.chk input{width:20px;height:20px;accent-color:var(--pen)}
.seg{display:flex;border:1px solid var(--ln2);margin:0 0 12px}
.seg button{flex:1;background:none;border:0;border-right:1px solid var(--ln3);color:var(--tx2);font:500 14px var(--m);padding:8px 4px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--pen);color:#14305a}
.calc .plan svg,.calc .razrez svg{width:100%;height:auto;display:block}
.calc svg text{font:400 13px var(--m);fill:var(--tx)}
.calc svg .tape{fill:rgba(255,255,255,.14);stroke:var(--ln);stroke-width:1.5}
.calc svg .dimln{stroke:var(--ln);stroke-width:1;fill:none}
.calc svg .hatch{fill:url(#hatch)}
.res{grid-column:2/4;display:grid;grid-template-columns:1fr 1fr minmax(0,1.1fr);gap:18px;align-items:stretch}
.res .box{display:flex;gap:16px;align-items:center}
.res .box svg{width:46px;height:46px;stroke:var(--ln);fill:none;stroke-width:1.3;flex:none}
.res .lbl{font-size:15px;color:var(--tx2)}
.res .val{font:500 34px/1.1 var(--m);color:var(--tx)}
.res .val small{font-size:18px;margin-left:4px}
.res .sub{font:400 13px var(--m);color:var(--tx2);margin-top:2px}
.res .hand{transform:rotate(-3deg);align-self:center;font-size:18px}

/* ---- промерзание ---- */
.frost{display:grid;grid-template-columns:300px minmax(0,1fr);gap:26px}
.frost .seg{margin-bottom:18px}
.frost .seg button{font:500 15px var(--b);padding:11px 8px}
.frost-scene{position:relative}
.frost-scene svg{width:100%;height:auto;display:block}
.frost-scene text{font:400 13px var(--m);fill:var(--tx)}
.legend{list-style:none;padding:0;margin:0}
.legend li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--ln3);font-size:15px;color:var(--tx2);cursor:pointer}
.legend li b{font:500 15px var(--m);color:var(--tx)}
.legend li.on{color:var(--tx)}
.legend li.on b{color:var(--pen)}
.frost .rule{margin-top:18px;border-left:2px solid var(--pen);padding:4px 0 4px 14px;font-size:15px;color:var(--tx2)}
.frost .rule b{color:var(--tx)}
.compare{display:flex;gap:22px;margin-top:20px;flex-wrap:wrap}
.compare .box{flex:1;min-width:250px}
.compare .row{display:flex;justify-content:space-between;font:400 14px var(--m);color:var(--tx2);padding:3px 0}
.compare .row b{color:var(--tx);font-weight:500}
.compare .row s{color:var(--tx2);opacity:.7}

/* ---- ошибки ---- */
.oshibki{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.osh{border:1px solid var(--ln2);padding:18px 18px 16px;display:flex;flex-direction:column;perspective:900px;min-height:330px;position:relative;cursor:pointer}
.osh .n{font:500 30px/1 var(--m)}
.osh:first-child .n{color:var(--pen)}
.osh h3{font-size:19px;text-transform:none;letter-spacing:.01em;margin:6px 0 10px;min-height:44px}
.osh .pic{height:130px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.osh .pic img{max-height:130px;width:auto}
.osh p{margin:0;font-size:14.5px;color:var(--tx2)}
.osh .fix{display:none;color:var(--tx)}
.osh .fix b{color:var(--pen);font-weight:500}
.osh.flip .bad{display:none}
.osh.flip .fix{display:block;animation:unfold .35s}
.osh .more{margin-top:auto;align-self:flex-end;font:400 13px var(--m);color:var(--pen);padding-top:12px}
.osh:hover{border-color:var(--ln)}

/* ---- баннер ---- */
.banner{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,5fr) minmax(0,3fr);gap:30px;align-items:center;padding:22px;text-decoration:none;color:inherit}
.banner .foto{border:1px solid var(--ln);padding:5px;transform:rotate(-1deg)}
.banner p{color:var(--tx2);margin:12px 0 22px}
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--pen);color:#14305a;font:700 17px var(--h);text-transform:uppercase;
  letter-spacing:.05em;padding:12px 22px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s}
.btn:hover{background:var(--pen2);transform:translateX(3px)}
.btn svg{width:22px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.banner .kub svg{width:100%;height:auto;overflow:visible}
.banner .kub path,.banner .kub line{stroke:var(--ln);fill:none;stroke-width:1.2}

/* ---- FAQ ---- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.faq details{border:1px solid var(--ln2);transition:border-color .2s}
.faq details[open]{border-color:var(--ln);background:rgba(11,38,77,.4)}
.faq summary{list-style:none;cursor:pointer;padding:12px 44px 12px 30px;position:relative;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"›";position:absolute;left:12px;color:var(--tx2)}
.faq summary::after{content:"+";position:absolute;right:14px;top:8px;font:400 22px var(--m);transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg);color:var(--pen)}
.faq details p{margin:0;padding:0 22px 16px 30px;color:var(--tx2);font-size:15.5px}

/* ---- подвал ---- */
.foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,430px);gap:30px;align-items:center;padding:22px 26px}
.foot .logo{font:700 30px/1 var(--h);text-transform:uppercase}
.foot p{margin:0;color:var(--tx2);font-size:14px}
.foot .trees{width:150px;height:auto}
.foot .trees path{stroke:var(--ln2);fill:none;stroke-width:1}
.foot .stamp{position:static;width:100%;grid-template-columns:1fr 70px 70px}
.foot .dev{grid-column:1/-1;font:400 12px var(--m);color:var(--tx2);border-top:1px solid var(--ln3);padding-top:12px}
.foot .dev a{color:var(--tx2)}

/* ---- прорисовка линий и появление ---- */
.draw path,.draw line,.draw rect,.draw polyline,.draw circle{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1.6s cubic-bezier(.4,.1,.2,1)}
.draw.in path,.draw.in line,.draw.in rect,.draw.in polyline,.draw.in circle{stroke-dashoffset:0}
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s,transform .7s}
.rv.in{opacity:1;transform:none}
.inkin{clip-path:inset(0 100% 0 0);transition:clip-path 1.6s cubic-bezier(.5,.1,.2,1)}
.inkin.in{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv,.inkin{opacity:1;transform:none;clip-path:none}
  .draw path,.draw line,.draw rect,.draw polyline,.draw circle{stroke-dashoffset:0}
}

/* ---- телефон и планшет ---- */
@media (max-width:1100px){
  .etapy{grid-template-columns:repeat(4,minmax(0,1fr))}
  .oshibki{grid-template-columns:repeat(3,minmax(0,1fr))}
  .calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .calc .in{grid-row:auto;grid-column:1/-1}
  .res{grid-column:1/-1}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  main{padding:0 12px}
  .list{padding:30px 16px;margin:16px auto}
  .lenta .wrap{height:58px;padding:0 12px}
  .lenta .logo{font-size:16px;border:0;padding:0}
  .lenta .logo small{display:none}
  .lenta ol{overflow-x:auto;scrollbar-width:none;justify-content:flex-start;gap:4px}
  .lenta ol::-webkit-scrollbar{display:none}
  .lenta li{flex:none}
  .lenta ol a{font-size:13px;padding:0 8px}
  .lenta ol a b{font-size:11px;margin-bottom:3px}
  .hero{grid-template-columns:1fr;padding-top:30px;min-height:0}
  .hero .ico{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero .ico a{font-size:11px}
  .hero-art{min-height:0;display:flex;flex-direction:column;gap:14px}
  .hero-art .dom,.hero-art .foto,.hero-art .stamp{position:static;width:100%;transform:none}
  .hero-art .note,.cross{display:none}
  .hero-art .dim{display:none}
  .etapy{grid-template-columns:repeat(2,minmax(0,1fr))}
  .etap-full{grid-template-columns:1fr;gap:14px;padding:20px 18px}
  .calc,.res{grid-template-columns:minmax(0,1fr)}
  .res .val{font-size:28px}
  .fld{grid-template-columns:1fr 96px}
  .frost{grid-template-columns:minmax(0,1fr)}
  .frost .seg{flex-wrap:wrap}
  .frost .seg button{flex:1 1 50%;border-bottom:1px solid var(--ln3)}
  .oshibki{grid-template-columns:minmax(0,1fr)}
  .osh{min-height:0}
  .banner{grid-template-columns:minmax(0,1fr);padding:12px}
  .banner .kub{display:none}
  .faq{grid-template-columns:minmax(0,1fr)}
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot .trees{display:none}
  .list-head{gap:10px}
}