/* ===== Magic_Fox__ v11 styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Inter:wght@300;400;600;800&display=swap');
:root{--bg:#0b0b10;--ink:#e9e9f6;--muted:#a8a8bf;--accent:#ff8c2b;--accent2:#c86bff;--card:#13131a;--glass:rgba(255,255,255,.06)}
*{box-sizing:border-box}
html,body{margin:0;background:radial-gradient(1000px 700px at 80% -10%, rgba(200,107,255,.18), transparent 60%), linear-gradient(180deg,#0b0b10,#0b0b12); color:var(--ink); font-family:Inter,system-ui,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
.container{width:min(1200px,92vw);margin:0 auto;padding:24px}
.nav{position:sticky;top:0;z-index:40;background:linear-gradient(180deg, rgba(10,10,15,.9), rgba(10,10,16,.6));backdrop-filter: blur(6px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);object-fit:cover}
.brand h1{font-family:Cinzel,serif;font-size:20px;margin:0}
.btn{padding:12px 18px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0d0d11;font-weight:800;border:none;display:inline-block}
.btn.secondary{background:transparent;color:var(--ink);border:1px solid rgba(255,255,255,.16)}
.hero{padding:64px 0 24px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center}
.hero h2{font-family:Cinzel,serif;font-size:44px;margin:0 0 12px}
.hero p{color:var(--muted);font-size:18px}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 20px}
.badge{padding:8px 12px;border-radius:999px;background:var(--glass);border:1px solid rgba(255,255,255,.12);font-size:14px}
.hero img{width:100%;border-radius:18px;border:1px solid rgba(255,255,255,.1)}
.section{padding:44px 0}
.h{font-family:Cinzel,serif;font-weight:700;font-size:28px;margin:0 0 16px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kv div{background:var(--glass);padding:12px;border:1px solid rgba(255,255,255,.1);border-radius:12px}
.glass{background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:16px}
.faq details{background:var(--card);border:1px solid rgba(255,255,255,.1);padding:14px;border-radius:12px;margin:10px 0}
.faq summary{cursor:pointer;font-weight:700}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.wa-form{display:block;padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
label{display:block;font-size:14px;color:var(--muted)}
input,textarea{width:100%;margin-top:6px;background:rgba(255,255,255,.06);color:var(--ink);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px;outline:none}
input:focus,textarea:focus{border-color:var(--accent)}
.options{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 16px;border:1px dashed rgba(255,255,255,.16);padding:12px;border-radius:12px}
.options label{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14)}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:160px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.footer{padding:30px 0;border-top:1px solid rgba(255,255,255,.1);color:var(--muted);font-size:14px}
.note{font-size:12px;color:#9aa3b7}
@media (max-width:980px){
  .hero .wrap{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero h2{font-size:32px}
}

/* v12 tweaks */
.card img.service-thumb{height:140px;object-fit:cover;width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.1)}
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testi{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px}
.testi img{width:100%;height:180px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.1)}
.testi .quote{font-style:italic;color:#cfd3e6}
@media(max-width:980px){.testi-grid{grid-template-columns:1fr}}

/* v13: fix form/fieldset sizing and overflow in some browsers */
.wa-form{max-width:100%; width:100%}
.wa-form .options{width:100%; box-sizing:border-box}
.wa-form fieldset{min-width:0; min-inline-size:0; width:100%; padding:12px; margin:12px 0; border-radius:12px}
.wa-form legend{padding:0 6px; font-size:13px}
/* prevent container overflow from any child */
.container{overflow:hidden}
@media (max-width: 768px) {
  .brand img {
    width:110px !important;
    height: 110px !important;
  }
}
/* по умолчанию показываем длинный текст */
.mobile-text {
  display: none;
}

/* на мобилках скрываем длинный и показываем короткий */
@media (max-width: 768px) {
  .desktop-text {
    display: none;
  }
  .mobile-text {
    display: inline;
  }
}

/* мобильная версия навигации */
@media (max-width: 768px) {
  /* показываем короткий текст кнопки */
  .cta .btn.secondary .desktop-text {
    display: none;
  }
  .cta .btn.secondary .mobile-text {
    display: inline;
  }

  /* делаем gap между кнопками */
  .cta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px; /* расстояние между кнопками */
  }

  /* чтобы кнопки не обрезались */
  .cta .btn {
    white-space: nowrap; /* текст не переносится */
    font-size: 14px;     /* при необходимости уменьшаем текст */
    padding: 10px 14px;
  }
}
/* по умолчанию показываем длинный текст */
.desktop-text { display: inline; }
.mobile-text { display: none; }

/* на мобилках скрываем длинный и показываем короткий */
@media (max-width: 768px) {
  .desktop-text { display: none; }
  .mobile-text { display: inline; }
}


/* Общий контейнер навигации */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
}

/* Контейнер кнопок */
.cta-left {
  display: flex;
  gap: 12px; /* отступ между кнопками в горизонтальной версии */
}

/* Скрываем/показываем текст кнопки */
.desktop-text { display: inline; }
.mobile-text { display: none; }

