/* ==========================================================================
   Евклид - восстановление доступа к криптокошелькам
   Golos Text (гротеск) + JetBrains Mono

   ПАЛИТРА СНЯТА ПИПЕТКОЙ С ФОТОСЕССИИ ВЛАДА (12.08.2026).
   Разобрано 40 кадров: гистограмма по всем, отдельные проходы по оттенкам.
   Смысл - размыть границу между сайтом и контентом: фото перестают быть
   чужими прямоугольниками на чёрном, потому что фон страницы это тот же
   сине-чёрный, что в тенях студии, а свет сверху-справа тёплый и снизу-слева
   холодный - ровно как ставил свет фотограф.

     #06080E  фон              самая частая тень кадра (#060A0E / #04040C)
     #F2EEE6  «белый»          столешница и корпус машины (#CCC4B4 → осветлён)
     #7C84D6  синий акцент     подсветка и логотип на стене (#666EBE)
     #E08A72  красный свет     задник справа (#EAA292 / #F2AE96)
     #CE8E42  дерево           рёбра корпуса «Евклида» (#CE8E42 - точное попадание)

   Контрасты на фоне: синий 5,7:1 · красный 7,4:1 · дерево 7,0:1 - все AA.
   ========================================================================== */

:root {
  --bg:        #050608;
  --bg-2:      #050608;
  --surface:   #12151D;
  --ink:       #F2EEE6;
  --ink-2:     #A8A49C;
  --muted:     #8A8780;
  /* Двухуровневый акцент (Катя 17.08): семейство ФИОЛЕТОВОЕ.
     --accent - светлый, для крупного: слова в заголовках, цифры.
     --accent-ctl - плотнее, для мелкого: плюсики, ховеры, капсы-подписи.
     Светлый = изначальный #7C84D6 + ~40% белого. */
  --accent:     #B0B5E6;
  --accent-hi:  #C9CCF2;
  --accent-ctl: #8A93DD;
  --accent-soft: rgba(176,181,230,0.14);
  --warm:      #E08A72;
  --wood:      #CE8E42;
  --line:      rgba(242,238,230,0.10);
  --line-2:    rgba(242,238,230,0.06);
  --danger:    #E08A72;

  --serif: 'Golos Text', system-ui, -apple-system, sans-serif;
  --sans:  'Golos Text', system-ui, -apple-system, sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, monospace;

  /* СЕТКА ПО РЕФЕРЕНСУ trezor.io (решение Кати 17.08, правка Влада «сузить к центру»).
     Замер живого сайта 17.08 через браузер: контейнер занимает 90% ширины окна,
     внутри боковые поля 16 / 24 / 32 / 40px, выше 1920px упирается в потолок 1920.
     Ширина контента: 375 -> 343 · 768 -> 643 · 1280 -> 1088 · 1440 -> 1232
     · 1600 -> 1376 · 1920 и шире -> 1840. Было 1560px с полями clamp(20px,4vw,64px),
     на 1440 это давало 1325px - Влад на приёмке 14.08 сказал «разъезжается». */
  --wrap-max:  100%;
  --wrap-pad:  16px;

  --radius:    28px;
  --radius-in: 21px;
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);

  --z-nav: 40; --z-menu: 60; --z-ambient: -1;

  /* высота, которую занимает плавающая шапка: отступ сверху плюс её высота.
     Под неё подстраивается слой видео на первом экране. */
  --nav-space: 86px;

  --ico-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='10.5' width='16' height='11' rx='2.5'/%3E%3Cpath d='M8 10.5V7a4 4 0 0 1 8 0v3.5'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* overflow-x: clip, а не hidden: blur(120px) на световых пятнах раздувает их
   layout-бокс за пределы .ambient, и на 768px страница уезжала вбок на 13px
   (прогон адаптива 12.08). clip обрезает, но не заводит второй скролл-контейнер. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, а не hidden: hidden делает body скролл-контейнером и ломает sticky (FAQ) */
  overflow-x: clip;
}

/* --- атмосфера фона --- */
/* contain: paint - иначе blur(120px) на пятнах учитывается в overflow страницы
   и на 768px она уезжала вбок на 13px (прогон адаптива 12.08) */
.ambient { position: fixed; inset: 0; z-index: var(--z-ambient); pointer-events: none; overflow: clip; contain: paint; }
.wordfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.55; }
.glow { position: absolute; border-radius: 50%; filter: blur(120px); }
/* Свет повторяет схему съёмки: тёплый прибор сверху-справа, холодный снизу-слева.
   Из-за этого фото ложатся на страницу без шва - вокруг них тот же свет. */
.glow-top { width: 70vw; height: 46vw; top: -22vw; right: -10vw;
  background: radial-gradient(ellipse, rgba(176,181,230,0.14), transparent 68%); }
/* .glow-mid погашен 17.08 (Катя): фиолетовое пятно в нижнем левом углу
   подсвечивало стык секции с фото и читалось грязным переходом */
.glow-mid { display: none; }
.vignette { position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.6) 100%); }
.grain { display: none; position: absolute; inset: 0; opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* --- сетка --- */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--wrap-pad); }
/* ступени сетки trezor.io: значения меняются скачком на брейкпоинте, не плавно */
/* Ужато 17.08 (Катя: «у trezor всё равно больше поля»): 90% -> 86%,
   потолок контента 1400px вместо трезоровских 1840 на больших экранах */
@media (min-width: 768px)  { :root { --wrap-max: 86%;    --wrap-pad: 24px; } }
@media (min-width: 1280px) { :root { --wrap-max: 86%;    --wrap-pad: 32px; } }
@media (min-width: 1920px) { :root { --wrap-max: 1480px; --wrap-pad: 40px; } }
.wrap-narrow { max-width: 900px; }
/* TREZOR-СТИЛЬ (форк 17.08): мега-отступы секций по референсу trezor.io */
.section { padding-block: clamp(120px, 15vh, 240px); position: relative; }
/* ЗЕБРА 14.08 (решение Кати): секции чередуются двумя тонами - плита #0A0C13
   и фон #050608. Секции с фото («Обо мне») и машинная зона - на фоне, кадры
   растворяются масками; тонируются только текстовые. Меток-глав нет - шум.
   Волосяная линия убрана: границу даёт сама смена тона. */
/* #help из зебры убран 17.08 (Катя): секция на общем чёрном фоне */
/* все плиты сняты 17.08 (Катя, форк): один фон на весь сайт, разделение воздухом */
/* свечение и overflow сняты 17.08: overflow:hidden ЛОМАЛ sticky-заголовок
   (липкий элемент не работает внутри обрезающего контейнера) */
.section-lead { color: var(--ink-2); max-width: 62ch; font-size: 1.1rem; margin-top: 14px; }

/* --- типографика --- */
.h-display {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 4.1rem);
  line-height: 1.05; letter-spacing: -0.04em; text-wrap: balance;
}
/* .hero-soft убран 17.08: второй заголовок первого экрана снят по правке Влада 14.08 */
.h-section {
  /* трезоровская шкала: гигант, вес 800, капс, строки впритык */
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); /* единый калибр с hero (Катя: «не везде одинаковый») */
  /* капс снят (вариант 4, Катя 19.08): кегль и вес те же, выделение цветом на месте */
  letter-spacing: -0.02em; line-height: 0.98; color: var(--ink);
  text-wrap: balance;
}
.h-sub { font-family: var(--sans); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.015em; }
p { text-wrap: pretty; }

/* --- кнопки --- */
.btn {
  --pad: 15px 22px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 500; font-size: 1.02rem;
  padding: var(--pad); border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn-lg { --pad: 18px 28px; font-size: 1.08rem; }
.btn-block { width: 100%; justify-content: center; }
.btn:active { transform: scale(0.975); }
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: #DCD5C6; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-2); background: rgba(242,238,230,0.03); }
.btn-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 29px; height: 29px; border-radius: 999px; font-size: 0.84rem;
  background: rgba(0,0,0,0.1);
  transition: transform 0.35s var(--ease);
}
.btn-primary:hover .btn-ico { transform: translate(2px, -2px); }

/* --- double-bezel --- */
.bezel {
  background: rgba(242,238,230,0.035);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
}
.portrait-inner, .honest-inner, .formula-inner, .shuffler-inner, .form-inner, .steps-inner {
  background: var(--surface);
  border-radius: var(--radius-in);
  box-shadow: inset 0 1px 0 rgba(242,238,230,0.06);
}

/* --- медиа-плейсхолдеры --- */
.media-ph {
  aspect-ratio: 4 / 5; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  color: var(--muted); text-align: center; padding: 24px;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(242,238,230,0.015) 22px 23px);
  border-radius: var(--radius-in);
}
.media-ph-ico { font-size: 1.6rem; color: var(--accent); }
.media-ph-label { font-size: 0.9rem; }

/* --- NAV --- */
.nav {
  position: fixed; z-index: var(--z-nav);
  top: 16px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  width: min(var(--wrap-max), calc(100% - 32px));
  padding: 10px 12px 10px 22px;
  background: rgba(10,10,11,0.6);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--line); border-radius: 999px;
  transition: transform 0.5s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.nav.hide { transform: translate(-50%, -140%); }
.nav.solid { background: rgba(12,12,15,0.86); box-shadow: 0 18px 50px -30px rgba(0,0,0,0.9); }
.nav-name { font-family: var(--sans); font-weight: 600; font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; display: inline-flex; align-items: center; min-height: 44px; }
.nav-links { display: flex; gap: clamp(14px, 2vw, 26px); margin-left: auto; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-size: 0.95rem; white-space: nowrap; transition: color 0.3s var(--ease); }
.nav-links a:hover { color: var(--ink); }
.nav-cta { padding: 12px 17px 12px 21px; font-size: 0.96rem; }
.nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; margin-left: auto; }
.nav-burger span { width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.4s var(--ease), opacity 0.3s var(--ease); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
  padding: 40px clamp(24px, 8vw, 64px);
  background: rgba(10,10,12,0.92); backdrop-filter: blur(26px);
}
.mobile-menu a { color: var(--ink); text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: 1.7rem; letter-spacing: -0.03em; padding: 8px 0; }
.mobile-menu .btn { margin-top: 28px; align-self: flex-start; font-family: var(--sans);
  --pad: 19px 30px; font-size: 1.3rem; }
.mobile-menu .btn .btn-ico { width: 36px; height: 36px; font-size: 1rem; }

/* --- HERO --- */
.hero { padding-top: clamp(114px, 15vh, 152px); padding-bottom: clamp(44px, 6vh, 80px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero-sub { color: var(--ink-2); font-size: clamp(1.08rem, 1rem + 0.4vw, 1.28rem); max-width: 54ch; margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
/* Буллеты первого экрана - вариант B с приёмки 14.08 (выбор Кати 17.08):
   четыре коротких факта в строку, без точек-маркеров, разделены волосяными
   линиями. Влад: буллеты «не на своём месте» вертикальным столбцом. */
.hero-markers { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-2); }
.hero-markers li { padding: 0 18px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
.hero-markers li + li { border-left: 1px solid rgba(242,238,230,0.12); padding-left: 18px; }
@media (max-width: 900px) {
  .hero-markers { grid-template-columns: repeat(2, 1fr); gap: 14px 0; }
  .hero-markers li:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .hero-markers { grid-template-columns: 1fr; gap: 10px; }
  .hero-markers li + li { border-left: 0; padding-left: 0; }
}
.hero-media { max-width: 560px; margin-left: auto; width: 100%; }
.hero-portrait { position: relative; }
.hero-portrait::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(176,181,230,0.22), transparent 66%); filter: blur(56px); }
.hero-portrait .media-ph { aspect-ratio: 4 / 5; }
.portrait-caption { margin-top: 14px; text-align: center; color: var(--muted); font-size: 0.88rem; font-family: var(--sans); letter-spacing: 0.01em; }

/* --- CASES (кому помогу) --- */
.cases { list-style: none; margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-2); }
@media (min-width: 1000px) {
  .cases { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 4vw, 72px); }
  .cases li:nth-child(2) { border-top: 0; }
}
.cases li {
  position: relative; padding: 20px 8px 20px 34px;
  border-bottom: 1px solid var(--line-2);
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.32rem); color: var(--ink-2);
  transition: color 0.3s var(--ease);
}
/* маркеры-ромбики убраны 12.08 (Катя: «слишком иишные») - вместо них тире,
   оно читается как типографика, а не как чек-лист крипто-лендинга */
/* растём через transform, а не width: анимация ширины дёргает раскладку */
.cases li::before { content: ""; position: absolute; left: 4px; top: 1.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: scale(1); transition: transform 0.4s var(--ease), background 0.35s var(--ease); }
.cases li:hover { color: var(--ink); }
.cases li:hover::before { transform: scale(1.5); background: var(--wood); }
/* max-width снят с блока и оставлен только абзацу: он зажимал чипы до 750px,
   и «и любой другой» уезжал на вторую строку (правка Кати 12.08) */
.wallets { margin-top: 34px; color: var(--ink-2); font-size: 1.08rem; }
.wallets b { color: var(--ink); font-weight: 600; }

.honest { margin-top: clamp(40px, 6vw, 72px); }
.honest-inner { padding: clamp(26px, 4vw, 44px); border-left: 0; }
.honest .h-sub { color: var(--ink); margin-bottom: 14px; }
.honest p { color: var(--ink-2); max-width: 74ch; }

/* --- КТО Я --- */

/* сетка блока живёт внизу файла, в «БЛОК О ВЛАДИМИРЕ 13.08» */
/* фото-слоты: сейчас сток-плейсхолдеры, меняются на съёмку Владимира */
.media-shot { position: relative; overflow: hidden; border-radius: var(--radius-in); display: block; }
.media-shot img { display: block; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.35) brightness(0.52) contrast(1.05); transition: transform 0.9s var(--ease), filter 0.6s var(--ease); }
.media-shot::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.72)); }
/* 13.08 отсюда убраны мёртвые правила прежних версий блока «Кто я»: слот видео
   с кнопкой play, подпись поверх кадра, галерея из трёх плиток и типографика
   старой двухколоночной вёрстки. В разметке этих элементов нет с 12.08.
   Живой блок собран внизу файла - «БЛОК О ВЛАДИМИРЕ 13.08». */

/* --- ШАГИ --- */
.steps { list-style: none; margin-top: clamp(14px, 2vw, 22px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 48px; }
.steps li { display: flex; gap: 20px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--line-2); }
.step-n {
  flex: none; width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  background: rgba(242,238,230,0.06); border: 1px solid var(--line);
}
.steps li p { color: var(--ink-2); padding-top: 8px; }

/* --- МЕТОД / АКАДЕМИЗМ --- */
.section-method { position: relative; background: linear-gradient(180deg, rgba(242,238,230,0.03), rgba(242,238,230,0.008) 48%, transparent); }
.section-method::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(176,181,230,0.5), transparent); }
/* фон 12.08: картинка с микросхемой снята - Влад просил упростить перегруженный деталями фон
   (встреча 30.07), плюс она весила 710 КБ. Осталась чистая подсветка. */
