/* ALETHEIA v3 — премиум-переработка: воздух, сдержанность, один акцент.
   ДНК бренда сохранено: тёмная база, canvas-нейросеть, циан как единственный акцент.
   Убрано осознанно: blob-градиенты (тот самый «фиолетовый AI-штамп»), карточки-клоны,
   reveal на всём подряд. Премиум здесь делает пустое место, а не эффекты. */

:root{
  --bg:#06060d;
  --ink:#f4f6fc;
  --muted:#a7aec6;          /* 7.1:1 на --bg, проходит по контрасту для body */
  --muted-dim:#828aa6;      /* только для крупного/второстепенного, ≥4.6:1 */
  --accent:#22d3ee;         /* единственный акцент */
  --hair:rgba(255,255,255,.09);
  --hair-strong:rgba(255,255,255,.16);
  --maxw:1180px;

  /* ручки панели Tweaks: по умолчанию 1, панель их переопределяет */
  --type-scale:1; --air:1;
  /* Пара по оси контраста: дисплейный характерный + нейтральный текстовой.
     Обе с кириллицей, проверено по ответу Google Fonts. */
  --font-head:"Unbounded",system-ui,sans-serif;
  --font-body:"Onest",system-ui,sans-serif;

  /* ритм: намеренно неравномерный, не линейная сетка */
  --gap-xs:calc(.5rem*var(--air)); --gap-s:calc(1rem*var(--air));
  --gap-m:calc(2rem*var(--air));   --gap-l:calc(4rem*var(--air));
  --gap-xl:calc(clamp(5rem,10vw,9rem)*var(--air));

  --ease:cubic-bezier(.16,1,.3,1);   /* ease-out-expo */

  --z-nav:50; --z-modal:100;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  font-size:calc(16px*var(--type-scale))}   /* ручка «размер шрифта» тянет всю rem-шкалу */
body{
  font-family:var(--font-body);
  background:var(--bg);color:var(--ink);
  font-size:1.125rem;line-height:1.65;   /* светлый текст на тёмном просит воздуха */
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#04121a}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}

/* ---------- фон: ровно два слоя вместо четырёх ---------- */
/* 13.08: было .5 — точки едва читались. Сергей: «ярче и в большем количестве».
   Плотность и альфы подняты в nn-bg.js, здесь снят общий приглушитель холста. */
#nn-canvas{position:fixed;inset:0;z-index:-2;display:block;pointer-events:none;opacity:.85}
/* линза только под первым экраном — держит контраст заголовка */
.veil{position:fixed;top:0;left:0;right:0;height:105vh;z-index:-1;pointer-events:none;
  background:radial-gradient(72% 52% at 50% 34%,rgba(6,6,13,.72),rgba(6,6,13,.34) 58%,transparent 86%)}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);
  background:rgba(6,6,13,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--hair)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:var(--gap-m)}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px;letter-spacing:.14em}
.brand .mark{width:12px;height:12px;border-radius:2px;background:var(--accent);
  box-shadow:0 0 20px rgba(34,211,238,.75);transform:rotate(45deg)}
.nav-links{display:flex;gap:var(--gap-m);align-items:center}
.nav-links a{font-size:15px;color:var(--muted);transition:color .25s var(--ease)}
.nav-links a:hover{color:var(--ink)}
@media(max-width:860px){.nav-links{display:none}}
/* nowrap нужен ТОЛЬКО кнопке в шапке. На остальных он давал вылет за экран
   на мобиле: длинная кнопка не могла перенестись и растягивала страницу. */
.nav .btn{white-space:nowrap}
.btn{max-width:100%;text-align:center}
@media(max-width:520px){
  .nav-in{height:64px;gap:12px}
  .nav .btn{padding:10px 14px;font-size:13px}
  .brand{font-size:14px;letter-spacing:.06em;gap:8px}
  .brand .mark{width:10px;height:10px}
}

/* ---------- кнопки: одна форма на весь сайт ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;
  padding:16px 30px;border-radius:999px;
  background:var(--accent);color:#04121a;
  font-weight:700;font-size:16px;letter-spacing:.01em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:0 0 0 rgba(34,211,238,0)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 40px rgba(34,211,238,.28)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hair-strong);
  box-shadow:none;font-weight:700}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px);box-shadow:none}

/* ---------- HERO: один экран, одна мысль ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:clamp(4rem,9vh,7rem) 0 clamp(3rem,7vh,5rem);overflow:hidden}
.hero-wrap{position:relative;z-index:2;width:100%}

/* ---------- КРИСТАЛЛ ----------
   Справа, ~55% ширины, с растворением левого края в фон, чтобы заголовок читался.
   Растворение делает mask-image, а не полупрозрачная плашка поверх: так кристалл
   не сереет и сохраняет свечение. */
