:root {
  --text-main: #F9F3EF;
  --text-soft: rgba(249,243,239,0.75);

  --lh-base: 1.6;
  --lh-tight: 1.25;

  --track-normal: 0.01em;
  --track-wide: 0.04em;
  --track-ui: 0.08em;
}
/* Подключение шрифта Helvetica */
@font-face {
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* Сброс отступов у всех элементов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header .logo {
  display: flex;
  align-items: center;
}

header {
  padding: 15px 16px;
  z-index: 2000;
}

header.scrolled::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(210,193,182,0.6),
    transparent
  );
}

/* Цвет фона страницы и цвет текста */
body {
    background-color: #1B3C53; /* Цвет фона страницы */
    color: #F9F3EF; /* Цвет текста по всей странице */
    overflow-x: hidden; /* отключаем горизонтальную прокрутку */
    padding-bottom: 0;
    padding-top: 64px;
    font-family: 'PlayfairDisplay', sans-serif;
}

@media (max-width: 768px){
  body {
    padding-top: 64px;
    font-family: 'PlayfairDisplay', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    letter-spacing: var(--track-normal);
    color: var(--text-main);
}

h1, h2 {
  font-family: 'Playfair Display', serif;
}

h1 {
    line-height: 1.25;
  }

  p {
    font-family: 'Inter', sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
  }
}


@media (max-width: 768px){
  .VG {
    margin-top: 20px !important;
  }
}

/* Стиль для фиксированной шапки */
header {
    position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 64px;            /* 🔥 фиксируем */
  z-index: 9999;           /* 🔥 выше всего */
    background-color: #1B3C53; /* Цвет фона шапки */
    padding: 15px 20px 15px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Выравнивает элементы по вертикали */
    z-index: 2000;
    border-bottom: 1px solid #D2C1B6;
}

/* Стили для логотипа */
.logo {
    height: auto;
    padding: 0;
    margin-right: auto;
}


/* Стили для логотипа */
.logo-link {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 22px;   /* мобильный размер */
  width: auto;
  display: block;
   max-width: 140px;
  object-fit: contain;
}

/* Эффект при наведении */
.logo-text:hover {
    background-color: rgba(210, 193, 182, 0.2); /* ярче фон при наведении */
    
}

/* Установим переменные для использования в нескольких местах */
:root {
    --slider-padding: 20px; /* Отступы карусели */
    --slider-max-width: 1200px; /* Максимальная ширина карусели */
}

:root{
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.15);
  --shadow-medium: 0 20px 60px rgba(0,0,0,0.25);
  --shadow-strong: 0 40px 120px rgba(0,0,0,0.35);
}

:root {
  /* AURAPARA theme */
  --bg: #1B3C53;
  --bg-rgb: 27, 60, 83;
  --surface: #1B3C53;
  --text: #F9F3EF;
  --accent: #D2C1B6;
  --accent-rgb: 210, 193, 182;
}

.action-btn {
  color: #D2C1B6;
}

.work-stages-actions .action-btn {
  color: #D2C1B6;
}

.action-btn:hover svg {
  fill: #0088cc;
}

@media (max-width: 768px){

  .contact-info {
    gap: 0;
  }

  .contact-info span {
    display: none;
  }

}

