/* ============================================================
   The Genius — Сила Четырёх: Сознание
   ============================================================ */

/* --- Tokens --- */
/* Тёмная тема — база. Светлая ниже переопределяет только цвета:
   каналы (*-rgb) перекрашивают разом все полупрозрачные рамки и свечения. */
:root {
  /* Каналы для rgba() */
  --bg-rgb: 12, 11, 9;
  --ink-rgb: 236, 230, 218;
  --gold-rgb: 194, 161, 94;
  --gold-edge-rgb: 220, 193, 137;
  --glow-rgb: 201, 168, 102;

  --bg: #0c0b09;
  --ink: #ece6da;
  --ink-2: #e8e1d2;
  --ink-3: #e4dccb;
  --ink-4: #dbd3c4;
  --ink-dim: #a69d8e;
  --placeholder: #8f8676;
  --selection-ink: #fff;
  /* Цвет центрального диска знака. По умолчанию = фон (в тёмной теме знак
     читается на тёмном). В светлой теме знак кладём на тёмный медальон и
     переопределяем этот токен точечно. */
  --sign-center: var(--bg);

  --gold: #c2a15e;
  --gold-soft: #dcc189;
  --gold-light: #ecd4a0;
  --gold-mid: #c9a866;
  --gold-deep: #9c7c3a;
  /* Текст на золотых плашках */
  --on-gold: #0c0b09;

  --gold-grad: linear-gradient(180deg, #ecd4a0, #c9a866 48%, #9c7c3a);
  --gold-btn: linear-gradient(180deg, #e6d0a0, #c2a15e 60%, #9c7c3a);
  --panel: linear-gradient(180deg, rgba(var(--ink-rgb), .028), rgba(var(--ink-rgb), .006));

  --line: rgba(var(--gold-rgb), .14);
  --line-strong: rgba(var(--gold-rgb), .55);
  --hair: rgba(var(--ink-rgb), .08);

  --error: #e08c76;
  --error-line: #b4553f;

  --serif: 'Playfair Display', serif;
  --sans: Manrope, sans-serif;
  --display: Cinzel, serif;

  --wrap: 1200px;
  --gut: 32px;
  /* Actual measured sticky-header height; the hero subtracts it to fill the
     rest of the viewport. Keep in sync with header padding/control heights. */
  --header-h: 76px;
  --section-y: clamp(88px, 12vh, 150px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Светлая тема ---
   Цвета взяты пипеткой из «Первая квадра — карта паттернов»:
   фон #f6f4ee, карточка #f3efe6, рамка #e7dcc9, заголовки #191714,
   текст #5d584e, золото #a8752a, приглушённые номера #bcb2a0. */
:root[data-theme="light"] {
  --bg-rgb: 246, 244, 238;
  --ink-rgb: 25, 23, 20;
  --gold-rgb: 168, 117, 42;
  --gold-edge-rgb: 168, 117, 42;
  --glow-rgb: 168, 117, 42;

  --bg: #f6f4ee;
  --ink: #191714;
  --ink-2: #2c2820;
  --ink-3: #464036;
  --ink-4: #5d584e;
  --ink-dim: #6f685c;
  --placeholder: #a49b8c;
  --selection-ink: #191714;

  /* Сплошное золото для текста (надзаголовки, ссылки, заголовки карточек
     диагностики) чуть глубже, чем в карте паттернов, — иначе мелкие
     надписи на кремовом не проходят по контрасту (WCAG AA). Канал
     --gold-rgb остаётся исходным #a8752a для полупрозрачных рамок. */
  --gold: #8a5e1c;
  --gold-soft: #714e18;
  --gold-light: #7a5417;
  --gold-mid: #a8752a;
  --gold-deep: #5f4211;
  /* Кнопка остаётся светло-золотой, поэтому текст на ней тёмный */
  --on-gold: #191714;

  --gold-grad: linear-gradient(180deg, #b3812f, #96681f 45%, #7a5417);
  --gold-btn: linear-gradient(180deg, #e3c682, #c9a24f 60%, #a8752a);
  --panel: linear-gradient(180deg, #f3efe6, #f3efe6);

  --line: #e7dcc9;
  --line-strong: rgba(var(--gold-rgb), .5);
  --hair: rgba(var(--ink-rgb), .1);

  --error: #a33d22;
  --error-line: #a33d22;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 420;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
/* Author `display` rules below (.form, .thanks) outrank the UA sheet's
   [hidden]{display:none}, so the attribute needs to win explicitly. */
[hidden] { display: none !important; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
hr { border: 0; margin: 0; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

::selection { background: rgba(var(--gold-rgb), .28); color: var(--selection-ink); }
input::placeholder, textarea::placeholder { color: var(--placeholder); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--bg); color: var(--gold);
  padding: 12px 20px; border: 1px solid var(--gold);
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Utilities --- */
.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.container {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}
.container--narrow { max-width: 1160px; }
.container--sm { max-width: 1000px; }

.section {
  padding: var(--section-y) 0;
  scroll-margin-top: 84px;
  border-top: 1px solid rgba(var(--ink-rgb), .07);
}
.section--tight { padding: clamp(72px, 10vh, 120px) 0; border-top: 0; }
.section--glow-top { background: radial-gradient(90% 60% at 50% 0%, rgba(var(--gold-rgb), .06), rgba(var(--bg-rgb), 0) 60%); }
.section--glow-bottom { background: radial-gradient(90% 60% at 50% 100%, rgba(var(--gold-rgb), .06), rgba(var(--bg-rgb), 0) 60%); }
.section--glow-left { background: radial-gradient(80% 60% at 20% 0%, rgba(var(--gold-rgb), .06), rgba(var(--bg-rgb), 0) 60%); }

/* Первый экран → вводный эфир: у эфира своя (tight) секция без верхней
   границы, поэтому убираем её именно у него. */
#webinar { border-top: 0; }
#pricing { background: radial-gradient(90% 60% at 50% 0%, rgba(var(--gold-rgb), .07), rgba(var(--bg-rgb), 0) 60%); }

.section__head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
#about .section__head { max-width: 840px; gap: 26px; }

.eyebrow {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Инлайн-акцент для «продающих» фраз в тексте */
.accent { color: var(--gold); font-weight: 700; }

.kicker {
  text-align: center;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 26px;
}

.h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.12;
  color: var(--ink);
  text-wrap: balance;
}
.h2--md { font-size: clamp(28px, 3.8vw, 48px); line-height: 1.15; }

.lead {
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.62;
  color: var(--ink-4);
}
.lead--lg { font-size: clamp(21px, 1.8vw, 25px); line-height: 1.55; color: var(--ink-3); }
.lead--sm { font-size: 19px; line-height: 1.55; }
.lead--narrow { max-width: 420px; }

.quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.5;
  color: var(--gold-soft);
}

.dot {
  flex: none;
  width: 20px; height: 20px;
  border: 1px solid rgba(var(--gold-rgb), .7);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.dot::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.dot--sm { width: 16px; height: 16px; border-color: rgba(var(--gold-rgb), .6); margin-top: 3px; }
.dot--sm::after { width: 3px; height: 3px; }
.dot--lg { width: 26px; height: 26px; border-color: var(--line-strong); margin-top: 0; }
.dot--lg::after { width: 6px; height: 6px; }
.dot--active { border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), .5); }
.dot--active::after { background: var(--gold-light); }
.dot--plain {
  flex: none; width: 8px; height: 8px; border: 0; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold); margin-top: 0;
}
.dot--plain::after { content: none; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  border-radius: 2px;
  transition: filter .3s, transform .3s, background .3s, border-color .3s, color .3s;
  cursor: pointer;
}
.btn--gold {
  color: var(--on-gold);
  background: var(--gold-btn);
  border: 1px solid rgba(var(--gold-edge-rgb), .5);
  padding: 15px 36px;
}
.btn--gold:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--on-gold); }
.btn--ghost {
  color: var(--gold-soft);
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), .45);
  padding: 15px 30px;
}
.btn--ghost:hover { background: rgba(var(--gold-rgb), .09); border-color: var(--gold); color: var(--gold-light); }
.btn--sm { padding: 10px 20px; }
.btn--block { display: block; width: 100%; text-align: center; padding: 14px; font-family: var(--sans); }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(var(--gold-rgb), .32);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--gold-soft);
}
.badge--sm { padding: 8px 18px; font-size: 13px; }
.badge__dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 10px var(--gold);
}

