/* Основные стили */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
}

/* Мобильное меню */
.mobile-menu { 
  display: none; 
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background-color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  z-index: 40;
}

.mobile-menu.active { 
  display: block; 
}

/* Портфолио */
.portfolio-list { 
  display: none; 
}

.portfolio-list.active { 
  display: block; 
}

/* Большое портфолио */
.portfolio-full {
  background-color: #f9f9f9;
  border-radius: 1.5rem;
  padding: 2rem;
  margin-top: 2rem;
}

/* Обновленные стили для портфолио - фиксированная картинка и карусель */
.portfolio-full .portfolio-card {
  background-color: white;
  border-radius: 1.5rem;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-bottom: 2.5rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.portfolio-full .portfolio-card:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(97, 27, 248, 0.2);
}

.portfolio-full .container {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (min-width: 768px) {
  .portfolio-full .container {
    flex-direction: row;
    gap: 3rem;
  }
}

/* images-and-sizes занимает 70% */
.portfolio-full .images-and-sizes {
  flex: 7; /* 70% */
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Убираем подпись "Эскиз проекта" и освобождаем место */
.portfolio-full .home-plan {
  display: none; /* Скрываем "Эскиз проекта" */
}

/* Увеличиваем основную картинку за счет убранного текста */
.portfolio-full .product-image {
  width: 100%;
  height: 420px; /* Увеличиваем высоту на 20px */
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1rem; /* Уменьшаем отступ снизу */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer; /* Курсор указывает на кликабельность */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Увеличиваем основную картинку за счет убранного текста */
.portfolio-full .product-iframe {
  width: 100%;
  height: 420px; /* Увеличиваем высоту на 20px */
  object-fit: cover;
  border-radius: 1rem;
  margin-bottom: 1rem; /* Уменьшаем отступ снизу */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer; /* Курсор указывает на кликабельность */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-full .product-image:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transform: none; /* Убираем трансформацию при наведении */
}

.portfolio-full .product-iframe:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
  transform: none; /* Убираем трансформацию при наведении */
}

.portfolio-full .slideshow-buttons {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.5rem; /* Уменьшаем отступ */
  justify-content: center;
}

.portfolio-full .slideshow-buttons span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #e5e7eb;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.portfolio-full .slideshow-buttons span:hover {
  background-color: #d1d5db;
  transform: scale(1.1);
}

.portfolio-full .slideshow-buttons span.active {
  background-color: #611BF8;
  border-color: #4f1bc6;
  transform: scale(1.1);
}

/* Галерея смещается вниз */
.portfolio-full .image-gallery {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem; /* Уменьшаем отступ снизу */
  flex-wrap: wrap;
  margin-top: auto; /* Смещаем галерею вниз блока */
}

.portfolio-full .gallery-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 0.75rem;
  cursor: pointer;
  border: 3px solid #e5e7eb;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.portfolio-full .gallery-image:hover {
  border-color: #611BF8;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(97, 27, 248, 0.15);
}

.portfolio-full .gallery-image.active {
  border-color: #611BF8;
  border-width: 4px;
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(97, 27, 248, 0.2);
}

.portfolio-full .selected {
  color: #611BF8;
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.5rem;
  text-align: center;
  padding: 0.5rem;
  background-color: rgba(97, 27, 248, 0.05);
  border-radius: 0.5rem;
  border: 1px solid rgba(97, 27, 248, 0.1);
}

