/* ==========================================================================
   Dmitrii Lu — Editorial Luxury × Apple Industrial
   ========================================================================== */

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
html, body { margin: 0; padding: 0; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }

/* --- Root tokens --- */
:root {
  /* Palette */
  --paper:        #FAF8F3;
  --paper-deep:   #F0EADD;
  --paper-darker: #E8E0CF;
  --ink:          #141110;
  /* --ink-soft — для body-текста (параграфы, описания). Темнее --ink-mute
     ради читаемости длинных абзацев (~7.5:1 на paper). */
  --ink-soft:     #4F4A46;
  /* --ink-mute — для UI-хрома (eyebrow, captions, индексы, метки).
     Приглушённый, создаёт иерархию между body и метками. */
  --ink-mute:     #6B6560;
  --rule:         #D9D1C2;
  --cosmic:       #D2552A;
  --cosmic-deep:  #8B3415;
  --cosmic-glow:  #F39A6F;

  /* Type */
  --display: "Fraunces", "Times New Roman", serif;
  --body:    "Geist", "Helvetica Neue", sans-serif;
  --mono:    "Geist Mono", "SFMono-Regular", monospace;

  /* Layout */
  --gutter: clamp(24px, 4vw, 72px);
  --max:    1440px;
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);

  color-scheme: light;
}

/* --- Dark theme tokens (warm dark, сохраняем редакционно-бумажный характер) ---
   Переопределяем те же 9 переменных — всё, что использует var(--paper/ink/rule),
   автоматически инвертируется. Cosmic-акценты НЕ трогаем: #D2552A проходит
   WCAG AA и на кремовом, и на warm-dark фоне, остаётся якорем бренда. */
[data-theme="dark"] {
  --paper:        #1F1A16;
  --paper-deep:   #18140F;
  --paper-darker: #2A231D;
  --ink:          #F0EADD;
  --ink-soft:     #C4BBAD;
  --ink-mute:     #A59B8E;
  --rule:         #3A3127;

  color-scheme: dark;
}

/* --- Transitions for theme cross-fade --- */

/* Плавный кросс-фейд цветов при переключении темы.
   Transition только на background-color/color — анимации orb'ов, hover-transform
   и прочее motion'у не мешает. */
body,
.section,
.header,
.footer,
.mobile-menu,
.service--cta {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease);
}

/* --- Base --- */
html { scroll-behavior: smooth; }
body {
  background: var(--paper-deep);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  max-width: 100%;
  cursor: none; /* заменяем кастомным курсором на desktop */
}

/* UA-стили браузера ставят a { cursor: pointer } напрямую на ссылки,
   что перебивает cursor: none с body. Заставляем все элементы
   наследовать cursor — тогда a/button берут значение от body. */
*, *::before, *::after { cursor: inherit; }

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
}

/* --- Shared utility classes --- */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: -0.025em;
  line-height: 0.95;
}

.display em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "wght" 550;
}

/* Offscreen noise filter SVG */
.noise-filter {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* =============================================================
   Custom cursor (desktop only)
   ============================================================= */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  transition: width 0.35s var(--ease),
              height 0.35s var(--ease),
              background-color 0.35s var(--ease),
              border-color 0.35s var(--ease),
              opacity 0.25s var(--ease);
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cursor__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.cursor.is-hoverable {
  width: 14px;
  height: 14px;
  background: var(--ink);
  border-color: var(--ink);
}
.cursor.is-view {
  width: 64px;
  height: 64px;
  background: var(--cosmic);
  border-color: var(--cosmic);
  mix-blend-mode: normal;
}
.cursor.is-view .cursor__label { opacity: 1; }

/* is-precision — для мелких контролов (RU/EN, sun/moon, < 30px). Курсор
   сжимается в крошечную cosmic-точку 6px без обводки — не перекрывает
   буквы/иконку. Кастомный курсор ОСТАЁТСЯ (не переходим в системный
   pointer — это ломает эстетику сайта). */
.cursor.is-precision {
  width: 6px;
  height: 6px;
  background: var(--cosmic);
  border-color: var(--cosmic);
}

/* КРИТИЧНО: перебить базовый reset `button { cursor: pointer }` (styles.css:14)
   на precision-контролах. Без этого правила Safari над <button.lang-switch__btn>
   и <button.theme-toggle> показывает СИСТЕМНОГО ПАЛЬЧИКА-руку рядом с нашим
   кастомным курсором — дубль, ломает эстетику. Specificity (0,1,0) побеждает
   (0,0,1) у базового `button { cursor: pointer }` без !important. */
.lang-switch__btn,
.lang-switch__sep,
.theme-toggle {
  cursor: none;
}

/* Контактный раздел и форма заявки: перебиваем все системные cursor:pointer
   (button reset, .lead-form__submit, .lead-radio, .custom-select__trigger,
   .custom-select__option, .lead-checkbox), чтобы рядом с кастомным кругляшком
   не появлялся системный пальчик. */
#contact,
#contact *,
.lead-form,
.lead-form * {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

/* =============================================================
   Header
   ============================================================= */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px var(--gutter);
  transition: background-color 0.5s var(--ease),
              backdrop-filter 0.5s var(--ease),
              border-color 0.5s var(--ease),
              color 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

/* Transparent on hero, white text */
.header:not(.is-solid) { color: #fff; }
.header:not(.is-solid) .logo__mark { color: #fff; }
.header:not(.is-solid) .nav__link { color: rgba(255, 255, 255, 0.85); }
.header:not(.is-solid) .lang-switch__btn,
.header:not(.is-solid) .lang-switch__sep { color: rgba(255, 255, 255, 0.85); }
.header:not(.is-solid) .burger span { background: #fff; }
/* Когда мобильное меню открыто — X должен контрастировать с кремовым фоном меню */
.header:not(.is-solid) .burger.is-open span { background: var(--ink); }

/* Scrolled — cream blur bar */
.header.is-solid {
  background: rgba(250, 248, 243, 0.82);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--rule);
}
/* В тёмной теме скроллированный хедер — warm-dark с тем же blur */
[data-theme="dark"] .header.is-solid {
  background: rgba(24, 20, 15, 0.82);
  border-bottom-color: rgba(240, 234, 221, 0.08);
}

.logo {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.logo__mark { color: var(--ink); transition: color 0.5s var(--ease); }
.logo__mark--italic {
  font-style: italic;
  color: var(--cosmic);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.nav {
  display: flex;
  gap: 36px;
  align-items: center;
}
.nav__link {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color 0.4s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--cosmic);
  transition: right 0.35s var(--ease);
}
.nav__link:hover::after { right: 0; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.lang-switch__btn {
  color: var(--ink-mute);
  padding: 4px 2px;
  transition: color 0.35s var(--ease);
  position: relative;
}
.lang-switch__btn.is-active {
  color: var(--cosmic);
}
.lang-switch__btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: var(--cosmic);
}
.lang-switch__sep { color: var(--ink-mute); opacity: 0.5; }

/* --- Header controls group ---
   Обёртка над .lang-switch и .theme-toggle. Группирует их в один flex-
   элемент, чтобы justify-content: space-between в .header__inner распределял
   промежутки между ТРЕМЯ блоками (logo / nav / controls), а не пятью.
   До введения этой обёртки 5 элементов раскидывались равномерно, и nav
   съезжала сильно влево. */
.header__controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* --- Theme toggle (sun/moon, рядом с lang-switch) ---
   Иконки — inline SVG для точного контроля штриха (1.5px). В каждой теме
   видна ОДНА иконка — та, что переключит на противоположную:
   - light → видна луна (☾), клик → dark
   - dark  → видно солнце (☀), клик → light
   Размер 16px икон внутри 28px touch-таргета — достаточный tap-area для iOS. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-mute);
  transition: color 0.35s var(--ease), transform 0.4s var(--ease);
}
.theme-toggle:hover {
  color: var(--cosmic);
  transform: rotate(-18deg);
}
.theme-toggle:focus-visible {
  outline: 1px solid var(--cosmic);
  outline-offset: 4px;
}
.theme-toggle__icon {
  width: 16px;
  height: 16px;
  display: block;
  transition: opacity 0.3s var(--ease);
}
/* В светлой теме скрываем солнце — видна луна */
[data-theme="light"] .theme-toggle__icon--sun { display: none; }
/* В тёмной — скрываем луну, видно солнце */
[data-theme="dark"]  .theme-toggle__icon--moon { display: none; }

/* На hero (хедер прозрачный) иконка белая — как RU/EN текст */
.header:not(.is-solid) .theme-toggle { color: rgba(255, 255, 255, 0.85); }

.burger {
  display: none;
  width: 36px;
  height: 36px;
  position: relative;
}
.burger span {
  position: absolute;
  left: 6px; right: 6px;
  height: 1px;
  background: var(--ink);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease), top 0.4s var(--ease);
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 22px; }
.burger.is-open span:nth-child(1) { top: 18px; transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { top: 18px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper-deep);
  z-index: 95;
  padding: 120px var(--gutter) 60px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mobile-menu__link {
  font-family: var(--display);
  font-size: clamp(48px, 12vw, 88px);
  line-height: 0.95;
  color: var(--ink);
  letter-spacing: -0.025em;
}
.mobile-menu__link:hover,
.mobile-menu__link:focus {
  color: var(--cosmic);
  font-style: italic;
}
.mobile-menu__foot {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

/* Compact lang toggle — видим ТОЛЬКО на mobile (<=1023px).
   На desktop скрыт, язык переключается через .lang-switch (RU / EN).
   На mobile заменяет .lang-switch, показывая только текущий язык. */
.lang-compact {
  display: none;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--ink);
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  cursor: none;
  position: relative;
}
.lang-compact::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 6px;
  height: 1px;
  background: var(--cosmic);
  transition: left 0.35s cubic-bezier(0.2, 0.7, 0.15, 1),
              right 0.35s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.lang-compact:hover::after,
.lang-compact:focus-visible::after { left: 20%; right: 20%; }
.header:not(.is-solid) .lang-compact { color: rgba(255, 255, 255, 0.85); }

/* =============================================================
   HERO (sticky scroll-scrub)
   ============================================================= */
.hero-scroll {
  position: relative;
  width: 100%;
  /* Высота = сколько «дороги» прокрутки выделяем на скраб видео.
     230vh = 100vh на экран + 130vh дистанции прокрутки.
     Подобрано под ~6.04 сек hero-видео (≈21.5vh прокрутки на 1 сек). */
  height: 230vh;
  background: #0a0907;
}
.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}
.hero__frame {
  position: absolute;
  /* top=69px — под fixed-хедером (padding 20px + ~29px контента),
     чтобы при скрабе голова героя не уезжала под кремовую плашку
     хедера. Остальные края — до границы экрана для полноэкранного
     hero (боковые отступы и нижнего letterbox нет).
     Мобильный override в @media (hover: none) перебивает это значение
     на inset: auto. */
  inset: 69px 0 0 0;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* contain — главное видео показывается целиком, ни голова ни медали
     не режутся. Зазоры по краям (letterbox на не-16:9 экранах) заполняет
     .hero__video--backdrop — блюренная копия того же видео под этим слоем.
     Это даёт ambient-glow эффект вместо чёрных полос. */
  object-fit: contain;
  object-position: center center;
  z-index: 1; /* поверх backdrop */
}
/* Ambient backdrop: блюренная копия hero.mp4 играет в реальном времени
   (не скрабится), заполняя зазоры при contain-fit главного видео.
   Сильный blur прячет desync с основным скрабом — выглядит как
   амбиентная цветовая подсветка, меняющаяся вместе со сценой.
   На mobile скрывается через @media media query — там 9:16 видео
   заполняет frame полностью без zазоров. */
.hero__video--backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  /* scale(1.15) прячет размытые края, которые blur()
     выводит за границы viewport (blur расширяет хит-бокс). */
  transform: scale(1.15);
  transform-origin: center center;
  filter: blur(45px) saturate(1.2);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  will-change: filter;
}
/* Intro-анимация и scale(0.92) — ТОЛЬКО для desktop-видео.
   Mobile-видео (.hero__video--mobile) full-screen 9:16 через cover,
   ему scale не нужен и object-fit другой — поэтому выделено
   в отдельный селектор, чтобы heroFade не затрагивал mobile. */
.hero__video--desktop {
  transform-origin: center top;
  animation: heroFade 1400ms var(--ease) 100ms both;
  will-change: transform, filter;
}
/* heroFade = intro (opacity + blur + лёгкий zoom-in).
   В новом hero-видео (2026-04-16) логотипы уже имеют 10% safe margin
   от краёв кадра — scale(0.92) больше не нужен для breathing room.
   Финальный scale = 1.0, видео выходит в полный размер. */
@keyframes heroFade {
  from { opacity: 0; transform: scale(1.04); filter: blur(14px); }
  to   { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Тонкий градиентный вигнет сверху и снизу — читаемость UI-маркеров */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, transparent 18%, transparent 70%, rgba(0,0,0,0.65) 100%);
  z-index: 2;
}

.hero__marker {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  z-index: 5;
  opacity: 0;
  animation: markerFade 900ms var(--ease) 1100ms forwards;
}
.hero__marker--br { bottom: 60px; right: var(--gutter); }

/* Верх-право: editorial подпись к видео (live-dot + mono-caption) */
.hero__marker--tr {
  top: clamp(96px, 11vh, 130px);
  right: var(--gutter);
}

/* Мета-текст: наследует mono uppercase от .hero__marker */
.hero__mark-meta { color: inherit; }

/* Пульсирующая точка-live для подписи к видео */
.hero__mark-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cosmic);
  box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.18);
  animation: dotPulse 2.6s var(--ease-in-out) infinite;
  transform: translateY(-1px);
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(210, 85, 42, 0.08); }
}

