/* ═══════════════════════════════════════════════════════════
   AI Prosto Business — интеграции
   ═══════════════════════════════════════════════════════════ */

:root{
  --bg:#060607;
  --bg-2:#0B0B0D;
  --ink:#F2F3EE;
  --ink-2:#C4C7C1;
  --mute:#878A84;
  --line:rgba(242,243,238,.13);
  --line-2:rgba(242,243,238,.07);
  --acc:#39FF14;
  --acc-2:#5BEA40;

  --display:'Prata',Didot,'Times New Roman',serif;
  --sans:'Montserrat',system-ui,-apple-system,sans-serif;

  --wrap:1240px;
  --pad:clamp(20px,5vw,72px);
  --sec-y:clamp(88px,11vw,168px);
  --gap:10px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg,picture{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--acc);color:#050505}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sec{padding:var(--sec-y) 0;position:relative}

.skip{position:absolute;left:-9999px;top:0;z-index:99;padding:12px 18px;background:var(--ink);color:#000}
.skip:focus{left:12px;top:12px}

/* ── фоновые колонки ─────────────────────────────────────── */
.columns{position:fixed;inset:0;z-index:0;pointer-events:none;
  display:grid;grid-template-columns:repeat(5,1fr);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.columns i{border-left:1px solid var(--line-2)}
.columns i:last-child{border-right:1px solid var(--line-2)}
@media (max-width:760px){.columns{grid-template-columns:repeat(3,1fr)}}

header,main,footer{position:relative;z-index:1}

/* ── типографика ─────────────────────────────────────────── */
.h2{font-family:var(--display);font-weight:400;
  font-size:clamp(30px,4.4vw,58px);line-height:1.04;letter-spacing:-.012em}
.h2 em,.hero-h em,.final-h em{font-style:italic;color:var(--acc-2);
  font-family:var(--display);letter-spacing:-.02em;
  text-shadow:0 0 42px rgba(57,255,20,.26)}

.eyebrow{display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:0 0 auto;
  box-shadow:0 0 10px var(--acc);animation:dotpulse 2.6s ease-in-out infinite}
@keyframes dotpulse{0%,100%{opacity:1}50%{opacity:.28}}

.sec-head{max-width:min(720px,100%);margin-bottom:clamp(40px,5.5vw,76px)}
.sec-head .eyebrow{margin-bottom:22px}
.sec-lead{color:var(--ink-2);font-size:clamp(15px,1.35vw,17px);line-height:1.72;
  max-width:56ch;margin-top:24px}

.slogan{font-family:var(--display);font-size:clamp(19px,2.2vw,29px);line-height:1.3;
  color:var(--ink-2);margin-top:22px}
.slogan em{font-style:italic;color:var(--acc-2);text-shadow:0 0 34px rgba(57,255,20,.22)}

/* ── кнопки ──────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;
  padding:15px 30px;border:1px solid var(--ink);background:var(--ink);color:#08080A;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  transition:background .28s ease,color .28s ease,box-shadow .28s ease,transform .28s ease;
  position:relative;overflow:hidden}
.btn:hover{background:transparent;color:var(--ink);
  box-shadow:0 0 0 1px var(--ink),0 0 26px -6px rgba(242,243,238,.4)}
.btn:active{transform:translateY(1px)}
.btn i{font-style:normal;transition:transform .28s ease}
.btn:hover i{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:transparent;border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.btn-sm{padding:11px 20px;font-size:12px}
.btn-lg{padding:19px 40px;font-size:14px}
.btn-wide{width:100%;justify-content:center}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

/* ═══════════ 1 · ШАПКА ═══════════ */
.hdr{position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(6,6,7,.7);border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease}
.hdr.stuck{border-bottom-color:var(--line);background:rgba(6,6,7,.9)}
.hdr-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  height:66px;display:flex;align-items:center;gap:26px}

.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-mark{width:19px;height:27px;opacity:.95}
.brand-txt{font-size:13px;letter-spacing:.03em;white-space:nowrap}
.brand-txt b{font-weight:600}

.hdr-nav{display:flex;gap:26px;margin-left:auto;font-size:13px;color:var(--mute)}
.hdr-nav a{position:relative;padding:4px 0;transition:color .25s ease}
.hdr-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--acc);transition:width .3s cubic-bezier(.22,1,.36,1)}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a:hover::after{width:100%}

