/* ivanovo-mosokna.ru — «строительная разметка» */
:root{
  --ink:#111214; --ink2:#3b3d42; --mute:#6c6f76; --line:#e2e1dc; --paper:#fff; --bg:#fbfbf9;
  --y:#FFD400; --y2:#FFE45C; --yt:rgba(255,212,0,.22);
  --ok:#2f9e4f; --okbg:#ecf7ee; --bad:#d6402b; --badbg:#fdeeea;
  --num:'Big Shoulders Display','Wix Madefor Display',sans-serif;
  --head:'Wix Madefor Display',system-ui,sans-serif;
  --text:'Wix Madefor Text',system-ui,sans-serif;
  --hand:'Pangolin','Comic Sans MS',cursive;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --w:1240px; --dock:84px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--text);padding-bottom:calc(var(--dock) + 16px);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
.wrap{max-width:var(--w);margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--head);margin:0;letter-spacing:-.01em}
.hand{font-family:var(--hand);font-weight:400;line-height:1.25}

/* знак */
.znak{display:flex;align-items:center;gap:12px;text-decoration:none}
.znak i{width:42px;height:42px;background:var(--y);display:grid;place-items:center;flex:none}
.znak i svg{width:26px;height:26px}
.znak b{font:800 21px/1.02 var(--head);letter-spacing:-.02em}
.znak small{font-size:13px;line-height:1.35;color:var(--mute);max-width:220px;margin-left:30px}

