/* ============================================================
   Sense · Psyhobot design system v2
   Палитра: тёплый пергамент + маув + петроль + золото
   Шрифты: Space Grotesk (заголовки) + Inter (текст)
   Архитектура: 3-tier токены (primitive → semantic → component)
   ============================================================ */

/* ============================================================
   1. PRIMITIVE TOKENS — сырые значения, без смысла
   ============================================================ */
:root {
  /* --- Color primitives --- */
  --p-ivory-50:  #FAF7F2;
  --p-ivory-100: #F3EEE6;
  --p-ivory-200: #E5DFD7;
  --p-ink-900:   #1C1917;
  --p-ink-700:   #44403C;
  --p-ink-500:   #78716C;
  --p-mauve-100: #F0E4E8;
  --p-mauve-600: #8A4A5C;
  --p-mauve-700: #6E3A4A;
  --p-petrol-100:#E0EBEA;
  --p-petrol-600:#2D5F5D;
  --p-petrol-700:#234A48;
  --p-gold-100:  #F5E9DC;
  --p-gold-500:  #C4956A;
  --p-white:     #FFFFFF;
  --p-danger:    #B3261E;

  /* --- Typography primitives --- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Spacing primitives (4px base) --- */
  --sp-1: 0.25rem;  /* 4px  */
  --sp-2: 0.5rem;   /* 8px  */
  --sp-3: 0.75rem;  /* 12px */
  --sp-4: 1rem;     /* 16px */
  --sp-5: 1.5rem;   /* 24px */
  --sp-6: 2rem;     /* 32px */
  --sp-7: 3rem;     /* 48px */
  --sp-8: 4rem;     /* 64px */
  --sp-9: 6rem;     /* 96px */

  /* --- Radius primitives --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-full: 999px;

  /* --- Motion primitives --- */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Shadow primitives --- */
  --sh-sm: 0 1px 2px rgba(28, 25, 23, 0.06);
  --sh-md: 0 4px 12px rgba(28, 25, 23, 0.08);
  --sh-lg: 0 16px 40px rgba(28, 25, 23, 0.12);
}

/* ============================================================
   2. SEMANTIC TOKENS (light) — смысл, переключается темой
   ============================================================ */
:root {
  --bg: var(--p-ivory-50);
  --bg-alt: var(--p-ivory-100);
  --surface: var(--p-white);
  --surface-muted: var(--p-ivory-100);
  --text: var(--p-ink-900);
  --text-secondary: var(--p-ink-500);
  --text-inverse: var(--p-white);
  --primary: var(--p-mauve-600);
  --primary-strong: var(--p-mauve-700);
  --primary-soft: var(--p-mauve-100);
  --secondary: var(--p-petrol-600);
  --secondary-strong: var(--p-petrol-700);
  --secondary-soft: var(--p-petrol-100);
  --accent: var(--p-gold-500);
  --accent-strong: #8F6A3F;
  --accent-soft: var(--p-gold-100);
  --line: var(--p-ivory-200);
  --danger: var(--p-danger);
  --focus-ring: var(--p-mauve-600);
  --shadow-sm: var(--sh-sm);
  --shadow-md: var(--sh-md);
  --shadow-lg: var(--sh-lg);
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);
  --radius-full: var(--r-full);
  --container: 1160px;
}

/* ============================================================
   2b. SEMANTIC TOKENS (dark) — переопределение темы
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171412;
    --bg-alt: #1F1B18;
    --surface: #262220;
    --surface-muted: #2E2A27;
    --text: #EDEAE6;
    --text-secondary: #A8A29E;
    --text-inverse: #171412;
    --primary: #C98A9C;
    --primary-strong: #D9A5B4;
    --primary-soft: #3A2A30;
    --secondary: #5E9B98;
    --secondary-strong: #7DB8B5;
    --secondary-soft: #1E2F2E;
    --accent: #D4A574;
    --accent-strong: #D4A574;
    --accent-soft: #3A2E22;
    --line: #3A3632;
    --danger: #EF6A60;
    --focus-ring: #C98A9C;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5);
  }
}

/* ============================================================
   3. BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html { overflow-x: hidden; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-size: 1rem;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

img { max-width: 100%; display: block; }
a { color: var(--primary); }
button { font-family: inherit; }

/* Доступность: видимый фокус */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 10;
}

section { padding: 5.5rem 0; scroll-margin-top: 84px; }

/* ============================================================
   4. ТИПОГРАФИКА (Major Third 1.25)
   ============================================================ */
.hero h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); }
.section-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); text-align: center; margin-bottom: 1rem; }
h3 { font-size: 1.375rem; }

.section-sub {
  text-align: center;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto 3rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Строка текста до 75 символов */
.hero-sub, .about-text p, .issue-card p, .review-card p, .article-card p, .section-sub {
  max-width: 75ch;
}

/* ============================================================
   5. КНОПКИ
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  font-family: var(--font-body);
}
.btn-primary { background: var(--primary); color: var(--text-inverse); }
.btn-primary:hover { background: var(--primary-strong); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--text); color: var(--bg); }
.btn-light { background: var(--surface); color: var(--text); }
.btn-light:hover { background: var(--primary-soft); }
.btn-secondary { background: var(--secondary); color: var(--text-inverse); }
.btn-secondary:hover { background: var(--secondary-strong); transform: translateY(-1px); }

/* ============================================================
   6. НАВИГАЦИЯ
   ============================================================ */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 1000;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.nav-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 30px;
  height: 30px;
  color: var(--primary);
  flex-shrink: 0;
}
.nav-menu { display: flex; gap: 0.2rem; list-style: none; align-items: center; flex-wrap: wrap; }
.nav-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-link:hover { background: var(--primary-soft); color: var(--primary-strong); }
.nav-link.active { color: var(--primary-strong); font-weight: 600; }
.nav-cta {
  background: var(--primary);
  color: var(--text-inverse) !important;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
}
.nav-cta:hover { background: var(--primary-strong); color: var(--text-inverse) !important; }
.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 0.4rem;
  border-radius: var(--radius-sm);
}
.mobile-menu-btn svg { width: 24px; height: 24px; }

/* ============================================================
   7. HERO — фокус на клиенте, асимметричная сетка
   Эффект слоёв: фиксированная фото-подложка + контент поверх
   ============================================================ */
.hero {
  padding: 8.5rem 0 6rem;
  position: relative;
  background: transparent;
}
/* Фиксированная подложка (слой 1) — фото остаётся на месте при скролле.
   Изначально скрыта; проявляется при скролле (класс .scrolled через JS),
   создавая плавный переход от основной фото к подложке. */
