/* Верифай — общий набор бренда (DESIGN.md, направление «Сильный»; макеты утверждены №4196).
   Только эти токены. Новые цвета и шрифты — сначала в DESIGN.md. Шрифты — assets/shrifty, с нашего сервера. */

:root{
 --ink:#08080A;--ink2:#121216;--bone:#EDEBE6;--mute:#8A8A93;--acid:#CCFF00;--viol:#6C4BFF;
 --line:rgba(237,235,230,.12);--plita:rgba(18,18,22,.86);
 --zag:"Sofia Sans Extra Condensed",sans-serif;--tekst:"Sofia Sans",sans-serif;
 --pole:40px;--max:1360px;--r:22px;
 --ease:cubic-bezier(.2,.8,.1,1);
}
@media (max-width:760px){:root{--pole:16px;--r:18px}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:radial-gradient(70% 60% at 70% 30%,rgba(108,75,255,.3),transparent 70%) fixed,radial-gradient(50% 40% at 20% 80%,rgba(108,75,255,.16),transparent 70%) fixed,var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%}
body{background:transparent;color:var(--bone);font:400 18px/1.5 var(--tekst);overflow-x:clip;min-height:100vh}
a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:var(--acid);color:var(--ink)}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pole)}
.sekciya{position:relative;padding:140px 0}
@media (max-width:760px){.sekciya{padding:88px 0}}

/* ---------- живой фон: один на весь сайт ---------- */
#v-fon{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;display:block;opacity:0;animation:v-fon 1.2s .1s forwards}
@keyframes v-fon{to{opacity:1}}
.v-zern{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
 background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(8,8,10,.7))}

