:root{
  --bg:#FFFFFF;
  --bg-2:#F7F8FB;
  --bg-3:#EEF0F6;
  --line:#E3E6EF;
  --line-2:#EEF0F5;
  --ink:#16181F;
  --ink-2:#474C5C;
  --ink-3:#808899;
  --accent:#4F46E5;
  --accent-2:#6157F0;
  --accent-soft:#EEEDFE;
  /* второй акцент — цена в блоке тарифов. Тёмная роза: от «плохого»
     малинового отличается заметно, с индиго кнопок не спорит. */
  --accent-3:#BE185D;
  --accent-3-h:#A3154F;
  --good:#0E9F6E;
  --good-soft:#E3F6EF;
  --bad:#D8386B;
  --bad-soft:#FBE5EC;
  --sh-1:0 1px 2px rgba(22,24,31,.06);
  --sh-2:0 1px 3px rgba(22,24,31,.07), 0 8px 20px -12px rgba(22,24,31,.28);
  --sh-3:0 2px 8px rgba(22,24,31,.08), 0 24px 48px -28px rgba(22,24,31,.40);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1117; --bg-2:#151824; --bg-3:#1C2030;
    --line:#262B3B; --line-2:#20242F;
    --ink:#EDEFF5; --ink-2:#AEB4C6; --ink-3:#7F8699;
    --accent:#8B84FF; --accent-2:#A29BFF; --accent-soft:#1E1E3D;
    --good:#3ECF9A; --good-soft:#0F2C24;
    --bad:#FF6E9C; --bad-soft:#331722;
    --accent-3:#DB2777; --accent-3-h:#EC4899;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 1px 3px rgba(0,0,0,.6), 0 8px 22px -14px rgba(0,0,0,.9);
    --sh-3:0 2px 8px rgba(0,0,0,.6), 0 26px 52px -30px rgba(0,0,0,.95);
  }
}
:root[data-theme="dark"]{
  --bg:#0F1117; --bg-2:#151824; --bg-3:#1C2030;
  --line:#262B3B; --line-2:#20242F;
  --ink:#EDEFF5; --ink-2:#AEB4C6; --ink-3:#7F8699;
  --accent:#8B84FF; --accent-2:#A29BFF; --accent-soft:#1E1E3D;
  --good:#3ECF9A; --good-soft:#0F2C24; --bad:#FF6E9C; --bad-soft:#331722;
  --accent-3:#DB2777; --accent-3-h:#EC4899;
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 1px 3px rgba(0,0,0,.6), 0 8px 22px -14px rgba(0,0,0,.9);
  --sh-3:0 2px 8px rgba(0,0,0,.6), 0 26px 52px -30px rgba(0,0,0,.95);
}

*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"cv11","ss01"}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

.wrap{width:min(100% - 40px,1160px);margin:0 auto}
.mid{width:min(100% - 40px,980px);margin:0 auto}
section{padding:64px 0}
@media (max-width:720px){section{padding:44px 0}}
/* Шапка липкая и перекрывает заголовок раздела, если прийти по якорю:
   человек жмёт «Цены» и попадает на середину карточек. Отступ нужен
   всем якорным разделам, а не только новой кнопке в шапке. */
section[id]{scroll-margin-top:80px}
.tint{background:var(--bg-2)}

