/* ============================================================
   ПОРТФОЛИО · ИНСАФ
   Оглавление:
     01. Переменные (цвета, шрифты, отступы)
     02. Сброс и базовая типографика
     03. Общие детали: контейнер, заголовки, кнопки, плейсхолдеры
     04. Шапка
     05. Первый экран
     06. Сообщения (что передать автоматизации)
     07. Кейсы — тёмная полоса
     08. Галерея скриншотов
     09. Цены и калькулятор
     10. Таймлайн «как проходит работа»
     11. Обо мне
     12. Финальный призыв и подвал
     13. Плавающая кнопка
     14. Лайтбокс
     15. Появление при скролле
     16. Отключение анимаций (prefers-reduced-motion)
   ============================================================ */


/* ===== 01. ПЕРЕМЕННЫЕ ======================================= */
:root{
  /* Цвета. Меняете здесь — меняется на всём сайте */
  --ink:#101418;            /* основной текст и тёмная полоса */
  --paper:#F1F2F3;          /* фон страницы */
  --paper-2:#E8EAEC;        /* фон секции на ступень глубже — разделяет без линий */
  --surface:#FFFFFF;        /* пузыри, карточки */
  --muted:#5C6670;          /* вторичный текст */
  --accent:#0F6E4F;         /* единственный акцент */
  --accent-tint:#DCEBE4;    /* мягкая зелёная подложка */
  --accent-dk:#8AD3B6;      /* акцент на тёмном фоне */
  --line:#DCDFE2;           /* линии в 1px */

  /* На тёмной полосе кейсов эти значения переопределяются */
  --ph-bg:#E7E9EA;          /* фон плейсхолдера */
  --ph-fg:#8B949B;          /* текст плейсхолдера */

  /* Сетка */
  --wrap:1280px;            /* рабочая область шире — меньше пустых полей по краям */
  --gutter:20px;
  --header-h:56px;

  --r:12px;                 /* радиус скругления */
  --ease:cubic-bezier(.2,.7,.3,1);
  --slow:cubic-bezier(.16,1,.3,1);   /* уверенное прибытие, без отскока */
}

@media (min-width:760px){ :root{ --gutter:32px; --header-h:64px } }
@media (min-width:1100px){ :root{ --gutter:44px } }
@media (min-width:1400px){ :root{ --gutter:56px } }


/* ===== 02. СБРОС И БАЗА ===================================== */
*,*::before,*::after{ box-sizing:border-box }

html{
  overflow-x:clip;                                   /* страховка от горизонтального скролла */
  scrollbar-gutter:stable;                           /* страница не дёргается при открытии модалок */
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 16px);   /* якоря не уезжают под шапку */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  overflow-x:clip;
  background:var(--paper);
  color:var(--ink);
  font-family:"Golos Text","Segoe UI",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:760px){ body{ font-size:17px } }

h1,h2,h3,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0 }
img,svg,video{ display:block; max-width:100% }
[hidden]{ display:none !important }   /* иначе строка выше перебивает атрибут hidden */
button{ font:inherit; color:inherit }

a{ color:inherit; text-decoration:none }

/* Видимый фокус для клавиатуры — обязателен на всех элементах */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}
.cases :focus-visible,
.lb :focus-visible{ outline-color:var(--accent-dk) }

/* Ссылка «перейти к содержанию» — видна только с клавиатуры */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0 }


/* ===== 03. ОБЩИЕ ДЕТАЛИ ==================================== */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* Ритм секций: базовый шаг плотнее прежнего, а главный блок —
   кейсы — получает больше воздуха. Разница интервалов и создаёт ритм,
   одинаковый отступ везде читается как безразличие. */
.sec{ padding-block:clamp(56px,7vw,96px) }
.cases{ padding-block:clamp(72px,9vw,124px) }

/* Секция на ступень глубже. Разделяет соседние блоки материалом,
   а не линией: сверху мягкий переход из фона предыдущей секции. */
.sec--deep{ position:relative; background:var(--paper-2) }
.sec--deep::before{
  content:''; position:absolute; left:0; right:0; top:0; height:96px;
  background:linear-gradient(var(--paper),transparent);
  pointer-events:none;
}
.sec--deep > .wrap{ position:relative }

/* Мелкая надстрочная метка моноширинным */
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:''; display:inline-block; width:20px; height:1px;
  background:currentColor; opacity:.55; vertical-align:middle; margin-right:10px;
}
.eyebrow--dark{ color:var(--accent-dk) }

