/* ============================================================
   ALISAWIFI.RU — дизайн-система лендинга
   Светлая тема · индиго · Unbounded (заголовки) + Onest (текст)
   ============================================================ */

:root{
  /* Бренд */
  --indigo-800:#2C1F92;
  --indigo-700:#3A2BB8;
  --indigo-600:#4A38DC;
  --indigo-500:#5B4BE8;
  --indigo-400:#7C6CF5;
  --indigo-300:#A79CFA;
  --indigo-100:#E6E4FD;
  --indigo-50:#F1F0FE;
  --magenta:#C86BD6;

  /* Нейтральные */
  --bg:#F7F8FB;
  --surface:#FFFFFF;
  --ink:#0B0B12;
  --ink-2:#2B2E3D;
  --muted:#6B7086;
  --muted-2:#9AA0B4;
  --border:#E8EAF2;
  --border-2:#F0F1F7;

  /* Пастель */
  --mint:#E7F6EE;      --mint-fg:#1E7A54;
  --pink:#FCE9F1;      --pink-fg:#B03A72;
  --yellow:#FDF3D6;    --yellow-fg:#8A6A12;
  --blue:#E4F0FB;      --blue-fg:#1F5E96;
  --peach:#FCEDE3;     --peach-fg:#A85B2C;
  --lilac:#EFEBFE;     --lilac-fg:#5A45C9;

  /* Форма */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-pill:999px;

  --shadow-sm:0 1px 2px rgba(16,18,40,.04), 0 4px 14px rgba(16,18,40,.04);
  --shadow-md:0 2px 6px rgba(16,18,40,.05), 0 16px 40px rgba(16,18,40,.07);
  --shadow-lg:0 8px 24px rgba(38,26,120,.10), 0 32px 80px rgba(38,26,120,.12);
  --shadow-indigo:0 10px 30px rgba(74,56,220,.28);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --container:1180px;

  --font-display:'Unbounded','Onest',system-ui,sans-serif;
  --font-body:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}

body{
  margin:0; background:var(--bg); color:var(--ink);
  /* Страница занимает окно целиком: иначе на узком экране фон заканчивается
     вместе с содержимым, и под подвалом остаётся полоса другого цвета —
     выглядит как недогрузившаяся страница. */
  min-height:100dvh;
  font-family:var(--font-body); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* `clip`, а не `hidden`: оба не дают уехать вбок, но `hidden` вдобавок
     делает страницу контейнером прокрутки. Тогда анимации, привязанные к
     прокрутке, начинают считаться по нему — а он сам не прокручивается, и
     они застывают. `clip` просто обрезает. */
  overflow-x:clip;
}

h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1.14}
p{margin:0}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
b,strong{font-weight:600}

.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px}
.container--narrow{max-width:820px}

/* сноска-звёздочка */
.sup{
  display:inline-block; margin-left:2px; vertical-align:super;
  font-family:var(--font-body); font-size:.45em; font-weight:700;
  color:var(--indigo-500); transition:opacity .2s;
}
.sup:hover{opacity:.6}
.sup--light{color:rgba(255,255,255,.7)}

/* ============================================================
   ФОН
   ============================================================ */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none}
