/* ─────────────────────────────────────────────────────────────────────────
   VoX — публичная страница.

   Среда страницы — фиолетовая ночь: почти чёрный фон с синевой, купол света
   над первым экраном и одна акцентная пара «маджента → фиалка». Ею залиты
   действия и последнее слово каждого заголовка, и больше ничего: страница
   держится на одном акценте, а не на радуге.

   Тема только тёмная: сайт продолжает среду, в которой живёт приложение.

   Правило страницы: каждая глава показывает, а не описывает. Разделы не
   повторяют один макет — у каждого свой масштаб, свой свет и свой живой
   элемент.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Фон и поверхности. */
  --bg:          #0c0815;
  --bg-band:     hsl(260 30% 9% / 0.6);
  --panel:       hsl(260 28% 11%);
  --panel-deep:  hsl(258 30% 8% / 0.8);
  --panel-code:  hsl(260 32% 6%);
  --masthead:    hsl(258 32% 7% / 0.72);

  /* Грани. */
  --line:        hsl(265 40% 50% / 0.22);
  --line-soft:   hsl(265 40% 50% / 0.15);
  --line-hi:     hsl(265 45% 55% / 0.45);

  /* Текст: четыре ступени от белого к почти фону. */
  --text:        #f5f2fa;
  --text-2:      #b7aecb;
  --text-3:      #8f84a6;
  --text-4:      #6f6486;

  /* Акцент. Пара работает и как заливка кнопки, и как краска заголовка. */
  --accent-a:      hsl(325 84% 58%);
  --accent-b:      hsl(262 84% 62%);
  --accent-lift-a: hsl(325 90% 70%);
  --accent-lift-b: hsl(262 95% 74%);
  --pink:          hsl(320 80% 72%);
  --violet:        hsl(262 90% 76%);
  --teal:          hsl(168 70% 62%);
  --amber:         hsl(35 90% 65%);

  --fill: linear-gradient(115deg, var(--accent-a), var(--accent-b));
  --ink:  linear-gradient(100deg, var(--accent-lift-a), var(--accent-lift-b));

  --shell: 1120px;
  --pad: clamp(20px, 5vw, 64px);

  --step: cubic-bezier(0.16, 1, 0.3, 1);

  --sans: 'Golos Text', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --display: 'Unbounded', 'Golos Text', -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Положение курсора для мягкой подсветки панелей. */
  --mx: 50%;
  --my: 50%;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent-lift-a); text-decoration: none; }
a:hover { color: hsl(320 90% 82%); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-lift-b);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.8rem 1.2rem;
  background: var(--panel);
  color: var(--text);
  border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--pad);
}

/* Липкая шапка не должна накрывать заголовок раздела, к которому ведёт ссылка. */
[id] { scroll-margin-top: 78px; }

/* ── Купол света над первым экраном ──────────────────────────────────────── */
/* Три пятна — фиолетовое по центру, розовое слева, холодное справа — дают
   ощущение, что орб подсвечивает страницу изнутри. Купол гаснет к концу
   первого экрана: дальше разделы разделяет уже только цвет полос. */

.dome {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1200px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 42rem at 50% -10%, hsl(262 70% 40% / 0.32), transparent 62%),
    radial-gradient(38rem 30rem at 12% 8%,   hsl(325 75% 45% / 0.16), transparent 60%),
    radial-gradient(38rem 30rem at 88% 14%,  hsl(200 80% 50% / 0.10), transparent 60%);
}

main, .masthead, .foot { position: relative; z-index: 2; }

/* ── Свет под курсором ───────────────────────────────────────────────────── */
/* Общий приём страницы: панель освещается там, где стоит курсор — мягкое
   пятно внутри и подсвеченная грань по контуру. Координаты пятна ведёт JS
   с задержкой, поэтому свет догоняет руку, а не прыгает за ней. */

.spot { position: relative; isolation: isolate; }
.spot > * { position: relative; z-index: 1; }