/* --- Таймер обратного отсчёта --- */
.countdown { text-align: center; }
.countdown__cap {
  font-size: 12.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin-bottom: 15px;
}
.countdown__grid {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 1.2vw, 14px);
}
.countdown__unit {
  min-width: clamp(62px, 7vw, 88px);
  padding: clamp(11px, 1.3vw, 16px) clamp(6px, 0.9vw, 12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(var(--gold-rgb), .06);
}
.countdown__num {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.countdown__label {
  display: block;
  margin-top: 9px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
}
/* --- Signature mark --- */
@keyframes tg-rotate { to { transform: rotate(360deg); } }
@keyframes tg-breathe {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.07); }
}

/* Спрайт со знаком: геометрия лежит один раз, инстансы — через <use>.
   Центральный диск внутри символа объявлен fill="inherit", поэтому
   наследует fill отсюда и всегда совпадает с фоном темы. */
.tg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Фирменный знак: 112 «дышащих» лучей рисует js/main.js, кольцо и точка
   берут currentColor. Цвет и скорость вращения — как на thegenius.family. */
.tg-sign {
  color: #c2a15e;
  transform-origin: 50% 50%;
  animation: tg-rotate 60s linear infinite;
}

.sign { position: relative; }
.sign__glow {
  position: absolute; inset: -42%;
  background: radial-gradient(circle, rgba(var(--glow-rgb), .32), rgba(var(--bg-rgb), 0) 62%);
  animation: tg-breathe 6.5s ease-in-out infinite;
}
.sign__img {
  position: relative;
  width: 100%; height: 100%;
}
.sign--hero { width: clamp(112px, 14vw, 166px); height: clamp(112px, 14vw, 166px); }
.sign--ai { width: 46%; height: 46%; }
.sign--ai .sign__glow { inset: -30%; animation-duration: 7s; }
.sign--small { width: 70px; height: 70px; }
.sign--small .sign__glow { inset: -40%; animation-duration: 7s; }

/* --- Header --- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--bg-rgb), .74);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 15px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 30px; height: 30px; }
.brand__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .16em;
}
.brand__name--sm { font-size: 14px; }

.nav { display: flex; gap: 30px; align-items: center; }
.nav__link {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .02em;
  color: var(--ink-4);
  /* Не даём шапке разъезжаться на две строки: её высота зашита в --header-h. */
  white-space: nowrap;
}
.header__cta { white-space: nowrap; }
.nav__link:hover { color: var(--gold-soft); }

