/* ============================================================
   Сопровождение от 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{
  --bg:#1e2024;
  --bg2:#252729;
  --hero-bg:#1c1e22;
  --ink:#f4f0e8;
  --muted:#a39c90;
  --muted2:#6e675e;
  --orange:#ED7E2F;
  --orange2:#ff7d1f;
  --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);
  --f-display:'Muller','Helvetica Neue',Arial,system-ui,sans-serif;
  --f-sans:'Muller','Helvetica Neue',Arial,system-ui,sans-serif;
  /* на automyai.ru mono/serif — тот же Muller; алиасы нужны, чтобы перенесённые
     с донора правила не схлопывались в inherit */
  --f-mono:'Muller','Helvetica Neue',Arial,system-ui,sans-serif;
  --sec-y:clamp(28px,3.3vw,46px);
}

*{box-sizing:border-box;margin:0;padding:0;}
b,strong{font-weight:700;}
/* text-size-adjust: iOS Safari и Android Chrome в ландшафте сами раздувают кегль
   («boost»), из-за чего вёрстка расползается именно на телефоне — отключаем */
html{
  scroll-behavior:smooth;
  -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;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

/* --gut — горизонтальное поле страницы; env(safe-area-*) держит контент из-под выреза
   iPhone в ландшафте. Узкие брейкпоинты меняют только --gut, вырез не теряется */
.wrap{width:100%;max-width:1240px;margin:0 auto;--gut:clamp(22px,5vw,64px);
  padding-left:calc(var(--gut) + env(safe-area-inset-left,0px));
  padding-right:calc(var(--gut) + env(safe-area-inset-right,0px));}

/* ---------- Кнопки ---------- */
.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-primary{background:#fff;color:#1e2024;box-shadow:0 12px 44px -14px rgba(255,255,255,.5);}
.btn-primary:hover{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{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 */
header{position:fixed;top:0;left:0;right:0;z-index:40;
  transition:background .3s,border-color .3s;}
header.scrolled{background:rgba(20,18,16,.72);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);}
/* шапка идёт во всю ширину экрана с узкими полями, как на automyai.ru: с общими
   полями .wrap (до 64px) логотип уходит внутрь, а кнопка не дотягивает до края */
header .wrap{max-width:none;
  padding-left:max(clamp(18px,2.6vw,44px), env(safe-area-inset-left,0px));
  padding-right:max(clamp(18px,2.6vw,44px), env(safe-area-inset-right,0px));}
.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-right{justify-self:end;display:flex;align-items:center;gap:14px;}
/* «Закрыть» и CTA живут только в мобильном меню */
.nav-back{display:none;}
.nav-links .nav-cta{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 и накрывала бы начало секции */
#inside,#plans,#faq,#story,#start{scroll-margin-top:86px;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  /* hero заполняет весь экран (шапка выведена из потока — absolute поверх),
     контент строго по центру, glow у нижней кромки, следующая секция не выглядывает «серой полосой» */
  /* ровно экран устройства: vh — фолбэк, svh — честная высота на мобильных
     (не прыгает при появлении/скрытии панелей браузера) */
  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);
  contain:paint;
  padding:clamp(88px,11vh,116px) 20px clamp(48px,7vh,80px);
}
.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;will-change:translate;
  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);
  transform:translateZ(0);backface-visibility:hidden;
}
@keyframes heroBreathe{0%,100%{scale:1;}50%{scale:1.07;}}
/* искры у нижней кромки — «жизнь» фона на основном сайте */
.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;}
}
@media (prefers-reduced-motion:reduce){
  .hero .glow{animation:none;}
  .spark{display:none;}
}
.hero-center{position:relative;z-index:2;max-width:1080px;}


.hero-title{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(32px,5.4vw,96px);line-height:1.05;letter-spacing:-.01em;color:#fff;
  overflow-wrap:break-word;
}
.hero-title .o{color:var(--orange);font-weight:700;}
/* inline-flex: контейнер по ширине кнопки, поэтому подпись со стрелкой можно
   привязать к её краю (right:100%), а не к центру экрана — при длинном тексте
   кнопки стрелка иначе наползала на пилюлю */
