/* ===================================================================
   Сэлмор Маркетинг — sellmore-marketing.ru
   Фирменный стиль Sellmore. Арт-мотив свой: складывающийся паззл,
   куски собираются в растущий график. Ленты принадлежат консалтингу,
   шар со звёздами практикуму, сюда не переносим.
   =================================================================== */
@import url("tokens.css");

@font-face{font-family:'Inter';font-weight:300 700;font-style:normal;font-display:swap;
  src:url(../assets/fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-weight:300 700;font-style:normal;font-display:swap;
  src:url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tecla';font-weight:400;font-style:normal;font-display:swap;src:url(../assets/fonts/Tecla.woff) format('woff');}
@font-face{font-family:'Tecla';font-weight:700;font-style:normal;font-display:swap;src:url(../assets/fonts/Tecla-Bold.woff) format('woff');}

/* контур куска паззла для маркеров списков: тот же путь, что в спрайте и на холсте */
:root{--piece-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 50 42'%3E%3Cpath d='M0 0 L40 0 L40 15.2 Q42.48 13.6 44.46 16 C47.44 12 47.44 28 44.46 24 Q42.48 26.4 40 24.8 L40 40 L24.8 40 Q26.4 37.52 24 35.54 C28 32.56 12 32.56 16 35.54 Q13.6 37.52 15.2 40 L0 40 Z' fill='%23000'/%3E%3C/svg%3E");}

*{box-sizing:border-box;margin:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-text);-webkit-font-smoothing:antialiased;background:var(--paper);color:var(--ink);
  overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ============================== ГЕРОЙ ============================== */
.hero{position:relative;min-height:min(94vh,780px);min-height:min(94svh,780px);
  display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(1200px 700px at 72% 50%,rgba(0,60,110,.35),transparent 62%),var(--ink-grad-dark);
  color:#fff;}
.hero canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;}

.nav{position:relative;z-index:4;display:flex;align-items:center;gap:20px;
  width:100%;max-width:1520px;margin:0 auto;padding:22px 56px;}
.nav .logo img{height:38px;}
.nav .menu{display:flex;gap:24px;font-size:14.5px;margin-left:auto;}
.nav .menu a{text-decoration:none;opacity:.82;transition:opacity .2s;}
.nav .menu a:hover{opacity:1;}
.nav .actions{display:flex;align-items:center;gap:12px;}

.burger{display:none;width:44px;height:44px;padding:0;border:none;background:transparent;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:10px;}
.burger span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.menu-mobile{display:none;}

/* Ширина колонки та же, что у шапки: иначе правый край доски не совпадает
   с правым краем меню и граница читается как случайная. */
.hgrid{position:relative;z-index:3;flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;width:100%;max-width:1520px;margin:0 auto;padding:0 56px 48px;gap:40px;}
/* Заголовок занимает колонку целиком, иначе между ним и доской висит дыра.
   Абзацы держим уже: строка в 700px уже не читается. */
.htext{max-width:44rem;}
.htext .lead{max-width:33rem;}
.hart{align-self:stretch;}      /* пустая колонка держит высоту: по ней считается доска */
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;font-weight:600;
  color:var(--blue);margin-bottom:18px;}
.qtext{font-family:var(--font-display);font-weight:700;font-size:clamp(30px,3.6vw,var(--t-hero));
  line-height:1.07;margin-bottom:20px;}
.lead{font-size:var(--t-lead);line-height:var(--lh-lead);color:#cdd8e6;margin-bottom:16px;}
.lead--tight{margin-bottom:26px;}
.hero-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:10px;}

/* ============================== КНОПКИ ============================== */
.btn{font-size:15px;font-weight:600;border-radius:var(--r-btn);padding:13px 22px;border:2px solid transparent;
  text-decoration:none;display:inline-block;line-height:1;white-space:nowrap;color:#fff;cursor:pointer;
  transition:transform var(--dur-hover) var(--ease),box-shadow var(--dur-hover),background var(--dur-hover),
    border-color var(--dur-hover),filter var(--dur-hover);}
.btn-primary{background:var(--blue);}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:var(--sh-btn);}
.btn-sm{padding:10px 16px;font-size:13.5px;}
.btn-lg{padding:16px 30px;font-size:16.5px;}
.btn-block{display:block;width:100%;text-align:center;}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.42);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);}
/* на светлых экранах призрачная кнопка была бы белой по белому */
.sec .btn-ghost{border-color:rgba(0,136,204,.45);color:var(--blue-deep);}
.sec .btn-ghost:hover{border-color:var(--blue);background:rgba(0,136,204,.07);}

/* слот кнопки Битрикс24: форма кнопочного типа рисует кнопку сама */

/* ============================== СЕКЦИИ ============================== */
.sec{position:relative;max-width:var(--wrap-max);margin:0 auto;padding:var(--pad-sec);overflow:hidden;}
.kicker{font-size:var(--t-kicker);letter-spacing:var(--tr-kicker);text-transform:uppercase;font-weight:700;
  color:var(--blue);margin-bottom:18px;}
