/* «Как было» — демо кузовного ремонта. Мир: двор сверху (асфальт, краска разметки) и бумаги ремонта (оригинал, жёлтая копия, шариковая ручка). */
:root{
  --asph:#585c60; --asph-d:#45494d; --asph-l:#6c7074;
  --paint:#f2f0e8; --paint-dim:#c9c8c0;
  --paper:#f7f7f3; --paper-b:#eceee8; --sheet:#fffffd;
  --copy:#f1e7b0; --copy-d:#e2d48f;
  --ink:#2436c8; --ink-d:#18258f; --ink-soft:rgba(36,54,200,.12);
  --car:#e2532d; --car-d:#b23a1a;
  --text:#1d2023; --text-2:#4b5156; --line:#d4d6cf;
  --concrete:#cfcdc6; --stencil:#3a3d40; --zone:#d9a41d;
  --f-d:'Exo 2', 'Arial Narrow', sans-serif;
  --f-t:'Source Sans 3', 'Segoe UI', sans-serif;
  --f-h:'Bad Script', 'Segoe Script', cursive;
  --gut:clamp(16px, 4.4vw, 64px);
  --stub-h:66px;
  --ease:cubic-bezier(.16,1,.3,1);
  --shadow:0 1px 1px rgba(29,32,35,.06), 0 10px 26px -10px rgba(29,32,35,.32);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--stub-h) + 12px);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--text);font:400 18px/1.55 var(--f-t);font-variant-numeric:lining-nums;overflow-x:clip;scrollbar-color:var(--asph) var(--paper-b)}
