/* Главный связующий CSS файл (импортирует все модули) */
@import url('base.css');
@import url('components.css');
@import url('header.css');
@import url('hero.css');
@import url('about.css');
@import url('services.css');
@import url('results.css');
@import url('contacts.css');
@import url('footer.css');
@import url('responsive.css');
@import url('privacy.css');

/* ============================================================
   HERO SNOW — реальные элементы, transform: translateY()
   ============================================================ */

.hero-section {
  position: relative !important;
  overflow: hidden;
  isolation: isolate;
}

/* Мягкое свечение сверху и снизу */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 45% at 50% 0%,   rgba(255, 215, 140, .40) 0%, transparent 70%),
    radial-gradient(90% 50% at 50% 100%, rgba(160, 200, 255, .30) 0%, transparent 70%);
}

/* Контейнер снега */
.hero-snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Сама снежинка */
.snowflake {
  position: absolute;
  top: -20px;
  left: var(--left, 50%);
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 8px  rgba(255, 255, 255, .95),
    0 0 3px  rgba(255, 255, 255, 1);
  opacity: 0;
  animation: snowDrop var(--dur, 12s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
}

@keyframes snowDrop {
  0%   { transform: translate3d(0, 0, 0);                              opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), calc(100vh + 40px), 0); opacity: 0; }
}

/* Контент поверх снега */
.hero-container {
  position: relative;
  z-index: 2;
}

/* Блик по бейджу */
.hero-badge { position: relative; overflow: hidden; }
.hero-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 50%, transparent 70%);
  transform: translate3d(-120%, 0, 0);
  animation: badgeGlint 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeGlint {
  0%,  55%  { transform: translate3d(-120%, 0, 0); }
  70%, 100% { transform: translate3d( 120%, 0, 0); }
}
/* ============================================================
   ATMOSPHERIC SECTION BACKGROUNDS — фоны всех секций
   ============================================================ */

.about-section,
.pricing-section,
.results-section,
.contacts-section {
  position: relative;
  overflow: hidden;
}

.about-section > .container,
.pricing-section > .container,
.results-section > .container,
.contacts-section > .container {
  position: relative;
  z-index: 2;
}

/* ---------- О НАС — тёплое + прохладное ---------- */
.about-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(50% 60% at 12% 20%, rgba(255, 215, 140, .15) 0%, transparent 70%),
    radial-gradient(45% 55% at 88% 80%, rgba(167, 243, 208, .10) 0%, transparent 70%);
}

/* ---------- УСЛУГИ — золото сверху + парящие искры ---------- */
.pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(75% 50% at 50% 0%,   rgba(255, 215, 140, .22) 0%, transparent 72%),
    radial-gradient(75% 50% at 50% 100%, rgba(147, 197, 253, .14) 0%, transparent 72%);
}

.pricing-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 3px at 12% 20%, rgba(255, 215, 140, .75) 0 45%, transparent 70%),
    radial-gradient(circle 2px at 33% 65%, rgba(255, 255, 255, .60) 0 45%, transparent 70%),
    radial-gradient(circle 4px at 55% 15%, rgba(255, 215, 140, .55) 0 45%, transparent 70%),
    radial-gradient(circle 2px at 78% 45%, rgba(255, 255, 255, .50) 0 45%, transparent 70%),
    radial-gradient(circle 3px at 92% 78%, rgba(255, 215, 140, .65) 0 45%, transparent 70%);
  background-size: 350px 350px;
  background-repeat: repeat;
  animation: sparksRise 24s linear infinite;
  opacity: .85;
}

@keyframes sparksRise {
  from { background-position:    0     0; }
  to   { background-position: -120px -350px; }
}

/* ---------- ПОРТФОЛИО — холодное звёздное ---------- */
.results-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 85% 12%, rgba(147, 197, 253, .16) 0%, transparent 70%),
    radial-gradient(60% 55% at 15% 88%, rgba(196, 181, 253, .12) 0%, transparent 70%);
}

.results-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle 2px at 15% 25%, rgba(255, 255, 255, .75) 0 45%, transparent 70%),
    radial-gradient(circle 3px at 42% 55%, rgba(196, 181, 253, .65) 0 45%, transparent 70%),
    radial-gradient(circle 2px at 68% 18%, rgba(255, 255, 255, .65) 0 45%, transparent 70%),
    radial-gradient(circle 3px at 88% 72%, rgba(147, 197, 253, .65) 0 45%, transparent 70%),
    radial-gradient(circle 2px at 25% 82%, rgba(255, 255, 255, .55) 0 45%, transparent 70%);
  background-size: 380px 380px;
  background-repeat: repeat;
  animation: starsDrift 32s linear infinite;
  opacity: .75;
}

@keyframes starsDrift {
  from { background-position:   0     0; }
  to   { background-position: 100px -380px; }
}

