/* 1. первый экран: снимок рук со сканом + цена и гарантия */
.p-hero{padding:130px 0 80px;min-height:100svh;display:flex;align-items:center}
.p-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;width:100%}
.p-hero h1{font:900 clamp(64px,7.4vw,124px)/.82 var(--zag);text-transform:uppercase;margin:20px 0 26px}
.p-hero h1 .kisl{display:block}
.p-hero .cena{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:30px}
.p-hero .cena b{font:900 clamp(48px,4.6vw,72px)/.9 var(--zag)}
.p-hero .cena span{color:var(--mute);font-size:15px}
.p-hero .ryad{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.snimok{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;border:1px solid var(--line)}
.snimok img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.snimok::after{content:"";position:absolute;left:0;right:0;height:2px;top:0;background:var(--acid);box-shadow:0 0 22px 4px rgba(204,255,0,.6);animation:skan 4.2s var(--ease) infinite}
@keyframes skan{0%{top:6%;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:94%;opacity:0}}
.snimok .plashka{position:absolute;left:16px;right:16px;bottom:16px;padding:18px 20px;border-radius:16px;background:rgba(8,8,10,.86);border:1px solid var(--line);display:flex;gap:14px;align-items:center}
.snimok .plashka svg{flex:none}
.snimok .plashka b{display:block;font:800 26px/1 var(--zag)}
@media (max-width:860px){.p-hero{min-height:auto;padding:96px 0 60px}.p-hero .wrap{grid-template-columns:1fr;gap:30px}.snimok{aspect-ratio:4/3.4;order:-1}.p-hero h1{font-size:13.4vw}}

/* 2. коротко — слова загораются прокруткой */
.korotko #korotko{font:700 clamp(34px,4.4vw,68px)/1.04 var(--zag);max-width:24ch;margin-top:26px}
.korotko .w{opacity:.16;transition:opacity .3s}
.korotko .w.a{color:var(--acid)}

/* 3. шаги — вертикальная дорожка скана */
.shagi{position:relative;margin-top:56px;padding-left:120px}
.shagi .dor{position:absolute;left:38px;top:0;bottom:0;width:2px;background:var(--line)}
.shagi .dor i{position:absolute;inset:0;background:var(--acid);box-shadow:0 0 14px rgba(204,255,0,.6);transform:scaleY(var(--p,0));transform-origin:top}
.shag{position:relative;padding:28px 0 56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;opacity:.35;transition:opacity .5s}
.shag.on{opacity:1}
.shag::before{content:"";position:absolute;left:-90px;top:36px;width:22px;height:22px;border-radius:50%;background:var(--ink);border:2px solid var(--mute);transition:.4s}
.shag.on::before{background:var(--acid);border-color:var(--acid);box-shadow:0 0 0 8px rgba(204,255,0,.15)}
.shag h3{font:800 clamp(34px,3.6vw,56px)/.92 var(--zag)}
.shag .kto{display:inline-block;margin-bottom:12px;font:600 12px var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.shag.vy .kto{color:var(--acid)}
.shag p{color:#d3d1cc;max-width:46ch}
@media (max-width:760px){.shagi{padding-left:44px}.shagi .dor{left:10px}.shag::before{left:-44px;width:18px;height:18px}.shag{grid-template-columns:1fr;gap:12px;padding-bottom:36px}}

/* 4. вы и мы — две половины, наведение раскрывает */
.vymy{display:flex;margin-top:48px;min-height:520px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.vymy>div{flex:1;padding:40px;display:flex;flex-direction:column;gap:20px;transition:flex-grow .7s var(--ease);position:relative;cursor:default}
.vymy>div:hover{flex-grow:1.7}
.vymy .vy{background:var(--acid);color:var(--ink)}
.vymy .my{background:var(--plita)}
.vymy h3{font:900 clamp(72px,8vw,140px)/.8 var(--zag);text-transform:uppercase}
.vymy ul{list-style:none;display:grid;gap:12px;margin-top:auto}
.vymy li{display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:17px;max-width:44ch}
.vymy .vy li::before{content:"";width:16px;height:16px;border:2px solid var(--ink);border-radius:50%;margin-top:4px}
.vymy .my li::before{content:"";width:16px;height:2px;background:var(--acid);margin-top:12px}
.vymy .shov{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ink)}
@media (max-width:760px){.vymy{flex-direction:column;min-height:0}.vymy>div{padding:26px}.vymy>div:hover{flex-grow:1}}

/* 5. чек-лист готовности с кольцом */
.gotov{display:grid;grid-template-columns:1fr 340px 1fr;gap:32px;margin-top:48px;align-items:start}
.gotov fieldset{border:0;display:grid;gap:8px}
.gotov legend,.nelzya h3{font:800 28px/1 var(--zag);margin-bottom:14px}
.punkt{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;padding:14px 16px;border-radius:14px;background:var(--plita);border:1px solid var(--line);cursor:pointer;min-height:52px;transition:border-color .3s}
.punkt input{position:absolute;opacity:0;pointer-events:none}
.punkt .kv{width:26px;height:26px;border-radius:8px;border:2px solid rgba(237,235,230,.4);display:grid;place-items:center;transition:.3s}
.punkt .kv svg{opacity:0;transition:.3s}
.punkt:has(input:checked){border-color:rgba(204,255,0,.6)}
.punkt:has(input:checked) .kv{background:var(--acid);border-color:var(--acid)}
.punkt:has(input:checked) .kv svg{opacity:1}
.punkt:has(input:focus-visible){outline:2px solid var(--acid);outline-offset:2px}
.kolco{position:sticky;top:110px;text-align:center}
.kolco svg{width:100%;height:auto}
.kolco .fon{stroke:rgba(237,235,230,.1)}
.kolco .dug{stroke:var(--acid);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.kolco .n{font:900 96px var(--zag);fill:var(--bone)}
.kolco .p{font:600 14px var(--tekst);fill:var(--mute)}
.kolco .itog{margin-top:12px;font-weight:600;min-height:3em}
.nelzya ul{list-style:none;display:grid;gap:4px}
.nelzya li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(204,255,0,.7);text-decoration-thickness:2px}
.nelzya li span{display:block;text-decoration:none;color:#cfcdc8;font-size:14px}
@media (max-width:960px){.gotov{grid-template-columns:1fr}.kolco{position:static;max-width:260px;margin:0 auto;order:-1}}

/* 6. разбор отказа — симптом на холсте */
.otkaz{display:grid;grid-template-columns:300px 1fr;gap:32px;margin-top:48px}
.prichiny{display:grid;gap:6px;align-content:start;list-style:none}
.prichiny button{width:100%}
.prichiny button{text-align:left;padding:16px 18px;border-radius:14px;border:1px solid var(--line);font-weight:600;min-height:52px;transition:.25s;background:rgba(8,8,10,.6)}
.prichiny button[aria-pressed=true]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.simptom{display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.simptom .h{position:relative;background:#0c0c10;min-height:380px}
.simptom canvas{position:absolute;inset:0;width:100%;height:100%}
.simptom .t{padding:32px;background:var(--plita);display:flex;flex-direction:column;gap:16px}
.simptom .t h3{font:800 36px/1 var(--zag)}
.simptom .t ol{padding-left:20px;display:grid;gap:8px;color:#d3d1cc}
@media (max-width:960px){.otkaz{grid-template-columns:1fr}.prichiny{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;margin:0 calc(var(--pole)*-1);padding:0 var(--pole) 6px;scrollbar-width:none}.simptom{grid-template-columns:1fr}.simptom .h{min-height:260px}}

/* 7. гарантия — полоса кислоты, строки навстречу */
.garant{background:var(--acid);color:var(--ink);padding:100px 0 0;overflow:hidden}
.garant .bol{font:900 clamp(80px,11vw,190px)/.8 var(--zag);text-transform:uppercase;white-space:nowrap}
.garant .bol.b2{color:transparent;-webkit-text-stroke:2px var(--ink);margin-top:6px}
.garant .pod{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:56px 0 80px;align-items:end}
.garant .pod p{font-size:20px;max-width:44ch}
.vilka{position:relative;padding-top:52px}
.vilka .tr{height:10px;border-radius:5px;background:rgba(8,8,10,.15);position:relative}
.vilka .tr i{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:5px;background:var(--ink)}
.vilka .m{position:absolute;top:0;font:900 40px/1 var(--zag)}
.vilka .m.l{left:0}.vilka .m.r{right:0}
.vilka small{display:block;margin-top:12px;font-size:14px;font-weight:600}
@media (max-width:760px){.garant{padding-top:64px}.garant .bol{font-size:20vw;white-space:normal}.garant .bol.b2{-webkit-text-stroke-width:1.5px}.garant .pod{grid-template-columns:1fr;padding:36px 0 56px}}

/* 8. условия — чек */
.chek-obyortka{display:grid;grid-template-columns:1fr 480px;gap:56px;align-items:start;margin-top:40px}
.chek{background:var(--bone);color:var(--ink);padding:34px 30px 40px;position:relative;font:500 16px/1.45 var(--tekst);
 -webkit-mask:radial-gradient(circle 8px at 50% 0,transparent 98%,#000) 0 0/22px 51% repeat-x,radial-gradient(circle 8px at 50% 100%,transparent 98%,#000) 0 100%/22px 51% repeat-x;
 mask:radial-gradient(circle 8px at 50% 0,transparent 98%,#000) 0 0/22px 51% repeat-x,radial-gradient(circle 8px at 50% 100%,transparent 98%,#000) 0 100%/22px 51% repeat-x}
.chek h3{font:900 34px/1 var(--zag);text-transform:uppercase;text-align:center;letter-spacing:.02em}
.chek .sh{text-align:center;font-size:13px;color:#55555c;margin:6px 0 18px}
.chek dl{display:grid;gap:0}
.chek .s{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:10px 0;border-top:1.5px dashed rgba(8,8,10,.25)}
.chek dt{font-weight:700}
.chek dd{text-align:right}
.chek .glav{background:var(--ink);color:var(--acid);margin:14px -10px;padding:14px 16px;border-radius:10px;font-weight:700;text-align:center}
.chek .shtrih{height:48px;margin-top:18px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 10px,var(--ink) 10px 13px,transparent 13px 15px)}
.chek-obyortka .v-pech{clip-path:inset(0 0 100% 0);transition:clip-path 1.8s steps(18,end)}
.chek-obyortka.vidno .v-pech{clip-path:inset(0 0 0 0)}
@media (max-width:960px){.chek-obyortka{grid-template-columns:1fr;gap:30px}.chek{padding:30px 20px 36px}.chek .s{grid-template-columns:1fr;gap:2px}.chek dd{text-align:left}}

/* 9. вопросы */
.voprosy{margin-top:40px;border-top:1px solid var(--line)}
.voprosy details{border-bottom:1px solid var(--line)}
.voprosy summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 44px;gap:20px;align-items:center;padding:24px 0;font:700 clamp(24px,2.4vw,34px)/1.05 var(--zag);min-height:44px}
.voprosy summary::-webkit-details-marker{display:none}
.voprosy summary i{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(237,235,230,.35);position:relative;transition:.4s var(--ease)}
.voprosy summary i::before,.voprosy summary i::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;background:var(--bone);translate:-50% -50%}
.voprosy summary i::after{rotate:90deg;transition:rotate .4s var(--ease)}
.voprosy details[open] summary i{background:var(--acid);border-color:var(--acid)}
.voprosy details[open] summary i::before,.voprosy details[open] summary i::after{background:var(--ink)}
.voprosy details[open] summary i::after{rotate:0deg}
.voprosy .otv{padding:0 64px 28px 0;color:#d3d1cc;max-width:70ch;position:relative}
.voprosy details[open] .otv{animation:otkr .6s var(--ease)}
@keyframes otkr{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}

/* 10. эксперт и заявка */
.ekspert{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:center}
.siluet{aspect-ratio:4/5;border-radius:var(--r);border:1px dashed rgba(237,235,230,.3);position:relative;overflow:hidden;background:rgba(8,8,10,.6)}
.siluet svg{position:absolute;inset:0;width:100%;height:100%}
.siluet span{position:absolute;left:16px;bottom:14px;right:16px;font-size:13px;color:var(--mute)}
.ekspert h2{font:900 clamp(56px,6vw,100px)/.84 var(--zag);text-transform:uppercase;margin:16px 0 20px}
@media (max-width:860px){.ekspert{grid-template-columns:1fr;gap:28px}.siluet{max-width:300px}}
/* заголовок: разрез без дубля текста в DOM — половинки рисуют псевдоэлементы */
.rz{position:relative;display:inline-block;-webkit-text-fill-color:transparent}
.rz::before,.rz::after{content:attr(data-t);position:absolute;inset:0;-webkit-text-fill-color:currentColor}
.rz::before{clip-path:inset(0 0 50% 0)}
.rz::after{clip-path:inset(50% 0 0 0);transform:translateX(.06em);transition:transform 1s var(--ease)}
.rz.vidno::after,.rz:hover::after{transform:none}
.h1-pod{display:block;font:700 clamp(24px,2.3vw,34px)/1.12 var(--zag);text-transform:none;letter-spacing:0;color:var(--bone);margin-top:18px;max-width:30ch}
@media (prefers-reduced-motion:reduce){.rz::after{transform:none}}