/* =========================================================================
   SkyLab — фронтенд в визуальной системе readycode.ru на нашей палитре.

   Что перенесено от эталона (код написан свой, ассеты и тексты наши):
     • светлая доминанта и тёмные акцентные полосы вместо тёмной доминанты;
     • контейнер 1410px, крупные вертикальные отступы, шаг сетки 1.875rem;
     • Geologica 500 в заголовках, Onest в тексте, моноширинного больше нет;
     • шапка в две строки: тонкая верхняя с контактами и основная;
     • шапка секции — заголовок слева, описание справа, выровнены по низу;
     • кнопки-пилюли с заливкой, расходящейся кругом при наведении;
     • подчёркивание ссылок анимацией scaleX справа налево;
     • карточки радиусом 1.25rem и сетка с волосяными границами.

   Цвета остались наши: #5956E9 на #02050A / #FEFEFE.

   Разделение ответственности в CSS прежнее:
     .band    — только цвет фона и цвет текста
     .section — только вертикальные отступы
     .wrap    — только ширина и горизонтальные поля
   ========================================================================= */

/* ── 1. Токены ─────────────────────────────────────────────────────────── */
:root{
  /* Цвет */
  --void:#02050A;          /* тёмная акцентная полоса */
  --slate:#0E1424;         /* карточка на тёмном */
  --slate-hi:#151C30;      /* карточка на тёмном при наведении */
  --indigo:#5956E9;        /* бренд-акцент */
  --indigo-hi:#7472FF;     /* акцент при наведении */
  --indigo-lo:#A9A7FF;     /* акцент на тёмном фоне: контраста хватает */
  --indigo-dim:rgba(89,86,233,.10);
  --indigo-dim2:rgba(89,86,233,.18);
  --sky:#6EE7F9;           /* только статус «запущен» и ничего больше */
  --paper:#FEFEFE;         /* фон страницы */
  --frost:#EEF0F6;         /* светлая поверхность */
  --frost-hi:#F7F8FC;      /* светлая поверхность посветлее */
  --ink:#0B1120;           /* текст на светлом */
  --mute-d:#8590AC;        /* вторичный текст на тёмном */
  --mute-l:#5C6784;        /* вторичный текст на светлом */
  --line-d:rgba(255,255,255,.09);
  --line-l:#E6E9F2;        /* волосяная граница на светлом */
  --danger:#E5484D;
  --ok:#35B879;            /* точка «на связи» в шапке */

  /* Шрифт */
  --f-display:"Geologica","Trebuchet MS",sans-serif;
  --f-body:"Onest","Segoe UI",system-ui,sans-serif;

  /* Шкала. Эталон масштабирует весь макет через em; повторяем через rem —
     корневой размер объявлен в rem, поэтому системная настройка шрифта живёт. */
  --t-h1:4.375rem;
  --t-h2:3rem;
  --t-h3:1.375rem;
  --t-lead:1.125rem;
  --t-sm:.9375rem;
  --t-xs:.8125rem;

  /* Ритм */
  --wrap:1410px;
  --gut:2.5rem;
  --sec:7.5rem;            /* единое поле секции */
  --sec-sm:7.5rem;         /* раньше были «компактные» — теперь везде одинаково */
  --gap:1.875rem;          /* базовый шаг сетки эталона */
  --r:1.25rem;             /* карточка */
  --r-sm:.75rem;           /* поле ввода, мелкий элемент */
  --r-pill:999px;
}

@media (max-width:1280px){
  :root{--t-h1:3.5rem;--t-h2:2.25rem;--t-h3:1.25rem;--gut:1.75rem;--sec:5rem;--sec-sm:3.75rem}
}
@media (max-width:760px){
  :root{--t-h1:2rem;--t-h2:1.625rem;--t-h3:1.125rem;--t-lead:1rem;
        --gut:1.15rem;--sec:3.75rem;--sec-sm:3rem;--gap:1.25rem;--r:1rem}
}

/* ── 2. Сброс и база ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
/* Атрибут hidden должен побеждать любой класс с display.
   Без этого правила .btn, .mnav и подобные остаются видимыми, когда скрыты из JS. */
[hidden]{display:none!important}
/* Якоря: липкая шапка не накрывает заголовок секции при переходе по меню */
section[id],[id="top"]{scroll-margin-top:clamp(4.5rem,10.5vw,9.5rem)}
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  /* Пропорциональное масштабирование макета, как em-шкала у эталона.
     Значения в rem, а не в px, — системный размер шрифта продолжает работать. */
  font-size:clamp(.9375rem,.34vw + .82rem,1.0625rem);
}
body{
  margin:0;
  font-family:var(--f-body);
  font-size:1rem;
  line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* Намеренно БЕЗ overflow-x:hidden — он ломает position:sticky у шапки.
     Декор первого экрана обрезается своим .hero{overflow:hidden}. */
}
/* height:auto обязателен: атрибут height в разметке иначе перебивает aspect-ratio */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}

::selection{background:var(--indigo);color:#fff}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:4px}
.band--dark :focus-visible{outline-color:var(--sky)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:200;
  padding:.7rem 1.2rem;background:var(--indigo);color:#fff;border-radius:0 0 var(--r-sm) var(--r-sm);
  text-decoration:none;transition:top .18s;
}
.skip:focus{top:0}

/* ── 3. Раскладка ──────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.band{position:relative}
.band--dark{background:var(--void);color:var(--paper)}
.band--light{background:var(--paper);color:var(--ink)}
/* Серая подложка — вторая светлая поверхность эталона */
.band--frost{background:var(--frost);color:var(--ink)}

.section{padding-block:var(--sec)}
.section--sm{padding-block:var(--sec)}
.section--tight{padding-top:0}
/* Соседи одного цвета: верхнее поле убираем, иначе между ними складываются два поля (≈300px).
   Так расстояние между любыми двумя блоками = одно поле секции, везде одинаковое. */
.band--light + .band--light.section{padding-top:0}
.band--dark + .band--dark.section{padding-top:0}

/* Эталон не уводит заголовок в липкую боковую колонку: шапка секции идёт
   поперёк, контент — под ней во всю ширину. Класс .grid-hd остался
   в разметке и теперь работает просто обёрткой. */
.grid-hd{display:block}

/* ── 4. Типографика секций ─────────────────────────────────────────────── */
/* Пилюля-бейдж вместо моноширинной строчки — так метка выглядит у эталона */
.label{
  /* В grid/flex-контейнерах не растягивается: всегда по ширине текста */
  display:inline-block;margin:0 0 1.25rem;justify-self:start;align-self:start;width:max-content;max-width:100%;
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--indigo-dim);color:var(--indigo);
  font-size:var(--t-xs);font-weight:500;line-height:1;
}
.band--dark .label{background:rgba(255,255,255,.08);color:var(--indigo-lo)}

.h1,.h2,.hero__h1{
  font-family:var(--f-display);font-weight:500;letter-spacing:-.01em;
  /* Длинные русские слова обязаны переноситься, иначе заголовок
     вылезает из своей колонки в шапке секции */
  overflow-wrap:break-word;
}
.h2{font-size:var(--t-h2);line-height:1.12}
.h2 em,.h2 span,.hero__h1 em{font-style:normal;color:var(--indigo)}
.band--dark .h2 em,.band--dark .h2 span{color:var(--indigo-lo)}

/* Шапка секции: заголовок слева, описание справа, выровнены по нижнему краю */
.hd{display:grid;gap:1.25rem;margin-bottom:clamp(2rem,3.6vw,3.125rem)}
.hd > .label{margin-bottom:0}
.hd__sub{color:var(--mute-l);font-size:var(--t-lead);line-height:1.5;max-width:46ch}
.band--dark .hd__sub{color:var(--mute-d)}
@media (min-width:1000px){
  .hd{grid-template-columns:minmax(0,1fr) minmax(0,26.5rem);gap:1.25rem var(--gap);align-items:end}
  .hd > .label{grid-column:1;grid-row:1;justify-self:start}
  .hd > .h2{grid-column:1;grid-row:2}
  .hd > .hd__sub{grid-column:2;grid-row:2;align-self:end;margin:0}
}
/* Класс остался от прежнего макета — центровки у эталона нет */
.hd--center{text-align:left;max-width:none;margin-inline:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;border-radius:var(--r-pill);
  background:var(--frost);color:var(--mute-l);
  font-size:var(--t-xs);line-height:1;
}
.eyebrow::before{content:"";width:.4rem;height:.4rem;border-radius:50%;background:var(--ok);flex:none}
.band--dark .eyebrow{background:rgba(255,255,255,.08);color:var(--paper)}

.num{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em}

