/* === SECTIONS.CSS === */
/* assets/css/sections.css */
/* НАЗНАЧЕНИЕ: Оформление всех смысловых блоков страницы */
/* СВЯЗИ: tokens.css, views/sections/*.php */
/* РАЗМЕР: ~780 строк */

/* ==========================================================
   ШАПКА СЕКЦИИ
   Одна система на весь сайт: метка, заголовок, лид.
   ========================================================== */

.sec-head {
  display: grid;
  gap: var(--s5);
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.2vw, 48px);
}

/* Дисклеймер завершает секцию и идет следом за содержательным блоком.
   Собственного отступа у него нет, и после поджатия ритма он вставал
   вплотную к предыдущему блоку. Отделяем везде, где он замыкает блок. */
.materials + .disclaim,
.tl + .disclaim,
.fact-grid + .disclaim,
.gallery + .disclaim,
.plans + .disclaim { margin-top: var(--s6); }

/* ==========================================================
   ПЕРВЫЙ ЭКРАН
   ========================================================== */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 132px;
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -2; }

/* Кадры лежат слоями друг на друге, а не в потоке: класс от picture()
   попадает на <img>, поэтому спрятанный кадр оставил бы за собой
   пустую обертку <picture> высотой в экран и сдвинул бы соседа. */
.hero-frame { position: absolute; inset: 0; }

.hero-frame picture,
.hero-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}

.hero-media .m-only { display: none; }

/* Глубокое оливковое затемнение по брифу. Два слоя вместо одного:
   нижний держит метрики, левый держит заголовок. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,   rgba(12, 11, 2, .96) 0%, rgba(12, 11, 2, .58) 38%, rgba(12, 11, 2, 0) 72%),
    linear-gradient(to right, rgba(12, 11, 2, .88) 0%, rgba(12, 11, 2, .34) 48%, rgba(12, 11, 2, 0) 82%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: end;
  gap: clamp(32px, 5vw, 80px);
  padding-bottom: clamp(36px, 4vw, 64px);
}

.hero-copy h1 { margin-block: var(--s5) 0; }

/* Ширину колонки задает сетка. Собственный max-width в ch считался бы
   от базового кегля, а не от кегля заголовка, и резал бы строку. */
.hero-copy .lede { margin-top: var(--s6); max-width: 48ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s7);
}

/* -- Плавающие карточки -- */

.hero-cards { display: grid; gap: var(--s4); }

.hero-card { padding: clamp(20px, 2vw, 28px); }

.hc-kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--s3);
}

.hc-title { font-size: 26px; font-weight: 500; letter-spacing: -.02em; color: var(--ivory); }
.hc-sub   { margin-top: 4px; font-size: 13.5px; color: var(--on-void-soft); }

.hc-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--glass-line);
}

.hc-type b { display: block; font-size: 19px; font-weight: 500; color: var(--ivory); }
.hc-type span { font-size: 12.5px; color: var(--on-void-soft); }

/* Карточка цены входа. Стрелка между ступенями рисуется линией,
   а не символом: символ зависит от шрифта и уезжает по базовой линии. */
.hc-entry .hc-step + .hc-step { margin-top: var(--s2); }

.hc-price {
  display: block;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -.04em;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
}

.hc-price small { font-size: .44em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--on-void-soft); }
.hc-price-to { color: var(--lime); }
.hc-step span { font-size: 12.5px; color: var(--on-void-soft); }

.hc-arrow {
  width: 1px;
  height: 22px;
  margin: var(--s3) 0 var(--s3) 9px;
  background: linear-gradient(to bottom, var(--lime), rgba(208, 208, 114, .15));
}

.hc-note { margin-top: var(--s4); font-size: 12px; line-height: 1.5; color: var(--on-void-soft); }

/* -- Метрики -- */

.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
  padding-block: var(--s6);
  border-top: 1px solid var(--rule-void2);
}

/* Кегль в метриках ниже общего: у одной из них есть приставка "до",
   и на общем размере строка "до 4 500 €/м²" не влезает в колонку -
   приставка отрывается вниз и ломает ряд. nowrap держит ее вместе
   с числом, а уменьшенный кегль дает этой строке поместиться. */
