*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#0f0f0f;
  color:white;
  font-family:'Montserrat',sans-serif;
}

.container{
  max-width:480px;
  margin:auto;
  padding:20px;
}

.hero{
  position: relative;
  overflow: hidden;

  background: linear-gradient(135deg,#ff7a00,#ff2d00);
  padding: 30px;
  border-radius: 28px;
  text-align: center;
  margin-bottom: 24px;

  color: white;
}

/* Контент поверх огоньков */
.hero .logo,
.hero h1,
.hero p{
  position: relative;
  z-index: 2;
}

/* Огоньки */
.lights{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.light{
  position: absolute;
  top: -20px;

  width: 6px;
  height: 6px;

  border-radius: 50%;
  background: #ffd27a;

  box-shadow:
    0 0 10px #ff9900,
    0 0 20px #ff6600,
    0 0 35px #ff3300;

  animation: fall linear infinite;
  opacity: 0;
}

.light::before{
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(255,180,70,0.3);
  filter: blur(6px);
}

/* Больше огоньков */

.light:nth-child(1){ left:2%; animation-duration:7s; }
.light:nth-child(2){ left:7%; animation-duration:5s; animation-delay:1s; }
.light:nth-child(3){ left:12%; animation-duration:8s; animation-delay:2s; }
.light:nth-child(4){ left:18%; animation-duration:6s; }
.light:nth-child(5){ left:24%; animation-duration:9s; animation-delay:1s; }
.light:nth-child(6){ left:30%; animation-duration:5s; animation-delay:3s; }
.light:nth-child(7){ left:36%; animation-duration:7s; animation-delay:2s; }
.light:nth-child(8){ left:42%; animation-duration:6s; }
.light:nth-child(9){ left:48%; animation-duration:8s; animation-delay:1s; }
.light:nth-child(10){ left:54%; animation-duration:5s; animation-delay:2s; }

.light:nth-child(11){ left:60%; animation-duration:9s; }
.light:nth-child(12){ left:66%; animation-duration:6s; animation-delay:1s; }
.light:nth-child(13){ left:72%; animation-duration:7s; animation-delay:3s; }
.light:nth-child(14){ left:78%; animation-duration:5s; }
.light:nth-child(15){ left:82%; animation-duration:8s; animation-delay:2s; }
.light:nth-child(16){ left:86%; animation-duration:6s; animation-delay:1s; }
.light:nth-child(17){ left:90%; animation-duration:7s; }
.light:nth-child(18){ left:94%; animation-duration:5s; animation-delay:2s; }
.light:nth-child(19){ left:97%; animation-duration:9s; animation-delay:1s; }
.light:nth-child(20){ left:50%; animation-duration:4s; animation-delay:0.5s; }

/* Логотип */
.logo{
  width: 120px;
  height: 100px;

  border-radius: 50%;
  /* background: white; */

  color: black;

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

  font-size: 42px;
  margin: auto auto 20px;

  animation: float 4s ease-in-out infinite;
}

.logo img{
  width: 130px;
  height: 100px;
}

/* Заголовок */
.hero h1{
  font-size: 34px;
  margin-bottom: 10px;

  animation: glow 2s ease-in-out infinite alternate;
}

/* Текст */
.hero p{
  line-height: 1.6;
}

/* Анимация огоньков */
@keyframes fall{
  0%{
    transform: translateY(-40px) translateX(0) scale(0.4);
    opacity: 0;
  }

  10%{
    opacity: 1;
  }

  50%{
    transform: translateY(200px) translateX(15px) scale(1);
  }

  100%{
    transform: translateY(500px) translateX(-20px) scale(0.3);
    opacity: 0;
  }
}

/* Свечение заголовка */
@keyframes glow{
  from{
    text-shadow:
      0 0 10px rgba(255,255,255,0.4),
      0 0 20px rgba(255,180,0,0.6);
  }

  to{
    text-shadow:
      0 0 20px rgba(255,255,255,0.8),
      0 0 40px rgba(255,120,0,1);
  }
}

/* Парение логотипа */
@keyframes float{
  0%,100%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(-10px);
  }
}

.section{
  margin-bottom:30px;
}

.section-title{
  margin-bottom:15px;
  font-size:24px;
}


.price{
  margin-top:10px;
  color:#ff7a00;
  font-weight:700;
  font-size:22px;
}

.links{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}




.social-btn{
  position: relative;
  overflow: hidden;

  background:#1b1b1b;
  padding:18px;
  border-radius:18px;

  text-align:center;
  text-decoration:none;

  color:white;
  font-weight:600;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  transition:0.4s;
  z-index: 100;
}

/* Иконки */
.social-btn::before{
  content:'';
  
  width:24px;
  height:24px;

  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;

  opacity:0;
  transform:translateY(10px) scale(0.5);

  transition:0.4s;
}

/* Показываем иконку при наведении */
.social-btn:hover::before{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Telegram */
.tg:hover{
  background:#229ED9;
  box-shadow:0 0 20px rgba(34,158,217,0.6);
}

.tg::before{
  background-image:url('https://cdn-icons-png.flaticon.com/512/2111/2111646.png');
}

/* VK */
.vk:hover{
  background:#0077ff;
  box-shadow:0 0 20px rgba(0,119,255,0.6);
}

.vk::before{
  background-image:url('https://cdn-icons-png.flaticon.com/512/145/145813.png');
}

/* MAX */
.max:hover{
  background:#7b2cff;
  box-shadow:0 0 20px rgba(123,44,255,0.6);
}

.max::before{
  background-image:url('../image/MAX-64x64.png');
}

.map{
  overflow:hidden;
  border-radius:24px;
  height:300px;
}

.map iframe{
  width:100%;
  height:100%;
  border:none;
}

.reviews-container{
  display:flex;
  gap:16px;
  overflow-x:auto;
}

.review-card{
  min-width:280px;
  background:#1b1b1b;
  border-radius:24px;
  padding:20px;
}

.review-top{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}

.review-name{
  font-weight:700;
}

.review-stars{
  color:#ffb400;
}

.review-text{
  line-height:1.6;
  color:#d5d5d5;
}


/* COOKIE */

/* COOKIE */

.cookie-box{
  position: fixed;

  left: 20px;
  right: 20px;
  bottom: 20px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  padding: 22px;

  background: rgba(18,18,18,0.96);

  border: 1px solid rgba(255,255,255,0.06);

  border-radius: 28px;

  backdrop-filter: blur(16px);

  z-index: 9999;

  box-shadow:
    0 10px 40px rgba(0,0,0,0.45),
    0 0 30px rgba(255,120,0,0.08);

  animation: cookieShow .5s ease;
}

/* Контент */

.cookie-content{
  display: flex;
  align-items: center;
  gap: 18px;

  min-width: 0;
}

/* Иконка */

.cookie-icon{
  width: 68px;
  height: 68px;

  min-width: 68px;

  border-radius: 22px;

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

  font-size: 32px;

  background:
    linear-gradient(135deg,#ff9a00,#ff5e00);

  box-shadow:
    0 0 25px rgba(255,140,0,0.25);
}

/* Текст */

.cookie-text{
  min-width: 0;
}

.cookie-text h3{
  color: white;

  font-size: 22px;
  font-weight: 800;

  margin-bottom: 8px;
}

.cookie-text p{
  color: rgba(255,255,255,0.7);

  line-height: 1.6;

  font-size: 15px;

  max-width: 560px;
}

/* Кнопка */

.cookie-btn{
  border: none;
  cursor: pointer;

  padding: 18px 26px;

  border-radius: 18px;

  background:
    linear-gradient(135deg,#ff9500,#ff5e00);

  color: white;

  font-size: 16px;
  font-weight: 700;

  white-space: nowrap;

  transition: .3s;
}

.cookie-btn:hover{
  transform: translateY(-2px);

  box-shadow:
    0 0 25px rgba(255,120,0,0.35);
}

/* АНИМАЦИЯ */

@keyframes cookieShow{

  from{
    opacity: 0;
    transform: translateY(80px);
  }

  to{
    opacity: 1;
    transform: translateY(0);
  }

}

/* ========================= */
/* Планшеты */
/* ========================= */

@media (max-width: 900px){

  .cookie-box{
    padding: 20px;
    gap: 16px;
  }

  .cookie-text h3{
    font-size: 20px;
  }

  .cookie-text p{
    font-size: 14px;
  }

}

/* ========================= */
/* Телефоны */
/* ========================= */

@media (max-width: 700px){

  .cookie-box{
    left: 12px;
    right: 12px;
    bottom: 12px;

    flex-direction: column;
    align-items: stretch;

    padding: 18px;

    border-radius: 24px;
  }

  .cookie-content{
    align-items: flex-start;
  }

  .cookie-icon{
    width: 58px;
    height: 58px;

    min-width: 58px;

    font-size: 28px;

    border-radius: 18px;
  }

  .cookie-text h3{
    font-size: 18px;
  }

  .cookie-text p{
    font-size: 13px;
    max-width: 100%;
  }

  .cookie-btn{
    width: 100%;

    padding: 16px;

    border-radius: 16px;

    font-size: 15px;
  }

}

/* ========================= */
/* Очень маленькие экраны */
/* ========================= */

@media (max-width: 420px){

  .cookie-box{
    padding: 16px;
  }

  .cookie-content{
    gap: 14px;
  }

  .cookie-icon{
    width: 52px;
    height: 52px;

    min-width: 52px;

    font-size: 24px;
  }

  .cookie-text h3{
    font-size: 16px;
  }

  .cookie-text p{
    font-size: 12px;
    line-height: 1.5;
  }

}

/* ========================= */
/* АДАПТАЦИЯ КАРТОЧЕК */
/* ========================= */

/* БАЗА */

.menuSwiper{
  width: 100%;
  overflow: hidden;

  padding: 10px 0 30px;
}

.swiper-slide{
  width: 320px !important;
  flex-shrink: 0;
}

.menu-card{
  width: 320px;
  min-height: 720px;

  background:
    linear-gradient(145deg,#1a1a1a,#101010);

  border-radius: 34px;

  padding: 18px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid rgba(255,255,255,0.06);
}

/* КАРТИНКА */

.menu-card img{
  width: 100%;
  height: 300px;

  object-fit: cover;

  border-radius: 24px;

  margin-bottom: 20px;
}

/* ТЕКСТ */

.menu-card h3{
  color: white;

  font-size: 28px;
  line-height: 1.05;

  margin-bottom: 18px;
}

.menu-card p{
  color: rgba(255,255,255,0.68);

  font-size: 20px;
  line-height: 1.5;

  margin-bottom: 24px;
}

/* ЦЕНА */

.menu-card span{
  color: #ff9500;

  font-size: 34px;
  font-weight: 800;

  margin-top: auto;
}

/* КНОПКА */

.menu-btn{
  margin-top: 20px;

  border: none;
  cursor: pointer;

  background:
    linear-gradient(135deg,#ff9a00,#ff5e00);

  color: white;

  padding: 18px;

  border-radius: 18px;

  font-size: 18px;
  font-weight: 700;

  transition: .3s;
}

/* ========================= */
/* Ноутбуки */
/* ========================= */

@media (max-width: 1200px){

  .swiper-slide{
    width: 290px !important;
  }

  .menu-card{
    width: 290px;
    min-height: 680px;
  }

  .menu-card h3{
    font-size: 40px;
  }

}

/* ========================= */
/* Планшеты */
/* ========================= */

@media (max-width: 900px){

  .swiper-slide{
    width: 260px !important;
  }

  .menu-card{
    width: 260px;
    min-height: 620px;

    border-radius: 28px;
  }

  .menu-card img{
    height: 240px;
    border-radius: 20px;
  }

  .menu-card h3{
    font-size: 34px;
  }

  .menu-card p{
    font-size: 17px;
  }

  .menu-card span{
    font-size: 30px;
  }

}

/* ========================= */
/* Телефоны */
/* ========================= */

@media (max-width: 700px){

  .swiper-slide{
    width: 220px !important;
  }

  .menu-card{
    width: 220px;

    min-height: 540px;

    padding: 14px;

    border-radius: 24px;
  }

  .menu-card img{
    height: 190px;

    border-radius: 18px;

    margin-bottom: 16px;
  }

  .menu-card h3{
    font-size: 28px;

    margin-bottom: 14px;
  }

  .menu-card p{
    font-size: 15px;

    margin-bottom: 18px;
  }

  .menu-card span{
    font-size: 26px;
  }

  .menu-btn{
    padding: 14px;

    border-radius: 14px;

    font-size: 15px;
  }

}

/* ========================= */
/* Маленькие телефоны */
/* ========================= */

@media (max-width: 480px){

  .swiper-slide{
    width: 190px !important;
  }

  .menu-card{
    width: 190px;

    min-height: 500px;

    padding: 12px;
  }

  .menu-card img{
    height: 160px;
  }

  .menu-card h3{
    font-size: 24px;
  }

  .menu-card p{
    font-size: 14px;
    line-height: 1.45;
  }

  .menu-card span{
    font-size: 22px;
  }

  .menu-btn{
    padding: 12px;

    font-size: 14px;
  }

}

/* МОДАЛКА */

.modal{
  position: fixed;
  inset: 0;

  background: rgba(0,0,0,0.75);

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

  opacity: 0;
  visibility: hidden;

  transition: .35s;

  z-index: 9999;
}

.modal.active{
  opacity: 1;
  visibility: visible;
}

.modal-content{
  width: 90%;
  max-width: 520px;

  background: #121212;

  border-radius: 28px;

  padding: 32px;

  position: relative;

  border: 1px solid rgba(255,255,255,0.08);

  animation: modalShow .4s ease;
}

.modal-content h2{
  color: white;

  font-size: 38px;

  margin-bottom: 18px;
}

.modal-content p{
  color: rgba(255,255,255,0.75);

  line-height: 1.7;

  margin-bottom: 22px;
}

.kbju{
  background: rgba(255,149,0,0.12);

  border: 1px solid rgba(255,149,0,0.3);

  color: #ffb347;

  padding: 18px;

  border-radius: 18px;

  font-weight: 600;
}

.modal-close{
  position: absolute;

  top: 16px;
  right: 16px;

  width: 42px;
  height: 42px;

  border: none;
  cursor: pointer;

  border-radius: 14px;

  background: rgba(255,255,255,0.08);

  color: white;

  font-size: 20px;
}

@keyframes modalShow{

  from{
    transform: translateY(40px) scale(.95);
    opacity: 0;
  }

  to{
    transform: translateY(0) scale(1);
    opacity: 1;
  }

}

/* FOOTER */
.footer{
  margin-top: 40px;
  padding: 30px 20px;

  background: #171717;
  border-radius: 24px 24px 0 0;

  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-content{
  display: flex;
  flex-direction: column;
  gap: 14px;

  text-align: center;
}

.footer h3{
  font-size: 22px;
  color: #ff9d00;
}

.footer p{
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  font-size: 14px;
}

.footer-info{
  display: flex;
  flex-direction: column;
  gap: 6px;

  margin-top: 10px;
}

.privacy-link{
  margin-top: 10px;

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

  padding: 14px 18px;

  background: linear-gradient(135deg,#ff7a00,#ff3c00);
  color: white;

  text-decoration: none;
  font-weight: 600;

  border-radius: 16px;

  transition: 0.25s ease;
}

.privacy-link:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(255,120,0,0.25);
}

/* АДАПТИВ */
@media (max-width: 480px){

  .footer{
    padding: 24px 16px;
  }

  .footer h3{
    font-size: 20px;
  }

  .footer p{
    font-size: 13px;
  }

  .privacy-link{
    width: 100%;
  }
}

/* КНОПКА ОТЗЫВОВ */

.reviews-more{
  display: flex;
  justify-content: center;

  margin-top: 40px;
}

.reviews-btn{
  position: relative;

  overflow: hidden;

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

  gap: 10px;

  padding: 18px 30px;

  border-radius: 22px;

  text-decoration: none;

  background:
    linear-gradient(135deg,#ff9a00,#ff5e00);

  color: white;

  font-size: 18px;
  font-weight: 700;

  transition: .35s;

  box-shadow:
    0 0 25px rgba(255,120,0,0.18);
}

/* Блик */

.reviews-btn::before{
  content: '';

  position: absolute;

  top: 0;
  left: -120%;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.22),
      transparent
    );

  transition: .7s;
}

.reviews-btn:hover::before{
  left: 120%;
}

.reviews-btn:hover{
  transform:
    translateY(-3px)
    scale(1.03);

  box-shadow:
    0 0 35px rgba(255,120,0,0.35);
}

/* АДАПТИВ */

@media(max-width:700px){

  .reviews-btn{
    width: 100%;

    font-size: 16px;

    padding: 16px 22px;

    border-radius: 18px;
  }

}

.vk-news-section {
  margin-top: 40px;
}

.vk-news-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: 18px;
  overflow: hidden;
  backdrop-filter: blur(12px);
}

#vk_groups,
#vk_groups iframe {
  width: 100% !important;
  border-radius: 20px;
}

.hashtags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 14px;
}

.hashtags span {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #8cff8c;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: 0.2s ease;
}
.hashtags .red{
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ff8c8c;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: 0.2s ease;
}

.hashtags span:hover {
  transform: translateY(-2px);
  background: rgba(140,255,140,0.12);
}
.hashtags .red:hover {
  transform: translateY(-2px);
  background: rgba(255, 140, 140, 0.12);
}

#scrollTopBtn {
  position: fixed;
  right: 20px;
  bottom: 20px;

  width: 52px;
  height: 52px;

  border: none;
  border-radius: 50%;

  background: #8cff8c;
  color: #111;

  font-size: 24px;
  font-weight: bold;

  cursor: pointer;

  box-shadow: 0 8px 25px rgba(140,255,140,0.35);

  opacity: 0;
  visibility: hidden;

  transform: translateY(20px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s;
    
  z-index: 9999;
}

#scrollTopBtn.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#scrollTopBtn:hover {
  transform: scale(1.08);
}