/* ============================================================
   Сопровождение от Automy AI — дизайн-система automyai.ru.
   Токены, шрифты (Muller + Moniqa) и компоненты перенесены
   с прод-сайта (Hostinger, /var/www/kurs-landing, 2026-07-13).
   ============================================================ */

@font-face{font-family:'Muller';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Muller-Regular.woff2') format('woff2');}
@font-face{font-family:'Muller';font-weight:400;font-style:italic;font-display:swap;src:url('fonts/Muller-Italic.woff2') format('woff2');}
@font-face{font-family:'Muller';font-weight:700;font-style:normal;font-display:swap;src:url('fonts/Muller-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Muller';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/Muller-ExtraBold.woff2') format('woff2');}
@font-face{font-family:'Muller';font-weight:900;font-style:normal;font-display:swap;src:url('fonts/Muller-Heavy.woff2') format('woff2');}
@font-face{font-family:'Moniqa';font-weight:400;font-style:normal;font-display:swap;src:url('fonts/Moniqa-Display.woff2') format('woff2');}
@font-face{font-family:'Moniqa';font-weight:800;font-style:normal;font-display:swap;src:url('fonts/Moniqa-ExtraBold.woff2') format('woff2');}

:root{
  /* палитра фонов 1-в-1 с automyai.ru: база #1e2024, бэнд-секции #212325 (разница всего 3 пункта,
     поэтому стык не читается ступенью), hero и финал чуть темнее — #1c1e22 */
  --bg:#1e2024;
  --bg2:#252729;
  --bg3:#212325;
  --hero-bg:#1c1e22;
  --ink:#f4f0e8;
  --muted:#a39c90;
  --muted2:#6e675e;
  --orange:#ED7E2F;
  --orange2:#ff7d1f;
  --chalk:#f0e4c8;                       /* цвет мела из one_chalk.png — им набрано слово рядом с мел-цифрой */
  --ember:#ff5a0f;
  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.16);
  --card:rgba(255,255,255,.022);
  --ease:cubic-bezier(.16,1,.3,1);
  --sec:clamp(44px,5vw,80px);            /* единый вертикальный ритм секций (зазор = 2×--sec), плотнее по правке Гоши 25.07 */
  --f-display:'Muller','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-sans:'Muller','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace;   /* номера тарифов, как на сайте сопровождения */
}

*{box-sizing:border-box;margin:0;padding:0;}
b,strong{font-weight:700;}
html{
  scroll-behavior:smooth;
  /* без этого Safari и встроенный браузер Telegram сами раздувают кегль при повороте телефона */
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* overflow-x продублирован с body: в iOS правило только на body местами не держит */
  overflow-x:hidden;
}
body{
  font-family:var(--f-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;   /* синяя вспышка по тапу в WebView */
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* боковые поля не меньше выреза экрана: в ландшафте на iPhone «чёлка» съедала первый
   символ строки. Первая строка — запасная для движков без env()/max() */
.wrap{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(22px,5vw,64px);}
.wrap{
  padding-left:max(clamp(22px,5vw,64px),env(safe-area-inset-left));
  padding-right:max(clamp(22px,5vw,64px),env(safe-area-inset-right));
}

/* ---------- Кнопки ---------- */
.btn{
  position:relative;overflow:hidden;z-index:0;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-sans);font-weight:700;font-size:15.5px;
  padding:16px 32px;border-radius:999px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),color .3s var(--ease),border-color .3s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--orange);
  transform:translateY(102%);transition:transform .3s var(--ease);
}
.btn:hover::before{transform:translateY(0);}
.btn .arr{display:inline-block;transition:transform .35s var(--ease);}
.btn:hover .arr{transform:translate(4px,-2px);}
.btn-primary{background:#fff;color:#1e2024;box-shadow:0 12px 44px -14px rgba(255,255,255,.5);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 60px -12px rgba(237,126,47,.6);color:#120a04;}
.btn-ghost{background:rgba(255,255,255,.02);color:var(--ink);border-color:var(--line2);}
.btn-ghost:hover{transform:translateY(-3px);color:#120a04;border-color:var(--orange);}
.btn-sm{padding:11px 22px;font-size:14px;}
.btn-lg{padding:22px 58px;font-size:18px;}

/* ---------- Шапка ----------
   Механика с automyai.ru (порт 27.07): шапка едет вместе со страницей и при скролле
   получает класс .scrolled. На десктопе это фон с размытием, на телефоне —
   «плавающая пилюля»: полоска остаётся прозрачной, фон и тень получает сама .nav.
   Из потока шапка по-прежнему выведена (fixed), поэтому её высота не прибавляется
   к 100svh и hero остаётся ровно в один экран. */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background .3s,border-color .3s;}
header.scrolled{background:rgba(28,30,34,.72);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);}
/* шапка идёт во всю ширину экрана, а не по колонке контента — как на основном сайте */
header .wrap{max-width:none;
  padding-left:max(clamp(22px,4vw,44px),env(safe-area-inset-left));
  padding-right:max(clamp(22px,4vw,44px),env(safe-area-inset-right));}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;}
.nav .logo{justify-self:start;display:flex;align-items:center;}
.logo img{height:26px;width:auto;display:block;transform:translateY(2px);}
.nav-links{justify-self:center;display:flex;gap:28px;}
.nav-links a{
  position:relative;font-size:14.5px;font-weight:500;color:var(--muted);
  transition:color .2s;padding:4px 0;
}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease);
}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:14px;}
/* «Назад» и дублирующая кнопка живут только в мобильном меню */
.nav-back{display:none;}
.nav-links .nav-cta-m{display:none;}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;
  padding:10px 6px;-webkit-tap-highlight-color:transparent;}
.burger span{width:24px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s;}
.burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
/* якоря: шапка теперь fixed и накрывала бы начало секции */
#how,#rewards,#inside,#faq{scroll-margin-top:86px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  /* ровно один экран на любом устройстве: 100vh как запасной, 100svh для мобильных
     с плавающей панелью; контент строго по центру, шапка поверх (absolute) */
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
  background:var(--hero-bg);
  padding:96px 20px 88px;
}
/* свечение hero 1-в-1 с automyai.ru: два слоя, плотные стопы, дыхание через scale.
   Раньше у нас было opacity:.5 + blur(6px) — из-за этого первый экран выглядел темнее оригинала */
.hero .glow{
  position:absolute;inset:-8%;z-index:0;pointer-events:none;
  will-change:scale,translate;
  background:
    radial-gradient(56% 56% at 30% 98%, #ff7f24 0%, #f2651e 15%, #ce4d18 29%,
      rgba(178,122,98,.5) 42%, rgba(170,168,170,.2) 51%, transparent 63%),
    radial-gradient(42% 34% at 33% 64%, rgba(198,198,202,.12), transparent 72%);
  animation:heroBreathe 16s ease-in-out infinite;
  translate:var(--gx,0px) var(--gy,0px);transition:translate .8s var(--ease);
  transform:translateZ(0);backface-visibility:hidden;
}
.hero .glow::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(24% 20% at 27% 89%, rgba(255,214,158,.55), transparent 60%);
  mix-blend-mode:screen;
}
.hero .glow2{
  position:absolute;inset:-8%;z-index:0;pointer-events:none;
  animation:glowBreath 9s ease-in-out infinite reverse;
  background:radial-gradient(38% 40% at 72% 32%, rgba(255,120,40,.16), transparent 66%);
  translate:var(--gx2,0px) var(--gy2,0px);transition:translate 1.1s var(--ease);
}
.hero-center{position:relative;z-index:2;max-width:1080px;}

.hero-eyebrow{
  display:inline-block;margin:0 auto clamp(16px,2.4vh,28px);
  font-family:var(--f-display);font-size:clamp(14px,1.3vw,16.5px);font-weight:600;letter-spacing:.005em;
  color:var(--orange);
}

.pre-badge{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:13px 32px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.025));
  border:1px solid var(--line);
  margin:0 auto clamp(24px,3.4vh,40px);
}
.pre-badge::before{
  content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
}
.pre-badge .pb-txt{position:relative;display:flex;flex-direction:column;gap:3px;line-height:1.14;text-align:center;}
.pre-badge .pb-sub{font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.pre-badge .pb-main{font-size:15.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4);}

/* стикер набора — приём с automyai.ru: живая плашка вместо сухой строки-надзаголовка */
.pb-sticker{
  display:inline-block;margin:0 auto clamp(26px,3.6vh,44px);
  background:var(--orange);color:#141210;
  font-family:var(--f-sans);font-weight:700;font-size:clamp(17px,1.9vw,24px);
  letter-spacing:.01em;line-height:1.25;
  padding:clamp(13px,1.4vw,18px) clamp(24px,2.4vw,34px);border-radius:18px;transform:rotate(-2deg);
  box-shadow:0 18px 44px -16px rgba(237,126,47,.6);
}
.pb-sticker b{font-weight:800;}

/* искры, всплывающие от нижнего свечения (с основного сайта) */
.spark{
  position:absolute;bottom:14%;width:5px;height:5px;border-radius:50%;z-index:1;pointer-events:none;
  background:rgba(255,186,128,.85);filter:blur(1px);opacity:0;animation:floaty 8s ease-in-out infinite;
}
@keyframes floaty{
  0%{transform:translateY(30px) scale(.6);opacity:0}
  25%{opacity:.8}
  60%{opacity:.45}
  100%{transform:translateY(-90px) scale(1);opacity:0}
}

/* кегль с automyai.ru: clamp(32,5.4vw,...) при line-height 1.05.
   Верх срезан с 96px до 86px: контейнер hero упирается в max-width 1080px около
   1620px ширины, а кегль продолжал расти с vw. Замер 10.09.2026 на 1920px:
   строка «и получайте 10% с оплаты» занимала 1178px при контейнере 1080 и рвалась
   на три строки с висячим «оплаты», высота заголовка прыгала 202 -> 325px.
   При 86px та же строка 1055px и влезает на любой ширине. */
.hero-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(32px,5.4vw,86px);line-height:1.05;letter-spacing:-.01em;color:#fff;
  overflow-wrap:break-word;
}
/* заголовок выезжает построчно из-под собственной линии, с расфокусом — как на automyai.ru */
.hero-title .line{display:block;overflow:visible;padding:.06em 0;}
.hero-title .line>span{
  display:block;transform:translateY(120%);filter:blur(10px);
  transition:transform .6s var(--ease),filter .5s var(--ease);
}
.loaded .hero-title .line:nth-child(1)>span{transition-delay:.08s;}
.loaded .hero-title .line:nth-child(2)>span{transition-delay:.18s;}
.loaded .hero-title .line>span{transform:translateY(0);filter:blur(0);}
.hero-title .o{color:var(--orange);font-weight:700;}

