/* --- reset.css --- */
/* ============================================================
   Сброс и нормализация базовых стилей браузера.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{display:block; max-width:100%}

h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.08; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:break-word; margin:0}

p{margin:0}

a{color:inherit}

ul,ol{margin:0; padding:0; list-style:none}
[hidden]{display:none !important}

button,input,select,textarea{font:inherit; color:inherit}

:focus-visible{outline:3px solid var(--brand-ink); outline-offset:3px; border-radius:4px}

::selection{background:var(--yellow); color:var(--on-yellow)}

/* --- variables.css --- */
/* ============================================================
   CSS-переменные: цвета, шрифты, отступы, тени.
   Светлая палитра — базовая; тёмная переопределяет только значения.
   ============================================================ */

:root{
  color-scheme: light;
  --bg:#F7FAF9;
  --bg-sunk:#EBF2F0;
  --surface:#FFFFFF;
  --ink:#0F1F1D;
  --ink-2:#43534F;
  --ink-3:#5A6D69;
  --line:#DFE9E7;
  --line-strong:#C7D6D2;
  --brand:#20B2AA;
  --brand-deep:#17968F;
  --brand-ink:#0C6E68;
  --brand-tint:#E6F6F4;
  --on-brand:#04231F;
  --band:#0F1F1D;
  --on-band:#F7FAF9;
  --yellow:#FFC444;
  --yellow-soft:#FFEDC0;
  --on-yellow:#241A00;
  --ok:#0E7C55;
  --err:#D0342C;
  --shadow-1:0 1px 2px rgba(15,31,29,.05), 0 6px 16px -10px rgba(15,31,29,.18);
  --shadow-2:0 2px 6px rgba(15,31,29,.06), 0 22px 44px -22px rgba(15,31,29,.32);
  --shadow-brand:0 10px 24px -12px rgba(32,178,170,.65);
  --r-m:16px; --r-l:22px;
  --pad:clamp(20px, 5vw, 40px);
  --display:"Unbounded", "Golos Text", system-ui, sans-serif;
  --body:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --bg:#0D1413;
    --bg-sunk:#131C1B;
    --surface:#16201F;
    --ink:#EFF6F4;
    --ink-2:#B6C6C3;
    --ink-3:#869996;
    --line:#25322F;
    --line-strong:#374643;
    --brand:#20B2AA;
    --brand-deep:#3FD0C7;
    --brand-ink:#4FD8CE;
    --brand-tint:#0F2E2C;
    --on-brand:#04231F;
    --band:#1B2A28;
    --on-band:#EFF6F4;
    --yellow:#FFD062;
    --yellow-soft:#4A3A14;
    --on-yellow:#1A1200;
    --ok:#3ECF97;
    --err:#FF7A70;
    --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.7);
    --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.9);
    --shadow-brand:0 10px 24px -12px rgba(32,178,170,.45);
  }
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:#0D1413;
  --bg-sunk:#131C1B;
  --surface:#16201F;
  --ink:#EFF6F4;
  --ink-2:#B6C6C3;
  --ink-3:#869996;
  --line:#25322F;
  --line-strong:#374643;
  --brand:#20B2AA;
  --brand-deep:#3FD0C7;
  --brand-ink:#4FD8CE;
  --brand-tint:#0F2E2C;
  --on-brand:#04231F;
  --band:#1B2A28;
  --on-band:#EFF6F4;
  --yellow:#FFD062;
  --yellow-soft:#4A3A14;
  --on-yellow:#1A1200;
  --ok:#3ECF97;
  --err:#FF7A70;
  --shadow-1:0 1px 2px rgba(0,0,0,.5), 0 6px 16px -10px rgba(0,0,0,.7);
  --shadow-2:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.9);
  --shadow-brand:0 10px 24px -12px rgba(32,178,170,.45);
}

/* --- base.css --- */
/* ============================================================
   Типографика, контейнеры, утилиты, заголовки секций.
   ============================================================ */