.contact-icons {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.icon-btn {
  width: 60px;
  height: 60px;
  border: 1px solid rgba(210,193,182,0.6);
  border-radius: 50%;

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

  transition: 0.3s;
}

.icon-btn img {
  width: 24px;
  height: 24px;
}

.icon-btn:hover {
  background: rgba(210,193,182,0.15);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .icon-btn {
    width: 50px;
    height: 50px;
  }

  .icon-btn img {
    width: 20px;
  }
}


/* =========================== */
/*  Секция с логотипом aurapara */
/* =========================== */

.VG{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* высота меньше, чем была */
  height: auto;
  padding: 40px 0;
}

.VG img.vg-image{
  width: 100%;
  max-width: 110px; /* моб */
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  padding: 0 clamp(12px, 6vw, 36px);
}

.contact-link {
  color: #F9F3EF;          /* как текст */
  text-decoration: none;   /* убрать подчеркивание */
}

.contact-link:hover {
  opacity: 0.7;
}

/* на десктопе лого можно чуть крупнее, но в разумных пределах */
@media (min-width: 1024px){
    .VG{ 
        margin-bottom: calc(var(--gap-md) * 0.7);}
}
    .VG img.vg-image{ 
       width: 100%;
       max-width: 220px; /* моб */
 }

.welcome-section{
  text-align:center;
  padding: var(--section-gap-sm) 18px;
  margin: 0 auto var(--section-gap-sm);
  background:#1B3C53;
  color:#e0d6cf;
  margin-top: 120px;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;           
}
.welcome-section .welcome-title{
  letter-spacing: var(--track-wider);  /* было ~1.3–2px → слишком много */
  word-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  text-wrap: balance;
}
/* длинные капс-фразы читаются лучше плотнее и с выше межстрочным */
.welcome-section .welcome-title{
  max-width: 520px;
  margin: 0 auto;
  text-align: center;

  letter-spacing: 0.04em;
  line-height: 1.4;

  text-wrap: balance;
}

@media (min-width: 1024px){
  .welcome-section{
    margin-top: 20px;
  }

  .welcome-title{
    font-size: 20px;
  }
}

@media (max-width: 768px){
  .welcome-section {
    margin-top: 0;
  }
}

@media (min-width: 1024px){
  .welcome-section {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.logo-text,
.bottom-btn,
.smeta-button{
  letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;              /* ~8% для коротких меток-кнопок */
}

/* =========================== */
/*        Секция с логотипом    */
/* =========================== */
.logo2, .logo4, .stages-slider {
  background: transparent;
}

.logo1 img,
.logo4 img {
  max-width: 320px;
  margin-bottom: 20px;
  margin: 0 auto;
}

/* карточка после слайдера — не растягивать на 100vh */
/* карточка с логотипом после слайдера */
.logo1{
  width: 100%;
  height: auto;
  margin: var(--section-gap-lg) auto;
  padding: 0 20px;
}

/* картинка не тянется по высоте, рендерится чётче */
.logo1 img{
  display: block;
  width: 100%;
  height: auto;                 /* не 100% */
  object-fit: contain;          /* без кропа, без растягивания */
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(27,60,83, .45);
}

/* Чуть крупнее и шире на десктопе */
@media (min-width: 1024px){
  .logo1{ margin: 20px auto 28px; padding: 0 24px; }
  .logo1 img{ border-radius: 10px; }
}


/* =========================== */
/*        Секция с логотипом    */
/* =========================== */
/* WORK STAGES — корректная посадка секции и контента */
.logo2{
  position: relative;
  top: 0 !important;                 /* гасим ошибочный сдвиг 33vh */
  height: auto !important;           /* вместо calc(140vh - 5px) */
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  overflow: visible !important;      /* не обрезаем содержимое */
  padding: 18px 0 22px;
  margin-bottom: clamp(24px, 6vh, 40px);  /* разделяем со следующим слайдером */
}

/* это и должно быть на контейнере, а не на .logo2 */
.work-stages-container{
  position: static !important;
  top: 0 !important;
  margin: clamp(20px, 6vh, 36px) auto 28px !important;
}

.work-stages-slider{
  background-color:rgba(27,60,83,0.85);
  border:2px solid #D2C1B6;
  border-radius:22px;
  box-shadow:0 10px 30px rgba(27,60,83,0.45);
  backdrop-filter: blur(6px);
  
}
.work-stages-title{
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  color:#D2C1B6;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:18px;
  line-height:1.6;
  margin:4px 0 14px;
  text-shadow:1px 1px 3px rgba(27,60,83,0.3);
}
.work-stages-list{
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0;
  padding:0;
  list-style:none;
}
.work-stage{
  display:flex;
  gap:14px;
  padding-bottom:14px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.work-stage:last-child{ border-bottom:none; }
.stage-number{
  min-width:28px;
  height:28px;
  border:2px solid #D2C1B6;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#D2C1B6;
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  font-size:14px;
  line-height:1;
  margin-top:2px;
  box-shadow:0 2px 8px rgba(27,60,83,0.25);
}
.stage-content{ flex:1; }
.stage-content h4{
  color:#D2C1B6;
  font-family:'Inter',sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  margin:2px 0 6px;
}
.stage-content p{
  color:#D2C1B6;
  opacity:.9;
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: 0.01em;
  margin:5px;
}

/* Иконки под карточкой */
.work-stages-actions{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-top:16px;
}
.work-stages-actions .action-btn{
  width:52px; height:52px;
  border-radius:50%;
  border:2px solid #D2C1B6;
  color:#D2C1B6;
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease;
}
.work-stages-actions .action-btn:hover{
  transform:translateY(-2px);
  background-color:rgba(205,162,102,.12);
}
.work-stages-actions .action-btn svg{
  width:24px; height:24px; display:block;
  fill: #D2C1B6; /* бежевый */
}

.logo4 {
    width: 100%;
    height: auto;
    min-height: 60vh;
    overflow: hidden; /* обрезаем контент по размеру */
}

/* изображение заполнения */
.logo4 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* корректное позиционирование */
}

main {
    padding: 30px 20px;
    min-height: 100vh;
}

/* Скрываем десктопные элементы */
.desktop-nav,
.desktop-hero {
    display: none;
}

/* Типографика */
h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    font-weight: bold;
}

p {
  font-size: 1rem;
  font-family: 'Inter', sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.intersection-overlay {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 60px auto 0;
  pointer-events: none;
  z-index: 10;
}
.intersection-overlay img {
  max-height: 500px;
  object-fit: contain;
}

@media (max-width: 768px){

  .intersection-overlay{
    margin-top: 40px;
  }

}

.slider-like-overlay {
  position: relative;
  width: calc(100% - 40px);
  max-width: 700px;
  margin: 0 auto;
  padding: 26px 20px;
  border: none;
  box-shadow: none;
  background: transparent;       
  backdrop-filter: blur(6px);
  pointer-events: auto;
}

/* Единый стиль полей формы */
.form-group input,
.form-group select,
.iti input[type="tel"] {
  border: none !important;
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(210,193,182,0.2);
}

/* Фокус — мягкое свечение акцентом */
.form-group input:focus,
.form-group select:focus,
.iti input[type="tel"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(210,193,182,.25);
  border-color: #D2C1B6;
}

/* Плейсхолдеры в гамме */
.form-group input::placeholder,
.form-group select::placeholder,
.iti input[type="tel"]::placeholder {
  color: rgba(210,193,182,.70);
}

/* Заголовок формы */
.form-title{
  color:#D2C1B6;
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  text-align:center;
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin-bottom: 6px;
}

/* Кнопка формы — как смета, но на всю ширину */
.quiz-form .gold-button{
  width:100%;
  max-width: 420px;
  background: rgba(210,193,182,.10) !important;
  border: 2px solid #D2C1B6 !important;
  color: #D2C1B6 !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
}
.quiz-form .gold-button:hover{
  background: rgba(210,193,182,.20) !important;
   letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
}
.logo2 .container > div:first-child {
  margin-top: 0px;
  margin-bottom: 60px !important;
}

/* Компоновка формы */
.quiz-form{
  gap: 24px;               /* чуть компактнее */
}
.form-group{
  max-width: 420px;
  width: 100%;
}

/* цельный вид у поля телефона с отдельным кодом страны */
.iti{
  width:100%;
}
.iti--separate-dial-code .iti__selected-flag{
  background: rgba(210,193,182,.08);
  /* border: 1.5px solid #D2C1B6; */
  border-right: none;
  /* border-bottom: none; */
  height: 48px;
  border-radius: 10px 0 0 10px;
  padding: 0 10px;
}
.iti--separate-dial-code .iti__selected-dial-code{
  color: #D2C1B6;
  }
.iti--separate-dial-code input[type="tel"]{
  border-left: none !important;
  border-radius: 0 10px 10px 0 !important;
  height: 48px !important;
}
.iti__country-list{
  background: rgba(27,60,83,.96);
  border: 1px solid #D2C1B6;
  color: #F9F3EF;
}


@media (max-width: 768px) {
  .slider-like-overlay {
    top: 0;
    height: auto;       /* заменили фиксированную высоту */
    padding: 30px 15px; /* подогнали внутренние отступы */
  }
}

/* Стили для анкеты */
.quiz-form {
  padding: 40px 20px; /* Увеличенный внутренний отступ для формы */
  width: 100%;
  color: #D2C1B6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 35px;
}
.quiz-form *:not(.iti):not(.iti *) {
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
}

.form-group {
  width: 100%;
  max-width: 400px; /* Ограничение ширины для аккуратного вида */
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.form-group input,
.form-group select {
  /* фон мягко-золотой с прозрачностью */
  background: rgba(210, 193, 182, 0.10) !important;
  border: 1px solid #D2C1B6 !important;
  color: #D2C1B6 !important;
}

.form-group input::placeholder,
.form-group select::placeholder {
  color: rgba(205,162,102,0.75);
}

/* телефонное поле из intl-tel-input в ту же гамму */
.iti input[type="tel"] {
  background: rgba(210, 193, 182, 0.10) !important;
  border: 1px solid #D2C1B6 !important;
  color: #D2C1B6 !important;
}
.iti__country-list { border-color: #D2C1B6; }


.form-title {
  color: #D2C1B6;
  text-align: center;
  font-size: 18px;
  text-transform: uppercase;
}

.gold-button {
  background-color: rgba(210, 193, 182, 0.1);
  color: #D2C1B6;
   font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  border: 1px solid rgba(210,193,182,0.3);
  border-radius: 8px;
  padding: 12px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  max-width: 400px; /* Соответствие ширине input */
}

.gold-button {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.gold-button:hover {
  background-color: rgba(210, 193, 182, 0.2);
   letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
}

/* Базовые стили кнопки с улучшенной кросс-браузерностью */

/* Основные стили кнопки */
.smeta-button {
    display: inline-block;
    padding: 12px 30px;
    letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
    text-transform: uppercase;
    color: #D2C1B6;
    text-decoration: none;
    background-color: rgba(210, 193, 182, 0.1);
    border: 1px solid rgba(210,193,182,0.3);
    border-radius: 8px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    white-space: nowrap;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    animation: pulse 2s infinite;
}

/* Точная настройка положения для мобильных */
@media (max-width: 768px) {
    
    .smeta-button {
        padding: 8px 20px;
        letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
    }
}

/* Анимация пульсации */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Ховер-эффекты */
.smeta-button:hover {
    background-color: rgba(210, 193, 182, 0.2);
    letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}


/* Обновленные стили для контейнера этапов */

.stages-title {
    color: #D2C1B6;
    text-align: center;
    margin-bottom: 30px;
    font-size: 18px;
    text-transform: uppercase;
}

.stage-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(210, 193, 182, 0.3);
}

.stage-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Адаптивные стили */
@media (max-width: 768px) {
    .work-stages-slider {
        padding: 20px 15px;
    }
    
    .stage-item {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
}

/* Элементы этапов — читаемо и без налезания */
.stage-item{
  display:flex;
  align-items:flex-start;              /* чтобы текст не «крутил» круг */
  gap: 16px;                           /* больше воздуха между кругом и текстом */
}

.stage-number{
  flex: 0 0 32px;                      /* фикс-колонка под номер */
  width: 32px; height: 32px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid #D2C1B6; border-radius:50%;
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  font-size:14px; line-height:1;
  margin-top: 2px;                     /* оптика по высоте */
}

.stage-content{ flex:1; min-width:0; } /* не даём флексу ломать переносы */

.stage-content h4{
  margin: 2px 0 4px;
  line-height: 1.25;
  letter-spacing: .02em;               /* мягкий трекинг вместо «слипания» */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  font-kerning: normal;
}

.stage-content p{
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.01em;
}

/* Стили для слайдера этапов */
.stages-slider {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    height: auto;
    margin: 0 auto;
    /* background-color: #1B3C53; */
    position: relative;
    z-index: 10;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* Стили для второго слайдера */
.slider-container.stages-slider {
    margin-top: 40px; /* Убираем отступ сверху */
    margin-bottom: 40px; /* Добавляем отступ снизу */
}

.stages-slider .slider {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.stages-slider .slide-image {
    object-fit: cover;
    background: #1B3C53;
}

.stages-content-wrapper,
.slider-like-overlay {
  max-width: 700px;
}

.slider-container {
  max-width: 1100px;
  position: relative;
  z-index: 2;
}

/* Общие стили для кнопок */
/* Для скринридеров */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.social-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  padding: 15px 0;
}

/* Увеличиваем зону клика и добавляем эффекты */
.social-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border: 2px solid;
  position: relative;
  cursor: pointer;
  padding: 5px; /* Добавлено */
}

/* Стили для темного фона */
.dark-bg .social-btn {
  background-color: rgba(210, 193, 182, 0.1);
  border-color: #D2C1B6;
}
.dark-bg .social-btn:hover {
  background-color: rgba(210, 193, 182, 0.3);
}

.light-bg .social-btn:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Иконки (можно использовать SVG или Font Awesome) */
.social-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* Изменено с #D2C1B6 на currentColor */
  transition: all 0.3s ease;
}

/* для лучшей видимости */
.dark-bg .social-btn {
  color: #D2C1B6; /* Явно задаем цвет для темного фона */
}

.social-btn:hover {
  color: white; /* Цвет при наведении */
}

/* Подсказки при наведении */
.social-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(27,60,83,0.7);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
  white-space: nowrap;
}

.social-btn:hover::after {
  opacity: 1;
}
/* Цвета для разных кнопок */
.tg-btn:hover svg { fill: #0088cc; }
.wa-btn:hover svg { fill: #25D366; }
.call-btn:hover svg { fill: #34b7f1; }
/* Стили для intl-tel-input */
.iti {
    width: 100%;
}

.iti__flag-container {
    /* background: rgba(210, 193, 182, 0.1); */
    /* border: 1px solid #D2C1B6; */
    border-radius: 6px 0 0 6px;
}

.iti__selected-flag {
    background: transparent;
    color: #D2C1B6;
}

.iti__country-list {
    background: #000;
    border: 1px solid #D2C1B6;
    color: #F9F3EF;
}

.iti__country-list .iti__country {
    color: #F9F3EF;
}

.iti__country-list .iti__country:hover {
    background: rgba(210, 193, 182, 0.2);
}

@media (max-width: 768px) {
  .quiz {
    scroll-margin-top: 80px;
    padding-top: 20px;
  }
}

.quiz {
  scroll-margin-top: 300px;
}

.quiz-form .gold-button {
    border: 2px solid #D2C1B6 !important; /* Принудительно устанавливаем границу */
    background-color: rgba(210, 193, 182, 0.1) !important;
    padding: 12px 25px !important;
    border-radius: 8px !important;
}

.slide {
  opacity: 0;
  transition: opacity 0.8s ease;
}
.slide.active {
  opacity: 1;
}

.slide-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1B3C53;
}
/* ===== Технология хранения ===== */
.storage-tech-section{
  width:100%;
  padding: 60px 20px;
  background:#1B3C53;
}
.storage-tech-section .container{
  max-width:1200px; margin:0 auto;
}
.section-title{
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  color:#D2C1B6;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:20px;
  margin-bottom:8px;
}
.section-subtitle{
  text-align:center;
  color:#D2C1B6;
  opacity:.9;
  margin-bottom:18px;
  font-size:14px;
}
.controls-row{
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:center;
  margin-bottom:18px;
}
.controls-row .control{
  color:#D2C1B6;
  font-size:14px;
  display:flex; align-items:center; gap:8px;
}
.methods-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
}
.method-card{
  border: none;
  box-shadow: none;
  background: transparent;
  padding:14px;
  background: rgba(27,60,83,.85);
  backdrop-filter: blur(6px);
  box-shadow:0 10px 24px rgba(27,60,83,.4);
}
.method-card h3{
  color:#D2C1B6; font-family:'PlayfairDisplay-SemiBold',sans-serif;
  font-size:16px; margin-bottom:6px;
}
.method-meta{
  display:flex; gap:10px; flex-wrap:wrap; margin-bottom:8px;
  font-size:12px; color:#D2C1B6; opacity:.95;
}
.badge{
  border:1px solid #D2C1B6; border-radius:999px; padding:3px 8px;
}
.method-card p{ font-size:13px; color:#D2C1B6; opacity:.9; margin-bottom:8px; }
.method-list{ margin:0 0 8px 18px; color:#D2C1B6; font-size:13px; }
.method-list li{ margin:2px 0; }
.meta-line{ font-size:12px; opacity:.95; color:#D2C1B6; }
.calc-emph{ font-family:'PlayfairDisplay-SemiBold',sans-serif; }

.gold-button{ border:2px solid #D2C1B6; color:#D2C1B6; background:transparent; padding:8px 14px; border-radius:10px; cursor:pointer; }
.gold-button:hover{ background:rgba(205,162,102,.15); }
/* Общий стиль для всех текстовых полей и селектов */
input[type="text"],
input[type="tel"],
input[type="number"],
select {
  background: rgba(210, 193, 182, 0.10);
  border: 1px solid #D2C1B6;
  color: #D2C1B6;
  font-family: 'Inter', sans-serif;
  letter-spacing: var(--track-ui);
  font-size: 17px;
  line-height: 1.4;
  padding: 12px 10px;
  border-radius: 6px;
  box-sizing: border-box;
}

input::placeholder,
select::placeholder {
  color: rgba(210, 193, 182, 0.75);
}

/* На широкой — по две колонки, чтобы поля шли ровно сеткой */
@media (min-width: 540px){
  .calculator-card .calc-row{
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- 3) Кнопка: убираем абсолютное позиционирование и центрирование --- */
.smeta-button-wrapper {
  position: static !important;     /* больше не absolute */
  width: 100%;                     /* чтобы выровнять содержимое вправо */
  text-align: right;               /* кнопка у правого края */
  transform: none !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
}

/* немного «воздуха» от правого края, адаптивно */
.smeta-button-wrapper .smeta-button {
  margin-right: clamp(12px, 6vw, 40px);
}

@media (max-width: 768px) {
  .smeta-button-wrapper .smeta-button {
    margin-right: clamp(10px, 5vw, 28px);
  }
}


/* Вертикальные полосы по краям — на html, чтобы не конфликтовать с body::before */
:root { --rail-w: clamp(14px, 2.2vw, 26px); }

/* html::before,
html::after {
  content: '';
  position: fixed;
  top: 0; bottom: 0;
  width: var(--rail-w);
  background: #456882;
  pointer-events: none;
  z-index: 1000;        /* выше оверлея (998) и меню (см. ниже), но ниже шапки (1199) */
/*}
html::before { left: 0; }
html::after  { right: 0; } */

/* ===== Нижнее припиненное меню (мобайл-first) ===== */
:root{ --bottom-bar-h: 64px; }

/* фон нижнего бара — легче и прозрачнее */
.bottom-nav{
  border-top: 1px solid rgba(210,193,182,.65);
}

/* сами кнопки — прозрачные с рамкой, как раньше */
.bottom-btn{
  background: transparent !important;
  border: 2px solid #D2C1B6 !important;
  color: #D2C1B6 !important;
  box-shadow: none !important;
}

/* лёгкий hover */
.bottom-btn:hover{
  background: rgba(210,193,182,.14) !important;
}


/* Убираем «пульс» у нижних кнопок — чтобы не отвлекали */
.bottom-btn{ animation: none !important; }

.welcome-title {
  font-weight: bold;
  margin-bottom: 20px;
  font-size: clamp(10px, 5.2vw, 18px);
  margin: 0 0 10px;
}

.welcome-subtitle {
  font-size: 1rem;
  margin-bottom: 30px;
  line-height: 1.5;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 1.6px;
}

.welcome-btn {
  display: inline-block;
  padding: 12px 25px;
  border-radius: 10px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: bold;
  color: #e0d6cf;
  background: transparent;
  transition: all 0.3s ease;
}

.welcome-btn:hover {
  background-color: #e0d6cf;
  color: #1b3c53;
}
/* ===== Приветственный блок — компактные отступы на мобайле ===== */

.welcome-subtitle{
  font-size: 14px;
  line-height: 1.55;
  max-width: 680px;
  margin: 0 auto 18px;
  letter-spacing: 1.6px;
}
/* дополнительный отступ перед секцией #sauna,
   чтобы она не выглядывала на первом экране */
:root {
  --section-gap-sm: clamp(20px, 5vh, 40px);
  --section-gap-lg: clamp(40px, 10vh, 80px);
}
.welcome-section + .welcome-section {
  margin-top: var(--gap-md);
}
/* универсальная шкала трекинга */
:root{
  --track-tight:  -0.005em;   /* чуть плотнее, для крупных размеров */
  --track-normal:  0em;
  --track-wide:    0.02em;    /* +2% для коротких капс-заголовков */
  --track-wider:   0.03em;    /* +3% максимум для мобильного капса */
}
:root{
  --gap-sm: clamp(16px, 3.5vh, 28px);
  --gap-md: clamp(24px, 5vh, 40px);
  --gap-lg: clamp(36px, 7.5vh, 64px);
}

/* общие ритмы */
.welcome-section { margin-block: var(--gap-md); }
.logo1           { margin-block: var(--gap-lg); }

.smeta-button-wrapper{ margin-top: var(--gap-sm); }

/* убираем частные исключения */
#sauna{ margin-top: var(--gap-lg) !important; }
.container-narrow{
  width: min(92vw, 720px);
  margin-inline: auto;
  padding-inline: clamp(12px, 4vw, 24px);
}
.welcome-section > .welcome-title{ /* опционально: внутрь контейнера */
  display: block;
}
.VG{
  height: auto;
}
.VG .vg-image{
  display:block;
  margin-inline:auto;
  max-width: clamp(220px, 48vw, 420px);
  height: auto;
}
/* аккуратно: -0.02em ≈ -2% ширины */
.kk .t-1{ margin-left: -0.02em; }  /* напр.: Р после Б */
.kk .t-2{ margin-left: -0.015em; } /* напр.: А после Ж/Л/Р */
/* === HERO spacing (только первый экран) === */
/* отступ между слайдером и логотипом */
.main-slider + .VG{
  margin-top: 0 !important;
}
/* отступ между логотипом и слоганом-подзаголовком */
.VG + .welcome-section{
  margin-top: var(--gap-md) !important;
}
/* === FIX 1. Симметричный блок: слайдер → лого → слоган === */
.VG + .welcome-section{
  padding-top: 0 !important;             /* <- главный виновник большого зазора */
}
/* на всякий случай — без фикс-высоты у контейнера лого */
.VG{ height: auto !important; }
/* приводим ВСЕ поля к одной высоте 48px (чтобы не конфликтовало с 44px ниже по файлу) */
input[type="text"],
input[type="tel"],
input[type="number"],
select,
.form-group input,
.form-group select,
.iti input[type="tel"]{
  height: 48px !important;
  width: 100%;
}

/* левая часть телефона (флаг) той же высоты */
.iti--separate-dial-code .iti__selected-flag{ height: 48px; }

/* на всякий случай, чтобы ничего не «выпирало» за рамку карточки */
.slider-like-overlay{ overflow: hidden; }

@media (max-width: 768px){
  .quiz-form{
    padding-bottom: 16px !important;  /* было 80px */
    gap: 20px;                         /* было 35px — соберём форму плотнее */
    border-radius: 20px;
  }
}
.service-section {
  padding: 60px 20px;
  background: #1B3C53;
}
.service-section .container {
  max-width: 1200px;
  margin: 0 auto;
}
.content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .content-grid { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* На планшетах и выше — текст и картинка рядом */
@media (min-width: 768px) {
  #sauna .content-text {
    order: 1;
  }
}

/* Слои для #sauna */
#sauna {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

#sauna .content-text,
#sauna .section-title,
#sauna .section-subtitle,
#sauna .cta-wrapper {
  position: relative;
  z-index: 2;
  text-align: center;
}

#sauna .section-subtitle { margin-bottom: 14px; }
#sauna .content-text ul   { margin-bottom: 12px; }
#sauna .cta-wrapper       { margin-top: 12px; }
/* === Секция #sauna: фон-картинка и аккуратный список === */

/* картинку делаем фоном у контейнера */
#sauna {
  position: relative;
  background: url('/media/sauna1.png') center/contain no-repeat;
  border-top: none; /* убираем полосу */
  padding: 28px 16px;
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sauna::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(27,60,83,.65); /* затемняем для читаемости текста */
  z-index: 1;
}
#sauna .container {
  position: relative;
  z-index: 2;
}

/* текст */
#sauna .section-title,
#sauna .section-subtitle,
#sauna .content-text,
#sauna .cta-wrapper {
  text-align: center;
  margin-bottom: 14px;
}

/* кастомный список */
#sauna .content-text ul {
  list-style: none;
  padding: 0;
  margin: 12px auto 18px;
  max-width: 480px;
  text-align: left;
}
#sauna .content-text ul li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  line-height: 1.45;
}
#sauna .content-text ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 12px; height: 12px;
  border: 1px solid rgba(210,193,182,0.3);
  border-radius: 50%;
}

/* кнопка */
#sauna .cta-wrapper {
  margin-top: 16px;
}

/* глобально учитываем и шапку, и нижнее меню при scrollIntoView/якорях */
html{
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;                /* включаем кернинг */
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* фикс перекрытия */
  scroll-padding-bottom: var(--bottom-bar-h); /* высота нижнего меню */
}

/* убираем любые прежние смещения секции и задаём корректные поля */
#sauna{
  scroll-margin-bottom: var(--bottom-bar-h);
  padding-bottom: calc(var(--bottom-bar-h) + 12px); /* чтобы CTA не ушла под меню */
}

/* ---------- Список: отступы и аккуратные маркеры ---------- */
#sauna .container{
  padding-inline: clamp(16px, 4vw, 24px); /* отступы от «реек» по краям */
}