/* ---------- типографика ---------- */
.d1{font:900 clamp(76px,11.6vw,188px)/.8 var(--zag);text-transform:uppercase;letter-spacing:-.005em}
.d2{font:800 clamp(56px,7.4vw,120px)/.86 var(--zag);text-transform:uppercase;letter-spacing:-.005em}
.d3{font:800 clamp(36px,4.2vw,64px)/.92 var(--zag);letter-spacing:-.005em}
.d4{font:700 clamp(26px,2.4vw,34px)/1 var(--zag)}
.chislo{font:900 clamp(72px,9vw,150px)/.8 var(--zag);letter-spacing:-.01em}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:#d9d7d2;max-width:40ch}
.melko{font-size:14px;color:var(--mute)}
.metka{display:flex;gap:14px;align-items:center;font:600 13px var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.metka::before{content:"";width:28px;height:2px;background:var(--acid)}
.kisl{color:var(--acid)}
@media (max-width:760px){.d1{font-size:19vw;line-height:.82}.d2{font-size:15vw}.chislo{font-size:22vw}}

/* ---------- кнопки ---------- */
.knopka{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:16px 28px;border-radius:99px;font-weight:700;font-size:17px;transition:transform .3s var(--ease),background .3s}
.knopka .str{transition:transform .3s var(--ease)}
.knopka:hover .str{transform:translateX(5px)}
.knopka.kis{background:var(--acid);color:var(--ink)}
.knopka.kost{background:var(--bone);color:var(--ink)}
.knopka.kontur{border:1.5px solid rgba(237,235,230,.4)}
.knopka.kontur:hover{border-color:var(--bone)}

/* ---------- плиты: тёмное стекло без размытия (фон анимирован — blur дорог) ---------- */
.plita{background:var(--plita);border:1px solid var(--line);border-radius:var(--r)}

/* ---------- шапка ---------- */
.v-shapka{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.v-shapka.tvyord{background:rgba(8,8,10,.9);border-bottom-color:var(--line)}
.v-shapka .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:76px}
.v-shapka .znak{width:150px;flex:none}
.v-shapka nav{display:flex;gap:28px;font-weight:600;font-size:16px}
.v-shapka nav a{position:relative;padding:12px 0}
.v-shapka nav a::after{content:"";position:absolute;left:0;right:0;bottom:6px;height:2px;background:var(--acid);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.v-shapka nav a:hover::after,.v-shapka nav a[aria-current]::after{transform:scaleX(1)}
.v-shapka .knopka{min-height:46px;padding:10px 20px;font-size:15px}
.v-burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(237,235,230,.4);place-items:center}
.v-burger i{display:block;width:18px;height:2px;background:var(--bone);box-shadow:0 6px 0 var(--bone),0 -6px 0 var(--bone)}
.v-menyu{position:fixed;inset:0;z-index:70;background:var(--ink);display:none;flex-direction:column;padding:96px var(--pole) 40px;gap:6px}
.v-menyu.otkr{display:flex}
.v-menyu a{font:800 13vw/1.05 var(--zag);text-transform:uppercase}
.v-menyu .zakr{position:absolute;right:var(--pole);top:16px;width:46px;height:46px;font-size:28px}
@media (max-width:960px){.v-shapka nav{display:none}.v-burger{display:grid}.v-shapka .wrap{height:64px}.v-shapka .znak{width:124px}.v-shapka .knopka{display:none}}

/* ---------- подвал ---------- */
.v-podval{position:relative;border-top:1px solid var(--line);padding:80px 0 28px;overflow:hidden;background:rgba(8,8,10,.92)}
.v-podval .kolonki{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.v-podval h4{font:600 13px var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-bottom:14px}
.v-podval ul{list-style:none;display:grid;gap:6px}
.v-podval ul a{display:inline-block;padding:4px 0}
.v-podval ul a:hover{color:var(--acid)}
.v-podval .ogromnyy{margin:72px calc(var(--pole)*-1) 0;padding:0 var(--pole)}
.v-podval .ogromnyy svg{width:100%;height:auto}
.v-podval .nizz{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:28px;font-size:13px;color:var(--mute)}
@media (max-width:760px){.v-podval .kolonki{grid-template-columns:1fr 1fr}.v-podval .kolonki>div:first-child{grid-column:1/-1}}

/* ---------- мотивы бренда ---------- */
/* 1. скан: кислотная линия проходит сверху вниз и проявляет блок */
[data-skan]{position:relative}
[data-skan]>.v-luch{position:absolute;left:-2%;right:-2%;top:0;height:2px;background:var(--acid);box-shadow:0 0 18px 2px rgba(204,255,0,.55);opacity:0;pointer-events:none;z-index:3}
.v-js [data-skan]:not(.vidno)>*:not(.v-luch){clip-path:inset(0 0 100% 0)}
.v-js [data-skan].vidno>*:not(.v-luch){clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease)}
[data-skan].vidno>.v-luch{animation:v-luch 1.1s var(--ease) forwards}
@keyframes v-luch{0%{top:0;opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
/* 2. разрез: заголовок разрезан как знак, низ сдвинут и съезжает на место */
.razrez{position:relative;display:inline-block}
.razrez .v-verh{display:block;clip-path:inset(0 0 50% 0)}
.razrez .v-niz{position:absolute;inset:0;clip-path:inset(50% 0 0 0);transform:translateX(.06em);transition:transform 1s var(--ease)}
.razrez.vidno .v-niz,.razrez:hover .v-niz{transform:none}
/* 3. галочка: рисуется штрихом, когда блок виден */
.galka path{stroke-dasharray:var(--dl,60);stroke-dashoffset:var(--dl,60);transition:stroke-dashoffset .8s var(--ease) .2s}
.vidno .galka path,.galka.vidno path{stroke-dashoffset:0}
/* 4. появление снизу */
.v-js [data-vverh]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.v-js [data-vverh].vidno{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .v-js [data-skan]>*{clip-path:none!important}.v-js [data-vverh]{opacity:1;transform:none}
 .galka path{stroke-dashoffset:0}.razrez .v-niz{transform:none}#v-fon{opacity:1}
}

/* 2а. разрез без копии текста: обе половины — псевдоэлементы с data-t,
   в 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}
@media (prefers-reduced-motion:reduce){.rz::after{transform:none}}

/* ---------- обычные страницы, документы и статьи (page.php, single.php) ---------- */
.v-prosto{padding:150px 0 110px}
@media (max-width:760px){.v-prosto{padding:110px 0 80px}}
.v-prosto h1{font:900 clamp(48px,6vw,96px)/.9 var(--zag);text-transform:uppercase;max-width:18ch;margin:18px 0 30px}
.v-tekst{max-width:72ch;background:var(--plita);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,56px)}
.v-tekst>*+*{margin-top:1em}
.v-tekst h2{font:800 clamp(30px,3vw,44px)/1 var(--zag);margin-top:1.6em}
.v-tekst h3{font:700 clamp(24px,2vw,30px)/1.05 var(--zag);margin-top:1.4em}
.v-tekst a{color:var(--acid);text-decoration:underline;text-underline-offset:3px}
.v-tekst ul,.v-tekst ol{padding-left:1.3em}
.v-tekst li+li{margin-top:.4em}
.v-tekst details{border-top:1px solid var(--line);padding:14px 0}
.v-tekst summary{cursor:pointer;font-weight:700}
.v-tekst blockquote{border-left:3px solid var(--acid);padding-left:18px;color:#d9d7d2}
.v-tekst table{width:100%;border-collapse:collapse;font-size:16px}
.v-tekst td,.v-tekst th{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.v-daty{color:var(--mute);font-size:15px}
.v-kroshki ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--mute)}
.v-kroshki li+li::before{content:"/";margin-right:8px;opacity:.5}
.v-kroshki a:hover{color:var(--bone)}
.v-spisok{display:grid;gap:14px;max-width:72ch}
.v-spisok a{display:block;padding:22px 26px}
.v-spisok h2{font:800 30px/1 var(--zag)}
.v-spisok p{color:#d9d7d2;margin-top:8px;font-size:16px}
.v-podval .dok{display:flex;flex-wrap:wrap;gap:6px 18px}
.v-podval .dok a:hover{color:var(--bone)}
.sayt-pole-lovushka{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}