.hero-visual{position:absolute;top:50%;right:clamp(0px,3vw,56px);z-index:1;pointer-events:none;
  width:min(55%,860px);aspect-ratio:16/9;
  --px:0px; --py:0px;
  /* Параллакс живёт здесь, дыхание — на самом видео. Два разных слоя,
     иначе анимация и курсор дерутся за одно свойство transform. */
  transform:translate3d(var(--px),calc(-50% + var(--py)),0);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  will-change:transform}
/* Подложка и живая сфера лежат друг на друге и меняются кроссфейдом: пока код не
   отрисовал первый кадр, виден статичный кадр той же сферы, поэтому пустоты нет. */
.hero-visual img,.hero-visual canvas{position:absolute;inset:0}
.hero-visual canvas{opacity:0;transition:opacity .8s var(--ease)}
.hero-visual.live canvas{opacity:1}
.hero-visual.live img{opacity:0;transition:opacity .8s var(--ease)}
.hero-visual img,.hero-visual video,.hero-visual canvas{width:100%;height:100%;object-fit:cover;display:block;
  background:#06060d;
  /* Анимация «дыхания» снята 13.08: она осталась от статичного кристалла, а видео
     двигается само. Наложение двух движений на телефоне читалось как дрожь кадра. */
  /* Растворяем ВСЕ края, а не только левый: иначе виден прямоугольник картинки.
     Эллипс гасит верх, низ и правый край, линейка добавляет уход в текстовую зону. */
  -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 98%),
     linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 20%,#000 46%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(closest-side ellipse at 50% 50%,#000 46%,rgba(0,0,0,.5) 72%,transparent 98%),
     linear-gradient(to right,transparent 0%,rgba(0,0,0,.45) 20%,#000 46%);
  mask-composite:intersect}

/* дыхание: лёгкий подъём поверх собственного вращения кристалла в видео.
   Амплитуда намеренно мелкая — камень уже живёт сам, задача слоя только снять
   ощущение вклеенного прямоугольника. */
@keyframes crystal-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-9px,0) scale(1.01)}
}

/* мягкое свечение под камнем, чтобы он не выглядел наклеенным на фон */
.hero-visual::after{content:"";position:absolute;inset:12% 6% 10% 18%;z-index:-1;
  background:radial-gradient(50% 46% at 55% 52%,rgba(34,211,238,.20),transparent 72%);
  filter:blur(38px);animation:crystal-glow 7s ease-in-out infinite}
@keyframes crystal-glow{0%,100%{opacity:.65}50%{opacity:1}}
h1,h2,h3,.brand,.btn{font-family:var(--font-head)}
/* 13.08: секционные h2 жили на браузерном bold (700) — тяжелее, чем сам h1.
   Отсюда ощущение «шрифт очень жирный» по всей странице. Базовое правило
   выравнивает все заголовки второго уровня по одному облегчённому весу. */
h2{max-width:min(100%,22ch);
  font-size:clamp(1.55rem,3.1vw,2.4rem);line-height:1.14;letter-spacing:-.022em;
  font-weight:300;text-wrap:balance}
