/* ==========================================================================
   SelfLore — атмосфера «обсерватории судьбы»
   Кастомные эффекты поверх Tailwind: звёздное поле, орбиты, грейн, reveal.
   ========================================================================== */

:root {
  --c-night: #1b1a38;
  --c-night-deep: #141330;
  --c-night-soft: #232246;
  --c-gold: #cda94f;
  --c-gold-pale: #e7d4a0;
  --c-gold-deep: #b18a3e;
  --c-cream: #f0ede4;
  --c-faint: #8682ad;
}

/* Крупнее интерфейсный текст: Tailwind text-* в rem масштабируются от корня.
   Поднят общий кегль под мобайл-первый квиз-флоу: 106.25% (17px) на телефоне,
   118.75% (19px) с планшета. Body — sans (Manrope), чуть выше line-height. */
html { font-size: 106.25%; }
@media (min-width: 640px) { html { font-size: 118.75%; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
/* Cormorant по умолчанию даёт old-style цифры (3/4/5/7/9 свисают — «прыгают»).
   Глобально включаем lining-цифры (ровные, на базовой линии) по всему продукту. */
body, svg text { font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }

/* ---------- тематические скроллбары ----------
   Действуют на страницу и прокручиваемые блоки. НЕ влияют на список открытого
   нативного <select> — его рисует ОС, CSS туда не достаёт. */
* { scrollbar-width: thin; scrollbar-color: rgba(205, 169, 79, 0.5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(205, 169, 79, 0.45);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(205, 169, 79, 0.72); background-clip: padding-box; }

/* ---------- основной CTA: заполненный золотой pill ---------- */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-night-deep);
  background: linear-gradient(180deg, var(--c-gold-pale), var(--c-gold));
  border-radius: 9999px;
  padding: 1.05rem 2.2rem;
  box-shadow: 0 14px 34px -14px rgba(205, 169, 79, 0.7);
  transition: transform 0.18s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 18px 42px -14px rgba(205, 169, 79, 0.85); filter: brightness(1.03); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.is-loading { cursor: wait; filter: saturate(0.7); }
.btn-primary .arrow { transition: transform 0.3s ease; }
.btn-primary:hover .arrow { transform: translateX(3px); }

/* Закреплённый снизу CTA для квиза (как у Astroline/Moyra) */
.cta-sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
  padding: 1.25rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
}
/* Скрим во всю ширину экрана (контейнер узкий, max-w-xl — фон на нём рисовал бы
   прямоугольник с боковыми гранями). Псевдоэлемент выходит на 100vw, мягкий
   вертикальный фейд в цвет низа страницы → растворяется в фоне, без «подложки». */
.cta-sticky::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 175%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--c-night-soft) 62%);
  pointer-events: none;
  z-index: -1;
}
.cta-sticky .btn-primary { width: 100%; }

/* Кастомный месседж валидации (замена нативного тултипа браузера) — на-бренд бабл */
.quiz-error {
  display: flex; align-items: center; gap: 0.55rem;
  width: max-content; max-width: 100%; margin: 0 auto 0.75rem;
  background: rgba(27, 26, 56, 0.82);
  border: 1px solid rgba(205, 169, 79, 0.4);
  color: var(--c-cream);
  border-radius: 9999px; padding: 0.6rem 1.05rem;
  font-family: var(--font-body); font-size: 0.88rem; line-height: 1.3;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 14px 34px -20px rgba(0, 0, 0, 0.7);
  animation: errIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.quiz-error::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-gold); box-shadow: 0 0 8px 1px rgba(205, 169, 79, 0.6);
}
.quiz-error[hidden] { display: none; }
@keyframes errIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- SelfLore wordmark (the brand logo) ---------- */
.wm {
  font-family: "Cormorant Garamond", Georgia, serif;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.wm-self { font-style: italic; font-weight: 500; color: var(--c-cream); }
.wm-lore { font-weight: 600; color: var(--c-gold-pale); }

/* ---------- бумажный грейн на тёмном фоне ---------- */
.grain::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- координатная сетка-графопостроитель (де-астро замена starfield) ----------
   Тихий «экран прибора»: тонкая лавандовая сетка (мелкая + мажорная), затухающая к
   краям через маску. Статична — прибор точен, а не мерцает. */
.plot-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(134, 130, 173, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(134, 130, 173, 0.055) 1px, transparent 1px),
    linear-gradient(to right,  rgba(134, 130, 173, 0.10)  1px, transparent 1px),
    linear-gradient(to bottom, rgba(134, 130, 173, 0.10)  1px, transparent 1px);
  background-size: 38px 38px, 38px 38px, 190px 190px, 190px 190px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 38%, transparent 100%);
          mask-image: radial-gradient(ellipse 82% 72% at 50% 38%, #000 38%, transparent 100%);
}