/* рукописная заметка у кнопки + индикатор прокрутки — оба приёма с основного сайта */
.hero-note{
  position:absolute;right:calc(50% + 190px);bottom:-6px;z-index:2;
  display:flex;align-items:center;gap:12px;transform:rotate(-2deg);
  opacity:0;transition:opacity 1s var(--ease) 1.2s;pointer-events:none;
}
.loaded .hero-note{opacity:1;}
.hero-note .hn-txt{
  text-align:right;font-family:var(--f-sans);font-style:italic;font-weight:600;
  font-size:clamp(14px,1.25vw,17px);line-height:1.35;color:rgba(255,255,255,.78);letter-spacing:.01em;
  white-space:nowrap;                 /* иначе короткая фраза дробится на три строки */
}
.hero-note .hn-arrow{
  width:clamp(44px,3.8vw,56px);height:auto;color:var(--orange);flex:none;
  margin-bottom:26px;transform:rotate(-55deg);
}
@media (max-width:1100px){.hero-note{display:none;}}
.hero-scroll{
  position:absolute;left:max(clamp(22px,5vw,64px),env(safe-area-inset-left));
  /* внутри Telegram env(safe-area-inset-bottom) отдаёт 0 — реальное значение кладёт
     JS в --tg-safe-bottom (в :root у неё фолбэк на env для обычных браузеров) */
  bottom:calc(clamp(38px,4.4vh,58px) + var(--tg-safe-bottom, 0px));z-index:2;
  display:inline-flex;align-items:center;gap:13px;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:0;transition:opacity 1s var(--ease) .95s;
}
.loaded .hero-scroll{opacity:1;}
.hero-scroll:hover{color:var(--ink);}
.hero-scroll .bar{position:relative;width:1px;height:46px;background:rgba(255,255,255,.2);overflow:hidden;}
.hero-scroll .bar::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:42%;background:#fff;
  animation:scrolly 2.2s var(--ease) infinite;
}
@keyframes scrolly{0%{transform:translateY(-110%)}60%,100%{transform:translateY(240%)}}
/* на телефоне заголовок секции «Как это работает» виден сразу под первым экраном,
   и подпись индикатора повторяла его слово в слово. Оставляем одну полоску */
@media (max-width:620px){
  .hero-scroll .hs-txt{display:none;}
  .hero-scroll .bar{height:38px;}
}
.hero-meta{
  display:block;margin:28px auto 0;max-width:760px;
  font-size:clamp(16px,1.6vw,21px);color:rgba(255,255,255,.6);letter-spacing:.01em;line-height:1.55;
}
.hero-cta{position:relative;margin-top:clamp(28px,4.2vh,46px);display:flex;flex-direction:column;align-items:center;gap:14px;}
.hero-cta .cta-note{font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);font-weight:600;}
/* подпись «кто такой @Anti4ay» под CTA — как на сопровождении */
.cta-who{display:block;margin-top:7px;font-size:13px;letter-spacing:normal;text-transform:none;color:var(--muted);font-weight:500;}

/* ---------- Выбор награды: баллы или деньги ----------
   Одно приглашение, две валюты на выбор. Раньше это были две страницы под две
   аудитории (/referral/ баллы и /referral/team/ деньги), с 10.09.2026 выбор
   отдан человеку: у каждой пары блоков стоит data-rw, видна та половина,
   что совпадает с data-rw на body. Состояние держит инлайн-скрипт в <head>,
   иначе на медленной сети успевает мигнуть чужой вариант. */
html[data-rw="points"] [data-rw="cash"],
html[data-rw="cash"] [data-rw="points"]{display:none !important;}

.rwb-wrap{margin:clamp(28px,3.4vh,42px) auto 0;max-width:760px;}
/* подпись-указание: без неё плитки читаются как две справки, а не как выбор */
.rwb-label{
  text-align:center;font-family:var(--f-sans);font-size:13px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:14px;
}
/* геометрия и типографика — как в блоке рефералки на лендинге:
   две ровные карточки с числом-героем и курсивным «или» между ними */
.rwb-grid{display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,1.8vw,26px);flex-wrap:wrap;}
.rwb{
  position:relative;appearance:none;cursor:pointer;text-align:center;font:inherit;
  flex:0 0 clamp(200px,18vw,268px);
  padding:clamp(26px,2.4vw,36px) clamp(26px,2.6vw,40px);border-radius:22px;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .35s var(--ease),background .35s var(--ease),
             transform .35s var(--ease);
}
.rwb:hover{transform:translateY(-3px);border-color:rgba(237,126,47,.5);
  background:linear-gradient(150deg,rgba(237,126,47,.14),rgba(255,255,255,.012));}
/* выбранная плитка: только рамка и цвет числа — карточка не меняет размер,
   поэтому при переключении ничего не прыгает */
.rwb.is-on{border-color:var(--orange);
  background:linear-gradient(150deg,rgba(237,126,47,.16),rgba(255,255,255,.012));}
/* число-герой, как в карточках на лендинге */
.rwb-num{
  display:block;font-family:var(--f-display);font-weight:800;color:var(--ink);
  font-size:clamp(58px,6.6vw,98px);line-height:1;letter-spacing:-.03em;
  transition:color .35s var(--ease);
}
.rwb:hover .rwb-num,
.rwb.is-on .rwb-num{color:var(--orange);}
.rwb-num small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:.02em;}
.rwb-unit{
  display:block;margin-top:12px;font-family:var(--f-sans);
  font-size:clamp(15px,1.4vw,19px);line-height:1.3;color:var(--muted);letter-spacing:.02em;
  transition:color .35s var(--ease);
}
.rwb.is-on .rwb-unit{color:var(--ink);}
.rwb-or{
  font-family:var(--f-sans);font-style:italic;font-weight:600;
  font-size:clamp(15px,1.4vw,19px);color:var(--muted2);
  padding:0 clamp(2px,.6vw,10px);user-select:none;
}
/* на телефоне плитки остаются в ряд: выбор виден целиком, без скролла */
@media (max-width:620px){
  .rwb-wrap{margin-top:26px;}
  .rwb-label{font-size:12px;margin-bottom:12px;}
  .rwb-grid{gap:12px;}
  .rwb{flex:1 1 0;min-width:0;padding:clamp(22px,5vw,30px) 12px;border-radius:18px;}
  .rwb-num{font-size:clamp(44px,13vw,64px);}
  .rwb-unit{font-size:14px;margin-top:8px;}
  .rwb-or{font-size:14px;padding:0 2px;}
}

/* ---------- Секции ---------- */
section{padding:var(--sec) 0;position:relative;}
/* подача заголовков с automyai.ru: капслок, плотная выключка, крупный кегль (правка 26.07) */
h2.sec{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(36px,5.6vw,88px);letter-spacing:0;line-height:.94;
  text-transform:uppercase;overflow-wrap:break-word;
}
.sec-sub{font-size:clamp(16px,1.5vw,21px);color:var(--muted);max-width:640px;margin-top:24px;line-height:1.6;}
.sec-sub-wide{max-width:none;}
.sec-head{margin-bottom:clamp(36px,4.6vw,64px);}

/* ---------- Сюжет «жонглёр» ---------- */
.story{padding:clamp(56px,7vw,104px) 0;}
.story-row{
  display:grid;grid-template-columns:1.02fr .98fr;align-items:center;
  gap:clamp(26px,5vw,76px);
  padding:clamp(18px,3.4vw,44px) 0;
}
.story-row.reverse .story-art{order:2;}
.story-art{position:relative;}

/* кадр 1 — жонглёр (перегенерированная фигура: руки отдельными слоями ДВИГАЮТСЯ у плеча); высокий кадр, сверху «небо» для жонглирования */
.jstage{position:relative;width:100%;max-width:330px;aspect-ratio:330/460;margin:0 auto;}
.jbase{position:absolute;left:9%;bottom:0;width:82%;height:auto;display:block;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45));}
.jarm{position:absolute;left:9%;bottom:0;width:82%;height:auto;pointer-events:none;will-change:transform;}
/* пивот — в СЕРЕДИНЕ предплечья, в зоне макс. просвета (у плеча рука касалась торса и шов рвался).
   Слой руки идёт ПОВЕРХ базы, его нижний конец растушёван и блендится с культёй в базе. */
.jarm-l{transform-origin:19.77% 38.58%;}
.jarm-r{transform-origin:80.36% 37.91%;}
.jclubs{position:absolute;inset:0;pointer-events:none;z-index:2;}
.jclub{position:absolute;left:0;top:0;width:6%;max-width:none;height:auto;transform-origin:50% 50%;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.4));will-change:transform,top,left,opacity;}

/* кадр 2 — AI (статичный кадр с подписями «вы / ваш AI»); кегли — DOM-слоем, взлетают и падают в руки (JS) */
.ai-frame{position:relative;}
.ai-frame .ai-base{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 60px rgba(0,0,0,.5));}
/* руки робота — отдельные слои поверх базы, вращаются у плеча (JS), в такт кеглям */
.ai-frame .ai-arm{position:absolute;inset:0;width:100%;height:auto;pointer-events:none;will-change:transform;}
.ai-frame .ai-arm-l{transform-origin:53% 61.3%;}
.ai-frame .ai-arm-r{transform-origin:69.8% 61%;}
.ai-frame .ring{position:absolute;inset:0;pointer-events:none;}
.ai-frame .rclub{
  position:absolute;left:0;top:0;width:3.4%;max-width:none;height:auto;
  transform-origin:50% 50%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));will-change:transform,top,left;
}
.story-step{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:16px;
}
.story-step.o{color:var(--orange);}
.story-cap{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(26px,3.1vw,44px);line-height:1.12;letter-spacing:-.01em;color:var(--ink);
}
.story-sub{margin-top:18px;font-size:clamp(16px,1.4vw,20px);color:var(--muted);line-height:1.55;max-width:470px;}

/* появление при скролле */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .story-art img{animation:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}

/* ---------- Что входит: карточки .inc ---------- */
.inc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.inc{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(22px,2vw,30px);
  transition:transform .3s var(--ease),border-color .3s;
}
.inc:hover{transform:translateY(-9px);border-color:var(--line2);}
.inc .idx{
  font-family:var(--f-display);font-weight:800;font-size:clamp(22px,1.8vw,32px);
  color:var(--orange);display:block;margin-bottom:clamp(10px,1.2vw,16px);line-height:1;
}
.inc h3{font-family:var(--f-display);font-size:clamp(18px,1.5vw,23px);font-weight:700;margin-bottom:10px;letter-spacing:-.01em;}
.inc p{font-size:clamp(15px,1.25vw,17.5px);color:var(--muted);line-height:1.55;}
.inc.accent{background:linear-gradient(150deg,rgba(237,126,47,.16),rgba(255,255,255,.012));border-color:rgba(237,126,47,.3);}
.inc.accent p{color:#d8b89a;}
.inc-grid.grid-2{grid-template-columns:repeat(2,1fr);}
.inc ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.inc li{position:relative;padding-left:24px;font-size:clamp(15px,1.25vw,17.5px);color:var(--ink);line-height:1.5;}
.inc li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(237,126,47,.2);}

/* ---------- Как это устроено ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,38px);}
.step{position:relative;}
/* сюжетный мел-кадр над шагом (робот + человечек, стиль сопровождения) */
/* 28.07 все три кадра перегенерированы в одном стиле и одном формате 16:9 с общим масштабом
   (рост персонажа = 0.415 ширины кадра, линия земли на одной высоте). Раз аспекты совпали,
   фиксированная высота ряда и object-fit больше не нужны — высота считается из ширины сама,
   и кадры совпадают по рождению, а не подгонкой */
/* Кадры родные, разной высоты (553/432/401). Ряд держим аспектом самого высокого:
   контейнеры выходят одной высоты, рисунки прижаты к низу — линии земли встают на один
   уровень, а подписи ШАГ не разъезжаются, как было раньше. На узких — колонка, аспект не нужен */
.step-art{
  display:flex;align-items:flex-end;justify-content:center;
  /* 597 = 553 × 1.08: картинка ниже выводится шириной 108%, то есть выше своего натурального
     размера. С аспектом 760/554 самый высокий кадр не влезал и распирал контейнер собой,
     а соседи оставались по аспекту — линии земли расходились на четверть сотни пикселей */
  aspect-ratio:760/597;
  margin-bottom:clamp(18px,2vw,26px);overflow:visible;
}
/* кадры упирались в ширину колонки и выходили мельче, чем задумано (Гоша 26.07: «чуть больше»).
   Даём им выйти за колонку на 12%: фон у мел-арта прозрачный, соседям это не мешает */