.hero h1{
  /* ch считается по СОБСТВЕННОМУ размеру шрифта заголовка, а не по 18px родителя.
     Ограничение на родителе давало 19ch ≈ 178px и ломало заголовок на шесть строк. */
  max-width:min(100%,15ch);
  font-size:clamp(2.05rem,4.4vw,3.5rem);  /* Unbounded шире, размер подрезан под неё */
  line-height:1.04;
  letter-spacing:-.028em;                /* выше пола -.04em, буквы не слипаются */
  /* 13.08: было 800, потом 500 — Сергей всё равно: «жирный очень». У Unbounded
     широкие буквы, даже средний вес читается плакатным. 300 — его выбор из трёх
     показанных вариантов: характер шрифта остаётся, давление уходит. */
  font-weight:300;
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lede{margin-top:var(--gap-m);max-width:min(48ch,52%);font-size:clamp(1.1rem,1.8vw,1.35rem);
  color:var(--muted);line-height:1.58;font-weight:400;text-wrap:pretty}
.hero .actions{margin-top:clamp(1.6rem,3.2vh,2.4rem);display:flex;gap:14px;flex-wrap:wrap}
/* Доказательство, а не сноска: тот же вес, что у лида, только тише по цвету.
   Раньше жило 15-м кеглем самым тусклым цветом под кнопками — читалось как дисклеймер. */
.hero-proof{margin-top:clamp(1.4rem,3vh,2rem);font-size:17px;color:var(--muted);
  max-width:min(46ch,50%);line-height:1.5}

/* тонкая линия-указатель вниз, без «скролл-мышки» */
.scroll-hint{margin-top:clamp(2rem,5vh,3.4rem);display:flex;align-items:center;gap:14px;
  font-size:14px;color:var(--muted-dim);width:fit-content;
  transition:color .25s var(--ease)}
.scroll-hint::before{content:"";width:56px;height:1px;background:var(--hair-strong);
  transition:width .35s var(--ease),background .25s var(--ease)}
.scroll-hint:hover{color:var(--ink)}
.scroll-hint:hover::before{width:76px;background:var(--accent)}

/* Фокус с клавиатуры был отдан дефолту браузера. На циановой заливке синее кольцо Chrome
   почти не видно, поэтому кольцо своё: светлое на заливке, циановое на тёмном. */
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn-ghost:focus-visible,.nav-links a:focus-visible,.brand:focus-visible,
.scroll-hint:focus-visible,.foot-links a:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}

/* ---------- FLAGSHIP: не карточки, а типографика ---------- */
.flagship{padding:var(--gap-xl) 0;border-top:1px solid var(--hair)}
.flagship h2{
  /* та же ловушка, что была в h1: ch должен считаться по размеру самого заголовка */
  max-width:min(100%,22ch);
  font-size:clamp(1.55rem,3.1vw,2.4rem);line-height:1.14;letter-spacing:-.022em;
  font-weight:300;text-wrap:balance}
.flagship .flag-lede{margin-top:var(--gap-s);max-width:56ch;color:var(--muted);text-wrap:pretty}

/* строки ролей: hairline-разделители, без рамок и плашек */
.roles{margin-top:var(--gap-l);border-top:1px solid var(--hair)}
.role{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:var(--gap-s) var(--gap-l);
  padding:clamp(1.4rem,3vw,2.1rem) 0;border-bottom:1px solid var(--hair);
  transition:transform .4s var(--ease)}
.role:hover{transform:translateX(12px)}
.role dt{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;letter-spacing:-.015em}
.role dd{color:var(--muted);max-width:62ch;text-wrap:pretty}
.role .mark-dot{display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-right:12px;vertical-align:middle;opacity:0;
  transition:opacity .35s var(--ease)}
.role:hover .mark-dot{opacity:1}
@media(max-width:760px){
  .role{grid-template-columns:1fr;gap:6px}
  .role dd{font-size:16px}
}

.flag-foot{margin-top:var(--gap-l);display:flex;align-items:center;gap:var(--gap-m);flex-wrap:wrap}
.flag-foot .note{color:var(--muted-dim);font-size:15px;max-width:40ch}

/* ---------- FOOTER-заглушка этапа 1 ---------- */
.foot{padding:var(--gap-l) 0;border-top:1px solid var(--hair);color:var(--muted-dim);font-size:14px}

/* ---------- MOTION ----------
   Reveal ТОЛЬКО на первом экране и только как усиление уже видимого:
   базовое состояние — контент виден. JS ничего не прячет. */
.rise{animation:rise .9s var(--ease) both}
.rise:nth-child(1){animation-delay:.04s}
.rise:nth-child(2){animation-delay:.12s}
.rise:nth-child(3){animation-delay:.2s}
.rise:nth-child(4){animation-delay:.28s}
.rise:nth-child(5){animation-delay:.36s}
/* В анимации НЕТ opacity — сознательно. С fill-mode both стартовое состояние
   применяется до старта, и любой headless-рендер (краулер, превью, скриншот)
   поймал бы пустой экран. Ровно та болезнь, что была в v2. Двигаем только позицию:
   контент виден всегда, движение остаётся. */
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{animation:none}
  .btn,.btn-ghost,.role,.nav-links a{transition:none}
}