.wrap{max-width:1200px; margin-inline:auto; padding-inline:var(--pad)}

.section{padding-block:clamp(64px, 9vw, 120px)}

.section--sunk{background:var(--bg-sunk); border-block:1px solid var(--line)}

.section--tight{padding-block:clamp(44px, 6vw, 76px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:18px;
}

.eyebrow::before{content:""; width:9px; height:9px; background:var(--yellow); border-radius:2px; flex:none}

.h-sec{font-size:clamp(1.75rem, 1.15rem + 2.6vw, 3.1rem)}

.lead{margin-top:18px; max-width:62ch; color:var(--ink-2); font-size:clamp(1rem,.96rem + .3vw,1.15rem)}

.sec-head{max-width:760px; margin-bottom:clamp(36px,5vw,60px)}

.mark{
  background:linear-gradient(transparent 62%, var(--yellow-soft) 62%);
  padding-inline:.06em;
}

.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}

.reveal.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .reveal{opacity:1; transform:none}
}

/* --- components.css --- */
/* ============================================================
   Переиспользуемые компоненты: кнопки, карточки, бейджи, формы.
   ============================================================ */

.btn{
  --btn-bg:var(--surface); --btn-fg:var(--ink); --btn-bd:var(--line-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 24px; border-radius:999px; border:1px solid var(--btn-bd);
  background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:15px; text-decoration:none; cursor:pointer;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, border-color .18s;
}

.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-1); border-color:var(--ink-3)}

.btn:active{transform:translateY(0)}

.btn--primary{--btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-bd:transparent; box-shadow:var(--shadow-brand)}

.btn--primary:hover{--btn-bg:var(--brand-deep); box-shadow:0 16px 30px -14px rgba(32,178,170,.75)}

.btn--lg{padding:17px 30px; font-size:16px}

.btn--block{width:100%}

/* Кнопка WhatsApp: заметная, но не спорит с главной кнопкой формы */
.btn--wa{
  --btn-bg:var(--brand-tint); --btn-fg:var(--brand-ink);
  --btn-bd:color-mix(in srgb, var(--brand) 35%, transparent);
  margin-top:22px;
}
.btn--wa:hover{--btn-bg:var(--brand); --btn-fg:var(--on-brand); --btn-bd:transparent; box-shadow:var(--shadow-brand)}
.wa-note{margin-top:10px; text-align:center; font-size:13px; color:var(--ink-3)}

.btn__arrow{transition:transform .18s cubic-bezier(.2,.7,.3,1)}

.btn:hover .btn__arrow{transform:translateX(4px)}

.badge{
  display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); box-shadow:var(--shadow-1);
}

.badge b{
  flex:none; white-space:nowrap;
  background:var(--yellow); color:var(--on-yellow); font-weight:700;
  padding:3px 9px; border-radius:999px; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase;
}

/* На узком экране полная фраза не помещалась в строку: переносился
   и текст, и сама пилюля. До 520px показываем короткий вариант. */
.badge__full{display:none}

.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:28px 26px 30px; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s, border-color .25s;
}

.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--yellow));
  transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.3,1);
}

.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-strong)}

.card:hover::after{transform:scaleX(1)}

.card__ico{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-ink); margin-bottom:20px;
}

.card h3{font-size:1.16rem; letter-spacing:-.015em}

.card p{margin-top:11px; color:var(--ink-2); font-size:15.5px; line-height:1.62}

.stat{
  border:1px solid color-mix(in srgb, var(--on-band) 20%, transparent);
  border-radius:var(--r-m); padding:22px 20px;
  background:color-mix(in srgb, var(--on-band) 6%, transparent);
}

.stat b{
  display:block; font-family:var(--display); font-weight:700; letter-spacing:-.03em;
  font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem); color:var(--yellow); font-variant-numeric:tabular-nums;
}

