:root {
  --background: 236 45% 7%;
  --foreground: 220 33% 96%;
  --primary: 272 91% 67%;
  --secondary: 206 92% 61%;
  --muted: 233 20% 18%;
  --destructive: 0 78% 58%;
  --border: 233 22% 24%;
  --card: 235 32% 12%;
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-md: 0 18px 48px rgba(5, 8, 20, 0.35);
  --shadow-lg: 0 24px 80px rgba(98, 51, 255, 0.22);
  --transition-fast: 160ms ease;
  --transition-smooth: 320ms ease;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
}

.dark {
  --background: 236 45% 7%;
  --foreground: 220 33% 96%;
  --primary: 272 91% 67%;
  --secondary: 206 92% 61%;
  --muted: 233 20% 18%;
  --destructive: 0 78% 58%;
  --border: 233 22% 24%;
  --card: 235 32% 12%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(151, 71, 255, 0.28), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(25, 128, 255, 0.24), transparent 25%),
    linear-gradient(135deg, #03040a 0%, #130824 46%, #07172d 100%);
  min-height: 100vh;
}

h1, h2, h3, h4, .font-display {
  font-family: 'Playfair Display', serif;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-md);
}

.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-lg);
}

.neon-ring:hover {
  box-shadow: 0 0 0 1px rgba(145, 97, 255, 0.75), 0 0 32px rgba(145, 97, 255, 0.42), 0 0 56px rgba(0, 153, 255, 0.2);
}

.gradient-text {
  background: linear-gradient(90deg, rgba(214,188,255,1) 0%, rgba(113,207,255,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-slide {
  min-height: 70vh;
}

.parallax {
  transform: translate3d(0,0,0);
  will-change: transform;
}

.card-hover {
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-fast);
}

.card-hover:hover {
  transform: translateY(-6px) scale(1.01);
}

.zoom-img {
  transition: transform 600ms ease;
}

.group:hover .zoom-img {
  transform: scale(1.08);
}

.input {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid hsla(var(--border), 0.9);
  background: rgba(11, 16, 32, 0.55);
  color: hsl(var(--foreground));
  padding: 0.9rem 1rem;
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.input:focus {
  border-color: hsla(var(--primary), 1);
  box-shadow: 0 0 0 4px hsla(var(--primary), 0.14);
}

.btn {
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 0.88rem 1.15rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
}

.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.section-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

.fade-in {
  animation: fadeUp 700ms ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(129, 98, 255, 0.35); }
  50% { box-shadow: 0 0 0 10px rgba(129, 98, 255, 0); }
}

.pulse-glow { animation: pulseGlow 2s infinite; }

.scrollbar::-webkit-scrollbar { height: 8px; width: 8px; }
.scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(149,83,255,0.8), rgba(63,155,255,0.8));
  border-radius: 999px;
}

.map-embed {
  width: 100%;
  min-height: 300px;
  border: 0;
  border-radius: var(--radius-md);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  background: hsla(var(--primary), 0.12);
  color: hsl(var(--primary));
  border: 1px solid hsla(var(--primary), 0.2);
}