.hero-cta{margin-top:clamp(28px,4.2vh,46px);display:inline-flex;flex-direction:column;align-items:center;gap:14px;position:relative;}


/* низкие экраны ноутбуков (1280×720, 13" с панелями) — заголовок и кнопка
   должны помещаться в один экран без прокрутки внутри hero */
@media (min-width:621px) and (max-height:660px){
  .hero-title{font-size:clamp(32px,4.6vw,58px);}
  .hero-cta{margin-top:clamp(22px,3vh,34px);}
  .hero-note .hn-txt{font-size:14px;}
}
@media (min-width:621px) and (max-height:620px){
  .hero-title{font-size:clamp(28px,4vw,46px);}
  .hero{padding-top:clamp(76px,10vh,96px);}
}


/* ---------- Приёмы automyai.ru (перенос 27.07) ---------- */
/* зернистая плёнка поверх страницы — фирменная «печатная» фактура основного сайта */
.grain{
  position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* подсветка карточки, следующая за курсором */
.card-hov{position:relative;isolation:isolate;}
.card-hov::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;border-radius:inherit;
  transition:opacity .45s var(--ease);
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),rgba(237,126,47,.2),transparent 60%);
}
/* появление при скролле + каскад внутри сетки */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.rv.in{opacity:1;transform:none;}
.rv-s:nth-child(2){transition-delay:.06s;}
.rv-s:nth-child(3){transition-delay:.12s;}
.rv-s:nth-child(4){transition-delay:.18s;}
.rv-s:nth-child(5){transition-delay:.24s;}
.rv-s:nth-child(6){transition-delay:.3s;}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
}

/* ---------- Секции ----------
   --sec-y — единый вертикальный ритм страницы. Был разнобой: story/inside/single
   дышали на 60px, а plans/final на 72px, и блоки читались неровно */
section{padding:var(--sec-y) 0;position:relative;}
/* заголовки секций 1:1 с automyai.ru (капс + плотный интерлиньяж) — правка Никиты 26.07 «равняемся на основной сайт» */
h2.sec{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(38px,6.2vw,106px);letter-spacing:0;line-height:.94;
  text-transform:uppercase;overflow-wrap:break-word;
}
/* длинные русские заголовки на 106px рвутся в кашу — тот же приём, что у донора (#included h2.sec) */
#inside h2.sec,#plans h2.sec,#start h2.sec{font-size:clamp(30px,4.4vw,68px);}
.sec-head{margin-bottom:clamp(26px,3.4vw,44px);max-width:1000px;}

/* ярлык секции с чёрточкой — компонент automyai.ru, единый на всю страницу */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin-bottom:24px;
  font-family:var(--f-mono);font-size:clamp(11px,1vw,13px);font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--orange);
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--orange);opacity:.7;}
.eyebrow.muted{color:var(--muted);}
.eyebrow.muted::before{background:var(--muted);}

/* раскрытие тела аккордеонов: используют и тарифы, и FAQ — держим отдельно от их блоков */
@keyframes accIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}

/* ---------- Сюжет «жонглёр» ---------- */
/* .fit над сюжетом снят 26.07 (правка Никиты) — верхний паддинг вернулся к секционному ритму */
.story{padding:var(--sec-y) 0;}
.story-row{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:center;
  gap:clamp(26px,5vw,76px);
  padding:clamp(8px,1.8vw,22px) 0;
}
.story-row.reverse .story-art{order:2;}
.story-art{position:relative;}

