/* ============================================================
   CTA — секция с формой заявки
   ------------------------------------------------------------
   Что внутри секции:
   1. .cta__video   — фоновое видео (под всем)
   2. .cta__overlay — слой затемнения поверх видео (градиент)
   3. .cta__inner   — контент (слева текст, справа форма)
   ------------------------------------------------------------
   Читаемость обеспечивается ДВУМЯ слоями:
   - filter: brightness() на самом видео — приглушает видео целиком
   - background: linear-gradient() на оверлее — добавляет градиент
   Эти два слоя работают совместно. Меняя один, компенсируйте другим.
   ============================================================ */


/* ---------- Контейнер секции ---------- */
.cta {
  position: relative;          /* якорь для absolute-детей */
  padding-block: var(--space-3xl);
  overflow: hidden;            /* видео не вылезает за границы */
  isolation: isolate;          /* изолируем stacking context внутри секции */
  color: var(--text-on-dark);  /* базовый цвет текста — светлый */
}


/* z-index: -2 — на самом дне секции.
   filter: brightness() — управляет яркостью видео.
   Диапазон значений:
     1.00 — видео в оригинальной яркости
     0.85 — почти оригинал, слегка приглушено
     0.65 — умеренно приглушено (текущее)
     0.45 — заметно тёмное
     0.25 — почти чёрное
   contrast() и saturate() — тонкая настройка «сочности» видео.
   Меняйте brightness в первую очередь, остальное — по вкусу. */
/* Это ГЛАВНЫЙ инструмент регулировки затемнения.
   
   Формат: linear-gradient(135deg, rgba(R, G, B, A) 0%, rgba(R, G, B, A) 100%)
   
   • 135deg — направление градиента (по диагонали от верх-левого к ниж-правому)
     - 180deg — сверху вниз
     - 90deg  — слева направо
     - 45deg  — по диагонали
   
   • rgba(14, 14, 16, A) — цвет слоя (почти чёрный, чуть холодный)
     - Хотите тёплый — rgba(20, 16, 10, A)
     - Хотите холодный — rgba(10, 14, 20, A)
   
   • A — непрозрачность 0.0–1.0. ЭТО ГЛАВНОЕ ЧИСЛО.
     0.0  — оверлей невидим, видео как есть
     0.35 — лёгкое затемнение (текущее в верхней точке)
     0.55 — умеренное затемнение
     0.75 — плотное затемнение (текущее в нижней точке)
     0.90 — почти чёрный
     1.00 — полностью чёрный
   
   РЕКОМЕНДУЕМЫЕ НАБОРЫ:
   
   ▸ Видео должно доминировать:
       0%   → 0.25
       100% → 0.45
   
   ▸ Баланс (текущее):
       0%   → 0.55
       100% → 0.75
   
   ▸ Форма и текст главное, видео на втором плане:
       0%   → 0.75
       100% → 0.88
   
   ▸ Видео еле угадывается:
       0%   → 0.88
       100% → 0.95 */
/* ---------- Внутренний layout секции ---------- */
.cta__inner {
  display: grid;
  gap: var(--space-2xl);
}


/* ---------- Текстовая часть ---------- */
.cta__text {
  color: var(--text-on-dark);
}

.cta__title {
  color: var(--text-on-dark);
  margin-bottom: var(--space-md);
  max-width: 14ch;
}

