/* Сайт Айспектра — общие стили всех страниц.
 *
 * Источник — макеты дизайнера (Figma, кадр 1440): главная, продуктовая
 * «ИИ Пресс-Офис», блог, статья. Экспорт Figma→HTML был на абсолютных
 * координатах и без картинок, поэтому вёрстка собрана заново: размеры,
 * кегли, цвета и радиусы — из макета, сетка и адаптив — свои.
 *
 * Изолированы от боевого shared/site.css: ни один класс не пересекается,
 * пока редизайн живёт рядом с текущим сайтом.
 */

/* ---------- Шрифты дизайнера: Geologica и Onest, свои копии ---------- */
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url("fonts/geologica-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url("fonts/geologica-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geologica"; font-weight: 100 900; font-display: swap;
  src: url("fonts/geologica-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Onest"; font-weight: 100 900; font-display: swap;
  src: url("fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ---------- Токены (значения из макета) ---------- */
:root {
  --bg: #010f23;
  --bg-2: #04122b;
  --bg-3: #07142e;
  --ink: #f5f9ff;
  --ink-2: #f2f6ff;
  --ink-body: rgba(228, 236, 255, .75);
  --soft: rgba(220, 230, 255, .8);
  --muted: rgba(220, 230, 255, .62);
  --faint: rgba(220, 230, 255, .45);
  --accent: #4d8dff;
  --accent-ink: #a9c6ff;
  --accent-tint: rgba(77, 141, 255, .14);
  --light: #f4f7ff;
  --light-ink: #04122b;
  --glass: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .024));
  --glass-line: rgba(255, 255, 255, .08);
  --chip: rgba(11, 38, 77, .4);

  --f-text: "Geologica", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-num: "Onest", "Geologica", system-ui, sans-serif;

  --container: min(1200px, calc(100% - 48px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  --fs-hero: clamp(38px, calc(4.45vw / var(--z, 1)), 64px);
  --fs-h2: clamp(30px, calc(3.06vw / var(--z, 1)), 44px);
  --fs-lead: clamp(18px, calc(1.67vw / var(--z, 1)), 24px);
  --fs-body: clamp(16px, calc(1.39vw / var(--z, 1)), 20px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 120px; }
body {
  margin: 0;
  min-height: calc(100vh / var(--z, 1));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-text);
  font-weight: 200;
  font-size: var(--fs-body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
html { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-weight: 400; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
::selection { background: rgba(77, 141, 255, .45); }

/* Атмосфера страницы — по замерам пикселей макета Figma (v4 full):
   основа почти чёрно-синяя (#081226 в центре, #060d1d справа), свет
   полосой вдоль левого края (до #16284b) с мягкой диагональю сверху.
   Без сетки и без картинок. */
body {
  background:
    radial-gradient(38% 60% at 0% 58%, rgba(36, 64, 116, .6), transparent 72%),
    linear-gradient(90deg, #0b1630 0%, #09142a 22%, #071226 48%, #070f22 76%, #060d1e 100%);
  background-color: #07101f;
}
.rd-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1400px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.rd-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 50% at 0% 40%, rgba(40, 70, 128, .3), transparent 75%),
    radial-gradient(40% 30% at 50% 0%, rgba(30, 52, 100, .12), transparent 75%);
}
.rd-bg::after {
  content: "";
  position: absolute;
  inset: -10% -10% 0 -10%;
  background: linear-gradient(118deg, transparent 14%, rgba(110, 150, 230, .04) 24%, rgba(110, 150, 230, .015) 32%, transparent 42%);
  filter: blur(30px);
}
.rd-glow {
  position: absolute;
  width: min(900px, 100%);
  height: 700px;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(77, 141, 255, .16), transparent);
  pointer-events: none;
  z-index: 0;
}

.rd-main { position: relative; z-index: 1; }
.container { width: var(--container); margin-inline: auto; }

/* ---------- Шапка-«пилюля» ---------- */
.rd-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: clamp(14px, calc(4.2vw / var(--z, 1)), 60px) 0 0;
  transition: padding .35s var(--ease);
}
.rd-header.is-scrolled { padding-top: 14px; }
.rd-nav {
  width: min(1120px, calc(100% - 48px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 89px;
  padding: 8px 8px 8px 28px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .015);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
          backdrop-filter: blur(22px) saturate(140%);
  transition: min-height .35s var(--ease), background-color .35s var(--ease);
}
.rd-header.is-scrolled .rd-nav { min-height: 72px; background: rgba(16, 30, 60, .82); }
.rd-logo { position: relative; text-decoration: none; }
/* Текстовый логотип из макета: синяя «А», остальное белым. */
.rd-wordmark { font-family: var(--f-text); font-weight: 400; font-size: 32px; letter-spacing: -.02em; line-height: 1; color: var(--ink); white-space: nowrap; }
.rd-wordmark b { font-weight: 400; color: #5b9bff; }
.rd-menu { display: flex; align-items: center; gap: clamp(8px, calc(1.9vw / var(--z, 1)), 28px); list-style: none; margin: 0; padding: 0; }
.rd-menu > li { position: relative; }
.rd-menu a, .rd-menu button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 0;
  background: none;
  font-size: 20px;
  font-weight: 200;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  border-radius: 12px;
  transition: color .2s var(--ease);
}
.rd-menu a:hover, .rd-menu button:hover { color: var(--accent-ink); }
.rd-caret { width: 11px; height: 6px; opacity: .85; transition: rotate .25s var(--ease); }
.rd-has-drop.is-open .rd-caret { rotate: 180deg; }
.rd-arrow { width: 11px; height: 11px; margin-left: -4px; }
/* Выпадающий список решений: плотная непрозрачная плашка без стрелок.
   Полупрозрачный фон с backdrop-filter внутри шапки (у неё свой
   backdrop-filter) не размывал страницу, и заголовок первого экрана
   просвечивал сквозь пункты. */
.rd-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: -12px;
  min-width: 300px;
  padding: 8px;
  border-radius: 20px;
  background: #0c1a38;
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  translate: 0 -6px;
  transition: opacity .2s var(--ease), translate .2s var(--ease), visibility .2s;
}
.rd-has-drop.is-open .rd-drop { opacity: 1; visibility: visible; translate: 0 0; }
.rd-drop a { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 10px 16px; font-size: 17px; white-space: nowrap; color: rgba(220, 230, 255, .82); border-radius: 14px; transition: background-color .2s var(--ease), color .2s var(--ease); }
.rd-drop a:hover, .rd-drop a:focus-visible { background: rgba(77, 141, 255, .16); color: var(--ink); }
.rd-burger { display: none; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 60px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--f-text);
  font-size: var(--fs-lead);
  font-weight: 200;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease), box-shadow .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-light { background: var(--light); color: var(--light-ink); font-weight: 300; }
.btn-light:hover { background: #fff; box-shadow: 0 12px 36px rgba(77, 141, 255, .28); }
.btn-glass { background: rgba(255, 255, 255, .07); color: var(--ink-2); }
.btn-glass:hover { background: rgba(77, 141, 255, .18); }
.btn-sm { min-height: 57px; font-size: 20px; padding: 0 24px; }
.btn svg { width: .8em; height: .8em; }

/* ---------- Общие элементы секций ---------- */
.section { position: relative; padding-block: clamp(64px, calc(7vw / var(--z, 1)), 112px); }
.section-head { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 44px; }
.section-head h2 { font-size: var(--fs-h2); color: var(--ink-2); }
.section-head p { color: var(--muted); max-width: 30em; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 24px;
  background: var(--chip);
  border: 1px solid var(--glass-line);
  font-size: 20px;
  color: var(--soft);
}
.chip-accent {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--accent-tint);
  border-color: transparent;
  font-size: 16px;
  color: var(--accent-ink);
}
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.accent-dot {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(77, 141, 255, .9);
}

/* ---------- Заголовки секций главной ----------
   Один размер для всех h2 главной: решения, процесс, FAQ, команда. */
.sec-title, .tl-head h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-2); text-wrap: balance; }