.stat span{display:block; margin-top:8px; font-size:14px; color:color-mix(in srgb, var(--on-band) 72%, transparent); line-height:1.45}

.app{
  display:flex; gap:15px; align-items:flex-start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m);
  padding:20px; transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}

.app:hover{transform:translateY(-4px); box-shadow:var(--shadow-1); border-color:var(--line-strong)}

.app__ico{
  width:40px; height:40px; border-radius:11px; flex:none; display:grid; place-items:center;
  background:var(--bg-sunk); border:1px solid var(--line); font-size:18px;
}

.app__ico svg{color:var(--brand-ink)}

.app h3{font-size:.99rem; font-family:var(--body); font-weight:600; line-height:1.4; letter-spacing:0}

.app small{display:block; margin-top:5px; color:var(--ink-3); font-size:13px}

.who__item{
  display:flex; align-items:center; gap:12px; padding:16px 18px;
  border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface);
  font-weight:500; font-size:15px; transition:border-color .2s, background .2s, transform .2s;
}

.who__item:hover{border-color:var(--brand); background:var(--brand-tint); transform:translateX(3px)}

.who__item svg{color:var(--brand-ink); flex:none}

.plan{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-l); padding:30px 28px 32px; display:flex; flex-direction:column;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s;
}

.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-1)}

.plan--top{
  border-color:transparent; box-shadow:var(--shadow-2);
  background:
    linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(150deg,var(--brand),var(--yellow)) border-box;
  border:2px solid transparent;
}

.plan__tag{
  position:absolute; top:-13px; left:28px; padding:5px 13px; border-radius:999px;
  background:var(--yellow); color:var(--on-yellow); font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}

.plan h3{font-size:1.2rem; line-height:1.16}
.plan__tier{
  display:inline-block; vertical-align:2px; margin-left:7px; padding:3px 9px;
  border-radius:999px; background:var(--brand-tint); color:var(--brand-ink);
  font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
}

.plan__for{margin-top:11px; color:var(--ink-3); font-size:13.5px; line-height:1.5}

.plan__price{display:flex; align-items:baseline; gap:7px; margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line)}

.plan__price b{font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-.03em; white-space:nowrap}

.plan__price span{color:var(--ink-3); font-size:14px}


.plan__specs{margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; flex:1}

.plan__specs li{display:flex; gap:10px; font-size:14px; color:var(--ink-2); line-height:1.4}

.plan__specs li svg{flex:none; margin-top:2px}
.plan__specs li.yes svg{color:var(--brand-ink)}
.plan__specs li.no{color:var(--ink-3)}
.plan__specs li.no svg{color:var(--line-strong)}
.plan__specs em{
  display:block; font-style:normal; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:2px;
}

.step{position:relative; padding-top:30px}

.step::before{
  counter-increment:step; content:"0" counter(step);
  font-family:var(--display); font-weight:700; font-size:clamp(2.6rem,2rem + 2vw,3.6rem);
  letter-spacing:-.04em; color:var(--line-strong); display:block; line-height:1;
}

.step__line{height:1px; background:var(--line); margin:20px 0 22px; position:relative}

.step__line::after{content:""; position:absolute; left:0; top:-3px; width:7px; height:7px; border-radius:50%; background:var(--brand)}

.step h3{font-size:1.22rem}

.step p{margin-top:12px; color:var(--ink-2); font-size:15.5px}

.review{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:28px 26px; display:flex; flex-direction:column; gap:18px;
}

.review blockquote{margin:0; font-size:16px; line-height:1.62; color:var(--ink); flex:1}

.review__who{display:flex; align-items:center; gap:13px; padding-top:18px; border-top:1px solid var(--line)}

.avatar{
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:var(--brand-tint); color:var(--brand-ink); font-weight:700; font-size:15px;
}

.review__who b{display:block; font-size:15px}

.review__who span{display:block; font-size:13.5px; color:var(--ink-3)}

.form{
  margin-top:28px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l);
  padding:clamp(24px,3vw,36px); box-shadow:var(--shadow-1);
}

