/* =========================================
   БАЗА
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d7b36a;
  --white: #ffffff;
  --black: #111;
  --dark-blue: #0A1F44;
  --bg-blur: rgba(15, 15, 15, 0.55);
  --orange-btn: #FF5500;
  --transition: 0.25s ease;
}

body {
  font-family: "Manrope", sans-serif; /* Используем Manrope, как в HTML */
  background: #ffffff;
  color: #222;
  overflow-x: hidden;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* =========================================
   HEADER (Меню)
========================================= */
.header {
  width: 100%;
  position: fixed;
  top: 0; left: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.95); /* Светлый полупрозрачный */
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 80px;
}

.header-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { width: 16px; height: 16px; background: var(--gold); border-radius: 2px; }
.logo-text { font-weight: 800; font-size: 22px; color: var(--dark-blue); text-transform: uppercase; }

.header-actions { display: flex; align-items: center; gap: 24px; }
.header-phone { font-size: 18px; font-weight: 700; color: var(--dark-blue); text-decoration: none; }
.header-phone:hover { color: var(--gold); }

.header-btn {
  background: var(--gold); color: var(--dark-blue);
  padding: 12px 24px; border-radius: 6px; font-weight: 700;
  font-size: 14px; text-decoration: none; text-transform: uppercase;
  transition: all 0.25s ease;
}
.header-btn:hover { background: #e6c47e; transform: translateY(-2px); }

.header-burger { display: none; flex-direction: column; gap: 5px; border: none; background: none; cursor: pointer; padding: 5px; }
.header-burger span { width: 26px; height: 3px; background: var(--dark-blue); border-radius: 2px; }

/* Mobile Menu */
.mobile-menu {
  position: absolute; top: 80px; left: 0; width: 100%;
  background: #FFFFFF; padding: 30px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: none; flex-direction: column; gap: 20px; text-align: center;
}
.mobile-menu.active { display: flex; }
.mobile-phone { font-size: 22px; font-weight: 800; color: var(--dark-blue); text-decoration: none; }
.mobile-cta-btn { width: 100%; text-align: center; background: var(--gold); color: var(--dark-blue); padding: 14px; border-radius: 8px; font-weight: 700; text-decoration: none; }

@media (max-width: 992px) {
  .header-phone, .header-btn { display: none; }
  .header-burger { display: flex; }
}

/* =========================================
   HERO SECTION (APPLE STYLE / IOS DARK)
========================================= */
/* =========================================
   HERO SECTION (СВЕТЛОЕ СТЕКЛО / LIGHT THEME)
========================================= */
.hero-new {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 20px 100px;
  overflow: hidden;
  /* Цвет текста меняем на темный, так как фон будет светлым */
  color: #0A1F44; 
}

/* --- 1. ВИДЕО ФОН --- */
.hero-bg-wrapper {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0;
}
.hero-bg-video {
  width: 100%; height: 100%; object-fit: cover;
}
.hero-bg-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  /* Светлое наложение поверх видео, чтобы оно не было слишком темным */
  background: rgba(255, 255, 255, 0.1); 
  z-index: 1;
}

/* --- 2. КОНТЕЙНЕР (СВЕТЛОЕ СТЕКЛО) --- */
/* --- 2. КОНТЕЙНЕР (СВЕТЛОЕ СТЕКЛО — УЗКИЙ ВАРИАНТ) --- */
.hero-centered-content {
  position: relative; z-index: 2;
  
  /* Сделали уже (было 850px), чтобы блок стал выше */
  max-width: 580px; 
  
  margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  
  /* Эффект СВЕТЛОГО стекла */
  background: rgba(255, 255, 255, 0.85); /* 85% белого */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Границы и тени */
  border: 1px solid #ffffff;
  border-radius: 32px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  
  padding: 50px 40px;
}

/* --- 3. ТИПОГРАФИКА (ТЕМНАЯ) --- */
/* --- АНИМАЦИЯ ПЛАВАНИЯ --- */
@keyframes floatingTag {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-6px); } /* Плавный подъем вверх */
  100% { transform: translateY(0px); }
}

/* --- СТИЛЬ ТЕГА (ОБНОВЛЕННЫЙ) --- */
.hero-tag {
  background: #000000;
  color: #ffffff;
  
  /* Сделал чуть крупнее */
  padding: 8px 20px; 
  font-size: 12px; 
  
  font-weight: 700; 
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  margin-bottom: 24px;
  
  /* Важно для анимации */
  display: inline-block; 
  box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Легкая тень для объема */
  
  /* Подключаем анимацию (3 секунды, бесконечно) */
  animation: floatingTag 3.5s ease-in-out infinite;
}

.hero-h1 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1.15;
  font-weight: 800;
  margin-bottom: 20px;
  color: #0A1F44; /* Темно-синий */
  text-shadow: none;
}

.hero-desc {
  font-size: 17px; line-height: 1.6;
  color: #3C4A60; /* Темно-серый */
  max-width: 650px; margin: 0 auto 35px;
  border-top: 2px solid #d7b36a;
  padding-top: 25px;
}

/* --- 4. СПИСОК (БУЛЛИТЫ В ОДНУ КОЛОНКУ) --- */
.centered-bullets {
  /* Включаем сетку в 1 колонку */
  display: grid;
  grid-template-columns: 1fr; 
  gap: 12px; /* Отступ между пунктами */
  
  width: 100%;
  margin: 0 auto 40px; 
  padding: 0;
  list-style: none;
}

.centered-bullets li {
  display: flex; align-items: center; 
  justify-content: flex-start; /* Выравнивание влево */
  gap: 15px;
  
  color: #0A1F44; 
  font-size: 15px; font-weight: 500;
  text-align: left;
  
  background: #ffffff;
  padding: 14px 20px; 
  border-radius: 16px; /* Аккуратные плашки */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.03);
}

/* ХАК: Инвертируем белые иконки в черные */
.centered-bullets img { 
  width: 24px; 
  flex-shrink: 0;
  filter: invert(1) brightness(0.2); 
}

