/* 1. первый экран: ценник-бирка */
.h{min-height:92svh;padding:118px 0 56px;display:flex;align-items:center}
.h>.wrap{width:100%;display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.birka{position:relative;justify-self:center;width:min(340px,80vw);aspect-ratio:3/4.4;background:var(--bone);color:var(--ink);border-radius:22px 22px 30px 30px;padding:70px 30px 30px;transform-origin:50% 0;animation:kach 5s ease-in-out infinite;display:flex;flex-direction:column;justify-content:space-between}
.birka::before{content:"";position:absolute;top:22px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--ink);box-shadow:inset 0 0 0 4px rgba(237,235,230,.3)}
.birka::after{content:"";position:absolute;bottom:100%;left:50%;width:2px;height:120px;background:rgba(237,235,230,.4)}
@keyframes kach{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.birka .vopr{font:900 clamp(110px,14vw,190px)/.8 var(--zag);color:var(--viol)}
.birka .metka{color:rgba(8,8,10,.6)}
.birka b{font:800 26px/1.05 var(--zag);text-transform:uppercase}
@media (prefers-reduced-motion:reduce){.birka{animation:none}}
@media (max-width:860px){.h>.wrap{grid-template-columns:1fr}.birka{width:240px;padding:60px 22px 22px}.birka::after{height:70px}.birka{margin-top:70px}}

/* 2. подборщик */
.podb{margin-top:44px;display:grid;grid-template-columns:320px 1fr;gap:20px;min-height:520px}
.kto{display:flex;flex-direction:column;gap:8px}
.kto button{text-align:left;padding:22px 24px;border-radius:18px;border:1px solid var(--line);background:rgba(18,18,22,.75);font:800 30px/1 var(--zag);min-height:60px;display:flex;flex-direction:column;align-items:flex-start;transition:background .3s,color .3s}
.kto button small{font:400 14px var(--tekst);color:var(--mute);display:block;margin-top:6px}
.kto button[aria-pressed=true]{background:var(--acid);color:var(--ink)}
.kto button[aria-pressed=true] small{color:rgba(8,8,10,.65)}
.vitr{border-radius:var(--r);border:1px solid var(--line);background:rgba(8,8,10,.72);padding:24px;display:grid;grid-template-columns:1fr 1.1fr;gap:24px}
.vitr .spis{display:flex;flex-direction:column;gap:6px}
.vitr .spis button{display:flex;justify-content:space-between;gap:12px;align-items:center;text-align:left;padding:16px 18px;border-radius:14px;min-height:56px;border:1px solid transparent;transition:border-color .25s,background .25s;font-size:17px;font-weight:600}
.vitr .spis button span{font:800 22px var(--zag);color:var(--mute);white-space:nowrap}
.vitr .spis button:hover{background:rgba(237,235,230,.05)}
.vitr .spis button[aria-pressed=true]{border-color:var(--acid);background:rgba(204,255,0,.07)}
.vitr .spis button[aria-pressed=true] span{color:var(--acid)}
.kart{background:var(--bone);color:var(--ink);border-radius:18px;padding:30px;display:flex;flex-direction:column;gap:18px;position:relative;overflow:hidden}
.kart .nm{font:900 clamp(34px,3.4vw,52px)/.9 var(--zag);text-transform:uppercase}
.kart .sum{font:900 clamp(64px,7vw,108px)/.8 var(--zag);letter-spacing:-.01em}
.kart .sum.mel{font-size:clamp(44px,4.6vw,70px)}
.kart .gip{display:inline-block;align-self:flex-start;font:700 12px var(--tekst);letter-spacing:.16em;text-transform:uppercase;padding:6px 10px;border-radius:99px;border:1.5px dashed rgba(8,8,10,.5)}
.kart ul{list-style:none;display:grid;gap:8px;font-size:16px}
.kart li{padding-left:22px;position:relative}.kart li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:2px;background:var(--viol)}
.kart .knopka{align-self:flex-start;margin-top:auto}
.kart.mig{animation:mig .45s var(--ease)}
@keyframes mig{from{transform:translateY(10px);opacity:.3}to{transform:none;opacity:1}}
@media (max-width:960px){.podb{grid-template-columns:1fr}.kto{flex-direction:row;overflow-x:auto;scrollbar-width:none}.kto button{flex:0 0 auto;font-size:24px;padding:16px 18px}.vitr{grid-template-columns:1fr;padding:14px}.kart{padding:22px}}