/* лента-скотч заголовков */
.lenta{display:inline-block;position:relative;font:800 clamp(28px,3.2vw,40px)/1.1 var(--head);padding:10px 26px 12px 22px;margin:0 0 18px -6px;z-index:0}
.lenta::before{content:"";position:absolute;inset:0;background:var(--y);z-index:-1;transform:rotate(-.6deg);
  clip-path:polygon(0 8%,3% 0,9% 6%,16% 1%,30% 4%,47% 0,63% 5%,80% 1%,94% 4%,100% 0,98% 50%,100% 100%,90% 95%,72% 100%,55% 96%,38% 100%,20% 95%,6% 100%,0 93%,2% 50%);
  transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.rv .lenta::before{transform:rotate(-.6deg) scaleX(0)}
.rv.on .lenta::before{transform:rotate(-.6deg) scaleX(1)}
.sec{padding:56px 0;border-top:1px solid var(--line)}
.sec .intro{max-width:620px;color:var(--ink2);margin:0 0 28px}

/* первый экран */
.hero{position:relative;height:620px;overflow:hidden;background:#fff}
.hero-ph{position:absolute;inset:0}
.hero-fr{position:absolute;top:50%;left:50%;width:max(100%,1860px);aspect-ratio:2172/724;transform:translate(-56%,-50%)}
.hero-fr{transition:transform .6s ease-out}
.hero-fr img{width:100%;height:100%}
.hero-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.92) 34%,rgba(255,255,255,0) 56%)}
.hero .wrap{position:relative;z-index:2;padding-top:30px;padding-bottom:60px}
.hero h1{font-size:clamp(40px,5vw,70px);line-height:1.02;font-weight:800;margin:64px 0 22px;max-width:640px}
.hero h1 span{position:relative;white-space:nowrap}
.hero h1 svg{position:absolute;left:-2%;bottom:-.2em;width:104%;height:.36em;overflow:visible}
.hero h1 svg path{fill:none;stroke:var(--y);stroke-width:9;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.1s .5s cubic-bezier(.3,.7,.2,1) forwards}
.hero h1 span em{position:relative;z-index:1;font-style:normal}
.hero .lead{font-size:19px;max-width:520px;color:var(--ink2);margin:0 0 30px}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--y);border:0;border-radius:6px;padding:17px 30px;font:700 17px var(--head);text-decoration:none;box-shadow:0 2px 0 #d9b400;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 #d9b400}
.btn svg{width:18px;height:18px;transition:transform .2s}
.btn:hover svg{transform:translateX(4px)}
.hero .note{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0 80px;font-size:23px;transform:rotate(-4deg);max-width:380px}
.hero .note svg{width:58px;height:50px;flex:none;margin-top:-14px}
.hero .call{position:absolute;z-index:2;font-size:22px;color:#222;line-height:1.15}
.hero .call svg{position:absolute;width:44px;height:24px}
.c1{left:82.5%;top:20%;transform:rotate(-6deg)}
.c1 svg{left:-50px;top:14px}
.c2{right:26.5%;top:50%;transform:rotate(-5deg);text-align:right}
.c2 svg{right:-50px;top:4px;transform:scaleX(-1)}
.call,.hero .note{opacity:0;animation:pop .6s forwards}
.c1{animation-delay:1.1s}.c2{animation-delay:1.4s}.hero .note{animation-delay:1.7s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
.hero-top{display:flex;align-items:center}

/* чек-лист */
.cl-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.prog{display:flex;align-items:center;gap:14px;border:1px solid var(--line);background:#fff;border-radius:6px;padding:14px 22px;font-size:15px;min-width:360px}
.prog .bars{display:flex;gap:6px}
.prog .bars i{width:22px;height:12px;background:#e6e6e2;transition:background .3s}
.prog .bars i.on{background:var(--y)}
.etap-tabs{display:none}
.punkty[hidden]{display:none}
.punkty{display:grid;grid-template-columns:repeat(4,1fr);row-gap:18px;margin-top:22px}
.punkt{padding:6px 22px 22px;border-left:1px solid var(--line);position:relative}
.punkt:nth-child(4n+1){border-left:0;padding-left:0}
.punkt .n{font:900 64px/1 var(--num);letter-spacing:-.02em;display:block;margin-bottom:8px;transition:color .3s}
.punkt h3{font:600 18px/1.28 var(--head);min-height:46px;margin-bottom:10px}
.chk{width:30px;height:30px;border:2px solid #b9bab5;border-radius:3px;background:#fff;display:grid;place-items:center;padding:0;margin-bottom:12px;transition:background .2s,border-color .2s}
.chk svg{width:20px;height:20px;opacity:0;transform:scale(.4);transition:.25s cubic-bezier(.3,1.6,.5,1)}
.punkt.ok .chk{background:var(--y);border-color:var(--y)}
.punkt.ok .chk svg{opacity:1;transform:none}
.punkt.ok .n{color:#c9c9c4}
.punkt dl{margin:0;font-size:15px;line-height:1.45;color:var(--ink2)}
.punkt dt:first-child{margin-top:0}
.punkt dt{font-weight:700;color:var(--ink);margin-top:10px}
.punkt dd{margin:2px 0 0}
.punkty.swap{animation:swap .45s ease}
@keyframes swap{from{opacity:0;transform:translateY(14px)}}

/* уровень */
.uroven{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.pole{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:520px}
.pole label{font-size:15px;color:var(--ink2)}
.pole input,.pole select{display:block;width:100%;margin-top:8px;padding:15px 16px;border:1px solid #cfcfca;border-radius:6px;font:500 17px var(--text);background:#fff}
.pole input:focus,.pole select:focus{outline:3px solid var(--yt);border-color:#c9a800}
.pole .wide{grid-column:1/-1}
.verd{margin-top:22px;max-width:520px;border:1px solid #cfe8d4;background:var(--okbg);border-radius:6px;padding:22px 26px;transition:background .3s,border-color .3s}
.verd small{display:block;font-weight:700;font-size:16px;margin-bottom:8px}
.verd b{display:flex;align-items:center;gap:14px;font:700 26px var(--head)}
.verd b i{width:44px;height:44px;border-radius:50%;background:var(--ok);display:grid;place-items:center;flex:none}
.verd b i svg{width:24px;height:24px}
.verd p{margin:10px 0 0;font-size:15px;color:var(--ink2)}
.verd.bad{background:var(--badbg);border-color:#f3c9c0}
.verd.bad b i{background:var(--bad)}
.verd.wait{background:#f4f4f1;border-color:var(--line)}
.verd.wait b i{background:#b9bab5}
.ramka svg{width:100%;height:auto;overflow:visible}
.ramka .hand{font-size:21px}
#okno-g{transition:transform .5s cubic-bezier(.3,.8,.3,1);transform-origin:50% 100%}
#puz{transition:transform .5s cubic-bezier(.3,.8,.3,1)}

/* шов */
.shov{display:grid;grid-template-columns:300px 1.5fr 270px;gap:34px;align-items:center}
.sloi{display:grid;gap:12px}
.sloi button{display:flex;align-items:center;gap:16px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:6px;padding:16px 18px;transition:background .2s,border-color .2s}
.sloi button b{display:block;font:700 17px var(--head)}
.sloi button span{font-size:15px;color:var(--ink2)}
.sloi button > svg{margin-left:auto;width:16px;height:16px;flex:none}
.sloi button[aria-pressed=true]{background:var(--y2);border-color:var(--y)}
.kr{width:34px;height:34px;border-radius:50%;background:var(--y);display:grid;place-items:center;font:800 17px var(--head);flex:none}
.shov-ph{position:relative;border-radius:4px;overflow:hidden}
.shov-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:60% 50%}
.shov-ph .mk{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--y);border:3px solid #fff;font:800 15px var(--head);display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.3);padding:0}
.shov-ph .mk::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--y);opacity:0}
.shov-ph .mk.on::after{animation:ping 1.4s infinite}
@keyframes ping{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.5);opacity:0}}
.opis{display:grid;gap:26px}
.opis > div{display:grid;grid-template-columns:34px 1fr;gap:14px;opacity:.45;transition:opacity .3s}
.opis > div.on{opacity:1}
.opis b{display:block;font:700 18px var(--head);margin-bottom:4px}
.opis p{margin:0;font-size:15px;color:var(--ink2)}

/* бумага */
.bumaga{display:grid;grid-template-columns:1fr 250px 330px;gap:40px;align-items:center}
.tochki{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tochki button{display:flex;align-items:center;gap:14px;border:0;background:none;padding:4px 0;font-size:17px;text-align:left}
.tochki button .kr{width:30px;height:30px;font-size:15px;transition:background .2s}
.tochki button em{font-style:normal;font-size:14px;padding:2px 10px;border-radius:20px;background:#efefeb;color:var(--mute);margin-left:4px}
.tochki button[data-s="1"] em{background:var(--okbg);color:var(--ok)}
.tochki button[data-s="2"] em{background:var(--badbg);color:var(--bad)}
.tochki button[data-s="2"] .kr{background:var(--bad);color:#fff}
.b-itog{margin-top:20px;font-size:15.5px;color:var(--ink2);min-height:48px;max-width:480px}
.b-okno svg{width:100%;height:auto;overflow:visible}
.b-okno .pt{cursor:pointer}
.b-okno .pt circle{transition:fill .2s}
.lupa{position:relative}
.lupa .kr-ph{width:280px;height:280px;border-radius:50%;overflow:hidden;box-shadow:0 0 0 6px #fff,0 6px 24px rgba(0,0,0,.18)}
.lupa .kr-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.lupa:hover .kr-ph img{transform:scale(1.08)}
.lupa .stik{position:absolute;right:-30px;top:20px;background:#fff6a8;padding:12px 16px;font-size:19px;transform:rotate(-5deg);box-shadow:0 3px 10px rgba(0,0,0,.1);max-width:210px}
.lupa .tyan{position:absolute;right:20px;bottom:-6px;width:60px}

/* акт */
.akt{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start}
.defs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.defs button{position:relative;min-height:84px;border:1px solid #d8d8d3;border-radius:6px;background:#fff;text-align:left;padding:14px 40px 14px 18px;font-size:16px;line-height:1.3;transition:border-color .2s,box-shadow .2s,transform .15s}
.defs button:hover{transform:translateY(-2px)}
.defs button[aria-pressed=true]{border:2px solid var(--y);box-shadow:0 0 0 3px var(--yt)}
.defs button svg{position:absolute;right:12px;bottom:12px;width:24px;height:24px;opacity:0;transform:scale(.4);transition:.25s cubic-bezier(.3,1.6,.5,1)}
.defs button[aria-pressed=true] svg{opacity:1;transform:none}
.akt-pole{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.akt-pole label{font-size:14px;color:var(--ink2)}
.akt-pole input{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #cfcfca;border-radius:6px;font:16px var(--text)}
.blank{background:#fff;box-shadow:0 8px 30px rgba(0,0,0,.1);border-top:14px solid #f1f1ee;position:relative;
  background-image:repeating-linear-gradient(#fff 0 33px,#e8eef6 33px 34px);background-position:0 70px}
.blank .bh{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;background:#fff;border-bottom:1px solid var(--line)}
.blank .bh b{font:700 17px var(--head)}
.blank .bh button{border:0;background:none;padding:6px;display:flex;align-items:center;gap:6px;font-size:14px}
.blank .bh button svg{width:22px;height:22px}
.blank pre{margin:0;padding:18px 26px 34px;font:15px/34px var(--mono);white-space:pre-wrap;min-height:340px}
.blank pre mark{background:linear-gradient(transparent 12%,var(--y2) 12%,var(--y2) 88%,transparent 88%);padding:0 2px}
.blank .pust{color:var(--mute)}

/* баннер */
.banner{margin:20px auto 0;max-width:calc(var(--w) + 40px);display:grid;grid-template-columns:110px 1fr 110px;min-height:260px;position:relative;overflow:hidden;text-decoration:none}
.banner .shtr{background:repeating-linear-gradient(-45deg,var(--y) 0 26px,#111 26px 52px);background-size:200% 200%;animation:shtr 6s linear infinite}
@keyframes shtr{to{background-position:74px 0}}
.banner .mid{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;padding:30px 44px;background:#eef0f1}
.banner .mid img{position:absolute;right:0;top:0;height:100%;width:62%;object-fit:cover;object-position:78% 60%;transition:transform 1.2s}
.banner:hover .mid img{transform:scale(1.04)}
.banner .mid::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#eef0f1 40%,rgba(238,240,241,0) 75%);z-index:1}
.banner h2{position:relative;z-index:2;font-size:clamp(28px,3vw,40px);line-height:1.08;font-weight:800}
.banner p{position:relative;z-index:2;margin:12px 0 0;font-size:17px;color:var(--ink2)}
.banner .btn{position:relative;z-index:2;flex:none;align-self:flex-end}

/* faq */
.faq details{border:1px solid var(--line);border-radius:6px;background:#fff;margin-bottom:10px}
.faq summary{list-style:none;cursor:pointer;padding:16px 22px;font-size:17px;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:16px;height:16px;flex:none;margin-top:5px;transition:transform .25s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{margin:0;padding:0 22px 18px;color:var(--ink2);max-width:880px}

/* подвал */
footer{border-top:1px solid var(--line);padding:30px 0}
.foot{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.foot p{margin:0;font-size:15px;color:var(--mute);flex:1;min-width:280px}
.foot nav{display:flex;gap:10px;font-size:15px;color:var(--ink2)}

/* нижняя панель этапов */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);box-shadow:0 -6px 24px rgba(0,0,0,.06)}
.dock .wrap{display:grid;grid-template-columns:repeat(4,1fr);height:var(--dock);align-items:center}
.dock .dk{text-decoration:none;color:inherit;display:flex;align-items:center;gap:16px;border:0;background:none;padding:12px 22px;height:64px;border-radius:6px;text-align:left;position:relative;transition:background .25s}
.dock .dk + button::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;border-left:1px solid var(--line)}
.dock .dk svg.ic{width:34px;height:34px;flex:none}
.dock .dk b{display:block;font:700 17px var(--head)}
.dock .dk small{font-size:13.5px;color:var(--mute)}
.dock .dk .ar{margin-left:auto;width:20px;height:20px;opacity:0}
.dock .dk[aria-current=true]{background:var(--y2)}
.dock .dk[aria-current=true]::before,.dock .dk[aria-current=true] + button::before{display:none}
.dock .dk[aria-current=true] .ar{opacity:1}
.dock .dk[aria-current=true] small{color:var(--ink2)}

/* появление */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s}
.rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}.rv .lenta::before{transform:rotate(-.6deg)}
  .call,.hero .note{opacity:1}.hero h1 svg path{stroke-dashoffset:0}
}

@media (max-width:1100px){
  .punkty{grid-template-columns:repeat(2,1fr)}
  .punkt:nth-child(4n+1){border-left:1px solid var(--line);padding-left:26px}
  .punkt:nth-child(2n+1){border-left:0;padding-left:0}
  .uroven,.akt{grid-template-columns:1fr;gap:34px}
  .shov{grid-template-columns:1fr 1fr}.shov-ph{grid-column:1/-1;order:-1}
  .bumaga{grid-template-columns:1fr 1fr}.bumaga > div:first-child{grid-column:1/-1}
  .dock .dk{padding:10px 12px;gap:10px}.dock .dk .ar{display:none}
  .call{display:none}
}
@media (max-width:720px){
  :root{--dock:66px}
  body{font-size:16px}
  .wrap{padding:0 16px}
  .znak small{display:none}
  .hero{height:auto}
  .hero-ph{position:relative;inset:auto;height:260px;margin-top:20px;order:2;overflow:hidden}
  .hero-fr{width:auto;height:100%;left:auto;right:-40px;transform:translateY(-50%)}
  .hero-ph::after{background:linear-gradient(180deg,#fff 0,rgba(255,255,255,0) 30%)}
  .hero{display:flex;flex-direction:column}
  .hero .wrap{padding-bottom:0}
  .hero h1{margin-top:40px}
  .hero .note{margin-left:20px;font-size:20px}
  .call{display:none}
  .sec{padding:40px 0}
  .prog{min-width:0;width:100%;padding:12px 14px}
  .punkty{grid-template-columns:1fr}
  .punkt,.punkt:nth-child(n){border-left:0;padding:18px 0 22px;border-top:1px solid var(--line);display:grid;grid-template-columns:64px 1fr;column-gap:14px}
  .punkt .n{font-size:52px;grid-row:span 3}
  .punkt h3{min-height:0;margin-bottom:8px}
  .chk{margin-bottom:6px}
  .pole{grid-template-columns:1fr}
  .shov,.bumaga{grid-template-columns:1fr}
  .b-okno{max-width:200px;justify-self:center}
  .lupa{justify-self:center}.lupa .kr-ph{width:230px;height:230px}.lupa .stik{right:-10px;font-size:16px;max-width:160px}
  .defs{grid-template-columns:1fr 1fr}
  .akt-pole{grid-template-columns:1fr}
  .banner{grid-template-columns:18px 1fr 18px}
  .banner .mid{flex-direction:column;align-items:flex-start;padding:26px 20px}
  .banner .mid img{width:100%;opacity:.35}
  .banner .btn{align-self:flex-start}
  .dock .wrap{padding:0 6px;gap:2px}
  .dock .dk{flex-direction:column;gap:2px;padding:6px 2px;height:58px;align-items:center;text-align:center}
  .dock .dk svg.ic{width:24px;height:24px}
  .dock .dk b{font-size:13px}.dock .dk small{font-size:11px}
  .dock .dk + button::before{display:none}
}