.header__side { display: flex; align-items: center; gap: 14px; }

/* --- Переключатель темы --- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.theme-toggle {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  line-height: 0;
  border-radius: 999px;
}
.theme-toggle__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 62px; height: 30px;
  padding: 0 7px;
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 999px;
  background: rgba(var(--gold-rgb), .06);
  transition: border-color .3s, background .3s;
}
.theme-toggle:hover .theme-toggle__track { border-color: var(--gold); }
.theme-toggle__icon {
  position: relative;
  z-index: 1;
  width: 14px; height: 14px;
  color: var(--gold-soft);
  opacity: .5;
  transition: color .3s, opacity .3s;
}
.theme-toggle__knob {
  position: absolute;
  top: 50%; left: 3px;
  width: 22px; height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--gold-btn);
  box-shadow: 0 1px 6px rgba(var(--bg-rgb), .5);
  transition: transform .3s var(--ease);
}
/* Ползунок стоит на активной иконке: луна — тёмная тема, солнце — светлая.
   Иконка под ползунком становится контрастной, вторая гаснет. */
.theme-toggle[aria-checked="true"] .theme-toggle__knob { transform: translateX(30px); }
.theme-toggle[aria-checked="false"] .theme-toggle__icon--moon,
.theme-toggle[aria-checked="true"] .theme-toggle__icon--sun {
  color: var(--on-gold);
  opacity: 1;
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), .45);
  border-radius: 2px;
  cursor: pointer;
}
.burger__bar {
  display: block;
  width: 20px; height: 1.5px;
  margin: 0 auto;
  background: var(--gold-soft);
  transition: transform .3s var(--ease), opacity .2s;
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* --- Hero --- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 96px 24px;
  background: radial-gradient(120% 88% at 50% 4%, rgba(var(--gold-rgb), .15), rgba(var(--bg-rgb), 0) 56%);
}
.hero__frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(var(--gold-rgb), .26);
  pointer-events: none;
}
.hero__frame--inner { inset: 29px; border-color: rgba(var(--gold-rgb), .11); }

.hero__inner {
  position: relative;
  max-width: 940px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 0;
  font-family: var(--display);
  font-size: clamp(13px, 1.25vw, 16px);
  font-weight: 600;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.hero__eyebrow::before,
.hero__eyebrow::after {
  content: "";
  width: clamp(26px, 5vw, 64px);
  height: 1px;
}
.hero__eyebrow::before { background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .75)); }
.hero__eyebrow::after { background: linear-gradient(90deg, rgba(var(--gold-rgb), .75), transparent); }

.hero__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(42px, 7.4vw, 94px);
  line-height: 1.04;
  letter-spacing: .005em;
  color: var(--ink);
  text-wrap: balance;
  /* Немного воздуха над заголовком (в обеих темах одинаково, чтобы при
     переключении ничего не сдвигалось) — заодно даёт место плавному
     градиенту первого экрана в светлой теме. */
  margin-top: clamp(62px, 6.4vw, 104px);
}
.hero__lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 24px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 660px;
}
.hero__desc {
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--ink-4);
  max-width: 680px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}
/* --- About bullets --- */
.about__grid { max-width: 960px; margin: 60px auto 0; }
.bullets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.bullet {
  background: var(--bg);
  padding: 30px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

/* --- Cards (audience) --- */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 58px;
}
.card {
  border: 1px solid rgba(var(--gold-rgb), .16);
  background: var(--panel);
  border-radius: 3px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform .35s, border-color .35s;
}
.card:hover { border-color: rgba(var(--gold-rgb), .5); transform: translateY(-4px); }
.card__num { font-family: var(--serif); font-size: 26px; }
.card__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  line-height: 1.25;
  color: var(--ink);
}
.card__text { font-size: 18px; line-height: 1.56; color: var(--ink-4); }

/* --- Results --- */
.results {
  max-width: 920px;
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
}
.result {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  padding: 26px 8px;
  border-top: 1px solid var(--hair);
}
.result:last-child { border-bottom: 1px solid var(--hair); }
.result__num {
  flex: none;
  width: 58px;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}
.result__text {
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.56;
  color: var(--ink-2);
}
.results__cta { text-align: center; margin-top: clamp(36px, 4vw, 56px); }

/* --- Diagnostics --- */
.diag {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px;
  margin-top: 56px;
}
.diag__card {
  border: 1px solid rgba(var(--gold-rgb), .16);
  background: var(--panel);
  border-radius: 3px;
  padding: 32px;
}
.diag__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 20px;
  color: var(--gold-light);
  margin-bottom: 22px;
}
.checklist { display: flex; flex-direction: column; gap: 16px; }
.check {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--ink-4);
}
.diag__outro {
  text-align: center;
  max-width: 820px;
  margin: 44px auto 0;
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.62;
  color: var(--ink-3);
}

/* --- Webinar --- */
.webinar {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: 4px;
  padding: clamp(40px, 6vw, 72px) 32px;
  text-align: center;
  background: radial-gradient(100% 120% at 50% 0%, rgba(var(--gold-rgb), .12), rgba(var(--bg-rgb), 0) 60%);
}
.webinar__frame {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(var(--gold-rgb), .12);
  border-radius: 2px;
  pointer-events: none;
}
.webinar__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.webinar .lead { max-width: 600px; }

