/* ============================================================
   EXOSYSTEM — лендинг exosystem.tech
   Тёмная тема в палитре продукта (ЛК/панель), без внешних
   шрифтов и библиотек. Системный шрифт-стек, vanilla CSS.
   ============================================================ */

:root{
  --bg:#0e0e0f;
  --bg-raise:#131314;
  --surface:#1b1c1e;
  --surface-2:#212225;
  --border:#2a2b2e;
  --border-soft:#232427;
  --text:#e6e6e6;
  --text-2:#9b9ea3;
  --accent:#a8c7fa;
  --accent-strong:#c0d6fb;
  --success:#6dd58c;
  --danger:#f28b82;
  --warn:#f0b86e;
  --radius:22px;
  --radius-lg:28px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","SF Mono",Consolas,"Roboto Mono",monospace;
  --container:1120px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
html{overflow-x:clip}
body{
  background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* height:auto обязателен: без него атрибут height действует как фиксированная
   высота в px, и при ужатии max-width скриншоты вытягиваются по вертикали.
   Атрибуты width/height остаются в HTML — браузер берёт из них aspect-ratio
   и резервирует место без сдвига макета (CLS). */
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-strong)}
.container{max-width:var(--container);margin:0 auto;padding:0 24px}

::selection{background:rgba(168,199,250,.25)}
*{scrollbar-width:thin;scrollbar-color:#3c4043 transparent}

/* ---------- Кнопки (пилюли, как в продукте) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 26px;border-radius:100px;font-weight:600;font-size:15px;
  border:1px solid transparent;cursor:pointer;line-height:1.2;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s;
  white-space:nowrap;
}
.btn svg{flex:none}
.btn-accent{background:var(--accent);color:#0e1116;}
.btn-accent:hover{background:var(--accent-strong);color:#0e1116;transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(168,199,250,.25)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{background:var(--surface);color:var(--text);border-color:#3a3c40}
.btn-lg{padding:15px 32px;font-size:16px}

/* ---------- Шапка ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .25s ease, border-color .25s ease, backdrop-filter .25s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(14,14,15,.82);backdrop-filter:blur(14px);
  border-bottom-color:var(--border-soft);
}
.header-in{
  max-width:var(--container);margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;gap:28px;
}
.logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;
  letter-spacing:.4px;color:var(--text)}
.logo:hover{color:var(--text)}
.logo .dim{color:var(--text-2);font-weight:400}
.site-nav{display:flex;gap:4px;margin-left:auto}
.site-nav a{
  color:var(--text-2);font-size:14.5px;padding:8px 10px;border-radius:100px;
  transition:.2s;white-space:nowrap;
}
.site-nav a:hover{color:var(--text);background:var(--surface)}
.header-cta{display:flex;align-items:center;gap:10px}
.gh-link{display:inline-flex;align-items:center;gap:7px;color:var(--text-2);
  font-size:14.5px;padding:8px 12px;border-radius:100px;transition:.2s}
.gh-link:hover{color:var(--text);background:var(--surface)}
.header-cta .btn{padding:9px 20px;font-size:14px}

/* ---------- Hero ---------- */
.hero{position:relative;padding:150px 0 40px;overflow:visible}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-1}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;
  will-change:transform}
.glow-a{width:640px;height:640px;left:-160px;top:-220px;
  background:radial-gradient(circle,rgba(168,199,250,.20),transparent 65%)}