.hero__arrow {
  animation: bob 2.4s var(--ease-in-out) infinite;
  display: inline-block;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@keyframes markerFade {
  to { opacity: 1; }
}

/* Прогресс-бар снизу */
.hero__progress {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 28px;
  height: 14px;
  z-index: 5;
  opacity: 0;
  animation: markerFade 900ms var(--ease) 1200ms forwards;
}
.hero__progress::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}
.hero__progress-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--cosmic);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.18s linear;
  box-shadow: 0 0 12px rgba(210, 85, 42, 0.6);
}
.hero__progress-label {
  position: absolute;
  right: 0;
  bottom: 6px;
  display: flex;
  gap: 10px;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7) !important;
  font-variant-numeric: tabular-nums;
}
.hero__progress-label > :last-child {
  color: var(--cosmic);
  min-width: 3.5ch;
  text-align: right;
}

/* Editorial табличка под экспонатом — только mobile */
.hero__plate {
  display: none;
}

/* Два <video> в .hero__frame: desktop (16:9) и mobile (9:16).
   По умолчанию mobile скрыто — показывается только в touch-media.
   Force-show класс нужен для fallback, когда hero-mobile.mp4 не грузится
   и JS принудительно возвращает desktop-видео на мобилке. */
.hero__video--mobile { display: none; }
.hero__video--force-show { display: block !important; }

/* Fallback: если скраб отключён (touch / reduced motion) —
   скрываем прогресс и time, видео играет обычным loop */
.hero-scroll.no-scrub {
  height: 100vh;
}
.hero-scroll.no-scrub .hero__progress { display: none; }

/* =============================================================
   Generic section shell
   ============================================================= */
.section {
  position: relative;
  padding: clamp(100px, 14vw, 200px) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
}

/* Reveal base state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition: opacity 1s var(--ease),
              transform 1s var(--ease),
              filter 1s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; filter: none; }
  .hero__video { animation: none; }
}

/* =============================================================
   MEET (единый блок: биография + регалии + услуги)
   Заменил бывшие .about + .discipline + .hero-marquee — всю
   identity-подачу собрали в одну секцию с одним фото (с медалями).
   ============================================================= */
.section--meet {
  /* Маленький breathing room под hero — раньше был clamp(160px, 20vw, 260px),
     слишком огромный отступ из-за двойного padding (.section базовый + override). */
  padding-top: clamp(60px, 6vw, 96px);
  background: var(--paper-deep);
  border-bottom: 1px solid var(--rule);
}

/* Editorial asymmetric grid: label сверху, display-заголовок слева,
   портрет справа (колонна на всю высоту text-блока), body под заголовком,
   facts — внизу под текстом в своей колонке. */
.meet {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-areas:
    "label    portrait"
    "title    portrait"
    "body     portrait"
    "body     facts";
  gap: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 80px);
  align-items: start;
}

.meet__label {
  grid-area: label;
  align-self: start;
  /* Было: 11px mono uppercase border-top. Пользователь попросил 33px
     и линию ПОД словом (слово первое, потом серая линия). */
  font-size: 33px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 20px;
  line-height: 1;
}

/* Display Fraunces: «Из сборной России — в AI-пайплайны.»
   em наследует .display em { color: cosmic; font-style: italic }. */