/* статичные кадры историй (стиль «Снупи», перегенерены 22.07 вместе с кадрами рефералки) */
.story-still{display:block;height:auto;margin:0 auto;}
.story-still-you{width:100%;max-width:330px;}
.story-still-ai{width:100%;max-width:560px;}
.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 ----------
   Правка Гоши 27.07: кнопка «Подробнее» и раскрытие сняты, в карточке остаются
   цифра-графика и название. Раз контента меньше — плитки задают ритм сами:
   одинаковая высота через stretch, заголовок сверху, цифра уходит за угол. */
.inc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.inc{
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:7px;
  min-height:clamp(112px,9vw,140px);
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:clamp(20px,1.8vw,28px);
  transition:transform .3s var(--ease),border-color .3s;
}
.inc:hover{border-color:var(--line2);}
/* цифра-графика: подрезана только нижним краем — по горизонтали читается целиком,
   иначе половина «01» у правого борта выглядит как обрезанный по ошибке элемент */
.inc .inc-bg{
  position:absolute;right:clamp(12px,1.3vw,20px);bottom:-14px;z-index:0;
  font-family:var(--f-display);font-weight:800;font-size:clamp(74px,6.4vw,100px);
  line-height:.8;letter-spacing:-.04em;color:var(--orange);opacity:.1;
  pointer-events:none;user-select:none;
}
.inc>*:not(.inc-bg){position:relative;z-index:1;}
/* поле справа держит текст подальше от цифры-фона */
/* заголовку ширину не режем: цифра-фон сидит в нижнем углу и с первой строкой
   не пересекается, а узкое поле ломало «Готовые AI-сотрудники» пополам */
.inc h3{
  font-family:var(--f-display);font-size:clamp(18px,1.6vw,25px);font-weight:700;
  letter-spacing:-.015em;line-height:1.14;
}

/* ---------- Тарифы ---------- */
.plans{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--sec-y) 0;}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,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{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;
}
/* nowrap здесь распирал колонку до min-content и давал горизонтальный скролл
   на 1024 (iPad ландшафт) и 280 (Fold). Пусть «/ мес» переносится — это лучше скролла */
.plan .price{
  font-family:var(--f-display);font-size:clamp(38px,3.2vw,56px);font-weight:800;
  letter-spacing:-.02em;line-height:1;overflow-wrap:break-word;
}
.plan .price small{font-size:.42em;font-weight:500;color:var(--muted);}
.plan .price.req{font-size:clamp(30px,2.4vw,42px);}
/* «от 49 000 ₽» мельче обычной цены — на 3-колоночной сетке добираем разницу сверху,
   чтобы строки под ценой (₽/день, для кого) стояли на одной линии во всех карточках */
@media (min-width:981px){
  .plan .price.req{padding-top:calc(clamp(38px,3.2vw,56px) - clamp(30px,2.4vw,42px));}
}
.plan .pcap{font-size:14.5px;color:var(--muted);margin-top:10px;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;}

/* ---------- Состав тарифов: аккордеон (паттерн «программа курса» с automyai.ru) ---------- */
.acc-head{margin-top:clamp(34px,4.2vw,58px);}
.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);}
/* механика раскрытия — компонент .mxp с automyai.ru (правка Никиты 26.07: «стиль очень скучный, надо поменять»).
   ВНИМАНИЕ: .mxp-wrap — ВНУТРЕННИЙ анимируемый слой (grid-rows 0fr→1fr). Внешний контейнер списка — .acc-wrap. */
.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:auto minmax(0,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 .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;}
/* Safari до 16 не АНИМИРУЕТ grid-template-rows, но 0fr→1fr отрабатывает: блок
   раскрывается и схлопывается корректно, просто без плавности. Фолбэк на max-height
   сознательно не ставим — надёжно определить такой движок из CSS нельзя, а ошибочно
   включённый max-height обрежет длинный текст тарифа на узком экране */
.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);-webkit-backdrop-filter:none;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}
/* на узких экранах пункты в одну колонку, цифра компактнее */
@media(max-width:820px){.mod-points{grid-template-columns:1fr}}
@media(max-width:560px){
  .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}
}