.hero-bg {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100dvh;
  background: url('../assets/kristina.jpg') center 25% / cover no-repeat;
  z-index: 0;
  filter: blur(3px) saturate(0.8) brightness(1.03);
  transform: scale(1.06); /* скрывает края от blur */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s var(--ease-out);
}
.hero-bg.scrolled { opacity: 1; }
/* Затемнение градиентом для читаемости контента */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--bg) 78%, transparent) 45%,
    var(--bg) 100%);
}
.hero .container { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: center;
}
.hero-photo-wrap { position: relative; }
.hero-photo {
  width: 100%;
  max-width: 460px;
  object-fit: cover;
  border-radius: var(--radius-md);
  filter: saturate(0.92);
  transition: filter 0.7s var(--ease-out), transform 0.7s var(--ease-out), opacity 0.7s var(--ease-out);
}
/* При скролле основная фото плавно размывается и сливается с подложкой */
.hero-photo.scrolled {
  filter: blur(3px) saturate(0.8) brightness(1.03);
  transform: scale(1.06);
  opacity: 0.92;
}
.hero-badge {
  position: absolute;
  bottom: 18px; left: -18px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
}
.hero h1 { margin-bottom: 1.25rem; }
.hero h1 span { color: var(--primary); }
.hero-sub { font-size: 1.125rem; color: var(--text-secondary); margin-bottom: 2rem; max-width: 52ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero-trust { margin-top: 1.8rem; font-size: 0.9rem; color: var(--text-secondary); }
.hero-trust strong { color: var(--secondary); }

/* Hero-анимация (одна, для hero-контента) */
.hero-anim { opacity: 0; transform: translateY(28px); animation: heroIn 1s var(--ease-out) forwards; }
.hero-anim:nth-child(1) { animation-delay: 0.1s; }
.hero-anim:nth-child(2) { animation-delay: 0.25s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Слой, наезжающий на hero-подложку (glassmorphism).
   Фон почти непрозрачный — текст обязан читаться поверх фото. */
.layer-over-hero {
  position: relative;
  z-index: 2;
  margin-top: -2.5rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg) 96%, transparent) 0%,
    var(--bg) 140px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  box-shadow: 0 -12px 40px rgba(28, 25, 23, 0.06);
}

/* ============================================================
   8. КАРТОЧКИ
   ============================================================ */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 2rem;
  border: 1px solid var(--line);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card.lifted { box-shadow: var(--shadow-md); border-color: transparent; }
.card.lifted:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card.flat { box-shadow: none; }

/* ============================================================
   9. О КРИСТИНЕ / РЕГАЛИИ
   ============================================================ */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.about-text p { margin-bottom: 1.2rem; }
.about-text p strong { color: var(--secondary); font-weight: 600; }
.regalia { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 0.5rem; }
.regalia-item { padding: 1.2rem 0.2rem; border-top: 1px solid var(--line); }
.regalia-item .icon { width: 28px; height: 28px; color: var(--primary); margin-bottom: 0.5rem; }
.regalia-item .t { font-weight: 600; font-size: 1rem; }
.regalia-item .d { color: var(--text-secondary); font-size: 0.85rem; }

/* ============================================================
   10. ЗАПРОСЫ — асимметричная сетка, без аккордеонов
   ============================================================ */