.hdr-side{display:flex;align-items:center;gap:16px;flex:0 0 auto}
/* короткие подписи для узкого экрана */
.cta-sm{display:none}

@media (max-width:1080px){.hdr-nav{display:none}}
@media (max-width:720px){
  .hdr-side{margin-left:auto;gap:11px}
  .hdr-in{gap:12px}
  .btn-sm{padding:12px 14px}
}

/* обрубок «Разбор» — только на совсем узких экранах */
@media (max-width:359px){
  .cta-lg{display:none}
  .cta-sm{display:inline}
}

/* ═══════════ 2 · ПЕРВЫЙ ЭКРАН ═══════════ */
.hero{padding-top:clamp(48px,6vw,84px);position:relative}
.hero-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.86fr);
  gap:clamp(28px,3.4vw,56px);align-items:center;
  min-height:min(82vh,820px)}

.hero-txt .eyebrow{margin-bottom:clamp(22px,2.6vw,34px)}
.hero-h{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,4.5vw,64px);line-height:1.04;letter-spacing:-.022em;
  margin-bottom:clamp(22px,2.6vw,32px)}
.hero-h em{white-space:nowrap}
.hero-p{color:var(--ink-2);font-size:clamp(15px,1.32vw,17px);line-height:1.75;
  max-width:52ch;margin-bottom:clamp(28px,3.2vw,40px)}
.hero-p b{color:var(--ink);font-weight:500}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}

/* ── живая сцена · видео в цикле ────────────────── */
/* затухание краёв запечено в сам кадр — CSS-маска на анимированном
   слое стоит дорого, а mix-blend-mode:screen по чёрному фону даёт тот же результат */
.hero-art{position:relative}
.art-stage{position:relative;width:100%;max-width:560px;margin-left:auto;
  background:var(--bg);isolation:isolate}
.art-bg{display:block}
.art-bg img{display:block;width:100%;height:auto;mix-blend-mode:screen}

.art-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  display:block;mix-blend-mode:screen;opacity:0;pointer-events:none}
/* кадр № 0 видео совпадает с постером — подмена встык без вспышки */
.art-stage.vid-on .art-vid{opacity:1}
.art-stage.vid-on .art-bg{visibility:hidden}


/* ── полоса обещаний ─────────────────────────────────────── */
.strip{list-style:none;max-width:var(--wrap);margin:clamp(44px,5.4vw,76px) auto 0;
  padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line)}
.strip li{padding:24px 26px 24px 0;font-size:13.5px;color:var(--ink-2);
  display:flex;gap:12px;align-items:baseline;border-right:1px solid var(--line)}
.strip li:last-child{border-right:0}
.strip b{font-family:var(--display);font-weight:400;font-size:15px;color:var(--acc)}
@media (max-width:820px){
  .strip{grid-template-columns:1fr}
  .strip li{border-right:0;border-bottom:1px solid var(--line);padding:17px 0}
  .strip li:last-child{border-bottom:0}
}
@media (max-width:900px){
  /* на телефоне сначала оффер, потом сцена, потом подробности */
  .hero-in{grid-template-columns:1fr;min-height:0;gap:0}
  .hero-txt{display:contents}
  .hero-txt .eyebrow{order:1}
  .hero-h{order:2}
  .hero-art{order:3;max-width:440px;margin:clamp(22px,5vw,34px) auto clamp(24px,5vw,36px)}
  .hero-p{order:4}
  .hero-btns{order:5}
  .art-stage{margin:0 auto}
}
@media (max-width:620px){
  .hdr-in{height:58px;gap:10px}
  .btn-sm{padding:12px 14px;font-size:10.5px;letter-spacing:.02em}
  .brand-txt{font-size:12px}
  .hdr-side{gap:11px}
}
@media (max-width:400px){
  .brand-txt b{display:block;line-height:1.1}
  .brand-txt{font-size:11px}
}