.step-art img{
  width:108%;max-width:none;height:auto;display:block;
}
.step .s-num{
  position:relative;padding-top:26px;
  font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:12px;
}
.step .s-num::before{
  content:"";position:absolute;top:0;left:0;width:46px;height:3px;
  background:var(--orange);border-radius:2px;
}
.step h3{font-family:var(--f-display);font-size:clamp(19px,1.7vw,24px);font-weight:700;letter-spacing:-.01em;margin-bottom:10px;line-height:1.25;}
.step p{font-size:clamp(15px,1.3vw,17.5px);color:var(--muted);line-height:1.55;}

/* ---------- Тарифы ---------- */
/* витрина + сопровождение = один bg2-бэнд, одна смысловая единица (Никита 25.07) */
/* стык блока баллов и витрины (Гоша 26.07: сначала «переход резкий», потом «градиент видно, как идёт»):
   градиент на тёмном полосит, поэтому переход убран как явление — бэнд витрины и сопровождения
   держится не цветом, а только светлой линией-разделителем поверх общего фона страницы */
.plans{background:var(--bg3);border-top:1px solid var(--line);}
/* стык витрины и «Сопровождения» внутри общего бэнда был поджат (48px против 72px у остальных
   секций) — 28.07 выровнен по общему ритму var(--sec), чтобы все зазоры на странице были равны */
.plans.shop{padding-bottom:var(--sec);}
.inside{background:var(--bg3);border-bottom:1px solid var(--line);padding-top:var(--sec);}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch;}
.plan{
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:clamp(30px,2.6vw,42px);
  display:flex;flex-direction:column;position:relative;
  transition:transform .35s var(--ease),border-color .3s;
}
.plan:hover{transform:translateY(-6px);border-color:var(--line2);}
.plan.feat{
  border-color:rgba(237,126,47,.65);
  background:linear-gradient(160deg,rgba(237,126,47,.22),rgba(255,255,255,.02));
  box-shadow:0 24px 70px -30px rgba(237,126,47,.6);
}
.plan .ptag{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;
}
.plan .pname{
  font-family:var(--f-display);font-size:clamp(21px,2vw,30px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:18px;
}
.plan .price{
  font-family:var(--f-display);font-size:clamp(38px,3.2vw,56px);font-weight:800;
  letter-spacing:-.02em;line-height:1;white-space:nowrap;
}
.plan .price small{font-size:.42em;font-weight:500;color:var(--muted);}
.plan .price.req{font-size:clamp(30px,2.4vw,42px);}
.plan .pcap{font-size:14.5px;color:var(--muted);margin-top:12px;min-height:20px;}
.plan .p-plus{font-size:15px;font-weight:700;color:var(--ink);margin-top:26px;}
.plan .p-plus b{color:inherit;}
.plan ul{list-style:none;margin:16px 0 28px;display:flex;flex-direction:column;gap:13px;flex:1;}
.plan ul:first-of-type{margin-top:26px;}
.plan .p-plus + ul{margin-top:14px;}
.plan li{
  font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.45;padding-left:26px;position:relative;color:var(--ink);
}
.plan li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 3px rgba(237,126,47,.2);
}
.plan .btn{width:100%;justify-content:center;}
/* Бейдж дефицита на карточке «Команда» — сидит на верхней кромке, поэтому .plan relative */
.badge-scarce{
  position:absolute;top:0;left:50%;transform:translate(-50%,-50%);
  padding:6px 16px;border-radius:999px;white-space:nowrap;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
  background:#3b2e23;color:var(--orange);border:1px solid rgba(237,126,47,.4);
}
/* Карточки тарифов внутри свёртки «Сопровождение»: бейдж висит выше кромки карточки,
   без отступа он налезал бы на подводку про консультацию */
.sopr-body .price-grid{margin-top:14px;}
/* 981–1160px: три колонки тарифов физически не помещаются (на iPad ландшафт давали
   горизонтальный скролл), поэтому в этом диапазоне сетка идёт в две колонки */
@media (min-width:981px) and (max-width:1160px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:14px auto 0;}
  .plan{padding:clamp(26px,2.4vw,34px);}
}

/* ---------- Что получает знакомый (перенесён наверх, после шагов) ---------- */
/* использует общий вертикальный ритм секции (--sec) — без спец-паддинга */
.single .card-wide{
  background:linear-gradient(150deg,rgba(237,126,47,.16),rgba(255,255,255,.012));
  border:1px solid rgba(237,126,47,.3);
  border-radius:24px;
  padding:clamp(32px,3.4vw,52px);
  display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;
}
.single .card-wide .ptag{
  font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);margin-bottom:14px;
}
.single .card-wide h3{
  font-family:var(--f-display);font-size:clamp(24px,2.4vw,36px);font-weight:700;
  letter-spacing:-.01em;margin-bottom:16px;line-height:1.1;
}
.single .card-wide .price{
  font-family:var(--f-display);font-size:clamp(36px,3vw,52px);font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap;
}
.single .card-wide .price small{font-size:.42em;font-weight:500;color:var(--muted);}
.single .card-wide .lead-in{font-size:clamp(15px,1.35vw,18px);color:#d8b89a;line-height:1.55;margin-top:14px;}
.single .card-wide ul{list-style:none;display:flex;flex-direction:column;gap:14px;}
.single .card-wide li{
  font-size:clamp(15.5px,1.4vw,18.5px);line-height:1.5;padding-left:26px;position:relative;color:var(--ink);
}
.single .card-wide li::before{
  content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 3px rgba(237,126,47,.2);
}


/* ---------- Блок «1 балл» ----------
   Правка Никиты 26.07 (20:00): «1» и «балл» сливались, потому что стояли по центру одной
   строкой и разными фактурами. Пересобрано по образцу блока «50+» с основного сайта:
   огромное «1 балл» слева, короткий текст справа сверху, секция поджата по вертикали.
   28.07: поджатие снято (Гоша, «выровняй все расстояния между блоками») — после удаления
   развилки секция стала короткой и держится на общем ритме var(--sec), как остальные */
.oneball{padding:var(--sec) 0;}
/* оформление «бэнд» (вариант C, выбор Гоши 27.07): мел-надпись и подпись строго по центру.
   Линии-разделители сверху и снизу сняты по правке Гоши 27.07 — резали блок пополам. */
.ob-row{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(10px,1.4vw,18px);
  /* воздух внутри полосы был рассчитан на рамку из линий; без неё он превращался
     в 167 px пустоты над мелом (правка Гоши 27.07) — оставлен минимальный зазор */
  padding:clamp(4px,.8vw,12px) 0;
}
.ob-num{
  flex:none;display:flex;align-items:flex-end;gap:clamp(18px,2.2vw,46px);
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:.82;
  font-size:clamp(78px,15vw,236px);color:var(--chalk);white-space:nowrap;
}
/* цифра и слово мелом: обе картинки садятся нижним краем на общую базовую линию.
   Слово вдвое мельче цифры — при равной величине они спорили и читались как два объекта
   (Никита 26.07: «"1" и "балл" сливаются»). */
/* у слова треть высоты картинки съедает хвост «б», поэтому .62em даёт x-height ≈ .41em —
   визуально это «строчные при большой цифре», а не второй объект того же веса */
.ob-one{height:1.05em;width:auto;}
.ob-word{display:block;height:.62em;width:auto;margin-bottom:.02em;}
.ob-lead{
  max-width:none;font-size:clamp(16px,1.9vw,26px);color:var(--muted);
  line-height:1.4;letter-spacing:.02em;
}
/* развилка «забрать сразу / копить» (правка Ксюши 28.07): выбор должен считываться
   с первого взгляда, поэтому стоит третьей строкой того же .ob-row, вплотную под
   мел-«1 балл» и прямо перед витриной. Отдельной секции нет намеренно — просили упростить */
.ob-pick{
  /* .ob-row — колоночный флекс с align-items:center: без width:100% ребёнок
     сжимается по контенту и колонкам не хватает места на одну строку */
  width:100%;
  display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;
  gap:clamp(10px,1.2vw,18px);
  margin-top:clamp(22px,2.8vw,40px);
}
/* первая версия была строкой текста и тонула рядом с мел-«1 балл» (рендер 28.07):
   выбор обязан считываться с первого взгляда, поэтому варианты — две равные плашки */
.obp{
  /* базис маленький, ширину добирает flex-grow: при базисе 430px строка не помещалась
     в контейнер на 1000-1100px и вторая плашка уезжала вниз, а «или» оставалось у первой */
  flex:1 1 300px;max-width:430px;
  display:flex;flex-direction:column;justify-content:flex-start;gap:7px;
  padding:clamp(16px,1.5vw,22px) clamp(18px,1.8vw,26px);
  border:1px solid var(--line);border-radius:18px;background:var(--card);
  text-align:center;align-items:center;
}
/* ярлык набран приёмом .rwd-flag: капслок, разрядка, оранжевый, но без рамки —
   рамка внутри плашки спорила бы с самой плашкой */
.obp-lab{
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--orange);
}
.obp-txt{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;line-height:1.2;
  font-size:clamp(17px,1.6vw,23px);color:var(--ink);
  text-wrap:balance;   /* иначе «за 6 / баллов» отрывается хвостом в одно слово */
}
/* «или» — нейтральная пилюля: третий оранжевый акцент рядом с двумя ярлыками рябил */
.obp-or{
  flex:none;align-self:center;padding:6px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:clamp(13px,1.1vw,15px);font-weight:600;color:var(--muted);letter-spacing:.02em;
}
@media (max-width:820px){
  .ob-row{gap:clamp(12px,2.4vw,20px);padding:clamp(4px,1.4vw,12px) 0;}
  .ob-lead{font-size:clamp(15px,3.9vw,19px);}
  /* ниже 820px две плашки в строку уже не помещаются: ставим столбиком заранее,
     иначе flex-wrap рвёт их вразнобой и «или» повисает сбоку */
  .ob-pick{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px;}
  .obp{flex:0 0 auto;max-width:none;}
}
@media (max-width:620px){
  .ob-num{font-size:clamp(78px,27vw,132px);}   /* Никита: «1 балл» должно быть прям большим */
  .ob-one{height:1.12em;}          /* на мелком кегле мел-штрих визуально легче шрифта */
  /* на телефоне развилка встаёт в столбик, «или» остаётся разделителем между вариантами */
  .ob-pick{margin-top:20px;}
}
/* пилюля «Копи и трать» снята по правке Никиты 26.07 (20:30) — стиль оставлен на случай возврата
.ob-pill{
  display:inline-block;padding:12px 30px;border-radius:999px;
  border:1px solid rgba(237,126,47,.4);background:rgba(237,126,47,.08);
  color:var(--orange);font-weight:700;font-size:clamp(15px,1.4vw,18px);letter-spacing:.02em;
} */

/* ---------- Витрина наград ----------
   Сетка нарастает вместе с ценой (пересобрана 01.08.2026 под четыре ступени):
   1 и 2 балла — две карточки по половине, внутри каждой выбор из двух наград;
   3 балла — полоса во всю ширину; 4 балла — главная награда с персонажем. */
.plans.shop .sec-head{margin-bottom:clamp(30px,3.8vw,52px);}
.shop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;align-items:stretch;}
.rwd{
  position:relative;grid-column:span 3;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.2vw,34px);
  transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s;
}
.rwd:hover{transform:translateY(-6px);border-color:var(--line2);}
/* первая награда — точка входа: доступна уже за один балл */
.rwd-start{background:linear-gradient(155deg,rgba(237,126,47,.16),rgba(255,255,255,.012));border-color:rgba(237,126,47,.3);}
/* середина шкалы: полоса во всю ширину, цена слева, награда справа */
.rwd-mid{
  grid-column:span 6;
  flex-direction:row;align-items:center;gap:clamp(22px,2.6vw,38px);
  background:linear-gradient(160deg,rgba(237,126,47,.05),rgba(255,255,255,.015));
}
/* ступень с выбором: две награды одной цены внутри карточки.
   Разделитель между ними — линия, а не буллит: буллиты читались как «получите оба пункта» */