/* 3. логарифмическая линейка */
.lin{position:relative;margin-top:64px;height:330px}
.c-tabl{width:100%;border-collapse:collapse;margin-top:36px;font-size:16px}
.c-tabl th,.c-tabl td{text-align:left;padding:14px 12px 14px 0;border-top:1px solid var(--line);vertical-align:baseline}
.c-tabl thead th{font-weight:600;font-size:13px;color:var(--mute);border-top:0;letter-spacing:.12em;text-transform:uppercase}
.c-tabl td a{border-bottom:1px solid rgba(204,255,0,.4)}.c-tabl td a:hover{color:var(--acid)}
.c-tabl td small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.c-tabl .s{font:800 24px/1 var(--zag);white-space:nowrap}
.c-tabl .m{font-size:13px;color:var(--mute)}
.c-tabl tr.resh .s{color:var(--acid)}
@media (max-width:760px){.c-tabl{font-size:15px}.c-tabl .s{font-size:20px}.c-tabl th,.c-tabl td{padding-right:8px}}
.h h1 .h1-pod{display:block;margin-top:.14em;font:800 clamp(26px,2.8vw,44px)/1.05 var(--zag);text-transform:none;letter-spacing:0;color:var(--bone);max-width:24ch}
.lin .os{position:absolute;left:0;right:0;top:200px;height:2px;background:rgba(237,235,230,.25)}
.lin .del{position:absolute;top:192px;width:1px;height:18px;background:rgba(237,235,230,.35)}
.lin .del i{position:absolute;top:26px;left:50%;transform:translateX(-50%);font:600 13px var(--tekst);color:var(--mute);font-style:normal;white-space:nowrap}
.lin .t{position:absolute;bottom:130px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;cursor:default}
.lin .t b{font:800 24px/1 var(--zag);white-space:nowrap;padding:8px 12px;border-radius:12px;background:rgba(18,18,22,.9);border:1px solid var(--line);transition:background .25s,color .25s}
.lin .t s{text-decoration:none;font-size:13px;color:var(--mute);white-space:nowrap}
.lin .t::after{content:"";width:2px;height:var(--hh,30px);background:var(--acid)}
.lin .t:hover b{background:var(--acid);color:var(--ink)}
.lin .polosa{position:absolute;top:196px;height:10px;border-radius:5px;background:var(--acid)}
.lin .t.dia::after{display:block}
.lin .t.dia{transform:translateX(-100%);align-items:flex-end}
.lin .t.ok b{color:var(--acid)}
@media (max-width:860px){.lin .polosa,.lin .t.dia::after{display:none}.lin .t.dia{transform:none;align-items:center}.lin{height:auto;display:flex;flex-direction:column;gap:6px}.lin .os,.lin .del{display:none}.lin .t{position:static;transform:none;flex-direction:row;justify-content:space-between;width:100%;padding:12px 0;border-bottom:1px solid var(--line)}.lin .t::after{display:none}.lin .t b{order:2;width:var(--w);text-align:right;background:linear-gradient(90deg,transparent,rgba(204,255,0,.15));border:0;min-width:fit-content}}

/* 4. гарантия — кислотная полоса */
.gar{background:var(--acid);color:var(--ink);padding:0;overflow:hidden;position:relative}
.gar .vn{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;padding:clamp(64px,8vw,120px) var(--pole)}
.gar h2{font:900 clamp(60px,8.5vw,148px)/.82 var(--zag);text-transform:uppercase}
.gar .uslov{border-left:2px solid var(--ink);padding-left:24px;display:grid;gap:12px;font-size:18px}
.gar .uslov a{text-decoration:underline;text-underline-offset:4px;font-weight:700}
.gar .str{white-space:nowrap;font:900 24px var(--zag);letter-spacing:.06em;padding:14px 0;border-top:2px solid var(--ink);display:flex;gap:40px;animation:beg 30s linear infinite;width:max-content}
@keyframes beg{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gar .str{animation:none}}
@media (max-width:860px){.gar .vn{grid-template-columns:1fr}}

