/* ============================================================
   ШРИФТЫ
   ============================================================ */
@font-face{
  font-family:'Evolventa';
  src:url('fonts/Evolventa-Regular.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Evolventa';
  src:url('fonts/Evolventa-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'VikVik Hand';
  src:url('fonts/VikVikHandV13-Regular.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

/* ============================================================
   ТОКЕНЫ  (палитра и типографика — из design-spec.md)
   ============================================================ */
:root{
  --bg-primary:#1C1A18;
  --bg-card:#2A2623;
  --bg-glass:rgba(255,255,255,.08);
  --text-primary:#FFF9F9;
  --text-secondary:#C8BEB9;
  --accent:#FF9E5E;
  --accent-hover:#FFB882;
  --border-glass:rgba(255,255,255,.15);

  --font-display:'Evolventa','Helvetica Neue',Arial,sans-serif;
  --font-accent:'VikVik Hand','Evolventa',cursive;

  --h1:clamp(40px,6.4vw,72px);
  --h2:clamp(32px,4.2vw,48px);
  --accent-size:clamp(30px,3.6vw,46px);
  --body:clamp(16px,1.35vw,18px);
  --caption:clamp(13px,1vw,14px);

  --gutter:clamp(20px,5vw,80px);
  --rail-w:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg-primary); color:var(--text-primary);
  font-family:var(--font-display); font-size:var(--body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{margin:0; font-weight:700; line-height:1.05; letter-spacing:-.02em; text-wrap:balance}
p{margin:0}
/* Ровные строки в основном тексте: браузер сам расставляет переносы так, чтобы строки
   были близкой длины, и пересчитывает их под любую ширину экрана — ручные переносы не нужны.
   Заголовки сюда не входят, у них своё правило выше. */
p, li, dd, .glass > span, .strip__cap, .work__cap span, .proof__label, .audio__note, .acc__quotes span{text-wrap:balance}
.accent-script,.closer,#contact .invite,
.prose p.lead,.prose p.note,.pain q,.pain p,#why .tail,.stat span{text-wrap:balance}
.list-items span{white-space:nowrap}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:4px}

/* в рукописном шрифте нет кернинга — отдельные пары букв подтягиваем вручную */
.tuck{margin-left:-.13em}

.accent-script{
  font-family:var(--font-accent); font-weight:400; font-synthesis:none;
  color:var(--accent); font-size:var(--accent-size); line-height:1.3;
}
.caption{
  font-size:var(--caption); letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-secondary);
}

/* ============================================================
   ПЛЁНКА: фон-канвас + затемнение + зерно
   ============================================================ */
#film-layer{position:fixed; inset:0; z-index:0; background:#0E0D0C}
#film{display:block; width:100%; height:100%}
/* вуаль: гарантирует читаемость текста, не убивая кадр */
#veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,   rgba(28,26,24,.94) 0%, rgba(28,26,24,.62) 26%, rgba(28,26,24,0) 60%),
    linear-gradient(to right, rgba(28,26,24,.62) 0%, rgba(28,26,24,0) 58%),
    linear-gradient(to bottom,rgba(28,26,24,.55) 0%, rgba(28,26,24,0) 22%);
}
#scrim{position:fixed; inset:0; z-index:2; background:var(--bg-primary); opacity:.9; pointer-events:none}

#grain{
  position:fixed; inset:0; z-index:5; pointer-events:none; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   ПРЕЛОАДЕР
   ============================================================ */
#boot{
  position:fixed; inset:0; z-index:200; background:var(--bg-primary);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .7s var(--ease), visibility .7s;
}
#boot.done{opacity:0; visibility:hidden}
#boot .pct{font-size:clamp(48px,9vw,96px); font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
#boot .bar{width:min(260px,52vw); height:1px; background:var(--border-glass); position:relative; overflow:hidden}
#boot .bar i{position:absolute; inset:0 auto 0 0; width:0; background:var(--accent)}
#boot .caption{max-width:min(520px,100%); padding:0 24px; text-align:center; text-wrap:balance; line-height:1.6}
/* выбор языка прямо на экране загрузки: пока человек выбирает, кадры догружаются */
#boot.asking .pct,
#boot.asking .bar,
#boot.asking .caption{display:none}
.boot__pick{
  display:flex; flex-direction:column; align-items:center; gap:clamp(20px,3.4vh,34px);
  padding:0 var(--gutter); opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.boot__pick.in{opacity:1; transform:none}
.boot__langs{display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,20px)}
.boot__langs button{
  padding:clamp(16px,2vw,22px) clamp(30px,3.6vw,52px); border-radius:999px; cursor:pointer;
  background:var(--bg-glass); border:1px solid var(--border-glass); color:var(--text-primary);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-family:var(--font-display); font-weight:700; letter-spacing:-.01em;
  font-size:clamp(20px,2.4vw,30px); line-height:1;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.boot__langs button:hover{
  border-color:var(--accent); color:var(--accent);
  background:rgba(255,158,94,.12); transform:translateY(-3px);
}
/* подпись под кнопками: одна строка на каждом языке */
.boot__note{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:var(--caption); color:var(--text-secondary); text-align:center; text-wrap:balance;
}

/* ============================================================
   НАВИГАЦИЯ
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px var(--gutter);
}
.nav::before{
  content:''; position:absolute; left:0; right:0; top:0; bottom:-36px; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,rgba(28,26,24,.8) 0%,rgba(28,26,24,.45) 55%,rgba(28,26,24,0) 100%);
}
.nav__name{font-size:var(--caption); letter-spacing:.1em}
.pill{
  display:flex; align-items:center; gap:22px;
  padding:10px 22px; border-radius:999px;
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:clamp(14px,1.1vw,15px);
}
.pill a{text-decoration:none; color:var(--text-primary); opacity:.85; transition:opacity .25s}
.pill a:hover{opacity:1}
.pill .lang{display:flex; gap:8px; padding-right:22px; border-right:1px solid var(--border-glass); color:var(--text-secondary)}
.pill .lang button{
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--text-secondary); opacity:.7; transition:color .25s var(--ease), opacity .25s var(--ease);
}
.pill .lang button:hover{opacity:1; color:var(--text-primary)}
.pill .lang button.is-on{color:var(--accent); opacity:1}
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 26px; border-radius:999px; border:0;
  background:var(--accent); color:var(--bg-primary);
  font-family:var(--font-display); font-weight:700; font-size:var(--caption);
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{background:var(--accent-hover); transform:translateY(-2px)}

/* навигация сжимается до бургер-логики на узких экранах */
@media (max-width:1100px){
  .nav{padding:14px var(--gutter)}
  .pill{gap:14px; padding:9px 16px}
  .pill .lang{padding-left:14px; gap:6px}
}
@media (max-width:900px){ .nav__name{display:none} }
@media (max-width:640px){
  .pill a{display:none}
  .pill .lang{border-right:0; padding-right:0}
  .btn{padding:10px 18px; letter-spacing:.06em}
}

/* ============================================================
   ТАЙМКОД-РЕЙЛ  (сигнатурный элемент: страница = одна плёнка)
   ============================================================ */
.rail{
  position:fixed; right:calc(var(--gutter) * .55); top:50%; transform:translateY(-50%);
  z-index:90; width:var(--rail-w);
  display:flex; flex-direction:column; align-items:flex-end; gap:0;
  opacity:0; transition:opacity .6s var(--ease);
}
.rail.is-visible{opacity:1}
.rail__line{position:relative; width:1px; height:46vh; background:var(--border-glass); margin-right:13px}
.rail__head{
  position:absolute; right:-5px; width:11px; height:11px; border-radius:50%;
  background:var(--accent); transform:translateY(-50%);
  box-shadow:0 0 0 4px rgba(255,158,94,.18);
}
.rail__tick{
  position:absolute; right:-13px; width:27px; height:20px; transform:translateY(-50%);
  background:none; border:0; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:flex-end;
}
.rail__tick::after{content:''; width:9px; height:1px; background:var(--text-secondary); opacity:.6; transition:all .3s var(--ease)}
.rail__tick:hover::after,.rail__tick[aria-current="true"]::after{width:20px; opacity:1; background:var(--accent)}
.rail__tc{
  margin-top:14px; font-size:11px; letter-spacing:.08em; color:var(--text-secondary);
  font-variant-numeric:tabular-nums; text-align:right; line-height:1.5;
}
.rail__tc b{display:block; color:var(--text-primary); font-weight:400}
@media (max-width:860px){ .rail{display:none} }

/* ============================================================
   СЛАЙДЫ
   ============================================================ */
main{position:relative; z-index:10}
.slide{
  position:relative; min-height:100svh;
  padding:clamp(96px,14vh,160px) var(--gutter) clamp(72px,10vh,120px);
  display:flex; flex-direction:column; justify-content:center;
}
/* кольцо «Креатив» в 3D шире экрана: без этого мобильный Chrome расширял страницу до ~630px */
main{overflow-x:clip}
.slide__inner{width:100%; max-width:1180px; margin:0 auto}

/* появление контента */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1; transform:none}
.reveal:nth-child(2){transition-delay:.08s}
.reveal:nth-child(3){transition-delay:.16s}
.reveal:nth-child(4){transition-delay:.24s}

/* --- 1 · HERO --- */
#hero{justify-content:center; text-align:center}
#hero::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(ellipse 62% 46% at 50% 56%,
    rgba(28,26,24,.62) 0%, rgba(28,26,24,.34) 45%, rgba(28,26,24,0) 72%);
}
#hero .slide__inner{max-width:1060px; padding-top:9vh}   /* чуть ниже центра */