.meet__title {
  grid-area: title;
  font-family: var(--display);
  font-size: clamp(40px, 5.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  max-width: 16ch;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
.meet__title em {
  font-style: italic;
  color: var(--cosmic);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

.meet__body {
  grid-area: body;
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.meet__body p {
  font-family: var(--body);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
/* Второй абзац — акцентный pullquote с характером Fraunces italic,
   как было в старом .about__body. Ломаем конвенцию «Fraunces только
   заголовки» ради одного editorial-момента. */
.meet__body p:nth-child(2) {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 300;
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  max-width: 28ch;
  margin-top: 4px;
}

/* Портрет с медалями. Документальная строгость — без rotate.
   Silver-tone через filter, tilt-shift через ::after mask. */
.meet__portrait {
  grid-area: portrait;
  position: relative;
  margin: 0;
  max-width: 440px;
  width: 100%;
  justify-self: end;
  align-self: start;
}
.meet__portrait img {
  display: block;
  width: 100%;
  height: auto;
  /* Natural портрет 3:4 — куртка сборной, крупно лицо и медали. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center center;
  border: 8px solid var(--paper);
  box-shadow:
    0 30px 60px -30px rgba(20, 17, 16, 0.35),
    0 14px 28px -14px rgba(20, 17, 16, 0.22);
}
/* Tilt-shift: размытие верхних и нижних 20% кадра, центр резкий. */
.meet__portrait::after {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,0) 20%,
    rgba(0,0,0,0) 80%,
    rgba(0,0,0,1) 100%);
}
.meet__portrait figcaption {
  margin-top: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: right;
}

/* Facts — компактный mono-список в правой колонке, под портретом.
   Based in / Since / Stack. justify-self: end визуально выравнивает по
   правому краю вместе с portrait'ом — они образуют единый identity-блок. */
.meet__facts {
  grid-area: facts;
  align-self: start;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  max-width: 320px;
}
.meet__facts li {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-size: 10px;
}
.meet__facts-key { color: var(--ink-mute); }
.meet__facts-val { color: var(--ink); }

/* =============================================================
   VARIANT A — EDITORIAL SPREAD
   Двухколоночный editorial layout. Слева: eyebrow с N°01, title,
   pull-quote Fraunces italic, краткий body, таймлайн-колонки.
   Справа: портрет в бумажной рамке с crop-marks + редакционная
   подпись "fig. 01 / Portrait · Dmitrii Lu".
   ============================================================= */
.meet-a {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: start;
}

.meet-a__main {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 4vw, 56px);
  min-width: 0;
}

/* Eyebrow: N°01 · Meet в одну линию, с разделителем-черточкой */
.meet-a__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.meet-a__num {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cosmic);
  font-weight: 500;
}
.meet-a__divider {
  flex: 0 0 32px;
  height: 1px;
  background: var(--rule);
}
.meet-a__label {
  font-size: 23px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

.meet-a__title {
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 80px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  max-width: 16ch;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
.meet-a__title em {
  font-style: italic;
  color: var(--cosmic);
  font-variation-settings: "opsz" 144, "SOFT" 40;
}

/* Pull-quote — большая italic цитата, с редакционными кавычками */
.meet-a__pullquote {
  margin: 0;
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 80, "wght" 300;
  max-width: 28ch;
  position: relative;
}

.meet-a__body {
  max-width: 50ch;
}
.meet-a__body p {
  font-family: var(--body);
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.meet-a__body p:last-child {
  margin-bottom: 0;
}

/* Список преимуществ — editorial-стиль с тонкими акцентами */
.meet-a__benefits {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meet-a__benefits li {
  font-family: var(--body);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
}
.meet-a__benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 12px;
  height: 1px;
  background: var(--cosmic);
}

/* Таймлайн: две эпохи в двух колонках, mono, с тонкими разделителями */
.meet-a__timeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}
.meet-a__era {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.meet-a__era-name {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cosmic);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.meet-a__era-dates {
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0.18em;
}
.meet-a__era-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.meet-a__era-list li {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.meet-a__era-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 6px;
  height: 1px;
  background: var(--cosmic);
}

/* Портрет с типографскими crop-marks по углам */
.meet-a__portrait {
  position: sticky;
  top: 120px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-self: start;
}
.meet-a__portrait-frame {
  position: relative;
  background: var(--paper);
  padding: clamp(12px, 1.5vw, 20px);
  box-shadow:
    0 30px 60px -30px rgba(20, 17, 16, 0.35),
    0 14px 28px -14px rgba(20, 17, 16, 0.22);
}
.meet-a__portrait-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
/* Crop marks — тонкие угловые маркеры как на типографских макетах */
.meet-a__crop {
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
}
.meet-a__crop::before,
.meet-a__crop::after {
  content: "";
  position: absolute;
  background: var(--cosmic);
}
.meet-a__crop::before { width: 14px; height: 1px; }
.meet-a__crop::after  { width: 1px; height: 14px; }
.meet-a__crop--tl { top: -7px; left: -7px; }
.meet-a__crop--tr { top: -7px; right: -7px; }
.meet-a__crop--tr::before { right: 0; }
.meet-a__crop--tr::after  { right: 0; }
.meet-a__crop--bl { bottom: -7px; left: -7px; }
.meet-a__crop--bl::before { bottom: 0; }
.meet-a__crop--bl::after  { bottom: 0; }
.meet-a__crop--br { bottom: -7px; right: -7px; }
.meet-a__crop--br::before { bottom: 0; right: 0; }
.meet-a__crop--br::after  { bottom: 0; right: 0; }

.meet-a__caption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.meet-a__caption-fig { color: var(--cosmic); }
.meet-a__caption-sep { opacity: 0.5; }

/* =============================================================
   MEET VARIANTS — RESPONSIVE
   ============================================================= */
@media (max-width: 1023px) {
  .meet-wrap--a { margin-left: 0; padding-left: 0; }

  .meet-a {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 56px);
    min-width: 0;
    overflow: hidden;
  }
  .meet-a__portrait {
    position: static;
    order: -1;
    max-width: 100%;
    width: 100%;
    min-width: 0;
  }
  .meet-a__portrait-frame {
    max-width: 100%;
    min-width: 0;
  }
  .meet-a__main {
    min-width: 0;
    overflow: hidden;
  }
  .meet-a__timeline {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .meet-a__title { font-size: clamp(36px, 9vw, 64px); }
}

@media (max-width: 640px) {
  .meet-a__pullquote { font-size: clamp(20px, 5.5vw, 28px); }
}

/* =============================================================
   MEET VARIANTS — DARK THEME ADJUSTMENTS
   ============================================================= */
[data-theme="dark"] .meet-a__portrait-frame { background: var(--paper-darker); }

/* =============================================================
   SERVICES
   ============================================================= */
.section--services {
  background: var(--paper-deep);
  max-width: none;
  margin: 0;
  position: relative;
  overflow-x: clip;                 /* содержит 100vw элементы CTA без гориз. скролла */
}
/* CTA-плашка сама является визуальным финалом секции — убираем нижний
   padding, чтобы между тёмной зоной и следующей секцией Work не было
   кремовой paper-deep полосы. Compound selector .section.section--services
   (0,2,0) перекрывает и базовое `.section { padding }` (0,1,0), и mobile
   override того же правила — независимо от порядка в файле. */
.section.section--services {
  padding-bottom: 0;
}
.section--services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0;                         /* было 0.08 — отключили noise для теста единой палитры */
  pointer-events: none;
  mix-blend-mode: multiply;
}
.section--services > * { position: relative; z-index: 2; }

/* Инвертированная раскладка: head — справа (sticky, running-head),
   список услуг — слева. Ломает конвенцию label→title→content. */
.services {
  max-width: none;
  margin: 0;
  padding: 0 clamp(40px, 6vw, 100px);
  display: grid;
  /* Колонка под заголовок «Что я делаю» — шире, чтобы текст помещался в одну строку. */
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: clamp(80px, 10vw, 160px);
  align-items: start;
}

.services__head {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  text-align: right;
}
.services__label {
  font-size: 23px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}
.services__title {
  font-size: clamp(28px, 3.5vw, 52px);
  line-height: 0.95;
  white-space: nowrap;
}

.services__list {
  display: flex;
  flex-direction: column;
  grid-column: 1;
  grid-row: 1;
  /* Сдвигаем список вниз, чтобы sticky-заголовок справа визуально оказался
     над первой услугой. С добавлением CTA-плашки секция стала длиннее —
     уменьшили отступ ~в 2 раза, чтобы общая высота не росла слишком сильно. */
  padding-top: clamp(60px, 10vw, 120px);
}
.service {
  position: relative;
  display: grid;
  /* [idx] [title auto-width] [aside растягивается] */
  grid-template-columns: 64px auto 1fr;
  align-items: baseline;
  gap: 32px;
  padding: 36px 32px 36px 0;
  border-top: 1px solid var(--rule);
  transition: transform 0.5s var(--ease),
              margin-left 0.5s var(--ease),
              padding 0.5s var(--ease),
              background-color 0.5s var(--ease),
              color 0.5s var(--ease);
  cursor: none;
}
.service:last-child { border-bottom: 1px solid var(--rule); }

/* Лесенка на 4 шага: равномерно 0 → 64 → 128 → 192 (max = 192px сохраняем). */
.service--step-1 { margin-left: 0; }
.service--step-2 { margin-left: clamp(27px, 4vw, 64px); }
.service--step-3 { margin-left: clamp(53px, 8vw, 128px); }
.service--step-4 { margin-left: clamp(80px, 12vw, 192px); }

/* =============================================================
   CTA «Manifesto» (5-й элемент: «Кастомная разработка и AI-консалтинг»)

   Full-bleed финальная зона секции — выход за рамки обычного list-item.
   Многослойная композиция:
     ::before  — тёмный cosmic-фон на всю ширину viewport
     .orb      — ambient orbital glow, медленно движется (28s цикл)
     .glyph    — огромный italic «?» как визуальный объект в фоне
     .rule     — тонкая редакционная линия над контентом
     .inner    — центрированный текст-манифест
   Курсор: весь блок — ссылка на #contact.
   ============================================================= */
/* CTA живёт вне <ol> — он sibling .services внутри .section--services.
   Родитель (section) имеет симметричный padding: var(--gutter) horizontal.
   Чтобы CTA растянулся на всю ширину viewport, достаточно вытянуть его
   negative inline-margin'ами на величину этого padding'а — ровно та работа,
   которую делает padding секции. Никаких 100vw-трюков не нужно. */
.service--cta {
  display: block;
  margin-top: clamp(96px, 12vw, 180px);
  margin-inline: calc(-1 * var(--gutter));  /* вытекает за padding секции с обеих сторон */
  padding: 0;
  border-top: none;
  border-bottom: none;
  cursor: none;
  position: relative;
  isolation: isolate;                       /* stacking context для z-index слоёв */
}
/* Compound selector (0,3,0) — перекрывает .service:hover (0,2,0), который
   по порядку в файле идёт позже и иначе бы победил. Без этого CTA получал
   translateX(14px) от базовой услуги и вылезал вправо, открывая бежевый
   фон слева. Перекрашивание заголовка в cosmic orange оставляем —
   оно приходит из `.service:hover .service__title span { color: cosmic }`
   и на CTA как раз уместно как финальный акцент. */
.service.service--cta:hover { transform: none; background: none; }

/* Тёмный cosmic-фон: два радиальных градиента на базовом угольном. */
.service--cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 82% 18%, rgba(210, 85, 42, 0.24), transparent 58%),
    radial-gradient(ellipse 50% 60% at 12% 85%, rgba(56, 36, 68, 0.38), transparent 62%),
    linear-gradient(180deg, #100a07 0%, #06040a 100%);
  z-index: -3;
}

/* Grain / film noise — тот же SVG feTurbulence, что на базовой секции. */
.service--cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 0.7  0 0 0 0 0.4  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: 0.12;
  z-index: -2;
  pointer-events: none;
}

/* Orbital glow-контейнер — полный inset <li>, clip'ит своих потомков (blur-
   круги), чтобы свечение не вылезало за пределы CTA-зоны. */
.service__cta-orb {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.service__cta-orb::before {
  content: "";
  position: absolute;
  width: clamp(480px, 55vw, 820px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 115, 72, 0.42), rgba(210, 85, 42, 0.08) 45%, transparent 68%);
  filter: blur(48px);
  top: -18%;
  right: -10%;
  animation: ctaOrbDrift 32s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
.service__cta-orb::after {
  content: "";
  position: absolute;
  width: clamp(360px, 40vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(148, 98, 222, 0.28), transparent 65%);
  filter: blur(52px);
  bottom: -10%;
  left: -8%;
  animation: ctaOrbDriftAlt 44s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

/* Огромный italic «?» как фоновый типографический объект.
   Связан с темой «уникальна?» из текста. Cosmic цвет, очень низкая opacity. */
.service__cta-glyph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(280px, 38vw, 560px);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  line-height: 0.72;
  color: var(--cosmic);
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Тонкая линия над контентом — редакционный cue, «разрыв главы». */
.service__cta-rule {
  position: absolute;
  top: clamp(64px, 8vw, 112px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(60px, 8vw, 120px);
  height: 1px;
  background: var(--cosmic);
  opacity: 0.7;
  z-index: 1;
}

/* Link-wrapper — сам <a> содержит всё. Padding создаёт высоту зоны. */
.service__cta-link {
  position: relative;
  display: block;
  padding: clamp(120px, 14vw, 200px) clamp(24px, 6vw, 80px);
  text-align: center;
  text-decoration: none;
  color: var(--paper);
  transition: transform 0.6s var(--ease);
}

/* Внутренняя обёртка контента — centered, ограниченная max-width. */
.service__cta-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  z-index: 2;
}

/* Kicker — mono-подпись над заголовком, как рубрика в журнале. */
.service__cta-kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cosmic);
  opacity: 0.85;
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Заголовок — крупный Fraunces, центрированный. Перекрывает services__title базовый. */
.service--cta .service__title {
  color: var(--paper);
  font-size: clamp(38px, 5.2vw, 80px);
  max-width: 18ch;
  margin: 0 auto;
  line-height: 1.02;
  letter-spacing: -0.015em;
  white-space: normal;                      /* перекрываем nowrap */
  font-variation-settings: "opsz" 144, "SOFT" 50;
}

/* Описание — заметно крупнее обычного services__desc, под editorial body */
.service__cta-desc {
  max-width: 580px;
  margin: clamp(28px, 3vw, 44px) auto 0;
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.62;
  color: rgba(248, 244, 234, 0.78);
}
.service__cta-desc em {
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--cosmic);
  opacity: 1;
  font-size: 1.08em;
  padding-right: 0.04em;
}

/* CTA-кнопка: крупнее, с разделёнными arrow + label, подчёркнутая тонкой линией. */
.service__cta-action {
  display: inline-flex;
  align-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  margin-top: clamp(44px, 5vw, 80px);
  font-size: 13px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cosmic);
  position: relative;
  padding: 12px 0 14px;
}
.service__cta-action-arrow {
  font-size: 18px;
  letter-spacing: 0;
  transition: transform 0.5s var(--ease);
  display: inline-block;
}
.service__cta-action::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48%;
  height: 1px;
  background: var(--cosmic);
  opacity: 0.55;
  transform: translateX(-50%);
  transition: width 0.55s var(--ease), opacity 0.55s var(--ease);
}