/* контрастные тёмные секции — ломают сплошной светлый ритм */
.dark{
  --bg:#141728; --bg-2:#1B1F33; --bg-3:#232842;
  --line:#2E3454; --line-2:#262B47;
  --ink:#EEF0F8; --ink-2:#AFB7D3; --ink-3:#7D85A4;
  --accent:#9A93FF; --accent-2:#B0AAFF; --accent-soft:#262348;
  --good:#41D2A0; --good-soft:#123328;
  --bad:#FF7BA8; --bad-soft:#361A26;
  --sh-1:0 1px 2px rgba(0,0,0,.35);
  --sh-2:0 1px 3px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.7);
  --sh-3:0 2px 8px rgba(0,0,0,.45), 0 26px 52px -30px rgba(0,0,0,.85);
  background:var(--bg);color:var(--ink);
}
.dark .btn-ghost{background:transparent;border-color:#3A4166;color:var(--ink)}
.dark .btn-ghost:hover{background:#1F2438;border-color:var(--accent);color:var(--ink)}

h1{font-size:clamp(30px,3.9vw,44px);line-height:1.1;font-weight:600;letter-spacing:-.028em;text-wrap:balance}
/* Крупная строка первого экрана. Заголовком страницы теперь служит
   ключевая фраза выше, а эта осталась только смыслом и размером. */
.hero-title{font-size:clamp(30px,3.9vw,44px);line-height:1.1;font-weight:600;
  letter-spacing:-.028em;text-wrap:balance;color:var(--ink)}
h2{font-size:clamp(23px,2.6vw,32px);line-height:1.18;font-weight:600;letter-spacing:-.022em;text-wrap:balance}
h3{font-size:18px;font-weight:600;letter-spacing:-.01em}
h1.eye,.eye{font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.01em;margin-bottom:10px;display:block;line-height:1.4}
.lead{font-size:19px;line-height:1.5;color:var(--ink-2)}
.small{font-size:15px;color:var(--ink-3)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:1px solid transparent;background:var(--accent);color:#fff;
  border-radius:6px;padding:13px 22px;font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:.14s;white-space:nowrap;box-shadow:var(--sh-1);
  /* Кнопкой бывает span, ссылка и button. У native button свои шрифт
     и межстрочный — без этих двух строк он ниже соседей на семь пикселей. */
  font-family:inherit;line-height:1.5}
.btn:hover{background:var(--accent-2);color:#fff}
.btn-ghost{background:var(--bg);color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-ghost:hover{background:var(--bg-2);color:var(--ink);border-color:var(--ink-3)}
.btn-sm{padding:9px 15px;font-size:15px}
.tlink{color:var(--accent);font-weight:600;text-decoration:none}
.tlink:hover{text-decoration:underline}
/* покупка — вторым акцентом: её видно и она не спорит с синим интерфейсом */
.btn-buy{background:var(--accent-3);color:#fff;border-color:transparent}
.btn-buy:hover{background:var(--accent-3-h);color:#fff}

/* пункт меню без ссылки: раздел ещё готовится */
.nav-soon{color:var(--ink-3);cursor:default;white-space:nowrap}


header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:16px;padding:13px 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.logo i{width:36px;height:36px;flex:none;display:block;font-style:normal;
  border-radius:9px;overflow:hidden;
  box-shadow:0 4px 12px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.logo i img,.logo i svg{display:block;width:36px;height:36px}
.logo .wm{display:block;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.logo .wm span{color:var(--accent)}
/* Слоган — второй строкой под названием, а не отдельным пунктом в
   ряду: в ряду он отнимал место у меню, и на ноутбучной ширине
   меню переносилось на вторую строку. */
.wm-wrap{display:flex;flex-direction:column;gap:2px}
.slogan{font-size:12px;color:var(--ink-3);line-height:1.2;white-space:nowrap}
@media (max-width:480px){.slogan{display:none}}
.spacer{flex:1}
.nav{display:flex;gap:22px;font-size:15px;color:var(--ink-2);flex:none}
.nav a{text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink)}

/* Раскрывающийся пункт «Информация». Без скрипта: подменю показывается
   по наведению и по фокусу с клавиатуры. Сам пункт — обычная ссылка на
   хаб раздела, так что на планшете касание тоже ведёт куда надо. */
.nav-drop{position:relative}
.nav-drop>a{display:inline-flex;align-items:center;gap:5px}
.nav-drop>a svg{width:10px;height:10px;flex:none;transition:transform .15s}
.nav-sub{position:absolute;top:100%;left:-16px;z-index:41;display:none;flex-direction:column;
  min-width:210px;padding:8px 0;margin-top:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh-3)}
/* Прозрачный мостик между пунктом и подменю: иначе курсор по дороге
   вниз выходит из блока, и подменю схлопывается. */
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-13px;height:13px}
.nav-sub a{padding:9px 16px;white-space:nowrap}
.nav-sub a:hover,.nav-sub a[aria-current]{background:var(--bg-2);color:var(--ink)}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{display:flex}
.nav-drop:hover>a svg,.nav-drop:focus-within>a svg{transform:rotate(180deg)}

/* Кнопка меню. На широком экране её нет: навигация и так в строке. */
.burger{display:none}
.burger-switch{display:none}

/* Порог — 1040, а не 920: шесть пунктов меню, кнопка и логотип
   с подписью в одну строку меньше не помещаются, меню переносилось
   на вторую строку, а «Купить» уезжала за край. */
@media (max-width:1040px){
  /* Раньше здесь стояло .nav{display:none} — меню просто исчезало,
     и на телефоне до разделов было не добраться. Теперь оно
     раскрывается панелью во всю ширину шапки. */
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:38px;padding:0 10px;flex:none;cursor:pointer;
    border:1px solid var(--line);border-radius:10px;background:var(--surface);
  }
  .burger span{
    display:block;height:2px;border-radius:2px;background:var(--ink);
    transition:transform .18s ease,opacity .18s ease;
  }
  /* Кнопка меню — крайняя справа, за «Купить». Порядком, а не
     перестановкой в разметке: чекбокс должен остаться выше кнопки
     и панели, иначе селектор ~ перестанет их находить. */
  .burger{order:9}
  .nav{
    position:absolute;left:0;right:0;top:100%;z-index:39;
    display:none;flex-direction:column;gap:0;padding:4px 0;
    background:var(--bg);border-bottom:1px solid var(--line);
    box-shadow:0 20px 44px -26px rgba(15,26,31,.45);
  }
  .nav a,.nav .nav-soon{
    padding:14px 24px;font-size:16px;border-top:1px solid var(--line);
  }
  .nav a:first-child,.nav .nav-soon:first-child{border-top:0}
  /* В панели подменю не выпадает, а идёт списком под родителем, с отступом. */
  .nav-drop{position:static}
  .nav-drop>a svg{display:none}
  .nav-sub{position:static;display:flex;min-width:0;padding:0;margin:0;background:transparent;
    border:0;border-radius:0;box-shadow:none}
  .nav-sub::before{display:none}
  .nav-sub a{padding-left:44px;font-size:15px;color:var(--ink-3)}
  .nav-sub a:hover,.nav-sub a[aria-current]{background:transparent;color:var(--ink)}
  .burger-switch:checked ~ .nav{display:flex}
  /* Крестик из трёх полосок: понятно, что кнопка теперь закрывает. */
  .burger-switch:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger-switch:checked ~ .burger span:nth-child(2){opacity:0}
  .burger-switch:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (prefers-reduced-motion:reduce){.burger span{transition:none}}

/* ── герой ── */
.hero{padding:52px 0 40px}
.hero-in{display:grid;grid-template-columns:minmax(300px,.86fr) minmax(360px,1fr);gap:48px;align-items:center}
@media (max-width:980px){.hero-in{grid-template-columns:1fr;gap:32px}}
.hero .lead{margin-top:16px;max-width:44ch}
.act{margin-top:26px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fine{margin-top:14px;font-size:15px;color:var(--ink-3)}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;
  margin-top:44px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.figs div{padding:20px 24px 20px 0}
.figs b{display:block;font-family:"JetBrains Mono",monospace;font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1}
.figs span{display:block;margin-top:7px;font-size:14px;color:var(--ink-3);line-height:1.4}

/* ── живой дашборд ── */
.app{border:1px solid var(--line);border-radius:10px;background:var(--bg);overflow:hidden;box-shadow:var(--sh-3)}
.app-top{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.app-top i{width:9px;height:9px;border-radius:50%;background:var(--line);display:block}
.app-top span{margin-left:8px;font-size:12px;color:var(--ink-3);font-family:"JetBrains Mono",monospace}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{flex:none;background:none;border:0;border-bottom:2px solid transparent;
  padding:11px 16px;font:inherit;font-size:14px;color:var(--ink-3);cursor:pointer;white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.pane{display:none;padding:16px}
.pane.on{display:block}
.kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:14px}
@media (max-width:540px){.kpi{grid-template-columns:repeat(2,1fr)}}
.kpi div{border:1px solid var(--line-2);border-radius:7px;padding:10px 11px;background:var(--bg)}
.kpi b{display:block;font-family:"JetBrains Mono",monospace;font-size:19px;font-weight:600;line-height:1.15}
.kpi span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:3px}
.kpi em{font-style:normal;color:var(--good);font-size:11.5px;font-weight:600}
.row{display:flex;align-items:center;gap:11px;padding:5px 0;font-size:13.5px}
.row .nm{width:136px;flex:none;color:var(--ink-2)}
.row .tr{flex:1;height:8px;border-radius:4px;background:var(--bg-3);overflow:hidden}
.row .tr i{display:block;height:100%;background:var(--accent);border-radius:4px}
.row .vl{width:54px;text-align:right;font-family:"JetBrains Mono",monospace;font-size:12.5px;color:var(--ink-2)}
table.mx{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.mx th,table.mx td{padding:8px 10px;border-bottom:1px solid var(--line-2);text-align:left;white-space:nowrap}
table.mx th{font-size:11px;color:var(--ink-3);font-weight:600;background:var(--bg-2)}
table.mx td.c{text-align:center;font-family:"JetBrains Mono",monospace;font-size:12px;border-radius:5px}
.ok{background:var(--good-soft);color:var(--good);font-weight:600}
.no{background:var(--bad-soft);color:var(--bad);font-weight:600}
.free{background:var(--accent-soft);color:var(--accent);font-weight:600}
.na{background:var(--bg-2);color:var(--ink-3)}
.mine td:first-child{color:var(--accent);font-weight:600}
.hint{margin-top:12px;font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* ── блоки ── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
@media (max-width:760px){.two{grid-template-columns:1fr}}
.box{border:1px solid var(--line);border-radius:10px;padding:22px 24px;background:var(--bg);box-shadow:var(--sh-1)}
.box.hl{border-color:var(--accent);box-shadow:var(--sh-2)}
.box h3{margin-bottom:12px;font-size:14px;color:var(--ink-3);font-weight:600}
.box.hl h3{color:var(--accent)}
.box ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.box li{display:flex;gap:10px;font-size:16px;line-height:1.45;color:var(--ink-2)}
.box li s{text-decoration:none;flex:none;color:var(--ink-3);font-weight:600}
.box.hl li{color:var(--ink)}
.box.hl li s{color:var(--good)}

.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:2px 34px;margin-top:26px}
.feats div{padding:16px 0;border-top:1px solid var(--line-2);display:flex;gap:14px;font-size:16.5px;line-height:1.45}
.feats s{text-decoration:none;color:var(--ink-3);font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;flex:none;padding-top:3px}
.feats b{font-weight:600}

/* ── калькулятор ── */
.calc{display:grid;grid-template-columns:minmax(300px,1fr) minmax(290px,.78fr);gap:32px;margin-top:28px;align-items:start}
@media (max-width:880px){.calc{grid-template-columns:1fr;gap:22px}}
.fld{margin-bottom:22px}
.fld label{display:block;font-size:14px;font-weight:600;margin-bottom:10px;color:var(--ink-2)}
.fld label b{font-family:"JetBrains Mono",monospace;color:var(--accent);font-size:17px}
input[type=range]{width:100%;accent-color:var(--accent)}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.pick{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:7px;
  padding:8px 13px;font-size:14.5px;color:var(--ink-2);cursor:pointer;user-select:none;background:var(--bg)}
.pick input{accent-color:var(--accent)}
.pick.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.pick .p{font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-3)}
.pick.on .p{color:var(--accent)}
.out{border:1px solid var(--line);border-radius:10px;padding:24px;background:var(--bg);box-shadow:var(--sh-2)}
.out .big{font-family:"JetBrains Mono",monospace;font-size:clamp(34px,4.4vw,44px);font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--accent)}
.out .big small{font-size:19px;color:var(--ink-3);font-weight:500}
.out dl{margin-top:18px;display:grid;grid-template-columns:auto auto;gap:8px 14px;font-size:14.5px}
.out dt{color:var(--ink-3)}
.out dd{text-align:right;font-family:"JetBrains Mono",monospace;color:var(--ink-2)}
.out .cmp{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-2);line-height:1.5}
.vs-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px}
.vs-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:6px 0;border-bottom:1px solid var(--line-2)}
.vs-row span{display:flex;flex-direction:column;font-size:14px;color:var(--ink-2)}
.vs-row em{font-style:normal;font-size:12px;color:var(--ink-3)}
.vs-row b{font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;
  color:var(--ink);white-space:nowrap}
.vs-sum{margin-top:10px;font-size:14px;color:var(--ink-2)}
.vs-sum b{color:var(--accent-3);font-family:"JetBrains Mono",monospace}
/* Осталось от старой фразы, где цена подписки подсвечивалась как «дорого».
   Теперь в сравнении две суммы, и красить их цветом «плохо» нельзя —
   на графиках он означает падение показателя. */
.out .cmp .vs-row b{color:var(--ink)}
.out .cmp .vs-sum b{color:var(--accent-3)}

/* ── отзывы ── */
.revs{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-top:26px}
.rev{border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--bg);box-shadow:var(--sh-1)}
.rev p{font-size:16px;line-height:1.5;color:var(--ink)}
.rev .who{margin-top:14px;padding-top:13px;border-top:1px solid var(--line-2);font-size:14px;color:var(--ink-3)}
.rev .who b{display:block;color:var(--ink-2);font-weight:600;font-size:15px}
.rev.stub p{color:var(--ink-3);font-style:italic}
.rev.stub{border-style:dashed}

/* ── тарифы ── */
/* Четыре общих ряда на все карточки: шапка, описание, состав, цена.
   Высоту ряда задаёт самая длинная карточка, остальные равняются по ней —
   заголовки «Что входит» и цены стоят на одной линии. */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;
  margin-top:30px;grid-template-rows:auto auto auto auto auto}