.issues-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}
.issue-card {
  grid-column: span 4;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
/* Асимметрия: разные размеры ячеек вместо одинаковой плитки (анти-паттерн №4) */
.issue-card:nth-child(1) { grid-column: span 7; }
.issue-card:nth-child(2) { grid-column: span 5; }
.issue-card:nth-child(3) { grid-column: span 5; }
.issue-card:nth-child(4) { grid-column: span 7; }
.issue-card:nth-child(5) { grid-column: span 4; }
.issue-card:nth-child(6) { grid-column: span 8; }
.issue-card:nth-child(3n+2) { transform: translateY(24px); }
.issue-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.issue-card .icon { width: 32px; height: 32px; color: var(--primary); }
.issue-card h3 { font-size: 1.25rem; }
.issue-card p { color: var(--text-secondary); font-size: 0.95rem; }
.issue-card .issue-link {
  margin-top: auto;
  color: var(--secondary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.issue-card .issue-link:hover { color: var(--secondary-strong); }

/* ============================================================
   11. МЕТОДЫ — редакционно, без рамок
   ============================================================ */
.methods { background: var(--surface); }
.methods-list { max-width: 780px; margin: 0 auto; }
.method-item {
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.5rem;
}
.method-item:last-child { border-bottom: 1px solid var(--line); }
.method-item .icon { width: 28px; height: 28px; color: var(--primary); padding-top: 0.2rem; }
.method-item h3 { font-size: 1.375rem; margin-bottom: 0.4rem; }
.method-item p { color: var(--text-secondary); max-width: 60ch; }
.method-item .main-marker {
  color: var(--secondary);
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.6rem;
}

/* ============================================================
   12. ЦЕНЫ
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; align-items: stretch; }
.price-card { display: flex; flex-direction: column; }
.price-card.featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  transform: scale(1.03);
}
.price-card .price { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; margin: 0.5rem 0; letter-spacing: -0.02em; }
.price-card .dur { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1rem; }
.price-card h3 { font-size: 1.15rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card ul { list-style: none; color: var(--text-secondary); font-size: 0.9rem; margin: 0 0 1.5rem; }
.price-card li { padding: 0.3rem 0; position: relative; padding-left: 1.25rem; }
.price-card li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}
/* Краткий анонс тарифов (index.html) — компактная строка вместо дубля карточек */
.tariff-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.tariff-teaser-item {
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: center;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.tariff-teaser-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tariff-teaser-item.featured {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.tariff-teaser-item .tt-price {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
}
.tariff-teaser-item .tt-name {
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}
.tariff-teaser-item .tt-desc {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

/* ============================================================
   13. ОТЗЫВЫ
   ============================================================ */
.reviews { background: var(--surface); border-top: 1px solid var(--line); }
.reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.review-card { text-align: left; }
.review-card .stars { color: var(--accent-strong); font-size: 1.1rem; margin-bottom: 0.8rem; letter-spacing: 0.1em; }
.review-card p { font-style: italic; margin-bottom: 1rem; max-width: 75ch; }
.review-card .author { color: var(--secondary); font-weight: 600; font-size: 0.9rem; }
.review-rating { text-align: center; margin-top: 2.5rem; font-size: 1.1rem; color: var(--text-secondary); }
.review-rating strong { color: var(--secondary); font-size: 1.4rem; }

/* ============================================================
   14. ИИ-ПОМОЩНИК
   ============================================================ */
.ai-section { background: var(--secondary-strong); color: var(--text-inverse); }
.ai-section .section-title { color: var(--text-inverse); }
.ai-section .section-sub { color: rgba(255, 255, 255, 0.85); }
.ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ai-features { list-style: none; margin: 1.5rem 0; }
.ai-features li { padding: 0.6rem 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.8rem; }
.ai-features li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.ai-chat-preview { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-md); padding: 2rem; }
.ai-chat-preview .msg {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}
.ai-chat-preview .msg.user { margin-left: 2.5rem; }
.ai-chat-preview .msg.bot { margin-right: 2.5rem; }

/* ============================================================
   15. СТАТЬИ
   ============================================================ */
.articles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.article-card { text-align: left; display: flex; flex-direction: column; }
.article-card .cat { color: var(--secondary); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.article-card h3 { font-size: 1.15rem; margin-bottom: 0.8rem; }
.article-card p { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; flex-grow: 1; }
.article-card .btn { align-self: flex-start; padding: 0.6rem 1.4rem; font-size: 0.9rem; }

/* ============================================================
   16. ЗАПИСЬ / КАЛЕНДАРЬ
   ============================================================ */
.booking-wrap { max-width: 860px; margin: 0 auto; }
.booking-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
.tab-btn {
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  color: var(--text);
  font-family: var(--font-body);
}
.tab-btn.active { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.calendar-header { display: flex; gap: 1rem; justify-content: center; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; }
.calendar-nav-btn {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  transition: all var(--dur-fast) var(--ease-out);
}
.calendar-nav-btn:hover { background: var(--secondary); color: var(--text-inverse); border-color: var(--secondary); }
.time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.8rem; }
.time-slot {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  color: var(--text);
  text-align: center;
  font-family: var(--font-body);
}
.time-slot:hover, .time-slot.selected { background: var(--secondary); color: var(--text-inverse); border-color: var(--secondary); }
.time-slot.booked { background: var(--surface-muted); color: var(--text-secondary); cursor: not-allowed; opacity: 0.6; }
.booking-form { display: grid; gap: 1rem; }
.booking-form input, .booking-form select, .booking-form textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  font-family: var(--font-body);
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.booking-form input:focus, .booking-form select:focus, .booking-form textarea:focus {
  outline: 2px solid var(--focus-ring);
  border-color: transparent;
}
.booking-form label { font-weight: 500; font-size: 0.9rem; }
.booking-steps { text-align: center; margin-top: 1.5rem; color: var(--text-secondary); font-size: 0.9rem; }

.cal-step-label { text-align: center; font-weight: 500; margin: 1.2rem 0 0.8rem; font-size: 0.95rem; }
.cal-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.cal-day-name { text-align: center; font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; padding: 0.3rem 0; }
.cal-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--dur-fast) var(--ease-out);
  font-size: 0.9rem;
  font-family: var(--font-body);
}
.cal-day:hover { background: var(--secondary); color: var(--text-inverse); }
.cal-day.selected { background: var(--primary); color: var(--text-inverse); border-color: var(--primary); }
.cal-day.empty { visibility: hidden; }
.cal-day.past { opacity: 0.4; cursor: not-allowed; }
.cal-time-wrap { display: none; }
.cal-time-wrap.show { display: block; }

/* ============================================================
   17. КОНТАКТЫ
   ============================================================ */
.contacts-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.5rem; }
.contact-card { text-align: center; grid-column: span 4; }
/* Асимметрия: WhatsApp и Telegram — крупнее (анти-паттерн №4) */
.contact-card:nth-child(1) { grid-column: span 5; }
.contact-card:nth-child(2) { grid-column: span 7; }
.contact-card:nth-child(3) { grid-column: span 4; }
.contact-card:nth-child(4) { grid-column: span 4; }
.contact-card:nth-child(5) { grid-column: span 4; }
.contact-card .icon { width: 28px; height: 28px; color: var(--primary); margin-bottom: 0.8rem; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.contact-card a { color: var(--text-secondary); text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.contact-card a:hover { color: var(--secondary); }
.social-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 0.8rem; }
.social-icon svg { width: 24px; height: 24px; fill: #fff; }
.social-icon.wa { background: #25D366; }
.social-icon.tg { background: #229ED9; }
.social-icon.ig { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-icon.vk { background: #0077FF; }
.social-icon.phone { background: var(--secondary); }
.social-icon.club { background: var(--primary); }

/* ============================================================
   18. ДИПЛОМЫ
   ============================================================ */
.diplomas { margin-top: 2.5rem; }
.diplomas h3 { font-size: 1.2rem; margin-bottom: 1rem; }
.diploma-card {
  border-top: 1px solid var(--line);
  padding: 1.1rem 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.diploma-card .d-icon { width: 24px; height: 24px; color: var(--primary); flex-shrink: 0; margin-top: 0.15rem; }
.diploma-card .d-title { font-weight: 600; font-size: 0.95rem; }
.diploma-card .d-sub { color: var(--text-secondary); font-size: 0.85rem; }
.diploma-card .d-badge {
  margin-left: auto;
  background: var(--primary-soft);
  color: var(--primary-strong);
  padding: 0.25rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ============================================================
   19. ФУТЕР
   ============================================================ */
footer {
  background: var(--text);
  color: rgba(255, 255, 255, 0.8);
  padding: 3rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Водяной знак знака (два круга) на тёмном фоне футера */
footer::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  right: -90px;
  bottom: -140px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none'%3E%3Ccircle cx='16' cy='20' r='11' stroke='white' stroke-width='2.5'/%3E%3Ccircle cx='24' cy='20' r='11' stroke='white' stroke-width='2.5'/%3E%3Ccircle cx='20' cy='20' r='3.5' fill='white'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.07;
  pointer-events: none;
}
footer .container { position: relative; z-index: 1; }
footer .slogan { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; margin-bottom: 1.2rem; color: var(--text-inverse); }
footer .links { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
footer .links a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 0.9rem; }
footer .links a:hover { color: var(--text-inverse); }
footer .copy { font-size: 0.875rem; opacity: 0.65; }

/* ============================================================
   20. ПЛАВАЮЩИЙ ЧАТ
   ============================================================ */
.chat-fab {
  position: fixed; bottom: 24px; right: 24px; width: 62px; height: 62px; border-radius: 50%;
  background: var(--primary); color: var(--text-inverse); border: none; cursor: pointer;
  box-shadow: var(--shadow-lg); z-index: 2000; transition: all var(--dur-base) var(--ease-out);
  display: flex; align-items: center; justify-content: center;
}
.chat-fab:hover { transform: scale(1.08); background: var(--primary-strong); }
.chat-fab svg { width: 26px; height: 26px; }
/* Мини-виджет для страниц без встроенного чата (создаётся в js/main.js) */
.chat-mini {
  position: fixed; bottom: 100px; right: 24px; width: 320px; max-width: calc(100vw - 48px);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 1.2rem; display: none; z-index: 2001;
}
.chat-mini.open { display: block; }
.chat-mini p { font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 1rem; line-height: 1.5; }
.chat-mini .btn { width: 100%; text-align: center; display: block; }
.chat-window {
  position: fixed; bottom: 100px; right: 24px; width: 380px; max-width: calc(100vw - 48px);
  height: 520px; max-height: calc(100vh - 130px); background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: 2001; display: none; flex-direction: column;
  overflow: hidden;
}
.chat-window.open { display: flex; }
.chat-header { background: var(--secondary-strong); color: var(--text-inverse); padding: 1rem 1.2rem; display: flex; align-items: center; gap: 0.8rem; }
.chat-header .avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex; align-items: center; justify-content: center;
}
.chat-header .avatar svg { width: 22px; height: 22px; }
.chat-header .name { font-weight: 600; font-size: 0.95rem; }
.chat-header .status { font-size: 0.8125rem; opacity: 0.8; }
.chat-close { margin-left: auto; background: none; border: none; color: var(--text-inverse); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.chat-body { flex: 1; overflow-y: auto; padding: 1.2rem; background: var(--bg); display: flex; flex-direction: column; gap: 0.8rem; }
.chat-msg { max-width: 80%; padding: 0.8rem 1rem; border-radius: var(--radius-sm); font-size: 0.92rem; line-height: 1.5; }
.chat-msg.bot { background: var(--surface); align-self: flex-start; border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.chat-msg.user { background: var(--primary); color: var(--text-inverse); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg img { max-width: 100%; border-radius: var(--radius-sm); margin-top: 0.5rem; }
.chat-msg .gen-label { font-size: 0.75rem; opacity: 0.8; margin-top: 0.4rem; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0 1.2rem 0.6rem; background: var(--bg); }
.chat-quick button {
  background: var(--surface); border: 1px solid var(--line); padding: 0.4rem 0.8rem;
  border-radius: var(--radius-full); font-size: 0.875rem; cursor: pointer; color: var(--secondary); font-weight: 500;
  transition: all var(--dur-fast) var(--ease-out);
}
.chat-quick button:hover { background: var(--secondary); color: var(--text-inverse); }
.chat-input-row { display: flex; gap: 0.5rem; padding: 0.8rem; background: var(--surface); border-top: 1px solid var(--line); }
.chat-input-row input {
  flex: 1; padding: 0.8rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--line);
  font-family: var(--font-body); font-size: 0.92rem; background: var(--bg); color: var(--text);
}
.chat-input-row input:focus { outline: 2px solid var(--focus-ring); }
.chat-send {
  background: var(--primary); color: var(--text-inverse); border: none; width: 44px; height: 44px;
  border-radius: 50%; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.chat-send:hover { background: var(--primary-strong); }
.chat-send svg { width: 20px; height: 20px; }
.chat-gen-btn {
  background: var(--secondary-soft); color: var(--secondary-strong); border: none; padding: 0 1rem;
  border-radius: var(--radius-full); font-weight: 600; cursor: pointer; font-size: 0.85rem; flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.chat-gen-btn:hover { background: var(--secondary); color: var(--text-inverse); }

/* ============================================================
   21a. ФОРМА СОГЛАСИЯ В ЧАТЕ (152-ФЗ)
   ============================================================ */
.chat-consent-form { padding: .5rem 0; }
.consent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: 1.2rem 1.4rem;
  max-width: 380px;
  box-shadow: var(--shadow-sm);
}
.consent-check {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .88rem; line-height: 1.5; color: var(--text-secondary);
  cursor: pointer; margin-bottom: 1rem;
}
.consent-check input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary);
  flex-shrink: 0;
}
.consent-check a { color: var(--primary); text-decoration: underline; }
.consent-card .btn {
  width: 100%; justify-content: center;
}
.consent-card .btn:disabled {
  opacity: .5; cursor: not-allowed;
}

/* ============================================================
   21. КАРТЫ-РУЛЕТКА
   ============================================================ */
.cards-hero { text-align: center; padding: 8.5rem 0 2rem; }
.cards-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.card-wheel {
  max-width: 420px; margin: 3rem auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
}
.card-back {
  width: 180px; height: 250px;
  margin: 0 auto;
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-strong) 100%);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-inverse);
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-out);
  user-select: none;
  box-shadow: var(--shadow-lg);
}
.card-back:hover { transform: rotate(-2deg) scale(1.02); }
.card-front {
  width: 180px; height: 250px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
}
.card-front .card-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; }
.card-front .card-txt { font-size: 0.92rem; color: var(--text-secondary); }
.card-wheel .wheel-cta { margin-top: 2rem; }
.optin { max-width: 520px; margin: 2rem auto 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-md); text-align: center; background: var(--surface); }
.optin p { font-size: 0.95rem; margin-bottom: 1rem; }
.cards-pool-info { max-width: 720px; margin: 3rem auto 0; color: var(--text-secondary); font-size: 0.95rem; text-align: center; }

/* ============================================================
   22. СТРАНИЦЫ (page-hero, embed-chat, docs)
   ============================================================ */
.page-hero { padding: 8.5rem 0 2.5rem; background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%); }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 1rem; }
.page-hero p { max-width: 640px; color: var(--text-secondary); font-size: 1.125rem; }
.embed-chat { max-width: 720px; margin: 0 auto; padding: 0 0 4rem; }
.chat-embed {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  height: 600px;
}

/* ---------- Документы ---------- */
.docs-list { max-width: 780px; margin: 0 auto; }
.doc-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left var(--dur-fast) var(--ease-out);
}
.doc-item:hover { padding-left: 0.5rem; }
.doc-item:last-child { border-bottom: 1px solid var(--line); }
.doc-item .d-title { font-weight: 600; }
.doc-item .d-sub { color: var(--text-secondary); font-size: 0.85rem; }
.doc-item .d-arrow { color: var(--secondary); font-size: 1.2rem; }

/* ---------- Простые страницы ---------- */
.page-title { padding: 8.5rem 0 1rem; }
.page-title h1 { font-size: clamp(2.2rem, 5vw, 3rem); margin-bottom: 0.8rem; }
.page-title .lead { color: var(--text-secondary); font-size: 1.1rem; max-width: 640px; }

/* ============================================================
   23. СТАТЬИ (каталог + страницы статей)
   ============================================================ */
.articles-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}
.articles-list .card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, transform 0.2s;
}
.articles-list .card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.articles-list .card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin: 0.5rem 0;
  line-height: 1.3;
  color: var(--text);
}
.articles-list .card .article-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: auto;
  padding-top: 0.5rem;
}
.article-cat {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.5rem;
}
.article-date {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}
.article-body {
  max-width: 680px;
  line-height: 1.8;
}
.article-body p {
  margin-bottom: 1.2rem;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.filter-btn {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.articles-count {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

/* ============================================================
   24. RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .hero-grid, .about-grid, .ai-grid { grid-template-columns: 1fr; }
  .hero-photo-wrap { text-align: center; }
  .hero-badge { left: 50%; transform: translateX(-50%); }
  .hero { padding-top: 7rem; }
  .regalia { grid-template-columns: 1fr 1fr; }
  .issue-card { grid-column: span 6; }
  .issue-card:nth-child(3n+2) { transform: none; }
  .issue-card:nth-child(1), .issue-card:nth-child(2),
  .issue-card:nth-child(3), .issue-card:nth-child(4),
  .issue-card:nth-child(5), .issue-card:nth-child(6) { grid-column: span 6; }
  .contact-card:nth-child(1), .contact-card:nth-child(2),
  .contact-card:nth-child(3), .contact-card:nth-child(4),
  .contact-card:nth-child(5) { grid-column: span 6; }
}
@media (max-width: 768px) {
  .mobile-menu-btn { display: block; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); flex-direction: column; padding: 1rem;
    box-shadow: var(--shadow-md); border-bottom: 1px solid var(--line);
  }
  .nav-menu.active { display: flex; }
  .nav-link { padding: 0.85rem; text-align: center; width: 100%; }
  .container { padding: 0 1.25rem; }
  section { padding: 4rem 0; }
  .method-item { grid-template-columns: 1fr; gap: 0.6rem; }
  /* Чат на мобильном — на весь экран (не узкое окно) */
  .chat-window {
    width: 100vw; height: 100dvh; max-width: none; max-height: none;
    right: 0; bottom: 0; border-radius: 0;
  }
  .chat-fab { right: 16px; bottom: 16px; }
  .chat-mini { width: calc(100vw - 32px); right: 16px; bottom: 90px; }
  /* Тач-цели ≥44px и поля ввода ≥16px (иначе iOS зумит) */
  .chat-input-row input { font-size: 16px; min-height: 44px; }
  .chat-quick button { min-height: 44px; padding: 0.6rem 1rem; }
  .filter-btn { min-height: 44px; }
  .chat-send { width: 48px; height: 48px; }
  .chat-gen-btn { min-height: 44px; }
  /* Тарифы: вертикальный стек, «Популярный» первым */
  .tariff-teaser { grid-template-columns: 1fr; }
  .tariff-teaser-item.featured { order: -1; }
  /* Календарь: компактная неделя + слоты под датой (вертикальный поток) */
  .cal-days { gap: 0.3rem; }
  .cal-day { padding: 0.55rem 0; font-size: 0.85rem; }
  .cal-day-name { font-size: 0.7rem; }
  .time-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .time-slot { padding: 0.75rem 0.5rem; font-size: 0.9rem; }
  .tab-btn, .calendar-nav-btn { min-height: 44px; min-width: 44px; }
  .booking-steps { font-size: 0.8rem; line-height: 1.6; }
  /* Слой наезда на мобильном: меньше отступ и скругление */
  .layer-over-hero { margin-top: -1rem; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .regalia { grid-template-columns: 1fr; }
  .issue-card { grid-column: span 12; }
  .issue-card:nth-child(1), .issue-card:nth-child(2),
  .issue-card:nth-child(3), .issue-card:nth-child(4),
  .issue-card:nth-child(5), .issue-card:nth-child(6) { grid-column: span 12; }
  /* Приоритизация: 1-2 карточки крупно, остальные компактно */
  .issue-card { padding: 1.5rem; }
  .issue-card:nth-child(1), .issue-card:nth-child(2) { padding: 2rem; }
  .issue-card:nth-child(1) h3, .issue-card:nth-child(2) h3 { font-size: 1.4rem; }
  .issue-card:nth-child(n+3) { padding: 1.25rem; }
  .issue-card:nth-child(n+3) p { font-size: 0.85rem; }
  .contact-card:nth-child(1), .contact-card:nth-child(2),
  .contact-card:nth-child(3), .contact-card:nth-child(4),
  .contact-card:nth-child(5) { grid-column: span 12; }
}

/* ============================================================
   25. EDITORIAL — уникальные редакционные списки (index)
   Убирает шаблонные «карточки с иконками»: вместо них
   нумерованные строки с hairline-разделителями.
   ============================================================ */

/* Skip-link (доступность) */
.skip-link {
  position: fixed;
  top: -100px; left: 1rem;
  z-index: 3000;
  background: var(--primary);
  color: var(--text-inverse);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Типографика: баланс переносов в заголовках */
h1, h2, h3 { text-wrap: balance; }

/* Цены: моноширинные цифры, чтобы не прыгали */
.price-amount, .tt-price, .price { font-variant-numeric: tabular-nums; }

/* Тактильный отклик при нажатии */
.btn:active, .chat-fab:active, .chat-send:active, .tab-btn:active, .time-slot:active { transform: scale(0.98); }

/* Hero: скобочная метка вместо типового eyebrow */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
}

/* --- Редакционный список запросов (01–06) --- */
.issue-list { max-width: 860px; margin: 0 auto; }
.issue-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.6rem 0.5rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.issue-row:last-child { border-bottom: 1px solid var(--line); }
.issue-row:hover { padding-left: 1rem; background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%); }
.issue-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.05em;
}
.issue-body { display: flex; flex-direction: column; gap: 0.3rem; }
.issue-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; }
.issue-desc { color: var(--text-secondary); font-size: 0.95rem; max-width: 60ch; }
.issue-arrow { color: var(--secondary); font-size: 1.3rem; justify-self: end; align-self: center; transition: transform var(--dur-fast) var(--ease-out); }
.issue-row:hover .issue-arrow { transform: translateX(4px); }