/* Hover: оживление — стрелка едет, линия расширяется, весь блок чуть приподнимается */
.service__cta-link:hover {
  transform: translateY(-3px);
}
.service__cta-link:hover .service__cta-action-arrow {
  transform: translateX(10px);
}
.service__cta-link:hover .service__cta-action::after {
  width: 100%;
  opacity: 1;
}
.service__cta-link:hover .service__cta-orb::before {
  animation-duration: 18s;                  /* glow оживляется быстрее при hover */
}

/* Motion keyframes */
@keyframes ctaOrbDrift {
  0%   { transform: translate(0, 0) scale(1);        opacity: 0.75; }
  50%  { transform: translate(-8vw, 5vh) scale(1.12); opacity: 0.95; }
  100% { transform: translate(-18vw, 14vh) scale(1.08); opacity: 0.65; }
}
@keyframes ctaOrbDriftAlt {
  0%   { transform: translate(0, 0) scale(1);        opacity: 0.55; }
  50%  { transform: translate(6vw, -8vh) scale(1.15); opacity: 0.75; }
  100% { transform: translate(14vw, -16vh) scale(1.05); opacity: 0.4; }
}

/* Уважение к prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .service__cta-orb::before,
  .service__cta-orb::after {
    animation: none;
  }
  /* Плавный transition темы отключаем для пользователей с reduced-motion */
  body, .section, .header, .footer, .mobile-menu, .service--cta,
  .theme-toggle, .theme-toggle__icon {
    transition: none;
  }
}

/* =============================================================
   CTA-МАНИФЕСТ — ИНВЕРСИЯ В ТЁМНОЙ ТЕМЕ
   В light-теме CTA — тёмная full-bleed плашка (кремовый текст).
   В dark-теме инвертируется: кремовый фон + тёмный текст.
   Создаёт контрапункт в обеих темах: тёмный → светлый остров → тёмный.
   Orb-градиенты приглушены (пурпур и оранж слишком яркие на светлом).
   ============================================================= */
[data-theme="dark"] .service--cta {
  background:
    radial-gradient(ellipse 60% 50% at 82% 18%, rgba(210, 85, 42, 0.22), transparent 58%),
    radial-gradient(ellipse 50% 60% at 12% 85%, rgba(148, 98, 222, 0.18), transparent 62%),
    linear-gradient(180deg, #F0EADD 0%, #E8E0CF 100%);
}
[data-theme="dark"] .service--cta .service__cta-link,
[data-theme="dark"] .service--cta .service__title {
  color: #141110;
}
[data-theme="dark"] .service--cta .service__cta-desc {
  color: rgba(20, 17, 16, 0.72);
}
/* Film grain overlay внутри CTA: в dark-теме на светлом фоне overlay-blend
   становится слишком выраженным — приглушаем opacity */
[data-theme="dark"] .service--cta::after {
  opacity: 0.08;
}

.service__idx {
  color: var(--ink-mute);
  font-size: 11px;
  transition: color 0.5s var(--ease);
}
.service__title {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1;
  max-width: 14ch;
}

/* Aside: контейнер для стрелки и описания справа от заголовка.
   Стрелка и описание занимают одно и то же место (absolute-overlay).
   Default: видна стрелка. Hover: стрелка fade-out, описание fade-in. */
.service__aside {
  grid-column: 3;
  position: relative;
  min-height: clamp(52px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: center;
}

.service__arrow {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 48px);
  font-style: italic;
  color: var(--cosmic);
  font-variation-settings: "opsz" 144, "SOFT" 100;
  transition: opacity 0.35s var(--ease),
              transform 0.5s var(--ease),
              color 0.5s var(--ease);
}

.service__desc {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-8px, -50%);
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: clamp(320px, 36vw, 480px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease),
              transform 0.5s var(--ease),
              color 0.5s var(--ease);
}

.service:hover {
  transform: translateX(14px);
  background: linear-gradient(90deg, rgba(210, 85, 42, 0.06), transparent 70%);
}
/* В тёмной теме усиливаем tint — 0.06 почти невидим на warm-dark */
[data-theme="dark"] .service:hover {
  background: linear-gradient(90deg, rgba(210, 85, 42, 0.14), transparent 70%);
}
.service:hover .service__arrow {
  opacity: 0;
  transform: translateX(-16px);
  color: var(--cosmic-deep);
}
.service:hover .service__desc {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.service:hover .service__title em,
.service:hover .service__title span { color: var(--cosmic); }

/* =============================================================
   WORK / PORTFOLIO
   ============================================================= */
.section--work { padding-top: clamp(120px, 16vw, 220px); }

.work {
  padding-left: clamp(80px, 14vw, 200px);
}
.work__head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: clamp(40px, 6vw, 88px);
}

/* Eyebrow Work — выравнен по размеру/цвету с .contact__label */
.work__label {
  font-size: 23px;
  letter-spacing: 1.5px;
  color: var(--ink);
}


/* =============================================================
   CTA — LARGE STATEMENT TILE
   Плитка как услуги, но больше и пустее. Асимметрия left/right.
   Единственный вариант CTA — зафиксирован после ревью.
   ============================================================= */
