/* happ.show — тема витрины (лендинг, SEO-раздел, документы) и тёмная подложка для
   чекаута/кабинета, которые рендерит общий код tok (img/tok2.css грузится первым,
   этот файл идёт после и переопределяет переменные).

   Ключ домена: продающий тёмный лендинг с живым мокапом «уже подключено».
   Акцент — красный: это фирменный цвет знака Happ, и на почти чёрном фоне он даёт
   самый заметный призыв к действию. Белый текст на красном читается везде, включая
   солнце и дешёвые экраны, — на янтаре он терялся. Синий и зелёный в этой теме
   принадлежат только мокапу приложения, чтобы кадр выглядел настоящим. */

:root{
  --sh-bg:#0B0D14;          /* фон: графит с синевой, глубже, чем у панелей */
  --sh-bg2:#0F121B;
  --sh-surf:#141824;        /* карточки */
  --sh-surf2:#1A1F2E;       /* вложенные плоскости, шапка на скролле */
  --sh-rule:#232A3A;
  --sh-rule2:#2E374A;
  --sh-ink:#F2F5FA;
  --sh-mut:#98A2B6;
  --sh-mut2:#6B7488;
  --sh-acc:#F5333F;         /* фирменный красный Happ: кнопки, цена, знак */
  --sh-acc-h:#FF4A55;       /* он же на наведении */
  --sh-acc-ink:#FFFFFF;     /* текст на красном — белый, контраст 4.8:1 */
  --sh-acc-soft:rgba(245,51,63,.13);
  --sh-live:#3DDC84;        /* только «соединение активно» */
  --sh-live-soft:rgba(61,220,132,.14);
  --sh-r:14px; --sh-r-lg:20px; --sh-r-sm:10px;
  --sh-f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* NB: переменные *-d в tok2.css — цвет ТЕКСТА на подложке *-bg (бейджи «выгодно»,
   заметки), поэтому они светлые, а не тёмные.
   ── переопределение темы tok2.css: чекаут и кабинет на happ.show тёмные всегда,
      а не по системной настройке. Правим только переменные — разметка общая. ── */
:root{
  --bg:#0B0D14; --card:#141824; --card2:#11151F; --soft:#1A1F2E;
  --line:#232A3A; --line2:#2E374A;
  --tx:#F2F5FA; --mut:#98A2B6; --mut2:#6B7488;
  --acc:#F5333F; --acc-d:#FFD2D5; --acc-bg:#3A1216; --acc-soft:rgba(245,51,63,.10);
  --ok:#3DDC84; --ok-d:#B6F5D4; --ok-bg:#12301F;
  --warn-bg:#33260E; --warn-tx:#F5C871;
  --err-bg:#341A1A; --err-tx:#F49999;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#0B0D14; --card:#141824; --card2:#11151F; --soft:#1A1F2E;
    --line:#232A3A; --line2:#2E374A;
    --tx:#F2F5FA; --mut:#98A2B6; --mut2:#6B7488;
    --acc:#F5333F; --acc-d:#FFD2D5; --acc-bg:#3A1216; --acc-soft:rgba(245,51,63,.10);
    --ok:#3DDC84; --ok-d:#B6F5D4; --ok-bg:#12301F;
    --warn-bg:#33260E; --warn-tx:#F5C871;
    --err-bg:#341A1A; --err-tx:#F49999;
  }
}
/* главная кнопка чекаута — фирменный красный с белым текстом */
body .btn{background:var(--sh-acc);color:#fff;border-color:transparent;font-weight:650}
body .btn:hover{background:var(--sh-acc-h)}
body .btn.soft{background:var(--sh-surf2);color:var(--sh-ink);border:1px solid var(--sh-rule2)}
body .brand span{color:var(--sh-ink)}

/* ══════════════════════════ витрина happ.show ══════════════════════════ */

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body.sh{
  margin:0; background:var(--sh-bg); color:var(--sh-ink);
  font:400 16px/1.6 var(--sh-f);
  -webkit-font-smoothing:antialiased;
}
body.sh img{max-width:100%;height:auto}
body.sh a{color:inherit;text-decoration:none}
body.sh :focus-visible{outline:2px solid var(--sh-acc);outline-offset:3px;border-radius:6px}
.sh-wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.sh-narrow{max-width:760px;margin:0 auto;padding:0 20px}

/* ── шапка: липкая, кнопка «Оформить» видна всегда ── */
.sh-hd{position:sticky;top:0;z-index:50;background:rgba(11,13,20,.82);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--sh-rule)}
.sh-hd .in{display:flex;align-items:center;gap:18px;height:60px}
.sh-logo{display:flex;align-items:center;gap:10px;font-weight:680;font-size:17px;letter-spacing:-.2px;flex:none}
.sh-logo .mark{width:30px;height:30px;flex:none;display:block}
.sh-logo .plus{color:var(--sh-acc)}
.sh-nav{display:flex;gap:22px;margin-left:auto;font-size:14.5px;color:var(--sh-mut)}
.sh-nav a:hover{color:var(--sh-ink)}
.sh-hd .cta{flex:none;margin-left:auto}
.sh-nav+.cta{margin-left:0}
/* На телефоне кнопки в шапке нет: она отъедает первый экран и висит над текстом.
   Вместо неё внизу липкий бар (.sh-stick) — он попадает под большой палец. */
