/* Вера · вариант 1 «Нуар / Галерея» — чёрный, белый, один кислотный лайм. Только гротески: Unbounded + Manrope. */
:root{
  --bg:#0A0A0A; --bg2:#111111; --bg3:#161616;
  --fg:#F5F5F2; --mut:rgba(245,245,242,.62); --dim:rgba(245,245,242,.38);
  --line:rgba(245,245,242,.14); --line2:rgba(245,245,242,.28);
  --lime:#C8FF2E; --ink:#0A0A0A;
  --g:clamp(16px,3.4vw,48px);
  --disp:"Unbounded","Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --text:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--text);overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
em{font-style:normal;color:var(--lime)}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.wrap{padding-inline:var(--g);max-width:1600px;margin-inline:auto}

/* ---------- кнопки ---------- */
.btn{--h:56px;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:var(--h);padding:0 26px;border-radius:999px;
  font:700 13px/1 var(--disp);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  border:1.5px solid transparent;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;cursor:pointer}
.btn .arr{width:18px;height:18px;transition:transform .25s ease}
.btn:hover .arr{transform:translateX(4px)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-lime:hover{background:#fff}
.btn-ghost{border-color:var(--line2);color:var(--fg)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-sm{--h:42px;padding:0 18px;font-size:11px}
.btn-lg{--h:66px;padding:0 34px;font-size:14px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- общие заголовки ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font:600 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.eyebrow .dot{width:8px;height:8px;background:var(--lime);border-radius:50%;flex:none}
.h2{font:900 clamp(28px,6vw,96px)/.94 var(--disp);letter-spacing:-.045em;text-transform:uppercase;text-wrap:balance;padding-top:.08em}
.sec{padding-block:clamp(64px,8.5vw,128px);border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:1fr;gap:22px;margin-bottom:clamp(40px,6vw,88px)}
.sec-note{color:var(--mut);max-width:34em;font-size:clamp(16px,1.3vw,19px)}
@media (min-width:1200px){
  .sec-head{grid-template-columns:minmax(0,1fr) minmax(280px,380px);align-items:end;column-gap:64px}
  .sec-head .eyebrow{grid-column:1/-1}
  .sec-head .sec-note{padding-bottom:10px}
}

/* ---------- навигация ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;height:72px;padding-inline:var(--g);
  background:rgba(10,10,10,.78);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.logo-mark{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font:900 18px/1 var(--disp);padding-top:1px}
.logo-word{font:800 19px/1 var(--disp);letter-spacing:-.03em;text-transform:uppercase}
.nav-links{display:flex;gap:30px}
.nav-links a{font:500 14px/1 var(--text);color:var(--mut);text-decoration:none;position:relative;padding:8px 0}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--lime);transition:right .25s ease}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{right:0}
@media (max-width:860px){.nav-links{display:none}.nav{height:62px}}

/* ---------- слайдер «было / стало» — стиль варианта ---------- */
.ba{background:var(--bg3)}
.ba .ba-line{width:2px;background:var(--lime);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ba .ba-knob{width:58px;height:58px;margin:-29px 0 0 -29px;background:var(--lime);box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .2s ease}
.ba .ba-knob::before{content:"";background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6' fill='none' stroke='%230A0A0A' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E") center/24px no-repeat}
.ba:hover .ba-knob{transform:scale(1.08)}
.ba .ba-tag{top:18px;padding:9px 14px 8px;font:800 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;border-radius:999px}
.ba .ba-l{left:18px;background:rgba(10,10,10,.72);color:var(--fg);backdrop-filter:blur(6px)}
.ba .ba-r{right:18px;background:var(--lime);color:var(--ink)}

/* ---------- HERO ---------- */
.hero{padding-top:clamp(28px,4vw,56px);overflow-x:clip}
.hero-top{position:relative}
.mega{font:900 clamp(26px,6.9vw,118px)/1.02 var(--disp);letter-spacing:-.055em;text-transform:uppercase;margin-top:clamp(18px,2.4vw,34px)}
.mega span{display:block}
.mega .l2{padding-left:clamp(0px,9vw,150px)}
.hero-stage{display:grid;gap:28px;margin-top:clamp(28px,3.6vw,56px)}
.hero-copy{padding-inline:var(--g);display:flex;flex-direction:column;gap:28px}
.lead{font:500 clamp(18px,1.55vw,23px)/1.45 var(--text);max-width:26em;color:var(--fg)}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);max-width:460px}
.hero-stats div{padding:18px 16px 0 0}
.hero-stats div+div{padding-left:18px;border-left:1px solid var(--line)}
.hero-stats dt{font:900 clamp(30px,3vw,44px)/1 var(--disp);letter-spacing:-.04em;color:var(--lime)}
.hero-stats dd{margin-top:8px;font-size:14px;color:var(--mut)}
.voice{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:10px;align-items:center;max-width:460px;
  padding:16px 18px;border:1px solid var(--line2);border-radius:22px;background:var(--bg2)}
.voice-mic{grid-row:1/3;width:48px;height:48px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.voice-mic svg{width:22px;height:22px}
.voice-wave{display:flex;align-items:center;gap:4px;height:18px}
.voice-wave i{display:block;width:3px;height:100%;border-radius:2px;background:var(--lime);transform:scaleY(.3);transform-origin:center;animation:wave 1.1s ease-in-out infinite}
.voice-wave i:nth-child(3n){animation-delay:-.3s}.voice-wave i:nth-child(3n+1){animation-delay:-.7s}.voice-wave i:nth-child(4n){animation-delay:-.5s;animation-duration:.9s}
@keyframes wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.voice-q{font-size:14px;line-height:1.4;color:var(--fg)}
@media (prefers-reduced-motion:reduce){.voice-wave i:nth-child(odd){transform:scaleY(.8)}.voice-wave i:nth-child(even){transform:scaleY(.45)}}
.hero-shot{position:relative}
.hero-shot figcaption{display:flex;gap:14px;align-items:baseline;padding:14px var(--g) 0 var(--g);font-size:13px;color:var(--dim)}
.hero-shot figcaption span{font:800 13px/1 var(--disp);color:var(--lime);letter-spacing:.04em}
@media (min-width:1024px){
  .hero-stage{grid-template-columns:minmax(300px,1fr) min(58vw,1000px);gap:clamp(32px,3.4vw,56px);align-items:stretch}
  .hero-copy{padding-right:0;padding-top:6px;padding-bottom:40px;gap:36px}
  .hero-stats{margin-top:auto}
  .hero-shot figcaption{padding-left:0}
}

/* marquee */
.marquee{margin-top:clamp(48px,6vw,90px);background:var(--lime);color:var(--ink);overflow:hidden;transform:rotate(-1.6deg);margin-inline:-2vw;
  border-block:2px solid var(--ink);box-shadow:0 0 0 1px var(--lime)}
.marquee-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.marquee-run{display:flex;align-items:center;flex:none}
.marquee-run span{padding:22px 26px 20px;font:900 clamp(18px,2.1vw,30px)/1 var(--disp);letter-spacing:-.02em;text-transform:uppercase;white-space:nowrap}
.marquee-run b{width:12px;height:12px;background:var(--ink);transform:rotate(45deg);flex:none}
@keyframes mq{to{transform:translateX(-50%)}}
.hero + .sec{border-top:0;padding-top:clamp(72px,8vw,120px)}

/* ---------- АГЕНТЫ ---------- */
.agents{display:grid;gap:0;counter-reset:a}
.agent{position:relative;padding:34px 0 40px;border-top:1px solid var(--line2)}
.agent-n{display:block;font:200 clamp(80px,9.5vw,156px)/.8 var(--disp);letter-spacing:-.06em;color:var(--fg);margin-bottom:30px;transition:color .25s ease,font-weight .35s ease}
.agent:hover .agent-n{color:var(--lime);font-weight:900}
.agent h3{font:800 clamp(22px,2vw,30px)/1.1 var(--disp);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:14px}
.agent p{color:var(--mut);max-width:28em}
.agent-arr{display:none}
@media (min-width:1024px){
  .agents{grid-template-columns:repeat(3,1fr)}
  .agent{padding-right:56px}
  .agent + .agent{padding-left:36px;border-left:1px solid var(--line)}
  .agent-arr{display:grid;place-items:center;position:absolute;right:-22px;top:34px;z-index:2;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--ink)}
  .agent-arr .arr{width:20px;height:20px}
}
.steps-title{margin:clamp(64px,8vw,120px) 0 28px;font:800 clamp(22px,2.4vw,36px)/1.1 var(--disp);letter-spacing:-.03em;text-transform:uppercase}
.steps{display:grid;gap:14px}
.steps li{position:relative;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:28px 26px 30px;transition:border-color .2s ease,transform .2s ease}
.steps li:hover{border-color:var(--lime);transform:translateY(-3px)}
.step-n{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--lime);color:var(--ink);font:900 17px/1 var(--disp);margin-bottom:26px}
.steps h4{font:800 18px/1.2 var(--disp);letter-spacing:-.02em;margin-bottom:10px}
.steps p{font-size:15px;color:var(--mut)}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.steps{grid-template-columns:repeat(4,1fr)}}

/* ---------- КЕЙС / ПРОСМОТРЩИК ---------- */
.case{background:var(--bg2)}
.case-head{display:grid;gap:22px;margin-bottom:clamp(36px,5vw,72px)}
.case-title{font-size:clamp(40px,9vw,150px);line-height:.86;letter-spacing:-.055em}
.case-sub{font-size:clamp(17px,1.5vw,21px);color:var(--mut);max-width:40em}
.case-sub b{color:var(--fg);font-weight:700}
@media (min-width:1200px){
  .case-head{grid-template-columns:minmax(0,1fr) minmax(300px,400px);align-items:end;column-gap:64px}
  .case-head .eyebrow{grid-column:1/-1}
  .case-sub{padding-bottom:14px}
}
.viewer{display:grid;gap:22px}
.viewer>*{min-width:0}
.viewer-main{min-width:0}
.viewer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.toggle{display:inline-flex;padding:5px;border:1px solid var(--line2);border-radius:999px;background:var(--bg)}
.toggle button{appearance:none;border:0;background:none;color:var(--mut);height:44px;padding:0 22px;border-radius:999px;cursor:pointer;
  font:800 12px/1 var(--disp);letter-spacing:.12em;text-transform:uppercase;transition:background .2s ease,color .2s ease}
.toggle button:hover{color:var(--fg)}
.toggle button.on{background:var(--lime);color:var(--ink)}
.viewer-count{font:700 13px/1 var(--disp);color:var(--dim);letter-spacing:.08em}
.viewer-count b{color:var(--fg)}
.ba-case{border-radius:4px}
.viewer.swap .ba-case img{animation:fadein .45s ease}
@keyframes fadein{from{opacity:.35}to{opacity:1}}

.viewer-side{display:flex;flex-direction:column;border-top:1px solid var(--line2);padding-top:6px}
.zone-num{font:900 clamp(110px,11vw,190px)/.8 var(--disp);letter-spacing:-.07em;color:var(--lime);margin:0 0 22px -.04em}
.side-lbl{font:700 11px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:12px}
.zone-name{font:800 clamp(22px,1.9vw,28px)/1.12 var(--disp);letter-spacing:-.03em;text-transform:uppercase;margin-bottom:28px}
.changes{margin-bottom:30px;border-top:1px solid var(--line)}
.changes li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.4}
.changes li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:2px;background:var(--lime)}
.concept{margin-top:auto;padding:22px;border-radius:18px;background:var(--bg);border:1px solid var(--line)}
.cname{font:800 18px/1.2 var(--disp);letter-spacing:-.02em;margin-bottom:8px}
.clead{font-size:14px;color:var(--mut);margin-bottom:16px}
.palette{display:flex;flex-wrap:wrap;gap:8px 14px}
.palette span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mut)}
.palette i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);flex:none}

