/* ==========================================================================
   CKAIWEB · Автоматизации — тёмная тема «обсидиан и латунь»
   --------------------------------------------------------------------------
   Главная страница домена ckaiweb.com. Дух — как у лендинга мини-приложений
   (ckaiweb-home/miniapp/premium.css): чёрный камень с мраморной фактурой,
   латунный акцент, Manrope на заголовках и Onest в тексте. Курсива нет нигде.

   Разделы файла:
    1. Переменные (цвета, шрифты, отступы) — менять тему здесь
    2. Основа и камень на фоне
    3. Общие детали: контейнер, значки, надписи-метки, кнопки
    4. Шапка и меню для телефона
    5. Первый экран (текст)
    6. Первый экран: куб-механизм (фоновая анимация)
    7. Три направления
    8. Манифест
    9. Секции: заголовки
   10. Услуги (строки)
   11. Что закрываем (карточки)
   12. Процесс (цепочка)
   13. Приватность (панель со схемой)
   14. Кейсы (пустые места)
   15. Контакт
   16. Подвал
   17. Появление при прокрутке
   18. Широкие экраны
   19. «Уменьшить движение»
   ========================================================================== */

/* ============ 1. ПЕРЕМЕННЫЕ ============ */
:root {
  /* Камень */
  --bg: #0b0c0e;              /* основной фон */
  --bg-alt: #101215;          /* чередующиеся секции */
  --bg-card: #15181c;         /* карточки */
  --line: #24282e;            /* тонкие линии */
  --line-strong: #363b43;     /* линии заметнее */

  /* Текст */
  --ink: #f2efe9;             /* основной */
  --ink-soft: #b4b1aa;        /* мягкий: абзацы */
  --ink-faint: #8f8d85;       /* блёклый: подписи (5,9:1 к фону) */

  /* Латунь — главный акцент. Сменить цвет темы = поменять эти три строки */
  --accent: #c9a961;          /* латунь */
  --accent-light: #e0c98c;    /* светлая латунь: наведение, значки, фокус */
  --accent-soft: #221d12;     /* тёмная подложка под латунные значки */
  --on-accent: #0b0c0e;       /* тёмный текст на латунной кнопке */
  --accent-top: #d9bd78;      /* верх градиента латунной кнопки */
  --accent-hover-top: #e4cb8e; /* кнопка под мышью: верх… */
  --accent-hover: #d2b36c;    /* …и низ */
  --accent-line: rgba(201, 169, 97, 0.6);  /* рамка кнопки-контура (3,6:1 к фону) */
  --accent-glow: rgba(201, 169, 97, 0.35);

  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 26px;

  --maxw: 1180px;
  --header-h: 68px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 48px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

/* ============ 2. ОСНОВА И КАМЕНЬ ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 12px); /* якоря не прячутся под шапку */
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Камень: обсидиан с прожилками. Три слоя — зерно (SVG-шум, встроен прямо
   в файл), тёплые отсветы латуни и косые прожилки. Слой прибит к экрану
   отдельным элементом — так он не перерисовывается при прокрутке
   и работает на iPhone (там background-attachment: fixed не действует). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(60% 50% at 80% 8%, rgba(201, 169, 97, 0.1), transparent 70%),
    radial-gradient(45% 40% at 10% 88%, rgba(201, 169, 97, 0.05), transparent 70%),
    linear-gradient(112deg, transparent 38%, rgba(242, 239, 233, 0.028) 40%, transparent 41.5%),
    linear-gradient(118deg, transparent 63%, rgba(242, 239, 233, 0.02) 64.5%, transparent 65.5%),
    linear-gradient(180deg, #0b0c0e 0%, #0d0f12 100%);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: break-word; /* длинное слово на 360 px переносится, а не вылезает */
}

p {
  margin: 0;
}

/* Курсив запрещён во всей теме */
em,
i,
cite,
dfn,
address,
var {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* Фокус с клавиатуры — латунная рамка */
:focus-visible {
  outline: 2px solid var(--accent-light);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection {
  background: rgba(201, 169, 97, 0.35);
  color: var(--ink);
}

/* ============ 3. ОБЩИЕ ДЕТАЛИ ============ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4.5vw, 2.5rem);
}

/* Набор значков (невидимый склад символов) */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0.75rem;
  z-index: 100;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-head);
  font-weight: 700;
}
.skip-link:focus {
  left: 1rem;
}

/* Надпись-метка над заголовком: тонкая латунная черта, номер, название */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.25rem;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.eyebrow__num {
  color: var(--accent-light);
}
.eyebrow__num::after {
  content: "/";
  margin-left: 0.7rem;
  color: var(--ink-faint);
}
.eyebrow--center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* Кнопки */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
    background-color 0.25s var(--ease), box-shadow 0.25s var(--ease),
    translate 0.25s var(--ease);
}
.btn .icon {
  width: 1.15em;
  height: 1.15em;
}