@media (max-width:860px){
  .sh-nav{display:none}
  .sh-hd .in{gap:12px;height:54px}
  body.sh .sh-hd .hide-mob{display:none}   /* перебиваем body.sh .sh-btn */
}

/* ── кнопки ──
   Селектор с body: правило body.sh a{color:inherit} специфичнее одиночного класса и
   перекрашивало текст кнопки-ссылки в цвет страницы. Из-за этого белый текст оказывался
   на светлом фоне и не читался. */
body.sh .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:var(--sh-r-sm);font-size:15.5px;font-weight:650;
  background:var(--sh-acc);color:var(--sh-acc-ink);border:1px solid transparent;
  transition:transform .12s ease, background .15s ease;cursor:pointer;white-space:nowrap}
body.sh .sh-btn:hover{background:var(--sh-acc-h)}
body.sh .sh-btn:active{transform:translateY(1px)}
body.sh .sh-btn.ghost{background:transparent;color:var(--sh-ink);border-color:var(--sh-rule2)}
body.sh .sh-btn.ghost:hover{background:var(--sh-surf2);border-color:var(--sh-mut2)}
.sh-btn.sm{padding:9px 16px;font-size:14px;border-radius:9px}
.sh-btn.lg{padding:16px 28px;font-size:17px;border-radius:12px}
.sh-btn.ghost{background:transparent;color:var(--sh-ink);border-color:var(--sh-rule2)}
.sh-btn.ghost:hover{background:var(--sh-surf2);border-color:var(--sh-mut2)}
.sh-btn.wide{width:100%}

/* ── первый экран ── */
.sh-hero{position:relative;overflow:hidden;padding:56px 0 20px}
.sh-hero::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:70%;
  background:radial-gradient(60% 100% at 30% 0%,rgba(255,176,32,.13),transparent 70%);
  pointer-events:none}
.sh-hero .grid{position:relative;display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:center}
.sh-hero h1{margin:14px 0 0;font-size:clamp(30px,5.2vw,52px);line-height:1.08;
  letter-spacing:-1.4px;font-weight:720}
.sh-hero h1 em{font-style:normal;color:var(--sh-acc)}
.sh-hero .lead{margin:16px 0 0;font-size:17.5px;line-height:1.55;color:var(--sh-mut);max-width:30em}
.sh-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;
  background:var(--sh-live-soft);color:var(--sh-live);font-size:13px;font-weight:600}
.sh-eyebrow i{width:7px;height:7px;border-radius:50%;background:currentColor;display:block;
  animation:sh-pulse 2.4s ease-in-out infinite}
.sh-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.sh-trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:20px;font-size:13.5px;color:var(--sh-mut2)}
.sh-trust span{display:inline-flex;align-items:center;gap:7px}
.sh-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sh-mut2)}
@media (max-width:900px){
  .sh-hero{padding:26px 0 8px}
  .sh-hero .grid{grid-template-columns:1fr;gap:26px}
  .sh-hero .lead{font-size:16px}
  .sh-acts{margin-top:20px}
  .sh-acts .sh-btn{flex:1 1 100%}
}

/* ── мокап телефона: главный экран приложения в состоянии «подключено» ──
   Кадр намеренно похож на настоящий экран Happ: индиговый градиент, большая круглая
   кнопка питания со свечением, строка проверки соединения, карточка подписки и список
   серверов с протоколами. Человек с платного трафика должен узнать то, что увидит
   после оплаты, а не разглядывать абстрактную иллюстрацию.
   Всё на CSS: свечение дышит, таймер идёт колонками цифр, выделение в списке переезжает
   по кругу. При prefers-reduced-motion движение выключается, кадр остаётся читаемым. */