.section-method::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 78% 18%, rgba(176,181,230,0.10), transparent 62%); }
.section-method > .wrap { position: relative; z-index: 1; }
.method-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.method-copy p { color: var(--ink-2); max-width: 60ch; }
.method-copy p + p { margin-top: 16px; }
.method-copy .h-section { margin-bottom: 22px; }
.formula { margin: 26px 0; }
.formula-inner { padding: 28px 26px; text-align: center; display: flex; flex-direction: column; gap: 10px; overflow-x: auto; }
.formula-eq { font-family: var(--mono); font-size: clamp(1.25rem, 1rem + 1.6vw, 1.9rem); color: var(--ink); letter-spacing: 0.02em; white-space: nowrap; }
.formula-res { font-family: var(--mono); font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); color: var(--accent); }
.method-note { color: var(--ink-2); font-size: 0.98rem; }
.shuffler .shuffler-inner { padding: 34px 22px; }
.shuffle-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.shuffle-row span {
  font-family: var(--sans); font-size: 0.95rem; padding: 8px 14px; border-radius: 10px;
  background: rgba(242,238,230,0.04); border: 1px solid var(--line-2); color: var(--ink-2);
  transition: transform 0.5s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.shuffle-row span.miss { color: var(--accent); border-color: rgba(176,181,230,0.4); background: var(--accent-soft); }
.shuffle-caption { margin-top: 20px; text-align: center; color: var(--muted); font-size: 0.8rem; font-family: var(--sans); }

/* Прежние стили безопасности и цены (панель со замочками, карточка с крупным
   процентом) удалены 13.08: оба блока пересобраны, разметка их больше не
   использует. Новые правила - в блоке «БЛОК БЕЗОПАСНОСТЬ И ЦЕНА 13.08» в конце
   файла. */

/* --- FAQ --- */
.faq { margin-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 40px 24px 4px; position: relative;
  font-family: var(--sans); font-weight: 500; font-size: clamp(1.05rem, 1rem + 0.3vw, 1.22rem); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 20px; font-size: 1.5rem; color: var(--accent-ctl); font-weight: 400; transition: transform 0.4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 40px 26px 4px; }
.faq-body p { color: var(--ink-2); max-width: 74ch; }

/* --- ФОРМА --- */
.section-form { background: linear-gradient(180deg, transparent, rgba(242,238,230,0.02)); }
.form { margin-top: clamp(30px, 4vw, 46px); }
.form-inner { padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: 1fr; gap: 36px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field span { font-size: 0.9rem; color: var(--ink-2); }
.field select, .field input {
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: rgba(242,238,230,0.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px; width: 100%;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  appearance: none;
}
.field select:focus, .field input:focus { outline: none; border-color: var(--accent); background: rgba(176,181,230,0.06); }
.field input::placeholder { color: var(--muted); }
.check { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; color: var(--ink-2); font-size: 0.94rem; cursor: pointer; padding-top: 4px; }
.check input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin-top: 1px; }
.form .btn-block { grid-column: 1 / -1; margin-top: 8px; }
.form-fineprint { grid-column: 1 / -1; text-align: center; color: var(--ink-2); font-size: 0.9rem; }
/* согласие на обработку ПД (юр. правки 21.09) - тише основного примечания;
   ссылку на политику вставить сюда, когда появится страница */
.form-consent { font-size: 0.82rem; color: var(--muted); margin-top: -4px; }
.form-consent-check { padding-top: 0; }
.form-consent-check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}
.form-consent-check span { color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }
.form-consent-check a { color: var(--accent); }
.form-consent-check.field-invalid span { color: var(--danger); }

/* --- FOOTER --- */
.footer { border-top: 1px solid var(--line-2); padding-block: clamp(44px, 6vh, 76px); margin-top: clamp(22px, 4vh, 48px); }
.footer-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.footer-name { font-family: var(--sans); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.02em; }
.footer-note { color: var(--muted); font-size: 0.92rem; max-width: 46ch; text-wrap: pretty; }
.footer-links { display: flex; gap: 20px; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 0.92rem; transition: color 0.3s var(--ease); }
.footer-links a:hover { color: var(--ink); }

/* ==========================================================================
   MOTION: reveal - видим по умолчанию, анимация как надстройка (html.js)
   ========================================================================== */
.reveal { opacity: 1; transform: none; }
html.js .reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
html.js .reveal.is-visible { opacity: 1; transform: none; filter: none; }
html.js .reveal[data-reveal-delay="1"] { transition-delay: 0.12s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none; }
  .btn, .nav, .cases li, .shuffle-row span, .btn-ico { transition: none !important; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .hero-grid, .method-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* мобильные правила цены переехали в блок «БЛОК БЕЗОПАСНОСТЬ И ЦЕНА 13.08» */
}

@media (max-width: 720px) {
  .nav { padding: 8px 8px 8px 18px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .form-inner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 120px; }
  .honest-inner { padding: 24px; }
}

.mobile-menu[hidden] { display: none !important; }
@media (min-width: 1241px) { .mobile-menu { display: none !important; } }

/* --- hero: живой перебор «Евклида» --- */
.seed-live { aspect-ratio: 4 / 5; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(20px, 3vw, 32px); }
.seed-live-head { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; }
.seed-live-head .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wood); box-shadow: 0 0 10px rgba(206,142,66,0.55); }
.seed-count { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.seed-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.seed-grid span { font-family: var(--mono); font-size: 0.84rem; color: var(--ink-2); background: rgba(242,238,230,0.045); border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 6px; text-align: center; }
.seed-grid span.unk { color: var(--accent); border-color: rgba(176,181,230,0.45); background: var(--accent-soft); }
.seed-grid span.lock { color: var(--wood); border-color: rgba(206,142,66,0.5); background: rgba(206,142,66,0.10); }
.seed-live-foot { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); text-align: center; }

/* --- FAQ: мягкое раскрытие --- */
.faq details[open] .faq-body { animation: faqIn 0.4s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .faq details[open] .faq-body { animation: none; } }

/* ==========================================================================
   Аудит 30.07: плиточность секций, форма, мобилка
   ========================================================================== */

/* P0: CTA в мобильном меню была белым по белому (.mobile-menu a перебивал .btn-primary) */
.mobile-menu a.btn-primary { color: var(--bg); }

/* Панель-«сейф» из аудита 30.07 удалена 13.08 вместе с двумя колонками: блок
   безопасности пересобран без подложки, см. конец файла. */

/* Шаги: панель + синяя связка кружков с брендом */
.steps-shell { margin-top: clamp(34px, 5vw, 56px); }
.steps-inner { padding: clamp(22px, 3vw, 40px); }
.steps-shell .steps { margin-top: 0; }
.steps li:first-child { border-top: 0; }
@media (min-width: 901px) { .steps li:nth-child(2) { border-top: 0; } }
.step-n { border-color: rgba(176,181,230,0.35); }

/* Честный блок: плотная карточка вместо растянутой на весь экран */
.honest { max-width: 900px; }

/* Кошельки чипами - переиспользуем язык seed-grid */
.wallets { margin-top: 34px; }
.wallets p { color: var(--ink-2); font-size: 1.08rem; max-width: 70ch; }
/* восемь чипов должны укладываться в одну строку: «и любой другой» переносился
   на вторую и выглядел оторванным (правка Кати 12.08) */
.wallet-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wallet-chips span {
  font-family: var(--sans); font-size: 0.84rem; padding: 8px 12px; border-radius: 10px;
  background: rgba(242,238,230,0.04); border: 1px solid var(--line-2); color: var(--ink);
  white-space: nowrap;
}
.wallet-chips span.chip-more { color: var(--muted); border-style: dashed; }

/* маркеры «Кто я» убраны 13.08: три пункта дословно повторяли текст блока */

/* Шаффлер: статусная строка + спуск к формуле при align-start */
.method-visual { margin-top: clamp(56px, 9vw, 150px); }
.shuffle-status { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.02em; margin-bottom: 20px; }
.shuffle-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wood); box-shadow: 0 0 10px rgba(206,142,66,0.55); }

/* Селекты: видимая стрелка (appearance:none прятал её) */
.field select, .field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23A9A9AF' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 12px 8px;
  padding-right: 42px;
}

/* Якоря не ныряют под плавающий nav */
main section[id] { scroll-margin-top: 110px; }

/* Вдовы: защита текста вне <p> */
.cases li, .hero-markers li, .about-markers li, .faq summary { text-wrap: pretty; }

/* Мобилка: слово-поле тише, формула плотнее */
@media (max-width: 720px) {
  .wordfield { opacity: 0.3; }
  .formula-inner { padding: 22px 14px; }
  .method-visual { margin-top: 0; }
}

/* --- ссылка-хвост секции (из шагов - на статью блога) --- */
.section-note { margin-top: 28px; color: var(--ink-2); font-size: 1.02rem; }
.section-note a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(176,181,230,0.35); transition: border-color 0.3s var(--ease); }
.section-note a:hover { border-bottom-color: var(--accent); }
.steps li p a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(242,238,230,0.32); transition: border-color 0.3s var(--ease); }
.steps li p a:hover { border-bottom-color: rgba(242,238,230,0.6); }

/* --- смысловые акценты в тексте: белым на сером (копирайт v3, 30.07) --- */
.cases li b, .honest p b, .about-copy p b, .steps li p b,
.faq-body p b, .section-lead b {
  color: var(--ink); font-weight: 600;
}
.honest p + p { margin-top: 12px; }

/* ==========================================================================
   12.08.2026 - реальные материалы Влада вместо стока, правки со встречи 30.07:
   фото на первом экране, видео отдельным блоком, блок про саму машину,
   контраст блоков (одна светлая секция), перебор крупнее, блог внизу.
   ========================================================================== */

/* --- HERO: живой портрет вместо виджета-заглушки --- */
.portrait-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 28%;
  border-radius: var(--radius-in);
}

/* --- фото-слоты под реальные кадры: без тяжёлого затемнения стока --- */
.media-shot-wide { aspect-ratio: 16 / 10; }
.media-shot-screen { aspect-ratio: 16 / 9; }
.media-shot-wide img, .media-shot-screen img { filter: none; }
.media-shot-wide::after { background: linear-gradient(180deg, transparent 58%, rgba(0,0,0,0.34)); }
.media-shot-screen::after { background: none; }

/* Стили блока «Полторы минуты…» (.video-shell / .video-el) убраны 12.08
   вместе с самим блоком: он дублировал видео первого экрана. */

/* --- СВЕТЛАЯ СЕКЦИЯ: сейчас НЕ ИСПОЛЬЗУЕТСЯ ---
   ⚠️ 12.08 Катя убрала светлое совсем, класс снят с `#process`, разделение
   блоков теперь плитой - см. «БЛОК КАК ПРОХОДИТ РАБОТА 12.08» в конце файла.
   Правила оставлены целиком, а не удалены: папка `site/` не в git, откатывать
   было бы неоткуда. Вернуть светлое = вернуть класс в html.
   Токены переопределены на секции, поэтому вся вложенная типографика
   и рамки перекрашиваются сами, без дублей правил. */
.section-light {
  --ink:    #14161C;
  --ink-2:  #4C4A44;
  --muted:  #6B6862;
  --line:   rgba(20,22,28,0.16);
  --line-2: rgba(20,22,28,0.10);
  --accent: #3B45A8;
  /* костяной со столешницы и корпуса машины, а не нейтральный серый */
  background: #E4DED2;
  color: var(--ink);
}
.section-light .step-n {
  background: rgba(20,22,28,0.05);
  border-color: rgba(59,69,168,0.34);
  color: var(--ink);
}
.section-light .steps { margin-top: clamp(26px, 3.5vw, 44px); }
.section-light .steps li:first-child,
.section-light .steps li:nth-child(2) { border-top: 0; }
@media (max-width: 900px) {
  .section-light .steps li:nth-child(2) { border-top: 1px solid var(--line-2); }
}

/* --- БЛОК «ЕВКЛИД»: сама машина --- */
.euclid-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(28px, 4vw, 64px); align-items: center;
  margin-top: clamp(30px, 4vw, 52px);
}
.euclid-shot, .euclid-screen { margin: 0; }
.euclid-shot figcaption, .euclid-screen figcaption {
  margin-top: 14px; text-align: center;
  color: var(--muted); font-family: var(--sans); font-size: 0.82rem;
  text-wrap: pretty;
}
.euclid-facts { list-style: none; display: grid; gap: 2px; }
.euclid-facts li {
  position: relative; padding: 18px 8px 18px 34px;
  border-top: 1px solid var(--line-2); color: var(--ink-2);
}
.euclid-facts li:first-child { border-top: 0; }
.euclid-facts li::before {
  content: ""; position: absolute; left: 4px; top: 1.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--wood);
}
.euclid-facts li b { color: var(--ink); font-weight: 600; }
.euclid-screen { margin-top: clamp(32px, 4vw, 60px); }

/* --- ПЕРЕБОР: крупнее и активнее (просьба Влада), с двумя этапами --- */
.method-visual { margin-top: clamp(24px, 3vw, 56px); }
.seed-shell .seed-live { aspect-ratio: auto; gap: 18px; padding: clamp(20px, 2.6vw, 30px); }
.seed-shell .seed-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
.seed-shell .seed-grid span { font-size: 0.95rem; padding: 13px 6px; }
.seed-stage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seed-bar { height: 4px; border-radius: 999px; background: rgba(242,238,230,0.08); overflow: hidden; }
.seed-bar i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width 0.12s linear; }
.seed-bar.done i { background: linear-gradient(90deg, var(--wood), var(--warm)); }
.seed-note { margin-top: 16px; color: var(--muted); font-size: 0.92rem; max-width: 48ch; }

/* доска Владимира с той же формулой - живой пруф и заодно закрывает пустоту справа */
.board-shot { margin: clamp(22px, 3vw, 34px) 0 0; }
.board-shot figcaption {
  margin-top: 12px; color: var(--muted);
  font-family: var(--sans); font-size: 0.8rem; text-align: center; text-wrap: pretty;
}

/* --- БЛОГ внизу, после формы (порядок задал Влад) --- */
.section-blog { border-top: 1px solid var(--line-2); }
.blog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px; margin-top: clamp(26px, 3.5vw, 44px);
}
.blog-card {
  display: block; text-decoration: none;
  padding: clamp(22px, 3vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius-in);
  background: rgba(242,238,230,0.03);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.blog-card:hover { border-color: rgba(176,181,230,0.45); background: rgba(242,238,230,0.055); }
.blog-card h3 { font-family: var(--sans); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.blog-card p { margin-top: 12px; color: var(--ink-2); font-size: 0.98rem; }
.blog-more { display: inline-block; margin-top: 16px; color: var(--accent); font-size: 0.95rem; }

/* --- мобильное меню: крестик (закрывалось только выбором пункта) --- */
.menu-close {
  position: absolute; top: 14px; right: 14px;
  width: 46px; height: 46px; border: 0; background: none; cursor: pointer;
}
.menu-close::before, .menu-close::after {
  content: ""; position: absolute; left: 13px; top: 22px;
  width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px;
}
.menu-close::before { transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }

@media (max-width: 900px) {
  .euclid-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .seed-shell .seed-grid { grid-template-columns: repeat(3, 1fr); }
  .seed-shell .seed-grid span { font-size: 0.86rem; padding: 11px 4px; }
}

/* ==========================================================================
   Прогон адаптива 12.08 (responsive-check, 375/768/1280)
   ========================================================================== */

/* Колонки гридов не сжимались: min-width:auto держал ширину по самому длинному
   неразрывному куску. На 375px формула «C(12, 1) × 2048 × 3! × 2048» распирала
   колонку до 410px, а overflow-x:hidden на body это прятал - правый край
   формулы просто пропадал за экраном. */
.hero-grid > *, .about-grid > *, .method-grid > *, .euclid-grid > *,
.footer-grid > * { min-width: 0; }

@media (max-width: 560px) {
  .formula-eq { font-size: 1.05rem; letter-spacing: 0; }
  .formula-inner { padding: 20px 12px; }
}

/* Тач-таргеты меньше 44px */
.nav-burger { width: 44px; height: 44px; }
@media (max-width: 720px) {
  .footer-links a, .section-note a { display: inline-block; padding-block: 11px; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
}

/* Safari на айфоне зумит форму, если шрифт контрола меньше 16px */
.field select, .field input, .check input { font-size: 16px; }

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН 12.08 (вторая редакция): затемнённое видео во весь экран.
   Прежний вариант - текст слева, портрет в рамке справа - Катя забраковала:
   фотография читалась как вставленный прямоугольник. Теперь рамки нет вообще.
   Фоном идёт немой луп на 12 секунд (406 КБ), полное видео грузится только
   по кнопке и разворачивается на весь экран: текст растворяется, остаётся кадр.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* без svh на телефоне уедет под адресную строку */
  display: flex; align-items: stretch;
  padding-block: clamp(118px, 15vh, 168px) clamp(40px, 5vh, 56px);
  overflow: hidden;
}
/* Слой видео начинается ровно под шапкой, а не от верха экрана.
   Так кадр идёт сразу за ней и голова видна целиком. Прежний приём - пустое
   поле внутри самого видеофайла - читался тёмным разрывом (правка Кати 12.08). */
.hero-stage { position: absolute; inset: var(--nav-space) 0 0 0; z-index: 0; overflow: hidden; background: var(--bg); }
/* object-position по верху: на широком и низком окне cover срезает кадр сверху
   и снизу поровну, и первой уходит макушка (Катя поймала 12.08). Держим верх,
   срезаем низ - там всё равно стол. */
/* держим кадр по верху: в самом лупе сверху оставлено пустое поле высотой
   примерно со шапку, чтобы голова не пряталась под ней (правка Кати 12.08).
   Срезать при нехватке высоты можно только низ - там стол. */
.hero-bg {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%;
  /* Никакого размытия: коллеги Кати в один голос сказали «замылено» (12.08).
     Кадр идёт как есть, резкость исходника сохраняется. */
}

/* Затемнение: плотное слева под текстом, разреженное справа, чтобы кадр дышал.
   Второй градиент гасит верх под шапку и низ под линию перехода к следующему блоку. */
.hero-veil {
  position: absolute; inset: 0;
  background:
    /* Гасим только края, центр кадра чистый (правка Кати 12.08).
       Слева плотность нужна под текст, справа и по верху - лёгкая виньетка,
       снизу доводим до фона, чтобы первый экран перетекал в следующую секцию. */
    linear-gradient(96deg,
      rgba(6,8,14,0.80) 0%,
      rgba(6,8,14,0.68) 30%,
      rgba(6,8,14,0.50) 50%,   /* правый край заголовка: без этого он ложится на яркий экран */
      rgba(6,8,14,0.10) 62%,
      rgba(6,8,14,0) 72%,      /* зона Владимира - чистая */
      rgba(6,8,14,0) 88%,
      rgba(6,8,14,0.16) 100%),
    linear-gradient(180deg, rgba(6,8,14,0.34) 0%, rgba(6,8,14,0) 13%, rgba(6,8,14,0) 74%, var(--bg) 100%);
  transition: opacity 0.55s var(--ease);
}
/* колонка на всю высоту hero: текст центрируется в свободном месте,
   полоса буллетов прижата к низу экрана (просьба Кати 17.08) */
.hero-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; }
.hero-copy { margin-block: auto; }
/* 48rem вместо 44rem: строка «Помогаю вернуть доступ» просила 767px при колонке
   704 и уезжала на третью строку (замер 12.08). Вместе с чуть меньшим кеглем
   заголовок садится в две строки. */
.hero-copy { max-width: 56rem; }
.hero .h-display {
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem);
  font-weight: 800; line-height: 1.0;   /* без капса - вариант 4 */
}