/* ---------- Разовая консультация ---------- */
.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(28px,3vw,44px);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);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:12px;line-height:1.1;
}
.single .card-wide .single-cta{margin-top:20px;}
.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);
}
/* мостик к тарифам: строка под карточкой, ведёт взгляд в следующую секцию */
.single-bridge{
  margin:clamp(16px,1.8vw,24px) auto 0;text-align:center;max-width:760px;
  font-size:clamp(15px,1.35vw,17.5px);line-height:1.5;color:var(--muted);
}
.single-bridge::after{
  content:"";display:block;width:1px;height:clamp(18px,2vw,28px);margin:14px auto 0;
  background:linear-gradient(180deg,rgba(237,126,47,.55),transparent);
}

/* ---------- Финальный CTA (Moniqa) ---------- */
/* верхний паддинг урезан: заголовок здесь набран кеглем до 100px, и у такой строки
   свес над буквами сам по себе даёт ~20px воздуха — с полным --sec-y выходила дыра */
.final{position:relative;text-align:center;
  padding:calc(var(--sec-y) * .5) 0 var(--sec-y);overflow:hidden;}
.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 .btn{margin-top:clamp(26px,3vw,36px);}

/* ---------- Частые вопросы (мини-FAQ под CTA, как на automyai.ru) ---------- */
.faq{padding-top:0;padding-bottom:clamp(40px,5vw,68px);margin-top:0;}
.foot-faq{max-width:1040px;padding-top:clamp(24px,2.6vw,34px);border-top:1px solid var(--line);}
.foot-faq h2{
  font-family:var(--f-display);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(21px,2vw,28px);margin-bottom:clamp(10px,1.2vw,16px);
}
/* строка вопроса — тот же визуальный язык, что у аккордеона тарифов (.mxp):
   «+» справа, тонкая линия-разделитель, отступ тела под колонку заголовка */
.faq-q{border-bottom:1px solid var(--line);}
.faq-q summary{
  list-style:none;cursor:pointer;
  display:grid;grid-template-columns:minmax(0,1fr) 22px;gap:clamp(16px,2vw,40px);align-items:center;
  padding:clamp(18px,1.9vw,24px) 4px;
  font-family:var(--f-display);font-size:clamp(18px,1.7vw,23px);font-weight:700;letter-spacing:-.01em;line-height:1.25;
  transition:padding .35s var(--ease),color .25s;
}
.faq-q summary::-webkit-details-marker{display:none;}
.faq-q summary:hover{color:var(--orange);}
.faq-q[open] summary{color:var(--orange);}
.faq-q summary::after{
  content:"";position:relative;width:22px;height:22px;justify-self:end;
  background:
    linear-gradient(var(--orange),var(--orange)) center/100% 1.5px no-repeat,
    linear-gradient(var(--orange),var(--orange)) center/1.5px 100% no-repeat;
  transition:background-size .3s var(--ease);
}
.faq-q[open] summary::after{background-size:100% 1.5px,1.5px 0;}
.faq-q .faq-a{
  padding:0 26px clamp(22px,2.4vw,30px) 4px;font-size:clamp(15px,1.3vw,18px);
  color:var(--muted);line-height:1.6;max-width:900px;
}
.faq-q .faq-a p + p{margin-top:.6em;}
.faq-q[open] .faq-a{animation:accIn .35s var(--ease);}

/* ---------- Футер ---------- */
footer{border-top:1px solid var(--line);padding:36px 0 44px;}
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:14.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);}
/* ---------- Бейдж дефицита куратора: пилюля на верхней грани карточки, ВНЕ потока —
   иначе он сдвигал «Команду» и цену вниз, и ряды трёх карточек плясали (обратка Гоши 21.07) ---------- */
.badge-scarce{
  position:absolute;top:-10px;left:50%;transform:translate(-50%,-100%);
  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);
}