.h2{font-family:var(--font-display);font-weight:700;font-size:var(--t-h2);line-height:var(--lh-h2);
  color:var(--ink);margin-bottom:16px;max-width:1000px;}
.sec-sub{font-size:var(--t-lead);line-height:var(--lh-lead);color:var(--slate);max-width:1040px;}
.muted{color:var(--slate);}

.anchor-dark{position:relative;overflow:hidden;color:#fff;
  background:radial-gradient(900px 520px at 78% 30%,rgba(0,60,110,.30),transparent 62%),var(--ink-grad-dark);}
.anchor-dark .inner{position:relative;z-index:3;max-width:var(--wrap-max);margin:0 auto;padding:80px 90px;}
.anchor-dark .h2{color:#fff;}
.anchor-dark .sec-sub,.anchor-dark p{color:#c3d0e0;}
.anchor-dark .kicker{color:#4fb6e8;}
.anchor-dark canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;pointer-events:none;}

/* вывод-плашка */
.takeaway{background:var(--dark);border-radius:var(--r-card);padding:32px 42px;position:relative;overflow:hidden;margin-top:40px;}
.takeaway::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blue);}
.takeaway p{font-size:20px;line-height:1.5;color:#c3d0e0;max-width:1180px;}
.takeaway b{color:#fff;font-weight:700;}
/* кнопка под плашкой вывода: 10px от .hero-actions прилипали к ней вплотную */
.takeaway + .hero-actions,.takeaway + .ctaform{margin-top:30px;}
.anchor-dark .takeaway{background:rgba(0,136,204,.10);border:1px solid rgba(34,166,230,.34);}

/* ============================== КАРТОЧКИ ============================== */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-cols);margin-top:30px;}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px;}
.card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);padding:var(--pad-card);
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card),border-color var(--dur-card);}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-card);border-color:rgba(0,136,204,.35);}
.cname{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--ink);margin-bottom:12px;}
.card p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.card p + p{margin-top:10px;}
.example{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);font-size:15px;line-height:1.5;color:#7d7768;}

/* карточка проблемы: красная грань слева */
.card--problem{border-left:4px solid #d64545;}
.card--problem .cname{color:#b23b3b;}

/* спрайт с контуром куска: сам по себе не показывается */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* Маркер вопроса: кусок паззла с номером. У каждого своя форма, поэтому
   поле квадратное с запасом под выступы, а цифра стоит по телу куска. */
.qnum{position:relative;display:block;width:46px;height:46px;margin-bottom:14px;}
/* контур светится, заливка почти прозрачная: тот же приём, что на холсте героя */
.qnum svg{width:46px;height:46px;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(0,170,225,.55)) drop-shadow(0 0 14px rgba(106,91,255,.28));
  transition:transform var(--dur-card) var(--ease),filter var(--dur-card);}
/* тело куска занимает 40 из 58 единиц viewBox, отсюда доли */
.qnum i{position:absolute;left:15.5%;top:15.5%;width:69%;height:69%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-style:normal;font-weight:700;font-size:16px;color:var(--ink);}
.card--q:hover .qnum svg{filter:drop-shadow(0 0 9px rgba(0,170,225,.75)) drop-shadow(0 0 20px rgba(106,91,255,.40));}
/* Карточка вопроса. Заголовки занимают разное число строк, поэтому линейки
   разъезжались. Раскладываем все четыре карточки по общим строкам сетки:
   маркер, заголовок, текст, результат. Где subgrid нет, работает запасной
   вариант на флексе: результат прижат к низу. */
.card--q{display:flex;flex-direction:column;}
.card--q:hover .qnum svg{transform:translateX(3px);}
.card--q > p:not(.result){margin-bottom:16px;}

.cols-4:has(.card--q){grid-template-rows:auto auto 1fr auto;grid-auto-rows:auto auto 1fr auto;}
@supports (grid-template-rows:subgrid){
  .card--q{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;}
  .card--q > p:not(.result){margin-bottom:0;}
}

.result{margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);font-size:15.5px;line-height:1.5;
  color:var(--blue-deep);font-weight:500;}

