:root {
  --primary-400: #5eead4;
  --primary-500: #2dd4bf;
  --primary-600: #14b8a6;
  --primary-700: #0f766e;

  --secondary-400: #67e8f9;
  --secondary-500: #22d3ee;
  --secondary-600: #0891b2;

  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;

  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  --white: #ffffff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: linear-gradient(135deg, var(--gray-50), var(--white) 70%);
  color: var(--gray-900);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
}

@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.hero { max-width: 800px; width: 100%; }

.hero-title {
  font-size:1.8rem;
  font-weight:900;
  line-height:1.1;
  margin-bottom:0.8rem;
  background: linear-gradient(135deg,var(--primary-600),var(--secondary-500),var(--green-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-description {
  font-size:1.1rem;
  color: var(--gray-600);
  margin-bottom:1rem;
  line-height:1.5;
}

.map-container {
  margin: 0 auto;
  width: 100%;
  max-width: 700px;
}

.map-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem auto;
  max-width: 700px;
  height: 300px;
  border-radius: 24px;
  background: #eee;
  position: relative;
}

.map-placeholder button {
  padding: 1rem 2rem;
  border-radius: 12px;
  background: var(--primary-500);
  color: white;
  font-weight: 700;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  transition: transform 0.3s ease;
}
.map-placeholder button:hover {
  transform: scale(1.05);
}

.coming-soon {
  margin-top:1.5rem;
  font-size:1.5rem;
  font-weight:800;
  color: var(--primary-600);
  display: inline-block;
  animation: float 3s ease-in-out infinite;
}

.floating-button {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-600));
  color: white;
  padding: 0.8rem 1.2rem;
  border-radius: 50px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 25px rgba(0,0,0,0.25);
  animation: float 3s ease-in-out infinite;
  transition: transform 0.3s ease;
}
.floating-button:hover {
  transform: translateY(-3px) scale(1.05);
}

.contact-info {
  margin-top:1.5rem;
  display:flex;
  flex-direction:column;
  gap:0.8rem;
  font-size:1rem;
  align-items:center;
}
.contact-info span {
  display:flex;
  align-items:center;
  gap:0.5rem;
  color: var(--gray-700);
}

.footer {
  margin-top:3rem;
  font-size:0.8rem;
  color: var(--gray-500);
}

#map-consent-popup {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  visibility: hidden;
}

#map-consent-popup.active {
  visibility: visible;
}

#map-consent-popup .popup-content {
  background: white;
  padding: 2rem;
  border-radius: 16px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

#map-consent-popup button {
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  border: none;
  font-weight: 700;
  cursor: pointer;
  margin: 0.5rem;
  font-size: 1rem;
  transition: transform 0.3s ease;
}
#map-consent-popup button#accept-map {
  background: var(--primary-500);
  color: white;
}
#map-consent-popup button#accept-map:hover {
  transform: scale(1.05);
}
#map-consent-popup button#decline-map {
  background: #ccc;
  color: #333;
}
#map-consent-popup button#decline-map:hover {
  transform: scale(1.05);
}

@media(min-width:768px){
  .hero-title { font-size:3rem; }
  .hero-description { font-size:1.3rem; }
  .coming-soon { font-size:2rem; }
}