.centered-bullets strong { color: #d7b36a; font-weight: 700; }








/* --- 5. ВНУТРЕННЯЯ КАРТОЧКА --- */
.premium-cta-block {
  background: #ffffff;
  padding: 30px;
  border-radius: 24px;
  width: 100%;
  max-width: 500px;
  /* Золотая рамка и тень */
  border: 2px solid #d7b36a;
  box-shadow: 0 15px 40px rgba(215, 179, 106, 0.15);
  margin-top: 10px;
}

.cta-value-list {
  display: flex; justify-content: center; gap: 12px; margin-bottom: 15px;
  font-size: 10px; font-weight: 800; color: #0A1F44; text-transform: uppercase;
}

.cta-label {
  font-size: 15px; color: #0A1F44; font-weight: 700; margin-bottom: 20px; line-height: 1.4;
}

/* Кнопка */
.premium-cta-block .hero-btn {
  background: #FF5500 !important;
  color: #fff !important;
  font-weight: 800; text-transform: uppercase; font-size: 16px;
  width: 100%; padding: 16px; border-radius: 12px;
  display: block; text-decoration: none;
  box-shadow: 0 10px 25px rgba(255, 85, 0, 0.35);
  transition: 0.25s;
}
.premium-cta-block .hero-btn:hover {
  background: #ff6a1f !important;
  transform: translateY(-2px);
}

.cta-micro {
  font-size: 11px; color: #8896ab; margin-top: 12px;
}

/* --- 6. МОБИЛЬНАЯ АДАПТАЦИЯ (Светлая тема) --- */
@media (max-width: 768px) {
  .hero-new {
    padding: 100px 15px 60px !important;
    min-height: auto !important;
    height: auto !important;
    align-items: flex-start !important;
  }
  .hero-centered-content {
    background: rgba(255, 255, 255, 0.95); /* На мобильном почти непрозрачный белый */
    padding: 30px 15px !important;
    border-radius: 20px !important;
    margin: 0 !important;
    width: 100% !important;
  }
  .hero-h1 { font-size: 24px !important; margin-bottom: 15px; }
  .centered-bullets { flex-direction: column; width: 100%; gap: 8px; }
  .centered-bullets li { width: 100%; justify-content: center; }
  .premium-cta-block { padding: 25px 15px !important; border-radius: 16px; }
}
/* =========================================
   МОБИЛЬНАЯ АДАПТАЦИЯ v2 (ШИРОКИЙ БЛОК + КОМПАКТНЫЙ ТЕКСТ)
   Вставить в самый низ файла style.css
========================================= */
@media (max-width: 600px) {
  
  /* 1. Секция Hero: Минимальные отступы по краям */
  .hero-new {
    padding: 100px 10px 40px !important; /* Сверху 100, по бокам всего 10px */
    height: auto !important;
    min-height: auto !important;
    align-items: flex-start !important;
  }

  /* 2. Темный стеклянный блок: На всю ширину */
  .hero-centered-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 30px 15px !important; /* Внутри тоже компактно */
    border-radius: 20px !important;
    margin: 0 !important;
  }

  /* 3. ТЕКСТ: Делаем компактнее */
  .hero-tag {
    font-size: 10px !important;
    padding: 4px 10px !important;
    margin-bottom: 15px !important; /* Меньше отступ снизу */
  }

  .hero-h1 {
    font-size: 24px !important; /* Шрифт меньше */
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
  }

  .hero-desc {
    font-size: 14px !important; /* Шрифт описания меньше */
    line-height: 1.45 !important;
    padding-top: 15px !important;
    margin-bottom: 20px !important;
    border-top-width: 1px !important;
  }

  /* 4. СПИСОК (Галочки): Компактнее */
  .centered-bullets {
    gap: 8px !important; /* Меньше расстояние между пунктами */
    margin-bottom: 25px !important;
    width: 100% !important;
  }

  .centered-bullets li {
    padding: 8px 12px !important; /* Тоньше плашки */
    font-size: 13px !important; /* Текст мельче */
    width: 100% !important;
    justify-content: flex-start !important; /* Выравнивание влево, чтобы влезало больше текста */
    text-align: left !important;
  }
  
  .centered-bullets li span {
      flex: 1; /* Чтобы текст занимал все место */
  }







  /* 5. БЕЛАЯ КАРТОЧКА ОФФЕРА */
  .premium-cta-block {
    padding: 20px 15px !important; /* Максимально компактно */
    margin-top: 5px !important;
    border-radius: 16px !important;
  }

  .cta-value-list {
    margin-bottom: 12px !important;
    font-size: 9px !important; /* Иконки поменьше */
    gap: 8px !important;
  }

  .cta-label {
    font-size: 13px !important;
    margin-bottom: 12px !important;
    line-height: 1.35 !important;
  }

  /* Кнопка */
  .premium-cta-block .hero-btn {
    padding: 14px 10px !important;
    font-size: 13px !important;
  }
  
  .cta-micro {
      font-size: 10px !important;
      margin-top: 10px !important;
  }
}

/* =========================================
   HEADER ВЕРХНЕЕ меню
========================================= */
.header {
  width: 100%;
  position: fixed; /* Sticky эффект */
  top: 0;
  left: 0;
  z-index: 100;
  background: #FFFFFF; /* Белый фон (по ТЗ) */
  box-shadow: 0 4px 20px rgba(0,0,0,0.05); /* Легкая дорогая тень */
  transition: 0.3s;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px; /* Чуть выше, чтобы дышало */
}

/* ЛОГОТИП */
.header-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.logo-mark {
  width: 16px;
  height: 16px;
  background: #d7b36a; /* Золотой квадрат */
  border-radius: 2px;
}

.logo-text {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #0A1F44; /* Темно-синий/Черный (по ТЗ) */
  letter-spacing: -0.5px;
  text-transform: uppercase;
}

/* ПРАВАЯ ЧАСТЬ (Группа элементов) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* ТЕЛЕФОН (Desktop) */
.header-phone {
  font-size: 18px;
  font-weight: 700;
  color: #0A1F44;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.header-phone:hover {
  color: #d7b36a;
}

/* КНОПКА (CTA) - Залитая золотая */
.header-btn {
  background: #d7b36a;
  color: #0A1F44; /* Темный текст для контраста */
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(215, 179, 106, 0.3);
}

.header-btn:hover {
  background: #e6c47e;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(215, 179, 106, 0.4);
}

/* БУРГЕР (Темный на белом фоне) */
.header-burger {
  display: none; /* Скрыт на ПК */
  flex-direction: column;
  gap: 5px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 5px;
}

.header-burger span {
  width: 26px;
  height: 3px;
  background: #0A1F44; /* Темные полоски */
  border-radius: 2px;
  transition: 0.3s;
}

/* МОБИЛЬНОЕ МЕНЮ (Светлое) */
.mobile-menu {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  background: #FFFFFF;
  padding: 30px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  display: none; /* JS переключит на flex */
  flex-direction: column;
  gap: 20px;
  text-align: center;
  border-top: 1px solid rgba(0,0,0,0.05);
}

.mobile-menu.active {
  display: flex;
}

/* Телефон в мобильном меню */
.mobile-phone {
  font-size: 22px;
  font-weight: 800;
  color: #0A1F44;
  text-decoration: none;
  margin-bottom: 10px;
}

.mobile-cta-btn {
  width: 100%;
  text-align: center;
  background: #d7b36a;
  color: #0A1F44;
}


/* АДАПТИВ */
@media (max-width: 768px) {
  /* Скрываем телефон и кнопку на мобильном хедере (места мало) */
  .header-phone,
  .header-btn {
    display: none;
  }

  /* Показываем бургер */
  .header-burger {
    display: flex;
  }
}




/* ================================
   3 ФАКТА РЫНКА
================================ */

.facts {
  background: #F7F3EC; /* белая кость */
  padding: 110px 0;
}

.facts-header {
  text-align: center;
  margin-bottom: 60px;
}

.facts-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 4vw, 42px);
  color: #111;
  margin-bottom: 10px;
  font-weight: 700;
}

.facts-accent {
  font-style: italic;
  color: #C7A058;
}

.facts-subtitle {
  color: #555;
  font-size: 15px;
}

/* GRID */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  .facts-grid {
    grid-template-columns: 1fr;
  }
}

/* CARD */
.fact-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 38px 32px;
  position: relative;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.fact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.12);
}

/* ICON */
.fact-icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #111;
  border-radius: 12px;
  margin-bottom: 22px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.24);
}

.fact-icon img {
  width: 28px;
  filter: invert(75%) sepia(30%) saturate(450%) hue-rotate(12deg); /* золото */
}

/* TEXT IN CARD */
.fact-name {
  font-family: "Playfair Display", serif;
  font-size: 22px;
  font-weight: 700;
  color: #111;
  margin-bottom: 12px;
}

.fact-desc {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 300px;
}

/* LINE */
.fact-line {
  height: 1px;
  width: 100%;
  background: rgba(0,0,0,0.08);
  margin: 20px 0;
}

/* META */
.fact-meta-label {
  font-size: 12px;
  color: #999;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.fact-meta-value {
  font-size: 26px;
  font-weight: 700;
  color: #111;
  font-family: "Playfair Display", serif;
}


.animate-icon {
  animation: pop-icon 0.6s ease forwards;
}

@keyframes pop-icon {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}







/* =========================================================
   БЛОК БОЛЕЙ — современный премиальный стиль
========================================================= */

.pain-modern {
  background: #F5F5F7; /* Тот же светло-серый, что и Hero, для единства */
  padding: 100px 0;
}

.pain-modern-header {
  text-align: center;
  margin-bottom: 50px;
}