.spot::before, .spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--step);
}
.spot::before {
  z-index: 0;
  background: radial-gradient(20rem 16rem at var(--mx) var(--my), hsl(285 80% 60% / 0.18), transparent 68%);
}
/* Свет на грани: градиент в рамке толщиной 1px, вырезанный маской. */
.spot::after {
  z-index: 2;
  padding: 1px;
  background: radial-gradient(14rem 14rem at var(--mx) var(--my),
    hsl(320 90% 74% / 0.85), hsl(262 90% 70% / 0.4) 42%, transparent 68%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.spot:hover::before, .spot:hover::after { opacity: 1; }

@media (hover: none) {
  .spot::before, .spot::after { display: none; }
}

/* ── Орб ─────────────────────────────────────────────────────────────────── */
/* Насыщенность добавлена снаружи, а не в константах орба: краски смешиваются
   аддитивно и на большом размере сходятся к белому быстрее, чем в
   22-пиксельной иконке меню-бара. Сама поправка живёт в `orb.js`, в той же
   строке фильтра, что и отклик на громкость: отдельным правилом здесь она
   заводила второй слой постобработки поверх каждого кадра. */

.orb { display: inline-block; line-height: 0; }
.orb svg { display: block; width: 100%; height: 100%; }

/* ── Типографика ─────────────────────────────────────────────────────────── */

.display {
  margin: 0 auto 22px;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.display--sm { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.04; margin-bottom: 28px; }

.title {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.8rem, 3.3vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.title--sm { font-size: clamp(1.6rem, 2.7vw, 2.3rem); line-height: 1.12; }

/* Последнее слово заголовка залито акцентом — одна краска на всю страницу. */
.display em, .title em {
  font-style: normal;
  background: var(--ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.sub--sm {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}

.eyebrow, .kicker, .tick {
  font-family: var(--mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.eyebrow { font-size: 0.78rem; color: var(--pink); margin-bottom: 20px; }
.kicker  { font-size: 0.75rem; color: var(--pink); }
.kicker--mute   { color: var(--text-3); }
.kicker--violet { color: var(--violet); }
.kicker--bright { color: hsl(320 80% 74%); }
.tick    { font-size: 0.75rem; color: var(--text-3); margin: 0; }

/* Сноска под живым элементом — тихая приписка, а не ещё один заголовок:
   моноширинный шрифт есть, капитель — нет. */
.foot-note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
  color: var(--text-4);
  margin: 0;
}

.lede {
  margin: 0 auto 32px;
  max-width: 52ch;
  font-size: clamp(1.06rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--text-2);
}

.dim { color: var(--text-3); font-size: 0.97rem; }

kbd {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 2px 7px;
  border: 1px solid var(--line-hi);
  border-radius: 6px;
  background: hsl(262 35% 20% / 0.7);
  color: var(--text);
}

code { font-family: var(--mono); font-size: 0.92em; }

/* ── Шапка ───────────────────────────────────────────────────────────────── */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding: 12px var(--pad);
  background: var(--masthead);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid hsl(265 40% 50% / 0.18);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.18rem;
  letter-spacing: -0.02em;
  color: var(--text);
}
.mark:hover { color: var(--text); }
.mark__orb { width: 30px; height: 30px; flex: none; }

.masthead__nav { display: flex; gap: 26px; font-size: 0.94rem; }
.masthead__nav a { color: var(--text-2); }
.masthead__nav a:hover { color: var(--text); }

/* ── Кнопки ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 13px;
  font: 600 1.0625rem/1 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.3s var(--step), box-shadow 0.3s var(--step), filter 0.3s var(--step);
}
.btn--solid {
  background: var(--fill);
  color: #fff;
  box-shadow: 0 10px 40px -8px hsl(300 85% 55% / 0.55);
}
.btn--solid:hover {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 16px 48px -10px hsl(300 85% 55% / 0.7);
}
.btn--quiet {
  border-color: var(--line-hi);
  background: hsl(262 30% 14% / 0.4);
  color: #efeaf7;
  font-weight: 500;
}
.btn--quiet:hover { color: var(--text); background: hsl(262 30% 18% / 0.6); }
.btn--sm { padding: 9px 20px; font-size: 0.94rem; border-radius: 10px; box-shadow: 0 4px 24px -6px hsl(300 85% 55% / 0.5); }
.btn--lg { padding: 18px 32px; font-size: 1.09rem; border-radius: 14px; }
.btn__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn[data-unavailable] {
  background: hsl(262 26% 18%);
  border-color: var(--line-hi);
  color: var(--text-2);
  box-shadow: none;
}
.btn[data-unavailable]:hover { transform: none; filter: none; box-shadow: none; }

/* ── Первый экран ────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(52px, 7vw, 92px) var(--pad) clamp(56px, 7vw, 96px);
  text-align: center;
}

/* Орб за заголовком: размытый и приглушённый, он читается как свет, а не
   как картинка, и не спорит с текстом.

   Кадры ему не считаются (в разметке он помечен `data-orb-still`): за
   размытием в десять пикселей движение красок всё равно не читается, а
   стоил он дороже всей остальной страницы. Живым его делает дыхание ниже —
   масштаб и прозрачность считает видеокарта, а не движок орба. */
.hero__halo {
  position: absolute;
  top: clamp(-180px, -12vw, -90px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.5;
  filter: blur(10px) saturate(1.25);
  will-change: transform, opacity;
  animation: halo-breathe 19s ease-in-out infinite;
}
/* Дыхание идёт только внутрь: наверху шкалы масштаб равен единице, поэтому
   орб никогда не становится шире, чем задано, и на экране в 390 точек не
   появляется горизонтальная прокрутка. Поворота нет по той же причине:
   повёрнутый квадрат занимает больше места, чем непровёрнутый. */
@keyframes halo-breathe {
  0%, 100% { transform: translateX(-50%) scale(0.955); opacity: 0.5; }
  50%      { transform: translateX(-50%) scale(1);     opacity: 0.58; }
}
/* Ширина держится внутри экрана: орб размыт и всё равно уходит в фон, а
   вылезающий за край блок дал бы горизонтальную прокрутку на телефоне. */
.orb--halo { width: min(620px, 92vw); height: min(620px, 92vw); }

.cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.hero__foot {
  margin: 18px 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
}

/* ── Мок экрана macOS ────────────────────────────────────────────────────── */
/* Страница не рассказывает про диктовку, а воспроизводит её: чужое окно,
   текст, который печатается сам, и настоящий орб-индикатор в углу. */

.mock {
  position: relative;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(260 30% 11%), hsl(260 32% 9%)) padding-box,
    linear-gradient(160deg, hsl(262 80% 60% / 0.55), hsl(325 80% 55% / 0.3) 40%, hsl(265 30% 30% / 0.25)) border-box;
  box-shadow: 0 60px 120px -40px hsl(270 60% 30% / 0.55), 0 0 80px -30px hsl(300 80% 50% / 0.3);
  overflow: hidden;
  text-align: left;
}

.mock__menubar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 18px;
  font-size: 0.78rem;
  background: hsl(258 28% 12% / 0.9);
  border-bottom: 1px solid hsl(265 40% 50% / 0.15);
  color: var(--text-2);
}
.mock__app { font-weight: 600; color: #efeaf7; }
.mock__menus { display: inline-flex; gap: 16px; }
.mock__mic {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.69rem;
  color: var(--text-3);
  transition: color 0.4s var(--step);
}
.mock__mic svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mock[data-live] .mock__mic { color: hsl(320 85% 66%); }
.mock__clock { font-family: var(--mono); font-size: 0.69rem; }

.mock__desk {
  position: relative;
  padding: clamp(22px, 4vw, 46px) clamp(16px, 4vw, 46px) clamp(60px, 7vw, 84px);
  background:
    radial-gradient(50rem 30rem at 70% 120%, hsl(262 55% 26% / 0.5), transparent 65%),
    radial-gradient(40rem 26rem at 8% -20%, hsl(325 60% 30% / 0.35), transparent 60%);
}

.mock__window {
  max-width: 720px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid hsl(265 40% 55% / 0.25);
  background: hsl(258 26% 13% / 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 30px 60px -24px hsl(260 60% 5% / 0.9);
  overflow: hidden;
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid hsl(265 40% 50% / 0.18);
}
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.mock__dots i:nth-child(1) { background: #ff5f57; }
.mock__dots i:nth-child(2) { background: #febc2e; }
.mock__dots i:nth-child(3) { background: #28c840; }
.mock__name { font-size: 0.78rem; color: var(--text-3); margin: 0 auto; }

.mock__page { padding: 24px 26px 28px; min-height: 150px; }
.mock__text {
  margin: 0;
  font-size: clamp(0.94rem, 1.8vw, 1.09rem);
  line-height: 1.8;
  color: #efeaf7;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  vertical-align: -0.18em;
  background: hsl(320 90% 72%);
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 45% { opacity: 1 } 55%, 100% { opacity: 0 } }

.mock__status {
  position: absolute;
  left: clamp(14px, 3vw, 34px);
  bottom: clamp(14px, 3vw, 30px);
  display: flex;
  align-items: center;
  gap: 14px;
}
.mock__phase {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color 0.4s var(--step);
}
.mock__phase[data-tone="live"] { color: hsl(320 80% 74%); }
.mock__phase[data-tone="done"] { color: var(--teal); }

/* Клавиша: в покое приподнята над плоскостью, зажатая уходит вниз и
   загорается акцентом. Единственная деталь мока, которая отвечает
   на состояние демонстрации. */
.key {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 500;
  width: 52px;
  height: 46px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: hsl(262 30% 18% / 0.8);
  color: var(--text-2);
  border: 1px solid var(--line-hi);
  box-shadow: 0 3px 0 hsl(262 30% 10%);
  transition: all 0.3s var(--step);
}
.key[data-held] {
  background: var(--fill);
  color: #fff;
  border-color: transparent;
  transform: translateY(2px);
  box-shadow: 0 0 30px -4px hsl(300 90% 60% / 0.8);
}

.mock__orb {
  position: absolute;
  right: clamp(10px, 2.5vw, 26px);
  bottom: clamp(6px, 2vw, 18px);
}
.orb--mock { width: clamp(72px, 12vw, 104px); height: clamp(72px, 12vw, 104px); }

/* ── Полосы разделов ─────────────────────────────────────────────────────── */

.band {
  border-top: 1px solid var(--line-soft);
  background: var(--bg-band);
}
.band > .wrap { padding-block: clamp(56px, 7vw, 96px); }

.chapter { padding-block: clamp(64px, 8vw, 110px); }

.chapter__head { max-width: 56ch; margin-bottom: clamp(36px, 4vw, 56px); }
.chapter__sub { color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.14rem); margin: 0; }

.band__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
/* Заголовок отдаёт ширину подписи, а не выталкивает её на строку ниже.
   Основа задана в rem, а не в ch: у Unbounded нули широкие, и 22ch
   превращались в 900 px, после чего подпись съезжала вниз. */
.band__head .title { flex: 1 1 22rem; margin: 0; }
.band__head .tick { flex: 0 0 auto; }

/* ── Жест: три карточки, три состояния орба ──────────────────────────────── */
/* Сцена играет сама, когда попадает на экран, и повторяется, пока её видно.
   Прокрутка принадлежит человеку и ничем не перехватывается. */

.gesture {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.gesture__card {
  border-radius: 18px;
  padding: 26px 24px 24px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(260 28% 12%), hsl(260 30% 10%)) padding-box,
    linear-gradient(150deg, hsl(262 70% 55% / 0.4), hsl(325 70% 50% / 0.18) 45%, hsl(265 25% 28% / 0.3)) border-box;
  transition: box-shadow 0.6s var(--step), transform 0.6s var(--step), background 0.6s var(--step);
}
/* Активный шаг подсвечивается и приподнимается — карточка «включена». */
.gesture__card[data-on] {
  background:
    linear-gradient(hsl(261 30% 13.5%), hsl(260 30% 11%)) padding-box,
    linear-gradient(150deg, hsl(325 85% 60% / 0.75), hsl(262 85% 60% / 0.55) 55%, hsl(265 30% 32% / 0.4)) border-box;
  box-shadow: 0 18px 60px -18px hsl(300 80% 50% / 0.45);
  transform: translateY(-3px);
}
.gesture__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.gesture__n {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--pink);
}
.orb--card { width: 64px; height: 64px; }
.gesture__card h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.gesture__card p { color: var(--text-2); font-size: 0.97rem; line-height: 1.65; margin: 0 0 12px; }
.gesture__state {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0;
}

/* ── Возможности: неровная сетка ─────────────────────────────────────────── */
/* Два широких разворота и два узких блока: одинаковых карточных рядов
   на странице нет. */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.card {
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(24px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.card p { color: var(--text-2); font-size: 0.97rem; }
.card > :last-child { margin-top: auto; }

/* Карточка с крашеной гранью: рамка — не линия, а градиент. */
.card--edge {
  border-color: transparent;
  background:
    linear-gradient(135deg, hsl(262 30% 13%), hsl(300 25% 11%)) padding-box,
    linear-gradient(150deg, hsl(325 75% 55% / 0.5), hsl(262 75% 55% / 0.3) 50%, hsl(265 25% 28% / 0.3)) border-box;
}

.bento__wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  padding: clamp(24px, 3vw, 38px);
}
.bento__side p { margin-bottom: 8px; }
.bento__side .foot-note { margin-top: 12px; }

/* ── Панель действий ─────────────────────────────────────────────────────── */

.craft {
  border: 1px solid hsl(265 40% 55% / 0.25);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel-deep);
}
.craft__label {
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 0 0 8px;
}
.craft__label--out { color: var(--pink); }
.craft__source { font-size: 0.94rem; line-height: 1.6; color: var(--text-3); margin: 0 0 18px; }

.craft__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.craft__actions button {
  font: 500 0.88rem/1 var(--sans);
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-hi);
  background: hsl(262 28% 16%);
  color: var(--text-2);
  cursor: pointer;
  /* Перечислены именно свойства: с `all` под анимацию попадала и рамка
     фокуса, и она приезжала к своей толщине уже после нажатия Tab. */
  transition: background 0.25s var(--step), border-color 0.25s var(--step), color 0.25s var(--step);
}
.craft__actions button:hover { color: var(--text); border-color: hsl(320 70% 60% / 0.6); }
.craft__actions button[aria-pressed="true"] {
  background: var(--fill);
  border-color: transparent;
  color: #fff;
}

.craft__result {
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
  min-height: 4.6em;
  white-space: pre-line;
  transition: opacity 0.16s linear;
}
.craft__result[data-swap] { opacity: 0; }

/* ── Дорожка одной диктовки ──────────────────────────────────────────────── */
/* Дорожка нарисована целиком и читается без анимации: речь, участок тишины,
   снова речь — один непрерывный отрезок. Головка просто идёт по нему и
   на тишине не останавливается. */

.track__lane {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid hsl(265 40% 50% / 0.3);
}
.track__lane i {
  flex: 1;
  display: block;
  border-radius: 2px;
  background: linear-gradient(hsl(325 80% 64%), hsl(262 80% 64%));
}
.track__lane i[data-silent] { background: hsl(262 20% 32%); }

.track__head {
  position: absolute;
  top: -5px;
  bottom: -1px;
  left: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, hsl(320 95% 80% / 0.2), hsl(320 95% 80%));
  box-shadow: 0 0 14px 2px hsl(320 90% 62% / 0.7);
}

.track__marks {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.06em;
  color: var(--text-4);
  margin-top: 8px;
}
.track__sum { font-size: 0.9rem; color: var(--text-2); margin: 12px 0 0; }
.track__sum b { color: var(--text); }

/* ── Куда поставлена каретка, туда и текст ───────────────────────────────── */

.deck { display: flex; flex-direction: column; gap: 8px; }
.deck__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid hsl(265 40% 50% / 0.2);
  border-radius: 10px;
  background: hsl(258 30% 8% / 0.7);
  transition: border-color 0.4s var(--step), background 0.4s var(--step);
}
.deck__row[data-active] {
  border-color: hsl(320 70% 60% / 0.5);
  background: hsl(300 30% 12% / 0.7);
}
.deck__name {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  width: 86px;
  flex: none;
}
.deck__field {
  font-size: 0.87rem;
  color: #efeaf7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 1.4em;
}
.deck__row--code .deck__field { font-family: var(--mono); color: var(--teal); }
/* Каретка стоит только в том окне, куда сейчас идёт текст. */
.deck__row[data-active] .deck__field::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: hsl(320 90% 72%);
  animation: blink 1s steps(1) infinite;
}
.deck .foot-note { margin-top: 6px; }

/* ── Файл настроек ───────────────────────────────────────────────────────── */

.conf {
  border: 1px solid hsl(265 40% 55% / 0.25);
  border-radius: 14px;
  background: var(--panel-code);
  overflow: hidden;
}
.conf__bar {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.69rem;
  letter-spacing: 0.08em;
  color: var(--text-4);
}
.conf__code {
  margin: 0;
  padding: 18px 16px;
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.75;
  color: var(--text-2);
  overflow-x: auto;
}
.c-key { color: var(--violet); }
.c-str { color: var(--teal); }
.c-val { color: hsl(325 85% 70%); }

/* ── Приватность ─────────────────────────────────────────────────────────── */
/* Обещание проверяется рукой: пока выключатели выключены, за границу
   контура не ведёт ни одна линия. */

.perimeter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  align-items: start;
}

.perimeter__box {
  border-radius: 20px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(260 28% 12%), hsl(260 30% 10%)) padding-box,
    linear-gradient(150deg, hsl(262 80% 60% / 0.5), hsl(325 80% 55% / 0.25) 50%, hsl(265 25% 28% / 0.3)) border-box;
  padding: clamp(24px, 3vw, 32px);
  overflow: hidden;
}
.perimeter__box .perimeter__orb {
  position: absolute;
  right: -30px;
  bottom: -30px;
  z-index: 0;
  width: 150px;
  height: 150px;
  opacity: 0.85;
  pointer-events: none;
}

.chain { list-style: none; margin: 0 0 18px; padding: 0; }
.chain li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 0;
  font-size: 1rem;
  color: #efeaf7;
}
.chain__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(115deg, hsl(325 84% 62%), hsl(262 84% 66%));
  box-shadow: 0 0 0 4px hsl(300 80% 60% / 0.14);
  transition: box-shadow 0.5s var(--step), transform 0.5s var(--step);
}
/* Пульс идёт по цепочке и никуда из неё не выходит. */
.chain li[data-lit] .chain__dot {
  transform: scale(1.25);
  box-shadow: 0 0 0 7px hsl(300 80% 60% / 0.22), 0 0 22px 2px hsl(320 90% 62% / 0.5);
}