/* --- Split layouts --- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.split--expert { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(40px, 5vw, 64px); }
.split--contact { align-items: start; gap: clamp(40px, 5vw, 64px); }
.split > div > * + * { margin-top: 20px; }
.split > div > .h2 + .lead { margin-top: 24px; }

/* --- AI visual --- */
.ai__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), .18);
  border-radius: 4px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 46%, rgba(var(--gold-rgb), .14), rgba(var(--bg-rgb), 0) 62%);
}
.ai__ring { position: absolute; border-radius: 50%; }
.ai__ring--1 { width: 84%; height: 84%; border: 1px solid rgba(var(--gold-rgb), .1); }
.ai__ring--2 { width: 62%; height: 62%; border: 1px solid rgba(var(--gold-rgb), .14); }
.ai__ring--3 { width: 40%; height: 40%; border: 1px solid rgba(var(--gold-rgb), .2); }
.ai__caption {
  position: absolute;
  bottom: 18px; left: 0; right: 0;
  text-align: center;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: .13em;
  color: var(--ink-dim);
  text-transform: uppercase;
}

/* --- Expert --- */
.expert__photo {
  position: relative;
  width: 100%;
  height: clamp(420px, 52vw, 560px);
}
.expert__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
}
.corner { display: none; }

.expert__role {
  font-size: 15px;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.expert__role .brand__name { font-size: inherit; letter-spacing: .14em; }

/* --- Stats --- */
/* Разделители рисуем рамками ячеек, а не фоном в зазоре: при дробной
   ширине колонок зазор иногда «съедается» и линия пропадает. Рамку слева
   и сверху даёт сама ячейка, контейнер закрывает правый и нижний край —
   так линии не двоятся и корректно переносятся на узких экранах.
   Цвет чуть плотнее обычного --line (.14): границы ячеек попадают на
   дробные пиксели, сглаживаются на два пикселя, и слишком бледная линия
   на тёмном фоне пропадала. */
.stats, .brandblock__cards {
  --stat-line: rgba(var(--gold-rgb), .3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--stat-line);
  border-left: 0;
  border-top: 0;
  margin-top: 12px;
}
.stat {
  background: var(--bg);
  padding: 24px;
  border-left: 1px solid var(--stat-line);
  border-top: 1px solid var(--stat-line);
}
.stat__num {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
}
.stat__num--sm { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; }
.stat__label { font-size: 16px; line-height: 1.48; color: var(--ink-4); margin-top: 10px; }

/* --- Levels --- */
.levels { display: flex; flex-direction: column; gap: 14px; margin-top: 52px; }
.level {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .02), rgba(var(--ink-rgb), .004));
}
.level--active {
  padding: 28px;
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .09), rgba(var(--gold-rgb), .02));
  box-shadow: 0 0 40px rgba(var(--gold-rgb), .08);
}
.level__id {
  display: flex;
  gap: 16px;
  align-items: center;
  flex: none;
  width: 230px;
  min-width: 200px;
}
.level__name { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--ink-2); }
.level--active .level__name { font-weight: 600; font-size: 21px; }
.level__alias { font-size: 13px; color: var(--ink-dim); margin-top: 2px; }
.level__alias--active { color: var(--gold); }
.level__body { flex: 1; min-width: 240px; }
.level__kicker {
  font-size: 13px;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.level__kicker--active { color: var(--gold); }
.level__text { font-size: 17.5px; line-height: 1.5; color: var(--ink-4); margin-top: 5px; }
.level__text--active { color: var(--ink-2); }
.level__tag {
  flex: none;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-4);
  border: 1px solid rgba(var(--ink-rgb), .14);
  border-radius: 999px;
  padding: 7px 15px;
}
.level__tag--active {
  font-weight: 600;
  color: var(--on-gold);
  background: var(--gold-btn);
  border-color: transparent;
  padding: 7px 16px;
}
.levels__outro {
  text-align: center;
  max-width: 800px;
  margin: 44px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Pricing --- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
  margin-top: 56px;
  align-items: stretch;
}
.plan {
  position: relative;
  border: 1px solid rgba(var(--gold-rgb), .16);
  background: var(--panel);
  border-radius: 4px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.plan--featured {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .02));
  box-shadow: 0 0 50px rgba(var(--gold-rgb), .1);
}
.plan__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-gold);
  background: var(--gold-btn);
  border-radius: 999px;
  padding: 6px 16px;
  white-space: nowrap;
}
.plan__name {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.plan__name--gold { color: var(--gold-soft); }
.plan__price {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 52px);
  line-height: 1;
  margin-top: 14px;
}
.plan__rule { height: 1px; background: rgba(var(--gold-rgb), .16); }
.plan__rule--gold { background: rgba(var(--gold-rgb), .24); }
.plan__features { display: flex; flex-direction: column; gap: 15px; flex: 1; }
.plan__features .check { font-size: 17px; }
.plan--featured .plan__features .check { color: var(--ink-2); }
.plan--featured .plan__features .check:first-child { color: var(--gold-light); }
.plans__note {
  text-align: center;
  margin: 32px auto 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-dim);
}
.plans__note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.plans__note a:hover { color: var(--gold-soft); }

/* --- Schedule --- */
.sched-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  align-items: center;
  justify-content: space-between;
  margin: 52px 0 22px;
  padding: 24px 30px;
  border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: 3px;
  background: radial-gradient(100% 140% at 0% 0%, rgba(var(--gold-rgb), .1), rgba(var(--bg-rgb), 0) 60%);
}
.sched-intro__left { display: flex; gap: 16px; align-items: center; }
.sched-intro__title { font-family: var(--serif); font-size: 21px; color: var(--ink); }
.sched-intro__text { font-size: 14px; color: var(--ink-4); margin-top: 4px; }
.sched-intro__date { font-weight: 700; font-size: 17px; color: var(--gold-soft); }

.sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.sched-col { display: flex; flex-direction: column; gap: 20px; }
.sched-card {
  border: 1px solid rgba(var(--gold-rgb), .16);
  border-radius: 3px;
  padding: 30px;
  background: var(--panel);
  /* Grid stretches the card to the tallest column; the heading stays put and
     the date list takes the leftover height, centring itself inside it. */
  display: flex;
  flex-direction: column;
}
.sched-card__title {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.sched-card__meta { font-size: 16px; color: var(--ink-4); margin: 8px 0 20px; }

.dates {
  display: grid;
  flex: 1;
  align-content: center;
}
.date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--hair);
}
.date:last-child { border-bottom: 1px solid var(--hair); }
.date__num { font-family: var(--serif); color: var(--gold); }
.date__day { font-size: 17px; color: var(--ink); }

/* --- Расписание: раскрывающиеся блоки --- */
.sched-acc { display: flex; flex-direction: column; gap: 14px; }
.sched-acc__item {
  border: 1px solid rgba(var(--gold-rgb), .16);
  border-radius: 3px;
  background: var(--panel);
}
.sched-acc__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(20px, 2.3vw, 28px) clamp(20px, 2.4vw, 30px);
  background: transparent;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.sched-acc__title {
  display: block;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-soft);
  transition: color .25s;
}
.sched-acc__meta {
  display: block;
  margin-top: 9px;
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ink-4);
}
.sched-acc__head:hover .sched-acc__title { color: var(--gold); }
.sched-acc__arrow {
  flex: none;
  width: 11px; height: 11px;
  margin-right: 4px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .35s ease;
}
.sched-acc__item.is-open .sched-acc__arrow { transform: rotate(-135deg); }

/* Плавное раскрытие: анимируем grid-строку 0fr → 1fr.
   Без JS панели остаются открытыми (is-enhanced ставит скрипт). */
.sched-acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows .35s ease;
}
.sched-acc.is-enhanced .sched-acc__panel { grid-template-rows: 0fr; }
.sched-acc.is-enhanced .sched-acc__item.is-open .sched-acc__panel { grid-template-rows: 1fr; }
.sched-acc__panel-inner { overflow: hidden; }
.sched-acc__panel .dates {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  column-gap: clamp(28px, 4vw, 60px);
  align-content: start;
  padding: 4px clamp(20px, 2.4vw, 30px) clamp(18px, 2.2vw, 26px);
}
.sched-acc__panel .date { border-top: 0; border-bottom: 1px solid var(--hair); }

/* --- Календарь курса (слайдер по месяцам) ---
   Цвета «чипов» фиксированные (одинаковые в обеих темах), сетка и текст —
   на токенах, поэтому подстраиваются под светлую/тёмную тему. */
.cal {
  --cal-main: #c6a765;
  --cal-prem: #5f9d78;
  --cal-elite: #9a7bb6;
  margin: 10px 0 clamp(30px, 4vw, 46px);
}
.cal__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 18px;
}
.cal__title {
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--ink);
  min-width: 8.5em;
  text-align: center;
}
.cal__nav {
  flex: none;
  width: 40px; height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), .4);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: border-color .3s, background .3s, opacity .3s;
}
.cal__nav::before {
  content: "";
  width: 8px; height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}
.cal__nav--prev::before { transform: translateX(2px) rotate(-135deg); }
.cal__nav--next::before { transform: translateX(-2px) rotate(45deg); }
.cal__nav:hover:not(:disabled) { border-color: var(--gold); background: rgba(var(--gold-rgb), .08); }
.cal__nav:disabled { opacity: .3; cursor: default; }