/* ── 5. Кнопки ─────────────────────────────────────────────────────────── */
/* Форма эталона: пилюля со стрелкой и заливкой, расходящейся кругом
   из центра при наведении. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1.15rem 2rem;border:1px solid transparent;border-radius:var(--r-pill);
  font-weight:500;font-size:var(--t-sm);line-height:1.2;text-decoration:none;
  cursor:pointer;transition:color .3s,border-color .3s,background-color .3s;
}
.btn::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:0;height:0;
  border-radius:50%;transform:translate(-50%,-50%);
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1);
}
.btn:hover::before{width:250%;height:34rem}
.btn::after{content:"\2192";font-size:1em;line-height:1;transition:transform .3s}
.btn:hover::after{transform:translateX(.25rem)}
.btn--noarrow::after{content:none}

.btn--sm{padding:.8rem 1.35rem;font-size:var(--t-xs)}
.btn--full{width:100%}

.btn--primary{background:var(--indigo);color:#fff}
.btn--primary::before{background:var(--ink)}
.band--dark .btn--primary::before{background:var(--indigo-hi)}

.btn--ghost{background:transparent;border-color:var(--line-l);color:var(--ink)}
.btn--ghost::before{background:var(--frost)}
.btn--ghost:hover{border-color:var(--ink)}
.band--dark .btn--ghost{border-color:var(--line-d);color:var(--paper)}
.band--dark .btn--ghost::before{background:rgba(255,255,255,.10)}
.band--dark .btn--ghost:hover{border-color:rgba(255,255,255,.4)}

.btn__note{font-weight:400;font-size:var(--t-xs);opacity:.7}

/* Текстовая ссылка с подчёркиванием, которое приезжает справа налево */
.ulink{position:relative;text-decoration:none;color:var(--indigo);transition:color .3s}
.ulink::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.57,.01,.29,.99);
}
.ulink:hover::after{transform:scaleX(1);transform-origin:left}

/* ── 6. Шапка ──────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line-l),0 12px 32px -20px rgba(11,17,32,.28)}

/* Верхняя тонкая строка: мессенджеры слева, почта и телефон справа */
.hdr__top{border-bottom:1px solid var(--line-l);font-size:var(--t-xs)}
.hdr__top-in{display:flex;align-items:center;justify-content:space-between;gap:1.25rem;padding-block:.8rem}
.hdr__soc{display:flex;align-items:center;gap:1.25rem}
.hdr__soc a{display:inline-flex;align-items:center;gap:.4rem;color:var(--mute-l);text-decoration:none;transition:color .3s}
.hdr__soc a:hover{color:var(--indigo)}
.hdr__soc svg{width:1.05rem;height:1.05rem;fill:currentColor;flex:none}
.hdr__top-r{display:flex;align-items:center;gap:1.5rem}
.hdr__top-r a{color:var(--mute-l);text-decoration:none;transition:color .3s}
.hdr__top-r a:hover{color:var(--indigo)}
@media (max-width:900px){.hdr__top{display:none}}

/* Основная строка */
.hdr__in{display:flex;align-items:center;gap:1.5rem;padding-block:1.35rem}
.hdr__logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:none}
.hdr__logo img{height:2.1rem;width:auto;display:block}
.hdr__nav{display:none;gap:1.875rem;margin-left:2.5rem;font-size:var(--t-sm)}
.hdr__nav a{position:relative;text-decoration:none;color:var(--mute-l);transition:color .3s}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:-5px;width:100%;height:2px;background:var(--indigo);
  transform:scaleX(0);transform-origin:right;
  transition:transform .3s cubic-bezier(.57,.01,.29,.99);
}
.hdr__nav a:hover{color:var(--indigo)}
.hdr__nav a:hover::after{transform:scaleX(1);transform-origin:left}

.hdr__act{display:flex;align-items:center;gap:.6rem;margin-left:auto}
@media (min-width:900px){.hdr__act{gap:1rem}}
/* Кнопку прячем на узких экранах только там, где её заменяет бургер.
   На внутренних страницах бургера нет — кнопка «На главную» обязана остаться.
   Если :has() не поддержан, кнопка просто останется видимой: это безопаснее,
   чем спрятать единственный элемент управления. */
@media (max-width:899px){
  .hdr__in:has(.burger) .hdr__act .btn{display:none}
}
/* Телефон и режим работы с точкой «на связи» — деталь эталона */
.hdr__phone{display:none;flex-direction:column;align-items:flex-end;line-height:1.2}
.hdr__phone a{font-size:var(--t-sm);font-weight:500;text-decoration:none;transition:color .3s}
.hdr__phone a:hover{color:var(--indigo)}
.hdr__phone span{display:flex;align-items:center;gap:.35rem;margin-top:.25rem;font-size:var(--t-xs);color:var(--mute-l)}
.hdr__phone span::before{content:"";width:.375rem;height:.375rem;border-radius:50%;background:var(--ok);flex:none}

@media (min-width:900px){
  .hdr__nav{display:flex}
  .hdr__phone{display:flex}
}

/* Иконки телефона и чата — только там, где есть бургер (до 900px) */
.hdr__ico{
  display:none;width:2.75rem;height:2.75rem;border-radius:var(--r-sm);border:0;
  background:var(--frost);color:var(--ink);place-items:center;cursor:pointer;text-decoration:none;
  transition:background-color .2s,color .2s;
}
.hdr__ico svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdr__ico:hover,.hdr__ico:active{background:var(--indigo);color:#fff}
@media (max-width:899px){.hdr__ico{display:grid}}
.burger{display:grid;gap:5px;width:2.75rem;height:2.75rem;place-content:center;background:var(--frost);border:0;border-radius:var(--r-sm);cursor:pointer}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
@media (min-width:900px){.burger{display:none}}

/* .mnav[hidden] обязателен: класс с display:grid перебивает штатный [hidden]{display:none} */
.mnav{display:grid;padding:.5rem var(--gut) 1.5rem;border-top:1px solid var(--line-l);background:var(--paper)}
.mnav[hidden]{display:none}
@media (min-width:900px){.mnav{display:none}}
.mnav a{padding:.95rem 0;text-decoration:none;color:var(--mute-l);border-bottom:1px solid var(--line-l);font-size:var(--t-sm)}
.mnav a:last-child{border-bottom:0;color:var(--indigo);font-weight:500}

/* ── 7. Первый экран ───────────────────────────────────────────────────── */
.hero{padding-block:5rem 4.375rem;overflow:hidden;background:var(--paper)}
@media (max-width:1280px){.hero{padding-block:3.75rem 2.5rem}}

/* У эталона в правом верхнем углу крупная фирменная графика.
   Свою собираю из градиентов: концентрические кольца бренд-цвета. */
.hero__deco{
  position:absolute;top:-9rem;right:clamp(1rem,6vw,9rem);width:48rem;height:48rem;
  pointer-events:none;z-index:0;
  background:
    radial-gradient(closest-side,var(--indigo-dim2),transparent 72%),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 2.4rem,rgba(89,86,233,.13) 2.4rem 2.47rem);
  -webkit-mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);
          mask-image:radial-gradient(closest-side,#000 26%,transparent 76%);
}
@media (max-width:1000px){.hero__deco{top:-16rem;right:-18rem;width:38rem;height:38rem}}

.hero > .wrap{position:relative;z-index:1}
/* Одна колонка: бейдж → H1 → лид → кнопки. Правая часть намеренно пустая —
   её держат декоративные кольца, это и есть противовес заголовку.
   Двухколоночный вариант (лид справа внизу) спорил с заголовком: убран 21.08.2026. */
.hero__in{display:grid;gap:2rem;max-width:66rem}
.hero__l{min-width:0}

.hero__h1{font-size:var(--t-h1);line-height:1.1;letter-spacing:-.02em;margin:1.5rem 0 0}
.hero__r{display:grid;gap:1.75rem;align-content:start}
.hero__lead{font-size:var(--t-lead);line-height:1.55;color:var(--mute-l);max-width:54ch}
.hero__acts{display:flex;flex-wrap:wrap;gap:.85rem}