.pain-modern-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #0A1F44; /* Темно-синий */
  margin-bottom: 12px;
}

/* Красный акцент в заголовке */
.alert-accent {
  color: #D32F2F; /* Строгий красный цвет */
  text-decoration: underline;
  text-decoration-color: rgba(211, 47, 47, 0.3);
  text-underline-offset: 4px;
}

.pain-modern-subtitle {
  font-size: 16px;
  color: #55657e;
  max-width: 600px;
  margin: 0 auto;
}

/* GRID КАРТОЧЕК */
.pain-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Адаптивная сетка */
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto 50px;
}

/* КАРТОЧКА РИСКА */
.pain-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 28px;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05); /* Еле заметная рамка */
  /* Левая граница - индикатор риска */
  border-left: 4px solid #FF5252; 
  transition: all 0.3s ease;
}

/* Эффект наведения: "Опасность приближается" */
.pain-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(211, 47, 47, 0.12); /* Красноватая тень */
  border-color: rgba(255, 82, 82, 0.3);
}

/* ИКОНКА (Треугольник) */
.pain-card-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: #FF5252; /* Цвет иконки */
  margin-top: 2px;
}

.pain-card-icon svg {
  width: 100%;
  height: 100%;
}

/* ТЕКСТ ВНУТРИ */
.pain-card-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0A1F44;
  margin-bottom: 8px;
  font-family: "Manrope", sans-serif;
}

.pain-card-content p {
  font-size: 15px;
  line-height: 1.55;
  color: #3C4A60;
  margin: 0;
}

.pain-card-content strong {
  color: #D32F2F; /* Выделяем "Итог" красным */
  font-weight: 700;
}

/* КНОПКА (Центровка) */
.pain-modern-cta {
  text-align: center;
  margin-top: 10px;
}

/* Мобильный адаптив */
@media (max-width: 480px) {
  .pain-modern {
    padding: 60px 0;
  }
  .pain-card {
    padding: 20px;
  }
  .pain-card-content h3 {
    font-size: 17px;
  }
}


/* =========================================================
   BLOCK 6 — STEPS / TIMELINE (LIGHT)
========================================================= */
/* =========================================
   ROADMAP SECTION (INTERACTIVE)
========================================= */

.roadmap-section {
  background: #F5F5F7; /* Светло-серый фон */
  padding: 120px 0;
}

.roadmap-header {
  text-align: center;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.roadmap-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #0A1F44;
  margin-bottom: 12px;
}

.roadmap-subtitle {
  font-size: 16px;
  color: #55657e;
}

/* --- ПЕРЕКЛЮЧАТЕЛЬ (TABS) --- */
.roadmap-controls {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 50px;
  flex-wrap: wrap;
}

.roadmap-tab {
  background: #E0E4E9;
  border: none;
  padding: 14px 28px;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 700;
  color: #55657e;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Manrope", sans-serif;
}

.roadmap-tab:hover {
  background: #dce1e8;
  color: #0A1F44;
}

.roadmap-tab.active {
  background: #0A1F44; /* Активный таб темный */
  color: #fff;
  box-shadow: 0 8px 20px rgba(10, 31, 68, 0.2);
}

/* --- КОНТЕНТ (СКРЫТ/ОТКРЫТ) --- */
.roadmap-content {
  display: none; /* Скрыто по умолчанию */
  animation: fadeIn 0.5s ease;
  max-width: 800px;
  margin: 0 auto;
}

.roadmap-content.active {
  display: block; /* Показываем активный */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Сводка (Срок и Название) */
.roadmap-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 40px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.03);
  flex-wrap: wrap;
  gap: 15px;
}

.summary-label {
  font-size: 18px;
  font-weight: 800;
  color: #0A1F44;
}

.summary-time {
  font-size: 16px;
  font-weight: 700;
  color: #d7b36a; /* Золотой акцент */
  background: rgba(215, 179, 106, 0.1);
  padding: 6px 12px;
  border-radius: 6px;
}

/* --- ТАЙМЛАЙН (ВЕРТИКАЛЬНЫЙ) --- */
.timeline {
  position: relative;
  padding-left: 30px;
}

/* Вертикальная линия */
.timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 20px;
  width: 2px;
  background: #E0E4E9;
}

.timeline-item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 20px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* Точки на линии */
.timeline-marker {
  position: absolute;
  left: -28px;
  top: 5px;
  width: 16px;
  height: 16px;
  background: #fff;
  border: 3px solid #d7b36a;
  border-radius: 50%;
  z-index: 2;
}

/* Иконка для финиша */
.timeline-marker.icon {
  width: 30px;
  height: 30px;
  left: -35px;
  top: 0;
  border: none;
  background: none;
  font-size: 24px;
}

.timeline-date {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: #8896ab;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.timeline-info h3 {
  font-size: 18px;
  font-weight: 700;
  color: #0A1F44;
  margin-bottom: 6px;
  font-family: "Manrope", sans-serif;
}

.timeline-info p {
  font-size: 15px;
  color: #3C4A60;
  line-height: 1.5;
  margin: 0;
}

/* --- REALITY CHECK --- */
.reality-check {
  margin-top: 60px;
  background: #fff;
  border-left: 4px solid #F59E0B; /* Оранжевый alert */
  padding: 25px;
  border-radius: 8px;
  display: flex;
  gap: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.reality-icon {
  font-size: 24px;
}

.reality-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #0A1F44;
  margin-bottom: 8px;
}

.reality-content p {
  font-size: 14px;
  color: #55657e;
  line-height: 1.5;
  margin: 0;
}

/* Адаптив */
@media (max-width: 600px) {
  .roadmap-summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .reality-check {
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================================================
   БЛОК 7 — СРАВНЕНИЕ "САМОСТОЯТЕЛЬНО" vs "С НАМИ"
========================================================= */

.value-section {
  background: #FFFFFF;
  padding: 120px 0;
}

.value-header {
  text-align: center;
  margin-bottom: 50px;
}

.value-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  color: #111;
}

/* ---------- Сетка двух колонок ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  max-width: 960px;
  margin: 0 auto 32px;
}

/* ---------- Карточки ---------- */
.value-card {
  background: #F8F6F2;
  border-radius: 18px;
  padding: 24px 26px 28px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
}

.value-card-left {
  border-top: 3px solid #E36A5A; /* красный акцент */
}

.value-card-right {
  border-top: 3px solid #3BAA6C; /* зелёный акцент */
}

/* ---------- Лейблы над списком ---------- */
.value-label {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
}

.value-label-bad {
  background: rgba(227,106,90,0.08);
  color: #C1453A;
}

.value-label-good {
  background: rgba(59,170,108,0.08);
  color: #2E8B57;
}

/* ---------- Списки ---------- */
.value-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.value-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

/* Иконки */
.value-icon-bad,
.value-icon-good {
  font-size: 18px;
  line-height: 1;
  margin-top: 2px;
}

.value-icon-bad {
  color: #D9534F;
}

.value-icon-good {
  color: #3BAA6C;
}

/* ---------- Подзаголовок под блоком ---------- */
.value-note {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  font-style: italic;
}

/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}
/* Акцентная плашка под блоком сравнения */
.highlight-note {
  max-width: 740px;
  margin: 50px auto 0;
  text-align: center;
  font-size: 18px;
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #2b2b2b;
  line-height: 1.6;
  padding: 26px 18px 12px;
  position: relative;
}

/* Золотая тонкая линия сверху */
.highlight-note::before {
  content: "";
  width: 120px;
  height: 3px;
  background: #C7A058;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Лёгкая тень для глубины */
.highlight-note {
  box-shadow: 0 14px 28px rgba(0,0,0,0.06);
  background: #ffffff;
  border-radius: 14px;
}
/* =========================================================
   БЛОК 8 — ДЛЯ КОГО ЭТОТ ФОРМАТ
========================================================= */

.audience {
  background: #F8F6F2;
  padding: 140px 0;
}

.audience-header {
  text-align: center;
  margin-bottom: 50px;
}

.audience-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  color: #111;
}