.cal__viewport {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cal__viewport::-webkit-scrollbar { display: none; }
.cal__month { flex: 0 0 100%; scroll-snap-align: center; padding: 1px; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
/* Линии сетки рисуем рамками клеток (правая + нижняя), а не зазором:
   зазор-фон при дробной ширине колонок иногда «съедает» тонкую линию. */
.cal__wd,
.cal__day {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cal__wd {
  background: var(--bg);
  padding: 10px 6px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cal__day {
  background: var(--bg);
  min-height: clamp(64px, 8vw, 104px);
  padding: clamp(7px, 1.2vw, 12px) clamp(7px, 1vw, 12px) clamp(8px, 1.2vw, 13px);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.cal__day--pad { background: var(--panel); }
.cal__num { font-size: clamp(13px, 1.3vw, 16px); color: var(--ink-4); }
.cal__day--ev .cal__num { color: var(--ink); font-weight: 600; }
.cal__pill {
  align-self: flex-start;
  max-width: 100%;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .01em;
  padding: 3px clamp(6px, 0.8vw, 9px);
  border-radius: 7px;
  color: #fff;
}
.cal__day--main .cal__pill { background: var(--cal-main); color: #1a1408; }
.cal__day--prem .cal__pill { background: var(--cal-prem); color: #0d2015; }
.cal__day--elite .cal__pill { background: var(--cal-elite); color: #1d1030; }
.cal__time {
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 600;
  color: var(--ink-dim);
}

.cal__dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.cal__dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(var(--gold-rgb), .28);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.cal__dot[aria-current="true"] { background: var(--gold); transform: scale(1.25); }

/* --- Contact --- */
.motto { display: flex; align-items: center; gap: 14px; }
.motto__mark { width: 34px; height: 34px; opacity: .85; flex: none; }
.motto span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink-4);
  line-height: 1.5;
}

.form-wrap {
  border: 1px solid rgba(var(--gold-rgb), .2);
  border-radius: 4px;
  padding: clamp(28px, 3vw, 40px);
  background: var(--panel);
}
.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 15px; letter-spacing: .03em; color: var(--ink-4); }
.req { color: var(--gold); }
.input {
  width: 100%;
  background: rgba(var(--ink-rgb), .03);
  border: 1px solid rgba(var(--gold-rgb), .2);
  border-radius: 2px;
  padding: 16px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  outline: none;
  transition: border-color .3s, background .3s;
}
.input:focus { border-color: var(--gold); background: rgba(var(--ink-rgb), .05); }
.input--area { resize: vertical; }
.input[aria-invalid="true"] { border-color: var(--error-line); }
.form__note { font-size: 14px; line-height: 1.55; color: var(--ink-dim); }
.form__error { font-size: 15px; line-height: 1.5; color: var(--error); }
.btn[aria-busy="true"] { opacity: .6; pointer-events: none; }

.thanks {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding: 36px 8px;
}
.thanks__mark {
  flex: none;
  width: 52px; height: 52px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px rgba(var(--gold-rgb), .35);
}
.thanks__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
}
.thanks__title { font-family: var(--serif); font-weight: 600; font-size: 26px; color: var(--ink); }
.thanks__text { font-size: 18px; line-height: 1.56; color: var(--ink-4); max-width: 360px; }

/* --- Brand block --- */
.brandblock { padding: clamp(84px, 11vh, 140px) 0; }
.brandblock .container {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}
.brandblock__head { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.brandblock__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 36px);
  letter-spacing: .14em;
}
.brandblock__cards { margin-top: 14px; width: 100%; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.brandblock__cards .stat { padding: 30px 26px; text-align: left; }
.brandblock__cards .stat__num { font-size: 30px; }
.brandblock__cards .stat__label { font-size: 16.5px; line-height: 1.5; margin-top: 12px; }

/* --- Footer --- */
.footer { border-top: 1px solid var(--line); padding: 48px 0; }
.footer__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.footer__copy { font-size: 12.5px; color: var(--ink-dim); }

/* --- Reveal on scroll (only when JS is active) --- */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================
   Вовлечение: прогресс, каскадные появления, ховеры, микроанимации
   ============================================================ */

/* Полоса прогресса прокрутки поверх шапки */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .25), var(--gold));
  z-index: 200;
  pointer-events: none;
  will-change: transform;
}

/* Каскадное появление детей блока при прокрутке */
.js .reveal.stagger { opacity: 1; transform: none; }
.js .reveal.stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .5s var(--ease),
    border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.js .reveal.stagger.is-visible > * { opacity: 1; transform: none; }
.js .reveal.stagger.is-visible > *:nth-child(1) { transition-delay: .04s; }
.js .reveal.stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.js .reveal.stagger.is-visible > *:nth-child(3) { transition-delay: .20s; }
.js .reveal.stagger.is-visible > *:nth-child(4) { transition-delay: .28s; }
.js .reveal.stagger.is-visible > *:nth-child(5) { transition-delay: .36s; }
.js .reveal.stagger.is-visible > *:nth-child(6) { transition-delay: .44s; }
.js .reveal.stagger.is-visible > *:nth-child(7) { transition-delay: .52s; }
.js .reveal.stagger.is-visible > *:nth-child(8) { transition-delay: .60s; }

/* Подъём и мягкое золотое свечение карточек при наведении */
.card, .diag__card, .level, .plan {
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover, .diag__card:hover, .level:hover, .plan:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 18px 50px -22px rgba(var(--gold-rgb), .45);
}

/* Дышащее свечение активного уровня «Сознание» */
.level--active { animation: level-glow 4.5s ease-in-out infinite; }
@keyframes level-glow {
  0%, 100% { box-shadow: 0 0 40px rgba(var(--gold-rgb), .08); }
  50% { box-shadow: 0 0 60px rgba(var(--gold-rgb), .18); }
}

/* Золотой блик, проходящий по кнопке при наведении */
.btn { position: relative; overflow: hidden; }
.btn--gold::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .38) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease);
  pointer-events: none;
}
.btn--gold:hover::after { transform: translateX(120%); }

/* Подчёркивание пунктов меню при наведении */
.nav__link { position: relative; }
.nav__link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); }

/* Золотая линия-акцент прорисовывается под заголовком секции */
.section__head::after {
  content: "";
  align-self: center;
  width: 0; height: 2px;
  margin-top: -6px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: width 1s var(--ease) .15s;
}
.section__head.is-visible::after { width: 72px; }

/* Плавный зум фото ведущего при наведении */
.expert__photo { overflow: hidden; }
.expert__photo img { transition: transform .7s var(--ease); }
.expert__photo:hover img { transform: scale(1.04); }

/* Мягкий подъём блока бесплатного эфира при наведении */
.webinar {
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.webinar:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -28px rgba(var(--gold-rgb), .5);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet */
@media (max-width: 980px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile nav */
@media (max-width: 880px) {
  /* Burger (40px) replaces the taller CTA button, so the header shrinks. */
  :root { --header-h: 71px; }

  .burger { display: flex; }
  .header__cta { display: none; }

  /* Anchored to the header itself (sticky = containing block) so the dropdown
     always meets its bottom edge, whatever the header actually measures. */
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gut) 24px;
    background: rgba(var(--bg-rgb), .97);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
    max-height: 78vh;
    overflow-y: auto;
  }
  .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link { padding: 16px 0; border-bottom: 1px solid var(--hair); }
}