/* ═══════════ 4 · ПРОБЛЕМА ═══════════ */
.problem{border-top:1px solid var(--line)}
.problem .h2{margin-bottom:clamp(44px,5.4vw,74px)}
.probs{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:1px;background:var(--line);border:1px solid var(--line)}
.probs li{background:var(--bg);padding:clamp(26px,3.2vw,44px);position:relative;
  transition:background .4s ease}
.probs li:hover{background:var(--bg-2)}
.probs .num{font-family:var(--display);font-size:13px;color:var(--acc);
  display:block;margin-bottom:20px;letter-spacing:.1em}
.probs h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.3vw,29px);
  line-height:1.16;margin-bottom:15px}
.probs p{color:var(--ink-2);font-size:14.5px;line-height:1.72;max-width:44ch}
@media (max-width:760px){.probs{grid-template-columns:1fr}}

/* ═══════════ 5 · КЕЙСЫ ═══════════ */
.cases{background:linear-gradient(180deg,var(--bg),var(--bg-2) 45%,var(--bg))}
.monitor{position:relative;max-width:1000px;margin:0 auto;
  --scr-l:21.95%;--scr-t:6.8%;--scr-w:56.04%;--scr-h:45.38%}
.mon-img img{width:100%;height:auto;mix-blend-mode:screen}

.screen{position:absolute;left:var(--scr-l);top:var(--scr-t);
  width:var(--scr-w);height:var(--scr-h);overflow:hidden;
  display:flex;align-items:center;
  padding:clamp(12px,2.4vw,30px)}
.screen::before{content:'';position:absolute;inset:0;
  background:radial-gradient(120% 90% at 50% 40%,rgba(57,255,20,.05),transparent 70%)}
.screen-in{position:relative;width:100%}
/* строка «01 / 03» и логотип клиента, если он у кейса есть */
.scr-top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:clamp(8px,1.4vw,16px)}
.scr-logo{height:clamp(13px,1.5vw,18px);width:auto;opacity:.8;flex:0 0 auto}
.scr-logo[hidden]{display:none}
.scr-meta{font-size:10px;letter-spacing:.2em;color:var(--mute);margin:0}
.scr-meta i{font-style:normal;opacity:.4;margin:0 3px}
.scr-name{font-family:var(--display);font-weight:400;
  font-size:clamp(17px,2.7vw,34px);line-height:1.06;margin-bottom:4px}
.scr-field{font-size:clamp(9px,1.05vw,12px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);margin-bottom:clamp(8px,1.4vw,18px)}
.scr-body{color:var(--ink-2);font-size:clamp(9.5px,1.16vw,14px);line-height:1.6;max-width:46ch}

/* мышь — кликабельная */
.mouse{position:absolute;left:77.8%;top:68.6%;width:10%;height:16.2%;
  background:transparent;border:0;cursor:pointer;padding:0}
.mouse-ring{position:absolute;inset:-14%;border:1px solid rgba(57,255,20,.32);
  border-radius:50%;animation:ring 2.8s ease-out infinite}
@keyframes ring{
  0%{transform:scale(.86);opacity:0}
  25%{opacity:.85}
  100%{transform:scale(1.5);opacity:0}
}
.mouse:hover .mouse-ring{border-color:var(--acc);animation-duration:1.4s}
.mon-hint{position:absolute;left:76.5%;top:87.5%;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
  transition:opacity .5s ease}
.mon-hint.gone{opacity:0}

/* рябь при смене кейса */
.scr-rip{animation:rip .42s steps(1) both}
@keyframes rip{
  0%{clip-path:inset(0);transform:translateX(0)}
  15%{clip-path:inset(22% 0 54%);transform:translateX(-9px)}
  30%{clip-path:inset(58% 0 16%);transform:translateX(7px)}
  45%{clip-path:inset(8% 0 72%);transform:translateX(-5px)}
  60%{clip-path:inset(40% 0 34%);transform:translateX(4px)}
  75%{clip-path:inset(70% 0 4%);transform:translateX(-2px)}
  100%{clip-path:inset(0);transform:translateX(0)}
}
.cases-foot{margin:clamp(34px,4vw,56px) auto 0;max-width:52ch;text-align:center;
  color:var(--ink-2);font-size:15px;line-height:1.7}