/* ---------- ПАНЕЛЬ TWEAKS (?tweaks=1, в прод не идёт) ---------- */
#tweaks{position:fixed;right:20px;bottom:20px;z-index:var(--z-modal);width:250px;
  padding:18px 18px 20px;border-radius:16px;
  background:rgba(10,10,20,.94);border:1px solid var(--hair-strong);
  backdrop-filter:blur(18px);box-shadow:0 24px 60px rgba(0,0,0,.6);
  font-size:13px;color:var(--ink)}
#tweaks[hidden]{display:none}
#tweaks h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dim);font-weight:700;margin-bottom:14px}
#tweaks label{display:flex;justify-content:space-between;align-items:center;
  margin:14px 0 7px;color:var(--muted);font-size:12px}
#tweaks output{color:var(--accent);font-weight:700}
#tweaks input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer}
.tw-swatches{display:flex;gap:8px;flex-wrap:wrap}
.tw-swatches button{width:28px;height:28px;border-radius:50%;border:1px solid var(--hair-strong);
  background:var(--s);cursor:pointer;transition:transform .2s var(--ease)}
.tw-swatches button:hover{transform:scale(1.14)}
.tw-close{position:absolute;top:10px;right:12px;background:none;border:0;color:var(--muted-dim);
  font-size:20px;line-height:1;cursor:pointer}
.tw-close:hover{color:var(--ink)}
.tw-reset{margin-top:18px;width:100%;padding:9px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid var(--hair-strong);color:var(--muted);font-size:12px}
.tw-reset:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:520px){#tweaks{left:14px;right:14px;width:auto;bottom:14px}}

/* =====================================================================
   СЕКЦИИ ВТОРОГО ЭТАПА
   Правило: каждая секция отличается ритмом от соседней, иначе страница
   читается как таблица. Чередуем: слева-крупно → индекс-сеткой → по центру
   → горизонтальная лента → асимметрия с фото.
   ===================================================================== */

/* ---------- ВТОРОЙ УРОВЕНЬ: индекс, а не карточки-клоны ---------- */
.level2{padding:var(--gap-xl) 0;border-top:1px solid var(--hair)}
.l2-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--gap-m);flex-wrap:wrap}
.l2-note{color:var(--muted-dim);font-size:15px;max-width:34ch}
.l2-grid{margin-top:var(--gap-l);display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.l2-item{display:flex;flex-direction:column;cursor:pointer;
  padding:clamp(1.5rem,2.6vw,2rem);background:rgba(255,255,255,.022);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.l2-item:hover,.l2-item:focus-visible{background:rgba(34,211,238,.07);
  box-shadow:inset 0 0 0 1px var(--accent);transform:translateY(-3px);outline:none}
.l2-item h3{font-size:1.08rem;font-weight:500;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:space-between;gap:10px}
/* Стрелка видна ВСЕГДА: на мобиле hover не существует, признак ссылки нужен постоянный */
.l2-item h3 .arr{color:var(--accent);opacity:.85;transition:transform .3s var(--ease)}
.l2-item:hover h3 .arr{transform:translateX(5px)}
.l2-item p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}
.l2-item .go{margin-top:auto;padding-top:14px;color:var(--accent);font-size:14px;font-weight:700}

/* ---------- PROOF: единственная секция по центру ---------- */
.proof{padding:var(--gap-xl) 0;border-top:1px solid var(--hair);text-align:center}
.proof .inner{max-width:44ch;margin:0 auto}
.proof h2{max-width:none;margin:0 auto}
.proof p{margin-top:var(--gap-s);color:var(--muted);text-wrap:pretty}
.proof .sign{margin-top:var(--gap-m);display:inline-flex;align-items:center;gap:12px;
  padding:11px 20px;border:1px solid var(--hair-strong);border-radius:999px;
  font-size:14px;color:var(--muted-dim)}
.proof .sign i{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 14px var(--accent);animation:pulse 2.6s ease-in-out infinite;font-style:normal}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}

/* ---------- КАК РАБОТАЕМ: горизонтальная лента с цифрами ----------
   Цифры здесь законны: это реальная последовательность, а не декор. */