/* тихая строка под кнопками: снимает страх ровно в момент решения.
   Абзац на первом экране убран - он повторял подзаголовок (12.08). */
.hero-note { margin-top: 18px; color: var(--muted); font-size: 0.92rem; max-width: 52ch; }

/* ==========================================================================
   ШАПКА: знак и бренд рядом с именем (правка Кати 12.08).
   На видео за спиной Владимира висит логотип Sunscrypt, и без подписи
   непонятно, что это. Теперь шапка сама объясняет: это он из Sunscrypt.
   ========================================================================== */
.nav-name { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; }
.nav-mark { width: 22px; height: 22px; flex: none; color: var(--ink); }
.nav-brand { font-weight: 600; letter-spacing: -0.02em; }
.nav-sep { color: var(--muted); font-weight: 400; margin: 0 1px; }
.nav-person { font-weight: 500; color: var(--ink-2); letter-spacing: -0.015em; }

/* 14.09: на узких экранах «Sunscrypt -» больше не прячем - в документе Влада
   логотип один на все экраны («В мобильной версии то же меню») */

/* кнопка просмотра - тихая, без крутящихся кругов */
.btn-watch { gap: 12px; }
.watch-ico {
  width: 0; height: 0; border-style: solid;
  border-width: 5.5px 0 5.5px 9px;
  border-color: transparent transparent transparent currentColor;
}
.watch-dur { color: var(--muted); font-family: var(--sans); font-size: 0.85rem; }
.btn-watch:hover .watch-dur { color: var(--ink-2); }

/* --- полноэкранный просмотр --- */
.viewer {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  opacity: 0; transition: opacity 0.55s var(--ease);
}
.viewer[hidden] { display: none; }
.viewer.is-open { opacity: 1; }
.viewer-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--bg); }
.viewer-close {
  position: absolute; top: 16px; right: 16px; width: 48px; height: 48px;
  border: 1px solid var(--line); border-radius: 999px; cursor: pointer;
  background: rgba(6,8,14,0.55);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background 0.3s var(--ease);
}
.viewer-close:hover { background: rgba(6,8,14,0.85); }
.viewer-close::before, .viewer-close::after {
  content: ""; position: absolute; left: 14px; top: 23px;
  width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px;
}
.viewer-close::before { transform: rotate(45deg); }
.viewer-close::after { transform: rotate(-45deg); }

/* пока смотрим - текст и шапка растворяются, фон гаснет: для человека это
   выглядит так, будто текст просто пропал, а кадр остался */
body.viewing { overflow: hidden; }
body.viewing .nav,
body.viewing .hero-copy,
body.viewing .hero-markers { opacity: 0; pointer-events: none; transition: opacity 0.45s var(--ease); }
body.viewing .hero-veil { opacity: 0; }

@media (max-width: 720px) {
  /* на телефоне шапка компактнее, слой видео подтягиваем под неё */
  :root { --nav-space: 78px; }
  .hero { padding-top: 108px; min-height: auto; }
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(6,8,14,0.82) 0%, rgba(6,8,14,0.66) 30%, rgba(6,8,14,0.86) 72%, var(--bg) 100%);
  }
  .hero-sign { margin-top: 34px; }
  .viewer-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-veil, .viewer, body.viewing .nav, body.viewing .hero-copy { transition: none; }
}

/* ==========================================================================
   ЖИДКОЕ СТЕКЛО 12.08 (шапка, кнопки-призраки, меню, крестики)
   Решение Кати: стекло должно жить и меняться от того, что под ним.

   Три слоя, каждый следующий доезжает только там, где браузер умеет:
   1) ТОЛЩИНА. Заливка почти прозрачная, зато у края появилась кромка:
      светлая линия сверху, тень снизу, по бокам тёплый и холодный рефлексы -
      те же, что стоял фотограф (справа тёплый задник, слева синяя подсветка).
      Плюс кольцо по периметру с другим размытием: край стекла собирает свет
      плотнее середины, и это читается как скруглённое ребро.
   2) ПРЕЛОМЛЕНИЕ. В Chrome и Edge сверху ложится backdrop-filter: url(...) -
      фон под кромкой реально гнётся, как через линзу. Карту смещения считает
      скрипт, по элементу на каждый размер. WebKit и Firefox эту связку не
      поддерживают вообще (в спецификации CSS её нет), поэтому на айфоне
      останется слой 1 - и это нормально, там не видно, что чего-то нет.
   3) РЕАКЦИЯ НА ПОДЛОЖКУ. Две переменные ниже крутит скрипт: --glass-a это
      плотность заливки, --glass-dim это насколько гасим то, что под стеклом.
      Над светлой секцией стекло переключается на молочное классом .on-light.

   ⚠️ Прозрачное стекло держится на контрасте: чем светлее кадр под шапкой,
   тем сильнее гасим подложку, иначе подписи меню тонут. Числа подобраны так,
   чтобы на самом светлом кадре видео контраст текста оставался выше 4,5:1.
   ========================================================================== */

:root {
  --glass-a:   0.055;  /* альфа светлой заливки: 0.03 на тёмном, до 0.14 на светлом */
  --glass-dim: 0.86;   /* гасим подложку: 0.95 на тёмном, до 0.45 на светлом кадре */
  --glass-blur: 14px;
}

/* --- общая формула стекла --- */
.nav,
.btn-ghost,
.menu-close,
.viewer-close {
  background:
    linear-gradient(180deg,
      rgba(242,238,230, var(--glass-a)),
      rgba(242,238,230, calc(var(--glass-a) * 0.22)) 42%,
      rgba(6,8,14,0.06));
  backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-dim));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-dim));
  border: 1px solid rgba(242,238,230,0.13);
  box-shadow:
    inset 0  1px 0 0 rgba(242,238,230,0.34),   /* верхняя кромка: свет ложится на ребро */
    inset 0 -1px 0 0 rgba(6,8,14,0.55),        /* нижняя: там стекло уходит в тень */
    inset  1px 0 0 0 rgba(176,181,230,0.16),   /* рефлекс уведён в синий - тёплого в гамме больше нет */
    inset -1px 0 0 0 rgba(176,181,230,0.20),   /* холодный - подсветка логотипа */
    0 18px 44px -26px rgba(0,0,0,0.92);
}

/* Кнопка-призрак раньше была прозрачной с обводкой. Стекло заменяет обводку,
   но саму кнопку не утяжеляет: размытие меньше, чем у шапки. */
.btn-ghost {
  --glass-blur: 12px;
  color: var(--ink);
}
.btn-ghost:hover {
  --glass-a: 0.11;
  border-color: rgba(242,238,230,0.26);
}

/* Кольцо-фаска. Маска вырезает середину и оставляет полосу по краю: только там
   работает второй backdrop-filter, поэтому кромка светлее и резче центра.
   z-index -1 держит его под содержимым, isolation не даёт ему уехать за фон.
   ⚠️ Шапке position тут НЕ задаём: у неё уже position:fixed, и правило ниже по
   файлу перебивало его на relative - шапка выпадала из фиксации, вставала в
   поток и толкала первый экран вниз (дыра над видео плюс уезжающая при скролле
   шапка, поймала Катя 12.08). Позиционировать надо только кнопку. */
.btn-ghost { position: relative; }
.nav, .btn-ghost { isolation: isolate; }
.nav::before,
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; pointer-events: none;
  padding: 6px;
  backdrop-filter: blur(2px) brightness(1.10) saturate(135%);
  -webkit-backdrop-filter: blur(2px) brightness(1.10) saturate(135%);
  -webkit-mask: linear-gradient(#000,#000) content-box exclude, linear-gradient(#000,#000);
          mask: linear-gradient(#000,#000) content-box exclude, linear-gradient(#000,#000);
}

/* Блик. Короткая дуга сверху-слева и тёплое пятно справа - повтор схемы света
   всей страницы, поэтому шапка не выглядит наклеенной поверх кадра. */
.nav::after,
.btn-ghost::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 300% at 12% -60%, rgba(242,238,230,0.20), transparent 46%),
    radial-gradient(90% 240% at 92% -40%, rgba(176,181,230,0.12), transparent 52%);
  mix-blend-mode: screen;
}

/* Прежний .solid делал шапку почти непрозрачной плашкой. Теперь плотность
   считается от кадра, а .solid только слегка добавляет вес при скролле. */
.nav.solid {
  --glass-a: calc(0.055 + 0.045);
  box-shadow:
    inset 0  1px 0 0 rgba(242,238,230,0.30),
    inset 0 -1px 0 0 rgba(6,8,14,0.55),
    inset -1px 0 0 0 rgba(176,181,230,0.18),
    0 20px 54px -28px rgba(0,0,0,0.95);
}

/* --- над светлой секцией --- */
/* Костяной фон «Как проходит работа» занимает целый экран, и тёмное стекло
   над ним читалось грязной наклейкой. Класс ставит наблюдатель из script.js. */