.case-data[hidden]{display:none}
/* ссылка внутри абзаца — подчёркивание тонкой линией, без «синей ссылки» */
.ln{display:inline-block;color:var(--ink);white-space:nowrap;
  border-bottom:1px solid rgba(242,243,238,.28);padding-bottom:1px;
  transition:color .25s ease,border-color .25s ease}
.ln i{font-style:normal;opacity:.55;margin-left:3px}
.ln:hover{color:var(--acc);border-color:var(--acc)}
.cases-foot .ln{margin-left:6px}
/* на телефоне монитор остаётся картинкой, кейс уходит карточкой под него */
@media (max-width:760px){
  .screen{position:static;width:auto;height:auto;padding:22px 18px;overflow:visible;
    border:1px solid var(--line);background:var(--bg-2);margin-top:18px}
  .screen::before{display:none}
  .scr-top{margin-bottom:12px}
  .scr-meta{font-size:10px}
  .scr-name{font-size:25px}
  .scr-field{font-size:10.5px;margin-bottom:14px}
  .scr-body{font-size:14.5px;line-height:1.65;max-width:none}
  .mon-hint{position:static;text-align:center;margin-top:14px;font-size:10px}
  .mon-hint.gone{opacity:0}
}

/* ═══════════ 6 · ЛИПКАЯ СЕКЦИЯ ═══════════ */
.stack{position:relative;height:600vh;border-top:1px solid var(--line)}
.stack-sticky{position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);align-items:center}
.pane{padding:0 clamp(24px,4.5vw,86px)}
.pane .eyebrow{margin-bottom:34px}
.lead{color:var(--mute);font-size:15px;line-height:1.7;max-width:34ch;margin-bottom:48px}
.counter{font-size:12px;letter-spacing:.14em;color:var(--mute);margin-bottom:16px}
.counter b{color:var(--ink);font-weight:600}
.rule{display:block;width:44px;height:1px;background:var(--line);margin-bottom:24px}
.title{font-family:var(--display);font-weight:400;
  font-size:clamp(36px,4.6vw,66px);line-height:.94;letter-spacing:-.01em;margin-bottom:24px}
.stack-body{font-size:15px;line-height:1.75;color:var(--ink-2);max-width:44ch}

.swap{animation:glitchin .55s steps(1) both}
@keyframes glitchin{
  0%{opacity:0;clip-path:inset(0 0 92%);transform:translateX(-12px)}
  12%{opacity:1;clip-path:inset(28% 0 46%);transform:translateX(9px);
      text-shadow:rgba(50,125,255,.5) -3px 0,rgba(255,59,47,.5) 3px 0}
  24%{clip-path:inset(62% 0 8%);transform:translateX(-6px)}
  38%{clip-path:inset(12% 0 64%);transform:translateX(4px);text-shadow:none}
  52%{clip-path:inset(44% 0 22%);text-shadow:rgba(57,255,20,.4) -2px 0}
  66%{clip-path:inset(0);transform:translateX(2px);text-shadow:none}
  100%{opacity:1;clip-path:inset(0);transform:none;text-shadow:none}
}

.scene{position:relative;height:100%;display:flex;align-items:center;justify-content:center;
  padding-right:clamp(10px,2vw,40px)}
.hands{position:relative;width:100%;max-width:min(760px,90%);display:flex;align-items:center;
  justify-content:center;will-change:transform;background:var(--bg)}
/* transform ниже создаёт свой слой, поэтому screen у картинки смешивается
   с фоном именно этого элемента — без него чёрный кадр читается тёмным прямоугольником */
