/* ==== GLOBAL ==== */  
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body { font-family:"Noto Serif",serif; background:#040221; color:#e0e7ff; line-height:1.6; overflow-x:hidden; }


#myVideo { position:fixed; top:0; left:0; width:100%; height:100vh; object-fit:cover; z-index:-2; }

/* ==== HEADER ==== */
header { position:fixed; top:0; left:0; width:100%; padding:20px 40px; display:flex; justify-content:space-between; align-items:center; z-index:1000; backdrop-filter:blur(10px); border-bottom:1px solid rgba(217,196,176,0.2); }
header h1 { font-size:28px; color:#040221; letter-spacing:1px; }

/* ==== LANG SWITCHER ==== */
.language-switcher { display:flex; gap:12px; }
.lang-flag { width:36px; height:36px; border-radius:50%; object-fit:cover; cursor:pointer; opacity:0.7; transition:all .3s; border:2px solid transparent; }
.lang-flag.active, .lang-flag:hover { opacity:1; border-color:#D9C4B0; transform:scale(1.1); }

/* ==== MENU ==== */
nav ul.menu { list-style:none; display:flex; gap:40px; }
nav ul.menu a { color:#fdd700  ; text-decoration:none; font-weight:600; font-size:18px; transition:color .3s; }
nav ul.menu a:hover { color:#fff; }
.dropdown { position:relative; }

/* ==== SECTIONS ==== */
section { max-width:1200px; margin:120px auto; padding:60px 40px; background:rgba(5,9,49,.88); border-radius:20px; backdrop-filter:blur(12px); border:1px solid rgba(173,185,238,.2); }
h2 { font-size:42px; color:#fdd700; margin-bottom:40px; border-left:6px solid #fdd700; padding-left:20px; }

/* ==== SERVICES ==== */
.info-block { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:30px; margin-top:50px; }
.service-card { background:rgba(0,11,54,.7); border-radius:16px; overflow:hidden; transition:transform .4s,box-shadow .4s; text-align:center; }
.service-card:hover { transform:translateY(-12px); box-shadow:0 20px 40px rgba(0,0,0,.4); }
.service-card img { width:100%; height:200px; object-fit:cover; }
.service-card h3 { color:#fdd700; padding:20px 15px 10px; font-size:24px; }
.service-card p { color:#c0c6e0; padding:0 20px 25px; font-size:17px; }

/* ==== CAROUSEL ==== */
.carousel-container { position:relative; max-width:900px; margin:50px auto; border-radius:20px; overflow:hidden; box-shadow:0 15px 40px rgba(0,0,0,.5); }
.carousel-slide { display:flex; transition:transform .6s ease; }
.carousel-slide img { width:100%; flex-shrink:0; height:500px; object-fit:cover; }
.carousel-container button { position:absolute; top:50%; transform:translateY(-50%); background:rgba(5,9,49,.7); color:#fff; border:none; width:50px; height:50px; border-radius:50%; font-size:28px; cursor:pointer; z-index:10; }
.carousel-container button:hover { background:#D9C4B0; color:#050931; }
button.prev { left:20px; } button.next { right:20px; }

/* ==== PRICING ==== */
.price-card { background:rgba(195,217,226,.15); padding:30px; border-radius:16px; margin-bottom:25px; border:1px solid rgba(217,196,176,.2); transition:.4s; }
.price-card:hover { background:rgba(217,196,176,.2); transform:translateY(-8px); }
.price-card h3 { color:#fdd700; font-size:26px; margin-bottom:15px; }

/* ==== FORM ==== */
form { max-width:600px; margin:40px auto 0; }
form label { display:block; margin-bottom:8px; color:#fdd700; font-weight:600; }
form input, form textarea { width:100%; padding:14px; border-radius:12px; border:none; background:rgba(255,255,255,.1); color:#fff; margin-bottom:20px; font-size:16px; }
form button { background:#fdd700; color:#050931; padding:14px 32px; border:none; border-radius:12px; font-weight:bold; cursor:pointer; transition:.3s; }
form button:hover { background:#fff; transform:scale(1.05); }

/* ==== LICENSE & FOOTER ==== */
.license-block { margin-top:50px; padding:30px; background:rgba(0,0,0,.3); border-radius:12px; text-align:center; }
footer { background:#050931; color:#fdd700; text-align:center; padding:30px; }

/* ==== ANIMATIONS ==== */
.fade-in { opacity:0; transform:translateY(20px); transition:all .8s ease; }
.fade-in.show { opacity:1; transform:translateY(0); }

.social-icons {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  justify-content: center;
}
.social-icons a {
  transition: all 0.3s;
}
.social-icons a:hover {
  transform: scale(1.2) translateY(-3px);
}
.social-icons svg {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}
.social-icons a:hover svg {
  fill: #fff;
  stroke: #fff;
}

.developer-credit {
  margin-top: 20px;
  font-size: 13px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.developer-credit:hover {
  opacity: 1;
}

.developer-credit a {
  color: inherit;
  text-decoration: underline dotted;
}

.developer-credit a:hover {
  text-decoration: underline;
}

@media (max-width:992px) { header { padding:15px 10px; flex-direction:column; gap:0.05px; } nav ul.menu { gap:20px; } }
@media (max-width:600px) { header h1 { font-size:22px; } nav ul.menu { flex-direction:column; text-align:center; } h2 { font-size:36px; } }


/* Бургер-меню на мобильке */
.burger {
  display: none;
  cursor: pointer;
  z-index: 1001;
}

.burger div {
  width: 28px;
  height: 3px;
  background-color: #fdd700;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Показываем бургер и скрываем горизонтальное меню на мобильке */
@media (max-width: 600px) {
  .burger {
    display: block;
  }
  
  nav ul.menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    flex-direction: column;
    background: rgba(4, 2, 33, 0.98);
    backdrop-filter: blur(10px);
    padding: 20px 0;
    align-items: center;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1000;
  }
  
  nav ul.menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }
  
  /* Анимация бургера в крестик */
  .burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
  }
  .burger.toggle .line2 {
    opacity: 0;
  }
  .burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
  }
  
  /* Отступ для секций под фиксированный header */
  section {
    scroll-margin-top: 90px;
  }
}