* {
  margin: 0;
  padding: 0;
}
/* основа */
body {
font-family: 'inter', sans-serif;
color: #ffffff;
background-color: #060501;
min-height: 100vh;
}


/* херо блок */
.hero {
  /* позиция */
position: relative;
z-index: 3;
/* размеры */
width: 100%;
min-height: 800px;
overflow: hidden;
/* выравнивание */
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
text-align: center;
/* оформление */
background-image: url(back.png);
background-size: contain;
background-position: center;
}


/* шапка */
.header {
/* позиция */
position: absolute;
z-index: 4;
/* размеры */
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1100px;
padding: 0px 40px;
height: 70px;
/* выравнивание */
display: flex;
justify-content: center;
align-items: center;
/* оформление */
background: linear-gradient(#0C0C0C , #181818);
box-shadow: 0 10px 25px #000;
}


/* нав меню в целом */
.nav {
  position: absolute;
display: flex;
gap: 20px;
}


/* нав меню оформление */
.nav a {
text-decoration: none;
color: #929292;
font-weight: 400;
font-size: 16px;
margin: 0 15px;
transition: 0.3s;
cursor: pointer;
}


/* нав меню при наведении */
.nav a:hover {
color: #ffffff;
}


/* ель первая слева */
.trees-1 {
  width: 35%;
position: absolute;
top: -280px;
left: 0;
height: 100%;
object-fit: contain;
z-index: 5;
pointer-events: none;
}


/* ель вторая справа */
.trees-2 {
position: absolute;
width: 35%;
top: -250px;
right: 30px;
height: 100%;
object-fit: contain;
z-index: 5;
pointer-events: none;
}


/* все что в преленде */
.hero-content {
margin-top: 120px;
}
.hero-content h1 {
  margin-top: 30px;
  font-size: 98px;
  line-height: 100%;
}

.hero-content p {
   margin-top: 13px;
  font-size: 34px;
  line-height: 100%;
  font-weight: 300;
}

/* лого в преленде */
.logo {
position: relative;
margin-top: 0px;
margin-bottom: 300px;
margin: auto;
width: 243px;
height: auto;
z-index: 6;
}


/* кнопка в преленде в календарю */
.button-cal {
background: linear-gradient(102deg, #A85400 0%, #FDB53E 24%, #914300 63%);
font-size: 32px;
font-weight: 300;
padding: 20px 32px;
margin-top: 100px;
border: none;
cursor: pointer;
box-shadow: 0 0 10px #FDB53E;
transition: box-shadow 0.9s ease, transform 0.9s ease;
overflow: hidden;
display: inline-block;
}

.button-cal:hover {
  box-shadow: 0 0 25px #FDB53E;
  transform: scale(1.03);
}

.button-cal a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}


/* активности наши */
.aktiv {
height: 100px;
width: 100%;
background: linear-gradient(90deg, #0C0C0C , #0E0E0E);
display: flex;
align-items: center;
justify-content: center;
}


/* перечесление активностей */
.sport {
display: flex;
gap: 40px;
list-style: none;
margin: 0;
padding: 0;
}

.sport li {
  font-size: 24px;
  font-weight: 300;
  color: #464646;
  text-decoration: none;
}


/* сам блок календаря */
.calendar {
  position: relative;
background:   linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* прозрачная тень */
    url("gold-and-kebab.png") no-repeat center/cover,                  /* твой фон */
    radial-gradient(#1C180E 0%, #060501 100%);               /* основной фон */;
padding: 80px 0;
}


/* блюр */
.gifts-blur {
  position: relative;
   display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  transition: filter 0.5s ease;
}

.gifts-blur.blurred {
  filter: blur(8px) brightness(0.6);
}

.gifts-blur h2 {
    margin-top: 5px;
  font-size: 57px;
  line-height: 100%;
  font-weight: 500;

}

.gifts-blur p {
    margin-top: 20px;
  font-size: 30px;
  line-height: 100%;
  font-weight: 300;
}

/* свечки */
.candle {
  position: relative;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 40px;
flex-wrap: wrap;
margin-top: 90px;
overflow: visible;
}

.candle-item img {
  width: 280px;
height: 280px;
display: block;
z-index: 2;
overflow: hidden;
  position: relative;
}

.candle::before {
  content: "";
  position: absolute;
  top: 55%;
  left: 5%;
  width: 90%;
  height: 4px;
  background: linear-gradient(#CC8C61 0%, #4b3424 38%);
  filter: blur(1px);
  z-index: 1;
}

.label p {
  font-size: 24px;
  font-weight: 300;
  margin: 10px 0 0;
  text-align: center;
  transition: all 0.4s ease;
  color: #544235;
  
}

.candle-item.ended .label p {
  color: #545454;
  font-size: 24px;
  font-weight: 300;
  text-shadow: none;
}

.candle-item.active .label p {
  color: #ffffff;
  font-size: 28px;
  font-weight: 400;
  text-shadow: 0 0 15px #FDB53E; /* убираем скобки */
  animation: pulseText 2s ease-in-out infinite;
    overflow: visible; /* 👈 разрешаем тени выходить за границы */
  position: relative; /* нужно, чтобы text-shadow отрабатывал корректно */
}

.candle-item.soon .label p {
  color: #544235;
  font-size: 24px;
  font-weight: 300;
  text-shadow: none;
}

/* к заявке кнопка */
.button-rec {
background: linear-gradient(102deg, #A85400 0%, #FDB53E 24%, #914300 63%);
font-size: 28px;
font-weight: 300;
padding: 15px 30px;
margin-top: 90px;
border: none;
cursor: pointer;
box-shadow: 0 0 10px #FDB53E;
transition: box-shadow 0.9s ease, transform 0.9s ease;
overflow: hidden;
display: inline-block;
}

.button-rec:hover {
  box-shadow: 0 0 25px #FDB53E;
  transform: scale(1.03);
}

.button-rec a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}

/* ячейка таймера */
.countdown {
  text-align: center;
  font-family: 'Inter', sans-serif;
  margin-top: 60px;
}

.countdown h3{
font-size: 58px;
font-weight: 500;
margin-top: 25px;
}

/* сам таймер */
.timer {
  margin-top: 8px;
   color: #D7A95B; /* мягкий золотистый */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* расстояние между блоками */
}

.timer div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 45px;
  font-weight: 400;
  color: #E7C06A; /* насыщенный золотой */
  position: relative;
}

.timer div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.5);
}

.timer span {
  font-size: 52px;
  font-weight: 300;
  color: #E7C06A;
  text-shadow: 0 0 35px #FDB53E;
}

.timer p {
  font-size: 52px;
  font-weight: 300;
  margin: 0;
  color: #E7C06A;
   text-shadow: 0 0 35px #FDB53E;
}


/* хуйня какая то для соо */
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 5;
transition: opacity 0.4s ease;
}

.overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* сообщение о магии */
.magic {
font-family: 'Inter', sans-serif;
font-size: 30px;
font-weight: 700;
color: #ffffff;
text-align: center;
animation: fadeInOut 1.5s ease;
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* плашка подарка */
.gifts-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
z-index: 10;
opacity: 0;
transition: opacity 0.4s ease;
 pointer-events: none;
 flex-direction: column; /* 👈 Ставим элементы в колонку */
}

.gifts-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* подарок */
.gift-box {
  position: relative;
  background: rgba(20, 10, 0, 0.7);
  border-radius: 30px; /* ✅ скруглённые углы */
  box-shadow: 0 0 50px rgba(255, 200, 100, 0.2);
  animation: fadeInUp 0.6s ease;
  display: flex;
  flex-direction: column; /* ✅ элементы в колонку */
  justify-content: center;
  align-items: center;
  padding: 40px 60px; /* чуть воздуха вокруг */
  text-align: center;
}

.gift-box h4 {
  font-size: 60px;
  font-weight: 600;
  margin-bottom: 2px;
  color: #ffffff;
}

.gift-box p {
  font-size: 29px;
  font-weight: 400;
  margin: 0;
  color: #ffffff;
}

/* скидка */
.gift-box .sale {
font-size: 60px;
font-weight: 600;
margin: 20px 0 30px;
color: #ffffff;
text-transform: uppercase;
text-shadow: 0 0 20px #FDB53E;
.gift-box .sale {
  white-space: normal;
  text-align: center;
  line-height: 1.1;
}
}


/* к заявке внутри плашки подарка */
.button-rec2 {
background: linear-gradient(102deg, #A85400 0%, #FDB53E 24%, #914300 63%);
font-size: 28px;
font-weight: 300;
padding: 15px 30px;
margin-top: 10px !important;
border: none;
cursor: pointer;
box-shadow: 0 0 10px #FDB53E;
transition: box-shadow 0.9s ease, transform 0.9s ease;
overflow: hidden;
display: inline-block;
}

.button-rec2:hover {
  box-shadow: 0 0 25px #FDB53E;
  transform: scale(1.03);
}

.button-rec2 a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}


/* ТАЙМЕР ДО КОНЦА АКЦИИ */
.sale-timer {
  display: flex;
  flex-direction: column; /* текст сверху, цифры под ним */
  justify-content: center;
  align-items: center;
  margin-top: 55px;
  text-align: center;
}