/* product-info занимает 30% */
.portfolio-full .product-info {
  flex: 3; /* 30% */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portfolio-full .category {
  color: #6b7280;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
  font-weight: 500;
}

.portfolio-full .product-name {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.portfolio-full .price {
  font-size: 1.5rem;
  color: #611BF8;
  font-weight: 600;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/*.portfolio-full .price::before {
  content: "💰";
  font-size: 1.2rem;
}*/

.portfolio-full .description {
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 2rem;
  font-size: 1rem;
  padding-right: 1rem;
}

.portfolio-full .buttons {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

.portfolio-full .add-to-cart {
  background: linear-gradient(135deg, #611BF8 0%, #4f1bc6 100%);
  color: white;
  border: none;
  padding: 0.875rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 15px rgba(97, 27, 248, 0.25);
}

.portfolio-full .add-to-cart:hover {
  background: linear-gradient(135deg, #4f1bc6 0%, #3d16a3 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(97, 27, 248, 0.35);
}

.portfolio-full .add-to-cart:active {
  transform: translateY(0);
}

/* wishlist removed - not used in HTML */

/* end portfolio-full */

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
  .portfolio-full .container {
    flex-direction: column;
    gap: 2rem;
  }
  
  .portfolio-full .images-and-sizes,
  .portfolio-full .product-info {
    flex: none;
    width: 100%;
  }
  
  .portfolio-full .product-image {
    height: 300px;
  }

  .portfolio-full .product-iframe {
    height: 300px;
  }
  
  .portfolio-full .gallery-image {
    width: 70px;
    height: 70px;
  }
  
  .portfolio-full .product-name {
    font-size: 1.5rem;
  }
  
  .portfolio-full .buttons {
    flex-direction: column;
  }
  
  .portfolio-full .wishlist {
    width: 100%;
    height: 60px;
    border-radius: 9999px;
    margin-top: 0.5rem;
  }
}
/* Карточки услуг */
.service-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.service-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.service-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.service-card-link:hover {
  color: inherit;
}

.service-icon {
  width: 4rem;
  height: 4rem;
  background-color: rgba(97, 27, 248, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  transition: background-color 0.3s;
}

.service-card:hover .service-icon {
  background-color: rgba(97, 27, 248, 0.2);
}

/* Горизонтальная прокрутка услуг только на мобильных (главная и страница Услуги) */
@media (max-width: 768px) {
  #services .grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 16px;
    padding-bottom: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #services .grid::-webkit-scrollbar {
    display: none;
  }
  #services .service-card-link,
  #services .service-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }
  #services .service-card-link {
    flex-shrink: 0;
  }
}

/* Тарифы */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.package {
  background: white;
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
}

.package:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
}

.package.basic { 
  border-top: 5px solid #4CAF50; 
}

.package.optimal { 
  border-top: 5px solid #2196F3; 
  transform: scale(1.05); 
}

.package.premium { 
  border-top: 5px solid #FF9800; 
}

.package.optimal::before {
  content: "POPULAR";
  position: absolute;
  top: 20px;
  right: -35px;
  background: #2196F3;
  color: white;
  padding: 5px 40px;
  font-size: 0.75rem;
  font-weight: bold;
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .package.optimal {
    transform: scale(1);
  }
}

.package-title {
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.basic .package-title { color: #4CAF50; }
.optimal .package-title { color: #2196F3; }
.premium .package-title { color: #FF9800; }

.price {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.price-detail {
  color: #7f8c8d;
  margin-bottom: 30px;
}

/* Карусель в тарифах */
.carousel {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  height: 200px;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  margin-bottom: 1.5rem;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  height: 100%;
  align-items: center;
}

.carousel img,
.carousel video,
.carousel iframe {
  width: 100%;
  height: 200px;
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  background-color: white;
  cursor: pointer;
  transition: transform 0.2s;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #611BF8;
  border: none;
  width: 34px;
  height: 34px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  padding: 0;
  line-height: 1;
}

.carousel-btn:hover {
  background: #611BF8;
  color: white;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 4px 18px rgba(97, 27, 248, 0.35);
}

.carousel-btn:active {
  transform: translateY(-50%) scale(0.93);
}

.carousel-btn.prev {
  left: 6px;
}

.carousel-btn.next {
  right: 6px;
}

/* Точки-маркеры карусели — стиль портфолио */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #e5e7eb;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.carousel-dot:hover {
  background-color: #c4b5fd;
  transform: scale(1.15);
}

.carousel-dot.active {
  width: 26px;
  height: 10px;
  border-radius: 10px;
  background-color: #611BF8;
  border-color: #4f1bc6;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(97, 27, 248, 0.3);
}

/* Список особенностей тарифа */
.features {
  list-style: none;
  margin-top: 30px;
  margin-bottom: 1.5rem;
}

/* Точки тарифов — скрыты на десктопе */
.tarif-dots {
  display: none;
}

.feature-item {
  padding: 12px 0;
  border-bottom: 1px solid #ecf0f1;
  display: flex;
  align-items: flex-start;
  font-size: 0.95rem;
}

.check {
  color: #27ae60;
  margin-right: 10px;
  flex-shrink: 0;
}

.cross {
  color: #e74c3c;
  margin-right: 10px;
  flex-shrink: 0;
}

.feature-value {
  color: #7f8c8d;
  font-size: 0.875rem;
}

.feature-sub {
  margin-top: 0.25rem;
  margin-left: 1.5rem;
  color: #666;
  font-size: 0.875rem;
}

.tarif-select-btn {
  background-color: #2196F3;
  color: white;
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  border: none;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
}

.tarif-select-btn:hover {
  background-color: rgba(33, 150, 243, 0.9);
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(33, 150, 243, 0.4);
}

/* Модальное окно тарифов */
.tarif-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.tarif-modal.active {
  display: flex;
}

.tarif-modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 1rem;
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.tarif-close {
  float: right;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
  color: #666;
}

.tarif-title {
  margin-top: 0;
  color: #611BF8;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* форма — см. ниже */

/* Оферта */
.oferta-modal {
  z-index: 1002;
}

.oferta-content {
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.oferta-text {
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
}

.oferta-text h4 {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
}

.oferta-text ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

.oferta-text li {
  margin-bottom: 0.25rem;
}

/* Контакты */
.contact-info {
  background-color: rgb(242, 242, 242);
  padding: 2rem;
  border-radius: 1rem;
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba(97, 27, 248, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-image {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Модальное окно изображений */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 1001;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.image-modal.active {
  display: flex;
}

.image-modal-content {
  position: relative;
  width: 90%;
  height: 90%;
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-modal img,
.image-modal video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: white;
  font-size: 2.5rem;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1002;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* =============================================
   КРАСИВЫЕ СТРЕЛКИ ДЛЯ МОДАЛЬНОГО ОКНА (Glassmorphism)
   ============================================= */
.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15); /* Эффект матового стекла */
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.8rem;
  border-radius: 50%;
  z-index: 1002;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0;
  text-align: center;
  line-height: 1;
}

.modal-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-50%) scale(1.15); /* Плавное увеличение */
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  color: #fff;
}

.modal-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.modal-arrow.prev { left: 30px; }
.modal-arrow.next { right: 30px; }

.image-modal .modal-arrow {
  background: rgba(255, 255, 255, 0.15);
  /* Переопределение старых стилей для модалки, чтобы наследовали новую красоту */
  color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 0; 
}
.image-modal .modal-arrow:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Мобильная адаптация красивых стрелок */
@media (max-width: 768px) {
  .image-modal .modal-arrow,
  .modal-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }
  .image-modal .modal-arrow.prev,
  .modal-arrow.prev { left: 12px; }
  
  .image-modal .modal-arrow.next,
  .modal-arrow.next { right: 12px; }
}

/* Футер */
.footer {
  margin-top: 5rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 3rem;
  padding-bottom: 2rem;
}

.footer-logo {
  width: 2rem;
  height: 2rem;
  background-color: #611BF8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-text {
  color: #6b7280;
  font-size: 0.875rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-link {
  color: #6b7280;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #611BF8;
}

/* Дополнительные стили для модального окна изображений (как в тарифах) */
.image-modal .carousel-media {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  background-color: rgba(0, 0, 0, 0.9);
}

.image-modal .carousel {
  height: 80vh;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 0;
  width: 100%;
}

.image-modal .carousel-track {
  height: 100%;
}

.image-modal .modal-arrow {
  background: rgba(97, 27, 248, 0.8);
  color: white;
  border: none;
  padding: 1rem 1.5rem;
  font-size: 2rem;
  border-radius: 50%;
}

.image-modal .modal-arrow.prev {
  left: 20px;
}

.image-modal .modal-arrow.next {
  right: 20px;
}

.image-modal .modal-arrow:hover {
  background: rgba(97, 27, 248, 1);
}

/* Модальное окно */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    color: #333;
}

.modal-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.project-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

/* video-container / gallery-video removed — not used */

/* Стили для формы */
.form-input, .form-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

/* Hide number input spinners */
.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.form-input[type="number"] {
    -moz-appearance: textfield;
}

.form-input:focus, .form-textarea:focus {
    outline: none;
    border-color: #611BF8;
    box-shadow: 0 0 0 3px rgba(97, 27, 248, 0.1);
}

/* Checkbox styling */
.checkbox-input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: #611BF8;
    cursor: pointer;
    flex-shrink: 0;
}

.submit-btn {
    background-color: #611BF8;
    color: white;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.submit-btn:hover {
    background-color: #5015d6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(97, 27, 248, 0.3);
}

.submit-btn:disabled {
    background-color: #aaa;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.submit-btn:disabled:hover {
    background-color: #aaa;
    transform: none;
    box-shadow: none;
}

/* Кнопка "Полная версия проекта" */
.submit-btn-paid {
    background-color: #FF9800 !important;
}

.submit-btn-paid:hover:not(:disabled) {
    background-color: #F57C00 !important;
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

.submit-btn-paid:disabled {
    background-color: #aaa !important;
}

/* Мобильные стили для стрелок в модальном окне изображений */
@media (max-width: 768px) {
  .image-modal .modal-arrow,
  .modal-arrow {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  }
  
  .image-modal .modal-arrow.prev,
  .modal-arrow.prev {
    left: 8px;
  }
  
  .image-modal .modal-arrow.next,
  .modal-arrow.next {
    right: 8px;
  }
  
  .modal-close {
    width: 36px;
    height: 36px;
    font-size: 1.5rem;
    top: 10px;
    right: 10px;
  }
}

/* Стили для миниатюры видео в галерее */
.video-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 0.75rem;
    cursor: pointer;
    border: 3px solid #e5e7eb;
    transition: all 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.video-thumbnail:hover {
    border-color: #611BF8;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(97, 27, 248, 0.15);
}

.video-thumbnail.active {
    border-color: #611BF8;
    border-width: 4px;
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(97, 27, 248, 0.2);
}

.video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Значок видео (маленький значок в углу) */
.video-thumbnail::after {
    content: '\f144'; /* Иконка play из Font Awesome */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    z-index: 2;
}

/* Стили для модального окна с видео */
.video-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    z-index: 1002;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.video-modal.active {
    display: flex;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
}

.video-modal iframe {
    width: 100%;
    height: 70vh;
    border-radius: 8px;
    border: none;
}

.video-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1003;
}

.video-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .video-thumbnail {
        width: 70px;
        height: 70px;
    }
    
    .video-thumbnail::after {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }
    
    .video-modal iframe {
        height: 50vh;
    }
}


/* ===== LANGUAGE SWITCHER ===== */
.lang-switcher {
  display: flex;
  gap: 2px;
  background: #f0f0f0;
  border-radius: 20px;
  padding: 2px;
}
.lang-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  transition: all 0.25s ease;
}
.lang-btn:hover {
  color: #611BF8;
}
.lang-btn.active {
  background: #611BF8;
  color: #fff;
}



/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ (Airbnb/Slack стиль) ===== */
@media (max-width: 768px) {
  /* Горизонтальная прокрутка для видео */
  .video-grid-mobile {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 8px 4px 20px 4px;
    margin: 0 -4px;
  }

  .video-grid-mobile .yt-facade {
    flex: 0 0 85%;
    scroll-snap-align: start;
    height: 220px;
    border-radius: 16px;
    margin-right: 0;
  }

  /* Контейнер для точек навигации */
  .video-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 24px;
  }

  .video-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
  }

  .video-dot.active {
    width: 24px;
    border-radius: 12px;
    background-color: #611BF8;
  }

  /* Стили для карточек проектов в мобильной версии */
  .portfolio-full .portfolio-card {
    padding: 16px;
    margin-bottom: 20px;
  }

  .portfolio-full .images-and-sizes {
    width: 100%;
    position: relative;
  }

  /* Горизонтальная галерея для основной картинки */
  .mobile-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    gap: 0;
    border-radius: 16px;
    margin-bottom: 12px;
  }

  .mobile-gallery .gallery-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    height: 280px;
    position: relative;
  }

  .mobile-gallery .gallery-slide img,
  .mobile-gallery .gallery-slide iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
  }

  /* Точки навигации для галереи */
  .gallery-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
  }

  .gallery-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #d1d5db;
    transition: all 0.3s ease;
  }

  .gallery-dot.active {
    width: 18px;
    border-radius: 9px;
    background-color: #611BF8;
  }

  /* Скрываем старую галерею миниатюр */
  .portfolio-full .image-gallery {
    display: none !important;
  }

  .portfolio-full .slideshow-buttons {
    display: none !important;
  }

  .portfolio-full .selected {
    display: none !important;
  }

  /* Адаптация контента */
  .portfolio-full .product-info {
    padding: 0 4px;
  }

  .portfolio-full .product-name {
    font-size: 1.5rem;
    margin-bottom: 4px;
  }

  .portfolio-full .description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 16px;
  }

  .portfolio-full .buttons .add-to-cart {
    padding: 14px 20px;
    font-size: 1rem;
  }
}