/* ---------- GRID ---------- */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
  max-width: 900px;
  margin: 0 auto 60px;
}

/* ---------- Карточки ---------- */
.audience-item {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px 24px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 10px 26px rgba(0,0,0,0.04);
}

.audience-icon {
  font-size: 26px;
  margin-top: 2px;
}

.audience-item p {
  font-size: 16px;
  color: #333;
  line-height: 1.55;
  margin: 0;
}

/* ---------- Микро-тест ---------- */
.audience-check {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.6;
}

.check-wrong {
  color: #B9473F;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 500;
}

.check-right {
  color: #2E7D4F;
  font-size: 18px;
  font-weight: 600;
}

/* ---------- Адаптив ---------- */
@media (max-width: 600px) {
  .audience-item {
    flex-direction: row;
    align-items: flex-start;
  }
}
/* Акцентная плашка блока "для кого" */
.highlight-check {
  max-width: 780px;
  margin: 60px auto 0;
  padding: 32px 28px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
  position: relative;
  text-align: center;
}

/* Верхняя золотая линия */
.highlight-check::before {
  content: "";
  width: 120px;
  height: 3px;
  background: #C7A058;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* Разделитель между красным и зелёным текстом */
.check-divider {
  width: 80%;
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 18px auto;
  border-radius: 1px;
}

/* Негативный тезис */
.check-wrong {
  color: #B9473F;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.55;
}

/* Позитивный тезис */
.check-right {
  color: #2E7D4F;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
}
/* =========================================================
   BLOCK 9 — DEVELOPERS (ЛОГОТИПЫ + ДОГОВОРЁННОСТИ)
========================================================= */

.developers {
  background: #ffffff;
  padding: 140px 0;
}

.developers-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 50px;
}

.developers-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
}

.developers-subtitle {
  font-size: 17px;
  color: #444;
  line-height: 1.6;
}

/* ---------- Текстовый блок ---------- */
.developers-text {
  max-width: 750px;
  margin: 0 auto 40px;
  color: #333;
  line-height: 1.65;
  font-size: 16px;
  text-align: center;
}

.developers-points {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.developers-points li {
  margin-bottom: 8px;
}

/* ---------- Пули преимуществ ---------- */
.developers-benefits {
  max-width: 850px;
  margin: 0 auto 60px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.benefit-item {
  background: #F8F6F2;
  padding: 18px 22px;
  border-radius: 16px;
  font-size: 15px;
  color: #333;
  border: 1px solid rgba(0,0,0,0.06);
}

/* ---------- Логотипы ---------- */
.developers-logos {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 32px;
  align-items: center;
  justify-items: center;
}

.dev-logo img {
  max-width: 140px;
  opacity: 0.85;
  filter: grayscale(40%);
  transition: opacity 0.25s ease, filter 0.25s ease;
}

.dev-logo img:hover {
  opacity: 1;
  filter: grayscale(0%);
}
/* =========================================================
   BLOCK 10 — FORMATS (RE-DESIGNED CLEAN)
========================================================= */

.formats {
  background: #F5F5F7; /* Единый фон с Hero */
  padding: 120px 0;
}

.formats-header {
  text-align: center;
  margin-bottom: 70px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.formats-title {
  font-family: "Manrope", sans-serif; /* Чистый шрифт без засечек */
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #0A1F44;
  line-height: 1.2;
}

/* ---------- GRID ---------- */
.formats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 60px;
  align-items: stretch; /* Карточки одной высоты */
}

/* ---------- КАРТОЧКА БАЗОВАЯ ---------- */
.format-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px 30px; /* Больше воздуха внутри */
  border: 1px solid rgba(0,0,0,0.04);
  box-shadow: 0 10px 30px rgba(0,0,0,0.02); /* Очень мягкая тень */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
  position: relative;
}

.format-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* ---------- ВЫДЕЛЕННАЯ КАРТОЧКА (ЦЕНТР) ---------- */
.format-highlight {
  border: 2px solid #d7b36a; /* Золотая рамка */
  box-shadow: 0 20px 60px rgba(215, 179, 106, 0.15);
  transform: scale(1.03); /* Чуть больше остальных */
  z-index: 2;
}

.format-highlight:hover {
  transform: scale(1.03) translateY(-5px);
}

/* Бейдж "Хит" (Красивая плашка) */
.hit-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: #d7b36a;
  color: #0A1F44;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 50px;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(215, 179, 106, 0.4);
  white-space: nowrap;
}

/* ---------- ВНУТРЕННОСТИ ---------- */

/* Тег (Риск/Прирост) */
.format-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #55657e;
  background: #F0F2F5;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 24px;
  align-self: flex-start;
}

/* Золотой тег для центральной карты */
.format-highlight .format-tag {
  background: rgba(215, 179, 106, 0.1);
  color: #9e7b3a;
}

/* Заголовок карточки */
.format-name {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0A1F44;
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Подзаголовок (Для кого) */
.format-sub {
  font-size: 14px;
  color: #8896ab;
  font-weight: 500;
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  width: 100%;
}

/* Текст описания */
.format-text {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  line-height: 1.7; /* Увеличили межстрочный интервал для читаемости */
  color: #3C4A60;
  flex-grow: 1; 
}

/* Выделение результата */
.format-text strong {
  display: block;
  margin-top: 16px;
  color: #0A1F44;
  font-weight: 700;
  background: rgba(10, 31, 68, 0.04);
  padding: 10px;
  border-radius: 6px;
}

/* ---------- НИЖНИЙ CTA БЛОК (ЦЕНТРИРОВАНИЕ) ---------- */
.formats-cta-box {
  margin-top: 60px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Центрирует всё по горизонтали */
  text-align: center;  /* Центрирует текст */
  gap: 24px;
}

.formats-cta-text {
  font-family: "Manrope", sans-serif;
  font-size: 18px;
  color: #0A1F44;
  font-weight: 600;
}

/* АДАПТИВ */
@media (max-width: 992px) {
  .formats-grid {
    grid-template-columns: 1fr; /* Одна колонка */
    gap: 40px;
    max-width: 500px;
  }
  
  .format-highlight {
    transform: none; 
    order: -1; /* Хит первый */
    margin: 20px 0;
  }
  
  .format-highlight:hover {
    transform: translateY(-5px);
  }
}
/* =========================================================
   БЛОК: О НАС / МЕНЕДЖЕР
========================================================= */
/* =========================================
   EXPERT BLOCK (FORBES STYLE)
   Цвета: Фон Белый, Текст #0A1F44, Акцент #d7b36a
========================================= */

.expert-section {
  background-color: #FFFFFF;
  padding: 100px 0;
  overflow: hidden; /* Чтобы декоративные элементы не вылезали */
}

/* Сетка (Split Screen) */
.expert-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* Фото чуть уже, текст шире */
  gap: 60px;
  align-items: center;
}

/* --- ЛЕВАЯ ЧАСТЬ (ФОТО) --- */
.expert-visual {
  position: relative;
  height: 100%;
  min-height: 500px; /* Высота фото */
  display: flex;
  align-items: flex-end; /* Фото прижато к низу контейнера */
  justify-content: center;
}

/* Декоративный элемент за спиной (Серый круг/квадрат) */
.expert-bg-shape {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 80%;
  background-color: #F5F5F7; /* Светло-серый фон под фото */
  border-radius: 20px 20px 0 0; /* Скругление сверху */
  z-index: 0;
}

.expert-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain; /* Если PNG без фона */
  /* object-fit: cover; — Если прямоугольное фото с фоном, тогда убери border-radius у .expert-bg-shape */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.15)); /* Тень для объема */
}

/* --- ПРАВАЯ ЧАСТЬ (ТЕКСТ) --- */
.expert-content {
  padding-right: 20px;
}