#hero .name{
  font-size:clamp(15px,1.75vw,26px); font-weight:400; text-transform:uppercase;
  letter-spacing:.34em; margin-right:-.34em; color:var(--text-secondary);
}
#hero .role{
  margin-top:clamp(16px,2.4vh,26px);
  font-size:clamp(34px,5.2vw,74px); font-weight:700; line-height:1.02; letter-spacing:-.03em;
}
#hero .role em{
  font-family:var(--font-accent); font-style:normal; font-weight:400; font-synthesis:none;
  color:var(--accent); font-size:1.12em; line-height:1;
}
/* услуги: стеклянные плашки-ссылки на свои слайды */
#hero .chips{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin-top:clamp(26px,4vh,40px);
}
#hero .chips a{
  text-decoration:none;
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
  padding:11px 22px; border-radius:999px;
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  font-size:clamp(13px,1.15vw,16px); color:var(--text-primary); white-space:nowrap;
}
#hero .chips a:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-2px)}
#hero .cta{
  display:inline-flex; align-items:center; gap:12px;
  margin-top:clamp(34px,5.5vh,58px);
  font-size:clamp(15px,1.5vw,20px); font-weight:700; text-transform:uppercase;
  letter-spacing:.16em; text-decoration:none; color:var(--text-primary);
  transition:color .3s var(--ease), gap .3s var(--ease);
}
#hero .cta:hover{color:var(--accent); gap:20px}
#hero .cta i{
  width:30px; height:30px; border-radius:50%; border:1.5px solid currentColor;
  display:flex; align-items:center; justify-content:center; font-style:normal; font-size:13px;
}
@media (max-width:620px){
  #hero .name{letter-spacing:.24em; margin-right:-.24em}
  #hero .chips{gap:8px}
  #hero .chips a{padding:9px 16px}
}
/* --- 2 · ПОДХОД --- */
/* шапка слайда и P.S. по центру, колонки остаются по левому краю */
#approach .slide__inner{text-align:center}
#approach .sell{text-align:left}
#approach h2{
  font-size:clamp(22px,6.2vw,72px); text-transform:uppercase;
  white-space:nowrap; letter-spacing:-.03em;
}
#approach .accent-script{margin:16px auto 0; max-width:34ch}
#approach .sell .caption{
  font-size:clamp(17px,1.9vw,25px); letter-spacing:.05em; line-height:1.25; margin-bottom:16px;
}
#approach .sell .caption.underline{
  text-decoration:underline; text-underline-offset:7px; text-decoration-thickness:1px;
}
#approach .sell{margin-top:0}
#approach .sell p{max-width:46ch}