.perimeter__note {
  font-size: 0.9rem;
  color: var(--text-2);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid hsl(265 40% 50% / 0.25);
  max-width: 34ch;
}

.perimeter__out { display: flex; flex-direction: column; gap: 12px; }
.perimeter__out .kicker { margin-bottom: 4px; }

.switch {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  background: var(--panel);
  transition: border-color 0.5s var(--step), background 0.5s var(--step);
}
.switch[data-on] { border-color: hsl(320 70% 60% / 0.45); background: hsl(300 26% 12%); }
.switch__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: var(--sans);
  color: inherit;
  text-align: left;
}
.switch__track {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  flex: none;
  display: flex;
  align-items: center;
  padding: 3px;
  background: hsl(262 22% 26%);
  transition: background 0.28s var(--step);
}
.switch__knob {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  background: #cfc7de;
  transition: transform 0.28s var(--step), background 0.28s var(--step);
}
.switch[data-on] .switch__track { background: var(--fill); }
.switch[data-on] .switch__knob { transform: translateX(18px); background: #fff; }
.switch__name { font-size: 1.03rem; font-weight: 600; color: var(--text); }
.switch__text { font-size: 0.9rem; line-height: 1.6; color: var(--text-2); margin: 0; }

.perimeter__hint {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 1.6;
  color: var(--text-4);
  margin: 6px 0 0;
  transition: color 0.4s var(--step);
}
.perimeter[data-leak] .perimeter__hint { color: var(--amber); }

/* ── Почему бесплатно и характеристики ───────────────────────────────────── */

.author {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.author p { color: var(--text-2); font-size: 1.03rem; margin-bottom: 12px; }
.grad-def { position: absolute; }

.specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: hsl(265 40% 50% / 0.2);
  border: 1px solid hsl(265 40% 50% / 0.2);
  border-radius: 16px;
  overflow: hidden;
}
.spec {
  background: var(--panel);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.spec__icon {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  border: 1px solid transparent;
  background:
    linear-gradient(hsl(262 32% 16%), hsl(300 28% 13%)) padding-box,
    linear-gradient(150deg, hsl(325 80% 58% / 0.55), hsl(262 80% 58% / 0.35)) border-box;
  box-shadow: 0 6px 18px -8px hsl(300 80% 50% / 0.45);
}
.spec__icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: url(#vox-spec-grad);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.spec dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 5px;
  display: block;
}
.spec dd { margin: 0; font-size: 0.97rem; color: #efeaf7; line-height: 1.45; }

/* ── Архитектура ─────────────────────────────────────────────────────────── */

.arch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 20px);
  align-items: center;
}
.arch__node {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 24px;
  background: var(--panel);
}
.arch__name { font-family: var(--mono); font-size: 0.94rem; color: var(--text); margin: 0 0 4px; }
.arch__lang {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.arch__lang--pink { color: hsl(325 85% 70%); }
.arch__lang--violet { color: var(--violet); }
.arch__node ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.94rem;
  color: var(--text-2);
}

.arch__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 110px;
}
/* Два пакета идут по проводу вразнобой: видно, что связь двусторонняя. */
.arch__wire { position: relative; width: 100%; height: 10px; display: block; }
.arch__wire::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 4.5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(300 85% 65% / 0.8), transparent);
}
.arch__wire i {
  position: absolute;
  top: 0.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  animation: wire 1.9s ease-in-out infinite;
}
.arch__wire i:nth-child(1) {
  background: radial-gradient(circle, #fff, hsl(320 90% 68%) 45%, transparent 72%);
  box-shadow: 0 0 14px 3px hsl(320 90% 62% / 0.8);
}
.arch__wire i:nth-child(2) {
  background: radial-gradient(circle, #fff, hsl(262 90% 70%) 45%, transparent 72%);
  box-shadow: 0 0 14px 3px hsl(262 90% 65% / 0.8);
  animation-delay: 0.95s;
}
@keyframes wire {
  0%   { left: 0%; opacity: 0 }
  12%  { opacity: 1 }
  88%  { opacity: 1 }
  100% { left: calc(100% - 9px); opacity: 0 }
}
.arch__proto {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  text-align: center;
  line-height: 1.6;
}

/* ── Установка ───────────────────────────────────────────────────────────── */

.download {
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, hsl(266 38% 15%), hsl(320 30% 12%)) padding-box,
    linear-gradient(150deg, hsl(325 80% 58% / 0.6), hsl(262 80% 58% / 0.4) 55%, hsl(265 25% 28% / 0.3)) border-box;
  box-shadow: 0 40px 100px -40px hsl(300 70% 40% / 0.4);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.download .title { margin-bottom: 14px; }
.download__sub { color: #c8bfda; font-size: 1.03rem; margin: 0; }
.download__act { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.download__act .btn { max-width: 100%; }
.download__file {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  line-height: 1.7;
  color: #a99cc2;
  margin: 0;
  overflow-wrap: anywhere;
}
.download__hint {
  margin: 20px 0 clamp(36px, 4vw, 56px);
  max-width: 68ch;
  font-size: 0.94rem;
  color: var(--text-3);
}

.steps {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.step { border-top: 1px solid hsl(265 40% 50% / 0.3); padding-top: 20px; }
.step__n {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--pink);
  margin: 0 0 12px;
}
.step h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 8px; }
.step p { color: var(--text-2); font-size: 0.97rem; line-height: 1.65; margin: 0; }

.check {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  overflow: hidden;
}
.check summary {
  padding: 16px 22px;
  cursor: pointer;
  font-size: 0.97rem;
  color: #efeaf7;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.check summary::-webkit-details-marker { display: none; }
.check__sign {
  color: var(--pink);
  font-family: var(--mono);
  font-size: 0.82rem;
  transition: transform 0.3s var(--step);
}
.check[open] .check__sign { transform: rotate(45deg); }
.check__body { padding: 0 22px 22px; color: var(--text-2); font-size: 0.94rem; }
.check__body pre {
  margin: 0 0 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--panel-code);
  border: 1px solid hsl(265 40% 50% / 0.25);
  font-size: 0.84rem;
  color: var(--teal);
  overflow-x: auto;
}
.check__body pre code { color: inherit; }
.check__body p code { color: var(--accent-lift-a); }

/* ── Вопросы ─────────────────────────────────────────────────────────────── */

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.faq__title { position: sticky; top: 100px; margin: 0; }
.faq__list { display: flex; flex-direction: column; }

.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.06rem;
  font-weight: 500;
  color: var(--text);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.qa summary::-webkit-details-marker { display: none; }
.qa__n { color: var(--pink); font-family: var(--mono); font-size: 0.82rem; padding-top: 4px; flex: none; }
.qa p {
  margin: 0 0 22px;
  padding-left: 31px;
  color: var(--text-2);
  font-size: 0.97rem;
  line-height: 1.7;
  max-width: 62ch;
}

/* ── Финал и подвал ──────────────────────────────────────────────────────── */

.closing { position: relative; border-top: 1px solid var(--line-soft); overflow: hidden; }
.closing__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(44rem 26rem at 50% 118%, hsl(300 70% 42% / 0.3), transparent 66%);
}
.closing__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(72px, 9vw, 124px) var(--pad);
  text-align: center;
}
.orb--closing { width: 170px; height: 170px; margin: 0 auto 10px; }
.closing__meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-4);
  margin: 22px 0 0;
}