.cta-wrap--b {
  margin-top: 0;
  padding: 0 clamp(40px, 8vw, 200px);
}
.cta-b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  padding: clamp(56px, 6vw, 96px) clamp(44px, 5vw, 80px);
  border: 1px solid var(--paper-deep, rgba(20, 17, 16, 0.12));
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  transition: border-color 0.5s cubic-bezier(0.2, 0.7, 0.15, 1),
              background 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.cta-b:hover {
  border-color: var(--cosmic);
  background: rgba(210, 85, 42, 0.02);
}
.cta-b__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding-bottom: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--paper-deep, rgba(20, 17, 16, 0.1));
}
.cta-b__num {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--ink-mute);
}
.cta-b__label {
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.55;
}
.cta-b__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 10ch;
  align-self: center;
  text-wrap: balance;
}
.cta-b__title em {
  font-style: italic;
  color: var(--cosmic);
}
.cta-b__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 4vw, 56px);
  padding-top: clamp(8px, 1vw, 16px);
}
.cta-b__desc {
  font-family: var(--sans);
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.65;
  color: var(--ink);
  opacity: 0.75;
  max-width: 44ch;
  text-wrap: pretty;
}
.cta-b__action {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  align-self: flex-start;
  position: relative;
  padding: 10px 0;
}
.cta-b__action::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 1px;
  background: var(--ink);
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.cta-b:hover .cta-b__action::after { width: 100%; }
.cta-b__arrow {
  display: inline-block;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
  color: var(--cosmic);
  font-size: 16px;
}
.cta-b:hover .cta-b__arrow { transform: translateX(10px); }

/* Dark theme */
[data-theme="dark"] .cta-b { border-color: rgba(248, 244, 234, 0.14); }
[data-theme="dark"] .cta-b:hover { background: rgba(210, 85, 42, 0.05); }
[data-theme="dark"] .cta-b__head { border-bottom-color: rgba(248, 244, 234, 0.12); }
[data-theme="dark"] .cta-b__desc { opacity: 0.82; }
[data-theme="dark"] .cta-b__label { opacity: 0.6; }

/* =============================================================
   CTA variants — responsive
   ============================================================= */
@media (max-width: 1023px) {
  .cta-wrap--b {
    padding-left: clamp(24px, 5vw, 40px);
    padding-right: clamp(24px, 5vw, 40px);
  }
  .cta-b {
    grid-template-columns: 1fr;
    padding: clamp(40px, 5vw, 64px) clamp(28px, 4vw, 48px);
    gap: clamp(24px, 3vw, 40px);
  }
  .cta-b__title { font-size: clamp(40px, 7vw, 72px); }
}
@media (max-width: 640px) {
  .cta-b__title { font-size: clamp(36px, 10vw, 52px); }
  .cta-b__desc { font-size: 14px; }
}

/* =============================================================
   WORK — CINEMA CASES
   Full-width кейсы: media слева/справа, text рядом.
   ============================================================= */
.work-b {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 10vw, 140px);
}

.work-b__case {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  min-width: 0;
  overflow: hidden;
  position: relative; /* anchor для растянутой ссылки .work-b__cta::after */
}
.work-b__case--right {
  grid-template-columns: 1fr 1.3fr;
}
.work-b__case--right .work-b__media { order: 2; }
.work-b__case--right .work-b__text  { order: 1; }

.work-b__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--paper-darker);
}
.work-b__media video,
.work-b__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.work-b__case:hover .work-b__media video,
.work-b__case:hover .work-b__media img {
  transform: scale(1.03);
}

/* ---- PUCHIGANG card: окно под пропорции воркфлоу (full-bleed) ---- */
.work-b__case--puchi .work-b__media {
  aspect-ratio: 1763 / 625;
}

/* ---- KWORK card: вертикальный telegram-скрин показываем целиком ---- */
.work-b__case--kwork .work-b__media {
  aspect-ratio: 4 / 5;
  background: transparent;
}
.work-b__case--kwork .work-b__media img {
  object-fit: contain;
  object-position: center;
  padding: 0;
}

/* ---- Placeholder-кейсы (пока нет реального контента) ---- */
.work-b__case--placeholder { opacity: 0.62; }
.work-b__case--placeholder .work-b__media {
  background:
    repeating-linear-gradient(
      135deg,
      var(--paper-darker) 0 14px,
      var(--paper-deep) 14px 28px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  max-width: 100%;
  overflow: hidden;
}
.work-b__placeholder-mark {
  font-size: clamp(48px, 8vw, 96px);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--paper-cream);
  opacity: 0.28;
  letter-spacing: -0.02em;
  user-select: none;
}
.work-b__case--placeholder .work-b__title { color: var(--paper-cream); opacity: 0.75; }
.work-b__case--placeholder .work-b__desc  { font-style: italic; opacity: 0.8; }
.work-b__case--placeholder .work-b__cta   { pointer-events: none; opacity: 0.5; }

.work-b__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 440px;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.work-b__num {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.work-b__title {
  font-size: clamp(28px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 0;
  font-weight: 400;
  overflow-wrap: break-word;
}
.work-b__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--cosmic);
}

.work-b__desc {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 420px;
}

.work-b__tags {
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  max-width: 280px;
}

.work-b__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: fit-content;
  transition: gap 0.4s var(--ease);
}
.work-b__cta:hover { gap: 20px; }
.work-b__cta-arrow {
  font-family: var(--display);
  font-size: 18px;
  transition: transform 0.4s var(--ease);
}
.work-b__cta:hover .work-b__cta-arrow { transform: translateX(4px); }

/* Stretched link: ::after растягивается на всю карточку,
   делая любую её область кликабельной (картинка/текст/теги).
   Текст и медиа сами по себе не интерактивны, поэтому им не нужно z-index'а. */
.work-b__cta::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Защищаем placeholder-кейсы — у них cta отключена, не делаем их кликабельными */
.work-b__case--placeholder .work-b__cta::after { content: none; }

.work-b__more {
  margin: 0 auto;
  padding: 32px 0;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* =============================================================
   Responsive — Work
   ============================================================= */
@media (max-width: 900px) {
  .work-b__case,
  .work-b__case--right {
    grid-template-columns: 1fr;
    gap: 24px;
    min-width: 0;
    overflow: hidden;
  }
  .work-b__case--right .work-b__media { order: 1; }
  .work-b__case--right .work-b__text  { order: 2; }
  .work-b__text { max-width: 100%; }
  .work-b__media { aspect-ratio: 4 / 3; }
  .work-b__case--placeholder .work-b__media { min-height: 180px; aspect-ratio: 4 / 3; }
}

/* =============================================================
   CONTACT
   ============================================================= */
.section--contact {
  background: var(--paper-deep);
  max-width: none;
  margin: 0;
  padding-top: clamp(140px, 18vw, 240px);
  padding-bottom: clamp(100px, 14vw, 200px);
  position: relative;
}
.section--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.08  0 0 0 0 0.07  0 0 0 0 0.06  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0;                         /* было 0.08 — отключили noise для теста единой палитры */
  pointer-events: none;
  mix-blend-mode: multiply;
}
.section--contact > * { position: relative; z-index: 2; }

.contact {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: clamp(80px, 14vw, 200px);
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 80px);
}

.contact__label {
  align-self: center;
  /* Усиленный eyebrow — крупнее базового .mono (11px) для якорения секции.
     Цвет через --ink → адаптируется к light/dark теме. */
  font-size: 23px;
  letter-spacing: 1.5px;
  color: var(--ink);
}

.contact__title {
  font-size: clamp(40px, 6vw, 96px);
  max-width: 18ch;
}
.contact__title em {
  color: var(--cosmic);
  display: inline;
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 880px;
  border-top: 1px solid var(--rule);
  padding-top: 40px;
}
.contact__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: 8px;
  padding: 8px 0;
  transition: transform 0.5s var(--ease);
}
.contact__item-key { font-size: 10px; }
.contact__item-val {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variation-settings: "opsz" 144, "SOFT" 50;
  transition: color 0.4s var(--ease);
}
.contact__item-arrow {
  position: absolute;
  top: 8px;
  right: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 28px;
  color: var(--cosmic);
  transition: transform 0.5s var(--ease);
}
.contact__item:hover { transform: translateY(-4px); }
.contact__item:hover .contact__item-val { color: var(--cosmic); }
.contact__item:hover .contact__item-arrow { transform: translate(6px, -6px); }

/* =============================================================
   LEAD FORM — модернизированная секция контактов
   - 3 размещения (placement): inline | before | modal
   - 4 стиля (form-style): editorial | industrial | conversational | hybrid
   - 3 состава полей (fields): minimum | standard | extended
   ============================================================= */

/* --- 1. БАЗОВЫЕ СТРУКТУРЫ ----------------------------------- */

/* Контейнер формы — общий для всех размещений */
.lead-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
}
.lead-form__legend {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  gap: 16px;
  align-items: baseline;
}
.lead-form__legend-num {
  color: var(--cosmic);
  font-weight: 500;
}
.lead-form__title {
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  font-weight: 400;
  max-width: 18ch;
}
.lead-form__title em {
  font-style: italic;
  color: var(--cosmic);
  font-variation-settings: "opsz" 144, "SOFT" 60;
}

/* --- 2. EDITORIAL FIELDS (база, по умолчанию) ---------------- */

.lead-form__fields {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.lead-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}
.lead-field__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.lead-field__label-num {
  color: var(--cosmic);
  font-size: 9px;
}
.lead-field__label-required {
  font-size: 9px;
  color: var(--cosmic);
  letter-spacing: 0.1em;
}
.lead-field__input,
.lead-field__textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 12px 0 14px;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