/* Small tablet / large phone */
@media (max-width: 760px) {
  :root { --gut: 20px; }

  .cards { grid-template-columns: 1fr; }
  .bullets { grid-template-columns: 1fr; }
  .split, .split--expert { grid-template-columns: 1fr; }
  .split--contact { gap: 40px; }

  .sched-intro { flex-direction: column; align-items: flex-start; }
  .sched-intro__date { font-size: 16px; }

  .level { padding: 24px 22px; }
  .level__id { width: 100%; min-width: 0; }
  .level__body { min-width: 0; flex-basis: 100%; }

  .expert__photo { height: clamp(380px, 90vw, 520px); }
  .brandblock__cards .stat { text-align: center; }
}

/* Phone */
@media (max-width: 560px) {
  .hero { padding: 72px 18px; }
  .hero__frame { inset: 12px; }
  .hero__frame--inner { inset: 18px; }
  .hero__inner { gap: 22px; }
  .hero__actions { width: 100%; flex-direction: column; }
  .hero__actions .btn { width: 100%; text-align: center; }
  .badge { font-size: 12.5px; padding: 8px 16px; text-align: center; }

  .bullet { padding: 24px 20px; font-size: 17.5px; }
  .card { padding: 26px 22px; }
  .diag__card { padding: 26px 22px; }
  .plan { padding: 32px 24px; }
  .sched-card { padding: 24px 20px; }
  .sched-intro { padding: 22px 20px; }
  .webinar { padding: 40px 20px; }
  .form-wrap { padding: 24px 20px; }

  .result { gap: 14px; padding: 22px 0; }
  .result__num { width: 42px; }

  .stats { grid-template-columns: 1fr; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* --- Motion / print --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cal__viewport { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .reveal.stagger > * { opacity: 1; transform: none; }
}

/* ============================================================
   Светлая тема — тёмные акценты
   Островки тёмного внутри светлой темы: премиальность, акценты
   и читаемость знака. Внутри острова подменяем токены темы на
   тёмные — потомки автоматически рисуются как в тёмной теме.
   Как в карте паттернов: светлые страницы + тёмные карточки.
   ============================================================ */
:root[data-theme="light"] .webinar,
:root[data-theme="light"] .plan--featured,
:root[data-theme="light"] .level--active,
:root[data-theme="light"] .ai__visual,
:root[data-theme="light"] .brandblock,
:root[data-theme="light"] .footer {
  --bg-rgb: 22, 18, 12;
  --ink-rgb: 236, 230, 218;
  --gold-rgb: 194, 161, 94;
  --gold-edge-rgb: 220, 193, 137;
  --glow-rgb: 201, 168, 102;

  --bg: #16120c;
  --ink: #ece6da;
  --ink-2: #e8e1d2;
  --ink-3: #e4dccb;
  --ink-4: #d0c6b1;
  --ink-dim: #a89e8a;
  --placeholder: #8f8676;
  --selection-ink: #fff;

  --gold: #c2a15e;
  --gold-soft: #dcc189;
  --gold-light: #ecd4a0;
  --gold-mid: #c9a866;
  --gold-deep: #9c7c3a;
  --on-gold: #16120c;

  --gold-grad: linear-gradient(180deg, #ecd4a0, #c9a866 48%, #9c7c3a);
  --gold-btn: linear-gradient(180deg, #e6d0a0, #c2a15e 60%, #9c7c3a);
  --panel: linear-gradient(180deg, rgba(var(--ink-rgb), .028), rgba(var(--ink-rgb), .006));

  --line: rgba(var(--gold-rgb), .14);
  --line-strong: rgba(var(--gold-rgb), .55);
  --hair: rgba(var(--ink-rgb), .08);

  --error: #e08c76;
  --error-line: #b4553f;
  --sign-center: #16120c;

  color: var(--ink);
}

/* Фон островов (класс сам по себе, без наследования токенов, — задаём явно) */
:root[data-theme="light"] .footer {
  background: #14100a;
  border-top-color: rgba(var(--gold-rgb), .18);
}
:root[data-theme="light"] .brandblock {
  background:
    radial-gradient(90% 90% at 50% 100%, rgba(var(--gold-rgb), .12), rgba(var(--bg-rgb), 0) 60%),
    #16120c;
  border-top-color: rgba(var(--gold-rgb), .18);
}
:root[data-theme="light"] .webinar {
  background:
    radial-gradient(100% 120% at 50% 0%, rgba(var(--gold-rgb), .14), rgba(var(--bg-rgb), 0) 60%),
    #16120c;
  border-color: rgba(var(--gold-rgb), .4);
}
:root[data-theme="light"] .plan--featured {
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .12), rgba(var(--gold-rgb), .03)),
    #17130d;
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 18px 50px rgba(20, 15, 6, .28);
}
:root[data-theme="light"] .level--active {
  background:
    linear-gradient(180deg, rgba(var(--gold-rgb), .1), rgba(var(--gold-rgb), .02)),
    #17130d;
  border-color: rgba(var(--gold-rgb), .5);
  box-shadow: 0 12px 34px rgba(20, 15, 6, .22);
}
:root[data-theme="light"] .ai__visual {
  background:
    radial-gradient(circle at 50% 46%, rgba(var(--gold-rgb), .16), rgba(var(--bg-rgb), 0) 62%),
    #16120c;
  border-color: rgba(var(--gold-rgb), .28);
}

/* Знак на светлых поверхностях — тёмный медальон, чтобы читались лучи.
   На тёмных островах и на тёмной шапке/куполе знак читается сам. */
:root[data-theme="light"] .motto__mark {
  --sign-center: #16120c;
  background: radial-gradient(circle at 50% 47%, #241b10, #16120c 72%);
  border-radius: 50%;
}

/* --- Шапка: чёрная в обеих темах ---
   В тёмной теме она и так тёмная; здесь принудительно затемняем её в
   светлой теме, подменяя токены на тёмные (меню, знак, тумблер, кнопка
   отрисуются как на тёмном). */
:root[data-theme="light"] .header {
  --bg-rgb: 12, 11, 9;
  --ink-rgb: 236, 230, 218;
  --gold-rgb: 194, 161, 94;
  --gold-edge-rgb: 220, 193, 137;

  --ink: #ece6da;
  --ink-2: #e8e1d2;
  --ink-3: #e4dccb;
  --ink-4: #dbd3c4;
  --ink-dim: #a69d8e;

  --gold: #c2a15e;
  --gold-soft: #dcc189;
  --gold-light: #ecd4a0;
  --on-gold: #0c0b09;
  --gold-btn: linear-gradient(180deg, #e6d0a0, #c2a15e 60%, #9c7c3a);

  --line: rgba(var(--gold-rgb), .14);
  --sign-center: #0c0b09;

  background: rgba(12, 11, 9, .9);
  border-bottom-color: rgba(var(--gold-rgb), .14);
}

/* --- Первый экран: тёмный купол сверху, светлый низ (светлая тема) ---
   Логотип ложится на тёмный купол (читается), заголовок и текст —
   на светлом. Изогнутая граница между ними. */
.hero__sky { display: none; }
/* Раскладка первого экрана в светлой теме НЕ меняется относительно тёмной
   (та же центровка, высота, отступы) — поэтому при переключении темы
   логотип и тексты не сдвигаются. Светлая тема добавляет только тёмный
   фон и градиентную «землю» поверх него. */
:root[data-theme="light"] .hero {
  overflow: hidden;
  /* Тёмный верх с тёплым свечением за знаком */
  background:
    radial-gradient(46% 38% at 50% 30%, rgba(201, 168, 102, .16), rgba(20, 16, 10, 0) 60%),
    linear-gradient(180deg, #14100a 0%, #17130d 60%);
}
:root[data-theme="light"] .hero__inner {
  position: relative;
  z-index: 2;
}
/* Светлая «земля»: снизу сплошной светлый, кверху плавно уходит в
   прозрачность (открывая тёмный фон). Изолинии радиального градиента —
   эллипсы, поэтому затемнение идёт по дуге. Много стопов с плавным
   (smoothstep) спадом альфы — чтобы не было резкой полосы перехода.
   Вершина закреплена в px (переход всегда над заголовком, под
   логотипом), радиус в vw (форма дуги масштабируется по ширине). */
:root[data-theme="light"] .hero__sky {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Центр привязан к центру первого экрана (50%): контент центрирован,
     поэтому его смещение от центра постоянно — переход всегда сидит
     между надзаголовком и заголовком на любой высоте экрана.
     Много стопов по кривой smoothstep — без ступенчатых полос. */
  background: radial-gradient(360vw 360vw at 50% calc(50% + 357vw - 156px),
    rgba(var(--bg-rgb), 1) 0,
    rgba(var(--bg-rgb), 1) calc(360vw - 68px),
    rgba(var(--bg-rgb), .94) calc(360vw - 58px),
    rgba(var(--bg-rgb), .78) calc(360vw - 48px),
    rgba(var(--bg-rgb), .62) calc(360vw - 39px),
    rgba(var(--bg-rgb), .44) calc(360vw - 31px),
    rgba(var(--bg-rgb), .27) calc(360vw - 23px),
    rgba(var(--bg-rgb), .12) calc(360vw - 15px),
    rgba(var(--bg-rgb), .04) calc(360vw - 8px),
    rgba(var(--bg-rgb), 0) 360vw);
}
/* На узких экранах контент ниже и уже — своя привязка и более пологая дуга. */
@media (max-width: 820px) {
  :root[data-theme="light"] .hero__sky {
    background: radial-gradient(300vw 300vw at 50% calc(50% + 300vw - 233px),
      rgba(var(--bg-rgb), 1) 0,
      rgba(var(--bg-rgb), 1) calc(300vw - 52px),
      rgba(var(--bg-rgb), .94) calc(300vw - 44px),
      rgba(var(--bg-rgb), .78) calc(300vw - 36px),
      rgba(var(--bg-rgb), .62) calc(300vw - 30px),
      rgba(var(--bg-rgb), .44) calc(300vw - 24px),
      rgba(var(--bg-rgb), .27) calc(300vw - 18px),
      rgba(var(--bg-rgb), .12) calc(300vw - 11px),
      rgba(var(--bg-rgb), .04) calc(300vw - 6px),
      rgba(var(--bg-rgb), 0) 300vw);
  }
}
/* Знак на тёмном верху — центр под цвет фона, без медальона */
:root[data-theme="light"] .sign--hero .sign__img {
  --sign-center: #14100a;
}
/* Рамки первого экрана в светлой теме убираем — они пересекали бы дугу. */
:root[data-theme="light"] .hero__frame { display: none; }