.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,62vw);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--g) * -1);padding:4px var(--g) 10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.thumb{appearance:none;border:0;background:none;color:inherit;padding:0;text-align:left;cursor:pointer;scroll-snap-align:start;position:relative;font:inherit}
.thumb-img{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:4px;outline:2px solid transparent;outline-offset:3px;transition:outline-color .2s ease}
.thumb-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) brightness(.7);transition:filter .3s ease,transform .5s ease}
.thumb:hover .thumb-img img{filter:none;transform:scale(1.03)}
.thumb.on .thumb-img{outline-color:var(--lime)}
.thumb.on .thumb-img img{filter:none}
.thumb-n{position:absolute;left:12px;top:10px;font:900 34px/1 var(--disp);letter-spacing:-.05em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.thumb.on .thumb-n{color:var(--lime)}
.thumb-t{display:block;margin-top:12px;font:600 14px/1.3 var(--text);color:var(--mut)}
.thumb.on .thumb-t{color:var(--fg)}
@media (min-width:640px){.strip{grid-auto-columns:minmax(220px,38vw)}}
@media (min-width:1024px){
  .viewer{grid-template-columns:minmax(0,1fr) clamp(320px,27vw,420px);column-gap:clamp(28px,3vw,56px);row-gap:28px}
  .viewer-side{border-top:0;border-left:1px solid var(--line2);padding:58px 0 0 clamp(24px,2.4vw,40px)}
  .strip{grid-column:1/-1;grid-auto-flow:row;grid-template-columns:repeat(5,1fr);overflow:visible;margin:0;padding:0}
}

/* ---------- ПРЕЗЕНТАЦИЯ ---------- */
.deck-copy{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.slides{display:grid;gap:26px 18px}
.slide-img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--bg3);box-shadow:0 0 0 1px var(--line)}
.slide-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.slide:hover .slide-img img{transform:scale(1.025)}
.slide figcaption{display:flex;gap:12px;align-items:baseline;margin-top:12px;font-size:14px;color:var(--mut)}
.slide figcaption b{font:800 13px/1 var(--disp);color:var(--lime)}
@media (min-width:640px){.slides{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.slides{grid-template-columns:repeat(3,1fr);gap:34px 22px}
}
@media (min-width:1200px){#deck .sec-head{grid-template-columns:minmax(0,1fr) minmax(300px,440px)}
  #deck .sec-head .sec-note{padding-bottom:0}
  .deck-copy{padding-bottom:10px}}

/* ---------- ЗАЧЕМ ---------- */
.benefits{display:grid;border-top:1px solid var(--line2)}
.benefits li{position:relative;padding:30px 0 36px;border-bottom:1px solid var(--line)}
.ben-n{display:block;font:800 12px/1 var(--disp);color:var(--dim);letter-spacing:.1em;margin-bottom:34px}
.benefits h3{font:800 clamp(22px,2.2vw,32px)/1.05 var(--disp);letter-spacing:-.035em;text-transform:uppercase;margin-bottom:12px}
.benefits p{color:var(--mut);max-width:26em}
.benefits li.key{background:var(--lime);color:var(--ink);padding:30px 26px 36px;border-radius:22px;border:0;margin:14px 0}
.benefits li.key .ben-n{color:rgba(10,10,10,.5)}
.benefits li.key h3{font-size:clamp(30px,3.4vw,52px)}
.benefits li.key p{color:rgba(10,10,10,.78);font-weight:600;font-size:18px}
@media (min-width:640px){
  .benefits{grid-template-columns:1fr 1fr;column-gap:0}
  .benefits li{padding-right:28px}
  .benefits li.key{grid-column:1/-1}
}
@media (min-width:1024px){
  .benefits{grid-template-columns:repeat(3,1fr);border-top:0}
  .benefits li{padding:34px 36px 44px;border:0;border-top:1px solid var(--line2)}
  .benefits li:not(.key):nth-child(3n+2),.benefits li:not(.key):nth-child(3n){border-left:1px solid var(--line)}
  .benefits li.key{grid-column:auto;margin:0}
  .benefits li.key + li{border-left:0}
}

/* ---------- ЦЕНА ---------- */
.price-sec{position:relative;overflow:hidden}
.price{display:grid;gap:0;margin:clamp(28px,4vw,56px) 0 clamp(36px,4vw,56px);border-top:1px solid var(--line2)}
.price-main,.price-side{padding:30px 0}
.price-lbl{font:700 12px/1 var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:22px}
.price-big{font:900 clamp(46px,10vw,168px)/.86 var(--disp);letter-spacing:-.065em;color:var(--lime);white-space:nowrap}
.rub{font-family:var(--text);font-weight:800;font-size:.62em;letter-spacing:0;margin-left:.08em;vertical-align:.06em}
.price-note{margin-top:26px;color:var(--mut);max-width:28em}
.price-main .cta{margin-top:36px}
.price-mid{font:900 clamp(54px,6vw,96px)/.9 var(--disp);letter-spacing:-.05em;display:flex;align-items:baseline;flex-wrap:wrap}
.price-mid .approx{font-family:var(--text);font-weight:700;font-size:.6em;color:var(--mut);margin-right:.12em}
.price-mid small{font:600 16px/1 var(--text);letter-spacing:0;color:var(--mut);margin-left:14px}
.price-list{margin-top:24px}
.price-list li{padding:12px 0 12px 26px;position:relative;border-top:1px solid var(--line);font-size:15px}
.price-list li::before{content:"";position:absolute;left:2px;top:21px;width:12px;height:2px;background:var(--lime)}
@media (min-width:1024px){
  .price{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr)}
  .price-main{padding:44px 56px 20px 0}
  .price-side{padding:44px 0 20px 48px;border-left:1px solid var(--line)}
}