/* ============================================================
   НОВОГОДНИЕ ФИГУРЫ В СЕКЦИЯХ
   SVG-иконки плавают в фоне. Работает на transform — надёжно.
   ============================================================ */

.about-section,
.pricing-section,
.results-section,
.contacts-section {
  position: relative;
  overflow: hidden;
}

.about-section > .container,
.pricing-section > .container,
.results-section > .container,
.contacts-section > .container {
  position: relative;
  z-index: 2;
}

/* Контейнер фигур — на всю секцию, поверх фона, под контентом */
.section-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Общий стиль фигуры */
.decor {
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  width:  var(--size, 44px);
  height: var(--size, 44px);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  animation: decorFloat var(--dur, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 12px rgba(15, 23, 42, .12));
}

@keyframes decorFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-5deg);       opacity: 0; }
  15%      { transform: translate3d(0, -12px, 0) rotate(-3deg);    opacity: .55; }
  50%      { transform: translate3d(18px, -35px, 0) rotate(5deg);  opacity: .70; }
  85%      { transform: translate3d(0, -12px, 0) rotate(3deg);     opacity: .55; }
}

/* --- SVG-фигуры --- */
.decor-tree {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 60'><polygon points='20,2 38,52 2,52' fill='%2334d399'/><polygon points='20,2 38,52 20,42' fill='%2310b981'/><rect x='17' y='52' width='6' height='8' fill='%2378350f'/><circle cx='20' cy='5' r='4' fill='%23fbbf24'/></svg>");
}

.decor-star {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><polygon points='20,2 25,15 38,15 27,23 31,36 20,28 9,36 13,23 2,15 15,15' fill='%23fbbf24' stroke='%23f59e0b' stroke-width='1'/></svg>");
}

.decor-gift {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='4' y='12' width='32' height='24' fill='%23dc2626'/><rect x='2' y='8' width='36' height='8' fill='%23b91c1c'/><rect x='17' y='8' width='6' height='28' fill='%23fbbf24'/><path d='M20 8 Q14 0 10 4 T20 8 Q26 0 30 4 T20 8 Z' fill='%23fbbf24'/></svg>");
}

.decor-flake {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><g stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' fill='none'><line x1='20' y1='4' x2='20' y2='36'/><line x1='4' y1='20' x2='36' y2='20'/><line x1='8' y1='8' x2='32' y2='32'/><line x1='32' y1='8' x2='8' y2='32'/></g><circle cx='20' cy='20' r='3' fill='%23ffffff'/></svg>");
  filter: drop-shadow(0 0 4px rgba(147,197,253,.6));
}

.decor-ornament {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 42'><rect x='13' y='0' width='4' height='5' fill='%23fbbf24'/><circle cx='15' cy='22' r='15' fill='%23dc2626'/><ellipse cx='10' cy='17' rx='3' ry='5' fill='rgba(255,255,255,0.5)'/></svg>");
}

.decor-bell {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 45'><path d='M20 4 C10 4 6 14 6 26 L6 34 L34 34 L34 26 C34 14 30 4 20 4 Z' fill='%23fbbf24'/><rect x='2' y='34' width='36' height='4' rx='2' fill='%23f59e0b'/><circle cx='20' cy='41' r='3' fill='%23d97706'/></svg>");
}

/* Мягкое свечение за фигурами (оставляю, но нежное) */
.about-section::before,
.pricing-section::before,
.results-section::before,
.contacts-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.about-section::before {
  background:
    radial-gradient(60% 50% at 15% 20%, rgba(255, 215, 140, .14) 0%, transparent 70%),
    radial-gradient(60% 50% at 85% 80%, rgba(167, 243, 208, .10) 0%, transparent 70%);
}
.pricing-section::before {
  background:
    radial-gradient(70% 50% at 50% 0%,   rgba(255, 215, 140, .18) 0%, transparent 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(147, 197, 253, .12) 0%, transparent 72%);
}
.results-section::before {
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(147, 197, 253, .16) 0%, transparent 70%),
    radial-gradient(60% 55% at 15% 85%, rgba(196, 181, 253, .12) 0%, transparent 70%);
}
.contacts-section::before {
  background:
    radial-gradient(50% 60% at 10% 30%, rgba(37, 211, 102, .14) 0%, transparent 70%),
    radial-gradient(50% 60% at 90% 70%, rgba(255, 215, 140, .16) 0%, transparent 70%);
}

/* ============================================================
   УСЛУГИ — элегантный ховер
   ============================================================ */

.price-card::after { display: none !important; }
.price-card:hover .price-features li::before { transform: none !important; }
.price-features li::before { transform: none !important; }