/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ (Airbnb/Slack стиль) ===== */
@media (max-width: 768px) {
  /* Горизонтальная прокрутка для видео */
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8 {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 16px !important;
    padding: 8px 4px 20px 4px !important;
    margin: 0 -4px !important;
    flex-wrap: nowrap !important;
  }

  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8 .yt-facade {
    flex: 0 0 85% !important;
    scroll-snap-align: start !important;
    height: 220px !important;
    border-radius: 16px !important;
    margin-right: 0 !important;
  }

  /* Контейнер для точек навигации */
  .video-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 12px !important;
    margin-bottom: 24px !important;
  }

  .video-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background-color: #d1d5db !important;
    transition: all 0.3s ease !important;
  }

  .video-dot.active {
    width: 24px !important;
    border-radius: 12px !important;
    background-color: #611BF8 !important;
  }

  /* Стили для карточек проектов в мобильной версии */
  .portfolio-full .portfolio-card {
    padding: 16px !important;
    margin-bottom: 20px !important;
  }

  .portfolio-full .images-and-sizes {
    width: 100% !important;
    position: relative !important;
  }

  /* Горизонтальная галерея для основной картинки */
  .mobile-gallery {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 0 !important;
    border-radius: 16px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE/Edge */
  }

  .mobile-gallery::-webkit-scrollbar {
    display: none !important; /* Chrome/Safari */
  }

  .mobile-gallery .gallery-slide {
    flex: 0 0 100% !important;
    scroll-snap-align: start !important;
    height: 280px !important;
    position: relative !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .mobile-gallery .gallery-slide img,
  .mobile-gallery .gallery-slide iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
  }

  /* Точки навигации для галереи */
  .gallery-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 12px 0 !important;
  }

  .gallery-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background-color: #d1d5db !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
  }

  .gallery-dot.active {
    width: 18px !important;
    border-radius: 9px !important;
    background-color: #611BF8 !important;
  }

  /* Скрываем старую галерею миниатюр */
  .portfolio-full .image-gallery {
    display: none !important;
  }

  .portfolio-full .slideshow-buttons {
    display: none !important;
  }

  .portfolio-full .selected {
    display: none !important;
  }

  /* Адаптация контента */
  .portfolio-full .product-info {
    padding: 0 4px !important;
  }

  .portfolio-full .product-name {
    font-size: 1.5rem !important;
    margin-bottom: 4px !important;
  }

  .portfolio-full .description {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }

  .portfolio-full .buttons .add-to-cart {
    padding: 14px 20px !important;
    font-size: 1rem !important;
    width: 100% !important;
  }

  /* Улучшаем читаемость */
  .portfolio-full .category {
    font-size: 0.8rem !important;
    margin-bottom: 4px !important;
  }

  .portfolio-full .price {
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
  }

  /* Модальное окно для мобильных */
  .modal-content {
    padding: 20px !important;
    max-width: 95% !important;
  }

  .project-warning {
    font-size: 0.8rem !important;
    padding: 8px 12px !important;
  }

  .submit-btn {
    padding: 12px 20px !important;
    font-size: 15px !important;
  }
}

