/* ==========================================================================
   Overland Blockchain Group — Royal Blue Luxury Advisory Design System (v2.3)
   Sausalito, California
   ========================================================================== */

:root {
  /* Overland Royal Blue Palette (Inspired by overlandblockchain.com hsl(210 100% 20%)) */
  --bg-royal-deep: #051529;
  --bg-royal-main: #081E38;
  --bg-royal-surface: #0C2849;
  --bg-royal-card: rgba(12, 38, 70, 0.75);
  --bg-royal-card-hover: rgba(18, 50, 90, 0.9);
  
  --gold-primary: #E5B869;
  --gold-light: #F5D598;
  --gold-glow: rgba(229, 184, 105, 0.25);
  
  --blue-royal-glow: rgba(37, 99, 235, 0.2);
  --emerald-accent: #10B981;
  --cyan-accent: #38BDF8;
  --purple-accent: #A78BFA;
  --amber-accent: #F59E0B;

  --text-primary: #FFFFFF;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;
  --border-subtle: rgba(255, 255, 255, 0.1);
}

html {
  scroll-behavior: smooth;
  color-scheme: dark;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-royal-deep);
  color: var(--text-primary);
  overflow-x: hidden;
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Montserrat', sans-serif;
  letter-spacing: -0.025em;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
}
::-webkit-scrollbar-track {
  background: #051529;
}
::-webkit-scrollbar-thumb {
  background: #1A365D;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #E5B869;
}

/* Overland Royal Blue Ambient Mesh */
.bg-royal-mesh {
  background:
    radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 85% 12%, rgba(229, 184, 105, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(30, 58, 138, 0.3) 0%, transparent 50%),
    #051529;
}

.bg-grid-faint {
  background-size: 56px 56px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Glass Panels with Royal Blue Depth */
.glass-card {
  background: var(--bg-royal-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--border-subtle);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-card:hover {
  background: var(--bg-royal-card-hover);
  border-color: rgba(229, 184, 105, 0.3);
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.6), 0 0 25px rgba(37, 99, 235, 0.15);
}

/* Gold Gradient Heading */
.gold-text-gradient {
  background: linear-gradient(135deg, #FFFFFF 20%, #F5D598 60%, #E5B869 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Consulting Project Colors (Distinct Jewel-Tones on Royal Blue)
   ========================================================================== */

/* Emerald Consulting Card */
.project-card-emerald {
  background: linear-gradient(145deg, rgba(6, 78, 59, 0.35), rgba(12, 38, 70, 0.85));
  border: 1px solid rgba(16, 185, 129, 0.3);
  transition: all 0.35s ease;
}
.project-card-emerald:hover {
  border-color: rgba(16, 185, 129, 0.6);
  box-shadow: 0 16px 36px -10px rgba(16, 185, 129, 0.25);
  transform: translateY(-3px);
}

/* Cyan Consulting Card */
.project-card-cyan {
  background: linear-gradient(145deg, rgba(8, 51, 68, 0.4), rgba(12, 38, 70, 0.85));
  border: 1px solid rgba(56, 189, 248, 0.3);
  transition: all 0.35s ease;
}
.project-card-cyan:hover {
  border-color: rgba(56, 189, 248, 0.6);
  box-shadow: 0 16px 36px -10px rgba(56, 189, 248, 0.25);
  transform: translateY(-3px);
}

/* Violet Consulting Card */
.project-card-purple {
  background: linear-gradient(145deg, rgba(46, 16, 101, 0.35), rgba(12, 38, 70, 0.85));
  border: 1px solid rgba(167, 139, 250, 0.3);
  transition: all 0.35s ease;
}
.project-card-purple:hover {
  border-color: rgba(167, 139, 250, 0.6);
  box-shadow: 0 16px 36px -10px rgba(167, 139, 250, 0.25);
  transform: translateY(-3px);
}

/* Amber Consulting Card */
.project-card-amber {
  background: linear-gradient(145deg, rgba(69, 26, 3, 0.35), rgba(12, 38, 70, 0.85));
  border: 1px solid rgba(245, 158, 11, 0.3);
  transition: all 0.35s ease;
}
.project-card-amber:hover {
  border-color: rgba(245, 158, 11, 0.6);
  box-shadow: 0 16px 36px -10px rgba(245, 158, 11, 0.25);
  transform: translateY(-3px);
}

/* Timeline Step Styling */
.lifecycle-step.active {
  background: linear-gradient(135deg, #1E3A8A, #0F2547);
  border-color: #E5B869;
  color: #FFFFFF;
}

.lifecycle-step.active .step-num {
  background: #E5B869;
  color: #051529;
}

/* Custom Styled Select Element & Options in Royal Blue */
.custom-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23E5B869' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1em;
  padding-right: 2.75rem;
}

.custom-select option {
  background-color: #081E38;
  color: #FFFFFF;
  padding: 12px 14px;
  font-size: 0.875rem;
}

/* ==========================================================================
   Executive Services Dropdown Menu Navigation (100% Solid Luxury Panel)
   ========================================================================== */
.nav-dropdown-container {
  position: relative;
}

.nav-dropdown-menu {
  display: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 99999 !important;
}

.nav-dropdown-container:hover .nav-dropdown-menu,
.nav-dropdown-container:focus-within .nav-dropdown-menu,
.nav-dropdown-container.open .nav-dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.nav-dropdown-container:hover .dropdown-chevron,
.nav-dropdown-container.open .dropdown-chevron {
  transform: rotate(180deg);
}

/* 100% Solid Opaque Dropdown Panel - Zero Transparency Bleed Through */
.nav-dropdown-panel {
  background-color: #030D1A !important;
  background: #030D1A !important;
  border: 1px solid rgba(229, 184, 105, 0.45) !important;
  border-radius: 1rem !important;
  box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.98), 0 0 35px rgba(3, 13, 26, 0.95) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  width: 420px !important;
  max-width: 92vw !important;
  padding: 0.75rem !important;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
}

.nav-dropdown-item:hover {
  background: #081E38 !important;
  border-color: rgba(229, 184, 105, 0.3) !important;
  transform: translateX(3px);
}

.nav-dropdown-item.active {
  background: rgba(12, 40, 73, 0.9) !important;
  border-color: rgba(229, 184, 105, 0.4) !important;
}