.cta__title em {
  /* Золотой градиент для акцентного слова */
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Подзаголовок — 82% непрозрачности, чтобы не спорил с H2.
   Если хотите сильнее — увеличьте до 0.9.
   Если тише — уменьшите до 0.7. */
.cta__subtitle {
  color: rgba(245, 243, 239, 0.82);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 44ch;
}


/* ---------- Форма ---------- */
.cta__form {
  display: grid;
  gap: var(--space-md);
  max-width: 560px;
}

.field {
  position: relative;         /* якорь для absolute-лейбла */
}

/* Поля ввода — полупрозрачный тёмный фон + стеклянный blur.
   Если видео светлое — 0.35 непрозрачности хватает для читаемости.
   Если видео очень светлое — увеличьте до 0.5.
   Если видео тёмное — уменьшите до 0.2. */
.field input,
.field textarea {
  width: 100%;
  background: rgba(14, 14, 16, 0.35);
  border: 1px solid rgba(245, 243, 239, 0.2);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1rem 0.5rem;
  color: var(--text-on-dark);
  font-size: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  background: rgba(14, 14, 16, 0.5);
}

/* Плавающий лейбл — поднимается наверх при фокусе/заполнении */
.field label {
  position: absolute;
  left: 1rem;
  top: 1rem;
  color: rgba(245, 243, 239, 0.6);
  font-size: 1rem;
  pointer-events: none;
  transition: transform var(--duration-fast) var(--ease-out),
              font-size var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
  transform-origin: left top;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  transform: translateY(-0.55rem) scale(0.78);
  color: var(--gold-300);
}

/* Примечание под кнопкой */
.form-note {
  font-size: 0.8rem;
  color: rgba(245, 243, 239, 0.55);
  margin-top: var(--space-xs);
}


/* ---------- Адаптив ---------- */
@media (min-width: 1024px) {
  .cta__inner {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
}
/* ========== Нижний отступ CTA ========== */
/* Было: --space-3xl (~9rem), стало: --space-xl (~4rem)
   Хотите ещё плотнее — используйте --space-lg (~2.5rem) */
.cta {
  padding-bottom: var(--space-xl);
}

/* ========== Контакты в CTA ========== */
.cta__contacts {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(201, 162, 39, 0.25);
}

.cta__contacts-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-bottom: var(--space-lg);
}

.cta__contacts-list {
  display: grid;
  gap: var(--space-xs);
  font-style: normal;
}

/* Строка контакта */
.cta__contact {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.6rem 0;
  color: rgba(245, 243, 239, 0.95);
  transition: transform var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}

a.cta__contact {
  cursor: pointer;
}

a.cta__contact:hover {
  transform: translateX(4px);
  color: var(--gold-100);
}

/* Иконка — та же, что в шапке, тот же золотой фильтр */
.cta__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  transition: transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.cta__contact-icon img {
  width: 18px;
  height: 18px;
  filter: invert(60%) sepia(60%) saturate(480%) hue-rotate(5deg) brightness(90%) contrast(88%);
  transition: transform var(--duration-base) var(--ease-out),
              filter var(--duration-base) var(--ease-out);
}

/* Hover на ссылке → иконка светлеет, крутится, светится */
a.cta__contact:hover .cta__contact-icon {
  transform: scale(1.06);
  border-color: var(--gold-300);
  box-shadow: 0 0 22px rgba(201, 162, 39, 0.35);
}

a.cta__contact:hover .cta__contact-icon img {
  filter: invert(75%) sepia(55%) saturate(600%) hue-rotate(5deg) brightness(105%) contrast(92%);
  transform: rotate(-8deg);
}

/* Текст */
.cta__contact-val {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1.4;
  position: relative;
}

/* Подчёркивание под текстом при hover */
a.cta__contact .cta__contact-val::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 1px;
  background: var(--gold-300);
  transition: width var(--duration-base) var(--ease-out);
}

a.cta__contact:hover .cta__contact-val::after {
  width: 100%;
}

@media (max-width: 600px) {
  .cta__contact-icon { width: 36px; height: 36px; }
  .cta__contact-icon img { width: 16px; height: 16px; }
  .cta__contact-val { font-size: 0.875rem; }
}

/* ========== Уменьшаем отступ над блоком контактов ========== */
.cta__contacts {
  margin-top: var(--space-xl);      /* было 2xl (6rem), стало xl (4rem) */
  padding-top: var(--space-md);     /* было lg (2.5rem), стало md (1.5rem) */
}

/* ========== Уменьшаем верхний отступ секции CTA ========== */
.cta {
  padding-top: var(--space-xl);   /* было --space-3xl (9rem), стало --space-xl (4rem) */
}