.h{display:block;width:50%;height:auto;background:var(--bg);
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.h img{display:block;width:100%;height:auto;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%)}
.h-l img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%),
                     linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 100%),
             linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.h-r img{
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%),
                     linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%),
             linear-gradient(180deg,transparent 0,#000 10%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.h-l{transform:translateX(calc(-1 * var(--gap)))}
.h-r{transform:translateX(var(--gap));animation:breathe 4.2s ease-in-out infinite}
.hands.touch .h-l{transform:translateX(26px)}
.hands.touch .h-r{transform:translateX(-26px)}
@keyframes breathe{0%,100%{filter:brightness(.92)}50%{filter:brightness(1.16)}}

.rip{animation:rip .42s steps(1) both}

.spark{position:absolute;left:50%;top:46%;width:180px;height:180px;margin:-90px 0 0 -90px;
  pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(57,255,20,.5) 0%,rgba(57,255,20,.12) 32%,transparent 66%)}
.spark.on{animation:spark .7s cubic-bezier(.22,1,.36,1) both}
@keyframes spark{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.9)}}
.pt{position:absolute;left:50%;top:46%;width:3px;height:3px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 6px var(--acc);opacity:0;pointer-events:none}
.pt.on{animation:fly .85s cubic-bezier(.22,1,.36,1) both}
@keyframes fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}

.tags{position:absolute;inset:0;pointer-events:none}
.tag{position:absolute;display:flex;align-items:flex-start;gap:9px;opacity:0;
  transform:translateX(-6px);transition:opacity .4s ease,transform .4s ease}
.tag.on{opacity:1;transform:none}
.tag i{display:block;width:15px;height:10px;border:1px solid rgba(242,243,238,.85);flex:0 0 auto;margin-top:2px}
.tag.solid i{background:var(--acc);border-color:var(--acc)}
.tag u{display:block;width:22px;height:1px;background:rgba(242,243,238,.35);margin-top:7px;flex:0 0 auto}
.tag span{font-size:10px;letter-spacing:.03em;line-height:1.35;white-space:nowrap}
.tag em{display:block;font-style:normal;font-size:8.5px;color:var(--mute);letter-spacing:.05em}

.deco{position:absolute;left:0;bottom:-34px;width:min(34vw,460px);height:auto;
  pointer-events:none;opacity:.5}
.deco .arc{fill:none;stroke:rgba(242,243,238,.5);stroke-width:.9}
.deco .ln{stroke:rgba(242,243,238,.55)}
.deco .ln.thick{stroke-width:2.2;stroke:rgba(242,243,238,.75)}
.deco .sq{fill:rgba(242,243,238,.75)}
.deco .sq.acc{fill:var(--acc)}
.deco .gd{fill:rgba(242,243,238,.42)}
.deco .blink{animation:blink 3.4s steps(1) infinite}
@keyframes blink{0%,86%{opacity:1}88%{opacity:.15}92%{opacity:1}94%{opacity:.4}100%{opacity:1}}
.deco .drift{animation:drift 9s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(7px)}}

.stack-list{display:none;margin-top:8px}
.stack-list article{padding:22px 0;border-top:1px solid var(--line)}
.stack-list article:first-child{border-top:0;padding-top:6px}
.sl-n{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--acc);
  display:block;margin-bottom:12px}
.stack-list h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.4vw,32px);
  line-height:1.1;margin-bottom:12px}
.stack-list p{color:var(--ink-2);font-size:14.5px;line-height:1.7;max-width:62ch}
.stack-off{display:none}

@media (max-width:900px){
  .stack{height:auto}
  /* одиночный слайд уступает место полному списку */
  .pane .counter,.pane .rule,.pane .title,.pane .stack-body{display:none}
  .stack-list{display:block}
  .stack-sticky{position:static;height:auto;grid-template-columns:1fr;
    padding:var(--sec-y) 0;gap:26px}
  .scene{order:-1;height:auto;padding:0 16px}
  .title{font-size:32px}
  .lead{margin-bottom:22px}
  .deco{display:none}
}
@media (max-width:820px){
  /* подписи у рук считают ширину от сцены и на узком экране уезжают за край;
     смысл всё равно раскрыт в списке ниже */
  .tags{display:none}
  /* сдвиг ладоней на 10px должен оставаться внутри кадра, иначе левая обрезается краем экрана */
  .scene{padding:0 clamp(14px,5vw,26px)}
  .hands{max-width:100%}
}