/* ---------- Рукописные стрелки-подписи (приём automyai.ru) ---------- */
.hn-txt{
  font-family:var(--f-sans);font-style:italic;font-weight:600;
  font-size:clamp(14px,1.25vw,17px);line-height:1.35;letter-spacing:.01em;
  color:rgba(255,255,255,.72);
}
.hn-arrow{width:clamp(44px,3.8vw,56px);height:auto;color:var(--orange);flex:none;}
/* hero: подпись слева от кнопки, стрелка смотрит на неё */
.hero-note{
  position:absolute;right:calc(100% + 20px);bottom:2px;z-index:3;
  display:flex;align-items:center;gap:12px;transform:rotate(-2deg);white-space:nowrap;
}
.hero-note .hn-txt{text-align:right;}
.hero-note .hn-arrow{margin-bottom:26px;transform:rotate(-55deg);}
@media (max-width:1100px){.hero-note{display:none;}}

/* ============================================================
   Модалка заявки — компонент automyai.ru, перенесён 1:1 (26.07).
   Шаг 1: кнопка в бота с deep-link. Шаг 2: форма для тех, у кого нет Telegram.
   ============================================================ */
/* z-index выше виджета ИИ-консультанта (embed.js ставит себе 2147483000) — у донора виджета нет, там хватало 100 */
/* Раскладка модалки намеренно без вертикального центрирования: и align-items:center,
   и margin:auto при контенте выше экрана обрезают ВЕРХ окна, и до заголовка не долистать
   (ландшафт 844×390, узкие 280–360 со стикером в потоке). Прижимаем к верху, «воздух»
   сверху даём паддингом — на высоких экранах выглядит как центрирование, на низких
   прокручивается сам оверлей. Скролл ровно один — у .modal, коробка без своего */
.modal{position:fixed;inset:0;z-index:2147483100;display:none;align-items:flex-start;justify-content:center;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:clamp(16px,10vh,120px) 18px calc(24px + var(--tg-safe-bottom, 0px))}
.modal.open{display:flex}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-hold{position:relative;z-index:1;width:100%;max-width:460px;margin:0 auto}
/* без max-height и своего overflow: иначе на узких получалось два вложенных скролла,
   и коробка обрезалась внутри уже прокручиваемого оверлея */
.modal-box{position:relative;width:100%;background:#232527;border:1px solid var(--line2);
  border-radius:24px;padding:clamp(28px,4vw,44px);animation:modalIn .4s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:none;color:var(--muted);cursor:pointer;font-size:14px;transition:.2s;display:flex;align-items:center;justify-content:center}
.modal-x:hover{color:var(--ink);border-color:var(--ink)}
.modal h3{font-family:var(--f-display);font-weight:800;font-size:clamp(26px,3.3vw,34px);letter-spacing:-.01em;margin-bottom:8px}
/* оранжевый стикер на углу модалки (как pb-sticker в hero) — absolute, не смещает контент */
.m-sticker{position:absolute;top:-40px;left:-14px;z-index:2;background:var(--orange);color:#fff;
  font-family:var(--f-sans);font-weight:700;font-size:13.5px;line-height:1.4;letter-spacing:.01em;
  padding:11px 16px;border-radius:14px;transform:rotate(-4deg);
  box-shadow:0 14px 34px -12px rgba(237,126,47,.55);max-width:82%}