/* Заголовок H2 */
.expert-title {
  font-family: "Manrope", sans-serif; /* Или Playfair Display для засечек */
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 800;
  color: #0A1F44;
  margin-bottom: 30px;
}

/* Блок Имя + Статус */
.expert-profile {
  margin-bottom: 30px;
  padding-left: 20px;
  border-left: 4px solid #d7b36a; /* Золотая линия */
}

.expert-name {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  font-weight: 700;
  color: #d7b36a; /* Золотое имя */
  margin-bottom: 4px;
}

.expert-role {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: #55657e;
}

/* БИО Текст */
.expert-bio {
  margin-bottom: 40px;
}

.bio-intro {
  font-size: 18px;
  line-height: 1.6;
  color: #0A1F44;
  font-weight: 500;
  margin-bottom: 24px;
}

.bio-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bio-list li {
  display: flex;
  gap: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: #2b3b55;
  align-items: flex-start;
}

.bio-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.bio-list strong {
  color: #0A1F44;
  font-weight: 700;
}

/* Кнопка CTA */
.expert-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.cta-note {
  font-size: 13px;
  color: #8896ab;
}
/* =========================================
   GLOBAL PREMIUM BUTTON (ФИКС ДЛЯ ВСЕХ БЛОКОВ)
========================================= */

.btn-premium {
  display: inline-block !important; /* Принудительно показываем */
  background: #d7b36a !important; /* Золотой цвет */
  color: #0A1F44 !important;      /* Темный текст */
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  padding: 18px 32px;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(215, 179, 106, 0.3);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.5px;
}

/* Эффект наведения */
.btn-premium:hover {
  background: #e6c47e !important;
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(215, 179, 106, 0.45);
}

/* Анимация Блика (Sheen) */
.btn-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 80px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: shineGlobal 4s infinite;
}

@keyframes shineGlobal {
  0% { left: -150%; }
  20% { left: 150%; }
  100% { left: 150%; }
}

/* Выравнивание кнопки в блоке "Риски" */
.pain-modern-cta {
  margin-top: 40px;
  text-align: center;
}

/* Выравнивание кнопки в блоке "Эксперт" */
.expert-cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Слева для десктопа */
  gap: 12px;
}

.cta-note {
  font-size: 13px;
  color: #8896ab;
  font-weight: 500;
}

/* Адаптив для кнопок */
@media (max-width: 768px) {
  .btn-premium {
    width: 100%; /* На мобилках во всю ширину */
    padding: 16px;
  }
  
  .expert-cta {
    align-items: center; /* Центруем на мобилках */
    text-align: center;
  }
}



/* --- АДАПТИВ (MOBILE) --- */
@media (max-width: 992px) {
  .expert-grid {
    grid-template-columns: 1fr; /* Одна колонка */
    gap: 40px;
  }

  .expert-visual {
    order: -1; /* Фото первое */
    min-height: auto;
    height: auto;
    justify-content: center;
  }

  .expert-bg-shape {
    width: 80%;
    height: 90%;
    border-radius: 50%; /* Круглый фон на мобилке выглядит аккуратнее */
  }

  .expert-photo {
    max-height: 400px;
  }

  .expert-content {
    padding-right: 0;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .expert-title {
    font-size: 26px;
  }
  
  .btn-premium {
    width: 100%; /* Кнопка на всю ширину */
    padding: 16px;
    font-size: 14px;
    text-align: center;
  }
  
  .expert-cta {
    align-items: center; /* Центруем кнопку и подпись */
  }
}
/* =========================================
   АНИМАЦИЯ ДЛЯ КНОПКИ .hero-btn
   (Вставить в конец style.css)
========================================= */

/* 1. Базовая подготовка кнопки */
.hero-btn {
  position: relative; /* Чтобы блик был внутри */
  overflow: hidden;   /* Обрезаем всё, что вылезает за края */
  z-index: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 2. Сам блик (светлая полоса) */
.hero-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Начинаем слева за кадром */
  width: 80px; /* Ширина луча */
  height: 100%;
  
  /* Градиент: прозрачный -> белый -> прозрачный */
  background: linear-gradient(
    90deg, 
    transparent, 
    rgba(255, 255, 255, 0.5), 
    transparent
  );
  
  transform: skewX(-25deg); /* Наклон */
  animation: shineRun 4s infinite; /* Бегает каждые 4 секунды */
  z-index: -1; /* Под текстом */
}

/* 3. Движение блика */
@keyframes shineRun {
  0% { left: -150%; }
  20% { left: 150%; } /* Быстро пролетает */
  100% { left: 150%; } /* Ждет до конца цикла */
}

/* 4. Эффект нажатия/наведения */
.hero-btn:hover {
  transform: translateY(-3px); /* Чуть всплывает */
  box-shadow: 0 12px 30px rgba(215, 179, 106, 0.4); /* Золотая тень */
}


/* =========================================================
   БЛОК 11.1 — ЧЕСТНОСТЬ ВМЕСТО ВЫДУМАННЫХ КЕЙСОВ
========================================================= */

.honesty {
  background: #FFFFFF;
  padding: 140px 0;
}

.honesty-header {
  text-align: center;
  margin-bottom: 40px;
}

.honesty-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 700;
  color: #111;
}

/* Карточка с текстом */
.honesty-card {
  max-width: 820px;
  margin: 0 auto;
  background: #F8F6F2;
  border-radius: 20px;
  padding: 32px 32px 34px;
  box-shadow: 0 14px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
  position: relative;
}

/* Тонкая золотая линия сверху — акцент на честность */
.honesty-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 130px;
  height: 3px;
  border-radius: 3px;
  background: #C7A058;
}

.honesty-text {
  font-size: 16px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 14px;
}

/* Список того, что уже есть */
.honesty-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 22px;
}

.honesty-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 15px;
  color: #333;
  line-height: 1.6;
}

.honesty-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 18px;
  color: #C7A058;
}

/* Финальная фраза-хук */
.honesty-accent {
  font-family: "Playfair Display", serif;
  font-size: 18px;
  line-height: 1.6;
  color: #111;
  font-style: italic;
}
/* =========================================================
   MINI FAQ
========================================================= */

.mini-faq {
  background: #FFFFFF;
  padding: 100px 0 60px;
}

.faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.faq-subtitle {
  font-family: "Playfair Display", serif;
  font-size: clamp(22px, 2.5vw, 32px);
  color: #111;
  font-weight: 700;
}

.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.faq-item {
  background: #F8F6F2;
  border-radius: 16px;
  padding: 24px 28px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.faq-question {
  font-size: 17px;
  font-weight: 600;
  color: #111;
  margin-bottom: 6px;
}

.faq-answer {
  font-size: 15px;
  color: #444;
  line-height: 1.65;
}



/* =========================================================
   FOOTER — ПРЕМИАЛЬНЫЙ СВЕТЛЫЙ
========================================================= */

.site-footer {
  background: #F8F6F2;
  padding: 100px 0 60px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px;
  margin-bottom: 50px;
}

.footer-col {
  max-width: 420px;
}

.footer-logo {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  margin-bottom: 16px;
  color: #111;
}

.footer-text {
  font-size: 15px;
  color: #444;
  line-height: 1.6;
}


/* ---------- Навигация ---------- */
.footer-title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin-bottom: 14px;
}

.footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  margin-bottom: 8px;
}

.footer-nav a {
  color: #444;
  text-decoration: none;
  font-size: 15px;
  transition: color .2s ease;
}

.footer-nav a:hover {
  color: #C7A058;
}


/* ---------- Контакты ---------- */
.footer-contacts {
  list-style: none;
  margin: 0 0 14px 0;
  padding: 0;
}

.footer-contacts li {
  font-size: 15px;
  color: #444;
  margin-bottom: 6px;
}

.footer-small {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}