#sauna .content-text ul{
  list-style: none;
  margin: 14px 0 18px;
  padding-left: 0;                         /* убираем дефолтный padding UL */
  max-width: 44ch;                         /* удобная ширина строки */
  margin-inline: auto;                     /* центрируем весь список */
  text-align: left;
}

#sauna .content-text li{
  position: relative;
  padding-left: 30px;                      /* место под маркер */
  line-height: 1.5;
  margin-bottom: 10px;
}

#sauna .content-text li::before{
  content: '';
  position: absolute;
  left: 6px;                               /* чуть отодвигаем от края */
  top: 0.62em;                             /* выравниваем по центру строки */
  width: 12px; height: 12px;
  border: 1px solid rgba(210,193,182,0.3);
  border-radius: 50%;
  transform: translateY(-50%);
}
/* ——— SAUNA: корректная посадка якоря и запас под нижнее меню ——— */
#sauna{
  margin-top: 0 !important;
  scroll-margin-top: 90px;                 /* высота фикс-шапки */
  scroll-margin-bottom: var(--bottom-bar-h);
  padding: 24px 16px calc(var(--bottom-bar-h) + 14px); /* чтобы CTA не ушла под бар */
}
/* контейнер секции, чтобы контент не «лип» к рейкам */
#sauna .container{
  max-width:1200px;
    margin:0 auto;
    padding:0 16px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}