.m-sticker b{font-weight:800}
.modal .msub{color:var(--muted);font-size:16.5px;margin-bottom:24px}
.pay{display:block;border:1px solid var(--line2);border-radius:18px;padding:24px 26px;margin-bottom:14px;transition:.25s}
.pay:hover{border-color:var(--orange);background:rgba(237,126,47,.08)}
.pay-main{border-color:transparent;background:var(--orange)}
.pay-main:hover{background:var(--orange2);border-color:transparent}
.pay.pay-main b{color:#fff}
.pay.pay-main span{color:#fff}
.pay.pay-main .tg{color:#fff;font-weight:700}
.pay b{display:block;font-family:var(--f-display);font-weight:700;font-size:21px;margin-bottom:6px}
.pay span{color:var(--muted);font-size:15px}
.pay .tg{color:var(--orange);font-size:15px;font-weight:700;margin-top:8px;display:block}
.nolink{display:block;width:100%;margin-top:6px;background:none;border:none;color:var(--orange);
  font-family:var(--f-sans);font-size:16px;cursor:pointer;padding:14px;text-decoration:underline;text-underline-offset:6px}
.modal input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:12px;
  padding:15px 18px;color:var(--ink);font-family:var(--f-sans);font-size:16px;margin-bottom:13px;outline:none;transition:border-color .2s}
.modal input:focus{border-color:var(--orange)}
.modal input::placeholder{color:var(--muted2)}
.chk{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--muted);margin-bottom:11px;cursor:pointer;line-height:1.45}
.chk input{width:19px;height:19px;margin:1px 0 0;flex:none;accent-color:var(--orange);cursor:pointer}
.chk a{color:var(--orange);text-decoration:underline;text-underline-offset:2px}
.send{width:100%;margin-top:12px;background:var(--orange);color:#fff;border:none;border-radius:999px;
  padding:16px;font-family:var(--f-sans);font-weight:700;font-size:16px;cursor:pointer;transition:.25s}
.send:disabled{background:rgba(255,255,255,.12);color:rgba(255,255,255,.55);cursor:not-allowed}
.send:not(:disabled):hover{background:var(--orange2)}
.mback{display:block;width:100%;margin-top:10px;background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer;padding:8px}
.mback:hover{color:var(--ink)}
.mdone{text-align:center;padding:14px 0}
.mdone .ic{font-size:44px;color:var(--orange);margin-bottom:12px}

/* ============================================================
   Адаптив
   ============================================================ */
/* 981–1160px: три колонки тарифов физически не помещаются (на iPad ландшафт
   1024×768 давали 58px горизонтального скролла). Раньше сетка прыгала
   с трёх сразу на одну — этот диапазон оставался тесным */
@media (min-width:981px) and (max-width:1160px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;margin:0 auto;}
  .plan{padding:clamp(26px,2.4vw,34px);}
}
@media (max-width:980px){
  /* ── шапка как на automyai.ru: бургер справа, меню на весь экран ──
     Кнопка «Попасть на сопровождение» из полоски убрана: во всю ширину телефона
     она выглядела чужеродно. Теперь она внизу меню, крупной оранжевой плашкой */
  .nav-right .btn{display:none;}
  /* меню на мобиле position:fixed и из грид-потока выпадает — без явной колонки
     правый блок занимает его место и бургер уезжает к центру (фикс Никиты 26.07) */
  .nav-right{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{--gut:0px;}
  .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);}
  header.scrolled .nav{border-color:var(--line);background:rgba(24,21,19,.96);
    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{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: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,minmax(0,1fr));}
  .price-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto;}
  /* карточки в один столбец: между ними всего 16px gap, а плашка «Осталось мест»
     торчит над карточкой ~38px — без запаса она наезжает на низ карточки над собой */
  .plan:has(.badge-scarce){margin-top:30px;}
  .apts{grid-template-columns:1fr;}
  .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;}
  .story-still-you{max-width:280px;}
  .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{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;}
  /* встроенный браузер Telegram держит поверх страницы плавающую панель (~64px)
     и safe-area под неё не отдаёт: без запаса снизу низ hero и кромка следующей
     секции уезжают под панель (скрин из TG, 28.07) */
  .hero{min-height:100vh;min-height:100svh;
    padding:74px 20px calc(80px + var(--tg-safe-bottom,0px));}
  .hero-title{font-size:clamp(28px,7.9vw,44px);line-height:1.14;}
  /* оранжевую часть уводим на свою строку: иначе на 390px строка ломается
     как «Сопровождение / бизнеса по внедрению / AI» и «AI» висит одно */
  .hero-title .o{display:block;}
  /* подпись, которая на десктопе стоит сбоку со стрелкой, на мобильном
     садится под кнопку простой строкой — закрывает пустоту между CTA и свечением */
  .hero-note{display:flex;position:static;transform:none;white-space:normal;
    justify-content:center;margin:0;}
  .hero-note .hn-arrow{display:none;}
  .hero-note .hn-txt{text-align:center;font-size:14.5px;color:rgba(255,255,255,.66);}
  .inc-grid{grid-template-columns:1fr;gap:10px;}
  /* в одну колонку разнобой высот виден сразу — держим ровный столбик */
  .inc{min-height:104px;padding:16px 22px;gap:5px;}
  .inc h3{font-size:clamp(18px,4.9vw,22px);}
  .inc .inc-bg{font-size:clamp(64px,16vw,84px);right:14px;bottom:-12px;}
  h2.sec{font-size:clamp(30px,8.6vw,40px);}
  .plan{padding:28px 24px;}
  .plan .price{font-size:40px;}
  .plan .price.req{font-size:31px;}
  .single .card-wide{padding:30px 24px;}
  /* аккордеон тарифов: цена уходит (она в карточках выше), тело — без левого отступа под номер */
  .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;}
  .faq-q summary{font-size:clamp(17px,4.8vw,21px);padding:16px 2px;}
  .faq-q .faq-a{padding-right:0;}
  .final h2{font-size:clamp(30px,10.2vw,44px);}
  .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;}
  .modal{padding:clamp(12px,5vh,40px) 14px calc(18px + var(--tg-safe-bottom, 0px))}
  .modal-box{padding:46px 20px 26px}
  .modal h3{font-size:22px}
  .pay{padding:18px 20px}
}
/* Стикер висел на absolute с отрицательным top и на узких/низких экранах
   уезжал за верхнюю кромку (замер: top = −33 на 280px, −41 на 320px, −37 в ландшафте).
   Там, где места над коробкой нет, сажаем его в поток — виден целиком */