/* Латунная: градиент сверху вниз, как полированный металл */
.btn--primary {
  background: linear-gradient(180deg, var(--accent-top), var(--accent));
  color: var(--on-accent);
  box-shadow: 0 8px 24px rgba(201, 169, 97, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn--primary:hover {
  background: linear-gradient(180deg, var(--accent-hover-top), var(--accent-hover));
  box-shadow: 0 12px 30px rgba(201, 169, 97, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* Контур: латунная рамка с прозрачностью — заметна (3,6:1), но не кричит */
.btn--outline {
  border-color: var(--accent-line);
  background: rgba(242, 239, 233, 0.03);
  color: var(--ink);
}
.btn--outline:hover {
  border-color: var(--accent-light);
  background: rgba(201, 169, 97, 0.08);
  color: var(--accent-light);
}

.btn--lg {
  min-height: 54px;
  padding: 0.95rem 1.8rem;
  font-size: 1.05rem;
}
.btn--sm {
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  font-size: 0.95rem;
}

/* Ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent-light);
  transition: color 0.2s var(--ease);
}
.link-arrow .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: translate 0.3s var(--ease);
}
.link-arrow:hover {
  color: var(--ink);
}

/* ============ 4. ШАПКА И МЕНЮ ДЛЯ ТЕЛЕФОНА ============ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
/* После начала прокрутки шапка получает тёмную подложку с размытием */
.header.is-scrolled,
.menu-open .header {
  background: rgba(11, 12, 14, 0.84);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  color: var(--ink);
  flex-shrink: 0;
}
/* В файле логотипа широкие прозрачные поля — увеличиваем картинку
   и обрезаем рамкой, чтобы знак был крупным и чётким */
.logo__mark {
  position: relative;
  width: 28px;
  height: 28px;
  overflow: hidden;
  flex-shrink: 0;
}
.logo__mark img {
  position: absolute;
  left: -40%;
  top: -40%;
  width: 180%;
  height: 180%;
  max-width: none;
}
.logo__text {
  font-family: var(--font-head);
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.logo__dot {
  color: var(--accent);
}

.nav {
  display: none;
  margin-left: auto;
  gap: 0.15rem;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.7rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 8px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__link:hover,
.nav__link.is-active {
  color: var(--ink);
}
.nav__link:hover::after,
.nav__link.is-active::after {
  transform: scaleX(1);
}

.header__cta {
  display: none;
  margin-left: auto;
}

.burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: 1.5px solid var(--accent-line);
  border-radius: 12px;
  background: rgba(242, 239, 233, 0.03);
  color: var(--ink);
  cursor: pointer;
}
.burger__line {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.3s var(--ease);
}
.burger[aria-expanded="true"] .burger__line:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__line:last-child {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* Меню на весь экран под шапкой. Закрыто — невидимо и недоступно для Tab */
.mobile-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  bottom: 0;
  z-index: 49;
  overflow-y: auto;
  background:
    radial-gradient(70% 40% at 90% 0%, rgba(201, 169, 97, 0.08), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s;
}
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  padding-block: 1rem 2rem;
}
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  min-height: 58px;
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-head);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.mobile-menu__num {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.mobile-menu__cta {
  margin-top: 1.75rem;
}

/* Пока меню открыто, страница под ним не прокручивается */
.menu-open {
  overflow: hidden;
}

/* ============ 5. ПЕРВЫЙ ЭКРАН ============ */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.25rem, 7vw, 5rem) clamp(2.25rem, 4vw, 3rem);
}
.hero__inner {
  position: relative;
  z-index: 1;
}
.hero__title {
  max-width: 18ch;
  font-size: clamp(2.2rem, 1.25rem + 4vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
/* Латунные слова в заголовке: градиент как у металла, без курсива */
.hero__accent {
  color: var(--accent-light);
  background: linear-gradient(180deg, #efdcaa 10%, #c9a961 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero__lead {
  max-width: 35rem;
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--ink-soft);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.hero__actions .btn {
  flex: 1 1 auto;
}

/* Появление текста первого экрана при загрузке — один раз, мягко */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============ 6. КУБ-МЕХАНИЗМ (ФОНОВАЯ АНИМАЦИЯ) ============ */
/* Устройство слоёв (каждый отвечает за одно движение, чтобы они не спорили):
     .stage        — сцена с перспективой, позиция и размер (--cube)
     .stage__float — медленное парение вверх-вниз
     .stage__tilt  — наклон камеры + лёгкий поворот за мышью (переменные --px/--py из script.js)
     .cube         — вращение куба вокруг вертикали
     .core         — латунное ядро внутри, крутится в другую сторону
     .stage__orbit — орбиты с бусинами
   Всё движение — transform/opacity, считается видеокартой и не грузит страницу. */
.stage {
  --cube: 118px;
  --half: calc(var(--cube) / 2);
  position: absolute;
  z-index: 0;
  top: -28px;
  right: -78px;
  width: 290px;
  height: 290px;
  display: grid;
  place-items: center;
  perspective: 1000px;
  pointer-events: none;
  opacity: 0.42;
}
.stage > * {
  grid-area: 1 / 1;
}

.stage__glow {
  width: calc(var(--cube) * 3);
  height: calc(var(--cube) * 3);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(201, 169, 97, 0.2), rgba(201, 169, 97, 0.06) 50%, transparent 74%);
  animation: glow 8s ease-in-out infinite alternate;
}
@keyframes glow {
  from {
    opacity: 0.6;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1.05);
  }
}

.stage__shadow {
  width: calc(var(--cube) * 1.5);
  height: calc(var(--cube) * 0.26);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), transparent);
  transform: translateY(calc(var(--cube) * 0.98));
}

.stage__float {
  width: var(--cube);
  height: var(--cube);
  transform-style: preserve-3d;
  animation: float 10s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(-9px);
  }
  50% {
    transform: translateY(9px);
  }
}

.stage__tilt {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: rotateX(calc(-22deg - var(--py, 0) * 6deg)) rotateY(calc(var(--px, 0) * 12deg));
}

/* Орбиты: кольцо + бусина. Кольцо крутится в своей плоскости — бусина бежит по кругу */
.stage__orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform-style: preserve-3d;
}
.stage__orbit--a {
  width: calc(var(--cube) * 1.9);
  height: calc(var(--cube) * 1.9);
  margin: calc(var(--cube) * -0.95) 0 0 calc(var(--cube) * -0.95);
  border: 1px solid rgba(201, 169, 97, 0.4);
  transform: rotateX(76deg) rotateZ(0deg);
  animation: orbit-a 22s linear infinite;
}
.stage__orbit--b {
  width: calc(var(--cube) * 2.45);
  height: calc(var(--cube) * 2.45);
  margin: calc(var(--cube) * -1.225) 0 0 calc(var(--cube) * -1.225);
  border: 1px dashed rgba(201, 169, 97, 0.28);
  transform: rotateZ(-26deg) rotateX(70deg) rotateZ(120deg);
  animation: orbit-b 34s linear infinite;
}
@keyframes orbit-a {
  from {
    transform: rotateX(76deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(76deg) rotateZ(360deg);
  }
}
@keyframes orbit-b {
  from {
    transform: rotateZ(-26deg) rotateX(70deg) rotateZ(120deg);
  }
  to {
    transform: rotateZ(-26deg) rotateX(70deg) rotateZ(-240deg);
  }
}
.stage__bead {
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 12px 3px rgba(224, 201, 140, 0.55);
}
.stage__orbit--b .stage__bead {
  top: -4px;
  left: calc(50% - 4px);
  width: 8px;
  height: 8px;
}

/* Куб: шесть граней из тёмного полупрозрачного камня с латунными рёбрами */
.cube {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(-35deg);
  animation: spin 46s linear infinite;
}
@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.cube__face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(224, 201, 140, 0.62);
  border-radius: 3px;
  background:
    radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.16), transparent 62%),
    linear-gradient(118deg, transparent 42%, rgba(242, 239, 233, 0.07) 45%, transparent 48%),
    linear-gradient(150deg, rgba(40, 44, 50, 0.7), rgba(11, 12, 14, 0.6));
  box-shadow: inset 0 0 0 1px rgba(11, 12, 14, 0.55), inset 0 0 36px rgba(201, 169, 97, 0.12);
}
/* Гравировка на грани: внутренний квадрат-узел… */
.cube__face::before {
  content: "";
  position: absolute;
  inset: 26%;
  border: 1px solid rgba(201, 169, 97, 0.4);
  border-radius: 4px;
}
/* …и четыре дорожки от узла к рёбрам — «схема процессов» */
.cube__face::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(201, 169, 97, 0.34), rgba(201, 169, 97, 0.34)) 50% 0 / 1px 26% no-repeat,
    linear-gradient(rgba(201, 169, 97, 0.34), rgba(201, 169, 97, 0.34)) 50% 100% / 1px 26% no-repeat,
    linear-gradient(rgba(201, 169, 97, 0.34), rgba(201, 169, 97, 0.34)) 0 50% / 26% 1px no-repeat,
    linear-gradient(rgba(201, 169, 97, 0.34), rgba(201, 169, 97, 0.34)) 100% 50% / 26% 1px no-repeat;
}
.cube__face--front {
  transform: translateZ(var(--half));
}
.cube__face--back {
  transform: rotateY(180deg) translateZ(var(--half));
}
.cube__face--right {
  transform: rotateY(90deg) translateZ(var(--half));
}
.cube__face--left {
  transform: rotateY(-90deg) translateZ(var(--half));
}
/* Верхняя грань освещена сильнее — свет падает сверху */
.cube__face--top {
  transform: rotateX(90deg) translateZ(var(--half));
  background-color: rgba(224, 201, 140, 0.08);
}
.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(var(--half));
}