.rwd-pick .pick-lead{
  display:inline-block;align-self:flex-start;margin-bottom:14px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.rwd-pick .pick-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;flex:1;}
.rwd-pick .pick-list li + li{
  margin-top:clamp(16px,1.6vw,22px);padding-top:clamp(16px,1.6vw,22px);
  border-top:1px solid var(--line);
}
.rwd-start.rwd-pick .pick-list li + li{border-top-color:rgba(237,126,47,.28);}
.rwd-pick .rwd-name{font-size:clamp(19px,1.85vw,25px);margin-bottom:7px;}
.rwd-mid .rwd-side,.rwd-top .rwd-side{flex:0 0 auto;}
.rwd-mid .rwd-main,.rwd-top .rwd-main{flex:1;min-width:0;}
.rwd-mid .rwd-dots,.rwd-top .rwd-dots{margin-bottom:0;}
/* вершина: во всю ширину, цена слева, награда по центру, персонаж мелом справа */
.rwd-top{
  grid-column:span 6;overflow:hidden;
  flex-direction:row;align-items:center;gap:clamp(26px,4vw,64px);
  padding-right:clamp(34px,17vw,260px);
  border-color:rgba(237,126,47,.55);
  background:linear-gradient(105deg,rgba(237,126,47,.2),rgba(255,255,255,.02) 62%);
  box-shadow:0 26px 70px -34px rgba(237,126,47,.55);
}
.rwd-top .rwd-cost{font-size:clamp(58px,6vw,104px);margin-bottom:14px;}
.rwd-top .rwd-name{font-size:clamp(25px,3vw,42px);}
.rwd-top .rwd-desc{max-width:46ch;}
.rwd-art{
  position:absolute;right:clamp(18px,2.4vw,44px);bottom:calc(-1 * clamp(24px,2.4vw,34px));
  height:clamp(150px,15vw,224px);width:auto;pointer-events:none;
}
.rwd-cost{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(46px,4vw,72px);color:var(--orange);
  display:flex;align-items:baseline;gap:8px;margin-bottom:12px;
}
.rwd-cost small{font-size:.32em;font-weight:600;color:var(--muted);letter-spacing:.02em;}
/* жетоны сняты из разметки 26.07: Никита жаловался, что витрину «тяжело читать, приходится вникать»,
   а шесть точек на каждой карточке дублировали цифру. Стиль оставлен на случай возврата. */
.rwd-dots{display:flex;gap:7px;margin-bottom:18px;}
.rwd-dots i{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.13);
  transition:background .3s,box-shadow .3s;
}
.rwd-dots i.on{background:var(--orange);box-shadow:0 0 0 3px rgba(237,126,47,.16);}
.rwd:hover .rwd-dots i.on{box-shadow:0 0 0 4px rgba(237,126,47,.24);}
/* флаг первой карточки уходит в угол, чтобы цифры 1-2-3 стояли на одной линии */
.rwd-start .rwd-flag{position:absolute;top:clamp(20px,1.8vw,26px);right:clamp(20px,1.8vw,26px);margin:0;}
.rwd-flag{
  display:inline-block;align-self:flex-start;margin-bottom:14px;
  padding:6px 13px;border-radius:999px;
  border:1px solid rgba(237,126,47,.42);background:rgba(237,126,47,.1);
  color:var(--orange);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
/* рублёвый эквивалент под ценой в баллах: показывает, сколько награда стоит деньгами */
.rwd-worth{
  display:inline-block;margin:2px 0 14px;
  font-size:clamp(13px,1.05vw,15.5px);font-weight:600;color:var(--muted);letter-spacing:.01em;
}
.rwd-worth b{color:#d8b89a;font-weight:700;white-space:nowrap;}
.rwd-mid .rwd-worth,.rwd-top .rwd-worth{margin-bottom:0;}

/* название — главный якорь карточки, поэтому крупнее цены-подписи и светлее описания */
/* кегль поднят по правке Ксюши 28.07 («место позволяет»). 31px — потолок: на 31.5px
   «Консультация с ML-разработчиком» рвётся на три строки с сиротой «ML-».
   Коэффициент 1.85→2.4vw: главный недобор был в зоне 1000-1300px */
.rwd-name{
  font-family:var(--f-display);font-size:clamp(22px,2.4vw,31px);font-weight:700;
  letter-spacing:-.01em;line-height:1.16;margin-bottom:10px;
}
.rwd-desc{font-size:clamp(14.5px,1.15vw,16.5px);color:var(--muted);line-height:1.45;}
@media (max-width:980px){
  .shop-grid{grid-template-columns:repeat(2,1fr);}
  /* карточки с выбором остаются парой в ряд, полосы 3 и 4 баллов — на всю ширину */
  .rwd{grid-column:span 1;}
  .rwd-mid,.rwd-top{grid-column:span 2;}
  .rwd-top{padding-right:clamp(34px,20vw,220px);}
}
@media (max-width:620px){
  .shop-grid{grid-template-columns:1fr;}
  .rwd,.rwd-mid,.rwd-top{grid-column:span 1;}
  /* в одну колонку горизонтальные полосы разворачиваются в столбик */
  .rwd-mid,.rwd-top{flex-direction:column;align-items:stretch;gap:18px;}
  .rwd-mid .rwd-worth,.rwd-top .rwd-worth{margin-bottom:0;}
  .rwd-top{padding-right:clamp(24px,2.2vw,34px);}
  .rwd-art{display:none;}
}

/* ---------- Денежная версия для сотрудников (/referral/team/, 01.08.2026) ----------
   Та же страница, другой оффер: вместо витрины баллов — сколько приходит деньгами.
   Мел-арта под «10%» нет (он рисовался под «1 балл»), поэтому цифра набрана дисплейным
   шрифтом сайта — тем же приёмом, что цены в тарифах. */
.ob-money{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(78px,15vw,236px);color:var(--chalk);white-space:nowrap;
}
.ob-money .obm-p{color:var(--orange);}
.money-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:stretch;
}
.mrw{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.4vw,38px);
  transition:transform .3s var(--ease),border-color .3s,background .3s,box-shadow .3s;
}
.mrw:hover{transform:translateY(-6px);border-color:var(--line2);}
/* расширенный тариф выделен: он же чаще выбирается и даёт сотруднику 18 000 ₽ —
   ради этой цифры программу и делаем, поэтому она должна тянуть взгляд */
.mrw-top{
  border-color:rgba(237,126,47,.55);
  background:linear-gradient(105deg,rgba(237,126,47,.2),rgba(255,255,255,.02) 62%);
  box-shadow:0 26px 70px -34px rgba(237,126,47,.55);
  padding-right:clamp(34px,14vw,190px);
}
.mrw-plan{
  font-family:var(--f-display);font-size:clamp(20px,2.1vw,28px);font-weight:700;
  letter-spacing:-.01em;line-height:1.16;margin-bottom:6px;
}
.mrw-base{font-size:clamp(13px,1.05vw,15.5px);font-weight:600;color:var(--muted);margin-bottom:clamp(18px,2vw,28px);}
.mrw-sum{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1;
  font-size:clamp(48px,5vw,86px);color:var(--orange);margin-bottom:8px;
}
.mrw-sum small{font-size:.42em;font-weight:700;}
.mrw-desc{font-size:clamp(14.5px,1.15vw,16.5px);color:var(--muted);line-height:1.45;}
/* бейдж уходит в угол абсолютным позиционированием (приём .rwd-start .rwd-flag выше) —
   иначе он стоит в потоке над заголовком и сдвигает «Расширенный тариф» ниже «Базового» */
.mrw .rwd-flag{position:absolute;top:clamp(24px,2.4vw,38px);right:clamp(24px,2.4vw,38px);margin:0;}
.money-note{
  margin:clamp(20px,2.2vw,30px) 0 0;text-align:center;
  font-size:clamp(14.5px,1.15vw,16.5px);color:var(--muted);line-height:1.5;
}
@media (max-width:780px){
  .money-grid{grid-template-columns:1fr;}
  .mrw-top{padding-right:clamp(24px,2.4vw,38px);}
  .mrw .rwd-art{display:none;}
}

/* ---------- Рукописные стрелки-подписи (приём с automyai.ru, правка Никиты 26.07 23:16) ----------
   SVG и подача 1-в-1 с основного сайта (.hero-note / .demo-note): кривая с оперением,
   fill:currentColor и курсивная подпись с лёгким наклоном. Ниже 1280px стрелки прячем,
   иначе они наезжают на текст — на automyai.ru сделано так же. */
.copy-row{position:relative;max-width:520px;margin:36px auto 0;}
.copy-row .copy-link{margin:0;}
.final .cta-row{position:relative;display:inline-flex;margin-top:44px;}
.final .cta-row .btn{margin-top:0;}
.ref-note{
  position:absolute;display:flex;align-items:center;gap:10px;
  width:max-content;max-width:min(300px,22vw);text-align:left;pointer-events:none;
}
/* размер как у стрелок automyai.ru: их SVG квадратный (100×92), при прежней ширине
   под обводочную стрелку 120×56 рисунок получался вдвое крупнее соседних сайтов */
.ref-note .rn-arrow{width:clamp(48px,4.2vw,62px);height:auto;color:var(--orange);flex:none;}
.ref-note .rn-txt{
  font-family:var(--f-sans);font-style:italic;font-weight:600;
  font-size:clamp(14px,1.15vw,16.5px);line-height:1.4;color:rgba(255,255,255,.78);
}
/* сам разворот стрелки к цели живёт в разметке (inline transform у SVG, как на automyai.ru),
   здесь только посадочное место: у поля подпись справа, у кнопки — слева */
.rn-link{left:calc(100% + 14px);top:50%;transform:translateY(-54%) rotate(1.5deg);}
/* вторая стрелка — с другой стороны (Гоша 27.07): подпись слева от кнопки, остриё смотрит вправо */
/* поднята выше середины кнопки: остриё уходило вниз и целилось в нижний край (правка Гоши 27.07) */
/* угол и смещение подобраны по кадру: остриё выходит на середину кнопки по высоте.
   При -20° стрелка смотрела вниз и целилась в пустоту слева от кнопки (правка Гоши 27.07) */
.rn-cta{right:calc(100% + 14px);left:auto;top:50%;transform:translateY(-60%) rotate(-1.5deg);}
.rn-cta .rn-txt{text-align:right;}
@media (max-width:1279px){.ref-note{display:none;}}

/* ---------- Копируемая ссылка в финале ---------- */
.copy-link{
  display:flex;gap:10px;align-items:stretch;
  max-width:520px;margin:36px auto 0;
  background:rgba(255,255,255,.03);border:1px solid var(--line2);
  border-radius:999px;padding:6px 6px 6px 22px;
}
.copy-field{
  flex:1;min-width:0;background:transparent;border:none;outline:none;
  font-family:var(--f-sans);font-size:clamp(14.5px,1.3vw,16.5px);font-weight:600;color:var(--ink);
}
.copy-btn{
  flex:none;cursor:pointer;white-space:nowrap;
  font-family:var(--f-sans);font-weight:700;font-size:14.5px;
  padding:12px 26px;border-radius:999px;border:1px solid transparent;
  background:var(--orange);color:#1e2024;
  transition:transform .2s var(--ease),background .25s,color .25s;
}
.copy-btn:hover{transform:translateY(-1px);}
.copy-btn.copied{background:#fff;color:#1e2024;}
.copy-hint{font-size:clamp(13.5px,1.2vw,15.5px);color:var(--muted);line-height:1.5;max-width:470px;margin:16px auto 0;}
@media (max-width:620px){
  .copy-link{flex-direction:column;border-radius:18px;padding:14px;gap:12px;}
  /* ровно 16px: при меньшем кегле Safari на iOS зумит всю страницу по тапу в поле
     и оставляет её съехавшей вбок — читается как поломка вёрстки */
  .copy-field{text-align:center;padding:4px 0;font-size:16px;}
  .copy-btn{width:100%;justify-content:center;padding:14px;}
}

/* ---------- Лесенка наград ---------- */
/* переключатель веток — основной и единственный: секция «Выберите свою ветку» убрана,
   ветки теперь выбираются здесь, одной строкой вместо целой секции */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(22px,2.6vw,34px);}