@media (max-width:620px),(max-height:620px){
  .m-sticker{position:static;max-width:100%;margin:0 0 12px;font-size:12.5px;padding:10px 14px;
    transform:rotate(-1.5deg);box-shadow:0 10px 26px -14px rgba(237,126,47,.55)}
}
/* телефон в ландшафте: стикер съедал 80px из 390 и выдавливал форму за экран.
   Он повторяет то, что и так написано в модалке, поэтому на такой высоте убираем */
@media (max-height:480px){
  .m-sticker{display:none}
}
/* телефон в ландшафте: высоты 390px хватает ровно на коробку, воздух сверху убираем */
@media (max-height:620px){
  .modal{padding-top:12px;padding-bottom:calc(14px + var(--tg-safe-bottom, 0px))}
  .modal-box{padding:22px 20px 20px}
  .modal h3{font-size:21px}
  .modal .msub{font-size:15px;margin-bottom:16px}
  .pay{padding:14px 18px;margin-bottom:10px}
}
@media (max-width:400px){
  /* на 320px «Попасть на сопровождение» в одну строку не влезает: nowrap выносил кнопку за экран */
  .btn{white-space:normal;text-align:center;justify-content:center;}
  .btn-lg{padding:16px 24px;font-size:15.5px;}
  .btn-sm{padding:10px 16px;font-size:13px;}
}
@media (max-width:430px){
  .hero-title{font-size:clamp(26px,7.6vw,38px);}
}
/* узкие Android и раскладушки (Galaxy Fold — 280px): карточка тарифа требовала
   261px при доступных 236px и давала горизонтальный скролл */