/* заголовок и подзаголовок */
#sauna .section-title{
  margin: 0 0 10px;
  line-height: 1.25;
  letter-spacing: .03em;
  text-align: center;
}
#sauna .section-subtitle{
  margin: 0 auto 14px;
  line-height: 1.55;
  max-width: 36ch;       /* золотой стандарт длины строки */
  text-align: center;
}

/* список — красиво и не у левого края */
#sauna .content-text ul{
  list-style: none;
  padding: 0;
  margin: 14px auto 18px;
  max-width: 44ch;
  text-align: left;
}
#sauna .content-text li{
  position: relative;
  padding-left: 30px;      /* место под маркер */
  margin-bottom: 12px;
  line-height: 1.5;
}
#sauna .content-text li::before{
  content: '';
  position: absolute;
  left: 6px; top: 0.62em;  /* ровно по центру строки */
  width: 12px; height: 12px;
  border: 1px solid rgba(210,193,182,0.3); border-radius: 50%;
  transform: translateY(-50%);
}

/* кнопка — чуть ближе к списку, но с запасом снизу под нижний бар */
#sauna .cta-wrapper{ margin-top: 10px; text-align: center; }
/* ===== FIX: закрываем незакрытый медиаблок выше ===== */
@media (min-width: 768px){}
/* ↑ просто пустое закрытие, чтобы восстановить синтаксис */

/* ===== SAUNA — финальная версия (фон + читаемый список + запас под нижний бар) ===== */
#sauna{
  position: relative;
  background: url('/media/sauna1.png') center/contain no-repeat;
  border-top: none;
  margin-top: 0 !important;
  scroll-margin-top: 90px;
  scroll-margin-bottom: var(--bottom-bar-h);
  padding: 24px 16px calc(var(--bottom-bar-h) + 14px);
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#sauna::before{
  content:'';
  position:absolute; inset:0;
  background: rgba(27,60,83,.65);
  z-index:1;
}
#sauna .container{
  position:relative; z-index:2;
  max-width:1200px; margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}
#sauna .section-title{ margin:0 0 10px; line-height:1.25; letter-spacing:.03em; text-align:center; }
#sauna .section-subtitle{ margin:0 auto 14px; line-height:1.55; max-width:36ch; text-align:center; }

/* красивый список */
#sauna .content-text ul{
  list-style:none;           /* отключаем дефолтные точки */
  padding:0;
  margin:14px auto 18px;
  max-width:44ch;
  text-align:left;
}
#sauna .content-text li{
  position:relative;
  padding-left:30px;         /* место под маркер */
  margin-bottom:12px;
  line-height:1.5;
}
#sauna .content-text li::before{
  content:'';
  position:absolute;
  left:6px; top:0.62em; transform:translateY(-50%);
  width:12px; height:12px;         /* ← тут был обрыв */
  border:2px solid #D2C1B6;
  border-radius:50%;
}
#sauna .cta-wrapper{ margin-top:10px; text-align:center; }

/* WORK STAGES — мобильный */
#work-stages{
  margin-top: 0px !important;
  scroll-margin-top: 90px;                    /* высота шапки */
  scroll-margin-bottom: var(--bottom-bar-h);  /* нижнее меню */
}

/* WORK STAGES — корректная посадка секции и контента */
.logo2{
  position: relative;
  top: 0 !important;                 /* гасим ошибочный сдвиг 33vh */
  height: auto !important;           /* вместо calc(140vh - 5px) */
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  overflow: visible !important;      /* не обрезаем содержимое */
  padding: 18px 0 22px;
  margin-bottom: clamp(24px, 6vh, 40px);  /* разделяем со следующим слайдером */
}
/* мини-кнопка внутри этапа — ведёт к форме */
.stage-chip{
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid rgba(210,193,182,0.3);
  border-radius: 9px;
  color: #D2C1B6;
  text-decoration: none;
  text-transform: none;
  letter-spacing: .02em;
  transition: background .25s ease, letter-spacing .2s ease, transform .2s ease;
}
.stage-chip:hover{
  background: rgba(210,193,182,.18);
  letter-spacing: .04em;
  transform: translateY(-1px);
}
/* chip-кнопка "консультация": красивое нажатие и фокус */
.stage-chip{
  -webkit-tap-highlight-color: transparent; /* без голубого прямоугольника */
  outline: none;
  user-select: none;
}
.stage-chip:active{
  background: rgba(210,193,182,.18);
  transform: translateY(0);                 /* без «подскакивания» при тапе */
}
.stage-chip:focus-visible{
  box-shadow: 0 0 0 2px #D2C1B6, 0 0 0 6px rgba(210,193,182,.28);
  outline: none;
}

/* это и должно быть на контейнере, а не на .logo2 */
.work-stages-container{
  position: static !important;
  top: 0 !important;
  margin: clamp(20px, 6vh, 36px) auto 28px !important;
}
/* ===== Соц-кнопки: читабельность на тёмном фоне ===== */
.social-buttons{ gap: 22px; }

.social-btn{
  width: 58px; height: 58px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; cursor: pointer;
  border: 1px solid rgba(210,193,182,0.3);
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}

/* тёмный фон в кружке — подложка под светлую иконку */
.dark-bg .social-btn{ 
  background: rgba(9, 28, 44, .85);   /* темнее, чем #1B3C53 */
  color: #EADFD8;                     /* сам цвет иконки */
}
.social-btn:hover{ 
  transform: translateY(-2px);
  background: rgba(13, 42, 64, .95);
  border-color: #EADFD8;
}