.metric .figure {
  display: block;
  font-size: clamp(28px, 3.3vw, 46px);
  white-space: nowrap;
}

.metric-label { margin-top: var(--s2); font-size: 13px; line-height: 1.45; color: var(--on-void-soft); }

.hero-scroll { position: absolute; right: var(--pad); bottom: 190px; z-index: 2; }

/* ==========================================================
   ВИДЕООБЛЕТ
   ========================================================== */

.flyover-sec { padding-block: clamp(36px, 4vw, 64px); }

/* Пропорции блока равны пропорциям файла (848x560): кадр виден
   целиком, без срезанных краев и без черных полей. */
.flyover {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--void-3);
}

.flyover-media { display: block; width: 100%; height: auto; aspect-ratio: 848 / 560; }

.flyover-tag {
  position: absolute;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  display: flex;
  gap: var(--s3);
  padding: 8px var(--s4);
  border-radius: var(--r-pill);
  background: rgba(12, 11, 2, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ivory);
}

.flyover-tag span + span { color: var(--on-void-soft); }

/* ==========================================================
   О ПРОЕКТЕ
   ========================================================== */

/* Колонки выровнены по верху, а не по центру: текстовая колонка
   заметно короче кадра, и при центрировании над ней открывалась
   дыра в половину высоты фотографии. Кадр при этом чуть ниже
   прежнего 4:5 - высокий портрет тянул всю секцию вниз. */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.about-copy { display: grid; gap: var(--s5); }
.about-shot { position: relative; aspect-ratio: 4 / 4.4; }

/* Плавающая карточка поверх кадра. Держим ее компактной: это подпись
   к фотографии, а не самостоятельный блок, и в крупном виде она
   начинает спорить с самим кадром и закрывать его. Радиус тоже
   меньше общего - на маленькой плашке r-md выглядит раздутым. */
.float-card {
  position: absolute;
  left: clamp(14px, 1.6vw, 20px);
  bottom: clamp(14px, 1.6vw, 20px);
  display: grid;
  gap: 1px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  color: var(--ivory);
}

.float-card b { font-size: 21px; font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }

/* Метка не мельче 11px: это тот же кегль, что у остальных служебных
   подписей сайта, ниже уже нечитаемо на капсе с широким трекингом. */
.float-card span { font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: rgba(241, 241, 234, .72); }

/* -- Четыре довода. Та же сетка работает и в локации. -- */

.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(36px, 4vw, 60px);
}

.fact { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--rule); }
.fact-tag { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--lime-deep); }
.fact p { font-size: 15px; color: var(--ink-70); }

/* На темных секциях те же ячейки меняют линию и цвет текста */
.band:not(.on-light) .fact { border-top-color: var(--rule-void2); }
.band:not(.on-light) .fact-tag { color: var(--lime); }
.band:not(.on-light) .fact p { color: var(--on-void); }

/* ==========================================================
   ИНВЕСТМОДЕЛЬ. ЦЕНОВАЯ ЛЕСТНИЦА
   Подписной элемент страницы: вся смелость оформления здесь.
   ========================================================== */

.ladder {
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(77, 58, 17, .34), rgba(12, 11, 2, .2));
}

.ladder-list { display: grid; gap: var(--s4); }

.rung {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s5);
}

.rung-when { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-void-soft); }

/* Заливка ступени задается переменной --fill из PHP: без JS блок
   обязан остаться осмысленным, поэтому ширина считается на сервере. */
.rung-bar {
  position: relative;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--rule-void2);
  overflow: hidden;
}

.rung-bar::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 10%);
  border-radius: inherit;
  background: linear-gradient(to right, var(--olive-warm), var(--lime));
}

.rung-price {
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--on-void);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rung-price small { font-size: .5em; font-weight: 500; letter-spacing: 0; margin-left: .3em; color: var(--on-void-soft); }

/* Текущая ступень выделена цветом, а не рамкой: рамка в ряду
   из пяти строк читается как ошибка верстки. */