.tier{border:1px solid var(--line);border-radius:10px;padding:26px 24px;background:var(--bg);
  display:grid;grid-row:span 5;grid-template-rows:subgrid;gap:0;
  box-shadow:var(--sh-1);position:relative}
/* Старым браузерам без subgrid — прежняя колонка: ряды не совпадут,
   но карточка останется целой. */
@supports not (grid-template-rows: subgrid){
  .tier{display:flex;flex-direction:column}
  .tier .tincl{flex:1}
}
.tier.best{border-color:var(--accent);box-shadow:var(--sh-2)}
.tier.best::after{content:"чаще всего берут";position:absolute;top:-10px;right:20px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:5px}

/* Название — первый акцент: по нему тариф и запоминают. */
.tier .tname{font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--accent)}
.tier .tname span{color:var(--ink)}
.tier .tsub{margin-top:7px;font-size:14.5px;font-weight:600;color:var(--ink-3)}
/* Описание встало под кнопку — отделяем его линией, как и остальные ряды. */
.tier .tabout{margin-top:20px;padding-top:18px;border-top:1px solid var(--line-2)}
.tier .tlead-box{padding:14px 0 2px}
.tier .tlead{font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:600}
.tier .tdesc{margin-top:10px;font-size:14px;line-height:1.55;color:var(--ink-2)}