/* --- КАСТОМНЫЙ ДРОПДАУН БЮДЖЕТА --- */
.lead-select-custom {
  position: relative;
  width: 100%;
}
.lead-select-custom__trigger {
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 12px 30px 14px 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.4s var(--ease);
  outline: none;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lead-select-custom__trigger:focus,
.lead-select-custom__trigger:hover {
  border-bottom-color: var(--cosmic);
}
.lead-select-custom__value {
  flex: 1;
}
.lead-select-custom__arrow {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
  color: var(--cosmic);
  margin-left: 8px;
}
.lead-select-custom.is-open .lead-select-custom__arrow {
  transform: rotate(180deg);
}
.lead-select-custom__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-top: 6px;
  max-height: 280px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(58, 49, 39, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.lead-select-custom.is-open .lead-select-custom__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lead-select-custom__option {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 14px 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lead-select-custom__option:hover {
  background: var(--cosmic);
  color: var(--paper);
}
.lead-select-custom__option:focus {
  outline: 2px solid var(--cosmic);
  outline-offset: -2px;
}
.lead-select-custom__option.is-selected {
  background: var(--paper-deep);
  font-weight: 500;
}

/* --- КАСТОМНЫЕ ЧЕКБОКСЫ (категории услуг) --- */
.lead-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.lead-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.lead-chip input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lead-chip span {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.3;
  color: var(--ink);
  padding: 10px 18px 10px 38px;
  border: 1px solid var(--rule);
  border-radius: 24px;
  position: relative;
  transition: all 0.25s var(--ease);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.lead-chip span::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--ink-mute);
  border-radius: 50%;
  background: transparent;
  transition: all 0.25s var(--ease);
}
.lead-chip span::after {
  content: '';
  position: absolute;
  left: 17px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform 0.2s var(--ease);
}
.lead-chip input:checked + span {
  background: var(--cosmic);
  color: var(--paper);
  border-color: var(--cosmic);
}
.lead-chip input:checked + span::before {
  background: var(--cosmic);
  border-color: var(--cosmic);
}
.lead-chip input:checked + span::after {
  transform: translateY(-50%) scale(1);
}
.lead-chip:hover span {
  border-color: var(--cosmic);
}
.lead-chip input:focus + span {
  outline: 2px solid var(--cosmic);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .lead-chips {
    gap: 8px;
  }
  .lead-chip span {
    font-size: 15px;
    padding: 8px 14px 8px 34px;
  }
  .lead-chip span::before {
    width: 16px;
    height: 16px;
    left: 10px;
  }
  .lead-chip span::after {
    width: 6px;
    height: 6px;
    left: 15px;
  }
}
.lead-field__textarea {
  resize: vertical;
  min-height: 90px;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  font-family: var(--body);
  letter-spacing: 0;
  padding-bottom: 18px;
}
.lead-field__input::placeholder,
.lead-field__textarea::placeholder {
  color: var(--ink-mute);
  opacity: 0.45;
  font-style: italic;
}
.lead-field__input:focus,
.lead-field__textarea:focus {
  border-bottom-color: var(--cosmic);
}
/* Floating focus underline (косметика) */
.lead-field::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--cosmic);
  transition: width 0.45s var(--ease);
  pointer-events: none;
}
.lead-field:focus-within::after {
  width: 100%;
}

/* --- CUSTOM SELECT DROPDOWN (для mobile + desktop единообразие) --- */
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-trigger {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 12px 30px 14px 0;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.3;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: border-color 0.4s var(--ease);
}
.custom-select-trigger::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D25529' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s var(--ease);
}
.custom-select-wrapper.is-open .custom-select-trigger::after {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select-wrapper.is-open .custom-select-trigger {
  border-bottom-color: var(--cosmic);
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin-top: 8px;
  padding: 8px 0;
  max-height: 280px;
  overflow-y: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.08);
}
.custom-select-wrapper.is-open .custom-select-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.custom-select-option {
  padding: 12px 16px;
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  user-select: none;
}
.custom-select-option:hover {
  background: var(--paper-deep);
}
.custom-select-option.is-selected {
  color: var(--cosmic);
  font-weight: 500;
  background: rgba(210, 85, 41, 0.06);
}

/* Прячем native select визуально, но оставляем в DOM для accessibility + form submit */
select[name="budget"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- END CUSTOM SELECT --- */


/* Honeypot — невидимое поле для ботов */
.lead-field--hp {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* --- 3. SUBMIT + STATES ------------------------------------- */

.lead-form__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 8px;
}
.lead-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 18px 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.3s var(--ease);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.lead-form__submit:hover {
  background: var(--cosmic);
  transform: translateY(-2px);
}
.lead-form__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.lead-form__submit-arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease);
}
.lead-form__submit:hover .lead-form__submit-arrow {
  transform: translate(4px, -4px);
}

/* States: idle / sending / success / error */
.lead-form[data-state="sending"] .lead-form__submit-label::after {
  content: "…";
  display: inline-block;
  animation: leadDots 1.2s steps(4, end) infinite;
}
@keyframes leadDots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

.lead-form__status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  min-height: 1.4em;
  padding-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.lead-form__status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
  transition: background 0.4s var(--ease);
}
.lead-form[data-state="success"] .lead-form__status { color: var(--ink); }
.lead-form[data-state="success"] .lead-form__status::before { background: var(--cosmic); box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.18); }
.lead-form[data-state="error"]   .lead-form__status { color: var(--cosmic-deep); }
.lead-form[data-state="error"]   .lead-form__status::before { background: var(--cosmic-deep); }

/* --- 4. РАЗМЕЩЕНИЕ: INLINE (форма + контакты в две колонки) -
   Финальный выбор: inline-вариант. Селекторы [data-placement="inline"]
   сохранены как guard на случай если body вдруг потеряет атрибут. */

[data-placement="inline"] .contact__grid {
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}
[data-placement="inline"] .lead-host--inline {
  display: block;
  border-right: 1px solid var(--rule);
  padding-right: clamp(32px, 4vw, 64px);
}
[data-placement="inline"] .contact__direct {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
[data-placement="inline"] .contact__item {
  border-top: 1px solid var(--rule);
  padding: 16px 0 12px;
}
[data-placement="inline"] .contact__item:last-child {
  border-bottom: 1px solid var(--rule);
}
[data-placement="inline"] .contact__item-val {
  font-size: clamp(20px, 2vw, 28px);
}

@media (max-width: 900px) {
  [data-placement="inline"] .contact__grid {
    grid-template-columns: 1fr;
  }
  [data-placement="inline"] .lead-host--inline {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 48px;
    margin-bottom: 16px;
  }
}

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  padding: 40px var(--gutter);
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
}
.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* =============================================================
   Language cross-fade
   ============================================================= */
[data-ru][data-en] {
  transition: opacity 0.25s ease;
}
body.lang-swapping [data-ru][data-en] {
  opacity: 0;
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1023px) {
  /* На mobile скрываем .nav и десктопный .lang-switch — язык переключается
     через .lang-compact. Группируем lang + theme + burger в компактный
     блок справа: .header__controls работает как flex с небольшим gap,
     .burger становится ЕГО child'ом (а не соседом), и вся тройка
     прижимается к правому краю через justify-content: space-between
     в .header__inner (logo слева — controls справа). */
  .nav, .header .lang-switch { display: none; }
  .lang-compact { display: inline-flex; }
  .header__controls {
    display: flex;
    align-items: center;
    gap: 8px; /* плотная группировка: ~8px между lang / theme / burger */
  }
  .burger { display: block; }

  .meet, .services, .work, .contact { margin-left: 0; padding-left: 0; }

  /* Meet: одна колонка, портрет между заголовком и body. */
  .meet {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "portrait"
      "body"
      "facts";
  }
  .meet__portrait { justify-self: start; max-width: 100%; }
  .meet__portrait img { aspect-ratio: 3 / 4; max-height: 70vh; }
  .meet__portrait figcaption { text-align: left; }
  .meet__title { font-size: clamp(32px, 9vw, 56px); max-width: none; }
  .meet__label { font-size: clamp(22px, 6vw, 30px); }
  .meet__facts { justify-self: start; max-width: 100%; }

  /* Services: на мобиле возвращаем нормальный стек (head сверху) */
  .services { display: block; }
  .services__head {
    position: static;
    align-items: flex-start;
    text-align: left;
    margin-bottom: clamp(40px, 6vw, 80px);
    max-width: 680px;
  }
  .services__title { font-size: clamp(40px, 11vw, 72px); }

  .services__list { padding-top: 0; }

  .service {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 8px 18px;
  }
  /* На мобиле лесенку отключаем — пункты выравниваем по левому краю */
  .service--step-1,
  .service--step-2,
  .service--step-3,
  .service--step-4 { margin-left: 0; }

  /* На мобиле aside становится отдельной строкой снизу.
     Стрелка справа-сверху, описание под заголовком — видно всегда. */
  .service__aside {
    grid-column: 1 / -1;
    grid-row: 2;
    position: static;
    min-height: 0;
    display: block;
    margin-top: 8px;
  }
  .service__arrow {
    position: absolute;
    top: 36px;
    right: 0;
  }
  .service__desc {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-width: none;
    font-size: 15px;
  }
  /* На мобиле убираем hover-сдвиги, иначе они срабатывают при tap */
  .service:hover { transform: none; background: none; }
  .service:hover .service__arrow { transform: none; opacity: 1; }
  .service:hover .service__desc { transform: none; }

  /* CTA Manifesto на мобиле: full-bleed сохраняется (100vw работает как на desktop).
     Padding и типографика масштабируются под узкий viewport. Декоративные
     элементы (orb, glyph) уменьшены, но остаются — motion и cosmic atmosphere
     должны чувствоваться и на телефоне, это главная emotional точка секции. */
  .service--cta {
    margin-top: clamp(64px, 14vw, 120px);
    grid-template-columns: none;
  }
  .service__cta-link {
    padding: clamp(88px, 22vw, 140px) clamp(24px, 6vw, 40px);
  }
  .service__cta-kicker {
    font-size: 10px;
    letter-spacing: 0.22em;
    margin-bottom: 20px;
  }
  .service--cta .service__title {
    font-size: clamp(28px, 7.5vw, 44px);
    max-width: 13ch;
    letter-spacing: -0.01em;
  }
  .service__cta-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 24px;
  }
  .service__cta-action {
    font-size: 12px;
    letter-spacing: 0.22em;
    margin-top: 36px;
    gap: 12px;
  }
  .service__cta-glyph {
    font-size: clamp(200px, 55vw, 340px);
  }
  .service__cta-orb::before {
    width: 360px;
    filter: blur(36px);
  }
  .service__cta-orb::after {
    width: 280px;
    filter: blur(40px);
  }
  .service__cta-rule {
    top: clamp(48px, 12vw, 72px);
    width: clamp(44px, 10vw, 60px);
  }

  .contact__grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Touch-устройства (iOS / Android) — editorial gallery card
   ============================================================= */