/* ---------- ФУТЕР ---------- */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) 0 34px;overflow:hidden}
.foot-mega{font:900 clamp(80px,25vw,420px)/.8 var(--disp);letter-spacing:-.07em;color:#171717;margin:0 0 30px -.03em;user-select:none}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;font-size:14px;color:var(--mut)}
.foot a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--lime)}
.foot a:hover{color:var(--lime)}

/* ---------- мобильные поправки ---------- */
@media (max-width:639px){
  body{font-size:16px}
  .h2{font-size:8.6vw}
  .case-title{font-size:11vw}
  .hero-shot{order:-1}
  .hero-stage{margin-top:26px}
  .mega .l2,.mega .l3{padding-left:0}
  .hero-copy .cta .btn{flex:1 1 auto}
  .btn{padding:0 20px}
  .btn-lg{--h:58px;width:100%}
  .ba .ba-knob{width:48px;height:48px;margin:-24px 0 0 -24px}
  .ba .ba-tag{top:12px;padding:7px 11px 6px;font-size:10px}
  .ba .ba-l{left:12px}.ba .ba-r{right:12px}
  .viewer-bar{flex-wrap:wrap}
  .toggle button{padding:0 16px;height:40px;font-size:11px}
  .marquee-run span{padding:16px 18px 14px}
  .zone-num{margin-bottom:14px}
  .deck-copy{align-items:stretch}
  .deck-copy .btn{white-space:normal;height:auto;min-height:58px;padding-block:14px;line-height:1.35;text-align:center}
}

/* ---------- без анимаций ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .marquee-track{flex-wrap:wrap;width:auto}
  .marquee-run+.marquee-run{display:none}
}