/* ============================== СПИСКИ ============================== */
.blist{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:16px;}
.blist li{position:relative;padding-left:26px;font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
.blist li::before{content:"";position:absolute;left:0;top:10px;width:12px;height:2px;border-radius:2px;background:var(--blue);}
.anchor-dark .blist li{color:#c3d0e0;}
.blist--plain li::before{background:#b9b3a6;}

/* ==================== СРАВНЕНИЯ (нельзя скопировать) ==================== */
/* Зазор держит оба выступа плюс ход навстречу, поэтому он крупный:
   визуально между кусками остаётся около 55px. */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:114px;align-items:stretch;margin-top:48px;}
/* Куски сделаны выше, чем требует текст: запас нужен, чтобы пары могли
   сходиться со смещением по вертикали, а не только строго по оси. */
.vs-card{position:relative;background:rgba(9,20,34,.55);border:1px solid rgba(34,166,230,.30);
  border-radius:var(--r-card-sm);padding:26px 28px;min-height:212px;}
/* Карточка становится куском паззла: контур рисует холст под текстом.
   Класс вешает скрипт, поэтому без него остаётся обычная карточка. */
.vs-card.pz{background:transparent;border-color:transparent;border-radius:0;overflow:visible;}
.vs-card > *{position:relative;z-index:1;}
.pzbg{position:absolute;z-index:0;display:block;pointer-events:none;}
.vs-name{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;margin-bottom:12px;}
/* Рубрикатор: рубрика и значение. Так сравнение читается построчно,
   а не как два независимых перечисления.
   По умолчанию рубрика над значением: на узкой карточке колонка значения
   сжималась до 60px и текст рассыпался. В две колонки разворачиваем только
   там, где карточка достаточно широкая: на больших экранах и на узких,
   где карточки идут в столбик во всю ширину. */
.rub{display:grid;grid-template-columns:1fr;margin-top:6px;}
.rub dt{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;
  color:#7f93a8;line-height:1.55;padding:11px 0 0;border-top:1px solid rgba(255,255,255,.10);}
.rub dd{font-size:15.5px;line-height:1.55;color:#c3d0e0;padding:2px 0 11px;}
.rub dt:first-of-type{border-top:0;padding-top:2px;}

@media (min-width:1101px), (max-width:960px) and (min-width:521px){
  .rub{grid-template-columns:auto minmax(0,1fr);column-gap:20px;}
  .rub dt{padding:10px 0;}
  .rub dd{padding:10px 0;border-top:1px solid rgba(255,255,255,.10);}
  .rub dt:first-of-type,.rub dt:first-of-type + dd{border-top:0;padding-top:2px;}
}
/* вывод стоит по центру, ровно под точкой столкновения */
/* Отступы сверху и снизу держат вертикальное смещение пары: кусок съезжает
   на 24px и не должен налезать ни на заголовок, ни на вывод. */
.vs-out{margin-top:46px;font-size:16px;color:#7fd2ee;font-weight:500;text-align:center;}
.vs-block{margin-top:56px;}
.vs-block:first-of-type{margin-top:30px;}
.vs-title{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin-bottom:4px;}

/* ==================== ТАБЛИЦА ИССЛЕДОВАНИЯ ==================== */
.rtable{margin-top:26px;border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;background:var(--card);}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:0;}
.rrow + .rrow{border-top:1px solid var(--hair);}
.rrow > div{padding:18px 24px;font-size:16px;line-height:1.55;}
.rrow > div:first-child{background:#faf9f6;color:var(--ink);font-weight:600;}
.rrow > div:last-child{color:var(--slate);}
.rhead > div{background:var(--dark) !important;color:#fff !important;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;}

/* Три метода — куски паззла, которые СТЫКУЮТСЯ (пара к экрану «нельзя
   скопировать», где куски не сходятся). Зазор 0: замки садятся в пазы. */
.methods{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:30px;align-items:stretch;}
.method{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card-sm);padding:24px 30px;}
/* кусок: контур рисует холст под текстом, класс вешает скрипт */
.method.pz{background:transparent;border-color:transparent;border-radius:0;overflow:visible;
  transition:transform .1s linear;}
/* :not(.pzbg) обязателен: иначе холст встаёт в поток и раздувает колонку */
.method > *:not(.pzbg){position:relative;z-index:1;}
.method h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:var(--ink);margin-bottom:6px;}
.method .when{font-size:14px;color:#95907f;margin-bottom:14px;}
.method ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
.method li{position:relative;padding-left:18px;font-size:15.5px;line-height:1.5;color:var(--slate);}
.method li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:2px;border-radius:2px;background:var(--blue);}

/* ==================== КЕЙСЫ ==================== */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px;}
/* Подложка чуть светлее и синее, чтобы экран не был мрачным. По верху —
   иридесцентный акцент (тёмный экран, свечение уместно). */
.case{position:relative;overflow:hidden;background:rgba(18,34,56,.62);
  border:1px solid rgba(34,166,230,.32);border-radius:var(--r-card);padding:28px 28px 26px;
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card),border-color var(--dur-card);}
.case::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--irid);background-size:220% 100%;}
.case:nth-child(2)::before{background-position:40% 0;}
.case:nth-child(3)::before{background-position:75% 0;}
.case:hover{transform:translateY(-5px);box-shadow:0 30px 62px -38px rgba(0,10,25,.9);
  border-color:rgba(70,180,240,.55);}