/* сами пиктограммы крупнее и с чётким очертанием */
.social-btn svg{
  width: 28px !important; height: 28px !important;
  fill: currentColor;                  /* светлая заливка */
  stroke: currentColor;                /* и штрих на случай тонких линий */
  stroke-width: 1.3;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* фирменные подсветки при ховере */
.tg-btn:hover{ color:#62B0E8; }
.wa-btn:hover{ color:#25D366; }
.call-btn:hover{ color:#94C2FF; }
/* ===== Кнопка звонка в шапке ===== */
/* Телефон в шапке (без кружка) */
/* Кнопка звонка в шапке — ровно по центру, без "кружка" */

.header-call:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Соц-кнопки — гарантированная читаемость */
.social-buttons{ gap: 18px; }
.social-btn{
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: rgba(210,193,182,.10);   /* светлый, контрастный фон */
  color: var(--accent);                /* svg наследует currentColor */
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.social-btn svg{ width: 26px; height: 26px; }
.social-btn:hover{ transform: translateY(-2px); background: rgba(210,193,182,.22); }
.social-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; }

/* Брендовые ховеры — чуть насыщеннее, но не кислотно */
.tg-btn:hover{ color:#229ED9; }      /* Telegram */
.wa-btn:hover{ color:#25D366; }      /* WhatsApp */
.call-btn:hover{ color:#F9F3EF; background: rgba(210,193,182,.28); } /* звонок */

/* ========== Кнопка звонка в шапке: без кружка, читабельно ========== */
/* Кнопка звонка в шапке — ровно по центру, без "кружка" */
.header-call{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height: 36px;
  padding: 0 8px;
  margin-right: 8px;                  /* между трубкой и бургером */
  border-radius: 50%;

  color: #D2C1B6;
  border: 1px solid rgba(210,193,182,0.5);

  transition: all 0.3s ease;
}
.header-call svg{
  display:block;
  width: 18px;
  height: 18px;
  transform: translateX(0);           /* убираем сдвиг вправо */
  color: #D2C1B6;
  fill: currentColor;
}

.header-call:hover {
  background: rgba(210,193,182,0.15);
  transform: scale(1.1);
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000;

  transition: all 0.4s ease;

  background: transparent;
  backdrop-filter: blur(0px);
}

/* состояние при скролле */
header.scrolled {
  background: rgba(27, 60, 83, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border-bottom: 1px solid rgba(210,193,182,0.4);
}

.header-call:hover{ color:#F9F3EF; }     /* подсветка трубки */
/* CTA-кнопки: бежевый фон по умолчанию */
.smeta-button,
.gold-button{
  background: #D2C1B6 !important;
  color: #1B3C53 !important;
  border: 2px solid #D2C1B6 !important;
  box-shadow: 0 8px 20px rgba(27,60,83,.35);
}
.smeta-button:hover,
.gold-button:hover{
  background: #e2d6ce !important;
   letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
}
/* деликатные разделители и подчёркивания заголовков */
.work-stages-slider{
  box-shadow: 0 10px 30px rgba(69,104,130,.35);         /* #456882 с альфой */
}
.stage-item{ border-bottom: 1px solid rgba(69,104,130,.35); }
.stages-title{
  position:relative; padding-bottom:8px;
}
.stages-title::after{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:0; width:120px; height:3px; border-radius:2px;
  background:#456882;
}
/* Кружки на фирменном светлом бежевом фоне */
.dark-bg .social-btn{
  background-color: rgba(210,193,182, .12); /* #D2C1B6 с прозрачностью */
  border-color: #D2C1B6;
  color: #D2C1B6;                            /* цвет самих иконок */
}
.dark-bg .social-btn:hover{
  background-color: rgba(210,193,182, .28);
}

/* Иконки внутри кружков — строго по центру */
.social-btn svg{
  width: 24px;
  height: 24px;
  display:block;
  margin: 0;
  transform: none;
  fill: currentColor;
}

/* для трубки иногда нужно микро-компенсацию курса */
.call-btn svg,
.header-call svg{
  transform: translateX(-0.5px); /* выравнивание по оптике */
}
.slider{
  box-shadow: 0 10px 30px rgba(69,104,130,.35); /* #456882 */
}
/* === Bottom bar: фиксируем, поднимаем над всем, делаем полупрозрачной === */
:root{ --bottom-bar-h: 64px; }

.bottom-btn{
  background: transparent !important;
  color: #F9F3EF !important;
  border: 1px solid rgba(210,193,182,.75) !important;
  border-radius: 10px !important;
  text-align:center;
  padding: 10px 6px !important;
  font-size: 12px !important;
  letter-spacing: 2px !important;
}
/* Круглые иконки соцсетей/звонка */
.social-buttons{gap: 18px;display: none;}
.social-btn{
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(210,193,182,0.3);
  background: rgba(27,60,83,.35);        /* фирменный тёмно-синий с прозрачностью */
  display: grid; place-items: center;
  color: #D2C1B6;
}
.social-btn svg{
  display:block;
  width: 28px; height: 28px;
  margin: 0 auto;                          /* центрируем */
  overflow: visible;
}
.social-btn.phone svg{ width:26px; height:26px; } /* чуть меньше, чтобы точно не резало */
.smeta-button,
.gold-button{
  background: rgba(210,193,182,.15); /* #D2C1B6, прозрачно */
  border: 1px solid rgba(210,193,182,0.3);
  color: #F9F3EF;
}
.smeta-button:hover,
.gold-button:hover{
  background: rgba(210,193,182,.25);
}
.card, .steps-card, .quiz-form, .slider-like-overlay {
  background: rgba(69,104,130,.22); /* #456882 с прозрачностью */
  border: 1px solid rgba(210,193,182,.65);
}
/* === Секция #hamam: фон-картинка и аккуратный список === */
#hamam {
  position: relative;
  background: url('/media/8.png') center/cover no-repeat;
  padding: 28px 16px;
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#hamam::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 60, 83, .65); /* затемняем для читаемости текста */
  z-index: 1;
}

#hamam .container {
  position: relative;
  z-index: 2;
}

#hamam .section-title,
#hamam .section-subtitle,
#hamam .content-text,
#hamam .cta-wrapper {
  text-align: center;
  margin-bottom: 14px;
}
/* === Секция #detailing: фон-картинка и аккуратный список === */
#detailing {
  position: relative;
  background: url('/media/9-3.png') center/cover no-repeat;
  padding: 28px 16px;
  min-height: calc(100vh - var(--bottom-bar-h) - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#detailing::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(27, 60, 83, .65); /* затемнение для текста */
  z-index: 1;
}

#detailing .container {
  position: relative;
  z-index: 2;
}

#detailing .section-title,
#detailing .section-subtitle,
#detailing .content-text,
#detailing .cta-wrapper {
  text-align: center;
  margin-bottom: 14px;
}
/* ===== ЕДИНЫЙ СТИЛЬ ДЛЯ ТРЁХ СЕКЦИЙ: сауна / хамам / детейлинг ===== */

/* общие слои и ритм */
#sauna, #hamam, #detailing{
  position: relative;
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* padding: 24px 16px calc(var(--bottom-bar-h) + 14px); */ /* запас под нижнее меню */
  min-height: calc(100vh - var(--bottom-bar-h) - 70px); /* как у сауны */
  border-top: none;
  margin-top: 0 !important;
  scroll-margin-top: 90px;                 /* высота фикс-шапки */
  scroll-margin-bottom: var(--bottom-bar-h);
}
#sauna .container, #hamam .container, #detailing .container{
  position: relative;
  z-index: 2;
  max-width: 720px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}

/* затемняющая вуаль */
#sauna::before, #hamam::before, #detailing::before{
  content:'';
  position: absolute; inset: 0;
  background: rgba(27,60,83,.65);
  z-index: 1;
}

/* типографика и выравнивание */
#sauna .section-title, #hamam .section-title, #detailing .section-title{
  margin: 0 0 10px; line-height: 1.25; letter-spacing: .03em; text-align: center;
}
#sauna .section-subtitle, #hamam .section-subtitle, #detailing .section-subtitle{
  margin: 0 auto 14px; line-height: 1.55; max-width: 36ch; text-align: center;
}
#sauna .content-text, #hamam .content-text, #detailing .content-text,
#sauna .cta-wrapper, #hamam .cta-wrapper, #detailing .cta-wrapper{
  text-align: center; margin-bottom: 14px;
}
#sauna .cta-wrapper, #hamam .cta-wrapper, #detailing .cta-wrapper{margin-top: 10px;}

/* единый аккуратный список с «кольцами» */
#sauna .content-text ul, #hamam .content-text ul, #detailing .content-text ul{
  list-style: none;
  padding: 0;
  margin: 14px auto 18px;
  max-width: 44ch;
  text-align: left;
}
#sauna .content-text li, #hamam .content-text li, #detailing .content-text li{
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  line-height: 1.5;
}
#sauna .content-text li::before, #hamam .content-text li::before, #detailing .content-text li::before{
  content: '';
  position: absolute;
  left: 6px; top: 0.62em;
  width: 12px; height: 12px;
  border: 1px solid rgba(210,193,182,0.3);
  border-radius: 50%;
  transform: translateY(-50%);
}

/* фоны — как у сауны (contain, центр, без повторов) */
#sauna{    background: url('/media/sauna1.png') center/contain no-repeat; }
#hamam{    background: url('/media/8.png')       center/contain no-repeat; }
#detailing{background: url('/media/9-3.png')     center/contain no-repeat; }
/* Заголовок в блоке этапов: подчёркиваем весь текст */
.stages-title{
  display:inline-block;
  margin: 0 auto 18px;
  text-decoration-line: underline;
  text-decoration-color: rgba(210,193,182,.7);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}
.stages-title::after{ content:none !important; } /* гасим старую короткую линию */
/* Корректная посадка секции этапов относительно фикс-баров */
#work-stages{
  scroll-margin-top: 90px;
  scroll-margin-bottom: calc(var(--bottom-bar-h) + 16px);
}
#work-stages .work-stages-slider{
  padding-bottom: calc(var(--bottom-bar-h) + 24px) !important; /* чтобы кнопки связи не резались */
}
/* ===== WORK STAGES — компактнее и корректный якорь ===== */

/* сама секция: убираем лишнюю высоту и отступы */
.logo2{                           /* #work-stages */
  min-height: auto !important;    /* вместо 100vh-… */
  padding: 12px 0 8px !important; /* было 18px 0 22px */
}

/* контейнер и карточка: меньше внешних/внутренних отступов */
.work-stages-container{
  margin: 12px auto 10px !important;   /* было clamp(20px,6vh,36px) … 28px */
}

/* нормируем прокрутку: учитываем шапку и нижний бар без излишков */
#work-stages{
  scroll-margin-top: 85px;                  /* header(≈70)+воздух */
  scroll-margin-bottom: var(--bottom-bar-h);
}

/* если ранее добавляли «запас» внизу — отключаем */
#work-stages .work-stages-slider{
  padding-bottom: 18px !important;
}
/* ===== AURAPARA: единый стиль карточек (форма = этапы) ===== */

/* 1) Хром карточки (фон, рамка, скругления, тень, отступы) */
.slider-like-overlay,
.work-stages-slider{
  background: rgba(27,60,83,0.88) !important;
  border: 2px solid #D2C1B6 !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 36px rgba(27,60,83,0.45) !important;
  backdrop-filter: blur(6px);
}

/* 2) Единый заголовок карточек */
.form-title,
.stages-title{
  font-family:'PlayfairDisplay-SemiBold',sans-serif;
  color:#D2C1B6;
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:18px;
  line-height:1.6;
  margin: 4px 0 14px !important;
  text-align:center;
  text-shadow:1px 1px 3px rgba(27,60,83,0.3);
  /* underline по всей ширине текста */
  /* text-decoration-line: underline; */
  text-decoration-color: rgba(210,193,182,.7);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}
/* если у stages-title где-то рисуется псевдо-линия — выключим */
.stages-title::after{ content:none !important; }

/* 3) Ритм контента внутри карточек — один и тот же отступ снизу */
.slider-like-overlay > *:last-child,
.work-stages-slider > *:last-child{ margin-bottom: 0 !important; }