.sh-phone{justify-self:center;width:290px;max-width:100%;position:relative}
.sh-phone::after{content:"";position:absolute;inset:6% -20% -8% -20%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 42%,rgba(92,108,246,.28),transparent 72%);
  filter:blur(8px)}
.sh-dev{position:relative;border-radius:38px;padding:10px;background:linear-gradient(160deg,#2b3050,#141830 62%);
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.07) inset}
.sh-scr{position:relative;border-radius:30px;overflow:hidden;min-height:474px;
  padding:14px 13px 12px;
  background:
    radial-gradient(75% 42% at 50% 20%,rgba(96,86,220,.42),transparent 70%),
    radial-gradient(60% 34% at 12% 4%,rgba(58,64,168,.35),transparent 72%),
    linear-gradient(180deg,#232049,#1d1b3d 46%,#191734);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.sh-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:76px;height:5px;
  border-radius:99px;background:rgba(255,255,255,.16)}

/* верхняя строка: шестерёнка и плюс, как в приложении */
.hp-top{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0;color:#EDEDFA}
.hp-top svg{width:19px;height:19px;display:block;opacity:.92}

/* круглая кнопка питания */
.hp-power{display:flex;justify-content:center;padding:16px 0 6px}
/* кнопка питания кликабельна: это вход в чекаут прямо из кадра */
.hp-orb{position:relative;width:126px;height:126px;border-radius:50%;cursor:pointer;
  text-decoration:none;transition:transform .18s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:radial-gradient(circle at 50% 34%,#6E7BFF,#4A46D8 62%,#3A32B4);
  box-shadow:0 0 0 7px rgba(110,123,255,.14), 0 0 34px 6px rgba(96,104,246,.42),
             0 10px 26px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset;
  animation:hp-breathe 3.6s ease-in-out infinite}
.hp-orb::before{content:"";position:absolute;inset:-13px;border-radius:50%;
  border:1px solid rgba(126,138,255,.5);animation:hp-ring 3.6s ease-out infinite}
.hp-orb svg{width:26px;height:26px;color:#fff;opacity:.96}
.hp-state{font-size:9.5px;font-weight:700;letter-spacing:1.3px;color:rgba(255,255,255,.94)}
.hp-timer{font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;line-height:1}

/* CSS-таймер: колонка цифр едет вверх шагами, поэтому время реально идёт без JS */
.sh-dg{display:inline-block;height:1.15em;overflow:hidden;vertical-align:bottom;width:.6em}
.sh-dg i{display:block;height:1.15em;line-height:1.15em;font-style:normal;text-align:center}
.sh-dg.s1 i{animation:sh-roll10 10s steps(10,end) infinite}
.sh-dg.s10 i{animation:sh-roll6 60s steps(6,end) infinite}
.sh-dg.m1 i{animation:sh-roll10 600s steps(10,end) infinite}
.sh-dg.m10 i{animation:sh-roll6 3600s steps(6,end) infinite}
.hp-timer .sep{padding:0 .5px;opacity:.65}

.hp-check{text-align:center;font-size:10.5px;color:rgba(226,228,255,.5);padding:2px 0 12px}

/* карточка подписки */
.hp-card{background:rgba(255,255,255,.07);border-radius:14px;padding:10px 11px;
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset}
.hp-card .hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hp-card .nm{font-size:11.5px;font-weight:700;color:#fff;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:5px}
.hp-card .nm b{color:var(--sh-acc);font-weight:700}
.hp-card .tools{display:flex;gap:7px;color:rgba(255,255,255,.55)}
.hp-card .tools svg{width:13px;height:13px;display:block}
.hp-card .sub{font-size:9.5px;color:rgba(226,228,255,.45);margin-top:3px}

/* список серверов */
.hp-list{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;
  position:relative}
.hp-list li{display:flex;align-items:center;gap:9px;padding:8px 2px;
  border-top:1px solid rgba(255,255,255,.07);position:relative}
.hp-list li:first-child{border-top:0}
.hp-list .fl{width:19px;height:19px;border-radius:5px;flex:none;font-size:11px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.1)}
.hp-list .g{flex:1;min-width:0}
.hp-list .nm{display:block;font-size:11.5px;font-weight:650;color:#F1F2FF;line-height:1.3}
.hp-list .pr{display:block;font-size:9px;color:rgba(226,228,255,.42);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-list .ar{color:rgba(255,255,255,.3);font-size:13px;flex:none}
.hp-list .ping{font-size:9.5px;font-weight:650;color:#6FE3A8;flex:none}
/* белая метка выбранной строки — переезжает по списку, как при смене сервера */
.hp-mark{position:absolute;left:-9px;width:3px;height:26px;border-radius:2px;
  background:#fff;box-shadow:0 0 10px rgba(255,255,255,.5);
  animation:hp-move 16s cubic-bezier(.7,0,.3,1) infinite}

body.sh .hp-orb:hover{transform:scale(1.04)}
body.sh .hp-orb:active{transform:scale(.99)}
body.sh .hp-orb:hover .hp-state{color:#fff}

@keyframes hp-breathe{
  0%,100%{box-shadow:0 0 0 7px rgba(110,123,255,.14), 0 0 34px 6px rgba(96,104,246,.42),
                     0 10px 26px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset}
  50%    {box-shadow:0 0 0 10px rgba(110,123,255,.09), 0 0 46px 10px rgba(96,104,246,.58),
                     0 10px 26px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset}
}
@keyframes hp-ring{0%{transform:scale(.94);opacity:.75}100%{transform:scale(1.14);opacity:0}}
@keyframes sh-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes sh-roll10{0%{transform:translateY(0)}100%{transform:translateY(-1000%)}}
@keyframes sh-roll6{0%{transform:translateY(0)}100%{transform:translateY(-600%)}}
@keyframes hp-move{
  0%,20%{transform:translateY(4px)}    25%,45%{transform:translateY(40px)}
  50%,70%{transform:translateY(76px)}  75%,95%{transform:translateY(112px)}
  100%{transform:translateY(4px)}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .sh-eyebrow i,.hp-orb,.hp-orb::before,.sh-dg i,.hp-mark,
  .sh-pw,.sh-pw .ring{animation:none!important}
  .hp-mark{transform:translateY(4px)}
}

/* ── секции ── */
.sh-sec{padding:64px 0;border-top:1px solid var(--sh-rule)}
.sh-sec.tight{padding:44px 0}
.sh-sec h2{margin:0;font-size:clamp(23px,3.2vw,32px);line-height:1.18;letter-spacing:-.7px;font-weight:700}
.sh-sec .sub{margin:12px 0 0;color:var(--sh-mut);font-size:16px;max-width:36em}
.sh-kicker{font-size:12.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--sh-acc);margin:0 0 12px}
@media (max-width:900px){ .sh-sec{padding:44px 0} }

.sh-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.sh-card{background:var(--sh-surf);border:1px solid var(--sh-rule);border-radius:var(--sh-r);padding:22px}
.sh-card h3{margin:0 0 8px;font-size:16.5px;font-weight:650;letter-spacing:-.2px}
.sh-card p{margin:0;color:var(--sh-mut);font-size:14.5px;line-height:1.55}
.sh-card .ic{width:34px;height:34px;border-radius:10px;background:var(--sh-acc-soft);color:var(--sh-acc);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.sh-card .ic svg{width:18px;height:18px}
@media (max-width:900px){ .sh-cards{grid-template-columns:1fr;gap:10px} .sh-card{padding:18px} }

/* шаги подключения */
.sh-steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.sh-step{position:relative;padding:22px;background:var(--sh-surf);border:1px solid var(--sh-rule);
  border-radius:var(--sh-r)}
.sh-step::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:var(--sh-acc);color:var(--sh-acc-ink);
  font-size:14px;font-weight:700;margin-bottom:14px}
.sh-step h3{margin:0 0 7px;font-size:16px;font-weight:650}
.sh-step p{margin:0;color:var(--sh-mut);font-size:14.5px;line-height:1.55}
@media (max-width:900px){ .sh-steps{grid-template-columns:1fr;gap:10px} }

/* тарифы */
.sh-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px;align-items:stretch}
.sh-plan{position:relative;display:flex;flex-direction:column;background:var(--sh-surf);
  border:1px solid var(--sh-rule);border-radius:var(--sh-r-lg);padding:24px 22px 22px}
.sh-plan.best{border-color:var(--sh-acc);background:linear-gradient(180deg,rgba(255,176,32,.07),var(--sh-surf) 46%)}
.sh-plan .tag{position:absolute;top:-11px;left:22px;background:var(--sh-acc);color:var(--sh-acc-ink);
  font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.2px}
.sh-plan .nm{font-size:15px;font-weight:650;color:var(--sh-mut)}
.sh-plan .pr{margin:10px 0 2px;font-size:38px;font-weight:720;letter-spacing:-1.6px;line-height:1}
/* класс permo, а не pm: .pm в tok2.css — строка способа оплаты с рамкой и фоном */
.sh-plan .permo{font-size:13.5px;color:var(--sh-mut2)}
.sh-plan ul{list-style:none;margin:18px 0 22px;padding:0;display:flex;flex-direction:column;gap:9px;flex:1}
.sh-plan li{position:relative;padding-left:23px;font-size:14px;color:var(--sh-mut);line-height:1.45}
.sh-plan li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:7px;
  border-left:2px solid var(--sh-live);border-bottom:2px solid var(--sh-live);transform:rotate(-45deg)}
@media (max-width:900px){ .sh-plans{grid-template-columns:1fr;gap:14px} .sh-plan .pr{font-size:32px} }

/* полоса доверия / оплата */
.sh-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sh-chip{display:inline-flex;align-items:center;gap:8px;background:var(--sh-surf);
  border:1px solid var(--sh-rule);border-radius:99px;padding:8px 15px;font-size:13.5px;color:var(--sh-mut)}
.sh-chip b{color:var(--sh-ink);font-weight:600}

/* FAQ */
.sh-faq{margin-top:26px;border-top:1px solid var(--sh-rule)}
.sh-faq details{border-bottom:1px solid var(--sh-rule)}
.sh-faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;
  font-size:16px;font-weight:600}
.sh-faq summary::-webkit-details-marker{display:none}
.sh-faq summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--sh-mut);border-bottom:2px solid var(--sh-mut);
  transform:rotate(45deg);transition:transform .15s}
.sh-faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.sh-faq p{margin:0 0 18px;color:var(--sh-mut);font-size:15px;line-height:1.6;max-width:44em}

/* финальный CTA */
.sh-final{text-align:center;background:linear-gradient(180deg,rgba(255,176,32,.08),transparent);
  border:1px solid var(--sh-rule);border-radius:var(--sh-r-lg);padding:44px 24px;margin:16px 0 0}
.sh-final h2{margin:0 0 12px}
.sh-final p{margin:0 auto 24px;color:var(--sh-mut);max-width:34em}

/* ── нижний липкий бар (только телефоны) ──
   Круглая кнопка включения и подпись рядом; вся полоса — одна ссылка в чекаут. Красной
   плашки во всю ширину нет намеренно: она читалась как форма и спорила с кнопками
   первого экрана. Яркость держат три вещи — свечение кнопки, белый жирный текст и
   красная линия-подсветка по верхней кромке. */
.sh-stick{display:none}
@media (max-width:860px){
  .sh-stick{
    display:flex;align-items:center;gap:13px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));text-decoration:none;
    background:
      radial-gradient(120% 140% at 14% 50%,rgba(96,104,246,.16),transparent 62%),
      linear-gradient(180deg,rgba(11,13,20,.80),rgba(11,13,20,.97) 48%);
    backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
    -webkit-tap-highlight-color:transparent;
  }
  /* красная кромка вместо плашки: акцент виден, а полоса остаётся лёгкой */
  .sh-stick::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--sh-acc) 22%,#FF7A82 50%,var(--sh-acc) 78%,transparent);
    opacity:.9}
  body.sh{padding-bottom:82px}

  .sh-stick .txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .sh-stick .txt b{font-size:16.5px;font-weight:700;color:#fff;letter-spacing:-.2px;line-height:1.2}
  .sh-stick .txt i{font-style:normal;font-size:12.5px;color:var(--sh-acc);font-weight:600}
  .sh-stick .arw{flex:none;color:rgba(255,255,255,.42);display:flex}
  .sh-stick .arw svg{width:19px;height:19px}
  .sh-stick:active{opacity:.86}

  /* круглая кнопка включения — тот же индиго, что в мокапе: узнаётся как «запустить» */
  .sh-pw{position:relative;flex:none;width:54px;height:54px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;
    background:radial-gradient(circle at 50% 32%,#7C86FF,#4A46D8 60%,#3A32B4);
    box-shadow:0 0 0 6px rgba(110,123,255,.14), 0 0 26px 6px rgba(96,104,246,.55),
               0 4px 14px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset;
    animation:sh-pw-breathe 3.2s ease-in-out infinite;transition:transform .16s ease}
  .sh-pw svg{width:24px;height:24px;position:relative;z-index:1}
  .sh-pw .ring{position:absolute;inset:-7px;border-radius:50%;
    border:1.5px solid rgba(140,150,255,.7);animation:sh-pw-ring 3.2s ease-out infinite}
  .sh-stick:active .sh-pw{transform:scale(.94)}
}
@keyframes sh-pw-breathe{
  0%,100%{box-shadow:0 0 0 6px rgba(110,123,255,.14), 0 0 26px 6px rgba(96,104,246,.55),
                     0 4px 14px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset}
  50%    {box-shadow:0 0 0 10px rgba(110,123,255,.09), 0 0 38px 10px rgba(96,104,246,.75),
                     0 4px 14px rgba(0,0,0,.42), 0 1px 0 rgba(255,255,255,.34) inset}
}
@keyframes sh-pw-ring{0%{transform:scale(.9);opacity:.85}100%{transform:scale(1.3);opacity:0}}

/* ── SEO-раздел в подвале ── */
.sh-seo{background:var(--sh-bg2);border-top:1px solid var(--sh-rule);padding:48px 0 8px}
.sh-seo h2{font-size:19px;margin:0 0 6px;font-weight:650}
.sh-seo .sub{color:var(--sh-mut2);font-size:14px;margin:0 0 26px}
.sh-seo .grp{margin-bottom:24px}
.sh-seo .grp h3{font-size:13px;text-transform:uppercase;letter-spacing:1.1px;color:var(--sh-mut2);
  margin:0 0 10px;font-weight:700}
.sh-seo ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:7px 22px}
.sh-seo li a{font-size:14px;color:var(--sh-mut);line-height:1.5}
.sh-seo li a:hover{color:var(--sh-acc)}
@media (max-width:600px){ .sh-seo ul{grid-template-columns:1fr} }