/* «Что входит» — заметный рубеж между обещанием и составом. */
.tier .tincl{padding-top:18px;margin-top:18px;border-top:1px solid var(--line-2)}
.tier .tincl h3{font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent)}

.tier ul{list-style:none;margin:14px 0 22px;display:flex;flex-direction:column;gap:9px}
.tier li{font-size:15.5px;color:var(--ink-2);display:flex;gap:9px;line-height:1.45}
.tier li s{text-decoration:none;color:var(--good);flex:none;font-weight:600}

/* Цена и кнопка прижаты к низу: три карточки выравниваются по ним,
   как бы ни различалась длина описаний. */
/* Выравниваем по верху ряда, а не по низу: разница в один пиксель между
   span-кнопкой и native button иначе смещает весь блок цены. */
.tier .tprice{align-self:start;padding-top:18px;border-top:1px solid var(--line-2);width:100%}
.tier .pr{font-family:"JetBrains Mono",monospace;font-size:34px;font-weight:600;
  letter-spacing:-.03em;line-height:1;color:var(--accent-3);
  /* высота фиксирована, иначе «по запросу» мельче цифр и кнопки разъезжаются */
  min-height:34px;display:flex;align-items:flex-end;gap:6px}
.tier .pr small{font-size:15px;color:var(--ink-3);font-weight:500}
.tier .pr.ask{font-size:24px;letter-spacing:-.01em}
.tier .btn{width:100%;height:52px;margin-top:16px}

/* ── попап заявки ── */
.veil{position:fixed;inset:0;z-index:60;background:rgba(12,14,22,.55);
  display:grid;place-items:center;padding:20px;overflow:auto}
.veil[hidden]{display:none}
.zbox{width:min(560px,100%);background:var(--bg);border:1px solid var(--line);
  border-radius:14px;padding:26px 28px;box-shadow:var(--sh-3)}
.zhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px}
.zhead h2{flex:1;font-size:clamp(22px,3vw,26px)}
.zclose{background:none;border:0;color:var(--ink-3);font-size:20px;line-height:1;
  cursor:pointer;padding:4px 6px;border-radius:6px}
.zclose:hover{color:var(--ink);background:var(--bg-2)}
@media (max-width:560px){.zbox{padding:22px 18px}}

/* ── форма заявки ── */
.form{display:grid;grid-template-columns:1fr;gap:16px}
.form .wide{grid-column:1 / -1}
.form label{display:block;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);
  background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--accent);
  background:var(--bg);box-shadow:0 0 0 3px var(--accent-soft)}