/* 4) Низ карточки не «режется» нижним меню на мобиле */
@media (max-width: 768px){
  .slider-like-overlay,
  .work-stages-slider{ padding-bottom: 24px !important; }
}

/* 5) Списки в этапах — тот же аккуратный вид (чтобы совпадало с остальными списками сайта) */
.work-stages-slider .stage-item{
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid rgba(210,193,182,.18) !important;
}
.work-stages-slider .stage-item:last-child{
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 6) Кнопка в форме и любые CTA внутри карточек выглядят одинаково */
.slider-like-overlay .gold-button,
.work-stages-slider .gold-button,
.work-stages-slider .smeta-button{   /* на будущее, если добавишь CTA внутрь этапов */
  background: rgba(210,193,182,.10) !important;
  border: 2px solid #D2C1B6 !important;
  color: #D2C1B6 !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  transition: all .3s ease;
}
.slider-like-overlay .gold-button:hover,
.work-stages-slider .gold-button:hover,
.work-stages-slider .smeta-button:hover{
  background: rgba(210,193,182,.20) !important;
    letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
}

button, .btn, .gold-button {
  border: none !important;
}

/* 7) Единые внешние отступы контейнеров этих карточек */
.work-stages-container{ margin: 16px auto 18px !important; }
.intersection-overlay{ margin-top: 0 !important; } /* форма сразу после секций смотрится так же плотно */
/* Сетка карточек материалов */
.materials-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  margin-top: 16px;
}

.material-card{
  background: rgba(27,60,83,.55);
  border: 2px solid rgba(210,193,182,.35);
  border-radius: 14px;
  overflow: hidden;
  backdrop-filter: blur(2px);
}

.material-thumb{
  aspect-ratio: 4/3;
  overflow: hidden;
}

.material-thumb img{
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.material-body{ padding: 12px 14px; }
.material-name{
  color: #D2C1B6; margin: 0 0 6px;
  font-size: 16px; letter-spacing: .02em;
}
.material-desc{ margin: 0; line-height: 1.5; }
/* Материалы отделки: одинаковые отступы, как у формы */
.storage-tech-section .container{
  padding-inline: 20px;                 /* воздух от боковых полос */
  width: calc(100% - 40px);             /* как у slider-like-overlay */
  max-width: 1200px;
  margin: 0 auto;
}

.materials-grid{
  margin-top: 20px;
}

/* === Этапы сотрудничества: такие же боковые отступы, как у формы === */
.work-stages-container{
 
  max-width: 1200px !important;
  margin: clamp(16px, 5vh, 28px) auto !important;
}

.work-stages-slider{
  padding: 26px 20px !important;         /* как у формы */
}
/* === FIX: social-icons — выравнивание и вид WhatsApp === */
.social-links a {
  width: 64px; height: 64px;                 /* одинаковые размеры кружков */
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
  background: transparent;
}
.social-links a svg {
  width: 28px; height: 28px;                 /* одинаковый размер везде */
}
.social-links a.whatsapp {
  background: #25D3661a;                     /* деликатный фон */
  border-color: #25D366;
}
.social-links a.whatsapp svg {
  fill: #25D366;                             /* «фирменный» цвет иконки */
}
/* === FIX: intl-tel-input выравнивание === */
.iti { width: 100%; }
.iti input[type="tel"],
.iti input[type="text"] {
  height: 52px;                               /* ваша высота поля */
  padding-left: 74px;                         /* с запасом под флаг + код */
  line-height: 52px;
}
.iti__flag-container {
  height: 52px;
}
.iti__selected-flag {
  height: 100%;
  padding: 0 10px;
  border-right: 1px solid rgba(255,255,255,.25); /* тонкий разделитель */
  background: transparent;                       /* убираем серый фон */
}
.iti__selected-flag .iti__flag { transform: translateY(0); }
.phone-block {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #D2C1B6;
  font-weight: bold;
}

.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
.section-features-title {
  text-align: center;
  margin-bottom: 20px;
}
@media (max-width: 768px){

  #sauna {
    padding: 0 16px;
  }

  #sauna .content-image {
    border-radius: 16px;
    overflow: hidden;
  }

}

.stage-item {
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow-soft);

  transition: all 0.3s ease;
}

.stage-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
}

header.scrolled {
  background: rgba(27,60,83,0.65);
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

section {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-bottom: 160px;
}

body {
  background: radial-gradient(
    circle at 50% 0%,
    #244a63 0%,
    #1B3C53 60%
  );
}

h1, .hero-title {
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.2;
  letter-spacing: 0.02em;
  font-family: 'Playfair Display', serif;
}

h2, .section-title {
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h3 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.02em;
}

.icon-btn {
  box-shadow: var(--shadow-soft);
}

.icon-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
}

@media (max-width: 768px){
  .slider img {
    max-width: 100%;
    height: auto;
    object-fit: cover;
  }
  .slider-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
  .slider-nav a {
    font-size: 30px;
    color: white;
    text-decoration: none;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 50%;
}

.slider-nav a:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

}



.hero {
  position: relative;
  min-height: 100vh;
  z-index: 1;
  display: contents;
  align-items: center;
  justify-content: center;
  text-align: center;

  overflow: hidden;
}

/* ГРАДИЕНТ ГЛУБИНЫ */
.hero-bg {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 30% 20%, rgba(210,193,182,0.12), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(210,193,182,0.08), transparent 50%),
    linear-gradient(180deg, #1B3C53 0%, #162F40 100%);
}

/* ШУМ — ПРЕМИУМ ЭФФЕКТ */
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  pointer-events: none;
}

/* КОНТЕНТ */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 0 20px;
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.hero-title span {
  color: #D2C1B6;
}

.hero-subtitle {
  margin-top: 16px;
  opacity: 0.8;
  font-size: 16px;
}

/* КНОПКИ */
.hero-actions {
  margin-top: 32px;
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-button {
  padding: 14px 28px;
  border-radius: 999px;
  letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
  text-transform: uppercase;
  transition: 0.3s;
  color: #1B3C53;
  text-decoration: none;
  font-weight: 700;
}

.hero-button.primary {
  background: #b7a79d;
  color: #1B3C53;
}

.hero-button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(210,193,182,0.3);
}

.hero-button.ghost {
  background: transparent;
  border: 1px solid rgba(210,193,182,0.6);
  color: #D2C1B6;
}

.hero-button.ghost:hover {
  background: rgba(210,193,182,0.1);
}

.cta {
  text-align: center;
  margin: 40px 0;
}

.cta-button {
  padding: 16px 32px;
  background: #D2C1B6;
  color: #1B3C53;
  text-decoration: none;
  border-radius: 30px;
  font-weight: 600;
  display: inline-block;
}

.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 20px;
  height: 30px;

  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 10px;

  transform: translateX(-50%);
}

.scroll-indicator::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 6px;
  background: white;
  border-radius: 2px;

  transform: translateX(-50%);
  animation: scrollAnim 1.5s infinite;
}

@media (max-width: 768px){
  .contact-form {
    padding: 16px;
  }
}

@keyframes scrollAnim {
  0% { opacity: 0; transform: translate(-50%, 0); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 10px); }
}

.trust {
  padding: 80px 20px;
  text-align: center;
}

.trust-container {
  max-width: 1000px;
  margin: 0 auto;
}

.trust-title {
  font-size: 26px;
  margin-bottom: 10px;
}

.trust-subtitle {
  opacity: 0.7;
  margin-bottom: 50px;
}

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.trust-item {
  padding: 24px;
  border-radius: 16px;

  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);

  transition: 0.3s;
}

.trust-item:hover {
  transform: translateY(-5px);
}

.trust-item h3 {
  font-size: 28px;
  margin-bottom: 10px;
}

.trust-item p {
  font-size: 14px;
  opacity: 0.8;
}

.contacts {
  text-align: center;
  padding: 80px 20px;
}

.contacts-logo {
  width: 220px;
  margin-bottom: 20px;
}

.contacts-info p {
  margin: 6px 0;
  opacity: 0.8;
}

.header-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;

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

  border: 1px solid rgba(210,193,182,0.5);
  color: #D2C1B6;
}

.header-icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition: 1s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.slider {
  border-radius: 16px;
}

.slide-image {
  transform: scale(1.02);
  transition: transform 6s ease;
}

.slide.active .slide-image {
  transform: scale(1.08);
}

a, button {
  transition: all 0.25s ease;
}

a:hover {
  opacity: 0.8;
}

.hero-button:active {
  transform: scale(0.96);
}

section {
  position: relative;
  overflow: hidden;
  margin-bottom: 0px;
}

section::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* background: radial-gradient(circle at center,
    transparent 60%,
    rgba(0,0,0,0.2) 100%); */
}

.cta-premium {
  text-align: center;
  padding: 80px 20px;
}

.cta-premium h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.slider {
  aspect-ratio: 16/9;
  min-height: 320px;
}

/* === PREMIUM SLIDER === */

.premium-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 24px;
  overflow: hidden;

  box-shadow: 
    0 40px 120px rgba(0,0,0,0.5),
    inset 0 0 60px rgba(0,0,0,0.2);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.slide.active {
  z-index: 2;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1);
  transition: transform 6s ease;
}

/* 🔥 ПРЕМИУМ ZOOM */
.slide.active .slide-image {
  transform: scale(1.08);
}

/* затемнение краёв */
.premium-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.4));
  pointer-events: none;
}

.slider-container {
  display: flex !important;
  justify-content: center !important;
}

.premium-slider {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

.slider-container {
  margin-bottom: 80px !important;
}

.header-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;

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

  border: 1px solid rgba(210,193,182,0.5);
  border-radius: 50%;
}

.header-icon svg {
  width: 18px;
  height: 18px;
}

.slider-like-overlay {
  border: none !important;
  box-shadow: none !important;
}

.work-stages-actions .action-btn {
  color: #D2C1B6;
}