/* Ядро: маленький латунный куб внутри, крутится по двум осям */
.core {
  --core: calc(var(--cube) * 0.4);
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--core);
  height: var(--core);
  margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2);
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(45deg);
  animation: core-spin 20s linear infinite;
}
@keyframes core-spin {
  from {
    transform: rotateX(0deg) rotateY(0deg);
  }
  to {
    transform: rotateX(360deg) rotateY(-360deg);
  }
}
.core__face {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 240, 200, 0.45);
  background: linear-gradient(135deg, #e8d49c 0%, #c9a961 45%, #7a6232 100%);
  box-shadow: inset 0 0 14px rgba(255, 236, 190, 0.35), 0 0 22px rgba(201, 169, 97, 0.4);
  opacity: 0.9;
}
.core__face--front {
  transform: translateZ(calc(var(--core) / 2));
}
.core__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--core) / 2));
}
.core__face--right {
  transform: rotateY(90deg) translateZ(calc(var(--core) / 2));
}
.core__face--left {
  transform: rotateY(-90deg) translateZ(calc(var(--core) / 2));
}
.core__face--top {
  transform: rotateX(90deg) translateZ(calc(var(--core) / 2));
}
.core__face--bottom {
  transform: rotateX(-90deg) translateZ(calc(var(--core) / 2));
}