.nav.on-light {
  background: linear-gradient(180deg, rgba(255,255,255,0.42), rgba(255,255,255,0.16));
  backdrop-filter: blur(var(--glass-blur)) saturate(150%) brightness(1.06);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%) brightness(1.06);
  border-color: rgba(20,22,28,0.14);
  box-shadow:
    inset 0  1px 0 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 0 rgba(20,22,28,0.16),
    inset -1px 0 0 0 rgba(59,69,168,0.16),
    0 14px 36px -28px rgba(20,22,28,0.60);
}
.nav.on-light::before { backdrop-filter: blur(2px) brightness(1.04); -webkit-backdrop-filter: blur(2px) brightness(1.04); }
.nav.on-light::after  { background: radial-gradient(120% 300% at 12% -60%, rgba(255,255,255,0.50), transparent 46%); }
.nav.on-light .nav-name { color: #14161C; }
.nav.on-light .nav-links a { color: #4C4A44; }
.nav.on-light .nav-links a:hover { color: #14161C; }
.nav.on-light .nav-cta { background: #14161C; color: #E4DED2; }
.nav.on-light .nav-cta:hover { background: #262A33; }
.nav.on-light .nav-burger span { background: #14161C; }
/* Знак Sunscrypt и подписи рядом с ним держат свой цвет отдельными правилами,
   поэтому на светлом стекле они бы остались светлыми и пропали. Синий градиент
   внутри знака трогать не надо - он читается на костяном сам (правки шапки
   пришли из параллельной сессии 12.08, сверено после них). */
.nav.on-light .nav-mark { color: #14161C; }
.nav.on-light .nav-brand { color: #14161C; }
.nav.on-light .nav-sep { color: #6B6862; }
.nav.on-light .nav-person { color: #4C4A44; }

/* Планшет в портрете: на 721-820px шапка перестаёт помещаться.
   Замер 12.08 на 768px: имя со знаком 187 + меню 307 + кнопка 207, плюс два
   зазора по 23 и паддинги 34 - это 747 при доступных 736, и кнопка «Оценить
   ситуацию» уезжает за правый край экрана на 17px. Ниже 721px меню и так
   уходит в бургер, выше 820px всё влезает.
   Слово «Sunscrypt» тут прятать бесполезно: оно уже скрыто правилом шапки
   до 900px. Поэтому ужимаем зазоры и кегль - знак, имя и все пять ссылок
   остаются на месте. Правило стоит отдельно, чужие строки не тронуты. */
@media (min-width: 721px) and (max-width: 820px) {
  .nav { gap: 14px; padding-left: 16px; }
  .nav-links { gap: 13px; }
  .nav-links a { font-size: 0.88rem; }
  .nav-cta { padding: 10px 12px 10px 14px; font-size: 0.86rem; }
}
/* --- преломление, только там, где браузер умеет --- */
/* Переменную --refract ставит скрипт поимённо на каждый элемент: у каждого
   свой фильтр, потому что карта смещения считается под конкретный размер. */
html.glass-refract .nav,
html.glass-refract .btn-ghost {
  backdrop-filter: var(--refract, none) blur(2px) saturate(175%) brightness(var(--glass-dim));
  -webkit-backdrop-filter: var(--refract, none) blur(2px) saturate(175%) brightness(var(--glass-dim));
}
html.glass-refract .nav.on-light {
  backdrop-filter: var(--refract, none) blur(2px) saturate(150%) brightness(1.06);
  -webkit-backdrop-filter: var(--refract, none) blur(2px) saturate(150%) brightness(1.06);
}

/* --- меню и крестики --- */
/* У .menu-close и .viewer-close оба псевдоэлемента заняты палочками крестика,
   поэтому им достаётся стекло без кольца-фаски. */
.mobile-menu {
  background: linear-gradient(180deg, rgba(10,10,12,0.80), rgba(6,8,14,0.90));
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
}
.menu-close, .viewer-close { --glass-a: 0.10; --glass-blur: 12px; }
.menu-close:hover, .viewer-close:hover { --glass-a: 0.18; }

/* Телефон: преломление не включаем даже в Chrome. Стекло поверх играющего
   видео и так пересчитывается каждый кадр, а на маленьком экране изгиб кромки
   всё равно не разглядеть - меняем цену на ничто. */
@media (max-width: 720px) {
  html.glass-refract .nav,
  html.glass-refract .btn-ghost {
    backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-dim));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%) brightness(var(--glass-dim));
  }
  .nav::before, .btn-ghost::before { padding: 4px; }
}

/* Экономия батареи и «поменьше движения»: стекло остаётся, живая подстройка
   под кадр выключается скриптом, а кольцо-фаска убирается - это второй
   backdrop-filter на элемент, самая дорогая часть картинки. */
@media (prefers-reduced-motion: reduce) {
  .nav::before, .btn-ghost::before { display: none; }
}

/* ==========================================================================
   БЛОК КАК ПРОХОДИТ РАБОТА 12.08
   Светлая секция убрана решением Кати. Замер, из-за которого: костяная заливка
   давала среднюю яркость 217,6 из 255 при 36,2 у следующей секции и 11-23 у всех
   остальных - в 6 раз ярче ближайшего соседа. При этом «чернил» внутри неё было
   3,6%, то есть 96% этой вспышки - пустой фон. На 375px блок выходил 989px при
   экране 812: в кадре не оставалось ни одного тёмного края.

   Контраст блоков (просьба Влада 30.07: «лендинги строятся на контрасте блоков
   между собой - светлый, тёмный») остаётся, но на тёмной амплитуде: секция
   поднята над фоном страницы тонкой плитой и растворена по краям, чтобы
   не появилось резкой линии - ровно то, чем светлая секция и выбивалась.
   ========================================================================== */
/* «Как проходит работа»: прозрачная секция, отступ и разделитель - общие
   (единая система разделения 14.08). Костяная заливка и увеличенный отступ убраны. */
/* кружки шагов держат синий с фотосессии - единственный акцент в блоке */
.section-steps .step-n {
  background: rgba(242,238,230,0.05);
  border-color: rgba(176,181,230,0.38);
}
.section-steps .steps li p b { color: var(--ink); }

/* Порядок чтения: 1-2-3 в левой колонке, 4-5-6 в правой (решение Кати 12.08).
   Было заполнение по строкам, и нумерованный путь шёл зигзагом 1|2, 3|4, 5|6 -
   глаз идёт вниз, а нумерация вела вбок. Подложку Катя не взяла: шаги
   остаются лежать прямо на странице.
   Линейки переставлены под новый поток: без верхней границы теперь первый
   и четвёртый, то есть верхние в каждой колонке, а не первый и второй. */
@media (min-width: 901px) {
  /* строки одинаковой высоты: `1fr` в сетке без заданной высоты равняет их
     по самой высокой. Без этого шаг между цифрами гулял - строка тянулась
     по длинному пункту, а короткий сосед оставался мелким (правка Кати 13.08) */
  .section-steps .steps { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }
  .section-steps .steps li { border-top: 1px solid var(--line-2); }
  .section-steps .steps li:nth-child(1),
  .section-steps .steps li:nth-child(4) { border-top: 0; }
}

/* Цифра ровно посередине между линейками, текст на той же оси.
   Было `align-items: flex-start` плюс костыль `padding-top: 8px` на абзаце:
   содержимое прижималось к верху ячейки, и в высокой строке кружок висел
   вверху, а не по центру. Теперь центрируется весь ряд целиком, поэтому
   и кружок, и текст стоят на середине своей ячейки. */
.section-steps .steps li { align-items: center; }
.section-steps .steps li p { padding-top: 0; }

/* ==========================================================================
   БЛОК КОМУ ПОМОГУ 12.08 - секция #help пересобрана целиком

   Было: список из шести строк одного кегля, плашки кошельков и панель
   «Честно» в двойной рамке. Три разные вещи выглядели одинаково, а панель
   стояла первой из одиннадцати таких же рамок на странице.

   Стало: две половины одного ответа на вопрос «мой ли это случай».
   «Я смогу вернуть доступ, если…» и «Не смогу, если…» - зеркальная пара:
   один кегль заголовка, одна сетка, во всю ширину. Разведены только светом
   маркера, тёплым и холодным, оба цвета с фотосессии Владимира.

   Правки Кати по ходу:
   · кейсы сливались в пятно - у каждого свой ярлык, контраст с пояснением
     вдвое по кеглю, глаз скользит по ярлыкам и находит свой случай;
   · «а когда не смогу» висело ниже и правее - теперь равноправная половина;
   · реплика про мошенников была третьей ячейкой сетки без ярлыка и
     притворялась кейсом - вынесена строкой под раздел;
   · кошельки мелким моно вместо плашек-пилюль - её решение, нравится.

   Ни одной рамки во всём блоке: на странице их одиннадцать подряд, и блок
   без рамки выделяется сильнее, чем ещё одна панель.

   ⚠️ Правила .cases / .wallets / .wallet-chips / .honest выше по файлу
   осиротели - в разметке этих классов больше нет. Удалить отдельным
   проходом, когда параллельные сессии закончат работу с файлом.
   ========================================================================== */
/* Секция вытянута вверх (правка Влада 14.08: блок «узкий и горизонтальный»,
   нужен воздух). Свой padding поверх общего .section + разреженная сетка. */
#help { padding-block: clamp(220px, 26vh, 360px); }
.help-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(28px, 3.4vw, 56px); row-gap: clamp(40px, 4.4vw, 64px);
  margin-top: clamp(44px, 5vw, 68px);
}
/* Кейсы с иконками вместо точек (Катя 17.08, вариант 1 из показанных двух):
   матово-белая контурная иконка Lucide колонкой слева, текст ровным блоком
   справа. Точки-маркеры убраны вместе с ховером. */
.help-case { display: flex; gap: 14px; }
/* Иконка центрируется по первой строке заголовка. Настоящей причиной «низко»
   был селектор `.help-case span`, копавший обёртку иконки (см. ниже) - после
   его сужения искусственный подъём не нужен: центры сходятся в пиксель. */
.hc-ic { flex: 0 0 auto; color: rgba(242,238,230,0.8); }
.hc-ic svg { display: block; }
/* ярлык и пояснение разведены весом и кеглем вдвое: за зацепку глазу
   отвечает контраст размера, а не рамка вокруг карточки */
.help-case b {
  display: block; font-family: var(--sans); font-weight: 600;
  font-size: 1.18rem; line-height: 1.22;
  letter-spacing: -0.025em; color: var(--ink);
}
/* селектор сужен 17.08: голое `.help-case span` цеплял и обёртку иконки
   .hc-ic (тоже span) - description-правило перебивало её margin-top */
.help-case .hc-tx span {
  display: block; margin-top: 6px; font-size: 0.86rem; line-height: 1.5;
  color: var(--muted);
}

/* Подблок «Не смогу, если…» удалён 13.08 по решению Кати: то же самое
   говорилось дважды на одной странице, смысл переехал в «Частые вопросы».
   Вместе с ним ушли правила .help-no (холодное пятно, синие маркеры) и
   .help-note. Холодных маркеров в блоке больше нет, он весь тёплый. */

/* кошельки нужны поиску, а не глазу: мелкий моноширинный без плашек.
   Отступ ужат с 76 до 52px под тот же шаг, что заголовок → сетка: после
   удаления подблока секция стала вдвое ниже, и служебная строка с прежним
   зазором перевешивала само содержание (52 / 181 / 104 по замеру). */
.help-wallets {
  margin-top: clamp(40px, 4vw, 52px); padding-top: 22px;
  border-top: 1px solid var(--line-2);
}
/* Две колонки с подписями (выбор Кати 17.08, вариант A из трёх показанных):
   кошельки и монеты разведены геометрией, чтобы перечни не сливались в кашу.
   Монеты - официальные названия латиницей. Пробелы между span обязательны:
   без них строке негде переноситься и она распирает колонку на телефоне. */
.help-wallets { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); }
.help-wallets .hw-col { min-width: 0; }
.hw-cap {
  margin: 0 0 10px; font-size: 0.82rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.hw-list { margin: 0; font-size: 1rem; line-height: 1.9; color: var(--ink-2); letter-spacing: 0.01em; }
.hw-list span { white-space: nowrap; }
.hw-list span + span::before { content: " · "; color: var(--muted); }
@media (max-width: 640px) { .help-wallets { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 1100px) { .help-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .help-grid { grid-template-columns: 1fr; } }


/* ── ПЕРВЫЙ ЭКРАН · ответ на «как» 13.08 ──────────────────────────────
   Абзац между подзаголовком и кнопками: человек должен понять, что
   вообще будет происходить, до того как решится жать «Оставить заявку». */
.hero-how {
  margin-top: 14px;
  max-width: 46rem;
  color: var(--ink-2);
  /* кегль поднят 17.08 с 1.05rem (16,8px) до 1.18rem (18,9px): текста на первом
     экране стало меньше после снятия второго заголовка, Влад просил «увеличить
     чуть текста, чтобы стало читаемее» (встреча 14.08). Держим в пределах трёх
     строк - это его же граница по объёму абзаца. */
  font-size: 1.18rem;
  line-height: 1.5;
}
.hero-how + .hero-actions { margin-top: 30px; }

@media (max-width: 900px) {
  .hero-how { font-size: 1.08rem; margin-top: 20px; max-width: 40ch; }
  .hero-how + .hero-actions { margin-top: 26px; }
}
@media (max-width: 560px) {
  .hero-how { font-size: 1.02rem; }
}

/* ==========================================================================
   БЛОК О ВЛАДИМИРЕ 13.08 - кадр слева, текст с правой половины

   Что поменялось против прежней версии: ушла двойная рамка (таких панелей на
   странице было восемь подряд), ушли три маркера, дословно повторявшие абзацы,
   и сам кадр стал другим - DSC09610, где рядом с Владом стоит «Евклид».

   Сетка держится числом, а не на глаз:
   · центр головы в кадре стоит на 46% его ширины (замер по светлым тёплым
     пикселям верхней трети);
   · слой кадра занимает 50,3% окна, внутри кадр сдвинут на 39% - вместе это
     ставит лицо ровно на первую четверть ширины страницы. Проверено на 1440
     (24,9%) и на 1280 (25,6%);
   · текст начинается ровно с середины страницы;
   · линия глаз - 140px от верха блока, центр имени - 117px: заголовок стоит
     чуть выше глаз, как просила Катя.

   Кадр обрезан снизу ещё в файле: замер по строкам показал, что ниже 70%
   высоты идёт только тёмный пол. Резали из оригинала 7008×3935, а не из
   веб-версии - иначе получилось бы двойное сжатие.
   ========================================================================== */

/* обёртки мобильных GSAP-сцен: на десктопе и без GSAP растворяются
   (display:contents) и раскладку не меняют; мобильные роли - в конце файла */
.about-stick, .mth-frame { display: contents; }
.mth-demo-h { display: none; }

.section-about {
  position: relative; overflow: hidden;
  min-height: 741px; display: flex; align-items: center;
  /* верхний padding секции обнулён (Катя 17.08, третья итерация): общий
     .section давал до 240px сверху и держал текст низко. Кадр слева и так
     занимает всю высоту, воздух над блоком даёт предыдущая секция. */
  padding-top: 0;
}
.section-about .wrap { align-self: flex-start; padding-top: clamp(80px, calc(6vh + 40px), 112px); }

/* Воздух над головой (Катя 19.08): кадр опущен на 80px, низ уходит под
   нижнюю кромку секции и режется её overflow. Высота слоя та же (top и
   bottom смещены на одну величину) - масштаб кадра и размер лица не
   меняются. Замер до правки: макушка на 28px от верха секции против
   126px у текста; резать снизу можно - там столешница, уже погашенная
   градиентом .about-shot::after от 58%. */
.about-shot { position: absolute; z-index: 0; top: 80px; bottom: 0; left: 0; width: 50.3%; }
/* Вариант Б (Катя 19.08): кадр перерезан из оригинала на 85% вместо 72% - в
   кадр вернулся низ сцены. Секция выросла ВНИЗ 560 -> 741px, воздух сверху
   остался прежним (80px), масштаб кадра держим тот же 72,2% - иначе Влад
   сел бы на 15%. Низ больше не режется: bottom: 0 вместо -80px. */
.about-shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 39% 50%; display: block;
  /* края растворяются в фоне: справа стык с текстом, слева и сверху - с полем.
     Верхнее растворение 7% -> 24% (Катя 17.08): фон кадра светлее и синее фона
     страницы, при коротком градиенте стык с чёрной секцией читался ступенькой.
     Фильтр brightness/saturate, стоявший тут пару итераций, убран: делал
     Влада тёмным (Катя 17.08) - вместо него погашено само пятно .glow-mid. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 55%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 74%, transparent 97%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 55%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 17%, #000 74%, transparent 97%);
}
/* столешница светлая и режет кадр прямой линией - слегка гасим низ */
.about-shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(6,8,14,0.28) 78%, rgba(6,8,14,0.72));
}

.about-copy { position: relative; z-index: 1; margin-left: 50%; width: 50%; }
.about-eyebrow {
  font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-ctl);
}
.about-name { line-height: 1.06; margin-top: 14px; }
/* отступы между абзацами вдвое больше (Катя 17.08) */
.about-copy .about-line {
  color: var(--ink-2); font-size: clamp(1.12rem, 1rem + 0.5vw, 1.32rem);
  margin-top: 40px;
}
.about-copy .about-facts {
  margin-top: 56px; padding-top: 40px; border-top: 1px solid rgba(242,238,230,0.14);
  color: var(--muted); font-size: 0.96rem;
}

@media (max-width: 900px) {
  /* на узком экране колонка в половину ширины выродилась бы в лоскут:
     кадр идёт во всю ширину сверху, текст под ним */
  .section-about { min-height: 0; display: block; }
  /* десктопный отступ .wrap (~96px, строка «.section-about > .wrap» выше)
     на мобиле давал дыру между фоткой и именем - имя начинается сразу */
  .section-about .wrap { padding-top: 0; }
  /* линия перед «Основатель…» → короткий штрих (выбор Кати 26.08 из трёх
     вариантов): отступы 56/40 разнобоем сжаты, полная линия не нужна */
  .about-copy .about-facts { margin-top: 24px; padding-top: 18px; border-top: 0; position: relative; }
  .about-copy .about-facts::before { content: ''; position: absolute; top: 0; left: 0;
    width: 44px; height: 2px; background: var(--accent); opacity: 0.65; }
  .about-shot { position: relative; top: 0; bottom: auto; width: 100%; height: 300px; margin-bottom: 28px; }
  /* в статичном режиме кадр «Обо мне» - обычный блок в потоке, воздух над
     фоткой задаём ему сами (в gs-режиме это делает padding липкого кадра) */
  html:not(.gs) .about-shot { margin-top: clamp(48px, 8vh, 96px); }
  .about-shot img { object-position: 42% 22%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 78%, transparent 100%); }
  .about-copy { margin-left: 0; width: 100%; max-width: none; }
}

/* ==========================================================================
   БЛОК БЕЗОПАСНОСТЬ И ЦЕНА 13.08 (принято Катей: цена + вариант Б безопасности)

   Обе секции пересобраны, а не подкручены. Двойная рамка убрана из обеих:
   на странице она стояла восемь раз подряд, и глазу не за что было зацепиться
   (плюс `.bezel` с внутренней поверхностью - это карточка внутри карточки).

   Пара работает как связка. Безопасность - самое тёмное место страницы, где
   светит только машина, и сухой протокол правил. Цена - единственная тёплая
   комната, где называют условия и дают кнопку. Замерено на рендере: яркость
   безопасности 17 из 255 против 22-36 у соседних тёмных секций, цена 26 и
   единственная с плюсовым «теплом» (R−B +2,8). Фон под правилами 13-18, текст
   на нём светло-серый - контраст с запасом.

   Кнопка в цене - единственная между первым экраном и формой: до этого на
   восьми секциях подряд человеку было нечего нажать в момент, когда он решился.
   ========================================================================== */

/* Заголовки двух блоков решения крупнее прочих секций: иерархия страницы
   становится 62 (первый экран) → 48 (решение) → 41,6 (остальные). */
.h-decision {
  font-family: var(--sans); font-weight: 600;
  font-size: clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
  line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance;
}

/* --- БЕЗОПАСНОСТЬ: комната машины --- */
/* Плита темнее фона страницы и непрозрачная, поэтому перекрывает световые пятна
   `.ambient` (они лежат позади с z-index -1). Края плиты растворяются, иначе
   между секциями появился бы шов. */
.safety-room {
  position: relative; overflow: clip; contain: paint;
  background: linear-gradient(180deg, rgba(4,6,12,0), #04060C 11%, #04060C 89%, rgba(4,6,12,0));
}
/* синий луч машины снизу-слева - в палитре это её подсветка */
.safety-room::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 52vw; height: 40vw; left: -12vw; bottom: -16vw;
  background: radial-gradient(ellipse, rgba(176,181,230,0.20), transparent 66%);
  filter: blur(90px);
}
/* кадр внутренностей: фактура, а не фотография в рамке */
.safety-shot {
  position: absolute; z-index: -1; pointer-events: none;
  right: 0; top: 0; width: min(44%, 620px); height: 100%;
  background: url("assets/euclid-inside.jpg?v=1") 58% 50% / cover no-repeat;
  opacity: 0.72;
  -webkit-mask-image: radial-gradient(135% 105% at 92% 50%, #000 0%, rgba(0,0,0,0.62) 46%, transparent 80%);
  mask-image: radial-gradient(135% 105% at 92% 50%, #000 0%, rgba(0,0,0,0.62) 46%, transparent 80%);
}
.safety-copy { max-width: 60%; }
.safety-copy .h-decision { max-width: 22ch; }
.safety-lead { color: var(--ink-2); margin-top: 18px; max-width: 42ch; font-size: 1.08rem; }

/* Правила: сухой регистр вместо списка выгод. Лид-ин слева, факт справа,
   между строками волосяная линия. Шесть иконок-замков подряд убраны - это
   декоративный маркер, а не смысл. */
.rules { list-style: none; display: grid; margin-top: clamp(28px, 3.5vw, 44px); }
.rules li {
  display: grid; grid-template-columns: minmax(180px, 15rem) 1fr;
  gap: clamp(16px, 2vw, 32px);
  padding: 22px 0; border-top: 1px solid var(--line-2);
}
.rules li:first-child { border-top: 0; padding-top: 0; }
.rules b { color: var(--ink); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.015em; }
.rules span { color: var(--ink-2); }

/* --- ЦЕНА: тёплая комната --- */
/* Единственное место страницы, где работают дерево и тёплый задник с
   фотосессии. Тепло даёт цвет, а не осветление: яркость остаётся в диапазоне
   тёмных секций, чтобы не повторить историю со светлым блоком. */
.price-room {
  position: relative; overflow: clip; contain: paint;
  background: #050608;
  /* после фото Евклида впритык заголовок цены липнет к стыку - воздуха сверху больше */
  padding-top: clamp(84px, 10vh, 132px);
}
.price-room > .wrap { position: relative; z-index: 1; }
.price-room::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 62vw; height: 42vw; left: -6vw; top: -14vw;
  background: radial-gradient(ellipse, rgba(176,181,230,0.18), transparent 64%);
  filter: blur(100px);
}
.price-room::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 40vw; height: 30vw; right: -10vw; bottom: -12vw;
  background: radial-gradient(ellipse, rgba(176,181,230,0.12), transparent 68%);
  filter: blur(100px);
}
.price-top { display: grid; grid-template-columns: 1fr auto; gap: clamp(28px, 4vw, 72px); align-items: end; }
.price-claim { max-width: 24ch; }
.price-claim .num { color: var(--accent-hi); }
.price-act { display: grid; justify-items: start; gap: 12px; }
.price-fine { color: var(--ink-2); font-size: 0.92rem; max-width: 26ch; }
.price-terms-note { max-width: none; margin-top: 34px; }
.price-room .price-act { margin-top: clamp(30px, 3.6vw, 48px); }

/* Три условия горизонтальной лентой: рамок нет, поля делит волосяная линия. */
.price-terms {
  list-style: none; margin-top: clamp(34px, 4.5vw, 60px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.price-terms li { padding: 26px clamp(20px, 2.4vw, 40px) 4px; border-left: 1px solid var(--line-2); }
.price-terms li:first-child { padding-left: 0; border-left: 0; }
.price-terms b { display: block; color: var(--ink); font-weight: 600; font-size: 1.06rem; letter-spacing: -0.015em; }
.price-terms span { display: block; color: var(--ink-2); margin-top: 8px; }

/* защита от распирания сетки длинным словом */
.price-top > *, .price-terms > *, .rules > * { min-width: 0; }
.rules li, .price-terms li { text-wrap: pretty; }

@media (max-width: 1000px) {
  /* колонка в 60% выродилась бы в лоскут: текст во всю ширину, а кадр уходит
     в фон целиком - полосой справа он отжимал бы правила в узкую колонку */
  .safety-copy { max-width: none; }
  .safety-shot {
    width: 100%; height: 100%; opacity: 0.4; background-position: 60% 50%;
    -webkit-mask-image: radial-gradient(120% 90% at 78% 22%, #000 0%, rgba(0,0,0,0.5) 42%, transparent 76%);
    mask-image: radial-gradient(120% 90% at 78% 22%, #000 0%, rgba(0,0,0,0.5) 42%, transparent 76%);
  }
  .price-top { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .price-claim { max-width: 30ch; }
  .price-terms { grid-template-columns: 1fr; border-top: 0; }
  .price-terms li { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .price-terms li:first-child { border-top: 1px solid var(--line); }
}

@media (max-width: 620px) {
  /* лид-ин над фактом, а не рядом: на 375px колонка в 15rem не оставляет места */
  .rules li { grid-template-columns: 1fr; gap: 6px; }
}

/* ==========================================================================
   БЛОК ЧАСТЫЕ ВОПРОСЫ 13.08

   Блок был единственным на узком контейнере (900px против 1560px у соседей) -
   отсюда ощущение «куце и отдельно». Теперь идёт во всю ширину двумя колонками
   вопросов: четыре слева, три справа плюс приглашение спросить, поэтому низ
   колонок сходится. Раскрытие двигает только свою колонку, соседняя стоит.
   Пробовали ещё «ответ в правой половине» - не подошло: ответы по 2-4 строки,
   колонку ими не заполнить, снизу оставалась дыра (13.08, отменено).
   Мера строки: 74ch давали 80+ знаков, потому что ch считается по ширине нуля,
   а кириллический знак у Golos Text уже. Взято 62ch - выходит 60-70 знаков.
   ========================================================================== */

.qe-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 clamp(40px, 4.5vw, 88px);
  align-items: start;
  margin-top: clamp(28px, 3vw, 44px);
}

/* список вопросов: строка-меню, по которой глаз ищет свой случай */
.qe-menu { border-top: 1px solid var(--line); }
.qe-menu details { border-bottom: 1px solid var(--line-2); }
.qe-menu details:last-child { border-bottom: 1px solid var(--line); }
.qe-menu summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 22px 52px 22px 0;
  font-family: var(--sans); font-weight: 500;
  font-size: clamp(1.14rem, 1.04rem + 0.34vw, 1.3rem);
  line-height: 1.35; letter-spacing: -0.01em; color: var(--ink);
  text-wrap: pretty;
  transition: color 0.3s var(--ease);
}
.qe-menu summary::-webkit-details-marker { display: none; }
.qe-menu summary:hover { color: var(--accent-ctl); }

/* знак «плюс» - две линии, вертикальная гаснет на раскрытии (мягче типографского +) */
.qe-menu summary::before,
.qe-menu summary::after { color: var(--accent-ctl);
  content: ""; position: absolute; right: 8px; top: 50%;
  width: 16px; height: 1.5px; background: var(--accent);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.qe-menu summary::after { transform: rotate(90deg); }
.qe-menu details[open] summary::after { opacity: 0; }

.qe-menu .faq-body { padding: 0 52px 26px 0; }
.qe-menu .faq-body p { color: var(--ink-2); max-width: 62ch; font-size: 1.02rem; text-wrap: pretty; }
.qe-menu .faq-body p b { color: var(--ink); font-weight: 600; }
.qe-menu details[open] .faq-body { animation: faqIn 0.4s var(--ease); }

.qe-foot { margin-top: clamp(24px, 2.4vw, 34px); color: var(--ink-2); font-size: 1.02rem; max-width: 46ch; }
.qe-foot a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(176,181,230,0.35); transition: border-color 0.3s var(--ease); }
.qe-foot a:hover { border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  /* на телефоне колонок нет: вопросы идут одним списком, вторая колонка
     подхватывает верхнюю линию первой, чтобы не было двойной черты */
  .qe-grid { display: block; }
  .qe-menu + .qe-menu { border-top: 0; }
}

@media (max-width: 720px) {
  .qe-menu summary { padding: 20px 44px 20px 0; }
  .qe-menu .faq-body { padding: 0 44px 22px 0; }
  .qe-menu .faq-body p { max-width: none; }
  /* ссылку в хвосте жмут пальцем: добираем высоту до нормы 44px */
  .qe-foot a { display: inline-block; padding: 11px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .qe-answer p { transition: none; }
  .qe-menu details[open] .faq-body { animation: none; }
}

/* ==========================================================================
   БЛОК МЕТОД И ЕВКЛИД 13.08 - пересобраны целиком

   Разводящий принцип: «Метод» - это ЭКРАН (холодный свет, моно, окно
   программы), «Евклид» - это ВЕЩЬ (тёплая плита, фотография, характеристики
   предмета). Раньше оба блока были панелями с двойной рамкой и стояли
   подряд, поэтому глазу не за что было зацепиться.

   «Метод» разбит на две зоны: наверху задача и кейс живьём, ниже, на своей
   плите, весь счёт. Порядок правил Кати: сначала показать, потом посчитать.
   Двойные рамки, легенда под окном и абзац-пересказ кейса убраны -
   подписи под ячейками говорят то же короче.
   ========================================================================== */

.method-room { position: relative; overflow: hidden; padding-block: 0;
  background: #050608; }
.method-room::before {                     /* свет экрана сверху */
  content: ""; position: absolute; inset: -30% -10% auto; height: 60%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(176,181,230,0.12), transparent 70%);
  pointer-events: none;
}
.method-room > .wrap { position: relative; padding-block: clamp(64px, 8vw, 116px) clamp(46px, 5.4vw, 76px); }

/* верх блока отступает от левого края сильнее, чем окно машины под ним */
.mth-head { padding-left: 0; }
.mth-head .h-section { line-height: 1.06; }
.mth-subhead { margin-top: clamp(12px, 1.4vw, 18px); color: var(--ink-2); font-weight: 500;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); line-height: 1.3; letter-spacing: -0.015em; }
.mth-lead-big { margin-top: clamp(22px, 2.6vw, 34px); color: var(--ink); font-weight: 500;
  font-size: clamp(1.2rem, 0.95rem + 1.05vw, 1.62rem); line-height: 1.4; letter-spacing: -0.015em; }
/* одна строка только там, где она влезает: на 375 заголовку нужно 455px, а есть 319 */
@media (min-width: 1180px) {
  .mth-lead-big { white-space: nowrap; }
}

/* окно программы: одна рамка вместо двойной - это экран, а не карточка */
.mth-screen { position: relative; margin-top: clamp(34px, 4vw, 56px); padding-left: 0; }
.mth-win { border: 1px solid rgba(176,181,230,0.26); border-radius: var(--radius-in);
  background: #05070C; box-shadow: 0 30px 80px -44px rgba(0,0,0,0.9); overflow: hidden; }
.mth-bar { display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid rgba(242,238,230,0.07);
  font-family: var(--mono); font-size: 0.78rem; color: var(--muted); }
.mth-bar .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px rgba(176,181,230,0.55); flex: none; }
.mth-stage { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-count { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }
.mth-body { display: flex; flex-direction: column; gap: 30px;
  padding: clamp(20px, 2.4vw, 30px) clamp(20px, 2.4vw, 30px) clamp(26px, 2.8vw, 34px); }
.mth-grid { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 10px; row-gap: 32px; }
.mth-grid span { position: relative; font-family: var(--mono); font-size: 0.95rem; text-align: center;
  color: var(--ink-2); background: rgba(242,238,230,0.045); border: 1px solid var(--line-2);
  border-radius: 10px; padding: 14px 6px; }
.mth-grid span i { position: absolute; inset: auto 0 -17px; font-family: var(--sans); font-style: normal;
  font-size: 0.62rem; letter-spacing: 0.04em; color: var(--muted); }
.mth-grid span.unk { color: var(--accent); border-color: rgba(176,181,230,0.45); background: var(--accent-soft); }
.mth-grid span.err { color: var(--warm); border-color: rgba(224,138,114,0.45); background: rgba(224,138,114,0.10); }
.mth-grid span.swap { color: var(--accent-hi); border-color: rgba(176,181,230,0.42); background: rgba(176,181,230,0.10); }
.mth-prog { height: 4px; border-radius: 999px; background: rgba(242,238,230,0.08); overflow: hidden; }
.mth-prog i { display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width 0.12s linear; }
.mth-prog.done i { background: linear-gradient(90deg, var(--accent), var(--accent-hi)); }
/* цепочка-рассуждение под окном перебора: слева направо, как вывод
   (правка Кати 14.08 - отдельный блок счёта и подпись под виджетом убраны) */
.mth-chain { display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(14px, 2.2vw, 30px); margin-top: clamp(30px, 3.6vw, 48px);
  padding-left: clamp(0px, 4.4vw, 76px); }
.mth-step { max-width: 24ch; text-align: center; }
.mth-step code { display: block; font-family: var(--mono); color: var(--ink);
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.7rem); letter-spacing: 0.01em; white-space: nowrap; }
.mth-step code.mid { color: var(--accent); }
.mth-step code.hi { color: var(--accent-hi); }
.mth-step > span { display: block; margin-top: 10px; font-family: var(--sans);
  font-size: 0.85rem; color: var(--muted); line-height: 1.45; }
.mth-arrow { color: var(--accent); font-size: 1.5rem; line-height: 1;
  font-style: normal; margin-top: 0.28em; flex: none; }

@media (max-width: 900px) {
  .mth-grid { grid-template-columns: repeat(3, 1fr); row-gap: 26px; }
}

/* на телефоне цепочка складывается в столбик, стрелки поворачиваются вниз */
@media (max-width: 760px) {
  .mth-chain { flex-direction: column; align-items: center; gap: 12px; padding-left: 0; }
  .mth-arrow { transform: rotate(90deg); margin: 2px 0; }
}

/* --- «ЕВКЛИД»: витрина ---
   Кадр машины слева уходит в край экрана, характеристики справа на угольной
   плите #170F10. Тон снят пипеткой с теней этого же кадра (они оказались не
   сине-чёрными, а почти бордовыми), поэтому стык кадра и плиты не читается. */
.euclid-room { padding-block: 0; overflow: hidden; }
.euc-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; }
.euc-shot { position: relative; min-height: 720px; }
/* мягкое свечение за машиной - вписывает вырезанный кадр в плиту */
.euc-shot::before { content: ""; position: absolute; left: 50%; top: 50%;
  width: 120%; aspect-ratio: 0.8; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(176,181,230,0.14), rgba(176,181,230,0.05) 55%, transparent 78%);
  filter: blur(24px); pointer-events: none; }
.euc-shot img { position: absolute; inset: 3% 0; width: 100%; height: 94%;
  object-fit: contain; object-position: center;
  /* фото прямоугольное, с фоном - края растворяем масками в плиту,
     иначе кадр читается обрезанным прямоугольником. Обводящая drop-shadow
     убрана по той же причине: она рисовала контур прямоугольника. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 9%, #000 88%, transparent 100%); }
/* аккуратная тень-заземление под корпусом вместо фотографических пятен */
.euc-shot::after { content: ""; position: absolute; left: 50%; bottom: 1.5%;
  width: 46%; height: 26px; transform: translateX(-50%);
  background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,0.55), transparent 72%);
  filter: blur(7px); pointer-events: none; }
.euc-copy { padding-block: clamp(48px, 6vw, 96px); padding-inline: clamp(20px, 2.6vw, 44px) clamp(24px, 4vw, 72px); }
.euc-copy .section-lead { margin-top: 16px; max-width: 52ch; }
.euc-facts { list-style: none; margin-top: clamp(28px, 3.5vw, 46px); }
.euc-facts li b { display: block; color: var(--ink); font-size: 1.08rem; margin-bottom: 4px; }
.euc-facts li span { display: block; font-size: 0.95rem; color: var(--muted); }
.euc-facts li { padding: 20px 0; max-width: 62ch; color: var(--ink-2);
  border-top: 1px solid rgba(242,238,230,0.10); }
.euc-facts li:last-child { border-bottom: 1px solid rgba(242,238,230,0.10); }
.euc-facts b { color: var(--ink); font-weight: 600; }

@media (max-width: 900px) {
  .euc-grid { grid-template-columns: 1fr; }
  .euc-shot { min-height: 480px; }
}

/* --- Форма-анкета: textarea, radio-группы, подсказки, звёздочка «обязательно» --- */
.req { color: var(--accent); font-weight: 400; }
.field-hint { font-size: 0.82rem; color: var(--muted); line-height: 1.45; margin-top: -2px; }
.field textarea {
  font-family: var(--sans); font-size: 1rem; color: var(--ink); line-height: 1.5;
  background: rgba(242,238,230,0.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px; width: 100%;
  min-height: 112px; resize: vertical;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.field textarea:focus { outline: none; border-color: var(--accent); background: rgba(176,181,230,0.06); }
.field textarea::placeholder { color: var(--muted); }
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: rgba(242,238,230,0.03); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 15px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.radio:hover { border-color: var(--accent); }
.radio input { width: 20px; height: 20px; accent-color: var(--accent); flex: none; margin: 0; }
.radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: transparent;
}
.radio input[type="radio"]:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 42%, transparent 46%);
}
.radio input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.radio:has(input:checked) { border-color: var(--accent); background: rgba(176,181,230,0.06); }
.radio span { color: var(--ink); font-size: 0.98rem; line-height: 1.35; }

/* --- Отдельная страница заявки /zayavka + компактный CTA на лендинге --- */
.zayavka-page { padding-top: clamp(116px, 15vh, 172px); padding-bottom: clamp(56px, 8vw, 96px); }
.zayavka-back { display: inline-block; margin-bottom: 20px; color: var(--ink-2); font-size: 0.95rem; text-decoration: none; transition: color 0.3s var(--ease); }
.zayavka-back:hover { color: var(--accent); }
.zayavka-page .form { margin-top: clamp(24px, 3vw, 34px); }
.zayavka-page .wrap-narrow { max-width: 1170px; } /* форма на +30% шире базовых 900px (Катя, 14.08) */
/* CTA-карточка по мотивам trezor (форк 17.08): выделена чуть светлее фона,
   не во всю ширину, слева гигантский капс, справа действие */
.cta-card {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 100px); align-items: center;
  background: #0B0E16; border: 1px solid rgba(242,238,230,0.05);
  border-radius: 28px;
  padding: clamp(48px, 6vw, 96px) clamp(40px, 5.5vw, 88px);
  max-width: 1180px; margin-inline: auto;
}
.cta-title {
  font-size: clamp(2.6rem, 1.7rem + 3.2vw, 4.4rem);
  font-weight: 800;   /* без капса - вариант 4 */
  letter-spacing: -0.02em; line-height: 0.98; margin: 0;
}
.cta-side-cap { font-weight: 600; font-size: 1.12rem; margin: 0 0 12px; }
.cta-side-lead { color: var(--ink-2); font-size: 0.98rem; margin: 0; }
.cta-act { margin-top: 28px; }
@media (max-width: 900px) {
  .cta-card { grid-template-columns: 1fr; padding: 40px 28px; }
  .cta-title br { display: none; }
}


/* TREZOR-ФОРК: подчёркивание САМОГО ВАЖНОГО слова заголовка (Катя 17.08 -
   у trezor подчёркнуто последнее, у нас смысловое) */
/* Подчёркивание не прижилось: на тёмном фоне при плотном интерлиньяже
   линия сливалась со строкой (Катя 17.08). Важное слово теперь КРАСИТСЯ. */
.hl { color: var(--accent); }

/* этапы работы карточками (бенто-настроение trezor) */
.steps-cards { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: clamp(40px, 5vw, 64px); }
.steps-cards li {
  flex-direction: column; gap: 14px; padding: 26px 24px 28px;
  background: #0B0E16; border: 1px solid rgba(242,238,230,0.05);
  border-radius: 20px; border-top: 1px solid rgba(242,238,230,0.05);
}
.steps-cards li p { padding-top: 0; font-size: 0.92rem; }
.steps-cards .step-n { margin: 0; }
@media (max-width: 1000px) { .steps-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps-cards { grid-template-columns: 1fr; } }

/* бенто-галерея под блоком «Обо мне» */
.bento { display: grid; grid-template-columns: 1.25fr 0.75fr; grid-auto-rows: 240px; gap: 14px; margin-top: clamp(40px, 5vw, 60px); }
.bento a, .bento .cell { border-radius: 20px; overflow: hidden; }
.bento img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bento .tall { grid-row: span 2; }
@media (max-width: 700px) { .bento { grid-template-columns: 1fr; grid-auto-rows: 220px; } .bento .tall { grid-row: span 1; } }


/* TREZOR-ФОРК: FAQ как у trezor - заголовок слева липнет (sticky) и едет
   вместе со страницей, вопросы одной колонкой справа.
   Заведено 17.08, снято 14.09 по документу Влада («на компьютере вопросы
   в две колонки»), ВЕРНУТО 22.09 по решению Кати: одна колонка и фриз
   заголовка - как было раньше. Две колонки больше не собираем. */
#faq .wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 0 clamp(40px, 5vw, 96px); align-items: start; }
/* фриз на линии первой четверти экрана: НИЗ заголовка стоит на 25vh
   (уточнение Кати 17.08), выше шапки не поднимаемся */
#faq .h-section { position: sticky; top: max(110px, calc(25vh - 150px)); }
#faq .qe-grid { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
#faq .qe-menu + .qe-menu { border-top: 0; }
#faq .qe-menu + .qe-menu details:first-child { border-top: 0; }
@media (max-width: 900px) {
  #faq .wrap { display: block; }
  #faq .h-section { position: static; }
  #faq .qe-grid { margin-top: clamp(28px, 3vw, 44px); }
}


/* строка-мостик над визуализацией (Катя 17.08: из шапки метода вниз) */


/* ══════════════════════════════════════════════════════════════════════════
   ЕДИНЫЙ ФОН + СВЕТОВАЯ КРОМКА (Катя 17.08). Все плиты и цветные комнаты
   сняты, разделение секций - только едва заметный градиент у верхнего края:
   ~2,5% светлее фона, растворяется вниз за 220px. Ниже порога осознания -
   стык чувствуется, но полосой не читается. Первый экран без кромки (видео).
   Поднимаем над кромкой только .wrap: абсолютные слои фото не трогаем -
   иначе кадр Влада схлопывается (поймано на макете 17.08).
   ══════════════════════════════════════════════════════════════════════════ */
#help, #process, #faq, #blog, .euclid-room, .method-room, .price-room, .section-about { background: transparent; }
#faq::before, #process::before, #help::before, .method-room::before { display: none; }
.section { position: relative; }
.section::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px;
  pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(242,238,230,0.028) 0%, rgba(242,238,230,0.010) 45%, transparent 100%);
}
.section > .wrap { position: relative; z-index: 1; }
.hero::after { display: none; }