.field{display:grid; gap:7px; margin-bottom:16px}

.field label{font-size:13.5px; font-weight:600; color:var(--ink-2)}

.field label span{color:var(--brand-ink)}

.field input,.field textarea{
  width:100%; padding:13px 15px; border-radius:12px; background:var(--bg);
  border:1px solid var(--line-strong); font-size:15.5px; transition:border-color .2s, box-shadow .2s, background .2s;
}

.field textarea{resize:vertical; min-height:92px}

.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand-ink); background:var(--surface);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent);
}

.err{font-size:12.5px; color:var(--err); font-weight:500; min-height:0; display:none}

.field.is-err input{border-color:var(--err); box-shadow:0 0 0 4px color-mix(in srgb, var(--err) 12%, transparent)}

.field.is-err .err{display:block}

/* Ловушка для ботов. Инлайновый style="display:none" из сниппета
   Web3Forms блокируется нашим CSP, поэтому прячем ещё и здесь. */
#lead-form [name="botcheck"]{display:none}

.check{display:flex; gap:11px; align-items:flex-start; margin:6px 0 20px; font-size:13.5px; color:var(--ink-2); line-height:1.5; cursor:pointer}

.check input{width:20px; height:20px; flex:none; accent-color:var(--brand-ink); margin:1px 0 0}

.check.is-err{color:var(--err)}

.form__done{
  display:none; text-align:center; padding:34px 10px;
}

.form__done.is-on{display:block}

.form__done .tick{
  width:62px; height:62px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--ok);
  animation:pop .45s cubic-bezier(.2,1.4,.4,1);
}

.form__done h3{font-size:1.35rem}

.form__done p{margin-top:12px; color:var(--ink-2)}

.form.is-sent .form__fields{display:none}

.socials{display:flex; gap:10px; margin-top:24px}

.socials a{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-2);
  transition:color .2s, border-color .2s, transform .2s, background .2s;
}

.socials a:hover{color:var(--on-brand); background:var(--brand); border-color:var(--brand); transform:translateY(-3px)}

.totop{
  position:fixed; right:14px; bottom:14px; z-index:70; width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-2);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s, color .2s;
}

.totop.is-on{opacity:1; visibility:visible; transform:none}

.totop:hover{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}

/* Плавающие кнопки связи. Слева внизу — правый угол занят кнопкой «наверх» */
.fab{
  position:fixed; left:14px; bottom:14px; z-index:70;
  display:flex; flex-direction:column-reverse; gap:10px;
  transition:opacity .2s, visibility .2s;
}

.fab__btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:#fff; box-shadow:var(--shadow-2);
  transition:transform .2s cubic-bezier(.2,.7,.3,1);
}