/* рисованная стрелка от «проходите мимо» к левой колонке */
.hint-arrow{
  display:block; width:min(440px,44%); height:clamp(74px,12vh,132px);
  margin:clamp(26px,5vh,58px) auto clamp(16px,3vh,34px) 4%;
  overflow:visible; pointer-events:none;
}
.hint-arrow path{
  fill:none; stroke:var(--accent); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke-dashoffset 1.2s var(--ease) .2s;
}
.hint-arrow.in path{stroke-dashoffset:0 !important}
@media (max-width:900px){
  .hint-arrow{display:none}
  /* отступ, который на десктопе давала стрелка */
  #approach .sell{margin-top:clamp(30px,6vh,58px)}
}
/* свободное пространство делится поровну: блок с текстом поднимается,
   P.S. уходит в самый низ экрана */
#approach{padding-bottom:clamp(26px,4vh,44px)}
#approach .slide__inner{margin-top:auto}
#approach .ps{
  margin-top:auto; padding-top:clamp(24px,4vh,44px);
  width:100%; max-width:1180px; margin-left:auto; margin-right:auto;
  font-size:var(--caption); text-align:center;
  color:var(--text-secondary); text-transform:none; letter-spacing:0;
}
#approach .ps b{color:var(--accent); font-weight:400; letter-spacing:.1em}

/* --- 3 · ВЫ ПО АДРЕСУ, ЕСЛИ… · раскрывающиеся формы --- */
#pains h2{
  font-size:clamp(24px,6.4vw,76px); text-transform:uppercase;
  white-space:nowrap; letter-spacing:-.03em;
}
.acc{display:flex; flex-direction:column; gap:clamp(8px,1vw,12px); margin-top:clamp(28px,5vh,48px)}
.acc__item{
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:18px; overflow:hidden;
  transition:background .35s var(--ease), border-color .35s var(--ease);
}
.acc__item[data-open="true"]{background:rgba(255,255,255,.12)}
.acc__item.accent{background:rgba(255,158,94,.16); border-color:rgba(255,158,94,.42)}
.acc__item.accent[data-open="true"]{background:rgba(255,158,94,.24)}
.acc__head{
  width:100%; display:flex; align-items:center; gap:18px;
  padding:clamp(16px,1.9vw,24px) clamp(18px,2.1vw,28px);
  background:none; border:0; cursor:pointer; text-align:left; color:inherit;
  font-family:var(--font-display); font-size:clamp(16px,1.7vw,21px); font-weight:700;
  letter-spacing:-.01em; line-height:1.3;
}
.acc__sign{
  flex:0 0 auto; margin-left:auto; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--border-glass); position:relative;
  transition:transform .4s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.acc__sign::before,.acc__sign::after{
  content:''; position:absolute; left:50%; top:50%; width:11px; height:1.5px;
  background:var(--accent); transform:translate(-50%,-50%);
}
.acc__sign::after{transform:translate(-50%,-50%) rotate(90deg); transition:opacity .3s var(--ease)}
.acc__item[data-open="true"] .acc__sign{transform:rotate(180deg); border-color:var(--accent)}
.acc__item[data-open="true"] .acc__sign::after{opacity:0}
.acc__item.accent .acc__sign::before,.acc__item.accent .acc__sign::after{background:var(--text-primary)}