/* ═══════════ 7 · КАК МЫ РАБОТАЕМ ═══════════ */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps li{background:var(--bg);padding:clamp(24px,2.7vw,36px) clamp(18px,2vw,28px);
  position:relative;transition:background .4s ease}
.steps li:hover{background:var(--bg-2)}
.st-n{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:var(--acc);
  display:block;margin-bottom:22px}
.steps h3{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.9vw,25px);
  margin-bottom:13px;line-height:1.15}
.steps p{color:var(--ink-2);font-size:13.5px;line-height:1.7}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

.metric{margin-top:clamp(40px,4.6vw,68px);padding:clamp(26px,3.2vw,44px);
  border:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(22px,3vw,50px);align-items:start;background:var(--bg-2)}
.metric h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.1vw,27px);
  margin-bottom:14px;grid-column:1;line-height:1.16}
.metric p{color:var(--ink-2);font-size:14.5px;line-height:1.72;grid-column:1}
.metric ul{grid-column:2;grid-row:1 / span 2;list-style:none;
  border-left:1px solid var(--line);padding-left:clamp(18px,2vw,28px)}
.metric li{font-size:13px;color:var(--mute);padding:8px 0;border-bottom:1px solid var(--line-2)}
.metric li:last-child{border-bottom:0}
@media (max-width:820px){
  .metric{grid-template-columns:1fr}
  .metric h3,.metric p,.metric ul{grid-column:1;grid-row:auto}
  .metric ul{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:12px;margin-top:6px}
}

/* ═══════════ 8 · ФОРМАТЫ ═══════════ */
.formats{background:linear-gradient(180deg,var(--bg),var(--bg-2) 50%,var(--bg))}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.card{border:1px solid var(--line);padding:clamp(20px,2.2vw,30px);
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  transition:border-color .4s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.card::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  background:radial-gradient(circle,rgba(57,255,20,.16),transparent 66%);
  opacity:0;transition:opacity .5s ease;pointer-events:none}
.card:hover{border-color:rgba(242,243,238,.3);transform:translateY(-4px)}
.card:hover::after{opacity:1}
.card-art{margin:-6px -6px clamp(18px,2vw,26px)}
.card-art img{width:100%;height:auto;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 66%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 66%,transparent 100%)}
.card h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,2.2vw,28px);
  line-height:1.12;margin-bottom:11px}
.card-sub{color:var(--mute);font-size:13.5px;line-height:1.68;margin-bottom:24px}
.price{font-family:var(--display);font-size:clamp(22px,2.4vw,30px);line-height:1.14;
  padding-top:20px;border-top:1px solid var(--line);margin-bottom:16px;margin-top:auto}
.card-cta{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;gap:7px;align-items:center;transition:color .28s ease}
.card-cta i{font-style:normal;transition:transform .28s ease}
.card:hover .card-cta{color:var(--acc)}
.card:hover .card-cta i{transform:translate(3px,-3px)}
.formats-foot{margin-top:clamp(30px,3.4vw,46px);color:var(--mute);font-size:14px;max-width:56ch}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* ═══════════ 9 · ПОЧЕМУ ═══════════ */
.whys{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line)}
.whys > div{background:var(--bg);padding:clamp(26px,3vw,42px);transition:background .4s ease}
.whys > div:hover{background:var(--bg-2)}
.whys .num{font-family:var(--display);font-size:13px;color:var(--acc);
  display:block;margin-bottom:20px;letter-spacing:.1em}
.whys h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.1vw,27px);
  margin-bottom:14px;line-height:1.14}
.whys p{color:var(--ink-2);font-size:14px;line-height:1.72}
@media (max-width:880px){.whys{grid-template-columns:1fr}}

