:root{
  --accent:#7b4eff;
  --dark:#0f172a;
  --glass:rgba(255,255,255,0.08);
  --transition:.3s;
  --bg:linear-gradient(140deg,#4b3a7a,#2f7d3c);
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Inter,sans-serif;color:white;background:#111;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;}
.page-wrapper{flex:1;display:flex;flex-direction:column;}

/* Фон */
.background-animation{
  position:fixed;width:100%;height:100%;z-index:-1;
  background:linear-gradient(270deg,#4b3a7a,#2f7d3c,#7b4eff);
  background-size:600% 600%;
  animation:bg 18s ease infinite;
}
@keyframes bg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* Хедер */
header{
  position:fixed;top:0;width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:10px 40px;background:rgba(15,23,42,0.85);backdrop-filter:blur(10px);z-index:10;
  height:80px;
}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:white;}
.logo img{height:60px;}
.logo span{font-size:28px;font-weight:700;}
nav{display:flex;align-items:center;gap:20px;position:relative;}
nav a{color:white;text-decoration:none;font-weight:500;padding:8px 12px;border-radius:6px;transition:all 0.3s;}
nav a:hover{color:var(--accent);background:rgba(123,78,255,0.2);}

/* Выпадающее меню */
.dropdown{position:relative;}
.dropdown-content{
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background: rgba(15,23,42,0.95);
  border-radius:10px;
  overflow:hidden;
  min-width:160px;
  z-index:100;
}
.dropdown-content a{
  display:block;
  padding:12px 20px;
  color:white;
  text-decoration:none;
  transition:background 0.3s,color 0.3s;
}
.dropdown-content a:hover{
  background:linear-gradient(90deg,var(--accent),#2f7d3c);
  color:#fff;
}
.dropdown:hover .dropdown-content{display:block;}
.right-edge .dropdown-content{right:0;left:auto;}

/* Бургер меню */
.burger{display:none;flex-direction:column;cursor:pointer;z-index:15;}
.burger span{height:3px;width:25px;background:white;margin:4px 0;}

/* Основной контент */
.main-content{flex:1;padding-top:140px;padding-bottom:40px;text-align:center;}

/* Hero */
.hero{padding-top:180px;padding-bottom:60px;text-align:center;position:relative;}
.hero-text{margin-bottom:50px;}
.hero h1{font-size:48px;margin-bottom:15px;}
.hero p{font-size:20px;margin-bottom:30px;}
.button{background:white;color:#111;padding:14px 30px;border-radius:12px;text-decoration:none;font-weight:600;margin-bottom:20px;}
.truck-container{position:relative;}
.truck{position:absolute;bottom:-80px;left:0;animation:truckMove 6s linear infinite;}
@keyframes truckMove{0%{left:-150px;}100%{left:100%;}}

/* Секции */
.services-preview,.pickup,.tracker,.container{padding-top:40px;padding-bottom:40px;}
.tracker-box{display:flex;justify-content:center;margin-top:20px;}
.tracker-box input{padding:14px;border:none;border-radius:10px 0 0 10px;width:260px;}
.tracker-box button{padding:14px 20px;border:none;background:var(--accent);color:white;border-radius:0 10px 10px 0;cursor:pointer;}

/* Сетки и карточки */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:30px;margin-top:40px;}
.card{background:var(--glass);padding:30px;border-radius:16px;text-align:center;backdrop-filter:blur(8px);transition:transform 0.3s;}
.card img{margin-bottom:15px;}

/* Главная страница - блоки услуг */
.services-preview .card img{
  width:120px;
  height:120px;
  object-fit:contain;
  border-radius:0;
}

/* Карты */
#map, #mapid{
  width:90%;
  max-width:800px;
  height:400px;
  margin:30px auto 0;
  border-radius:14px;
}

/* Футер */
footer{margin-top:auto;background:#0f172a;padding:40px;text-align:center;color:#9ca3af;}

/* Анимация появления */
.reveal{opacity:0;transform:translateY(40px);transition:1s;}
.reveal.active{opacity:1;transform:translateY(0);}

/* FAQ */
.faq-item{margin-bottom:15px;background:rgba(255,255,255,0.1);border-radius:8px;padding:15px;cursor:pointer;transition:.3s;}
.faq-item:hover{background:rgba(123,78,255,0.3);}
.faq-answer{display:none;margin-top:10px;}

/* Динамический слоган */
#slogan{transition: opacity 0.5s ease-in-out;}

/* Адаптив */
@media(max-width:850px){
  nav{display:none;flex-direction:column;position:absolute;top:80px;right:20px;background:rgba(15,23,42,0.95);padding:20px;border-radius:12px;width:220px;gap:10px;}
  nav.mobile-active{display:flex;}
  nav a{display:block;padding:10px;}
  .dropdown-content{position:relative;background:none;}
  .burger{display:flex;z-index:15;}
  .hero h1{font-size:34px;}
  .main-content{padding-top:160px;}
  .hero{overflow:hidden;padding-top:140px;}
  .truck{max-width:140px;bottom:-40px;}
  #map,#mapid{width:95%;height:300px;}
}

.about-us {
  padding: 60px 20px;
  text-align: center;
}

.about-us h2 {
  font-size: 36px;
  margin-bottom: 20px;
}

.about-us p {
  font-size: 18px;
  color: #ccc;
  margin-bottom: 30px;
  line-height: 1.6;
}

.about-us h3 {
  font-size: 28px;
  margin: 40px 0 20px;
}

.advantages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 30px;
  margin-top: 20px;
}

.advantages-grid .card {
  background: rgba(255,255,255,0.08);
  padding: 30px;
  border-radius: 16px;
  backdrop-filter: blur(8px);
  transition: transform 0.3s, box-shadow 0.3s;
  text-align: center;
}

.advantages-grid .card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.advantages-grid .card .icon {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
  color: var(--accent);
}

.advantages-grid .card:hover .icon {
  color: #fff;
}

.advantages-grid .card h4 {
  font-size: 20px;
  margin-bottom: 15px;
}

.advantages-grid .card p {
  font-size: 16px;
  color: #ccc;
  line-height: 1.5;
}

/* ===== Адаптив для мобильных ===== */
@media(max-width:850px) {
  .advantages-grid {
    grid-template-columns: 1fr;
  }

  .about-us h2 {
    font-size: 30px;
  }

  .about-us h3 {
    font-size: 24px;
  }

  .about-us p {
    font-size: 16px;
  }
}


/* Карточки услуг */
.grid .card{
  background: rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 30px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Эффект при наведении */
.grid .card:hover{
  transform: scale(1.04) translateY(-6px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.35);
}

/* Чтобы изображение тоже выглядело аккуратно */
.grid .card img{
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
  transition: transform 0.35s ease;
}

/* Иконка немного увеличивается */
.grid .card:hover img{
  transform: scale(1.1);
}

/* Иконки в карточках услуг */
.grid .card img{
  width: 90px;     /* увеличенный размер */
  height: 90px;
  margin-bottom: 15px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

/* эффект при наведении */
.grid .card:hover img{
  transform: scale(1.12);
}