.plans .sec-head{margin-bottom:clamp(16px,1.8vw,26px);}
.tab{
  font-family:var(--f-sans);font-size:clamp(15.5px,1.25vw,17px);font-weight:700;color:var(--muted);
  background:rgba(255,255,255,.02);border:1px solid var(--line);
  padding:13px 26px;border-radius:999px;cursor:pointer;
  transition:color .25s var(--ease),border-color .25s,background .25s,transform .25s var(--ease);
}
.tab:hover{color:var(--ink);border-color:var(--line2);}
.tab.on{color:#1e2024;background:var(--orange);border-color:var(--orange);}

/* ---------- Настоящая лесенка: ступени поднимаются вправо-вверх ----------
   Верхняя ступень — вершина ветки, нижняя — первый приведённый (DOM в обратном
   порядке). Каждая ступень сдвинута правее предыдущей на --step, между ними
   вертикальная подступень. Заменила длинный список карточек: блок стал вдвое ниже. */
.stair{--step:clamp(9px,2.1vw,34px);display:flex;flex-direction:column;gap:8px;}
.st{position:relative;margin-left:calc(var(--i) * var(--step));}
.st:not(:last-child)::before{
  content:"";position:absolute;left:0;top:100%;width:2px;height:8px;background:var(--line2);
}
.tread{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:clamp(12px,1.6vw,22px);
  background:var(--card);border:1px solid var(--line);border-left:3px solid rgba(237,126,47,.35);
  border-radius:14px;padding:clamp(11px,1.15vw,15px) clamp(14px,1.6vw,22px);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.st:hover .tread{border-color:var(--line2);transform:translateX(3px);}
.st-n{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:44px;padding:5px 8px;border-radius:10px;flex:none;
  background:rgba(255,255,255,.06);color:var(--muted);
  font-family:var(--f-display);font-weight:800;font-size:19px;line-height:1;
}
.st-n small{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-top:3px;}
.st-txt{font-size:clamp(15px,1.3vw,18px);line-height:1.45;color:var(--ink);}
.st-txt b{color:var(--orange);font-weight:700;}
.st-txt i{font-style:normal;color:var(--muted);font-size:.88em;white-space:nowrap;}
/* вершина ветки */
.st.top .tread{
  border-color:rgba(237,126,47,.55);border-left-color:var(--orange);
  background:linear-gradient(120deg,rgba(237,126,47,.15),rgba(255,255,255,.015));
}
.st.top .st-n{background:var(--orange);color:#1e2024;}
.st.top .st-n small{color:rgba(30,32,36,.72);}
@media (max-width:620px){
  .stair{--step:0px;}
  .st:not(:last-child)::before{display:none;}
  .tread{padding:12px 14px;gap:12px;}
}


/* ---------- Калькулятор рефералки ---------- */
.calc{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.calc-card{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:24px;
  padding:clamp(30px,3.2vw,52px);
}
.calc-label{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:20px;}
.calc-q{font-family:var(--f-display);font-size:clamp(20px,1.9vw,27px);font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:clamp(26px,3vw,38px);}

.calc-range{width:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;}
.calc-range:focus{outline:none;}
.calc-range::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange) var(--fill,0%),rgba(255,255,255,.12) var(--fill,0%),rgba(255,255,255,.12) 100%);
}
.calc-range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.12);}
.calc-range::-moz-range-progress{height:6px;border-radius:999px;background:var(--orange);}
.calc-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;margin-top:-11px;
  width:28px;height:28px;border-radius:50%;background:#fff;border:none;
  box-shadow:0 6px 22px -6px rgba(237,126,47,.9),0 0 0 1px rgba(0,0,0,.18);
  transition:transform .2s var(--ease);
}
.calc-range::-moz-range-thumb{
  width:28px;height:28px;border-radius:50%;background:#fff;border:none;
  box-shadow:0 6px 22px -6px rgba(237,126,47,.9);
}
.calc-range:hover::-webkit-slider-thumb{transform:scale(1.08);}
.calc-ticks{display:flex;justify-content:space-between;margin-top:16px;}
.calc-ticks span{
  font-size:15px;font-weight:700;color:var(--muted2);
  transition:color .25s var(--ease);
}
.calc-ticks span.on{color:var(--ink);}

.calc-out{border-left:1px solid var(--line);padding-left:clamp(28px,3.4vw,52px);}
.calc-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:22px;}
.calc-list li{position:relative;padding-left:26px;font-size:clamp(16px,1.4vw,19.5px);color:var(--ink);line-height:1.5;}
.calc-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(237,126,47,.2);}
.calc-list li i{font-style:normal;color:var(--muted);font-size:.88em;white-space:nowrap;}
.calc-list li b{color:var(--orange);}
.calc-big{
  display:flex;align-items:baseline;gap:14px;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1;
}
.calc-big .num{font-size:clamp(64px,7.4vw,112px);color:var(--orange);}
.calc-big .unit{font-size:clamp(18px,1.7vw,25px);color:var(--ink);font-weight:700;letter-spacing:-.01em;}
.calc-cap{font-size:clamp(15px,1.35vw,18px);color:var(--muted);line-height:1.55;margin-top:18px;max-width:340px;}
.calc-extra{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
  font-size:clamp(15px,1.35vw,18px);color:var(--ink);line-height:1.5;
}
.calc-extra b{color:var(--orange);}
.calc-btn{margin-top:28px;}

/* подзаголовок внутри карточки наград */
.inc-cap{
  font-size:clamp(14.5px,1.2vw,16.5px);color:var(--orange);font-weight:700;
  margin:-4px 0 18px;line-height:1.4;
}
.inc.accent .inc-cap{color:#f0a45f;}

@media (max-width:980px){
  .calc-card{grid-template-columns:1fr;gap:32px;}
  .calc-out{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-top:30px;}
  .calc-cap{max-width:none;}
}

/* ---------- Пометка «ждём от команды» (временная, снять перед публикацией) ---------- */
.tbd{
  display:inline-block;vertical-align:baseline;
  padding:2px 9px;border-radius:6px;
  background:rgba(237,126,47,.14);border:1px dashed rgba(237,126,47,.55);
  color:var(--orange);font-size:.82em;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}

/* ---------- Финальный CTA (Moniqa) ---------- */
.final{position:relative;text-align:center;padding:var(--sec) 0;overflow:hidden;background:var(--hero-bg);}
.final::before{
  content:"";position:absolute;inset:-8%;pointer-events:none;
  background:radial-gradient(46% 52% at 50% 108%, rgba(255,127,36,.34) 0%, rgba(206,77,24,.18) 38%, transparent 64%);
}
.final .wrap{position:relative;z-index:2;}
.final h2{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(44px,7vw,100px);letter-spacing:-.02em;line-height:1.02;color:var(--orange);
}
.final h2 em{
  font-family:var(--f-sans);font-style:italic;font-weight:400;
  color:var(--orange);
}
/* серый подзаголовок финала снят из разметки 26.07 по правке Гоши, стиль оставлен на случай возврата */
.final .sub{
  font-size:clamp(16px,1.6vw,21px);color:var(--muted);max-width:560px;
  margin:26px auto 0;line-height:1.6;
}
/* заголовок больше не подпирается подзаголовком — поле со ссылкой отодвигаем сами */
.final .copy-row{margin-top:clamp(34px,4vw,56px);}
.final .btn{margin-top:44px;}
/* подводка к кнопке (правка Ксюши 28.07): у CTA появилась вторая работа — принимать вопросы,
   а не только фиксировать приглашённого. Адресат тот же, поэтому не отдельный блок, а строка */
.final .cta-lead{
  font-size:clamp(15px,1.4vw,18px);color:var(--ink);line-height:1.5;
  max-width:470px;margin:38px auto 0;
}
/* .cta-row уже несёт свой margin-top:44px — при живой подводке он даёт разрыв */
.final .cta-lead + .cta-row{margin-top:16px;}
.final .cta-note{
  display:block;margin-top:18px;
  font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);font-weight:600;
}

/* ---------- Футер ---------- */
/* нижний отступ учитывает домашний индикатор iPhone: иначе ссылка automyai.ru
   упирается в полоску жеста и по ней трудно попасть */