@media (max-width:360px){
  .wrap{--gut:16px;}
  .plan{padding:24px 20px;}
  .plan .price{font-size:clamp(30px,9vw,38px);}
  .plan .price.req{font-size:clamp(24px,7.4vw,30px);}
  .plan li{font-size:14.5px;padding-left:22px;}
  .inc{padding:14px 18px;}
  .inc h3{font-size:17.5px;}
  .modal{padding:10px}
  .modal-box{padding:44px 16px 22px}
}
/* ---------- фиксы Никиты 26.07 (сняты с прода, не терять при деплое) ---------- */
@media (max-width:620px) and (max-height:700px){
  /* на невысоких экранах плавающая кнопка AI-консультанта (assistant/embed.js, fixed правый нижний угол)
     перекрывает CTA/подпись hero — резервируем под неё запас снизу */
  .hero-center{margin-bottom:96px;}
}

/* ============================================================
   Наведение — только для мыши.
   На тач-экране :hover срабатывает по тапу и ЗАЛИПАЕТ до тапа в другое место:
   карточка остаётся приподнятой, кнопка залитой, строка аккордеона сдвинутой.
   Поэтому всё, что двигает геометрию, живёт здесь, а цветовые :hover остались
   в своих блоках выше — они безвредны.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:translateY(0);}
  .btn-primary:hover{transform:translateY(-3px);}
  .btn-ghost:hover{transform:translateY(-3px);}
  .card-hov:hover::before{opacity:1;}
  .inc:hover{transform:translateY(-9px);}
  .plan:hover{transform:translateY(-6px);}
  .mxp-head:hover{padding-left:16px;}
  .faq-q summary:hover{padding-left:16px;}
  .pay:hover{transform:translateY(-2px)}
  .pay-main:hover{transform:translateY(-3px)}
}
/* синяя вспышка Android/iOS при тапе поверх собственных состояний выглядит как баг */
a,button,summary,.inc,.plan,.pay,.mxp-head{-webkit-tap-highlight-color:transparent}
/* тач-таргеты: логотип был 84×22, ссылки футера 81×26 — ниже минимума 24×24 (WCAG 2.2).
   Растим кликабельную зону паддингом, вид не меняется */
.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}
/* бургер был 36×35 — палец промахивается. Растим зону до 44×44 центрированием,
   сами полоски не двигаются */
.burger{min-width:44px;min-height:44px;align-items:center;justify-content:center;
  margin-right:-4px}

/* ══════════ Telegram WebApp адаптация (порт с рефералки, 28.07) ══════════
   Ссылку на сопровождение рассылают в Telegram, поэтому большинство откроет её
   во встроенном WebView. Там высота вьюпорта «дышит» при скролле (шапка Telegram
   сворачивается), и hero на 100svh дёргался; плюс системная полоса и панель
   приложения перекрывают верх и низ страницы. */
: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);
}
/* fixed-шапка не залезает под системную шапку Telegram / вырез устройства.
   Правило идёт последним в файле и перебивает padding мобильного блока */
header{padding-top:calc(var(--tg-safe-top) + var(--tg-content-top));}
@media (max-width:980px){
  header{padding-top:calc(10px + var(--tg-safe-top) + var(--tg-content-top));}
}
/* гасим pull-to-close / bounce на границах прокрутки.
   ТОЛЬКО html: у body стоит overflow-x, с этим правилом он сам становится
   скролл-контейнером и страница перестаёт листаться (грабли рефералки 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));}

/* ---------- Низкий экран: телефон в ландшафте ----------
   hero занимает ровно один экран (100svh / замороженная высота Telegram) и обрезает
   переполнение. При высоте окна ~330px это срезает кнопку и подпись под ней,
   доскроллить внутри hero нельзя. Ниже 520px высоты отпускаем в естественную высоту. */
@media (orientation:landscape) and (max-height:520px){
  .hero,.tg-app .hero{
    min-height:auto;height:auto;flex:0 0 auto;
    padding:74px 20px calc(44px + var(--tg-safe-bottom,0px));
  }
  .hero-title{font-size:clamp(26px,4.6vw,38px);}
  .hero-title .o{display:inline;}      /* в ландшафте ширины хватает — не рвём на две строки */
  .hero-cta{margin-top:18px;}
}