/* ── 8. Табло запусков (разметки на странице нет, рендер в main.js спит) ── */
.board{margin-top:var(--sec-sm);border:1px solid var(--line-l);border-radius:var(--r);background:var(--frost-hi);overflow:hidden}
.board__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.75rem;padding:1.1rem 1.35rem;border-bottom:1px solid var(--line-l)}
.board__title{font-size:var(--t-xs);font-weight:500;color:var(--mute-l)}
.board__meta{font-size:var(--t-xs);color:var(--mute-l);display:flex;align-items:center;gap:.5rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(53,184,121,.16)}
.board__scroll{overflow-x:auto}
.board__tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:var(--t-sm)}
.board__tbl th{padding:.7rem 1.35rem;text-align:left;font-weight:500;font-size:var(--t-xs);color:var(--mute-l);border-bottom:1px solid var(--line-l)}
.board__tbl td{padding:.8rem 1.35rem;border-bottom:1px solid var(--line-l)}
.board__tbl tr:last-child td{border-bottom:0}
.board__tbl tbody tr{transition:background .16s}
.board__tbl tbody tr:hover{background:var(--indigo-dim);cursor:pointer}
.b-city,.b-type,.b-term{color:var(--mute-l)}
.b-proj{color:var(--ink);font-weight:500}
.b-stat{color:var(--ok);white-space:nowrap}
.b-stat::before{content:"\25CF\00A0";font-size:.7em;vertical-align:1px}
.board__tbl tbody tr{opacity:0;transform:translateY(8px);animation:row .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes row{to{opacity:1;transform:none}}

/* ── 9. Полоса цифр ────────────────────────────────────────────────────── */
/* У эталона числа залиты градиентом бренд-цвета — приём переносим */
.trust{padding-block:0 var(--sec)}
.trust__grid{display:grid;gap:2rem var(--gap);grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.trust__grid{grid-template-columns:repeat(4,1fr)}}
.trust__it{display:grid;gap:.5rem;align-content:start}
/* Заливка числа градиентом. Цвет объявлен до @supports: если background-clip:text
   не поддержан, число остаётся видимым бренд-цветом, а не пропадает. */
/* Своя шкала, а не --t-h1: в ячейках стоят «9 лет» и «3–6», а не «12».
   На полном размере заголовка такие строки выходят из колонки. */
.trust__it .num{font-size:clamp(2rem,1.1rem + 2.8vw,3.5rem);line-height:1;color:var(--indigo)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .trust__it .num{
    background:linear-gradient(24deg,var(--indigo) -6%,#9C9AFF 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.trust__it span{font-size:var(--t-sm);color:var(--mute-l);line-height:1.45}

/* ── 10. Услуги ────────────────────────────────────────────────────────── */
/* Карточка эталона при наведении заливается бренд-цветом целиком */
/* Карусель: слайды растут до высоты самого высокого, «peek» — следующая карточка
   выглядывает справа. Секция режет переполнение, чтобы не было горизонтального скролла. */
#services{overflow:hidden}
/* Peek только справа: слева пролистанные слайды режем, чтобы не торчали из-за края контейнера.
   Отрицательные верх/низ — чтобы не срезать подъём и тень карточки при наведении. */
.svc-swiper,.proc-swiper{overflow:visible;clip-path:inset(-2rem -100vw -2.5rem 0)}
.svc-swiper .swiper-slide{height:auto}
/* Фолбэк без JS/Swiper: обычная сетка */
.svc-swiper:not(.swiper-initialized) .svc{display:grid;gap:var(--gap)}
@media (min-width:640px){.svc-swiper:not(.swiper-initialized) .svc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.svc-swiper:not(.swiper-initialized) .svc{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1320px){.svc-swiper:not(.swiper-initialized) .svc{grid-template-columns:repeat(4,1fr)}}
.svc-swiper:not(.swiper-initialized) ~ .svc-nav{display:none}

/* Стрелки и буллеты под каруселью.
   flex:none и width:auto обязательны: Swiper ставит блоку буллетов width:100%,
   тот распирает контейнер и сжимает круглые кнопки в овалы. */
.svc-nav{display:flex;align-items:center;gap:.6rem;margin-top:clamp(1.5rem,3vw,2.25rem)}
.svc-nav__btn{
  flex:none;width:3.25rem;height:3.25rem;padding:0;border-radius:50%;border:0;
  background:var(--frost);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  transition:background-color .25s,color .25s,transform .25s,box-shadow .25s,opacity .25s;
}
.svc-nav__btn svg{width:1.15rem;height:1.15rem;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-nav__btn:hover{background:var(--indigo);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(89,86,233,.6)}
.svc-nav__btn:active{transform:translateY(0)}
.svc-nav__btn.swiper-button-disabled{opacity:.3;pointer-events:none}
.svc-nav__pag{
  position:static!important;width:auto!important;margin:0 0 0 .9rem;
  display:flex;align-items:center;gap:.45rem;
}
.svc-nav__pag .swiper-pagination-bullet{width:.5rem;height:.5rem;margin:0!important;background:var(--line-l);opacity:1;border-radius:999px;transition:width .3s,background-color .3s}
.svc-nav__pag .swiper-pagination-bullet:hover{background:var(--indigo-lo)}
.svc-nav__pag .swiper-pagination-bullet-active{width:1.6rem;background:var(--indigo)}
.svc__it{
  position:relative;overflow:hidden;
  background:var(--frost);border-radius:var(--r);
  padding:2rem 2rem 1.75rem;display:flex;flex-direction:column;gap:.7rem;
  color:var(--ink);text-decoration:none;
  transition:background-color .35s,color .35s,transform .35s,box-shadow .35s;
}
.svc__it:hover,.svc__it:focus-visible{
  background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-hi) 100%);
  color:#fff;transform:translateY(-4px);box-shadow:0 22px 50px -20px rgba(89,86,233,.55);
}
.svc__it > *{position:relative;z-index:1}
.svc__it h3{font-family:var(--f-display);font-weight:500;font-size:clamp(1.4rem,1.15rem + .8vw,1.75rem);line-height:1.2;letter-spacing:-.01em;margin:.5rem 0 .5rem}
.svc__it p{color:var(--mute-l);font-size:var(--t-sm);transition:color .35s}
.svc__it:hover p{color:rgba(255,255,255,.85)}

/* Иконка в скруглённом квадрате */
.svc__ico{
  width:3.5rem;height:3.5rem;border-radius:1rem;display:grid;place-items:center;
  background:#fff;color:var(--indigo);
  transition:background-color .35s,color .35s;
}
.svc__ico svg{width:1.6rem;height:1.6rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svc__it:hover .svc__ico{background:rgba(255,255,255,.16);color:#fff}

/* Буллеты «что входит» */
.svc__list{display:grid;gap:.4rem;margin:.25rem 0 0;padding:0;list-style:none}
.svc__list li{
  position:relative;padding-left:1.1rem;font-size:var(--t-xs);line-height:1.45;color:var(--mute-l);
  transition:color .35s;
}
.svc__list li::before{content:"";position:absolute;left:0;top:.5em;width:.45rem;height:.45rem;border-radius:50%;background:var(--indigo);opacity:.7;transition:background .35s}
.svc__it:hover .svc__list li{color:rgba(255,255,255,.85)}
.svc__it:hover .svc__list li::before{background:#fff}

/* Срок: подпись + значение */
.svc__term{display:grid;gap:.15rem;margin-top:auto;padding-top:1.25rem}
.svc__term span{font-size:var(--t-xs);color:var(--mute-l);transition:color .35s}
.svc__term b{font-weight:600;color:var(--ink);font-size:1.05rem;transition:color .35s}
.svc__it:hover .svc__term span{color:rgba(255,255,255,.7)}
.svc__it:hover .svc__term b{color:#fff}

/* Низ: цена слева, круглая стрелка справа */
.svc__foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.25rem}
.svc__price{color:var(--ink)!important;font-size:var(--t-sm);transition:color .35s}
.svc__price b{font-family:var(--f-display);font-weight:500;font-size:1.45rem;letter-spacing:-.01em}
.svc__it:hover .svc__price{color:#fff!important}
.svc__arrow{
  flex:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--indigo);
  transition:background-color .35s,color .35s,transform .35s;
}
.svc__arrow svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg);transition:transform .35s}
.svc__it:hover .svc__arrow{background:#fff;color:var(--indigo);transform:scale(1.06)}
.svc__it:hover .svc__arrow svg{transform:rotate(0)}

/* Водяной знак: та же иконка крупно в правом нижнем углу, видна при наведении */
.svc__wm{
  position:absolute;right:-1.25rem;bottom:2.75rem;width:11rem;height:11rem;z-index:0;
  opacity:0;transform:rotate(-8deg) translateY(8px);
  transition:opacity .45s,transform .45s;pointer-events:none;
}
.svc__wm svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.svc__it:hover .svc__wm{opacity:.14;transform:rotate(-8deg) translateY(0)}

/* ── 11. Кейсы ─────────────────────────────────────────────────────────── */
.cases{display:grid;gap:var(--gap)}
@media (min-width:1000px){.cases{grid-template-columns:repeat(3,1fr)}}
.case{display:grid;grid-template-rows:auto 1fr;background:var(--slate);border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden;transition:transform .35s,border-color .35s}
.band--light .case,.band--frost .case{background:var(--frost)}
.case:hover{transform:translateY(-4px);border-color:rgba(169,167,255,.35)}
.case__shot{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0f1c}
/* Чип с типом проекта поверх скриншота */
.case__chip,.mini__chip{position:absolute;top:.85rem;left:.85rem;z-index:1;padding:.3rem .7rem;border-radius:999px;background:rgba(2,5,10,.6);backdrop-filter:blur(6px);color:#fff;font-size:var(--t-xs);font-weight:500;line-height:1.2}
.case__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s}
.case:hover .case__shot img{transform:scale(1.03)}
/* 6 строк: шапка, имя, задача, решение, результат, кнопка; кнопка прижата к низу во всех трёх */
.case__body{padding:1.875rem;display:grid;gap:1rem;grid-template-rows:repeat(5,auto) 1fr}
.case__body .case__link{align-self:end}
.case__top{display:flex;justify-content:space-between;gap:1rem;font-size:var(--t-xs);color:var(--mute-d)}
.band--light .case__top{color:var(--mute-l)}
.case__n{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25}
.case__row{display:grid;gap:.25rem}
.case__k{font-size:var(--t-xs);color:var(--mute-d)}
.band--light .case__k{color:var(--mute-l)}
.case__v{font-size:var(--t-sm);color:#D6DCEC;line-height:1.5}
.band--light .case__v{color:var(--mute-l)}
.case__res{border-left:2px solid var(--indigo);padding-left:1rem}
.case__res .case__v{color:var(--paper);font-weight:500}
.band--light .case__res .case__v{color:var(--ink)}
.case__link{justify-self:start;margin-top:.5rem;display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1.1rem;border-radius:999px;border:1px solid var(--line-d);background:rgba(255,255,255,.04);font-size:var(--t-sm);font-weight:500;color:var(--paper);text-decoration:none;transition:background-color .3s,border-color .3s,color .3s}
.case__link svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg);transition:transform .3s}
.case__link:hover{background:var(--indigo);border-color:var(--indigo);color:#fff}
.case__link:hover svg{transform:rotate(0)}
.band--light .case__link{color:var(--indigo)}
.case__link::after{content:"";position:absolute;left:0;bottom:-4px;width:100%;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.57,.01,.29,.99)}
.case__link:hover::after{transform:scaleX(1);transform-origin:left}

.cases__more-t{margin:var(--sec-sm) 0 var(--gap);font-family:var(--f-display);font-weight:500;font-size:var(--t-h3)}
/* Три в ряд — в ритм с тремя развёрнутыми кейсами выше; скриншоты крупнее и читаемее */
.grid-mini{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:560px){.grid-mini{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-mini{grid-template-columns:repeat(3,1fr)}}
.mini{display:grid;border-radius:var(--r);overflow:hidden;background:var(--slate);border:1px solid var(--line-d);text-decoration:none;transition:background-color .3s,transform .3s,border-color .3s}
.band--light .mini{background:var(--frost)}
.mini:hover{background:var(--slate-hi);transform:translateY(-3px);border-color:rgba(169,167,255,.35)}
.band--light .mini:hover{background:var(--indigo-dim)}
.mini__shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:#0a0f1c}
.mini__shot img{aspect-ratio:16/10;object-fit:cover;object-position:top center;width:100%;transition:transform .5s}
.mini:hover .mini__shot img{transform:scale(1.04)}
/* При наведении — затемнение снизу и круглая стрелка «открыть» */
.mini__shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,5,10,.6),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.mini:hover .mini__shot::after{opacity:1}
.mini__go{position:absolute;right:.85rem;bottom:.85rem;z-index:1;width:2.5rem;height:2.5rem;border-radius:50%;background:#fff;color:var(--indigo);display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.mini__go svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(-45deg)}
.mini:hover .mini__go{opacity:1;transform:none}
.mini__c{padding:1rem 1.15rem;display:grid;gap:.25rem}
.mini__n{font-size:var(--t-sm);font-weight:500}
.mini__m{font-size:var(--t-xs);color:var(--mute-d)}
.band--light .mini__m{color:var(--mute-l)}
.cases__note{margin-top:var(--gap);font-size:var(--t-sm);color:var(--mute-d)}
.band--light .cases__note{color:var(--mute-l)}
.cases__note a{color:var(--indigo-lo);text-decoration:underline;text-underline-offset:3px}
.band--light .cases__note a{color:var(--indigo)}

/* ── 12. Процесс ───────────────────────────────────────────────────────── */
/* Карточка этапа эталона: тёмная плашка, крупный номер, подсветка бренд-цветом
   при наведении. Нумерация здесь несёт смысл — этапы идут строго по порядку. */
/* Этапы — карусель как у услуг; без Swiper остаются сеткой */
#process{overflow:hidden}
.proc-swiper .swiper-slide{height:auto}
.proc-swiper:not(.swiper-initialized) .proc{display:grid;gap:var(--gap)}
@media (min-width:760px){.proc-swiper:not(.swiper-initialized) .proc{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.proc-swiper:not(.swiper-initialized) .proc{grid-template-columns:repeat(3,1fr)}}
.proc-swiper:not(.swiper-initialized) ~ .svc-nav{display:none}
/* Тёмный вариант стрелок и буллетов */
.svc-nav--dark .svc-nav__btn{background:var(--slate);color:var(--paper)}
.svc-nav--dark .svc-nav__btn:hover{background:var(--indigo);color:#fff}
.svc-nav--dark .svc-nav__pag .swiper-pagination-bullet{background:rgba(255,255,255,.22)}
.svc-nav--dark .svc-nav__pag .swiper-pagination-bullet:hover{background:var(--indigo-lo)}
.svc-nav--dark .svc-nav__pag .swiper-pagination-bullet-active{background:var(--indigo-lo)}
.proc__it{
  position:relative;display:grid;gap:1rem;align-content:start;
  padding:2.5rem;border-radius:var(--r);background:var(--slate);
  transition:background-color .35s,transform .35s;
}
.band--light .proc__it{background:var(--frost)}
.proc__it:hover{transform:translateY(-4px);background:var(--slate-hi)}
.band--light .proc__it:hover{background:var(--indigo-dim)}
/* Номер этапа контуром. Прозрачную заливку включаем только там, где
   обводка реально рисуется, иначе номер исчезнет вовсе. */
.proc__n{font-family:var(--f-display);font-weight:500;font-size:2.75rem;line-height:1;color:var(--indigo-lo)}
.band--light .proc__n{color:var(--indigo)}
@supports (-webkit-text-stroke:1px currentColor){
  .proc__n{color:transparent;-webkit-text-stroke:1px var(--indigo-lo)}
  .band--light .proc__n{color:transparent;-webkit-text-stroke-color:var(--indigo)}
}
.proc__it h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25;margin-bottom:.6rem}
.proc__it p{color:var(--mute-d);font-size:var(--t-sm);line-height:1.5}
.band--light .proc__it p{color:var(--mute-l)}
.proc__out{display:block;margin-top:.85rem;font-size:var(--t-xs);color:var(--indigo-lo);line-height:1.45}
.band--light .proc__out{color:var(--indigo)}
/* \00A0, а не пробел: пробел сразу после hex-escape съедается как его
   терминатор, и стрелка слипается со словом. */
.proc__out::before{content:"\2192\00A0на выходе: ";opacity:.6}
.proc__t{
  display:inline-block;margin-top:1rem;padding:.4rem .85rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.07);color:var(--paper);font-size:var(--t-xs);line-height:1;
}
.band--light .proc__t{background:#fff;color:var(--mute-l)}

/* ── 13. Квиз ──────────────────────────────────────────────────────────── */
/* Секция калькулятора — целиком по центру: плашка, заголовок, подзаголовок в столбик,
   карточка калькулятора под ними. Остальные секции оставляют шапку «заголовок слева — текст справа». */
#quiz .hd,#pricing .hd{display:grid;grid-template-columns:1fr;justify-items:center;text-align:center;gap:1.25rem}
#quiz .hd > .label,#quiz .hd > .h2,#quiz .hd > .hd__sub,#pricing .hd > .label,#pricing .hd > .h2,#pricing .hd > .hd__sub{grid-column:1;grid-row:auto;margin:0}
#quiz .hd > .label,#pricing .hd > .label{justify-self:center} /* глобальный .label прижат влево — здесь по центру */
#quiz .hd__sub,#pricing .hd__sub{max-width:48ch}
.quiz{max-width:56rem;margin-inline:auto;background:var(--frost);border-radius:var(--r);padding:clamp(1.5rem,3vw,3rem)}
.quiz__bar{height:4px;border-radius:var(--r-pill);background:#fff;overflow:hidden}
.quiz__fill{display:block;height:100%;width:20%;background:var(--indigo);transition:width .3s ease}
.quiz__step{font-size:var(--t-xs);color:var(--mute-l);margin-top:.8rem}
.quiz__body{margin-top:1.875rem;min-height:280px}
.quiz__q{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25;margin-bottom:.5rem}
.quiz__hint{font-size:var(--t-sm);color:var(--mute-l);margin-bottom:1.5rem}
.opts{display:grid;gap:.75rem}
@media (min-width:600px){.opts{grid-template-columns:repeat(2,1fr)}}
.opt{
  display:flex;align-items:center;gap:.75rem;padding:1.1rem 1.25rem;
  background:#fff;border:1px solid transparent;border-radius:var(--r-sm);cursor:pointer;
  font-size:var(--t-sm);transition:border-color .2s,background .2s;
}
.opt:hover{border-color:var(--indigo)}
.opt input{accent-color:var(--indigo);width:17px;height:17px;flex:none;margin:0}
.opt--on{border-color:var(--indigo);background:var(--indigo-dim)}
.quiz__nav{display:flex;gap:.75rem;margin-top:1.875rem;padding-top:1.875rem;border-top:1px solid var(--line-l)}
.quiz__nav .btn--primary{margin-left:auto}
.quiz__done{padding:1rem 0}
.quiz__price{font-family:var(--f-display);font-weight:500;font-size:var(--t-h2);line-height:1.1;letter-spacing:-.02em;margin:.75rem 0}
.quiz__term{font-size:var(--t-sm);color:var(--mute-l)}
.quiz__disc{max-width:52ch;margin:1.5rem 0 2rem;font-size:var(--t-sm);color:var(--mute-l);line-height:1.55}
.quiz__resumed{margin-top:1rem;padding:.7rem 1rem;border-radius:var(--r-sm);background:#fff;color:var(--mute-l);font-size:var(--t-xs)}
.quiz__early{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line-l)}
.quiz__early p{font-size:var(--t-sm);color:var(--mute-l)}

/* ── 14. Цены ──────────────────────────────────────────────────────────── */
.plans{display:grid;gap:var(--gap)}
@media (min-width:900px){.plans{grid-template-columns:repeat(3,1fr);align-items:stretch}} /* одна высота */
.plan{
  position:relative;background:var(--frost);border-radius:var(--r);
  padding:2.5rem;display:flex;flex-direction:column;gap:.85rem;
  transition:transform .35s;
}
/* Кнопка прижата к низу — во всех трёх карточках на одной линии */
.plan > .btn{margin-top:auto}
.plan:hover{transform:translateY(-4px)}
.plan--hi{background:var(--void);color:var(--paper)}
.plan--hi .plan__d,.plan--hi .plan__l li{color:var(--mute-d)}
.plan--hi .plan__p{color:var(--indigo-lo)}
.plan__badge{
  position:absolute;top:1.5rem;right:1.5rem;
  background:var(--indigo);color:#fff;
  font-size:var(--t-xs);line-height:1;padding:.5rem .9rem;border-radius:var(--r-pill);
}
.plan__n{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3)}
.plan__p{font-family:var(--f-display);font-weight:500;font-size:1.75rem;line-height:1.1;color:var(--indigo)}
.plan__d{font-size:var(--t-sm);color:var(--mute-l);line-height:1.5}
.plan__l{display:grid;gap:.65rem;margin:.75rem 0 1.5rem;font-size:var(--t-sm)}
.plan__l li{display:grid;grid-template-columns:auto 1fr;gap:.7rem;color:var(--mute-l);line-height:1.45}
.plan__l li::before{content:"";width:6px;height:6px;margin-top:.5rem;border-radius:50%;background:var(--indigo)}
.plans__note{margin-top:var(--gap);font-size:var(--t-sm);color:var(--mute-l);text-align:center}
/* Контурная кнопка на серой карточке тарифа: явная рамка и белая подложка, иначе сливается */
.plan .btn--ghost{background:#fff;border-color:rgba(11,17,32,.22)}
.plan .btn--ghost:hover{border-color:var(--ink)}

/* ── 15. Условия ───────────────────────────────────────────────────────── */
/* Сетка-«таблица» из волосяных границ со скруглением по внешнему контуру —
   самый узнаваемый блок эталона. */
.why{display:grid;border:1px solid var(--line-l);border-radius:var(--r);overflow:hidden}
@media (min-width:700px){.why{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.why{grid-template-columns:repeat(3,1fr)}}
.why li{padding:2.5rem;display:grid;gap:.6rem;align-content:start;border-bottom:1px solid var(--line-l);transition:background-color .3s}
.why li:hover{background:var(--frost-hi)}
.why li:last-child{border-bottom:0}
@media (min-width:700px) and (max-width:1099px){
  .why li:nth-child(odd){border-right:1px solid var(--line-l)}
  .why li:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1100px){
  .why li:not(:nth-child(3n)){border-right:1px solid var(--line-l)}
  .why li:nth-last-child(-n+3){border-bottom:0}
}
.why__ico{width:2.75rem;height:2.75rem;border-radius:.8rem;display:grid;place-items:center;background:var(--indigo-dim);color:var(--indigo);margin-bottom:1.6rem;transition:background-color .3s,color .3s}
.why__ico svg{width:1.35rem;height:1.35rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.why__ico svg.ico-fill{fill:currentColor;stroke:none} /* заливные иконки клиента */
.why li:hover .why__ico{background:var(--indigo);color:#fff}
.why h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25}
.why p{color:var(--mute-l);font-size:var(--t-sm);line-height:1.5}
.band--dark .why{border-color:var(--line-d)}
.band--dark .why li{border-bottom-color:var(--line-d)}
.band--dark .why li:hover{background:rgba(255,255,255,.03)}
.band--dark .why p{color:var(--mute-d)}
@media (min-width:700px) and (max-width:1099px){.band--dark .why li:nth-child(odd){border-right-color:var(--line-d)}}
@media (min-width:1100px){.band--dark .why li:not(:nth-child(3n)){border-right-color:var(--line-d)}}

/* ── 16. Отзывы ────────────────────────────────────────────────────────── */
.revs{display:grid;gap:var(--gap)}
@media (min-width:860px){.revs{grid-template-columns:repeat(3,1fr)}}
.rev{background:var(--frost);border-radius:var(--r);padding:2.25rem;display:flex;flex-direction:column;gap:1.25rem}
/* Подпись и кнопка с оригиналом прижаты к низу — имена в соседних карточках на одной линии */
.rev > figcaption{margin-top:auto}
.rev blockquote p{font-size:var(--t-sm);color:var(--ink);line-height:1.6}
.rev figcaption{display:grid;gap:.2rem;padding-top:1.25rem;border-top:1px solid var(--line-l)}
.rev figcaption b{font-size:var(--t-sm);font-weight:500}
.rev figcaption span{font-size:var(--t-xs);color:var(--mute-l);line-height:1.4}

/* Видео + сканы писем: сетка та же .revs, шесть карточек, 2×3 на десктопе */
.rev--video{padding:0;overflow:hidden;display:flex;flex-direction:column}
.rev--video figcaption{padding:1.25rem 2.25rem 1.75rem;border-top:0}
.rev__play{position:relative;display:block;width:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;flex:1;min-height:0}
.rev__play img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Десктоп: постер не участвует в расчёте высоты строки, иначе вертикальное
   видео растягивает всю сетку. 18% по вертикали — лицо в кадре. */
@media (min-width:860px){
  .rev__play{min-height:300px}
  .rev__play img{position:absolute;inset:0;object-position:50% 18%}
}
@media (max-width:859px){.rev__play img{height:auto;aspect-ratio:3/4}}
.rev__play::after{content:"";position:absolute;inset:0;background:rgba(2,5,10,.18);transition:background .25s ease}
.rev__play:hover::after,.rev__play:focus-visible::after{background:rgba(2,5,10,.05)}
.rev__playic{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:64px;height:64px;border-radius:50%;
  background:var(--indigo);box-shadow:0 8px 28px rgba(2,5,10,.35);
  transition:transform .25s ease,background .25s ease;
}
.rev__playic::before{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
.rev__play:hover .rev__playic,.rev__play:focus-visible .rev__playic{transform:translate(-50%,-50%) scale(1.08);background:var(--indigo-hi)}
.rev__playtag{position:absolute;left:1.25rem;bottom:1.25rem;z-index:1;font-size:var(--t-xs);color:#fff;background:rgba(2,5,10,.62);padding:.4rem .85rem;border-radius:var(--r-pill)}

/* Кнопка «открыть скан»: миниатюра листа и подпись */
.rev__doc{
  display:flex;align-items:center;gap:.85rem;width:100%;
  padding:.7rem;margin:0;text-align:left;cursor:pointer;
  background:#fff;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:var(--t-xs);color:var(--mute-l);
  transition:border-color .3s ease,color .3s ease;
}
.rev__doc:hover,.rev__doc:focus-visible{border-color:var(--indigo);color:var(--ink)}
.rev__doc img{width:44px;height:auto;flex:none;border:1px solid var(--line-l);border-radius:3px;background:#fff}
.rev__doc span::after{content:" \2197"}

.rev figcaption.rev__cap-ava{display:flex!important;align-items:center;gap:1.1rem} /* специфичнее .rev figcaption, иначе gap перебивается */
.rev__ava{width:44px;height:44px;flex:none;border-radius:50%;object-fit:cover;margin:0}
.rev__cap-txt{display:grid;gap:.15rem}
.rev__cap-txt b{font-size:var(--t-sm);font-weight:500}

/* ── 17. Лайтбокс отзывов ──────────────────────────────────────────────── */
.lbox{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:1rem}
.lbox__back{position:absolute;inset:0;background:rgba(2,5,10,.78);backdrop-filter:blur(5px);cursor:zoom-out}
.lbox__body{position:relative;display:grid;gap:.75rem;justify-items:center;max-width:min(94vw,820px)}
.lbox__slot img{max-width:100%;max-height:82vh;width:auto;border-radius:var(--r-sm);box-shadow:0 24px 80px rgba(0,0,0,.5);background:#fff}
.lbox__slot video{max-width:100%;max-height:82vh;border-radius:var(--r-sm);box-shadow:0 24px 80px rgba(0,0,0,.5);background:#000}
.lbox__close{
  position:absolute;top:-.5rem;right:-.5rem;transform:translate(50%,-50%);z-index:1;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  background:var(--paper);color:var(--ink);font-size:1rem;line-height:1;
}
@media (max-width:640px){.lbox__close{top:0;right:0;transform:translate(0,-115%)}}
.lbox__close:hover{background:var(--indigo);color:#fff}
.lbox__pdf{font-size:var(--t-xs);color:#fff;opacity:.85;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}
.lbox__pdf:hover{opacity:1;border-color:#fff}
body.lbox-open{overflow:hidden}

/* ── Модалка CTA: форма заявки / калькулятор ─────────────────────────── */
.modal{position:fixed;inset:0;z-index:140;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal__back{position:absolute;inset:0;background:rgba(2,5,10,.62);backdrop-filter:blur(4px)}
.modal__card{
  position:relative;width:100%;max-width:34rem;max-height:calc(100vh - 2rem);overflow:auto;
  background:var(--paper);color:var(--ink);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:0 30px 90px rgba(2,5,10,.35);
  display:grid;gap:1.5rem;align-content:start;
}
.modal--wide .modal__card{max-width:46rem}
.modal__close{
  position:absolute;top:1rem;right:1rem;width:2.25rem;height:2.25rem;border-radius:50%;border:0;cursor:pointer;
  background:var(--frost);color:var(--ink);font-size:.95rem;line-height:1;display:grid;place-items:center;
  transition:background .2s,color .2s;
}
.modal__close:hover{background:var(--indigo);color:#fff}
.modal__hd{display:grid;gap:.6rem;padding-right:2.75rem}
.modal__hd .label{margin:0;justify-self:start}
.modal__title{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.2}
.modal__sub{color:var(--mute-l);font-size:var(--t-sm);line-height:1.5}
/* Форма внутри: фон и отступы уже у карточки, поля — на светлой подложке */
.modal__slot > .form,.modal__slot > .form--light{padding:0;background:transparent;border-radius:0}
/* Специфичность выше, чем у .form--light .fld input — иначе поля белые на белой карточке */
.modal .modal__slot .form .fld input,.modal .modal__slot .form .fld textarea{
  background:var(--frost);border:1px solid var(--line-l);color:var(--ink);
}
.modal .modal__slot .form .fld input::placeholder,.modal .modal__slot .form .fld textarea::placeholder{color:#9AA3BC}
.modal .modal__slot .form .fld input:focus,.modal .modal__slot .form .fld textarea:focus{background:#fff;border-color:var(--indigo)}
body.modal-open{overflow:hidden}
@media (max-width:640px){
  .modal{padding:0;align-items:flex-end}
  .modal__card{max-height:100vh;border-radius:var(--r) var(--r) 0 0}
}

/* ── 18. Правовые документы (privacy.html) ─────────────────────────────── */
.doc{max-width:52rem}
.doc__h1{font-family:var(--f-display);font-weight:500;font-size:var(--t-h2);line-height:1.12;margin:.5rem 0 .75rem;color:var(--ink)}
.doc__date{font-size:var(--t-xs);color:var(--mute-l);margin:0 0 2.5rem}
.doc h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);margin:2.5rem 0 1rem;color:var(--ink)}
.doc p{margin:.75rem 0;color:var(--mute-l);line-height:1.65}
.doc ul{margin:.75rem 0;padding-left:1.3rem;display:grid;gap:.5rem;list-style:disc}
.doc li{line-height:1.6;color:var(--mute-l)}
.doc a{color:var(--indigo);text-decoration-thickness:1px}
.doc a:hover{color:var(--indigo-hi)}

/* ── 19. Кому мы подходим (#fit) ─────────────────────────────────────────
   Слева — обещание и список-маршрутизатор, справа — единственное тёмное
   пятно секции: карточка-противовес. Стрелка в плашке — знак кликабельности. */
/* Заголовок — во всю ширину; ниже список и карточка стартуют с одной линии
   и карточка растянута на высоту списка: одна связка, а не два блока. */
.fit{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.fit__hd{display:grid;gap:1.25rem;justify-items:start} /* плашка не растягивается на всю ширину */
.fit__hd .h2{max-width:22ch}
.fit__grid{display:grid;gap:var(--gap);align-items:stretch}
@media (min-width:1000px){.fit__grid{grid-template-columns:minmax(0,1fr) minmax(22rem,30rem);column-gap:60px}}

.fit__list{display:grid} /* внешних линий нет — только разделители между строками */
.fit__it{
  display:flex;align-items:center;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--line-l);
  text-decoration:none;color:var(--ink);font-weight:500;
  transition:color .2s;
}
.fit__list li:first-child .fit__it{padding-top:.35rem}
.fit__list li:last-child .fit__it{border-bottom:0;padding-bottom:.35rem}
.fit__ico{
  flex:none;width:2rem;height:2rem;border-radius:.55rem;
  display:grid;place-items:center;
  background:var(--indigo-dim);color:var(--indigo);
  transition:background .25s,color .25s,transform .25s;
}
.fit__ico svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fit__txt{flex:1;min-width:0;line-height:1.4}
.fit__hint{
  flex:none;font-size:var(--t-xs);color:var(--mute-l);
  opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s;
}
.fit__it:hover,.fit__it:focus-visible{color:var(--indigo)}
.fit__it:hover .fit__ico,.fit__it:focus-visible .fit__ico{background:var(--indigo);color:#fff;transform:translateX(3px)}
.fit__it:hover .fit__hint,.fit__it:focus-visible .fit__hint{opacity:1;transform:none}
@media (max-width:640px){.fit__hint{display:none}}

.fit__card{
  background:var(--void);color:var(--paper);border-radius:var(--r);
  padding:clamp(1.6rem,3vw,2.5rem);display:flex;flex-direction:column;gap:1rem;
  position:relative;overflow:hidden;
}
/* Лёгкие кольца в углу — перекличка с первым экраном, чтобы тёмный блок не был глухим */
.fit__card::after{
  content:"";position:absolute;right:-8rem;bottom:-8rem;width:26rem;height:26rem;pointer-events:none;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 2rem,rgba(169,167,255,.2) 2rem 2.08rem);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 75%);
          mask-image:radial-gradient(closest-side,#000 30%,transparent 75%);
}
.fit__card > *{position:relative;z-index:1}
.fit__card h3{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25}
.fit__card p{color:var(--mute-d);font-size:var(--t-sm);line-height:1.6}
.fit__card-link{
  align-self:flex-start;margin-top:auto;padding-top:1rem;color:var(--indigo-lo);text-decoration:none;font-weight:500;
  border-bottom:1px solid rgba(169,167,255,.35);padding-bottom:.1rem;transition:color .2s,border-color .2s;
}
.fit__card-link:hover{color:#fff;border-color:#fff}

/* ── 20. Сравнение: фрилансер / студия / мы (#compare) ─────────────────── */
#compare .hd .h2{max-width:26ch;text-wrap:balance} /* две ровные строки: «Фрилансер, крупная» / «студия или мы», без <br> */
.cmp{display:grid;gap:var(--gap)}
@media (min-width:860px){.cmp{grid-template-columns:repeat(3,1fr)}}
.cmp__col{background:var(--frost);border-radius:var(--r);padding:2.5rem}
.cmp__col h3{margin:0 0 1.5rem;font-family:var(--f-display);font-weight:500;font-size:var(--t-h3)}
.cmp__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.cmp__col li{position:relative;padding-left:2.1rem;font-size:var(--t-sm);color:var(--mute-l);line-height:1.5}
/* Иконки: крестик в мягком красном кружке, галочка — белая в залитом индиговом */
.cmp__col li::before{content:"";position:absolute;left:0;top:.05rem;width:1.35rem;height:1.35rem;border-radius:50%;background:rgba(229,72,77,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E5484D' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7'/%3E%3C/svg%3E") center/60% no-repeat}
.cmp__col--us{background:var(--void);color:var(--paper)}
.cmp__col--us h3{color:var(--indigo-lo)}
.cmp__pro li{color:var(--mute-d)}
.cmp__pro li::before{background:var(--indigo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center/62% no-repeat;box-shadow:0 4px 12px -4px rgba(89,86,233,.7)}

/* ── 22. FAQ ───────────────────────────────────────────────────────────── */
.faq{display:grid;gap:1rem}
.faq__it{background:var(--frost);border-radius:var(--r);padding:0 2rem;transition:background-color .3s}
.faq__it[open]{background:var(--frost-hi);box-shadow:inset 0 0 0 1px var(--line-l)}
.faq__it summary{
  display:flex;justify-content:space-between;gap:1.5rem;align-items:center;
  padding:1.75rem 0;cursor:pointer;list-style:none;
  font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.3;
}
.faq__it summary::-webkit-details-marker{display:none}
.faq__it summary::after{
  content:"";flex:none;width:2.25rem;height:2.25rem;border-radius:50%;
  background:#fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235956E9' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/1rem no-repeat;
  transition:transform .3s;
}
.faq__it[open] summary::after{transform:rotate(135deg)}
.faq__a{padding-bottom:1.75rem;max-width:70ch}
.faq__a p{color:var(--mute-l);font-size:var(--t-sm);line-height:1.6}
.faq__a a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}

/* ── 23. Заявка и формы ────────────────────────────────────────────────── */
.cta{display:grid;gap:var(--gap)}
@media (min-width:1000px){.cta{grid-template-columns:minmax(0,1fr) minmax(0,34rem)}}
.cta__sub{margin-top:1.25rem;color:var(--mute-d);max-width:44ch;font-size:var(--t-lead);line-height:1.5}
/* Ширина — как у заголовка и текста слева; вся строка кликабельна (растянутая ссылка) */
.cta__ch{margin-top:2.5rem;max-width:38rem;display:grid;border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden}
.cta__ch li{position:relative;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:1px solid var(--line-d);cursor:pointer;transition:background-color .25s}
.cta__ch li:hover{background:rgba(255,255,255,.04)}
.cta__ch li:last-child{border-bottom:0}
.cta__ch span{font-size:var(--t-xs);color:var(--mute-d)}
/* Иконки каналов связи */
.cta__lbl{display:inline-flex;align-items:center;gap:.7rem}
.cta__ico{display:grid;place-items:center;width:2rem;height:2rem;border-radius:.6rem;background:rgba(255,255,255,.07);color:var(--indigo-lo);flex:none}
.cta__ico svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cta__ico svg.ico-fill{fill:currentColor;stroke:none}
.cta__ch li:hover .cta__ico{background:var(--indigo);color:#fff}
.cta__ch a{position:static;font-size:var(--t-sm);font-weight:500;text-decoration:none;color:var(--paper);transition:color .3s}
.cta__ch a::after{content:"";position:absolute;inset:0} /* клик по всей плашке */
.cta__ch li:hover a{color:var(--indigo-lo)}
.cta__ch a:hover{color:var(--indigo-lo)}

.form{background:var(--slate);border-radius:var(--r);padding:clamp(1.5rem,3vw,2.5rem);display:grid;gap:1.25rem;align-content:start}
.fld{display:grid;gap:.5rem}
.fld label{font-size:var(--t-xs);color:var(--mute-d)}
.fld input,.fld textarea{
  width:100%;padding:1rem 1.25rem;background:rgba(255,255,255,.04);
  border:1px solid var(--line-d);border-radius:var(--r-sm);color:var(--paper);
  transition:border-color .2s,background .2s;resize:vertical;
}
.fld input::placeholder,.fld textarea::placeholder{color:#4C5675}
.fld input:focus,.fld textarea:focus{border-color:var(--indigo);background:rgba(89,86,233,.08);outline:none}
.fld--bad input,.fld--bad textarea{border-color:var(--danger)}
.err{font-size:var(--t-xs);color:var(--danger);min-height:0}
.err:empty{display:none}
.chk{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;font-size:var(--t-xs);color:var(--mute-d);cursor:pointer;line-height:1.45}
.chk input{accent-color:var(--indigo);width:16px;height:16px;margin-top:.15rem}
.chk a{color:var(--indigo-lo);text-decoration:underline;text-underline-offset:2px}
.form__note{font-size:var(--t-sm);color:var(--sky)}
.form__note:empty{display:none}
.form__note a{color:var(--indigo-lo);font-weight:500}

/* Светлый вариант формы — для секций на светлом фоне */
.form--light{background:var(--frost)}
.form--light .fld label{color:var(--mute-l)}
.form--light .fld input,.form--light .fld textarea{background:#fff;border-color:transparent;color:var(--ink)}
.form--light .fld input::placeholder,.form--light .fld textarea::placeholder{color:#9AA3BC}
.form--light .fld input:focus,.form--light .fld textarea:focus{border-color:var(--indigo);background:#fff}
.form--light .chk{color:var(--mute-l)}
.form--light .chk a{color:var(--indigo)}
.form--light .form__note{color:var(--indigo)}

/* Состояния формы */
.form--busy{opacity:.75;pointer-events:none}
.form__note--bad{color:var(--danger)!important}

/* Honeypot: человек этого поля не видит, бот заполняет и выдаёт себя.
   Убирать со страницы нельзя — это первый слой антиспама. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── 24. Бесплатный аудит ──────────────────────────────────────────────── */
.audit{display:grid;gap:var(--gap);align-items:start}
@media (min-width:1000px){.audit{grid-template-columns:minmax(0,1fr) minmax(0,30rem)}}
.audit__sub{margin-top:1.25rem;color:var(--mute-l);max-width:52ch;font-size:var(--t-lead);line-height:1.5}
.audit__l2{display:grid;gap:.75rem;margin-top:2rem;font-size:var(--t-sm)}
.audit__l2 li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;color:var(--mute-l);line-height:1.45}
.audit__l2 li::before{content:"";width:6px;height:6px;margin-top:.5rem;border-radius:50%;background:var(--indigo)}

/* ── 25. Команда ───────────────────────────────────────────────────────── */
/* Карточка эталона: вертикальный портрет, подпись под ним, без рамок */
.team{display:grid;gap:var(--gap)}
@media (min-width:640px){.team{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.team{grid-template-columns:repeat(4,1fr)}}
.tm{display:grid;gap:1.25rem;align-content:start} /* имена на одной линии: строки не растягиваются */
/* Фото разного стиля и качества — делаем их маленькими и круглыми, чтобы не спорили друг с другом */
.tm__ph{position:relative;width:7.5rem;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--frost);box-shadow:0 0 0 4px var(--paper),0 0 0 5px var(--line-l)}
.tm__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .5s}
.tm:hover .tm__ph img{transform:scale(1.03)}
/* Без фото: инициал на мягком градиенте, пока фото нет */
.tm__ph--init{background:linear-gradient(135deg,var(--indigo-dim2),var(--frost))}
.tm__ph--init span{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--f-display);font-weight:500;font-size:clamp(3rem,6vw,5rem);color:var(--indigo);
}
.tm figcaption{display:grid;gap:.4rem}
.tm figcaption b{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);line-height:1.25}
.tm__r{font-size:var(--t-xs);color:var(--indigo)}
.tm__d{margin-top:.4rem;font-size:var(--t-sm);color:var(--mute-l);line-height:1.5}

/* ── 26. Лид-магнит ────────────────────────────────────────────────────── */
.magnet{display:grid;gap:var(--gap);align-items:center}
@media (min-width:1000px){.magnet{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}}
.magnet__sub{margin-top:1.25rem;color:var(--mute-l);max-width:54ch;font-size:var(--t-lead);line-height:1.5}
.magnet__f{align-self:start}

/* ── 27. Футер ─────────────────────────────────────────────────────────── */
/* Две строки, как у эталона: широкая верхняя и узкая правовая нижняя */
.ftr{background:var(--void);color:var(--paper);padding-top:var(--sec-sm)}
.ftr__in{display:grid;gap:2.5rem var(--gap);padding-bottom:var(--sec-sm)}
@media (min-width:760px){.ftr__in{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.ftr__in{grid-template-columns:1.7fr 1fr 1fr 1fr}}
.ftr__col{display:grid;gap:.85rem;align-content:start}
.ftr__col a{position:relative;text-decoration:none;color:var(--mute-d);font-size:var(--t-sm);transition:color .3s;justify-self:start}
.ftr__col a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1.5px;background:var(--indigo-lo);transform:scaleX(0);transform-origin:right;transition:transform .3s cubic-bezier(.57,.01,.29,.99)}
.ftr__col a:hover{color:var(--paper)}
.ftr__col a:hover::after{transform:scaleX(1);transform-origin:left}
.ftr__logo{margin:0 0 .5rem}
.ftr__logo img{height:2.1rem;width:auto;display:block}
.ftr__d{color:var(--mute-d);font-size:var(--t-sm);max-width:36ch;line-height:1.5}
.ftr__req{font-size:var(--t-xs);color:var(--mute-d);opacity:.75;margin-top:.5rem;line-height:1.5}
.ftr__t{font-size:var(--t-sm);font-weight:500;color:var(--paper);margin-bottom:.4rem}
.ftr__btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1.75rem;border-top:1px solid var(--line-d);font-size:var(--t-xs);color:var(--mute-d)}
.ftr__btm nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.ftr__btm a{color:var(--mute-d);text-decoration:none;transition:color .3s}
.ftr__btm a:hover{color:var(--paper)}

/* ── 28. Быстрый контакт ───────────────────────────────────────────────── */
/* bottom не трогаем — ниже сидит счётчик заглушек, налезать не должны. */
.quick{position:fixed;right:14px;bottom:64px;z-index:120;display:grid;justify-items:end;gap:.6rem}
@media (min-width:900px){.quick{right:20px}}

.quick__fab{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:1rem 1.4rem;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--indigo);color:#fff;font-weight:500;font-size:var(--t-sm);
  box-shadow:0 10px 28px -8px rgba(89,86,233,.9);
  transition:transform .18s;
}
.quick__fab::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;width:0;height:0;border-radius:50%;
  background:var(--ink);transform:translate(-50%,-50%);
  transition:width .55s cubic-bezier(.4,0,.2,1),height .55s cubic-bezier(.4,0,.2,1);
}
.quick__fab:hover::before{width:250%;height:20rem}
.quick__fab:hover{transform:translateY(-2px)}
.quick__fab-ico{display:grid;place-items:center;width:20px;height:20px;flex:none}
.quick__fab-ico svg{grid-area:1/1;width:20px;height:20px;transition:opacity .18s,transform .18s}
.quick__fab-x{opacity:0;transform:rotate(-90deg)}
.quick__fab[aria-expanded="true"] .quick__fab-chat{opacity:0;transform:rotate(90deg)}
.quick__fab[aria-expanded="true"] .quick__fab-x{opacity:1;transform:none}
@media (max-width:479px){
  .quick__fab{padding:1rem;border-radius:50%}
  .quick__fab-t{display:none}
}

/* Одна деликатная пульсация при первом появлении — и всё.
   Постоянное движение на краю экрана читается как реклама. */
.quick--enter .quick__fab{animation:quickPulse 1.6s ease-out 1}
@keyframes quickPulse{
  0%,100%{box-shadow:0 10px 28px -8px rgba(89,86,233,.9)}
  35%    {box-shadow:0 10px 28px -8px rgba(89,86,233,.9), 0 0 0 12px rgba(89,86,233,.22)}
  70%    {box-shadow:0 10px 28px -8px rgba(89,86,233,.9), 0 0 0 20px rgba(89,86,233,0)}
}

.quick__pop{
  width:min(320px,calc(100vw - 28px));
  padding:1rem;border-radius:var(--r);
  background:var(--void);border:1px solid var(--line-d);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.85);
  display:grid;gap:.35rem;transform-origin:bottom right;
  animation:popIn .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.quick__t{font-size:var(--t-xs);color:var(--mute-d);padding:.2rem .35rem .6rem}
.quick__i{
  display:flex;align-items:center;gap:.7rem;width:100%;
  padding:.7rem;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--paper);text-align:left;text-decoration:none;cursor:pointer;
  font:inherit;transition:background .2s;
}
.quick__i:hover{background:rgba(255,255,255,.07)}
.quick__i--form{background:rgba(89,86,233,.20)}
.quick__i--form:hover{background:rgba(89,86,233,.32)}
.quick__ico{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#fff;flex:none}
.quick__ico svg{width:19px;height:19px;fill:currentColor}
.quick__ico--form{background:var(--indigo)}
.quick__ico--form svg{fill:none}
.quick__ico--tg{background:#29A9EB}
.quick__ico--max{background:#6A4CF5} /* фирменный фиолетовый MAX */
.quick__txt{display:grid;gap:.05rem;min-width:0}
.quick__txt b{font-weight:500;font-size:var(--t-sm)}
.quick__txt small{font-size:var(--t-xs);color:var(--mute-d)}

/* ── 29. Страница «Спасибо» ────────────────────────────────────────────── */
.thx{min-height:70vh;display:grid;align-items:center;padding-block:var(--sec-sm)}
.thx__in{max-width:52rem}
.thx__mark{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--indigo-dim);color:var(--indigo);margin-bottom:2rem}
.thx__mark svg{width:34px;height:34px}
.thx__h1{font-family:var(--f-display);font-weight:500;font-size:var(--t-h1);line-height:1.14;letter-spacing:-.02em;margin:1rem 0 0}
.thx__lead{margin-top:1.5rem;color:var(--mute-l);font-size:var(--t-lead);max-width:52ch;line-height:1.5}

.thx__next{margin-top:var(--sec-sm)}
.thx__h2{font-family:var(--f-display);font-weight:500;font-size:var(--t-h3);margin-bottom:1.5rem}
.thx__steps{display:grid;gap:1rem}
@media (min-width:760px){.thx__steps{grid-template-columns:repeat(3,1fr)}}
.thx__steps li{display:grid;gap:.5rem;align-content:start;padding:2rem;border-radius:var(--r);background:var(--frost)}
.thx__steps span{font-family:var(--f-display);font-weight:500;font-size:1.75rem;line-height:1;color:var(--indigo)}
@supports (-webkit-text-stroke:1px currentColor){
  .thx__steps span{color:transparent;-webkit-text-stroke:1px var(--indigo)}
}
.thx__steps b{font-weight:500}
.thx__steps p{color:var(--mute-l);font-size:var(--t-sm);line-height:1.5}

.thx__urgent{margin-top:var(--sec-sm);padding:2.5rem;border-radius:var(--r);background:var(--void);color:var(--paper)}
.thx__urgent > p{font-size:var(--t-sm);color:var(--mute-d);margin-bottom:1.25rem}
.thx__acts{display:flex;flex-wrap:wrap;gap:.85rem}
.thx__back{margin-top:2rem;font-size:var(--t-sm);color:var(--mute-l)}
.thx__back a{color:var(--indigo)}

/* ── 30. Пометки «нужен реальный контент» ──────────────────────────────── */
/* По умолчанию невидимы, чтобы не портить макет.
   Открой страницу с ?tbd в адресе — все заглушки подсветятся. */
[data-tbd]{position:relative}
body.tbd-on [data-tbd]{
  background:rgba(229,72,77,.16);
  box-shadow:0 0 0 1px rgba(229,72,77,.55);
  border-radius:3px;cursor:help;
}
body.tbd-on [data-tbd]::after{
  content:"нужны данные: " attr(data-tbd);
  position:absolute;left:0;bottom:calc(100% + 6px);z-index:50;
  padding:.3rem .5rem;background:var(--danger);color:#fff;
  font-size:10px;letter-spacing:0;text-transform:none;
  white-space:nowrap;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .15s;
}
body.tbd-on [data-tbd]:hover::after{opacity:1}

.tbd-flag{
  position:fixed;right:14px;bottom:14px;z-index:150;
  padding:.55rem .9rem;border:1px solid var(--line-l);border-radius:var(--r-pill);
  background:var(--paper);color:var(--ink);
  font-size:11px;cursor:pointer;box-shadow:0 6px 20px -8px rgba(11,17,32,.4);
}
.tbd-flag:hover{border-color:var(--indigo)}

/* Подпись вместо дыры, если скриншот не загрузился */
.shot--empty{display:grid;place-items:center;padding:1rem;text-align:center}
.shot--empty::after{content:attr(data-empty);font-size:var(--t-xs);color:var(--mute-d);max-width:22ch}

/* ── 31. Появление при скролле ─────────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ── 32. Уважение к системным настройкам ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .board__tbl tbody tr{opacity:1;transform:none}
}

@media print{
  .hdr,.mnav,.tbd-flag,.quick,.hero__deco{display:none}
  .band--dark{background:#fff;color:#000}
}