footer{border-top:1px solid var(--line);padding:36px 0 calc(44px + var(--tg-safe-bottom, 0px));}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
footer .logo img{height:24px;}
footer .f-note{font-size:15.5px;color:var(--muted);}
footer .f-site{
  font-size:14.5px;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--orange);padding-bottom:2px;transition:color .2s;
}
footer .f-site:hover{color:var(--orange);}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width:980px){
  /* ── шапка как на automyai.ru: бургер справа, меню на весь экран ──
     Кнопка «Написать команде» из полоски убрана: во всю ширину телефона она выглядела
     чужеродно. Теперь она внизу меню, крупной оранжевой плашкой */
  .nav-cta .btn{display:none;}
  /* меню на мобиле position:fixed и из грид-потока выпадает — без явной колонки
     правый блок занимает его место и бургер уезжает к центру (фикс Никиты 26.07) */
  .nav-cta{grid-column:3;}
  .burger{display:flex;margin-left:auto;}
  /* полоска прозрачная, «облачком» при скролле становится сама .nav — без backdrop-filter:
     размытие на телефоне заметно тормозит скролл */
  header{padding:14px 10px 0;}
  header,header.scrolled{background:none;border-bottom:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;}
  header .wrap{padding-left:0;padding-right:0;}
  .nav{height:56px;padding:0 6px 0 14px;border-radius:16px;border:1px solid transparent;
    background:transparent;
    transition:background .38s var(--ease),box-shadow .38s var(--ease),border-color .38s var(--ease);}
  /* фон пилюли сплошной: на .96 сквозь неё просвечивал светлый мел-арт кадров и
     плашка читалась как грязная (проверено на 390px, шаг 2) */
  header.scrolled .nav{border-color:var(--line);background:var(--bg2);
    box-shadow:0 16px 36px -18px rgba(0,0,0,.66),0 2px 8px -4px rgba(0,0,0,.5);}
  .nav-links{
    position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;z-index:60;
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;
    padding:0 clamp(24px,7vw,42px) max(36px,var(--tg-safe-bottom, 0px));margin:0;box-sizing:border-box;
    background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s linear .42s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none;
    transition:opacity .35s var(--ease),transform .45s var(--ease),visibility 0s;}
  .nav-back{display:flex;align-items:center;gap:8px;justify-content:flex-start;order:-1;
    position:sticky;top:0;z-index:5;align-self:stretch;
    margin:0 calc(-1*clamp(24px,7vw,42px)) clamp(18px,4vw,28px);
    padding:max(16px,env(safe-area-inset-top,0px)) clamp(24px,7vw,42px) 16px;
    background:var(--bg);border:none;border-bottom:1px solid var(--line);
    color:var(--ink);font-family:var(--f-sans);font-size:17px;font-weight:700;letter-spacing:-.01em;
    cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .nav-back svg{width:22px;height:22px;color:var(--orange);}
  .nav-back:active{color:var(--orange);}
  .nav-links a{font-family:var(--f-display);font-size:clamp(28px,8vw,40px);font-weight:800;
    letter-spacing:-.02em;color:var(--ink);padding:15px 2px;border-bottom:1px solid var(--line);
    opacity:0;transform:translateY(16px);
    transition:opacity .5s var(--ease),transform .55s var(--ease),color .2s;}
  .nav-links a::after{display:none;}
  .nav-links.open a{opacity:1;transform:none;}
  .nav-links.open a:nth-of-type(1){transition-delay:.06s;}
  .nav-links.open a:nth-of-type(2){transition-delay:.11s;}
  .nav-links.open a:nth-of-type(3){transition-delay:.16s;}
  .nav-links.open a:nth-of-type(4){transition-delay:.21s;}
  .nav-links a:active{color:var(--orange);}
  .nav-links .nav-cta-m{display:block;margin-top:26px;background:var(--orange);color:#1e2024;
    text-align:center;border-radius:14px;font-size:18px;font-weight:700;letter-spacing:0;
    padding:18px;border-bottom:none;font-family:var(--f-sans);}
  .nav-links .nav-cta-m:active{color:#1e2024;}
  /* плавающая кнопка ИИ-консультанта (embed.js, z-index 2147483000) иначе висит поверх меню */
  body.menu-open .amy-launch{opacity:0;pointer-events:none;}
  .inc-grid{grid-template-columns:repeat(2,1fr);}
  .tabs{gap:8px;}
  .tab{padding:11px 18px;font-size:14px;}
  .price-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;}
  .steps{grid-template-columns:1fr;gap:34px;}
  /* в одну колонку кадру уже некуда выходить — держим по ширине контента */
  .step-art img{width:100%;}
  /* кадры идут друг под другом — выравнивать нечего, аспект только добавил бы пустоты.
     Потолок 460px: на планшете (700–980) колонка шире 690px, и без него кадр раздувался
     вдвое против десктопа (691 против 373), а секция вытягивалась с 800 до 1900px.
     Прижат влево, а не по центру: все блоки страницы на этих ширинах идут от левого края */
  .step-art{aspect-ratio:auto;max-width:460px;margin-right:auto;justify-content:flex-start;}
  /* текст держим в ширине кадра: иначе под картинкой 460px строка тянулась на все 690
     и шаг переставал читаться как одна колонка */
  .step .s-num,.step h3,.step p{max-width:460px;}
  .single .card-wide{grid-template-columns:1fr;gap:28px;}
  .story-row{grid-template-columns:1fr;gap:20px;text-align:center;}
  .story-row.reverse .story-art{order:0;}
  .story-art{width:100%;max-width:420px;margin:0 auto;}
  /* кадр-жонглёр: дети .jstage все absolute -> нулевая внутренняя ширина; без явной ширины грид-колонка с auto-margin схлопывалась в 0 и фигура пропадала на ≤980px */
  .jstage{max-width:300px;}
  .story-sub{max-width:none;margin-left:auto;margin-right:auto;}
}
/* телефон в ландшафте: пункты кеглем в 40px не помещались и меню приходилось листать */
@media (max-width:980px) and (max-height:520px){
  .nav-links{padding-bottom:max(20px,var(--tg-safe-bottom, 0px));}
  .nav-links a{font-size:22px;padding:10px 2px;}
  .nav-links .nav-cta-m{margin-top:14px;padding:13px;font-size:16px;}
  .nav-back{padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:10px;
    margin-bottom:14px;font-size:15px;}
}
@media (max-width:620px){
  .nav{height:64px;}
  .logo img{height:22px;}
  /* на телефоне визуальный центр поднимаем выше геометрического: под шапкой пусто,
     и блок «стикер + заголовок + кнопка» иначе проваливается в нижнюю половину экрана */
  /* высота чуть меньше экрана: заголовок следующей секции выглядывает снизу и
     сам показывает, что страницу листают. Нижний отступ ужат: подпись индикатора
     на телефоне скрыта, а плитки выбора добавили контенту высоты */
  .hero{min-height:100vh;min-height:94svh;padding:60px 18px clamp(84px,11vh,112px);}
  .hero-title{font-size:clamp(30px,8.6vw,46px);line-height:1.12;}   /* мобильные значения донора */
  .hero-meta{font-size:16px;}
  .pre-badge{padding:11px 24px;}
  .inc-grid,.inc-grid.grid-2{grid-template-columns:1fr;}
  .inc .idx{font-size:30px;}
  /* кегли на телефоне сняты на ступень (правка 28.07): капс-заголовки рвались на две
     строки и «съедали» экран, читать со смартфона было тяжело */
  h2.sec{font-size:clamp(27px,7.6vw,36px);}
  .bridge .lead-txt{font-size:18.5px;}
  .plan{padding:28px 24px;}
  .plan .price{font-size:40px;}
  .plan .price.req{font-size:31px;}
  .single .card-wide{padding:30px 24px;}
  /* было clamp(48px,15vw,64px) — на 393px это 59px и три строки на пол-экрана */
  .final h2{font-size:clamp(34px,10.4vw,46px);}
  .btn{padding:14px 26px;font-size:14.5px;}
  .btn-lg{padding:18px 44px;font-size:16px;}
  footer .wrap{flex-direction:column;align-items:flex-start;gap:14px;}
}
/* «Приведите/забирайте» длиннее прежнего варианта на четыре знака: на 320px строка H1
   перестала помещаться (нужно 299px при доступных 270px) и рвалась пополам.
   Ниже 340px снимаем кегль, остальные телефоны не трогаем — там запас 15-20px */
@media (max-width:340px){
  .hero-title{font-size:26px;}
}

/* ============ ОЖИВЛЕНИЕ (в стиле сайта сопровождения) ============ */

/* волна по лесенке: ступень коротко вспыхивает оранжевым и подвигается вправо */
.st.lit .tread{border-color:rgba(237,126,47,.55);transform:translateX(7px);}
.st.lit .st-n{background:var(--orange);color:#1e2024;
  box-shadow:0 0 0 7px rgba(237,126,47,.13),0 12px 38px -10px rgba(237,126,47,.75);}
.st.lit .st-n small{color:rgba(30,32,36,.72);}
@media (prefers-reduced-motion:reduce){
  .st.lit .tread{transform:none;}
}

/* ---------- Живой hero ---------- */
@keyframes glowBreath{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:.66;transform:scale(1.045);}
}
/* появление hero завязано на класс .loaded (схема основного сайта), а не на автозапуск анимации:
   так порядок выхода элементов один и тот же и на медленной сети */
.pb-sticker,.hero-cta{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}
.pb-sticker{transition-delay:.08s;}
.hero-cta{transition-delay:.82s;}
.loaded .pb-sticker,.loaded .hero-cta{opacity:1;transform:none;}

/* CTA дышит свечением — только главная кнопка hero */
.hero-cta .btn-primary{animation:ctaPulse 3.2s ease-in-out 1.4s infinite;}
@keyframes ctaPulse{
  0%,100%{box-shadow:0 12px 44px -14px rgba(255,255,255,.5);}
  50%{box-shadow:0 14px 58px -12px rgba(237,126,47,.75);}
}

/* строки калькулятора въезжают по одной */
.calc-list li{animation:liIn .4s var(--ease) backwards;}
@keyframes liIn{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .hero .glow,.hero .glow2,.hero-cta .btn-primary,.calc-list li,.spark,.hero-scroll .bar::after{animation:none;}
  .pb-sticker,.hero-cta,.hero-note,.hero-scroll{opacity:1;transform:none;transition:none;}
  .hero-title .line>span{transform:none;filter:none;transition:none;}
}

/* ---------- Подпись «программа зацикливается» под лесенкой ----------
   Снята из разметки 26.07 («под витриной наград текст серый надо удалить, он бессмысленный»),
   стиль оставлен на случай возврата. */
.ladder-loop{
  margin-top:clamp(20px,2.2vw,30px);
  padding:clamp(15px,1.5vw,20px) clamp(18px,2vw,26px);border-radius:14px;
  background:linear-gradient(120deg,rgba(237,126,47,.11),rgba(255,255,255,.012));
  border:1px solid rgba(237,126,47,.28);
  font-size:clamp(15.5px,1.4vw,18.5px);color:#d8b89a;line-height:1.55;
}

/* ---------- Весь блок сопровождения свёрнут под кнопку во всю ширину ----------
   На странице про рефералку сопровождение — это справка про награды, а не главный
   сюжет: держим его закрытым, чтобы не растягивать страницу, и раскрываем по клику */
