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

   Ключ домена: ссылка-команда. В Incy доступ приезжает не кнопкой в меню, а строкой
   incy://import/… — поэтому фирменная деталь витрины моноширинная: команда над мокапом,
   адрес провайдера в кадре, номер и код у каждого шага. Отсюда же знак «›_».

   Палитра своя, не повторяет соседей сети: холодный графит с зеленцой и один горячий
   акцент — сигнальный лайм. Чёрный текст на лайме даёт максимальный контраст для кнопки
   (у соседней витрины акцент красный, у справочника incy.to — пурпур). Бирюза в теме
   принадлежит только данным в мокапе: задержка, статус сервера. */

:root{
  --in-bg:#080B09;          /* фон: графит с зеленцой */
  --in-bg2:#0B100C;
  --in-surf:#111713;        /* карточки */
  --in-surf2:#161E18;       /* вложенные плоскости, шапка на скролле */
  --in-rule:#1F2A22;
  --in-rule2:#2B382E;
  --in-ink:#ECF3EE;
  --in-mut:#93A497;
  --in-mut2:#66776A;
  --in-acc:#A8F03C;         /* сигнальный лайм: кнопки, цена, знак */
  --in-acc-h:#B9FF57;       /* он же на наведении */
  --in-acc-ink:#08120A;     /* текст на лайме — почти чёрный, контраст 12:1 */
  --in-acc-soft:rgba(168,240,60,.12);
  --in-data:#4FD8CC;        /* только данные в мокапе: задержка, «активен» */
  --in-data-soft:rgba(79,216,204,.14);
  --in-r:14px; --in-r-lg:20px; --in-r-sm:10px;
  --in-f:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --in-m:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* NB: переменные *-d в tok2.css — цвет ТЕКСТА на подложке *-bg (бейджи «выгодно»,
   заметки), поэтому они светлые, а не тёмные.
   ── переопределение темы tok2.css: чекаут и кабинет на incy.im тёмные всегда,
      а не по системной настройке. Правим только переменные — разметка общая. ── */
:root{
  --bg:#080B09; --card:#111713; --card2:#0E140F; --soft:#161E18;
  --line:#1F2A22; --line2:#2B382E;
  --tx:#ECF3EE; --mut:#93A497; --mut2:#66776A;
  --acc:#A8F03C; --acc-d:#DCFFA8; --acc-bg:#1E2E0D; --acc-soft:rgba(168,240,60,.10);
  --ok:#4FD8CC; --ok-d:#B4F5EF; --ok-bg:#0F2C29;
  --warn-bg:#2E2810; --warn-tx:#EBCE79;
  --err-bg:#331A1A; --err-tx:#F4A09A;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#080B09; --card:#111713; --card2:#0E140F; --soft:#161E18;
    --line:#1F2A22; --line2:#2B382E;
    --tx:#ECF3EE; --mut:#93A497; --mut2:#66776A;
    --acc:#A8F03C; --acc-d:#DCFFA8; --acc-bg:#1E2E0D; --acc-soft:rgba(168,240,60,.10);
    --ok:#4FD8CC; --ok-d:#B4F5EF; --ok-bg:#0F2C29;
    --warn-bg:#2E2810; --warn-tx:#EBCE79;
    --err-bg:#331A1A; --err-tx:#F4A09A;
  }
}
/* главная кнопка чекаута — лайм с тёмным текстом */
body .btn{background:var(--in-acc);color:var(--in-acc-ink);border-color:transparent;font-weight:680}
body .btn:hover{background:var(--in-acc-h)}
body .btn.soft{background:var(--in-surf2);color:var(--in-ink);border:1px solid var(--in-rule2)}
body .brand span{color:var(--in-ink)}

/* ══════════════════════════ витрина incy.im ══════════════════════════ */

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

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

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

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

/* ── мокап: экран Incy после импорта провайдера ──
   Сверху идёт та самая команда, которая придёт после оплаты, и по проводу вниз бежит
   пакет — так кадр показывает не «включённый VPN», а покупку: провайдер приехал, срок
   и слоты заполнены, серверы подтянулись сами. */