.work-stages-slider {
  border: none !important;
  box-shadow: none !important;
}

:root{
  --container: 1100px;
  --gap: clamp(16px, 4vw, 40px);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  margin-top: 0px;
}

.gold-button,
.bottom-btn {
   letter-spacing: var(--track-ui);
  font-size: 13px;
  line-height: 1.4;
}

/* === FIX OVERRIDES === */

.slide { opacity: 0; transition: opacity .8s ease !important; }
.slide.active { opacity: 1 !important; }

/* ========================= */
/*       ТИПОГРАФИКА         */
/* ========================= */

:root {
  --text-main: #F9F3EF;
  --text-accent: #D2C1B6;

  --font-main: 'Inter', sans-serif;
  --font-title: 'Playfair Display', serif;

  --lh-base: 1.6;
  --lh-tight: 1.3;

  --ls-normal: 0.01em;
  --ls-wide: 0.04em;
}

/* УБИРАЕМ КОНФЛИКТ */
* {
  font-family: var(--font-main);
}

/* БАЗА */
body {
  font-size: 16px;
  line-height: var(--lh-base);
  letter-spacing: var(--ls-normal);
  color: var(--text-main);
  padding-top: 64px;
}

/* ========================= */
/*         ЗАГОЛОВКИ         */
/* ========================= */

h1, h2, h3 {
   font-family: 'Playfair Display', serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

/* HERO */
.hero-title {
  font-size: clamp(32px, 5vw, 48px);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 18px;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

/* ========================= */
/*         ТЕКСТ             */
/* ========================= */

p {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
  max-width: 60ch;
}

/* ========================= */
/*        КНОПКИ             */
/* ========================= */

button,
.btn,
.gold-button {
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 14px;
}

/* УБИРАЕМ ПЕРЕБОР НА ХОВЕРЕ */
button:hover,
.btn:hover,
.gold-button:hover {
  letter-spacing: 0.06em;
}

/* ========================= */
/*       МЕНЮ                */
/* ========================= */

.bottom-btn {
  letter-spacing: 0.04em;
  font-size: 14px;
}

/* ========================= */
/*       ЭТАПЫ               */
/* ========================= */

.stage-content h4 {
  font-size: 16px;
  letter-spacing: 0.02em;
}

.stage-content p {
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

/* ========================= */
/*      TRUST БЛОК           */
/* ========================= */

.trust-title {
  font-size: 24px;
  letter-spacing: 0.05em;
}

.trust-item h3 {
  font-size: 28px;
  letter-spacing: 0.02em;
}

.trust-item p {
  font-size: 14px;
  opacity: 0.9;
}

/* ========================= */
/*      PREMIUM RESET        */
/* ========================= */

:root {
  --accent: #D2C1B6;
  --text: #F9F3EF;
  --text-soft: rgba(249,243,239,0.65);
}

/* убираем весь визуальный шум */
* {
  text-shadow: none !important;
}

/* ========================= */
/*         ТЕКСТ             */
/* ========================= */

p {
  color: var(--text-soft);
}

/* ========================= */
/*         КНОПКИ            */
/* ========================= */

.gold-button,
.btn,
button {
  background: transparent;
  border: 1px solid rgba(210,193,182,0.35) !important;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 13px;
  transition: all .25s ease;
}

/* Ховер — тонкий, не цирк */
.gold-button:hover,
.btn:hover {
  background: rgba(210,193,182,0.08);
  border-color: var(--accent);
}

/* ========================= */
/*         КАРТОЧКИ          */
/* ========================= */

.work-stages-slider,
.material-card,
.method-card {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* ========================= */
/*         ЗАГОЛОВКИ         */
/* ========================= */

h1, h2, h3 {
  color: var(--text);
}

/* вторичный текст */
.hero-subtitle,
.trust-subtitle {
  color: var(--text-soft);
}

/* ========================= */
/*       ЦИФРЫ TRUST         */
/* ========================= */

.trust-item h3 {
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.trust-item p {
  font-size: 14px;
  color: var(--text-soft);
}

/* ========================= */
/*        ИКОНКИ             */
/* ========================= */

.header-icon,
.action-btn {
  border: 1px solid rgba(210,193,182,0.25);
}

.header-icon:hover,
.action-btn:hover {
  background: rgba(210,193,182,0.08);
}

/* ========================= */
/*       УБИРАЕМ "КОЛХОЗ"    */
/* ========================= */

/* никакого увеличения spacing */
button:hover,
{
letter-spacing: 0.04em !important;
  transform: none !important;
}

@media (max-width: 768px) {

  .header-actions {
    gap: 6px;
  }

  .header-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
  }

}

@media (max-width: 768px) {
  .header-icon:nth-child(1), /* telegram */
  .header-icon:nth-child(2)  /* whatsapp */ {
    display: flex;
  }
}

.logo {
  flex-shrink: 0;
}

.header-actions {
  z-index: 1000;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ===== БУРГЕР ===== */
.burger {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 5000;
}

.burger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #D2C1B6;
  left: 0;
  transition: 0.3s;
}

.burger span:nth-child(1){ top: 0; }
.burger span:nth-child(2){ top: 8px; }
.burger span:nth-child(3){ bottom: 0; }

/* крестик */
.burger.active span:nth-child(1){
  transform: rotate(45deg);
  top: 8px;
}
.burger.active span:nth-child(2){
  opacity: 0;
}
.burger.active span:nth-child(3){
  transform: rotate(-45deg);
  bottom: 8px;
}

/* ===== МЕНЮ ===== */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  background: #1B3C53;
  padding: 80px 20px;
  transition: 0.3s;
  z-index: 4000;
}

.mobile-menu.open {
  right: 0;
}

.mobile-menu a {
  display: block;
  color: #D2C1B6;
  margin-bottom: 20px;
  text-decoration: none;
  text-transform: uppercase;
}

.stage-slide {
  display: none;
  text-align: center;
}

.stage-slide.active {
  display: block;
}

/* ===== БУРГЕР ===== */
.burger {
  width: 30px;
  height: 20px;
  position: relative;
  cursor: pointer;
  z-index: 5000;
}

.burger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #D2C1B6;
  left: 0;
  transition: 0.3s;
}

.burger span:nth-child(1){ top: 0; }
.burger span:nth-child(2){ top: 8px; }
.burger span:nth-child(3){ bottom: 0; }

.burger.active span:nth-child(1){
  transform: rotate(45deg);
  top: 8px;
}
.burger.active span:nth-child(2){
  opacity: 0;
}
.burger.active span:nth-child(3){
  transform: rotate(-45deg);
  bottom: 8px;
}

/* ===== МЕНЮ ===== */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  background: #1B3C53;
  padding: 80px 20px;
  transition: 0.3s;
  z-index: 4000;
}

.mobile-menu.open {
  right: 0;
}

.burger {
  position: relative;
  z-index: 9999;
}

header {
  position: relative;
  z-index: 3000;
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.logo {
  flex-shrink: 0;
}

.burger {
  flex-shrink: 0;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

 height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;

.logo-img {
  height: 22px;
}

.header-icon,
.header-call {
  width: 36px;
  height: 36px;
}

button,
a,
.hero-button,
.bottom-btn,
.mobile-menu a {
  font-family: sans-serif;
}

.hero-title {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.hero-title span {
  color: #D2C1B6;
}

.hero-subtitle {
  font-size: 18px;
  opacity: 0.7;
  margin-top: 16px;
}

.slider {
  display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.slider .slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slider .slide {
    min-width: 100%;
    object-fit: cover;
}

.slick-slide img {
    display: block;
    margin: 0 auto;
}

.slide-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tg-btn svg {
  fill: #0088cc;
}

.slider-container {
  width: 100%;
  overflow: hidden;
}

.premium-slider {
  width: 100%;
}

.mobile-menu {
  position: fixed;
  top: 64px;
  right: 10px;

  width: 260px;
  height: auto;

  background: rgba(27,60,83,0.9);
  backdrop-filter: blur(12px);

  border-radius: 12px;
  padding: 20px;

  transform: translateY(-10px);
  opacity: 0;
  pointer-events: none;

  transition: 0.25s ease;
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  border: 1px solid #7d7777;
  border-radius: 0;
  border-bottom-left-radius: 39px;
}

.contacts-block {
  max-width: 420px;
  margin: 0 auto;
  padding: 30px 20px;

  text-align: center;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* заголовок */
.contacts-title {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  color: #F9F3EF;
  margin-bottom: 10px;
}

/* текст */
.contacts-info {
  display: flex;
  flex-direction: column;
  gap: 10px;

  font-size: 14px;
  line-height: 1.6;
  color: rgba(249,243,239,0.85);
}

/* ссылки */
.contact-link {
  color: #F9F3EF;
  text-decoration: none;
  font-weight: 500;
}

.contact-link:hover {
  opacity: 0.7;
}

.contacts-block {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}

footer {
    background-color: #1c1c1c;
    color: #fff;
    padding: 20px 0;
    text-align: center;
    position: relative;
    bottom: 0;
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.footer-links a {
    color: #f1f1f1;
    margin: 0 10px;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

#privacy-policy {
    max-width: 1000px;
    margin: 50px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#privacy-policy h2 {
    font-size: 24px;
    margin-bottom: 15px;
}

#privacy-policy h3 {
    font-size: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
}

#privacy-policy p {
    font-size: 16px;
    line-height: 1.6;
}

header .messenger {
    display: inline-block;
    margin-left: 10px;
}

header .messenger img {
    width: 30px;
    height: auto;
}

.folder-gallery {
  padding: 40px 0 70px;
  background: none;
}

.folder-gallery-inner {
  position: relative;
  overflow: visible !important;
  width: 100%;
  margin: 0 auto;
}

.folder-slider-frame {
  width: min(72vw, 760px);
  aspect-ratio: 4 / 3;
  margin: 0 auto;
  overflow: hidden;
  border: none !important;
  background: rgba(0,0,0,0.18);
}

.folder-slider {
  position: relative;
  width: 100%;
  height: 100%;
}

.folder-slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s ease;
}

.folder-slider .slide.active {
  opacity: 1;
  pointer-events: auto;
}

.folder-slider .slide-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.folder-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;

  width: 52px;
  height: 52px;
  border: 0;
  background: transparent;
  color: #F9F3EF;

  font-family: Inter, sans-serif;
  font-size: 56px;
  line-height: 1;
  cursor: pointer;
}

.folder-slider-prev {
  left: -20px;
}

.folder-slider-next {
  right: -20px;
}

@media (max-width: 768px) {
  .folder-gallery {
    padding: 0;
    margin-top: 50px;
  }

  .folder-slider-frame {
    width: calc(100vw - 32px);
    aspect-ratio: 4 / 3;
    border-radius: 16px;
  }

  .folder-slider-arrow {
    width: 38px;
    height: 38px;
    font-size: 38px;
  }

  .folder-slider-prev {
    left: 5px;
    border: 0px !important;
  }

  .folder-slider-next {
    right: 0px;
    border: 0px !important;
  }
}

.header-icon img{
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) saturate(100%)
          invert(84%) sepia(15%)
          saturate(265%)
          hue-rotate(337deg)
          brightness(93%)
          contrast(87%);
}

/* ================================================= */
/* HEADER PHONE */
/* ================================================= */

.header-phone{
  position: relative;
  display: flex;
  align-items: center;
}

/* меню */
.call-menu{
  position: absolute;

  top: calc(100% + 12px);
  right: 0;

  min-width: 240px;

  padding: 14px;

  display: flex;
  flex-direction: column;
  gap: 12px;

  background: rgba(27,60,83,.98);

  border: 1px solid rgba(210,193,182,.35);
  border-radius: 14px;

  backdrop-filter: blur(16px);

  box-shadow:
    0 10px 40px rgba(0,0,0,.35);

  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);

  transition: .25s ease;

  z-index: 9999;
}

/* активное меню */
.call-menu.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ссылки */
.call-menu a{
  color: #D2C1B6;
  text-decoration: none;

  font-family: 'Inter', sans-serif;

  transition: .2s ease;
}

.call-phone{
  font-size: 16px;
  font-weight: 500;
}

.call-request{
  font-size: 13px;

  border: 1px solid rgba(210,193,182,.4);
  border-radius: 10px;

  padding: 10px 12px;

  text-align: center;
}

.call-menu a:hover{
  background: rgba(210,193,182,.08);
}

/* ================================================= */
/* MOBILE */
/* ================================================= */

@media (max-width: 768px){

  .call-menu{
    right: -10px;
    min-width: 210px;
  }

}

.header-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* =========================
   COMPACT FOOTER
========================= */

footer {
  width: 100%;
  background: #16364a;
  border-top: 1px solid rgba(210,193,182,0.25);

  padding: 14px 16px 10px;
  margin-top: 40px;

  position: relative;
  z-index: 20;
}

.footer-content {
  max-width: 1100px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  text-align: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 10px;

  font-size: 12px;
  line-height: 1.4;
}

.footer-links a {
  color: rgba(249,243,239,0.75);
  text-decoration: none;
  transition: 0.25s ease;
}

.footer-links a:hover {
  color: #D2C1B6;
}

.footer-text {
  max-width: 760px;
}

.footer-text p {
  font-size: 11px;
  line-height: 1.5;
  color: rgba(249,243,239,0.55);

  margin: 0;
}

/* мобильная версия */
@media (max-width: 768px) {

  footer {
    padding: 12px 12px 8px;
    margin-top: 28px;
  }

  .footer-links {
    gap: 8px;
    font-size: 11px;
  }

  .footer-text p {
    font-size: 10px;
    line-height: 1.45;
  }

}

.hero-price {
  margin-top: 30px;
  text-align: center;
}

.price-card {
  padding: 18px;
  background: rgba(210,193,182,0.08);

  border: 1px solid rgba(210,193,182,0.25);

  border-radius: 12px;

  backdrop-filter: blur(8px);
}

.price-card span {
  display: block;
  font-size: 14px;
  color: rgba(249,243,239,.75);
  margin-bottom: 8px;
}

.price-card strong {
  display: block;
  font-size: 24px;
  color: #D2C1B6;
}

.price-note {
  margin-top: 15px;
  color: #D2C1B6;
}

.price-card{
    width:100%;
    max-width:none;
}

/* =========================================
   FIX MOBILE MATERIALS
========================================= */

@media (max-width: 768px){

  .materials-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
    margin-top:20px;
  }

  .material-card{
    overflow:hidden;
    border-radius:16px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(210,193,182,.25);
  }

  .material-image{
    width:100%;
    height:220px;
    overflow:hidden;
  }

  .material-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .material-content{
    padding:16px;
  }

  .material-title{
    font-size:18px;
    color:#D2C1B6;
    margin-bottom:8px;
  }

  .material-desc{
    font-size:14px;
    line-height:1.5;
  }

}