/* Дополнительные улучшения для очень маленьких экранов */
@media (max-width: 480px) {
  .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3.gap-8 .yt-facade {
    flex: 0 0 90% !important;
    height: 200px !important;
  }

  .mobile-gallery .gallery-slide {
    height: 240px !important;
  }

  .portfolio-full .product-name {
    font-size: 1.3rem !important;
  }
}
/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ТАРИФОВ — горизонтальный свайп ===== */
@media (max-width: 768px) {
  #tarif {
    padding: 24px 0;
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    overflow: hidden;
  }

  #tarif > h2 {
    padding: 0 20px;
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  /* Контейнер тарифов — горизонтальный скролл */
  .packages {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
    gap: 0 !important;
    padding: 16px 20px 24px !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    grid-template-columns: none !important;
  }

  .packages::-webkit-scrollbar {
    display: none !important;
  }

  /* Карточка тарифа — полноэкранный слайд */
  .package {
    flex: 0 0 85% !important;
    scroll-snap-align: center !important;
    margin: 0 8px !important;
    padding: 24px 20px !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    transform: none !important;
    transition: box-shadow 0.3s ease !important;
    min-height: auto !important;
  }

  .package:first-child {
    margin-left: 20px !important;
  }

  .package:last-child {
    margin-right: 20px !important;
  }

  .package:hover {
    transform: none !important;
  }

  .package.optimal {
    transform: none !important;
  }

  .package.optimal::before {
    right: -30px;
    padding: 4px 35px;
    font-size: 0.65rem;
    top: 16px;
  }

  .package-title {
    font-size: 1.3rem !important;
    margin-bottom: 8px !important;
  }

  .price {
    font-size: 1.4rem !important;
    margin-bottom: 4px !important;
  }

  .price-detail {
    margin-bottom: 16px !important;
    font-size: 0.85rem !important;
  }

  /* Карусель внутри тарифа */
  .carousel {
    height: 180px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
    touch-action: pan-x !important;
  }

  .carousel img,
  .carousel video,
  .carousel iframe {
    height: 180px !important;
  }

  .carousel-btn {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }

  .carousel-btn.prev {
    left: 4px !important;
  }

  .carousel-btn.next {
    right: 4px !important;
  }

  .carousel-dots {
    margin-top: 8px;
    gap: 6px;
  }

  .carousel-dot {
    width: 8px;
    height: 8px;
  }

  .carousel-dot.active {
    width: 10px;
    height: 8px;
  }

  /* Фичи тарифа — компактнее */
  .features {
    margin-top: 16px !important;
    margin-bottom: 12px !important;
  }

  .feature-item {
    padding: 8px 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }

  .feature-sub {
    font-size: 0.78rem !important;
    margin-left: 0 !important;
  }

  .tarif-select-btn {
    width: 100% !important;
    padding: 12px !important;
    font-size: 0.95rem !important;
  }

  /* Точки навигации для тарифов */
  .tarif-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding-bottom: 8px !important;
  }

  .tarif-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d5db;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .tarif-dot.active {
    width: 24px;
    border-radius: 12px;
    background: #611BF8;
  }
}

/* Ещё компактнее для малых экранов */
@media (max-width: 480px) {
  .package {
    flex: 0 0 88% !important;
  }

  .carousel {
    height: 160px !important;
  }

  .carousel img,
  .carousel video,
  .carousel iframe {
    height: 160px !important;
  }

  .feature-item {
    font-size: 0.8rem !important;
  }

  .package-title {
    font-size: 1.15rem !important;
  }

  .price {
    font-size: 1.25rem !important;
  }
}


/* Стили для валидации форм */
/* Валидация полей — подсветка отключена */
/* =============================================
   DARK MODE TOGGLE BUTTON
   ============================================= */
.dark-mode-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #f8f0ff 0%, #e8daff 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #611BF8;
  box-shadow: 0 2px 8px rgba(97, 27, 248, 0.15);
}
.dark-mode-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(97, 27, 248, 0.25);
  background: linear-gradient(135deg, #efe0ff 0%, #d4b8ff 100%);
}
.dark-mode-btn:active {
  transform: scale(0.95);
}
.dark-mode-btn .material-symbols-outlined {
  font-size: 20px;
}

/* =============================================
   DARK MODE STYLES — Gradient Aesthetic
   ============================================= */

/* === BLOBS (hidden in light, visible in dark) === */
.dark-blob {
  display: none;
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}

html.dark .dark-blob { display: block; }

.dark-blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, #a020f0 0%, transparent 70%);
  top: -150px; left: -150px;
  opacity: 0.4;
  animation: dBlobDrift1 12s ease-in-out infinite alternate;
}
.dark-blob-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #e040a0 0%, transparent 70%);
  bottom: -100px; right: -100px;
  opacity: 0.35;
  animation: dBlobDrift2 15s ease-in-out infinite alternate;
}
.dark-blob-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #4040e0 0%, transparent 70%);
  top: 50%; left: 55%;
  opacity: 0.2;
  animation: dBlobDrift3 18s ease-in-out infinite alternate;
}
@keyframes dBlobDrift1 { to { transform: translate(80px, 60px); } }
@keyframes dBlobDrift2 { to { transform: translate(-60px, -80px); } }
@keyframes dBlobDrift3 { to { transform: translate(-40px, 50px); } }

/* === BASE === */
html.dark body {
  background-color: #0c0c14;
  color: #e2e2ea;
}

html.dark .bg-white,
html.dark .w-full.min-h-screen.bg-white {
  background-color: #0c0c14 !important;
}

/* === NAV === */
html.dark nav {
  background: rgba(12, 12, 20, 0.75) !important;
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: none !important;
}