.fab__btn--wa{background:#25D366}

.fab__btn--ig{background:linear-gradient(45deg,#F9CE34 5%,#EE2A7B 55%,#6228D7 95%)}

.fab__btn:hover{transform:translateY(-3px)}

/* Подпись рядом с кнопкой: нужна только там, где есть курсор */
.fab__tip{
  position:absolute; left:calc(100% + 10px); top:50%;
  transform:translateY(-50%) translateX(-6px);
  padding:6px 11px; border-radius:9px; white-space:nowrap;
  background:var(--band); color:var(--on-band);
  font-size:13px; font-weight:500; line-height:1;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s, transform .18s, visibility .18s;
}

@media (hover:hover){
  .fab__btn:hover .fab__tip,
  .fab__btn:focus-visible .fab__tip{opacity:1; visibility:visible; transform:translateY(-50%)}
}

/* Пока открыто мобильное меню, кнопки не должны висеть поверх него */
body:has(.mobile-nav.is-open) .fab{opacity:0; visibility:hidden}


@keyframes pop{from{transform:scale(.4); opacity:0} to{transform:scale(1); opacity:1}}

/* Выбранный тариф — подсветка после клика по «Подключить» */
.plan.is-picked{box-shadow:var(--shadow-2), 0 0 0 2px var(--brand)}

/* Переключатель категорий тарифов (tablist) */
.switch{
  position:relative; display:flex; gap:4px; padding:5px;
  width:max-content; max-width:100%; overflow-x:auto; scrollbar-width:none;
  background:var(--surface); border:1px solid var(--line); border-radius:999px;
  box-shadow:var(--shadow-1); margin:0 auto clamp(26px,4vw,42px);
}
.switch::-webkit-scrollbar{display:none}
.switch [role="tab"]{
  position:relative; z-index:1; flex:none; border:0; background:none; cursor:pointer;
  padding:11px 18px; border-radius:999px; white-space:nowrap;
  font-weight:600; font-size:13.5px; color:var(--ink-2);
  transition:color .25s, background .25s;
}
.switch [role="tab"]:hover{color:var(--ink)}
/* Без JS активная вкладка красится сама */
.switch [role="tab"][aria-selected="true"]{background:var(--brand); color:var(--on-brand)}
/* С JS её подсвечивает бегунок */
.switch--js [role="tab"][aria-selected="true"]{background:transparent}
.switch__ind{
  position:absolute; z-index:0; left:0; top:5px; height:calc(100% - 10px); width:0;
  border-radius:999px; background:var(--brand); box-shadow:var(--shadow-brand);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), width .35s cubic-bezier(.2,.7,.3,1);
}
.switch__full{display:none}

/* --- sections.css --- */
/* ============================================================
   Стили секций: шапка, hero, тарифы, контакты, футер и т.д.
   ============================================================ */

.header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s, background .25s;
}

.header.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 24px -20px rgba(0,0,0,.5)}

.header__in{display:flex; align-items:center; gap:24px; height:72px}

.logo{display:flex; align-items:center; flex:none; text-decoration:none}

.logo img{height:26px; width:auto; display:block}

.nav{display:none; gap:4px; margin-left:auto}

.nav a{
  position:relative; padding:9px 13px; border-radius:999px; text-decoration:none;
  font-size:14.5px; font-weight:500; color:var(--ink-2); white-space:nowrap;
  transition:color .2s, background .2s;
}

.nav a:hover{color:var(--ink); background:var(--bg-sunk)}

.header__cta{display:none; flex:none}

.burger{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  width:44px; height:44px; margin-left:auto; flex:none;
  border:1px solid var(--line-strong); border-radius:12px; background:var(--surface); cursor:pointer;
  padding:0;
}

.burger span{display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .2s}

.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}

.burger[aria-expanded="true"] span:nth-child(2){opacity:0}

.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Меню в две колонки: списком в одну оно занимало три четверти
   экрана телефона, а пунктов всего шесть */
.mobile-nav{
  display:none; border-top:1px solid var(--line); background:var(--bg);
  padding:12px var(--pad) 16px;
}

.mobile-nav.is-open{display:block}

.mobile-nav__links{display:grid; grid-template-columns:1fr 1fr; gap:8px}

.mobile-nav__links a{
  display:block; padding:11px 13px; border-radius:12px;
  border:1px solid var(--line); background:var(--surface);
  font-size:14.5px; font-weight:500; line-height:1.25; color:var(--ink-2);
  text-decoration:none; transition:border-color .2s, color .2s;
}

.mobile-nav__links a:active{border-color:var(--brand); color:var(--ink)}

.mobile-nav .btn{margin-top:10px}

.hero{position:relative; overflow:hidden; padding-block:clamp(48px,7vw,86px) clamp(60px,8vw,110px)}

.hero__glow{position:absolute; inset:-20% -10% auto -10%; height:130%; z-index:0; pointer-events:none}

.hero__glow i{
  position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.5;
  animation:drift 18s ease-in-out infinite alternate;
}