.sec__title{
  font-size:clamp(26px,5.4vw,40px);
  font-weight:600; line-height:1.14; letter-spacing:-.02em;
  max-width:24ch;
  margin:12px 0 clamp(28px,5vw,52px);
  text-wrap:balance;
}
.sec__title--dark{ color:#F2F4F5 }

/* --- Кнопки --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px;
  background:var(--accent); color:#fff;
  border:1px solid transparent; border-radius:10px;
  font-weight:500; font-size:16px; line-height:1.2;
  cursor:pointer; text-align:center;
  transition:background .22s var(--ease), transform .18s var(--slow),
             border-color .22s, box-shadow .28s var(--slow);
}
.btn:hover{ background:#0C5B41; transform:translateY(-1px); box-shadow:0 10px 24px -14px rgba(15,110,79,.75) }
.btn:active{ transform:translateY(1px); box-shadow:none }
.btn__ico{ width:16px; height:16px; flex:none }

.btn--ghost{ background:transparent; color:var(--ink); border-color:#C6CBCF }
.btn--ghost:hover{ background:rgba(16,20,24,.05); border-color:var(--ink) }

.btn--dark{ background:var(--accent-dk); color:#0A1F18 }
.btn--dark:hover{ background:#9BDDC3 }

.btn--ghostDark{ background:transparent; color:#EAEDEF; border-color:rgba(255,255,255,.28) }
.btn--ghostDark:hover{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.5) }

.btn--sm{ min-height:38px; padding:8px 16px; font-size:15px; border-radius:9px }
.btn--lg{ min-height:56px; padding:16px 30px; font-size:17px; border-radius:12px }

/* --- Медиа-контейнеры и плейсхолдеры ---
   Плейсхолдер виден всегда, а картинка проявляется поверх него,
   когда файл появится в папке assets. Сломанной картинки не будет. */
.media{
  position:relative; overflow:hidden;
  border-radius:var(--r);
  background:var(--ph-bg);
}
.media--3x4{ aspect-ratio:3/4 }
.media--4x3{ aspect-ratio:4/3 }

.media img,
.shot__view img,
.lb__img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0;
  /* --py задаёт скрипт при прокрутке (лёгкий параллакс),
     --ps меняется на наведении. Только transform и opacity — дёшево для браузера */
  transform:translate3d(0,var(--py,0px),0) scale(var(--ps,1));
  transition:opacity .45s var(--ease), transform .7s var(--slow);
}
/* Картинки с параллаксом чуть крупнее рамки, чтобы при сдвиге
   не показался край */
.casepic .media img,
.about__photo .media img{ --ps:1.06 }
.casepic:hover .media img,
.about__photo:hover .media img{ --ps:1.09 }
.shot__view:hover img{ --ps:1.045 }
.media.is-loaded img,
.shot__view.is-loaded img,
.lb__stage.is-loaded .lb__img{ opacity:1 }

.media.is-missing img,
.shot__view.is-missing img,
.lb__stage.is-missing .lb__img{ display:none }

.media.is-loaded .ph,
.shot__view.is-loaded .ph,
.lb__stage.is-loaded .ph{ opacity:0 }

.ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px; text-align:center;
  background:var(--ph-bg);
  color:var(--ph-fg);
  transition:opacity .3s var(--ease);
  /* очень слабая диагональная штриховка, чтобы блок читался как заготовка */
  background-image:repeating-linear-gradient(-45deg,
      rgba(0,0,0,.028) 0 1px, transparent 1px 9px);
}
.ph__label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.75;
}
.ph__file{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; line-height:1.4; word-break:break-all;
}
.ph__hint{ font-size:12px; opacity:.7 }


/* ===== 04. ШАПКА =========================================== */
.hdr{
  position:sticky; top:0; z-index:50;
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color .25s;
}
.hdr.is-stuck{ border-bottom-color:var(--line) }

.hdr__in{
  height:var(--header-h);
  display:flex; align-items:center; gap:16px;
}
.hdr__me{ display:flex; align-items:baseline; gap:8px; margin-right:auto; min-width:0 }
.hdr__name{ font-weight:600; letter-spacing:-.01em }
.hdr__role{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; color:var(--muted); white-space:nowrap;
}
/* Название длиннее прежнего, поэтому на узких экранах
   вторая строка в шапке убирается — иначе она наезжает на кнопку */
@media (max-width:639px){ .hdr__role{ display:none } }

.hdr__nav{ display:none; gap:26px; font-size:15px; color:var(--muted) }
.hdr__nav a{ position:relative; padding:4px 0; transition:color .2s }
.hdr__nav a:hover{ color:var(--ink) }
.hdr__nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.hdr__nav a:hover::after{ transform:scaleX(1) }