/* ══════════════════════════════════════════════════════════════════════════
   ШАПКА: БУРГЕР С 900px (прогон адаптива 19.08). Бургер включался с 720px,
   а содержимое шапки на 768 занимает 715px при её ширине 660 - кнопка
   «Оставить заявку» торчала за правый край окна на 18px (страница вбок не
   ехала: у html стоит overflow-x: clip, поэтому находку не видно по ширине
   документа). Порог поднят до 900px - той же точки, где на две колонки
   перестраивается вся страница. Ничего не теряется: мобильное меню держит
   все пять ссылок и ту же кнопку. Откат - удалить этот блок.
   14.09: порог поднят до 1240px. С пятью пунктами и кнопкой «Оставить заявку»
   шапка помещается только с 1191px - и то если пункты не переносятся на две
   строки (первый замер «с 1091px» был ошибкой: «Кому помогу» и «Обо мне»
   ломались на две строки, это и прятало нехватку места). Запас до 1240 - под
   полосу прокрутки Windows (17px): медиазапрос её считает, вёрстка нет.
   Пункты теперь nowrap. Порог самого меню (стр. ~416) и сброс открытого меню
   при расширении окна (script.js, бургер) держат ту же цифру - менять втроём.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1240px) {
  .nav { padding: 8px 8px 8px 18px; }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ОДИНАКОВАЯ ВЫСОТА БЛОКОВ (проба Кати 19.08, пока только версия без капса).
   Эталон - блок «Я смогу вернуть доступ», 934px на 1440×900. Разброс до
   правки: 652…947. Первый экран не трогаем - он принят Владом и живёт на
   классе .hero, под это правило не попадает.
   Содержимое центрируем по вертикали через grid, а не flex: у grid дети по
   умолчанию тянутся на всю ширину, флекс-колонка сплющила бы их по контенту.
   Секции ниже эталона подрастают, те что выше (частые вопросы) остаются - 
   min-height не режет контент.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --block-h: 934px; }
/* только десктоп: на телефоне 934px растянули бы каждую секцию пустотой */
@media (min-width: 901px) {
  .section { min-height: var(--block-h); }
  .section:not(.section-about) { display: grid; align-content: center; }
}