/* (de-astro: the twinkling .starfield was removed; the quiet .plot-grid replaced it.
   The orbit animations are kept ONLY around the quiz number medallions — a warm,
   personal accent the user likes — not as a sitewide cosmic motif.) */
.orbit-slow  { animation: spin 160s linear infinite; transform-origin: center; }
.orbit-comet { animation: spin 6s linear infinite; transform-origin: center; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* «mapping»: золотые окружности на navy (без цветной сферы). Мягкая золотая аура
   за числом + кольцо, которое «прорисовывается» при появлении шага. */
.map-aura {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%,
    rgba(205, 169, 79, 0.18), rgba(205, 169, 79, 0.05) 50%, transparent 70%);
  animation: orbPulse 3.6s ease-in-out infinite;
}
@keyframes orbPulse {
  0%, 100% { transform: scale(0.97); opacity: 0.85; }
  50%      { transform: scale(1.03); opacity: 1; }
}
/* золотое кольцо, заполняющееся один раз при показе (та же «заполняющаяся» эстетика) */
.map-draw {
  stroke-dasharray: 578;            /* ≈ 2π·92 */
  stroke-dashoffset: 578;
  animation: mapDraw 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
  filter: drop-shadow(0 0 5px rgba(205, 169, 79, 0.5));
}
@keyframes mapDraw { to { stroke-dashoffset: 0; } }

/* ---------- eyebrow / kicker — readable label with a designed diamond marker
   (replaces the old thin "hairline" dash that read as a stray tick) ---------- */
.eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--c-gold);
}
.eyebrow::before {
  content: "\25C6"; /* ◆ — small diamond, reads as intentional, on-brand for "precise/statistical" */
  font-size: 0.62em;
  margin-right: 0.55rem;
  color: currentColor;
  opacity: 0.9;
  vertical-align: middle;
}

/* legacy hairline kept for any stragglers; now matches the eyebrow marker */
.hairline::before {
  content: "\25C6";
  display: inline-block;
  font-size: 0.62em;
  color: var(--c-gold);
  vertical-align: middle;
  margin-right: 0.6rem;
}

/* ---------- CTA: золотая заливка слайдом (скруглённая, как у попапов) ---------- */
.cta-fill {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 9999px;
}
.cta-fill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, var(--c-gold-pale), var(--c-gold));
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.cta-fill:hover::before { transform: translateX(0); }

/* ---------- periodic "shine" sweep across primary / purchase CTAs ---------- */
.btn-primary { overflow: hidden; }
.btn-primary::after,
.cta-fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: btnShine 5s ease-in-out infinite;
}
@keyframes btnShine {
  0%        { left: -60%; }
  18%, 100% { left: 130%; }
}

/* ---------- scroll-reveal (Stimulus reveal_controller) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }

/* ---------- модальный опросник ---------- */
.modal-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-overlay.is-open {
  opacity: 1;
}
.modal-overlay .modal-panel {
  transform: translateY(18px) scale(0.985);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-overlay.is-open .modal-panel {
  transform: translateY(0) scale(1);
}

/* индикаторы шагов (на светлой панели опросника) */
.step-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(52, 51, 95, 0.22);
  transition: all 0.3s ease;
}
.step-dot.is-active {
  width: 24px;
  background: var(--c-gold);
}

/* нативные контролы формы под тёмную тему */
.field-dark {
  background: rgba(20, 19, 48, 0.7);
  border: 1px solid rgba(240, 237, 228, 0.16);
  color: var(--c-cream);
  transition: border-color 0.2s ease;
}
.field-dark:focus {
  outline: none;
  border-color: var(--c-gold);
}
.field-dark option {
  background: #141330;
  color: var(--c-cream);
}