/* ---------- Дисклеймер ---------- */
.footer-disclaimer {
  background: #fff;
  padding: 22px 26px;
  border-radius: 14px;
  max-width: 900px;
  margin: 0 auto 40px;
  font-size: 14px;
  color: #555;
  line-height: 1.55;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.06);
}


/* ---------- Нижняя линия ---------- */
.footer-bottom {
  width: 100%;
  padding: 20px 0 30px;
  background: #f8f5f0;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.footer-bottom .container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 20px;
}

.footer-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.footer-bottom-left {
  font-size: 14px;
  color: #666;
}

.footer-bottom-right {
  font-size: 13px;
  color: #999;
  max-width: 800px;
  line-height: 1.5;
}

/* На мобилках просто центруем */
@media (max-width: 768px) {
  .footer-bottom-right {
    max-width: 100%;
  }
}


/* ---------- video fon ---------- */
/* HERO BLOCK */
.hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 120px; /* под меню */
}

/* BACKGROUND VIDEO */
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.hero-bg video,
.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* DARK OVERLAY */
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.62) 40%,
      rgba(0,0,0,0.82) 100%
  );
}

/* CONTENT WRAPPER */
.hero-content-wrapper {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hero-inner {
  position: relative;
  z-index: 4;
}

/* VIDEO PREVIEW BLOCK */
.hero-video {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 20px auto 0;
  border-radius: 20px;
  overflow: hidden;
}

.hero-video-thumb {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 6;
  text-align: center;
}

.hero-video-frame iframe {
  width: 100%;
  height: 450px;
  border: none;
}

/* BUTTON */
.btn-primary {
  display: inline-block;
  background: #C9A25F;
  color: #fff;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.hero-video {
  position: relative;
  z-index: 6; /* выше текста и выше overlay */
}

.hero-video-thumb {
  position: absolute;
  inset: 0;
  z-index: 7; /* строго поверх всех слоёв */
}
.hero-inner {
  position: relative;
  z-index: 5;
}


.hero-video {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 20px auto 0;
  border-radius: 20px;
  overflow: hidden;
}

/* Превьюшка */
.hero-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  transition: opacity 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Play-кнопка */
.hero-video-play {
  position: absolute;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  cursor: pointer;

  background: radial-gradient(circle at 30% 0%, #f4d58a, #d7b36a);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);

  display: flex;
  align-items: center;
  justify-content: center;

  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-video-play:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.85);
}

/* Иконка треугольника */
.hero-video-icon {
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 20px solid #262010;
  margin-left: 4px;
}

/* Подпись */
.hero-video-sound {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

/* iframe */
.hero-video-frame iframe {
  width: 100%;
  height: 430px;
  border: 0;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .hero-video-frame iframe {
    height: 240px;
  }
}

/* ============================================================
   PREMIUM QUIZ STYLES (FINAL FIXED VERSION)
   Стиль: Светлый, с прокруткой и бонусами
============================================================ */

/* 1. ОВЕРЛЕЙ (Фон) */
.quiz-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 68, 0.8); /* Темно-синий фон */
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 10px; /* Отступ от краев экрана */
}

.quiz-popup-overlay.active {
  display: flex;
  opacity: 1;
}

/* 2. ОКНО КВИЗА (С ОГРАНИЧЕНИЕМ ВЫСОТЫ) */
.quiz-popup-box {
  position: relative;
  width: 100%;
  max-width: 600px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 30px 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  
  /* === ГЛАВНЫЙ ФИКС ВЫСОТЫ === */
  max-height: 90vh; /* Максимум 90% от высоты экрана */
  overflow-y: auto; /* Включаем прокрутку, если контент не влезает */
  display: flex;
  flex-direction: column;
  /* Сброс трансформаций, чтобы не размывало */
  transform: none; 
}

/* Стилизация скроллбара (чтобы было красиво) */
.quiz-popup-box::-webkit-scrollbar { width: 6px; }
.quiz-popup-box::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.quiz-popup-box::-webkit-scrollbar-thumb { background: #d7b36a; border-radius: 4px; }

/* Кнопка закрытия */
.quiz-popup-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: #8896ab;
  cursor: pointer;
  z-index: 10;
  transition: color 0.2s;
}
.quiz-popup-close:hover { color: #0A1F44; }

/* 3. ПРОГРЕСС БАР */
.quiz-progress {
  width: 100%;
  height: 4px;
  background: #F0F2F5;
  border-radius: 2px;
  margin-bottom: 25px;
  flex-shrink: 0;
}
.quiz-progress-bar {
  height: 100%;
  background: #d7b36a;
  width: 15%; 
  transition: width 0.4s ease;
}

/* 4. ШАГИ И ТЕКСТЫ */
.quiz-step {
  display: none;
  animation: fadeInStep 0.4s ease forwards;
}
.quiz-step.active { display: block; }

@keyframes fadeInStep {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.quiz-question-title {
  font-family: "Manrope", sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0A1F44;
  text-align: center;
  margin-bottom: 20px;
  line-height: 1.2;
}

.quiz-subtext {
  font-size: 15px;
  color: #55657e;
  text-align: center;
  margin-bottom: 20px;
}

/* 5. ВАРИАНТЫ ОТВЕТА */
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.quiz-btn {
  width: 100%;
  padding: 14px 20px;
  background: #FFFFFF;
  border: 1px solid #E0E4E9;
  border-radius: 8px;
  color: #0A1F44;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}
.quiz-btn:hover {
  background: #FCF9F4;
  border-color: #d7b36a;
  transform: translateY(-2px);
}

/* Карточки с картинками */
.quiz-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.quiz-card {
  background: #FFFFFF;
  border: 1px solid #E0E4E9;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  text-align: center;
  padding-bottom: 12px;
  transition: all 0.3s;
}
.quiz-card img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  margin-bottom: 8px;
}
.quiz-card p {
  margin: 0;
  font-size: 14px;
  color: #0A1F44;
  font-weight: 700;
}
.quiz-card:hover {
  border-color: #d7b36a;
  transform: translateY(-3px);
}

/* 6. БЛОК С БОНУСАМИ (В Финале) */
.quiz-bonuses {
  background: #F5F7F9;
  border: 1px solid #E0E4E9;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}
.quiz-bonus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #3C4A60;
  margin-bottom: 8px;
  line-height: 1.3;
}
.quiz-bonus-item:last-child { margin-bottom: 0; }
.bonus-icon { font-size: 16px; }
.quiz-bonus-item strong { color: #0A1F44; font-weight: 700; }

/* 7. ФОРМА И ПОЛЯ ВВОДА */
.quiz-form {
  margin-top: 10px;
}

/* Обычные поля (Имя, Телефон) */
.quiz-form input[type="text"] {
  width: 100%;
  background: #F5F7F9;
  border: 1px solid #dcdcdc;
  color: #0A1F44;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  margin-bottom: 12px; /* Отступ снизу */
  outline: none;
  transition: border-color 0.3s;
}
.quiz-form input[type="text"]:focus {
  border-color: #d7b36a;
  background: #fff;
}

/* 8. ГАЛОЧКА СОГЛАСИЯ (ИСПРАВЛЕННАЯ) */
.quiz-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
  cursor: pointer;
  text-align: left;
}

/* Специфичный стиль для чекбокса, чтобы он не растягивался */
.quiz-form input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  margin: 2px 0 0 0 !important;
  padding: 0 !important;
  border: 1px solid #dcdcdc !important;
  background: #fff !important;
  cursor: pointer;
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  display: inline-block !important;
}

.quiz-consent span {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}
.quiz-consent a {
  color: #0A1F44;
  text-decoration: underline;
  font-weight: 600;
}

/* 9. КНОПКА ОТПРАВКИ */
.quiz-submit {
  width: 100%;
  background: #ff0000;
  color: #ffffff;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 10px 20px rgba(215, 179, 106, 0.25);
  transition: transform 0.2s;
}
.quiz-submit:hover {
  background: #e6c47e;
  transform: translateY(-2px);
}

/* АДАПТИВ (MOBILE) */
@media (max-width: 480px) {
  .quiz-popup-overlay {
    align-items: flex-end; /* Прижимаем к низу на мобильных */
    padding: 0;
  }
  .quiz-popup-box {
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0; /* Скругление только сверху */
    padding: 25px 20px;
  }
  .quiz-question-title { font-size: 22px; }
  .quiz-btn { padding: 14px; }
}
/* ============================================================
   FIX: ИСПРАВЛЕНИЕ ВЫСОТЫ И ПРОКРУТКИ КВИЗА
   (Добавить в конец style.css)
============================================================ */

/* 1. Окно квиза: Максимальная высота и Скролл */
.quiz-popup-box {
  max-height: 90vh !important; /* Окно никогда не будет выше 90% экрана */
  overflow-y: auto !important; /* Включаем прокрутку ВНУТРИ окна */
  display: flex !important;
  flex-direction: column !important;
  margin: auto !important; /* Центрирование */
  position: relative !important;
  transform: none !important; /* Убираем конфликтующие трансформации */
  padding: 30px 40px !important;
}

/* Красивый скроллбар (Chrome/Safari) */
.quiz-popup-box::-webkit-scrollbar {
  width: 6px;
}
.quiz-popup-box::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.quiz-popup-box::-webkit-scrollbar-thumb {
  background: #d7b36a;
  border-radius: 4px;
}

/* 2. Крестик: Прилепляем его, чтобы не уезжал при скролле */
.quiz-popup-close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 100 !important;
  background: white !important; /* Фон под крестиком, чтобы не сливался */
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 3. Галочка (Чекбокс): Фиксируем размер */
.quiz-consent-wrapper {
  margin: 15px 0 !important;
  text-align: left;
}

.quiz-consent {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  cursor: pointer;
  width: 100%;
}

.quiz-form input[type="checkbox"] {
  /* Жесткие размеры, чтобы галочку не плющило */
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex-shrink: 0 !important;
  margin: 3px 0 0 0 !important; /* Выравнивание по первой строке текста */
  padding: 0 !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 4px !important;
  background: #fff !important;
  -webkit-appearance: checkbox !important;
  appearance: auto !important;
  display: inline-block !important;
}

.consent-text {
  font-size: 12px !important;
  color: #666;
  line-height: 1.35;
}

/* 4. Отступы для инпутов */
.quiz-form input[type="text"] {
  margin-bottom: 12px !important;
}

/* 5. Бонусы: Чтобы занимали меньше места */
.quiz-bonuses {
  padding: 15px !important;
  margin-bottom: 15px !important;
}
.quiz-bonus-item {
  font-size: 13px !important; /* Чуть уменьшаем шрифт, чтобы влезло */
  margin-bottom: 6px !important;
}

/* 6. АДАПТИВ (Для телефонов и малых экранов) */
@media (max-height: 800px) {
  .quiz-popup-box {
    padding: 20px 25px !important;
  }
  .quiz-question-title {
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }
  .quiz-bonuses {
    padding: 10px !important;
  }
}

/* =========================================
   БЛОК 7: ЛИД-МАГНИТ (DARK PREMIUM)
========================================= */

.lead-magnet {
  background-color: #0A1F44; /* Темно-синий контрастный фон */
  padding: 100px 0;
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

.magnet-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
}

/* --- ЛЕВАЯ КОЛОНКА (КНИГА) --- */
.magnet-visual {
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Свечение за книгой */
.magnet-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(215, 179, 106, 0.4) 0%, rgba(10, 31, 68, 0) 70%);
  filter: blur(40px);
  z-index: 0;
}