/* Надпись над таймером */
.sale-timer p {
  font-size: 23px;            /* как заголовок “UNTIL CHRISTMAS” */
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
  text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Контейнер для цифр */
.sale-timer .time-row {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 30px;                  /* расстояние между блоками */
  margin-top: 12px;
}

/* Каждый блок с цифрой и буквой */
.sale-timer .time-row div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}

/* Цифры */
.sale-timer .time-row span {
  font-size: 40px;
  font-weight: 300;
  color: #E7C06A;             /* насыщенный золотой */
  text-shadow: 0 0 25px #FDB53E;
}

/* Буквы D / H / M / S */
.sale-timer .time-row p {
  font-size: 30px;
  font-weight: 400;
  color: #E7C06A;
  margin: 0;
  text-shadow: 0 0 25px #FDB53E;
}

/* Вертикальные разделители между блоками */
.sale-timer .time-row div:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 55%;
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 200, 100, 0.6);
  border-radius: 2px;
}

/* крестик на плашке подарка */
.close-modal {
position: absolute;
top: 20px;
right: 25px;
background: none;
border: none;
color: #fff;
font-size: 26px;
cursor: pointer;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* блок брендов */
.brands {
height: 100px;
width: 100%;
background: linear-gradient(90deg, #0C0C0C , #0E0E0E);
display: flex;
align-items: center;
justify-content: center;
}


/* перечисление брендов */
.brand {
display: flex;
gap: 40px;
list-style: none;
margin: 0;
padding: 0;
}

.brand li {
    font-size: 24px;
  font-weight: 300;
  color: #464646;
  text-decoration: none;
}

/* о нас */
.about-us {
background: 
    url("us-back.png") no-repeat center/cover,                  /* твой фон */
    radial-gradient(#1C180E 0%, #060501 100%);               /* основной фон */;
padding: 120px 0;
position: relative;
}

.about-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 80px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 60px;
}

.tallin-photo {
  width: 600px;
  height: auto;
  flex-shrink: 0;
  box-shadow: 0 0 40px rgba(231, 192, 106, 0.1);
  border-radius: 8px;
}

.about-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  color: #fff;
  max-width: 700px;
}

.about-text h5 {
  font-size: 80px;
  font-weight: 700;
color: #fff;
text-align: left;
}

.about-text p {
  font-size: 24px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.2;
}

/* контакт с нами */
.button-contact {
background: linear-gradient(102deg, #A85400 0%, #FDB53E 24%, #914300 63%);
font-size: 28px;
font-weight: 300;
padding: 15px 30px;
margin-top: 20px;
border: none;
cursor: pointer;
box-shadow: 0 0 10px #FDB53E;
transition: box-shadow 0.9s ease, transform 0.9s ease;
overflow: hidden;
display: inline-block;
}

.button-contact:hover {
  box-shadow: 0 0 25px #FDB53E;
  transform: scale(1.03);
}

.button-contact a {
  color: #ffffff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}



/* форма заявки */
.request {
  position: relative;
background:   linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), /* прозрачная тень */
    url("gold-and-kebab.png") no-repeat center/cover,                  /* твой фон */
    radial-gradient(#1C180E 0%, #060501 100%);               /* основной фон */;
padding: 80px 0;
}


/* блюр заявки */
.request-blur {
  position: relative;
   display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
  transition: filter 0.5s ease;
  gap: 10px;
}

.request-blur.blurred {
    filter: blur(8px) brightness(0.6);
}

.request-blur h6 {
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  margin-top: 5px;
}

.request-blur p {
  font-size: 30px;
  font-weight: 300;
  color: #fff;
   margin-bottom: 8px;
}

/* форма */
.form.request-form {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 700px;
height: 600px;
padding: 10px;
background: rgba(10, 8, 4, 0.5);
border-radius: 16px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
text-align: center;
}

.form.request-form input,
.form.request-form textarea {
  width: 100%;
  background: #060501;
  border: 1px solid rgba(100, 100, 100, 0.3);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 300;
  font-family: 'Inter', sans-serif;
  color: #fff;
  outline: none;
  transition: all 0.3s ease;
}

.form.request-form input::placeholder,
.form.request-form textarea::placeholder {
  color: #272727;
  font-size: 21px;
  font-weight: 300;
}

.form.request-form input:focus,
.form.request-form textarea:focus {
  border-color: #E7C06A;
  box-shadow: 0 0 15px rgba(253 , 181, 62, 0.4);
  background: rgba(20, 18, 10, 0.45);
}

.form.request-form textarea {
  resize: none;
  height: 150px;
}

.form.request-form button {
  background: linear-gradient(102deg, #A85400 0%, #FDB53E 24%, #914300 63%);
font-size: 28px;
font-weight: 300;
font-family: 'Inter', sans-serif;
padding: 15px 30px;
margin-top: 20px;
border: none;
cursor: pointer;
box-shadow: 0 0 10px #FDB53E;
transition: box-shadow 0.9s ease, transform 0.9s ease;
overflow: hidden;
display: inline-block;
color: #fff;
letter-spacing: 2px;
}

.form.request-form button:hover {
  box-shadow: 0 0 25px #FDB53E;
  transform: scale(1.03);
}

.form.request-form button a {
    color: #ffffff;
  text-decoration: none;
  display: inline-block;
  width: 100%;
  height: 100%;
}

.form.request-form p {
  font-size: 18px;
  font-weight: 300;
  color: #483A3A;
  margin-top: 20px;

}

/* хуйня для соо */
.overlay2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
pointer-events: none;
z-index: 5;
transition: opacity 0.4s ease;
  background: rgba(0, 0, 0, 0.4); /* лёгкое затемнение */
  backdrop-filter: blur(10px); /* ✅ добавляем размытие */
  -webkit-backdrop-filter: blur(10px); /* ✅ поддержка Safari */
}

.overlay2.active {
    opacity: 1;
  pointer-events: auto;
}


/* соо спс */
.thank {
 font-family: 'Inter', sans-serif;
font-size: 45px;
font-weight: 400;
color: #ffffff;
text-align: center;
animation: fadeInOut 3s ease;
 position: relative; /* ✅ теперь крестик привязан к этому блоку */
  display: inline-block; /* чтобы ширина подстраивалась под текст */
  padding: 40px 60px; /* немного воздуха */
}


/* крестик на соо */
.close-modal2 {
position: absolute;
top: 20px;
right: 25px;
background: none;
border: none;
color: #fff;
font-size: 26px;
cursor: pointer;
}


/* подвал */
.footer {
  background: linear-gradient(#060501, #1E1D19);
  padding: 70px 0; /* убрали боковые паддинги */
  display: flex;
  justify-content: center; /* теперь центрируем контейнер внутри */
  color: #cfc6b7;
  position: relative;
  width: 100%;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 80px;
  width: 100%;
  max-width: 1400px; /* ограничивает контент, но не фон */
  padding: 0 60px; /* внутренние отступы, чтобы не липло к краю */
  box-sizing: border-box;
}

.footer-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
}

/* левая колонка */
.footer-col.left {
  flex: 1 1 40%;
  min-width: 320px;
}

.logo-footer {
  width: 240px;
  height: auto;
  margin-bottom: 12px;
}

.contacts p {
  margin: 4px 0;
  color: #272727;
  font-size: 18px;
  font-weight: 300;
  line-height: 2;
}

.contacts a {
  color: #272727;
  text-decoration: none;
    transition: color 0.3s ease;
}
.contacts a:hover {
  color: #fff;
}

/* центральная колонка */
.footer-col.center {
  flex: 0 0 300px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wins-we {
  width: 280px;
  height: auto;
}

/* правая колонка */
.footer-col.right {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* ✅ чтобы меню шло ровно по левому краю */
}

.nav-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.nav-footer p {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}

.nav-footer a {
  text-decoration: none;
  color: #464646;
  font-size: 18px;
  font-weight: 300;
  transition: color 0.3s ease;
  cursor: pointer;
}
.nav-footer a:hover {
  color: #fff;
}


/* кнопка вверх */
.button-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 20;
}

.button-top a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(20, 10, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 1);
  backdrop-filter: blur(2px);
  transition: all 0.3s ease;
}

.button-top a:hover {
  transform: scale(1.1);
}

/* изображение стрелки */
.arrow-icon {
  width: 28px;         /* размер стрелки */
  height: auto;
  filter: brightness(2); /* чуть осветлить */
  transition: transform 0.3s ease;
}

.button-top a:hover .arrow-icon {
  transform: translateY(-3px); /* лёгкое движение вверх при наведении */
}


/* ======= АКТИВНАЯ СВЕЧА ======= */
.candle-item.active .label p {
  position: relative;
  transition: transform 0.6s ease, box-shadow 0.8s ease;
  animation: candlePulse 2.5s ease-in-out infinite; /* 👈 плавное пульсирование */
}

/* Пульсация свечения */
@keyframes candlePulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 250, 205, 0.7));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 250, 205, 0.7));
    transform: scale(1.05);
  }
}

/* Подсветка и увеличение при наведении */
.candle-item.active .label p:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 35px rgba(253, 181, 62, 0.9));
}