/* .anchor-dark p перебивает по специфичности, поэтому метка через .case */
.case .case-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#38a9ea;margin-bottom:10px;}
.case-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin-bottom:16px;line-height:1.25;}
.case dl{display:flex;flex-direction:column;gap:11px;}
.case dt{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8fa3b8;margin-bottom:2px;}
.case dd{font-size:15.5px;line-height:1.5;color:#c9d6e4;}
/* результат — фирменный голубой, выделен как итог кейса; отчёркнут сверху */
.case dl > div:last-child{margin-top:5px;padding-top:13px;border-top:1px solid rgba(70,180,240,.18);}
.case .res{color:#33a6ea;font-weight:600;text-shadow:0 0 16px rgba(0,140,220,.4);}

/* ==================== КОМУ НУЖНА ====================
   Обе колонки равноправны: одинаковая карточка и одинаковый цвет текста.
   Разница только в маркере: кусок встал в паз или развернут в другую сторону. */
.fit{border-radius:var(--r-plate);padding:32px 34px;background:var(--card);border:1px solid var(--hair);}
.fit--yes{border-color:rgba(0,136,204,.32);box-shadow:var(--sh-accent);}
.fit--no{border-color:var(--hair);box-shadow:0 26px 54px -40px rgba(20,40,60,.34);}
.fit-head{font-size:13px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:18px;}
.fit--yes .fit-head{color:var(--blue);}
.fit--no .fit-head{color:var(--slate);}
.fitlist{list-style:none;display:flex;flex-direction:column;gap:14px;}
.fitlist li{position:relative;padding-left:30px;font-size:var(--t-body);line-height:var(--lh-body);color:#2e3646;}
.fitlist li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:14px;
  -webkit-mask:var(--piece-mask) no-repeat center/contain;mask:var(--piece-mask) no-repeat center/contain;}
.fit--yes .fitlist li::before{background:var(--irid);background-size:340% 100%;background-position:0 0;
  filter:drop-shadow(0 1px 4px rgba(0,136,204,.32));}
/* каждый следующий кусок берет свой участок перелива — колонка играет, а не повторяется */
.fit--yes .fitlist li:nth-child(2)::before{background-position:22% 0;}
.fit--yes .fitlist li:nth-child(3)::before{background-position:44% 0;}
.fit--yes .fitlist li:nth-child(4)::before{background-position:60% 0;}
.fit--yes .fitlist li:nth-child(5)::before{background-position:80% 0;}
.fit--yes .fitlist li:nth-child(6)::before{background-position:100% 0;}
.fit--no  .fitlist li::before{background:linear-gradient(135deg,#a9b4c0,#6d7c8c);transform:rotate(180deg);}

/* левая колонка — «про вас»: переливающаяся нить сверху карточки */
.fit--yes{position:relative;overflow:hidden;}
.fit--yes::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--irid);background-size:220% 100%;opacity:.92;}

/* две карточки появляются со сдвигом, а не разом */
.cols-2 .fit.reveal:nth-child(2){transition-delay:.12s;}

/* при прокрутке куски встают в пазы по очереди (слева, с проявлением) */
.fit--yes .fitlist li::before{opacity:0;transform:translateX(-9px);
  transition:opacity .5s ease,transform .5s var(--ease);}
.fit--yes.in .fitlist li::before{opacity:1;transform:none;}
.fit--yes.in .fitlist li:nth-child(1)::before{transition-delay:.10s;}
.fit--yes.in .fitlist li:nth-child(2)::before{transition-delay:.19s;}
.fit--yes.in .fitlist li:nth-child(3)::before{transition-delay:.28s;}
.fit--yes.in .fitlist li:nth-child(4)::before{transition-delay:.37s;}
.fit--yes.in .fitlist li:nth-child(5)::before{transition-delay:.46s;}
.fit--yes.in .fitlist li:nth-child(6)::before{transition-delay:.55s;}

/* ==================== ШОВ МЕЖДУ СВЕТЛЫМИ ЭКРАНАМИ ====================
   Сквозная линия не обрывается: тонкая нить с переливающимся паззл-узлом. */
.seam{position:relative;height:0;max-width:var(--wrap-max);margin:0 auto;}
.seam::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(520px,68%);height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,136,204,.28),transparent);}
.seam::after{content:"";position:absolute;left:50%;top:-4px;transform:translateX(-50%);
  width:10px;height:9px;
  -webkit-mask:var(--piece-mask) no-repeat center/contain;mask:var(--piece-mask) no-repeat center/contain;
  background:var(--irid);background-size:180% 100%;
  filter:drop-shadow(0 0 6px rgba(0,136,204,.5));}

/* ==================== ШАГИ РАБОТЫ — ТАЙМЛАЙН ====================
   Нумерация слева, сплошная нить, на ней крупные светящиеся паззл-узлы.
   Опция — тоже цветной узел (переливается тише), а не бесцветный. */
.steps{--c1:72px;--gap:34px;--rail:89px;position:relative;display:flex;flex-direction:column;margin-top:34px;}
.steps::before{content:"";position:absolute;top:9px;bottom:28px;left:var(--rail);width:2px;transform:translateX(-50%);
  border-radius:2px;
  background:linear-gradient(180deg,rgba(0,136,204,.10),rgba(0,136,204,.34) 16%,rgba(0,136,204,.34) 80%,rgba(0,136,204,.08));}
.step{position:relative;display:grid;grid-template-columns:var(--c1) minmax(0,1fr);gap:var(--gap);
  align-items:start;padding:0 0 34px 0;}
.step:last-child{padding-bottom:0;}
/* подложка под узлом — нить не просвечивает сквозь вырезы паззла */
.step::before{content:"";position:absolute;top:-1px;left:var(--rail);transform:translateX(-50%);
  width:27px;height:27px;border-radius:50%;background:var(--paper);z-index:1;}