/* CSS-Книга (Видна, если нет картинки) */
.book-mockup {
  position: relative;
  z-index: 1;
  width: 260px;
  height: 360px;
  background: #1e3a66;
  border-radius: 4px 12px 12px 4px;
  box-shadow: 
    -10px 10px 30px rgba(0,0,0,0.5),
    inset 4px 0 10px rgba(0,0,0,0.3);
  transform: perspective(1000px) rotateY(-15deg);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 2px solid #d7b36a;
}

.book-mockup:hover {
  transform: perspective(1000px) rotateY(-5deg) translateY(-10px);
}

.book-cover {
  padding: 20px;
}

.book-title {
  display: block;
  font-family: "Manrope", sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #d7b36a;
  line-height: 1;
  margin-bottom: 10px;
}

.book-subtitle {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

/* Имитация страниц книги */
.book-pages {
  position: absolute;
  right: -10px;
  top: 10px;
  width: 20px;
  height: 340px;
  background: repeating-linear-gradient(to right, #fff 0px, #ddd 1px, #fff 2px);
  border-radius: 0 4px 4px 0;
  transform: skewY(5deg);
  z-index: -1;
}

/* Если будешь ставить картинку: */
/* .magnet-visual img { width: 100%; max-width: 350px; z-index: 1; transform: ... } */


/* --- ПРАВАЯ КОЛОНКА (ТЕКСТ) --- */
.magnet-content {
  flex: 1.2;
}

.magnet-tag {
  display: inline-block;
  color: #d7b36a;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(215, 179, 106, 0.15);
  padding: 8px 14px;
  border-radius: 4px;
  margin-bottom: 24px;
}

.magnet-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.2;
  font-weight: 800;
  color: #fff;
  margin-bottom: 20px;
}

.magnet-desc {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  margin-bottom: 40px;
  border-left: 3px solid #d7b36a;
  padding-left: 20px;
}

/* --- КНОПКА --- */
.magnet-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.magnet-btn {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 280px;
  justify-content: center;
}

.magnet-micro {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* --- АДАПТИВ --- */
@media (max-width: 992px) {
  .magnet-grid {
    flex-direction: column;
    text-align: center;
    gap: 50px;
  }

  .magnet-content {
    align-items: center;
    display: flex;
    flex-direction: column;
  }

  .magnet-desc {
    padding-left: 0;
    border-left: none;
    border-top: 3px solid #d7b36a;
    padding-top: 20px;
  }

  .magnet-action {
    align-items: center;
  }
}

/* =========================================
   REVIEWS SECTION (ELFSIGHT WRAPPER)
========================================= */

.reviews-section {
  background-color: #FFFFFF; /* Белый фон, чтобы карточки виджета выделялись */
  padding: 100px 0;
  position: relative;
}

.reviews-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 50px;
}

.reviews-title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #0A1F44; /* Темно-синий */
  margin-bottom: 12px;
  line-height: 1.2;
}

.reviews-subtitle {
  font-size: 16px;
  color: #55657e;
  line-height: 1.6;
}

/* Контейнер самого виджета */
.reviews-widget-box {
  max-width: 1000px; /* Ограничиваем ширину, чтобы не растягивало на 4к мониторах */
  margin: 0 auto;
  /* Можно добавить легкую рамку, если хочется выделить зону отзывов */
  /* border: 1px solid rgba(0,0,0,0.05); */
  /* border-radius: 20px; */
  /* padding: 20px; */
}

/* ХАК: Пытаемся скрыть логотип "Free Widget" (может не сработать, если они изменили классы) */
/* Обычно это ссылка внутри виджета */
.elfsight-app-9a96a6fd-cf95-45c9-8f10-af01d0823f6a a[href*="elfsight.com"] {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =========================================
  куки файл
========================================= */


.cookie-notice {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ffffff; /* Белый фон */
  padding: 15px 20px;
  box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
  z-index: 10000; /* Поверх всего */
  display: none; /* Скрыт по умолчанию, JS его включит */
}

.cookie-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cookie-text {
  font-size: 13px;
  color: #333;
}

.cookie-btn {
  background: #0A1F44; /* Твой синий цвет */
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
}

/* =========================================
   FLOATING STICKY BUTTON
========================================= */
.float-cta {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px); /* Скрыта внизу */
  z-index: 9900; /* Чуть ниже куки-баннера, если он есть */
  
  display: flex;
  align-items: center;
  gap: 10px;
  
  background: #0A1F44; /* Темно-синий */
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 50px; /* Капсула */
  box-shadow: 0 10px 20px rgba(10, 31, 68, 0.3);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  opacity: 0;
  visibility: hidden;
  border: 1px solid #d7b36a; /* Золотая обводка */
}