/* Мобильная версия */
@media (max-width: 768px) {
  .desktop-text { display: none; }
  .mobile-text { display: inline; }

  .cta-left {
    flex-direction: column; /* вертикально друг под другом */
    gap: 8px; /* вертикальный отступ между кнопками */
    margin-right: 12px; /* немного отступа от логотипа */
  }

  .cta-left .btn,
  .cta-left .btn.secondary {
    width: auto; /* под размер текста */
    padding: 10px 14px;
    font-size: 14px;
  }
}


/* ===== Эффект звёзд и луны ===== */
.sky {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0; /* фон под контентом */
  overflow: hidden;
}

.celestial {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}

.star {
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 6px rgba(255,255,255,0.8);
}

.moon {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255,255,200,0.9);
  position: relative;
  overflow: hidden;
}
.moon::after {
  content: '';
  position: absolute;
  top: 0; left: 6px; /* смещение — создаёт полумесяц */
  width: 100%; height: 100%;
  border-radius: 50%;
  background: #0b0b10; /* фон сайта */
}

@media (max-width: 768px) {
  .moon { width: 12px; height: 12px; }
}


/* ===== WhatsApp Floating Button ===== */
.wa-button {
  position: fixed;
  bottom: 20px;
  right: 20px; /* справа внизу */
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  color: #000;
  z-index: 1000;
  cursor: pointer;
  background: linear-gradient(45deg, var(--accent), var(--accent2), var(--accent));
  background-size: 300% 300%;
  animation: gradientShift 3s infinite, shakeX 2s infinite ease-in-out;
}

/* Переливание градиента */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Горизонтальное подёргивание (3 раза) */
@keyframes shakeX {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-6px); }
  20% { transform: translateX(6px); }
  30% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  50% { transform: translateX(0); }
}

/*Клавиша визитка */
/* === Магический дым для кнопки визитка (улучшенный) === */
.vizitka {
  position: relative;
  overflow: visible;
}

.vizitka::before,
.vizitka::after,
.vizitka span::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 100%;   /* на всю ширину кнопки */
  height: 40px;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(10px);
  opacity: 0;
  pointer-events: none;
}

/* первый поток */
.vizitka::before {
  animation: smokeWide 5s infinite ease-in-out;
}

/* второй поток (с задержкой) */
.vizitka::after {
  animation: smokeWide 6s infinite ease-in-out;
  animation-delay: 2s;
}

/* третий поток (более быстрый, идёт в сторону) */
.vizitka span::before {
  animation: smokeWideSide 4s infinite ease-in-out;
  animation-delay: 1s;
}

@keyframes smokeWide {
  0% {
    transform: translateY(0) scaleX(1);
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  50% {
    transform: translateY(-25px) scaleX(1.2);
    opacity: 0.25;
  }
  100% {
    transform: translateY(-50px) scaleX(1.4);
    opacity: 0;
  }
}

@keyframes smokeWideSide {
  0% {
    transform: translateX(-10px) translateY(0) scaleX(1);
    opacity: 0;
  }
  20% {
    opacity: 0.35;
  }
  50% {
    transform: translateX(10px) translateY(-30px) scaleX(1.3);
    opacity: 0.2;
  }
  100% {
    transform: translateX(-5px) translateY(-60px) scaleX(1.5);
    opacity: 0;
  }
}

/*Слайды*/
.testi-grid {
  display: flex;
  gap: 25px;
  justify-content: center;
  overflow: hidden;
  padding: 20px 0;
}

.testi-slot {
  width: 360px;           
  height: 480px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.1);
  overflow: hidden;
  position: relative;
  background: rgba(10,10,30,0.4);
  box-shadow: 0 0 20px rgba(150,0,200,0.4), 0 0 50px rgba(50,0,100,0.2);
  flex-shrink: 0;
}

.testi-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* полностью помещаем изображение без обрезки */
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 16px;
  transform: scale(0.85) rotateX(15deg) rotateY(-10deg) translateY(20px);
  filter: brightness(0.8) drop-shadow(0 0 15px rgba(200,100,255,0.6));
  transition: 
    opacity 1s ease-in-out, 
    transform 1s ease-in-out, 
    filter 1s ease-in-out;
}

/* Класс для активного слайда — JS должен его добавлять при смене */
.testi-slot img.active {
  opacity: 1;
  transform: scale(1) rotateX(0deg) rotateY(0deg) translateY(0);
  filter: brightness(1) drop-shadow(0 0 25px rgba(200,100,255,0.8)) 
                     drop-shadow(0 0 35px rgba(150,50,255,0.5));
}

/* Дополнительно: лёгкое мерцание */
@keyframes mysticGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(150,0,200,0.4), 0 0 50px rgba(50,0,100,0.2); }
  50% { box-shadow: 0 0 25px rgba(200,50,255,0.5), 0 0 60px rgba(80,0,120,0.3); }
}

.testi-slot {
  animation: mysticGlow 3s infinite alternate;
}

.cert-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cert-grid img {
  width: 48%; /* 2 фото в ряд */
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.cert-grid img:hover {
  transform: scale(1.05);
}

/* Модальное окно */
.modal {
  display: none; 
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  margin: auto;
  display: block;
  max-width: 90%;
  max-height: 80%;
  border-radius: 10px;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}