.rung-now .rung-when,
.rung-now .rung-price { color: var(--lime); }

.ladder-note { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule-void2); }

/* -- Три способа выхода -- */

.ways { margin-top: clamp(36px, 4vw, 60px); }

.ways-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: var(--s6);
}

.way { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s5); border-top: 1px solid var(--rule-void2); }
.way-num { font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--lime); font-variant-numeric: tabular-nums; }
.way p { font-size: 15px; color: var(--on-void); }

.protect {
  display: grid;
  gap: var(--s3);
  margin-top: clamp(32px, 3.6vw, 52px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-md);
  background: rgba(208, 208, 114, .06);
  box-shadow: inset 0 0 0 1px rgba(208, 208, 114, .18);
}

/* ==========================================================
   СТОИМОСТЬ
   ========================================================== */

.units {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.unit {
  display: grid;
  gap: var(--s6);
  align-content: start;
  padding: clamp(26px, 3vw, 40px);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: #fff;
  transition: border-color .4s ease, transform .5s var(--out-quart);
}

.unit:hover { border-color: var(--lime-deep); transform: translateY(-3px); }

.unit-head { display: flex; align-items: baseline; gap: var(--s5); }

.unit-area {
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.unit-area small { font-size: .36em; font-weight: 500; letter-spacing: 0; margin-left: .16em; }
.unit-name h3 { margin-bottom: 4px; }

.unit-price { display: grid; gap: 2px; padding-top: var(--s5); border-top: 1px solid var(--rule); }
.unit-from { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); }

.unit-price b {
  font-size: clamp(26px, 2.8vw, 34px);
  font-weight: 400;
  letter-spacing: -.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.unit-price b small { font-size: .5em; margin-left: .2em; }
.unit-per { font-size: 13.5px; color: var(--ink-55); }

/* -- Планировки -- */

.plans { margin-top: clamp(36px, 4vw, 60px); display: grid; gap: var(--s6); }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

/* Чертеж читается только на светлом, поэтому подложка белая:
   инвертировать линии чертежа на темном нельзя. */
.plan { background: #fff; border: 1px solid var(--rule); padding: var(--s5); }
.plan img { object-fit: contain; }

/* -- Условия входа -- */

.entry { margin-top: clamp(36px, 4vw, 60px); display: grid; gap: var(--s6); }

.entry-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, auto)) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
}

.entry-card { display: grid; gap: 4px; padding-top: var(--s5); border-top: 2px solid var(--rule); }
.entry-main { border-top-color: var(--lime-deep); }

.entry-pct {
  font-size: clamp(34px, 3.8vw, 46px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.entry-pct small { font-size: .44em; font-weight: 500; }
.entry-label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55); }
.entry-text { align-self: center; }

/* ==========================================================
   ЗАЩИТА ВЛОЖЕНИЙ
   ========================================================== */

/* -- Карусель --
   Лента с нативной прокруткой и снапом. Кнопки только дублируют
   жест, поэтому без JS блок остается рабочим. */

.carousel { position: relative; display: grid; gap: var(--s5); }

/* Лента идет ровно по контейнеру. Вынос за края отрицательными полями
   выглядел бы вольнее, но ломает расчет шага: позиции карточек
   начинают считаться от padding-бокса, и прокрутка сбивается. */
.carousel-rail {
  position: relative;
  display: flex;
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--s2);
  scrollbar-width: none;
}

.carousel-rail::-webkit-scrollbar { display: none; }

/* Системная настройка "меньше движения" отключает и доводку лентой. */
@media (prefers-reduced-motion: reduce) {
  .carousel-rail { scroll-behavior: auto; }
}

.carousel-rail:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.guard {
  flex: 0 0 clamp(260px, 27vw, 330px);
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: clamp(24px, 2.6vw, 34px);
  scroll-snap-align: start;
  transition: border-color .4s ease, transform .5s var(--out-quart);
}

.guard:hover { border-color: rgba(208, 208, 114, .4); transform: translateY(-3px); }

/* -- Кнопки ленты -- */

.carousel-nav { display: flex; gap: var(--s3); justify-content: flex-end; }