.price-card {
  position: relative;
  overflow: hidden;
  transition:
    transform .5s  cubic-bezier(.22, 1, .36, 1),
    box-shadow .5s cubic-bezier(.22, 1, .36, 1);
}
.price-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 25px 55px -22px rgba(15, 23, 42, .28),
    0 0 0 1px rgba(251, 191, 36, .40),
    0 0 55px -12px rgba(251, 191, 36, .40);
}

.price-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 80%;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg,
              transparent,
              #fbbf24 30%,
              #f59e0b 50%,
              #fbbf24 70%,
              transparent);
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  z-index: 3;
}
.price-card:hover::before {
  transform: translateX(-50%) scaleX(1);
}

.price-num {
  transition:
    background-color .45s ease,
    color .45s ease,
    transform .45s cubic-bezier(.22, 1, .36, 1);
}
.price-card:hover .price-num {
  background-color: #fbbf24;
  color: #1f2937;
  transform: scale(1.06);
}

/* ============================================================
   КОНТАКТЫ — иконки и форма
   ============================================================ */

.contact-box .bi-whatsapp {
  display: inline-block;
  animation: waPulse 2.6s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.10); }
}

.contact-box .bi-telephone-fill {
  display: inline-block;
  animation: phoneRing 3.6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes phoneRing {
  0%, 80%, 100% { transform: rotate(0); }
  85%           { transform: rotate(-14deg); }
  90%           { transform: rotate(14deg); }
  95%           { transform: rotate(-8deg); }
}

.form-group label {
  transition: color .3s ease, transform .3s ease;
}
.form-group:focus-within label {
  color: #d97706;
  transform: translateX(3px);
}
.form-control {
  transition: border-color .3s ease,
              box-shadow .3s ease,
              transform .35s cubic-bezier(.22, 1, .36, 1);
}
.form-control:focus {
  transform: translateY(-2px);
  border-color: #fbbf24 !important;
  box-shadow: 0 8px 22px -10px rgba(251, 191, 36, .55),
              0 0 0 4px rgba(251, 191, 36, .12);
}
.btn-form-submit {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease;
}
.btn-form-submit:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -14px rgba(37, 211, 102, .55);
}
.btn-form-submit:active {
  transform: translateY(-1px);
}
/* ============================================================
   LANGUAGE SWITCHER — стильный переключатель языков
   ============================================================ */

.lang-switcher {
  position: relative;
  display: inline-block;
  font-family: Montserrat, sans-serif;
  z-index: 50;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  min-height: 42px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: #1f2937;
  letter-spacing: .5px;
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .3s cubic-bezier(.22, 1, .36, 1),
    background-color .3s ease;
  font-family: inherit;
}

.lang-toggle:hover {
  border-color: #fbbf24;
  box-shadow: 0 4px 14px -6px rgba(251, 191, 36, .45);
  transform: translateY(-1px);
}

.lang-switcher.is-open .lang-toggle {
  border-color: #fbbf24;
  background: #fffbeb;
  box-shadow: 0 4px 14px -6px rgba(251, 191, 36, .55);
}

/* --- Флаг в кнопке --- */
.lang-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .12);
  flex-shrink: 0;
  line-height: 0;
}

.lang-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang-code {
  font-size: 13px;
  font-weight: 800;
  color: #1f2937;
}

.lang-arrow {
  font-size: 11px;
  color: #6b7280;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.lang-switcher.is-open .lang-arrow {
  transform: rotate(180deg);
  color: #d97706;
}

/* --- Раскрывающееся меню --- */
.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  box-shadow:
    0 18px 40px -18px rgba(15, 23, 42, .28),
    0 0 0 1px rgba(251, 191, 36, .08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.22, 1, .36, 1),
    visibility .28s;
  pointer-events: none;
}

.lang-switcher.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #1f2937;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}

.lang-option:hover {
  background: #fef3c7;
  color: #78350f;
  transform: translateX(2px);
}

.lang-option.is-active {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #78350f;
  font-weight: 700;
}

/* --- Флаг в выпадающем меню --- */
.lang-option-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, .10);
  flex-shrink: 0;
  line-height: 0;
}

.lang-option-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lang-option-name {
  flex: 1;
}

.lang-option-code {
  font-size: 11px;
  font-weight: 700;
  color: #9ca3af;
  letter-spacing: .5px;
}

.lang-option.is-active .lang-option-code {
  color: #b45309;
}

.lang-option-check {
  color: #d97706;
  font-size: 16px;
}

/* --- Мобильная версия --- */
@media (max-width: 991px) {
  .lang-switcher {
    order: -1;
    margin-right: auto;
  }
  .lang-toggle {
    padding: 8px 10px;
    gap: 6px;
  }
  .lang-menu {
    right: auto;
    left: 0;
    transform-origin: top left;
  }
}

@media (max-width: 575px) {
  .lang-code { display: none; }
  .lang-toggle { padding: 9px 10px; }
}