html.dark .mobile-menu {
  background: rgba(18, 18, 30, 0.95) !important;
  border-color: rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

html.dark nav span.text-2xl { color: #f1f5f9; }

/* === TEXT COLORS === */
html.dark .text-gray-600,
html.dark p.text-gray-600,
html.dark span.text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800 {
  color: #b0b8c8 !important;
}

html.dark h1, html.dark h2, html.dark h3,
html.dark .font-bold, html.dark .font-semibold,
html.dark .text-3xl, html.dark .text-2xl, html.dark .text-xl, html.dark .text-lg {
  color: #f1f5f9 !important;
}

html.dark .text-white { color: #fff !important; }

/* === CARDS — glass effect === */
html.dark .service-card {
  background: rgba(18, 18, 30, 0.7) !important;
  border: 1px solid rgba(160, 32, 240, 0.12);
  backdrop-filter: blur(12px);
  color: #d1d5db;
}
html.dark .service-card:hover {
  border-color: rgba(160, 32, 240, 0.25);
  box-shadow: 0 8px 30px rgba(97, 27, 248, 0.1) !important;
}

html.dark .service-card p,
html.dark .service-card h3 { color: #d1d5db !important; }

html.dark .service-icon {
  background-color: rgba(97, 27, 248, 0.15);
}

/* === TARIFFS — glass effect === */
html.dark .package {
  background: rgba(18, 18, 30, 0.7) !important;
  border: 1px solid rgba(160, 32, 240, 0.12) !important;
  backdrop-filter: blur(12px);
  border-top: none !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
html.dark .package:hover {
  border-color: rgba(160, 32, 240, 0.3) !important;
  box-shadow: 0 8px 36px rgba(97, 27, 248, 0.15) !important;
}
html.dark .package.basic { border-top: 4px solid #4CAF50 !important; }
html.dark .package.optimal { border-top: 4px solid #818cf8 !important; }
html.dark .package.premium { border-top: 4px solid #f59e0b !important; }

html.dark .package-title { color: #f1f5f9 !important; }
html.dark .price { color: #c4b5fd !important; }
html.dark .price-detail { color: #8b8b9a !important; }
html.dark .feature-item { color: #b0b8c8 !important; border-color: rgba(255,255,255,0.06) !important; }
html.dark .feature-sub, html.dark .feature-value { color: #8b8b9a !important; }

html.dark .carousel { background-color: rgba(18, 18, 30, 0.8); }

html.dark .carousel-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #c4b5fd;
  border: 1px solid rgba(167, 139, 250, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
html.dark .carousel-btn:hover {
  background: #611BF8;
  color: white;
  border-color: #611BF8;
  box-shadow: 0 4px 16px rgba(97, 27, 248, 0.4);
}

html.dark .carousel-dot {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: transparent;
}
html.dark .carousel-dot:hover {
  background-color: rgba(167, 139, 250, 0.5);
}
html.dark .carousel-dot.active {
  background-color: #a78bfa;
  border-color: #7c3aed;
  box-shadow: 0 2px 10px rgba(167, 139, 250, 0.4);
}

/* === PORTFOLIO — glass effect === */
html.dark .portfolio-full {
  background: rgba(12, 12, 20, 0.6) !important;
}
html.dark .portfolio-full .portfolio-card {
  background: rgba(18, 18, 30, 0.7) !important;
  border: 1px solid rgba(160, 32, 240, 0.1);
  color: #e2e2ea;
}
html.dark .portfolio-full .product-name { color: #f1f5f9 !important; }
html.dark .portfolio-full .description,
html.dark .portfolio-full .category { color: #9ca3af !important; }

/* === CONTACT — glass effect === */
html.dark .contact-info {
  background: rgba(18, 18, 30, 0.7) !important;
  border: 1px solid rgba(160, 32, 240, 0.1);
}
html.dark .contact-info p,
html.dark .contact-info span,
html.dark .contact-info a { color: #d1d5db !important; }
html.dark .contact-info h3 { color: #f1f5f9 !important; }

/* === FAQ === */
html.dark [id="faq"] h3,
html.dark [id="faq"] .font-bold { color: #f1f5f9 !important; }
html.dark [id="faq"] p,
html.dark [id="faq"] .text-gray-600 { color: #a0aec0 !important; }
html.dark [id="faq"] > div > div {
  background: rgba(18, 18, 30, 0.6) !important;
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.06);
}

/* === FOOTER === */
html.dark .footer { border-color: rgba(255,255,255,0.06); }
html.dark .footer-text,
html.dark .footer-link { color: #6b7280 !important; }
html.dark .footer-link:hover { color: #a78bfa !important; }

/* === MODALS — glass effect === */
html.dark .modal-content,
html.dark .tarif-modal-content {
  background: rgba(26, 26, 46, 0.95) !important;
  border: 1px solid rgba(160, 32, 240, 0.15);
  color: #e2e2ea;
}
html.dark .modal-title,
html.dark .tarif-title { color: #f1f5f9 !important; }

html.dark .form-input,
html.dark .form-textarea {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e2e2ea !important;
}
html.dark .form-input:focus,
html.dark .form-textarea:focus {
  border-color: rgba(97, 27, 248, 0.5) !important;
}

html.dark select {
  background-color: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.1) !important;
  color: #e2e2ea !important;
}

html.dark label,
html.dark .block.text-sm,
html.dark .text-sm.text-gray-700 { color: #b0b8c8 !important; }

html.dark .project-warning {
  background: rgba(245, 158, 11, 0.08) !important;
  border-color: rgba(245, 158, 11, 0.2) !important;
  color: #fbbf24 !important;
}

/* === OFERTA === */
html.dark .oferta-text,
html.dark .oferta-text p,
html.dark .oferta-text li { color: #b0b8c8 !important; }
html.dark .oferta-text h4 { color: #f1f5f9 !important; }

/* === BUTTONS IN DARK === */
html.dark .dark-mode-btn {
  background: linear-gradient(135deg, rgba(97, 27, 248, 0.3) 0%, rgba(160, 32, 240, 0.2) 100%);
  border: 1px solid rgba(167, 139, 250, 0.3);
  color: #fbbf24;
  box-shadow: 0 2px 10px rgba(97, 27, 248, 0.2);
}
html.dark .dark-mode-btn:hover {
  background: linear-gradient(135deg, rgba(97, 27, 248, 0.5) 0%, rgba(160, 32, 240, 0.35) 100%);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.25);
  color: #fde68a;
}
html.dark .lang-switcher { background: rgba(255,255,255,0.06); }
html.dark .lang-btn { color: #6b7280; }
html.dark .lang-btn.active { background: #611BF8; color: #fff; }
html.dark .lang-btn:hover { color: #a78bfa; }

html.dark .shadow-md { box-shadow: none !important; }

/* === Responsive blob adjustments === */
@media (max-width: 768px) {
  .dark-blob-1 { width: 300px; height: 300px; }
  .dark-blob-2 { width: 250px; height: 250px; }
  .dark-blob-3 { display: none; }
}

/* =============================================
   DARK MODE — GRADIENT SECTION BACKGROUNDS
   ============================================= */

/* Global rule: all bg-[rgb(242,242,242)] sections get dark treatment */
html.dark .bg-\[rgb\(242\,242\,242\)\] {
  background: rgba(18, 18, 30, 0.7) !important;
  border: 1px solid rgba(160, 32, 240, 0.12);
  backdrop-filter: blur(12px);
}

/* About page — white cards inside dark sections */
html.dark .bg-\[rgb\(242\,242\,242\)\] .bg-white {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(160, 32, 240, 0.1);
}
html.dark .bg-\[rgb\(242\,242\,242\)\] .bg-white:hover {
  border-color: rgba(160, 32, 240, 0.25);
}

/* About section — gradient background */
html.dark #about .bg-\[rgb\(242\,242\,242\)\],
html.dark #about > div > div:first-child {
  background: radial-gradient(circle at 30% 40%, rgba(160, 32, 240, 0.25) 0%, rgba(12, 12, 20, 0.9) 70%) !important;
  border: 1px solid rgba(160, 32, 240, 0.15);
  border-radius: 1rem;
}

html.dark #about h2,
html.dark #about p,
html.dark #about strong,
html.dark #about span {
  color: #f1f5f9 !important;
}

html.dark #about p.text-gray-600,
html.dark #about [data-i18n="about_p1"],
html.dark #about [data-i18n="about_p2"],
html.dark #about [data-i18n="about_p3"] {
  color: #e2e2ea !important;
}

/* Services section — gradient background */
html.dark #services {
  background: radial-gradient(circle at 50% 30%, rgba(160, 32, 240, 0.2) 0%, rgba(12, 12, 20, 0.95) 65%) !important;
  border: 1px solid rgba(160, 32, 240, 0.12);
}

html.dark #services h2,
html.dark #services h3 {
  color: #f1f5f9 !important;
}

html.dark #services p,
html.dark #services .service-card p {
  color: #e2e2ea !important;
}

html.dark #services .service-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(160, 32, 240, 0.1);
}

html.dark #services .service-card:hover {
  border-color: rgba(160, 32, 240, 0.3);
}

/* Tariff section — gradient background */
html.dark #tarif {
  background: radial-gradient(circle at 60% 40%, rgba(160, 32, 240, 0.2) 0%, rgba(12, 12, 20, 0.95) 65%) !important;
  border: 1px solid rgba(160, 32, 240, 0.12);
}

html.dark #tarif h2,
html.dark #tarif h3,
html.dark #tarif .package-title {
  color: #f1f5f9 !important;
}

html.dark #tarif .price {
  color: #c4b5fd !important;
}

html.dark #tarif .price-detail,
html.dark #tarif .feature-item,
html.dark #tarif .feature-sub,
html.dark #tarif .feature-value {
  color: #d1d5db !important;
}

html.dark #tarif .package {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(160, 32, 240, 0.1) !important;
}

html.dark #tarif .package:hover {
  border-color: rgba(160, 32, 240, 0.3) !important;
}

html.dark #tarif .feature-item {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* =============================================
   ENHANCED MOBILE RESPONSIVENESS
   ============================================= */

/* === GLOBAL MOBILE FIXES === */
@media (max-width: 768px) {
  /* Prevent horizontal overflow */
  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Base content padding */
  .w-full.min-h-screen {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Section margins */
  .mb-20 { margin-bottom: 3rem !important; }

  /* Headings */
  .text-3xl { font-size: 1.5rem !important; line-height: 1.3 !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl { font-size: 1.1rem !important; }

  /* Nav improvements */
  nav.fixed {
    padding: 10px 12px !important;
  }
  nav .text-2xl { font-size: 1.25rem !important; }
  nav .w-10 { width: 36px !important; height: 36px !important; }

  /* Dark mode toggle on mobile */
  .dark-mode-btn {
    width: 38px;
    height: 38px;
  }
}

/* === BANNER === */
@media (max-width: 768px) {
  #banner .relative {
    height: 120px !important;
    margin-top: 60px !important;
  }
  #banner .text-4xl {
    font-size: 1.2rem !important;
    padding: 0 8px;
  }
}

/* === ABOUT SECTION === */
@media (max-width: 768px) {
  #about .flex-col.md\:flex-row { gap: 1.5rem !important; }
  #about .bg-\[rgb\(242\,242\,242\)\] { padding: 1rem !important; }
  #about p { font-size: 0.9rem !important; line-height: 1.6 !important; }
  #about img { border-radius: 0.75rem; }
}

/* === SERVICES SECTION === */
@media (max-width: 768px) {
  #services { padding: 1.5rem 1rem !important; border-radius: 1rem !important; }
  #services h2 { margin-bottom: 1.5rem !important; }
  #services .grid { gap: 1rem !important; }
  .service-card { padding: 1.25rem !important; }
  .service-card h3 { font-size: 1rem !important; }
  .service-card p { font-size: 0.85rem !important; }
  .service-icon { width: 3rem !important; height: 3rem !important; margin-bottom: 1rem !important; }
}

/* === PORTFOLIO SECTION === */
@media (max-width: 768px) {
  #projects h2 { font-size: 1.4rem !important; margin-bottom: 1rem !important; }
  #projects .gap-4 { gap: 0.75rem !important; }
  .portfolio-full { padding: 1rem !important; }
  .portfolio-full .portfolio-card { padding: 12px !important; margin-bottom: 16px !important; }
  .portfolio-full .product-name { font-size: 1.2rem !important; }
  .portfolio-full .description { font-size: 0.85rem !important; }
  .portfolio-full .buttons .add-to-cart {
    padding: 12px 16px !important;
    font-size: 0.9rem !important;
  }
}

/* === TARIFF SECTION === */
@media (max-width: 768px) {
  #tarif { padding: 1.5rem 0.5rem !important; border-radius: 1rem !important; }
  #tarif h2 { padding: 0 0.5rem; font-size: 1.4rem !important; margin-bottom: 1rem !important; }
}

/* === FAQ SECTION === */
@media (max-width: 768px) {
  #faq h2 { margin-bottom: 1rem !important; }
  #faq .grid { gap: 0.75rem !important; }
  #faq h3 { font-size: 0.95rem !important; }
  #faq p { font-size: 0.85rem !important; }
}

/* === CONTACT SECTION === */
@media (max-width: 768px) {
  #contact .grid { gap: 1.5rem !important; }
  #contact h2 { font-size: 1.4rem !important; }
  #contact .space-y-6 > * + * { margin-top: 1rem !important; }
  .contact-info { padding: 1.25rem !important; }
  .contact-item { gap: 0.75rem !important; }
  .contact-icon { width: 2rem !important; height: 2rem !important; }
  .submit-btn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 1rem !important;
  }
}

/* === FOOTER === */
@media (max-width: 768px) {
  .footer { padding-top: 2rem !important; }
  .footer .grid { gap: 1.5rem !important; }
  .footer .text-xl { font-size: 1.1rem !important; }
  .footer-text { font-size: 0.8rem !important; }
  .footer-links { gap: 0.35rem !important; }
}

/* === MODALS on mobile === */
@media (max-width: 768px) {
  .modal-content {
    max-width: 96% !important;
    padding: 16px !important;
    margin: 8px !important;
    max-height: 92vh !important;
  }
  .tarif-modal-content {
    max-width: 96% !important;
    padding: 16px !important;
    max-height: 90vh !important;
  }
  .modal-title { font-size: 1.15rem !important; }
}

/* === SMALL SCREENS (< 380px) === */
@media (max-width: 380px) {
  .text-3xl { font-size: 1.3rem !important; }
  nav .text-2xl { font-size: 1rem !important; }
  #banner .text-4xl { font-size: 1rem !important; }
  .service-card { padding: 1rem !important; }
  .package { padding: 16px 14px !important; }
  .portfolio-full .product-name { font-size: 1.1rem !important; }
}

/* FAQ mobile: каждый пункт — заголовок виден, плюс напротив, ответ скрыт по умолчанию */
@media (max-width: 767px) {
  #faq .faq-accordion-body {
    display: none !important;
  }
  #faq .faq-accordion-item.expanded .faq-accordion-body {
    display: block !important;
  }
  #faq .faq-accordion-item.expanded .faq-accordion-icon {
    transform: rotate(45deg); /* плюс в крестик */
  }
  #faq .faq-accordion-header {
    cursor: pointer;
  }
}

/* === FIX IMAGES NOT OVERFLOWING === */
@media (max-width: 768px) {
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }
  .contact-image {
    border-radius: 0.5rem !important;
  }
}

/* === TOUCH TARGETS — min 44px === */
@media (max-width: 768px) {
  a, button {
    min-height: 8px;
    display: inline-flex;
    align-items: center;
  }
  .lang-btn {
    min-height: 32px;
    padding: 4px 10px !important;
  }
  .footer-link {
    min-height: 36px;
  }
}

@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css');

/* Base Tailwind Styles */
*,
::after,
::before {
  border: 0 solid #e5e7eb;
  box-sizing: border-box;
}

::after,
::before {
  --tw-content: "";
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: 'Open Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  font-feature-settings: normal;
  font-variation-settings: normal;
  -moz-tab-size: 4;
  tab-size: 4;
  -webkit-tap-highlight-color: transparent;
}

body {
  line-height: inherit;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

/* Webcrumbs Specific Styles */
#webcrumbs .mx-auto {
  margin-left: auto;
  margin-right: auto;
}

#webcrumbs .mb-4 {
  margin-bottom: 1rem;
}

#webcrumbs .mb-8 {
  margin-bottom: 2rem;
}

#webcrumbs .ml-2 {
  margin-left: 0.5rem;
}

#webcrumbs .mt-1 {
  margin-top: 0.25rem;
}

#webcrumbs .mt-8 {
  margin-top: 2rem;
}

#webcrumbs .block {
  display: block;
}