/* ── подвал ── */
.sh-ft{border-top:1px solid var(--sh-rule);padding:34px 0 44px;background:var(--sh-bg2);
  font-size:13.5px;color:var(--sh-mut2)}
.sh-ft .row{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;margin-bottom:18px}
.sh-ft a{color:var(--sh-mut)}
.sh-ft a:hover{color:var(--sh-ink)}
.sh-ft .disc{max-width:62em;line-height:1.6;color:var(--sh-mut2);font-size:12.5px;
  border-top:1px solid var(--sh-rule);padding-top:16px}

/* ── контентные страницы (SEO, документы) ── */
.sh-art{padding:38px 0 16px}
.sh-crumbs{font-size:13px;color:var(--sh-mut2);margin-bottom:18px}
.sh-crumbs a{color:var(--sh-mut2)}
.sh-crumbs a:hover{color:var(--sh-ink)}
.sh-art h1{font-size:clamp(26px,4.2vw,38px);line-height:1.15;letter-spacing:-1px;margin:0 0 16px;font-weight:700}
.sh-art .intro{font-size:17.5px;line-height:1.6;color:var(--sh-mut);margin:0 0 28px}
.sh-art h2{font-size:21px;margin:34px 0 12px;letter-spacing:-.35px;font-weight:680}
.sh-art h3{font-size:17px;margin:24px 0 9px;font-weight:650}
.sh-art p{margin:0 0 15px;line-height:1.68;color:#D6DCE7}
.sh-art ul,.sh-art ol{margin:0 0 18px;padding-left:22px;color:#D6DCE7}
.sh-art li{margin-bottom:8px;line-height:1.62}
.sh-art strong{color:var(--sh-ink);font-weight:650}
.sh-art .box{background:var(--sh-surf);border:1px solid var(--sh-rule);border-radius:var(--sh-r);
  padding:18px 20px;margin:0 0 20px}
.sh-art .box p:last-child{margin-bottom:0}
.sh-art table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;display:block;overflow-x:auto}
.sh-art th,.sh-art td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--sh-rule);white-space:nowrap}
.sh-art th{color:var(--sh-mut2);font-size:12.5px;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.sh-cta-box{background:linear-gradient(180deg,rgba(255,176,32,.09),transparent);
  border:1px solid var(--sh-rule2);border-radius:var(--sh-r-lg);padding:26px;margin:32px 0 8px}
.sh-cta-box h2{margin:0 0 8px;font-size:20px}
.sh-cta-box p{margin:0 0 18px;color:var(--sh-mut)}
.sh-rel{margin-top:34px;padding-top:22px;border-top:1px solid var(--sh-rule)}
.sh-rel h2{font-size:15px;margin:0 0 12px;color:var(--sh-mut2);text-transform:uppercase;letter-spacing:1px}
.sh-rel ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 20px}
.sh-rel a{font-size:14.5px;color:var(--sh-mut)}
.sh-rel a:hover{color:var(--sh-acc)}