@media (hover: none), (pointer: coarse) {
  /* Hero — занимает natural высоту видео (9:16). Никаких фиксированных
     100svh, никаких min()/max() магий. Видео через width: 100% +
     aspect-ratio: 9/16 само задаёт свою высоту, hero подстраивается
     под него. Под hero сразу начинается секция "Обо мне" — без
     чёрных полос, без обрезки, без letterbox.
     ВАЖНО: компаунд-селектор `.hero-scroll.no-scrub` нужен для
     override правила `.hero-scroll.no-scrub { height: 100vh }`
     (строка ~496) — у него специфичность (0,0,2,0), у простого
     `.hero-scroll` (0,0,1,0), без компаунда мой override молча
     игнорируется. JS добавляет класс .no-scrub на mobile всегда
     (touch → useScrub=false → no-scrub добавляется в script.js). */
  .hero-scroll,
  .hero-scroll.no-scrub {
    height: auto;
    min-height: 0;
    background: #0a0907;
  }
  .hero__sticky {
    position: relative;
    display: block;
    height: auto;
    width: 100%;
    padding: 0;
    background: transparent;
    overflow: visible;
  }

  /* Frame — простой wrapper, размеры определяются видео внутри */
  .hero__frame {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: auto;
    border: none;
    box-shadow: none;
  }

  /* Desktop-видео и ambient-backdrop скрыты на mobile */
  .hero__video--desktop { display: none; }
  .hero__video--backdrop { display: none; }

  /* Mobile-видео: width 100% + aspect-ratio 9/16 — элемент сам
     имеет высоту пропорциональную ширине × 16/9. Video 720×1280
     вписывается через cover идеально (одинаковое соотношение).
     aspect-ratio на элементе — safeguard: если видео не загрузится,
     элемент сохранит 9:16 пропорции и hero не схлопнется в 0. */
  .hero__video--mobile {
    display: block;
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    object-position: center center;
  }

  /* Editorial brackets в углах не работают на full-screen — скрываем */
  .hero__frame::before,
  .hero__frame::after { display: none; }

  /* Отключаем desktop-декор hero */
  .hero__vignette { display: none; }
  .hero__marker--br,
  .hero__marker--tr,
  .hero__progress { display: none; }

  /* Плита с live-индикатором — абсолютно позиционирована снизу-слева,
     поверх видео, с тенью для читаемости. */
  .hero__plate {
    display: flex;
    position: absolute;
    bottom: clamp(28px, 8vh, 48px);
    left: clamp(20px, 5vw, 28px);
    z-index: 3;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  }
  .hero__plate-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cosmic);
    box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.18);
    animation: platePulse 2.6s var(--ease-in-out) infinite;
  }
  .hero__plate-sep {
    opacity: 0.4;
    margin: 0 2px;
  }
  @keyframes platePulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(210, 85, 42, 0.18); }
    50%      { box-shadow: 0 0 0 6px rgba(210, 85, 42, 0.08); }
  }

  /* Header overlay — прозрачный с backdrop blur для читаемости текста
     поверх пёстрого видео. Когда скроллим вниз и класс .is-solid
     добавляется JS'ом — header становится обычным. */
  .header:not(.is-solid) {
    background: transparent;
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .header { padding: 16px 20px; }
  .logo { font-size: 18px; }

  .section { padding: 100px 20px; }
  :root { --gutter: 20px; }

  .meet__title { font-size: clamp(32px, 11vw, 64px); }
  .services__title { font-size: clamp(40px, 11vw, 72px); }
  .contact__title { font-size: clamp(40px, 12vw, 72px); }

  .service__title { font-size: clamp(24px, 7vw, 40px); }
  .service__desc { font-size: 14px; }

  .footer__inner { justify-content: flex-start; flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   VOICE ASSISTANT — bubble-вариант, перенесён из Claude Design 2026-05-12.
   Скелет: .voice-widget#voiceWidget[data-state="closed|open"] →
   trigger (.voice-trigger--bubble — органический blob с циклом
   mic ↔ robot) + panel (.voice-panel). SDK-state (connecting/listening/
   speaking/error) живёт в отдельном атрибуте data-sdk-state на корне.
   Палитра — CSS-переменные сайта, auto-адаптация под dark theme.
   ============================================================= */

.voice-widget {
  position: fixed;
  z-index: 8500;
  right: clamp(20px, 2.4vw, 32px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;             /* блокируем перехват скролла */
  font-family: var(--body);
}

/* ---------- Trigger base ---------- */
.voice-trigger {
  pointer-events: auto;
  position: relative;
  display: none;                    /* видимость по data-state */
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;                     /* кастомный курсор сайта (см. CLAUDE.md) */
  outline: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.15, 1),
              opacity 0.3s var(--ease);
  transform-origin: center right;
}
.voice-trigger:focus-visible {
  outline: 2px solid var(--cosmic);
  outline-offset: 6px;
  border-radius: 4px;
}
.voice-trigger:hover { transform: translateX(-2px); }

/* В closed состоянии показываем триггер с opacity: 1 (без этого
   transition opacity на .voice-trigger держит блоб полупрозрачным
   и он выглядит тусклым — особенно заметно на mobile, где blob 44px). */
.voice-widget[data-state="closed"] .voice-trigger--bubble {
  display: inline-flex;
  opacity: 1;
}
.voice-widget[data-state="open"] .voice-trigger { display: none; }

/* ---------- BUBBLE-вариант — органический blob с циклом mic ↔ robot ---------- */
.voice-trigger--bubble {
  position: relative;
  width: 92px; height: 92px;
  align-items: center; justify-content: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.15, 1);
}
.voice-trigger--bubble:hover { transform: translateX(-4px) scale(1.05); }

.voice-trigger--bubble .vt-blob,
.voice-trigger--bubble .vt-blob-layer {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 50% 50%;
  will-change: border-radius, transform;
}

/* Halo-слои отключены — только основной blob без шлейфа */
.voice-trigger--bubble .vt-blob-layer { display: none; }

/* Основной blob: радиальный градиент cosmic + морфинг границы */
.voice-trigger--bubble .vt-blob {
  width: 76px; height: 76px;
  margin: -38px 0 0 -38px;
  background:
    radial-gradient(circle at 32% 28%, #FFC8A6 0%, #F08750 32%, var(--cosmic) 70%, #B84418 100%);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    0 6px 14px -6px rgba(20,17,16,0.3),
    inset 0 2px 0 rgba(255,255,255,0.35),
    inset 0 -8px 16px -6px rgba(120,40,12,0.4);
  animation: bubble-morph-core 5s ease-in-out infinite;
}

/* Mic / robot внутри — sway-контейнер + cross-cycle двух лиц.
   Цикл 14s: 0-3s mic, 3-5s mic тонет в желе, 5-7s robot всплывает,
   7-10s robot, 10-12s robot тонет, 12-14s mic всплывает. */
.voice-trigger--bubble .vt-mic-sway {
  position: relative;
  display: inline-block;
  width: 26px; height: 26px;
  animation: bubble-mic-sway 3.2s ease-in-out infinite;
  transform-origin: 50% 60%;
  filter: drop-shadow(0 1px 0 rgba(120,40,12,0.5));
}
.voice-trigger--bubble .vt-face {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  line-height: 1;
  will-change: opacity, transform, filter;
}
.voice-trigger--bubble .vt-face--mic   { animation: bubble-face-cycle 14s ease-in-out infinite; }
.voice-trigger--bubble .vt-face--robot { animation: bubble-face-cycle 14s ease-in-out -7s infinite; }

/* ---------- HANDSET variants (телефонная трубка вместо микрофона) ----------
   В HTML внутри .vt-face--mic (FAB-триггер) лежат ТРИ SVG телефонной
   трубки: --modern (outline), --rotated (outline -45°), --filled (solid).
   Атрибут body[data-handset="..."] выбирает один вариант, остальные
   скрыты. Filled — solid black trubka, выбран по умолчанию через
   __tweakDefaults и data-handset="filled" на каждом body.
   (Ранее трубка также показывалась внутри popover в .voice-panel__mic-core,
   но после перехода на chat-transcript этот элемент удалён.) */
.vt-handset { display: none; }
body[data-handset="modern"]  .vt-handset--modern,
body[data-handset="rotated"] .vt-handset--rotated,
body[data-handset="filled"]  .vt-handset--filled { display: inline-block; }
/* Цвет filled-трубки — ВСЕГДА чёрный на оранжевом круге (контраст),
   независимо от темы. Жёстко #000, НЕ var(--ink), потому что --ink
   переключается на светлый в dark theme — трубка стала бы белой.
   Использует currentColor через `fill="currentColor"` в SVG markup. */
.voice-trigger--bubble .vt-handset--filled { color: #000; }

@keyframes bubble-face-cycle {
  /* 0-21% (0-3s) — лицо стоит на месте, полностью видно */
  0%, 21% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) saturate(1);
  }
  /* 21-36% (3-5s) — лицо уходит в желе: уменьшается, размывается, проваливается вглубь */
  36% {
    opacity: 0;
    transform: scale(0.35) translateY(3px);
    filter: blur(7px) saturate(1.4);
  }
  /* 36-86% (5-12s) — скрыто, в это время другое лицо живёт */
  86% {
    opacity: 0;
    transform: scale(0.35) translateY(3px);
    filter: blur(7px) saturate(1.4);
  }
  /* 86-100% (12-14s) — всплывает обратно */
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0) saturate(1);
  }
}

