:root {
  --background: 40 12% 7%;
  --foreground: 42 20% 85%;
  --card: 40 14% 10%;
  --card-foreground: 42 20% 85%;
  --popover: 40 14% 10%;
  --popover-foreground: 42 20% 85%;
  --primary: 42 88% 44%;
  --primary-foreground: 30 20% 8%;
  --secondary: 40 25% 18%;
  --secondary-foreground: 42 30% 85%;
  --muted: 40 15% 13%;
  --muted-foreground: 42 10% 50%;
  --accent: 40 25% 18%;
  --accent-foreground: 42 30% 85%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 40 18% 20%;
  --input: 40 18% 20%;
  --ring: 42 88% 44%;
  --radius: 0.25rem;
  --font-heading: 'Sora', sans-serif;
  --font-body: 'JetBrains Mono', monospace;
}

* {
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / 0.5);
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: hsl(40 12% 7%); }
::-webkit-scrollbar-thumb { background: hsl(40 25% 18%); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: hsl(18 100% 50%); }

/* Scroll animations */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-up-fast {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.fade-up-fast.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tab indicator */
.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: hsl(var(--primary));
  transition: all 0.3s ease;
}

/* Nav dot active */
.nav-dot.active {
  background-color: hsl(var(--primary)) !important;
  transform: scale(1.25);
}

/* Mobile menu */
#mobile-menu {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
#mobile-menu.hidden-menu {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}
#mobile-menu.show-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Leaflet overrides */
.leaflet-container { background: hsl(210,60%,35%) !important; }
.leaflet-tile-pane { filter: saturate(1.1) brightness(0.85) !important; }
.route-tooltip {
  background: hsl(40,14%,10%) !important;
  border: 1px solid hsl(40,18%,20%) !important;
  color: hsl(42,20%,85%) !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
}
.route-tooltip::before { display: none !important; }
.leaflet-tooltip-top::before { border-top-color: hsl(40,18%,20%) !important; }

/* FAQ answer animation */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  opacity: 0;
  padding: 0 1.5rem;
}
.faq-answer.open {
  max-height: 300px;
  opacity: 1;
  padding: 1rem 1.5rem 1.25rem;
}

/* Tab content — hidden by default, shown when active */
[data-spec-content]:not(.active),
[data-policy-content]:not(.active) {
  display: none !important;
}

/* Tab content enter animation */
[data-spec-content].active,
[data-policy-content].active {
  animation: tabFadeIn 0.35s ease-out;
}
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Counter tabular nums */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Scroll indicator bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
.scroll-bounce { animation: bounce 2s ease-in-out infinite; }

/* Hero 1914 fade in */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.hero-watermark { animation: fadeIn 1.5s ease-out forwards; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-content { animation: fadeInUp 0.8s ease-out 0.3s forwards; opacity: 0; }