.hero__glow i:nth-child(1){width:46vw; height:46vw; left:-8vw; top:2vw; background:radial-gradient(circle, rgba(32,178,170,.34), transparent 66%)}

.hero__glow i:nth-child(2){width:40vw; height:40vw; right:-4vw; top:-6vw; background:radial-gradient(circle, rgba(255,197,49,.32), transparent 66%); animation-delay:-6s}

.hero__glow i:nth-child(3){width:34vw; height:34vw; left:38vw; top:24vw; background:radial-gradient(circle, rgba(12,110,104,.18), transparent 66%); animation-delay:-11s}

.hero__in{position:relative; z-index:1; display:grid; gap:clamp(40px,5vw,64px); grid-template-columns:minmax(0,1fr); align-items:center}

.hero h1{
  margin-top:24px;
  font-size:clamp(1.85rem, 1.1rem + 3.9vw, 4.05rem);
  font-weight:700; letter-spacing:-.035em;
}

.hero h1 .accent{color:var(--brand-ink)}

.hero__sub{margin-top:22px; font-size:clamp(1.05rem,1rem + .45vw,1.28rem); color:var(--ink-2); max-width:30ch}

.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}

.hero__facts{display:flex; flex-wrap:wrap; gap:8px 28px; margin-top:38px; padding-top:26px; border-top:1px solid var(--line)}

.hero__fact{display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-2)}

.hero__fact svg{color:var(--brand-ink); flex:none}

/* Иллюстрация первого экрана */
.hero__shot{position:relative; min-width:0}

.hero__shot img{
  display:block; width:100%; height:auto;
  transition:translate .5s cubic-bezier(.2,.7,.3,1);
  will-change:translate;
}

.grid-3{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}

.trust{
  background:var(--band); color:var(--on-band); border-radius:clamp(20px,3vw,30px);
  padding:clamp(34px,5vw,58px); box-shadow:var(--shadow-2);
}

.trust__grid{display:grid; gap:clamp(30px,4vw,54px); grid-template-columns:minmax(0,1fr); align-items:center}

.trust h2{font-size:clamp(1.6rem,1.15rem + 2vw,2.5rem)}

.trust p{margin-top:18px; color:color-mix(in srgb, var(--on-band) 74%, transparent); max-width:46ch}

.stats{display:grid; grid-template-columns:minmax(0,1fr); gap:14px}

.trust__tags{display:flex; flex-wrap:wrap; gap:9px; margin-top:26px}

.trust__tags li{
  padding:8px 15px; border-radius:999px; font-size:13.5px; font-weight:500;
  border:1px solid color-mix(in srgb, var(--on-band) 26%, transparent);
  color:color-mix(in srgb, var(--on-band) 88%, transparent);
}

/* Флекс, а не грид: восемь карточек в три колонки оставляли пустую
   ячейку в последнем ряду. Здесь карточки последнего ряда растягиваются
   и занимают всю ширину — дыры не остаётся ни при какой ширине экрана. */
.apps{display:flex; flex-wrap:wrap; gap:16px}
.apps > *{flex:1 1 272px}

.apps__note{margin-top:26px; font-size:14.5px; color:var(--ink-3)}

/* Как и в сетке программ: карточки последнего ряда растягиваются,
   поэтому нечётное число плиток не оставляет дыры */
.who__grid{display:flex; flex-wrap:wrap; gap:12px}
.who__grid > *{flex:1 1 200px}

/* Телефон: тарифы и отзывы листаются вбок, а не тянутся вниз длинной
   лентой. Карточка занимает 86% ширины — край следующей видно, и сразу
   понятно, что список продолжается. Сетки для широких экранов — в
   responsive.css. */
.slider{
  display:flex; gap:14px; align-items:stretch;
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; scrollbar-width:none;
  padding:22px var(--pad) 6px;
  margin-inline:calc(var(--pad) * -1);
}
.slider::-webkit-scrollbar{display:none}
.slider > *{flex:0 0 86%; scroll-snap-align:center}