.how{padding:var(--gap-xl) 0;border-top:1px solid var(--hair)}
.steps{margin-top:var(--gap-l);display:grid;gap:var(--gap-m);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.step{position:relative;padding-top:var(--gap-m);border-top:1px solid var(--hair-strong)}
.step .n{position:absolute;top:-.72em;left:0;font-size:13px;font-weight:800;
  color:var(--accent);background:var(--bg);padding-right:12px}
.step h3{font-size:1.1rem;font-weight:500;letter-spacing:-.01em}
.step p{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.55;text-wrap:pretty}

/* ---------- ОСНОВАТЕЛЬ: асимметрия и единственное фото ---------- */
.founder{padding:var(--gap-xl) 0;border-top:1px solid var(--hair)}
.f-grid{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
/* Фото цветное по решению Сергея: это его лицо, ему и решать.
   Чёрно-белый фильтр снят, оставлена только мягкая рамка. */
.f-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;
  border:1px solid var(--hair)}
.f-body h2{max-width:20ch}
.f-body p{margin-top:var(--gap-s);color:var(--muted);max-width:58ch;text-wrap:pretty}
.f-body .who{margin-top:var(--gap-m);font-size:15px;color:var(--muted-dim)}
@media(max-width:800px){
  .f-grid{grid-template-columns:1fr;gap:var(--gap-m)}
  .f-photo{max-width:230px}
}

/* ---------- ФИНАЛЬНЫЙ CTA ---------- */
.close{padding:var(--gap-xl) 0;border-top:1px solid var(--hair);text-align:center}
.close h2{max-width:18ch;margin:0 auto}
.close p{margin:var(--gap-s) auto 0;max-width:46ch;color:var(--muted)}
.close .actions{margin-top:var(--gap-l);display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- ФУТЕР ---------- */
.foot{padding:var(--gap-l) 0 var(--gap-m);border-top:1px solid var(--hair);
  color:var(--muted-dim);font-size:14px}
.foot-in{display:flex;justify-content:space-between;gap:var(--gap-m);flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:var(--gap-s) var(--gap-m);flex-wrap:wrap}
.foot-links a:hover{color:var(--accent)}
.foot-bottom{margin-top:var(--gap-m);padding-top:var(--gap-s);border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;gap:var(--gap-s);flex-wrap:wrap;font-size:13px}

.tw-fonts{display:grid;gap:6px}
.tw-fonts button{padding:8px 10px;border-radius:8px;cursor:pointer;text-align:left;
  background:transparent;border:1px solid var(--hair);color:var(--muted);font-size:12px}
.tw-fonts button:hover{border-color:var(--accent);color:var(--ink)}
.tw-fonts button.on{border-color:var(--accent);color:var(--accent);background:rgba(34,211,238,.08)}


/* ---------- КРИСТАЛЛ НА УЗКИХ ЭКРАНАХ ----------
   Колонок рядом нет, поэтому камень уходит ЗА текст полноэкранным фоном.
   Ключевое: ни одной прямой границы. Раньше здесь была полоса сверху с маской
   только по низу — верх и бока обрезались ровной линией и это читалось
   как вставленное «окно с видео». Теперь гаснут все четыре края разом. */
@media(max-width:900px){
  /* Ширина подобрана так, чтобы силуэт камня помещался целиком и гас маской,
     а не обрезался краем экрана: обрезанные бока читались как «зум не по размеру». */
  .hero-visual{
    /* 13.08: было 142% — камень раздувался и обрезался краями экрана, читался
       как абстрактная текстура, а не как кристалл. Сузили до ~112%: силуэт
       узнаётся целиком, маска по-прежнему растворяет края в фон. */
    /* 13.08 вечер: планета в исходном кадре стоит правее середины, поэтому
       контейнер сдвинут влево — иначе её правый бок срезает край экрана. */
    top:-1%;left:21%;right:auto;
    /* 13.08: opacity была .95 — вместе с маской и подложкой давала «дымку».
       Сам кадр яркий, глушила его вёрстка, поэтому здесь полная непрозрачность. */
    width:120%;max-width:none;aspect-ratio:16/9;max-height:none;opacity:1;
    transform:translate3d(calc(-50% + var(--px)),var(--py),0)}
  .hero-visual img,.hero-visual video,.hero-visual canvas{
    /* Одна радиальная маска вместо двухслойной десктопной: гасит верх, низ и оба
       бока по эллипсу, поэтому планета растворяется в фоне без единого стыка.
       13.08: сплошная часть была всего 30% радиуса — полупрозрачным оказывался
       сам шар, а не только края. Ядро расширено до 54%, растворение осталось. */
    -webkit-mask-image:radial-gradient(closest-side ellipse at 50% 50%,
       #000 54%,rgba(0,0,0,.74) 72%,rgba(0,0,0,.22) 87%,transparent 97%);
    mask-image:radial-gradient(closest-side ellipse at 50% 50%,
       #000 54%,rgba(0,0,0,.74) 72%,rgba(0,0,0,.22) 87%,transparent 97%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .hero-visual::after{inset:14% 14% 14% 14%}
  /* Затемнение поверх кристалла и под текстом. Кадр видео меняется, светлые
     грани уходят под заголовок — эта подложка держит контраст на любом кадре.
     Лежит между камнем (z1) и текстом (z2), поэтому текст не трогает. */
  /* 13.08: верхние стопы были .34/.42 — подложка гасила саму планету, хотя
     защищать надо только зону текста. Верх осветлён, низ под заголовком
     оставлен плотным: контраст текста не пострадал. */
  .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,
      rgba(6,6,13,.08) 0%,rgba(6,6,13,.16) 30%,rgba(6,6,13,.64) 62%,
      rgba(6,6,13,.92) 84%,var(--bg) 100%)}
  .hero{align-items:flex-end;padding-top:clamp(9rem,30vh,14rem)}
  .hero .lede{max-width:min(60ch,100%);font-size:1.05rem}
  .hero-proof{max-width:100%;font-size:16px}
  .hero h1{max-width:100%}
}
@media(max-width:520px){
  .hero{padding-top:clamp(8rem,26vh,12rem)}
  /* 13.08: было 158% (камень обрезан краями). 124% — узкий экран, силуэт целиком. */
  /* opacity держим 1: приглушала именно эта строка — она перебивала правило
     блока 900px, поэтому на телефоне планета оставалась в дымке. */
  .hero-visual{width:124%;opacity:1}
  .hero .actions{gap:10px}
  .scroll-hint{margin-top:clamp(.8rem,2vh,1.4rem)}
}
/* Низкие экраны — бюджетные Android 360×640 и айфоны в ландшафте.
   Единственный критерий здесь: главная кнопка и строка-доказательство обязаны
   остаться над сгибом. Режем воздух, а не смысл. */
@media(max-width:900px) and (max-height:720px){
  .hero{padding-top:clamp(5.5rem,19vh,8rem);padding-bottom:2rem}
  .hero-visual{width:132%;top:-4%}
  .hero h1{font-size:clamp(1.7rem,7.4vw,2.15rem)}
  .hero .lede{margin-top:1.1rem;font-size:1rem;line-height:1.5}
  .hero-proof{margin-top:.9rem;font-size:15px}
  .hero .actions{margin-top:1.1rem}
  .scroll-hint{margin-top:1rem}
}
@media(prefers-reduced-motion:reduce){
  /* Полный покой: ни дыхания, ни параллакса, ни пульса свечения.
     Видео снимает скрипт, здесь гасим всё остальное движение. */
  .hero-visual{transition:none;transform:translate3d(0,-50%,0)}
  .hero-visual img,.hero-visual video,.hero-visual canvas{animation:none;transition:none}
  .hero-visual::after{animation:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:900px){
  .hero-visual{transform:none}
}

/* ---------- ЗАПАСНОЙ КАНАЛ ЗАЯВКИ (13.08) ----------
   Под главной кнопкой, свёрнут. Нужен тем, у кого Telegram закрыт политикой
   компании: банки, госорганы, юристы. Иначе для них кнопка — тупик. */
.alt-lead{margin-top:20px;max-width:520px;margin-left:auto;margin-right:auto;text-align:left}
.alt-lead summary{cursor:pointer;color:var(--muted-dim);font-size:15px;list-style:none;
  display:inline-flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.alt-lead summary::-webkit-details-marker{display:none}
.alt-lead summary::before{content:"+";color:var(--accent);font-size:17px;line-height:1}
.alt-lead details[open] summary::before{content:"–"}
.alt-lead summary:hover{color:var(--ink)}
.lead-form{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.lead-form input{width:100%;padding:14px 16px;border-radius:12px;background:transparent;
  border:1px solid var(--hair-strong);color:var(--ink);font:inherit;font-size:16px}
.lead-form input::placeholder{color:var(--muted-dim)}
.lead-form input:focus{outline:none;border-color:var(--accent)}
.lead-form input.err{border-color:#f0616d}
.lead-form .btn{align-self:flex-start}
.lead-form .micro,.lead-ok,.lead-fail{color:var(--muted-dim);font-size:14.5px}
.lead-ok,.lead-fail{margin-top:14px}
.lead-ok b{color:var(--accent)}