::selection{background:var(--ink);color:#fff}
input,select,textarea{caret-color:var(--ink)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.hero :focus-visible,.road :focus-visible,.final :focus-visible{outline-color:var(--paint)}
[hidden]{display:none!important}
img,svg{display:block}
a{color:var(--ink);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2,h3{margin:0;font-weight:800;text-wrap:balance}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
small{font-size:.8em}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:4px}
.skip:focus{top:12px}
.wrap{max-width:1312px;margin:0 auto;padding:0 var(--gut)}

/* строка «демо» — жёлтая копия */
.demo-strip{margin:0;background:var(--copy);color:var(--ink-d);font-size:13.5px;line-height:1.4;padding:7px var(--gut);text-align:center}
.demo-strip b{font-weight:700}

/* корешок-шапка с перфорацией снизу */
.stub{position:sticky;top:0;z-index:50;height:var(--stub-h);display:flex;align-items:center;gap:28px;padding:0 var(--gut) 6px;background:var(--sheet);
  -webkit-mask:radial-gradient(circle 3px at 7px 100%,#0000 96%,#000) 0 0/14px 100% repeat-x;mask:radial-gradient(circle 3px at 7px 100%,#0000 96%,#000) 0 0/14px 100% repeat-x}
.stub::after{content:"";position:absolute;left:0;right:0;bottom:9px;border-bottom:1px dashed #c3c5bd}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;flex:none}
.brand-sign{width:38px;height:38px}
.brand-name{font:800 22px/1 var(--f-d);letter-spacing:-.01em}
.brand-sub{font-size:13px;line-height:1.1;color:var(--text-2);max-width:5.5em}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{position:relative;color:var(--text);text-decoration:none;font-weight:600;font-size:16px;padding:8px 10px;border-radius:4px}
.menu a::after{content:"";position:absolute;inset:-2px -6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M58 4C30 2 6 8 4 19s22 18 48 17 45-6 45-17S70 3 40 6' fill='none' stroke='%232436c8' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--ease)}
.menu a.on::after{clip-path:inset(0 0 0 0)}
.menu a:hover{color:var(--ink)}
.stub-cta{flex:none}
.stub-toggle{display:none}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:6px;border:2px solid var(--ink);font:700 16px/1.1 var(--f-d);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,transform .15s}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-d);border-color:var(--ink-d)}
.btn-paper{background:var(--sheet);color:var(--ink);border-color:var(--sheet)}
.btn-paper:hover{background:var(--copy);border-color:var(--copy)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:#c9ccd6;border-color:#c9ccd6;color:#4b5156;cursor:not-allowed}

/* краска разметки */
.paint{font-family:var(--f-d);font-weight:900;text-transform:uppercase;color:var(--paint);letter-spacing:.015em;line-height:.92;
  -webkit-mask:var(--wear,none);mask:var(--wear,none)}
.asph{background:var(--asph) var(--asph-tile,none)}

/* 1. двор сверху */
.hero{background:var(--asph) var(--asph-tile,none);color:var(--paint);position:relative}
.scene{position:relative;container-type:inline-size}
.scene-art{width:100%;height:auto}
.walk{fill:#a6a7a2}
.walk-joints{stroke:#8f908b;stroke-width:1.5;stroke-dasharray:40 6}
.curb{fill:#c9cac4}
.bays path{fill:none;stroke:var(--paint);stroke-width:6;opacity:.9}
.bays .edge{stroke-width:5;stroke-dasharray:0}
.stain{fill:#2c2f32;opacity:.22}
.post circle{fill:#1d2023;stroke:#e9c22e;stroke-width:5}
.post .post-cap{fill:#55595c;stroke:none}
.door rect{fill:#b7bcc0;stroke:#8d9296;stroke-width:1.5}
.mark-letter{font:900 34px var(--f-d);fill:var(--paint);paint-order:stroke;stroke:rgba(29,32,35,.55);stroke-width:5px;opacity:0;transition:opacity .4s}
.scene.lettered .mark-letter{opacity:1}
.chalk path,.chalk circle{fill:none;stroke:#f5f1dc;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.chalk .star{stroke:#ffd33d;stroke-width:4.5}
.dmg path{fill:none}

.hero-title{position:absolute;left:4.45%;top:50.2%;font-size:6.35cqw;transform:scaleY(1.9);transform-origin:0 0;white-space:nowrap;pointer-events:none}
.hero-title span{display:inline}
.hero-lead{position:absolute;left:4.45%;top:72%;width:64%;display:flex;align-items:center;gap:clamp(20px,2.4cqw,40px)}
.hero-lead p{font-size:clamp(16px,1.3cqw,19px);line-height:1.45;color:var(--paint);max-width:31em;margin:0}
.hero-act{display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:none}
.link-paint{color:var(--paint);font-weight:600;text-decoration:underline;text-decoration-color:rgba(242,240,232,.5)}
.link-paint:hover{text-decoration-color:var(--paint)}
.cases{position:absolute;left:4.45%;bottom:3.6%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:66%}
.cases-label{font:400 24px/1 var(--f-h);color:var(--paint);margin-right:6px;white-space:nowrap}
.case{font:600 16px/1.2 var(--f-t);color:var(--ink);background:var(--sheet);border:0;border-radius:4px;padding:10px 14px;cursor:pointer;box-shadow:0 3px 8px -3px rgba(0,0,0,.45);transition:background-color .2s,color .2s}
.case:hover{background:var(--copy)}
.case[aria-pressed="true"]{background:var(--ink);color:#fff}
.slip{position:absolute;left:69.4%;top:51.6%;width:27.8%;background:var(--copy);color:var(--ink-d);padding:14px 18px 12px;border-radius:2px;box-shadow:var(--shadow)}
.slip::before{content:"";position:absolute;left:0;right:0;top:-6px;height:6px;background:radial-gradient(circle 3px at 7px 6px,var(--copy) 96%,#0000) 0 0/14px 6px repeat-x}
.slip-head{display:flex;justify-content:space-between;align-items:baseline;font:700 13px/1 var(--f-d);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.slip-no{font:400 15px/1 var(--f-h);text-transform:none;letter-spacing:0}
.slip-scheme{width:100%;height:auto;max-height:72px;margin:0 0 4px}
.slip-scheme path,.slip-scheme rect,.slip-scheme circle{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.slip-scheme text{font:400 17px var(--f-h);fill:var(--ink)}
.slip-list{margin:0;display:grid;gap:6px}
.slip-list div{display:grid;grid-template-columns:6.4em 1fr;gap:10px;align-items:baseline}
.slip-list dt{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#5a5016}
.slip-list dd{margin:0;font-size:14.5px;line-height:1.35;color:var(--ink-d)}
.slip-note{font-size:12px;line-height:1.35;color:#5a5016;margin-top:8px}
.cta-short{display:none}
.slip.redraw dd{animation:write .7s var(--ease) both}
@keyframes write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* 2. кто платит — асфальт с бордюром сверху */
.road{background:var(--asph) var(--asph-tile,none);color:var(--paint);padding:96px 0 104px;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,#c9cac4 0 118px,#9c9d98 118px 120px)}
.road-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.h2{font:800 clamp(32px,3.4vw,50px)/1.05 var(--f-d);letter-spacing:-.01em;margin-bottom:22px;color:var(--text)}
.h2-paint{font-weight:900;text-transform:uppercase;color:var(--paint);transform:scaleY(1.5);transform-origin:0 0;margin-bottom:56px;-webkit-mask:var(--wear,none);mask:var(--wear,none)}
.lead-light{color:var(--paint);font-size:19px;max-width:32em}
.fork{display:grid;grid-template-columns:repeat(3,1fr);margin-top:34px;border-left:4px dashed rgba(242,240,232,.55)}
.lane{appearance:none;background:none;border:0;border-right:4px dashed rgba(242,240,232,.55);color:var(--paint);font:inherit;text-align:center;padding:10px 10px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;opacity:.6;transition:opacity .25s}
.lane svg{width:46px;height:92px}
.lane .arrow{fill:none;stroke:var(--paint);stroke-width:9;stroke-linecap:butt;stroke-linejoin:miter}
.lane svg path[d*="Z"]{fill:var(--paint)}
.lane span{font-size:15px;line-height:1.3;min-height:2.6em}
.lane b{font:900 19px/1 var(--f-d);text-transform:uppercase;background:var(--sheet);color:var(--ink);padding:7px 12px;border-radius:4px}
.lane:hover{opacity:.85}
.lane[aria-selected="true"]{opacity:1}
.lane[aria-selected="true"] b{background:var(--ink);color:#fff}
.sheet{background:var(--sheet);color:var(--text);border-radius:3px;box-shadow:var(--shadow)}
.steps{padding:34px 38px}
.steps h3{font:800 24px/1.2 var(--f-d);margin-bottom:20px}
.steps-list{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.steps-list li{counter-increment:s;position:relative;padding-left:52px;font-size:17px;line-height:1.5}
.steps-list li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font:800 17px/1 var(--f-d);color:var(--ink)}
.steps-list b{font-weight:700}
.steps-list small{display:block;font-size:13px;color:var(--text-2);margin-top:2px}
.steps-us{margin-top:22px;padding:16px 18px;background:var(--copy);color:#2b2a14;font-size:16px;border-radius:2px}

/* бумажные разделы: перфорация отрыва на стыке */
.paper{background:var(--paper);padding:104px 0;position:relative}
.paper-b{background:var(--paper-b)}
.paper+.paper::before{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;background:radial-gradient(circle 3px at 7px 5px,#c7c9c1 96%,#0000) 0 0/14px 10px repeat-x}
.two{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.two-rev .col-text{order:2}
.col-text p{color:var(--text-2);max-width:34em}
.col-text .btn{margin-top:14px}
.hint{font-size:15px;color:var(--text-2);margin-top:10px}

/* 3. приёмка: акт и копия */
.marks-legend{list-style:none;margin:22px 0 10px;padding:0;display:grid;gap:6px}
.marks-legend button{appearance:none;border:0;background:none;font:inherit;font-size:17px;color:var(--text);cursor:pointer;display:flex;gap:12px;align-items:center;padding:4px 0;text-align:left}
.marks-legend i{font:400 20px/1 var(--f-h);color:var(--ink);width:32px;height:32px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;flex:none;font-style:normal}
.marks-legend button:hover i,.marks-legend button.on i{background:var(--ink);color:#fff}
.act{position:relative}
.act-stack{position:relative;margin:0 0 24px 0}
.act-sheet{position:relative;z-index:2;background:var(--sheet);box-shadow:var(--shadow);border-radius:2px;padding:22px 26px 34px}
.act-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:4px}
.act-head b{font:800 18px/1.2 var(--f-d)}
.act-head span{font-size:14px;color:var(--text-2)}
.act-art{width:100%;height:auto}
.act-ink path{fill:none;stroke:var(--ink);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.act-rule{stroke:var(--line);stroke-width:1.5}
.act-marks circle{fill:var(--sheet);stroke:var(--ink);stroke-width:2.8;transition:fill .2s}
.act-marks text{font:400 22px var(--f-h);fill:var(--ink);text-anchor:middle}
.act-marks .m.on circle{fill:var(--ink)}
.act-marks .m.on text{fill:#fff}
.act-foot{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:end;padding:6px 0 14px}
.act-note{font:400 21px/1.35 var(--f-h);color:var(--ink);margin:0}
.act-signs{display:grid;gap:4px}
.act-signs p{display:flex;align-items:end;gap:8px;margin:0;border-bottom:1px solid var(--line)}
.act-signs svg{width:110px;height:33px}
.act-signs span{font:600 12px var(--f-t);color:var(--text-2);text-transform:uppercase;letter-spacing:.06em;width:4.4em;padding-bottom:3px}
.sig{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,300);stroke-dashoffset:var(--len,300)}
.act.signed .sig{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease)}
.act.signed .act-signs p+p .sig{transition-delay:.7s}
.act-copy{position:absolute;z-index:1;inset:0;background:var(--copy);border-radius:2px;box-shadow:var(--shadow);padding:22px 26px 10px;transform:translate(0,0);transition:transform .9s var(--ease) .9s;overflow:hidden}
.act-copy-label{position:absolute;right:16px;bottom:10px;font:700 12px var(--f-d);text-transform:uppercase;letter-spacing:.08em;color:#6b5f1a;z-index:2}
.act-copy .act-head{visibility:hidden}
.act-copy .carbon{opacity:0;transition:opacity .6s 1.2s;filter:blur(.45px);mix-blend-mode:multiply}
.act.signed .act-copy .carbon{opacity:.8}
.act-copy .act-ink path,.act-copy .act-marks circle,.act-copy .sig{stroke:#3a4bcc}
.act-copy .act-marks circle{fill:none}
.act-copy .act-marks text{fill:#3a4bcc}
.act-copy .act-note{color:#3a4bcc}
.act-copy .act-signs p{border-color:rgba(58,75,204,.3)}
.act-copy .act-signs span{color:#6b5f1a}
.act-copy .sig{stroke-dashoffset:0;transition:none}
.act-photos{margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;position:relative;z-index:3}
.ph{background:var(--sheet);padding:6px 6px 8px;box-shadow:var(--shadow);border-radius:2px;outline:2px solid transparent;transition:outline-color .2s}
.ph svg{width:100%;height:auto}
.ph-date{font:700 9px var(--f-d);fill:#ffd36b;letter-spacing:.04em}
.ph-cap{display:block;font-size:13px;color:var(--text-2);margin-top:5px;line-height:1.25}
.ph-note{grid-column:1/-1;font-size:13px;color:var(--text-2)}
.ph.on{outline-color:var(--ink)}

/* 4. цена: лицо и оборот */
.flip-switch{display:inline-flex;margin-top:12px;border:2px solid var(--ink);border-radius:6px;overflow:hidden}
.flip-switch button{appearance:none;border:0;background:var(--sheet);color:var(--ink);font:700 15px/1 var(--f-d);padding:13px 16px;cursor:pointer}
.flip-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.estimate{perspective:1600px}
.est-card{display:grid;transition:transform .8s var(--ease);transform-style:preserve-3d}
.estimate.back .est-card{transform:rotateY(180deg)}
.est-face,.est-back{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:30px 34px}
.est-back{transform:rotateY(180deg);background:var(--copy)}
.est-back .est-top span,.est-back .est-foot{color:#5a5016}
.est-top{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(29,32,35,.15);padding-bottom:10px;margin-bottom:18px}
.est-top b{font:800 18px var(--f-d)}
.est-top span{font-size:14px;color:var(--text-2)}
.est-what{font-size:18px;color:var(--text-2);max-width:26em}
.est-range span{font:900 clamp(30px,3.5vw,52px)/1 var(--f-d);color:var(--ink);letter-spacing:-.02em;display:block;margin:14px 0 6px;white-space:nowrap}
.est-days{font:700 22px var(--f-d)}
.est-hand{font:400 23px/1.35 var(--f-h);color:var(--ink);margin-top:20px;max-width:20em}
.est-foot{font-size:13px;color:var(--text-2);margin-top:18px}
.est-maybe{margin:16px 0 4px;padding:0 0 0 1.1em;font-size:16px;color:var(--text-2)}
.est-maybe li{margin-bottom:2px}
.est-maybe-note{font-size:15px;color:var(--text);font-weight:600}
.est-table{width:100%;border-collapse:collapse;font-size:16px}
.est-table td{padding:7px 0;border-bottom:1px dotted rgba(29,32,35,.25);vertical-align:top}
.est-table td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-variant-numeric:tabular-nums;font-weight:600}
.est-table .est-new td{color:var(--ink-d);border-bottom:2px solid var(--ink)}
.est-table em{display:block;font:400 17px/1.3 var(--f-h);color:var(--ink);font-style:normal}
.est-table tfoot td{border:0;padding-top:12px;font:800 20px var(--f-d)}

/* 5. цвет */
.cvet-head{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:end;margin-bottom:40px}
.cvet-head .h2{margin:0}
.quote{margin:0 0 16px;padding:0}
.quote p{font:400 clamp(24px,2.3vw,32px)/1.3 var(--f-h);color:var(--ink);margin:0 0 4px}
.quote cite{font-style:normal;font-size:14px;color:var(--text-2)}
.cvet-head>div p,.cvet-head>p{color:var(--text-2)}
.cvet-lab{display:grid;grid-template-columns:7fr 4fr;gap:56px;align-items:end}
.cvet-try{display:grid;gap:16px}
.light-switch{display:flex;gap:8px;flex-wrap:wrap}
.light-switch button{appearance:none;border:2px solid var(--text);background:none;color:var(--text);font:700 15px/1 var(--f-d);padding:11px 16px;border-radius:999px;cursor:pointer}
.light-switch button[aria-checked="true"]{background:var(--text);color:var(--paper)}
.panel{--body:#e2532d;--c1:#e3552d;--c2:#e2532d;--c3:#df522e;--glare:transparent;position:relative;border-radius:26px 8px 6px 6px;overflow:hidden;padding:64px 40px 34px}
.panel-body{position:absolute;inset:0;background:var(--body);transition:background-color .6s}
.panel-body::before{content:"";position:absolute;inset:0;background:var(--flake,none);mix-blend-mode:screen;opacity:.55}
.panel-body::after{content:"";position:absolute;inset:0;background:linear-gradient(176deg,rgba(255,255,255,.26),transparent 22%,transparent 64%,rgba(255,255,255,.1) 70%,transparent 76%,rgba(0,0,0,.2)),var(--glare);transition:background .6s}
.panel-seam{position:absolute;top:0;bottom:0;left:61%;width:3px;background:rgba(60,14,4,.55);box-shadow:1px 0 0 rgba(255,255,255,.18);z-index:1}
.panel-handle{position:absolute;top:18%;left:calc(61% + 40px);width:76px;height:16px;border-radius:8px;background:rgba(60,14,4,.35);box-shadow:inset 0 3px 0 rgba(255,255,255,.18);z-index:1}
.panel[data-light="ten"]{--body:#a8442a;--c1:#a9462b;--c2:#a8442a;--c3:#8e3a29;--glare:linear-gradient(90deg,rgba(40,60,110,.2),rgba(40,60,110,.06))}
.panel[data-light="sun"]{--body:#f06a3a;--c1:#f2862e;--c2:#f06a3a;--c3:#ec6a3c;--glare:radial-gradient(ellipse 36% 70% at 76% 14%,rgba(255,250,230,.5),transparent 70%)}
.cards{position:relative;z-index:2;list-style:none;margin:0;padding:0;display:flex;gap:clamp(12px,2.4vw,34px);justify-content:center;align-items:flex-start}
.spray{width:clamp(92px,12vw,150px);background:var(--sheet);padding:7px 7px 11px;border-radius:2px;box-shadow:0 14px 24px -10px rgba(0,0,0,.55);text-align:center}
.spray[data-card="1"]{transform:rotate(-4deg) translateY(10px)}
.spray[data-card="2"]{transform:rotate(1.5deg)}
.spray[data-card="3"]{transform:rotate(-1.2deg) translateY(-6px)}
.spray-paint{position:relative;display:block;aspect-ratio:4/3;background:var(--c2);border-radius:1px;overflow:hidden;transition:background-color .6s}
.spray-paint::before{content:"";position:absolute;inset:0;background:var(--flake,none);mix-blend-mode:screen;opacity:.55}
.spray-paint::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.42),transparent 34%,transparent 70%,rgba(0,0,0,.16))}
.spray[data-card="1"] .spray-paint{background:var(--c1)}
.spray[data-card="3"] .spray-paint{background:var(--c3)}
.spray-check{display:block;height:15px;background:conic-gradient(#1d2023 25%,#fff 0 50%,#1d2023 0 75%,#fff 0) 0 0/15px 15px;opacity:.85}
.spray b{display:block;font:700 14px var(--f-d);margin-top:8px}
.verdict{display:block;font:400 18px/1.25 var(--f-h);color:var(--ink);font-style:normal;min-height:1.3em;margin-top:2px}
.panel-note{margin:0;font:400 23px/1.35 var(--f-h);color:var(--ink);max-width:34em}
.cvet-steps{list-style:none;counter-reset:c;margin:0;padding:0;display:grid;gap:22px}
.cvet-steps li{counter-increment:c;position:relative;padding-left:56px;font-size:17px;color:var(--text-2)}
.cvet-steps li::before{content:counter(c);position:absolute;left:0;top:-10px;font:400 40px/1 var(--f-h);color:var(--ink)}
.cvet-steps b{color:var(--text)}

/* 6. цех сверху */
.floor{background:var(--concrete) var(--floor-tile,none);padding:100px 0;position:relative}
.floor::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(-45deg,#1d2023 0 14px,#e8b923 14px 28px)}
.floor-head{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:end;margin-bottom:30px}
.floor-head .h2{margin:0}
.floor-head p{color:#33373a}
.h2-floor{font-weight:900;text-transform:uppercase;color:var(--stencil);transform:scaleY(1.35);transform-origin:0 100%}
.days{display:flex;gap:8px;margin-bottom:18px}
.days button{appearance:none;border:2px solid var(--stencil);background:rgba(255,255,255,.4);color:var(--stencil);font:800 17px/1 var(--f-d);width:64px;height:48px;border-radius:6px;cursor:pointer}
.days button[aria-selected="true"]{background:var(--stencil);color:#fff}
.shop{display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start}
.shop-art{width:100%;height:auto}
.zones rect{fill:rgba(255,255,255,.22);stroke:var(--zone);stroke-width:5;stroke-dasharray:22 10}
.zones .booth{fill:#e9e9e4;stroke:#9a9b96;stroke-dasharray:0;stroke-width:6}
.zones rect.here{fill:rgba(255,255,255,.55)}
.zone-names text{font:900 19px var(--f-d);fill:var(--stencil);text-anchor:middle;letter-spacing:.04em;opacity:.8}
.booth-lamps path{stroke:#fff;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(255,255,255,.9))}
@media (min-width:1024px){#shopCar{transition:transform 1.1s var(--ease)}}
.msg{padding:20px 20px 16px}
.msg-time{font:800 15px var(--f-d);color:var(--ink);margin-bottom:6px}
.msg-text{font-size:16px;line-height:1.45}
.msg-photo{width:100%;height:auto;margin-top:12px;border-radius:2px}
.msg-cap{font-size:12.5px;color:var(--text-2);margin-top:6px}

/* 7. выдача */
.vy-head{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:end;margin-bottom:36px}
.vy-head .h2{margin:0}
.vy-head p{color:var(--text-2)}
.vy{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:center}
.vy-art{width:100%;height:auto}
.vy-ground{stroke:var(--line);stroke-width:3}
.vy-body{fill:var(--car)}
.vy-glass{fill:#3a434b}
.vy-lines{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2.5}
.vy-wheel{fill:#1d2023}
.vy-hub{fill:#9aa0a5}
.vy-lamp{fill:#f4f1e6}
.vy-trim{stroke:rgba(0,0,0,.22);stroke-width:3;fill:none}
.vy-handle{stroke:rgba(0,0,0,.4);stroke-width:5;stroke-linecap:round}
.vy-mirror{fill:#b23a1a}
.vy-arch{fill:none;stroke:rgba(0,0,0,.3);stroke-width:4}
.vy-pts circle{fill:var(--sheet);stroke:var(--ink);stroke-width:3;transition:fill .2s}
.vy-pts text{font:800 17px var(--f-d);fill:var(--ink);text-anchor:middle}
.vy-pts g.on circle{fill:var(--ink)}
.vy-pts g.on text{fill:#fff}
.vy-list{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:v}
.vy-list li{counter-increment:v;position:relative;padding-left:44px;font-size:17px;color:var(--text-2);cursor:default;border-radius:4px;transition:background-color .2s}
.vy-list li::before{content:counter(v);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:800 15px/1 var(--f-d);color:var(--ink)}
.vy-list li.on::before{background:var(--ink);color:#fff}
.vy-list b{color:var(--text)}

/* 8. гарантия */
.warranty{position:relative;padding:30px 34px 28px;overflow:hidden}
.w-top{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:10px}
.w-top b{font:800 18px var(--f-d)}
.w-top span{font-size:14px;color:var(--text-2)}
.w-term{display:flex;align-items:center;gap:18px;margin:6px 0 14px}
.w-num{font:900 clamp(96px,10vw,148px)/.9 var(--f-d);color:var(--ink);letter-spacing:-.04em}
.w-unit{font:700 21px/1.25 var(--f-d)}
.w-list{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:17px;max-width:30em}
.w-foot{font-size:13.5px;color:var(--text-2);margin-top:18px;max-width:34em}
.stamp{position:absolute;right:20px;bottom:18px;width:124px;height:124px;transform:rotate(-14deg);opacity:.8}
.w-list,.w-foot{max-width:calc(100% - 140px)}
.stamp circle{fill:none;stroke:var(--ink);stroke-width:2.6}
.stamp text{font:700 10.5px var(--f-d);fill:var(--ink);letter-spacing:.12em}

/* 9. вопросы */
.qa{display:grid;grid-template-columns:1fr 1fr;gap:40px 72px;margin-top:20px}
.q{padding-top:4px}
.q-hand{font:400 25px/1.25 var(--f-h);color:var(--ink);margin-bottom:8px}
.q p:not(.q-hand){color:var(--text-2);font-size:17px;max-width:34em}

/* 10. финал и подвал */
.final{background:var(--asph) var(--asph-tile,none);color:var(--paint);padding:110px 0 116px;position:relative}
.final::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(90deg,#c9cac4 0 118px,#9c9d98 118px 120px)}
.final-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center}
.final-in{display:grid;justify-items:start;gap:26px}
.final-scene{position:relative}
.final-art{width:100%;height:auto}
.final-art .curb{fill:#c9cac4}
.final-art .bays path{fill:none;stroke:var(--paint);stroke-width:6;opacity:.9}
.chalk-ghost{fill:none;stroke:rgba(245,241,220,.28);stroke-width:4;stroke-dasharray:6 9;stroke-linecap:round}
.final-letter{opacity:1}
.final-slip{position:absolute;left:auto;top:auto;right:0;bottom:6%;width:min(300px,58%)}
.fs-title{font:400 30px/1.15 var(--f-h);color:var(--ink);margin:4px 0 10px}
.fs-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:15px;color:var(--ink-d)}
.fs-list li{display:flex;gap:8px;align-items:flex-start}
.fs-list svg{width:18px;height:18px;flex:none;margin-top:2px}
.fs-list path{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.final-title{font-size:clamp(44px,6.2vw,92px)}
.final-title span{display:block;height:.92em;transform:scaleY(1.7);transform-origin:0 0;margin-bottom:calc(.92em * .7)}
.foot{background:var(--asph-d);color:var(--paint-dim);padding:40px 0 48px;font-size:14px}
.foot-in{display:grid;gap:10px;max-width:1312px}
.foot-brand{display:flex;align-items:center;gap:10px;font:800 17px var(--f-d);color:var(--paint)}
.foot-brand svg{width:30px;height:30px;background:var(--sheet);border-radius:6px;padding:2px}
.foot p{max-width:62em}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--paint)}

/* окно записи — лист */
.dlg{border:0;padding:0;width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 32px);background:var(--sheet);color:var(--text);border-radius:4px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.dlg::backdrop{background:rgba(29,32,35,.62)}
.dlg-form{position:relative;padding:30px 32px 26px}
.dlg-x{position:absolute;right:12px;top:12px;width:44px;height:44px;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;place-items:center}
.dlg-x svg{width:22px;height:22px}
.dlg-x path{stroke:var(--text);stroke-width:2.4;stroke-linecap:round}
.dlg-x:hover{background:var(--paper-b)}
.dlg h2{font:800 28px/1.15 var(--f-d);margin:0 44px 8px 0}
.dlg-lead{color:var(--text-2);margin-bottom:4px}
.dlg-demo{font:400 19px var(--f-h);color:var(--ink);margin-bottom:14px}
.fld{display:grid;gap:5px;margin-bottom:12px}
.fld span{font-size:14px;font-weight:600}
.fld i{font-style:normal;font-weight:400;color:var(--text-2)}
.fld input,.fld select{font:inherit;font-size:17px;padding:11px 12px;border:1.5px solid #b9bcb4;border-radius:4px;background:#fff;color:var(--text);min-height:48px}
.fld input:focus,.fld select:focus{border-color:var(--ink);outline:2px solid var(--ink-soft);outline-offset:0}
.fld input::placeholder{color:#767c81}
.fld input[aria-invalid="true"]{border-color:#c0321b}
.err{font-style:normal;font-size:14px;color:#a62a16}
.agree{border:0;padding:0;margin:14px 0 12px;display:grid;gap:9px}
.agree legend{font-size:14px;font-weight:600;margin-bottom:6px}
.chk{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:14.5px;line-height:1.4;align-items:start}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink)}
.chk-all{font-weight:600}
.chk small{display:block;color:var(--text-2)}
.dlg-send{width:100%;margin-top:6px}
.dlg-hint{font-size:14px;color:var(--text-2);margin-top:8px}
.dlg-done p{color:var(--text-2)}
.dlg-copy{background:var(--copy);color:#2737b8;padding:14px 16px;margin:12px 0 18px;border-radius:2px;font:400 19px/1.45 var(--f-h);text-shadow:0 0 .6px rgba(39,55,184,.6)}
.dlg-copy p{margin:0}

/* до 1180: меню в шторку */
@media (max-width:1180px){
  .menu{position:fixed;left:0;right:0;top:var(--stub-h);flex-direction:column;gap:0;background:var(--sheet);padding:8px var(--gut) 18px;box-shadow:0 18px 30px -18px rgba(0,0,0,.4);transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s}
  .menu.open{opacity:1;transform:none;visibility:visible;transition:opacity .2s,transform .2s}
  .menu a{font-size:18px;padding:12px 4px;border-bottom:1px dashed #d0d2ca}
  .menu a::after{inset:4px auto 4px -8px;width:9em}
  .stub-toggle{display:inline-flex;align-items:center;min-height:44px;margin-left:auto;padding:8px 14px;border:2px solid var(--text);background:none;border-radius:6px;font:700 15px var(--f-d);color:var(--text);cursor:pointer}
  .stub-toggle[aria-expanded="true"]{background:var(--text);color:#fff}
  .stub-cta{order:3}
}

/* до 1024: двор — стопкой */
@media (max-width:1023px){
  .scene{display:flex;flex-direction:column;padding:22px var(--gut) 36px;gap:18px}
  .hero-title{position:static;order:1;font-size:clamp(36px,10vw,86px);transform:none;white-space:normal}
  .hero-title span{display:block;height:.92em;transform:scaleY(1.7);transform-origin:0 0;margin-bottom:calc(.92em * .7)}
  .hero-lead{position:static;order:4;width:auto;flex-direction:column-reverse;align-items:flex-start;gap:18px}
  .hero-act{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px 20px}
  .scene-art{order:2;margin:0 calc(-1 * var(--gut));width:calc(100% + 2 * var(--gut));max-width:none}
  .cases{position:static;order:3;max-width:none;flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 8px;scrollbar-width:none}
  .cases::-webkit-scrollbar{display:none}
  .case{flex:none}
  .slip{position:relative;order:5;left:auto;top:auto;width:auto;max-width:460px}
  .road-grid,.two,.cvet-head,.floor-head,.vy-head,.vy,.final-grid{grid-template-columns:1fr;gap:34px}
  .two-rev .col-text{order:0}
  .shop{grid-template-columns:1fr}
  .cvet-lab{grid-template-columns:1fr;gap:34px}
  .cvet-steps{margin-top:0}
  .qa{grid-template-columns:1fr;gap:26px}
  .act-foot{grid-template-columns:1fr;gap:10px}
  .act-copy,.act-sheet{padding-left:18px;padding-right:18px}
}
@media (max-width:640px){
  :root{--stub-h:58px}
  body{font-size:17px}
  .stub{gap:10px}
  .brand-sub{display:none}
  .brand-name{font-size:19px}
  .brand-sign{width:32px;height:32px}
  .stub-cta{min-height:40px;padding:8px 12px;font-size:14px}
  .cta-long{display:none}
  .cta-short{display:inline}
  .demo-strip{font-size:12.5px;text-align:left}
  .stub-toggle{padding:6px 10px}
  .paper,.road,.floor{padding:72px 0}
  .steps{padding:24px 20px}
  .steps-list li{padding-left:46px}
  .est-face,.est-back{padding:24px 20px}
  .panel{padding:44px 12px 24px}
  .panel-handle{display:none}
  .days button{width:56px}
  .fork{margin-top:22px}
  .lane span{font-size:14px}
  .lane b{font-size:16px;padding:6px 8px}
  .dlg{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .dlg-form{padding:24px 18px 22px}
  .stamp{position:static;width:96px;height:96px;margin:14px 0 0 auto}
  .w-list,.w-foot{max-width:none}
  .slip-list div{grid-template-columns:1fr;gap:0}
  .flip-switch button{padding:12px 12px;font-size:14px}
  .warranty{padding:24px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* правовые страницы и 404 */
.doc{max-width:780px;margin:0 auto;padding:64px var(--gut) 96px}
.doc h1{font:800 clamp(30px,4vw,44px)/1.12 var(--f-d);margin-bottom:18px}
.doc h2{font:800 22px/1.25 var(--f-d);margin:36px 0 10px}
.doc p,.doc li{color:var(--text-2);max-width:42em}
.doc ul,.doc ol{padding-left:1.2em;margin:0 0 1em}
.doc li{margin-bottom:6px}
.doc-note{background:var(--copy);color:#2b2a14!important;padding:14px 16px;border-radius:2px}
.doc-back{display:inline-block;margin-top:28px;font-weight:600}
.nf{min-height:70vh;display:grid;place-content:center;justify-items:start;gap:18px;padding:64px var(--gut);background:var(--asph) var(--asph-tile,none);color:var(--paint)}
.nf-title{font-size:clamp(44px,8vw,110px)}
.nf-title span{display:block;height:.92em;transform:scaleY(1.7);transform-origin:0 0;margin-bottom:calc(.92em * .7)}
.nf p{color:var(--paint);font-size:19px;max-width:30em}
.ask{background:var(--copy);padding:0 .25em;border-radius:2px}
.doc h3{font:800 19px/1.3 var(--f-d);margin:26px 0 8px}
.doc-ver{font-size:14px;color:var(--text-2)}
.js-hand .hand-in{clip-path:inset(0 100% 0 0)}
.js-hand .hand-in.written{animation:write 1.2s var(--ease) forwards}