/* сопровождение не отдельный бокс, а часть бэнда витрины (Никита 25.07): без рамки, верхняя линия-разделитель */
.sopr-fold{background:transparent;border:none;border-top:1px solid var(--line);border-radius:0;overflow:hidden;}
.sopr-btn{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(24px,2.8vw,38px) 0;
  transition:color .3s var(--ease);
}
.sopr-btn::-webkit-details-marker{display:none;}
.sopr-btn:hover .sb-t{color:var(--orange);}
.sb-txt{display:flex;flex-direction:column;gap:6px;}
.sb-t{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;line-height:1.05;
  font-size:clamp(26px,3.4vw,50px);
}
.sb-s{font-size:clamp(14.5px,1.3vw,18px);color:var(--muted);line-height:1.5;}
/* явная подсказка действия: без неё полоса не читалась как кликабельная */
.sb-cta{display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);flex:none;}
.sb-act{
  font-size:clamp(14px,1.2vw,16.5px);font-weight:700;color:var(--orange);white-space:nowrap;
}
.sb-act::after{content:"Нажмите, чтобы раскрыть";}
.sopr-fold[open] .sb-act::after{content:"Свернуть";}
.sb-i{
  position:relative;flex:none;
  width:clamp(38px,3.4vw,52px);height:clamp(38px,3.4vw,52px);
  border:1px solid var(--line2);border-radius:50%;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.sopr-btn:hover .sb-i{border-color:var(--orange);}
.sb-i::before,.sb-i::after{content:"";position:absolute;background:var(--orange);transition:transform .35s var(--ease);}
.sb-i::before{top:50%;left:26%;right:26%;height:2px;transform:translateY(-50%);}
.sb-i::after{left:50%;top:26%;bottom:26%;width:2px;transform:translateX(-50%);}
.sopr-fold[open] .sb-i{background:rgba(237,126,47,.12);border-color:var(--orange);}
.sopr-fold[open] .sb-i::after{transform:translateX(-50%) scaleY(0);}
.sopr-fold[open] .sopr-btn{border-bottom:1px solid var(--line);}
.sopr-body{
  padding:clamp(24px,3vw,40px) 0 clamp(8px,1.2vw,16px);
  animation:accIn .4s var(--ease);
}
.sopr-lead{font-size:clamp(15.5px,1.4vw,19px);color:var(--muted);line-height:1.6;margin-bottom:clamp(24px,3vw,38px);}
.sopr-lead b{color:var(--ink);font-weight:700;}
@media (max-width:620px){
  .sopr-btn{padding:22px 0;gap:14px;flex-wrap:wrap;}
  .sb-cta{margin-left:auto;}
  .sopr-body{padding:22px 0 8px;}
  /* на телефоне длинная подсказка не влезает рядом с заголовком — короткая форма */
  .sb-act::after{content:"Раскрыть";}
  .sb-act{font-size:13.5px;}
}
/* на 320px слово «Сопровождение» занимает 200 из 276 доступных px, и связка
   «Раскрыть» + кружок уезжала за правый край экрана целиком (замер 27.07: правый
   край 347 при ширине 320). Ниже 380px оставляем только кружок «+». */
@media (max-width:380px){
  /* nowrap + min-width:0 держат кружок в одной строке с заголовком: иначе длинный
     подзаголовок распирает текстовый блок на всю ширину и «+» съезжает отдельной строкой */
  .sopr-btn{flex-wrap:nowrap;}
  .sb-txt{min-width:0;flex:1;}
  .sb-t{font-size:23px;}
  .sb-act{display:none;}
}

/* ---------- Раскрывающийся разбор тарифов под карточками (паттерн сайта сопровождения) ---------- */
/* заменил ссылку «подробнее на отдельном сайте»: в карточке пунктов мало и непонятно,
   здесь тариф раскрывается в полный разбор — для кого, что каждый месяц, кому подойдёт */
.acc-head{margin-top:clamp(56px,6.4vw,96px);}
.acc-head h3{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.01em;line-height:1.06;
  font-size:clamp(26px,3vw,44px);
}
.acc-head p{margin-top:14px;color:var(--muted);font-size:clamp(15px,1.35vw,18.5px);line-height:1.55;max-width:620px;}
.acc-wrap{margin-top:clamp(22px,2.8vw,38px);border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:60px 1fr auto 26px;gap:clamp(14px,2vw,32px);
  align-items:center;padding:clamp(20px,2.2vw,30px) 4px;
  transition:padding .35s var(--ease),color .25s;
}
.acc summary::-webkit-details-marker{display:none;}
.acc summary:hover{padding-left:14px;}
.acc summary:hover .atitle{color:var(--orange);}
.acc .anum{font-family:var(--f-display);font-weight:800;font-size:clamp(17px,1.7vw,25px);color:var(--orange);letter-spacing:.02em;}
.acc .atitle{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;line-height:1.1;font-size:clamp(21px,2.5vw,38px);transition:color .25s;}
.acc .aprice{font-size:clamp(13.5px,1.25vw,17px);color:var(--muted);white-space:nowrap;font-weight:500;}
.acc .aplus{position:relative;width:22px;height:22px;justify-self:end;}
.acc .aplus::before,.acc .aplus::after{content:"";position:absolute;background:var(--orange);transition:transform .3s var(--ease);}
.acc .aplus::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%);}
.acc .aplus::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);}
.acc[open] .aplus::after{transform:translateX(-50%) scaleY(0);}
.acc[open] .atitle{color:var(--orange);}
.acc .abody{padding:0 4px clamp(26px,2.8vw,38px) clamp(74px,calc(60px + 2vw),92px);}
.acc[open] .abody{animation:accIn .4s var(--ease);}
.acc .alead{font-size:clamp(16px,1.45vw,20px);color:#d8b89a;line-height:1.55;max-width:760px;}
.apts{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.4vw,18px);margin-top:clamp(20px,2.2vw,30px);}
.ap{
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:7px;
  align-items:start;align-content:start;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:clamp(15px,1.5vw,20px) clamp(16px,1.6vw,22px);
}
.ap .ap-idx{
  font-family:var(--f-display);font-weight:800;font-size:13px;color:var(--orange);
  letter-spacing:.06em;padding-top:4px;grid-row:span 2;
}
.ap b{font-family:var(--f-display);font-size:clamp(16px,1.4vw,19.5px);font-weight:700;letter-spacing:-.01em;line-height:1.3;}
.ap span{font-size:clamp(14.5px,1.25vw,17px);color:#c1b9ab;line-height:1.5;}
.afit{
  margin-top:clamp(22px,2.4vw,32px);padding-top:clamp(16px,1.6vw,22px);border-top:1px solid var(--line);
  font-size:clamp(15px,1.3vw,18px);color:var(--ink);line-height:1.55;max-width:820px;
}
.afit b{color:var(--orange);}
@media (max-width:980px){ .apts{grid-template-columns:1fr;} }
@media (max-width:620px){
  .acc summary{grid-template-columns:auto 1fr 22px;gap:12px;padding:18px 2px;}
  .acc .aprice{display:none;}
  .acc .atitle{font-size:clamp(20px,5.8vw,26px);}
  .acc .abody{padding-left:0;}
}

/* ---------- FAQ-аккордеон (нативный details/summary, паттерн сайта сопровождения) ---------- */
.foot-faq{max-width:1040px;}
.faq-q{border-bottom:1px solid var(--line);}
.faq-q:first-child{border-top:1px solid var(--line);}
.faq-q summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:15px;
  padding:clamp(17px,1.7vw,21px) 0;font-size:clamp(16.5px,1.45vw,20px);font-weight:600;line-height:1.4;
  transition:color .2s;
}
.faq-q summary::-webkit-details-marker{display:none;}
.faq-q summary::before{content:"+";color:var(--orange);font-size:24px;line-height:1.1;width:18px;flex:none;font-weight:400;}
.faq-q[open] summary::before{content:"–";}
.faq-q summary:hover{color:var(--orange);}
.faq-q .faq-a{
  padding:0 0 22px 33px;font-size:clamp(15px,1.35vw,18px);
  color:var(--muted);line-height:1.6;max-width:900px;
}
.faq-q[open] .faq-a{animation:accIn .35s var(--ease);}
@keyframes accIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}


/* ============================================================
   Тарифы сопровождения: разметка и стиль перенесены с сайта сопровождения
   (automyai.ru/soprovozhdenie/, состояние 27.07.2026) — чтобы блок выглядел
   одинаково на обоих лендингах. Строка-аккордеон .mxp + карточка тарифа .mod.
   ============================================================ */
.mxp{border-bottom:1px solid var(--line);}
.mxp-head{
  width:100%;background:none;border:none;color:inherit;font:inherit;cursor:pointer;text-align:left;
  display:grid;grid-template-columns:72px 1fr auto 40px;gap:clamp(16px,2vw,40px);align-items:center;
  padding:clamp(22px,2.4vw,32px) 4px;transition:padding .35s var(--ease),color .25s;
}
.mxp-head:hover{padding-left:16px;}
.mxp-head:hover .atitle{color:var(--orange);}
.mxp-head .anum{font-family:var(--f-mono);font-size:clamp(18px,1.9vw,26px);font-weight:700;color:var(--orange);letter-spacing:.03em;}
.mxp-head .atitle{font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;line-height:1.1;font-size:clamp(20px,2.6vw,42px);transition:color .25s;}
.mxp-head .aprice{font-size:clamp(13.5px,1.25vw,17px);color:var(--muted);white-space:nowrap;font-weight:500;}
.mxp.open .mxp-head .atitle{color:var(--orange);}
.mxp-head .aplus{position:relative;width:22px;height:22px;justify-self:end;}
.mxp-head .aplus::before,.mxp-head .aplus::after{content:"";position:absolute;background:var(--orange);transition:transform .3s var(--ease);}
.mxp-head .aplus::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%);}
.mxp-head .aplus::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%);}
.mxp.open .mxp-head .aplus::after{transform:translateX(-50%) scaleY(0);}
/* плавное раскрытие по высоте */
.mxp-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);}
.mxp.open .mxp-wrap{grid-template-rows:1fr;}
.mxp-inner{overflow:hidden;min-height:0;}
.mxp-pad{padding:clamp(4px,1vw,12px) 0 clamp(26px,3vw,40px);}
.alead{font-size:clamp(16px,1.45vw,20px);color:#d8b89a;line-height:1.55;max-width:760px;}
/* оранжевая сцена внутри */
.mod{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(157deg,#f08a3a 0%,#e9772a 46%,#df6c22 100%)}
.mod::before{content:"";position:absolute;top:-30%;right:-12%;width:55%;height:130%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 64%);pointer-events:none}
.mod-in{position:relative;z-index:1;padding:clamp(30px,3.4vw,56px) clamp(26px,3vw,52px)}
.mod-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:clamp(11px,1vw,13px);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(10,9,8,.62);margin-bottom:clamp(18px,2.4vw,30px)}
.mod-eyebrow svg{width:16px;height:16px;fill:rgba(10,9,8,.7)}
/* карточка модуля: сверху цифра + описание справа от неё, снизу пункты в два ряда */
.mod-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px);align-items:start}
.mod-head{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2.2vw,34px);row-gap:clamp(10px,1.2vw,16px);align-items:start}
.mod-num{grid-row:1/3;align-self:start;font-family:var(--f-display);font-weight:900;color:#fff;line-height:.8;
  font-size:clamp(58px,7vw,116px);letter-spacing:-.02em;text-shadow:0 24px 50px rgba(120,55,10,.26)}
.mod-title{grid-column:2;grid-row:1;font-family:var(--f-display);font-weight:800;color:#fff;line-height:1;
  letter-spacing:-.01em;font-size:clamp(26px,3.4vw,46px);margin:0}
.mod-lead{grid-column:2;grid-row:2;color:rgba(255,255,255,.94);font-size:clamp(15.5px,1.3vw,19px);
  line-height:1.5;max-width:72ch;margin:0}
.mod-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(11px,1.2vw,16px);
  padding-top:clamp(22px,2.4vw,34px);border-top:1px solid rgba(255,255,255,.2)}