/* Первый экран ушёл из вида — механизм стоит (бережём батарею) */
.stage.is-paused,
.stage.is-paused * {
  animation-play-state: paused;
}

/* ============ 7. ТРИ НАПРАВЛЕНИЯ ============ */
.ways {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
}
.ways__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.ways__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.ways__list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ways__item {
  display: flex;
}

.way {
  flex: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "icon body"
    "icon go";
  gap: 0.35rem 1rem;
  padding: 1.15rem 1.15rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: var(--ink);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), translate 0.3s var(--ease);
}
.way:hover {
  border-color: rgba(201, 169, 97, 0.5);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Текущее направление подсвечено латунью */
.way--current {
  border-color: rgba(201, 169, 97, 0.55);
  background: radial-gradient(120% 90% at 0% 0%, rgba(201, 169, 97, 0.14), transparent 60%), var(--bg-card);
}
.way__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-light);
}
.way__icon .icon {
  width: 24px;
  height: 24px;
}
.way__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.way__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.way--current .way__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.2);
}
.way__name {
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
}
.way__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.way__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-light);
  overflow-wrap: anywhere;
}
.way__go .icon {
  width: 1rem;
  height: 1rem;
  transition: translate 0.3s var(--ease);
}

/* ============ 8. МАНИФЕСТ ============ */
.statement {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-top: 1px solid var(--line);
}
.statement__text {
  max-width: 30ch;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 1rem + 2.2vw, 2.6rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.statement__accent {
  color: var(--accent-light);
}

/* ============ 9. СЕКЦИИ: ЗАГОЛОВКИ ============ */
.section {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
}
/* Чередующиеся секции — не плоский серый, а чуть другой камень */
.section--alt {
  background:
    linear-gradient(180deg, rgba(242, 239, 233, 0.025), transparent 18%, transparent 82%, rgba(242, 239, 233, 0.025)),
    rgba(16, 18, 21, 0.62);
  border-block: 1px solid var(--line);
}
.section__head {
  max-width: 44rem;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section__title {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.section__lead {
  max-width: 40rem;
  margin-top: 1rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  color: var(--ink-soft);
}

/* ============ 10. УСЛУГИ (СТРОКИ) ============ */
.rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.rows__item {
  border-bottom: 1px solid var(--line);
}
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "num icon"
    "title title"
    "body body";
  gap: 0.75rem 1rem;
  padding-block: 1.75rem;
}
/* Латунная черта над строкой выезжает при наведении */
.row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.row:hover::before {
  transform: scaleX(1);
}
.row__num {
  grid-area: num;
  align-self: center;
  font-family: var(--font-head);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.row__title {
  grid-area: title;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}
.row__body {
  grid-area: body;
  color: var(--ink-soft);
}
.row__tags {
  margin-top: 0.9rem;
  font-family: var(--font-head);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.row__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(201, 169, 97, 0.38);
  border-radius: 50%;
  color: var(--accent-light);
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.row__icon .icon {
  width: 22px;
  height: 22px;
}
.row:hover .row__icon {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

/* ============ 11. ЧТО ЗАКРЫВАЕМ (КАРТОЧКИ) ============ */
.card {
  position: relative;
  flex: 1;
  padding: 1.75rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(242, 239, 233, 0.035), transparent 60%), var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), translate 0.3s var(--ease);
}
.card:hover {
  border-color: rgba(201, 169, 97, 0.45);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pains {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pains__item {
  display: flex;
}
.pain {
  display: flex;
  flex-direction: column;
}
.pain__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(201, 169, 97, 0.35);
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent-light);
}
.pain__icon .icon {
  width: 24px;
  height: 24px;
}
.pain__kicker {
  margin-bottom: 0.6rem;
  font-family: var(--font-head);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pain__title {
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.pain__text {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ============ 12. ПРОЦЕСС (ЦЕПОЧКА) ============ */
/* Телефон: столбик, слева вертикальная латунная нить с бусинами */
.chain {
  position: relative;
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0 0 0 1.75rem;
  list-style: none;
}
.chain::before {
  content: "";
  position: absolute;
  left: 0.45rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 169, 97, 0.55) 8%, rgba(201, 169, 97, 0.55) 92%, transparent);
}
.chain__item {
  position: relative;
  display: flex;
}
.chain__item::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(-1.75rem + 0.45rem - 5px);
  top: 2.1rem;
  width: 10px;
  height: 10px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(201, 169, 97, 0.45);
}
.chain__card {
  padding-top: 2.4rem;
}
/* Крупный номер в углу: декоративный (порядок и так задан списком) */
.chain__num {
  position: absolute;
  top: 0.7rem;
  right: 1rem;
  font-family: var(--font-head);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  opacity: 0.6;
  pointer-events: none;
}
.chain__title {
  padding-right: 3.4rem;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.chain__text {
  margin-top: 0.6rem;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

/* ============ 13. ПРИВАТНОСТЬ ============ */
.privacy {
  display: grid;
  gap: 2.5rem;
  padding: clamp(1.75rem, 5vw, 3.5rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(80% 70% at 100% 0%, rgba(201, 169, 97, 0.12), transparent 65%),
    linear-gradient(180deg, rgba(242, 239, 233, 0.03), transparent 50%),
    var(--bg-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 30px 80px rgba(0, 0, 0, 0.35);
}
.privacy__text .section__lead {
  margin-top: 1rem;
}
.privacy__list {
  display: grid;
  gap: 0.9rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.privacy__point {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 1.5;
  color: var(--ink);
}
.privacy__point .icon {
  width: 22px;
  height: 22px;
  margin-top: 0.05rem;
  color: var(--accent-light);
}
.privacy__visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Схема: компьютер → канал с замком → ИИ */
.scheme {
  width: 100%;
  max-width: 420px;
  height: auto;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.scheme__pc,
.scheme__channel {
  stroke: var(--accent);
}
.scheme__ai {
  stroke: var(--accent-light);
}
.scheme__soft {
  opacity: 0.45;
}
.scheme__dash {
  stroke-dasharray: 4 7;
}
/* Латунная точка бежит по каналу от компьютера к ИИ */
.scheme__pulse {
  fill: var(--accent-light);
  stroke: none;
  animation: pulse-run 3.6s var(--ease) infinite;
}
@keyframes pulse-run {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  12%,
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(118px);
    opacity: 0;
  }
}
.scheme__labels {
  stroke: none;
  fill: var(--ink-soft);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.scheme__label-soft {
  fill: var(--ink-soft);
  font-family: var(--font-body);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* ============ 14. КЕЙСЫ ============ */
.slots {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.slots__item {
  display: flex;
}
.slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 190px;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-card);
}
.slot__label {
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.slot__text {
  font-size: 0.95rem;
  color: var(--ink-faint);
}

.cases__invite {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 2rem;
  color: var(--ink-soft);
}

/* ============ 15. КОНТАКТ ============ */
/* Сама форма — в contact.css (общая с лендингом мини-приложений).
   Здесь только отступ снизу перед подвалом. */
.contact {
  padding-bottom: clamp(4rem, 8vw, 6rem);
}

/* ============ 16. ПОДВАЛ ============ */
.footer {
  padding-block: 3rem 2rem;
  border-top: 1px solid var(--line);
  background: rgba(11, 12, 14, 0.6);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
}
.footer__brand {
  grid-column: 1 / -1;
}
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.9rem;
}
.footer__tag {
  max-width: 22rem;
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.footer__icon {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--accent-line);
  border-radius: 50%;
  color: var(--accent-light);
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.footer__icon .icon {
  width: 20px;
  height: 20px;
}
.footer__icon:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer__label {
  margin-bottom: 0.3rem;
  font-family: var(--font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.footer__link:hover {
  color: var(--accent-light);
}
.footer__link[aria-current="page"] {
  color: var(--ink);
}
.footer__copy {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-faint);
}

/* ============ 17. ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ ============ */
/* Только opacity и transform. Блоки прячутся лишь там, где работают скрипты
   (scripting: enabled) и человек не просил «уменьшить движение».
   Страховка: если script.js не загрузится, через 4 секунды всё проявится само
   (анимация reveal-failsafe). Скрипт её снимает классом .js на <html>. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .rise {
    animation: rise 0.9s var(--ease) both;
  }
  .rise--1 {
    animation-delay: 0.08s;
  }
  .rise--2 {
    animation-delay: 0.16s;
  }
  .rise--3 {
    animation-delay: 0.26s;
  }
  .rise--4 {
    animation-delay: 0.36s;
  }
  .rise--5 {
    animation-delay: 0.46s;
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    animation: reveal-failsafe 0.6s ease 4s forwards;
  }
  .js .reveal {
    animation: none;
  }
  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
  .reveal--d1 {
    transition-delay: 0.08s;
  }
  .reveal--d2 {
    transition-delay: 0.16s;
  }
  .reveal--d3 {
    transition-delay: 0.24s;
  }
}
@keyframes reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Подъём карточек при наведении — только там, где есть мышь */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover {
    translate: 0 -2px;
  }
  .way:hover,
  .card:hover {
    translate: 0 -3px;
  }
  .way:hover .way__go .icon {
    translate: 2px -2px;
  }
  .way--current:hover .way__go .icon {
    translate: 0 3px;
  }
  .link-arrow:hover .icon {
    translate: 4px 0;
  }
}

/* ============ 18. ШИРОКИЕ ЭКРАНЫ ============ */
/* Узкий телефон: всё чуть компактнее */
@media (max-width: 380px) {
  .logo__text {
    font-size: 1.05rem;
  }
  .btn--lg {
    padding-inline: 1.3rem;
  }
}

@media (min-width: 560px) {
  .header__cta {
    display: inline-flex;
  }
  .burger {
    margin-left: 0.25rem;
  }
  .hero__actions .btn {
    flex: 0 0 auto;
  }
  .stage {
    --cube: 150px;
    top: 0;
    right: -60px;
    width: 360px;
    height: 360px;
    opacity: 0.6;
  }
}

@media (min-width: 760px) {
  .pains {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .slots {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footer__brand {
    grid-column: auto;
  }
}

@media (min-width: 860px) {
  .ways__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .way {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "icon"
      "body"
      "go";
    gap: 0.85rem;
    padding: 1.35rem 1.5rem 1.4rem;
  }
  .way__icon {
    margin-bottom: 0.25rem;
  }
  .way__go {
    margin-top: 0.25rem;
  }

  .row {
    grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.3fr) 48px;
    grid-template-areas: "num title body icon";
    align-items: start;
    gap: 2rem;
    padding-block: 2.25rem;
  }
  .row__num {
    align-self: start;
    padding-top: 0.55rem;
  }
}

/* Первый экран на широком: куб справа, крупный и в полную силу */
@media (min-width: 900px) {
  .hero {
    padding-block: clamp(2.5rem, 4.5vw, 4rem) 2rem;
  }
    .hero__lead {
    max-width: 37rem;
  }
  .stage {
    --cube: clamp(180px, 17vw, 250px);
    top: 50%;
    right: calc(max(0px, (100% - var(--maxw)) / 2) - 1rem);
    width: calc(var(--cube) * 2.7);
    height: calc(var(--cube) * 2.7);
    margin-top: calc(var(--cube) * -1.35);
    perspective: 1400px;
    opacity: 1;
  }

  .privacy {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 3rem;
  }

  /* Цепочка: четыре карточки зигзагом на одной горизонтальной нити */
  .chain {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    padding: 3.2rem 0;
  }
  .chain::before {
    left: 2%;
    right: 2%;
    top: 50%;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.55) 12%, rgba(201, 169, 97, 0.55) 88%, transparent);
  }
  .chain__item--low {
    translate: 0 2.6rem;
  }
  .chain__item--high {
    translate: 0 -2.6rem;
  }
  /* Бусины — в зазорах между карточками, ровно на нити */
  .chain__item::before {
    display: none;
  }
  .chain__item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(100% + 0.75rem - 5px);
    width: 10px;
    height: 10px;
    margin-top: -5px;
    border: 2px solid var(--accent);
    border-radius: 50%;
    background: var(--bg);
    box-shadow: 0 0 0 4px var(--bg), 0 0 18px rgba(201, 169, 97, 0.45);
  }
  .chain__item--low::after {
    top: calc(50% - 2.6rem);
  }
  .chain__item--high::after {
    top: calc(50% + 2.6rem);
  }
}

@media (min-width: 1100px) {
  .nav {
    display: flex;
  }
  .header__cta {
    margin-left: 0.5rem;
  }
  .burger,
  .mobile-menu {
    display: none;
  }
}

/* ============ 19. «УМЕНЬШИТЬ ДВИЖЕНИЕ» ============ */
/* Если в системе включено «уменьшить движение»: ничего не едет и не крутится.
   Куб стоит красивым статичным кадром, блоки видны сразу. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .stage,
  .stage *,
  .scheme__pulse {
    animation: none !important;
  }
  .scheme__pulse {
    transform: translateX(40px);
  }
}

/* ============ 18. ПРАВКИ ОКТЯБРЯ 2026 ============ */

/* PRO в шапке — латунью: это платный раздел, его должно быть видно */
.nav__link--pro {
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent-light);
}
.nav__link--pro:hover {
  color: var(--accent-light);
}

/* Последняя карточка задач — приглашение рассказать о своей, ведёт к форме */
.pain--any {
  border-color: rgba(201, 169, 97, 0.4);
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(201, 169, 97, 0.12), transparent 70%),
    var(--bg-card);
  color: inherit;
  text-decoration: none;
}
.pain__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--accent-light);
}
.pain__go .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s var(--ease);
}
.pain--any:hover .pain__go .icon {
  transform: translateX(4px);
}

/* Настоящие кейсы: заголовок, текст и метки */
.slot--case {
  gap: 0.75rem;
  min-height: 0;
}
.slot__title {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.slot--case .slot__text {
  color: var(--ink-soft);
  font-size: 1rem;
}
.slot__tags {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Соцсети в подвале — ряд кружков */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

@media (min-width: 760px) {
  /* Четыре кейса — два на два, а не три плюс один */
  .slots--cases {
    grid-template-columns: repeat(2, 1fr);
  }
}