.acc__panel{display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease)}
.acc__item[data-open="true"] .acc__panel{grid-template-rows:1fr}
.acc__panel > div{overflow:hidden}
.acc__body{
  padding:0 clamp(18px,2.1vw,28px) clamp(20px,2.3vw,28px);
  color:var(--text-secondary); max-width:74ch;
}
.acc__body p{margin-top:8px}
.acc__body p:first-child{margin-top:0}
.acc__body .did{
  display:block; margin-top:18px; margin-bottom:8px;
  font-size:var(--caption); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.acc__body .did + p{color:var(--text-primary)}
.acc__quotes{margin-top:12px; display:flex; flex-direction:column; gap:5px}
.acc__quotes span{color:var(--text-primary)}
.acc__item.accent .acc__body{color:rgba(255,249,249,.82)}
.acc__item.accent .acc__body .did{color:var(--text-primary)}

.closer{
  margin-top:clamp(34px,5.5vh,56px); text-align:center;
  font-size:clamp(18px,2vw,24px); font-weight:700; line-height:1.25;
}
.closer + .accent-script{display:block; margin-top:10px; text-align:center}

/* --- 4 · КРЕАТИВ · рельс работ --- */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap}
.sec-head h2{font-size:var(--h2)}
/* кольцо: карточки расставлены по цилиндру и медленно едут по кругу */
.ring-stage{
  --card-w:281px; --card-h:454px; --tilt:-8deg;
  position:relative; height:calc(var(--card-h) + 90px);
  margin-top:clamp(24px,4vh,40px);
  perspective:3000px; perspective-origin:50% 50%;
  cursor:grab; touch-action:pan-y; user-select:none;
}
.ring-stage.dragging{cursor:grabbing}
.ring{
  /* точка в центре сцены, а не прямоугольник во всю сцену: вращать нечего видимого,
     и никакой рамки или «оси» от самого контейнера появиться не может */
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform-style:preserve-3d; will-change:transform;
}
.work{
  position:absolute; left:0; top:0; margin:0;
  width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2); margin-top:calc(var(--card-h) / -2);
  transform:rotateY(var(--a)) translateZ(var(--r));
  backface-visibility:hidden;
  border-radius:8px; overflow:hidden; background:var(--bg-card);
  border:0; padding:0; color:inherit; text-align:left; cursor:pointer;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
@media (max-width:760px){ .ring-stage{--card-w:210px; --card-h:340px} }
.work__media{position:absolute; inset:0; background:#171512 center/cover no-repeat}
.work__media::after{content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(12,10,9,.92) 0%,rgba(12,10,9,.1) 55%)}
.work__slot{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,249,249,.28);
}
.work__play{
  position:absolute; top:16px; right:16px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(28,26,24,.45); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.work__play::after{
  content:''; width:0; height:0; margin-left:2px;
  border-left:9px solid var(--text-primary); border-top:5.5px solid transparent; border-bottom:5.5px solid transparent;
}
.work:hover .work__play{background:var(--accent); border-color:var(--accent)}
.work:hover .work__play::after{border-left-color:var(--bg-primary)}
.work__cap{position:absolute; left:0; right:0; bottom:0; padding:22px; z-index:2}
.work__cap b{display:block; font-size:clamp(15px,1.4vw,18px); letter-spacing:-.01em}
.work__cap span{display:block; margin-top:6px; font-size:12px; color:var(--text-secondary)}

/* --- 5 · АВАТАРЫ · лента из пяти роликов --- */
.strip{
  display:grid; grid-template-columns:var(--cols); gap:clamp(8px,1vw,14px);
  margin-top:clamp(26px,4.5vh,44px);
}
.strip__card{
  position:relative; border:0; padding:0; border-radius:12px; overflow:hidden; cursor:pointer;
  background:var(--bg-card) center/cover no-repeat; color:inherit;
  box-shadow:0 20px 44px rgba(0,0,0,.42);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.strip__card.v{aspect-ratio:9/16}
.strip__card.h{aspect-ratio:16/9}
.strip__card:hover,.strip__card:focus-visible{transform:translateY(-6px); box-shadow:0 28px 60px rgba(0,0,0,.55)}
.strip__card::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(12,10,9,.9) 0%,rgba(12,10,9,0) 48%);
}
.strip__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:12px 13px;
  font-size:12px; line-height:1.25; text-align:left; letter-spacing:-.01em;
}
.strip__card:hover .work__play{background:var(--accent); border-color:var(--accent)}
.strip__card:hover .work__play::after{border-left-color:var(--bg-primary)}