.mp{position:relative;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;
  padding:clamp(18px,1.6vw,24px) clamp(18px,1.7vw,26px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s}
.mp:hover{background:rgba(255,255,255,.2)}
.mp .mp-idx{position:absolute;top:clamp(16px,1.6vw,22px);right:clamp(16px,1.7vw,24px);font-weight:700;font-size:12.5px;color:rgba(10,9,8,.4)}
.mp b{display:block;font-weight:800;color:#fff;font-size:clamp(17px,1.4vw,21px);line-height:1.25;margin-bottom:8px;padding-right:32px}
.mp span{display:block;color:rgba(255,255,255,.9);font-size:clamp(14.5px,1.15vw,17px);line-height:1.5}

/* вариант фона: СВЕТЛЫЙ (модуль 02) */
.mod--light{background:linear-gradient(157deg,#f4efe5 0%,#ece5d7 52%,#e3dac9 100%)}
.mod--light::before{background:radial-gradient(circle,rgba(237,126,47,.18),transparent 64%)}
.mod--light .mod-eyebrow{color:rgba(20,16,10,.55)}
.mod--light .mod-eyebrow svg{fill:rgba(20,16,10,.6)}
.mod--light .mod-num{color:#15120e;text-shadow:none}
.mod--light .mod-title{color:#15120e}
.mod--light .mod-lead{color:#5c544a}
.mod--light .mod-points{border-top-color:rgba(20,16,10,.14)}
.mod--light .mp{background:rgba(255,255,255,.62);border-color:rgba(20,16,10,.08);backdrop-filter:none}
.mod--light .mp:hover{background:rgba(255,255,255,.85)}
.mod--light .mp .mp-idx{color:rgba(20,16,10,.32)}
.mod--light .mp b{color:#15120e}
.mod--light .mp span{color:#5c544a}

/* вариант фона: ЧЁРНЫЙ с оранжевыми элементами (модуль 03) */
.mod--dark{background:linear-gradient(160deg,#252729 0%,#1e2024 52%,#1a1c20 100%);border:1px solid rgba(237,126,47,.2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04)}
.mod--dark::before{top:-30%;right:-10%;width:62%;height:135%;background:radial-gradient(circle,rgba(237,126,47,.4),transparent 60%)}
.mod--dark::after{content:"";position:absolute;left:-14%;bottom:-32%;width:52%;height:115%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,15,.2),transparent 64%);pointer-events:none}
.mod--dark .mp{border-color:rgba(237,126,47,.16)}
.mod--dark .mod-eyebrow{color:var(--orange)}
.mod--dark .mod-eyebrow svg{fill:var(--orange)}
.mod--dark .mod-num{color:#fff;text-shadow:0 24px 50px rgba(0,0,0,.5)}
.mod--dark .mod-title{color:#f4f0e8}
.mod--dark .mod-lead{color:var(--muted)}
.mod--dark .mp{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.mod--dark .mod-points{border-top-color:rgba(237,126,47,.22)}
.mod--dark .mp:hover{background:rgba(255,255,255,.08)}
.mod--dark .mp .mp-idx{color:rgba(255,255,255,.3)}
.mod--dark .mp b{color:#fff}
.mod--dark .mp span{color:rgba(244,240,232,.82)}

/* ступенчатое «перетекание» при раскрытии */
.mxp .mod-num,.mxp .mod-title,.mxp .mod-lead,.mxp .mp{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.mxp.open .mod-num,.mxp.open .mod-title,.mxp.open .mod-lead,.mxp.open .mp{opacity:1;transform:none}
.mxp.open .mod-num{transition-delay:.08s}.mxp.open .mod-title{transition-delay:.14s}.mxp.open .mod-lead{transition-delay:.2s}
.mxp.open .mp:nth-child(1){transition-delay:.24s}.mxp.open .mp:nth-child(2){transition-delay:.31s}
.mxp.open .mp:nth-child(3){transition-delay:.38s}.mxp.open .mp:nth-child(4){transition-delay:.45s}.mxp.open .mp:nth-child(5){transition-delay:.52s}
.mxp.open .mp:nth-child(6){transition-delay:.59s}.mxp.open .mp:nth-child(7){transition-delay:.66s}
.mod{position:relative;overflow:hidden;border-radius:26px;background:linear-gradient(157deg,#f08a3a 0%,#e9772a 46%,#df6c22 100%)}
.mod::before{content:"";position:absolute;top:-30%;right:-12%;width:55%;height:130%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.2),transparent 64%);pointer-events:none}
.mod-in{position:relative;z-index:1;padding:clamp(30px,3.4vw,56px) clamp(26px,3vw,52px)}
.mod-eyebrow{display:inline-flex;align-items:center;gap:11px;font-size:clamp(11px,1vw,13px);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;color:rgba(10,9,8,.62);margin-bottom:clamp(18px,2.4vw,30px)}
.mod-eyebrow svg{width:16px;height:16px;fill:rgba(10,9,8,.7)}
/* карточка модуля: сверху цифра + описание справа от неё, снизу пункты в два ряда */
.mod-grid{display:grid;grid-template-columns:1fr;gap:clamp(26px,3vw,40px);align-items:start}
.mod-head{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(18px,2.2vw,34px);row-gap:clamp(10px,1.2vw,16px);align-items:start}
.mod-num{grid-row:1/3;align-self:start;font-family:var(--f-display);font-weight:900;color:#fff;line-height:.8;
  font-size:clamp(58px,7vw,116px);letter-spacing:-.02em;text-shadow:0 24px 50px rgba(120,55,10,.26)}
.mod-title{grid-column:2;grid-row:1;font-family:var(--f-display);font-weight:800;color:#fff;line-height:1;
  letter-spacing:-.01em;font-size:clamp(26px,3.4vw,46px);margin:0}
.mod-lead{grid-column:2;grid-row:2;color:rgba(255,255,255,.94);font-size:clamp(15.5px,1.3vw,19px);
  line-height:1.5;max-width:72ch;margin:0}
.mod-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(11px,1.2vw,16px);
  padding-top:clamp(22px,2.4vw,34px);border-top:1px solid rgba(255,255,255,.2)}
.mp{position:relative;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;
  padding:clamp(18px,1.6vw,24px) clamp(18px,1.7vw,26px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s}
.mp:hover{background:rgba(255,255,255,.2)}
.mp .mp-idx{position:absolute;top:clamp(16px,1.6vw,22px);right:clamp(16px,1.7vw,24px);font-weight:700;font-size:12.5px;color:rgba(10,9,8,.4)}
.mp b{display:block;font-weight:800;color:#fff;font-size:clamp(17px,1.4vw,21px);line-height:1.25;margin-bottom:8px;padding-right:32px}
.mp span{display:block;color:rgba(255,255,255,.9);font-size:clamp(14.5px,1.15vw,17px);line-height:1.5}

/* вариант фона: СВЕТЛЫЙ (модуль 02) */
.mod--light{background:linear-gradient(157deg,#f4efe5 0%,#ece5d7 52%,#e3dac9 100%)}
.mod--light::before{background:radial-gradient(circle,rgba(237,126,47,.18),transparent 64%)}
.mod--light .mod-eyebrow{color:rgba(20,16,10,.55)}
.mod--light .mod-eyebrow svg{fill:rgba(20,16,10,.6)}
.mod--light .mod-num{color:#15120e;text-shadow:none}
.mod--light .mod-title{color:#15120e}
.mod--light .mod-lead{color:#5c544a}
.mod--light .mod-points{border-top-color:rgba(20,16,10,.14)}
.mod--light .mp{background:rgba(255,255,255,.62);border-color:rgba(20,16,10,.08);backdrop-filter:none}
.mod--light .mp:hover{background:rgba(255,255,255,.85)}
.mod--light .mp .mp-idx{color:rgba(20,16,10,.32)}
.mod--light .mp b{color:#15120e}
.mod--light .mp span{color:#5c544a}

/* вариант фона: ЧЁРНЫЙ с оранжевыми элементами (модуль 03) */
.mod--dark{background:linear-gradient(160deg,#252729 0%,#1e2024 52%,#1a1c20 100%);border:1px solid rgba(237,126,47,.2);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.04)}
.mod--dark::before{top:-30%;right:-10%;width:62%;height:135%;background:radial-gradient(circle,rgba(237,126,47,.4),transparent 60%)}
.mod--dark::after{content:"";position:absolute;left:-14%;bottom:-32%;width:52%;height:115%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,90,15,.2),transparent 64%);pointer-events:none}
.mod--dark .mp{border-color:rgba(237,126,47,.16)}
.mod--dark .mod-eyebrow{color:var(--orange)}
.mod--dark .mod-eyebrow svg{fill:var(--orange)}
.mod--dark .mod-num{color:#fff;text-shadow:0 24px 50px rgba(0,0,0,.5)}
.mod--dark .mod-title{color:#f4f0e8}
.mod--dark .mod-lead{color:var(--muted)}
.mod--dark .mp{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.mod--dark .mod-points{border-top-color:rgba(237,126,47,.22)}
.mod--dark .mp:hover{background:rgba(255,255,255,.08)}
.mod--dark .mp .mp-idx{color:rgba(255,255,255,.3)}
.mod--dark .mp b{color:#fff}
.mod--dark .mp span{color:rgba(244,240,232,.82)}
.mp{position:relative;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:18px;
  padding:clamp(18px,1.6vw,24px) clamp(18px,1.7vw,26px);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .35s var(--ease),background .3s}
.mp:hover{background:rgba(255,255,255,.2)}
.mp .mp-idx{position:absolute;top:clamp(16px,1.6vw,22px);right:clamp(16px,1.7vw,24px);font-weight:700;font-size:12.5px;color:rgba(10,9,8,.4)}
.mp b{display:block;font-weight:800;color:#fff;font-size:clamp(17px,1.4vw,21px);line-height:1.25;margin-bottom:8px;padding-right:32px}
.mp span{display:block;color:rgba(255,255,255,.9);font-size:clamp(14.5px,1.15vw,17px);line-height:1.5}

@media (max-width:620px){
  .mxp-head{grid-template-columns:auto 1fr 22px;gap:12px;padding:18px 2px;}
  .mxp-head .aprice{display:none;}
  .mxp-head .anum{font-size:clamp(20px,6vw,28px);}
  .mxp-head .atitle{font-size:clamp(20px,5.8vw,28px);}
  .mxp-pad{padding-left:0;}
  .mod-points{grid-template-columns:1fr;}
  .mod-num{font-size:clamp(46px,13vw,68px);}
  .mod-title{font-size:clamp(23px,6.4vw,32px);}
  .mod-head{column-gap:14px;row-gap:8px;}
  .mod-lead{font-size:15px;}
}
@media (max-width:980px){ .mod-points{grid-template-columns:1fr;} }

/* ══════════ Telegram WebApp адаптация (порт с automyai.ru) ══════════
   Ссылку на страницу рассылают в Telegram, поэтому большинство откроет её
   во встроенном WebView, а не в браузере. */
:root{
  --tg-safe-top: env(safe-area-inset-top, 0px);   /* перезапишет JS внутри Telegram */
  --tg-content-top: 0px;                          /* отступ под кнопки Close/… в fullscreen */
  --tg-safe-bottom: env(safe-area-inset-bottom, 0px);  /* домашняя полоса / панель Telegram */
}
/* fixed-шапка не залезает под системную шапку Telegram / вырез устройства.
   Правило идёт последним в файле и перебивает padding-top мобильного блока —
   поэтому там же возвращаем 14px, иначе «пилюля» прилипает к верхнему краю */
header{padding-top:calc(var(--tg-safe-top) + var(--tg-content-top));}
@media (max-width:980px){
  header{padding-top:calc(14px + var(--tg-safe-top) + var(--tg-content-top));}
}
/* гасим pull-to-close / bounce на границах прокрутки */
/* ТОЛЬКО html. С этим правилом на body страница переставала листаться колесом и
   свайпом (клавиши и window.scrollTo при этом работали, потому и не поймал сразу):
   у body стоит overflow-x:hidden, из-за чего он сам становится скролл-контейнером,
   прокручивать в нём нечего, а overscroll-behavior запрещает передать прокрутку
   корневому скроллеру. Проверено реальными Input-событиями 27.07 */
html{overscroll-behavior-y:none;}
/* внутри Telegram hero берёт стабильную высоту вьюпорта (фолбэк — 100svh) */
.tg-app .hero{min-height:var(--tg-vh,100svh);height:var(--tg-vh,100svh);flex:0 0 auto;}
/* мобильное меню учитывает шапку Telegram */
.tg-app .nav-links.open{padding-top:calc(var(--tg-safe-top) + var(--tg-content-top));}

/* ---------- Тач-таргеты (аудит 28.07) ----------
   Минимум по WCAG 2.2 — 24×24, по-человечески на телефоне — 44×44.
   Замеры до правки: логотип шапки 101×22, бургер 36×35, поле со ссылкой 319×28,
   логотип футера 111×24, ссылка automyai.ru в футере 81×26.
   Растим кликабельную зону, вид при этом не меняется */
.logo{display:inline-flex;align-items:center;min-height:44px;padding:4px 0}
footer .f-site{display:inline-flex;align-items:center;min-height:44px}
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:flex-end}
/* поле со ссылкой: кегль трогать нельзя (ниже 16px Safari на iOS зумит страницу
   при фокусе, а фолбэк копирования делает field.focus()) — растим высоту */
.copy-field{min-height:44px}

/* ---------- Низкий экран: телефон в ландшафте ----------
   Замер 28.07 на 568×330: hero — «ровно один экран» (100svh) с overflow:hidden
   и контентом по центру, поэтому при низком окне срезало и стикер сверху,
   и кнопку снизу — CTA становился недоступен, а доскроллить внутри hero нельзя.
   Ниже 520px высоты отпускаем hero в естественную высоту. */
@media (orientation:landscape) and (max-height:520px){
  .hero,.tg-app .hero{
    min-height:auto;height:auto;flex:0 0 auto;
    padding:78px 20px calc(48px + var(--tg-safe-bottom,0px));
  }
  .hero-title{font-size:clamp(26px,4.6vw,38px);}
  .hero-scroll{display:none;}          /* стрелка «вниз» на низком экране только мешает */
  .hero-cta{margin-top:20px;}
}

/* ══════════ МОБИЛЬНАЯ ДОВОДКА 10.09.2026 ══════════ */
/* Замеры своим CDP на 320/360/375/390/414/430 с эмуляцией устройства. */
@media (max-width:620px){
  /* было 11.5px: ярлыки наград и тарифов на телефоне не читались */
  .rwd .rwd-flag, .plan .ptag, .plan .badge-scarce{font-size:12px;}
  /* грид-элемент по умолчанию min-width:auto и не даёт содержимому сжаться:
     на 320px карточки тарифов просили 296px в колонке 276 и обрезались */
  .price-grid > *, .shop-grid > *, .steps > *{min-width:0;}
  .plan .btn, .rwd .btn{white-space:normal;text-align:center;min-height:48px;}
}