#webcrumbs .inline-block {
  display: inline-block;
}

#webcrumbs .flex {
  display: flex;
}

#webcrumbs .grid {
  display: grid;
}

#webcrumbs .h-10 {
  height: 2.5rem;
}

#webcrumbs .h-12 {
  height: 3rem;
}

#webcrumbs .h-4 {
  height: 1rem;
}

#webcrumbs .h-full {
  height: 100%;
}

#webcrumbs .w-10 {
  width: 2.5rem;
}

#webcrumbs .w-12 {
  width: 3rem;
}

#webcrumbs .w-4 {
  width: 1rem;
}

#webcrumbs .w-full {
  width: 100%;
}

#webcrumbs .max-w-4xl {
  max-width: 56rem;
}

#webcrumbs .transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#webcrumbs .resize-none {
  resize: none;
}

#webcrumbs .flex-col {
  flex-direction: column;
}

#webcrumbs .items-start {
  align-items: flex-start;
}

#webcrumbs .items-center {
  align-items: center;
}

#webcrumbs .justify-center {
  justify-content: center;
}

#webcrumbs .justify-between {
  justify-content: space-between;
}

#webcrumbs .gap-4 {
  gap: 1rem;
}

#webcrumbs .gap-6 {
  gap: 1.5rem;
}