/* ---------- Первый экран ----------
   Как в макете Figma: заголовок 64, подзаголовок 24, две кнопки. */
.hero { text-align: center; padding: clamp(48px, calc(5vw / var(--z, 1)), 80px) 0 0; }
.hero-title { max-width: 13em; margin-inline: auto; font-size: var(--fs-hero); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; }
.hero-title span { display: block; }
.hero .lead { margin: 28px auto 0; max-width: 36em; font-size: var(--fs-lead); font-weight: 300; color: rgba(244, 247, 255, .86); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; margin-top: 48px; }
.hero-actions .btn { min-width: 166px; }
.link-more { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 300; color: var(--ink-2); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .28em; transition: text-decoration-color .2s var(--ease), gap .25s var(--ease-out); }
.link-more:hover { text-decoration-color: currentColor; gap: 14px; }
.link-more svg { width: 16px; height: 16px; flex: none; }

/* ---------- Цифры ---------- */
.stats { display: flex; justify-content: space-between; gap: 32px; width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding-block: clamp(64px, calc(7vw / var(--z, 1)), 104px) 0; }
.stat b { display: block; font-weight: 400; font-size: var(--fs-hero); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.stat span { display: block; margin-top: 12px; max-width: 15em; font-weight: 300; color: rgba(244, 247, 255, .86); }
.stats-note { width: var(--container); margin: 0 auto; text-align: center; font-size: 16px; color: rgba(220, 230, 255, .5); }

/* ---------- Наши решения ----------
   По референсу Crusoe: ровная тёмная полоса во всю ширину с линиями
   сверху и снизу, вертикальная линия между колонками, строки продуктов
   разделены линиями. Грани иллюстраций залиты цветом полосы — так линии
   за ними перекрываются и получается объём. */
.sol { --sol-bg: #060f22; --sol-line: rgba(169, 198, 255, .14); --sol-ink: #7fb0ff; margin-top: clamp(64px, calc(7vw / var(--z, 1)), 104px); background: var(--sol-bg); border-block: 1px solid var(--sol-line); scroll-margin-top: 90px; }
.sol-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sol-main { display: flex; flex-direction: column; gap: 24px; padding: 64px 48px 64px 0; border-right: 1px solid var(--sol-line); }
.sol-stage { position: sticky; top: 120px; width: min(100%, 540px); aspect-ratio: 360 / 380; margin: 0 auto; }
.sol-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; translate: 0 14px; transition: opacity .5s var(--ease-out), translate .7s var(--ease-out); }
.sol-art.is-active { opacity: 1; translate: 0 0; }
.sol-art :is(polygon, path, ellipse, polyline, line, circle, rect) { fill: var(--sol-bg); stroke: var(--sol-ink); stroke-width: .9; stroke-linejoin: round; stroke-linecap: round; }
.sol-art :is(polyline, line) { fill: none; }
.sol-art .a-wave ellipse { fill: none; }
.sol-art .faint { stroke-opacity: .45; }
.sol-art .hatch line { stroke-opacity: .35; stroke-width: .6; }
.sol-art .fill-accent { fill: var(--accent); stroke: var(--accent); }
.sol-art .dot { fill: var(--sol-ink); }
.sol-art .spark { fill: var(--accent-ink); stroke: none; }
.sol-art .img-block { fill: rgba(77, 141, 255, .22); }
.sol-art .txt { fill: none; stroke-width: 1.1; }
.sol-art .play { fill: var(--accent-ink); stroke: none; }
.sol-art .faint ellipse { fill: none; }
.sol-art .logo-line { fill: none; stroke: var(--accent-ink); stroke-width: 1.6; }
.sol-art .iso-text { font-family: var(--f-text); font-weight: 500; fill: var(--accent-ink); stroke: none; }
.sol-art .a-pulse { transform-box: fill-box; transform-origin: center; animation: sol-pulse 1.2s ease-in-out infinite alternate; animation-delay: var(--pd, 0s); }
.sol-art:not(.is-active) * { animation-play-state: paused !important; }

/* движение: парение, бегущий ток по дорожкам, волны, набор текста */
.sol-art .a-float { animation: sol-float 5s ease-in-out infinite; animation-delay: var(--fd, 0s); }
.sol-art .a-dash { stroke-dasharray: 3 5; animation: sol-dash 2.4s linear infinite; }
.sol-art .a-wave { transform-box: fill-box; transform-origin: center; animation: sol-wave 3.6s ease-out infinite; animation-delay: var(--wd, 0s); }
.sol-art .a-blink { transform-box: fill-box; transform-origin: center; animation: sol-blink 2.8s ease-in-out infinite; }
.sol-art .a-type { stroke-dasharray: 60; animation: sol-type 5s ease-in-out infinite; }
.sol-art .a-type.t1 { animation-delay: .15s; } .sol-art .a-type.t2 { animation-delay: .3s; } .sol-art .a-type.t3 { animation-delay: .45s; } .sol-art .a-type.t4 { animation-delay: .6s; } .sol-art .a-type.t5 { animation-delay: .75s; }
.sol-art .a-typing { animation: sol-typing 1.2s ease-in-out infinite; animation-delay: var(--td, 0s); }
.sol-art .a-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: sol-bar 1.4s ease-in-out infinite alternate; animation-delay: var(--bd, 0s); }
@keyframes sol-float { 50% { transform: translateY(-6px); } }
@keyframes sol-dash { to { stroke-dashoffset: -16; } }
@keyframes sol-wave { 0% { transform: scale(.4); opacity: 0; } 20% { opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes sol-blink { 50% { transform: scale(.65) rotate(45deg); opacity: .5; } }
@keyframes sol-type { 0% { stroke-dashoffset: 60; } 35%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -60; } }
@keyframes sol-typing { 50% { opacity: .25; } }
@keyframes sol-bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes sol-pulse { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.sol-list { list-style: none; margin: 0; padding: 0; }
.sol-item { position: relative; }
/* линии между строками доходят до правого края экрана, как в референсе */
.sol-item + .sol-item::before { content: ""; position: absolute; top: 0; left: 0; right: calc(-1 * max(24px, (calc(100vw / var(--z, 1)) - 1200px) / 2)); height: 1px; background: var(--sol-line); }
.sol-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 32px; align-items: center; padding: 36px 0 36px 48px; color: var(--ink-2); text-decoration: none; }
.sol-name { font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: rgba(220, 230, 255, .5); transition: color .3s var(--ease); }
.sol-desc { grid-column: 1; max-width: 34em; font-size: var(--fs-body); font-weight: 300; line-height: 1.45; color: rgba(220, 230, 255, .42); transition: color .3s var(--ease); }
.sol-arrow { grid-column: 2; grid-row: 1 / span 2; width: 30px; height: 30px; color: rgba(220, 230, 255, .4); transition: color .3s var(--ease), rotate .4s var(--ease-out), translate .4s var(--ease-out); }
.sol-item.is-active .sol-name { color: var(--ink-2); }
.sol-item.is-active .sol-desc { color: var(--accent-ink); }
.sol-item.is-active .sol-arrow { color: var(--accent-ink); rotate: -45deg; }
.sol-link:hover .sol-arrow { translate: 4px -4px; }
.sol-link:focus-visible { outline-offset: -2px; }

/* ---------- Процесс: полоса времени ----------
   Одна фигура на всю секцию — толстая плоская полоса, которая наливается
   светом по прокрутке. Ни карточек, ни номеров, ни точек-узлов: порядок
   задаёт список, акцент — шаг, до которого дошла полоса. */
.tl-section { padding-block: clamp(96px, calc(11vw / var(--z, 1)), 160px); }
.tl-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, calc(6vw / var(--z, 1)), 112px); align-items: start; }
.tl-head { position: sticky; top: 170px; display: grid; justify-items: start; gap: 20px; }
.tl-head h2 { max-width: 9em; }
.tl-head p { max-width: 22em; font-size: var(--fs-body); font-weight: 300; line-height: 1.5; color: rgba(228, 236, 255, .86); }
.tl-head .btn { margin-top: 12px; }
.tl { --fill: 1; position: relative; list-style: none; margin: 0; padding: 0 0 0 clamp(40px, calc(4.4vw / var(--z, 1)), 72px); }
.tl::before, .tl::after { content: ""; position: absolute; left: 0; top: .4em; width: 4px; border-radius: 4px; }
.tl::before { bottom: 0; background: rgba(255, 255, 255, .07); }
.tl::after { height: calc(var(--fill) * (100% - .4em)); background: var(--accent); }
.tl-step + .tl-step { margin-top: clamp(56px, calc(7vw / var(--z, 1)), 104px); }
.tl-step h3 { font-size: clamp(24px, calc(2.22vw / var(--z, 1)), 32px); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; color: var(--ink-2); text-wrap: balance; }
.tl-step p { margin-top: 16px; max-width: 30em; font-size: var(--fs-body); font-weight: 300; line-height: 1.5; color: rgba(228, 236, 255, .86); text-wrap: pretty; }
.tl-step .tl-out { margin-top: 8px; color: var(--accent-ink); }
/* Состояния включает скрипт (класс is-live): без него всё видно сразу. */
.tl.is-live .tl-step { transition: opacity .7s var(--ease-out), translate .7s var(--ease-out); }
.tl.is-live .tl-step:not(.is-on) { opacity: .4; translate: 0 10px; }