@media (max-width:768px){

  .price-grid{
    display:flex;
    flex-direction:column;
    gap:14px;

    width:100%;
    padding:0 16px;
    margin:24px auto;
  }

  .price-card{
    width:100%;
    max-width:none;
  }

}

@media (max-width:768px){

  .hero{
    overflow:hidden;
  }

  .hero-title{
    width:100%;
    max-width:100%;
    padding:0 16px;

    font-size:32px;
    line-height:1.15;

    word-break:normal;
  }

  .hero-subtitle{
    padding:0 16px;
  }

}

/* CONTACTS */

.contacts-section{
    padding:80px 0;
}

.contacts-card{
    max-width:700px;
    margin:0 auto;

    padding:40px;

    border-radius:24px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(210,193,182,.18);

    text-align:center;
}

.contacts-company h3{
    color:#D2C1B6;

    font-size:34px;

    margin-bottom:15px;

    letter-spacing:2px;
}

.contacts-company p{
    max-width:500px;

    margin:0 auto 35px;

    line-height:1.7;
}

.contact-phone{
    display:block;

    color:#D2C1B6;

    text-decoration:none;

    font-size:36px;

    font-weight:700;

    margin-bottom:15px;
}

.contact-mail{
    display:block;

    color:#ffffff;

    text-decoration:none;

    font-size:22px;

    margin-bottom:15px;
}

.contact-address{
    opacity:.8;

    margin-bottom:30px;
}

.contacts-buttons{
    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:25px;
}

.contact-btn{
    padding:14px 30px;

    border:1px solid #D2C1B6;

    border-radius:12px;

    color:#D2C1B6;

    text-decoration:none;

    transition:.3s;
}

.contact-btn:hover{
    background:#D2C1B6;

    color:#163554;
}

.contacts-cta{
    color:#8ad08a;

    font-weight:600;
}

/* MOBILE */

@media (max-width:768px){

    .contacts-card{
        padding:24px;
    }

    .contacts-company h3{
        font-size:26px;
    }

    .contact-phone{
        font-size:28px;
    }

    .contact-mail{
        font-size:18px;

        word-break:break-word;
    }

    .contacts-buttons{
        flex-direction:column;
    }

    .contact-btn{
        width:100%;
    }
}

/* ================================= */
/* HERO MOBILE FIX */
/* ================================= */

@media (max-width: 768px){

    .hero{
        overflow:hidden;
    }

    .hero .container{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .hero-content{
        width:100%;
        max-width:100%;
        padding:0 20px;
        text-align:center;
    }

    .hero-title{
        font-size:32px;
        line-height:1.15;
        margin-bottom:20px;
    }

    .hero-subtitle{
        font-size:18px;
        line-height:1.6;
    }

}

@media (max-width:768px){

    .price-grid{

        display:flex !important;

        flex-direction:column !important;

        gap:16px;

        width:100%;

        padding:0 20px;

        margin-top:30px;

        margin-bottom:20px;
    }

    .price-card{

        width:100%;

        max-width:none;

        margin:0;

        text-align:center;
    }

    .price-card strong{

        font-size:34px;

        line-height:1.1;

        display:block;
    }

}

@media (max-width:768px){

    .hero-actions{

        display:flex;

        flex-direction:column;

        gap:14px;

        width:100%;
    }

    .hero-button{

        width:100%;

        text-align:center;
    }

}

@media (max-width:768px){

  .hero{
    padding: 24px 0;
    overflow:hidden;
  }

  .hero .container{
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 16px;
  }

  .hero-content{
    width:100%;
    max-width:100%;
    text-align:center;
  }

}

@media (max-width:768px){

  .price-grid{

    display:flex !important;

    flex-direction:column !important;

    gap:16px;

    width:100%;

    margin-top:24px;
  }

  .price-card{

    width:100%;

    max-width:none;

    margin:0;
  }

}

@media (max-width:768px){

  .hero-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

    width:100%;
  }

  .hero-button{

    width:100%;

    text-align:center;
  }

}

@media (max-width:768px){

  .hero .container{
    width:100%;
    max-width:100%;
    padding-left:20px;
    padding-right:20px;

    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .hero-content{
    width:100%;
    max-width:340px;
    margin:0 auto;
    text-align:center;
  }

  .price-grid{
    width:100%;
    max-width:340px;
    margin:30px auto 0;
  }

}

@media (max-width:768px){

  .price-card{
    margin-left:auto;
    margin-right:auto;
  }

}

/* Отступ сверху перед блоком Стоимость строительства */

.price-section{
    margin-top: 80px;
}

@media (max-width:768px){

  .price-section{
      margin-top: 60px;
  }

}

.intersection-overlay{
    margin-top: 60px;
}

@media (max-width:768px){
    .intersection-overlay{
        margin-top:40px;
    }
}

@media (min-width:1024px){
    .intersection-overlay{
        margin-top:80px;
    }

* {
  border: none;
}