/* ==========================================================================
   Earth Genome Inspired Design Architecture
   Color Palette, Typography, Offset Yellow Borders, and Globe Radar HUD
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Earth Genome Official Color System (from earthgenome.org) */
  --grey-1000: #0E2129;
  --grey-900: #25363D;
  --grey-800: #3B4A50;
  --grey-700: #525F64;
  --grey-600: #687377;
  --grey-500: #7F888B;
  --grey-400: #959C9E;
  --grey-300: #ACB1B2;
  --grey-200: #C2C5C5;
  --grey-100: #D9DAD9;
  
  --yellow-1000: #FFCC00;
  --yellow-900: #FFD11A;
  --yellow-800: #FFD633;
  --yellow-100: #FFF9DF;

  --base: #efeeec;
  --white-smoke: #fafafa;
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  scroll-behavior: smooth;
  background-color: var(--base);
  color: var(--grey-1000);
  word-spacing: -0.01ch;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: -0.03em;
  color: var(--grey-1000);
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* ==========================================================================
   Earth Genome Signature Buttons & Offset Yellow Outline
   ========================================================================== */
.eg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  background-color: var(--grey-1000);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.eg-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -3px;
  border-radius: 9999px;
  border: 3px solid var(--yellow-1000);
  background-color: transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.eg-btn:hover {
  background-color: var(--grey-900);
  transform: translateY(-1px);
}

.eg-btn:hover::before {
  inset: -5px;
  border-color: var(--yellow-900);
}

.eg-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background-color: #ffffff;
  color: var(--grey-1000) !important;
  border: 2px solid var(--grey-1000);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.2s ease;
}

.eg-btn-secondary:hover {
  background-color: var(--grey-1000);
  color: #ffffff !important;
}

.eg-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--grey-1000);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.eg-link-arrow:hover {
  gap: 10px;
  text-decoration: underline;
  text-decoration-color: var(--yellow-1000);
}

/* ==========================================================================
   Earth Genome Cards with Signature Sharp Edges & Shadows
   ========================================================================== */