/* Если лента помещается целиком, стрелки убираем: две неактивные
   кнопки под блоком выглядят как забытый элемент. */
.carousel.no-nav .carousel-nav { display: none; }

.car-btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  color: var(--ivory);
  box-shadow: inset 0 0 0 1px var(--rule-void);
  transition: box-shadow .3s ease, background-color .3s ease,
              color .3s ease, opacity .3s ease;
}

.car-btn svg { width: 20px; height: 20px; }
.car-btn:hover { background: var(--glass-hi); box-shadow: inset 0 0 0 1px var(--lime); color: var(--lime); }

/* На краю ленты кнопка гаснет и перестает нажиматься: живая кнопка,
   которая ничего не делает, читается как поломка. */
.car-btn[disabled] { opacity: .32; cursor: default; }
.car-btn[disabled]:hover { background: none; box-shadow: inset 0 0 0 1px var(--rule-void); color: var(--ivory); }
.guard-num { font-size: 12px; font-weight: 500; letter-spacing: .18em; color: var(--lime); font-variant-numeric: tabular-nums; }
.guard h3 { color: var(--ivory); }
.guard p { font-size: 14.5px; color: var(--on-void); }

/* -- Довод про страну -- */

.hungary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: clamp(32px, 3.6vw, 52px);
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, rgba(77, 58, 17, .3), transparent 70%);
}

/* Крупная типографическая метка вместо иллюстрации: две буквы
   несут смысл сами и не требуют декора вокруг. */
.hungary-mark {
  font-size: clamp(54px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -.05em;
  line-height: .9;
  color: var(--lime);
}

.hungary-body { display: grid; gap: var(--s4); }

/* ==========================================================
   ЛОКАЦИЯ
   ========================================================== */

/* Две равные колонки, оба кадра одной пропорции. Прежняя схема
   1.7fr / 1fr с разными пропорциями заставляла подгонять высоту
   растяжкой, и второй кадр все равно выбивался. Одинаковый
   aspect-ratio решает это без единой подпорки. */
.loc-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-bottom: clamp(32px, 4vw, 56px);
}

.loc-aerial,
.loc-street { position: relative; aspect-ratio: 16 / 10; }

.loc-badge { left: auto; right: clamp(14px, 1.6vw, 20px); }
.loc-badge b { font-size: 17px; font-weight: 500; letter-spacing: -.015em; }

.times {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.time-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-md);
}

.time-card svg { width: 24px; height: 24px; flex: none; color: var(--lime); }
.time-card b { display: block; font-size: 19px; font-weight: 500; color: var(--ivory); }
.time-card span { font-size: 13px; color: var(--on-void-soft); }

/* ==========================================================
   ИНФРАСТРУКТУРА
   ========================================================== */

.infra-split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* Разделители рисуем тенями на самих ячейках, а не фоном контейнера:
   иначе пустые ячейки последнего ряда светились бы серым. */
.infra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
}

.infra-item {
  display: grid;
  gap: var(--s3);
  align-content: start;
  padding: var(--s5);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.infra-item svg { width: 26px; height: 26px; color: var(--lime-deep); }
.infra-item p { font-size: 13.5px; color: var(--ink-55); }

.infra-media { display: grid; gap: clamp(16px, 2vw, 24px); }
.infra-media .shot { aspect-ratio: 3 / 2; }

/* ==========================================================
   ОТДЕЛКА
   ========================================================== */

/* Три колонки на два ряда - шесть кадров ложатся без остатка.
   Пропорция вертикальная: пять из шести снимков сняты портретом,
   и горизонтальные слоты срезали бы у них половину кадра. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
}

.gal-item { aspect-ratio: 3 / 4; }

.gal-btn { display: block; width: 100%; height: 100%; padding: 0; }
.gal-btn picture, .gal-btn img { width: 100%; height: 100%; object-fit: cover; }

.materials { margin-top: clamp(32px, 3.6vw, 52px); display: grid; gap: var(--s5); }

.mat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3) clamp(24px, 3vw, 48px);
}

.mat-list li {
  padding-block: var(--s3);
  border-top: 1px solid var(--rule-void2);
  font-size: 15px;
  color: var(--on-void);
}

/* ==========================================================
   СРОКИ
   ========================================================== */

.tl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.tl-step { position: relative; display: grid; gap: var(--s3); align-content: start; padding-top: var(--s6); }

/* Линия рисуется на самой ступени, а не на контейнере: иначе она
   вылезала бы за первую и последнюю точку. */
.tl-step::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: calc(clamp(20px, 2.6vw, 40px) * -1);
  height: 1px;
  background: var(--rule);
}