/* 5. как платить — три таблички на нити */
.nit{position:relative;margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.nit svg.lin2{position:absolute;inset:0 0 auto 0;width:100%;height:80px;overflow:visible}
.nit .sh{position:relative;padding:90px 28px 0}
.nit .sh:nth-child(3){padding-top:130px}.nit .sh:nth-child(4){padding-top:60px}
.nit .sh .no{width:58px;height:58px;border-radius:50%;background:var(--ink);border:2px solid var(--acid);display:grid;place-items:center;font:900 28px var(--zag);color:var(--acid);margin-bottom:22px}
.nit .sh h3{font:800 34px/1 var(--zag);margin-bottom:12px}
.nit .sh p{color:#d9d7d2;max-width:30ch}
.nit .net{margin-top:56px;display:flex;gap:10px;flex-wrap:wrap}
.nit .net span,.nebud span{padding:10px 16px;border-radius:99px;border:1px solid var(--line);font-size:15px;color:var(--mute)}
.nebud{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}
.nebud span{color:var(--bone)}.nebud span s{text-decoration-color:var(--acid);text-decoration-thickness:2px}
@media (max-width:860px){.nit{grid-template-columns:1fr}.nit svg.lin2{display:none}.nit .sh,.nit .sh:nth-child(3),.nit .sh:nth-child(4){padding:24px 0 24px 24px;border-left:2px solid rgba(204,255,0,.4)}}

/* 6. коридор рынка */
.kor{margin-top:44px;display:grid;gap:4px}
.kor .r{display:grid;grid-template-columns:220px 1fr 130px;gap:24px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.kor .r h3{font:800 26px/1 var(--zag)}
.kor .shk{position:relative;height:40px}
.kor .shk .ko{position:absolute;top:12px;height:16px;border-radius:8px;background:rgba(237,235,230,.14);border:1px solid rgba(237,235,230,.25)}
.kor .shk .my{position:absolute;top:0;width:4px;height:40px;background:var(--acid);border-radius:2px;transform:translateX(-2px) scaleY(0);transition:transform .6s var(--ease)}
.kor.vidno .my{transform:translateX(-2px) scaleY(1)}
.kor .shk .my::after{content:attr(data-c);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);font:800 18px var(--zag);color:var(--acid);white-space:nowrap}
.kor .r .k{font-size:14px;color:var(--mute);text-align:right}
.kor .r{padding-top:40px}
@media (max-width:860px){.kor .r{grid-template-columns:1fr;gap:28px;padding-top:24px}.kor .r .k{text-align:left}}

/* 7. вопросы — карточки-лотки */
.vopr{margin-top:44px;column-count:2;column-gap:20px}
.vopr details{break-inside:avoid;margin-bottom:20px;border-radius:20px;background:rgba(18,18,22,.8);border:1px solid var(--line);padding:0 26px}
.vopr details[open]{border-color:rgba(204,255,0,.5)}
.vopr summary{list-style:none;cursor:pointer;padding:22px 0;min-height:56px;font:700 24px/1.1 var(--zag);display:flex;justify-content:space-between;gap:12px}
.vopr summary::-webkit-details-marker{display:none}
.vopr summary::after{content:"+";color:var(--acid);font:400 28px var(--tekst);transition:transform .3s}
.vopr details[open] summary::after{transform:rotate(45deg)}
.vopr details p{padding-bottom:22px;color:#d9d7d2}
.vopr .vazh{background:var(--viol);border-color:var(--viol)}
.vopr .vazh summary::after{color:var(--bone)}
@media (max-width:860px){.vopr{column-count:1}}

/* 8. призыв */
.priz{text-align:center;padding:clamp(80px,10vw,150px) 0}
.priz h2{font:900 clamp(64px,10vw,170px)/.8 var(--zag);text-transform:uppercase}
.priz p{margin:28px auto 0;max-width:48ch}