.form .hint{font-size:13.5px;color:var(--ink-3);margin-top:7px;line-height:1.45}
.form .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .foot{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.form .msg{font-size:15px;line-height:1.45}
.form .msg.ok{color:var(--good)}
.form .msg.bad{color:var(--bad)}


.note{margin-top:22px;border:1px solid var(--line);border-radius:10px;padding:16px 20px;
  background:var(--bg-2);font-size:16px;color:var(--ink-2);line-height:1.5}
.note b{color:var(--ink)}
/* Шаги распаковки на странице после оплаты: нумерованный список внутри
   заметки. Отдельный класс, чтобы не трогать остальные .note на сайте. */
.steps ol{margin:10px 0 0;padding-left:22px}
.steps li{margin-top:8px}
.steps li span{display:block;margin-top:4px;font-size:15px;color:var(--ink-3)}
.steps p{margin:14px 0 0}

details{border:1px solid var(--line);border-radius:10px;background:var(--bg);margin-top:10px;box-shadow:var(--sh-1)}
summary{padding:16px 20px;cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;gap:14px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:.15s}
details[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
details p{padding:0 20px 18px;font-size:16px;color:var(--ink-2);line-height:1.6;max-width:76ch}

.cta-final{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:48px 36px;box-shadow:var(--sh-2)}
.cta-final h2{max-width:18ch}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── страница отзывов ── */
.revs-all{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:28px}
.rev .mark{display:flex;gap:2px;margin-bottom:12px}
.rev .mark i{width:13px;height:13px;display:block;background:var(--accent);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.9}
.rev .who .ava{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:14px;margin-right:10px;
  vertical-align:middle;font-family:Inter,sans-serif}
.rev .who{display:flex;align-items:center}
.rev .who b{margin:0}
.crumbs{font-size:15px;color:var(--ink-3);margin-bottom:14px}
.crumbs a{color:var(--accent);text-decoration:none}
.crumbs a:hover{text-decoration:underline}


/* Кнопка без перехода: пока не подключён приём оплаты. Цвет сохраняем —
   о недоступности говорят приглушённость, курсор и подсказка. */
.btn-off{opacity:.5;cursor:not-allowed;pointer-events:none;box-shadow:none}


/* ---------- снимки экранов ---------- */
/* Скриншот настоящего продукта, а не рисунок: кликается и ведёт на тот
   же экран живой витрины. Рамка и тень — чтобы белый интерфейс не
   сливался с белой страницей. */
.shot{margin:0}
.shot > a{display:block;border-radius:12px;overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--sh-2);
  transition:box-shadow .16s,transform .16s}
.shot > a:hover{box-shadow:0 18px 48px -22px rgba(15,26,31,.45);transform:translateY(-2px)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:10px;font-size:13.5px;color:var(--ink-3);line-height:1.5}

/* ── тарифы на тёмном фоне ── */
/* Секция цен тёмная, как калькулятор. Карточка чуть светлее фона,
   иначе её край держит только рамка. Цена — розовый посветлее, чем
   в светлой теме: тёмная роза на тёмно-синем не читается. Кнопка
   остаётся насыщенной: белый текст на светло-розовом пропал бы. */
.dark .tier{background:var(--bg-2)}
.dark .tier .pr{color:#F472B6}
.dark .btn-buy{background:#DB2777}
.dark .btn-buy:hover{background:#EC4899}
.dark .tier.best::after{color:#141728}

/* ── раздел «Полезная информация» ── */
.subnav{display:flex;gap:4px;margin:22px 0 26px;border-bottom:1px solid var(--line);overflow-x:auto}
.subnav a{padding:10px 14px;text-decoration:none;color:var(--ink-3);font-weight:600;font-size:15px;
  white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current]{color:var(--accent);border-bottom-color:var(--accent)}

/* auto-fill, а не auto-fit: пока статья одна, карточка занимает свою
   треть, а не всю ширину с картинкой в полэкрана. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:26px}
.card-link{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:10px;
  padding:22px 24px;background:var(--bg);box-shadow:var(--sh-1);text-decoration:none;color:var(--ink-2);
  transition:border-color .14s,box-shadow .14s,transform .14s}
.card-link:hover{border-color:var(--accent);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card-link b{font-size:19px;color:var(--ink);letter-spacing:-.01em;line-height:1.25}
.card-link span{font-size:15px;line-height:1.5}
.card-link .card-eye{font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:.01em}
.more{margin-top:18px;font-size:15px;color:var(--ink-3)}

/* ── документы: инструкция, статьи, оферта, политика ── */
/* Раньше эти правила лежали в <style> у оферты и политики. Теперь
   страниц с длинным текстом больше, поэтому — здесь. */
.doc h2{font-size:22px;margin:34px 0 10px;scroll-margin-top:80px;color:var(--accent)}
.doc h3{font-size:18px;margin:24px 0 8px;color:var(--accent-2)}
.doc h4{font-size:16.5px;margin:20px 0 6px}
.doc p,.doc li{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin-bottom:10px}
.doc p.lead{font-size:19px;line-height:1.5}
.doc p.crumbs{font-size:15px}
.doc ol,.doc ul{padding-left:22px;margin-bottom:10px}
.doc li{margin-bottom:7px}
.doc .meta{font-size:15px;color:var(--ink-3);margin-bottom:26px}
.doc .tbl{overflow-x:auto;margin:14px 0}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px;margin:14px 0}
.doc .tbl table{margin:0}
.doc td,.doc th{padding:9px 12px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;line-height:1.5}
.doc th{font-size:13px;color:var(--ink-3);font-weight:600;background:var(--bg-2)}
/* Длинные адреса в коде на телефоне переносятся по любому символу —
   иначе строка вылезает за экран и страница едет вбок. */
.doc code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em;background:var(--bg-3);border-radius:4px;padding:1px 5px;overflow-wrap:anywhere}
.doc pre{background:var(--bg-3);border-radius:8px;padding:14px 16px;overflow-x:auto;margin:12px 0 14px;font-size:14px;line-height:1.5}
.doc pre code{background:none;padding:0;font-size:inherit}
.doc .key{font-size:14.5px;color:var(--ink-3);margin:-4px 0 10px}
.doc .key code{color:var(--ink)}
.toc{border:1px solid var(--line);border-radius:10px;background:var(--bg-2);padding:18px 22px;margin:0 0 8px}
.toc b{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.toc ol{margin:10px 0 0;padding-left:22px;columns:2;column-gap:28px}
@media (max-width:640px){.toc ol{columns:1}}
.toc li{font-size:15.5px;margin-bottom:5px}
.toc a{color:var(--ink-2);text-decoration:none}
.toc a:hover{color:var(--accent)}

/* ── обновления ── */
.updates{margin-top:30px;border-top:1px solid var(--line)}
.upd{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
@media (max-width:720px){.upd{grid-template-columns:1fr;gap:8px;padding:20px 0}}
.upd-when{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--ink-3);padding-top:4px}
.upd-body h3{font-size:20px;letter-spacing:-.015em}
.upd-body ul{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.upd-body li{position:relative;padding-left:18px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.upd-body li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.upd-body b{color:var(--ink)}
.upd-body code{font-family:"JetBrains Mono",monospace;font-size:.88em;background:var(--bg-3);border-radius:4px;padding:1px 5px}

/* ── отзывы строками ── */
.rev-list{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.rev-row{display:grid;grid-template-columns:auto 1fr;gap:16px;border:1px solid var(--line);border-radius:10px;
  padding:18px 22px;background:var(--bg);box-shadow:var(--sh-1)}
.rev-row .ava{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:15px}
.rev-row .mark{display:flex;gap:2px;margin-bottom:8px}
.rev-row .mark i{width:12px;height:12px;display:block;background:var(--accent);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);opacity:.9}
.rev-row p{font-size:16px;line-height:1.5;color:var(--ink);max-width:80ch}
.rev-row b{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-2)}

/* ── форма отзыва ── */
.rform{grid-template-columns:1fr 1fr;margin-top:26px}
@media (max-width:640px){.rform{grid-template-columns:1fr}}
.form select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.form select:focus{outline:none;border-color:var(--accent);background:var(--bg);box-shadow:0 0 0 3px var(--accent-soft)}
.form label .opt{font-weight:400;color:var(--ink-3)}
.cap input{max-width:200px}
.cap label b{color:var(--accent);font-family:"JetBrains Mono",monospace;font-size:17px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--accent);cursor:pointer;text-decoration:underline}

/* ── картинки в анонсах и статьях ── */
.card-link img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top;
  border-radius:7px;border:1px solid var(--line);margin:-4px 0 6px;background:var(--bg-2)}
.cover{margin:0 0 26px}
.cover img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--sh-2)}

/* ── глоссарий: список определений ── */
.terms{margin:14px 0 6px}
.terms dt{font-size:18px;font-weight:600;letter-spacing:-.01em;margin-top:22px;scroll-margin-top:80px;color:var(--ink)}
.terms dd{margin:6px 0 0;font-size:16.5px;line-height:1.62;color:var(--ink-2)}

/* оценка ниже пяти: пустые звёзды — контуром цвета линии */
.rev-row .mark i.off{background:var(--line)}

/* ── контакты: слева форма, справа каналы ── */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:40px;margin-top:34px;align-items:start}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;gap:30px}}
.contact-form{margin-top:0}
.contact-form h2{font-size:22px;margin-bottom:4px}
.contact-side{display:flex;flex-direction:column;gap:10px}
.contact-item{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:10px;
  padding:14px 18px;background:var(--bg-2);font-size:14px;line-height:1.45;color:var(--ink-2)}
.contact-big{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;word-break:break-all}
.contact-big:hover{color:var(--accent)}
.contact-req{font-size:14.5px}
.contact-req code{font-family:"JetBrains Mono",monospace;font-size:.92em}
.contact-req a{color:var(--ink-2)}

/* ── галочка «Я не робот» ── */
.cap{min-height:64px}
.capw{display:inline-flex;align-items:center;gap:12px;padding:12px 16px 12px 14px;min-width:260px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-2);cursor:pointer;user-select:none;
  transition:border-color .14s,background .14s}
.capw:hover{border-color:var(--ink-3)}
.capw-in{position:absolute;opacity:0;width:1px;height:1px}
.capw-box{width:26px;height:26px;flex:none;border:2px solid var(--ink-3);border-radius:6px;background:var(--bg);
  display:grid;place-items:center;transition:.14s}