.in-stage{justify-self:center;width:296px;max-width:100%;position:relative}
.in-stage::after{content:"";position:absolute;inset:14% -22% -8% -22%;z-index:-1;
  background:radial-gradient(50% 50% at 50% 45%,rgba(79,216,204,.16),transparent 72%);
  filter:blur(10px)}

.in-wire{position:relative;margin:0 0 14px;padding:9px 12px;border-radius:10px;
  background:var(--in-surf);border:1px solid var(--in-rule2);
  box-shadow:0 10px 26px rgba(0,0,0,.4)}
.in-wire .cmd{display:block;font:600 11.5px/1.5 var(--in-m);color:var(--in-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
.in-wire .cmd .p{color:var(--in-acc)}
.in-wire .cmd .d{color:var(--in-mut)}
.in-wire .cmd .cur{display:inline-block;width:7px;height:12px;margin-left:2px;
  background:var(--in-acc);vertical-align:-2px;animation:in-cur 1.1s steps(1,end) infinite}
/* пакет: команда «уезжает» в приложение — связь ленты с кадром */
.in-wire .pkt{position:absolute;left:50%;bottom:-15px;width:6px;height:6px;border-radius:50%;
  background:var(--in-acc);box-shadow:0 0 12px 2px rgba(168,240,60,.7);
  animation:in-pkt 3.4s ease-in infinite}

/* ── корпус и экран ──
   Палитра кадра взята с настоящего приложения: почти чёрный фон с зелёным отливом,
   лаймовый знак, моноширинные цифры скоростей. Наш акцент совпадает с фирменным
   зелёным Incy, поэтому кадр и страница читаются как одно целое. */
.in-dev{position:relative;border-radius:34px;padding:9px;
  background:linear-gradient(160deg,#243024,#131A14 62%);
  box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.06) inset}
.in-scr{position:relative;border-radius:27px;overflow:hidden;min-height:500px;padding:14px 11px 8px;
  background:
    radial-gradient(78% 34% at 50% 26%,rgba(168,240,60,.10),transparent 70%),
    linear-gradient(180deg,#0D140C,#0A100A 46%,#080C08);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset}
.in-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:74px;height:5px;
  border-radius:99px;background:rgba(255,255,255,.14)}

/* знак приложения и версия */
.ic-brand{display:flex;align-items:center;gap:7px;padding:13px 2px 8px}
.ic-brand .lg{font:800 19px/1 var(--in-f);letter-spacing:.6px;color:var(--in-acc)}
.ic-brand .ver{font:500 10px var(--in-m);color:rgba(236,243,238,.42);letter-spacing:.2px}
.ic-brand .globe{margin-left:auto;width:26px;height:26px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:rgba(236,243,238,.6);
  background:rgba(255,255,255,.06)}
.ic-brand .globe svg{width:14px;height:14px}

/* строка скоростей и таймера */
.ic-meter{display:flex;align-items:center;justify-content:space-between;gap:6px;
  font:600 10px var(--in-m);color:rgba(236,243,238,.62);padding:0 2px 4px}
.ic-meter .up{color:var(--in-acc)}
.ic-meter .dn{color:var(--in-data)}
.ic-meter .tm{color:rgba(236,243,238,.8);font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;line-height:1}

/* ── круглая кнопка подключения ──
   Она же вход в чекаут, поэтому на ней держится всё движение кадра: по кольцу бежит
   дуга (соединение живёт), свечение дышит, наружу расходится волна. Три такта разной
   длины намеренно не совпадают — кнопка не «мигает по метроному», а выглядит работающей.
   Наведение усиливает свечение и подтягивает щит: понятно, что это кнопка. */
.ic-power{display:flex;justify-content:center;padding:2px 0 0}
.ic-orb{position:relative;width:132px;height:132px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,rgba(168,240,60,.10),rgba(10,16,10,.2) 62%);
  box-shadow:0 0 0 1px rgba(168,240,60,.30) inset, 0 0 34px rgba(168,240,60,.14);
  animation:in-breathe 3.6s ease-in-out infinite;
  transition:transform .2s ease, box-shadow .2s ease}
/* бегущая по кольцу дуга: маска оставляет от градиента только ободок */
.ic-orb .arc{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 58%,rgba(168,240,60,.18) 70%,
    var(--in-acc) 86%,rgba(168,240,60,.18) 92%,transparent 97%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
  animation:in-arc 3.4s linear infinite}
/* волна наружу — «пинг» активного соединения */
.ic-orb .wave{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  border:1px solid rgba(168,240,60,.5);animation:in-wave 3.6s ease-out infinite}
.ic-orb .core{position:relative;width:92px;height:92px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--in-acc);
  background:radial-gradient(circle at 50% 38%,#16210F,#0C120B 70%);
  box-shadow:0 0 0 1px rgba(168,240,60,.22) inset, 0 10px 26px rgba(0,0,0,.5)}
.ic-orb .core svg{width:40px;height:40px;animation:in-shield 3.6s ease-in-out infinite}
body.in .ic-orb:hover{transform:scale(1.03);
  box-shadow:0 0 0 1px rgba(168,240,60,.55) inset, 0 0 48px rgba(168,240,60,.3)}
body.in .ic-orb:hover .core{box-shadow:0 0 0 1px rgba(168,240,60,.5) inset, 0 10px 30px rgba(0,0,0,.55)}
body.in .ic-orb:active{transform:scale(.985)}

.ic-loc{text-align:center;font-size:11.5px;color:rgba(236,243,238,.55);padding:7px 0 7px}
.ic-loc b{color:#E7F2E4;font-weight:650}

/* карточка состояния туннеля */
.ic-mem{display:flex;align-items:center;gap:7px;font-size:10px;color:rgba(236,243,238,.55);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);
  border-radius:10px;padding:7px 9px}
.ic-mem b{color:#E7F2E4;font-weight:650;font-family:var(--in-m)}
.ic-mem .dot{width:6px;height:6px;border-radius:50%;background:var(--in-acc);flex:none;
  box-shadow:0 0 8px rgba(168,240,60,.8)}

.ic-sec{font:700 9px var(--in-m);letter-spacing:1.2px;text-transform:uppercase;
  color:rgba(236,243,238,.38);padding:9px 2px 5px}

/* карточка провайдера — то, что человек покупает */
.ic-prov{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:9px 10px}
.ic-prov .hd{display:flex;align-items:center;gap:7px}
.ic-prov .nm{font-size:11.5px;font-weight:700;color:#EAF3E6;letter-spacing:.3px;
  display:inline-flex;align-items:center;gap:5px}
.ic-prov .nm b{color:var(--in-acc)}
.ic-prov .age{margin-left:auto;font:500 9px var(--in-m);color:rgba(236,243,238,.4)}
.ic-prov .btns{display:inline-flex;gap:4px}
.ic-prov .btns i{width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.07);display:block}
.ic-prov .url{display:block;margin:7px 0 7px;font:600 11px/1.4 var(--in-m);color:#DDEBD9;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-prov .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:9.5px;color:rgba(236,243,238,.45)}
.ic-prov .meta b{color:#E7F2E4;font-weight:650}
.ic-prov .slots{display:inline-flex;align-items:center;gap:6px}
.ic-prov .dots{display:inline-flex;gap:3px}
.ic-prov .dots i{width:6px;height:6px;border-radius:2px;background:rgba(255,255,255,.16);display:block}
.ic-prov .dots i.on{background:var(--in-acc)}

/* список серверов: активный выделен рамкой, как в приложении */
.ic-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.ic-list li{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid transparent}
.ic-list li.on{border-color:rgba(168,240,60,.45);background:rgba(168,240,60,.07)}
.ic-list .fl{width:22px;height:18px;border-radius:4px;flex:none;
  font:700 9px/18px var(--in-m);text-align:center;color:rgba(236,243,238,.72);
  background:rgba(255,255,255,.08);letter-spacing:.4px}
.ic-list .g{flex:1;min-width:0}
.ic-list .nm{display:block;font-size:11.5px;font-weight:650;color:#EAF3E6;line-height:1.25}
.ic-list .tag{display:inline-block;margin-top:3px;font:500 8.5px var(--in-m);
  color:rgba(236,243,238,.5);background:rgba(255,255,255,.06);border-radius:4px;padding:2px 5px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ic-list li.on .tag{color:#CDE9A2;background:rgba(168,240,60,.12)}
.ic-list .ping{font:650 9.5px var(--in-m);color:var(--in-data);flex:none}

/* нижний таб-бар */
.ic-tabs{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:9px;
  padding:6px 6px;border-radius:14px;background:rgba(255,255,255,.04)}
.ic-tabs span{flex:1;text-align:center;font-size:9.5px;color:rgba(236,243,238,.45);
  padding:6px 4px;border-radius:10px}
.ic-tabs .on{color:#DFF3C4;background:rgba(168,240,60,.14);font-weight:650;
  box-shadow:0 0 0 1px rgba(168,240,60,.28) inset}

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

@keyframes in-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
@keyframes in-cur{0%,50%{opacity:1}51%,100%{opacity:0}}
@keyframes in-pkt{
  0%{transform:translate(-50%,0) scale(1);opacity:0}
  12%{opacity:1}
  70%{transform:translate(-50%,74px) scale(.7);opacity:.9}
  86%,100%{transform:translate(-50%,96px) scale(.2);opacity:0}
}
@keyframes in-arc{to{transform:rotate(360deg)}}
@keyframes in-wave{
  0%{transform:scale(.9);opacity:.55}
  70%{opacity:0}
  100%{transform:scale(1.28);opacity:0}
}
@keyframes in-breathe{
  0%,100%{box-shadow:0 0 0 1px rgba(168,240,60,.30) inset, 0 0 34px rgba(168,240,60,.14)}
  50%    {box-shadow:0 0 0 1px rgba(168,240,60,.45) inset, 0 0 52px rgba(168,240,60,.26)}
}
@keyframes in-shield{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
@keyframes in-roll10{0%{transform:translateY(0)}100%{transform:translateY(-1000%)}}
@keyframes in-roll6{0%{transform:translateY(0)}100%{transform:translateY(-600%)}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .in-eyebrow i,.in-wire .cur,.in-wire .pkt,.in-dg i,
  .ic-orb,.ic-orb .arc,.ic-orb .wave,.ic-orb .core svg,.in-key i{animation:none!important}
  .in-wire .pkt,.ic-orb .wave{opacity:0}
}

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

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

/* шаги подключения: номер моноширинный, внизу реальная строка команды */
.in-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:30px}
.in-step{position:relative;padding:22px;background:var(--in-surf);border:1px solid var(--in-rule);
  border-radius:var(--in-r)}
.in-step .n{display:block;font:700 12px var(--in-m);letter-spacing:1.6px;color:var(--in-acc);margin-bottom:12px}
.in-step h3{margin:0 0 7px;font-size:16px;font-weight:650}
.in-step p{margin:0 0 14px;color:var(--in-mut);font-size:14.5px;line-height:1.55}
.in-step code{display:block;font:600 12px var(--in-m);color:var(--in-mut2);
  border-top:1px dashed var(--in-rule2);padding-top:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:900px){ .in-steps{grid-template-columns:1fr;gap:10px} }

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

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

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

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

/* ── нижний липкий бар (только телефоны) ──
   Слева командная клавиша «›_» — тот же знак, что в шапке и в ленте над мокапом.
   Плашки во всю ширину нет намеренно: она читается как форма и спорит с кнопками
   первого экрана. Яркость держат свечение клавиши, белый жирный текст и лаймовая
   кромка по верху бара. */
.in-stick{display:none}
@media (max-width:860px){
  .in-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(168,240,60,.14),transparent 62%),
      linear-gradient(180deg,rgba(8,11,9,.80),rgba(8,11,9,.97) 48%);
    backdrop-filter:saturate(160%) blur(16px);-webkit-backdrop-filter:saturate(160%) blur(16px);
    -webkit-tap-highlight-color:transparent;
  }
  .in-stick::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg,transparent,var(--in-acc) 22%,#D6FF8A 50%,var(--in-acc) 78%,transparent);
    opacity:.9}
  body.in{padding-bottom:82px}

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

  /* командная клавиша: тот же знак «›_», что у домена */
  .in-key{position:relative;flex:none;width:52px;height:52px;border-radius:15px;
    display:flex;align-items:center;justify-content:center;gap:3px;
    background:linear-gradient(180deg,#C6FF63,#93DB25);
    box-shadow:0 0 0 5px rgba(168,240,60,.12), 0 0 24px 4px rgba(168,240,60,.42),
               0 4px 14px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.4) inset;
    transition:transform .16s ease}
  .in-key b{font:800 22px/1 var(--in-m);color:var(--in-acc-ink);margin-top:-2px}
  .in-key i{width:11px;height:3px;border-radius:2px;background:var(--in-acc-ink);
    animation:in-cur 1.1s steps(1,end) infinite}
  .in-stick:active .in-key{transform:scale(.94)}
}

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

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

/* ── контентные страницы (коммерческий раздел, документы) ── */
.in-art{padding:38px 0 16px}
.in-crumbs{font:400 13px var(--in-m);color:var(--in-mut2);margin-bottom:18px}
.in-crumbs a{color:var(--in-mut2)}
.in-crumbs a:hover{color:var(--in-ink)}
.in-art h1{font-size:clamp(26px,4.2vw,38px);line-height:1.15;letter-spacing:-1px;margin:0 0 16px;font-weight:700}
.in-art .intro{font-size:17.5px;line-height:1.6;color:var(--in-mut);margin:0 0 28px}
.in-art h2{font-size:21px;margin:34px 0 12px;letter-spacing:-.35px;font-weight:680}
.in-art h3{font-size:17px;margin:24px 0 9px;font-weight:650}
.in-art p{margin:0 0 15px;line-height:1.68;color:#D3DED5}
.in-art ul,.in-art ol{margin:0 0 18px;padding-left:22px;color:#D3DED5}
.in-art li{margin-bottom:8px;line-height:1.62}
.in-art strong{color:var(--in-ink);font-weight:650}
.in-art code{font:600 13.5px var(--in-m);color:var(--in-acc);background:var(--in-acc-soft);
  padding:2px 6px;border-radius:5px;word-break:break-all}
.in-art .box{background:var(--in-surf);border:1px solid var(--in-rule);border-radius:var(--in-r);
  padding:18px 20px;margin:0 0 20px}
.in-art .box p:last-child{margin-bottom:0}
/* врезка-команда: тот же приём, что в ленте над мокапом */
.in-art .cmd{display:block;font:600 13.5px/1.6 var(--in-m);color:var(--in-ink);background:var(--in-surf2);
  border:1px solid var(--in-rule2);border-left:3px solid var(--in-acc);border-radius:8px;
  padding:12px 14px;margin:0 0 20px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
.in-art table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14.5px;display:block;overflow-x:auto}
.in-art th,.in-art td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--in-rule);white-space:nowrap}
.in-art th{font:700 12.5px var(--in-m);color:var(--in-mut2);text-transform:uppercase;letter-spacing:.8px}
.in-cta-box{background:linear-gradient(180deg,rgba(168,240,60,.08),transparent);
  border:1px solid var(--in-rule2);border-radius:var(--in-r-lg);padding:26px;margin:32px 0 8px}
.in-cta-box h2{margin:0 0 8px;font-size:20px}
.in-cta-box p{margin:0 0 18px;color:var(--in-mut)}
.in-rel{margin-top:34px;padding-top:22px;border-top:1px solid var(--in-rule)}
.in-rel h2{font:700 15px var(--in-m);margin:0 0 12px;color:var(--in-mut2);text-transform:uppercase;letter-spacing:1px}
.in-rel ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px 20px}
.in-rel a{font-size:14.5px;color:var(--in-mut)}
.in-rel a:hover{color:var(--in-acc)}