/* продающий текст под лентой */
.sell{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,54px);
  margin-top:clamp(30px,5vh,52px);
}
.sell .caption{display:block; margin-bottom:14px; color:var(--accent)}
.sell ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px}
.sell li{position:relative; padding-left:20px; max-width:46ch}
.sell li::before{
  content:''; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--accent);
}
.sell em{font-style:normal; color:var(--accent)}
@media (max-width:900px){
  /* на мобильном — горизонтальная лента одной высоты, листается пальцем, соседний ролик выглядывает */
  .strip{
    --sh:min(50svh,340px);
    display:flex; gap:10px; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
    margin-inline:calc(-1 * var(--gutter)); padding:8px var(--gutter) 16px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .strip::-webkit-scrollbar{display:none}
  .strip__card{flex:0 0 auto; height:var(--sh); scroll-snap-align:start; aspect-ratio:auto}
  .strip__card.v{width:calc(var(--sh) * 9 / 16)}
  .strip__card.h{width:min(calc(var(--sh) * 16 / 9), 78vw)}
  .strip__card:hover{transform:none}
  .sell{grid-template-columns:1fr; gap:26px}
}

/* --- 7 · САЙТЫ · ссылки + окно предпросмотра --- */
.sites{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.5vw,76px);
  align-items:center;
}
.sites h2{font-size:var(--h2)}
.sites .accent-script{margin-top:6px}
.sites__kinds{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(18px,2.6vh,26px)}
.sites__kinds span{
  padding:7px 15px; border-radius:999px; font-size:13px; white-space:nowrap;
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.sites__why{margin-top:clamp(18px,2.6vh,26px); max-width:44ch; color:var(--text-secondary)}
.sites__list{list-style:none; margin:clamp(22px,3.4vh,34px) 0 0; padding:0; border-top:1px solid var(--border-glass)}
.sites__list a{
  display:grid; grid-template-columns:118px 1fr auto; align-items:baseline; gap:14px;
  padding:15px 4px; border-bottom:1px solid var(--border-glass); text-decoration:none;
  transition:color .3s var(--ease), padding .3s var(--ease);
}
.sites__kind{font-size:var(--caption); letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary)}
.sites__list b{font-size:clamp(16px,1.45vw,20px); letter-spacing:-.01em}
.sites__list i{font-style:normal; color:var(--text-secondary); transition:transform .3s var(--ease), color .3s var(--ease)}
.sites__list a:hover,.sites__list a[aria-current="true"]{color:var(--accent)}
.sites__list a:hover{padding-left:12px}
.sites__list a:hover i,.sites__list a[aria-current="true"] i{color:var(--accent)}
.sites__list a:hover i{transform:translate(3px,-3px)}

/* окно браузера: одна рамка, скрины меняются кросс-фейдом */
.browser{
  display:block; border-radius:12px; overflow:hidden; text-decoration:none;
  background:#141210; border:1px solid var(--border-glass);
  box-shadow:0 34px 80px rgba(0,0,0,.55);
  transform:perspective(1600px) rotateY(-5deg); transform-origin:left center;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.browser:hover{transform:perspective(1600px) rotateY(0deg); box-shadow:0 40px 90px rgba(0,0,0,.6)}
.browser__bar{display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; background:rgba(255,255,255,.05); border-bottom:1px solid var(--border-glass)}
.browser__bar > i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18)}
.browser__url{
  flex:1; margin:0 30px 0 12px; height:20px; border-radius:6px; background:rgba(255,255,255,.07);
  font-size:11px; line-height:20px; text-align:center; color:var(--text-secondary);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.browser__view{position:relative; display:block; aspect-ratio:16/10}
.browser__view img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top;
  opacity:0; transition:opacity .45s var(--ease);
}
.browser__view img.is-on{opacity:1}
@media (max-width:900px){
  .sites{grid-template-columns:1fr}
  .browser{transform:none; margin-top:4px}
  .sites__list a{grid-template-columns:1fr auto; row-gap:2px}
  .sites__kind{grid-column:1 / -1}
  .sites__list b{grid-row:2}
  .sites__list i{grid-row:2}
}

/* --- 6 · КЕЙСЫ · coverflow --- */
.flow{
  --cw:240px; --ch:340px;
  position:relative; height:calc(var(--ch) + 60px);
  margin-top:clamp(26px,4.5vh,44px);
  perspective:1400px; user-select:none; touch-action:pan-y; cursor:grab;
}
.flow.dragging{cursor:grabbing}
.flow__card{
  position:absolute; left:50%; top:50%;
  width:var(--cw); height:var(--ch);
  margin-left:calc(var(--cw) / -2); margin-top:calc(var(--ch) / -2);
  border:0; padding:0; border-radius:16px; overflow:hidden; cursor:pointer;
  background:var(--bg-card) center/cover no-repeat;
  box-shadow:0 26px 60px rgba(0,0,0,.5);
  transition:transform .62s var(--ease), opacity .62s var(--ease), filter .62s var(--ease);
}
.flow__card .tag{
  position:absolute; left:0; right:0; bottom:0; padding:28px 16px 16px;
  font-size:13px; line-height:1.3; text-align:left; color:var(--text-primary);
  background:linear-gradient(to top,rgba(12,10,9,.9),rgba(12,10,9,0));
  opacity:0; transition:opacity .4s var(--ease);
}
.flow__card.is-front .tag{opacity:1}
.flow__card .tag b{display:block; font-size:15px; letter-spacing:-.01em}
.flow__card .tag span{display:block; margin-top:3px; font-size:12px; color:var(--text-secondary)}
@media (max-width:760px){ .flow__card .tag{padding:22px 12px 12px} .flow__card .tag b{font-size:13px} .flow__card .tag span{font-size:11px} }