.slider__count{
  margin-top:14px; text-align:center; font-size:13.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}

.plans__panel{animation:panelIn .4s cubic-bezier(.2,.7,.3,1)}
@keyframes panelIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.plans__note{
  margin-top:26px; padding:18px 22px; border-radius:var(--r-m);
  background:var(--brand-tint); color:var(--ink-2); font-size:15px;
  border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
}

.steps{display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); counter-reset:step}



.cta{
  position:relative; overflow:hidden; border-radius:clamp(20px,3vw,30px);
  background:linear-gradient(120deg,#06514C 0%,#0C6F69 52%,#17968F 100%);
  color:#fff; padding:clamp(36px,5vw,62px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px;
}

.cta::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(620px 320px at 88% 12%, rgba(32,178,170,.85), transparent 68%),
              radial-gradient(500px 260px at 78% 30%, rgba(255,255,255,.22), transparent 70%);
  pointer-events:none;
}

.cta > *{position:relative}

.cta h2{font-size:clamp(1.55rem,1.15rem + 1.8vw,2.4rem); max-width:20ch; color:#fff}

.cta p{margin-top:14px; max-width:44ch; color:rgba(255,255,255,.9); font-size:16px}

.cta .btn{--btn-bg:#fff; --btn-fg:#1A0A0C; --btn-bd:transparent; box-shadow:0 14px 30px -14px rgba(0,0,0,.5)}

.cta .btn:hover{--btn-bg:#fff}

.contact{display:grid; gap:clamp(30px,4vw,52px); grid-template-columns:minmax(0,1fr); align-items:start}

.contacts__list{display:flex; flex-direction:column; gap:2px; margin-top:26px}

.contacts__item{display:flex; gap:15px; align-items:flex-start; padding:16px 0; border-bottom:1px solid var(--line)}

.contacts__item svg{color:var(--brand-ink); flex:none; margin-top:3px}

.contacts__val{font-weight:600}

.contacts__item small{display:block; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:4px}

.contacts__item a{text-decoration:none; font-weight:600; border-bottom:1px solid transparent; transition:border-color .2s, color .2s}

.contacts__item a:hover{color:var(--brand-ink); border-bottom-color:var(--brand-ink)}

/* Переход на основной сайт компании: спокойный блок,
   чтобы не спорить с яркой полосой «Попробуйте бесплатно» выше */
.site-link{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:clamp(20px,3vw,32px); padding:clamp(26px,4vw,42px);
  background:var(--surface); border:1px solid var(--line);
  border-radius:clamp(18px,3vw,26px); box-shadow:var(--shadow-1);
}

.site-link h2{font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem)}

.site-link p{margin-top:12px; color:var(--ink-2); font-size:15.5px; max-width:54ch}

.site-link__btn{flex:none}

.footer{background:var(--band); color:color-mix(in srgb, var(--on-band) 78%, transparent); padding-block:clamp(44px,5vw,64px) 30px}

.footer a{color:inherit; text-decoration:none; transition:color .2s}

.footer a:hover{color:var(--yellow)}

.footer__top{display:grid; gap:34px; grid-template-columns:minmax(0,1fr); padding-bottom:34px; border-bottom:1px solid color-mix(in srgb, var(--on-band) 18%, transparent)}

.footer__about{margin-top:16px; font-size:14.5px; max-width:36ch; line-height:1.6}

.footer h4{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:color-mix(in srgb, var(--on-band) 55%, transparent); font-family:var(--body); font-weight:600; margin-bottom:14px}

.footer ul{display:flex; flex-direction:column; gap:10px; font-size:14.5px}

.footer__socials{display:flex; gap:14px; margin-top:4px}

.footer__bottom{display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center; padding-top:26px; font-size:13.5px; color:color-mix(in srgb, var(--on-band) 55%, transparent)}

.partner{margin-top:20px; display:inline-flex; align-items:center; gap:9px; color:var(--on-band)}

.partner i{width:7px; height:7px; border-radius:50%; background:var(--yellow); display:block}

@keyframes drift{from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(3vw,-3vw,0) scale(1.12)}}


.who{display:grid; gap:clamp(32px,4vw,56px); grid-template-columns:minmax(0,1fr); align-items:start}

/* --- responsive.css --- */
/* ============================================================
   Медиазапросы (mobile-first)

   Базовые стили в остальных файлах описывают мобильную версию.
   Здесь — только расширения для более широких экранов,
   от меньшей контрольной точки к большей.

   421px  — счётчики в две колонки
   461px  — футер в две колонки
   521px  — полная подпись в бейдже
   601px  — тарифы и отзывы сеткой вместо ленты, крупнее кнопка «наверх»
   701px  — полные подписи вкладок в переключателе тарифов
   761px  — футер в три колонки
   881px  — блок доверия и «Для кого» в две колонки
   901px  — контакты и форма рядом; приподнятый тариф «Оптимальный»
   961px  — hero в две колонки
   1041px — полное меню в шапке вместо бургера
   ============================================================ */

/* --- 421px: счётчики блока доверия 2×2 ---------------------- */
@media (min-width:421px){
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 461px: футер в две колонки ----------------------------- */
@media (min-width:461px){
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* --- 521px: в бейдже помещается полная подпись ---------------- */
@media (min-width:521px){
  .badge__full{display:inline}
  .badge__short{display:none}
}

/* --- 601px: крупнее кнопка «наверх» ------------------------- */
@media (min-width:601px){
  .totop{right:22px; bottom:22px; width:50px; height:50px}
  .fab{left:22px; bottom:22px}
  .fab__btn{width:50px; height:50px}
}

/* --- 601px: ленты превращаются в сетки --------------------- */
@media (min-width:601px){
  .slider{
    display:grid; overflow:visible; scroll-snap-type:none;
    padding:0; margin-inline:0;
  }
  .slider > *{flex:none}
  .slider__count{display:none}

  .plans{gap:20px; grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}

  /* Четыре отзыва: по три в ряд четвёртый висел бы один, поэтому 2×2 */
  .reviews{gap:18px; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr))}

  /* Выравнивание названия, цены, списка и кнопки по всем карточкам ряда.
     Работает только на гриде, поэтому живёт здесь, а не в базовых стилях. */
  @supports (grid-template-rows: subgrid){
    .plan{display:grid; grid-template-rows:subgrid; grid-row:span 5; row-gap:0; align-content:start}
  }
}

/* --- 701px: полные подписи вкладок в переключателе ---------- */
@media (min-width:701px){
  .switch [role="tab"]{padding:12px 22px; font-size:14.5px}
  .switch__full{display:inline}
  .switch__short{display:none}
}

/* --- 761px: футер в три колонки ----------------------------- */
@media (min-width:761px){
  .footer__top{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}
}

/* --- 881px: две колонки в блоке доверия и «Для кого» -------- */
@media (min-width:881px){
  .trust__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
  .who{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
}

/* --- 901px: форма и контакты рядом, акцент на тарифе -------- */
@media (min-width:901px){
  .contact{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .plan--top{transform:translateY(-14px)}
  .plan--top:hover{transform:translateY(-19px)}
}

/* --- 961px: hero в две колонки ------------------------------ */
@media (min-width:961px){
  .hero__in{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr)}

  /* У иллюстрации широкие прозрачные поля, поэтому в колонке она
     выглядит мелкой. Даём ей выйти за края — секция всё равно
     обрезает лишнее по overflow:hidden. */
  .hero__shot img{width:118%; max-width:none; margin-inline:-9%}
}

/* --- 1041px: полное меню вместо бургера --------------------- */
@media (min-width:1041px){
  .nav{display:flex}
  .header__cta{display:inline-flex}
  .burger{display:none}
  .mobile-nav,.mobile-nav.is-open{display:none}
}