.glow-b{width:560px;height:560px;right:-140px;top:60px;
  background:radial-gradient(circle,rgba(109,213,140,.12),transparent 65%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--accent);
  border:1px solid rgba(168,199,250,.35);border-radius:100px;padding:6px 14px;
  background:rgba(168,199,250,.07);margin-bottom:22px;letter-spacing:.2px;
}
.eyebrow .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 0 rgba(109,213,140,.6);animation:pulse 2.4s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(109,213,140,.55)}
  70%{box-shadow:0 0 0 9px rgba(109,213,140,0)}
  100%{box-shadow:0 0 0 0 rgba(109,213,140,0)}
}
h1{font-size:52px;line-height:1.12;font-weight:800;letter-spacing:-1.2px;margin-bottom:20px}
h1 .grad{
  background:linear-gradient(100deg,var(--accent) 10%,#d3e3fd 50%,var(--success) 95%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:18.5px;color:var(--text-2);max-width:34em;margin-bottom:30px}
.hero-sub strong{color:var(--text);font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.hero-points{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;color:var(--text-2)}
.hero-points span{display:inline-flex;align-items:center;gap:7px}
.hero-points svg{color:var(--success)}

/* Терминал */
.term{
  background:#111214;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(168,199,250,.04);
  overflow:hidden;font-family:var(--mono);font-size:13.5px;line-height:1.75;
}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--border-soft);background:#17181a}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#f28b82}
.term-bar i:nth-child(2){background:#f0b86e}
.term-bar i:nth-child(3){background:#6dd58c}
.term-bar span{margin-left:8px;color:var(--text-2);font-size:12px;font-family:var(--font)}
.term-body{padding:20px 22px;min-height:238px;color:#cfd3d8;word-break:break-all}
.term-body .p{color:var(--success);margin-right:8px}
.term-body .cmd{color:#e8eaed}
.term-line{display:block;white-space:pre-wrap}
.term-line.dim{color:var(--text-2)}
.term-line.ok{color:var(--success)}
.term-line.ok a{color:var(--success);text-decoration:underline}
.caret{display:inline-block;width:8px;height:16px;background:#cfd3d8;
  vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- Рамка-браузер для скриншотов ---------- */
.browser{
  background:#151618;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;
  background:#1a1b1e;border-bottom:1px solid var(--border-soft)}
.browser-bar i{width:10px;height:10px;border-radius:50%;display:block;background:#3a3c40}
.browser-bar .url{
  margin-left:12px;flex:1;max-width:420px;background:#0f1011;border:1px solid var(--border-soft);
  border-radius:100px;padding:4px 14px;font-size:12px;color:var(--text-2);
  font-family:var(--mono);display:flex;align-items:center;gap:7px;overflow:hidden;white-space:nowrap;
}
.browser-bar .url svg{flex:none;color:var(--success)}

.hero-shot{position:relative;margin:64px auto 0;max-width:1010px;perspective:1400px}
.hero-shot .browser{
  transform:rotateX(4.5deg);transform-origin:50% 0;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero-shot:hover .browser{transform:rotateX(0deg)}
.hero-shot::after{
  content:"";position:absolute;inset:auto 8% -34px 8%;height:70px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(168,199,250,.16),transparent 70%);
  filter:blur(24px);
}

/* ---------- Секции ---------- */
section{padding:104px 0}
section[id]{scroll-margin-top:78px} /* якоря не ныряют под фикс-шапку */
.section-head{max-width:640px;margin-bottom:56px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.kicker{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;margin-bottom:14px}
h2{font-size:36px;line-height:1.18;font-weight:800;letter-spacing:-.8px;margin-bottom:14px}
.section-head p{color:var(--text-2);font-size:17px}

/* Полоса фактов */
.strip{padding:20px 0 0}
.strip-in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.fact{
  background:var(--bg-raise);border:1px solid var(--border-soft);border-radius:18px;
  padding:18px 22px;display:flex;flex-direction:column;gap:2px;
}
.fact b{font-size:20px;letter-spacing:-.3px}
.fact span{color:var(--text-2);font-size:13.5px}

/* Шаги */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step}
.step{
  position:relative;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:26px 24px 24px;overflow:hidden;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--mono);font-size:13px;color:var(--accent);
  border:1px solid rgba(168,199,250,.35);border-radius:100px;padding:3px 11px;
  display:inline-block;margin-bottom:16px;background:rgba(168,199,250,.06);
}
.step h3{font-size:17.5px;font-weight:700;margin-bottom:8px;letter-spacing:-.2px}
.step p{color:var(--text-2);font-size:14.5px}
.step .mono{font-family:var(--mono);font-size:12.5px;color:var(--accent);
  background:#0f1011;border:1px solid var(--border-soft);border-radius:9px;
  padding:2px 8px;white-space:nowrap}

/* Витрины (скриншот + текст) */
.show{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;padding:56px 0}
.show.rev .show-media{order:2}
.show.rev .show-copy{order:1}
.show-copy .kicker{margin-bottom:10px}
.show-copy h3{font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.2;margin-bottom:14px}
.show-copy>p{color:var(--text-2);font-size:16.5px;margin-bottom:20px}
.show-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.show-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.show-list li b{color:var(--text);font-weight:600}
.show-list svg{flex:none;margin-top:3px;color:var(--success)}
.show-media{position:relative}
.show-media .browser{transform:rotate(-1.1deg);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.show.rev .show-media .browser{transform:rotate(1.1deg)}
.show-media:hover .browser{transform:rotate(0)}
.show-media::after{
  content:"";position:absolute;inset:14% 0 -8% 0;z-index:-1;border-radius:40px;
  background:radial-gradient(ellipse at center,rgba(168,199,250,.10),transparent 70%);
  filter:blur(30px);
}
/* Узкая карточка (виджет чата) */
.show-media.narrow{max-width:420px;justify-self:center}
.show-media.narrow .browser{border-radius:26px}

/* ---------- Возможности ---------- */
.features{padding-top:40px}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.feat{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:24px;transition:transform .25s ease, border-color .25s ease, background .25s;
}
.feat:hover{transform:translateY(-4px);border-color:#34363a;background:var(--surface-2)}
.feat-icon{
  width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(168,199,250,.09);border:1px solid rgba(168,199,250,.22);color:var(--accent);
  margin-bottom:16px;
}
.feat h3{font-size:16px;font-weight:700;margin-bottom:7px;letter-spacing:-.2px}
.feat p{color:var(--text-2);font-size:13.8px;line-height:1.55}

/* ---------- Для кого ---------- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.who{
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-raise) 100%);
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:30px 28px;
}
.who .feat-icon{margin-bottom:18px}
.who h3{font-size:19px;font-weight:800;margin-bottom:10px;letter-spacing:-.3px}
.who p{color:var(--text-2);font-size:14.8px;margin-bottom:14px}
.who ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.who li{display:flex;gap:9px;font-size:13.8px;color:var(--text-2);align-items:flex-start}
.who li svg{flex:none;margin-top:3px;color:var(--accent)}

/* ---------- Маркет компонентов ---------- */
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.comp{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:24px;display:flex;flex-direction:column;gap:12px;
  transition:transform .25s ease, border-color .25s ease, background .25s;
}
.comp:hover{transform:translateY(-4px);border-color:#34363a;background:var(--surface-2)}
.comp-top{display:flex;align-items:center;gap:12px}
.comp-top .feat-icon{margin:0}
.comp-cat{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--accent);background:rgba(168,199,250,.09);border:1px solid rgba(168,199,250,.22);
  border-radius:100px;padding:3px 11px;
}
.comp h3{font-size:17px;font-weight:700;letter-spacing:-.2px}
.comp>p{color:var(--text-2);font-size:14px;line-height:1.55;flex:1}
.comp .slug{font-family:var(--mono);font-size:12px;color:var(--text-2);letter-spacing:.2px}
/* Компоненты в разработке — бейдж «Скоро», без переобещаний */
.comp-soon{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:#e0b872;background:rgba(224,184,114,.10);border:1px solid rgba(224,184,114,.30);
  border-radius:100px;padding:3px 11px;
}
.comp.soon .comp-cat{margin-left:8px}
.comp.soon .slug{opacity:.75}

/* Сценарий-поток (пример для B2B) */
.scenario{
  margin-top:36px;border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-raise) 100%);
  padding:28px 30px;
}
.scenario .kicker{margin-bottom:16px}
.flow{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap}
.flow-step{
  flex:1;min-width:190px;background:var(--bg-raise);border:1px solid var(--border-soft);
  border-radius:16px;padding:16px 18px;
}
.flow-step b{display:block;font-size:15.5px;letter-spacing:-.2px;margin-bottom:4px}
.flow-step span{color:var(--text-2);font-size:13.5px;line-height:1.5}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--accent);flex:none}

/* ---------- Безопасность ---------- */
.security{position:relative}
.sec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.sec{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:26px;display:flex;gap:18px;align-items:flex-start;
}
.sec .feat-icon{flex:none;margin:0}
.sec h3{font-size:16.5px;font-weight:700;margin-bottom:6px}
.sec p{color:var(--text-2);font-size:14.3px}
.sec-note{
  margin-top:18px;border:1px dashed var(--border);border-radius:18px;padding:16px 22px;
  color:var(--text-2);font-size:13.8px;display:flex;gap:12px;align-items:flex-start;
}
.sec-note svg{flex:none;margin-top:2px;color:var(--accent)}

/* ---------- Тарифы ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.price-grid.two{grid-template-columns:repeat(2,1fr);max-width:760px;margin:0 auto}
.price-val{display:flex;align-items:baseline;gap:10px;margin:4px 0 10px}
.price-val b{font-size:38px;font-weight:800;letter-spacing:-1.5px;line-height:1.1;color:var(--text)}
.price-val span{color:var(--text-2);font-size:14px}
/* Карточка разовой услуги под сеткой тарифов */
.price-service{
  max-width:760px;margin:16px auto 0;
  background:linear-gradient(180deg,var(--surface) 0%,var(--bg-raise) 100%);
  border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:28px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;
}
.price-service .comp-cat{margin-left:0;display:inline-block;margin-bottom:10px}
.price-service-info{flex:1;min-width:250px}
.price-service-info h3{font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:6px}
.price-service-info p{color:var(--text-2);font-size:14.3px}
.price-service-buy{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.price-service-buy .price-val{margin:0}
@media (max-width:760px){.price-service-buy{align-items:flex-start}}
.price{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  padding:30px 28px;display:flex;flex-direction:column;position:relative;
}
.price.hot{border-color:rgba(168,199,250,.45);background:
  linear-gradient(180deg,rgba(168,199,250,.07) 0%,var(--surface) 45%)}
.price .tag{
  position:absolute;top:-11px;left:28px;background:var(--accent);color:#0e1116;
  font-size:11.5px;font-weight:700;letter-spacing:.6px;border-radius:100px;padding:3px 12px;
  text-transform:uppercase;
}
.price h3{font-size:20px;font-weight:800;margin-bottom:4px}
.price .sub{color:var(--text-2);font-size:13.8px;margin-bottom:20px}
.price ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-bottom:26px}
.price li{display:flex;gap:10px;font-size:14.3px;color:var(--text-2);align-items:flex-start}
.price li svg{flex:none;margin-top:3px;color:var(--success)}
.price .btn{margin-top:auto}
.price-note{text-align:center;color:var(--text-2);font-size:13.5px;margin-top:22px}

/* ---------- Финальный CTA ---------- */
.cta-final{padding:120px 0 130px;position:relative;overflow:hidden}
.cta-box{
  position:relative;border:1px solid var(--border);border-radius:32px;overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% -10%,rgba(168,199,250,.16),transparent 60%),
    radial-gradient(700px 400px at 90% 120%,rgba(109,213,140,.10),transparent 60%),
    var(--bg-raise);
  padding:74px 32px;text-align:center;
}
.cta-box h2{font-size:40px;margin-bottom:14px}
.cta-box p{color:var(--text-2);font-size:17px;max-width:36em;margin:0 auto 32px}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Футер ---------- */
.site-footer{border-top:1px solid var(--border-soft);padding:44px 0 52px;background:var(--bg-raise)}
.footer-grid{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.footer-brand{max-width:320px}
.footer-brand .logo{margin-bottom:10px}
.footer-brand p{color:var(--text-2);font-size:13.5px}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.fcol h4{font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-2);
  margin-bottom:14px;font-weight:700}
.fcol a{display:block;color:var(--text-2);font-size:14px;padding:4px 0}
.fcol a:hover{color:var(--text)}
.footer-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--border-soft);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:#6f7378;font-size:12.8px}

/* ============================================================
   Ревамп-2026: 4 дорожки «Что вы можете», бейдж раннего
   доступа, мок ИИ-студии, лид-ген fan-in «посадки → одна CRM».
   Палитра, радиусы и ховеры — как у остальных карточек.
   ============================================================ */

/* ---------- «Что вы можете» — 4 карточки-дорожки ---------- */
.paths{padding:96px 0 12px}
.paths-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.path{
  display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:24px;color:var(--text);
  transition:transform .25s ease, border-color .25s ease, background .25s;
}
.path:hover{transform:translateY(-4px);border-color:rgba(168,199,250,.45);
  background:var(--surface-2);color:var(--text)}
.path .feat-icon{margin-bottom:16px}
.path h3{font-size:16.5px;font-weight:700;letter-spacing:-.2px;margin-bottom:7px}
.path p{color:var(--text-2);font-size:13.8px;line-height:1.55;flex:1}
.path-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  color:var(--accent);font-size:13.5px;font-weight:600}
.path:hover .path-link{color:var(--accent-strong)}
.path-link svg{transition:transform .25s ease}
.path:hover .path-link svg{transform:translateX(3px)}
/* Ссылка-заглушка у обещания, которого ещё нет: не голубая и без стрелки —
   чтобы не выглядела кликабельной там, где кликать некуда. */
.path-link.muted{color:var(--text-2);font-weight:500}

/* ---------- Три обещания: сетка на 3 и бейдж состояния ---------- */
.paths-grid.three{grid-template-columns:repeat(3,1fr)}
.path-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.path-top .feat-icon{margin-bottom:0}
/* Состояние обещания: зелёное «Работает» = можно сегодня, песочное = впереди.
   Один и тот же бейдж используется и в карточках «Где живёт система». */
.path-state{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  border-radius:100px;padding:3px 11px;white-space:nowrap;
}
.path-state.now{color:var(--success);background:rgba(109,213,140,.10);border:1px solid rgba(109,213,140,.30)}
.path-state.soon{color:#e0b872;background:rgba(224,184,114,.10);border:1px solid rgba(224,184,114,.30)}
.who h3 .path-state{margin-left:8px;vertical-align:3px;display:inline-block}

/* ---------- Бейдж «ранний доступ» (в кикере секции) ---------- */
.badge-early{
  display:inline-block;margin-left:10px;vertical-align:1px;
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:#e0b872;background:rgba(224,184,114,.10);border:1px solid rgba(224,184,114,.30);
  border-radius:100px;padding:3px 11px;
}

/* ---------- ИИ-студия: статичный мок диалога в терминале ---------- */
.term.studio .term-body{word-break:normal;min-height:0}

/* ---------- Лид-ген: много посадок → одна CRM (fan-in) ---------- */
.fanin{display:grid;grid-template-columns:1fr 84px 1.05fr;gap:16px;align-items:stretch}
.fanin-src{display:flex;flex-direction:column;gap:12px}
.fanin-card{
  flex:1;background:var(--bg-raise);border:1px solid var(--border-soft);border-radius:16px;
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;
}
.fanin-card b{font-size:14.5px;letter-spacing:-.2px}
.utm{
  font-family:var(--mono);font-size:11.5px;color:var(--accent);white-space:nowrap;
  background:rgba(168,199,250,.07);border:1px solid rgba(168,199,250,.22);
  border-radius:100px;padding:2px 10px;
}
.fanin-mid{display:flex;align-items:center;justify-content:center;color:var(--accent)}
.fanin-web{width:100%;height:100%}
.fanin-down{display:none}
.fanin-crm{
  background:var(--bg-raise);border:1px solid rgba(168,199,250,.35);border-radius:20px;
  padding:22px 24px;display:flex;flex-direction:column;
  box-shadow:0 0 0 1px rgba(168,199,250,.05), 0 18px 50px rgba(0,0,0,.35);
}
.fanin-crm-top{display:flex;align-items:center;gap:14px}
.fanin-crm-top .feat-icon{margin:0;flex:none}
.fanin-crm-top b{display:block;font-size:16px;letter-spacing:-.2px}
.fanin-crm-top span{display:block;color:var(--text-2);font-size:13px}
.funnel{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:14px}
.funnel li{
  display:flex;justify-content:space-between;gap:12px;align-items:center;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:10px;
  padding:8px 14px;font-size:13.5px;color:var(--text-2);
}
.funnel li b{color:var(--text);font-weight:600}
.funnel li:nth-child(2){width:84%}
.funnel li:nth-child(3){width:68%}
.fanin-crm .utm{align-self:flex-start;margin-top:14px}
.lead-points{
  list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px 28px;margin-top:30px;
}
.lead-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text-2)}
.lead-points li b{color:var(--text);font-weight:600}
.lead-points svg{flex:none;margin-top:3px;color:var(--success)}

/* ============================================================
   Внутренние страницы разделов (deployer / resheniya /
   ii-studiya / lendingi). Главная осталась короткой, поэтому
   у каждого раздела своя шапка: то же градиентное свечение,
   что в hero, только компактнее.
   ============================================================ */
.page-hero{position:relative;padding:146px 0 0}
.page-hero .container{position:relative}
.page-hero h1{font-size:44px;max-width:16em;margin-bottom:16px}
.page-hero .lead{color:var(--text-2);font-size:18px;max-width:46em}
/* Раздел сразу за шапкой не должен начинаться с провала в 104px. */
.page-hero + section{padding-top:56px}
/* Активный пункт меню на своей странице — чтобы было видно, где ты. */
.site-nav a[aria-current="page"]{color:var(--text);background:var(--surface)}
/* Соседние разделы под финальным призывом: путь дальше виден и тогда,
   когда меню в шапке спрятано на узком экране. */
.page-more{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.page-more a{
  border:1px solid var(--border);border-radius:100px;padding:9px 18px;
  color:var(--text-2);font-size:14px;transition:.2s;
}
.page-more a:hover{color:var(--text);background:var(--surface);border-color:#3a3c40}
@media (max-width:1020px){
  .page-hero{padding-top:126px}
  .page-hero h1{font-size:36px}
}
@media (max-width:760px){
  .page-hero{padding-top:104px}
  .page-hero h1{font-size:30px;letter-spacing:-.6px}
  .page-hero .lead{font-size:16.5px}
  .page-hero + section{padding-top:44px}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   Адаптив
   ============================================================ */
@media (max-width: 1180px){
  /* 6 пунктов меню + кнопки: ужимаем, чтобы шапка не переполнялась */
  .site-nav a{padding:8px 10px;font-size:13.5px}
  .gh-link span{display:none}
}
@media (max-width: 1020px){
  /* 🔴 04.08: меню БОЛЬШЕ НЕ ПРЯЧЕТСЯ. Пока весь сайт был одной страницей,
     скрытая шапка стоила только удобства — разделы были якорями ниже по этой
     же странице. После разрезания на страницы это стало потерей навигации:
     с телефона попасть в «Решения» или «ИИ-студию» было НЕЧЕМ, кроме подвала.
     Бургер за пять часов до показа рискован, поэтому решение проще и надёжнее:
     меню уезжает под логотип отдельной строкой и прокручивается вбок. */
  .site-nav{
    order:3; width:100%; margin:8px 0 0; gap:2px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap; flex:0 0 auto}
  .header-in{flex-wrap:wrap}
  .gh-link span{display:none}
  .header-cta{margin-left:auto}
  h1{font-size:42px}
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
  .strip-in{grid-template-columns:repeat(2,1fr)}
  .show{grid-template-columns:1fr;gap:36px}
  .show.rev .show-media{order:0}
  .show.rev .show-copy{order:0}
  .show-media .browser,.show.rev .show-media .browser{transform:none}
  .who-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .sec-grid{grid-template-columns:1fr}
  .price-grid,.price-grid.two{grid-template-columns:1fr;max-width:480px;margin:0 auto}
  .comp-grid{grid-template-columns:repeat(2,1fr)}
  .paths-grid{grid-template-columns:repeat(2,1fr)}
  /* Три обещания в две колонки смотрятся сиротой — на планшете кладём в столбик. */
  .paths-grid.three{grid-template-columns:1fr;max-width:560px;margin:0 auto}
}
@media (max-width: 760px){
  h1{font-size:34px;letter-spacing:-.6px}
  .hero{padding-top:118px}
  .hero-sub{font-size:16.5px}
  h2{font-size:28px}
  section{padding:72px 0}
  .steps{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr}
  .strip-in{grid-template-columns:1fr}
  .comp-grid{grid-template-columns:1fr}
  .flow{flex-direction:column}
  .flow-arrow{transform:rotate(90deg);padding:2px 0}
  .term-body{min-height:210px;font-size:12.3px}
  .cta-box{padding:54px 20px}
  .cta-box h2{font-size:30px}
  .browser-bar .url{max-width:210px}
  .hero-shot .browser{transform:none}
  .paths-grid{grid-template-columns:1fr}
  .fanin{grid-template-columns:1fr}
  .fanin-mid{padding:4px 0}
  .fanin-web{display:none}
  .fanin-down{display:block}
  .lead-points{grid-template-columns:1fr}
}
@media (max-width: 480px){
  .header-in{padding:12px 16px;gap:12px}
  .logo .dim{display:none}
  .gh-link{display:none}
  /* 🔴 ВТОРОЕ правило, прятавшее меню. Первое (≤1020px) я снял, а это перекрывало
     фикс на телефоне — 375px попадает сюда. Нашлось только осмотром в браузере:
     в CSS правка выглядела сделанной. Оставляем прокручиваемую строку и здесь,
     иначе с телефона по разделам не пройти вовсе. */
  .site-nav{font-size:13px}
  .site-nav a{padding:7px 9px}
  /* 🔴 04.08, второй заход: прокрутки ВБОК на телефоне мало. Замер в браузере на
     375px (телефон владельца): строка меню шире окна на 86px, «Блог» обрезан краем,
     «Тарифы» не видно вовсе — а это страница с ценами. Прокручиваемая строка не
     показывает, что её можно тянуть, значит для человека пункта просто нет.
     Поэтому здесь строка ПЕРЕНОСИТСЯ в две, а не прокручивается: шесть пунктов
     видны сразу, лишних жестов не требуется. Прокрутку оставляем на 480–1020px,
     где пункты почти помещаются. */
  .site-nav{overflow-x:visible; flex-wrap:wrap; justify-content:center; row-gap:2px}
  /* 🔴 И сразу следствие переноса, которое видно только глазами: шапка здесь
     ЗАКРЕПЛЁНА (position:fixed), а отступ первого экрана был рассчитан на шапку
     в ОДНУ строку. Как только строк стало две, шапка выросла до ~152px и вторая
     строка меню легла ПОВЕРХ плашки под заголовком. Замерено в браузере на 375px.
     Поэтому отступ первого экрана растёт вместе с шапкой — на обеих раскладках
     (.hero — главная, .page-hero — страницы разделов и тарифов). */
  .hero{padding-top:172px}
  .page-hero{padding-top:160px}
  .header-cta{margin-left:auto}
  .header-cta .btn{padding:8px 16px;font-size:13.5px}
  .container{padding:0 18px}
}

/* ============================================================
   Правовые страницы (oferta.html, oplata-i-vozvrat.html,
   rekvizity.html) — «документный» layout в палитре лендинга
   ============================================================ */
/* Шапка без JS-скролла: всегда с фоном */
.site-header.solid{
  background:rgba(14,14,15,.92);backdrop-filter:blur(14px);
  border-bottom-color:var(--border-soft);
}
/* На док-страницах центрального меню нет: кнопка ЛК прижата вправо */
.header-in > .logo + .header-cta{margin-left:auto}
.doc-page{padding:132px 0 84px}
/* Двухколоночный макет: липкий сайдбар документов + контент */
.doc-layout{max-width:var(--container);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:248px minmax(0,720px);gap:56px;
  justify-content:center;align-items:start}
.doc-sidebar{position:sticky;top:96px}
.doc-side-title{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;padding:0 14px;margin-bottom:10px}
.doc-side-nav{position:relative;display:flex;flex-direction:column;gap:2px}
.doc-side-nav a{position:relative;display:block;color:var(--text-2);font-size:14px;
  line-height:1.4;padding:9px 14px;border-radius:12px;transition:.2s}
.doc-side-nav a:hover{color:var(--text);background:var(--surface)}
.doc-side-nav a[aria-current="page"]{color:var(--accent);font-weight:600;
  background:rgba(168,199,250,.08)}
.doc-side-nav a[aria-current="page"]::before{content:"";position:absolute;
  left:0;top:10px;bottom:10px;width:3px;border-radius:3px;background:var(--accent)}
.doc-wrap{max-width:720px;min-width:0}
.doc-wrap h1{font-size:32px;line-height:1.15;font-weight:800;letter-spacing:-.8px;margin:0 0 12px}
.doc-wrap .doc-meta{color:var(--text-2);font-size:13.5px;padding-bottom:20px;margin-bottom:32px;
  border-bottom:1px solid var(--border-soft)}
.doc-wrap h2{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:36px 0 12px}
.doc-wrap p{color:#c7c9cd;font-size:15.5px;margin-bottom:12px}
.doc-wrap p b,.doc-wrap li b{color:var(--text);font-weight:600}
.doc-wrap ol.clauses{list-style:none;margin:0 0 12px;padding:0}
.doc-wrap ol.clauses>li{position:relative;padding-left:56px;margin-bottom:10px;
  color:#c7c9cd;font-size:15.5px}
.doc-wrap ol.clauses>li>.n{position:absolute;left:0;top:3px;color:var(--text-2);
  font-size:13px;font-family:var(--mono)}
.doc-wrap ul.sub{margin:8px 0 6px;padding-left:20px}
.doc-wrap ul.sub li{margin-bottom:6px;color:#c7c9cd;font-size:15px}
.doc-wrap .tbl-wrap{overflow-x:auto;margin:14px 0 18px}
.doc-wrap table{border-collapse:collapse;width:100%;font-size:14.5px}
.doc-wrap th,.doc-wrap td{border:1px solid var(--border);padding:10px 14px;
  text-align:left;vertical-align:top;color:#c7c9cd}
.doc-wrap th{background:var(--surface);color:var(--text);font-weight:600}
.doc-wrap .requisites{background:var(--surface);border:1px solid var(--border-soft);
  border-radius:18px;padding:20px 24px;margin:14px 0 18px}
.doc-wrap .requisites p{margin-bottom:8px}
.doc-wrap .requisites p:last-child{margin-bottom:0}
.doc-note{border:1px dashed var(--border);border-radius:16px;padding:14px 18px;
  color:var(--text-2);font-size:13.8px;margin:18px 0}
/* Пошаговый алгоритм (возврат средств) */
.doc-steps{list-style:none;counter-reset:rstep;display:flex;flex-direction:column;
  gap:12px;margin:14px 0 18px;padding:0}
.doc-steps>li{position:relative;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:16px;padding:16px 18px 16px 58px;color:#c7c9cd;font-size:15px}
.doc-steps>li::before{counter-increment:rstep;content:counter(rstep);
  position:absolute;left:16px;top:15px;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(168,199,250,.09);border:1px solid rgba(168,199,250,.35);
  color:var(--accent);font-size:13px;font-weight:700}
.doc-footer .footer-bottom{margin-top:0;border-top:0;padding-top:0}
/* Узкие экраны: сайдбар превращается в горизонтальную ленту над контентом */
@media (max-width:920px){
  .doc-layout{display:block}
  .doc-sidebar{position:static;margin-bottom:30px}
  .doc-side-title{padding:0}
  .doc-side-nav{flex-direction:row;gap:8px;overflow-x:auto;
    margin:0 -24px;padding:2px 24px 10px;scrollbar-width:none}
  .doc-side-nav::-webkit-scrollbar{display:none}
  .doc-side-nav a{flex:0 0 auto;white-space:nowrap;font-size:13px;padding:7px 14px;
    border:1px solid var(--border);border-radius:100px}
  .doc-side-nav a[aria-current="page"]{border-color:rgba(168,199,250,.4);
    background:rgba(168,199,250,.07)}
  .doc-side-nav a[aria-current="page"]::before{display:none}
}
@media (max-width:760px){
  .doc-page{padding:104px 0 64px}
  .doc-wrap h1{font-size:26px}
  .doc-wrap ol.clauses>li{padding-left:44px}
}