/* узел таймлайна — переливающийся паззл со свечением */
.step::after{content:"";position:absolute;top:2px;left:var(--rail);transform:translateX(-50%);
  width:24px;height:21px;z-index:2;
  -webkit-mask:var(--piece-mask) no-repeat center/contain;mask:var(--piece-mask) no-repeat center/contain;
  background:var(--irid);background-size:300% 100%;background-position:0 0;
  filter:drop-shadow(0 0 8px rgba(0,136,204,.5));}
.step:nth-child(2)::after{background-position:30% 0;}
.step:nth-child(3)::after{background-position:55% 0;}
.step:nth-child(4)::after{background-position:80% 0;}
/* опция: полноценный цветной узел (свой яркий участок перелива); «необязательно» несёт серая подпись */
.step--opt::after{background-position:45% 0;}
.step-num{grid-column:1;text-align:right;padding-top:3px;padding-right:6px;
  font-family:var(--font-display);font-weight:700;
  font-size:14px;color:var(--blue);letter-spacing:.06em;text-transform:uppercase;}
.step--opt .step-num{color:#95907f;}
.step > div:not(.step-num){grid-column:2;min-width:0;}
.step-name{font-family:var(--font-display);font-weight:700;font-size:var(--t-h3);color:var(--ink);margin-bottom:8px;}
.step-time{font-size:14.5px;color:#95907f;font-weight:400;margin-left:10px;}
.step p{font-size:var(--t-body);line-height:var(--lh-body);color:var(--slate);}
/* появление по очереди — таймлайн «строится» */
.steps .step.reveal:nth-child(1){transition-delay:0s;}
.steps .step.reveal:nth-child(2){transition-delay:.09s;}
.steps .step.reveal:nth-child(3){transition-delay:.18s;}
.steps .step.reveal:nth-child(4){transition-delay:.27s;}
.steps .step.reveal:nth-child(5){transition-delay:.36s;}
.support{display:flex;gap:24px;flex-wrap:wrap;margin-top:14px;font-size:15px;color:var(--slate);}
.support span{position:relative;padding-left:16px;}
.support span::before{content:"";position:absolute;left:0;top:9px;width:8px;height:2px;border-radius:2px;background:var(--blue);}

/* ==================== ЦЕНЫ ==================== */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px;align-items:start;}
.plan{position:relative;background:var(--card);border:1px solid var(--hair);border-radius:var(--r-plate);
  padding:32px 30px 34px;display:flex;flex-direction:column;
  transition:transform var(--dur-card) var(--ease),box-shadow var(--dur-card);}
.plan:hover{transform:translateY(-5px);box-shadow:var(--sh-card);}
/* без overflow:hidden — он срезал бейдж; скругляем саму полосу */
.plan--best{border-color:rgba(0,136,204,.45);box-shadow:var(--sh-accent);}
.plan--best::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--irid);
  background-size:220% 100%;animation:shimmer 8s ease-in-out infinite;
  border-radius:var(--r-plate) var(--r-plate) 0 0;}
.plans{padding-top:16px;}                     /* место бейджу над карточкой */
.plan-badge{position:absolute;z-index:2;top:-13px;left:30px;background:var(--blue);color:#fff;font-size:12.5px;
  font-weight:700;letter-spacing:.04em;line-height:1.5;padding:5px 14px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 16px -6px rgba(0,60,110,.7);}
.plan-label{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#95907f;margin-bottom:6px;}
.plan-for{font-size:15px;color:var(--slate);margin-bottom:16px;}
.plan-price{font-family:var(--font-display);font-weight:700;font-size:34px;color:var(--ink);line-height:1;margin-bottom:8px;}
.plan-term{font-size:15px;color:var(--slate);margin-bottom:18px;}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:24px;}
.plan li{position:relative;padding-left:24px;font-size:15.5px;line-height:1.5;color:var(--slate);}
.plan li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:2px;border-radius:2px;background:var(--blue);}
.plan .btn{margin-top:auto;}
@keyframes shimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ==================== FAQ ==================== */
.faq{margin-top:30px;border-top:1px solid var(--hair);}
.faq details{border-bottom:1px solid var(--hair);}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);
  transition:color var(--dur-hover);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--blue-deep);}
.faq summary::after{content:"";position:absolute;right:12px;top:50%;width:12px;height:12px;
  border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq .answer{padding:0 44px 24px 0;}
.faq .answer p{font-size:16.5px;line-height:1.6;color:var(--slate);}
.faq .answer p + p{margin-top:10px;}
.faq .answer ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.faq .answer li{position:relative;padding-left:24px;font-size:16px;line-height:1.55;color:var(--slate);}
.faq .answer li::before{content:"";position:absolute;left:0;top:10px;width:11px;height:2px;border-radius:2px;background:var(--blue);}

/* ==================== КТО МЫ ==================== */
.about{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px;}
.about-item h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;margin-bottom:8px;}
.about-item p{font-size:16px;line-height:1.55;color:#c3d0e0;}

/* ==================== ОПЫТ И ЭКСПЕРТИЗА (тёмный) ==================== */
.exp-top{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:48px;align-items:stretch;margin-top:36px;}
.exp-intro{display:flex;flex-direction:column;justify-content:center;}
.exp-photo img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 16%;
  border-radius:18px;border:1px solid rgba(34,166,230,.28);box-shadow:0 30px 62px -34px rgba(0,0,0,.62);display:block;}