/* Класс для показа кнопки (добавляется JS) */
.float-cta.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

.float-cta:hover {
  transform: translateX(-50%) scale(1.05);
  background: #112b59;
}

.float-icon { font-size: 18px; }
.float-text { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }

/* =========================================
   FAST POPUP (Мини-форма)
========================================= */
.fast-popup-overlay {
  position: fixed; inset: 0; background: rgba(10, 31, 68, 0.6); backdrop-filter: blur(5px);
  z-index: 99999; display: none; align-items: center; justify-content: center;
  padding: 15px; opacity: 0; transition: 0.3s;
}
.fast-popup-overlay.active { display: flex; opacity: 1; }

.fast-popup-box {
  background: #fff; width: 100%; max-width: 420px; padding: 30px; border-radius: 20px;
  position: relative; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  transform: scale(0.9); transition: 0.3s;
}
.fast-popup-overlay.active .fast-popup-box { transform: scale(1); }

.fast-close {
  position: absolute; top: 15px; right: 15px; background: none; border: none;
  font-size: 24px; cursor: pointer; color: #999;
}

.fast-popup-box h3 { font-size: 22px; margin-bottom: 10px; color: #0A1F44; }
.fast-desc { font-size: 14px; color: #555; margin-bottom: 20px; line-height: 1.5; }

.fast-form label { display: block; text-align: left; font-size: 12px; font-weight: 700; color: #0A1F44; margin-bottom: 5px; margin-top: 15px; }
.fast-form textarea {
  width: 100%; height: 80px; padding: 12px; border: 1px solid #ddd; border-radius: 8px;
  font-family: inherit; font-size: 14px; resize: none;
}
.fast-form input {
  width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;
}
.fast-form .hero-btn { margin-top: 20px; width: 100%; border: none; }
.fast-privacy { font-size: 11px; color: #999; margin-top: 10px; }

/* АДАПТИВ */
@media (max-width: 600px) {
  .float-cta {
    width: 90%; /* Широкая кнопка на мобилке */
    justify-content: center;
    bottom: 20px;
  }
}
/* =========================================
   УЛУЧШЕННЫЙ ДИЗАЙН ПОПАПА "ЭКСПРЕСС-ПОДБОР"
========================================= */

/* 1. Сам контейнер (делаем красивее) */
.fast-popup-box {
  background: #ffffff;
  width: 100%;
  max-width: 450px; /* Чуть шире */
  padding: 40px 30px;
  border-radius: 24px; /* Сильные скругления (iOS style) */
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  position: relative;
  transform: scale(0.95);
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fast-popup-overlay.active .fast-popup-box {
  transform: scale(1);
}

/* 2. Типографика */
.fast-popup-box h3 {
  font-family: "Manrope", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0A1F44;
  margin-bottom: 10px;
}

.fast-desc {
  font-size: 15px;
  color: #55657e;
  line-height: 1.5;
  margin-bottom: 25px;
}

/* 3. Поля ввода (Делаем приятными) */
.fast-form label {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #0A1F44;
  margin-bottom: 8px;
  margin-top: 15px;
}

.fast-form textarea, 
.fast-form input {
  width: 100%;
  background: #F5F7F9; /* Светло-серый фон */
  border: 1px solid #E0E4E9;
  border-radius: 12px; /* Мягкие углы */
  padding: 14px 16px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  color: #333;
  transition: 0.3s;
  outline: none;
}

.fast-form textarea {
  height: 100px;
  resize: none;
}

/* Эффект при клике на поле */
.fast-form textarea:focus, 
.fast-form input:focus {
  background: #fff;
  border-color: #FF5500; /* Оранжевая обводка при вводе */
  box-shadow: 0 0 0 4px rgba(255, 85, 0, 0.1);
}

/* 4. КНОПКА (ТОЧНО КАК В HERO) */
.fast-form .hero-btn {
  background: #FF5500 !important; /* Яркий оранжевый */
  color: #ffffff !important;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.5px;
  
  width: 100%;
  padding: 18px;
  border-radius: 12px;
  border: none;
  margin-top: 25px;
  cursor: pointer;
  
  box-shadow: 0 10px 25px rgba(255, 85, 0, 0.35); /* Оранжевое свечение */
  transition: all 0.2s ease;
}

.fast-form .hero-btn:hover {
  background: #ff6a1f !important;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(255, 85, 0, 0.5);
}

/* 5. Замок и подпись */
.fast-privacy {
  font-size: 12px;
  color: #8896ab;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* Крестик закрытия */
.fast-close {
  color: #ccc;
  font-size: 32px;
  top: 15px;
  right: 20px;
  transition: 0.2s;
}
.fast-close:hover {
  color: #0A1F44;
  transform: rotate(90deg);
}
/* =========================================
   МОБИЛЬНАЯ ШАПКА: ЛОГО + ТЕЛЕФОН
   (Вставить в конец style.css)
========================================= */

/* 1. Скрываем мобильный номер на ПК */
.mobile-phone-link {
  display: none;
}

/* 2. Настройки для мобильных устройств */
@media (max-width: 992px) {
  
  /* --- УМЕНЬШАЕМ ЛОГОТИП --- */
  .logo-text {
    font-size: 16px !important; /* Уменьшаем шрифт */
  }
  .logo-mark {
    width: 12px !important;
    height: 12px !important;
  }
  .header-logo {
    gap: 6px !important;
  }

  /* --- ПОКАЗЫВАЕМ НОМЕР ТЕЛЕФОНА --- */
  .mobile-phone-link {
    display: inline-block;
    
    font-size: 12px; /* Компактный шрифт */
    font-weight: 800;
    color: #0A1F44; /* Темно-синий текст */
    text-decoration: none;
    white-space: nowrap;
    
    padding: 8px 12px;
    border: 1px solid #d7b36a; /* Золотая рамка */
    border-radius: 50px; /* Овальная форма */
    background: transparent;
    
    margin-right: 8px; /* Отступ до бургера */
    transition: 0.2s;
  }

  .mobile-phone-link:active {
    background: #d7b36a;
    color: #fff;
  }
  
  /* Убираем лишние отступы в блоке действий */
  .header-actions {
    gap: 0 !important;
  }
}

/* Для самых маленьких экранов */
@media (max-width: 360px) {
  .logo-text { font-size: 14px !important; }
  .mobile-phone-link { font-size: 11px; padding: 6px 10px; }
}


/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКОВ */
.lang-switch {
  display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 14px; margin-right: 15px;
}
.lang-link {
  text-decoration: none; color: #0A1F44; opacity: 0.5; transition: 0.3s;
}
.lang-link:hover { opacity: 1; }
.lang-link.active { opacity: 1; color: #d7b36a; cursor: default; }
.divider { color: #ccc; }

/* Скрываем на мобильном (или показываем в меню) */
@media (max-width: 992px) {
  .header-actions .lang-switch { display: none; } /* В шапке скрываем */
  .mobile-lang { display: flex; justify-content: center; margin-bottom: 20px; } /* В меню показываем */
}


#preloader {
  position: fixed; inset: 0; background: #fff; z-index: 99999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 0.5s ease;
}
.loader-logo { font-weight: 800; font-size: 24px; color: #0A1F44; margin-bottom: 20px; }
.loader-spinner {
  width: 40px; height: 40px; border: 4px solid #f3f3f3;
  border-top: 4px solid #d7b36a; border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }