/* static/css/style.css – FINAL VERSION (November 2025) */
/*/*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --navy: #0f172a;
  --sky:  #f0f9ff;
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:'Inter', system-ui, sans-serif;
  background:white;
  color:#0f172a;
  line-height:1.7;
}

/* NAVBAR – only visible on hero, scrolls away */
nav {
  position: absolute;   /* ← NOT fixed → disappears when scrolling */
  top: 0; left: 0; right: 0;
  z-index: 50;
}

/* HERO – image starts at absolute top of screen */
.hero {
  position:relative;
  min-height: 100vh;
}

/* Background image fills from pixel 0 */
.hero .fixed {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -10;
}

/* Buttons */
.btn {
  @apply inline-block font-medium px-9 py-4 rounded-2xl transition-all duration-300;
}
.btn-primary { @apply bg-[#0f172a] text-white hover:bg-black; }
.btn-outline { @apply border-2 border-current text-current hover:bg-[#0f172a] hover:text-white; }

/* Floating cards – subtle glass */
.card {
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  border-radius: 2rem;
  padding: 3rem;
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transition: transform 0.5s, box-shadow 0.5s;
}
.card:hover {
  transform: translateY(-16px);
  box-shadow: 0 40px 80px rgba(0,0,0,0.12);
}

/* Layout */
.container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }

/* Footer + green line */
footer {
  position: relative;
  background: var(--navy);
  color: white;
  padding: 6rem 2rem 5rem;
  text-align: center;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ecfdf5, #d1fae5, #86efac, #4ade80, #15803d);
}

/* Responsive */
@media (max-width: 768px) {
  .hero { min-height: 90vh; }
  .card { padding: 2rem; }
}



#map-container svg { width: 100%; height: 100%; }
.popup {
  position: absolute;
  background: #1e293b;
  color: white;
  padding: 1rem;
  border-radius: 1rem;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  display: none;
  z-index: 100;
}