/* «Обо мне»: высота слоя с кадром была привязана к высоте секции, и от роста
   блока Влад стал бы крупнее на треть. Фиксируем слой в его нынешних 661px -
   масштаб 72,2% и посадка лица остаются теми же, что настроили сегодня. */
@media (min-width: 901px) {
  .section-about { min-height: var(--block-h); }
  .about-shot { height: 661px; bottom: auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   БЛОК «ОБО МНЕ», вторая посадка (Катя 19.08). Пять её замечаний разом:
   кадр тянем вниз до конца оригинала, делаем крупнее, текст опускаем к центру
   свободной области и сдвигаем правее, правый край кадра растворяем раньше -
   раньше картинка обрывалась ровно там, где начинался текст.
   Кадр теперь целиком (1920×1078 против 916), слой 854px высотой - это вся
   высота блока минус прежний воздух сверху. Масштаб вырос с 72,2% до 79,2%.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .about-shot { top: 80px; bottom: auto; height: 854px; width: 55%; }
  /* текст: по центру блока и правее - между ним и кадром теперь есть поле */
  .section-about .wrap { align-self: center; padding-top: 0; }
  .about-copy { margin-left: 58%; width: 42%; }
}


/* Строка про словарь BIP-39 переехала из шапки под окно перебора (Катя 19.08):
   наверху она читалась вторым заголовком и утяжеляла вход в секцию. Внизу это
   подпись к тому, что человек только что увидел своими глазами. */
.mth-note {
  margin: clamp(22px, 2.4vw, 34px) 0 0; color: var(--ink-2);
  font-size: 0.98rem; line-height: 1.55; max-width: 62ch;
}


/* ══════════════════════════════════════════════════════════════════════════
   ВОПРОСЫ И ФОРМА - ОДИН БЛОК (Катя 19.08). «Расскажите о своём случае» идёт
   сразу за частыми вопросами, без межсекционного разрыва: у вопросов снят
   нижний отступ, у формы верхний заменён внутренним зазором, световая кромка
   на стыке погашена. Свою высоту в 934px обе секции больше не держат - блок
   теперь один, и высоту задаёт содержимое. Нижний отступ после формы обычный.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  #faq { padding-bottom: 0; min-height: 0; }
  /* только финальный блок главной: на странице заявки секция носит тот же id,
     и правило по id прижимало её под шапку (Катя 21.08) */
  #form.section-cta { padding-top: clamp(56px, 6vh, 88px); min-height: 0; }
  #form.section-cta::after { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   БЛОК ЦЕНЫ, ПРАВКИ 19.08 (Катя). Свечение снято - два радиальных пятна по
   углам комнаты. Заголовок обрезан по «на кошельке», условие про возврат
   доступа снято с кегля заголовка и идёт отдельной строкой. Описания всех
   трёх пунктов приведены к двум строкам.
   ══════════════════════════════════════════════════════════════════════════ */
.price-room::before, .price-room::after { display: none; }
.price-claim-note {
  margin: clamp(16px, 1.8vw, 24px) 0 0; color: var(--ink-2);
  font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.24rem); font-weight: 500;
}


/* ══════════════════════════════════════════════════════════════════════════
   ЦЕНА: заголовок крупным калибром страницы (70,4px вместо 41,6 - прежний
   размер не встречался больше нигде и блок выпадал), «суммы на кошельке»
   уходит мелкой строкой под него. Подпись «Только если доступ вернулся»
   снята: этот смысл переехал в третий пункт условий.
   ══════════════════════════════════════════════════════════════════════════ */
.price-claim { max-width: none; }
.price-claim-sub {
  margin: clamp(10px, 1.2vw, 16px) 0 0; color: var(--ink-2);
  font-size: clamp(1.06rem, 0.98rem + 0.35vw, 1.24rem); font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════════════════
   ЦЕНТРОВКА ЗАГОЛОВКОВ - проба Кати 19.08, только версия без капса.
   По центру: «Я смогу вернуть доступ» (вместе с кейсами), «Как проходит
   работа», «Восстановление сид-фразы», цена. Не трогаем: первый экран,
   «Обо мне» (там кадр слева), «Евклид», частые вопросы. Финальный блок и так
   по центру своей карточки.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  #process .wrap, #price .wrap, #method .mth-head { text-align: center; }
  /* шаги «Как проходит работа» остаются с левым текстом: центровка от
     секции наследовалась в номера и подписи и ломала ряд из двух колонок */
  #process .steps, #process .steps li, #process .steps p, #process .steps b { text-align: left; }
  #method .mth-note { margin-inline: auto; text-align: center; }
  #price .price-terms { text-align: left; }
  #price .price-act { display: flex; justify-content: center; }
  #price .price-terms li:first-child { padding-left: clamp(20px, 2.4vw, 40px); border-left: 1px solid var(--line-2); }
}


/* ══════════════════════════════════════════════════════════════════════════
   КЕЙСЫ ПО ЦЕНТРУ (Катя 19.08): в блоке «Я смогу вернуть доступ» центрируется
   не только заголовок, но и сами кейсы - иконка встаёт над текстом, текст под
   ней. Шаги «Как проходит работа» центровку текста НЕ получают: там сетка из
   двух колонок с номерами слева, и выравнивание по центру ломало ряд - по
   центру там только заголовок.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* Кейсы остаются как были - иконка слева, текст левым краем. По центру
     встаёт САМА СЕТКА: колонки сжимаются по содержимому, а не тянутся на всю
     ширину, и весь блок из шести кейсов центрируется как единая рамка
     (Катя 19.08: «взять как есть и поставить в центр»). */
}

/* Сноска про ставку переехала под третий пункт условий - мельче и глуше
   прежнего, это оговорка, а не мысль блока. */
.price-terms .price-fine {
  display: block; margin-top: 12px; font-style: normal;
  font-size: 0.78rem; line-height: 1.45; color: rgba(138,135,128,0.75);
}


/* ══════════════════════════════════════════════════════════════════════════
   МАШИНА «ЕВКЛИД» МЕНЬШЕ (Катя 19.08). Кадр вписан contain в слой высотой
   720px и вырастал до 677 - при том, что текст рядом (от заголовка до
   последнего пункта) занимает 476. Машина торчала на 100px сверху и столько
   же снизу. Слой ужат до 560px: машина 526, то есть чуть выше текста, по 25px
   сверху и снизу. Остальное в блоке не тронуто.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* И машина, и текст стоят ровно по центру блока (Катя 19.08). Прежний сдвиг
     вниз убран - он выравнивал машину относительно текста, а не относительно
     секции, и уводил её ниже центра на 26px. */
  .euc-shot { min-height: 560px; }
  /* текст стоял ниже центра на 26px: у последнего пункта свои отступ и
     линия, из-за них смысловой центр колонки не совпадал с боксом */
  .euc-copy { margin-top: -52px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ПРАВКИ 19.08, вечер (Катя). «Я смогу вернуть доступ» вернулся к левому
   выравниванию - вся центровка и оптический сдвиг сняты. Ниже - точечное.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* «Как проходит работа»: зазор от заголовка до шагов был clamp(14px, 2vw, 22px) */
  #process .steps { margin-top: clamp(40px, 4.6vw, 68px); }
  /* строка «Хотите сначала попробовать сами?» опущена от последнего шага */
  #process .section-note { margin-top: clamp(34px, 3.6vw, 52px); }
  /* строка под окном перебора в одну строку: мера 62ch давала 602px при нужных 619 */
  .mth-note { max-width: none; }
  /* машина «Евклид» приподнята над центром блока */
  .euc-shot { margin-top: -30px; }
}


/* ══════════════════════════════════════════════════════════════════════════
   ФОРМА ЗАЯВКИ 20.08 (Катя). Вопрос стал заголовком поля, а не подписью:
   раньше вопрос, пояснение и поле шли одним весом и сливались в кашу.
   Звёздочки обязательности сняты - обязательны все поля, метка только шумела.
   Пояснение переехало ПОД поле ввода: сперва человек читает вопрос и отвечает,
   уточнение нужно ему уже в момент ввода, а не до него.
   ══════════════════════════════════════════════════════════════════════════ */
.field > span {
  font-family: var(--sans); font-weight: 600;
  font-size: 1.06rem; line-height: 1.3; color: var(--ink);
  letter-spacing: -0.015em;
}
.field { gap: 10px; }
.field-hint { margin-top: 2px; font-size: 0.84rem; color: var(--muted); line-height: 1.5; }
.radio-group + .field-hint { margin-top: 6px; }


/* ══════════════════════════════════════════════════════════════════════════
   ПРАВКИ 20.08 (Катя), версия без капса.
   ══════════════════════════════════════════════════════════════════════════ */
/* Световая кромка блока цены вернулась. Снимая радиальные свечения, я
   погасила .price-room::after - а этим же псевдоэлементом .section рисует
   переход между секциями. Свечение остаётся снятым, переход возвращён. */
.price-room::after {
  display: block; content: ""; position: absolute;
  left: 0; right: 0; top: 0; width: auto; height: 220px;
  filter: none; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(242,238,230,0.028) 0%, rgba(242,238,230,0.010) 45%, transparent 100%);
}

@media (min-width: 901px) {
  /* вторая колонка шагов отодвинута: номера 4-6 липли к левому краю */
  #process .steps { column-gap: clamp(64px, 7vw, 116px); }
  /* «Евклид» стоял высоковато - возвращаем к центру блока */
  .euc-shot { margin-top: 0; }
}


/* Сноска про ставку вынесена из третьего условия вниз блока и лежит одной
   строкой (Катя 20.08): внутри пункта она занимала три строки и утяжеляла
   колонку. */
.price-fine-row {
  margin: clamp(22px, 2.4vw, 34px) 0 0; max-width: none;
  font-size: 0.8rem; line-height: 1.5; color: rgba(138,135,128,0.8);
}


/* Мера строки шагов НЕ ограничивается: длина выровнена самими текстами
   (Катя 20.08), поэтому переносятся они одинаково на любой ширине. */


/* Блок кейсов стоит на общей сетке страницы: левый край под «Я» заголовка,
   правый симметрично. Пробную центровку сузившейся сетки откатили -
   от неё блок переставал совпадать с остальной страницей (Катя 20.08). */