.tl-step:last-child::before { right: 0; }

.tl-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ivory-2);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.tl-now .tl-dot { background: var(--lime-deep); box-shadow: 0 0 0 5px rgba(107, 102, 36, .16); }

.tl-when { font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lime-deep); }
.tl-step p { font-size: 14.5px; color: var(--ink-70); }

/* ==========================================================
   ВОПРОСЫ
   ========================================================== */

.faq { border-top: 1px solid var(--rule-void2); }
.faq-item { border-bottom: 1px solid var(--rule-void2); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s5);
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ivory);
  cursor: pointer;
  list-style: none;
  transition: color .3s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--lime); }

/* Знак рисуем двумя линиями: символ зависит от шрифта и не
   центрируется предсказуемо. */
.faq-sign { position: relative; width: 14px; height: 14px; flex: none; }

.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--lime);
  transition: transform .4s var(--out-quart);
}

.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }

.faq-answer { padding-bottom: var(--s6); max-width: 78ch; }
.faq-answer p { font-size: 15.5px; line-height: 1.65; color: var(--on-void); }
.faq-more { margin-top: var(--s6); }

/* ==========================================================
   ЗАЯВКА
   ========================================================== */

.form-sec {
  position: relative;
  padding-block: var(--band);
  overflow: hidden;
  isolation: isolate;
}

.form-media { position: absolute; inset: 0; z-index: -2; }
.form-media picture, .form-media img { width: 100%; height: 100%; object-fit: cover; }

.form-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(12, 11, 2, .95) 30%, rgba(12, 11, 2, .74));
}

.form-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.form-copy { display: grid; gap: var(--s5); align-content: start; }
.form-points { display: grid; gap: var(--s3); margin-top: var(--s2); }

.form-points li {
  position: relative;
  padding-left: var(--s6);
  font-size: 15px;
  color: var(--on-void);
}

.form-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 14px;
  height: 1px;
  background: var(--lime);
}

.form-card { padding: clamp(24px, 3vw, 42px); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }

.field { display: grid; gap: 7px; margin-bottom: var(--s5); }
.field label { font-size: 13px; letter-spacing: .04em; color: var(--on-void-soft); }

/* Звездочка обязательного поля берет тревожный тон, а не акцент:
   на странице с оливковым акцентом требование должно отличаться. */
.req { color: var(--alarm-lift); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--ivory);
  font-size: 15.5px;
  transition: border-color .3s ease, background-color .3s ease;
}

.field textarea { min-height: 104px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: rgba(241, 241, 234, .38); }
.field select option { background: var(--void-2); color: var(--ivory); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lime);
  background: rgba(255, 255, 255, .07);
}

.field input[aria-invalid="true"] { border-color: var(--alarm-lift); }

.err { font-size: 13px; color: var(--alarm-lift); min-height: 0; }
.err:empty { display: none; }

/* Honeypot убираем из потока, но не через display:none - часть ботов
   пропускает поля именно по этому признаку. */
.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-submit { margin-top: var(--s2); }
.form-submit .btn { width: 100%; }

.form-msg:not(:empty) {
  margin-top: var(--s4);
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  border: 1px solid rgba(208, 208, 114, .4);
  background: rgba(208, 208, 114, .1);
  color: var(--lime);
}

.form-msg.is-error {
  border-color: rgba(180, 81, 44, .5);
  background: rgba(180, 81, 44, .12);
  color: var(--alarm-lift);
}

.form-note { margin-top: var(--s4); font-size: 12.5px; line-height: 1.55; color: var(--on-void-soft); }