.case-info{
  margin-top:clamp(22px,3.4vh,34px); text-align:center;
  transition:opacity .28s var(--ease);
}
.case-info.fading{opacity:0}
.case-info b{display:block; font-size:clamp(20px,2.2vw,26px); font-weight:700; text-transform:uppercase; letter-spacing:.02em}
.case-info .role{margin-top:6px; font-size:var(--caption); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary)}
.case-info p{margin:10px auto 0; max-width:40ch; font-size:clamp(18px,1.8vw,23px); line-height:1.35; letter-spacing:-.01em}
.case-info .more{
  display:inline-block; margin-top:18px; color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .25s;
}
.case-info .more:hover{border-color:var(--accent)}
@media (max-width:760px){ .flow{--cw:180px; --ch:256px} }

/* --- 6 · ПОЧЕМУ Я --- */
#why{background:linear-gradient(to bottom,rgba(42,38,35,0) 0%,rgba(42,38,35,.34) 16%,rgba(42,38,35,.34) 84%,rgba(42,38,35,0) 100%)}
#why .head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(22px,5vw,80px); flex-wrap:wrap;
}
#why .title{
  font-size:clamp(28px,4.2vw,58px); line-height:1.04; letter-spacing:-.02em;
  text-transform:uppercase; max-width:18ch; flex:1 1 380px;
}
#why .aside{flex:0 1 auto; text-align:right; max-width:44ch; padding-bottom:.2em}
#why .aside .accent-script{margin-top:8px}
@media (max-width:860px){
  #why .head{display:block}
  #why .aside{text-align:left; max-width:52ch; margin-top:clamp(18px,2.6vh,26px)}
}

/* карточки-плашки: тот же liquid glass, что в меню и в hero */
.glass-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(10px,1.1vw,16px); margin-top:clamp(30px,5vh,48px);
}
.glass{
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-radius:18px; padding:clamp(20px,2.1vw,30px);
}
.glass b{
  display:block; font-size:clamp(20px,2.2vw,30px); line-height:1.05;
  letter-spacing:-.02em; text-transform:uppercase;
}
.glass > span{display:block; margin-top:9px; color:var(--text-secondary); font-size:var(--caption)}
.glass .rows{
  display:grid; grid-template-columns:auto 1fr; gap:12px clamp(16px,1.6vw,26px);
  margin:16px 0 0; color:var(--text-secondary); font-size:var(--caption); line-height:1.75;
}
.glass .rows dt{
  text-transform:uppercase; letter-spacing:.12em; color:var(--accent); white-space:nowrap;
}
.glass .rows dd{margin:0}
.c2{grid-column:span 2} .c3{grid-column:span 3} .c4{grid-column:span 4} .c6{grid-column:span 6}

@media (max-width:900px){
  .glass-grid{grid-template-columns:repeat(2,1fr)}
  .c2,.c3,.c4,.c6{grid-column:span 2}
}
@media (max-width:560px){
  .glass-grid{grid-template-columns:1fr}
  .c2,.c3,.c4,.c6{grid-column:span 1}
}