/* ══════════════════════════════════════════════════════════════════════════
   КРАЙНИЕ КОЛОНКИ К КРАЯМ (Катя 20.08). Колонки 1fr были шире своих текстов,
   и справа оставался пустой хвост последней колонки: слева до иконок 133px,
   справа от текста 166. Теперь колонки по содержимому, а промежутки между
   ними распределяются - первая прижата к левому краю сетки, третья к правому.
   Текст справа доходит до той же вертикали, где начинается заголовок слева.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .help-grid { grid-template-columns: repeat(3, max-content); justify-content: space-between; }
  .help-wallets { margin-left: 0; }
}


/* Сноска про ставку уходит в правый нижний угол блока (Катя 20.08):
   оговорка не должна висеть сразу под условиями, ей место у самого края. */
.price-fine-row { text-align: right; max-width: none; }
/* Сноска действительно прижимается к низу блока, а не отодвигается отступом:
   при центрировании контента любой margin просто раздвигал бы весь блок и
   сноска оставалась бы в середине. Обёртка тянется на всю высоту секции,
   сноска уходит в правый нижний угол (Катя 20.08). */
@media (min-width: 901px) {
  #price { align-content: stretch; }
  #price > .wrap { display: flex; flex-direction: column; }
  #price .price-terms { margin-bottom: 0; }
  /* два auto делят свободную высоту поровну: заголовок с условиями встают по
     центру блока, сноска уходит в самый низ (Катя 20.08) */
  #price .price-claim { margin-top: auto; }
  #price .price-fine-row { margin-top: auto; padding-top: clamp(40px, 5vh, 80px); }
}


/* Перечни кошельков и монет держим в одну строку (Катя 20.08): двухстрочный
   хвост рвал симметрию двух колонок. */
@media (min-width: 901px) {
  .hw-list { text-wrap: nowrap; }
}


/* ══════════════════════════════════════════════════════════════════════════
   НАХОДКА - ЗЕЛЁНЫМ (правка Влада 20.08: «при восстановлении меняется цвет
   в зелёный»). Пока идёт перебор, найденные ячейки светились тем же
   сиреневым, что и неизвестные, - момент удачи ничем не отличался от работы.
   Зелёный взят приглушённый, под палитру съёмки: рядом с костяным белым и
   сиреневым ядовитый смотрелся бы чужеродно.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --ok: #7FCFA3; --ok-soft: rgba(127,207,163,0.12); }
.mth-grid span.swap {
  color: var(--ok);
  border-color: rgba(127,207,163,0.45);
  background: var(--ok-soft);
}
.mth-grid span.swap + i,
.mth-grid span.swap i { color: var(--ok); }
.mth-prog.done i { background: linear-gradient(90deg, var(--ok), #A6E3C4); }
/* строка состояния тоже зеленеет - её читают первой */
.mth-win.done .mth-stage, .mth-bar.done .mth-stage { color: var(--ok); }


/* ══════════════════════════════════════════════════════════════════════════
   ССЫЛКА ВОЗВРАТА НЕ ПОД СТЕКЛОМ (Катя 21.08). «← Вернуться на сайт» стояла
   первой в секции, и от низа шапки её отделяли 38px: стоило чуть прокрутить,
   как она уезжала под полупрозрачное стекло и читалась мутным пятном.
   Верхнее поле страницы увеличено, ссылка отделена от заголовка.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  /* специфичнее: обычный .zayavka-page перебивался правилом секции ниже */
  section.section.zayavka-page { padding-top: clamp(150px, 19vh, 200px); }
  .zayavka-back { display: inline-block; margin-bottom: clamp(20px, 2.4vw, 32px); }
}


/* ══════════════════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ ВЕРСИЯ К СДАЧЕ (аудит 24.08, список находок со скринами -
   AUDIT-MOBILE-2026-08-24.md в папке проекта). Граница всех правок - 900px,
   та же, где страница переключается на мобильную вёрстку. Десктоп не тронут.
   ══════════════════════════════════════════════════════════════════════════ */

/* Первый экран: раскладка со скрина Кати (trezor.io, правки 25.08) - кадр
   живёт СВЕРХУ отдельным слоем, текст лежит НИЖЕ на плотном фоне и потому
   читается начисто, а не тонет в светлых местах фотографии. Кадр - DSC09610
   с фотосессии: Владимир смотрит в камеру, рука на «Евклиде». Обрезан из
   оригинала 7008x3935, лицо поднято кривыми (средние тона; тени на месте,
   чтобы фон кадра не отклеивался от фона страницы). Видеофайл на мобильной
   вёрстке не грузится вовсе, четыре факта с первого экрана сняты, действия
   одной строкой: белая кнопка + подчёркнутая ссылка на презентацию. */
@media (min-width: 901px) {
  /* подложка десктопа: видна до загрузки видео, при reduced-motion и без JS -
     раньше эти случаи закрывал poster у <video>, теперь его нет */
  .hero-stage { background: var(--bg) url(assets/hero-poster.jpg?v=10) center top / cover no-repeat; }
}
@media (max-width: 900px) {
  .hero-bg { display: none; }
  .hero { min-height: 100vh; min-height: 100svh; padding-top: 0; }
  .hero-stage {
    inset: 134px 0 auto 0;
    height: 46svh;
    background: url(assets/hero-mobile.jpg?v=2) 50% 0% / cover no-repeat;
    /* кадр проявляется из фона сверху и растворяется книзу - без жёстких
       линий отреза (принцип проекта: фото перетекает в страницу) */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 84%, transparent 100%);
  }
  .hero-veil { opacity: 0.14; }
  .hero-inner { padding-top: calc(46svh + 134px); }
  /* текстовый блок центрировался во флексе (margin-block: auto) и утаскивал
     сам себя вниз - между кадром и заголовком висела дыра 100+px */
  .hero-copy { text-align: left; margin-block: 0; }
  .hero .h-display {
    font-weight: 600; font-size: 2.125rem; line-height: 1.1;
    letter-spacing: -0.03em; color: #FFFFFF;
  }
  .hero .h-display .hl { color: var(--accent); }
  .hero-how { color: #FFFFFF; font-size: 0.98rem; margin-top: 14px; }
  .hero-how b { color: #FFFFFF; font-weight: 600; }

  /* четыре факта снимали с первого экрана (правка Кати 25.08); 14.09 вернули:
     документ Влада - источник правды, пометки «только на компьютере» у них нет */

  /* действия одной строкой: белая кнопка - главное, подчёркнутая ссылка
     на видео рядом. У Trezor вторичное действие тоже белое: разделение
     формой (текст против плашки), а не яркостью */
  .hero-actions {
    flex-direction: row; align-items: center; flex-wrap: nowrap;
    gap: 18px; margin-top: 26px; padding-top: 0; border-top: 0;
  }
  .hero-actions .btn-primary {
    order: 1; flex: 0 0 auto;
    background: #FFFFFF; color: #0A0C13;
    border-radius: 16px; --pad: 15px 22px; font-size: 1rem;
  }
  .hero-actions .btn-primary:hover { background: #E8E8E8; }
  .hero-actions .btn-primary .btn-ico { display: none; }
  .hero-actions .btn-watch {
    order: 2; flex: 1 1 auto; min-width: 0;
    background: none; border: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    isolation: auto;
    --pad: 0; padding: 0; border-radius: 0;
    color: #FFFFFF; font-size: 0.95rem; gap: 8px;
  }
  .hero-actions .btn-watch::before,
  .hero-actions .btn-watch::after { display: none; }
  .hero-actions .btn-watch .watch-ico { border-left-color: #FFFFFF; }
  .hero-actions .btn-watch > span:nth-of-type(2) {
    text-decoration: underline; text-underline-offset: 5px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(242,238,230,0.45);
  }
  /* шапка и кнопка одной формы: скруглённый прямоугольник (~четверть
     высоты, замер с trezor.io) вместо разнобоя пилюля/прямоугольник */
  .nav { border-radius: 18px; }
}
@media (max-width: 400px) {
  /* замер на 375: доступно 343, кнопке нужно 163, ссылке 175, зазор 12 -
     не хватало 7px, на 360 не хватало 22. Ужато по замеру, не на глаз. */
  .hero-actions { gap: 10px; }
  .hero-actions .btn-primary { --pad: 14px 15px; font-size: 0.93rem; }
  .hero-actions .btn-watch { font-size: 0.8rem; gap: 6px; }
  .hero-actions .btn-watch > span:nth-of-type(2) { text-underline-offset: 4px; }
}
@media (max-width: 370px) {
  /* самые узкие (iPhone 12 mini и старые андроиды): кадр ниже,
     иначе строка действий уходит за нижнюю кромку */
  .hero-stage { height: 40svh; }
  .hero-inner { padding-top: calc(40svh + 134px); }
  .hero .h-display { font-size: 1.85rem; }
  .hero-how { font-size: 0.92rem; }
}

/* Футер складывается в одну колонку до 900px - как вся страница. Раньше
   складывался только до 720px: на планшете трёхколоночная сетка не влезала,
   слоган сжимался в столбик по одному слову, а меню налезало прямо на его
   строки (аудит 24.08, все четыре страницы). Шапке тот же порог подняли ещё
   19.08, футер тогда забыли. */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
  .footer-links a { display: inline-block; padding-block: 11px; }
}

/* Ритм секций на мобильной вёрстке. Десктопные отступы (15vh у секций, у
   «Кому помогу» и вовсе 220px) на телефоне давали 243px пустоты на стыке -
   треть экрана чёрной дыры. Ориентир - trezor.io, с которого снята сетка:
   на телефоне у него между секциями 128px, на планшете 160. Наш стык теперь:
   телефон ~146px, планшет ~176px. Ниже - повтор исключений: правило стоит в
   конце файла и иначе переехало бы равные по весу селекторы секций-особняков. */
@media (max-width: 900px) {
  .section { padding-block: clamp(64px, 9vh, 88px); }
  #help { padding-block: clamp(64px, 9vh, 88px); }
  .method-room, .euclid-room { padding-block: 0; }
  .section-about { padding-top: 0; }
  .zayavka-page { padding-top: clamp(116px, 15vh, 172px); padding-bottom: clamp(56px, 8vw, 96px); }
  /* «← Вернуться на сайт» была 155x24 - пальцем не попасть; даём тач-зону */
  .zayavka-back { display: inline-block; padding-block: 10px; }
  /* Текст «Евклида» на мобильной вёрстке встаёт в сетку страницы. Секция
     живёт без .wrap (на десктопе кадр уходит в край намеренно), и в одну
     колонку текст оставался на 20px от края, когда весь контент на 768
     стоит на 78px (найдено контрольным прогоном 24.08, было так всегда).
     Формула - та же, что у .wrap. */
  .euc-copy { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: var(--wrap-pad); }
}

/* Подпись под ячейкой перебора крепится к верху и растёт вниз. Раньше была
   прибита низом (-17px под ячейкой) и росла вверх: двухстрочная «контрольная
   сумма» первой строкой оказывалась ВНУТРИ ячейки, рамка резала подпись
   пополам. Только до 900px: на десктопе подпись всегда в одну строку, и его
   не трогаем вовсе (требование Кати 24.08 - десктоп пиксель в пиксель). */
@media (max-width: 900px) {
  .mth-grid span i { top: calc(100% + 5px); bottom: auto; line-height: 1.25; }
}

/* Разделитель перечней клеится к предыдущему слову, а не к следующему.
   При переносе точка вставала в начало новой строки («…SafePal / · Tangem»);
   теперь строка заканчивается точкой, новая начинается словом. Только до
   900px: на десктопе перечень в одну строку и переносов нет. */
@media (max-width: 900px) {
  .hw-list span + span::before { content: none; }
  .hw-list span:not(:last-child)::after { content: " · "; color: var(--muted); }
}

/* Перенос внутри «BIP-39» («BIP-» / «39» на 375) решили НЕ трогать: спан
   вокруг термина менял шейпинг строки и на десктопе, а десктоп по требованию
   Кати 24.08 - пиксель в пиксель. Мелочь остаётся, названа в аудите. */

/* ══════════════════════════════════════════════════════════════════════════
   ДВИЖЕНИЕ МОБИЛЬНОЙ СТРАНИЦЫ (Катя 25.08) - механика снята с trezor.io:
   всё привязано к ПРОКРУТКЕ (scrub), не к таймерам. Прокрутил - произошло,
   остановился - остановилось. Классы вешает anim.js (GSAP + ScrollTrigger,
   vendor/, ~50 КБ сжатым, с 2024 полностью бесплатен). Прогрессивное
   улучшение: без JS, без GSAP и при «уменьшить движение» класс .gs не
   ставится и страница полностью видна как есть. Разбор механики Trezor
   с параметрами - projects/euclid-landing/JOURNAL.md, запись 25.08.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* скролл-якорение браузера дёргает позицию назад, когда сцены меняют
     свойства на лету (поймано 26.08: откат на ~1400px посреди прохода) -
     на мобильной GSAP-странице якорить нечего, все высоты статичны */
  html.gs { overflow-anchor: none; }

  /* штатный reveal глушим ТОЛЬКО в секциях, которыми управляет GSAP -
     прочие (обо мне, цена, FAQ, блог) появляются как раньше */
  html.js.gs #help .reveal, html.js.gs #process .reveal,
  html.js.gs #method .reveal, html.js.gs #euclid .reveal {
    opacity: 1; transform: none; filter: none; transition: none;
  }

  /* «Я смогу вернуть доступ»: слова заголовка и карточки по одной.
     Селекторы с .reveal - НАМЕРЕННО: правило глушения выше даёт reveal-
     элементам opacity:1, и скрытие должно быть не слабее его по весу
     (каскадная грабля 25.08: карточки были видны до старта сцены). */
  html.gs #help .h-section .w { opacity: 0.12; }
  html.js.gs #help .help-case.reveal { opacity: 0; transform: translateY(38px); }

  /* «Как проходит работа»: шаги видны сразу (решение Кати 26.08),
     анимируется только заголовок-призрак */

  /* «не магия»: заголовок по словам, ступени формулы по одной */
  html.gs #method .h-section .w { opacity: 0.12; }
  html.gs #method .mth-step, html.gs #method .mth-arrow { opacity: 0; transform: translateY(24px); }

  /* «не магия» - сцена из двух кадров (Катя 26.08): сперва заголовок и
     воронка расчёта по центру, потом кадр сменяется живым перебором со
     своим мобильным заголовком. Секция - трек, кадр держит липкий .wrap,
     кадры лежат стеком в одной грид-ячейке, приписка прибита к низу. */
  html.gs #method { height: 340vh; height: 340svh; min-height: 0; padding: 0;
    margin-top: -100vh; margin-top: -100svh;   /* наезд листом (Катя 26.08) */
    position: relative; z-index: 5;
    background: var(--bg);
    border-radius: 28px 28px 0 0;
    border-top: 1px solid rgba(176, 181, 230, 0.34);
    box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.7);
    overflow: clip;   /* у .method-room overflow:hidden - он глушит sticky */
  }
  html.gs #method::before {
    content: ''; display: block;   /* общий .method-room::before стоит в none */
    position: absolute; inset: 0 0 auto; height: 90px;
    background: linear-gradient(180deg, rgba(176, 181, 230, 0.11), transparent);
    pointer-events: none; z-index: 1;
  }
  html.gs #method > .wrap {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: grid; grid-template-rows: 1fr auto;
    padding-top: clamp(76px, 11vh, 112px); padding-bottom: 22px;
    overflow: hidden;
  }
  html.gs #method .mth-frame {
    grid-row: 1; grid-column: 1; min-height: 0;
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  html.gs #method .mth-frame-1 .mth-chain { margin-block: auto; }  /* воронка по центру остатка */
  html.gs #method .mth-frame-2 { justify-content: center; opacity: 0; transform: translateY(18px); }
  html.gs #method .mth-screen { margin-top: 18px; }
  html.gs #method .mth-note { grid-row: 2; grid-column: 1; opacity: 0.85; }
  /* Блок «не магия» на мобиле выравнивается ПО ЦЕНТРУ - и заголовок секции,
     и подпись демки (Катя 27.08, вторая формулировка: «сам заголовок,
     выравнивание по центру, а не по левой стороне»). */
  #method .h-section { text-align: center; }
  .mth-demo-h {
    display: block;
    /* отступ от строки «ровно каждая шестнадцатая»: подпись стояла к ней
       вплотную (Катя: «прям прилеплено») */
    margin: clamp(30px, 5vh, 48px) 0 clamp(14px, 2vh, 20px);
    font-family: var(--sans); font-weight: 600; text-align: center;
    font-size: clamp(1.2rem, 4.6vw, 1.5rem); color: var(--ink);
  }
  /* «Сид-фраза собирается из стандартного словаря BIP-39…» прятали на телефоне
     (Катя 27.08); 14.09 вернули - в документе Влада пометки «только на компьютере» нет */

  /* «Евклид» - кино: фото на весь экран → затемнение → текст.
     Хронология Кати: «вначале картинка, потом она затеняется
     и выезжает текст». Сцену собирает anim.js. */
  html.gs .euclid-cine { position: relative; }
  html.gs .euclid-cine .cine-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html.gs .cine-photo {
    position: absolute; inset: 0;
    /* кадр с фоном, фон пригашен (Катя 26.08: вырезка не понравилась -
       «вернём с фоном, но затемним»): виньетка гасит студию вокруг машины,
       лёгкий общий тинт прижимает кадр к чёрному, края растворены маской */
    background:
      radial-gradient(92% 72% at 50% 46%, rgba(5, 6, 8, 0) 32%, rgba(5, 6, 8, 0.74) 80%),
      linear-gradient(rgba(5, 6, 8, 0.24), rgba(5, 6, 8, 0.24)),
      url(assets/euclid-cine2.jpg?v=2) 50% 46% / contain no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    transform: scale(1.06);
  }
  html.gs .cine-veil { position: absolute; inset: 0; background: #050608; opacity: 0; }
  html.gs .cine-copy {
    position: absolute; inset: auto 0 0 0;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom));
    opacity: 0; transform: translateY(46px);
  }
  html.gs .cine-copy .h-section { margin-bottom: 18px; }
  html.gs .cine-copy .euc-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
  html.gs .cine-copy .euc-facts li { border: 0; padding: 0; max-width: none; color: #C9C6BE; }
  html.gs .cine-copy .euc-facts li b { display: block; color: var(--ink); font-size: 1.05rem; margin-bottom: 2px; }
  html.gs .euclid-cine .euc-grid { display: none; }
}

