/* Header responsive */
@media (max-width: 768px) {
  header { padding: 1.25rem 1rem; background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 100%); }
  header h1 { font-size: 1.8rem; margin-bottom: 1.2rem; text-shadow: 0 0 20px rgba(0, 255, 231, 0.3); }
  nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 auto; }
  nav li { flex: none; }
  nav a {
    padding: 0.7rem 1.1rem; font-size: 0.8rem; font-weight: 600; border: 2px solid transparent;
    background: linear-gradient(135deg, rgba(0, 255, 231, 0.1), rgba(127, 255, 212, 0.05));
    backdrop-filter: blur(15px); border-radius: 25px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; position: relative; overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  nav a::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s;
  }
  nav a:hover::before { left: 100%; }
  nav a:hover {
    background: linear-gradient(135deg, rgba(0, 255, 231, 0.2), rgba(127, 255, 212, 0.1));
    border-color: rgba(0, 255, 231, 0.5); color: #00ffe7; transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 255, 231, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  nav a:active { transform: translateY(0) scale(0.98); }
  nav a.cta {
    padding: 0.8rem 1.5rem; font-size: 0.85rem; font-weight: 700; border-radius: 30px;
    background: linear-gradient(135deg, #00ffe7, #00d4aa, #7fffd4); background-size: 200% 200%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 20px rgba(0, 255, 231, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 30px rgba(0, 255, 231, 0.2);
    animation: gradientShift 3s ease infinite, pulseGlow 2s ease-in-out infinite alternate, gentleBounce 4s ease-in-out infinite;
    color: #000; text-shadow: none; margin-left: 0.3rem; position: relative; overflow: hidden;
  }
  nav a.cta::after { content: '✨'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 0.7rem; opacity: 0; animation: sparkleMove 3s ease-in-out infinite; }
  nav a.cta::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); }

  header { z-index: 10000; overflow: visible; }
  nav { z-index: 10001; }
  .dropdown { z-index: 99999; }
  .dropdown-content { z-index: 999999; position: absolute; top: calc(100% + 2px); }
  .dropdown:hover .dropdown-content, .dropdown-content:hover { transform: translateX(-50%) translateY(0); }
  .dropdown::before { height: 5px; }
  .dropdown-content a { z-index: 999999; pointer-events: auto; }
}
@media (max-width: 480px) {
  header { padding: 1rem 0.75rem; }
  header h1 { font-size: 1.6rem; margin-bottom: 1rem; }
  nav ul { gap: 0.4rem; }
  nav a { padding: 0.6rem 0.9rem; font-size: 0.75rem; border-radius: 22px; }
  nav a.cta { padding: 0.7rem 1.2rem; font-size: 0.8rem; border-radius: 26px; }
}
@media (max-width: 360px) {
  nav ul { gap: 0.3rem; }
  nav a { padding: 0.5rem 0.8rem; font-size: 0.7rem; border-radius: 20px; }
  nav a.cta { padding: 0.6rem 1rem; font-size: 0.75rem; border-radius: 24px; }
}

/* Footer responsive */
@media (max-width: 968px) {
  .footer-container { grid-template-columns: 1fr; gap: 3rem; padding: 3rem 2rem; }
  .map-container { height: 300px; }
}
@media (max-width: 640px) {
  .footer-container { padding: 2rem 1rem; gap: 2rem; }
  .contact-item { flex-direction: column; text-align: center; gap: 0.75rem; align-items: center; }
  .social-section { padding: 1.5rem 0; }
  .social-title { margin-left: 0; }
  .social-links { flex-wrap: wrap; gap: 0.75rem; margin-left: 0; justify-content: center; }
  .map-container { height: 250px; border-radius: 15px; }
  .map-container::after { width: 24px; height: 24px; background-size: 24px; }
  .map-address { font-size: 0.75rem; padding: 0.4rem 0.8rem; max-width: 90%; }
  .map-header { margin-left: 1rem; }
  .map-title { margin-left: 0; }
  .map-subtitle { margin-left: 0; }
  .contact-value { font-size: 0.9rem; text-align: center; }
}

/* Hero / Testimonials / FAQ responsive */
@media (max-width: 768px) {
  .hero { padding: 3rem 1.5rem; }
  .hero h2 { font-size: 2rem; }
  .hero p { font-size: 1rem; }

  .testimonials-section { padding: 3rem 1.5rem; }
  .testimonial-box { width: 250px; padding: 1.5rem; }
  .testimonial-box p { font-size: 0.9rem; }

  .faq-section { padding: 3rem 1rem; }
  .faq-question { padding: 1.2rem; font-size: 0.9rem; }
  .faq-answer { padding: 0 1.2rem 1.2rem; font-size: 0.9rem; }
}
@media (max-width: 480px) {
  .hero h2 { font-size: 1.8rem; }
  .section-title { font-size: 1.6rem; }

  .grid-section { padding: 2rem 1rem; gap: 1rem; }
  .grid-box { padding: 1.5rem; }

  .testimonials-section { padding: 2rem 1rem; }
  .testimonial-box { width: 220px; padding: 1.2rem; }
  .testimonial-box p { font-size: 0.85rem; }
}