@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

/* ---- Base ---- */
html, body {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

/* ---- Geometric Grid Background ---- */
.geo-grid {
  background-image:
    linear-gradient(hsl(0 0% 100% / 0.03) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Glassmorphism Card ---- */
.glass-card {
  background: hsl(220 30% 10% / 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0.75rem;
}

/* ---- Header Glass ---- */
/* Общий стиль шапки с эффектом стекла */
.glass-header {
  background: hsl(222 47% 4% / 0.85) !important; /* Темный полупрозрачный фон */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(0 0% 100% / 0.08);
}

/* Кнопки соцсетей для мобильных (как на скриншоте) */
.header-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px; /* Скругление как на скриншоте */
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Кнопки соцсетей для десктопа (чуть меньше) */
.header-social-btn-sm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Адаптивность высоты шапки */
@media (max-width: 767px) {
  #site-header {
    height: auto !important; /* Позволяем шапке растягиваться на две строки */
  }
}

/* Состояние при скролле (опционально - можно сделать чуть темнее) */
.glass-header.scrolled {
  background: hsl(222 47% 2% / 0.95) !important;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

.glass-header.scrolled {
  height: 56px !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* ---- Glow Blobs ---- */
.glow-blob-blue {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: hsl(217 91% 60% / 0.15);
  filter: blur(120px);
  pointer-events: none;
}

.glow-blob-orange {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: hsl(24 95% 54% / 0.12);
  filter: blur(120px);
  pointer-events: none;
}

/* ---- SOS Border Glow ---- */
.sos-border {
  border: 2px solid hsl(24 95% 54% / 0.5);
  box-shadow:
    0 0 40px -10px hsl(24 95% 54% / 0.3),
    inset 0 0 40px -20px hsl(24 95% 54% / 0.1);
}

/* ---- Pulse Glow ---- */
.pulse-glow {
  animation: pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px -5px hsl(24 95% 54% / 0.5);
  }
  50% {
    box-shadow: 0 0 40px -5px hsl(24 95% 54% / 0.8);
  }
}

/* ---- Bento Tile ---- */
.bento-tile {
  background: hsl(220 30% 10% / 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(0 0% 100% / 0.1);
  border-radius: 0.75rem;
  overflow: hidden;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.bento-tile:hover {
  transform: scale(1.03);
  border-color: hsl(217 91% 60% / 0.5);
  box-shadow: 0 0 30px -5px hsl(217 91% 60% / 0.3);
}

/* ---- Hazard Stripes ---- */
.hazard-stripes {
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 20px,
    hsl(45 100% 50% / 0.06) 20px,
    hsl(45 100% 50% / 0.06) 40px
  );
}

/* ---- Button Shine ---- */
.btn-shine {
  position: relative;
  overflow: hidden;
}

.btn-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(0 0% 100% / 0.15),
    transparent
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

.btn-shine:hover::after {
  left: 120%;
}

/* ---- Gradient Border Button ---- */
.btn-gradient-border {
  position: relative;
  z-index: 0;
}

.btn-gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(0.75rem + 2px);
  background: linear-gradient(135deg, hsl(217 91% 60%), hsl(24 95% 54%));
  z-index: -1;
}

/* ---- Text Utilities ---- */
.text-gradient-blue {
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: linear-gradient(135deg, hsl(217 91% 60%), hsl(210 100% 70%));
}

.text-outline {
  -webkit-text-stroke: 1px hsl(210 20% 95% / 0.15);
  color: transparent;
}

/* ---- Marquee ---- */
.marquee-track {
  display: flex;
  animation: marqueeScroll 30s linear infinite;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---- Scroll Reveal ---- */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

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

.fab-container {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  z-index: 100;
}

/* Состояние открытого меню */
.fab-menu-open {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.fab-active {
  animation: none;
}



/* ---- FORM FIELDS STYLING (FIX) ---- */

/* 1. Стили для заполненных полей (класс .filled добавляется через JS) */
input.filled,
textarea.filled,
select.filled {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: hsl(217 91% 60%) !important; /* Синяя обводка */
}

/* 2. Стили для полей в фокусе (когда кликнули) */
input:focus,
textarea:focus,
select:focus {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: hsl(217 91% 60%) !important;
  box-shadow: 0 0 0 4px hsl(217 91% 60% / 0.1);
}

/* 3. Фикс автозаполнения браузера (синий/белый фон) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000 !important;
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  transition: background-color 5000s ease-in-out 0s;
  border-color: hsl(217 91% 60%) !important;
}

/* 4. Стилизация выпадающего списка (Options) - Ошибка №4 */
select option {
  background-color: #ffffff !important;
  color: #000000 !important;
  padding: 10px;
}

/* 5. Анимация модального окна */
.modal-open {
  overflow: hidden;
}

.modal-animate-in {
  opacity: 1 !important;
  transform: scale(100%) !important;
}