/* --- 7 · КОНТАКТЫ --- */
#contact{justify-content:center; text-align:center}
#contact h2{font-size:var(--h1); letter-spacing:-.03em}
.arrow{
  width:clamp(60px,7vw,80px); height:clamp(60px,7vw,80px); border-radius:50%;
  border:1px solid var(--accent); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin:clamp(28px,5vh,44px) auto;
  text-decoration:none; font-size:26px; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.arrow:hover{background:var(--accent); color:var(--bg-primary); transform:translateY(4px)}
#contact .invite{max-width:56ch; margin:0 auto; color:var(--text-secondary)}
#contact .btn{margin-top:32px}
.links{display:flex; flex-wrap:wrap; gap:clamp(18px,2.6vw,34px); justify-content:center; margin-top:clamp(36px,6vh,56px)}
/* иконка сети над подписью */
.links a,.links button{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:0; padding:0; cursor:pointer; font:inherit;
  color:var(--text-secondary); text-decoration:none; font-size:var(--caption); transition:color .25s;
}
.links .ico{
  width:26px; height:26px; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.links a:hover .ico{transform:translateY(-3px)}
.links a:hover,.links button:hover{color:var(--text-primary)}
.foot{
  margin-top:clamp(40px,7vh,64px); font-size:var(--caption); color:var(--text-secondary);
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:9px;
}
.foot .pin{width:15px; height:15px; fill:none; stroke:var(--accent); stroke-width:1.6; flex:0 0 auto}

/* ============================================================
   ОВЕРЛЕЙ (работа / кейс)
   ============================================================ */
.ov{
  position:fixed; inset:0; z-index:150; background:rgba(14,13,12,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:grid; grid-template-columns:60% 40%;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.ov.open{opacity:1; visibility:visible}
.ov__media{display:flex; align-items:center; justify-content:center; padding:clamp(20px,3vw,48px)}
.ov__slot.wide{width:min(100%,900px); aspect-ratio:16/9}
.ov__slot{
  width:min(100%,420px); aspect-ratio:9/16; border-radius:12px; background:var(--bg-card);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:24px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,249,249,.3);
}
.ov__text{background:var(--bg-card); padding:clamp(28px,3.4vw,56px); overflow-y:auto}
.ov__text h3{font-size:clamp(24px,2.6vw,34px); margin-bottom:6px}
.ov__handle{display:inline-block; margin-bottom:8px; color:var(--accent); text-decoration:none; font-size:15px}
.ov__handle:hover{text-decoration:underline}
.ov__field{margin-top:26px}
.ov__field .caption{display:block; margin-bottom:8px}
/* удобная длина строки в карточке кейса: ~60 знаков вместо ~100 */
.ov__field p, .ov__field ol{max-width:62ch}
.ov__close{
  position:absolute; top:20px; right:20px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:var(--bg-glass); border:1px solid var(--border-glass); color:var(--text-primary);
  font-size:20px; cursor:pointer; backdrop-filter:blur(16px);
}
.ov__top{display:none}
/* кейс: слева лента доказательств, справа текст */
.ov.is-case{grid-template-columns:42% 58%}
.ov.is-case .ov__media{display:block; overflow-y:auto; padding:clamp(24px,3vw,52px); padding-top:84px}
.ov.is-case .ov__text,.ov.is-work .ov__text{padding-bottom:104px}
/* стрелки кейса: назад — слева сверху, листать — внизу текстовой колонки */
.ov__back,.ov__prev,.ov__next{
  position:absolute; z-index:2; display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
  background:var(--bg-glass); border:1px solid var(--border-glass); color:var(--text-primary);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.ov__back svg,.ov__prev svg,.ov__next svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ov.is-case .ov__back,.ov.is-case .ov__prev,.ov.is-case .ov__next,
.ov.is-work .ov__back,.ov.is-work .ov__prev,.ov.is-work .ov__next{display:flex}
/* у видео текстовая колонка справа занимает 40% — левая стрелка встаёт в её начало */
.ov.is-work .ov__prev{left:calc(60% + clamp(28px,3.4vw,56px))}
.ov__back{top:20px; left:20px}
.ov__prev{bottom:28px; left:calc(42% + clamp(28px,3.4vw,56px))}
.ov__next{bottom:28px; right:clamp(28px,3.4vw,56px)}
.ov__back:hover,.ov__prev:hover,.ov__next:hover{border-color:var(--accent); color:var(--accent)}
.ov__back:hover,.ov__prev:hover{transform:translateX(-3px)}
.ov__next:hover{transform:translateX(3px)}
.ov__slot.proofs{
  width:100%; max-width:560px; margin:0 auto; aspect-ratio:auto; height:auto; padding:0;
  display:flex; flex-direction:column; align-items:stretch; gap:30px;
  background:none; border-radius:0; text-align:left;
  font-size:inherit; letter-spacing:0; text-transform:none; color:inherit;
}
.proof__label{
  display:flex; align-items:baseline; gap:10px; margin-bottom:10px;
  font-size:var(--caption); letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.proof__label i{font-style:normal; color:var(--text-secondary); letter-spacing:.04em}
.proof__imgs{display:flex; flex-direction:column; gap:10px}
/* несколько скринов — в ряд, одной высоты: ширина каждого пропорциональна его формату */
.proof__imgs.row{flex-direction:row; align-items:flex-start}
.proof__imgs.row img{width:0; min-width:0; flex-basis:0; flex-shrink:1}
.proof img{
  display:block; width:100%; height:auto; border-radius:12px;
  border:1px solid var(--border-glass); cursor:zoom-in;
}
/* видео-отзыв кружком, как в Telegram */
.vid{
  position:relative; width:min(100%,300px); aspect-ratio:1/1; border-radius:50%; overflow:hidden;
  border:1px solid var(--border-glass); cursor:pointer; background:#000;
}
.vid video{display:block; width:100%; height:100%; object-fit:cover}
.vid__btn{
  position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px;
  border:0; border-radius:50%; background:var(--accent); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.vid__btn::before{
  content:''; margin-left:4px;
  border-left:15px solid var(--bg-primary); border-top:9px solid transparent; border-bottom:9px solid transparent;
}
.vid:hover .vid__btn{transform:scale(1.06)}
.vid.playing .vid__btn{opacity:0}
.vid.playing:hover .vid__btn{opacity:.92}
.vid.playing .vid__btn::before{
  margin:0; width:15px; height:18px; border:0;
  background:linear-gradient(90deg,var(--bg-primary) 0 34%,transparent 34% 66%,var(--bg-primary) 66%);
}
.vid__ring{position:absolute; inset:0; pointer-events:none}
.vid__ring circle{fill:none; stroke:var(--accent); stroke-width:2.5; stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:50% 50%}
.proof__note{margin-top:10px; font-size:15px; color:var(--text-primary)}

/* набор фото под видео: коллаж по три в ряд */
.wgal{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.wgal img{
  display:block; width:100%; height:auto; border-radius:8px;
  border:1px solid var(--border-glass); cursor:zoom-in;
}

.audio{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:14px;
  background:var(--bg-glass); border:1px solid var(--border-glass);
}
.audio__btn{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.audio__btn:hover{background:var(--accent-hover); transform:scale(1.06)}
.audio__btn::before{
  content:''; margin-left:3px;
  border-left:12px solid var(--bg-primary); border-top:7px solid transparent; border-bottom:7px solid transparent;
}
.audio.playing .audio__btn::before{
  margin:0; width:12px; height:14px; border:0;
  background:linear-gradient(90deg,var(--bg-primary) 0 34%,transparent 34% 66%,var(--bg-primary) 66%);
}
.audio__body{flex:1; min-width:0}
.audio__note{font-size:15px; line-height:1.35; color:var(--text-primary)}
.audio__bar{position:relative; margin-top:10px; height:4px; border-radius:4px; background:rgba(255,255,255,.14); cursor:pointer}
.audio__bar i{position:absolute; inset:0 auto 0 0; width:0; border-radius:4px; background:var(--accent)}
.audio__time{flex:0 0 auto; font-size:12px; color:var(--text-secondary); font-variant-numeric:tabular-nums}

/* скрин на весь экран по клику */
.zoom{
  position:fixed; inset:0; z-index:210; background:rgba(10,9,8,.94);
  display:flex; align-items:center; justify-content:center; padding:3vh 3vw; cursor:zoom-out;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.zoom.open{opacity:1; visibility:visible}
.zoom img{max-width:100%; max-height:100%; border-radius:12px}

/* маленькое окно: ник крупно, по клику копируется */
.copy{
  position:fixed; inset:0; z-index:220; background:rgba(10,9,8,.86);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; visibility:hidden; transition:opacity .3s var(--ease), visibility .3s;
}
.copy.open{opacity:1; visibility:visible}
.copy__card{
  position:relative; text-align:center; max-width:min(92vw,520px);
  padding:clamp(28px,4vw,44px) clamp(24px,4vw,52px); border-radius:20px;
  background:var(--bg-glass); border:1px solid var(--border-glass);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.copy__val{
  display:block; width:100%; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--font-display); font-weight:700; color:var(--text-primary);
  font-size:clamp(24px,4.4vw,40px); letter-spacing:-.02em; line-height:1.15;
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.copy__val:hover{color:var(--accent); transform:translateY(-2px)}
.copy__hint{margin-top:14px; font-size:var(--caption); color:var(--text-secondary)}
.copy.done .copy__hint{color:var(--accent)}
.copy__x{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:none; border:0; color:var(--text-secondary); font-size:17px; cursor:pointer;
  transition:color .25s var(--ease);
}
.copy__x:hover{color:var(--text-primary)}

@media (max-width:860px){
  /* на телефоне прокручивается всё окно целиком, а не каждая колонка отдельно —
     иначе колонка с текстом сжимается до заголовка */
  .ov{grid-template-columns:1fr; grid-template-rows:auto auto; overflow-y:auto}
  .ov__text{overflow:visible}
  .ov__slot{aspect-ratio:9/16; width:auto; max-height:56svh; margin:0 auto}
  .ov.is-case{grid-template-columns:1fr}
  .ov.is-case .ov__media{overflow:visible}
  /* на телефоне у кейса свой порядок: шапка профиля, рассказ, доказательства.
     Раньше лента фото занимала весь экран, а текст уезжал в самый низ. */
  .ov.is-case{display:flex; flex-direction:column}
  .ov.is-case .ov__top{
    display:block; order:-2; background:var(--bg-card);
    padding:78px clamp(20px,5vw,28px) 0;
  }
  .ov.is-case .ov__top .proof__label{display:none}
  .ov.is-case .ov__top img{display:block; width:100%; height:auto; border-radius:12px; border:1px solid var(--border-glass)}
  .ov.is-case .ov__text{order:-1; padding-top:clamp(22px,4vw,30px); padding-bottom:clamp(24px,4vw,36px)}
  .ov.is-case .ov__media{padding-top:0; padding-bottom:88px}
  .ov.is-work .ov__text{padding-bottom:84px}   /* место под стрелки внизу экрана */
  .ov.is-work .ov__prev{left:16px}
  /* backdrop-filter у .ov делает его опорой для fixed — на мобильном фон и так почти сплошной, снимаем */
  .ov{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(14,13,12,.97)}
  .ov__close,.ov__back{position:fixed}
  .ov__prev,.ov__next{position:fixed; bottom:16px}
  .ov__prev{left:16px}
  .ov__next{right:16px}
  .ov__slot.proofs{max-height:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
}