.capw-text{font-size:15.5px;font-weight:600;color:var(--ink)}
.capw-note{margin-left:auto;padding-left:14px;font-size:12px;color:var(--ink-3);white-space:nowrap}
.capw-in:focus-visible ~ .capw-box{outline:2px solid var(--accent);outline-offset:2px}
/* проверяем: рамка крутится */
.capw.work .capw-box{border-color:var(--line);border-top-color:var(--accent);border-radius:50%;animation:capspin .7s linear infinite}
@keyframes capspin{to{transform:rotate(360deg)}}
/* проверено: галочка */
.capw.ok{border-color:var(--good)}
.capw.ok .capw-box{border-color:var(--good);background:var(--good)}
.capw.ok .capw-box::after{content:"";width:7px;height:12px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px)}
.capw.ok .capw-text{color:var(--good)}
.capw.err{border-color:var(--bad)}
.capw.err .capw-text{color:var(--bad)}
.cap-err{font-size:14px;color:var(--bad)}
@media (prefers-reduced-motion:reduce){.capw.work .capw-box{animation:none;border-color:var(--accent)}}

/* ── тёмные шапки страниц и подвал — в стиле обложек и страницы проверки скиллов ── */
section.hero-glow{position:relative;overflow:hidden;background:
  radial-gradient(900px 500px at 8% 0%,#1d2450 0%,transparent 60%),
  radial-gradient(700px 480px at 95% 100%,#3a1838 0%,transparent 60%),
  linear-gradient(135deg,#0b0f1e,#121736 60%,#0b0f1e)}
section.hero-glow::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:
  linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:48px 48px}
section.hero-glow > .wrap{position:relative}
.hero-glow h1,.hero-glow .hero-title{color:#fff}
.hero-glow h1.eye,.hero-glow .eye{color:#A5B4FC}
.hero-glow .crumbs{color:#8B93B8}
.hero-glow .crumbs a{color:#C7D2FE}
.hero-glow .lead{color:#AAB2D8}
section.hero-glow:not(.hero){padding:40px 0 48px}
section.hero-next{padding-top:40px}


/* ── композиции справа в тёмных шапках ── */
.hero-split{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center}
.hero-split .hero-text{min-width:0}
.art{position:relative;min-height:400px;color:#EEF1FF}
.gl{background:linear-gradient(160deg,rgba(30,36,72,.94),rgba(20,24,48,.94));border:1px solid rgba(165,180,252,.3);
  border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.45)}
.fl{position:absolute;z-index:2;padding:14px 16px}
.fl small,.art small{display:block;font-size:12.5px;color:#9AA3CC;line-height:1.35}
.fl b{display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;color:#fff}
.fl em{font-style:normal;font-size:12.5px;color:#6EE7B7}
.mbar{display:block;height:7px;border-radius:7px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.mbar i{display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#818CF8,#A78BFA)}
/* О системе */
.art-win{position:absolute;left:0;right:0;top:34px;border-radius:14px;overflow:hidden;border:1px solid rgba(165,180,252,.35);
  box-shadow:0 40px 90px rgba(0,0,0,.55);transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);background:#1B2042}
.art-bar{height:30px;display:flex;align-items:center;gap:7px;padding:0 12px;background:#1B2042}
.art-bar i{width:10px;height:10px;border-radius:50%;background:#3B4270}
.art-bar i:nth-child(1){background:#F43F5E}.art-bar i:nth-child(2){background:#F59E0B}.art-bar i:nth-child(3){background:#22C55E}
.art-bar span{margin-left:10px;font-family:"JetBrains Mono",monospace;font-size:12px;color:#8B93B8}
.art-win img{display:block;width:100%;height:auto}
.fl-1{left:-28px;top:0;width:240px}
.fl-2{right:-18px;bottom:46px;width:190px}
.fl-3{left:6%;bottom:-6px;display:flex;gap:12px;align-items:center}
.fl-3 b{font-size:16px}
.lock{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(34,197,94,.18);color:#4ADE80;flex:none}
/* Обновления */
.rel-card{position:relative;padding:22px 24px;max-width:470px;margin-left:auto}
.rel-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rel-head b{font-family:"JetBrains Mono",monospace;font-size:34px;font-weight:600;color:#fff;letter-spacing:-.02em}
.rel-head span:last-child{font-size:13px;color:#9AA3CC}
.rel-new{align-self:center;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#0B0F1E;
  background:linear-gradient(90deg,#86EFAC,#4ADE80);border-radius:999px;padding:4px 10px}
.rel-card ul{list-style:none;margin:0;padding:0}
.rel-card li{display:flex;gap:10px;align-items:center;padding:9px 0;border-top:1px solid rgba(255,255,255,.07);font-size:15px;color:#D6D9F2}
.rel-card li i,.tcard li i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#16A34A;color:#fff}
.rel-line{list-style:none;margin:22px 0 0 auto;padding:0;max-width:470px;display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.rel-line::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:2px;background:linear-gradient(90deg,rgba(165,180,252,.6),rgba(165,180,252,.1))}
.rel-line li{position:relative;padding-top:24px;font-size:13px;color:#9AA3CC}
.rel-line li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:#121736;border:2px solid #A5B4FC}
.rel-line b{display:block;font-family:"JetBrains Mono",monospace;color:#C7D2FE;font-size:15px}
/* Контакты */
.chat{padding:0;overflow:hidden;max-width:470px;margin-left:auto}
.chat-head{display:flex;gap:12px;align-items:center;padding:14px 18px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.chat-head b{display:block;font-size:15px;color:#fff}
.chat-head .tg{margin-left:auto;color:#38BDF8}
.ava{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(135deg,#6366F1,#4F46E5);flex:none}
.msg{max-width:78%;margin:12px 18px;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45}
.msg.in{background:rgba(255,255,255,.08);color:#E6E8F5;border-bottom-left-radius:5px}
.msg.out{margin-left:auto;background:linear-gradient(135deg,#6366F1,#4F46E5);color:#fff;border-bottom-right-radius:5px}
.typing{display:flex;gap:5px;margin:4px 18px 18px;padding:12px 14px;width:max-content;border-radius:16px;background:rgba(255,255,255,.08)}
.typing i{width:7px;height:7px;border-radius:50%;background:#9AA3CC;animation:aivdot 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes aivdot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.fl.mail{left:-6px;bottom:-22px;display:flex;gap:12px;align-items:center}
.fl.mail b{font-size:16px}
.env{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(99,102,241,.22);color:#A5B4FC;flex:none}
/* AI-Tools */
.art-tools{min-height:480px}
.tcard{position:absolute;width:300px;padding:18px 20px}
.t1{left:0;top:0;transform:rotate(-4deg);z-index:2}
.t2{right:-8px;top:250px;transform:rotate(3deg)}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.tc-top small{font-size:13px;font-weight:600;color:#C7D2FE}
.tb{font-size:12px;font-weight:700;border-radius:999px;padding:4px 10px;color:#fff;white-space:nowrap}
.tb.free{background:#16A34A}.tb.paid{background:#BE185D}
.tv{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;margin-bottom:8px;
  background:linear-gradient(90deg,rgba(34,197,94,.22),rgba(34,197,94,.06));border:1px solid rgba(74,222,128,.45)}
.tv-g{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:#151A36;
  box-shadow:0 0 0 3px rgba(34,197,94,.55)}
.tv b{display:block;color:#86EFAC;font-size:18px}
.tcard ul{list-style:none;margin:0;padding:0}
.tcard li{display:flex;gap:9px;align-items:center;padding:6px 0;font-size:13.5px;color:#D6D9F2}
.vrow{display:grid;grid-template-columns:86px 1fr 52px;gap:10px;align-items:center;padding:6px 0;font-size:13px;color:#D6D9F2}
.vrow .mbar{margin-top:0}
.vrow b{font-family:"JetBrains Mono",monospace;font-size:12.5px;font-weight:600;color:#C7D2FE;text-align:right}
@media (max-width:960px){.hero-split{grid-template-columns:1fr;gap:28px}.art{min-height:0}
  .art-prog{min-height:300px}.art-tools{min-height:340px}.rel-card,.rel-line,.chat{margin-left:0}}
@media (max-width:600px){.fl-1,.fl-2,.fl-3{display:none}.art-prog{min-height:220px}
  .tcard{position:relative;left:auto;right:auto;top:auto;width:auto;transform:none;margin-bottom:14px}.art-tools{min-height:0}
  .fl.mail{position:relative;left:auto;bottom:auto;margin-top:14px}}

.hero-text .figs{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ── меню: при наведении — синяя плашка и белый текст ── */
@media (min-width:1041px){
  .nav{gap:4px}
  .nav > a,.nav-drop > a{padding:8px 12px;border-radius:9px;transition:background .15s,color .15s}
  .nav > a:hover,.nav-drop:hover > a,.nav-drop:focus-within > a{background:#4F46E5;color:#fff}
  .nav-sub a:hover{background:#4F46E5;color:#fff}
}

/* ── иллюстрации в шапках (вместо скриншотов) ── */
.hero-glow .hero-title{margin-top:6px;font-size:clamp(32px,4.2vw,52px);line-height:1.06;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.hero-glow .hero-title em{font-style:normal;background:linear-gradient(90deg,#A5B4FC,#F0ABFC);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-glow .hero-text .lead{margin-top:18px;max-width:46ch;font-size:19px}
.hero-glow .act{margin-top:26px}
.ill{position:relative}
.ill svg{display:block;width:100%;height:auto;max-width:540px;margin-left:auto;overflow:visible}
.ill .chip rect{fill:rgba(20,24,48,.9);stroke:rgba(165,180,252,.35);stroke-width:1}
.ill .chip text{fill:#E0E7FF;font:600 14px Inter,"Segoe UI",sans-serif;text-anchor:middle}
.ill .chip.me rect{fill:rgba(22,101,52,.35);stroke:#4ADE80;stroke-width:1.5}
.ill .chip.me text{fill:#BBF7D0;font-size:15px}
.ill .orb{transform-origin:260px 230px;transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .ill .orb-1{animation:aivspin 60s linear infinite}
  .ill .orb-3{animation:aivspin 90s linear infinite reverse}
}
@keyframes aivspin{to{transform:rotate(360deg)}}
section.figs-strip{padding:28px 0;border-bottom:1px solid var(--line)}
section.figs-strip .figs{margin-top:0}
@media (max-width:960px){.ill svg{max-width:420px;margin:0 auto}}

section.figs-strip .figs b{font-size:46px;line-height:1;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(90deg,#4F46E5,#C026D3);-webkit-background-clip:text;background-clip:text;color:transparent}
section.figs-strip .figs span{margin-top:10px;font-size:14.5px}

/* ── Телеграм-канал: значок в шапке и карточка на «Контактах» ── */
.head-tg{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;color:#229ED9;margin-right:8px;
  transition:background .15s,color .15s;flex:none}
.head-tg:hover{background:#4F46E5;color:#fff}
/* Телефон: логотип, значок канала, «Демо» и кнопка меню при обычных
   отступах занимали ~400px при строке 335 — кнопка меню уезжала за край
   и растягивала страницу вбок. Ужимаем зазоры, на самых узких экранах
   убираем значок канала (он есть в подвале и на «Контактах»). */
@media (max-width:480px){
  .bar{gap:6px}
  .head-tg{width:36px;height:36px;margin-right:0}
  .bar .btn-sm{padding:8px 10px}
  .logo{gap:8px}
  .logo .wm{font-size:17px}
}
@media (max-width:359px){
  .head-tg{display:none}
  .logo .wm{font-size:16px}
  .logo i,.logo i img,.logo i svg{width:30px;height:30px}
}
.contact-channel{border-color:#229ED9;background:linear-gradient(160deg,rgba(34,158,217,.08),transparent 60%)}
.contact-channel .card-eye{color:#229ED9}
.channel-btn{margin-top:8px;align-self:flex-start;background:#229ED9}
.channel-btn:hover{background:#4F46E5}

/* ── связный текст на лендингах: абзацы и вопросы под заголовком ── */
.txt p{max-width:72ch;margin-top:14px;font-size:17px;line-height:1.62;color:var(--ink-2)}
.txt p b{color:var(--ink)}
.txt h2+p{margin-top:16px}
.txt details{max-width:860px}
.txt details p{margin-top:0;font-size:16px}
.txt details a{color:var(--accent)}
.txt .tbl{overflow-x:auto;margin:20px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
table.srf{border-collapse:collapse;width:100%;font-size:15px}
table.srf th,table.srf td{padding:9px 14px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;line-height:1.45}
table.srf th{font-size:12.5px;color:var(--ink-3);font-weight:600;background:var(--bg-2)}
table.srf td:last-child{font-family:"JetBrains Mono",monospace;font-size:13.5px;white-space:nowrap}
table.srf tr:last-child td{border-bottom:0}
.txt p.key{font-size:14.5px;color:var(--ink-3)}

/* ── «Об авторе» на «Контактах» ── */
.author{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px 26px;align-items:start;
  border:1px solid var(--line);border-radius:12px;padding:26px 28px;background:var(--bg);box-shadow:var(--sh-1);margin-top:22px}
.author-ava{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,#4F46E5,#C026D3);color:#fff;font-size:28px;font-weight:700;letter-spacing:-.02em}
.author-name{font-size:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.author-role{margin-top:4px;font-size:15px;color:var(--accent);font-weight:600}
.author p{margin-top:12px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:72ch}
.author ul{margin-top:12px;padding-left:20px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.author li{margin-top:4px}
.author a{color:var(--accent)}
@media (max-width:560px){.author{grid-template-columns:1fr;padding:20px}.author-ava{width:64px;height:64px;font-size:22px}}
.author-cols{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px;margin-top:14px}
.author-cols h3{font-size:14px;color:var(--ink-3);font-weight:600;margin-top:6px}
.author-cols ul{margin-top:6px}
@media (max-width:760px){.author-cols{grid-template-columns:1fr}}
img.author-ava{display:block;object-fit:cover;background:none;width:96px;height:96px}
@media (max-width:560px){img.author-ava{width:72px;height:72px}}

/* ── хаб GEO-аналитики: макет ответа нейросети, карточки вопросов, ссылки раздела ── */
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:26px}
.qcard{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:var(--bg);box-shadow:var(--sh-1)}
.qcard b{font-size:17.5px;color:var(--ink);letter-spacing:-.01em}
.qcard span{font-size:15px;line-height:1.55;color:var(--ink-2)}
.cmp-tbl{margin-top:22px;border:1px solid var(--line);border-radius:10px;overflow-x:auto;background:var(--bg)}
.cmp-tbl td:first-child{font-weight:600;color:var(--ink);white-space:nowrap}
.cmp-tbl td:last-child{font-family:inherit;font-size:15px;white-space:normal}
.sublinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:22px}
.sublinks a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  text-decoration:none;background:var(--bg);transition:border-color .15s,transform .15s}
.sublinks a:hover{border-color:var(--accent);transform:translateY(-2px)}
.sublinks s{grid-row:span 2;text-decoration:none;font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:600;color:var(--accent);padding-top:2px}
.sublinks b{font-size:16px;color:var(--ink)}
.sublinks span{font-size:14px;color:var(--ink-3);line-height:1.45}

/* ===== Футер ===== */
footer.sf{
  --sf-bg:#0F1117; --sf-line:#2C3146; --sf-ink:#E8EAF2; --sf-ink-2:#A3A9BD; --sf-accent:#8B84FF;
  background:var(--sf-bg); color:var(--sf-ink); border-top:0; font-size:15px;
}
.sf a{text-decoration:none}


.sf-main{display:grid; grid-template-columns:1.3fr 2.4fr 1.2fr; gap:40px; padding:56px 0 0}
.sf-logo{display:inline-flex; align-items:center; gap:10px; color:var(--sf-ink)}
.sf-logo b{display:block; font-size:16px; line-height:1.15}
.sf-logo small{display:block; font-size:11px; color:var(--sf-ink-2)}
.sf-brand p{margin:14px 0 0; font-size:14px; color:var(--sf-ink-2); max-width:30ch}

.sf-nav{display:grid; grid-template-columns:repeat(3,1fr); gap:32px}
.sf-nav div{display:flex; flex-direction:column; gap:10px}
.sf-nav a{color:var(--sf-ink-2)}
.sf-nav a:hover{color:#fff}
.sf-h, .sf-nav a.sf-h{margin:0 0 4px; font:600 12px/1.3 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--sf-accent)}
.sf-nav a.sf-h:hover{color:#B0AAFF}

.sf-contacts{display:grid; gap:10px; align-content:start}
.sf-card{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--sf-line); border-radius:12px; color:var(--sf-ink); transition:border-color .15s}
.sf-card:hover{border-color:var(--sf-accent)}
.sf-card svg{width:22px; height:22px; flex:none; fill:none; stroke:var(--sf-accent); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.sf-card b{display:block; font-size:14px}
.sf-card small{display:block; font-size:12px; color:var(--sf-ink-2)}

.sf-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:44px; padding:22px 0 32px; border-top:1px solid var(--sf-line); font-size:13px; color:var(--sf-ink-2)}
.sf-bottom nav{display:flex; gap:18px; flex-wrap:wrap}
.sf-bottom a{color:var(--sf-ink-2)}
.sf-bottom a:hover{color:#fff}

@media (max-width:980px){
  .sf-main{grid-template-columns:1fr 1fr}
  .sf-nav{grid-column:1 / -1; order:3}
}
@media (max-width:560px){
  .sf-main{grid-template-columns:1fr}
  .sf-nav{grid-template-columns:1fr 1fr}
}

/* сцена «нейросети на орбитах» на «Как устроена система» */
.ill canvas{display:block;width:100%;max-width:620px;height:auto;aspect-ratio:620/500;margin-left:auto}
@media (max-width:960px){.ill canvas{max-width:480px;margin:0 auto}}

/* сцена «нейросеть выбирает троих» на GEO-аналитике: шире текста, может уходить за правый край */
.hero-wide{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:24px}
.ill-choice canvas{display:block;width:108%;max-width:none;height:auto;aspect-ratio:640/520;margin-right:-8%}
@media (max-width:960px){.hero-wide{grid-template-columns:1fr}.ill-choice canvas{width:100%;max-width:560px;margin:0 auto}}

/* сцена-радар на «Мониторинге видимости» */
.ill-radar canvas{display:block;width:100%;max-width:560px;height:auto;aspect-ratio:560/500;margin-left:auto}
@media (max-width:960px){.ill-radar canvas{max-width:480px;margin:0 auto}}

/* ── кнопка «Наверх» (создаётся в nav.js) ── */
.to-top{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;border:0;cursor:pointer;color:#fff;background:var(--accent);
  box-shadow:0 10px 26px -10px rgba(79,70,229,.75);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s,background .15s}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:#4338CA}
.to-top:focus-visible{outline:3px solid var(--accent-soft);outline-offset:3px}
@media (max-width:560px){.to-top{right:14px;bottom:14px;width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.to-top{transition:none}}

/* Кнопки первого экрана — одной ширины, независимо от длины подписи.
   На телефоне — во всю строку, одна под другой. */
.hero-glow .act .btn{min-width:210px}
@media (max-width:560px){
  .hero-glow .act{flex-direction:column;align-items:stretch}
  .hero-glow .act .btn{min-width:0;width:100%}
}