/* ═══════════ 10 · СТЕК ═══════════ */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1px solid var(--line);padding:12px 22px;font-size:13.5px;color:var(--ink-2);
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.chips li:hover{border-color:var(--acc);color:var(--ink);background:rgba(57,255,20,.05)}
.tech-foot{margin-top:clamp(28px,3.2vw,44px);color:var(--mute);font-size:14px;max-width:58ch}

/* ═══════════ 11 · ФОРМА ═══════════ */
.request{background:linear-gradient(180deg,var(--bg),var(--bg-2))}
.req-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(34px,5vw,86px);align-items:start}
.req-txt .eyebrow{margin-bottom:22px}
.req-txt .h2{margin-bottom:0}
.take{list-style:none;margin-top:clamp(24px,2.8vw,36px)}
.take li{color:var(--ink-2);font-size:14.5px;line-height:1.65;padding:12px 0 12px 26px;
  border-bottom:1px solid var(--line-2);position:relative}
.take li::before{content:'';position:absolute;left:0;top:20px;width:9px;height:1px;background:var(--acc)}
.take li:last-child{border-bottom:0}
.req-note{margin-top:26px;color:var(--mute);font-size:13.5px;line-height:1.7;max-width:50ch}

.form{border:1px solid var(--line);padding:clamp(24px,2.8vw,38px);background:var(--bg)}
.f-row{margin-bottom:20px}
.f-row label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute);margin-bottom:9px}
.f-row input,.f-row select,.f-row textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:11px 0;font-size:15px;transition:border-color .3s ease;border-radius:0}
.f-row textarea{resize:vertical;min-height:64px}
.f-row select{cursor:pointer}
.f-row select option{background:var(--bg-2);color:var(--ink)}
.f-row input::placeholder,.f-row textarea::placeholder{color:rgba(135,138,132,.6)}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{
  outline:0;border-bottom-color:var(--acc)}