/* Манифест-сцена «Я смогу вернуть доступ» (хореография Кати 25.08): пока
   заголовок в центре чёрного экрана, случаи невидимы; после подъёма
   заголовка все шесть должны помещаться под ним - зазоры сетки в сцене
   компактнее обычных. Только внутри GSAP-режима. */
@media (max-width: 900px) {
  /* воздух МЕЖДУ карточками, внутри карточки зазоры прежние (Катя 26.08:
     «сливаются»); через vh, чтобы на низких экранах не вытолкнуть низ
     списка за кадр - запас смотрится прогоном на 375×812 и 360×740 */
  html.gs #help .help-grid { gap: clamp(14px, 2.4vh, 24px); margin-top: clamp(26px, 3.6vh, 34px); }
  html.gs #help .help-case { padding-block: 2px; }
  /* манифест - на полный экран: после выноса барабана секция стала ниже
     вьюпорта, и чёрный кадр пролистывался с дырой снизу как пустой
     (баг Кати 26.08: «второй экран пролистывается, только потом текст»);
     верхний паддинг толще - финал заголовка не липнет к плавающей шапке */
  /* манифест на нативном sticky (26.08, вечер): GSAP-пин через fixed
     дрожал на iOS при инерционном скролле - заголовок мигал и прыгал
     (видео Кати). Все sticky-сцены страницы у неё гладкие - манифест
     переведён на ту же механику: секция-трек, кадр держит липкий .wrap.
     Трек 420svh = кадр 100 + сцена 220 + пауза и наезд барабана 100. */
  html.gs #help {
    height: 420vh; height: 420svh;
    min-height: 0; padding: 0;
  }
  html.gs #help > .wrap {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    padding-top: clamp(84px, 13vh, 130px);
  }

  /* «Обо мне» - тоже «страница» (Катя 26.08): наезжает поверх стоящего
     финала барабана (наезд = хвостовые 100svh его трека). Секция - трек
     200svh: первые 100 кадр стоит липким, вторые 100 - на него наезжает
     следующий лист «Как проходит работа». Оформление кадра - на стике. */
  html.gs #about {
    margin-top: -100vh; margin-top: -100svh;
    position: relative; z-index: 3;
    /* 240: кадр 100 + пауза 40 (лист читается до наезда) + 100 под наезд */
    height: 240vh; height: 240svh;
    min-height: 0; padding: 0;
    overflow: clip;   /* у .section-about overflow:hidden - он глушит sticky */
  }
  html.gs .about-stick {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    background: var(--bg);
    border-radius: 28px 28px 0 0;
    border-top: 1px solid rgba(176, 181, 230, 0.34);
    box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    /* сверху воздуха больше, чем снизу (Катя 27.08: «над фоткой больше
       чёрного места») - кадр начинается ниже, низ прежний */
    /* 8.5vh, а не 10: на 375x667 кадр 100svh при 10vh упирался в контент
       впритык (нужно 666 из 667), а низ у стика обрезан overflow:hidden */
    padding-top: clamp(52px, 8.5vh, 112px);
    padding-bottom: clamp(28px, 4vh, 44px);
  }
  html.gs .about-stick::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 90px;
    background: linear-gradient(180deg, rgba(176, 181, 230, 0.11), transparent);
    pointer-events: none; z-index: 1;
  }
  html.gs #about .about-shot { height: min(300px, 34svh); margin-bottom: 10px; }
  html.gs #about .about-shot img { object-position: 50% 30%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8%, #000 90%, transparent 100%); }

  /* «Как проходит работа» - лист-«страница» (Катя 26.08, вторая итерация):
     наезжает поверх стоящего кадра «Обо мне», заголовок сразу наверху,
     ШАГИ ВИДНЫ СРАЗУ - пошаговость Катя отменила. Кадр держит sticky;
     на узких экранах, где контент выше экрана, JS опускает точку
     прилипания (top отрицательный) - хвост дочитывается до остановки.
     Высоту трека (контент + 100svh под наезд «не магии») ставит JS. */
  html.gs #process {
    margin-top: -100vh; margin-top: -100svh;
    position: relative; z-index: 4;
    background: var(--bg);
    border-radius: 28px 28px 0 0;
    border-top: 1px solid rgba(176, 181, 230, 0.34);
    box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.7);
    min-height: 100vh; min-height: 100svh;
    overflow: clip;
  }
  html.gs #process::before {
    content: ''; display: block;   /* общий #process::before стоит в display:none */
    position: absolute; inset: 0 0 auto; height: 90px;
    background: linear-gradient(180deg, rgba(176, 181, 230, 0.11), transparent);
    pointer-events: none; z-index: 1;
  }
  html.gs #process > .wrap {
    position: sticky;              /* top ставит JS */
    padding-top: clamp(72px, 10.5vh, 104px);
    padding-bottom: 24px;
  }
  html.gs #process .h-section .w { opacity: 0.12; }
  /* сноска о ставке: на телефоне читается слева (Катя 26.08); в правый
     нижний угол она уходит только в десктопной раскладке */
  .price-fine-row { text-align: left; }

  /* шаги чуть плотнее общей сетки - лист собраннее */
  html.gs #process .steps li { padding-block: 16px; }
  html.gs #process .section-note { margin-top: 16px; }
}

/* ══════ БАРАБАН КОШЕЛЬКОВ - отдельный экран (правки Кати 25-26.08) ══════
   Полноэкранный чёрный кадр после сцены «Я смогу вернуть доступ»:
   «Верну доступ к» появляется сразу целиком (класс .lit ставит anim.js,
   когда кадр на экране), затем слово перелистывается вертикально и
   замирает на «любому кошельку и сети». Базовое состояние (без JS,
   reduced-motion) - лента уже на финале, фраза читается целиком.
   На десктопе сцены нет: там колонки-перечни в #help как раньше. */
.drum-scene { display: none; }
@media (max-width: 900px) {
  .hw-col { display: none; }
  .help-wallets { display: none; }   /* на мобиле блок пуст - прячем и его линию */

  /* ══════ ЕДИНЫЙ РАЗМЕР ЗАГОЛОВКОВ (решение Кати 27.08) ══════
     Было: первый экран 34px/600, все секционные 41.6px/800 - главный
     заголовок страницы оказывался мельче внутренних. Катя выбрала меньший
     размер для всех и жирное начертание.
     ⚠️ Жир настоящий, а не синтетический: в запрос к Google Fonts в
     index.html добавлены веса 700 и 800 - до 27.08 их там не было, и
     браузер подделывал жирность растягиванием букв. */
  .hero .h-display,
  .h-section, .cta-title, .about-name, .price-claim {
    font-size: 2.125rem;      /* 34px - размер прежнего первого экрана */
    font-weight: 800;
    line-height: 1.08;
  }

  /* ⚠️ Без движения (режим ?anim=off, страница без JS, старые движки без
     overflow:clip) барабан крутить некому: класс .lit ставит только anim.js,
     а без него .drum-inner скрыт - и на месте кадра остаётся пустой чёрный
     экран (поймала Катя 27.08 на версии для Влада). В таком режиме барабана
     нет вовсе, а кошельки и сети читаются перечнями - ровно как на десктопе. */
  html:not(.gs) .drum-scene { display: none; }
  html:not(.gs) .help-wallets { display: grid; }
  html:not(.gs) .hw-col { display: block; }
  .drum-scene {
    display: block;
    /* «свечение» (выбор Кати 26.08 из трёх вариантов): мягкий сиреневый
       свет снизу на плотном тёмном, атмосферу страницы фон гасит собой */
    background:
      radial-gradient(120% 85% at 50% 108%, rgba(176, 181, 230, 0.20), rgba(176, 181, 230, 0.05) 45%, transparent 68%),
      radial-gradient(90% 60% at 50% -18%, rgba(176, 181, 230, 0.08), transparent 60%),
      var(--bg);
    position: relative; z-index: 1;
  }
  .drum-stick {
    display: flex; align-items: center;
    min-height: 100vh; min-height: 100svh;
  }
  /* GSAP-режим: сцена входит «как новая страница» - наезжает ПОВЕРХ
     замершего манифеста (cover-переход). Наезд задаёт anim.js отрицательным
     margin-top ровно на высоту манифеста; тот в это время стоит в хвостовой
     паузе продлённого пина. Дальше кадр липнет (sticky), и перелистывание
     идёт по прокрутке высокого трека. Скругление и волосок сверху - край
     «страницы», иначе чёрное по чёрному не читается. */
  html.gs .drum-scene {
    /* трек: 100 кадр + 300 перелистывание + 100 под наезд «Обо мне» */
    height: 500vh; height: 500svh;
    z-index: 2;
  }
  html.gs .drum-stick {
    position: sticky; top: 0;
    height: 100vh; height: 100svh; min-height: 0;
    /* кромка листа: яркий волосок + свет из-под края + тень над ним -
       чёрное по чёрному иначе не читается как «новая страница» */
    border-top: 1px solid rgba(176, 181, 230, 0.34);
    box-shadow: 0 -28px 60px rgba(0, 0, 0, 0.7);
    background:
      radial-gradient(120% 85% at 50% 108%, rgba(176, 181, 230, 0.20), rgba(176, 181, 230, 0.05) 45%, transparent 68%),
      radial-gradient(90% 60% at 50% -18%, rgba(176, 181, 230, 0.08), transparent 60%),
      var(--bg);

    border-radius: 28px 28px 0 0;
    overflow: hidden;
  }
  html.gs .drum-stick::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 90px;
    background: linear-gradient(180deg, rgba(176, 181, 230, 0.11), transparent);
    pointer-events: none;
  }
  .drum-inner { opacity: 0; transform: translateY(22px); text-align: center;
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .drum-scene.lit .drum-inner { opacity: 1; transform: none; }
  /* кегль - максимум, в который финал «любому кошельку и сети» влезает
     одной строкой на 360px (замер 26.08: предел 7.66vw, взято с запасом) */
  .drum-pre { display: block; color: #fff;
    font-size: clamp(1.65rem, 7.3vw, 2.4rem); font-weight: 600;
    letter-spacing: -0.02em; margin: 0 0 8px; }
  .drum-win { display: block; height: 3.1rem; overflow: hidden; }
  .drum-tape {
    display: flex; flex-direction: column;
    transform: translateY(calc(-13 * 3.1rem));   /* финал без JS: 14 строк */
    transition: transform 0.55s var(--ease);
  }
  .drum-tape span {
    height: 3.1rem; display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.65rem, 7.3vw, 2.4rem); font-weight: 600;
    color: var(--accent); letter-spacing: -0.02em; white-space: nowrap;
  }
  @media (prefers-reduced-motion: reduce) {
    .drum-inner { opacity: 1; transform: none; transition: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   ФОРМА ЗАЯВКИ: ОЖИВЛЕНИЕ (form.js, 03.09.2026)
   Экран подтверждения и ошибки, ловушка от ботов, состояния кнопки и поля.
   ══════════════════════════════════════════════════════════════════════════ */

/* ловушка от ботов: не display:none и не type=hidden (примитивные боты это
   пропускают) - поле реально в разметке и в табе, но унесено за экран */
.field-trap {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  left: -9999px;
}

/* кнопка отправки во время запроса */
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

/* незаполненное обязательное поле после попытки отправить -
   класс ставится на сам .field, красим то, что внутри */
.field.field-invalid > input,
.field.field-invalid > textarea,
.field.field-invalid .radio-group .radio {
  border-color: var(--danger);
}
.field.field-invalid > span { color: var(--danger); }

.form-error {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--danger);
  font-size: 0.94rem;
}

/* экран подтверждения занимает место формы, тот же бублик-бордер */
.form-success { margin-top: clamp(30px, 4vw, 46px); }
.form-success .form-inner {
  display: block;
  text-align: center;
  padding: clamp(40px, 6vw, 64px) clamp(26px, 4vw, 44px);
}
.form-success-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  letter-spacing: -0.015em; color: var(--ink);
  margin-bottom: 14px;
}
.form-success-text {
  color: var(--ink-2); font-size: 1.02rem; line-height: 1.55;
  max-width: 52ch; margin-inline: auto;
}

/* ══════ ПОДЗАГОЛОВОК ПЕРВОГО ЭКРАНА: ДВА ТЕКСТА (Катя 14.09) ══════
   Оба варианта из текстов Влада. На компьютере «Вариант 1», на телефоне
   короче «Вариант 2»: с длинным кнопка «Оставить заявку» уходит за нижний
   край первого экрана. Граница 900px - та же, что у всей мобильной вёрстки. */
.hero-how-mob { display: none; }
@media (max-width: 900px) {
  .hero-how-desk { display: none; }
  .hero-how-mob { display: inline; }
}

/* ══════════════════════════════════════════════════════════════════════════
   14.09 ТЕЛЕФОН ПОСЛЕ СВЕРКИ С ДОКУМЕНТОМ ВЛАДА
   Вернули полный логотип «Sunscrypt - Владимир Абовян», «1:35» у ссылки на
   видео и четыре факта под кнопками. Замер с настоящим Golos Text:
   - логотип на кегле 17.92px занимает 298px, с бургером 44px и полями шапке
     нужно 384px, на 375 есть 343. Кегль тянем от ширины экрана, зазоры и знак
     в em, бургер не ужимается ниже нормы пальца;
   - строке действий на 375 не хватало 18px, на 360 - 33px. Ужато по замеру,
     а если места всё равно нет (320), ссылка на видео уходит второй строкой
     целиком, а не обрезается у края;
   - у фактов верхняя линия упиралась в низ белой кнопки.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav { gap: 8px; padding-left: 14px; }
  .nav-name { font-size: clamp(12px, calc((100vw - 116px) / 16.6), 1.12rem); gap: 0.45em; }
  .nav-mark { width: 1.23em; height: 1.23em; }
  .nav-burger { flex: none; }
}
@media (max-width: 900px) {
  .hero-markers { margin-top: 28px; }
}
@media (max-width: 480px) {
  /* модель строки по замеру: кнопка 24px полей + 8.4em текста, ссылка
     10px зазоров + 14.4em, между ними 8px. Кегль ссылки и кнопки тянем
     от ширины (отношение 1.16 как было), на 360-480 строка одна с запасом
     ~10px, ниже 11.5px кегль не падает - там срабатывает перенос */
  .hero-actions { gap: 8px; flex-wrap: wrap; row-gap: 14px; }
  .hero-actions .btn-primary { --pad: 13px 12px; font-size: clamp(13px, calc((100vw - 80px) / 21), 1rem); }
  .hero-actions .btn-watch { flex: 0 0 auto; font-size: clamp(11.5px, calc((100vw - 80px) / 24.4), 0.95rem); gap: 5px; }
}