/* ---------- FAQ ----------
   Одна колонка крупных вопросов: без рамок, номеров и кружков.
   Строку выделяет ступень тона при наведении и у открытой. */
.faq-section .sec-title { margin-bottom: clamp(24px, calc(3vw / var(--z, 1)), 40px); }
.faq-list { display: grid; gap: 4px; }
.faq-item { border-radius: 20px; transition: background-color .3s var(--ease); }
.faq-item:hover, .faq-item.is-open { background: rgba(255, 255, 255, .035); }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 26px 28px; border: 0; background: none; text-align: left; font-size: 20px; font-weight: 300; line-height: 1.3; color: var(--ink-2); cursor: pointer; }
.faq-sign { flex: none; position: relative; width: 18px; height: 18px; color: rgba(220, 230, 255, .7); transition: rotate .35s var(--ease-out), color .25s var(--ease); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; }
.faq-sign::after { rotate: 90deg; }
.faq-item.is-open .faq-sign { rotate: 45deg; color: var(--accent-ink); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { max-width: 62ch; padding: 0 28px; font-size: 18px; font-weight: 300; line-height: 1.55; color: rgba(228, 236, 255, .86); }
.faq-a p + p { margin-top: 12px; }
.faq-a p:last-child { padding-bottom: 28px; }

/* ---------- Команда ---------- */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 24px; }
.person { position: relative; aspect-ratio: 420 / 480; border-radius: 32px; overflow: hidden; background: linear-gradient(180deg, #3a4256, #12192b); }
.person:nth-child(2) { background: linear-gradient(180deg, #3a4a66, #12192b); }
.person img { position: absolute; left: 50%; bottom: 0; width: 118%; max-width: none; translate: -50% 5%; }
/* снимок с фоном, а не вырез: заполняет карточку целиком */
.person img.is-photo { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; translate: none; }
.person figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 16px 22px;
  border-radius: 22px;
  background: rgba(6, 16, 40, .55);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  font-family: var(--f-num);
}
.person b { display: block; font-weight: 500; font-size: 20px; color: var(--ink-2); }
.person span { display: block; margin-top: 2px; font-size: 15px; font-weight: 400; color: rgba(220, 230, 255, .7); }

/* Под командой: превью документов. Лист выходит из нижнего края рамки,
   при наведении чуть приподнимается. */
.proof { margin-top: clamp(64px, calc(7vw / var(--z, 1)), 112px); }
.proof-title { margin-bottom: clamp(24px, calc(2.5vw / var(--z, 1)), 36px); font-size: clamp(24px, calc(2.22vw / var(--z, 1)), 32px); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; color: var(--ink-2); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.doc { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.doc-sheet { display: block; aspect-ratio: 4 / 3; margin-bottom: 12px; padding: 28px 28px 0; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, #1a2d57, #0c1934); }
.doc-sheet img { display: block; width: 100%; height: auto; border-radius: 6px 6px 0 0; transition: translate .45s var(--ease-out); }
.doc:hover .doc-sheet img, .doc:focus-visible .doc-sheet img { translate: 0 -8px; }
.doc b, .pubs > b { font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--ink-2); }
.doc:hover b { color: var(--accent-ink); }
.pubs { display: grid; justify-items: start; gap: 16px; }
.pubs ul { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.pubs li { display: grid; gap: 4px; }
.pubs li a { font-size: 17px; font-weight: 300; line-height: 1.35; color: var(--ink-2); text-decoration: underline; text-decoration-color: rgba(220, 230, 255, .25); text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.pubs li a:hover, .pubs li a:focus-visible { text-decoration-color: currentColor; }
.pubs li span { font-size: 14px; color: var(--muted); }
.pubs-all { font-size: 15px; color: var(--accent-ink); text-decoration: underline; text-decoration-color: rgba(169, 198, 255, .35); text-underline-offset: 3px; }
.pubs-all:hover { text-decoration-color: currentColor; }

/* ---------- Безопасность ---------- */
.safe-section { padding-block: clamp(48px, calc(5vw / var(--z, 1)), 80px); }
.safe-section .sec-title { max-width: 14em; margin-bottom: clamp(28px, calc(3vw / var(--z, 1)), 48px); }
.safe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, calc(3vw / var(--z, 1)), 44px) clamp(24px, calc(3vw / var(--z, 1)), 48px); margin: 0; padding: 0; list-style: none; }
.safe-grid h3 { font-size: 20px; font-weight: 400; line-height: 1.25; color: var(--ink-2); }
.safe-grid p { max-width: 24em; margin-top: 8px; font-size: 16px; font-weight: 300; line-height: 1.5; color: rgba(228, 236, 255, .75); }
@media (max-width: 860px) {
  .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pubs { grid-column: 1 / -1; }
  .safe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .proof-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .safe-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Финальный призыв ---------- */
.cta { padding: 80px 24px; border-radius: 48px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--glass-line); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: auto 10% -60% 10%; height: 120%; background: radial-gradient(closest-side, rgba(77, 141, 255, .22), transparent); pointer-events: none; }
.cta > * { position: relative; }
.cta h2 { font-size: var(--fs-hero); color: var(--ink-2); }
.cta p { margin: 24px auto 0; max-width: 31em; font-size: var(--fs-lead); color: var(--soft); }
.cta .btn { margin-top: 24px; }

/* ---------- Финал главной ----------
   Светлое поле выходит из левого края экрана и обрывается справа
   полукругом. Кнопка — тёмный круг, концентричный дуге: правый отступ
   поля равен (высота − диаметр) / 2, поэтому центр круга совпадает с
   центром дуги. Высота поля фиксирована (--h), чтобы дуга не «плыла». */
.cta-field { --h: clamp(400px, calc(32vw / var(--z, 1)), 460px); --orb: clamp(168px, calc(14vw / var(--z, 1)), 208px); margin-top: clamp(64px, calc(8vw / var(--z, 1)), 120px); }
.cta-shape {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  height: var(--h);
  margin-right: max(16px, calc((100% - 1200px) / 2 - 48px));
  padding: 0 calc((var(--h) - var(--orb)) / 2) 0 max(24px, calc((100% - 1200px) / 2));
  border-radius: 0 999px 999px 0;
  background: var(--light);
  color: var(--light-ink);
}
.cta-title { max-width: 12em; font-size: var(--fs-hero); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; color: var(--light-ink); }
.cta-copy p { max-width: 30em; margin-top: 20px; font-size: var(--fs-lead); font-weight: 300; line-height: 1.45; color: rgba(4, 18, 43, .84); }
.cta-links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 28px 0 0; padding: 0; list-style: none; }
.cta-links a { font-size: 18px; font-weight: 400; color: var(--light-ink); text-decoration: underline; text-decoration-color: rgba(4, 18, 43, .25); text-decoration-thickness: 1px; text-underline-offset: .3em; transition: text-decoration-color .2s var(--ease); }
.cta-links a:hover { text-decoration-color: currentColor; }
.cta-orb {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: var(--orb);
  height: var(--orb);
  border-radius: 50%;
  background: var(--light-ink);
  color: var(--light);
  font-size: 20px;
  font-weight: 300;
  text-decoration: none;
  transition: background-color .3s var(--ease), scale .35s var(--ease-out);
}
.cta-orb svg { width: 20px; height: 20px; transition: translate .35s var(--ease-out); }
.cta-orb:hover { background: #0b2552; scale: 1.04; }
.cta-orb:hover svg { translate: 4px 0; }
.cta-orb:active { scale: .97; }
.cta-orb:focus-visible { outline: 2px solid var(--light-ink); outline-offset: 6px; }

/* ---------- Футер ----------
   Содержание и сетка — из макета дизайнера (контакты слева, колонки ссылок,
   «Связаться», линия сверху); подача — по референсу 1001: две колонки
   вместо трёх, документы мелкой строкой внизу, без значков в кружках и
   заголовков капслоком. */
.rd-footer { position: relative; z-index: 1; padding: 0 0 40px; margin-top: clamp(64px, calc(7vw / var(--z, 1)), 112px); }
.rd-footer .container { position: relative; padding-top: clamp(56px, calc(6vw / var(--z, 1)), 80px); }
.rd-footer .container::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(120, 170, 255, 0), rgba(120, 170, 255, .6)); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
.foot-brand { display: grid; justify-items: start; align-content: start; gap: 20px; }
.foot-brand .rd-logo { display: inline-block; }
.foot-contacts { display: grid; gap: 4px; font-size: 20px; }
.foot-contacts a { color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.foot-channels { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 17px; }
.foot-channels a { color: rgba(220, 230, 255, .72); text-decoration: none; transition: color .2s var(--ease); }
.foot-contacts a:hover, .foot-channels a:hover, .foot-col a:hover { color: var(--accent-ink); }
.foot-brand .btn { margin-top: 8px; }
.foot-col h2 { margin: 0 0 16px; font-size: 15px; font-weight: 300; letter-spacing: 0; line-height: 1.3; color: rgba(220, 230, 255, .58); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { font-size: 17px; line-height: 1.4; color: rgba(220, 230, 255, .72); text-decoration: none; transition: color .2s var(--ease); }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; margin-top: clamp(56px, calc(6vw / var(--z, 1)), 96px); }
.foot-bottom small { font-size: 15px; color: rgba(220, 230, 255, .58); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot-legal a { font-size: 15px; color: rgba(220, 230, 255, .58); text-decoration: none; transition: color .2s var(--ease); }
.foot-legal a:hover { color: var(--soft); }
.rd-footer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Окно связи: форма заявки ---------- */
.rd-dialog {
  width: min(600px, calc(100% - 32px));
  max-height: calc(calc(100dvh / var(--z, 1)) - 40px);
  /* Прокрутка — только запасной путь для совсем низких экранов, и без
     видимой полосы: на обычных экранах окно помещается целиком. */
  overflow-y: auto;
  scrollbar-width: none;
  padding: 40px 44px 32px;
  border: 1px solid var(--glass-line);
  border-radius: 32px;
  background: linear-gradient(180deg, #0d1d40, #07142e);
  color: var(--ink);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .6);
  overscroll-behavior: contain;
}
.rd-dialog::-webkit-scrollbar { display: none; }
.rd-dialog:focus { outline: none; }
.rd-dialog::backdrop { background: rgba(1, 8, 20, .7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rd-dialog[open] { animation: rd-pop .35s var(--ease-out); }
@keyframes rd-pop { from { opacity: 0; scale: .96; } }
.rd-dialog h2 { font-size: 30px; padding-right: 48px; }
.rd-dialog p { margin-top: 10px; font-size: 16px; font-weight: 300; color: var(--muted); }
.rd-dialog-close { position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); cursor: pointer; display: grid; place-items: center; }
.rd-dialog-close:hover { background: rgba(255, 255, 255, .16); }

.rd-form { display: grid; gap: 20px; margin-top: 28px; }
/* Имя и телефон в одну строку: окно ниже на целое поле. */
/* align-items: start — иначе поле с короткой ошибкой растягивается до высоты
   соседнего, и поля ввода расходятся по высоте. */
.rd-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.rd-field { display: grid; gap: 8px; align-content: start; min-width: 0; margin: 0; padding: 0; border: 0; }
.rd-field label, .rd-field legend { padding: 0; font-size: 14px; font-weight: 300; color: var(--soft); }
.rd-field i { font-style: normal; color: var(--faint); margin-left: 4px; }
.rd-field input, .rd-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--glass-line);
  background: rgba(255, 255, 255, .05);
  color: var(--ink);
  font: 300 17px/1.35 var(--f-text);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.rd-field textarea { min-height: 80px; resize: vertical; }
.rd-field input::placeholder, .rd-field textarea::placeholder { color: var(--faint); }
.rd-field input:hover, .rd-field textarea:hover { border-color: rgba(169, 198, 255, .25); }
.rd-field input:focus-visible, .rd-field textarea:focus-visible { outline: none; border-color: var(--accent); background: rgba(77, 141, 255, .08); }
.rd-field [aria-invalid="true"] { border-color: #ff8a8a; }
.rd-err { min-height: 0; font-size: 13px; color: #ffb0b0; }
.rd-err:empty { display: none; }

/* legend не участвует в gap сетки поля — отступ задаётся явно. */
.rd-channels legend { margin-bottom: 12px; }
.rd-channels > div { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-pill { position: relative; cursor: pointer; }
.rd-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.rd-pill span { display: block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--glass-line); background: rgba(255, 255, 255, .05); font-size: 15px; font-weight: 300; color: var(--soft); transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
.rd-pill:hover span { border-color: rgba(169, 198, 255, .35); color: var(--ink); }
.rd-pill input:checked + span { background: var(--light); border-color: transparent; color: var(--light-ink); font-weight: 400; }
.rd-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.rd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rd-consent { display: grid; grid-template-columns: 20px 1fr; gap: 4px 12px; align-items: start; }
.rd-consent + .rd-consent { margin-top: -6px; }
/* своя отметка вместо системной: в тёмной теме системная серая */
.rd-consent input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 20px; height: 20px; margin: 0; border: 1.5px solid rgba(220, 230, 255, .45); border-radius: 6px; background: transparent no-repeat center / 12px; cursor: pointer; transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.rd-consent input:hover { border-color: rgba(220, 230, 255, .75); }
.rd-consent input:checked { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.5 3.8' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.rd-consent input:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.rd-consent input[aria-invalid="true"] { border-color: #ffb0b0; }
.rd-consent label { padding-top: 1px; font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--muted); cursor: pointer; }
.rd-consent a { color: var(--accent-ink); }
.rd-consent .rd-err { grid-column: 2; }

.rd-form-error { margin: 0; padding: 12px 16px; border-radius: 14px; background: rgba(255, 120, 120, .1); color: #ffc4c4 !important; font-size: 14px !important; }
.rd-form-error[hidden] { display: none; }
.rd-submit { width: 100%; min-height: 56px; font-size: 17px; }
.rd-submit:disabled { opacity: .6; cursor: progress; }

.rd-done { padding-top: 8px; text-align: center; outline: none; }
.rd-done[hidden], .rd-form-view[hidden] { display: none; }
.rd-done-mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; background: rgba(77, 141, 255, .16); color: var(--accent-ink); }
.rd-done-mark svg { width: 30px; height: 30px; }
.rd-done h2 { padding-right: 0; }
.rd-done p { margin: 12px auto 24px; max-width: 30em; }
.rd-done b { font-weight: 400; color: var(--ink); white-space: nowrap; }

.rd-direct { margin-top: 20px !important; padding-top: 16px; border-top: 1px solid var(--glass-line); font-size: 14px !important; text-align: center; }
/* Две строки: подпись сверху, ссылки снизу — разделены отступом, без точек. */
.rd-direct > span { display: block; }
.rd-direct-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 6px; }
.rd-direct a { color: var(--soft); text-underline-offset: 3px; white-space: nowrap; }
.rd-direct a:hover { color: var(--ink); }

@media (max-width: 560px) {
  .rd-dialog { padding: 28px 20px 24px; border-radius: 26px; }
  .rd-dialog-close { top: 14px; right: 14px; }
  .rd-row { grid-template-columns: 1fr; gap: 16px; }
  .rd-form { gap: 16px; margin-top: 20px; }
  .rd-field input { min-height: 48px; padding: 12px 16px; }
  .rd-field textarea { min-height: 64px; padding: 12px 16px; }
  /* Четыре способа связи в одну строку даже на 360 px. */
  .rd-channels > div { gap: 6px; flex-wrap: nowrap; }
  .rd-pill { flex: 1 1 auto; }
  .rd-pill span { padding: 9px 10px; font-size: 14px; text-align: center; }
  .rd-direct-links { gap: 6px 12px; }
  .rd-dialog h2 { font-size: 26px; }
}
@media (max-width: 380px) {
  .rd-direct { font-size: 13px !important; }
  .rd-pill span { padding: 9px 6px; font-size: 13px; }
  .rd-direct-links { gap: 6px 10px; }
}

/* ---------- Появление при прокрутке ---------- */
.reveal { opacity: 0; translate: 0 24px; transition: opacity .8s var(--ease-out), translate .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
.reveal.is-in { opacity: 1; translate: 0 0; }
.no-js .reveal { opacity: 1; translate: 0 0; }

/* ======================= Продуктовая страница ======================= */
.p-hero { display: grid; grid-template-columns: minmax(0, 599fr) minmax(0, 544fr); gap: 57px; align-items: start; padding: clamp(48px, calc(5vw / var(--z, 1)), 72px) 0 40px; }
.p-hero h1 { margin-top: 22px; font-size: var(--fs-hero); max-width: 6.4em; }
.p-hero .lead { margin-top: 22px; font-size: var(--fs-lead); color: rgba(220, 230, 255, .7); max-width: 25em; }
.p-hero .hero-actions { justify-content: flex-start; margin-top: 40px; }
.p-hero .btn { min-height: 57px; font-size: 20px; }
.features { display: grid; gap: 12px; }
.feature { display: flex; gap: 16px; align-items: flex-start; padding: 27px 28px; border-radius: 28px; color: rgba(228, 236, 255, .85); }
.feature .accent-dot { margin-top: 9px; }
.effect-head h2 { font-size: var(--fs-hero); }
.prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(1320px, calc(calc(100vw / var(--z, 1)) - 48px)); margin-left: 50%; transform: translateX(-50%); }
/* Шире основного контейнера, как в макете. Центрируем через transform,
   а не translate: translate занят анимацией появления .reveal. */
.cta h2 b { font-weight: 500; }
.price { padding: 36px; border-radius: 36px; }
.price h3 { font-size: var(--fs-lead); font-weight: 200; color: var(--ink-2); }
.price b { display: block; margin-top: 20px; font-weight: 400; font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1.2; color: var(--ink-2); }
.price p { margin-top: 20px; color: rgba(220, 230, 255, .65); }
.price.is-featured { background: linear-gradient(180deg, rgba(77, 141, 255, .35), rgba(255, 255, 255, .04)); border-color: rgba(169, 198, 255, .25); box-shadow: 0 0 80px rgba(0, 0, 1, .25), inset 0 1px 0 rgba(255, 255, 255, .12); }

/* =========================== Блог =========================== */
/* По референсу Crusoe News: заголовок слева, рубрики справа с подчёркиванием,
   карточки 16:9 вплотную (4px), под ними дата моноширинным и заголовок.
   На главной — лента, уходящая за правый край, со стрелками; на странице — сетка. */
.bl-head, .bl-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 40px; }
.bl-page-head { padding-top: clamp(40px, calc(5vw / var(--z, 1)), 60px); margin-bottom: 48px; }
.bl-page-head h1 { font-size: var(--fs-hero); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; }
.bl-page-head p { margin-top: 16px; color: var(--muted); }
.bl-filters { display: flex; margin-right: -12px; scrollbar-width: none; }
.bl-filters::-webkit-scrollbar { display: none; }
.bl-filter { flex: none; padding: 0 12px; border: 0; background: none; color: var(--muted); font: 300 16px/1.2 var(--f-text); cursor: pointer; transition: color .2s var(--ease); }
.bl-filter span { display: block; padding: 12px 0; border-bottom: 2px solid transparent; white-space: nowrap; transition: border-color .2s var(--ease); }
.bl-filter:hover { color: var(--ink); }
.bl-filter[aria-pressed="true"] { color: var(--ink); }
.bl-filter[aria-pressed="true"] span { border-bottom-color: var(--ink); }

/* Лента: отступ слева равен полю контейнера, справа карточки уходят за край экрана.
   Проценты в padding считаются от ширины секции, flex-basis — от контентной
   ширины ленты, то есть ровно от ширины контейнера: три карточки встают в его
   границы, четвёртая выглядывает справа. */
.bl-track { display: flex; gap: 4px; margin: 0; padding: 0 calc((100% - var(--container)) / 2); list-style: none; overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scroll-snap-type: x mandatory; scroll-padding-inline: calc((100% - var(--container)) / 2); scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
/* overflow-y: hidden обязателен: при overflow-x: auto браузер делает ленту
   прокручиваемой и по вертикали, а содержимое выше её на 1 px. Колесо мыши
   «прилипало» к ленте, и страница переставала листаться, пока курсор над
   блогом. */
.bl-track::-webkit-scrollbar { display: none; }
.bl-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.bl-track .bl-card { flex: 0 0 calc((100% - 8px) / 3); scroll-snap-align: start; }
.bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 4px; margin: 0; padding: 0; list-style: none; }
.bl-card[hidden], .bl-empty[hidden] { display: none; }
.bl-empty { margin-top: 24px; color: var(--muted); }

.bl-link { display: flex; flex-direction: column; gap: 24px; height: 100%; color: inherit; text-decoration: none; }
.bl-cover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; container-type: inline-size; }
.bl-img {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(62% 80% at var(--gx, 70%) var(--gy, 20%), var(--g, rgba(77, 141, 255, .7)), transparent 72%), linear-gradient(180deg, var(--c1, #0c2a66), #07142e);
  transition: transform .5s var(--ease);
}
/* Тонкая штриховка вместо фотографии: фактура без постороннего сюжета. */
.bl-img::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(169, 198, 255, .09) 0 1px, transparent 1px 9px); }
/* Живой фон: холст поверх CSS-градиента, штриховка при нём не нужна. */
.bl-gl { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.bl-img.has-gl::before { display: none; }
.bl-img.is-plain { background: #0b1834; }
.bl-img.is-plain::before { display: none; }
a.bl-link:hover .bl-img { transform: scale(1.04); }
.bl-box { position: absolute; inset: 23% 9%; display: grid; place-items: center; background: #040b19; border: 1px solid rgba(220, 230, 255, .5); }
.bl-lock { display: flex; align-items: center; gap: 3.2cqi; }
.bl-logo { display: inline-flex; align-items: center; gap: .32em; font: 400 6cqi/1 var(--f-text); letter-spacing: -.02em; color: #fff; white-space: nowrap; }
/* Знак после слова, как значок у Crusoe: чуть выше строчных, по центру строки. */
.bl-mark { width: auto; height: 1.08em; }
.is-plain .bl-logo { font-size: 12.5cqi; }
.bl-sep { flex: none; width: 1px; height: 9cqi; background: rgba(220, 230, 255, .6); }
.bl-tag { font: 400 3cqi/1.3 var(--f-text); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; color: #fff; }
.bl-text { display: block; }
.bl-note { display: block; margin-bottom: 12px; font: 400 14px/1.2 var(--f-num); color: var(--muted); }
.bl-title { padding-right: 56px; font-size: 20px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
a.bl-link:hover .bl-title { color: var(--accent-ink); }

.bl-controls { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 40px; }
.bl-all { font: 300 16px/1.2 var(--f-text); color: var(--ink); text-decoration: none; }
.bl-all:hover { color: var(--accent-ink); }
.bl-arrows { display: flex; gap: 8px; margin-right: -10px; }
.bl-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; transition: opacity .2s var(--ease), translate .2s var(--ease); }
.bl-arrow svg { width: 24px; height: 20px; fill: currentColor; }
.bl-arrow:disabled { opacity: .28; cursor: default; }
.bl-arrow[data-dir="1"]:not(:disabled):hover { translate: 3px 0; }
.bl-arrow[data-dir="-1"]:not(:disabled):hover { translate: -3px 0; }

/* ========================== Статья ========================== */
.a-head { width: min(672px, var(--container)); margin-inline: auto; padding-top: clamp(40px, calc(5vw / var(--z, 1)), 60px); }
.a-date { font-size: 16px; color: rgba(220, 230, 255, .5); }
.a-head h1 { margin-top: 14px; font-size: var(--fs-h2); line-height: 1.27; }
.a-head .lead { margin-top: 15px; color: var(--muted); }
.author { display: flex; align-items: center; gap: 12px; margin-top: 34px; }
.author i { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, #4d8dff, #1b3a96); overflow: hidden; flex: none; }
.author i img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; scale: 1.35; }
.author b { display: block; font-weight: 200; font-size: 20px; color: var(--ink-2); }
.author span { display: block; font-size: 16px; color: rgba(220, 230, 255, .5); }
.a-cover { width: min(912px, var(--container)); margin: 48px auto 0; aspect-ratio: 912 / 420; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #12306e, #07142e); border: 1px solid var(--glass-line); position: relative; }
.a-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(42% 60% at 70% 22%, rgba(77, 120, 230, .7), transparent 70%); filter: blur(16px); }
.a-body { width: min(728px, var(--container)); margin: 40px auto 0; color: var(--ink-body); }
.a-body p { line-height: 1.5; }
.a-body p + p { margin-top: 16px; }
.a-body h2 { margin: 40px 0 16px; font-size: var(--fs-lead); font-weight: 200; letter-spacing: 0; color: var(--ink-2); }
.a-body ul { margin: 0; padding: 0 0 0 22px; display: grid; gap: 14px; line-height: 1.5; }
.a-body li::marker { font-family: var(--f-num); color: var(--accent); }
.a-body .em { color: var(--ink-2); }

/* ========================== Адаптив ========================== */
@media (max-width: 1100px) {
  .rd-menu a, .rd-menu button { font-size: 17px; }
  .tl-wrap { grid-template-columns: 1fr; gap: 48px; }
  .tl-head { position: static; }
  .p-hero { grid-template-columns: 1fr; gap: 40px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .sol-grid { grid-template-columns: 1fr; }
  .sol-main { padding: 48px 0 24px; border-right: 0; }
  .sol-stage { position: relative; top: auto; width: min(100%, 340px); }
  .sol-item + .sol-item::before { right: calc(-1 * (calc(100vw / var(--z, 1)) - 100%) / 2); left: calc(-1 * (calc(100vw / var(--z, 1)) - 100%) / 2); }
  .sol-link { padding: 24px 0; gap: 8px 20px; }
  .sol-name { font-size: 28px; }
  .sol-arrow { width: 24px; height: 24px; }
  .cta-field { --orb: 156px; }
  .cta-shape { grid-template-columns: 1fr; justify-items: center; gap: 36px; height: auto; margin-right: 0; padding: 72px 24px 64px; border-radius: 0 0 50% 50% / 0 0 140px 140px; text-align: center; }
  .cta-title { margin-inline: auto; }
  .cta-copy p { margin-inline: auto; }
  .cta-links { justify-content: center; }
  .rd-menu { display: none; }
  .rd-burger {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid var(--glass-line);
    background: var(--glass);
    cursor: pointer;
    margin-left: auto;
  }
  .rd-burger span, .rd-burger span::before, .rd-burger span::after { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink); position: relative; transition: rotate .25s var(--ease), translate .25s var(--ease), opacity .2s; }
  .rd-burger span::before, .rd-burger span::after { content: ""; position: absolute; left: 0; }
  .rd-burger span::before { translate: 0 -6px; }
  .rd-burger span::after { translate: 0 6px; }
  .rd-header.menu-open .rd-burger span { background: transparent; }
  .rd-header.menu-open .rd-burger span::before { translate: 0 0; rotate: 45deg; }
  .rd-header.menu-open .rd-burger span::after { translate: 0 0; rotate: -45deg; }
  .rd-nav { flex-wrap: wrap; min-height: 68px; padding: 8px 8px 8px 20px; border-radius: 34px; }
  .rd-header.is-scrolled .rd-nav { min-height: 64px; }
  .rd-nav > .btn { display: none; }
  .rd-header.menu-open .rd-nav { background: rgba(5, 14, 27, .92); }
  .rd-header.menu-open .rd-menu {
    display: grid;
    order: 3;
    width: 100%;
    gap: 2px;
    padding: 8px 4px 14px;
  }
  .rd-header.menu-open .rd-nav > .btn { display: flex; order: 4; width: 100%; margin: 0 4px 10px; }
  .rd-menu a, .rd-menu button { font-size: 20px; width: 100%; justify-content: flex-start; }
  .rd-drop { position: static; min-width: 0; opacity: 1; visibility: visible; translate: none; display: none; background: rgba(255, 255, 255, .04); box-shadow: none; margin-top: 4px; }
  .rd-has-drop.is-open .rd-drop { display: grid; }
  .rd-wordmark { font-size: 26px; }
}

@media (max-width: 760px) {
  :root { --container: calc(100% - 32px); }
  .stats { flex-direction: column; align-items: center; gap: 28px; text-align: center; }
  .stat span { margin-inline: auto; }
  .stat b { font-size: 44px; }
  .hero-actions .btn { flex: 1 1 100%; }
  /* «Умные ИИ-решения» / «для вашего бизнеса» — по строке; calc(8.2vw / var(--z, 1)) на 390 = 32px */
  .hero-title { font-size: min(calc(8.2vw / var(--z, 1)), 38px); }
  .section-head { margin-bottom: 28px; }
  .chip { min-height: 40px; font-size: 16px; padding: 0 16px; }
  .tl { padding-left: 28px; }
  .tl::before, .tl::after { width: 3px; }
  .faq-q { padding: 20px 16px; font-size: 20px; }
  .faq-a p { padding: 0 16px; font-size: 18px; }
  .team { grid-template-columns: 1fr; }
  .cta { padding: 56px 20px; border-radius: 32px; }
  .cta .btn { width: 100%; }
  .p-hero .hero-actions .btn { flex: 1 1 100%; }
  .feature { padding: 20px; border-radius: 22px; }
  .prices { grid-template-columns: 1fr; }
  .price { padding: 28px; border-radius: 28px; }
  .bl-head, .bl-page-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .bl-filters { overflow-x: auto; margin-inline: -12px; }
  .bl-track .bl-card { flex-basis: 82%; }
  .bl-grid { grid-template-columns: 1fr; gap: 40px; }
  .bl-title { padding-right: 40px; }
  .foot-top { gap: 40px 24px; }
  .foot-contacts { font-size: 18px; }
  .foot-col a { font-size: 16px; }
  .foot-bottom { flex-direction: column; align-items: stretch; }
  .foot-legal { gap: 6px 20px; }
  .a-cover { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-art * { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; translate: 0 0; }
  .tl-step { opacity: 1 !important; translate: none !important; }
}

/* обложка статьи с живым фоном, как у карточки в блоге */
.a-cover.is-live::after { display: none; }
.a-cover.is-live .bl-cover { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }

/* ---------- Большие экраны ----------
   Страница увеличивается целиком, как окно 1440 x 790, только крупнее: коэффициент –
   меньшее из отношений ширины и высоты окна к базе, шагом 0,1 (790 – чтобы
   цифры первого экрана главной оставались над сгибом). Единицы vh/vw во всех
   стилях поделены на --z, иначе внутри zoom они умножаются. Скрипты с координатами
   берут offsetWidth или делят на zoom (rd.js, process.js). */
@media screen and (min-width: 1585px) and (min-height: 870px) { html { --z: 1.1; zoom: 1.1; } }
@media screen and (min-width: 1728px) and (min-height: 948px) { html { --z: 1.2; zoom: 1.2; } }
@media screen and (min-width: 1872px) and (min-height: 1027px) { html { --z: 1.3; zoom: 1.3; } }
@media screen and (min-width: 2016px) and (min-height: 1106px) { html { --z: 1.4; zoom: 1.4; } }
@media screen and (min-width: 2160px) and (min-height: 1185px) { html { --z: 1.5; zoom: 1.5; } }
@media screen and (min-width: 2304px) and (min-height: 1264px) { html { --z: 1.6; zoom: 1.6; } }
@media screen and (min-width: 2448px) and (min-height: 1343px) { html { --z: 1.7; zoom: 1.7; } }
@media screen and (min-width: 2592px) and (min-height: 1422px) { html { --z: 1.8; zoom: 1.8; } }
@media screen and (min-width: 2736px) and (min-height: 1501px) { html { --z: 1.9; zoom: 1.9; } }
@media screen and (min-width: 2880px) and (min-height: 1580px) { html { --z: 2; zoom: 2; } }
@media screen and (min-width: 3024px) and (min-height: 1659px) { html { --z: 2.1; zoom: 2.1; } }
@media screen and (min-width: 3169px) and (min-height: 1739px) { html { --z: 2.2; zoom: 2.2; } }
@media screen and (min-width: 3312px) and (min-height: 1817px) { html { --z: 2.3; zoom: 2.3; } }
@media screen and (min-width: 3456px) and (min-height: 1896px) { html { --z: 2.4; zoom: 2.4; } }
@media screen and (min-width: 3600px) and (min-height: 1975px) { html { --z: 2.5; zoom: 2.5; } }
@media screen and (min-width: 3744px) and (min-height: 2054px) { html { --z: 2.6; zoom: 2.6; } }
@media screen and (min-width: 3889px) and (min-height: 2133px) { html { --z: 2.7; zoom: 2.7; } }
@media screen and (min-width: 4032px) and (min-height: 2212px) { html { --z: 2.8; zoom: 2.8; } }
@media screen and (min-width: 4176px) and (min-height: 2291px) { html { --z: 2.9; zoom: 2.9; } }
@media screen and (min-width: 4320px) and (min-height: 2370px) { html { --z: 3; zoom: 3; } }
@media screen and (min-width: 4464px) and (min-height: 2449px) { html { --z: 3.1; zoom: 3.1; } }
@media screen and (min-width: 4608px) and (min-height: 2528px) { html { --z: 3.2; zoom: 3.2; } }
@media screen and (min-width: 4752px) and (min-height: 2607px) { html { --z: 3.3; zoom: 3.3; } }
@media screen and (min-width: 4896px) and (min-height: 2686px) { html { --z: 3.4; zoom: 3.4; } }
@media screen and (min-width: 5040px) and (min-height: 2765px) { html { --z: 3.5; zoom: 3.5; } }
/* Safari увеличивает по-старому: координаты, vh и закреплённые блоки внутри zoom
   считаются иначе (лента «Процесса» отпускается раньше конца). Там увеличение
   выключено, вёрстка как на 1440. Класс ставит проверка в <head> каждой страницы. */
html.zoom-legacy { --z: 1; zoom: 1; }

/* Логотип на телефоне: область нажатия 44 px по высоте, вид тот же. */
@media (max-width: 760px) {
  .rd-header .rd-logo::after { content: ""; position: absolute; inset: -9px -6px; }
}