.aurora__blob{position:absolute; border-radius:50%; filter:blur(110px); opacity:.5}
.aurora__blob--indigo{
  width:720px; height:720px; top:-280px; left:50%; margin-left:-500px;
  background:radial-gradient(circle,#8E7CFF 0%,rgba(142,124,255,0) 70%);
  animation:float1 22s ease-in-out infinite;
}
.aurora__blob--violet{
  width:620px; height:620px; top:-160px; right:-160px;
  background:radial-gradient(circle,#F4B8E4 0%,rgba(244,184,228,0) 70%);
  opacity:.42; animation:float2 26s ease-in-out infinite;
}
.aurora__blob--mint{
  width:560px; height:560px; top:240px; left:-220px;
  background:radial-gradient(circle,#9BE7CF 0%,rgba(155,231,207,0) 70%);
  opacity:.36; animation:float3 30s ease-in-out infinite;
}
.aurora__grid{
  position:absolute; inset:0;
  background-image:linear-gradient(rgba(11,11,18,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(11,11,18,.035) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 55% at 50% 0%,#000 30%,transparent 78%);
}
@keyframes float1{50%{transform:translate3d(-40px,60px,0) scale(1.08)}}
@keyframes float2{50%{transform:translate3d(-70px,40px,0) scale(1.12)}}
@keyframes float3{50%{transform:translate3d(60px,-40px,0) scale(1.06)}}

/* ============================================================
   КНОПКИ
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:48px; padding:0 22px;
  border:1px solid transparent; border-radius:var(--r-pill);
  font-family:var(--font-body); font-size:15px; font-weight:600; letter-spacing:-.01em;
  cursor:pointer; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--lg{height:58px; padding:0 30px; font-size:16.5px}
.btn--block{width:100%}

.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,var(--indigo-500) 0%,var(--indigo-600) 55%,var(--indigo-700) 100%);
  box-shadow:var(--shadow-indigo);
}
.btn--primary:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(74,56,220,.36)}
.btn__arrow{width:20px; height:20px; transition:transform .3s var(--ease-out)}
.btn--primary:hover .btn__arrow{transform:translateX(4px)}

.btn--soft{background:var(--surface); color:var(--ink); border-color:var(--border); box-shadow:var(--shadow-sm)}
.btn--soft:hover{transform:translateY(-2px); border-color:var(--indigo-300); box-shadow:var(--shadow-md)}

.btn--ghost{background:transparent; color:var(--ink-2)}
.btn--ghost:hover{background:rgba(11,11,18,.05)}

.btn--white{background:#fff; color:var(--indigo-700); box-shadow:0 10px 30px rgba(0,0,0,.16)}
.btn--white:hover{transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.22)}

.btn--outline-light{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.35); backdrop-filter:blur(8px)}
.btn--outline-light:hover{background:rgba(255,255,255,.2); transform:translateY(-2px)}

/* ============================================================
   ШАПКА
   ============================================================ */
.header{position:sticky; top:0; z-index:60; padding:14px 24px}
.header__bar{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; gap:20px;
  height:66px; padding:0 12px 0 18px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(232,234,242,.9); border-radius:var(--r-pill);
  box-shadow:0 2px 10px rgba(16,18,40,.05);
  transition:box-shadow .3s var(--ease), background-color .3s var(--ease);
}
.header.is-scrolled .header__bar{box-shadow:0 10px 30px rgba(16,18,40,.10); background:rgba(255,255,255,.92)}

.logo{display:inline-flex; align-items:center; gap:10px}
.logo__mark{width:28px; height:23px; display:block; transition:transform .4s var(--ease-out)}
.logo__mark svg{width:100%; height:100%; display:block}
.logo:hover .logo__mark{transform:translateY(-2px) rotate(-4deg)}
/* Начертание 700, а не 800: ради одного слова в шапке страница тянула два
   файла шрифта по 50 КБ. На шестнадцати пикселях разницы не видно. */
.logo__text{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.04em}
.logo__text-accent{
  background:linear-gradient(120deg,var(--indigo-400),var(--indigo-600));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav{display:flex; align-items:center; gap:2px; margin-left:6px}
.nav a{
  padding:8px 13px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s var(--ease), background-color .2s var(--ease);
}
.nav a:hover{color:var(--ink); background:rgba(91,75,232,.07)}

.header__actions{display:flex; align-items:center; gap:8px; margin-left:auto}

.burger{display:none; width:42px; height:42px; margin-left:auto; border:0; background:transparent; cursor:pointer; position:relative}
.burger span{position:absolute; left:11px; width:20px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease)}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:24px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.mobile-menu{
  display:none; flex-direction:column; gap:4px;
  max-width:var(--container); margin:10px auto 0; padding:14px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-md);
}
.mobile-menu a{padding:12px 14px; border-radius:var(--r-sm); font-weight:600; color:var(--ink-2)}
.mobile-menu a:hover{background:var(--indigo-50)}
.mobile-menu .btn{margin-top:6px; color:#fff}
.mobile-menu.is-open{display:flex}

/* ============================================================
   ГЕРОЙ
   ============================================================ */
.hero{padding:52px 0 40px}
.hero__grid{display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center}

.pill{
  display:inline-flex; align-items:center; gap:9px;
  height:34px; padding:0 15px 0 12px; margin-bottom:26px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:13.5px; font-weight:500; color:var(--ink-2); box-shadow:var(--shadow-sm);
}
.pill__dot{
  width:7px; height:7px; border-radius:50%; background:#20B573;
  box-shadow:0 0 0 3px rgba(32,181,115,.18); animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(32,181,115,.06)}}

.hero__title{font-size:clamp(30px,3.8vw,48px); letter-spacing:-.05em; line-height:1.12}
.nowrap{white-space:nowrap}
/* Фирменное переливание ALISA: индиго → фуксия → зелёный → бирюза → индиго.
   lab() даёт чистый переход без грязи в середине; hex-строка выше — запасная
   для браузеров, которые lab() ещё не понимают. */
.grad{
  background:linear-gradient(120deg,#6c71fe,#df59d7,#00c782,#00a5ad,#6c71fe) 0 0/300% 300%;
  background:linear-gradient(120deg,
      lab(53.1443% 29.2277 -72.2812),
      lab(59.5416% 64.1665 -39.6588),
      lab(70.9129% -57.0592 22.3716),
      lab(61.2766% -61.6121 -25.1254),
      lab(53.1443% 29.2277 -72.2812)) 0 0/300% 300%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:gradient-flow 14s ease infinite;
}
@keyframes gradient-flow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.hero__sub{margin-top:22px; max-width:540px; font-size:17px; color:var(--muted); line-height:1.62}
.hero__sub b{color:var(--ink-2); font-weight:600}

.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}

.hero__facts{display:flex; gap:32px; margin-top:36px; padding-top:26px; border-top:1px solid var(--border)}
.hero__facts li{display:flex; flex-direction:column; gap:2px}
.hero__facts b{font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.04em}
.hero__facts span{font-size:13.5px; color:var(--muted)}

/* ---------- Сцена с роутером ---------- */
.hero__stage{position:relative}
.waves{position:absolute; left:50%; top:-30px; width:520px; height:520px; margin-left:-260px; pointer-events:none}
.waves i{
  position:absolute; inset:0; margin:auto; border-radius:50%;
  border:1px solid rgba(91,75,232,.18);
  animation:ripple 4.6s var(--ease-out) infinite;
}
.waves i:nth-child(2){animation-delay:1.5s}
.waves i:nth-child(3){animation-delay:3s}
@keyframes ripple{
  0%{width:180px; height:180px; opacity:.55}
  100%{width:520px; height:520px; opacity:0}
}

.device{position:relative}
.device__glow{
  position:absolute; inset:-8% -6% 6%; border-radius:50%;
  background:radial-gradient(60% 60% at 50% 45%,rgba(124,108,245,.32),rgba(124,108,245,0) 70%);
  filter:blur(30px); transition:background .6s var(--ease);
}
.device[data-mode="adult"] .device__glow{
  background:radial-gradient(60% 60% at 50% 45%,rgba(200,107,214,.3),rgba(124,108,245,0) 70%);
}

.device__panel{
  position:relative; padding:22px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.9); border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
}
.device__base{height:16px; width:78%; margin:0 auto; filter:blur(8px); border-radius:50%;
  background:linear-gradient(180deg,rgba(11,11,18,.10),rgba(11,11,18,0))}

.device__head{display:flex; align-items:center; gap:12px; padding:2px 4px 18px}
.device__wave{width:26px; height:21px; color:var(--indigo-500); transition:color .5s var(--ease)}
.device__wave svg{width:100%; height:100%; display:block}
.device[data-mode="adult"] .device__wave{color:var(--magenta)}
.device__head-text{display:flex; flex-direction:column; line-height:1.25}
.device__name{font-size:15px; font-weight:600; letter-spacing:-.02em}
.device__ssid{font-size:12.5px; color:var(--muted-2); font-variant-numeric:tabular-nums}
.device__status{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  height:28px; padding:0 12px; border-radius:var(--r-pill);
  background:var(--blue); color:var(--blue-fg); font-size:12.5px; font-weight:600;
  transition:background .5s var(--ease), color .5s var(--ease);
}
.device__status i{width:6px; height:6px; border-radius:50%; background:currentColor; animation:blink 2s infinite}
@keyframes blink{50%{opacity:.3}}

/* Переключатель */
.switcher{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px;
  background:#F1F2F7; border-radius:var(--r-pill)}
.switcher__thumb{
  position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:#fff; border-radius:var(--r-pill); box-shadow:0 2px 8px rgba(16,18,40,.12);
  transition:transform .5s var(--ease-out), background .5s var(--ease);
}
.switcher.is-adult .switcher__thumb{
  transform:translateX(calc(100% + 4px));
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700));
}
.switcher__btn{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; border:0; background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:14.5px; font-weight:600; letter-spacing:-.01em;
  color:var(--muted); border-radius:var(--r-pill); transition:color .35s var(--ease);
}
.switcher__btn svg{width:18px; height:18px}
.switcher__btn.is-active{color:var(--ink)}
.switcher.is-adult .switcher__btn.is-active{color:#fff}

/* Плитки */
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:16px}
.tile{
  position:relative; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); background:#F4F5F9;
  transition:transform .5s var(--ease-out), background .5s var(--ease), box-shadow .5s var(--ease);
}
.tile__icon{width:36px; height:36px; display:block;
  transition:transform .5s var(--ease-out), filter .5s var(--ease)}
.brand{width:100%; height:100%; display:block; object-fit:contain}
.tile__lock{
  position:absolute; right:7px; bottom:7px; width:16px; height:16px; color:var(--muted-2);
  transition:opacity .35s var(--ease), transform .45s var(--ease-out);
}
.tile__lock svg{width:100%; height:100%; display:block}
.tile.is-locked{background:#F1F2F6}
.tile.is-locked .tile__icon{filter:grayscale(1) opacity(.3); transform:scale(.94)}
.tile.is-open{background:var(--tile-bg,#fff); box-shadow:0 6px 18px rgba(16,18,40,.08)}
.tile.is-open .tile__icon{filter:none; transform:scale(1)}
.tile.is-open .tile__lock{opacity:0; transform:scale(.5)}
.tile.is-open.just-opened{animation:pop .55s var(--ease-out)}
@keyframes pop{0%{transform:scale(.9)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.tile.is-always{background:#fff; box-shadow:0 4px 14px rgba(16,18,40,.06)}
.tile.is-always .tile__lock{display:none}

/* Метрика */
.device__meter{margin-top:18px; padding-top:16px; border-top:1px solid var(--border-2)}
.meter{display:flex; align-items:center; gap:12px}
.meter__label{font-size:13px; color:var(--muted); min-width:62px}
.meter__track{flex:1; height:8px; background:#EEF0F6; border-radius:var(--r-pill); overflow:hidden}
.meter__fill{display:block; height:100%; width:34%; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--indigo-400),var(--indigo-600));
  transition:width .9s var(--ease-out), background .6s var(--ease)}
.device[data-mode="adult"] .meter__fill{background:linear-gradient(90deg,var(--indigo-500),var(--magenta))}
.meter__value{font-size:13px; font-weight:600; min-width:92px; text-align:right; font-variant-numeric:tabular-nums}
.device__hint{margin-top:10px; font-size:13px; color:var(--muted); min-height:36px}

.stage__note{margin-top:22px; font-size:13.5px; color:var(--muted); line-height:1.5}
.stage__note-key{display:inline-block; margin-right:6px; padding:2px 9px;
  background:var(--indigo-50); color:var(--indigo-600); border-radius:var(--r-pill);
  font-size:12px; font-weight:700}

/* ============================================================
   ДВА ГЛАВНЫХ ФАКТА
   ============================================================ */
.section--tight{padding:56px 0 28px}
.duo{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.duo__card{position:relative; display:flex; flex-direction:column; padding:32px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl);
  box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .45s var(--ease)}
.duo__card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--indigo-100)}
.duo__num{display:inline-block; margin-bottom:14px; font-family:var(--font-display); font-size:12.5px;
  font-weight:700; letter-spacing:.08em; color:var(--indigo-500)}
.duo__title{font-size:clamp(20px,2.1vw,25px); letter-spacing:-.045em; line-height:1.16}
.duo__text{margin-top:14px; font-size:15.5px; color:var(--muted); line-height:1.6}
.duo__text b{color:var(--ink-2); font-weight:600}

/* сцена: домашняя сеть и устройства */
.homescene{margin-top:24px}
.homescene__svg{width:100%; height:auto; display:block}

.hs-home__name{font-family:var(--font-display); font-size:17px; font-weight:700; fill:#fff; letter-spacing:-.03em}
.hs-home__sub{font-family:var(--font-body); font-size:13px; fill:rgba(255,255,255,.72)}
.hs-home{animation:hsBob 6s ease-in-out infinite}
@keyframes hsBob{50%{transform:translateY(-4px)}}
.hs-home__wifi{transform-origin:129px 128px}

.hs-serv__title{font-family:var(--font-body); font-size:13px; fill:var(--muted); font-weight:500}
.hs-serv__note{font-family:var(--font-body); font-size:12px; fill:var(--muted-2)}
.hs-serv__icons image{opacity:.35; transition:opacity .5s var(--ease)}
.homescene.is-live .hs-serv__icons image{opacity:1}

/* провода */
.hs-wire{fill:none; stroke:#DFE2EC; stroke-width:2.5; stroke-linecap:round;
  stroke-dasharray:400; stroke-dashoffset:400; transition:stroke-dashoffset .7s var(--ease-out), stroke .5s var(--ease)}
.hs-wire.is-on{stroke-dashoffset:0; stroke:#7C6CF5}

/* карточки устройств */
.hs-dev__card{fill:#fff; stroke:var(--border); stroke-width:1.5; transition:stroke .5s var(--ease)}
.hs-dev.is-on .hs-dev__card{stroke:#CDE9DA}
.hs-dev__glyph{color:#AEB3C1; transition:color .5s var(--ease)}
.hs-dev.is-on .hs-dev__glyph{color:var(--indigo-600)}
.hs-dev__name{font-family:var(--font-display); font-size:14.5px; font-weight:700; fill:var(--ink); letter-spacing:-.035em}
.hs-dev__sub{font-family:var(--font-body); font-size:12.5px; fill:var(--muted)}
.hs-dev__ok{opacity:0; transition:opacity .45s var(--ease), transform .5s var(--ease-out); transform:translateX(8px)}
.hs-dev.is-on .hs-dev__ok{opacity:1; transform:none}
.hs-dev__ok circle{fill:#E7F6EE}


/* установщик */
.installer{margin-top:24px; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--shadow-sm); background:#fff}
.installer__bar{display:flex; align-items:center; gap:10px; padding:11px 14px; background:#F4F5F9;
  border-bottom:1px solid var(--border)}
.installer__dots{display:flex; gap:5px}
.installer__dots i{width:9px; height:9px; border-radius:50%; background:#D8DBE6}
.installer__name{font-size:12.5px; color:var(--muted); font-weight:500}
.installer__body{padding:18px}
.installer__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0}
.installer__label{font-size:13.5px; color:var(--muted)}
.installer__value{font-size:13.5px; font-weight:600; letter-spacing:-.01em}
.installer__btn{width:100%; height:46px; margin-top:12px; border:0; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700)); color:#fff; cursor:pointer;
  font-family:var(--font-body); font-size:15px; font-weight:600; box-shadow:var(--shadow-indigo);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .4s var(--ease)}
.installer__btn:hover{transform:translateY(-2px)}
.installer__btn.is-busy{background:#E9EAF2; color:var(--muted); box-shadow:none; cursor:default; transform:none}
.installer__btn.is-done{background:var(--mint); color:var(--mint-fg); box-shadow:none; cursor:default; transform:none}
.installer__progress{height:6px; margin-top:14px; border-radius:var(--r-pill); background:#EEF0F6; overflow:hidden}
.installer__progress i{display:block; height:100%; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--indigo-400),var(--indigo-600)); transition:width .4s linear}
.installer__log{margin-top:10px; font-size:12.5px; color:var(--muted); min-height:32px; line-height:1.45}

.platforms{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.platform{display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border:1px solid var(--border); border-radius:var(--r-pill); background:#fff;
  font-size:13.5px; font-weight:600; color:var(--ink-2)}
.platform svg{width:16px; height:16px; color:var(--muted)}

/* ============================================================
   БЕГУЩАЯ СТРОКА
   ============================================================ */
.marquee-wrap{padding:26px 0 10px}
.marquee{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__row{display:flex; gap:14px; width:max-content; animation:scrollX 40s linear infinite}
.marquee:hover .marquee__row{animation-play-state:paused}
@keyframes scrollX{to{transform:translateX(-50%)}}
.chip{display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  font-size:14px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.chip i{width:5px; height:5px; border-radius:50%; background:var(--indigo-400)}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section{padding:88px 0}
.section--tint{background:linear-gradient(180deg,rgba(241,240,254,.6),rgba(247,248,251,0))}
.section--dark{
  position:relative; margin:0 0 0; padding:96px 0;
  background:radial-gradient(120% 100% at 20% 0%,#3A2BB8 0%,#241873 55%,#160F4C 100%);
  color:#fff; overflow:hidden;
}
.section--dark::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(50% 40% at 80% 100%,rgba(200,107,214,.35),transparent 70%);
}
.section__head{max-width:680px; margin:0 auto 46px; text-align:center}
.section__head--light .section__title{color:#fff}
.section__head--light .section__lead{color:rgba(255,255,255,.72)}
.eyebrow{display:inline-block; margin-bottom:14px; padding:5px 13px;
  background:var(--indigo-50); color:var(--indigo-600); border-radius:var(--r-pill);
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.eyebrow--light{background:rgba(255,255,255,.14); color:#fff}
.section__title{font-size:clamp(25px,3vw,38px); letter-spacing:-.045em}
.section__lead{margin-top:16px; font-size:16.5px; color:var(--muted); line-height:1.6; font-family:var(--font-body)}

/* ============================================================
   БОЛЬ
   ============================================================ */
.pains{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.pain-card{
  padding:22px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease);
}
.pain-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.pain-card h3{font-size:17px; margin:16px 0 8px; letter-spacing:-.035em}
.pain-card p{font-size:14.5px; color:var(--muted); line-height:1.5}
.pain-card__art{
  height:112px; border-radius:var(--r-md); background:#F6F7FB;
  display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}

/* видео с вечным спиннером */
.art-video{width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px}
.art-video__frame{width:96px; height:56px; border-radius:10px; background:#DFE2EB; display:flex; align-items:center; justify-content:center}
.art-video__spinner{width:22px; height:22px; border-radius:50%; border:3px solid #C3C8D6; border-top-color:#8B93A8; animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art-video__bar{width:96px; height:5px; border-radius:3px; background:#E4E7EF; overflow:hidden}
.art-video__bar i{display:block; height:100%; width:18%; background:#B9C0D0; border-radius:3px; animation:stall 3.4s ease-in-out infinite}
@keyframes stall{0%,55%{width:14%}70%{width:22%}100%{width:23%}}

/* звонок */
.art-call{display:flex; flex-direction:column; align-items:center; gap:12px}
.art-call__wave{display:flex; align-items:center; gap:3px; height:38px}
.art-call__wave i{width:3px; border-radius:2px; background:#A9B0C2; animation:vu 1.1s ease-in-out infinite}
.art-call__cut{font-size:11.5px; font-weight:600; color:#B7405A; background:#FCE9EC; padding:3px 9px; border-radius:var(--r-pill)}
@keyframes vu{0%,100%{height:8px}50%{height:30px}}

/* загрузка фото */
.art-upload{display:flex; flex-direction:column; align-items:center; gap:9px}
.art-upload__photo{width:52px; height:40px; border-radius:8px; background:linear-gradient(135deg,#E7E9F1,#D8DCE8); position:relative; overflow:hidden}
.art-upload__photo::after{content:''; position:absolute; left:8px; bottom:6px; width:22px; height:12px; border-radius:6px; background:#C6CBD8}
.art-upload__track{width:96px; height:5px; border-radius:3px; background:#E4E7EF; overflow:hidden}
.art-upload__track i{display:block; height:100%; width:24%; background:#8B93A8; border-radius:3px; animation:stuck 4s ease-in-out infinite}
@keyframes stuck{0%,80%{width:24%}90%{width:26%}100%{width:24%}}
.art-upload__pct{font-size:12px; font-weight:600; color:var(--muted)}

/* сигнал */
.art-signal{display:flex; flex-direction:column; align-items:center; gap:10px}
.art-signal__bars{display:flex; align-items:flex-end; gap:4px; height:38px}
.art-signal__bars i{width:8px; border-radius:3px; background:#C3C8D6; animation:drop 3.2s ease-in-out infinite}
.art-signal__bars i:nth-child(1){height:12px}
.art-signal__bars i:nth-child(2){height:20px; animation-delay:.2s}
.art-signal__bars i:nth-child(3){height:28px; animation-delay:.4s}
.art-signal__bars i:nth-child(4){height:36px; animation-delay:.6s}
@keyframes drop{0%,40%{opacity:1}55%,100%{opacity:.18}}
.art-signal__label{font-size:11.5px; font-weight:600; color:var(--muted); background:#EDEEF3; padding:3px 9px; border-radius:var(--r-pill)}

.pains__foot{max-width:680px; margin:34px auto 0; text-align:center; font-size:16px; color:var(--muted)}

/* ============================================================
   ДВА ЭКРАНА
   ============================================================ */
.screens{display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center}
.screen{margin:0}
.screen__cap{margin-bottom:12px}
.screen__frame{
  padding:14px; border-radius:var(--r-xl); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.screen--good .screen__frame{border-color:var(--indigo-100); box-shadow:var(--shadow-md)}
.screen__inner{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  background:#20222C; overflow:hidden;
}
.screen--good .screen__inner{background:linear-gradient(140deg,#1B1D2B 0%,#2A1F4F 100%)}
.screen__spinner{width:44px; height:44px; border-radius:50%; border:4px solid rgba(255,255,255,.16); border-top-color:rgba(255,255,255,.6); animation:spin 1s linear infinite}
.screen__play{width:74px; height:52px; animation:beat 3s ease-in-out infinite}
.screen__play svg{width:100%; height:100%; display:block}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.screen__q{
  position:absolute; top:12px; right:12px; padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.12); color:rgba(255,255,255,.75);
  font-size:11.5px; font-weight:600; letter-spacing:.02em;
}
.screen__q--hd{background:#E8322C; color:#fff}
.screen__bar{position:absolute; left:12px; right:12px; bottom:12px; height:5px; border-radius:3px; background:rgba(255,255,255,.16); overflow:hidden}
.screen__bar i{display:block; height:100%; width:var(--w); background:rgba(255,255,255,.45); border-radius:3px; animation:stall 3.4s ease-in-out infinite}
.screen__bar--good i{background:#E8322C; animation:play 6s linear infinite}
@keyframes play{0%{width:6%}100%{width:96%}}
.screen__text{margin-top:14px; font-size:14.5px; color:var(--muted)}
.screens__vs{display:flex; align-items:center; justify-content:center}
.screens__vs span{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; background:#fff; border:1px solid var(--border);
  font-family:var(--font-display); font-size:13px; font-weight:700; color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.screens__foot{margin-top:26px; text-align:center; font-size:15px; color:var(--muted)}

/* ============================================================
   ВИТРИНА ВЕЧЕРНЕГО ПРОФИЛЯ (тёмная секция)
   ============================================================ */
.showcase{position:relative; z-index:1; display:grid; grid-template-columns:1.25fr .75fr; gap:32px; align-items:center}
.showcase__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.sc-tile{
  position:relative; aspect-ratio:1/1; border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  transition:transform .55s var(--ease-out), background .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.sc-tile__icon{width:40px; height:40px; transition:filter .55s var(--ease), transform .55s var(--ease-out)}
.sc-tile__icon svg{width:100%; height:100%; display:block}
.sc-tile__name{font-size:12px; font-weight:500; color:rgba(255,255,255,.55); transition:color .5s}
.sc-tile__lock{position:absolute; top:10px; right:10px; width:15px; height:15px; color:rgba(255,255,255,.45); transition:opacity .4s, transform .5s}
.sc-tile__lock svg{width:100%; height:100%; display:block}
.sc-tile.is-off .sc-tile__icon{filter:grayscale(1) brightness(.75) opacity(.5); transform:scale(.92)}
.sc-tile.is-on{background:rgba(255,255,255,.97); border-color:transparent; box-shadow:0 14px 34px rgba(0,0,0,.28)}
.sc-tile.is-on .sc-tile__icon{filter:none; transform:scale(1)}
.sc-tile.is-on .sc-tile__name{color:var(--ink-2)}
.sc-tile.is-on .sc-tile__lock{opacity:0; transform:scale(.5)}
.sc-tile.just-on{animation:pop .6s var(--ease-out)}

.showcase__side{display:flex; flex-direction:column; gap:22px}
.showcase__toggle{display:inline-flex; align-items:center; gap:12px; cursor:pointer; user-select:none}
.showcase__toggle-track{
  position:relative; width:60px; height:34px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.18); transition:background .45s var(--ease);
}
.showcase__toggle.is-on .showcase__toggle-track{background:linear-gradient(120deg,#7C6CF5,var(--magenta))}
.showcase__toggle-knob{
  position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:transform .45s var(--ease-out);
}
.showcase__toggle.is-on .showcase__toggle-knob{transform:translateX(26px)}
.showcase__toggle-label{font-size:15px; font-weight:600; color:#fff}

.showcase__stats{display:flex; flex-direction:column; gap:16px}
.showcase__stats li{display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:2px solid rgba(255,255,255,.22)}
.showcase__stats b{font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.04em}
.showcase__stats span{font-size:13.5px; color:rgba(255,255,255,.62)}
.showcase__note{font-size:14px; color:rgba(255,255,255,.6); line-height:1.55}

/* ============================================================
   УМНЫЙ МАРШРУТ
   ============================================================ */
.routing{display:grid; grid-template-columns:minmax(240px,1fr) 120px minmax(380px,1.5fr);
  gap:0; align-items:center}
.routing__col--src{display:flex; justify-content:flex-end}
.routing__col--dest{display:flex; flex-direction:column; gap:16px}

.rt-card{padding:24px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .45s var(--ease)}
.rt-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.rt-card--src{max-width:280px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px}
.rt-card--src .rt-card__ico{display:flex; align-items:center; justify-content:center; width:52px; height:52px;
  margin-bottom:8px; border-radius:16px; background:var(--indigo-50); color:var(--indigo-600)}
.rt-card--src .rt-card__ico svg{width:26px; height:26px}
.rt-card--src b{font-family:var(--font-display); font-size:17px; letter-spacing:-.04em}
.rt-card--src span{font-size:13.5px; color:var(--muted); line-height:1.5}

.rt-card--direct{border-color:#CDE9DA}
.rt-card--secure{border-color:var(--indigo-100)}
.rt-card header{display:flex; flex-direction:column; gap:9px; margin-bottom:14px}
.rt-card header b{font-family:var(--font-display); font-size:16.5px; letter-spacing:-.04em}
.rt-card p{font-size:14.5px; color:var(--muted); line-height:1.55}
.rt-tag{display:inline-flex; align-self:flex-start; padding:4px 12px; border-radius:var(--r-pill);
  font-size:12.5px; font-weight:700}
.rt-tag--green{background:var(--mint); color:var(--mint-fg)}
.rt-tag--indigo{background:var(--indigo-50); color:var(--indigo-600)}

.rt-icons{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.rt-icons span{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:11px; background:#F6F7FB; border:1px solid var(--border-2)}
.rt-icons img{width:26px; height:26px; object-fit:contain}

/* провода развилки */
.routing__col--wires{position:relative; align-self:stretch; min-height:200px}
.rt-wire{position:absolute; left:0; right:0; height:2px; overflow:visible}
.rt-wire--direct{top:30%}
.rt-wire--secure{top:70%}
.rt-wire::before{content:''; position:absolute; inset:0; border-radius:2px;
  background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 14px); opacity:.35}
.rt-wire--direct{color:#5FBF95}
.rt-wire--secure{color:var(--indigo-400)}
.rt-wire i{position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 4px rgba(124,108,245,.14);
  animation:rtFlow 2.6s var(--ease) infinite}
.rt-wire--direct i{box-shadow:0 0 0 4px rgba(95,191,149,.16); animation-delay:.4s}
@keyframes rtFlow{
  0%{left:-4px; opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:calc(100% - 4px); opacity:0}
}
.routing__foot{max-width:760px; margin:26px auto 0; text-align:center; font-size:14.5px; color:var(--muted)}

/* ============================================================
   БЫЛО / СТАЛО
   ============================================================ */
}

/* ============================================================
   СХЕМА КВАРТИРЫ
   ============================================================ */
.stage-ba{
  margin-top:36px; padding:26px 26px 22px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
}
.stage-ba__top{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:20px}
.stage-ba__title{max-width:600px}
.stage-ba__title h3{font-size:20px; letter-spacing:-.045em}
.stage-ba__title p{margin-top:8px; font-size:14.5px; color:var(--muted); line-height:1.55; min-height:44px}
.stage-ba__title h3,.stage-ba__title p{transition:opacity .35s var(--ease), transform .35s var(--ease-out)}
.stage-ba.is-swapping .stage-ba__title h3,
.stage-ba.is-swapping .stage-ba__title p{opacity:0; transform:translateY(6px)}

/* переключатель */
.stage-ba__switch{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px;
  flex:none; padding:4px; background:#F1F2F7; border-radius:var(--r-pill)}
.stage-ba__thumb{position:absolute; top:4px; left:4px; width:calc(50% - 4px); height:calc(100% - 8px);
  background:#fff; border-radius:var(--r-pill); box-shadow:0 2px 8px rgba(16,18,40,.12);
  transition:transform .6s var(--ease-out), background .6s var(--ease)}
.stage-ba[data-state="after"] .stage-ba__thumb{
  transform:translateX(calc(100% + 4px));
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700));
}
.stage-ba__seg{position:relative; z-index:1; min-width:92px; height:38px; border:0; background:transparent;
  cursor:pointer; font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--muted);
  border-radius:var(--r-pill); transition:color .4s var(--ease)}
.stage-ba__seg.is-active{color:var(--ink)}
.stage-ba[data-state="after"] .stage-ba__seg.is-active{color:#fff}

.stage-ba__svg{width:100%; height:auto; display:block; border-radius:var(--r-lg)}
.stage-ba__foot{margin-top:18px; font-size:14.5px; color:var(--muted); line-height:1.55; max-width:840px;
  min-height:44px; transition:opacity .35s var(--ease), transform .35s var(--ease-out)}
.stage-ba.is-swapping .stage-ba__foot{opacity:0; transform:translateY(6px)}

/* ---------- подписи в сцене ---------- */
.ba-dev__name{font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-.04em;
  fill:var(--ink); transition:fill .6s var(--ease)}
.stage-ba[data-state="before"] .ba-dev__name{fill:#585D6E}
.ba-dev__sub{font-family:var(--font-body); font-size:13px; fill:var(--muted)}
.ba-st{font-family:var(--font-body); font-size:11.5px; font-weight:500}
.ba-st--bad{fill:#A4808C}
.ba-st--good{fill:#1E7A54}
.ba-dot--bad{fill:#C9A2AE}
.ba-dot--good{fill:#22A56F}

/* статус: плавная смена со сдвигом */
.ba-state{transition:opacity .5s var(--ease), transform .55s var(--ease-out)}
.stage-ba[data-state="before"] .ba-state--after{opacity:0; transform:translateY(7px)}
.stage-ba[data-state="after"] .ba-state--before{opacity:0; transform:translateY(-7px)}

/* ---------- карточки ---------- */
.ba-dev__card{fill:#fff; transition:fill .6s var(--ease)}
.stage-ba[data-state="before"] .ba-dev__card{fill:#FBFBFD}
.ba-dev__ic{transition:opacity .6s var(--ease)}
.stage-ba[data-state="before"] .ba-dev__ic{opacity:.45}
.ba-dev__glyph{transition:filter .7s var(--ease), opacity .6s var(--ease)}
.stage-ba[data-state="before"] .ba-dev__glyph{filter:saturate(0); opacity:.42}
.ba-dev{transition:transform .7s var(--ease-out)}
.stage-ba[data-state="after"] .ba-dev{animation:devFloat 7s ease-in-out infinite; animation-delay:var(--d,0s)}
.stage-ba[data-state="after"] .ba-dev[data-side="r"]{animation-name:devFloatR}
@keyframes devFloat{50%{transform:translate(3px,-6px)}}
@keyframes devFloatR{50%{transform:translate(-3px,-6px)}}

/* ---------- роутер: кроссфейд серый ↔ индиго ---------- */
.ba-router__body,.ba-router__ant{transition:opacity .65s var(--ease)}
.stage-ba[data-state="before"] .ba-router__body--on,
.stage-ba[data-state="before"] .ba-router__ant--on{opacity:0}
.stage-ba[data-state="after"] .ba-router__body--off,
.stage-ba[data-state="after"] .ba-router__ant--off{opacity:0}

.ba-router__led{opacity:.5; transition:opacity .6s var(--ease)}
.stage-ba[data-state="after"] .ba-router__led{opacity:.95; animation:ledBlink 2.4s ease-in-out infinite}
.stage-ba[data-state="after"] .ba-router__led:nth-of-type(2){animation-delay:.3s; opacity:.62}
.stage-ba[data-state="after"] .ba-router__led:nth-of-type(3){animation-delay:.6s; opacity:.42}
@keyframes ledBlink{50%{opacity:.25}}
.ba-router__slot{opacity:.22}
.ba-router{transform-origin:490px 230px; transition:transform .7s var(--ease-out)}
.stage-ba[data-state="after"] .ba-router{animation:routerBob 6s ease-in-out infinite}
@keyframes routerBob{50%{transform:translateY(-5px)}}

.ba-chip__dot{fill:#C3C8D6; transition:fill .6s var(--ease)}
.stage-ba[data-state="after"] .ba-chip__dot{fill:var(--indigo-500)}
.ba-chip__t{font-family:var(--font-body); font-size:13.5px; font-weight:600;
  transition:opacity .5s var(--ease), transform .55s var(--ease-out)}
.ba-chip__t--before{fill:var(--muted)}
.ba-chip__t--after{fill:var(--indigo-600)}
.stage-ba[data-state="before"] .ba-chip__t--after{opacity:0; transform:translateY(6px)}
.stage-ba[data-state="after"] .ba-chip__t--before{opacity:0; transform:translateY(-6px)}

/* ---------- связи ---------- */
.ba-wires path{stroke-width:2}
.ba-wires{transition:opacity .6s var(--ease)}
.ba-wires--off path{stroke:#E1E3EC; stroke-dasharray:5 7}
.ba-wires--on path{stroke:#DDE0EC}
.stage-ba[data-state="before"] .ba-wires--on{opacity:0}
.stage-ba[data-state="after"] .ba-wires--off{opacity:0}

.ba-flow{opacity:0; transition:opacity .6s var(--ease)}
.ba-flow path{stroke:#7C6CF5; stroke-width:2.6; stroke-dasharray:10 190; stroke-dashoffset:200}
.stage-ba[data-state="after"] .ba-flow{opacity:1}
.stage-ba[data-state="after"] .ba-flow path{animation:wireFlow 3.2s linear infinite}
.stage-ba[data-state="after"] .ba-flow path:nth-child(2){animation-delay:.4s}
.stage-ba[data-state="after"] .ba-flow path:nth-child(3){animation-delay:.8s}
.stage-ba[data-state="after"] .ba-flow path:nth-child(4){animation-delay:1.2s}
.stage-ba[data-state="after"] .ba-flow path:nth-child(5){animation-delay:1.6s}
.stage-ba[data-state="after"] .ba-flow path:nth-child(6){animation-delay:2s}
@keyframes wireFlow{to{stroke-dashoffset:-200}}

/* ---------- волны ---------- */
.ba-waves circle{stroke:#7C6CF5; stroke-width:1.6; opacity:0; transform-origin:490px 230px}
.stage-ba[data-state="after"] .ba-waves circle{animation:baWave 5s ease-out infinite}
.stage-ba[data-state="after"] .ba-waves circle:nth-child(2){animation-delay:1.7s}
.stage-ba[data-state="after"] .ba-waves circle:nth-child(3){animation-delay:3.4s}
@keyframes baWave{0%{opacity:.4; transform:scale(.32)}100%{opacity:0; transform:scale(1)}}

/* ============================================================
   ПРОВЕРКА РОУТЕРА
   ============================================================ */
.checker{max-width:820px; margin:0 auto}
.checker__form{position:relative}
.checker__field{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:8px 8px 8px 18px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-pill); box-shadow:var(--shadow-md);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.checker__field:focus-within{border-color:var(--indigo-300); box-shadow:0 0 0 4px rgba(91,75,232,.1), var(--shadow-md)}
.checker__icon{width:21px; height:21px; color:var(--muted-2); flex:none}
.checker__input{
  flex:1; min-width:0; height:48px; border:0; outline:0; background:transparent;
  font-family:var(--font-body); font-size:16px; color:var(--ink);
}
.checker__input::placeholder{color:var(--muted-2)}
.checker__btn{flex:none}

.checker__suggest{
  position:absolute; z-index:20; left:0; right:0; top:calc(100% + 8px);
  padding:6px; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); display:none; max-height:260px; overflow:auto;
}
.checker__suggest.is-open{display:block}
.checker__suggest li{padding:11px 14px; border-radius:var(--r-sm); font-size:15px; cursor:pointer;
  display:flex; align-items:center; gap:10px; transition:background .15s}
.checker__suggest li:hover,.checker__suggest li.is-active{background:var(--indigo-50)}
.checker__suggest .dotmark{width:7px; height:7px; border-radius:50%; flex:none}
.checker__suggest .dotmark--ok{background:#20B573}
.checker__suggest .dotmark--no{background:#D98A8A}

.checker__hints{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-left:6px;
  font-size:13.5px; color:var(--muted)}
.checker__hints button{
  padding:6px 12px; border:1px solid var(--border); border-radius:var(--r-pill);
  background:#fff; font-family:var(--font-body); font-size:13.5px; color:var(--ink-2); cursor:pointer;
  transition:border-color .2s, transform .2s var(--ease), color .2s;
}
.checker__hints button:hover{border-color:var(--indigo-300); color:var(--indigo-600); transform:translateY(-1px)}

.checker__result{margin-top:20px; animation:resIn .5s var(--ease-out)}
@keyframes resIn{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.res{padding:28px; border-radius:var(--r-xl); background:var(--surface);
  border:1px solid var(--border); box-shadow:var(--shadow-md)}
.res--ok{border-color:#BFE7D3; background:linear-gradient(180deg,#F2FBF6,#fff 60%)}
.res--no{border-color:#F0DCDC; background:linear-gradient(180deg,#FDF6F5,#fff 60%)}
.res__head{display:flex; align-items:flex-start; gap:14px}
.res__badge{width:44px; height:44px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center}
.res__badge svg{width:24px; height:24px}
.res--ok .res__badge{background:var(--mint); color:var(--mint-fg)}
.res--no .res__badge{background:#F8ECEC; color:#B25757}
.res__title{font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-.04em}
.res__sub{margin-top:6px; font-size:15px; color:var(--muted); line-height:1.55}
.res__model{font-weight:600; color:var(--ink)}

.res__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:22px}
.res__cell{padding:16px; border-radius:var(--r-md); background:#fff; border:1px solid var(--border)}
.res__cell b{display:block; font-family:var(--font-display); font-size:17px; letter-spacing:-.03em}
.res__cell span{display:block; margin-top:4px; font-size:13px; color:var(--muted); line-height:1.45}

.res__loss{margin-top:20px; padding:18px 20px; border-radius:var(--r-md);
  background:#FBF3F3; border:1px dashed #EDD9D9}
.res__loss h4{font-size:15px; margin-bottom:10px; letter-spacing:-.035em}
.res__loss ul{display:flex; flex-direction:column; gap:8px}
.res__loss li{position:relative; padding-left:20px; font-size:14.5px; color:#8A6363; line-height:1.5}
.res__loss li::before{content:''; position:absolute; left:2px; top:9px; width:8px; height:2px; border-radius:2px; background:#C99A9A}

.res__cta{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:22px}
.res__note{font-size:13px; color:var(--muted-2); margin-top:12px}

/* ============================================================
   КАТАЛОГ РОУТЕРОВ
   ============================================================ */
.catalog{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.router-card{position:relative; display:flex; flex-direction:column; padding:26px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease), border-color .45s var(--ease)}
.router-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--indigo-100)}
.router-card--best{border-color:var(--indigo-200,#D9D5FC); box-shadow:var(--shadow-md)}
.router-card__tag{position:absolute; top:-11px; left:26px; padding:4px 12px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700)); color:#fff; font-size:12px; font-weight:600;
  box-shadow:var(--shadow-indigo)}
.router-card__art{height:120px; border-radius:var(--r-md); background:#F6F7FB; display:flex; align-items:center; justify-content:center; margin-bottom:18px}
.router-card__art svg{width:130px; height:auto}
.router-card__name{font-size:18px; letter-spacing:-.04em}
.router-card__meta{margin-top:6px; font-size:13.5px; color:var(--muted)}
.router-card__price{display:flex; align-items:baseline; gap:8px; margin:16px 0 18px}
.router-card__price b{font-family:var(--font-display); font-size:26px; letter-spacing:-.045em}
.router-card__price s{font-size:14px; color:var(--muted-2)}
.pros-cons{display:flex; flex-direction:column; gap:9px; flex:1}
.pros-cons li{display:flex; gap:9px; font-size:14.5px; line-height:1.45}
.pros-cons .pc{width:17px; height:17px; border-radius:50%; flex:none; margin-top:2px; position:relative}
.pc--yes{background:var(--mint)}
.pc--yes::after,.pc--yes::before{content:''; position:absolute; background:var(--mint-fg); border-radius:2px}
.pc--yes::after{left:4px; top:7.5px; width:9px; height:2px}
.pc--yes::before{left:7.5px; top:4px; width:2px; height:9px}
.pc--no{background:#F5EFEF}
.pc--no::after{content:''; position:absolute; left:4px; top:7.5px; width:9px; height:2px; border-radius:2px; background:#C09A9A}
.pros-cons li.is-con{color:var(--muted)}
.router-card .btn{margin-top:20px}

.catalog__foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px;
  margin-top:24px; padding:22px 26px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm)}
.catalog__foot-text{font-size:15px; color:var(--muted); max-width:620px; line-height:1.55}
.catalog__foot-text b{color:var(--ink)}

/* ============================================================
   ОТЗЫВЫ
   ============================================================ */
.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.review{padding:26px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.review:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.review__stars{display:flex; gap:3px; margin-bottom:14px}
.review__stars svg{width:16px; height:16px; color:#F2B01E}
.review__text{font-size:15px; color:var(--ink-2); line-height:1.6; flex:1}
.review__foot{display:flex; align-items:center; gap:11px; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-2)}
.review__ava{width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:14px; font-weight:700; color:#fff; flex:none}
.review__who b{display:block; font-size:14.5px; font-weight:600}
.review__who span{font-size:13px; color:var(--muted-2)}

/* ============================================================
   ДЕТСКИЙ ПРОФИЛЬ
   ============================================================ */
.kids-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.kid-card{padding:28px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.kid-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.kid-card__icon{display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:var(--r-md); background:var(--bg); color:var(--fg);
  background:var(--bg,#EEE)}
.kid-card__icon{background:var(--bg); color:var(--fg)}
.kid-card__icon svg{width:23px; height:23px}
.kid-card h3{margin:18px 0 9px; font-size:18px; letter-spacing:-.04em}
.kid-card p{font-size:15px; color:var(--muted); line-height:1.55}

/* Таймлайн */
.timeline{margin-top:44px; padding:30px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm)}
.timeline__head{margin-bottom:22px}
.timeline__head h3{font-size:19px; letter-spacing:-.04em}
.timeline__head p{margin-top:6px; font-size:14.5px; color:var(--muted)}
.timeline__track{position:relative; height:58px; border-radius:var(--r-md); background:#F4F5F9; overflow:hidden}
.timeline__seg{
  position:absolute; top:0; bottom:0;
  left:calc(var(--from) / 24 * 100%); width:calc((var(--to) - var(--from)) / 24 * 100%);
  display:flex; align-items:center; padding:0 14px;
}
.timeline__seg span{font-size:12.5px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.timeline__seg--night{background:#EDEEF4; color:var(--muted-2)}
.timeline__seg--kids{background:var(--blue); color:var(--blue-fg)}
.timeline__seg--adult{background:linear-gradient(120deg,var(--indigo-500),var(--indigo-700)); color:#fff}
.timeline__cursor{position:absolute; top:0; bottom:0; width:2px; background:rgba(11,11,18,.55);
  transform:translateX(-1px); transition:left 1s linear}
.timeline__cursor i{position:absolute; top:-5px; left:-4px; width:10px; height:10px; border-radius:50%;
  background:var(--ink); box-shadow:0 0 0 4px rgba(11,11,18,.12)}
.timeline__hours{display:flex; justify-content:space-between; margin-top:8px; font-size:11.5px; color:var(--muted-2)}

/* ============================================================
   ШАГИ
   ============================================================ */
/* Шагов четыре: три в ряд оставляли четвёртый одиноко висеть слева.
   `auto-fit` раскладывает их ровно — по четыре на широком экране, по два на
   среднем, — и не сломается, если шагов станет пять. */
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.step{position:relative; padding:28px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.step__num{display:inline-block; font-size:12.5px; font-weight:700; letter-spacing:.08em; color:var(--indigo-500)}
.step__art{height:96px; margin:14px 0 18px; border-radius:var(--r-md); background:#F6F7FB;
  display:flex; align-items:center; justify-content:center}
.step__art svg{width:150px; height:auto}
.step__check{animation:popIn 3.4s ease-in-out infinite}
@keyframes popIn{0%,60%{opacity:0; transform:scale(.7)}70%,100%{opacity:1; transform:scale(1)}}
.step__check{transform-origin:90px 42px}
.step__dl{animation:fall 2.6s ease-in-out infinite}
@keyframes fall{0%{transform:translateY(-6px); opacity:0}30%{opacity:1}70%{transform:translateY(6px); opacity:1}100%{transform:translateY(10px); opacity:0}}
.step__knob{animation:slide 3.2s ease-in-out infinite}
@keyframes slide{0%,45%{transform:translateX(0)}55%,100%{transform:translateX(40px)}}
.step h3{font-size:18px; margin-bottom:9px; letter-spacing:-.04em}
.step p{font-size:15px; color:var(--muted); line-height:1.55}

/* ============================================================
   СРАВНЕНИЕ
   ============================================================ */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch}
.compare__card{position:relative; display:flex; flex-direction:column; padding:30px;
  border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.compare__card--old{background:#FAFAFC}
.compare__card--new{border-color:var(--indigo-100); box-shadow:var(--shadow-md)}
.compare__card--new:hover{transform:translateY(-4px); box-shadow:var(--shadow-lg)}
.ribbon{position:absolute; top:-11px; left:30px; padding:4px 12px; border-radius:var(--r-pill);
  background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700)); color:#fff;
  font-size:12px; font-weight:600; box-shadow:var(--shadow-indigo)}
.compare__card header{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:22px}
.tag{display:inline-block; padding:5px 12px; border-radius:var(--r-pill); font-size:12.5px; font-weight:600}
.tag--grey{background:#EFF0F5; color:var(--muted)}
.tag--indigo{background:var(--indigo-50); color:var(--indigo-600)}
.compare__price{text-align:right; line-height:1.2}
.compare__price b{display:block; font-family:var(--font-display); font-size:24px; letter-spacing:-.04em}
.compare__price span{font-size:12.5px; color:var(--muted)}
.compare__card--old .compare__price b{color:var(--muted)}

.factlist{display:flex; flex-direction:column; gap:14px; flex:1}
.factlist li{display:flex; gap:12px; font-size:15px; color:var(--ink-2); line-height:1.5}
.factlist .ic{width:20px; height:20px; border-radius:50%; flex:none; margin-top:2px; position:relative}
.ic--minus{background:#F4F1F1}
.ic--minus::after{content:''; position:absolute; left:5px; top:9px; width:10px; height:2px; border-radius:2px; background:#B9A0A0}
.ic--plus{background:var(--mint)}
.ic--plus::after,.ic--plus::before{content:''; position:absolute; background:var(--mint-fg); border-radius:2px}
.ic--plus::after{left:5px; top:9px; width:10px; height:2px}
.ic--plus::before{left:9px; top:5px; width:2px; height:10px}
.compare__card--old .factlist li{color:var(--muted)}

.compare__total{margin-top:24px; padding-top:18px; border-top:1px dashed var(--border); font-size:14.5px; color:var(--muted)}
.compare__total b{color:var(--ink); font-family:var(--font-display); font-size:16px}
.compare__total--good b{color:var(--indigo-600)}

/* Экономия */
.savings{margin-top:26px; padding:26px 28px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm)}
.savings__bars{display:flex; flex-direction:column; gap:14px}
.savings__row{display:flex; align-items:center; gap:14px}
.savings__name{width:64px; font-size:13.5px; color:var(--muted)}
.savings__bar{flex:1; height:18px; border-radius:var(--r-pill); background:#EFF0F5; position:relative; overflow:hidden}
.savings__bar::after{content:''; position:absolute; inset:0; width:0; border-radius:var(--r-pill);
  background:#DDDFE8; transition:width 1.2s var(--ease-out)}
.savings__bar--new::after{background:linear-gradient(90deg,var(--indigo-400),var(--indigo-600))}
.savings.is-in .savings__bar::after{width:var(--w)}
.savings__row b{width:96px; text-align:right; font-family:var(--font-display); font-size:15px; letter-spacing:-.03em}
.savings__text{margin-top:18px; font-size:15px; color:var(--muted)}
.savings__text b{color:var(--indigo-600)}

/* ============================================================
   ТАРИФЫ
   ============================================================ */
/* срок оплаты */
.periods{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:1120px; margin:0 auto 26px; padding:6px;
  background:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  box-shadow:var(--shadow-sm); width:fit-content}
.periods__btn{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 20px;
  border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer;
  font-family:var(--font-body); font-size:14.5px; font-weight:600; color:var(--muted);
  white-space:nowrap;
  transition:color .3s var(--ease), background-color .35s var(--ease), transform .3s var(--ease);
}
.periods__btn i{font-style:normal; font-size:11.5px; font-weight:700; padding:3px 7px; border-radius:var(--r-pill);
  background:var(--mint); color:var(--mint-fg); transition:background .3s var(--ease), color .3s var(--ease)}
.periods__btn:hover{color:var(--ink); background:var(--indigo-50)}
.periods__btn.is-active{
  color:#fff; background:linear-gradient(135deg,var(--indigo-500),var(--indigo-700));
  box-shadow:var(--shadow-indigo);
}
.periods__btn.is-active i{background:rgba(255,255,255,.2); color:#fff}

.plans{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:920px; margin:0 auto}
.plan{position:relative; display:flex; flex-direction:column; padding:34px 30px;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease-out), box-shadow .45s var(--ease)}
.plan:hover{transform:translateY(-4px); box-shadow:var(--shadow-md)}
.plan--vip{background:linear-gradient(155deg,var(--indigo-600) 0%,var(--indigo-700) 60%,var(--indigo-800) 100%);
  border-color:transparent; color:#fff; box-shadow:var(--shadow-lg)}
.plan--vip:hover{box-shadow:0 20px 60px rgba(38,26,120,.3)}
.plan__badge{position:absolute; top:22px; right:24px; padding:4px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  font-size:11px; font-weight:700; letter-spacing:.1em}
.plan__name{font-size:19px; letter-spacing:-.04em}
.plan__save{display:inline-flex; align-items:center; height:26px; margin-bottom:10px;
  padding:0 12px; border-radius:var(--r-pill);
  background:var(--mint); color:var(--mint-fg); font-size:12.5px; font-weight:700}
.plan__save[hidden]{display:none}
.plan--vip .plan__save{background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.28)}
.plan__total{margin:0 0 14px; font-size:13.5px; color:var(--muted); min-height:20px}
.plan--vip .plan__total{color:rgba(255,255,255,.72)}
.plan__price s{font-size:15px; color:var(--muted-2); text-decoration-thickness:1.5px}
.plan--vip .plan__price s{color:rgba(255,255,255,.5)}
.plan__price{display:flex; align-items:baseline; gap:8px; margin:16px 0 6px}
.plan__price b{font-family:var(--font-display); font-size:40px; font-weight:700; letter-spacing:-.05em; line-height:1}
.plan__price span{font-size:15px; color:var(--muted)}
.plan--vip .plan__price span{color:rgba(255,255,255,.7)}
.plan__note{margin-bottom:24px; font-size:14.5px; color:var(--muted)}
.plan--vip .plan__note{color:rgba(255,255,255,.75)}
.plan .checklist{margin-bottom:28px; flex:1}

.checklist{display:flex; flex-direction:column; gap:13px}
.checklist li{position:relative; padding-left:30px; font-size:15px; color:var(--ink-2); line-height:1.5}
.checklist li::before{content:''; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--indigo-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.2 8.4 13l6-6.4' stroke='%234A38DC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.checklist--light li{color:rgba(255,255,255,.9)}
.checklist--light li b{color:#fff}
.checklist--light li::before{
  background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.5 10.2 8.4 13l6-6.4' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* загрузка узла */
.load{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:900px; margin:24px auto 0}
.load__col{padding:20px 22px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:10px}
.load__title{font-size:13.5px; color:var(--muted)}
.load__bar{height:10px; border-radius:var(--r-pill); background:#EFF0F5; overflow:hidden; position:relative}
.load__bar i{position:absolute; inset:0 auto 0 0; width:0; border-radius:var(--r-pill);
  background:linear-gradient(90deg,#C7CBD8,#A9AFC2); transition:width 1.3s var(--ease-out)}
.load__bar--vip i{background:linear-gradient(90deg,var(--indigo-400),var(--magenta))}
.load.is-in .load__bar i{width:var(--w)}
.load__val{font-family:var(--font-display); font-size:16px; letter-spacing:-.03em}
.plans__foot{margin-top:24px; text-align:center; font-size:14.5px; color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:flex; flex-direction:column; gap:10px}
.faq__item{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; transition:border-color .3s var(--ease), box-shadow .3s var(--ease)}
.faq__item[open]{border-color:var(--indigo-100); box-shadow:var(--shadow-md)}
.faq__item summary{position:relative; list-style:none; cursor:pointer; padding:20px 56px 20px 24px;
  font-family:var(--font-display); font-size:15.5px; font-weight:600; letter-spacing:-.035em}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:''; position:absolute; right:22px; top:50%; margin-top:-9px; width:18px; height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 3.5v11M3.5 9h11' stroke='%236B7086' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .35s var(--ease-out)}
.faq__item[open] summary::after{transform:rotate(135deg)}
.faq__item p{padding:0 24px 22px; font-size:15px; color:var(--muted); line-height:1.6; max-width:94%}

/* ============================================================
   ФИНАЛЬНЫЙ CTA
   ============================================================ */
.cta{position:relative; overflow:hidden; padding:64px 40px; border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(140deg,var(--indigo-500) 0%,var(--indigo-700) 55%,var(--indigo-800) 100%);
  color:#fff; box-shadow:var(--shadow-lg)}
.cta__glow{position:absolute; width:620px; height:620px; top:-320px; left:50%; margin-left:-310px;
  background:radial-gradient(circle,rgba(255,255,255,.26),rgba(255,255,255,0) 65%); animation:float1 18s ease-in-out infinite}
.cta__content{position:relative}
.cta h2{font-size:clamp(25px,3vw,36px); letter-spacing:-.045em}
.cta p{margin:16px auto 0; max-width:560px; font-size:16.5px; color:rgba(255,255,255,.82)}
.cta__actions{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:32px}
.cta__small{display:block; margin-top:22px; font-size:13.5px; color:rgba(255,255,255,.6)}

/* ============================================================
   СНОСКИ И ПОДВАЛ
   ============================================================ */
.notes{padding-bottom:56px}
.notes p{max-width:820px; font-size:13px; color:var(--muted-2); line-height:1.65}
.notes__mark{color:var(--indigo-400); font-weight:700}

.footer{padding:60px 0 32px; border-top:1px solid var(--border); background:rgba(255,255,255,.6)}
.footer__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px}
.footer__brand p{margin-top:14px; max-width:320px; font-size:14px; color:var(--muted); line-height:1.55}
.footer__col h4{margin-bottom:14px; font-family:var(--font-body); font-size:12.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2)}
.footer__col a{display:block; padding:5px 0; font-size:14.5px; color:var(--ink-2); transition:color .2s}
.footer__col a:hover{color:var(--indigo-600)}
.footer__bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid var(--border); font-size:13px; color:var(--muted-2)}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out)}
.reveal.is-in{opacity:1; transform:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}

/* ============================================================
   АДАПТИВ
   ============================================================ */
@media (max-width:1080px){
  .pains{grid-template-columns:1fr 1fr}
  .showcase{grid-template-columns:1fr; gap:26px}
  .showcase__stats{flex-direction:row; gap:24px}
}
@media (max-width:1000px){
  .duo{grid-template-columns:1fr}
  .routing{grid-template-columns:1fr; gap:18px}
  .routing__col--src{justify-content:center}
  .rt-card--src{max-width:none; width:100%}
  .routing__col--wires{min-height:70px}
  .rt-wire{left:50%; right:auto; top:0; bottom:0; width:2px; height:auto; transform:translateX(-1px)}
  .rt-wire--direct{margin-left:-30px}
  .rt-wire--secure{margin-left:30px}
  .rt-wire::before{background:repeating-linear-gradient(180deg,currentColor 0 6px,transparent 6px 14px)}
  .rt-wire i{left:-3px; top:0; animation-name:rtFlowV}
  @keyframes rtFlowV{
    0%{top:-4px; opacity:0}
    12%{opacity:1}
    88%{opacity:1}
    100%{top:calc(100% - 4px); opacity:0}
  }
  .nav,.header__actions{display:none}
  .burger{display:block}
  .hero__grid{grid-template-columns:1fr; gap:44px}
  .hero__sub{max-width:none}
  .compare,.plans,.load,.kids-grid,.steps{grid-template-columns:1fr}
  .screens{grid-template-columns:1fr; gap:18px}
  .screens__vs{margin:0 auto}
  .footer__grid{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:700px){
  body{font-size:16px}
  .section{padding:62px 0}
  .section--dark{padding:72px 0}
  .header{padding:10px 14px}
  .container{padding:0 18px}
  .hero{padding:32px 0 20px}
  .hero__facts{gap:18px; flex-wrap:wrap}
  .pains{grid-template-columns:1fr}
  .showcase__grid{grid-template-columns:repeat(2,1fr)}
  .showcase__stats{flex-direction:column; gap:14px}
  .tiles{gap:8px}
  .tile__icon{width:28px; height:28px}
  .device__panel{padding:16px}
  .cta{padding:44px 20px}
  .btn--lg{height:52px; width:100%}
  .hero__cta{flex-direction:column; align-items:stretch}
  .footer__grid{grid-template-columns:1fr}
  .compare__card,.plan,.kid-card,.step,.stage-ba,.timeline{padding:22px}
  .timeline__seg span{font-size:11px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
}