/* ============================================================
   Стили секций: шапка, 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}