/* ============================================================
   Happ Proxy — лендинг. Тёмная «неоновая» тема.
   Базовый цвет фона #0a0c23 подобран пипеткой по PNG-ассетам,
   чтобы большие картинки (hero, устройства) не давали видимого
   прямоугольника на фоне страницы.
   ============================================================ */

:root{
  --bg:            #0a0c23;
  --bg-deep:       #060719;
  --card:          #0d102e;
  --card-2:        #101436;
  --line:          rgba(94, 107, 224, .16);
  --line-strong:   rgba(94, 107, 224, .28);
  --txt:           #e7e8fb;
  --txt-2:         #b9bdde;
  --muted:         #8085b4;
  --blue:          #2f3fff;
  --blue-2:        #181ed6;
  --blue-soft:     rgba(47, 63, 255, .12);
  --green:         #24c0a9;
  --radius:        18px;
  --radius-sm:     12px;
  --container:     1200px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:86px }

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
/* ol сюда же: нумерованные списки используются как каркас блоков «шаги»,
   и собственные маркеры браузера дают вторую нумерацию рядом с нашей. */
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3{ margin:0; line-height:1.18; font-weight:700; letter-spacing:-.01em }
p{ margin:0 }
button{ font:inherit; color:inherit }

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

/* --- фоновое свечение ---------------------------------------------------- */
/* Свечение собрано градиентами, а не blur() на фиксированном слое:
   размытие большого фиксированного элемента заставляет мобильный браузер
   перерисовывать весь экран при каждом кадре скролла и даёт пустые полосы. */
.bg-fx{
  position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  background:
    radial-gradient(760px 700px at -8% -12%,rgba(31, 39, 214, .26),transparent 68%),
    radial-gradient(820px 760px at 108% 26%,rgba(24, 30, 168, .22),transparent 68%),
    radial-gradient(980px 800px at 42% 112%,rgba(20, 25, 150, .18),transparent 68%);
}
.bg-fx__glow{ display:none }

body>*:not(.bg-fx){ position:relative; z-index:1 }
/* Селектор выше специфичнее, чем .site-header, и перебивал её z-index:60 —
   шапка оказывалась в одном слое с контентом и уходила под него. */
body>.site-header{ z-index:60 }

/* --- мягкое растворение краёв у крупных картинок -------------------------- */
/* Фон у PNG непрозрачный и светлее страницы, поэтому без маски картинка даёт
   видимый прямоугольник. Две линейные маски пересекаются (mask-composite),
   гася края по горизонтали и по вертикали одновременно. */