.eg-card {
  background: #ffffff;
  border: 2px solid var(--grey-1000);
  border-radius: 1.25rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.eg-card:hover {
  box-shadow: 6px 6px 0px var(--yellow-1000);
  transform: translate(-2px, -2px);
}

.eg-card-subtle {
  background: #ffffff;
  border: 1px solid var(--grey-200);
  border-radius: 1.25rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.eg-card-subtle:hover {
  border-color: var(--grey-1000);
  box-shadow: 0 12px 30px rgba(14, 33, 41, 0.08);
  transform: translateY(-2px);
}

.eg-card-dark {
  background: var(--grey-1000);
  color: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   Earth Observation Revolving Satellites
   ========================================================================== */
.satellite-orbit-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 25;
}

.satellite-orbit-1 {
  width: 410px;
  height: 410px;
  margin-top: -205px;
  margin-left: -205px;
  border: 1px dashed rgba(0, 229, 255, 0.4);
  animation: orbitSpin1 34s linear infinite;
}

.satellite-orbit-2 {
  width: 470px;
  height: 470px;
  margin-top: -235px;
  margin-left: -235px;
  border: 1px dashed rgba(255, 204, 0, 0.35);
  animation: orbitSpin2 46s linear infinite reverse;
}

.satellite-orbit-3 {
  width: 530px;
  height: 530px;
  margin-top: -265px;
  margin-left: -265px;
  border: 1px dashed rgba(16, 185, 129, 0.35);
  animation: orbitSpin3 58s linear infinite;
}

.satellite-orbit-wrap:hover {
  animation-play-state: paused;
}

.satellite-carrier {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.satellite-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #0E2129;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  box-shadow: 0 4px 18px rgba(14, 33, 41, 0.45);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif;
  user-select: none;
}

.satellite-orbit-1 .satellite-pill {
  border-color: rgba(0, 229, 255, 0.7);
  animation: orbitCounter1 34s linear infinite;
}
.satellite-orbit-2 .satellite-pill {
  border-color: rgba(255, 204, 0, 0.7);
  animation: orbitCounter2 46s linear infinite reverse;
}
.satellite-orbit-3 .satellite-pill {
  border-color: rgba(16, 185, 129, 0.7);
  animation: orbitCounter3 58s linear infinite;
}

.satellite-orbit-wrap:hover .satellite-pill {
  animation-play-state: paused;
}

.satellite-pill:hover {
  transform: scale(1.08);
  box-shadow: 0 0 22px rgba(255, 204, 0, 0.6);
  background: #142832;
}

@keyframes orbitSpin1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbitCounter1 {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes orbitSpin2 {
  from { transform: rotate(60deg); }
  to { transform: rotate(420deg); }
}
@keyframes orbitCounter2 {
  from { transform: rotate(-60deg); }
  to { transform: rotate(-420deg); }
}

@keyframes orbitSpin3 {
  from { transform: rotate(190deg); }
  to { transform: rotate(550deg); }
}
@keyframes orbitCounter3 {
  from { transform: rotate(-190deg); }
  to { transform: rotate(-550deg); }
}

@media (max-width: 640px) {
  .satellite-orbit-1 { width: 330px; height: 330px; margin-top: -165px; margin-left: -165px; }
  .satellite-orbit-2 { width: 375px; height: 375px; margin-top: -187px; margin-left: -187px; }
  .satellite-orbit-3 { width: 420px; height: 420px; margin-top: -210px; margin-left: -210px; }
  .satellite-pill { padding: 4px 9px; font-size: 10px; gap: 6px; }
}

/* Earth Genome Globe Visual Container & Orb Animation */
.eg-globe-container {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eg-globe-orb {
  position: relative;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background-image: url('assets/images/globe.jpg');
  background-size: cover;
  background-position: center;
  box-shadow: 
    0 25px 60px -15px rgba(14, 33, 41, 0.4),
    inset -25px -25px 50px rgba(0, 0, 0, 0.65),
    inset 15px 15px 35px rgba(255, 204, 0, 0.25),
    0 0 0 2px var(--grey-1000);
  overflow: hidden;
  border: 2px solid var(--grey-1000);
}

.eg-globe-grid-lines {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: 
    radial-gradient(circle, transparent 65%, rgba(255, 204, 0, 0.08) 100%),
    repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(255, 255, 255, 0.06) 38px, rgba(255, 255, 255, 0.06) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(255, 255, 255, 0.06) 38px, rgba(255, 255, 255, 0.06) 40px);
  pointer-events: none;
}

.eg-globe-atmosphere {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 204, 0, 0.35);
  pointer-events: none;
  animation: rotateOrbital 60s linear infinite;
}

.eg-globe-atmosphere-inner {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  border: 1px solid rgba(14, 33, 41, 0.15);
  pointer-events: none;
}

@keyframes rotateOrbital {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Earth Genome Real Satellite Media Container */
.eg-media-container {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  width: 100%;
  background-color: var(--grey-100);
}

.eg-media-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.eg-card:hover .eg-media-container img {
  transform: scale(1.05);
}

/* Earth Genome Badges & Section Accents */
.eg-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background-color: #ffffff;
  border: 1.5px solid var(--grey-1000);
  border-radius: 9999px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--grey-1000);
  letter-spacing: -0.01em;
}

.eg-tag-yellow {
  background-color: var(--yellow-1000);
  border-color: var(--grey-1000);
  color: var(--grey-1000);
  font-weight: 800;
}

.eg-tag-dark {
  background-color: var(--grey-1000);
  border-color: var(--grey-1000);
  color: #ffffff;
}

/* Live Status Pulse Dot (Yellow Accent - No Green) */
.status-dot-emerald,
.status-dot-yellow {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--yellow-1000);
  box-shadow: 0 0 10px var(--yellow-1000);
  animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* Sticky Glass Navigation */
.glass-nav {
  background: rgba(239, 238, 236, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--grey-200);
}

/* Desktop Navigation Links & Spacing */
.desktop-nav-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

@media (min-width: 1360px) {
  .desktop-nav-container {
    gap: 12px !important;
  }
}

@media (min-width: 1536px) {
  .desktop-nav-container {
    gap: 16px !important;
  }
}

.desktop-nav-item {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 14px !important;
  border-radius: 9999px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--grey-800) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}