.foot {
  border-top: 1px solid var(--line-soft);
  padding: clamp(32px, 4vw, 48px) var(--pad);
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: center;
  max-width: calc(var(--shell) + var(--pad) * 2);
  margin: 0 auto;
}
.foot__mark { font-family: var(--display); font-weight: 500; font-size: 1.06rem; letter-spacing: -0.02em; margin: 0; }
.foot__line { margin: 0; font-size: 0.9rem; color: var(--text-3); max-width: 52ch; }
.foot__nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.9rem; }
.foot__nav a { color: var(--text-3); }
.foot__nav a:hover { color: var(--text); }

/* ── Появление при прокрутке ─────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--step), transform 0.7s var(--step);
  transition-delay: var(--delay, 0ms);
}
.reveal[data-shown] { opacity: 1; transform: none; }

/* ── Адаптация ───────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .masthead__nav { display: none; }
}

@media (max-width: 900px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento__wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .perimeter, .author, .download, .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__title { position: static; }
  .mock__menus { display: none; }

  .arch { grid-template-columns: minmax(0, 1fr); }
  .arch__link { flex-direction: row; gap: 14px; min-width: 0; padding: 6px 0; }
  .arch__wire { width: 10px; height: 64px; flex: none; }
  .arch__wire::before {
    left: 4.5px; right: auto; top: 0; bottom: 0;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, hsl(300 85% 65% / 0.8), transparent);
  }
  .arch__wire i { left: 0.5px; animation-name: wire-v; }
  @keyframes wire-v {
    0%   { top: 0%; opacity: 0 }
    12%  { opacity: 1 }
    88%  { opacity: 1 }
    100% { top: calc(100% - 9px); opacity: 0 }
  }
  .arch__proto { text-align: left; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .cta .btn { width: 100%; }
  .btn--lg { padding: 15px 22px; font-size: 1rem; }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .mock__page { padding: 18px 18px 22px; min-height: 128px; }
  /* На узком экране строка состояния встаёт в поток под окном, а справа
     остаётся место под орб — иначе подпись уезжает ему под низ. */
  .mock__desk { padding-bottom: 18px; }
  .mock__status { position: static; margin-top: 18px; padding-right: 84px; }
  .deck__name { width: 74px; }
  .foot { flex-direction: column; align-items: flex-start; }
  .foot__nav { margin-left: 0; }
}

@media (max-width: 420px) {
  .key { width: 44px; height: 40px; font-size: 1.1rem; }
  .mock__phase { font-size: 0.62rem; letter-spacing: 0.05em; }
  .craft__actions button { padding: 8px 11px; font-size: 0.82rem; }
  .deck__name { width: 62px; font-size: 0.62rem; }
  .orb--mock { width: 64px; height: 64px; }
}

/* ── Уважение к настройке «меньше движения» ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .caret, .deck__row[data-active] .deck__field::after { animation: none; }
}