.exp-byline{margin-top:14px;font-family:var(--font-text);font-weight:500;font-size:16px;color:#dbe6f2;letter-spacing:.01em;}
.exp-stats{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:30px;}
.exp-stat{display:flex;flex-direction:column;}
.exp-num{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1;
  background:var(--irid);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;}
.exp-cap{font-size:15px;color:#c3d0e0;margin-top:8px;}
.exp-principles{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.exp-pr h3{font-family:var(--font-display);font-weight:700;font-size:18px;color:#fff;margin-bottom:8px;}
.exp-pr p{font-size:16px;line-height:1.55;color:#c3d0e0;}
/* регалии в три колонки, как на консалтинге */
.creds{column-count:3;column-gap:46px;margin-top:46px;}
.cred{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:28px;}
.cred h3{font-family:var(--font-display);font-weight:700;font-size:17px;color:#fff;margin-bottom:12px;
  position:relative;padding-left:20px;}
.cred h3::before{content:"";position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:3px;
  background:var(--irid);background-size:180% 100%;}
.cred ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.cred li{font-size:14.5px;line-height:1.44;color:#aebccd;}

/* ==================== ФОРМА ПО ЦЕНТРУ + ПАЗЗЛ-ЛЕСЕНКИ ПО БОКАМ ====================
   Форма в центре секции. По обе стороны — симметричная лесенка из паззлов:
   «путь наверх», ближняя к форме ступень ниже, цвет от фиолета к мяте (рост).
   Чистый CSS, позиции детерминированы — ничего не «плавает». */
.leadsec .inner{text-align:center;}
.leadsec .h2{max-width:820px;margin-left:auto;margin-right:auto;}
.leadsec .sec-sub{max-width:640px;margin-left:auto;margin-right:auto;}
.lead-row{display:flex;justify-content:center;margin-top:36px;}
.leadsec .ctaform{flex:0 0 auto;width:min(520px,100%);text-align:left;position:relative;z-index:3;}
/* лесенки-паззлы (canvas #pzStairs) рисуются тем же кодом, что герой — main.js */
@media (max-width:1200px){ #pzStairs{display:none;} }

/* ==================== МОДАЛКА «ЗАКАЗАТЬ ЗВОНОК» ====================
   Разметка и поведение перенесены с консалтинга без изменений. */
.modal[hidden]{display:none;}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;}
.modal-overlay{position:absolute;inset:0;background:rgba(8,16,26,.66);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
.modal-box{position:relative;z-index:1;width:100%;max-width:440px;background:#fff;border-radius:20px;
  padding:40px 38px 34px;box-shadow:0 40px 90px -30px rgba(6,20,40,.6);
  max-height:calc(100vh - 48px);max-height:calc(100svh - 48px);overflow-y:auto;
  animation:modalIn .3s cubic-bezier(.2,.7,.2,1);}
.modal-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:none;background:transparent;
  font-size:26px;line-height:1;color:#8ba0b8;cursor:pointer;border-radius:8px;transition:.2s;}
.modal-x:hover{background:#f0f4f8;color:var(--ink);}
.modal-title{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);margin-bottom:10px;}
.modal-sub{font-size:15.5px;line-height:1.5;color:var(--slate);margin-bottom:22px;}
.b24-wrap{min-height:120px;}
.b24-wrap--modal{margin-top:4px;}
/* раскрытая форма в финальном блоке: все кнопки страницы ведут сюда */
.b24-wrap--cta{max-width:720px;margin:0 auto;}
.ctaform{margin-top:34px;scroll-margin-top:24px;}
.cta-formlabel{font-size:16.5px;line-height:1.5;color:#c3d0e0;text-align:center;
  max-width:640px;margin:0 auto 18px;}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
body.modal-open{overflow:hidden;}

/* кнопка звонка: в шапке, в мобильном меню и в подвале */
.nav-cb{white-space:nowrap;}
.mm-cb{display:none;align-self:flex-start;margin:10px 8px 2px;color:#fff;}
.foot-cb{margin-top:10px;align-self:flex-start;border-color:rgba(255,255,255,.30);color:#dbe6f2;}
.foot-cb:hover{border-color:#fff;color:#fff;}

/* ============================== ПОДВАЛ ============================== */
.foot{background:#0b1622;color:#aebccd;padding:56px 90px 0;}
.foot-inner{max-width:var(--wrap-max);margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1.4fr 1.2fr;
  gap:40px;padding-bottom:40px;}
.foot-col{display:flex;flex-direction:column;gap:11px;}
.foot-col a{color:#aebccd;text-decoration:none;font-size:15px;transition:color .2s;}
.foot-col a:hover{color:#2a9fe0;}
.foot-h{font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;
  color:#6f8296;margin-bottom:4px;}
.foot-logo{display:inline-block;margin-bottom:6px;}
.foot-logo img{height:38px;width:auto;}
.foot-brandname{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;margin:2px 0;}
.foot-tag{font-size:14.5px;line-height:1.5;color:#c3d0e0;max-width:290px;}
.foot-tag--dim{color:#7f92a6;font-size:13.5px;}
/* ссылка на сайт-визитку: сдержанно, чтобы не тянуть внимание от конверсии.
   .foot-col a перебивает по специфичности, поэтому селектор усилен. */
.foot-col a.foot-author{display:inline-block;margin-top:10px;font-size:13.5px;color:#5fc4f5;
  text-decoration:none;transition:color .2s;}
.foot-col a.foot-author:hover{color:#8ed8fb;}
.foot-contacts a{font-weight:500;color:#dbe6f2;}
.foot-legal{border-top:1px solid rgba(255,255,255,.09);padding:20px 24px;text-align:center;}
.foot-legal p{font-size:12.5px;color:#6f8296;max-width:var(--wrap-max);margin:0 auto;}

/* ============================ COOKIE ============================ */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:60;max-width:920px;margin:0 auto;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
  background:#fff;border:1px solid #dde5ee;border-radius:14px;padding:18px 22px;
  box-shadow:0 14px 40px rgba(15,23,42,.16);}
.cookie[hidden]{display:none;}
.cookie-text{font-size:14px;line-height:1.5;color:#4a5c70;margin:0;flex:1 1 380px;}
.cookie-text a{color:var(--blue);}

/* появление блоков */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ЭКРАН «Результат»: карточки заметно выезжают по очереди, вывод подсвечивается
   последним — будто всё сошлось в один итог. Паззла тут нет.
   Шаг между карточками крупный, чтобы каскад читался как очередь, а не как
   одновременное появление. */
.deliver .card.reveal{transform:translateY(34px);
  transition:opacity .75s ease,transform .75s var(--ease);}
.deliver .card.reveal.in{transform:none;}
.deliver .card.reveal:nth-child(1){transition-delay:0s;}
.deliver .card.reveal:nth-child(2){transition-delay:.18s;}
.deliver .card.reveal:nth-child(3){transition-delay:.36s;}
.deliver .card.reveal:nth-child(4){transition-delay:.54s;}
.deliver .card.reveal:nth-child(5){transition-delay:.72s;}
.deliver .card.reveal:nth-child(6){transition-delay:.9s;}

/* Вывод: тёмная плашка крупнее и несёт кнопку. Появляется после карточек,
   левая грань иридесцентная, по плашке один раз проходит свет. */
.takeaway--result{padding:38px 44px 40px;transition:opacity .8s ease .95s,transform .8s var(--ease) .95s;}
/* текст держим слева, справа освободили место под график роста */
.tk-body{position:relative;z-index:2;max-width:60%;}
/* график занимает высоту контента: от заголовка до кнопки, а не жмётся к центру */
.tk-art{position:absolute;z-index:1;top:26px;right:40px;bottom:28px;width:40%;max-width:490px;
  display:flex;align-items:stretch;justify-content:center;pointer-events:none;}
.tk-art svg{width:100%;height:100%;}
/* график только когда справа реально есть место: ниже буллиты переносятся
   и заезжают под кривую, поэтому прячем и отдаём текст на всю ширину */
@media (max-width:1180px){
  .tk-body{max-width:none;}
  .tk-art{display:none;}
}
.tk-lead{font-size:20px;color:#fff;margin:0 0 14px;}
.tk-lead b{font-weight:700;}
.tk-list{list-style:none;display:flex;flex-direction:column;gap:12px;position:relative;z-index:2;}
.tk-list li{position:relative;padding-left:26px;font-size:17px;line-height:1.5;color:#c3d0e0;}
.tk-list li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:2px;border-radius:2px;background:var(--blue);}
.takeaway .tk-btn{margin-top:26px;position:relative;z-index:2;
  box-shadow:0 14px 30px -14px rgba(0,120,190,.7);}
/* CTA-плашка процесса: заголовок / текст / буллиты внутри тёмного блока */
.takeaway--cta .tk-lead{font-size:23px;font-weight:700;color:#fff;line-height:1.25;margin:0 0 10px;}
.takeaway--cta .tk-text{font-size:18px;color:#c3d0e0;line-height:1.5;margin:0 0 18px;max-width:760px;}
/* стрелка компаса: каждый раз в поле зрения прокручивается и тормозит носом на звезде.
   Класс .spin навешивается/снимается наблюдателем при входе/выходе экрана (main.js). */
.takeaway--cta .needle{transform-box:view-box;transform-origin:150px 150px;}
.takeaway--cta .needle.spin{animation:compass-spin 2.5s cubic-bezier(.16,.72,.18,1) both;}
@keyframes compass-spin{from{transform:rotate(-900deg);}to{transform:rotate(0);}}
.takeaway--result::before{background:var(--irid);background-size:220% 100%;
  animation:shimmer 9s ease-in-out infinite;}
.takeaway--result::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(120,220,255,.16) 50%,transparent 66%);
  transform:translateX(-120%);}
.takeaway--result.in::after{animation:tk-sweep 1.35s var(--ease) 1.15s 1 forwards;}
@keyframes tk-sweep{to{transform:translateX(120%);}}

/* ============================== АДАПТИВ ==============================
   Четыре яруса. Планшетную полосу 861-1100 закрываем сразу. */
@media (max-width:1100px){
  .nav .menu{gap:16px;font-size:13.5px;}
  .nav .menu a{white-space:nowrap;}
  .cols-4{grid-template-columns:1fr 1fr;}
  .cases,.plans,.about{grid-template-columns:1fr 1fr;}
  .plans{gap:20px;}
  .creds{column-count:2;}
}
@media (max-width:960px){
  /* minmax(0,…), иначе колонка не сожмётся ниже неразрывной кнопки */
  .hgrid{grid-template-columns:minmax(0,1fr);align-items:end;padding-bottom:56px;}
  .htext{max-width:none;}
  /* на узких доска уходит за текст, поэтому приглушаем её: заголовок важнее */
  .hero canvas{opacity:.5;}
  .hart{display:none;}          /* иначе пустая колонка станет строкой и добавит 40px пустоты */
  /* в столбик куски сходятся по вертикали: зазор тот же по смыслу,
     выступы плюс ход навстречу. Запас высоты тут не нужен, смещения нет. */
  .vs{grid-template-columns:1fr;gap:96px;margin-top:22px;}
  .vs-card{min-height:0;}
  .vs-out{margin-top:26px;}
  .vs-block{margin-top:44px;}
}
@media (max-width:1000px){
  /* цепочка методов встаёт вертикально: замки переходят на верх и низ */
  .methods{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .nav .menu{display:none;}
  .nav{flex-wrap:wrap;row-gap:0;}
  .burger{display:flex;}
  .menu-mobile{display:flex;flex-direction:column;gap:2px;width:100%;order:3;
    margin:6px -8px 14px;padding:10px 8px 14px;border-top:1px solid rgba(255,255,255,.14);}
  .menu-mobile[hidden]{display:none;}
  .menu-mobile a{color:#fff;text-decoration:none;font-size:16px;padding:12px 8px;border-radius:8px;opacity:.9;}
  .menu-mobile a:hover,.menu-mobile a:focus{background:rgba(255,255,255,.09);opacity:1;}
  /* в шапке места нет: кнопку звонка переносим в раскрывающееся меню */
  .nav-cb{display:none;}
  .mm-cb{display:inline-flex;}
  .nav,.hgrid{padding-left:28px;padding-right:28px;}
  .sec{padding:var(--pad-sec-mob);}
  .anchor-dark .inner{padding:52px 28px;}
  .h2{font-size:30px;}
  .cols-2,.cols-3,.cols-4,.cases,.plans,.about{grid-template-columns:1fr;}
  /* экран опыта в столбик: фото сверху, регалии в одну колонку */
  .exp-top{grid-template-columns:1fr;gap:30px;}
  .exp-photo{max-width:380px;}
  .exp-principles{grid-template-columns:1fr;}
  .creds{column-count:1;}
  /* плашка вывода в столбик: текст на всю ширину, график роста убираем */
  .tk-body{max-width:none;}
  .tk-art{display:none;}
  .rrow{grid-template-columns:1fr;}
  .rrow > div:first-child{border-bottom:1px solid var(--hair);}
  .rhead{display:none;}
  /* таймлайн на телефоне: узел уходит в свою колонку слева, «ШАГ N» — кикером над названием */
  .steps{--c1:34px;--gap:16px;--rail:17px;}
  .step{padding-bottom:26px;}
  .step-num{grid-column:2;order:-1;text-align:left;padding-top:0;margin-bottom:3px;font-size:12px;letter-spacing:.05em;}
  .foot{padding:44px 28px 0;}
  .foot-inner{grid-template-columns:1fr 1fr;gap:30px 28px;}
}
@media (max-width:700px){
  .foot-col a{padding:7px 0;}
}
@media (max-width:520px){
  .foot-inner{grid-template-columns:1fr;}
  .sec{padding-left:20px;padding-right:20px;}
  .nav,.hgrid{padding-left:20px;padding-right:20px;}
  .card,.fit,.plan{padding:24px 20px;}
  .cookie{left:12px;right:12px;bottom:12px;padding:16px;}
  .takeaway{padding:26px 22px;}
  .takeaway--result{padding:26px 22px 28px;}
  .takeaway p{font-size:18px;}
  /* на узком экране длинная кнопка не помещается в строку: разрешаем перенос */
  .hero-actions .btn,.sec .btn-lg,.takeaway .tk-btn{width:100%;white-space:normal;text-align:center;line-height:1.25;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .deliver .card.reveal{transition-delay:0s;transform:none;}
  .plan--best::before,.takeaway--result::before{animation:none;}
  .takeaway--result::after{display:none;}
  .fit--yes .fitlist li::before{opacity:1;transform:none;transition:none;}
  .takeaway--cta .needle,.takeaway--cta .needle.spin{animation:none;transform:none;}
}