.blend{
  -webkit-mask-image:
    linear-gradient(to right,transparent 0,#000000 13%,#000000 87%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000000 11%,#000000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right,transparent 0,#000000 13%,#000000 87%,transparent 100%),
    linear-gradient(to bottom,transparent 0,#000000 11%,#000000 86%,transparent 100%);
  mask-composite:intersect;
}

/* ============================ ШАПКА ====================================== */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(10, 12, 35, .86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; gap:24px; height:64px }

.logo{ display:inline-flex; align-items:center; gap:8px; flex:0 0 auto }
.logo__name{ font-size:19px; font-weight:800; letter-spacing:-.02em }
/* Логотип картинкой. Задана только высота: у пяти вариантов разные
   пропорции, и фиксированная ширина сплющила бы часть из них. Высота
   подобрана под текстовый вариант, чтобы шапка не меняла высоту при
   переключении логотипа. */
.logo--img img{ height:26px; width:auto; display:block }
.logo__pill{
  font-size:12px; font-weight:700; color:#9da7ff;
  padding:3px 10px; border-radius:999px;
  background:rgba(47, 63, 255, .16);
  border:1px solid rgba(47, 63, 255, .32);
}

.nav{ display:flex; align-items:center; gap:22px; margin-left:auto }
.nav > a{ font-size:13.5px; color:var(--txt-2); white-space:nowrap; transition:color .18s }
.nav > a:hover{ color:#ffffff }

.nav__cta{ display:flex; align-items:center; gap:10px; margin-left:6px; flex:0 0 auto }

.burger{ display:none; width:40px; height:36px; border:1px solid var(--line);
  background:rgba(255, 255, 255, .03); border-radius:10px; cursor:pointer;
  padding:0; flex-direction:column; gap:4px; align-items:center; justify-content:center }
.burger span{ display:block; width:16px; height:1.6px; background:#cfd2ff; border-radius:2px }

/* ============================ КНОПКИ ===================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px;
  font-size:14.5px; font-weight:600; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; transition:.18s;
}
.btn--sm{ padding:9px 18px; font-size:13.5px }
.btn--block{ display:flex; width:100%; border-radius:12px; padding:12px 18px }
.btn--primary{
  background:linear-gradient(180deg,#3b4bff,#1b24e0);
  color:#ffffff; box-shadow:0 8px 24px rgba(27, 36, 224, .35);
}
.btn--primary:hover{ filter:brightness(1.08) }
.btn--ghost{ background:rgba(255, 255, 255, .03); border-color:var(--line-strong); color:var(--txt) }
.btn--ghost:hover{ background:rgba(255, 255, 255, .07) }
.btn--soft{ background:rgba(47, 63, 255, .10); border-color:rgba(47, 63, 255, .28); color:#cfd3ff }
.btn--soft:hover{ background:rgba(47, 63, 255, .18) }
.btn__arrow{ font-size:15px; line-height:1 }
.btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }

/* ============================ БЕГУЩАЯ СТРОКА ============================= */
.ticker{
  overflow:hidden; border-bottom:1px solid var(--line);
  background:rgba(255, 255, 255, .02);
}
.ticker__track{ display:flex; width:max-content; animation:ticker 46s linear infinite }
.ticker__track span{
  padding:9px 0; font-size:12.5px; color:#7b81ae; white-space:nowrap; letter-spacing:.01em;
}
@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
@media (prefers-reduced-motion:reduce){ .ticker__track{ animation:none } }

/* ============================ HERO ======================================= */
.hero{ padding:56px 0 40px }
.hero__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:center }

.pill-status{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:999px; font-size:12.5px; color:#a9afe0;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.pill-status .dot{ width:7px; height:7px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(36, 192, 169, .18) }

.hero__title{
  margin:20px 0 18px;
  font-size:clamp(32px,3.6vw,52px); font-weight:800; letter-spacing:-.025em; line-height:1.1;
}
.hero__title .accent{
  background:linear-gradient(90deg,#4d60ff,#2f3fff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lead{ max-width:520px; color:var(--txt-2); font-size:15.5px }

.hero__actions{ display:flex; gap:12px; margin:26px 0 34px; flex-wrap:wrap }

.stats{ display:grid; grid-template-columns:repeat(4,auto); gap:34px; justify-content:start }
.stats li{ display:flex; flex-direction:column; gap:2px }
.stats b{ font-size:20px; font-weight:700 }
.stats span{ font-size:12.5px; color:var(--muted) }

.hero__media img{ width:100%; border-radius:14px }

/* ============================ ОБЩЕЕ ДЛЯ СЕКЦИЙ =========================== */
.section{ padding:74px 0 }
.section-head{ text-align:center; max-width:720px; margin:0 auto 40px }
.eyebrow{
  display:inline-block; margin-bottom:12px;
  font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#5c66c4;
}
.section-head h2{ font-size:clamp(26px,2.6vw,36px); font-weight:700 }
.section-sub{ margin-top:12px; color:var(--muted); font-size:14.5px }

.card{
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
  border-radius:var(--radius);
}

/* ============================ ТАРИФЫ ===================================== */
.plans{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.plan{
  position:relative; padding:22px 22px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
  display:flex; flex-direction:column;
}
.plan--best{
  border-color:rgba(47, 63, 255, .55);
  background:linear-gradient(180deg,rgba(23, 28, 94, .95),rgba(12, 14, 52, .95));
  box-shadow:0 0 0 1px rgba(47, 63, 255, .18),0 18px 48px rgba(20, 22, 180, .28);
}
.plan__badge{
  position:absolute; top:-11px; left:22px;
  padding:4px 12px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  background:linear-gradient(180deg,#3b4bff,#1b24e0); color:#ffffff;
  box-shadow:0 6px 16px rgba(27, 36, 224, .4);
}
.plan__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px }
.plan__name{ font-size:15px; font-weight:600; color:var(--txt-2); padding-top:6px }
.plan__icon{ width:58px; height:58px; object-fit:contain; border-radius:10px; flex:0 0 auto }
.plan__price{ margin-top:10px; font-size:36px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.plan__price span{ font-size:20px; font-weight:600; color:var(--muted) }
.plan__note{ margin-top:8px; font-size:12.5px; color:var(--muted) }
.plan__list{ margin:18px 0 20px; display:grid; gap:9px; flex:1 1 auto }
.plan__list li{ position:relative; padding-left:22px; font-size:13.5px; color:var(--txt-2) }
.plan__list li::before{
  content:''; position:absolute; left:0; top:6px; width:13px; height:8px;
  border-left:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(-45deg);
}
.plan--best .plan__list li::before{ border-color:#7f8cff }

.pay-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
  margin-top:26px;
}
.pay-row li{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 16px; border-radius:999px; font-size:12.5px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.pay-row svg{ width:16px; height:16px; fill:none; stroke:#6f77ff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }

/* ============================ ШАГИ ======================================= */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.step{
  padding:22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.step__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px }
.step__num{ font-size:26px; font-weight:800; letter-spacing:-.02em; color:#3d4699 }
.step__head img{ width:46px; height:44px; object-fit:contain; border-radius:10px }
.step h3{ font-size:16px; margin-bottom:8px }
.step p{ font-size:13.5px; color:var(--muted) }

/* ============================ ПЛАТФОРМЫ ================================== */
.devices{ display:flex; justify-content:center; margin-bottom:28px }
.devices img{ width:100%; max-width:920px }

.platforms{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.platform{
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 16px 9px 10px; border-radius:14px;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
  font-size:13.5px; color:var(--txt-2); transition:.18s;
}
.platform img{ width:34px; height:26px; object-fit:cover; border-radius:6px }
.platform__arrow{ font-style:normal; color:#4d5ab8; font-size:13px }
.platform:hover{ background:rgba(47, 63, 255, .10); border-color:rgba(47, 63, 255, .3) }
.platform.is-active{
  background:rgba(47, 63, 255, .14); border-color:rgba(47, 63, 255, .5); color:#ffffff;
  box-shadow:0 8px 22px rgba(27, 36, 224, .2);
}

/* ============================ ПРЕИМУЩЕСТВА =============================== */
.features{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.feature{
  position:relative; padding:22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.feature__icon{ width:48px; height:44px; object-fit:contain; border-radius:10px; margin-bottom:14px }
.feature h3{ font-size:16px; margin-bottom:8px }
.feature p{ font-size:13.5px; color:var(--muted) }
.feature__map{ margin-top:16px }
.feature__map img{ width:100%; max-width:320px; border-radius:10px }
.feature--sm .feature__icon{ width:40px; height:30px }

/* ============================ ОТЗЫВЫ ===================================== */
.reviews{ display:grid; grid-template-columns:300px 1fr; gap:40px; align-items:center }
.reviews__aside h2{ font-size:clamp(30px,3vw,42px); margin-bottom:6px }
.reviews__avatars{ width:180px; margin:6px 0 4px }
.reviews__count{ margin-top:10px; font-size:13px; color:var(--muted) }
.reviews__count b{ display:block; color:var(--txt); font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.2 }

.reviews__slider{ min-width:0 }
.reviews__viewport{ overflow:hidden }
.reviews__track{ display:flex; gap:16px; transition:transform .35s ease }
.review{
  flex:0 0 calc(50% - 8px); min-width:0;
  padding:24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.review__quote{ display:block; font-size:60px; line-height:.78; height:30px; color:#3b47b8; margin-bottom:12px; font-family:Georgia,"Times New Roman",serif }
.review h3{ font-size:16px; margin-bottom:10px }
.review p{ font-size:13.5px; color:var(--muted) }
.review__author{ display:flex; align-items:center; gap:10px; margin-top:18px;
  font-size:13px; color:var(--txt-2) }
.review__author i{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:12px; font-weight:600; color:#cfd3ff;
  background:rgba(47, 63, 255, .18); border:1px solid rgba(47, 63, 255, .3);
}
.reviews__nav{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px }
.rnav{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); color:var(--txt-2);
  transition:.18s;
}
.rnav:hover{ background:rgba(47, 63, 255, .14); border-color:rgba(47, 63, 255, .4); color:#ffffff }

/* ============================ FAQ ======================================== */
.faq{ display:grid; grid-template-columns:330px 1fr; gap:40px; align-items:start }
.faq__aside h2{ font-size:clamp(28px,2.8vw,38px); margin-bottom:4px }
.faq__aside .section-sub{ margin:12px 0 20px; text-align:left }
.faq__btn{ width:100%; border-radius:12px }
.faq__support{
  display:flex; align-items:center; gap:14px; margin-top:14px;
  padding:14px 16px; border-radius:var(--radius);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.faq__support img{ width:40px; height:40px; object-fit:contain; border-radius:10px; flex:0 0 auto }
.faq__support b{ display:block; font-size:14px }
.faq__support span{ font-size:12.5px; color:var(--muted) }

.faq__list{ display:grid; gap:10px }
.qa{
  border-radius:var(--radius-sm);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:15px 48px 15px 18px; font-size:14.5px; font-weight:500; color:var(--txt);
}
.qa summary::-webkit-details-marker{ display:none }
.qa summary::after{
  content:''; position:absolute; right:20px; top:50%; width:11px; height:11px;
  margin-top:-5px;
  background:
    linear-gradient(#7f8cff,#7f8cff) center/11px 1.6px no-repeat,
    linear-gradient(#7f8cff,#7f8cff) center/1.6px 11px no-repeat;
  transition:transform .2s;
}
.qa[open] summary::after{ transform:rotate(45deg) }
.qa__body{ padding:0 48px 16px 18px }
.qa__body p{ font-size:13.5px; color:var(--muted) }

/* ============================ СРАВНЕНИЕ ================================== */
.table-wrap{
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.ctable{ width:100%; border-collapse:collapse; font-size:14px }
.ctable th{
  text-align:left; padding:16px 22px; font-size:12.5px; font-weight:600; color:var(--muted);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.ctable td{ padding:16px 22px; border-bottom:1px solid rgba(94, 107, 224, .09); color:var(--txt-2) }
.ctable tr:last-child td{ border-bottom:0 }
.ctable__name{ color:var(--txt); font-weight:500 }
.ctable tr.is-best td{ background:rgba(47, 63, 255, .10) }
.ctable tr.is-best td:first-child{ box-shadow:inset 3px 0 0 var(--blue) }

.tag{
  display:inline-block; margin-left:8px; padding:3px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.tag--green{ background:rgba(36, 192, 169, .16); color:#5ee0cb; border:1px solid rgba(36, 192, 169, .32) }
.tag--blue{ background:rgba(47, 63, 255, .18); color:#9da7ff; border:1px solid rgba(47, 63, 255, .4) }

.table-note{
  display:flex; align-items:flex-start; gap:10px; margin-top:16px;
  font-size:12.5px; color:var(--muted);
}
.table-note svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px;
  fill:none; stroke:#5c66c4; stroke-width:1.5; stroke-linecap:round }

/* ============================ КОМУ ПОДХОДИТ ============================== */
.cases{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.case{
  padding:22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.case__media{ border-radius:var(--radius-sm); overflow:hidden; margin-bottom:18px }
.case__media img{ width:100%; height:120px; object-fit:cover }
.case__media .blend{
  -webkit-mask-image:radial-gradient(140% 150% at 50% 45%,#000000 62%,transparent 100%);
          mask-image:radial-gradient(140% 150% at 50% 45%,#000000 62%,transparent 100%);
}
.case h3{ font-size:16px; margin-bottom:8px }
.case p{ font-size:13.5px; color:var(--muted) }

/* ============================ ПРИВАТНОСТЬ ================================ */
.privacy{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.privacy__left{
  padding:28px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.privacy__left h2{ font-size:clamp(26px,2.4vw,32px) }
.privacy__left .section-sub{ text-align:left; margin:12px 0 0 }
.privacy__art{ display:flex; justify-content:center; margin:18px 0 22px }
.privacy__art img{ width:100%; max-width:400px }
.privacy__art .blend{
  -webkit-mask-image:radial-gradient(125% 135% at 50% 50%,#000000 72%,transparent 100%);
  -webkit-mask-composite:source-over;
  mask-image:radial-gradient(125% 135% at 50% 50%,#000000 72%,transparent 100%);
  mask-composite:add;
}
.privacy__chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.privacy__chips li{
  padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.privacy__chips b{ display:block; font-size:13px; margin-bottom:3px }
.privacy__chips span{ font-size:11.5px; color:var(--muted); line-height:1.4; display:block }

.privacy__right{ display:grid; gap:12px }
.pitem{
  display:flex; gap:16px; padding:22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.pitem img{ width:44px; height:28px; object-fit:contain; border-radius:8px; flex:0 0 auto; margin-top:3px }
.pitem h3{ font-size:15px; margin-bottom:7px }
.pitem p{ font-size:13.5px; color:var(--muted) }

/* ============================ СТАТЬЯ ===================================== */

.article__body{
  padding:28px 30px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.article__body h3{ font-size:19px; margin:26px 0 12px }
.article__body h3:first-child{ margin-top:0 }
.article__body p{ font-size:14.5px; color:var(--txt-2); margin-bottom:12px }
.article__body p:last-child{ margin-bottom:0 }

/* ============================ ПОДВАЛ ===================================== */
.site-footer{ border-top:1px solid var(--line); padding:34px 0; margin-top:40px }
.site-footer__top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:28px }
.site-footer__brand p{ margin-top:12px; max-width:320px; font-size:13px; color:var(--muted) }
.site-footer__col{ display:flex; flex-direction:column; gap:9px }
.site-footer__col b{ font-size:13.5px; margin-bottom:3px }
.site-footer__col a{ font-size:13.5px; color:var(--txt-2) }
.site-footer__col a:hover{ color:#ffffff }
.site-footer__bottom{ display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  padding-top:20px; border-top:1px solid var(--line) }
.site-footer__bottom p{ font-size:12.5px; color:var(--muted) }
.site-footer__tg{ display:inline-flex; align-items:center; gap:9px; margin-left:auto;
  padding:8px 16px 8px 8px; border-radius:999px; font-size:13px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); transition:.18s }
/* Заливка задана вместе с размером во всех трёх контекстах кнопки: в виде 4
   она лежит на .btn--primary, а .btn svg заливает обратное (fill:none плюс
   обводка) и перебивает одноклассовое правило. Два класса весят больше. */
.site-footer__tg .tg-ico,.ft-tg .tg-ico,.ft4__tg .tg-ico{
  width:22px; height:22px; fill:currentColor; stroke:none; flex:0 0 auto }
.site-footer__tg:hover{ background:rgba(47, 63, 255, .12); border-color:rgba(47, 63, 255, .3); color:#ffffff }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .nav{ gap:16px }
  .nav > a{ font-size:13px }
}

@media (max-width:1024px){
  .nav{ display:none }
  .burger{ display:flex; margin-left:auto }
  .site-header.is-open .nav{
    display:flex; position:absolute; left:0; right:0; top:64px;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:8px 24px 16px;
    /* Непрозрачный фон, а не полупрозрачный с размытием: панель лежит
       поверх первого экрана, и просвечивающий текст сливается с меню. */
    background:#0b0e26; border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px rgba(3, 3, 18, .6);
    z-index:2;
  }
  .site-header.is-open .nav > a{ padding:12px 0; border-bottom:1px solid var(--line); font-size:15px }
  /* В столбце подчёркивание активного пункта растягивается во всю ширину
     и дублирует разделитель — здесь оно не нужно. */
  .site-header.is-open .nav > a.is-active::after{ display:none }
  /* В раскрытом меню кнопки становятся полноширинными и уходят вниз списка. */
  .site-header.is-open .nav__cta{ flex-direction:column; gap:8px; margin:14px 0 0 }
  .site-header.is-open .nav__cta .btn{ width:100%; padding:12px 18px; font-size:14.5px }

  .hero{ padding:40px 0 24px }
  .hero__grid{ grid-template-columns:1fr; gap:28px }
  .hero__lead{ max-width:none }

  .plans{ grid-template-columns:repeat(2,1fr) }
  .steps{ grid-template-columns:repeat(2,1fr) }
  .features{ grid-template-columns:repeat(2,1fr) }
  .cases{ grid-template-columns:repeat(2,1fr) }
  .reviews{ grid-template-columns:1fr; gap:24px; align-items:start }
  .reviews__nav{ justify-content:flex-start }
  .faq{ grid-template-columns:1fr; gap:24px }
  .privacy{ grid-template-columns:1fr }

}

@media (max-width:720px){
  .section{ padding:52px 0 }
  .section-head{ margin-bottom:28px }
  .container{ padding:0 16px }

  .hero__title{ font-size:32px }
  .hero__actions .btn{ flex:1 1 100% }
  .stats{ grid-template-columns:repeat(2,1fr); gap:16px 20px; justify-content:stretch }

  .plans{ grid-template-columns:1fr; gap:22px }
  .plan__badge{ left:50%; transform:translateX(-50%) }
  .steps{ grid-template-columns:1fr }
  .features{ grid-template-columns:1fr }
  .cases{ grid-template-columns:1fr }
  .review{ flex:0 0 100% }
  .privacy__chips{ grid-template-columns:1fr }

  .article__body{ padding:22px 18px }

  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  /* 640 не хватало: цена переносилась на две строки. Плюс запрет переноса,
     иначе таблица «складывается» вместо горизонтальной прокрутки. */
  .ctable{ min-width:720px }
  .ctable th,.ctable td{ white-space:nowrap }

  .site-footer__top{ grid-template-columns:1fr 1fr; gap:24px }
  .site-footer__tg{ margin-left:0 }
}

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ
   Блоки, которых нет на главной: шапка страницы, карточки загрузки, вкладки
   систем, диагностика, вход и оформление подписки, юридические тексты.
   ========================================================================== */

/* --- активный пункт меню --------------------------------------------------- */
.nav > a.is-active{ color:#ffffff }
.nav > a.is-active::after{
  content:''; display:block; height:2px; margin-top:5px; border-radius:2px;
  background:linear-gradient(90deg,#4d60ff,#2f3fff);
}

/* --- шапка страницы -------------------------------------------------------- */
.page-head{ padding:44px 0 8px; text-align:center }
.page-head h1{ font-size:clamp(30px,3.4vw,46px); font-weight:800; letter-spacing:-.025em }
.page-head__sub{ max-width:680px; margin:14px auto 0; color:var(--muted); font-size:15px }
.page-head__actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:26px }

.crumbs{ display:flex; justify-content:center; align-items:center; gap:8px;
  margin-bottom:18px; font-size:12.5px; color:var(--muted) }
.crumbs a{ color:#6f7add }
.crumbs a:hover{ color:#ffffff }
.crumbs i{ font-style:normal; color:#3d4585 }

.section--tight{ padding-top:34px }

/* --- кнопки, добавленные для внутренних страниц ---------------------------- */
.btn--lg{ padding:15px 26px; font-size:15px }
.btn--green{
  background:linear-gradient(180deg,#2ad0ba,#159f8c); color:#032118;
  box-shadow:0 8px 24px rgba(21, 159, 140, .28);
}
.btn--green:hover{ filter:brightness(1.07) }
.btn--store{
  gap:9px; padding:10px 18px 10px 10px; border-radius:14px; font-size:13.5px;
  background:rgba(255, 255, 255, .04); border-color:var(--line-strong); color:var(--txt);
}
.btn--store:hover{ background:rgba(47, 63, 255, .12); border-color:rgba(47, 63, 255, .35) }
/* Знаки платформ и магазинов — вектор в разметке. Цвет задан отдельным
   свойством color, чтобы активное состояние могло его перекрыть, не трогая
   заливку. Поверх .btn svg, где залито обратное (fill:none, обводка). */
.dl-ico,.dl-store-ico{ fill:currentColor; stroke:none; color:#6f77ff; flex:0 0 auto }
/* Заливка повторена здесь нарочно: .btn svg заливает обратное (fill:none и
   обводка) и по весу перебивает одноклассовый .dl-store-ico — знаки выходили
   контурными. Правило с двумя классами весит больше. */
.btn--store .dl-store-ico{ width:20px; height:20px; fill:currentColor; stroke:none }
.btn--primary img{ width:22px; height:22px; object-fit:contain }

/* --- карточки загрузки ----------------------------------------------------- */
.dl-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dl-card{
  display:flex; flex-direction:column; padding:22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.dl-card__head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:14px }
.dl-card__head .dl-ico{ width:38px; height:38px }
.dl-card__head h2{ font-size:16px; margin-bottom:5px }
.dl-card__req{ font-size:12.5px; color:var(--muted) }
.dl-card > p{ font-size:13.5px; color:var(--muted); flex:1 1 auto }
.dl-card__btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px }
.dl-card__more{ margin-top:16px; font-size:13.5px; color:#6f7add }
.dl-card__more:hover{ color:#ffffff }
.dl-card__more span{ margin-left:4px }

/* --- предупреждающая плашка ------------------------------------------------ */
.notice{
  display:flex; align-items:flex-start; gap:12px; margin-top:20px;
  padding:15px 18px; border-radius:var(--radius-sm); font-size:13.5px; line-height:1.5;
}
.notice svg{ width:20px; height:20px; flex:0 0 auto; margin-top:1px;
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round }
.notice--warn{
  color:#e8e96a; background:rgba(232, 233, 106, .07); border:1px solid rgba(232, 233, 106, .28);
}
.notice--warn b{ color:#f2f4a0 }

/* --- нижняя полоса с призывом ---------------------------------------------- */
.cta-bar{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  margin-top:20px; padding:20px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(20, 24, 68, .9),rgba(12, 14, 42, .9));
  border:1px solid var(--line-strong);
}
.cta-bar b{ display:block; font-size:16px; margin-bottom:4px }
.cta-bar span{ font-size:13.5px; color:var(--muted) }
.cta-bar__btns{ display:flex; gap:10px; flex-wrap:wrap; margin-left:auto }
/* Скругление обязательно: у иконки поддержки дуга по яркости почти
   равна фону, вырезать фон без потери дуги нельзя — поэтому она живёт
   плиткой, как и остальные иконки с непрозрачным фоном. */
.cta-bar__ico img{ width:44px; height:44px; object-fit:cover; border-radius:12px }

/* --- вкладки систем -------------------------------------------------------- */
.ostabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:24px }
.ostab{
  padding:11px 24px; border-radius:14px; cursor:pointer; font-size:14px; font-weight:500;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); color:var(--txt-2);
  transition:.18s;
}
.ostab:hover{ background:rgba(47, 63, 255, .10); border-color:rgba(47, 63, 255, .3) }
.ostab.is-active{
  background:rgba(47, 63, 255, .16); border-color:rgba(47, 63, 255, .55); color:#ffffff;
  box-shadow:0 8px 22px rgba(27, 36, 224, .22);
}

/* --- настройка: иллюстрация + шаги ----------------------------------------- */
.setup{ display:grid; grid-template-columns:400px 1fr; gap:20px; align-items:start }
.setup__art{
  position:relative; display:grid; place-items:center; padding:26px;
  border-radius:var(--radius); min-height:420px;
  background:radial-gradient(120% 90% at 50% 40%,rgba(29, 38, 190, .20),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.setup__art img{ width:100%; max-width:300px }
.setup__panels{ min-width:0 }
.ospanel{ display:none }
.ospanel.is-active{ display:block }
.ospanel__req{
  display:inline-block; margin-bottom:14px; padding:6px 16px; border-radius:999px;
  font-size:12.5px; font-weight:600; color:#5ee0cb;
  background:rgba(36, 192, 169, .14); border:1px solid rgba(36, 192, 169, .34);
}

/* --- вертикальные пронумерованные шаги ------------------------------------- */
.vsteps{ display:grid; gap:12px; counter-reset:none; padding:0; margin:0; list-style:none }
.vsteps li{
  position:relative; display:grid; grid-template-columns:auto auto 1fr; gap:16px;
  align-items:start; padding:20px 22px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.vsteps__num{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#9da7ff;
  background:rgba(47, 63, 255, .14); border:1px solid rgba(47, 63, 255, .4);
}
.vsteps li > img{ width:44px; height:44px; object-fit:contain; border-radius:10px }
.vsteps h2{ font-size:15.5px; margin-bottom:6px }
.vsteps p{ font-size:13.5px; color:var(--muted) }

/* ================= НАСТРОЙКА, ВИД 2 — лента с линией ===================== */
.st2__grid{ display:grid; grid-template-columns:1fr 320px; gap:32px; align-items:start }
.st2__main{ min-width:0 }
.st2 .ostabs{ justify-content:flex-start }
.stline{ display:grid; gap:16px; padding:0; margin:0; list-style:none }
.stline li{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start }
/* Линия идёт от кружка вниз до следующего, у последнего шага её нет —
   иначе лента продолжалась бы в пустоту. */
.stline li::before{
  content:''; position:absolute; left:17px; top:40px; bottom:-16px; width:2px;
  background:linear-gradient(180deg,rgba(47, 63, 255, .55),rgba(47, 63, 255, .10));
}
.stline li:last-child::before{ display:none }
.stline__num{
  position:relative; z-index:1; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:14px; font-weight:700; color:#cfd2ff;
  background:rgba(47, 63, 255, .18); border:1px solid rgba(47, 63, 255, .45);
}
.stline__card{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.stline__card img{ width:44px; height:44px; object-fit:contain; border-radius:10px }
.stline h2{ font-size:15.5px; margin-bottom:6px }
.stline p{ font-size:13.5px; color:var(--muted) }
.st2__art{
  padding:22px; border-radius:var(--radius); border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 30%,rgba(29, 38, 190, .20),transparent 70%);
}
.st2__art img{ width:100%; max-width:230px; margin:0 auto; display:block }
/* Подсказка стоит в узкой колонке — раскладываем её сверху вниз,
   иначе кнопка вылезает за край. */
.cta-bar--stack{ flex-direction:column; align-items:flex-start; text-align:left }
.cta-bar--stack .cta-bar__btns{ margin-left:0 }
.st2__help{ margin-top:16px }

/* ================= НАСТРОЙКА, ВИД 3 — телефон в центре =================== */
/* Места карточек заданы явными классами, а не порядком в разметке: телефон
   лежит в той же сетке пятым элементом, и nth-child считал бы и его. */
.st3__grid{ display:grid; grid-template-columns:1fr 260px 1fr; gap:18px; align-items:center }
.st3__card{
  position:relative;
  display:grid; grid-template-columns:auto auto 1fr; gap:14px; align-items:start;
  padding:18px 20px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.st3__card--1{ grid-column:1; grid-row:1 }
.st3__card--3{ grid-column:1; grid-row:2 }
.st3__card--2{ grid-column:3; grid-row:1 }
.st3__card--4{ grid-column:3; grid-row:2 }
/* Пунктирные связки от карточек к телефону — они и делают вид «звездой».
   Линия рисуется в зазоре сетки, поэтому её длина равна gap. */
.st3__card::after{
  content:''; position:absolute; top:50%; width:18px; height:1px;
  background:repeating-linear-gradient(90deg,rgba(47, 63, 255, .65) 0 4px,transparent 4px 8px);
}
.st3__card--1::after,.st3__card--3::after{ left:100% }
.st3__card--2::after,.st3__card--4::after{ right:100% }
.st3__core{ grid-column:2; grid-row:1 / span 2; display:grid; place-items:center }
.st3__core img{ width:100%; max-width:250px }
.st3__num{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#cfd2ff;
  background:rgba(47, 63, 255, .18); border:1px solid rgba(47, 63, 255, .45);
}
.st3__card img{ width:40px; height:40px; object-fit:contain; border-radius:10px }
.st3__card h2{ font-size:15px; margin-bottom:6px }
.st3__card p{ font-size:13px; color:var(--muted) }

/* ================= НАСТРОЙКА, ВИД 4 — шаги в ряд ========================= */
.st4__grid{ display:grid; grid-template-columns:290px 1fr; gap:28px; align-items:center }
.st4__panels{ min-width:0 }
.st4__art{
  padding:20px; border-radius:var(--radius); border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 30%,rgba(29, 38, 190, .20),transparent 70%);
}
.st4__art img{ width:100%; max-width:230px; margin:0 auto; display:block }
.st4__row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:stretch }
.st4__card{
  display:flex; flex-direction:column; gap:10px; padding:18px;
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
}
.st4__top{ display:flex; align-items:center; gap:10px }
.st4__num{
  width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; color:#cfd2ff;
  background:rgba(47, 63, 255, .18); border:1px solid rgba(47, 63, 255, .45); flex:0 0 auto;
}
.st4__card img{ width:36px; height:36px; object-fit:contain; border-radius:9px }
.st4__card h2{ font-size:14.5px }
.st4__card p{ font-size:12.5px; color:var(--muted) }

/* ================= НАСТРОЙКА, ВИД 5 — бенто ============================== */
.st5__grid{ display:grid; grid-template-columns:330px 1fr; gap:26px; align-items:start }
.st5__panels{ min-width:0 }
.st5__art{
  padding:24px; border-radius:var(--radius); border:1px solid var(--line);
  background:radial-gradient(120% 90% at 50% 30%,rgba(29, 38, 190, .22),transparent 70%);
}
.st5__art img{ width:100%; max-width:250px; margin:0 auto; display:block }
.st5__bento{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.st5__card{
  display:grid; gap:12px; padding:18px 20px; border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
}
/* Первый шаг занимает всю ширину и подсвечен: с него начинают, и в бенто
   он должен читаться как точка входа, а не как одна из четырёх равных. */
.st5__card--lead{
  grid-column:1 / -1; grid-template-columns:auto 1fr; align-items:center;
  border-color:rgba(47, 63, 255, .45);
  background:linear-gradient(180deg,rgba(23, 28, 94, .95),rgba(12, 14, 52, .95));
}
.st5__top{ display:flex; align-items:center; gap:10px }
.st5__num{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#cfd2ff;
  background:rgba(47, 63, 255, .18); border:1px solid rgba(47, 63, 255, .45); flex:0 0 auto;
}
.st5__card img{ width:38px; height:38px; object-fit:contain; border-radius:10px }
.st5__card h2{ font-size:14.5px; margin-bottom:6px }
.st5__card--lead h2{ font-size:17px }
.st5__card p{ font-size:12.5px; color:var(--muted) }
.st5__card--lead p{ font-size:13.5px }

/* --- настройка: адаптив ---------------------------------------------------
   Все четыре новых вида построены на многоколоночных сетках. На узком экране
   колонки не сужаются, а складываются в одну: сжатая до 100 px колонка с
   текстом не читается вовсе. */
@media (max-width:1024px){
  .st2__grid{ grid-template-columns:1fr; gap:24px }
  .st2 .ostabs{ justify-content:center }
  .st2__side{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start }
  .st2__help{ margin-top:0 }

  .st3__grid{ grid-template-columns:1fr; gap:14px }
  .st3__card--1,.st3__card--2,.st3__card--3,.st3__card--4{ grid-column:1; grid-row:auto }
  /* Телефон поднимается наверх: в одну колонку он иначе оказывается под
     всеми шагами, а он здесь — предмет рассказа, а не итог. */
  .st3__core{ grid-column:1; grid-row:auto; order:-1 }
  .st3__card::after{ display:none }

  .st4__grid{ grid-template-columns:1fr; gap:22px }
  .st4__row{ grid-template-columns:repeat(2,1fr) }

  .st5__grid{ grid-template-columns:1fr; gap:22px }
  .st5__bento{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:720px){
  .st2__side{ grid-template-columns:1fr }
  .st3__card{ grid-template-columns:auto auto 1fr }
  .st4__row{ grid-template-columns:1fr }
  .st5__bento{ grid-template-columns:1fr }
  .st5__card--lead{ grid-template-columns:1fr }
  .stline li{ gap:12px }
  .stline__card{ grid-template-columns:1fr; gap:10px }
}

/* --- диагностика ----------------------------------------------------------- */
.diag{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start }
.diag__side{
  padding:26px 22px; border-radius:var(--radius); text-align:center;
  background:radial-gradient(110% 80% at 50% 30%,rgba(29, 38, 190, .20),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.diag__side h2{ font-size:22px; margin-bottom:12px }
.diag__side img{ width:100%; max-width:230px; margin:0 auto }
.diag__note{ margin-top:10px; font-size:12.5px; color:var(--muted) }
.diag__list{ display:grid; gap:10px; min-width:0 }

/* цветная точка перед вопросом: красная — отказ, жёлтая — ухудшение */
.qa--dot summary{ padding-left:40px }
.qa--dot summary::before{
  content:''; position:absolute; left:18px; top:50%; margin-top:-4px;
  width:8px; height:8px; border-radius:50%;
}
.qa--red summary::before{ background:#f27363; box-shadow:0 0 0 3px rgba(242, 115, 99, .16) }
.qa--yellow summary::before{ background:#e8e96a; box-shadow:0 0 0 3px rgba(232, 233, 106, .16) }
.qa--dot .qa__body{ padding-left:40px }

/* --- вход и регистрация ---------------------------------------------------- */
.authtabs{
  display:flex; gap:6px; max-width:420px; margin:0 auto 24px; padding:6px;
  border-radius:16px; background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.authtab{
  flex:1 1 50%; padding:11px 18px; border-radius:11px; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--txt-2);
  background:transparent; border:0; transition:.18s;
}
.authtab.is-active{
  background:linear-gradient(180deg,#3b4bff,#1b24e0); color:#ffffff;
  box-shadow:0 8px 20px rgba(27, 36, 224, .32);
}
.authpanel{ display:none }
.authpanel.is-active{ display:block }

.auth{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(17, 20, 55, .9),rgba(10, 12, 35, .9));
}
.auth__art{
  position:relative; padding:34px; display:grid; place-items:center; gap:18px;
  border-right:1px solid var(--line);
  background:radial-gradient(120% 90% at 40% 35%,rgba(29, 38, 190, .22),transparent 70%);
}
.auth__brand{ text-align:center }
.auth__brand .logo__name{ font-size:30px; font-weight:800 }
.auth__brand-soft{ font-size:30px; font-weight:400; color:#7f8be0 }
.auth__brand b{ display:block; margin-top:4px; font-size:15px; font-weight:500; color:var(--muted) }
.auth__art img{ width:100%; max-width:340px }
.auth__badge{
  display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px;
  font-size:13px; font-weight:600; color:#5ee0cb;
  background:rgba(36, 192, 169, .14); border:1px solid rgba(36, 192, 169, .36);
}
.auth__badge::before{ content:''; width:8px; height:8px; border-radius:50%; background:#24c0a9 }
.auth__form{ padding:34px }
.auth__form h2{ font-size:26px; margin-bottom:22px }
.auth__switch{ margin-top:16px; font-size:13px; color:var(--muted); text-align:center }
.linklike{ background:none; border:0; padding:0; cursor:pointer; color:#6f7add; font-size:13px }
.linklike:hover{ color:#ffffff }

/* --- поля формы ------------------------------------------------------------ */
.field{ display:block; margin-bottom:18px }
.field__label{ display:flex; align-items:center; gap:8px; margin-bottom:8px;
  font-size:13.5px; font-weight:600 }
.field__label img{ width:20px; height:20px; object-fit:contain }
.field input[type=text],.field input[type=email],.field input[type=password],.field select{
  width:100%; padding:14px 16px; border-radius:12px; font:inherit; font-size:14px;
  color:var(--txt); background:rgba(6, 7, 25, .72); border:1px solid var(--line-strong);
  outline:none; transition:.18s;
}
.field input:focus,.field select:focus{ border-color:rgba(47, 63, 255, .6);
  box-shadow:0 0 0 3px rgba(47, 63, 255, .14) }
.field input::placeholder{ color:#5c65a6 }
.field__hint{ display:block; margin-top:7px; font-size:12px; color:var(--muted) }
.promo{ display:flex; gap:8px }
.promo input{ flex:1 1 auto }
.promo .btn{ flex:0 0 auto; border-radius:12px }

.agree{ display:flex; align-items:flex-start; gap:10px; margin:4px 0 16px;
  font-size:12.5px; color:var(--muted); line-height:1.5 }
.agree input{ margin-top:2px; width:16px; height:16px; accent-color:#2f3fff; flex:0 0 auto }
.agree a{ color:#6f7add }
.agree a:hover{ color:#ffffff }

/* --- оформление подписки --------------------------------------------------- */
.checkout{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start }
.checkout__main,.checkout__side{
  padding:28px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.checkout__main h2,.checkout__side h2{ font-size:24px; margin-bottom:22px }

.cstep{ display:flex; align-items:center; gap:12px; margin:26px 0 14px }
.cstep:first-of-type{ margin-top:0 }
.cstep h3{ font-size:16px }
.cstep__num{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:#9da7ff;
  background:rgba(47, 63, 255, .14); border:1px solid rgba(47, 63, 255, .4);
}
.cgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px }

.devs{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:10px }
.dev{
  padding:16px 0; border-radius:12px; cursor:pointer; font-size:17px; font-weight:600;
  color:var(--txt-2); background:rgba(255, 255, 255, .03); border:1px solid var(--line);
  transition:.18s;
}
.dev:hover{ background:rgba(47, 63, 255, .10) }
.dev.is-active{ background:rgba(47, 63, 255, .16); border-color:rgba(47, 63, 255, .6); color:#ffffff;
  box-shadow:0 8px 20px rgba(27, 36, 224, .22) }
.dev[disabled]{ opacity:.35; cursor:not-allowed }

.plans-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.pick{
  position:relative; display:block; padding:18px 18px 18px 46px; border-radius:14px;
  cursor:pointer; background:rgba(255, 255, 255, .03); border:1px solid var(--line);
  transition:.18s;
}
.pick:hover{ border-color:var(--line-strong) }
.pick input{ position:absolute; opacity:0; pointer-events:none }
.pick__dot{
  position:absolute; left:18px; top:20px; width:16px; height:16px; border-radius:50%;
  border:1.6px solid #4d5ab8;
}
.pick input:checked ~ .pick__dot{ border-color:#2f3fff }
.pick input:checked ~ .pick__dot::after{
  content:''; position:absolute; inset:3px; border-radius:50%; background:#2f3fff;
}
.pick--trial input:checked ~ .pick__dot{ border-color:#24c0a9 }
.pick--trial input:checked ~ .pick__dot::after{ background:#24c0a9 }
.pick:has(input:checked){ border-color:rgba(47, 63, 255, .6); background:rgba(47, 63, 255, .10) }
.pick--trial:has(input:checked){ border-color:rgba(36, 192, 169, .6); background:rgba(36, 192, 169, .08) }
.pick__name{ display:block; font-size:13.5px; color:var(--txt-2) }
.pick__price{ display:block; margin-top:4px; font-size:22px; font-weight:800; letter-spacing:-.02em }
.pick__note{ display:block; margin-top:3px; font-size:11.5px; color:var(--muted) }
.pick__badge{
  position:absolute; top:14px; right:14px; padding:3px 10px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:linear-gradient(180deg,#3b4bff,#1b24e0); color:#ffffff;
}

.order{
  padding:18px 20px; border-radius:14px; margin-bottom:20px;
  background:rgba(6, 7, 25, .6); border:1px solid var(--line);
}
.order__head{ display:flex; align-items:center; gap:12px; margin-bottom:14px }
.order__head img{ width:28px; height:28px; object-fit:contain }
.order__cart{ width:28px; height:28px; fill:none; stroke:#6f77ff; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.order__head b{ font-size:16px }
.order__row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 0; font-size:14px; color:var(--txt-2) }
.order__row span{ display:inline-flex; align-items:center; gap:9px }
.order__row img{ width:20px; height:20px; object-fit:contain }
.order__row--muted{ color:var(--muted); font-size:13px }
.order__total{ display:flex; align-items:center; justify-content:space-between;
  margin-top:10px; padding-top:14px; border-top:1px solid var(--line); font-size:15px }
.order__total b{ font-size:26px; font-weight:800; letter-spacing:-.02em }

/* --- сводка цифр ----------------------------------------------------------- */
.specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.spec{
  padding:22px; border-radius:var(--radius); text-align:center;
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.spec b{ display:block; font-size:28px; font-weight:800; letter-spacing:-.02em }
.spec span{ display:block; margin-top:5px; font-size:12.5px; color:var(--muted) }

/* --- страница платформы ---------------------------------------------------- */
.plat{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start }
.plat__card{
  padding:28px 24px; border-radius:var(--radius); text-align:center;
  background:radial-gradient(110% 80% at 50% 25%,rgba(29, 38, 190, .20),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.plat__icon{ width:76px; height:76px; object-fit:contain; margin:0 auto 14px; border-radius:16px }
.plat__card b{ display:block; font-size:20px }
.plat__req{ display:block; margin-top:6px; font-size:12.5px; color:var(--muted) }
.plat__card .dl-card__btns{ justify-content:center }
.plat__hint{ margin-top:14px; font-size:12px; color:var(--muted) }
.plat__steps{ min-width:0 }
.plat__steps-title{ font-size:20px; margin-bottom:14px }

/* --- юридические тексты ---------------------------------------------------- */
/* Плашка-предупреждение на юридических страницах равняется по ширине
   самого документа, иначе она шире текста и выглядит чужой. */
.legal-note{ max-width:860px; margin-left:auto; margin-right:auto }
.legal{
  max-width:860px; margin:0 auto; padding:32px 34px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.legal h2{ font-size:19px; margin:28px 0 12px }
.legal h2:first-child{ margin-top:0 }
.legal p{ margin-bottom:10px; font-size:14px; color:var(--txt-2) }
.legal b{ color:#e8eaff }
.legal a{ color:#6f7add }
.legal a:hover{ color:#ffffff }

/* ============================ АДАПТИВ ВНУТРЕННИХ =========================== */
@media (max-width:1024px){
  .dl-grid{ grid-template-columns:repeat(2,1fr) }
  .setup{ grid-template-columns:1fr }
  .setup__art{ min-height:0 }
  .setup__art img{ max-width:240px }
  .diag{ grid-template-columns:1fr }
  .auth{ grid-template-columns:1fr }
  .auth__art{ border-right:0; border-bottom:1px solid var(--line) }
  .checkout{ grid-template-columns:1fr }
  .plat{ grid-template-columns:1fr }
  .plans-pick{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:720px){
  .page-head{ padding:28px 0 4px }
  .section--tight{ padding-top:24px }
  .dl-grid{ grid-template-columns:1fr }
  .specs{ grid-template-columns:repeat(2,1fr) }
  .cta-bar{ flex-direction:column; align-items:flex-start }
  .cta-bar__btns{ margin-left:0; width:100% }
  .cta-bar__btns .btn{ flex:1 1 auto; justify-content:center }
  .ostabs{ gap:8px }
  .ostab{ padding:9px 16px; font-size:13px }
  .vsteps li{ grid-template-columns:auto 1fr; row-gap:10px }
  .vsteps li > img{ grid-row:1; justify-self:end }
  .vsteps li > div{ grid-column:1 / -1 }
  .cgrid{ grid-template-columns:1fr }
  .devs{ grid-template-columns:repeat(5,1fr); gap:6px }
  .dev{ padding:13px 0; font-size:15px }
  .plans-pick{ grid-template-columns:1fr }
  .checkout__main,.checkout__side,.auth__form,.auth__art{ padding:22px 18px }
  .legal{ padding:22px 18px }
  .site-footer__top{ grid-template-columns:1fr }
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН, ВАРИАНТ 2
   Отличия от первого: плашка статуса с разделителем, цифры в общей рамке,
   иллюстрация крупнее и шире текстовой колонки. Всё под модификатором
   .hero--2, чтобы варианты не мешали друг другу.
   ========================================================================== */

.hero--2{ padding:46px 0 52px }
/* Первый экран этого варианта шире остальных секций: в макете иллюстрация
   занимает больше половины ширины, и при контейнере 1200px заголовку остаётся
   меньше 470px — он ломается на три строки. Расширяем контейнер, а не сжимаем
   текстовую колонку. */
.hero--2 .container{ max-width:1320px }
.hero--2 .hero__grid{ grid-template-columns:1fr 1.22fr; gap:24px }
.hero--2 .hero__media--art img{ max-width:none; width:108% }
.hero--2 .hero__title{ margin:22px 0 18px }
.hero--2 .hero__media img{ width:100%; border-radius:0 }

/* плашка «Все серверы онлайн | 120 локаций» */
.pill-status--split{ gap:12px; padding:7px 18px }
.pill-status--split em{
  display:inline-block; width:1px; height:15px; background:var(--line-strong);
}

/* цифры в общей рамке с вертикальными разделителями */
.stats--boxed{
  display:inline-grid; grid-template-columns:repeat(4,auto); gap:0;
  padding:16px 4px; border-radius:16px;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.stats--boxed li{ padding:0 24px; border-left:1px solid var(--line) }
.stats--boxed li:first-child{ border-left:0 }
.stats--boxed b{ font-size:22px }

@media (max-width:1024px){
  .hero--2 .hero__grid{ grid-template-columns:1fr }
  /* Вылет за колонку рассчитан на две колонки. Когда экран схлопывается
     в одну, те же 108% режут иллюстрацию по правому краю. */
  .hero--2 .hero__media--art img{ width:100% }
}

@media (max-width:720px){
  /* В две колонки рамка перестраивается, поэтому левую границу снимаем
     у каждого первого в строке, а не только у самого первого. */
  .stats--boxed{ display:grid; grid-template-columns:repeat(2,1fr); row-gap:18px; padding:18px 4px }
  .stats--boxed li:nth-child(odd){ border-left:0 }
}

/* ==========================================================================
   ВИДЫ ШАПКИ (2–6)
   Каждый вид живёт под своим модификатором .site-header--N, чтобы виды
   не перекрывали друг друга и добавление седьмого не ломало первые шесть.
   ========================================================================== */

/* --- общая строка фактов: пункты через разделитель ------------------------ */
.ticker__pill{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  font-size:13px; color:#8b90bf; white-space:nowrap; overflow:hidden;
}
.ticker__pill i{ width:6px; height:6px; border-radius:50%; background:var(--blue); flex:0 0 auto }

/* ===================== ВАРИАНТ 2 — плавающая карточка ==================== */
.site-header--2{ background:transparent; border-bottom:0; backdrop-filter:none; padding:14px 0 0 }
.site-header--2 .header__inner{
  height:64px; padding:0 10px 0 22px; border-radius:22px;
  background:rgba(13, 16, 46, .9); border:1px solid var(--line);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 40px rgba(3, 3, 18, .45);
}
.ticker--pill{ background:transparent; border:0; overflow:visible; padding:10px 0 0 }
.ticker--pill .ticker__pill{
  padding:12px 28px; border-radius:18px;
  background:rgba(255, 255, 255, .025); border:1px solid var(--line);
}

/* ===================== ВАРИАНТ 3 — две строки ============================ */
.site-header--3{ padding:0 }
.hdr3__top{ display:flex; align-items:center; gap:24px; height:62px }
.hdr3__note{ display:inline-flex; align-items:center; gap:9px; margin:0 auto;
  font-size:13px; color:var(--txt-2); white-space:nowrap }
.hdr3__note .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue) }
.site-header--3 .nav__cta{ margin-left:0 }

/* Разделительная черта идёт во всю ширину экрана, а сами пункты меню —
   по контейнеру, вровень с логотипом и кнопками верхней строки. Раньше
   черта и пункты жили на одном элементе, и меню растягивалось до краёв. */
.hdr3__navrow{ border-top:1px solid var(--line) }
.nav--row{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:0 }
.nav--row > a{
  position:relative; text-align:center; padding:15px 8px; font-size:14px;
  border-left:1px solid var(--line);
}
.nav--row > a:first-child{ border-left:0 }
.nav--row > a.is-active::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; margin:0; height:3px;
}

/* ===================== ВАРИАНТ 4 — тёмная полоса ========================= */
.site-header--4{ padding:0; background:linear-gradient(180deg,#0a0d26,#080a20) }
.hdr4{ display:flex; align-items:stretch; min-height:92px }
.hdr4__brand{
  display:flex; align-items:center; flex:0 0 auto; padding:0 58px 0 40px;
  background:linear-gradient(120deg,rgba(32, 41, 196, .32),rgba(14, 16, 94, .20));
  clip-path:polygon(0 0,100% 0,calc(100% - 36px) 100%,0 100%);
}
.hdr4__body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  justify-content:center; padding-right:28px }
.hdr4__row{ display:flex; align-items:center; gap:16px; padding:8px 0 6px }

/* ============= ВАРИАНТ 5 — кнопка внутри меню ============================ */
.site-header--5{ padding:0; background:linear-gradient(180deg,#0b0d30,#0a0b24) }
.hdr5{ display:flex; align-items:stretch; min-height:80px }
.hdr5__brand{
  display:flex; align-items:center; flex:0 0 auto; padding:0 56px 0 40px;
  background:linear-gradient(120deg,rgba(32, 41, 196, .30),rgba(14, 16, 94, .18));
  clip-path:polygon(0 0,100% 0,calc(100% - 34px) 100%,0 100%);
}
.nav--split{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:24px;
  margin:0; padding:0 30px }
.nav--split .nav__cta{ margin-left:auto; padding-left:26px; border-left:1px solid var(--line) }
/* Кнопка стоит прямо в ряду меню, поэтому у неё своё свечение — иначе она
   теряется среди ссылок и перестаёт читаться как действие. */
.btn--pill{ border-radius:999px; padding:13px 30px; font-size:14.5px;
  box-shadow:0 0 34px rgba(47, 63, 255, .5),0 8px 24px rgba(27, 36, 224, .35) }

/* ===================== ВАРИАНТ 6 — угловатая ============================= */
.site-header--6{ padding:0; background:transparent; border-bottom:0 }
.hdr6{ display:flex; align-items:stretch; min-height:74px;
  background:linear-gradient(180deg,#0c0f33,#0a0d26);
  border-bottom:1px solid rgba(47, 63, 255, .22) }
.hdr6__brand{
  display:flex; align-items:center; flex:0 0 auto; padding:0 58px 0 40px;
  background:linear-gradient(120deg,rgba(36, 46, 208, .38),rgba(14, 16, 94, .20));
  clip-path:polygon(0 0,100% 0,calc(100% - 40px) 100%,0 100%);
}
.nav--slash{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:0;
  margin:0; padding:0 24px }
.nav--slash > a{ position:relative; padding:0 22px }
.nav--slash > a + a::before{
  content:'/'; position:absolute; left:-3px; color:#2f43b5; font-weight:300;
}
.nav--slash > a.is-active::after{ margin-top:7px }
.nav--slash .nav__cta{ margin-left:auto; padding-left:22px }
/* Срез углов у кнопок повторяет срез панели логотипа — иначе угловатый
   вид держится только на одном элементе и читается как случайность. */
.btn--cut{ border-radius:0; clip-path:polygon(11px 0,100% 0,calc(100% - 11px) 100%,0 100%) }

.ticker--cut{ background:transparent; border:0; overflow:visible; padding:0 }
.ticker__cut{
  max-width:1560px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:18px; padding:11px 70px;
  font-size:13px; color:#8b90bf; white-space:nowrap; overflow:hidden;
  background:linear-gradient(180deg,rgba(16, 20, 68, .92),rgba(10, 13, 38, .92));
  clip-path:polygon(40px 0,calc(100% - 40px) 0,100% 100%,0 100%);
}
.ticker__cut i{ width:1px; height:16px; background:var(--line-strong); flex:0 0 auto }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1024px){
  .site-header--2{ padding:10px 0 0 }
  .site-header--2 .header__inner{ height:56px; padding:0 12px 0 18px }
  .ticker--pill .ticker__pill{ padding:10px 18px }

  .hdr3__note{ display:none }
  /* Базовое «.nav{display:none}» лежит выше по файлу и с той же
     специфичностью, поэтому .nav--split и .nav--slash его перебивали и меню
     оставалось видимым на телефоне. Гасим их явно. */
  .nav--row,.nav--split,.nav--slash{ display:none }
  /* Пункты на телефоне спрятаны под бургер — черта над ними осталась бы
     висеть сама по себе. Прячем и её, но не саму обёртку: выпадающее меню
     лежит внутри неё. */
  .hdr3__navrow{ border-top:0 }
  /* Две кнопки рядом с бургером не помещаются в 500px — оставляем действие. */
  .site-header--3 .hdr3__top .nav__cta .btn--ghost{ display:none }
  .hdr3__top{ flex-wrap:wrap; gap:12px }

  /* Скос и переполнение мешают выпадающему меню: на узком экране панель
     логотипа выпрямляется, а строки-факты убираются. */
  .hdr4,.hdr5,.hdr6{ min-height:58px; align-items:center; flex-wrap:wrap }
  .hdr4__brand,.hdr5__brand,.hdr6__brand{ clip-path:none; padding:0 18px; min-height:58px }
  .ticker--cut{ display:none }
  .hdr4__body{ flex:1 1 auto; padding-right:16px }
  /* У видов 5 и 6 меню на телефоне скрыто, и бургер оставался последним
     ребёнком без поля — упирался в самый край экрана. */
  .hdr5,.hdr6{ padding-right:16px }
  .hdr4__row{ justify-content:flex-end; padding:0 }

  /* У вариантов 3–6 шапка выше 64px и своя раскладка, поэтому выпадающее
     меню идёт обычным потоком, а не абсолютом от верха, как в варианте 1. */
  /* Выпадающее меню вешаем абсолютом на саму шапку (она sticky, значит
     позиционированная), а не встраиваем в её внутреннюю раскладку: у вариантов
     4–6 меню лежит внутри вложенных колонок и в потоке съезжало вбок. */
  .site-header--3.is-open .nav,
  .site-header--4.is-open .nav,
  .site-header--5.is-open .nav,
  .site-header--6.is-open .nav{
    display:flex; position:absolute; left:0; right:0; top:100%; z-index:5;
    flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:8px 24px 16px;
    background:#0b0e26; border-top:1px solid var(--line); border-bottom:0;
    box-shadow:0 18px 40px rgba(3, 3, 18, .55);
  }
  .site-header--3.is-open .nav > a,
  .site-header--4.is-open .nav > a,
  .site-header--5.is-open .nav > a,
  .site-header--6.is-open .nav > a{
    padding:12px 0; font-size:15px; text-align:left; border:0;
    border-bottom:1px solid var(--line);
  }
  .site-header--3.is-open .nav--row{ display:flex; grid-template-columns:none }
  .site-header--5.is-open .nav .btn--pill{ margin:12px 0 4px; text-align:center }
  .site-header--6.is-open .nav > a::before{ display:none }
  .site-header--4.is-open .nav__cta,
  .site-header--5.is-open .nav__cta,
  .site-header--6.is-open .nav__cta{ margin:14px 0 0; padding:0; border:0 }
}

@media (max-width:720px){
  .ticker--pill{ display:none }
}

/* ==========================================================================
   ВИДЫ ПЕРВОГО ЭКРАНА 3–6
   Каждый под своим модификатором .hero--N. Общее между ними — только
   оформление показателей, оно вынесено в .stats--icons.
   ========================================================================== */

/* --- показатели с иконками ------------------------------------------------ */
.stats--icons{ display:flex; align-items:center; gap:0; justify-content:center }
.stats--icons li{
  /* flex-direction обязателен: базовое .stats li ставит колонку, и без
     сброса иконка встаёт НАД числом, а не слева от него. */
  display:flex; flex-direction:row; align-items:center; gap:13px; padding:0 26px;
  border-left:1px solid var(--line);
}
.stats--icons li:first-child{ border-left:0 }
.stats--icons img{ width:34px; height:34px; object-fit:contain; flex:0 0 auto }
.stats--icons b{ display:block; font-size:20px; font-weight:700; line-height:1.2 }
.stats--icons span{ font-size:12.5px; color:var(--muted) }

/* два на два — для варианта с телефоном слева */
.stats--grid2{
  display:grid; grid-template-columns:1fr 1fr; gap:0; justify-content:start;
}
.stats--grid2 li{ padding:16px 24px; border-top:1px solid var(--line) }
.stats--grid2 li:nth-child(odd){ border-left:0 }
.stats--grid2 li:nth-child(-n+2){ border-top:0 }

/* ===================== ВАРИАНТ 3 — по центру ============================= */
/* Дашборд намеренно уходит за нижний край секции: так он читается как
   продолжение экрана, а не как отдельная картинка под текстом. */
.hero--3{ padding:52px 0 0; text-align:center; overflow:hidden }
.hero3{ max-width:900px; margin:0 auto }
.hero3 .hero__lead{ max-width:730px; margin:0 auto; font-size:16px }
.hero3 .hero__actions{ justify-content:center; margin:28px 0 0 }
.hero3 .stats--icons{ margin-top:32px }
.hero3__art{ max-width:1084px; margin:30px auto -70px }
.hero3__art img{ width:100% }

/* ===================== ВАРИАНТ 4 — телефон слева ========================= */
.hero--4{ padding:36px 0 44px }
.hero--4 .hero__grid{ grid-template-columns:0.9fr 1.2fr; gap:30px; align-items:center }
.hero4__art{ display:flex; justify-content:center }
.hero4__art img{ width:100%; max-width:430px }
.hero--4 .hero__title{ margin:20px 0 18px }
.hero--4 .hero__lead{ max-width:620px }
.hero--4 .hero__actions{ margin:26px 0 30px }
.hero--4 .stats--grid2{ max-width:580px }

/* ===================== ВАРИАНТ 5 — плитки ================================ */
.hero--5{ padding:30px 0 44px }
.hero5{
  display:grid; grid-template-columns:1fr 1.12fr; gap:16px;
  grid-template-areas:"title art" "text art" "stats stats";
}
.hero5__title{ grid-area:title }
.hero5__text{ grid-area:text }
.hero5__art{ grid-area:art }
.hero5__stats{ grid-area:stats; display:grid; grid-template-columns:repeat(4,1fr); gap:16px }

.hero5__title,.hero5__text,.hero5__art,.hero5__stats li{
  border-radius:var(--radius); border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
}
.hero5__title{ padding:26px 30px }
.hero5__title .hero__title{ margin:18px 0 0; font-size:clamp(28px,3vw,44px) }
.hero5__text{ padding:26px 30px }
.hero5__text .hero__lead{ max-width:none }
.hero5__text .hero__actions{ margin:24px 0 0 }
.hero5__art{ display:flex; align-items:center; justify-content:center; padding:20px; overflow:hidden }
.hero5__art img{ width:100% }
.hero5__stats li{ display:flex; align-items:center; gap:14px; padding:18px 22px }
.hero5__stats img{ width:38px; height:38px; object-fit:contain; flex:0 0 auto }
.hero5__stats b{ display:block; font-size:21px; font-weight:700; line-height:1.2 }
.hero5__stats span{ font-size:12.5px; color:var(--muted) }

/* ===================== ВАРИАНТ 6 — замочная скважина ===================== */
.hero--6{ padding:30px 0; overflow:hidden }
/* Контейнер шире обычного: при 1200px на текстовую колонку остаётся меньше
   470px и заголовок ломается на три строки. Расширяем контейнер, а не
   сжимаем текст. */
.hero--6 .container{ max-width:1340px }
.hero6{ display:grid; grid-template-columns:1.14fr auto 1fr; gap:28px; align-items:center }
.hero6__col .hero__title{ margin:20px 0 18px }
.hero6__col .hero__lead{ max-width:520px }
.hero6__col .hero__actions{ margin:26px 0 0 }

.hero6__stats{ display:grid; padding-left:32px; border-left:1px solid var(--line); text-align:center }
.hero6__stats li{ padding:18px 14px; border-top:1px solid var(--line); min-width:132px }
.hero6__stats li:first-child{ border-top:0 }
.hero6__stats img{ display:block; width:32px; height:32px; object-fit:contain; margin:0 auto 7px }
.hero6__stats b{ display:block; font-size:21px; font-weight:700; line-height:1.2 }
.hero6__stats span{ font-size:12px; color:var(--muted) }

/* Иллюстрация занимает свою колонку целиком. Вылет вправо, который тут
   был раньше, срезал панель внутри арки — читалось как поломка, а не как
   приём: в макете иллюстрация видна полностью. */
.hero6__art img{ width:100%; max-width:none }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1024px){
  .hero--4 .hero__grid{ grid-template-columns:1fr }
  .hero4__art img{ max-width:320px }

  .hero5{ grid-template-columns:1fr; grid-template-areas:"title" "text" "art" "stats" }
  .hero5__stats{ grid-template-columns:repeat(2,1fr) }

  .hero6{ grid-template-columns:1fr }
  .hero6__stats{ grid-template-columns:repeat(4,1fr); padding-left:0; border-left:0;
    border-top:1px solid var(--line); padding-top:8px }
  .hero6__stats li{ border-top:0; border-left:1px solid var(--line); min-width:0 }
  .hero6__stats li:first-child{ border-left:0 }
  /* В одну колонку вылет вправо режет картинку по краю: ширину задаёт экран. */
  .hero6__art img{ width:100%; margin-right:0 }
}

@media (max-width:720px){
  .hero--3{ padding-top:32px }
  .hero3__art{ margin-bottom:-30px }
  /* Строка показателей в четыре колонки на телефоне нечитаема — переносим. */
  .stats--icons{ flex-wrap:wrap; justify-content:flex-start; gap:14px 0 }
  .stats--icons li{ flex:0 0 50%; padding:0 12px; border-left:0 }
  .stats--grid2{ grid-template-columns:1fr }
  .stats--grid2 li{ border-left:0; border-top:1px solid var(--line); padding:14px 0 }
  .stats--grid2 li:first-child{ border-top:0 }
  .hero5__stats{ grid-template-columns:1fr }
  .hero5__title,.hero5__text{ padding:22px 18px }
  .hero6__stats{ grid-template-columns:repeat(2,1fr) }
  .hero6__stats li{ border-top:1px solid var(--line) }
  .hero6__stats li:nth-child(-n+2){ border-top:0 }
  .hero6__stats li:nth-child(odd){ border-left:0 }
}

/* ==========================================================================
   ВИДЫ БЛОКА ТАРИФОВ 2–6
   Разметку этих видов генерирует tools/make-plans-blocks.js из одной таблицы
   цен. Здесь только оформление; каждый вид под своим классом .plansN.
   ========================================================================== */

.plan__badge--soft{
  background:rgba(255, 255, 255, .06); border:1px solid var(--line-strong);
  color:var(--txt-2); box-shadow:none;
}

/* ===================== ВИД 2 — годовой сверху ============================ */
.plans2__top{
  display:grid; grid-template-columns:auto 1fr auto auto; gap:28px;
  align-items:center; padding:26px 30px; margin-bottom:16px;
}
.plans2__top .plan__icon{ width:104px; height:104px }
.plans2__row{ display:flex; align-items:center; gap:14px; margin-bottom:6px }
/* Плашка в этой раскладке стоит в строке заголовка, а не висит над карточкой. */
.plans2__top .plan__badge{ position:static; transform:none; box-shadow:none }
.plans2__top .plan__price{ font-size:46px; margin:0 }
.plans2__top .plan__list{ margin:0; padding-left:28px; border-left:1px solid rgba(47, 63, 255, .3) }
.plans2__top .btn{ min-width:210px }
.plans2__rest{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.plans2__rest .plan__price{ font-size:32px; margin-top:6px }

/* ===================== ВИД 3 — строки справа ============================= */
.plans3__grid{ display:grid; grid-template-columns:330px 1fr; gap:40px; align-items:start }
.plans3__head{ text-align:left; max-width:none; margin:0 }
.plans3__head h2{ font-size:clamp(30px,3vw,44px) }
.plans3__head .section-sub{ text-align:left; margin:14px 0 0 }
.plans3__list{ display:grid; gap:12px }

.plan-row{
  position:relative; display:grid; align-items:center; gap:22px;
  grid-template-columns:auto 120px minmax(155px,1fr) minmax(190px,1.15fr) auto;
  padding:20px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.plan-row .plan__icon{ width:64px; height:64px }
.plan-row .plan__name{ padding:0; font-size:16px; color:var(--txt) }
.plan-row .plan__price{ font-size:30px; margin:0 }
.plan-row .plan__list{ margin:0; gap:6px }
.plan-row .btn{ min-width:150px }
.plan-row--best{
  border-color:rgba(47, 63, 255, .55);
  background:linear-gradient(180deg,rgba(23, 28, 94, .95),rgba(12, 14, 52, .95));
  box-shadow:0 0 0 1px rgba(47, 63, 255, .18),0 18px 48px rgba(20, 22, 180, .25);
}
.plan-row .plan__badge{ top:-11px; left:22px }

/* ===================== ВИД 4 — плитки ==================================== */
/* Имя отличается от класса секции нарочно: одинаковое имя делало гридом
   и саму секцию, и внутреннюю сетку — контейнер схлопывался в колонку. */
.plans4__grid{
  display:grid; gap:16px;
  grid-template-columns:1fr 1fr 1.15fr;
  grid-template-areas:"a b big" "wide wide big";
}
.plans4__cell:nth-child(1){ grid-area:a }
.plans4__cell:nth-child(2){ grid-area:b }
.plans4__wide{ grid-area:wide }
.plans4__big{ grid-area:big }
.plans4__wide-in{ display:grid; grid-template-columns:1fr 1fr auto; gap:20px; align-items:center }
.plans4__wide-in .plan__list{ margin:0 }
.plans4__big-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px }
.plans4__big .plan__price{ font-size:52px }
/* Список не растягивается по высоте карточки: у .plan__list задан
   flex:1 1 auto, и в высокой карточке пункты расползались с дырами.
   Прижимаем список к тексту, а кнопку — к низу отступом auto. */
.plans4__big .plan__list{ flex:0 0 auto; margin:20px 0 24px; gap:12px }
.plans4__big .btn{ margin-top:auto }
.plans4__big .plan__list li{ font-size:15px }

/* ===================== ВИД 5 — линия выгоды ============================== */
.plans5__line{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  align-items:center; height:70px; margin-bottom:6px; padding:0 130px;
}
.plans5__line::before{
  content:''; position:absolute; left:130px; right:130px; top:50%; height:1px;
  background:linear-gradient(90deg,rgba(47, 63, 255, .22),rgba(47, 63, 255, .85));
}
.plans5__point{ position:relative; display:flex; justify-content:center }
.plans5__point i{
  width:14px; height:14px; border-radius:50%; background:var(--bg);
  border:3px solid var(--blue); box-shadow:0 0 16px rgba(47, 63, 255, .6);
}
.plans5__point.is-best i{ box-shadow:0 0 22px rgba(47, 63, 255, .95) }
.plans5__point em:not(:empty){
  position:absolute; bottom:26px; white-space:nowrap; font-style:normal;
  font-size:12px; padding:5px 13px; border-radius:999px; color:#cfd3ff;
  background:rgba(47, 63, 255, .14); border:1px solid rgba(47, 63, 255, .35);
}
.plans5__cap{
  position:absolute; top:50%; transform:translateY(-50%); width:112px;
  font-size:12.5px; color:var(--muted); line-height:1.35;
}
.plans5__cap--left{ left:0 }
.plans5__cap--right{ right:0; text-align:right }
.plans5__cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.plans5__cards .plan{ text-align:center }
.plans5__cards .plan__icon{ margin:0 auto 12px }
.plans5__cards .plan__price{ margin-top:8px }
.plans5__cards .plan__list li{ text-align:left }

/* ===================== ВИД 6 — переключатель ============================= */
.plans6__tabs{
  display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:16px;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
}
.plans6__tab{
  display:flex; align-items:center; gap:14px; padding:18px 22px; cursor:pointer;
  background:transparent; border:0; border-left:1px solid var(--line);
  color:var(--txt-2); text-align:left; transition:.18s;
}
.plans6__tab:first-child{ border-left:0 }
.plans6__tab:hover{ background:rgba(47, 63, 255, .08) }
.plans6__tab.is-active{ background:linear-gradient(180deg,#2a38ec,#1a21cc); color:#ffffff }
.plans6__tab .plan__icon{ width:46px; height:46px }
.plans6__tab b{ display:block; font-size:13.5px; font-weight:500 }
.plans6__tab em{ font-style:normal; font-size:20px; font-weight:700 }

.plans6__detail{
  display:none; grid-template-columns:auto 1fr auto 230px; gap:28px;
  align-items:center; padding:26px 30px; margin-bottom:16px;
}
.plans6__detail.is-active{ display:grid }
.plans6__detail .plan__icon{ width:118px; height:118px }
.plans6__detail .plan__badge{ position:static; transform:none; box-shadow:none }
.plans6__name{ font-size:30px; font-weight:700; margin:12px 0 6px }
.plans6__detail .plan__list{ margin:0; padding-left:28px; border-left:1px solid rgba(47, 63, 255, .3) }
.plans6__buy{ text-align:center }
.plans6__buy .plan__price{ font-size:40px; margin-bottom:14px }

.plans6__rows{ display:grid; gap:10px }
.plans6__row{
  /* Шесть детей: иконка, название, цена, подпись, список, кнопка.
     Колонок было пять — кнопка сваливалась на второй ряд к левому краю. */
  grid-template-columns:auto 120px auto minmax(120px,1fr) auto 170px;
  gap:16px; padding:14px 20px;
}
.plans6__row.is-off{ display:none }
.plans6__row .plan__icon{ width:44px; height:44px }
.plans6__row .plan__price{ font-size:24px }
.plan__list--row{ display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .plans2__top{ grid-template-columns:auto 1fr; row-gap:20px }
  .plans2__top .plan__list{ padding-left:0; border-left:0 }
  .plans2__top .btn{ grid-column:1 / -1 }
  .plan-row{ grid-template-columns:auto 120px 1fr; row-gap:16px }
  .plan-row .plan__list{ grid-column:1 / -1 }
  .plan-row .btn{ grid-column:1 / -1 }
  .plans6__detail{ grid-template-columns:auto 1fr; row-gap:20px }
  .plans6__detail .plan__list{ padding-left:0; border-left:0; grid-column:1 / -1 }
  .plans6__buy{ grid-column:1 / -1 }
  .plans6__row{ grid-template-columns:auto 1fr auto; row-gap:12px }
  .plans6__row .plan__list--row{ grid-column:1 / -1 }
  .plans6__row .btn{ grid-column:1 / -1 }
}

@media (max-width:1024px){
  .plans3__grid{ grid-template-columns:1fr; gap:26px }
  .plans4__grid{ grid-template-columns:1fr 1fr; grid-template-areas:"a b" "wide wide" "big big" }
  .plans5__cards,.plans2__rest{ grid-template-columns:repeat(2,1fr) }
  /* Линия выгоды осмысленна только когда все четыре шага в один ряд. */
  .plans5__line{ display:none }
  .plans6__tabs{ grid-template-columns:repeat(2,1fr) }
  .plans6__tab:nth-child(odd){ border-left:0 }
  .plans6__tab:nth-child(n+3){ border-top:1px solid var(--line) }
}

@media (max-width:720px){
  .plans2__rest,.plans5__cards,.plans4__grid{ grid-template-columns:1fr }
  .plans4__grid{ grid-template-areas:"a" "b" "wide" "big" }
  .plans4__wide-in{ grid-template-columns:1fr }
  .plans2__top,.plans6__detail{ grid-template-columns:1fr; text-align:center }
  /* Галочка стоит абсолютом у левого края строки: при выравнивании по
     центру текст уезжал к середине, а галочка оставалась у края.
     Центрируем сам список, а строки внутри держим по левому краю. */
  .plans2__top .plan__list,.plans6__detail .plan__list{
    width:max-content; max-width:100%; margin-inline:auto; text-align:left }
  .plans2__top .plan__icon,.plans6__detail .plan__icon{ margin:0 auto }
  .plans2__row{ justify-content:center }
  .plan-row,.plans6__row{ grid-template-columns:1fr; text-align:center; row-gap:10px }
  .plan-row .plan__icon,.plans6__row .plan__icon{ margin:0 auto }
  .plan-row .plan__list{ display:inline-grid; text-align:left }
  .plan__list--row{ justify-content:center }
  .plans6__tabs{ grid-template-columns:1fr }
  .plans6__tab{ border-left:0; border-top:1px solid var(--line) }
  .plans6__tab:first-child{ border-top:0 }
}

/* ==========================================================================
   ВИДЫ БЛОКА «КАК КУПИТЬ КЛЮЧ» 2–6
   Разметку генерирует tools/make-steps-blocks.js. Здесь только оформление,
   каждый вид под своим классом .stepsN.

   Иконки шагов пришли без прозрачности, фон у них #090c24 — почти цвет
   страницы. Поэтому они кладутся в скруглённые плитки и кружки: так шов не
   виден, а маска не нужна.
   ========================================================================== */

.section-head--left{ text-align:left; max-width:none; margin-left:0 }
.section-head--left .section-sub{ text-align:left; margin-left:0 }

/* ===================== ВИД 2 — горизонтальная линия ====================== */
.steps2__line{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative }
.steps2__line li{ position:relative; text-align:center; padding:0 18px }
/* Линия рисуется на самом пункте, а не одной полосой на всю строку: так она
   не вылезает за крайние точки. */
.steps2__line li::before{
  content:''; position:absolute; top:66px; left:50%; width:100%; height:1px;
  background:rgba(47, 63, 255, .35);
}
.steps2__line li:last-child::before{ display:none }
.steps2__line li::after{
  content:''; position:absolute; top:62px; left:calc(100% + 0px); width:9px; height:9px;
  margin-left:-4px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 12px rgba(47, 63, 255, .9);
}
.steps2__line li:last-child::after{ display:none }

.steps2__num{ display:block; font-size:26px; font-weight:800; color:#3f4fe0; letter-spacing:.02em }
.steps2__dot{
  position:relative; z-index:1; display:grid; place-items:center;
  width:84px; height:84px; margin:12px auto 20px; border-radius:50%;
  background:#0a0d26; border:1px solid rgba(47, 63, 255, .5);
  box-shadow:0 0 26px rgba(47, 63, 255, .28);
}
.steps2__dot img{ width:46px; height:46px; object-fit:contain }
.steps2__line h3{ font-size:17px; margin-bottom:10px }
.steps2__line p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 3 — ключ слева ================================ */
.steps3__grid{ display:grid; grid-template-columns:0.95fr 1.15fr; gap:40px; align-items:center }
.steps3__side h2{ font-size:clamp(28px,3vw,42px) }
.steps3__side .section-sub{ text-align:left; margin:14px 0 0 }
.steps3__key{ width:100%; max-width:420px; margin-top:18px }

.steps3__list{ display:grid; gap:12px }
.steps3__list li{
  display:grid; grid-template-columns:auto auto 1fr; gap:22px; align-items:center;
  padding:20px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.steps3__num{ font-size:38px; font-weight:800; color:#20245f; letter-spacing:.02em }
.steps3__ico{
  display:grid; place-items:center; width:60px; height:60px; border-radius:14px;
  background:#0a0d26; border:1px solid rgba(47, 63, 255, .35);
}
.steps3__ico img{ width:38px; height:38px; object-fit:contain }
.steps3__list h3{ font-size:17px; margin-bottom:6px }
.steps3__list p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 4 — по кругу ================================== */
.steps4__grid{
  display:grid; gap:20px; align-items:center;
  grid-template-columns:1fr minmax(240px,300px) 1fr;
  grid-template-areas:"c1 core c2" "c4 core c3";
}
.steps4__card--1{ grid-area:c1 }
.steps4__card--2{ grid-area:c2 }
.steps4__card--3{ grid-area:c3 }
.steps4__card--4{ grid-area:c4 }
.steps4__card{
  padding:24px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.steps4__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px }
.steps4__num{ font-size:30px; font-weight:800; color:#3f4fe0 }
.steps4__ico{
  display:grid; place-items:center; width:52px; height:52px; border-radius:14px;
  background:#0a0d26; border:1px solid rgba(47, 63, 255, .4);
}
.steps4__ico img{ width:32px; height:32px; object-fit:contain }
.steps4__card h3{ font-size:17px; margin-bottom:8px }
.steps4__card p{ font-size:13.5px; color:var(--muted) }

.steps4__core{
  grid-area:core; position:relative; display:grid; place-items:center;
  aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle,rgba(29, 38, 190, .30),rgba(10, 12, 35, .9) 68%);
  border:1px solid rgba(47, 63, 255, .45);
  box-shadow:0 0 60px rgba(29, 38, 190, .35),inset 0 0 40px rgba(29, 38, 190, .25);
}
.steps4__core img{ width:52%; max-width:150px }
.steps4__core b{ margin-top:-6px; font-size:22px; letter-spacing:-.01em }

/* ===================== ВИД 5 — плитки с объектами ======================== */
.steps5__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:34px }
.steps5__head h2{ font-size:clamp(28px,3vw,42px) }
.steps5__head .section-sub{ text-align:left; margin:12px 0 0 }
.steps5__pager{ display:flex; align-items:center; gap:0; flex:0 0 auto }
.steps5__pager li{
  width:40px; height:40px; display:grid; place-items:center; border-radius:50%;
  font-size:12.5px; color:var(--muted); border:1px solid var(--line);
}
.steps5__pager li.is-active{ color:#ffffff; border-color:rgba(47, 63, 255, .7);
  background:rgba(47, 63, 255, .16) }
.steps5__pager li + li{ margin-left:34px; position:relative }
.steps5__pager li + li::before{
  content:''; position:absolute; left:-30px; top:50%; width:26px; height:1px;
  background:var(--line-strong);
}

.steps5__flow{ display:flex; align-items:stretch; gap:0 }
.steps5__card{
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  padding:24px 26px 0; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.steps5__card--first{ flex:1.55 1 0 }
.steps5__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.steps5__num{ font-size:30px; font-weight:800; color:#3f4fe0 }
.steps5__ico{
  display:grid; place-items:center; width:46px; height:46px; border-radius:13px;
  background:#0a0d26; border:1px solid rgba(47, 63, 255, .4);
}
.steps5__ico img{ width:28px; height:28px; object-fit:contain }
.steps5__card h3{ font-size:17px; margin-bottom:8px }
.steps5__card p{ font-size:13.5px; color:var(--muted) }
.steps5__art{ width:76%; max-width:230px; margin:14px auto -10px; align-self:center }
.steps5__pills{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 24px }
.steps5__pills span{
  display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:10px;
  font-size:12.5px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.steps5__pills i{ width:12px; height:12px; border-radius:50%; border:1.5px solid #4d5ab8 }
.steps5__pills .is-on{ color:#ffffff; border-color:rgba(47, 63, 255, .7); background:rgba(47, 63, 255, .12) }
.steps5__pills .is-on i{ border-color:var(--blue); background:var(--blue);
  box-shadow:inset 0 0 0 2px #0a0d26 }
.steps5__arrow{ flex:0 0 auto; align-self:center; padding:0 14px; color:#3f4fe0; font-size:18px }

/* ===================== ВИД 6 — изометрический маршрут ==================== */
.steps6__road{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 }
.steps6__road li{ position:relative; padding:0 16px }
.steps6__stage{ display:flex; align-items:flex-end; gap:10px; min-height:190px }
.steps6__num{ font-size:34px; font-weight:800; color:#2a34ae; letter-spacing:.02em; padding-bottom:60px }
.steps6__stage img{ width:100%; max-width:170px }
/* Соединительная линия идёт от объекта к объекту на уровне подставок. */
.steps6__road li::after{
  content:''; position:absolute; top:150px; left:calc(50% + 60px); right:calc(-50% + 60px);
  height:1px; background:rgba(47, 63, 255, .4);
}
.steps6__road li:last-child::after{ display:none }
.steps6__road h3{ font-size:17px; margin:18px 0 8px }
.steps6__road p{ font-size:13.5px; color:var(--muted) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .steps5__card--first{ flex:1.25 1 0 }
  .steps5__arrow{ padding:0 8px }
  .steps3__list li{ grid-template-columns:auto auto 1fr; gap:16px; padding:18px }
}

@media (max-width:1024px){
  .steps2__line,.steps6__road{ grid-template-columns:repeat(2,1fr); gap:34px 0 }
  /* Линия между точками осмысленна только в один ряд — в две строки она
     соединяла бы конец первой строки с началом второй. */
  .steps2__line li::before,.steps2__line li::after,
  .steps6__road li::after{ display:none }

  .steps3__grid{ grid-template-columns:1fr; gap:26px }
  .steps3__key{ max-width:300px; margin:0 auto }

  .steps4__grid{ grid-template-columns:1fr 1fr; grid-template-areas:"core core" "c1 c2" "c4 c3" }
  .steps4__core{ max-width:260px; margin:0 auto 8px }

  .steps5__flow{ flex-wrap:wrap; gap:16px }
  .steps5__card,.steps5__card--first{ flex:1 1 calc(50% - 8px) }
  .steps5__arrow{ display:none }
  .steps5__head{ flex-direction:column }
}

@media (max-width:720px){
  .steps2__line,.steps6__road{ grid-template-columns:1fr; gap:28px }
  .steps4__grid{ grid-template-columns:1fr; grid-template-areas:"core" "c1" "c2" "c3" "c4" }
  .steps5__card,.steps5__card--first{ flex:1 1 100% }
  .steps3__list li{ grid-template-columns:auto 1fr; row-gap:12px }
  .steps3__num{ font-size:30px }
  .steps6__stage{ min-height:0 }
  .steps6__num{ padding-bottom:30px }
}

/* ==========================================================================
   ВИДЫ БЛОКА «HAPP НА ЛЮБОМ УСТРОЙСТВЕ» 2–6
   Разметку генерирует tools/make-platforms-blocks.js. Здесь оформление,
   каждый вид под своим классом .platN.

   Фотографии устройств нарезаны из макетов: фон у них тёмно-синий и с фоном
   страницы сходится, поэтому масок нет — картинка просто ложится на карточку.
   ========================================================================== */

/* --- общий список платформ (виды 2 и 6) ---------------------------------- */
.plat-list{ display:grid; gap:10px }
.plat-list a,
.plat6__menu a{
  display:flex; align-items:center; gap:14px;
  padding:12px 18px 12px 12px; border-radius:14px;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
  font-size:14.5px; color:var(--txt-2); transition:.18s;
}
.plat-list img,
.plat6__menu img{ width:34px; height:26px; object-fit:cover; border-radius:7px; flex:0 0 auto }
.plat-list span,
.plat6__menu span{ flex:1 1 auto }
.plat-list i,
.plat6__menu i{ font-style:normal; color:#4d5ab8 }
.plat-list a:hover,
.plat6__menu a:hover{ background:rgba(47, 63, 255, .10); border-color:rgba(47, 63, 255, .3) }
.plat-list a.is-active,
.plat6__menu a.is-active{
  background:rgba(47, 63, 255, .14); border-color:rgba(47, 63, 255, .55); color:#ffffff;
  box-shadow:0 8px 22px rgba(27, 36, 224, .2);
}

/* ===================== ВИД 2 — список слева, сцена справа ================ */
.plat2__grid{ display:grid; grid-template-columns:380px 1fr; gap:40px; align-items:center }
.plat2__side .section-head{ margin-bottom:26px }
.plat2__stage img{ width:100%; max-width:760px; margin-left:auto; display:block }

/* ===================== ВИД 3 — веер и табы ============================== */
.plat3__fan{ display:flex; justify-content:center; margin-bottom:26px }
.plat3__fan img{ width:100%; max-width:1180px }
.plat3__tabs{
  display:grid; grid-template-columns:repeat(6,1fr); gap:0;
  border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
}
.plat3__tabs a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 12px; font-size:13.5px; color:var(--txt-2);
  border-left:1px solid var(--line); transition:.18s;
}
.plat3__tabs li:first-child a{ border-left:0 }
.plat3__tabs img{ width:28px; height:22px; object-fit:cover; border-radius:6px }
.plat3__tabs i{ font-style:normal; color:#4d5ab8 }
.plat3__tabs a:hover{ background:rgba(47, 63, 255, .10) }
.plat3__tabs a.is-active{
  background:rgba(47, 63, 255, .16); color:#ffffff;
  box-shadow:inset 0 0 0 1px rgba(47, 63, 255, .55);
}

/* ===================== ВИД 4 — шесть карточек ============================ */
.plat4__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.plat4__card{
  display:block; padding:20px 22px 0; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line); transition:.18s;
}
.plat4__card:hover{ border-color:var(--line-strong) }
.plat4__card.is-active{
  border-color:rgba(47, 63, 255, .6);
  box-shadow:0 0 0 1px rgba(47, 63, 255, .25),0 18px 44px rgba(20, 22, 180, .25);
}
.plat4__top{ display:flex; align-items:center; gap:14px; margin-bottom:14px }
.plat4__top img{ width:34px; height:26px; object-fit:cover; border-radius:7px }
.plat4__top b{ flex:1 1 auto; font-size:17px; color:var(--txt) }
.plat4__top i{ font-style:normal; color:#4d5ab8; font-size:18px }
.plat4__shot{ width:calc(100% + 44px); margin:0 -22px; display:block }

/* ===================== ВИД 5 — круговая экосистема ====================== */
.plat5__grid{ display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:center }
.plat5__col{ display:grid; gap:18px; min-width:0 }
.plat5__col--left{ justify-items:end }
.plat5__col--right{ justify-items:start }
.plat5__node{ display:flex; align-items:center; gap:14px }
.plat5__col--right .plat5__node{ flex-direction:row-reverse }
.plat5__dev{ width:150px; flex:0 0 auto }
.plat5__pill{
  display:inline-flex; align-items:center; gap:10px; padding:9px 16px 9px 10px;
  border-radius:999px; font-size:14px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid rgba(47, 63, 255, .35);
  transition:.18s;
}
.plat5__pill img{ width:28px; height:22px; object-fit:cover; border-radius:6px }
.plat5__pill b{ font-weight:500 }
.plat5__pill i{ font-style:normal; color:#4d5ab8 }
.plat5__node:hover .plat5__pill{ background:rgba(47, 63, 255, .14); color:#ffffff }

.plat5__core{
  display:grid; place-items:center; width:210px; height:210px; border-radius:50%;
  background:radial-gradient(circle,rgba(29, 38, 190, .35),rgba(10, 12, 35, .92) 70%);
  border:1px solid rgba(47, 63, 255, .5);
  box-shadow:0 0 70px rgba(29, 38, 190, .45),inset 0 0 40px rgba(29, 38, 190, .3);
}
.plat5__power{ font-size:44px; line-height:1; color:#cfd3ff }
.plat5__core b{ margin-top:6px; font-size:22px }

/* ===================== ВИД 6 — селектор в рамке ========================= */
.plat6__grid{ display:grid; grid-template-columns:330px 1fr; gap:40px; align-items:center }
.plat6__menu{
  display:grid; gap:10px; padding:14px; border-radius:20px;
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.plat6__side .section-head{ margin-bottom:22px }
.plat6__stage img{ width:100%; max-width:820px }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .plat5__dev{ width:140px }
  .plat5__core{ width:170px; height:170px }
}

@media (max-width:1024px){
  .plat2__grid,.plat6__grid{ grid-template-columns:1fr; gap:26px }
  .plat2__stage img,.plat6__stage img{ margin:0 auto }
  .plat3__tabs{ grid-template-columns:repeat(3,1fr) }
  .plat3__tabs li:nth-child(3n+1) a{ border-left:0 }
  .plat3__tabs li:nth-child(n+4) a{ border-top:1px solid var(--line) }
  .plat4__grid{ grid-template-columns:repeat(2,1fr) }
  /* Круговая раскладка держится на трёх колонках. Когда их нет, центр
     уезжает наверх, а устройства выстраиваются в один столбец. */
  .plat5__grid{ grid-template-columns:1fr; justify-items:center }
  .plat5__col--right .plat5__node{ flex-direction:row }
  .plat5__core{ order:-1; margin-bottom:8px }
}

@media (max-width:720px){
  .plat3__tabs{ grid-template-columns:repeat(2,1fr) }
  .plat3__tabs li:nth-child(3n+1) a{ border-left:1px solid var(--line) }
  .plat3__tabs li:nth-child(odd) a{ border-left:0 }
  .plat3__tabs li:nth-child(n+3) a{ border-top:1px solid var(--line) }
  .plat4__grid{ grid-template-columns:1fr }
  .plat5__node{ flex-direction:column !important; gap:8px }
  .plat5__dev{ width:200px }
}

/* ==========================================================================
   ВИДЫ БЛОКА ОТЗЫВОВ 2–6
   Разметку генерирует tools/make-reviews-blocks.js. Общие части (карточка,
   звёзды, счётчик) описаны один раз, дальше — только раскладки .rvN.
   ========================================================================== */

/* --- общие детали --------------------------------------------------------- */
.stars{ display:inline-flex; gap:3px; color:#3d51ff; font-size:16px; letter-spacing:2px;
  text-shadow:0 0 12px rgba(47, 63, 255, .55) }

.rv-faces{ display:block; width:150px }

.rv-count b{ display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.2 }
.rv-count span{ font-size:12.5px; color:var(--muted) }

.rv-quote{ display:block; font-family:Georgia,"Times New Roman",serif;
  font-size:52px; line-height:.78; height:26px; color:#3b47b8 }

.rv-author{ display:inline-flex; align-items:center; gap:10px; margin-top:18px;
  font-size:13.5px; color:var(--txt-2) }
.rv-author i{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:13px; font-weight:600; color:#cfd3ff;
  background:rgba(47, 63, 255, .2); border:1px solid rgba(47, 63, 255, .42);
}

.rv-card{
  padding:26px 28px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.rv-card__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:16px }
.rv-card h3{ font-size:17px; margin-bottom:10px }
.rv-card p{ font-size:14px; color:var(--muted) }
.rv-card.is-active{ border-color:rgba(47, 63, 255, .55);
  box-shadow:0 0 0 1px rgba(47, 63, 255, .2),0 18px 44px rgba(20, 22, 180, .22) }

.rv-nav{ display:flex; align-items:center; gap:14px }
.rv-dots{ display:inline-flex; align-items:center; gap:7px }
.rv-dots i{ width:22px; height:4px; border-radius:2px; background:rgba(94, 107, 224, .3) }
.rv-dots i.is-on{ width:30px; background:var(--blue); box-shadow:0 0 10px rgba(47, 63, 255, .7) }
.rnav--on{ border-color:rgba(47, 63, 255, .7); color:#ffffff;
  box-shadow:0 0 18px rgba(47, 63, 255, .45) }

/* ===================== ВИД 2 — крупный отзыв в центре ==================== */
.rv2__grid{ display:grid; grid-template-columns:250px 1.5fr 0.85fr; gap:26px; align-items:center }
.rv2__side h2{ font-size:clamp(30px,3vw,44px); margin:6px 0 18px }
.rv2__side .stars{ margin:12px 0 14px }
.rv2__side .rv-faces{ width:170px }
.rv-card--big{ padding:38px 40px }
.rv-card--big .rv-quote{ font-size:64px; height:32px }
.rv-card--big h3{ font-size:30px; margin-bottom:16px }
.rv-card--big p{ font-size:17px; line-height:1.6 }
/* Соседний отзыв показан наполовину — это подсказка, что их больше одного. */
.rv2__next{ display:grid; gap:20px }
.rv-card--peek{ padding:22px; opacity:.55 }
.rv-card--peek h3{ font-size:15px }
.rv-card--peek p{ font-size:13px }
.rv2__next .rv-nav{ justify-content:flex-end }

/* ===================== ВИД 3 — всё по центру ============================= */
.rv3__count{ display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:28px }
.rv3__faces{ display:flex; flex-direction:column; align-items:center; gap:6px }
.rv3__faces .rv-faces{ width:130px }
.rv3__count .rv-count{ text-align:left }
.rv3__cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:26px }
.rv3 .rv-nav{ justify-content:center }

/* ===================== ВИД 4 — переписка ================================= */
.rv4__grid{ display:grid; grid-template-columns:280px 1fr; gap:36px; align-items:center }
.rv4__side h2{ font-size:clamp(30px,3vw,44px); margin:6px 0 18px }
.rv4__side .stars{ margin:12px 0 14px }
.rv4__side .rv-faces{ width:170px }

.rv4__window{
  border-radius:22px; overflow:hidden;
  background:linear-gradient(180deg,rgba(16, 19, 50, .92),rgba(10, 12, 35, .92));
  border:1px solid var(--line);
}
.rv4__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 24px; border-bottom:1px solid var(--line); font-size:13px }
.rv4__status{ display:inline-flex; align-items:center; gap:10px; color:var(--txt-2) }
.rv4__status i{ width:9px; height:9px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(36, 192, 169, .18) }
.rv4__hint{ color:var(--muted) }

.rv4__feed{ display:grid; gap:18px; padding:24px }
.rv4__row{ display:flex; align-items:flex-start; gap:14px; max-width:78% }
.rv4__row--out{ margin-left:auto; flex-direction:row-reverse }
.rv4__ava i{
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-style:normal; font-size:17px; font-weight:600; color:#ffffff;
  background:linear-gradient(180deg,#3b4bff,#1b24e0);
}
.rv4__bubble{ padding:16px 20px; border-radius:16px;
  background:rgba(255, 255, 255, .04); border:1px solid var(--line) }
.rv4__row--out .rv4__bubble{ background:rgba(47, 63, 255, .16); border-color:rgba(47, 63, 255, .35) }
.rv4__head{ display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  margin-bottom:6px }
.rv4__head b{ font-size:15px }
.rv4__head time{ font-size:12px; color:var(--muted) }
.rv4__bubble p{ font-size:13.5px; color:var(--txt-2) }

.rv4__foot{ display:flex; align-items:center; gap:16px; padding:16px 24px;
  border-top:1px solid var(--line); font-size:13px; color:var(--muted) }
.rv4__foot .rv-nav{ margin-left:auto }
.rv4__typing{ display:inline-flex; gap:5px; padding:9px 14px; border-radius:999px;
  background:rgba(255, 255, 255, .05) }
.rv4__typing i{ width:6px; height:6px; border-radius:50%; background:#7a80b8 }

/* ===================== ВИД 5 — плитки с цифрами ========================== */
.rv5__grid{ display:grid; grid-template-columns:0.85fr 1.4fr; gap:32px; align-items:stretch }
.rv5__side h2{ font-size:clamp(30px,3vw,44px); margin:6px 0 0 }
.rv5__side .section-sub{ text-align:left; margin:14px 0 22px }
.rv5__tiles{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.rv5__tile{
  display:grid; place-items:center; gap:10px; padding:20px 18px; text-align:center;
  border-radius:var(--radius); background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.rv5__tile span{ font-size:12.5px; color:var(--muted) }
.rv5__tile .rv-faces{ width:120px }
.rv5__tile--wide{
  grid-column:1 / -1; grid-template-columns:auto 1fr; place-items:center start; gap:6px 18px;
  background:linear-gradient(120deg,rgba(30, 38, 190, .35),rgba(12, 14, 52, .9));
  border-color:rgba(47, 63, 255, .35); text-align:left;
}
.rv5__tile--wide svg{ grid-row:1 / 3; width:52px; height:52px; padding:12px; border-radius:14px;
  fill:none; stroke:#9da7ff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  background:rgba(47, 63, 255, .18) }
.rv5__tile--wide b{ align-self:end; font-size:30px; font-weight:800; letter-spacing:-.02em }
.rv5__tile--wide span{ align-self:start; text-transform:uppercase; letter-spacing:.08em;
  font-size:11px }
/* Отзывов всего два, а левый столбец высокий: в две колонки они
   оставляли пустой половину блока. Ставим в один столбец и тянем
   по высоте ряда. */
.rv5__cards{ display:grid; grid-template-columns:1fr; grid-auto-rows:1fr; gap:20px }
.rv5__cards .rv-card{ display:flex; flex-direction:column }
.rv5__cards .rv-author{ margin-top:auto; padding-top:18px }

/* ===================== ВИД 6 — наклонённые карточки ====================== */
.rv6__stage{ display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:center;
  perspective:1400px; margin-bottom:26px }
/* Разворот карточек друг к другу — единственное, что отличает этот вид;
   на узком экране он снимается, иначе текст читается под углом. */
.rv-card--tiltL{ transform:rotateY(7deg); transform-origin:right center }
.rv-card--tiltR{ transform:rotateY(-7deg); transform-origin:left center }
.rv6__seam{ width:1px; align-self:stretch; margin:0 10px; position:relative;
  background:linear-gradient(180deg,transparent,rgba(47, 63, 255, .6),transparent) }
.rv6__seam::after{ content:''; position:absolute; top:50%; left:-3px; width:7px; height:7px;
  margin-top:-3px; border-radius:50%; background:var(--blue);
  box-shadow:0 0 14px rgba(47, 63, 255, .9) }
.rv6__pill{
  display:flex; align-items:center; justify-content:center; gap:18px; margin:0 auto;
  max-width:640px; padding:16px 32px; border-radius:999px;
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.rv6__pill .rv-faces{ width:120px }
.rv6__sep{ width:1px; height:34px; background:var(--line-strong) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1024px){
  .rv2__grid{ grid-template-columns:1fr; gap:22px }
  .rv2__next{ grid-template-columns:1fr auto; align-items:center }
  .rv-card--peek{ opacity:1 }
  .rv4__grid,.rv5__grid{ grid-template-columns:1fr; gap:24px }
  .rv4__row{ max-width:92% }
  .rv6__stage{ grid-template-columns:1fr; gap:16px; perspective:none }
  .rv-card--tiltL,.rv-card--tiltR{ transform:none }
  .rv6__seam{ display:none }
}

@media (max-width:720px){
  .rv3__cards,.rv5__cards{ grid-template-columns:1fr }
  .rv3__count{ flex-direction:column; gap:12px }
  .rv3__count .rv-count{ text-align:center }
  .rv-card--big{ padding:24px 20px }
  .rv-card--big h3{ font-size:22px }
  .rv-card--big p{ font-size:15px }
  .rv2__next{ grid-template-columns:1fr }
  .rv2__next .rv-nav{ justify-content:center }
  .rv5__tiles{ grid-template-columns:1fr }
  .rv5__tile--wide{ grid-column:auto }
  .rv4__row,.rv4__row--out{ max-width:100%; flex-direction:row }
  .rv4__foot{ flex-wrap:wrap }
  .rv6__pill{ flex-wrap:wrap; border-radius:20px }
  .rv6__sep{ display:none }
}

/* ==========================================================================
   ВИДЫ БЛОКА «КАКОЙ ТАРИФ ВЫБРАТЬ» 2–6
   Разметку генерирует tools/make-compare-blocks.js. Общие детали (карточка
   тарифа, строки «подпись — значение») описаны один раз, дальше раскладки.
   ========================================================================== */

/* --- общая карточка тарифа ------------------------------------------------ */
.cmp-card{
  display:flex; flex-direction:column; padding:22px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.cmp-card__head{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:4px; border-bottom:1px solid var(--line) }
.cmp-card__head h3{ font-size:19px }
.cmp-card__head .tag{ margin-left:0 }

.cmp-card--trial{
  border-color:rgba(36, 192, 169, .5);
  background:linear-gradient(180deg,rgba(14, 43, 44, .85),rgba(10, 19, 26, .9));
  box-shadow:0 0 0 1px rgba(36, 192, 169, .15),0 18px 44px rgba(14, 110, 103, .18);
}
.cmp-card--best{
  border-color:rgba(47, 63, 255, .6);
  background:linear-gradient(180deg,rgba(23, 28, 94, .95),rgba(12, 14, 52, .95));
  box-shadow:0 0 0 1px rgba(47, 63, 255, .2),0 18px 48px rgba(20, 22, 180, .3);
}

.cmp-lines{ display:grid }
.cmp-lines li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  padding:13px 0; border-bottom:1px solid rgba(94, 107, 224, .1); font-size:13.5px;
}
.cmp-lines li:last-child{ border-bottom:0 }
.cmp-lines svg{ width:19px; height:19px; fill:none; stroke:#6f77ff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }
.cmp-card--trial .cmp-lines svg{ stroke:#5ee0cb }
.cmp-lines span{ color:var(--muted) }
.cmp-lines b{ font-weight:600; text-align:right }

/* ===================== ВИД 2 — таблица с иконками ======================== */
.cmp2__table th{ white-space:nowrap }
.cmp2__table th svg{ width:19px; height:19px; margin-right:9px; vertical-align:-4px;
  fill:none; stroke:#6f77ff; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.cmp2__table td{ padding:18px 22px }
.cmp2__wrap{ box-shadow:0 18px 50px rgba(4, 5, 22, .45) }
.cmp2__table tr.is-best td{
  background:rgba(47, 63, 255, .14);
  box-shadow:inset 0 1px 0 rgba(47, 63, 255, .5),inset 0 -1px 0 rgba(47, 63, 255, .5);
}
.cmp2__table tr.is-best td:first-child{ box-shadow:inset 3px 0 0 var(--blue),
  inset 0 1px 0 rgba(47, 63, 255, .5),inset 0 -1px 0 rgba(47, 63, 255, .5) }

/* ===================== ВИД 3 — пять карточек ============================= */
.cmp3__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:start }

/* ===================== ВИД 4 — линия сроков ============================== */
.cmp4__line{
  position:relative; display:grid; grid-template-columns:repeat(5,1fr);
  align-items:center; height:70px; margin-bottom:10px; padding:0 60px;
}
.cmp4__line::before{
  content:''; position:absolute; left:100px; right:100px; top:26px; height:1px;
  background:linear-gradient(90deg,rgba(36, 192, 169, .7),rgba(47, 63, 255, .85));
}
.cmp4__point{ position:relative; display:flex; flex-direction:column; align-items:center; gap:14px }
.cmp4__point i{
  width:16px; height:16px; border-radius:50%; background:var(--bg);
  border:3px solid var(--blue); box-shadow:0 0 16px rgba(47, 63, 255, .6);
}
.cmp4__point.is-trial i{ border-color:var(--green); box-shadow:0 0 16px rgba(36, 192, 169, .7) }
.cmp4__point.is-best i{ box-shadow:0 0 24px rgba(47, 63, 255, .95) }
.cmp4__point em{ font-style:normal; font-size:14px; font-weight:600; white-space:nowrap }
.cmp4__point.is-trial em{ color:#5ee0cb }
.cmp4__row{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:start }

/* ===================== ВИД 5 — переключатель ============================= */
.cmp5__tabs{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:16px }
.cmp5__tab{
  display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer;
  padding:16px 14px; border-radius:14px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); transition:.18s;
}
.cmp5__tab b{ font-size:15px; font-weight:600 }
.cmp5__tab:hover{ background:rgba(47, 63, 255, .09) }
.cmp5__tab.is-trial{ border-color:rgba(36, 192, 169, .42) }
.cmp5__tab.is-active{
  background:linear-gradient(180deg,#2a38ec,#1a21cc); border-color:transparent; color:#ffffff;
  box-shadow:0 10px 30px rgba(27, 36, 224, .35);
}
.cmp5__tab.is-trial.is-active{ background:linear-gradient(180deg,#22c0a9,#129181);
  box-shadow:0 10px 30px rgba(18, 145, 129, .32) }

.cmp5__panel{
  display:none; grid-template-columns:1fr 1.5fr; gap:28px; align-items:center;
  padding:26px 30px; margin-bottom:16px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(23, 28, 94, .9),rgba(12, 14, 52, .9));
  border:1px solid rgba(47, 63, 255, .5);
}
.cmp5__panel.is-active{ display:grid }
.cmp5__name{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 10px }
.cmp5__name h3{ font-size:32px; font-weight:800; letter-spacing:-.02em }
.cmp5__about p{ font-size:13.5px; color:var(--txt-2); max-width:340px }
.cmp5__tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.cmp5__tile{
  display:grid; place-items:center; gap:7px; padding:18px 12px; text-align:center;
  border-radius:14px; background:rgba(6, 7, 25, .55); border:1px solid var(--line);
}
.cmp5__tile svg{ width:24px; height:24px; fill:none; stroke:#6f77ff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }
.cmp5__tile span{ font-size:12px; color:var(--muted) }
.cmp5__tile b{ font-size:19px; font-weight:700 }

/* ===================== ВИД 6 — плитки и карточка года ==================== */
.cmp6__grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:stretch }
.cmp6__cells{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.cmp-card--wide{ justify-content:center; padding:30px 34px }
.cmp-card--wide .cmp-card__head h3{ font-size:32px; font-weight:800; letter-spacing:-.02em }
.cmp-card--wide .cmp-lines li{ padding:18px 0; font-size:16px }
.cmp-card--wide .cmp-lines svg{ width:24px; height:24px }
.cmp-card--wide .cmp-lines b{ font-size:19px }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .cmp3__row,.cmp4__row{ grid-template-columns:repeat(3,1fr) }
  /* Линия сроков читается только когда все пять точек в один ряд. */
  .cmp4__line{ display:none }
  .cmp5__panel{ grid-template-columns:1fr; row-gap:20px }
}

@media (max-width:1024px){
  .cmp5__tabs{ grid-template-columns:repeat(3,1fr) }
  .cmp5__tiles{ grid-template-columns:repeat(2,1fr) }
  .cmp6__grid{ grid-template-columns:1fr }
}

@media (max-width:720px){
  .cmp3__row,.cmp4__row,.cmp6__cells{ grid-template-columns:1fr }
  .cmp5__tabs{ grid-template-columns:1fr 1fr }
  .cmp5__name h3,.cmp-card--wide .cmp-card__head h3{ font-size:24px }
  .cmp2__table td{ padding:16px }
}

/* ==========================================================================
   ВИДЫ БЛОКА «ПРЕИМУЩЕСТВА КЛЮЧА HAPP» 2–6
   Разметку генерирует tools/make-benefits-blocks.js. Общие детали (карточка,
   плитка иконки, зелёная плашка) описаны один раз, дальше раскладки .bnN.

   Иконки пришли без прозрачности, фон у них почти совпадает с фоном
   страницы — поэтому они кладутся в скруглённые плитки, а не маскируются.
   ========================================================================== */

.bn-ico{
  display:grid; place-items:center; width:56px; height:56px; flex:0 0 auto;
  border-radius:15px; overflow:hidden;
  background:#0a0d26; border:1px solid rgba(47, 63, 255, .35);
}
.bn-ico img{ width:100%; height:100%; object-fit:cover }

.bn-card{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  padding:24px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.bn-card h3{ font-size:17px; margin:16px 0 8px }
.bn-card p{ font-size:13.5px; color:var(--muted) }

.bn-badge{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:16px;
  padding:8px 16px; border-radius:999px; font-size:12.5px; font-weight:600; color:#5ee0cb;
  background:rgba(36, 192, 169, .14); border:1px solid rgba(36, 192, 169, .36);
}
.bn-badge i{ width:8px; height:8px; border-radius:50%; background:var(--green) }

/* Объёмный объект «выглядывает» из нижнего угла карточки — так он читается
   как часть карточки, а не как отдельная картинка под текстом. */
/* margin-top:auto прижимает картинку к низу карточки. Без него она едет следом
   за текстом, и в ряду с разной длиной описаний картинки встают на разной
   высоте — в соседних карточках расхождение доходило до 44 пикселей. */
.bn-art{ width:70%; max-width:230px; margin:auto 0 -26px auto; display:block }

/* ===================== ВИД 2 — карточки с объектами ====================== */
.bn2__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.bn2__grid .bn-card{ min-height:290px }

/* ===================== ВИД 3 — щит слева ================================= */
.bn3__grid{ display:grid; grid-template-columns:0.95fr 1.25fr; gap:36px; align-items:center }
.bn3__art img{ width:100%; max-width:460px; margin:0 auto; display:block }
.bn3__side .section-head{ margin-bottom:26px }
.bn3__side h2{ font-size:clamp(28px,3vw,42px) }
.bn3__list{ display:grid; grid-template-columns:1fr 1fr; gap:22px 28px }
.bn3__top{ display:flex; align-items:center; gap:14px; margin-bottom:10px }
.bn3__num{ font-size:15px; font-weight:700; color:#7f8be0;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:rgba(47, 63, 255, .12); border:1px solid rgba(47, 63, 255, .3) }
.bn3__top .bn-ico{ width:46px; height:46px; border-radius:13px }
.bn3__item h3{ font-size:16px }
.bn3__item p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 4 — радиальная схема ========================== */
.bn4__grid{ display:grid; grid-template-columns:1fr minmax(240px,320px) 1fr; gap:22px;
  align-items:center }
.bn4__col{ display:grid; gap:16px }
.bn4__cell{ padding:20px 22px }
.bn4__top{ display:flex; align-items:center; gap:14px }
.bn4__top .bn-ico{ width:46px; height:46px; border-radius:13px }
.bn4__cell h3{ margin:0; font-size:16px }
.bn4__cell p{ margin-top:10px }
.bn4__core img{ width:100%; max-width:320px; margin:0 auto; display:block }

/* ===================== ВИД 5 — модульная сетка =========================== */
.bn5__grid{
  display:grid; gap:16px;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  /* Правая колонка растягивается на обе строки тем, что имя области
     повторено в обеих строках шаблона. Прежняя запись задавала это через
     grid-area с именами линий — она хрупкая, и карточки наезжали друг
     на друга. */
  grid-template-areas:"main main main side" "c4 c5 c6 side";
}
.bn5__main{ grid-area:main; flex-direction:row; align-items:center; gap:24px; padding:28px 30px }
.bn5__main-text{ flex:1 1 0; min-width:0 }
.bn5__main-text h3{ font-size:24px }
.bn5__main-text p{ font-size:14px }
.bn5__map{ flex:1 1 0; min-width:0; max-width:420px }
.bn5__stats{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap }
.bn5__stats li{ padding:12px 18px; border-radius:13px;
  background:rgba(6, 7, 25, .55); border:1px solid var(--line) }
.bn5__stats b{ display:block; font-size:19px; font-weight:700 }
.bn5__stats span{ font-size:11.5px; color:var(--muted) }
.bn5__side{ grid-area:side; display:grid; gap:16px; align-content:start }
.bn5__cell--3{ grid-area:c4 }
.bn5__cell--4{ grid-area:c5 }
.bn5__cell--5{ grid-area:c6 }
.bn5__cell{ min-height:220px }

/* ===================== ВИД 6 — лента ===================================== */
.bn6__grid{ display:grid; grid-template-columns:0.9fr 1.35fr; gap:44px; align-items:center }
.bn6__side h2{ font-size:clamp(30px,3.2vw,46px); margin-bottom:18px }
.bn6__devices{ width:100%; max-width:460px; margin-top:22px }
.bn6__ribbon{ display:grid; padding-left:34px; border-left:1px solid var(--line) }
.bn6__ribbon li{ display:flex; align-items:flex-start; gap:20px; padding:20px 0;
  border-bottom:1px solid rgba(94, 107, 224, .12) }
.bn6__ribbon li:last-child{ border-bottom:0 }
.bn6__ribbon h3{ font-size:17px; margin-bottom:6px }
.bn6__ribbon p{ font-size:13.5px; color:var(--muted) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .bn5__grid{ grid-template-columns:1fr 1fr; grid-template-areas:"main main" "side side" "c4 c5" "c6 c6" }
  .bn5__side{ grid-area:side; grid-template-columns:1fr 1fr }
}

@media (max-width:1024px){
  .bn2__grid{ grid-template-columns:repeat(2,1fr) }
  .bn3__grid,.bn6__grid{ grid-template-columns:1fr; gap:26px }
  .bn3__art img,.bn6__devices{ max-width:340px }
  /* Три колонки схлопываются в одну: центр уходит наверх, карточки под него. */
  .bn4__grid{ grid-template-columns:1fr 1fr }
  .bn4__core{ grid-column:1 / -1; order:-1 }
  .bn4__core img{ max-width:250px }
  .bn5__main{ flex-direction:column; align-items:flex-start }
  .bn5__map{ max-width:none; width:100% }
  .bn6__ribbon{ padding-left:0; border-left:0 }
}

@media (max-width:720px){
  .bn2__grid{ grid-template-columns:1fr }
  .bn3__list{ grid-template-columns:1fr; gap:18px }
  .bn4__grid{ grid-template-columns:1fr }
  .bn5__grid{ grid-template-columns:1fr;
    grid-template-areas:"main" "side" "c4" "c5" "c6" }
  .bn5__side{ grid-template-columns:1fr }
  .bn5__stats{ flex-direction:column }
  .bn5__stats li{ width:100% }
  .bn6__ribbon li{ flex-direction:column; gap:12px }
  .bn-art{ width:60%; margin-bottom:-20px }
}

/* ==========================================================================
   ВИДЫ БЛОКА «КОМУ ПОДХОДИТ КЛЮЧ HAPP» 2–6
   Разметку генерирует tools/make-cases-blocks.js. Общая карточка описана
   один раз, дальше только раскладки .ucN.
   ========================================================================== */

.uc-card{
  display:flex; flex-direction:column; padding:22px 24px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.uc-card h3{ font-size:17px; margin:16px 0 8px }
.uc-card p{ font-size:13.5px; color:var(--muted) }
.uc-art{ width:100%; max-width:210px; display:block }
/* Высокую карточку заполняет сама картинка во всю ширину, текст идёт под
   ней. Прежнее justify-content:space-between разносило их по краям карточки:
   между ними зияла дыра, а текст упирался в нижнюю границу. */
.uc-card--tall .uc-art{ max-width:none; width:100% }

/* ===================== ВИД 2 — асимметричные плитки ====================== */
.uc2__grid{
  display:grid; gap:16px;
  grid-template-columns:1.15fr 1fr 1fr 1.15fr;
  grid-template-areas:"a b c f" "a d e f";
}
.uc2__a{ grid-area:a } .uc2__b{ grid-area:b } .uc2__c{ grid-area:c }
.uc2__d{ grid-area:d } .uc2__e{ grid-area:e } .uc2__f{ grid-area:f }

/* ===================== ВИД 3 — вертикальный маршрут ===================== */
.uc3__road{ position:relative; display:grid; gap:18px; padding:10px 0 }
.uc3__road::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px;
  background:linear-gradient(180deg,transparent,rgba(47, 63, 255, .55) 8%,rgba(47, 63, 255, .55) 92%,transparent);
}
.uc3__row{ display:grid; grid-template-columns:1fr 56px 1fr; align-items:center }
.uc3__row .uc-card{ grid-column:1 }
.uc3__row--right .uc-card{ grid-column:3 }
.uc3__dot{
  grid-column:2; position:relative; z-index:1; justify-self:center;
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  font-size:15px; font-weight:700; color:#cfd3ff;
  background:var(--bg); border:2px solid var(--blue);
  box-shadow:0 0 20px rgba(47, 63, 255, .55);
}
.uc3__card{ flex-direction:row; align-items:center; gap:20px }
.uc3__art{ max-width:170px; flex:0 0 auto }
.uc3__card h3{ margin-top:0 }

/* ===================== ВИД 4 — витрина ================================== */
.uc4__hero{
  display:grid; grid-template-columns:0.85fr 1.25fr; gap:26px; align-items:center;
  padding:30px 34px; margin-bottom:16px; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(120deg,rgba(20, 24, 86, .9),rgba(11, 13, 38, .92));
  border:1px solid rgba(47, 63, 255, .4);
}
.uc4__count{
  display:inline-flex; gap:6px; padding:7px 16px; border-radius:999px;
  font-size:13px; font-weight:600; color:#9da7ff;
  background:rgba(47, 63, 255, .14); border:1px solid rgba(47, 63, 255, .4);
}
.uc4__count i{ font-style:normal; color:#5f6ac4 }
.uc4__text h3{ font-size:clamp(26px,2.6vw,36px); margin:16px 0 12px }
.uc4__text p{ font-size:15px; color:var(--txt-2) }
.uc4__hero img{ width:100%; border-radius:14px }

.uc4__strip{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px }
.uc4__cell{ padding:18px 18px 20px }
.uc4__top{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.uc4__ico{ max-width:96px }
.uc4__top span{ font-size:12.5px; color:var(--muted) }
.uc4__cell h3{ font-size:15px; margin:12px 0 7px }
.uc4__cell p{ font-size:12.5px }
.uc4__cell.is-active{ border-color:rgba(47, 63, 255, .6);
  box-shadow:0 0 0 1px rgba(47, 63, 255, .22) }

/* ===================== ВИД 5 — вокруг ключа ============================= */
.uc5__grid{
  display:grid; gap:16px; align-items:center;
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:"c1 c2 c3" "c4 core c5" "c4 c6 c5";
}
/* Ключ занимает середину нижнего ряда, карточки обходят его слева и справа.
   Области привязаны к номеру в классе, а не к nth-child: тот считает и div
   с ключом, из-за чего порядок карточек уезжал на одну позицию. */
.uc5__cell--1{ grid-area:c1 }
.uc5__cell--2{ grid-area:c2 }
.uc5__cell--3{ grid-area:c3 }
.uc5__cell--4{ grid-area:c4 }
.uc5__cell--5{ grid-area:c6 }
.uc5__cell--6{ grid-area:c5 }
.uc5__core{ grid-area:core; display:grid; place-items:center }
.uc5__core img{ width:100%; max-width:225px }

/* ===================== ВИД 6 — щит слева ================================ */
.uc6__grid{ display:grid; grid-template-columns:0.85fr 1.35fr; gap:40px; align-items:center }
.uc6__side h2{ font-size:clamp(30px,3.2vw,44px) }
.uc6__side .section-sub{ text-align:left; margin:14px 0 0 }
.uc6__shield{ width:100%; max-width:380px; margin-top:22px }
.uc6__list{ display:grid; grid-template-columns:1fr 1fr; gap:26px 30px }
.uc6__num{ display:flex; align-items:center; gap:14px; font-size:13px; color:#6f7add }
.uc6__num i{ flex:1 1 auto; height:1px; background:rgba(47, 63, 255, .4); max-width:38px }
.uc6__body{ display:flex; align-items:flex-start; gap:16px; margin-top:12px }
.uc6__art{ max-width:120px; flex:0 0 auto }
.uc6__item h3{ font-size:16px; margin-bottom:8px }
.uc6__item p{ font-size:13.5px; color:var(--muted) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .uc4__strip{ grid-template-columns:repeat(3,1fr) }
}

@media (max-width:1024px){
  .uc2__grid{ grid-template-columns:1fr 1fr; grid-template-areas:"a b" "a d" "c f" "e f" }
  /* Линия по центру осмысленна, только пока карточки чередуются слева и
     справа. В одну колонку она превращается в полосу сбоку от текста. */
  .uc3__road::before{ display:none }
  .uc3__row,.uc3__row--right{ grid-template-columns:1fr; gap:12px }
  .uc3__row .uc-card,.uc3__row--right .uc-card{ grid-column:1 }
  .uc3__dot{ grid-column:1; justify-self:start; order:-1 }
  .uc4__hero{ grid-template-columns:1fr }
  .uc5__grid{ grid-template-columns:1fr 1fr;
    grid-template-areas:"core core" "c1 c2" "c3 c4" "c5 c6" }
  .uc5__core img{ max-width:160px }
  .uc6__grid{ grid-template-columns:1fr; gap:26px }
  .uc6__shield{ max-width:280px; margin:22px auto 0 }
}

@media (max-width:720px){
  .uc2__grid{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e" "f" }
  .uc-card--tall .uc-art{ width:100% }
  .uc3__card{ flex-direction:column; align-items:flex-start }
  .uc4__strip{ grid-template-columns:1fr }
  .uc5__grid{ grid-template-columns:1fr;
    grid-template-areas:"core" "c1" "c2" "c3" "c4" "c5" "c6" }
  .uc6__list{ grid-template-columns:1fr }
  .uc6__body{ flex-direction:column }
}

/* ==========================================================================
   ВИДЫ БЛОКА «ЧТО МЫ ЗНАЕМ О ВАС» 2–6
   Разметку генерирует tools/make-privacy-blocks.js. Общие детали описаны
   один раз, дальше только раскладки .pvN.
   ========================================================================== */

.pv-ico{
  display:grid; place-items:center; width:56px; height:56px; flex:0 0 auto;
  border-radius:15px; background:rgba(47, 63, 255, .12);
  border:1px solid rgba(47, 63, 255, .32);
}
.pv-ico img{ width:60%; height:auto; object-fit:contain }

.pv-badge{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 18px; border-radius:999px; font-size:13px; font-weight:600; color:#5ee0cb;
  background:rgba(36, 192, 169, .14); border:1px solid rgba(36, 192, 169, .4);
}
.pv-badge i{ width:8px; height:8px; border-radius:50%; background:var(--green) }

.pv-row{
  display:flex; align-items:flex-start; gap:18px; padding:22px 24px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.pv-row h3{ font-size:16px; margin-bottom:8px }
.pv-row p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 2 — щит с подписями =========================== */
.pv2__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:34px; align-items:center }
.pv2__art img{ width:100%; max-width:520px; margin:0 auto; display:block }
.pv2__list{ display:grid; gap:12px }

/* ===================== ВИД 3 — щит по центру ============================= */
.pv3__art{ position:relative; display:grid; place-items:center; margin-bottom:34px }
.pv3__art img{ width:100%; max-width:330px }
/* Плашка стоит рядом со щитом, а не под ним: в макете она читается как
   подпись к картинке, а не как отдельный элемент списка. */
.pv3__art .pv-badge{ position:absolute; right:calc(50% - 320px); top:52% }
.pv3__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.pv3__col{ padding:0 30px; border-left:1px solid var(--line) }
.pv3__col:first-child{ border-left:0; padding-left:0 }
.pv3__col:last-child{ padding-right:0 }
.pv3__top{ display:flex; align-items:center; gap:16px; margin-bottom:16px }
.pv3__num{ font-size:34px; font-weight:800; color:#20245f; letter-spacing:.02em }
.pv3__col h3{ font-size:16px; margin-bottom:10px }
.pv3__col p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 4 — линия с номерами =========================== */
.pv4__grid{ display:grid; grid-template-columns:0.9fr 1.3fr; gap:44px; align-items:center }
.pv4__side h2{ font-size:clamp(30px,3.2vw,44px) }
.pv4__side .section-sub{ text-align:left; margin:14px 0 0 }
.pv4__shield{ width:100%; max-width:320px; margin-top:24px }
.pv4__line{ position:relative; display:grid; gap:14px }
.pv4__line li{
  display:flex; align-items:flex-start; gap:20px; padding:22px 26px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .92),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.pv4__dot{ width:62px; height:62px; border-radius:50%;
  box-shadow:0 0 22px rgba(47, 63, 255, .3) }
.pv4__num{ font-size:12.5px; color:#5f6ac4; letter-spacing:.08em }
.pv4__line h3{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-size:17px; margin:6px 0 8px }
.pv4__line p{ font-size:13.5px; color:var(--muted) }

/* ===================== ВИД 5 — модульная сетка ============================ */
.pv5__grid{ display:grid; grid-template-columns:1.2fr 1fr; gap:20px; align-items:start }
.pv5__left{ display:grid; gap:12px; align-content:start }
.pv5__left .section-head{ margin-bottom:10px }
.pv5__left h2{ font-size:clamp(28px,2.8vw,40px) }
.pv5__right{ display:grid; gap:14px }
.pv5__art{
  position:relative; display:grid; place-items:center; padding:26px;
  border-radius:var(--radius);
  background:radial-gradient(120% 90% at 50% 40%,rgba(29, 38, 190, .22),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.pv5__art img{ width:100%; max-width:300px }
.pv5__art .pv-badge{ position:absolute; right:22px; top:50% }
.pv5__chips{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px }
.pv5__chips li{
  display:grid; place-items:center; gap:8px; padding:18px 12px; text-align:center;
  border-radius:var(--radius-sm);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line);
}
.pv5__chips .pv-ico{ width:44px; height:44px; border-radius:12px }
.pv5__chips b{ font-size:13px }
.pv5__chips span{ font-size:11.5px; color:var(--muted); line-height:1.4 }

/* ===================== ВИД 6 — скошенные карточки ======================== */
.pv6__grid{ display:grid; grid-template-columns:0.85fr 1.3fr; gap:40px; align-items:center }
.pv6__side h2{ font-size:clamp(30px,3.2vw,44px) }
.pv6__side .section-sub{ text-align:left; margin:14px 0 0 }
.pv6__art{ position:relative; display:grid; place-items:center; margin-top:22px }
.pv6__art img{ width:100%; max-width:320px }
.pv6__art .pv-badge{ position:absolute; left:8%; bottom:14% }
.pv6__list{ display:grid; gap:14px }
/* Срез правого угла — единственное отличие этого вида; на узком экране он
   снимается, иначе текст последней строки уезжает под скос. */
.pv6__row{ clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1024px){
  .pv2__grid,.pv4__grid,.pv5__grid,.pv6__grid{ grid-template-columns:1fr; gap:26px }
  .pv2__art img,.pv4__shield,.pv6__art img{ max-width:300px }
  .pv3__cols{ grid-template-columns:1fr; gap:22px }
  .pv3__col{ border-left:0; padding:0 }
  .pv3__art .pv-badge{ position:static; margin-top:14px }
  .pv5__art .pv-badge{ position:static; margin-top:14px }
  .pv6__art .pv-badge{ position:static; margin-top:14px }
}

@media (max-width:720px){
  .pv-row,.pv4__line li{ flex-direction:column; gap:14px }
  .pv5__chips{ grid-template-columns:1fr }
  .pv6__row{ clip-path:none }
}

/* ==========================================================================
   БЛОКИ СТРАНИЦЫ ПРОБНОГО ДОСТУПА
   Разметку генерирует tools/make-trial-blocks.js.
   .trN — первый экран, .tiN — «Что входит в тестовую подписку».
   ========================================================================== */

.tr-ico{
  display:grid; place-items:center; width:52px; height:52px; flex:0 0 auto;
  border-radius:14px; background:rgba(47, 63, 255, .14); border:1px solid rgba(47, 63, 255, .34);
}
.tr-ico svg{ width:26px; height:26px; fill:none; stroke:#6f77ff; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round }
.tr-ico--green{ background:rgba(36, 192, 169, .16); border-color:rgba(36, 192, 169, .42) }
.tr-ico--green svg{ stroke:#5ee0cb }

.tr-spec{ display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.tr-spec b{ font-size:24px; font-weight:800; letter-spacing:-.02em }
.tr-spec > span:last-child{ font-size:12.5px; color:var(--muted); width:100%; padding-left:66px }

/* ===================== ВИД 2 — ключ справа =============================== */
.tr2{ padding-top:34px }
.tr2__grid{ display:grid; grid-template-columns:1fr 0.95fr; gap:34px; align-items:center }
.tr2__text h1{ font-size:clamp(30px,3.4vw,46px); font-weight:800; letter-spacing:-.025em; margin:12px 0 16px }
.tr2__text .page-head__sub{ margin:0; text-align:left }
.tr2__text .page-head__actions{ justify-content:flex-start; margin-top:26px }
.tr2__art img{ width:100%; max-width:520px; margin-left:auto; display:block; border-radius:16px }
.tr2__specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:30px;
  padding:22px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.tr2__specs .tr-spec{ padding:0 26px; border-left:1px solid var(--line) }
.tr2__specs .tr-spec:first-child{ border-left:0; padding-left:0 }

/* ===================== ВИД 3 — билет ==================================== */
.tr3{ padding-top:30px }
.tr3__eyebrow{ display:block; text-align:center; margin-bottom:20px }
.tr3__ticket{
  position:relative; display:grid; grid-template-columns:1.25fr auto 1fr; gap:0;
  align-items:center; padding:34px 40px; border-radius:24px;
  background:linear-gradient(180deg,rgba(16, 19, 58, .92),rgba(10, 12, 38, .92));
  border:1px solid rgba(47, 63, 255, .45);
}
/* Вырезы по краям делают из карточки «билет». Радиальный градиент цветом
   страницы дешевле маски и не мешает тексту внутри. */
.tr3__ticket::before,.tr3__ticket::after{
  content:''; position:absolute; left:calc(58% - 17px); width:34px; height:17px;
  background:var(--bg); border:1px solid rgba(47, 63, 255, .45);
}
.tr3__ticket::before{ top:-1px; border-radius:0 0 34px 34px; border-top:0 }
.tr3__ticket::after{ bottom:-1px; border-radius:34px 34px 0 0; border-bottom:0 }
.tr3__left h1{ font-size:clamp(26px,2.9vw,38px); font-weight:800; letter-spacing:-.02em;
  margin-bottom:14px }
.tr3__left .page-head__sub{ margin:0; text-align:left; max-width:520px }
.tr3__left .page-head__actions{ justify-content:flex-start; margin-top:24px }
.tr3__perf{ width:1px; height:78%; margin:0 34px;
  background:repeating-linear-gradient(180deg,rgba(94, 107, 224, .55) 0 7px,transparent 7px 15px) }
.tr3__right{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.tr3__cell{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px;
  border-radius:14px; background:rgba(255, 255, 255, .03); border:1px solid var(--line) }
.tr3__cell > span:last-child{ padding-left:0 }

/* ===================== ВИД 4 — панель справа ============================= */
.tr4{ padding-top:34px }
.tr4__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:40px; align-items:center }
.tr4__text h1{ font-size:clamp(30px,3.4vw,46px); font-weight:800; letter-spacing:-.025em;
  margin:12px 0 16px }
.tr4__text .crumbs{ justify-content:flex-start; margin-bottom:14px }
.tr4__text .page-head__sub{ margin:0; text-align:left }
.tr4__panel{
  padding:26px; border-radius:22px;
  background:radial-gradient(120% 100% at 80% 0%,rgba(29, 38, 190, .25),rgba(11, 13, 38, .92));
  border:1px solid rgba(47, 63, 255, .4);
}
.tr4__cells{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px }
.tr4__cell{ flex-direction:column; align-items:flex-start; gap:12px; padding:18px 20px;
  border-radius:14px; background:rgba(6, 7, 25, .5); border:1px solid var(--line) }
.tr4__cell > span:last-child{ padding-left:0 }
.tr4__panel .page-head__actions{ justify-content:flex-start; margin:0 }

/* ===================== ВИД 5 — условия на линии ========================== */
.tr5{ padding-top:30px }
.tr5__line{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; margin:34px 0 6px; text-align:center;
}
.tr5__line::before{
  content:''; position:absolute; left:12.5%; right:12.5%; top:44px; height:1px;
  background:rgba(47, 63, 255, .4);
}
.tr5__line li{ display:flex; flex-direction:column; align-items:center; gap:10px }
.tr5__dot{
  position:relative; z-index:1; display:grid; place-items:center;
  width:88px; height:88px; border-radius:50%;
  background:var(--bg); border:1px solid rgba(47, 63, 255, .5);
  box-shadow:0 0 30px rgba(47, 63, 255, .28);
}
.tr5__dot svg{ width:34px; height:34px; fill:none; stroke:#6f77ff; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round }
.tr5__line b{ font-size:24px; font-weight:800; letter-spacing:-.02em }
.tr5__line li > span:last-child{ font-size:12.5px; color:var(--muted) }
.tr5__actions{ margin-top:26px }

/* ===================== ВИД 6 — карточка цены ============================= */
.tr6{ padding-top:30px }
.tr6__top{ display:grid; grid-template-columns:1.6fr 0.8fr; gap:16px; margin-bottom:16px }
.tr6__main{
  padding:34px 38px; border-radius:var(--radius);
  background:radial-gradient(120% 120% at 85% 20%,rgba(29, 38, 190, .28),rgba(11, 13, 38, .92));
  border:1px solid var(--line); border-left:3px solid var(--blue);
}
.tr6__main h1{ font-size:clamp(28px,3.1vw,42px); font-weight:800; letter-spacing:-.025em;
  margin-bottom:14px }
.tr6__main .page-head__sub{ margin:0; text-align:left; max-width:560px }
.tr6__main .page-head__actions{ justify-content:flex-start; margin-top:24px }
.tr6__price{
  display:grid; align-content:center; gap:8px; padding:30px 34px; border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(18, 74, 69, .85),rgba(9, 24, 28, .9));
  border:1px solid rgba(36, 192, 169, .5);
}
.tr6__price b{ font-size:52px; font-weight:800; letter-spacing:-.03em; line-height:1 }
.tr6__price > span:last-child{ font-size:12.5px; color:#8fbfb6; text-transform:uppercase;
  letter-spacing:.08em }
.tr6__rest{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.tr6__cell{ padding:22px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line) }
.tr6__cell > span:last-child{ padding-left:66px }

/* ==========================  ЧТО ВХОДИТ  ================================= */
.ti3__ico{ display:grid; place-items:center; width:56px; height:56px; flex:0 0 auto;
  border-radius:15px; background:#0a0d26; border:1px solid rgba(47, 63, 255, .34) }
.ti3__ico .feature__icon{ width:34px; height:30px; margin:0; object-fit:contain }

.ti3__list{ display:grid; gap:12px }
.ti3__list li{
  display:flex; align-items:center; gap:22px; padding:20px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.ti3__num{ font-size:26px; font-weight:800; color:#20245f; letter-spacing:.02em;
  padding-right:22px; border-right:1px solid var(--line) }
.ti3__list h3{ font-size:16px; margin-bottom:6px }
.ti3__list p{ font-size:13.5px; color:var(--muted) }

.ti4__list{ display:grid; gap:12px }
.ti4__row{
  display:flex; align-items:center; gap:20px; padding:20px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.ti4__row h3{ font-size:16px; margin-bottom:6px }
.ti4__row p{ font-size:13.5px; color:var(--muted) }
.ti4__arrow{ margin-left:auto; font-style:normal; font-size:24px; color:#3d4699 }

.ti5__panel{ padding:34px 38px; border-radius:22px;
  background:linear-gradient(180deg,rgba(16, 19, 54, .9),rgba(10, 12, 36, .9));
  border:1px solid rgba(47, 63, 255, .32) }
.ti5__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
.ti5__col{ padding:0 30px; border-left:1px solid var(--line); text-align:center }
.ti5__col:first-child{ border-left:0 }
.ti5__col .ti3__ico{ margin:0 auto 16px }
.ti5__col h3{ font-size:16px; margin-bottom:10px }
.ti5__col p{ font-size:13.5px; color:var(--muted) }

.ti6__panel{ position:relative; padding:34px 38px; border-radius:22px;
  background:linear-gradient(180deg,rgba(16, 19, 54, .9),rgba(10, 12, 36, .9));
  border:1px solid var(--line) }
.ti6__bar{ display:block; width:46px; height:4px; border-radius:2px; background:var(--blue);
  margin-bottom:18px }
.ti6__cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.ti6__card{ padding:22px 24px; border-radius:var(--radius);
  background:rgba(6, 7, 25, .5); border:1px solid var(--line) }
.ti6__card .ti3__ico{ margin-bottom:16px }
.ti6__card h3{ font-size:16px; margin-bottom:8px }
.ti6__card p{ font-size:13.5px; color:var(--muted) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1024px){
  .tr2__grid,.tr4__grid{ grid-template-columns:1fr; gap:26px }
  .tr2__art img{ margin:0 auto; max-width:420px }
  .tr2__specs{ grid-template-columns:1fr 1fr; row-gap:20px }
  .tr2__specs .tr-spec{ border-left:0; padding-left:0 }
  .tr3__ticket{ grid-template-columns:1fr; row-gap:24px }
  /* Вырезы и перфорация рассчитаны на две колонки: в одну они оказываются
     посреди текста, поэтому убираются. */
  .tr3__ticket::before,.tr3__ticket::after,.tr3__perf{ display:none }
  .tr5__line{ grid-template-columns:repeat(2,1fr); row-gap:26px }
  .tr5__line::before{ display:none }
  .tr6__top{ grid-template-columns:1fr }
  .tr6__rest{ grid-template-columns:1fr }
  .ti5__cols{ grid-template-columns:1fr; gap:24px }
  .ti5__col{ border-left:0; padding:0 }
  .ti6__cards{ grid-template-columns:1fr }
}

@media (max-width:720px){
  .tr2__specs,.tr3__right,.tr4__cells{ grid-template-columns:1fr }
  .tr5__line{ grid-template-columns:1fr }
  .tr-spec > span:last-child,.tr6__cell > span:last-child{ padding-left:0; width:auto }
  .tr-spec{ flex-direction:column; align-items:flex-start; gap:10px }
  .ti3__list li,.ti4__row{ flex-direction:column; align-items:flex-start; gap:14px }
  .ti3__num{ border-right:0; padding-right:0 }
  .ti4__arrow{ display:none }
  .ti5__panel,.ti6__panel{ padding:24px 20px }
}

/* ==========================================================================
   ВИДЫ БЛОКА СТРАНИЦЫ ЗАГРУЗКИ 2–6
   Разметку генерирует tools/make-download-blocks.js. Базовые .dl-card и
   .dl-grid описаны выше (их использует вид 1), здесь только раскладки .dlN.

   Фотографии устройств нарезаны из макетов: фон у них тёмно-синий и с фоном
   карточки сходится, поэтому масок нет.
   ========================================================================== */

.page-head--left{ text-align:left }
.page-head--left .crumbs{ justify-content:flex-start }
.page-head--left .page-head__sub{ margin-left:0 }

.dl-dev{ width:100%; max-width:300px; display:block; border-radius:14px }

/* ===================== ВИД 2 — вкладки и крупная карточка ================ */
.dl-tabs{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:16px }
.dl-tabs a{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 12px; border-radius:14px; font-size:14px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); transition:.18s;
}
.dl-tabs .dl-ico{ width:20px; height:20px }
.dl-tabs a:hover{ background:rgba(47, 63, 255, .1); border-color:rgba(47, 63, 255, .3) }
.dl-tabs a.is-active{
  background:rgba(47, 63, 255, .16); border-color:rgba(47, 63, 255, .6); color:#ffffff;
  box-shadow:0 8px 24px rgba(27, 36, 224, .24);
}
.dl2__feature{
  display:grid; grid-template-columns:1fr 0.85fr; gap:26px; align-items:center;
  padding:28px 30px; margin-bottom:16px; border-color:rgba(47, 63, 255, .5);
}
.dl2__feature .dl-dev{ max-width:420px; margin-left:auto }
.dl2__rest{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; align-items:start }
.dl2__small{ padding:18px }
.dl2__small h2{ font-size:14.5px }
.dl2__small > p{ font-size:12.5px }
.dl2__small .btn--store{ padding:8px 12px 8px 8px; font-size:12px }
.dl2__small .btn--store .dl-store-ico{ width:16px; height:16px }

/* ===================== ВИД 3 — список систем слева ======================= */
.dl3{ padding-top:30px }
/* Заголовок вынесен из правой колонки отдельным элементом сетки: на телефоне
   колонки складываются в одну, и список систем оказывался ВЫШЕ заголовка
   страницы. Теперь порядок задан явно и от ширины не зависит. */
.dl3__grid{
  display:grid; gap:0 36px; align-items:start;
  grid-template-columns:210px 1fr;
  grid-template-areas:'nav head' 'nav cards';
}
.dl3__nav{ grid-area:nav }
.dl3__head{ grid-area:head }
.dl3__cards{ grid-area:cards }
.dl3__nav{ display:grid; gap:8px; position:sticky; top:86px }
.dl3__nav a{
  display:flex; align-items:center; gap:14px; padding:12px 16px; border-radius:14px;
  font-size:14px; color:var(--txt-2);
  background:transparent; border:1px solid transparent; transition:.18s;
}
.dl3__nav .dl-ico{ width:21px; height:21px }
.dl3__nav a.is-active .dl-ico{ color:#ffffff }
.dl3__nav a:hover{ background:rgba(255, 255, 255, .04) }
.dl3__nav a.is-active{
  background:rgba(47, 63, 255, .16); border-color:rgba(47, 63, 255, .45); color:#ffffff;
}
.dl3__head .crumbs{ justify-content:flex-start; margin-bottom:14px }
.dl3__head h1{ font-size:clamp(30px,3.4vw,46px); font-weight:800; letter-spacing:-.025em;
  margin:12px 0 14px }
.dl3__head .page-head__sub{ margin:0 0 26px; text-align:left }
.dl3__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.dl3__card{ padding:22px 24px }
.dl3__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px }
.dl3__btns{ margin-top:0; flex-direction:column; align-items:stretch }
.dl3__card > p{ margin-top:14px }

/* ===================== ВИД 4 — плитки с устройствами ==================== */
.dl4__grid{
  display:grid; gap:16px;
  grid-template-columns:1fr 1fr;
  grid-template-areas:"a b" "c d" "e f";
}
.dl4__card--1{ grid-area:a } .dl4__card--2{ grid-area:c } .dl4__card--3{ grid-area:b }
.dl4__card--4{ grid-area:d } .dl4__card--5{ grid-area:e } .dl4__card--6{ grid-area:f }
.dl4__card{ display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center;
  padding:24px 26px }
.dl4__card .dl-dev{ max-width:220px }
.dl4__text{ min-width:0 }

/* ===================== ВИД 5 — пронумерованный маршрут =================== */
.dl5__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.dl5__card{ position:relative; padding:22px 24px }
.dl5__num{
  position:absolute; top:18px; left:18px; z-index:1;
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700; color:#cfd3ff;
  background:rgba(10, 13, 38, .9); border:1px solid rgba(47, 63, 255, .5);
}
.dl5__card .dl-dev{ max-width:none; margin:0 auto 16px }
.dl5__card h2{ font-size:16px; margin-bottom:5px }
.dl5__card > p{ margin-top:12px; font-size:13px; color:var(--muted) }

/* ===================== ВИД 6 — таблица-каталог ========================== */
.dl6__table{ min-width:1000px }
.dl6__table td{ vertical-align:top; padding:18px 20px }
.dl6__name{ display:flex; align-items:center; gap:14px }
.dl6__name .dl-ico{ width:26px; height:26px }
.dl6__name b{ font-size:14.5px; color:var(--txt) }
.dl6__desc{ max-width:330px; font-size:13px }
.dl6__btns{ margin-top:0; flex-direction:column; align-items:stretch; gap:8px }
.dl6__btns .btn--store{ justify-content:flex-start; padding:8px 14px 8px 8px; font-size:12.5px }
.dl6__btns .btn--store .dl-store-ico{ width:17px; height:17px }
.dl6__table .dl-card__more{ margin-top:0; white-space:nowrap }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .dl-tabs{ grid-template-columns:repeat(3,1fr) }
  .dl2__rest{ grid-template-columns:repeat(3,1fr) }
  .dl5__grid{ grid-template-columns:repeat(2,1fr) }
}

@media (max-width:1024px){
  .dl2__feature{ grid-template-columns:1fr }
  .dl2__feature .dl-dev{ margin:0 auto }
  .dl3__grid{ grid-template-columns:1fr; gap:24px;
    grid-template-areas:'head' 'nav' 'cards' }
  /* Колонка систем прилипала к верху — в одну колонку прилипать нечему. */
  .dl3__nav{ position:static; grid-template-columns:repeat(3,1fr); gap:10px }
  .dl3__cards{ grid-template-columns:1fr }
  .dl4__grid{ grid-template-columns:1fr; grid-template-areas:"a" "b" "c" "d" "e" "f" }
}

@media (max-width:720px){
  .dl-tabs{ grid-template-columns:repeat(2,1fr) }
  .dl2__rest,.dl5__grid{ grid-template-columns:1fr }
  .dl3__nav{ grid-template-columns:1fr 1fr }
  .dl4__card{ grid-template-columns:1fr; row-gap:16px }
  .dl4__card .dl-dev{ max-width:260px; margin:0 auto }
  .dl3__top{ flex-direction:column; gap:14px }
}

/* ==========================================================================
   ВИДЫ БЛОКА СТРАНИЦЫ ДИАГНОСТИКИ 1–6
   Разметку генерирует tools/make-diag-blocks.js. Общие детали (карточка
   «Быстрая диагностика», список проблем) описаны один раз, дальше .dgN.
   ========================================================================== */

.dg-panel{
  padding:26px 22px; border-radius:var(--radius); text-align:center;
  background:radial-gradient(110% 80% at 50% 30%,rgba(29, 38, 190, .2),rgba(11, 13, 38, .92));
  border:1px solid var(--line);
}
.dg-panel h2{ font-size:22px; margin-bottom:12px }
.dg-panel img{ width:100%; max-width:230px; margin:0 auto; display:block }
.dg-panel p{ margin-top:10px; font-size:12.5px; color:var(--muted) }

.dg-list{ display:grid; gap:10px; min-width:0 }

.dg-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto }
.dg-dot--red{ background:#f27363; box-shadow:0 0 0 3px rgba(242, 115, 99, .16) }
.dg-dot--yellow{ background:#e8e96a; box-shadow:0 0 0 3px rgba(232, 233, 106, .16) }

.dg-num{
  display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto;
  border-radius:50%; font-size:13px; font-weight:700; color:#cfd3ff;
  background:rgba(10, 13, 38, .9); border:1px solid rgba(47, 63, 255, .45);
}

.cta-bar--slim{ margin-top:14px; padding:16px 20px }
.cta-bar__ico img{ width:44px; height:44px; object-fit:contain }
.cta-bar .btn--primary img{ width:20px; height:20px; object-fit:contain }

/* ===================== ВИД 1 — как сейчас =============================== */
.dg1__grid{ display:grid; grid-template-columns:340px 1fr; gap:20px; align-items:start }

/* ===================== ВИД 2 — нумерованный список ====================== */
.dg2{ padding-top:30px }
.dg2__grid{ display:grid; grid-template-columns:340px 1fr; gap:34px; align-items:start }
.dg2__side .crumbs{ justify-content:flex-start; margin-bottom:14px }
.dg2__side h1{ font-size:clamp(28px,3vw,42px); font-weight:800; letter-spacing:-.025em }
.dg2__side .page-head__sub{ margin:12px 0 22px; text-align:left }
/* Номер стоит слева от строки, поэтому список превращается в две колонки:
   узкую под номер и широкую под саму строку. */
.dg2__list{ grid-template-columns:auto 1fr; align-items:start; column-gap:16px }
.dg2__list .dg-num{ margin-top:14px }

/* ===================== ВИД 3 — телефон по центру ======================== */
.dg3__grid{ display:grid; grid-template-columns:1fr minmax(220px,300px) 1fr; gap:22px;
  align-items:center }
.dg3__col{ display:grid; gap:12px; min-width:0 }
.dg3__core{ display:grid; place-items:center; text-align:center }
.dg3__core img{ width:100%; max-width:260px }
.dg3__core b{ margin-top:12px; font-size:20px }
.dg3__core span{ font-size:12.5px; color:var(--muted) }

/* ===================== ВИД 4 — карточка с легендой ====================== */
.dg4__grid{ display:grid; grid-template-columns:330px 1fr; gap:20px; align-items:start }
.dg4__legend{ display:grid; gap:9px; margin:20px 0 18px; text-align:left }
.dg4__legend li{ display:flex; align-items:center; gap:11px; font-size:12.5px; color:var(--muted) }
.dg4__panel .btn--block{ justify-content:center }
.dg4__note{ margin-top:16px; text-align:left }
.dg4__note b{ display:block; font-size:13.5px; margin-bottom:5px }
.dg4__note span{ font-size:12px; color:var(--muted); line-height:1.45 }

/* ===================== ВИД 5 — модульная сетка ========================== */
.dg5__grid{ display:grid; grid-template-columns:330px 1fr; gap:20px; align-items:start }
.dg5__main{ display:grid; gap:12px; min-width:0 }
.dg5__cells{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
/* Последняя проблема занимает обе колонки — в макете она шире остальных. */
.dg5__cells .qa:last-child{ grid-column:1 / -1 }

/* ===================== ВИД 6 — крупный телефон ========================== */
.dg6{ padding-top:26px }
.dg6__grid{ display:grid; grid-template-columns:0.85fr 1.25fr; gap:40px; align-items:center }
.dg6__side h1{ font-size:clamp(32px,3.6vw,50px); font-weight:800; letter-spacing:-.025em }
.dg6__side .page-head__sub{ margin:14px 0 0; text-align:left }
/* Картинка и подпись стоят рядом строкой, а не подпись поверх картинки:
   абсолютная подпись держалась на пропорциях прежней иллюстрации и наехала
   на телефон, как только картинка стала выше и уже. */
.dg6__art{ display:flex; align-items:center; gap:18px; margin-top:24px }
.dg6__art img{ width:100%; max-width:210px }
.dg6__cap{ flex:1 1 auto; min-width:0 }
.dg6__cap b{ display:block; font-size:19px }
.dg6__cap span{ font-size:12px; color:var(--muted) }
.dg6__main .crumbs{ justify-content:flex-start; margin-bottom:14px }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .dg3__grid{ grid-template-columns:1fr 1fr }
  /* Телефон между колонками теряет смысл, когда колонок две: уводим его
     наверх на всю ширину. */
  .dg3__core{ grid-column:1 / -1; order:-1 }
  .dg3__core img{ max-width:210px }
}

@media (max-width:1024px){
  .dg1__grid,.dg2__grid,.dg4__grid,.dg5__grid,.dg6__grid{ grid-template-columns:1fr; gap:24px }
  .dg-panel img{ max-width:190px }
  .dg2__list{ grid-template-columns:auto 1fr }
  .dg6__art{ display:flex; justify-content:center }
  .dg6__cap{ position:static; margin-top:12px; text-align:center }
  .dg6__art{ flex-direction:column; align-items:center }
}

@media (max-width:720px){
  .dg3__grid{ grid-template-columns:1fr }
  .dg5__cells{ grid-template-columns:1fr }
  .dg5__cells .qa:last-child{ grid-column:auto }
  .dg2__list{ grid-template-columns:1fr }
  .dg2__list .dg-num{ display:none }
}

/* ==========================================================================
   ВИДЫ ПОДВАЛА 2–6
   Разметку генерирует tools/make-footer-blocks.js. Общие детали (колонка
   ссылок, кнопка Telegram) описаны один раз, дальше только раскладки .ftN.
   ========================================================================== */

.ft-col{ display:flex; flex-direction:column; gap:9px }
.ft-col b{ font-size:13.5px; margin-bottom:3px }
.ft-col a{ font-size:13.5px; color:var(--txt-2) }
.ft-col a:hover{ color:#ffffff }

.ft-brand p{ margin-top:12px; max-width:340px; font-size:13px; color:var(--muted) }

.ft-tg{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 16px 8px 8px; border-radius:999px; font-size:13px; color:var(--txt-2);
  background:rgba(255, 255, 255, .03); border:1px solid var(--line); transition:.18s;
}
.ft-tg:hover{ background:rgba(47, 63, 255, .12); border-color:rgba(47, 63, 255, .3); color:#ffffff }

/* ===================== ВИД 2 — разделители и подсветка =================== */
/* Подсветка по верхней грани — единственное отличие от вида 1, поэтому
   рисуется псевдоэлементом, а не лишней обёрткой в разметке. */
.ft2{ position:relative; border-top:1px solid rgba(47, 63, 255, .4) }
.ft2::before{
  content:''; position:absolute; left:15%; right:15%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(90, 111, 255, .95),transparent);
  box-shadow:0 0 22px rgba(47, 63, 255, .8);
}
.ft2__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:0; padding-bottom:28px }
.ft2__col{ padding-left:34px; border-left:1px solid var(--line) }
.ft2 .ft-brand{ padding-right:34px }

/* ===================== ВИД 3 — по центру ================================= */
.ft3__brand{ text-align:center; padding-bottom:26px }
.ft3__brand p{ max-width:560px; margin:14px auto 0; font-size:13.5px; color:var(--muted) }
.ft3__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:760px; margin:0 auto; padding-bottom:28px }
.ft3__col{ align-items:center; text-align:center }

/* ===================== ВИД 4 — карточки ================================== */
.ft4{ border-top:0; padding-top:0 }
.ft4__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:16px }
.ft4 .ft-brand,.ft4__col{
  padding:24px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.ft4 .ft-brand{
  background:radial-gradient(120% 120% at 20% 20%,rgba(29, 38, 190, .28),rgba(11, 13, 38, .92));
  border-color:rgba(47, 63, 255, .35);
}
.ft4__bottom{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:16px;
  padding:18px 26px; border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18, 21, 54, .9),rgba(11, 13, 38, .9));
  border:1px solid var(--line);
}
.ft4__bottom p{ font-size:12.5px; color:var(--muted) }
.ft4__tg{ margin-left:auto; padding:11px 20px 11px 10px }

/* ===================== ВИД 5 — скошенная панель ========================== */
.ft5{ border-top:0; padding:0 }
.ft5__grid{ display:grid; grid-template-columns:0.85fr 1.4fr; align-items:stretch }
.ft5__brand{
  display:flex; align-items:center; min-width:0;
  /* Панель уходит в край страницы нарочно, но текст в ней должен стоять
     на той же вертикали, что логотип в шапке, — отсюда левый отступ,
     повторяющий поле контейнера. */
  padding:44px 90px 44px max(24px,calc((100vw - var(--container)) / 2 + 24px));
  background:linear-gradient(120deg,rgba(24, 27, 140, .35),rgba(10, 12, 38, .7));
  /* Срез по правому краю повторяет угловатый вид шапки: если убрать его,
     вид перестаёт отличаться от первого. */
  clip-path:polygon(0 0,100% 0,calc(100% - 90px) 100%,0 100%);
}
.ft5__brand-in{ max-width:420px }
.ft5__brand-in .logo__name{ font-size:38px }
.ft5__brand-in .logo--img img{ height:48px }
.ft5__brand-in p{ margin-top:16px; font-size:13.5px; color:var(--muted) }
.ft5__main{ padding:44px 24px 34px 0; display:grid; align-content:center; gap:24px }
.ft5__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:820px }
.ft5__tg{ justify-self:start }
.ft5__copy{ padding-top:22px; border-top:1px solid var(--line);
  font-size:12.5px; color:var(--muted) }

/* ===================== ВИД 6 — одна строка =============================== */
.ft6__row{ display:grid; grid-template-columns:1.3fr repeat(3,1fr) auto; gap:0;
  align-items:start; padding-bottom:24px }
.ft6__col{ padding-left:30px; border-left:1px solid var(--line) }
.ft6 .ft-brand{ padding-right:30px }
.ft6__tg{ align-self:center; margin-left:30px; padding-left:8px }
.ft6__bottom{ padding-top:20px; border-top:1px solid var(--line) }
.ft6__bottom p{ font-size:12.5px; color:var(--muted) }

/* ============================ АДАПТИВ ==================================== */
@media (max-width:1180px){
  .ft6__row{ grid-template-columns:1.3fr repeat(3,1fr); row-gap:24px }
  .ft6__tg{ grid-column:1 / -1; margin-left:0; justify-self:start }
}

@media (max-width:1024px){
  .ft2__top,.ft4__grid{ grid-template-columns:1fr 1fr; gap:24px }
  .ft2__col{ padding-left:0; border-left:0 }
  .ft2 .ft-brand{ padding-right:0 }
  .ft5__grid{ grid-template-columns:1fr }
  /* В одну колонку срез отрезал бы низ брендовой панели, а не её правый край. */
  .ft5__brand{ clip-path:none; padding:34px 24px }
  .ft5__brand-in{ margin-left:0; padding-left:0 }
  .ft5__main{ padding:28px 24px 34px }
  .ft6__row{ grid-template-columns:1fr 1fr; row-gap:24px }
  .ft6__col{ padding-left:0; border-left:0 }
  .ft6 .ft-brand{ padding-right:0 }
}

@media (max-width:720px){
  .ft2__top,.ft3__cols,.ft4__grid,.ft5__cols,.ft6__row{ grid-template-columns:1fr }
  .ft4__bottom{ flex-direction:column; align-items:flex-start }
  .ft4__tg{ margin-left:0 }
  .ft3__col{ align-items:flex-start; text-align:left }
}