/* светлые контролы для дружелюбной модалки на бумажной панели */
.field-light {
  background: #ffffff;
  border: 1px solid rgba(20, 19, 48, 0.14);
  color: var(--c-night-deep);
  border-radius: 0.85rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-light::placeholder { color: rgba(20, 19, 48, 0.38); }
.field-light:focus {
  outline: none;
  border-color: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(205, 169, 79, 0.2);
}
.field-light option { background: #fff; color: var(--c-night-deep); }

/* ---------- плавные слайд-переходы между шагами опросника ---------- */
@keyframes qInRight { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes qInLeft  { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
.q-in-right { animation: qInRight 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.q-in-left  { animation: qInLeft 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ---------- экран-имитация анализа ---------- */
.analysis-line {
  opacity: 0.35;
  transition: opacity 0.4s ease, color 0.4s ease;
}
/* pending-строки — статичное тусклое кольцо (НЕ крутится) */
.analysis-line .analysis-spinner {
  position: relative;
  border-color: rgba(205, 169, 79, 0.3);
}
/* крутится только текущая («is-active») строка */
.analysis-line.is-active .analysis-spinner {
  animation: spin 1s linear infinite;
  border-color: rgba(205, 169, 79, 0.5);
  border-top-color: var(--c-gold);
}
.analysis-line.is-on {
  opacity: 1;
}
/* строка, над которой сейчас «идёт работа» — ярче неактивных */
.analysis-line.is-active {
  opacity: 1;
}
/* выполненная строка — золотая галочка вместо спиннера */
.analysis-line.is-on .analysis-spinner {
  animation: none;
  border-color: var(--c-gold);
  background: var(--c-gold);
}
.analysis-line.is-on .analysis-spinner::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #141330;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.result-panel {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.result-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- consent gate (Stimulus consent_controller) ---------- */
/* A mandatory gate: a scrim blocks the page (incl. the quiz Continue button)
   until the visitor chooses Allow or Decline. */
.consent-scrim {
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(15, 14, 36, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}
.consent-gate.is-open .consent-scrim {
  opacity: 1;
  pointer-events: auto;
}
.consent-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  max-width: 23rem;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 640px) {
  .consent-bar { left: 1.5rem; bottom: 1.5rem; right: auto; }
}
.consent-gate.is-open .consent-bar {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.consent-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(27, 26, 56, 0.97), rgba(20, 19, 48, 0.97));
  border: 1px solid rgba(205, 169, 79, 0.28);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem 1.2rem;
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
.consent-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
}
.consent-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-gold-pale);
}
.consent-star {
  color: var(--c-gold);
  animation: twinkle 3s ease-in-out infinite;
}
.consent-text {
  margin-bottom: 0.95rem;
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: rgba(240, 237, 228, 0.84);
}
.consent-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.consent-allow {
  font-family: "Cormorant Garamond", serif;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-night-deep);
  background: var(--c-gold);
  padding: 0.42rem 1.5rem;
  border-radius: 9999px;
}
.consent-decline {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(240, 237, 228, 0.55);
  padding: 0.42rem 0.7rem;
  transition: color 0.2s ease;
}
.consent-decline:hover { color: var(--c-cream); }

/* ---------- segmented control (offer: one-time vs weekly) ---------- */
.seg {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(240, 237, 228, 0.55);
  padding: 0.85rem 0.5rem;
  border-radius: 0.6rem;
  text-align: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.seg:hover { color: var(--c-cream); }
.seg.is-active {
  color: var(--c-night-deep);
  background: var(--c-gold);
}

/* ---------- flash messages ---------- */
.flash-stack {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: calc(100% - 2rem);
  max-width: 30rem;
  pointer-events: none;
}
.flash {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(231, 212, 160, 0.28);
  background: rgba(20, 19, 48, 0.94);
  backdrop-filter: blur(6px);
  box-shadow: 0 18px 50px -24px rgba(8, 7, 26, 0.9);
  cursor: pointer;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.flash.is-leaving { opacity: 0; transform: translateY(-0.5rem); }
.flash__mark {
  font-family: "Cormorant Garamond", serif;
  line-height: 1.4;
  color: var(--c-gold);
}
.flash--alert { border-color: rgba(203, 120, 80, 0.5); }
.flash--alert .flash__mark { color: #e0996b; }
.flash__text {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(240, 237, 228, 0.9);
}

/* ============================ Quiz funnel ============================ */
.quiz-shell { min-height: 100svh; display: flex; flex-direction: column; }
.quiz-progress { height: 4px; background: rgba(240, 237, 228, 0.1); border-radius: 9999px; overflow: hidden; }
.quiz-progress__fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-gold-deep), var(--c-gold));
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.quiz-step { display: none; }
.quiz-step.is-current { display: block; animation: qInRight 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Moyra-style labeled select on dark */
.quiz-field { position: relative; }
.quiz-field > .quiz-field__label {
  position: absolute; top: 0.55rem; left: 1rem; pointer-events: none;
  font-family: "JetBrains Mono", monospace; font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--c-faint);
}
.quiz-select {
  appearance: none; -webkit-appearance: none; width: 100%;
  background-color: rgba(20, 19, 48, 0.6); color: var(--c-cream);
  border: 1px solid rgba(240, 237, 228, 0.16); border-radius: 0.9rem;
  padding: 1.5rem 2.4rem 0.65rem 1rem; font-size: 1.05rem; font-family: var(--font-body);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23cda94f' stroke-width='1.6'%3E%3Cpath d='M4 6l4 4 4-4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quiz-select:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(205, 169, 79, 0.18); }
.quiz-select option { background: #141330; color: var(--c-cream); }

/* free-text field (no dropdown chevron — это не select) */
.quiz-input {
  appearance: none; -webkit-appearance: none; width: 100%;
  background-color: rgba(20, 19, 48, 0.6); color: var(--c-cream);
  border: 1px solid rgba(240, 237, 228, 0.16); border-radius: 0.9rem;
  padding: 1.1rem 1rem; font-size: 1.05rem; font-family: var(--font-body);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* placeholder = hint only — semi-transparent; typed text stays full cream */
.quiz-input::placeholder { color: rgba(240, 237, 228, 0.4); }
.quiz-input:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(205, 169, 79, 0.18); }

/* Choice cards (single-select) + chips (multi-select) */
.choice-card, .chip {
  position: relative; display: flex; align-items: center; gap: 0.85rem;
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(20, 19, 48, 0.5); border: 1px solid rgba(240, 237, 228, 0.12);
  border-radius: 1rem; color: var(--c-cream); font-family: var(--font-body);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.1s ease;
}
.choice-card { padding: 1.35rem 1.4rem; font-size: 1.3rem; }
.chip { padding: 1.3rem 1.3rem; font-size: 1.3rem; flex-direction: column; align-items: flex-start; gap: 0.7rem; }
.choice-card:hover, .chip:hover { border-color: rgba(205, 169, 79, 0.5); }
.choice-card:active, .chip:active { transform: scale(0.99); }
.choice-card.is-selected, .chip.is-selected { border-color: var(--c-gold); background: rgba(205, 169, 79, 0.13); }
.choice-input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.choice-ico { color: var(--c-gold); flex: none; }
.choice-ico svg { width: 32px; height: 32px; }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* big numerology number glyph (interstitials / summary) */
.glyph-num {
  font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; line-height: 1;
  background: linear-gradient(180deg, var(--c-gold-pale), var(--c-gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* "profile match" — золотое кольцо-прогресс, заполняется до % (gold-on-navy) */
.match-orb {
  position: relative; width: 200px; height: 200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(205, 169, 79, 0.09), transparent 64%);
  border-radius: 50%;
}
.match-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.match-ring__track { fill: none; stroke: rgba(231, 212, 160, 0.14); stroke-width: 3; }
.match-ring__fill {
  fill: none; stroke: var(--c-gold); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 339.292;        /* 2π·54 */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 0.12s linear;
  filter: drop-shadow(0 0 5px rgba(205, 169, 79, 0.55));
}
.match-orb__val { position: relative; font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 3.2rem; color: var(--c-cream); }

/* speech bubble guide — на-бренд (navy glass + золотая хайрлайн) */
.guide-bubble {
  position: relative;
  background: rgba(27, 26, 56, 0.72);
  border: 1px solid rgba(205, 169, 79, 0.32);
  color: var(--c-cream);
  border-radius: 1rem; padding: 0.95rem 1.2rem; font-size: 0.95rem; line-height: 1.5;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.75);
}
.guide-bubble::after {
  content: ""; position: absolute; bottom: -7px; left: 50%;
  width: 13px; height: 13px;
  transform: translateX(-50%) rotate(45deg);
  background: rgba(27, 26, 56, 0.72);
  border-right: 1px solid rgba(205, 169, 79, 0.32);
  border-bottom: 1px solid rgba(205, 169, 79, 0.32);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}

/* blurred teaser behind email capture */
.blur-preview { filter: blur(7px); opacity: 0.5; user-select: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .quiz-step.is-current { animation: none; }
  .map-aura, .orbit-slow, .orbit-comet { animation: none; }
  .btn-primary::after, .cta-fill::after { animation: none; display: none; }
  .map-draw { animation: none; stroke-dashoffset: 0; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .modal-overlay, .modal-overlay .modal-panel { transition: none; }
  .analysis-line { opacity: 1; }
  .analysis-line .analysis-spinner,
  .analysis-line.is-active .analysis-spinner { animation: none; }
  .result-panel { opacity: 1; transform: none; }
  .q-in-right, .q-in-left { animation: none; }
  .quiz-error { animation: none; }
  .consent-bar { transform: none; transition: opacity 0.2s ease; }
  .consent-star { animation: none; }
}