.f-row.err input,.f-row.err select,.f-row.err textarea{border-bottom-color:#FF5A45}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* ═══════════ ФОРМА · согласие — общее для обеих страниц ═══════════ */
.f-agree{display:flex;gap:11px;align-items:flex-start;margin:4px 0 22px;
  font-size:12.5px;line-height:1.6;color:var(--mute);cursor:pointer}
.f-agree input{flex:0 0 auto;width:15px;height:15px;margin-top:2px;accent-color:var(--acc);
  cursor:pointer}
.f-agree a{color:var(--ink-2);border-bottom:1px solid rgba(242,243,238,.24);
  transition:color .25s ease,border-color .25s ease}
.f-agree a:hover{color:var(--acc);border-color:var(--acc)}
.f-agree.err span{color:#FF7A68}
/* необязательное согласие подаётся тише обязательного */
.f-agree-soft{margin-top:-10px;color:rgba(135,138,132,.85)}
.f-policy{margin:0 0 20px;font-size:12px;line-height:1.6;color:rgba(135,138,132,.8)}
.f-policy a{color:var(--mute);border-bottom:1px solid rgba(242,243,238,.18);
  transition:color .25s ease,border-color .25s ease}
.f-policy a:hover{color:var(--acc);border-color:var(--acc)}

.f-note{margin-top:16px;font-size:12px;color:var(--mute);line-height:1.6}
/* до отправки строка пустая — не должна оставлять дыру под кнопкой */
.f-note:empty{display:none}
#fPay{margin-top:14px}
.f-note.ok{color:var(--acc)}
.f-note.bad{color:#FF7A68}
.form.sent{opacity:.7;pointer-events:none}
@media (max-width:900px){.req-grid{grid-template-columns:1fr}}
@media (max-width:820px){
  /* меньше 16px Safari на iPhone считает поводом увеличить страницу при фокусе */
  .f-row input,.f-row select,.f-row textarea{font-size:16px;padding:13px 0}
  .f-row textarea{min-height:78px}
  .f-row label{margin-bottom:7px}
}

/* ═══════════ 12 · ВОПРОСЫ ═══════════ */
.qs{border-top:1px solid var(--line)}
.qs details{border-bottom:1px solid var(--line)}
.qs summary{list-style:none;cursor:pointer;padding:clamp(20px,2.2vw,28px) 44px clamp(20px,2.2vw,28px) 0;
  font-family:var(--display);font-weight:400;font-size:clamp(17px,1.85vw,23px);line-height:1.3;
  position:relative;transition:color .3s ease}
.qs summary::-webkit-details-marker{display:none}
.qs summary:hover{color:var(--acc)}
.q-i{position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px}
.q-i::before,.q-i::after{content:'';position:absolute;background:currentColor;
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .3s ease}
.q-i::before{left:0;top:6px;width:13px;height:1px}
.q-i::after{left:6px;top:0;width:1px;height:13px}
.qs details[open] .q-i::after{transform:rotate(90deg);opacity:0}
.qs details p{color:var(--ink-2);font-size:14.5px;line-height:1.75;
  max-width:64ch;padding-bottom:clamp(22px,2.4vw,30px);animation:qopen .45s ease both}
@keyframes qopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ═══════════ 13 · ФИНАЛ ═══════════ */
.final{border-top:1px solid var(--line);
  background:radial-gradient(80% 100% at 50% 100%,rgba(57,255,20,.05),transparent 62%)}
.final-in{text-align:center;position:relative;padding-bottom:clamp(26px,3vw,48px)}
.final-h{font-family:var(--display);font-weight:400;
  font-size:clamp(38px,6vw,80px);line-height:1;letter-spacing:-.02em;margin-bottom:26px}
.final-p{color:var(--ink-2);font-size:clamp(15px,1.35vw,17px);line-height:1.72;
  max-width:50ch;margin:0 auto clamp(30px,3.4vw,44px)}
.final-tg{margin-top:clamp(20px,2.4vw,30px);font-size:14px;color:var(--mute)}
.final-tg a{color:var(--ink);border-bottom:1px solid rgba(242,243,238,.28);
  padding-bottom:1px;transition:color .25s ease,border-color .25s ease}
.final-tg a:hover{color:var(--acc);border-color:var(--acc)}
.final-slogan{margin-top:clamp(30px,3.4vw,48px)}
.final-arc{position:absolute;left:50%;bottom:-34px;width:min(760px,96%);
  transform:translateX(-50%);pointer-events:none}

/* ═══════════ 14 · ФУТЕР ═══════════ */
.ftr{border-top:1px solid var(--line);padding-top:clamp(46px,5vw,72px);background:var(--bg-2)}
.ftr-in{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr) minmax(0,.9fr);
  gap:clamp(26px,4vw,60px);padding-bottom:clamp(38px,4.4vw,60px)}
.ftr-logo{width:112px;height:auto;opacity:.9;margin-bottom:20px}
.ftr-brand p{color:var(--mute);font-size:13.5px;line-height:1.7;max-width:40ch}
.ftr-t{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
  margin-bottom:18px}
.ftr-nav,.ftr-cnt{display:flex;flex-direction:column;gap:11px;font-size:13.5px}
.ftr-nav a,.ftr-cnt a{color:var(--ink-2);transition:color .25s ease;width:fit-content}
.ftr-nav a:hover,.ftr-cnt a:hover{color:var(--acc)}
.ftr-btm{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:26px;border-top:1px solid var(--line);
  font-size:12px;color:var(--mute)}
@media (max-width:820px){.ftr-in{grid-template-columns:1fr 1fr}.ftr-brand{grid-column:1 / -1}}
@media (max-width:520px){.ftr-in{grid-template-columns:1fr}}

/* ═══════════ ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ═══════════ */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.glitch-in{animation:glitchin .55s steps(1) both}

/* ═══════════ БЕЗ ДВИЖЕНИЯ ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .reveal{opacity:1;transform:none}
  .art-vid{display:none}
  .stack{height:auto}
  .stack-sticky{position:static;height:auto;padding:var(--sec-y) 0;
    grid-template-columns:minmax(0,44%) minmax(0,56%)}
  .tag{opacity:1;transform:none}
  .pane .counter,.pane .rule,.pane .title,.pane .stack-body{display:none}
  .stack-list{display:block}
}