/* Морфинг границы blob — вязкая жижа */
@keyframes bubble-morph-core {
  0%, 100% {
    border-radius: 58% 42% 53% 47% / 48% 56% 44% 52%;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  20% {
    border-radius: 38% 62% 65% 35% / 55% 42% 58% 45%;
    transform: translate(-48%, -53%) rotate(10deg) scale(1.05);
  }
  40% {
    border-radius: 52% 48% 35% 65% / 65% 35% 62% 38%;
    transform: translate(-52%, -47%) rotate(-8deg) scale(0.95);
  }
  60% {
    border-radius: 65% 35% 50% 50% / 38% 60% 40% 62%;
    transform: translate(-54%, -50%) rotate(6deg) scale(1.03);
  }
  80% {
    border-radius: 45% 55% 60% 40% / 50% 60% 40% 50%;
    transform: translate(-48%, -52%) rotate(-5deg) scale(0.98);
  }
}
@keyframes bubble-mic-sway {
  0%, 100% { transform: rotate(0deg)   translate(0, 0); }
  25%      { transform: rotate(-6deg)  translate(-1.5px, 1.5px); }
  50%      { transform: rotate(1deg)   translate(0, -1.5px); }
  75%      { transform: rotate(6deg)   translate(1.5px, 1px); }
}

/* ---------- Panel — раскрытое состояние ---------- */
.voice-panel {
  pointer-events: auto;
  position: relative;
  /* Размер увеличен после перехода на chat-transcript: убран аватар-блоб
     и 2 чипа, появилось основное content-поле для диалога. 340×460 даёт
     достаточно вертикального места для 4-6 bubbles + auto-scroll. */
  width: 340px;
  min-height: 460px;
  max-height: 70svh;
  padding: 18px;
  display: none;
  flex-direction: column;
  gap: 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  border: 1px solid var(--rule);
  box-shadow:
    0 30px 60px -16px rgba(20,17,16,0.35),
    0 10px 22px -6px rgba(20,17,16,0.2);
  transform-origin: top right;
  animation: voice-panel-in 0.42s cubic-bezier(0.2, 0.7, 0.15, 1) both;
}
.voice-widget[data-state="open"] .voice-panel { display: flex; }
@keyframes voice-panel-in {
  from { opacity: 0; transform: scale(0.55) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* Header row: статус слева + close × справа */
.voice-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.voice-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.voice-panel__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cosmic);
  box-shadow: 0 0 0 0 rgba(210,85,42,0.55);
  animation: voice-panel-dot 1.6s ease-out infinite;
}
@keyframes voice-panel-dot {
  0%  { box-shadow: 0 0 0 0 rgba(210,85,42,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(210,85,42,0); }
  100%{ box-shadow: 0 0 0 0 rgba(210,85,42,0); }
}
.voice-panel__close {
  pointer-events: auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.voice-panel__close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* «error» state — статус-текст красится в cosmic-deep (контрастно) */
.voice-widget[data-sdk-state="error"] .voice-panel__status-text { color: var(--cosmic-deep); }

/* Чип «Как связаться?» (единственный сохранённый prompt) */
.voice-panel__prompt {
  pointer-events: auto;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.3;
  cursor: none;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}
.voice-panel__prompt:hover {
  border-color: var(--cosmic);
  color: var(--cosmic);
}

/* End-call button (full-width внизу панели) */
.voice-panel__end {
  pointer-events: auto;
  margin-top: auto;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: none;
  transition: background 0.25s var(--ease);
}
.voice-panel__end:hover { background: var(--cosmic); }

/* ---------- TRANSCRIPT (live chat внутри popover) ----------
   Заполняется через onMessage SDK callback (voice-assistant.js).
   Каждое сообщение — отдельный <li class="transcript-msg
   transcript-msg--user|--agent">. Безопасный рендер через
   createElement + textContent (без innerHTML с динамикой). */
.voice-panel__transcript {
  list-style: none;
  margin: 0;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;             /* критично для overflow в flex-контейнере */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
  font-size: 12.5px;
  line-height: 1.45;
}
.voice-panel__transcript::-webkit-scrollbar { width: 4px; }
.voice-panel__transcript::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 4px;
}

.voice-panel__transcript-empty {
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: 32px 8px;
  opacity: 0.55;
}

.transcript-msg {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 14px;
  word-wrap: break-word;
  animation: transcriptIn 200ms ease-out;
}
@keyframes transcriptIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.transcript-msg--agent {
  align-self: flex-start;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.transcript-msg--user {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}

/* Footer actions: «Как связаться?» (один чип) + «Завершить разговор».
   margin-top: auto — прижимает блок к низу panel (flex column). */
.voice-panel__actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Mobile (≤820px) — упрощённый виджет ----------
   1-в-1 с Claude Design preview: плоский оранжевый круг 40×40px
   в правом нижнем углу (right: 16, bottom: 16), статичный микрофон
   18×18 внутри. Без морфа, без halo, без робота, без cycle.
   Высокая specificity (`html body`) + `!important` чтобы перебить
   любые desktop-правила с морфом. */
@media (max-width: 820px) {
  html body .voice-widget#voiceWidget {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    bottom: 16px !important;
    right: 16px !important;
    transform: none !important;
    z-index: 9100 !important;
  }

  /* Кнопка — плоский круг 40px, без анимаций */
  html body .voice-trigger--bubble {
    width: 40px !important;
    height: 40px !important;
    animation: none !important;
    transition: transform 0.2s ease !important;
  }
  html body .voice-trigger--bubble:active {
    transform: scale(0.92) !important;
  }

  /* Прячем halo-слои + робота полностью */
  html body .voice-trigger--bubble .vt-blob-layer { display: none !important; }
  html body .voice-trigger--bubble .vt-face--robot { display: none !important; }

  /* Сам blob — плоская оранжевая заливка (не radial-морф, а solid var(--cosmic)),
     без морф-анимации, без halo */
  html body .voice-trigger--bubble .vt-blob {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 40px !important;
    height: 40px !important;
    margin: -20px 0 0 -20px !important;
    border-radius: 50% !important;
    background: var(--cosmic) !important;
    box-shadow:
      0 6px 14px -4px rgba(20,17,16,0.4),
      0 2px 4px -1px rgba(20,17,16,0.2) !important;
    animation: none !important;
    filter: none !important;
    transform: translate(0,0) !important;
  }

  /* Микрофон — статичный, без cycle и sway */
  html body .voice-trigger--bubble .vt-mic-sway {
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    animation: none !important;
    filter: none !important;
  }
  html body .voice-trigger--bubble .vt-face--mic {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    color: var(--paper) !important;
  }
  html body .voice-trigger--bubble .vt-face--mic svg {
    width: 18px !important;
    height: 18px !important;
    stroke-width: 1.8 !important;
  }

  /* ---------- Mobile popover (раскрытый виджет) — FULLSCREEN ----------
     Раньше popover был 214×240 — туда транскрипт диалога не помещался
     читаемо. Теперь панель разворачивается на 92vw × 80svh с gutter
     16px по краям и 80px над FAB снизу. svh (small viewport height)
     корректно учитывает URL-bar iOS Safari, в отличие от vh. */
  html body .voice-panel {
    width: auto !important;
    height: 80svh !important;
    max-height: 80svh !important;
    min-height: 0 !important;
    inset: auto 16px 80px 16px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    gap: 12px !important;
  }
  /* «● ПОДКЛЮЧАЕМСЯ…» сверху — оставляем компактным */
  html body .voice-panel__status { font-size: 9px !important; letter-spacing: 0.16em !important; }
  html body .voice-panel__dot { width: 6px !important; height: 6px !important; }
  /* Крестик × сверху-справа */
  html body .voice-panel__close {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
  }
  /* Чат-транскрипт — крупнее текст на mobile, удобнее читать */
  html body .voice-panel__transcript { font-size: 14px !important; padding: 4px 2px !important; }
  html body .voice-panel__transcript-empty { font-size: 10px !important; padding: 24px 8px !important; }
  html body .transcript-msg { padding: 9px 13px !important; }
  /* Кнопка «Как связаться?» */
  html body .voice-panel__prompt {
    font-size: 13px !important;
    padding: 9px 14px !important;
    line-height: 1.25 !important;
  }
  /* Кнопка «Завершить разговор» */
  html body .voice-panel__end {
    font-size: 11px !important;
    padding: 11px 14px !important;
    letter-spacing: 0.16em !important;
  }
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .voice-panel { animation: none; }
  .voice-trigger--bubble .vt-blob,
  .voice-trigger--bubble .vt-blob-layer,
  .voice-trigger--bubble .vt-mic-sway,
  .voice-trigger--bubble .vt-face,
  .voice-panel__dot,
  .transcript-msg { animation: none !important; }
  .voice-trigger { transition: none; }
}

/* ---------- Dark theme — усиленная тень panel ---------- */
[data-theme="dark"] .voice-panel {
  box-shadow:
    0 30px 60px -16px rgba(0,0,0,0.7),
    0 10px 22px -6px rgba(0,0,0,0.5);
}