/* --- Редакционные строки цен --- */
.price-list { max-width: 860px; margin: 0 auto; }
.price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 2rem;
  align-items: center;
  padding: 1.8rem 0.5rem;
  border-top: 1px solid var(--line);
}
.price-row:last-child { border-bottom: 1px solid var(--line); }
.price-row.featured {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 70%);
  padding-left: 1rem;
  padding-right: 1rem;
}
.price-main h3 { font-size: 1.3rem; margin-bottom: 0.3rem; }
.price-desc { color: var(--text-secondary); font-size: 0.9rem; }
.price-amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  white-space: nowrap;
}
.price-dur { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); letter-spacing: 0; }

/* --- Редакционная цитата отзывов --- */
.review-quote { max-width: 720px; margin: 0 auto; text-align: center; }
.review-quote .stars { color: var(--accent-strong); font-size: 1.2rem; letter-spacing: 0.15em; margin-bottom: 1.2rem; }
.review-quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 1.2rem;
}
.review-note { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 1.5rem; }

/* --- Редакционный список статей --- */
.article-list { max-width: 860px; margin: 0 auto; }
.article-row {
  display: grid;
  grid-template-columns: 56px 1fr 32px;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1.6rem 0.5rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.article-row:last-child { border-bottom: 1px solid var(--line); }
.article-row:hover { padding-left: 1rem; background: linear-gradient(90deg, var(--secondary-soft) 0%, transparent 60%); }
.article-num { font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; color: var(--accent-strong); }
.article-body { display: flex; flex-direction: column; gap: 0.3rem; }
.article-cat { color: var(--secondary); font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.article-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; }
.article-desc { color: var(--text-secondary); font-size: 0.9rem; max-width: 60ch; }
.article-arrow { color: var(--secondary); font-size: 1.3rem; justify-self: end; align-self: center; transition: transform var(--dur-fast) var(--ease-out); }
.article-row:hover .article-arrow { transform: translateX(4px); }

/* --- Редакционный список контактов --- */
.contact-list { max-width: 720px; margin: 0 auto; }
.contact-row {
  display: grid;
  grid-template-columns: 1fr auto 32px;
  gap: 1.5rem;
  align-items: center;
  padding: 1.4rem 0.5rem;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-row:hover { padding-left: 1rem; background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%); }
.contact-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.contact-value { color: var(--text-secondary); font-size: 0.95rem; }
.contact-arrow { color: var(--secondary); font-size: 1.2rem; transition: transform var(--dur-fast) var(--ease-out); }
.contact-row:hover .contact-arrow { transform: translateX(4px); }

/* --- Вспомогательные классы (замена inline styles) --- */
.center-cta { text-align: center; margin-top: 2rem; }
.about-quote { font-style: italic; color: var(--secondary-strong); font-weight: 500; }
.about-more { margin-top: 1rem; }
.methods-text { max-width: 720px; margin: 0 auto; }
.methods-more { margin-top: 1rem; }
.ai-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
@media (max-width: 768px) {
  .ai-cta-row .btn { font-size: 0.9rem; padding: 0.9rem 1.3rem; white-space: nowrap; }
}
.btn-on-dark { border-color: #fff; color: #fff; }
.btn-on-dark:hover { background: #fff; color: var(--secondary-strong); }
.legal { font-size: 0.75rem; margin-top: 0.5rem; opacity: 0.6; }
.chat-gen-icon { width: 18px; height: 18px; }

/* --- Мобильная адаптация редакционных списков --- */
@media (max-width: 768px) {
  .issue-row, .article-row { grid-template-columns: 40px 1fr 24px; gap: 1rem; padding: 1.2rem 0.25rem; }
  .issue-title { font-size: 1.15rem; }
  .price-row { grid-template-columns: 1fr; gap: 0.8rem; align-items: start; }
  .price-amount { align-items: flex-start; font-size: 1.7rem; }
  .price-row .btn { align-self: flex-start; }
  .contact-row { grid-template-columns: 1fr auto 24px; gap: 1rem; }
  .contact-value { overflow-wrap: anywhere; min-width: 0; }
}

/* ============================================================
   26. APPLE-LEVEL — премиальный минимализм (главная, body.home)
   Огромная типографика, воздух, минимум рамок. Стиль Джони Айва.
   ============================================================ */

/* --- Растворение фото при скролле (полное — до конца) --- */
.home .hero-photo.scrolled {
  opacity: 0;
  filter: blur(10px) saturate(0.7) brightness(1.05);
  transform: scale(1.12);
}

/* --- Hero: огромный тонкий заголовок, фото без рамок --- */
.home .hero { padding: 9rem 0 7rem; }
.home .hero h1 {
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  max-width: 14ch;
}
.home .hero h1 span { font-weight: 500; }
.home .hero-sub {
  font-size: 1.25rem;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}
.home .hero-photo {
  border-radius: 0;
  max-width: 520px;
  filter: saturate(0.9);
}
.home .hero-kicker {
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--secondary);
}
.home .hero-trust { font-size: 0.95rem; }

/* --- Секции: больше воздуха, заголовки слева --- */
.home section { padding: 8rem 0; }
.home .section-title {
  text-align: left;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 22ch;
  margin-bottom: 1.5rem;
}
.home .section-sub {
  text-align: left;
  margin: 0 0 4rem;
  max-width: 56ch;
  font-size: 1.125rem;
}

/* --- Запросы: огромные строки с hover-сдвигом --- */
.home .issue-list { max-width: 1000px; }
.home .issue-row {
  grid-template-columns: 72px 1fr 40px;
  gap: 2rem;
  padding: 2.25rem 0.5rem;
  border-top: 1px solid var(--line);
}
.home .issue-row:hover {
  padding-left: 1.5rem;
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 55%);
}
.home .issue-num { font-size: 1rem; color: var(--accent-strong); }
.home .issue-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.home .issue-desc { font-size: 1rem; max-width: 56ch; }
.home .issue-arrow { font-size: 1.6rem; }

/* --- Цены: крупные суммы, много воздуха --- */
.home .price-list { max-width: 1000px; }
.home .price-row {
  grid-template-columns: 1fr auto auto;
  gap: 3rem;
  padding: 2.25rem 0.5rem;
  border-top: 1px solid var(--line);
}
.home .price-main h3 { font-size: 1.5rem; font-weight: 500; }
.home .price-desc { font-size: 0.95rem; }
.home .price-amount { font-size: 2.75rem; font-weight: 500; }
.home .price-dur { font-size: 0.875rem; }
.home .price-row.featured {
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 60%);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* --- Отзывы: огромная цитата --- */
.home .review-quote { max-width: 900px; }
.home .review-quote blockquote {
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

/* --- Статьи: крупные строки --- */
.home .article-list { max-width: 1000px; }
.home .article-row {
  grid-template-columns: 72px 1fr 40px;
  gap: 2rem;
  padding: 2.25rem 0.5rem;
  border-top: 1px solid var(--line);
}
.home .article-row:hover {
  padding-left: 1.5rem;
  background: linear-gradient(90deg, var(--secondary-soft) 0%, transparent 55%);
}
.home .article-num { font-size: 1rem; color: var(--accent-strong); }
.home .article-title { font-size: 1.6rem; font-weight: 500; letter-spacing: -0.01em; }
.home .article-desc { font-size: 1rem; max-width: 56ch; }
.home .article-arrow { font-size: 1.6rem; }

/* --- Контакты: крупные строки --- */
.home .contact-list { max-width: 900px; }
.home .contact-row {
  grid-template-columns: 1fr auto 40px;
  gap: 2rem;
  padding: 1.75rem 0.5rem;
  border-top: 1px solid var(--line);
}
.home .contact-row:hover {
  padding-left: 1.5rem;
  background: linear-gradient(90deg, var(--primary-soft) 0%, transparent 55%);
}
.home .contact-name { font-size: 1.4rem; font-weight: 500; }
.home .contact-value { font-size: 1rem; }
.home .contact-arrow { font-size: 1.4rem; }

/* --- Кнопки: крупнее, спокойнее --- */
.home .btn { padding: 1rem 2.25rem; font-size: 1.05rem; border-radius: var(--radius-full); }

/* --- Мобильная адаптация Apple-стиля --- */
@media (max-width: 768px) {
  .home section { padding: 5rem 0; }
  .home .hero { padding: 7rem 0 4rem; }
  .home .hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .home .section-title { font-size: clamp(2rem, 7vw, 2.6rem); }
  .home .issue-row, .home .article-row { grid-template-columns: 40px 1fr 24px; gap: 1rem; padding: 1.5rem 0.25rem; }
  .home .issue-title { font-size: 1.4rem; }
  .home .article-title { font-size: 1.2rem; }
  .home .price-row { grid-template-columns: 1fr; gap: 1rem; }
  .home .price-amount { font-size: 2.1rem; align-items: flex-start; }
  .home .contact-row { grid-template-columns: 1fr auto 24px; gap: 1rem; }
  .home .contact-name { font-size: 1.15rem; }
}

/* --- Тёмная тема: ai-секция остаётся тёмной (белый текст читаем) --- */
@media (prefers-color-scheme: dark) {
  .ai-section { background: #1E2F2E; }
  .ai-section,
  .ai-section .section-title,
  .ai-section .ai-features li { color: #fff; }
  .ai-section .section-sub { color: rgba(255, 255, 255, 0.85); }
  .ai-section .ai-features li::before { background: #E8C87A; }
  .ai-chat-preview { border-color: rgba(255, 255, 255, 0.15); }
  .ai-chat-preview .msg { color: rgba(255, 255, 255, 0.92); }
  .ai-section .btn-light { background: #fff; color: #1E2F2E; }
  .ai-section .btn-light:hover { background: #E8F0EF; }
  .btn-on-dark { border-color: #fff; color: #fff; }
  .btn-on-dark:hover { background: #fff; color: #1E2F2E; }
}

/* ============================================================
   27. SUBPAGES — Apple-стиль для внутренних страниц
   ============================================================ */

/* --- Заголовок страницы: огромный, слева --- */
.home .page-hero {
  padding: 10rem 0 3rem;
  background: none;
}
.home .page-hero h1 {
  font-size: clamp(3rem, 6.5vw, 5.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
.home .page-hero p {
  font-size: 1.25rem;
  max-width: 46ch;
}

/* --- О Кристине: крупнее текст, больше воздуха --- */
.home .about-grid { gap: 5rem; }
.home .about-text p { font-size: 1.125rem; line-height: 1.7; }
.home .about-text img, .home .about-grid img { border-radius: 0; }

/* --- Регалии: крупнее --- */
.home .regalia { gap: 2rem; }
.home .regalia-item { padding: 1.5rem 0.2rem; }
.home .regalia-item .t { font-size: 1.1rem; }
.home .regalia-item .icon { width: 32px; height: 32px; }

/* --- Дипломы: крупнее --- */
.home .diploma-card { padding: 1.5rem 0; gap: 1.5rem; }
.home .diploma-card .d-title { font-size: 1.1rem; }
.home .diploma-card .d-sub { font-size: 0.95rem; }
.home .diploma-card .d-icon { width: 28px; height: 28px; }

/* --- Статьи: категория, дата, тело в Apple-стиле (только страницы статей) --- */
.home .page-hero .article-cat {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--secondary);
  margin-bottom: 1rem;
  background: none;
  padding: 0;
  border-radius: 0;
}
.home .page-hero .article-date {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-top: 1.25rem;
}
.home .article-body {
  max-width: 68ch;
  font-size: 1.125rem;
  line-height: 1.75;
}
.home .article-body p { margin-bottom: 1.5rem; }
.home .article-body h2 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 2.5rem 0 1rem;
}
.home .article-body h3 {
  font-size: 1.35rem;
  font-weight: 500;
  margin: 2rem 0 0.75rem;
}
.home .article-body blockquote {
  border-left: 2px solid var(--secondary);
  padding-left: 1.5rem;
  font-style: italic;
  color: var(--text-secondary);
  margin: 2rem 0;
}

/* --- Список статей: карточки → редакционные строки --- */
.home .articles-list {
  grid-template-columns: 1fr;
  gap: 0;
}
.home .articles-list .card {
  flex-direction: row;
  align-items: baseline;
  gap: 2rem;
  padding: 1.75rem 0.25rem;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  transition: padding-left 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.home .articles-list .card:hover {
  box-shadow: none;
  transform: none;
  padding-left: 1rem;
  background: linear-gradient(90deg, var(--secondary-soft) 0%, transparent 60%);
}
.home .articles-list .card h3 {
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  flex: 1;
}
.home .articles-list .card .article-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0;
  min-width: 160px;
}
.home .articles-list .card .article-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
  min-width: 110px;
  text-align: right;
}
.home .filter-btn {
  font-size: 0.875rem;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-full);
}
.home .articles-count {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

/* --- Мобильная адаптация подстраниц --- */
@media (max-width: 768px) {
  .home .page-hero { padding: 7rem 0 2rem; }
  .home .page-hero h1 { font-size: clamp(2.4rem, 9vw, 3.2rem); }
  .home .about-grid { gap: 2.5rem; }
  .home .articles-list .card { flex-direction: column; gap: 0.5rem; }
  .home .articles-list .card .article-meta { text-align: left; }
  .home .articles-list .card .article-cat { min-width: 0; }
}

/* --- Страница «Статьи» (articles.html): карточки, а не редакционные строки --- */
.home.articles-page .articles-list {
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.25rem;
}
.home.articles-page .articles-list .card {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 1.5rem;
  border-top: none;
  border-radius: var(--radius-md);
  box-shadow: none;
  border: 1px solid var(--line);
  background: var(--surface);
  min-height: 180px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.home.articles-page .articles-list .card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  padding-left: 1.5rem;
  background: var(--surface);
}
.home.articles-page .articles-list .card h3 {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0.5rem 0;
  flex: none;
}
.home.articles-page .articles-list .card .article-cat {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  background: none;
  padding: 0;
  border-radius: 0;
  margin: 0 0 0.5rem;
  min-width: 0;
}
.home.articles-page .articles-list .card .article-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
  padding: 0;
  min-width: 0;
  text-align: left;
  margin-top: auto;
  padding-top: 0.75rem;
}
@media (max-width: 768px) {
  .home.articles-page .articles-list .card { min-height: 0; }
}

/* --- Вспомогательные классы подстраниц --- */
.about-photo { width: 100%; max-width: 440px; object-fit: cover; }
.center-text { text-align: center; max-width: 600px; margin: 0 auto; }
.center-cta { text-align: center; }
.center-cta .btn { margin-top: 1.5rem; }
.page-note { text-align: center; margin-top: 3rem; color: var(--text-secondary); font-size: 0.9rem; }

/* ============================================================
   28. DEPTH — объём и глубина (Apple-style)
   Мягкие tinted-тени (в цвет петроля, не чёрные), подъём
   интерактивных элементов, лёгкие радиальные градиенты фона.
   ============================================================ */

/* Фото в hero — глубокая тёплая тень */
.home .hero-photo {
  box-shadow:
    0 45px 90px -25px rgba(35, 74, 72, 0.4),
    0 18px 35px -18px rgba(35, 74, 72, 0.22);
}

/* Фото на about.html */
.home .about-photo {
  box-shadow:
    0 45px 90px -25px rgba(35, 74, 72, 0.35),
    0 18px 35px -18px rgba(35, 74, 72, 0.2);
}

/* Кнопки: тень + подъём при наведении */
.home .btn-primary {
  box-shadow: 0 12px 28px -12px rgba(35, 74, 72, 0.5);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.home .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -14px rgba(35, 74, 72, 0.6);
}

/* Чат-превью ИИ — приподнято над тёмным фоном */
.home .ai-chat-preview {
  box-shadow: 0 35px 70px -25px rgba(0, 0, 0, 0.45);
}

/* Featured-тариф — приподнят */
.home .price-row.featured {
  box-shadow: 0 25px 50px -25px rgba(35, 74, 72, 0.3);
}

/* Глубина фона: мягкие радиальные градиенты в секциях */
.home .methods,
.home .reviews {
  background:
    radial-gradient(ellipse 55% 40% at 88% 8%, rgba(35, 74, 72, 0.06), transparent 70%),
    radial-gradient(ellipse 45% 35% at 8% 92%, rgba(122, 92, 128, 0.06), transparent 70%);
}
.home .layer-over-hero {
  background:
    radial-gradient(ellipse 50% 40% at 12% 10%, rgba(122, 92, 128, 0.05), transparent 70%);
}

/* Регалии: лёгкий подъём при наведении */
.home .regalia-item {
  transition: transform var(--dur-base) var(--ease-out);
}
.home .regalia-item:hover {
  transform: translateY(-3px);
}

/* Тёмная тема: тени глубже, градиенты темнее */
@media (prefers-color-scheme: dark) {
  .home .hero-photo {
    box-shadow:
      0 45px 90px -25px rgba(0, 0, 0, 0.6),
      0 18px 35px -18px rgba(0, 0, 0, 0.4);
  }
  .home .about-photo {
    box-shadow:
      0 45px 90px -25px rgba(0, 0, 0, 0.55),
      0 18px 35px -18px rgba(0, 0, 0, 0.35);
  }
  .home .methods,
  .home .reviews {
    background:
      radial-gradient(ellipse 55% 40% at 88% 8%, rgba(125, 184, 181, 0.05), transparent 70%),
      radial-gradient(ellipse 45% 35% at 8% 92%, rgba(160, 130, 170, 0.05), transparent 70%);
  }
}

/* ============================================================
   29. CARDS — обложка метафорических карт (объёмная)
   ============================================================ */
.home .cards-section { padding-top: 0; }
.home .card-wheel {
  max-width: 560px;
  margin: 2rem auto;
  background: linear-gradient(160deg, var(--surface) 0%, var(--bg-alt) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 4rem 3rem;
  text-align: center;
  position: relative;
  box-shadow:
    0 50px 100px -35px rgba(35, 74, 72, 0.4),
    0 20px 40px -25px rgba(35, 74, 72, 0.2);
}
.home .card-back,
.home .card-front {
  width: 220px;
  height: 320px;
  box-shadow:
    0 30px 60px -20px rgba(35, 74, 72, 0.45),
    0 10px 20px -10px rgba(35, 74, 72, 0.2);
}
.home .card-back {
  background: linear-gradient(145deg, var(--primary) 0%, var(--primary-strong) 100%);
}
.home .card-front .card-title { font-size: 1.4rem; }
.home .card-front .card-txt { font-size: 1rem; }
.home .card-counter {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.home .card-limit {
  display: none;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.home .card-limit a { color: var(--accent); text-decoration: underline; }
.home .optin-note { font-size: 0.85rem; color: var(--text-secondary); }
.home .optin-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}
.home .cards-pool-info h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
}
.home .cards-pool-info ol {
  padding-left: 1.2rem;
  line-height: 1.8;
  color: var(--text-secondary);
  text-align: left;
  display: inline-block;
}
.home .cards-narrow { max-width: 760px; }
.home .cards-textarea-wrap { margin-top: 1.5rem; }
.home .cards-textarea {
  width: 100%;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  background: var(--surface);
  color: var(--text);
}
.home .cards-note { text-align: center; margin-top: 1.5rem; }
.home .booking-confirm { text-align: center; margin-top: 1.5rem; }
.home .booking-telegram-note { text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-top: 0.8rem; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Мобильная: карта и обложка компактнее */
@media (max-width: 768px) {
  .home .card-wheel { padding: 3rem 1.5rem; }
  .home .card-back,
  .home .card-front { width: 190px; height: 280px; }
}

/* Тёмная тема: карта-рулетка тёмная, текст белый (не светло-розовая) */
@media (prefers-color-scheme: dark) {
  .home .card-back {
    background: linear-gradient(145deg, #3A2E33 0%, #4A3A40 100%);
    color: #EDEAE6;
  }
  .home .card-front {
    background: #262220;
    border-color: rgba(255, 255, 255, 0.12);
    color: #EDEAE6;
  }
  .home .card-front .card-txt { color: #A8A29E; }
}
/* ============ 30. ПЕРСОНАЖ «ДУХ» (ИИ-помощник) ============ */
/* Без лица, пола, возраста. Эмоции — свет, поза, микродвижения.
   Персонаж — только рендер состояния, не источник решений. */

.character-mount {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.character-mount .duh {
  width: 100%;
  height: 100%;
  display: block;
  transform-origin: 50% 60%;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease;
}
.chat-fab .character-mount { width: 62px; height: 62px; }
.chat-fab .character-mount .duh { transform-origin: 50% 55%; }

/* Внутренние элементы — transform-box для корректных transform-origin */
.character-mount .duh-body,
.character-mount .duh-core,
.character-mount .duh-glow,
.character-mount .duh-arm {
  transform-box: fill-box;
  transform-origin: center;
}

/* --- idle: медленное дыхание --- */
.duh-idle .duh-body { animation: duh-breathe 4.5s ease-in-out infinite; }
.duh-idle .duh-core { animation: duh-core-breathe 4.5s ease-in-out infinite; }

/* --- attentive: лёгкий наклон к «экрану», свет чуть ярче --- */
.duh-attentive .duh { transform: rotate(4deg) scale(1.04); }
.duh-attentive .duh-glow { opacity: 1; }

/* --- thinking: пауза, взгляд «внутрь», ровная пульсация света --- */
.duh-thinking .duh { transform: rotate(-2deg); }
.duh-thinking .duh-core { animation: duh-think 1.3s ease-in-out infinite; }
.duh-thinking .duh-glow { animation: duh-think-glow 1.3s ease-in-out infinite; }

/* --- warm: тёплый свет, расслабленная поза --- */
.duh-warm .duh { transform: scale(1.05); }
.duh-warm .duh-core { animation: duh-warm-pulse 3s ease-in-out infinite; }

/* --- curious: лёгкий наклон головы --- */
.duh-curious .duh { transform: rotate(-6deg) scale(1.02); }

/* --- quiet_calm: спокойная, неподвижная, тёплый ровный свет --- */
.duh-quiet-calm .duh { transform: scale(1); }
.duh-quiet-calm .duh-core { animation: none; opacity: 0.9; }
.duh-quiet-calm .duh-glow { animation: none; opacity: 0.85; }

/* --- away: тихо «отступает», свет гаснет до минимума (нейтрально) --- */
.duh-away .duh { opacity: 0.35; transform: scale(0.92) translateY(4px); }
.duh-away .duh-glow { opacity: 0.15; }
.duh-away .duh-core { opacity: 0.4; }

@keyframes duh-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes duh-core-breathe {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}
@keyframes duh-think {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1.05); }
}
@keyframes duh-think-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
@keyframes duh-warm-pulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* --- reduced-motion: статичный постер-фрейм --- */
@media (prefers-reduced-motion: reduce) {
  .character-mount .duh,
  .character-mount .duh-body,
  .character-mount .duh-core,
  .character-mount .duh-glow,
  .character-mount .duh-arm {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* ============================================================
   СЕКЦИЯ 31: BOOKING (убраны inline styles)
   ============================================================ */
.booking-section { padding-top: 1rem; }
.calendar-month { font-size: 1.1rem; font-weight: 600; }
.consent-label {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.85rem; color: var(--text-secondary);
}
.consent-checkbox { margin-top: 0.2rem; }
.legal-link { color: var(--accent-strong); }
.booking-submit { justify-self: center; }
.tab-bot-panel { text-align: center; padding: 1.5rem 0; }
.bot-icon-wrap { margin-bottom: 1rem; }
.bot-icon { width: 48px; height: 48px; color: var(--primary); }
.bot-title { margin-bottom: 1rem; }
.bot-desc {
  color: var(--text-secondary); max-width: 480px; margin: 0 auto 2rem;
}
.bot-alt { margin-top: 2rem; }
.price-desc { color: var(--text-secondary); font-size: 0.9rem; }
.booking-note {
  text-align: center; color: var(--text-secondary);
  font-size: 0.85rem; margin-top: 2rem;
}

/* ============================================================
   СЕКЦИЯ 32: FAQ (двухколоночная, <details>, редакционная)
   ============================================================ */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
  gap: 4rem;
  align-items: start;
}
.faq-header { position: sticky; top: 6rem; }
.faq-header .section-subtitle {
  margin-top: 1.2rem;
  color: var(--text-secondary);
  max-width: 280px;
}
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 1.6rem 0;
}
.faq-item:first-child { padding-top: 0; }
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-size: 1.15rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  color: var(--text);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-q::after {
  content: '−';
}
.faq-a {
  margin-top: 0.8rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 560px;
}
.faq-a a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-a a:hover { color: var(--accent-strong); }

/* FAQ: мобильная */
@media (max-width: 768px) {
  .faq-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .faq-header { position: static; }
  .faq-q { font-size: 1.05rem; }
}

/* ============================================================
   СЕКЦИЯ 33: DASHBOARD (личный кабинет — карточки статусов)
   ============================================================ */
.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.dash-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dash-card:hover {
  box-shadow: 0 12px 32px -8px rgba(35, 74, 72, 0.15);
  transform: translateY(-1px);
}
.dash-card h3 {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin: 0;
}
.dash-card .dash-value {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
}
.dash-card .dash-detail {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.dash-card .dash-action {
  margin-top: auto;
  padding-top: 0.5rem;
}
.dash-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
}
.dash-status.pending {
  background: var(--accent-soft, rgba(196,149,106,0.12));
  color: var(--accent);
}
.dash-status.done {
  background: rgba(94,155,152,0.12);
  color: var(--secondary);
}
.dash-status.empty {
  background: var(--bg-secondary, #f5f5f0);
  color: var(--text-secondary);
}
.dash-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.dash-metric {
  text-align: center;
}
.dash-metric .metric-value {
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
}
.dash-metric .metric-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.3rem;
}

/* Dashboard: мобильная */
@media (max-width: 768px) {
  .cabinet-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .dash-summary {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
  .dash-card { padding: 1.5rem; }
}

/* ============================================================
   СЕКЦИЯ 34: METRICS (цифры доверия, count-up на GSAP)
   ============================================================ */
.metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  padding: 4rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.metric-block {
  text-align: left;
}
.metric-num {
  font-family: var(--font-display, 'Space Grotesk', sans-serif);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}
.metric-label {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Metrics: мобильная */
@media (max-width: 768px) {
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 3rem 0;
  }
}