/* Раздел, в котором человек находится прямо сейчас */
.hdr__nav a.is-current{ color:var(--ink) }
.hdr__nav a.is-current::after{ transform:scaleX(1) }

@media (min-width:860px){ .hdr__nav{ display:flex } }
@media (max-width:559px){ .hdr__cta{ display:none } }


/* ===== 05. ПЕРВЫЙ ЭКРАН ==================================== */
.hero{ position:relative; padding-block:clamp(40px,7vw,80px) clamp(72px,9vw,96px) }

.hero__in{
  display:grid; gap:clamp(32px,6vw,56px);
  align-items:start;
}
@media (min-width:860px){
  .hero__in{ grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,80px); align-items:center }
}

/* Левая часть первого экрана собрана в одну композицию.
   Связывает её не рамка и не карточка, а «нить» слева — та же деталь,
   что идёт через весь сайт. Интервалы внутри плотные, поэтому четыре
   элемента читаются как один блок, а не как четыре отдельных. */
.hero__text{ position:relative; padding-left:clamp(16px,2.2vw,26px) }
.hero__text::before{
  content:''; position:absolute; left:0; top:8px; bottom:10px; width:1px;
  background:linear-gradient(var(--accent) 0%, var(--accent) 16%, var(--line) 58%, transparent 100%);
}

.hero__kicker{
  display:block; margin-bottom:16px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted);
}
.hero__title{
  font-size:clamp(31px,7.4vw,58px);
  font-weight:600; line-height:1.04; letter-spacing:-.034em;
  text-wrap:balance;
}
.hero__lead{
  margin-top:clamp(14px,2.2vw,18px);
  font-size:clamp(16px,4vw,19px);
  color:var(--muted);
  max-width:46ch;
}
.hero__actions{
  margin-top:clamp(20px,3vw,26px);
  display:flex; flex-wrap:wrap; gap:10px;
}
.hero__hint{
  margin-top:12px;
  font-size:13.5px; line-height:1.45; color:var(--muted); max-width:44ch;
}

/* Фото со смещённой рамкой — часть композиции, а не кружок в углу */
.hero__photo{ position:relative; max-width:320px; width:100%; margin-inline:0 }
@media (min-width:560px){ .hero__photo{ max-width:380px } }
@media (min-width:860px){ .hero__photo{ max-width:420px } }
.hero__photo::before{
  content:''; position:absolute; z-index:0;
  inset:16px -16px -16px 16px;
  border:1px solid var(--accent);
  border-radius:var(--r);
  opacity:.45;
}
.hero__photo .media{ position:relative; z-index:1 }

@media (min-width:860px){
  .hero__photo{ margin-inline:auto 0 }
}