#webcrumbs .space-x-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.75rem * var(--tw-space-x-reverse));
  margin-left: calc(0.75rem * (1 - var(--tw-space-x-reverse)));
}

#webcrumbs .space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * (1 - var(--tw-space-x-reverse)));
}

#webcrumbs .space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * (1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}

#webcrumbs .space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * (1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}

#webcrumbs .overflow-hidden {
  overflow: hidden;
}

#webcrumbs .rounded {
  border-radius: 0.375rem;
}

#webcrumbs .rounded-2xl {
  border-radius: 1rem;
}

#webcrumbs .rounded-full {
  border-radius: 9999px;
}

#webcrumbs .rounded-lg {
  border-radius: 0.5rem;
}

#webcrumbs .border-2 {
  border-width: 2px;
}

#webcrumbs .border-t {
  border-top-width: 1px;
}

#webcrumbs .border-gray-200 {
  border-color: rgb(229 231 235);
}

#webcrumbs .border-gray-300 {
  border-color: rgb(209 213 219);
}

#webcrumbs .border-primary-500 {
  border-color: rgb(99 102 241);
}

#webcrumbs .bg-gray-50 {
  background-color: rgb(249 250 251);
}

#webcrumbs .bg-primary-500 {
  background-color: rgb(99 102 241);
  color: hsla(0, 0%, 100%, 0.9);
}

#webcrumbs .bg-primary-600 {
  background-color: rgb(79 70 229);
  color: hsla(0, 0%, 100%, 0.9);
}

#webcrumbs .bg-white {
  background-color: rgb(255 255 255);
}

#webcrumbs .p-6 {
  padding: 1.5rem;
}

#webcrumbs .p-8 {
  padding: 2rem;
}