.desktop-nav-item:hover {
  color: var(--grey-1000) !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(14, 33, 41, 0.08) !important;
}

/* Custom Leaflet styling */
.leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 20px 35px -8px rgba(14, 33, 41, 0.25) !important;
  border: 2px solid var(--grey-1000);
  padding: 2px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
}

.leaflet-popup-tip {
  background: #ffffff !important;
}

/* Enhanced Custom Map Pin with Domain Radar Wave */
.custom-div-icon {
  background: transparent !important;
  border: none !important;
}

.custom-map-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: white;
  border-radius: 50%;
  border: 2.5px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-weight: bold;
  font-size: 13px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  cursor: pointer;
}

.custom-map-pin:hover,
.custom-map-pin.active-pin {
  transform: scale(1.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  border-color: var(--yellow-1000);
  z-index: 9999 !important;
}

.custom-map-pin::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.5;
  animation: pin-radar 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes pin-radar {
  0% { transform: scale(0.6); opacity: 0.85; }
  100% { transform: scale(2.0); opacity: 0; }
}

/* Map Controls & Filters Styling */
.map-filter-btn.active-filter {
  background-color: var(--grey-1000) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(14, 33, 41, 0.35) !important;
}

.map-filter-btn.active-filter .count-tag {
  background-color: var(--yellow-1000) !important;
  color: var(--grey-1000) !important;
  font-weight: 800 !important;
}

.basemap-btn.active-basemap {
  background-color: #ffffff !important;
  color: var(--grey-1000) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  font-weight: 700 !important;
}

.site-item-card {
  transition: all 0.2s ease;
}

.site-item-card:hover {
  transform: translateY(-1px);
  border-color: var(--grey-1000);
  background-color: #ffffff;
}

.site-item-card.active-site-item {
  border-color: var(--grey-1000) !important;
  background-color: var(--yellow-100) !important;
  box-shadow: 0 4px 12px rgba(14, 33, 41, 0.12);
}

/* Fullscreen Map Mode */
#map-fullscreen-container.map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  ring-width: 0 !important;
}

#map-fullscreen-container.map-fullscreen #projects-map {
  height: calc(100vh - 110px) !important;
}

#map-fullscreen-container.map-fullscreen .lg\:col-span-4 {
  height: calc(100vh - 110px) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: var(--base);
}
::-webkit-scrollbar-thumb {
  background: var(--grey-300);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--grey-500);
}

/* Brand logo title and subtitle wrap prevention */
.brand-title {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

.brand-subtitle {
  white-space: nowrap !important;
  word-break: keep-all !important;
}

/* Quotation, Collaborate & Feedback Modals */
.modal-backdrop {
  background-color: rgba(14, 33, 41, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.modal-card {
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Executive Summary Expand Fade-in Animation */
@keyframes fadeInSlide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


.animate-fadeIn {
  animation: fadeInSlide 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Horizontal Scrollable Reviews Track */
.reviews-scroll-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #0E2129 #E5E7EB;
}

.reviews-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.reviews-scroll-container::-webkit-scrollbar-track {
  background: #E5E7EB;
  border-radius: 9999px;
}

.reviews-scroll-container::-webkit-scrollbar-thumb {
  background: #0E2129;
  border-radius: 9999px;
}

.reviews-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #25363D;
}