/* Индикатор скролла — начало «нити» */
.scroller{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:clamp(40px,7vw,64px);
}
.scroller__line{
  position:relative; width:1px; height:44px; background:var(--line); overflow:hidden;
}
.scroller__line::after{
  content:''; position:absolute; left:0; top:0; width:1px; height:14px;
  background:var(--accent);
  animation:threadDrop 2.2s var(--ease) infinite;
}
.scroller__cap{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
@keyframes threadDrop{
  0%{ transform:translateY(-14px) } 60%,100%{ transform:translateY(44px) }
}


/* ===== 06. СООБЩЕНИЯ ======================================= */
.msgs{ list-style:none; display:flex; flex-direction:column; gap:10px; max-width:660px }

.msg{
  align-self:flex-start;
  max-width:min(94%,560px);
  display:flex; align-items:flex-end; gap:14px;
  padding:14px 17px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px 16px 16px 5px;   /* срезанный угол — намёк на хвостик */
  transition:transform .32s var(--slow), border-color .25s var(--ease);
}
.msg:hover{ transform:translateX(4px); border-color:#C6CDD2 }
.msg--out:hover{ transform:translateX(-4px) }
.msg__text{ font-size:clamp(15px,3.9vw,17px); line-height:1.45 }
.msg__time{
  flex:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; color:var(--muted); letter-spacing:.02em;
}

/* Единственный исходящий пузырь */
.msg--out{
  align-self:flex-end;
  margin-top:14px;
  background:var(--accent-tint);
  border-color:#C4DCD1;
  border-radius:16px 16px 5px 16px;
  color:#0B3A2C;
}
.msg--out .msg__time{ color:#3C6A5A }
.msg__meta{ flex:none; display:flex; align-items:center; gap:5px }
.msg__ticks{ width:17px; height:10px; color:var(--accent) }


/* ===== 07. КЕЙСЫ — ТЁМНАЯ ПОЛОСА =========================== */
.cases{
  background:var(--ink);
  color:#E8EBED;
  --muted:#98A2AA;
  --line:#2A3238;
  --ph-bg:#1A2126;
  --ph-fg:#6E7A82;
}

.case{
  padding-top:clamp(40px,6vw,64px);
  margin-top:clamp(40px,6vw,64px);
  border-top:1px solid var(--line);
}
.case:first-of-type{ padding-top:0; margin-top:0; border-top:0 }

/* --- Шапка кейса: номер + «нить» слева --- */
.case__head{ display:grid; gap:4px 22px; margin-bottom:clamp(26px,4vw,38px) }
@media (min-width:760px){
  .case__head{ grid-template-columns:auto 1fr; align-items:start }
}

.case__no{ display:flex; align-items:center; gap:12px }
.case__noText{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-dk); white-space:nowrap;
}
.case__thread{ flex:1; height:1px; background:var(--line) }
@media (min-width:760px){
  .case__no{ flex-direction:column; align-items:flex-start; gap:14px; padding-top:6px }
  .case__thread{ flex:none; width:1px; height:64px; background:linear-gradient(var(--accent-dk),transparent) }
}

.case__platform{
  display:inline-block; margin-bottom:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  border:1px solid var(--line); border-radius:100px; padding:4px 10px;
}
/* Плашка «в работе» на моём кейсе */
.case__wip{
  display:inline-block; margin:0 0 10px 8px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:#D8B36A;
  border:1px solid rgba(216,179,106,.4); border-radius:100px; padding:4px 10px;
}
.case__title{
  font-size:clamp(25px,6vw,42px);
  font-weight:600; line-height:1.08; letter-spacing:-.028em; color:#F4F6F7;
  text-wrap:balance;
}
.case__sub{ margin-top:10px; font-size:clamp(15px,3.9vw,18px); color:#C3CACF; max-width:40ch }
.case__client{ margin-top:12px; font-size:13px; color:var(--muted) }

/* --- Тело кейса --- */
.case__body{ display:grid; gap:clamp(26px,3.4vw,40px) }
@media (min-width:1000px){
  .case__body{ grid-template-columns:5fr 7fr; gap:clamp(30px,3.2vw,48px); align-items:start }
}
.case__col{ min-width:0; counter-reset:fact }

.fact{ margin-bottom:22px }

/* Подзаголовки кейса. Раньше терялись мелкой серой строкой — теперь
   это полноценная ступень: номер, название и хвост-линия во всю ширину.
   Структура кейса считывается с одного взгляда. */
.fact__label{
  display:flex; align-items:center; gap:11px;
  counter-increment:fact;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; font-weight:500; letter-spacing:.15em; text-transform:uppercase;
  color:#C9D1D6;
  margin-bottom:13px;
}
.fact__label::before{
  content:counter(fact,decimal-leading-zero);
  color:var(--accent-dk); font-size:11px; letter-spacing:.08em; flex:none;
}
.fact__label::after{
  content:''; flex:1; height:1px; min-width:20px; background:var(--line);
}
.fact__text{ color:#D3D9DD; max-width:52ch }

.did{ list-style:none; display:flex; flex-direction:column; gap:9px }
.did li{ position:relative; padding-left:20px; color:#D3D9DD }
.did li::before{
  content:''; position:absolute; left:0; top:.72em; width:9px; height:1px; background:var(--accent-dk);
}

/* Толстая цветная полоса слева — самый узнаваемый признак интерфейса,
   сгенерированного нейросетью. Убрал: блок и так выделен подложкой,
   зелёным номером и зелёной линией в подзаголовке. */
.result{
  margin-top:28px;                    /* просторный интервал перед выводом — это ритм */
  background:rgba(138,211,182,.11);
  border:1px solid rgba(138,211,182,.2);
  border-radius:var(--r);
  padding:20px 22px;
}
.result .fact__label{ color:var(--accent-dk) }
.result .fact__label::before{ color:#8AD3B6; opacity:.65 }
.result .fact__label::after{ background:rgba(138,211,182,.28) }
.result__text{ color:#E6EBEE }

/* Второй блок в моём кейсе — «а что получаю я». Тише первого:
   без зелёной заливки, только линия, чтобы не спорил с главным */
.result--mine{
  margin-top:16px;
  background:none;
  border-color:var(--line);
}
.result--mine .fact__label{ color:var(--muted) }
.did--tight{ margin-top:12px; gap:7px }
.did--tight li{ font-size:15px }

.case__actions{ margin-top:22px; display:flex; flex-wrap:wrap; gap:12px }
.case__actions .btn{ flex:1 1 auto; min-width:200px }
@media (min-width:560px){ .case__actions .btn{ flex:0 0 auto } }

/* Правая колонка моего кейса: вместо скриншотов — приглашение открыть бота */
.invite{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:clamp(24px,4vw,36px);
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:18px;
}
.invite__title{
  font-size:clamp(19px,4.6vw,24px); font-weight:600;
  letter-spacing:-.02em; line-height:1.2; color:#F2F4F5;
  text-wrap:balance;
}
.invite__text{ margin-top:12px; color:#C3CACF; max-width:44ch }
.invite__btn{ margin-top:clamp(20px,3vw,26px) }
.invite__note{
  margin-top:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; color:var(--muted);
}
@media (max-width:559px){ .invite__btn{ width:100% } }


/* --- Фото перед кейсом: живой кадр с объекта, до скриншотов --- */
.casepic{ margin-bottom:clamp(22px,3vw,30px) }
.casepic .media{ border-radius:16px; border:1px solid var(--line) }
.casepic__cap{ display:block; margin-top:14px }
.casepic__title{
  display:block;
  font-size:clamp(16px,4vw,18px); font-weight:600; letter-spacing:-.015em;
  color:#EEF1F3;
}
.casepic__text{
  display:block; margin-top:7px;
  font-size:14.5px; line-height:1.45; color:var(--muted); max-width:52ch;
}


/* ===== 08. ГАЛЕРЕЯ СКРИНШОТОВ ============================== */
.gal{
  position:relative;
  /* на мобильном лента выходит за поля — соседний скрин виден краем */
  margin-inline:calc(var(--gutter) * -1);
}
@media (min-width:960px){ .gal{ margin-inline:0 } }

.gal__track{
  display:flex; gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  padding-inline:var(--gutter);
  padding-block:2px;
  scroll-padding-left:var(--gutter);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.gal__track::-webkit-scrollbar{ display:none }
.gal__track.is-dragging{ cursor:grabbing; scroll-snap-type:none }
.gal__track.is-dragging .shot{ pointer-events:none }
.gal__track img{ -webkit-user-drag:none; user-select:none }

@media (min-width:960px){
  .gal__track{ padding-inline:0; scroll-padding-left:0 }
}

/* Слайд = экран + подпись под ним.
   Ширина подобрана так, чтобы в кадр входило примерно полтора скрина —
   тогда сразу понятно, что ленту можно листать. */
.shot{
  flex:0 0 auto;
  width:clamp(210px,66vw,300px);
  margin:0;
  scroll-snap-align:start;
}
@media (min-width:960px){ .shot{ width:330px } }

/* Рамка с самим скриншотом. Пропорция = реальный размер файлов 591x927 */
.shot__view{
  display:block; position:relative;
  width:100%;
  aspect-ratio:591/927;
  padding:0; margin:0;
  background:var(--ph-bg);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  cursor:zoom-in;
  transition:border-color .2s, transform .25s var(--ease);
}
.shot__view:hover{ border-color:#3D474E; transform:translateY(-3px) }

/* Подпись: что происходит на этом экране. Правится в index.html */
.shot__cap{
  margin-top:14px;
  font-size:15px;
  line-height:1.42;
  color:#B7BFC5;
  text-wrap:pretty;
}
@media (min-width:960px){ .shot__cap{ margin-top:16px; font-size:16px } }

/* Стрелки — только на десктопе */
.gal__arrow{
  display:none;
  position:absolute; top:50%; z-index:3;
  width:40px; height:40px; margin-top:-20px;
  align-items:center; justify-content:center;
  background:rgba(16,20,24,.82);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#EAEDEF; cursor:pointer;
  transition:background .2s, opacity .2s;
}
.gal__arrow svg{ width:20px; height:20px }
.gal__arrow:hover{ background:var(--ink) }
.gal__arrow[disabled]{ opacity:.25; cursor:default }
.gal__arrow--prev{ left:6px }
.gal__arrow--next{ right:6px }
@media (min-width:960px) and (hover:hover){ .gal__arrow{ display:flex } }

/* Точки-индикаторы */
.gal__dots{
  display:flex; gap:7px; justify-content:center; flex-wrap:wrap;
  margin-top:16px; padding-inline:var(--gutter);
}
@media (min-width:960px){ .gal__dots{ padding-inline:0; justify-content:flex-start } }

.gal__dot{
  width:22px; height:22px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center;
}
/* Точка растягивается через transform, а не через width:
   анимация ширины заставляет браузер пересчитывать раскладку и дёргается */
.gal__dot::before{
  content:''; width:18px; height:7px; border-radius:4px;
  background:#3E474D;
  transform:scaleX(.39); transform-origin:center;
  transition:transform .24s var(--slow), background .2s var(--ease);
}
.gal__dot[aria-current="true"]::before{ background:var(--accent-dk); transform:scaleX(1) }


/* ===== 09. ЦЕНЫ ============================================ */
.plans{ max-width:820px }

/* Раскладка задана именами областей, поэтому порядок тегов в HTML
   можно менять — цена всё равно останется справа от названия */
.plan{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "mark mark"
    "name price"
    "text text";
  column-gap:18px; row-gap:0;
  padding:24px 0;
  border-top:1px solid var(--line);
  transition:background-color .28s var(--ease);
}
.plan:last-of-type{ border-bottom:1px solid var(--line) }
.plan:not(.plan--pick):hover{ background:rgba(255,255,255,.6) }

.plan__main{ display:contents }   /* нужен только для группировки в HTML */

/* Пометка тарифа обычным регистром и без разрядки: та же мысль,
   но это уже не «мелкая капслочная надпись над заголовком» */
.plan__mark{
  grid-area:mark; margin-bottom:6px;
  font-size:14px; font-weight:500;
  color:var(--accent);
}
.plan__name{
  grid-area:name; align-self:baseline;
  font-size:clamp(18px,4.6vw,22px); font-weight:600; letter-spacing:-.015em;
}
.plan__price{
  grid-area:price; align-self:baseline;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(14px,3.7vw,17px); font-weight:500;
  white-space:nowrap; color:var(--ink);
}
.plan__text{ grid-area:text; margin-top:7px; color:var(--muted); max-width:60ch }

/* Средний уровень: вынесен на белую подложку, без галочек и бейджей */
/* Либо чёткий край, либо мягкая тень — вместе это признак
   сгенерированного интерфейса. Оставляю край: белая подложка
   на серой бумаге сама по себе поднимает карточку */
.plan--pick{
  background:var(--surface);
  border:1px solid #CFD5D9;
  border-radius:16px;
  padding:26px 24px;
  margin-block:8px;
}
@media (min-width:760px){
  .plan--pick{ margin-inline:-22px }
}

.plans__extra{ margin-top:26px; color:var(--muted); font-size:15px; max-width:62ch }

/* Блок с калькулятором под ценами */
.calc{
  margin-top:clamp(28px,4vw,40px);
  max-width:820px;
  display:flex; flex-wrap:wrap; align-items:center; gap:20px;
  padding:clamp(22px,4vw,28px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;   /* без цветной полосы слева — см. комментарий у .result */
}
.calc__text{ flex:1 1 300px; min-width:0 }
.calc__title{ font-size:clamp(17px,4.2vw,20px); font-weight:600; letter-spacing:-.015em }
.calc__sub{ margin-top:8px; color:var(--muted); font-size:15px; max-width:52ch }
.calc__btn{ flex:0 0 auto }
@media (max-width:559px){ .calc__btn{ width:100% } }


/* ===== 10. ТАЙМЛАЙН ======================================== */
.steps{
  --rail:11px;    /* положение линии от левого края */
  --pad:38px;     /* отступ текста от левого края */
  position:relative;
  padding-left:var(--pad);
  max-width:640px;
}
@media (min-width:760px){ .steps{ --rail:15px; --pad:52px } }

.steps__track{
  position:absolute; left:var(--rail); top:8px; bottom:8px;
  width:1px; background:var(--line);
}
.steps__fill{
  position:absolute; left:0; top:0; width:1px; height:0;
  background:var(--accent);
}

.steps__list{ list-style:none }

.step{ position:relative; padding-bottom:clamp(26px,4vw,36px) }
.step:last-child{ padding-bottom:0 }
.step::before{
  content:''; position:absolute; top:5px;
  left:calc(var(--rail) - var(--pad) - 5.5px);
  width:9px; height:9px; border-radius:50%;
  background:var(--paper); border:1px solid #C3C9CD;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.step.is-on::before{ background:var(--accent); border-color:var(--accent) }

.step__num{
  display:block; margin-bottom:5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; font-weight:500; letter-spacing:.14em;
  color:var(--muted); transition:color .3s;
}
.step.is-on .step__num{ color:var(--accent) }
.step__text{ font-size:clamp(16px,4.1vw,18px); max-width:34ch }


/* ===== 11. ОБО МНЕ ========================================= */
.about__in{ display:grid; gap:clamp(28px,5vw,52px); align-items:center }
@media (min-width:860px){
  .about__in{ grid-template-columns:5fr 7fr }
}
.about__photo{ max-width:460px; width:100% }
.about__title{ margin-bottom:18px }
.about__lead{ font-size:clamp(16px,4vw,19px); max-width:52ch }

.facts{ list-style:none; margin-top:26px; display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line) }
.facts li{
  background:var(--paper);
  /* текст не должен упираться в рамку списка — с обеих сторон есть отступ */
  padding:14px 18px 14px 24px;
  position:relative;
  font-size:15px; color:var(--muted);
}
.facts li::before{
  content:''; position:absolute; left:0; top:1.28em; width:10px; height:1px; background:var(--accent);
}


/* ===== 12. ФИНАЛЬНЫЙ ПРИЗЫВ И ПОДВАЛ ======================= */
.cta{ padding-bottom:clamp(72px,10vw,130px) }

/* «Нить» заканчивается точкой прямо над блоком */
.cta .wrap{ position:relative }
.cta__box{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:clamp(30px,6vw,60px) clamp(22px,5vw,56px);
  text-align:center;
  max-width:760px; margin-inline:auto;
}
.cta__box::before{
  content:''; position:absolute; left:50%; top:-42px;
  width:1px; height:34px; background:linear-gradient(transparent,var(--accent));
}
.cta__box::after{
  content:''; position:absolute; left:50%; top:-9px; margin-left:-3.5px;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}

.cta__title{
  font-size:clamp(23px,5.4vw,36px);
  font-weight:600; line-height:1.14; letter-spacing:-.025em;
  text-wrap:balance;
}
.cta__text{
  margin-top:16px; color:var(--muted);
  max-width:52ch; margin-inline:auto;
  font-size:clamp(15px,3.9vw,17px);
}
.cta__actions{
  margin-top:clamp(24px,4vw,32px);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
@media (max-width:479px){ .cta__actions .btn{ width:100% } }
.cta__note{
  margin-top:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; color:var(--muted);
}
.cta__alt{ margin-top:18px; font-size:14px; color:var(--muted) }
.cta__alt a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }

/* --- Подвал с контактами --- */
.foot{ border-top:1px solid var(--line); padding-block:clamp(32px,5vw,48px) }

.foot__in{
  display:grid; gap:clamp(24px,4vw,40px);
}
@media (min-width:700px){
  .foot__in{ grid-template-columns:1fr auto; align-items:start }
}

.foot__name{ font-size:clamp(18px,4.4vw,22px); font-weight:600; letter-spacing:-.015em }
.foot__role{ margin-top:6px; font-size:14px; color:var(--muted) }

.foot__links{ list-style:none; display:grid; gap:12px }
@media (min-width:480px){
  .foot__links{ grid-template-columns:repeat(2,auto); gap:14px 40px }
}
.foot__links li{ display:flex; flex-direction:column; gap:3px; min-width:0 }
.foot__key{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
}
.foot__links a{
  font-size:15px; color:var(--ink);
  text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;
  word-break:break-word;
  transition:text-decoration-color .2s, color .2s;
}
.foot__links a:hover{ color:var(--accent); text-decoration-color:var(--accent) }

.foot__bottom{
  margin-top:clamp(28px,4vw,40px); padding-top:20px;
  border-top:1px solid var(--line);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12px; color:var(--muted);
}


/* ===== 13. ПЛАВАЮЩАЯ КНОПКА (мобильная) ==================== */
.float{
  position:fixed; z-index:45;
  right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:inline-flex; align-items:center; gap:8px;
  min-height:46px; padding:11px 18px;
  background:var(--accent); color:#fff;
  border-radius:100px; font-size:15px; font-weight:500;
  box-shadow:0 8px 24px -8px rgba(15,110,79,.6);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.float.is-on{ opacity:1; transform:none; pointer-events:auto }
@media (min-width:900px){ .float{ display:none } }


/* ===== 14. ЛАЙТБОКС ======================================== */
.lb{
  width:100%; max-width:100vw;
  height:100%; max-height:100dvh;
  padding:0; border:0; margin:0;
  background:transparent; overflow:hidden;
}
.lb::backdrop{ background:rgba(10,14,18,.94) }
.lb[open]{ display:flex; align-items:center; justify-content:center }

.lb__stage{
  position:relative;
  height:min(84dvh,880px);
  aspect-ratio:591/927;
  max-width:92vw;
  border-radius:16px; overflow:hidden;
  background:#1A2126;
  --ph-bg:#1A2126; --ph-fg:#6E7A82;
}
.lb__stage .lb__img{ object-fit:contain; background:#0B0F12 }

.lb__count{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:8px; text-align:center;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.55));
}

.lb__close,
.lb__nav{
  position:absolute; z-index:4;
  width:44px; height:44px;
  display:grid; place-items:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%; color:#fff; cursor:pointer;
  transition:background .2s;
}
.lb__close:hover,.lb__nav:hover{ background:rgba(255,255,255,.22) }
.lb__close svg,.lb__nav svg{ width:22px; height:22px }

.lb__close{ top:calc(14px + env(safe-area-inset-top,0px)); right:14px }
.lb__nav{ top:50%; margin-top:-22px }
.lb__nav--prev{ left:8px }
.lb__nav--next{ right:8px }
@media (min-width:760px){
  .lb__nav--prev{ left:40px }
  .lb__nav--next{ right:40px }
}


/* ===== 15. ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ===========================
   Всё спрятано только внутри .js-motion — этот класс ставит
   скрипт. Нет скрипта или он упал — страница просто видна.
   Работает в обе стороны: ушло с экрана, вернулось — появилось снова. */

.js-motion .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .62s var(--slow), transform .62s var(--slow);
  transition-delay:calc(var(--i,0) * 65ms);
}
.js-motion .reveal.is-in{ opacity:1; transform:none }

/* Кейсы поднимаются заметнее остальных секций */
.js-motion .case.reveal{ transform:translateY(26px); transition-duration:.72s }

/* Шапка кейса и каждый блок внутри колонок выезжают по очереди */
.js-motion .case__head,
.js-motion .case__col > *{
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--slow), transform .6s var(--slow);
}
.js-motion .case.is-in .case__head,
.js-motion .case.is-in .case__col > *{ opacity:1; transform:none }

.js-motion .case.is-in .case__head{ transition-delay:.05s }

.js-motion .case.is-in .case__col > *:nth-child(1){ transition-delay:.12s }
.js-motion .case.is-in .case__col > *:nth-child(2){ transition-delay:.19s }
.js-motion .case.is-in .case__col > *:nth-child(3){ transition-delay:.26s }
.js-motion .case.is-in .case__col > *:nth-child(4){ transition-delay:.33s }
.js-motion .case.is-in .case__col > *:nth-child(5){ transition-delay:.40s }

/* Правая колонка чуть позже левой: сначала читаем, потом смотрим */
.js-motion .case.is-in .case__col--media > *:nth-child(1){ transition-delay:.22s }
.js-motion .case.is-in .case__col--media > *:nth-child(2){ transition-delay:.30s }
.js-motion .case.is-in .case__col--media > *:nth-child(3){ transition-delay:.38s }

/* Строки-факты в блоке «Обо мне» проявляются по одной */
.js-motion .facts li{
  opacity:0; transform:translateY(10px);
  transition:opacity .48s var(--slow), transform .48s var(--slow);
}
.js-motion .about__text.is-in .facts li{ opacity:1; transform:none }
.js-motion .about__text.is-in .facts li:nth-child(1){ transition-delay:.18s }
.js-motion .about__text.is-in .facts li:nth-child(2){ transition-delay:.25s }
.js-motion .about__text.is-in .facts li:nth-child(3){ transition-delay:.32s }
.js-motion .about__text.is-in .facts li:nth-child(4){ transition-delay:.39s }
.js-motion .about__text.is-in .facts li:nth-child(5){ transition-delay:.46s }
.js-motion .about__text.is-in .facts li:nth-child(6){ transition-delay:.53s }

/* Оркестрованное появление первого экрана: заголовок → текст → кнопки → фото
   Общая длительность ~850мс, проигрывается один раз */
@keyframes heroIn{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }
.hero__title  { animation:heroIn .42s var(--ease) 0ms   both }
.hero__lead   { animation:heroIn .42s var(--ease) 130ms both }
.hero__actions{ animation:heroIn .42s var(--ease) 250ms both }
.hero__photo  { animation:heroIn .48s var(--ease) 370ms both }
.scroller     { animation:heroIn .4s  var(--ease) 620ms both }


/* ===== 16. ОТКЛЮЧЕНИЕ АНИМАЦИЙ ============================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .case__head,
  .case__col > *,
  .facts li{ opacity:1 !important; transform:none !important }
  .scroller__line::after{ display:none }
  .shot__view:hover,.msg:hover,.btn:hover{ transform:none }
  /* без параллакса и без наплыва картинок */
  .media img,.shot__view img{ --py:0px !important; --ps:1 !important }
}