#webcrumbs .px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

#webcrumbs .px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

#webcrumbs .py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

#webcrumbs .py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

#webcrumbs .pt-8 {
  padding-top: 2rem;
}

#webcrumbs .text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

#webcrumbs .text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

#webcrumbs .text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

#webcrumbs .text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

#webcrumbs .font-bold {
  font-weight: 700;
}

#webcrumbs .font-medium {
  font-weight: 500;
}

#webcrumbs .font-semibold {
  font-weight: 600;
}

#webcrumbs .text-gray-600 {
  color: rgb(75 85 99);
}

#webcrumbs .text-gray-700 {
  color: rgb(55 65 81);
}

#webcrumbs .text-primary-100 {
  color: rgb(224 231 255);
}

#webcrumbs .text-primary-600 {
  color: rgb(79 70 229);
}

#webcrumbs .text-white {
  color: rgb(255 255 255);
}

#webcrumbs .shadow-lg {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

#webcrumbs .shadow-xl {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

#webcrumbs .transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#webcrumbs .transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#webcrumbs .duration-300 {
  transition-duration: 300ms;
}

/* Hover States */
#webcrumbs .hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

#webcrumbs .hover\:bg-primary-400:hover {
  background-color: rgb(148 163 184);
}

#webcrumbs .hover\:bg-primary-700:hover {
  background-color: rgb(29 78 216);
}

#webcrumbs .hover\:text-primary-700:hover {
  color: rgb(29 78 216);
}

#webcrumbs .hover\:shadow-xl:hover {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Focus States */
#webcrumbs .focus\:border-primary-500:focus {
  border-color: rgb(99 102 241);
}

#webcrumbs .focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

#webcrumbs .focus\:ring-primary-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
}

/* Group Hover */
#webcrumbs .group:hover .group-hover\:bg-primary-400 {
  background-color: rgb(148 163 184);
}

/* Responsive Design */
@media (min-width: 768px) {
  #webcrumbs .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  #webcrumbs .md\:p-10 {
    padding: 2.5rem;
  }
  
  #webcrumbs .md\:p-8 {
    padding: 2rem;
  }
  
  #webcrumbs .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 1024px) {
  #webcrumbs .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  #webcrumbs .lg\:p-12 {
    padding: 3rem;
  }
}
/* =============================================
   QUIZ / CALCULATOR SECTION — Brand purple hero
   ============================================= */
.quiz-hero {
  position: relative;
  background: linear-gradient(135deg, #611BF8 0%, #7c3aed 60%, #5b21b6 100%);
  border-radius: 1.5rem;
  padding: 60px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 3-column layout: left description / center calculator / right description */
.quiz-main-row {
  width: 100%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 32px;
  align-items: start;
  justify-content: flex-start;
}

.quiz-side-card {
  background: #FFFFFF;
  border-radius: 1.25rem;
  padding: 18px 16px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.6);
  text-align: left;
}

.quiz-center-card {
  max-width: 520px !important;
  width: 100%;
  padding: 34px 32px !important;
}

/* Mobile dots for quiz (shown only on small screens) */
.quiz-mobile-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.quiz-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.15);
  transition: transform 0.2s ease, background 0.2s ease;
}

.quiz-dot.active {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
}

/* White card */
.quiz-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 1.25rem;
  padding: 40px 36px;
  max-width: 540px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.quiz-step {
  margin-bottom: 20px;
}

.quiz-step label {
  display: block;
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.quiz-input {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid #ececec;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
  background: #fff;
  color: #333;
  -webkit-appearance: none;
}

.quiz-input:focus {
  border-color: #611BF8;
  box-shadow: 0 0 0 3px rgba(97, 27, 248, 0.12);
}

/* Hide number spinners */
.quiz-input[type="number"]::-webkit-outer-spin-button,
.quiz-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.quiz-input[type="number"] {
  -moz-appearance: textfield;
}

.quiz-checkbox-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
}

/* White button on white card */
.quiz-calc-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  color: #fff;
  background: #611BF8;
  box-shadow: 0 4px 16px rgba(97, 27, 248, 0.3);
  transition: all 0.3s ease;
  margin-top: 8px;
}

.quiz-calc-btn:hover {
  background: #5015d6;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(97, 27, 248, 0.4);
}

.quiz-calc-btn:active {
  transform: translateY(0);
}

/* Inline quiz result — smooth slide-down, white text on purple bg */
.quiz-result-inline {
  position: relative;
  z-index: 1;
  margin-top: 28px;
  max-width: 540px;
  width: 100%;
  opacity: 0;
  transform: translateY(-12px);
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.5s ease, transform 0.5s ease, max-height 0.6s ease;
}

.quiz-result-inline.visible {
  opacity: 1;
  transform: translateY(0);
  max-height: 500px;
}

/* White bonus text on purple background */
.quiz-bonus-text-white {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border-left: 4px solid rgba(255, 255, 255, 0.4);
  padding: 16px 20px;
  margin-top: 16px;
  border-radius: 0 10px 10px 0;
  text-align: left;
}

/* === Dark mode === */
html.dark .quiz-hero {
  background: linear-gradient(135deg, #4c1ab0 0%, #5b21b6 60%, #3b1286 100%);
}

/* === Responsive === */
@media (max-width: 768px) {
  .quiz-hero {
    padding: 24px 0;
    border-radius: 0;
    margin-left: -12px;
    margin-right: -12px;
    overflow: visible;
  }

  .quiz-main-row {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    padding: 16px 20px 24px;
    scrollbar-width: none;
    touch-action: auto;
  }

  .quiz-main-row::-webkit-scrollbar {
    display: none;
  }

  .quiz-side-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    width: auto;
    margin: 0 8px;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  .quiz-side-left {
    margin-left: 20px !important;
  }
  .quiz-side-right {
    margin-right: 20px !important;
  }

  .quiz-center-card {
    flex: 0 0 85%;
    scroll-snap-align: center;
    max-width: none !important;
    padding: 24px 20px !important;
    margin: 0 8px;
    border-radius: 16px;
  }

  #quiz .quiz-side-card h3 {
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
  }
  #quiz .quiz-side-card ol {
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
  }
  #quiz .quiz-step label {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
  }
  #quiz .quiz-input {
    font-size: 0.9rem !important;
    padding: 12px 14px !important;
    border-width: 1px !important;
  }
  #quiz .quiz-checkbox-label {
    font-size: 0.85rem !important;
  }
  .quiz-calc-btn {
    font-size: 0.95rem !important;
    padding: 12px 14px !important;
  }

  .quiz-mobile-dots {
    display: flex;
  }
}