/* ==========================================================================
   THEME SWITCHER TOGGLE COMPONENT
   ========================================================================== */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.75rem 0.35rem 0.45rem;
  border-radius: 9999px;
  border: 1px solid;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.80rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  background: transparent;
  user-select: none;
  outline: none;
  vertical-align: middle;
}

.theme-toggle-track {
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  border-radius: 9999px;
  position: relative;
  transition: background-color 0.25s ease, border-color 0.25s ease;
  padding: 2px;
  box-sizing: border-box;
}

.theme-toggle-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.theme-toggle-thumb .theme-icon {
  width: 13px;
  height: 13px;
  stroke: currentColor;
}

/* Light Theme Toggle Button */
html[data-theme="light"] .theme-toggle-btn {
  color: #44403C;
  border-color: rgba(180, 150, 110, 0.45);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 3px rgba(180, 150, 110, 0.15);
}

html[data-theme="light"] .theme-toggle-btn:hover {
  color: #181A20;
  border-color: rgba(217, 119, 6, 0.6);
  background: #FFFFFF;
  box-shadow: 0 3px 10px rgba(217, 119, 6, 0.18);
}

html[data-theme="light"] .theme-toggle-track {
  background: #F1EDE4;
  border: 1px solid rgba(180, 150, 110, 0.5);
}

html[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(0px);
  background: #D97706;
  color: #FFFFFF;
}

html[data-theme="light"] .theme-toggle-thumb .icon-sun {
  display: block;
}

html[data-theme="light"] .theme-toggle-thumb .icon-moon {
  display: none;
}

/* Dark Theme Toggle Button */
html[data-theme="dark"] .theme-toggle-btn {
  color: #CBD5E1;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(13, 20, 37, 0.8);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  color: #FFFFFF;
  border-color: rgba(6, 182, 212, 0.6);
  background: rgba(22, 33, 62, 0.95);
  box-shadow: 0 3px 12px rgba(6, 182, 212, 0.25);
}

html[data-theme="dark"] .theme-toggle-track {
  background: #0F172A;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .theme-toggle-thumb {
  transform: translateX(20px);
  background: #06B6D4;
  color: #050811;
}

html[data-theme="dark"] .theme-toggle-thumb .icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-toggle-thumb .icon-moon {
  display: block;
}

@media (max-width: 768px) {
  .theme-toggle-text {
    display: none;
  }
  .theme-toggle-btn {
    padding: 0.35rem 0.45rem;
  }
}

/* ==========================================================================
   NAVBAR & HERO REFINEMENTS (BOTH THEMES)
   ========================================================================== */
.nav-container {
  gap: 1rem !important;
}

.brand-logo {
  margin-right: 1.2rem !important;
  flex-shrink: 0 !important;
}

.nav-menu {
  gap: clamp(0.75rem, 1.2vw, 1.35rem) !important;
}

.nav-link {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

.nav-actions {
  gap: 0.85rem !important;
  flex-shrink: 0 !important;
}

/* Light mode lead-in text and contrast */
html[data-theme="light"] [style*="color: #e2e8f0"] {
  color: #44403C !important;
}

html[data-theme="light"] [style*="color: #cbd5e1"] {
  color: #57534E !important;
}

html[data-theme="dark"] [style*="color: #e2e8f0"] {
  color: #e2e8f0 !important;
}

html[data-theme="dark"] [style*="color: #cbd5e1"] {
  color: #cbd5e1 !important;
}


/* ==========================================================================
   PART I: LIGHT THEME (Sandstone & 24K Bullion)
   ========================================================================== */
/* ==========================================================================
   Rax Elemental — Sandstone & 24K Bullion Light Earthy Design System
   Natural limestone travertine, warm sandstone, 24K bullion gold accents,
   and clean white-fade photography integration.
   ========================================================================== */

/* -------------------------------------------------------------
   0. Global Design Token Overrides
   ------------------------------------------------------------- */
html[data-theme="light"] {
  --bg-deep: #F8F6F0 !important;
  --bg-surface: #FFFFFF !important;
  --bg-surface-elevated: #FAF8F4 !important;
  --bg-glass: rgba(255, 255, 255, 0.92) !important;
  --bg-glass-card: rgba(255, 255, 255, 0.95) !important;
  --bg-glass-hover: #FFFFFF !important;

  --border-subtle: rgba(180, 150, 110, 0.22) !important;
  --border-glass: rgba(180, 150, 110, 0.30) !important;
  --border-highlight: rgba(217, 119, 6, 0.45) !important;

  --gold-primary: #D97706 !important;
  --gold-glow: rgba(217, 119, 6, 0.30) !important;
  --cyan-primary: #0E7490 !important;
  --cyan-glow: rgba(14, 116, 144, 0.25) !important;
  --violet-primary: #92400E !important;
  --violet-glow: rgba(146, 64, 14, 0.25) !important;
  --emerald-primary: #047857 !important;
  --emerald-glow: rgba(4, 120, 87, 0.25) !important;

  --text-main: #181A20 !important;
  --text-muted: #57534E !important;
  --text-faint: #78716C !important;
  --text-bright: #0C0E12 !important;
}

/* -------------------------------------------------------------
   1. Base & Global Typography Reset
   ------------------------------------------------------------- */
html[data-theme="light"] body {
  background-color: #F8F6F0 !important;
  color: #181A20 !important;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(217, 119, 6, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 90% 20%, rgba(245, 158, 11, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 10% 60%, rgba(180, 150, 110, 0.06) 0%, transparent 40%) !important;
}

/* Headings & Text */
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6,
html[data-theme="light"] .section-title,
html[data-theme="light"] .hero-title,
html[data-theme="light"] .brand-name,
html[data-theme="light"] .card-title,
html[data-theme="light"] .metric-value,
html[data-theme="light"] .step-title {
  color: #14171F !important;
}

html[data-theme="light"] p,
html[data-theme="light"] .section-desc,
html[data-theme="light"] .hero-desc,
html[data-theme="light"] .card-desc,
html[data-theme="light"] .step-desc,
html[data-theme="light"] .feature-desc {
  color: #57534E !important;
}

/* High-Contrast 24K Bullion Gradient Typography */
html[data-theme="light"] .gradient-text-gold {
  background: linear-gradient(135deg, #B45309 0%, #D97706 50%, #F59E0B 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .gradient-text-elemental {
  background: linear-gradient(135deg, #92400E 0%, #B45309 45%, #D97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .gradient-text-cyan {
  background: linear-gradient(135deg, #0E7490 0%, #0284C7 60%, #0369A1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Badges across all sections */
html[data-theme="light"] .section-badge {
  background: #FEF3C7 !important;
  border: 1px solid rgba(217, 119, 6, 0.38) !important;
  color: #92400E !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .section-badge a {
  color: #92400E !important;
}

html[data-theme="light"] .section-badge-gold {
  background: #FEF3C7 !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  color: #92400E !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .section-badge-cyan {
  background: #E0F2FE !important;
  border-color: rgba(14, 116, 144, 0.35) !important;
  color: #0E7490 !important;
  font-weight: 600 !important;
}

/* -------------------------------------------------------------
   2. Navbar: Frosted Warm Travertine
   ------------------------------------------------------------- */
html[data-theme="light"] .navbar,
html[data-theme="light"] #main-navbar {
  background: rgba(248, 246, 240, 0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.25) !important;
  box-shadow: 0 4px 20px rgba(100, 75, 40, 0.05) !important;
}

html[data-theme="light"] .navbar.scrolled {
  background: rgba(248, 246, 240, 0.97) !important;
  border-bottom-color: rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 8px 30px rgba(100, 75, 40, 0.08) !important;
}

html[data-theme="light"] .brand-name {
  color: #14171F !important;
}

html[data-theme="light"] .brand-elemental {
  color: #B45309 !important;
}

html[data-theme="light"] .brand-icon {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  box-shadow: 0 0 16px rgba(217, 119, 6, 0.35) !important;
}

html[data-theme="light"] .nav-link {
  color: #44403C !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  color: #B45309 !important;
}

/* Buttons */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .btn-gold {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.30) !important;
  border: none !important;
}

html[data-theme="light"] .btn-primary:hover,
html[data-theme="light"] .btn-gold:hover {
  filter: brightness(1.08) !important;
  box-shadow: 0 6px 24px rgba(217, 119, 6, 0.40) !important;
}

html[data-theme="light"] .btn-secondary {
  background: rgba(255, 255, 255, 0.88) !important;
  color: #14171F !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .btn-secondary:hover {
  background: #FFFFFF !important;
  border-color: #B45309 !important;
  color: #B45309 !important;
}

/* -------------------------------------------------------------
   3. Section Transitions & Divider Beams
   ------------------------------------------------------------- */
html[data-theme="light"] .section {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 9999px;
  z-index: 2;
  pointer-events: none;
}

/* --- Hero Section: Warm Limestone Travertine --- */
html[data-theme="light"] .hero-section {
  background-color: #F8F6F0 !important;
  background-image: 
    radial-gradient(ellipse 75% 55% at 50% 5%, rgba(245, 158, 11, 0.12) 0%, transparent 65%),
    radial-gradient(circle at 85% 60%, rgba(217, 119, 6, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 15% 70%, rgba(180, 150, 110, 0.06) 0%, transparent 50%) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.22) !important;
}

html[data-theme="light"] .badge-tag,
html[data-theme="light"] .badge-label,
html[data-theme="light"] .hero-tag {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid rgba(217, 119, 6, 0.35) !important;
}

/* Hero Right Side: Ore Matrix Card */
html[data-theme="light"] .ore-matrix-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.32) !important;
  box-shadow: 0 20px 48px -12px rgba(90, 65, 35, 0.12) !important;
}

html[data-theme="light"] .matrix-header {
  border-bottom: 1px solid rgba(180, 150, 110, 0.25) !important;
}

html[data-theme="light"] .matrix-title span {
  color: #92400E !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .matrix-live-dot {
  background: #047857 !important;
  box-shadow: 0 0 8px rgba(4, 120, 87, 0.5) !important;
}

html[data-theme="light"] .matrix-stream-row {
  background: #FAF8F4 !important;
  border: 1px solid rgba(180, 150, 110, 0.22) !important;
  color: #181A20 !important;
}

html[data-theme="light"] .matrix-stream-row:hover {
  background: #F5EFE6 !important;
  border-color: rgba(217, 119, 6, 0.40) !important;
  transform: translateX(4px) !important;
}

/* --- Paradigm (Economics & Smelting) --- */
html[data-theme="light"] #paradigm {
  background-color: #F2EFE8 !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 15%, rgba(245, 158, 11, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(217, 119, 6, 0.05) 0%, transparent 50%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.28) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #paradigm::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.6) 50%, transparent 100%) !important;
}

/* --- Technology (Flowsheet) --- */
html[data-theme="light"] #technology {
  background-color: #EBE7DD !important;
  background-image: 
    radial-gradient(ellipse 75% 55% at 50% 12%, rgba(245, 158, 11, 0.12) 0%, transparent 65%),
    linear-gradient(rgba(180, 150, 110, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180, 150, 110, 0.12) 1px, transparent 1px) !important;
  background-size: 100% 100%, 42px 42px, 42px 42px !important;
  border-top: 1px solid rgba(217, 119, 6, 0.32) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #technology::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.7) 50%, transparent 100%) !important;
}

/* --- Materials (Feedstocks & Strata) --- */
html[data-theme="light"] #materials {
  background-color: #EFE8DC !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 80% 25%, rgba(217, 119, 6, 0.09) 0%, transparent 60%),
    radial-gradient(circle at 15% 75%, rgba(180, 150, 110, 0.08) 0%, transparent 50%) !important;
  border-top: 1px solid rgba(180, 150, 110, 0.28) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #materials::before {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 150, 110, 0.5) 50%, transparent 100%) !important;
}

/* --- Audience / Commercial Models --- */
html[data-theme="light"] #audience {
  background-color: #F6F3EC !important;
  background-image: 
    radial-gradient(ellipse 65% 45% at 25% 25%, rgba(245, 158, 11, 0.09) 0%, transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(180, 150, 110, 0.08) 0%, transparent 55%) !important;
  border-top: 1px solid rgba(180, 150, 110, 0.30) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #audience::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.5) 50%, transparent 100%) !important;
}

/* --- Difference / Advantage Spotlight (with Mineral Matrix Artwork) --- */
html[data-theme="light"] #difference,
html[data-theme="light"] .difference-section-bg {
  background-color: #FAF7F0 !important;
  background-image: 
    radial-gradient(ellipse 80% 60% at 50% 15%, rgba(245, 158, 11, 0.14) 0%, transparent 65%),
    radial-gradient(circle at 85% 70%, rgba(217, 119, 6, 0.08) 0%, transparent 55%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.35) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
  box-shadow: inset 0 20px 40px -15px rgba(217, 119, 6, 0.08) !important;
}

html[data-theme="light"] #difference::before,
html[data-theme="light"] .difference-section-bg::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.75) 50%, transparent 100%) !important;
}

html[data-theme="light"] .difference-bg-img {
  opacity: 0.18 !important;
  filter: saturate(1.15) contrast(1.05) !important;
  mix-blend-mode: multiply !important;
}

/* White/Limestone gentle fade for Difference backdrop */
html[data-theme="light"] .difference-gradient-top {
  background: linear-gradient(180deg, #FAF7F0 0%, rgba(250, 247, 240, 0) 100%) !important;
}

html[data-theme="light"] .difference-gradient-bottom {
  background: linear-gradient(0deg, #FAF7F0 0%, rgba(250, 247, 240, 0) 100%) !important;
}

html[data-theme="light"] .difference-gradient-radial {
  background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.85) 65%, #FAF7F0 100%) !important;
}

html[data-theme="light"] .difference-card,
html[data-theme="light"] .difference-card[data-astro-cid-vp3hk7ad].glass-card {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(180, 150, 110, 0.32) !important;
  box-shadow: 0 14px 35px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .difference-card:hover,
html[data-theme="light"] .difference-card[data-astro-cid-vp3hk7ad].glass-card:hover {
  border-color: rgba(217, 119, 6, 0.50) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 18px 40px rgba(217, 119, 6, 0.14) !important;
}

html[data-theme="light"] .difference-num {
  color: #B45309 !important;
}

/* --- First Bucket / Diagnostic Intake & Validation (NO BLUE SECTION) --- */
html[data-theme="light"] #first-bucket {
  background-color: #F5EFE6 !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(245, 158, 11, 0.12) 0%, transparent 65%),
    radial-gradient(circle at 15% 75%, rgba(180, 150, 110, 0.08) 0%, transparent 50%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.32) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #first-bucket::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.6) 50%, transparent 100%) !important;
}

/* Replacing the old dark blue box with warm limestone/white porcelain card */
html[data-theme="light"] .bucket-showcase-grid,
html[data-theme="light"] .bucket-showcase-grid[data-astro-cid-cndvrpmg] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 20px 48px -12px rgba(90, 65, 35, 0.10) !important;
}

html[data-theme="light"] .bucket-content h2,
html[data-theme="light"] .bucket-content [data-astro-cid-cndvrpmg] h2,
html[data-theme="light"] #first-bucket h2 {
  color: #14171F !important;
}

html[data-theme="light"] .bucket-content .lead-text,
html[data-theme="light"] #first-bucket .lead-text {
  color: #44403C !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .bucket-content p,
html[data-theme="light"] #first-bucket p {
  color: #57534E !important;
}

html[data-theme="light"] .checklist-item,
html[data-theme="light"] .checklist-item[data-astro-cid-cndvrpmg],
html[data-theme="light"] .checklist-item span {
  color: #292524 !important;
}

html[data-theme="light"] .check-icon,
html[data-theme="light"] .check-icon[data-astro-cid-cndvrpmg] {
  color: #D97706 !important;
}

html[data-theme="light"] .bucket-content div[style*="border-left"] {
  background: #FAF8F4 !important;
  border-left: 3px solid #D97706 !important;
  color: #44403C !important;
  padding: 0.85rem 1.25rem !important;
  border-radius: 0 8px 8px 0 !important;
}

html[data-theme="light"] .bucket-btn {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(217, 119, 6, 0.30) !important;
}

/* --- Investors Section --- */
html[data-theme="light"] #investors {
  background-color: #F0EAE1 !important;
  border-top: 1px solid rgba(180, 150, 110, 0.25) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #investors::before {
  background: linear-gradient(90deg, transparent 0%, rgba(180, 150, 110, 0.5) 50%, transparent 100%) !important;
}

/* --- About Section --- */
html[data-theme="light"] #about {
  background-color: #FAF8F4 !important;
  border-top: 1px solid rgba(180, 150, 110, 0.25) !important;
  border-bottom: 1px solid rgba(180, 150, 110, 0.20) !important;
}

html[data-theme="light"] #about::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.45) 50%, transparent 100%) !important;
}

/* --- Contact Section: Radiant Conversion Centerpiece --- */
html[data-theme="light"] #contact {
  background-color: #EDE7DB !important;
  background-image: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(245, 158, 11, 0.16) 0%, transparent 65%),
    radial-gradient(circle at 15% 70%, rgba(180, 150, 110, 0.10) 0%, transparent 50%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.35) !important;
  box-shadow: inset 0 24px 48px -20px rgba(217, 119, 6, 0.10) !important;
}

html[data-theme="light"] #contact::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.8) 50%, transparent 100%) !important;
}

/* --- Site Footer: Grounding Basalt Charcoal --- */
html[data-theme="light"] .site-footer {
  background: #181A20 !important;
  color: #A8A29E !important;
  border-top: 2px solid rgba(217, 119, 6, 0.35) !important;
}

html[data-theme="light"] .site-footer a {
  color: #D6D3D1 !important;
}

html[data-theme="light"] .site-footer a:hover {
  color: #F59E0B !important;
}

html[data-theme="light"] .site-footer p,
html[data-theme="light"] .site-footer .footer-desc {
  color: #A8A29E !important;
}

/* -------------------------------------------------------------
   4. Photography Harmony: Clean Light White Fades
   ------------------------------------------------------------- */
/* 4.1 Geological Strata Soil (geological-strata-soil.jpg) */
html[data-theme="light"] .strata-showcase-card,
html[data-theme="light"] .strata-showcase-card[data-astro-cid-n4vyebt7] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 20px 45px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .strata-img,
html[data-theme="light"] .strata-img[data-astro-cid-n4vyebt7] {
  opacity: 1 !important;
  filter: saturate(1.15) contrast(1.05) !important;
}

/* Pure light white fade instead of dark/black */
html[data-theme="light"] .strata-gradient-overlay,
html[data-theme="light"] .strata-gradient-overlay[data-astro-cid-n4vyebt7] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.12) 30%, rgba(255, 255, 255, 0.90) 100%) !important;
}

html[data-theme="light"] .strata-badge-top,
html[data-theme="light"] .strata-badge-top[data-astro-cid-n4vyebt7] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
  color: #92400E !important;
  box-shadow: 0 4px 16px rgba(100, 75, 40, 0.10) !important;
}

html[data-theme="light"] .strata-point,
html[data-theme="light"] .strata-point[data-astro-cid-n4vyebt7] {
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 8px 24px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .strata-point:hover,
html[data-theme="light"] .strata-point[data-astro-cid-n4vyebt7]:hover {
  border-color: rgba(217, 119, 6, 0.50) !important;
  box-shadow: 0 12px 30px rgba(217, 119, 6, 0.15) !important;
  transform: translateY(-3px) !important;
}

html[data-theme="light"] .strata-point h4,
html[data-theme="light"] .strata-point div,
html[data-theme="light"] .strata-point strong,
html[data-theme="light"] .strata-point [data-astro-cid-n4vyebt7] {
  color: #14171F !important;
}

html[data-theme="light"] .strata-point p,
html[data-theme="light"] .strata-point span,
html[data-theme="light"] .strata-point [style*="color: #cbd5e1"] {
  color: #57534E !important;
}

/* 4.2 Chemist Lab Process (chemist-lab-process.jpg) */
html[data-theme="light"] .chemistry-feature-card,
html[data-theme="light"] .chemistry-feature-card[data-astro-cid-zc43iqly] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 20px 45px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .chemistry-img,
html[data-theme="light"] .chemistry-img[data-astro-cid-zc43iqly] {
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

/* Clean white dissolve to right and soft white edges */
html[data-theme="light"] .chemistry-overlay,
html[data-theme="light"] .chemistry-overlay[data-astro-cid-zc43iqly] {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.98) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.40) 100%) !important;
}

html[data-theme="light"] .chemistry-badge,
html[data-theme="light"] .chemistry-badge[data-astro-cid-zc43iqly] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(180, 150, 110, 0.40) !important;
  color: #92400E !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important;
}

html[data-theme="light"] .chemistry-details,
html[data-theme="light"] .chemistry-details[data-astro-cid-zc43iqly] {
  background: #FFFFFF !important;
}

html[data-theme="light"] .chemistry-details h3 {
  color: #14171F !important;
}

html[data-theme="light"] .chemistry-details p {
  color: #57534E !important;
}

html[data-theme="light"] .chem-perk,
html[data-theme="light"] .chem-perk[data-astro-cid-zc43iqly],
html[data-theme="light"] .chem-perk div,
html[data-theme="light"] .chem-perk strong {
  color: #181A20 !important;
}

html[data-theme="light"] .chem-perk strong {
  color: #0C0E12 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .chem-perk-icon,
html[data-theme="light"] .chem-perk-icon[data-astro-cid-zc43iqly] {
  background: #E0F2FE !important;
  border-color: rgba(14, 116, 144, 0.40) !important;
  color: #0E7490 !important;
}

/* 4.3 Ore Haulage Mining Truck (ore-haulage-mining.jpg) */
html[data-theme="light"] .feedstock-banner-card,
html[data-theme="light"] .feedstock-banner-card[data-astro-cid-3j4v24wi] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 20px 45px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .feedstock-banner-img,
html[data-theme="light"] .feedstock-banner-img[data-astro-cid-3j4v24wi] {
  opacity: 0.95 !important;
  filter: saturate(1.15) contrast(1.08) !important;
}

/* Light white fade across banner instead of black */
html[data-theme="light"] .feedstock-banner-overlay,
html[data-theme="light"] .feedstock-banner-overlay[data-astro-cid-3j4v24wi] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.70) 35%, rgba(255, 255, 255, 0.96) 85%) !important;
}

html[data-theme="light"] .feedstock-banner-content h3,
html[data-theme="light"] .feedstock-banner-content [data-astro-cid-3j4v24wi] h3 {
  color: #14171F !important;
}

html[data-theme="light"] .feedstock-banner-content p,
html[data-theme="light"] .feedstock-banner-content [data-astro-cid-3j4v24wi] p {
  color: #44403C !important;
  font-weight: 500 !important;
}

html[data-theme="light"] .feedstock-pill,
html[data-theme="light"] .feedstock-pill[data-astro-cid-3j4v24wi] {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  color: #292524 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

/* 4.4 Mineral Powders Samples (mineral-powders-samples.jpg) */
html[data-theme="light"] .sample-image-card,
html[data-theme="light"] .sample-image-card[data-astro-cid-cndvrpmg] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 16px 36px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .sample-img,
html[data-theme="light"] .sample-img[data-astro-cid-cndvrpmg] {
  opacity: 1 !important;
  filter: saturate(1.10) contrast(1.05) !important;
}

/* Light white bottom fade into card */
html[data-theme="light"] .sample-image-overlay,
html[data-theme="light"] .sample-image-overlay[data-astro-cid-cndvrpmg] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.90) 100%) !important;
}

html[data-theme="light"] .floating-pill,
html[data-theme="light"] .floating-pill[data-astro-cid-cndvrpmg] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(180, 150, 110, 0.40) !important;
  color: #181A20 !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 14px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .floating-pill span,
html[data-theme="light"] .floating-pill[data-astro-cid-cndvrpmg] span {
  color: #181A20 !important;
}

html[data-theme="light"] .floating-pill-bottom span[style*="color: #cbd5e1"] {
  color: #57534E !important;
}

html[data-theme="light"] .sample-card-details,
html[data-theme="light"] .sample-card-details[data-astro-cid-cndvrpmg] {
  background: #FFFFFF !important;
}

html[data-theme="light"] .sample-stat-row,
html[data-theme="light"] .sample-stat-row[data-astro-cid-cndvrpmg] {
  border-top: 1px solid rgba(180, 150, 110, 0.22) !important;
}

html[data-theme="light"] .sample-stat,
html[data-theme="light"] .sample-stat[data-astro-cid-cndvrpmg] {
  background: #FAF8F4 !important;
  border: 1px solid rgba(180, 150, 110, 0.25) !important;
}

html[data-theme="light"] .sample-stat-val,
html[data-theme="light"] .sample-stat-val[data-astro-cid-cndvrpmg] {
  color: #B45309 !important;
  font-weight: 700 !important;
}

html[data-theme="light"] .sample-stat-lbl,
html[data-theme="light"] .sample-stat-lbl[data-astro-cid-cndvrpmg] {
  color: #78716C !important;
}

/* 4.5 Aerial Processing Facility (aerial-processing-facility.jpg) */
html[data-theme="light"] .facility-image-card,
html[data-theme="light"] .facility-image-card[data-astro-cid-lx6rp2ia] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 20px 45px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .facility-img,
html[data-theme="light"] .facility-img[data-astro-cid-lx6rp2ia] {
  opacity: 1 !important;
  filter: saturate(1.08) contrast(1.04) !important;
}

/* Light white bottom fade into card body */
html[data-theme="light"] .facility-img-overlay,
html[data-theme="light"] .facility-img-overlay[data-astro-cid-lx6rp2ia] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.90) 100%) !important;
}

html[data-theme="light"] .facility-badge-top,
html[data-theme="light"] .facility-badge-top[data-astro-cid-lx6rp2ia] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(217, 119, 6, 0.45) !important;
  color: #92400E !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

html[data-theme="light"] .facility-badge-bottom,
html[data-theme="light"] .facility-badge-bottom[data-astro-cid-lx6rp2ia] {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  color: #B45309 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06) !important;
}

html[data-theme="light"] .facility-card-body,
html[data-theme="light"] .facility-card-body[data-astro-cid-lx6rp2ia] {
  background: #FFFFFF !important;
  border-top: 1px solid rgba(180, 150, 110, 0.25) !important;
}

html[data-theme="light"] .facility-card-body h4,
html[data-theme="light"] .facility-card-body h3,
html[data-theme="light"] .facility-card-body [data-astro-cid-lx6rp2ia] {
  color: #181A20 !important;
}

html[data-theme="light"] .facility-card-body p {
  color: #57534E !important;
}

html[data-theme="light"] .facility-stats,
html[data-theme="light"] .facility-stats[data-astro-cid-lx6rp2ia] {
  border-top: 1px solid rgba(180, 150, 110, 0.22) !important;
}

html[data-theme="light"] .facility-stat-item,
html[data-theme="light"] .facility-stat-item[data-astro-cid-lx6rp2ia] {
  background: #FAF8F4 !important;
  border: 1px solid rgba(180, 150, 110, 0.25) !important;
}

html[data-theme="light"] .facility-stat-val,
html[data-theme="light"] .facility-stat-val[data-astro-cid-lx6rp2ia] {
  color: #B45309 !important;
  font-weight: 700 !important;
}

/* -------------------------------------------------------------
   5. General Cards, Glass Panels & Elements Grid
   ------------------------------------------------------------- */
html[data-theme="light"] .card,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .material-card,
html[data-theme="light"] .feedstock-card,
html[data-theme="light"] .step-card,
html[data-theme="light"] .feature-card,
html[data-theme="light"] .audience-card,
html[data-theme="light"] .investor-card,
html[data-theme="light"] .about-card,
html[data-theme="light"] .contact-card-wrap,
html[data-theme="light"] .process-box,
html[data-theme="light"] .stat-box {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  border: 1px solid rgba(180, 150, 110, 0.30) !important;
  box-shadow: 0 10px 30px -8px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] .card:hover,
html[data-theme="light"] .glass-card:hover,
html[data-theme="light"] .material-card:hover,
html[data-theme="light"] .step-card:hover,
html[data-theme="light"] .audience-card:hover {
  border-color: rgba(217, 119, 6, 0.45) !important;
  box-shadow: 0 16px 36px -8px rgba(217, 119, 6, 0.15) !important;
}

/* Elements Grid Cards */
html[data-theme="light"] .element-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.28) !important;
  box-shadow: 0 8px 24px rgba(90, 65, 35, 0.06) !important;
}

html[data-theme="light"] .element-card:hover {
  background: #FAF8F4 !important;
  border-color: rgba(217, 119, 6, 0.45) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 36px rgba(217, 119, 6, 0.12) !important;
}

html[data-theme="light"] .element-name {
  color: #181A20 !important;
}

html[data-theme="light"] .element-symbol {
  color: #0C0E12 !important;
}

/* Tab filter buttons */
html[data-theme="light"] .tab-btn {
  background: rgba(255, 255, 255, 0.85) !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  color: #44403C !important;
}

html[data-theme="light"] .tab-btn:hover {
  background: #FFFFFF !important;
  border-color: #B45309 !important;
  color: #B45309 !important;
}

html[data-theme="light"] .tab-btn.active {
  background: linear-gradient(135deg, #D97706 0%, #B45309 100%) !important;
  color: #FFFFFF !important;
  border-color: #B45309 !important;
  box-shadow: 0 4px 16px rgba(217, 119, 6, 0.35) !important;
}

/* Materials Bottom CTA Banner */
html[data-theme="light"] div[style*="background: rgba(13, 20, 37, 0.7)"],
html[data-theme="light"] div[style*="background:rgba(13, 20, 37, 0.7)"] {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
  box-shadow: 0 16px 36px rgba(90, 65, 35, 0.08) !important;
}

html[data-theme="light"] div[style*="background: rgba(13, 20, 37, 0.7)"] h3,
html[data-theme="light"] div[style*="background:rgba(13, 20, 37, 0.7)"] h3 {
  color: #14171F !important;
}

html[data-theme="light"] div[style*="background: rgba(13, 20, 37, 0.7)"] p,
html[data-theme="light"] div[style*="background:rgba(13, 20, 37, 0.7)"] p {
  color: #57534E !important;
}

/* -------------------------------------------------------------
   6. Form Inputs & Contact Card
   ------------------------------------------------------------- */
html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
  background: #FFFFFF !important;
  color: #181A20 !important;
  border: 1px solid rgba(180, 150, 110, 0.35) !important;
}

html[data-theme="light"] .form-input::placeholder,
html[data-theme="light"] .form-textarea::placeholder {
  color: #A8A29E !important;
}

html[data-theme="light"] .form-input:focus,
html[data-theme="light"] .form-select:focus,
html[data-theme="light"] .form-textarea:focus {
  border-color: #D97706 !important;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.18) !important;
  outline: none !important;
}

html[data-theme="light"] .form-label {
  color: #181A20 !important;
  font-weight: 600 !important;
}

html[data-theme="light"] .form-select option {
  background: #FFFFFF !important;
  color: #181A20 !important;
}

/* Strict Confidentiality NDA Callout */
html[data-theme="light"] div[style*="background: rgba(245, 158, 11, 0.08)"],
html[data-theme="light"] div[style*="background:rgba(245, 158, 11, 0.08)"] {
  background: #FEF3C7 !important;
  border: 1px solid rgba(217, 119, 6, 0.38) !important;
}

html[data-theme="light"] div[style*="background: rgba(245, 158, 11, 0.08)"] div,
html[data-theme="light"] div[style*="background: rgba(245, 158, 11, 0.08)"] span {
  color: #92400E !important;
}

html[data-theme="light"] div[style*="background: rgba(245, 158, 11, 0.08)"] p {
  color: #57534E !important;
}

/* Comparison Table */
html[data-theme="light"] .comparison-table-wrapper,
html[data-theme="light"] .table-container {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.25) !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .table th,
html[data-theme="light"] .table td {
  border-color: rgba(180, 150, 110, 0.20) !important;
  color: #181A20 !important;
}

/* -------------------------------------------------------------
   7. Specific Text & Contrast Overrides
   ------------------------------------------------------------- */
html[data-theme="light"] [style*="color: #cbd5e1"],
html[data-theme="light"] [style*="color:#cbd5e1"] {
  color: #57534E !important;
}

html[data-theme="light"] [style*="color: #94a3b8"],
html[data-theme="light"] [style*="color:#94a3b8"] {
  color: #78716C !important;
}

html[data-theme="light"] [style*="color: #e2e8f0"],
html[data-theme="light"] [style*="color:#e2e8f0"] {
  color: #181A20 !important;
}

html[data-theme="light"] .hero-section [style*="color: #e2e8f0"],
html[data-theme="light"] .hero-section [style*="color:#e2e8f0"] {
  color: #92400E !important;
  font-weight: 600 !important;
}

/* Matrix Streams Vibrant Tokens */
html[data-theme="light"] .matrix-stream-row span[style*="#34d399"] { color: #059669 !important; }
html[data-theme="light"] .matrix-stream-row span[style*="#38bdf8"] { color: #0284C7 !important; }
html[data-theme="light"] .matrix-stream-row span[style*="#fbbf24"] { color: #B45309 !important; }
html[data-theme="light"] .matrix-stream-row span[style*="#818cf8"] { color: #6D28D9 !important; }

/* Process / Flow steps */
html[data-theme="light"] .flow-step-num,
html[data-theme="light"] .process-step-num {
  background: #FEF3C7 !important;
  color: #92400E !important;
  border: 1px solid rgba(217, 119, 6, 0.40) !important;
}

/* -------------------------------------------------------------
   9. Active Engagement Channels & Partner Pills (#investors)
   ------------------------------------------------------------- */
html[data-theme="light"] #investors div[style*="letter-spacing: 0.06em"],
html[data-theme="light"] #investors div[style*="letter-spacing:0.06em"],
html[data-theme="light"] #investors div[style*="Active Engagement Channels"],
html[data-theme="light"] #investors div[style*="ACTIVE ENGAGEMENT CHANNELS"] {
  color: #78350F !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.08em !important;
}

html[data-theme="light"] .partner-pills {
  justify-content: center !important;
  gap: 0.85rem !important;
  margin: 1.75rem 0 2.5rem !important;
}

html[data-theme="light"] .partner-pill {
  background: #FFFFFF !important;
  border: 1px solid rgba(180, 150, 110, 0.45) !important;
  color: #14171F !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  line-height: 1.4 !important;
  padding: 0.55rem 1.15rem !important;
  border-radius: 9999px !important;
  box-shadow: 0 2px 8px rgba(90, 65, 35, 0.06) !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
}

html[data-theme="light"] .partner-pill:hover {
  background: #FAF8F4 !important;
  border-color: #D97706 !important;
  color: #B45309 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.16) !important;
}

/* ==========================================================================
   PART II: DARK THEME (Cosmic Obsidian & Gold Auroras)
   ========================================================================== */
/**
 * Rax Elemental — Distinct Section Backgrounds & Visual Separation System
 * Provides bespoke background styling, ambient radial glows, and elegant dividers
 * between all sections to eliminate the monolithic single-strip appearance.
 */

/* -------------------------------------------------------------
   0. Base Section Separator Standards
   ------------------------------------------------------------- */
html[data-theme="dark"] .section {
  position: relative;
  overflow: hidden;
  transition: background-color var(--transition-normal);
}

/* Subtle glowing divider beam at top of sections */
html[data-theme="dark"] .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 30%, rgba(255, 255, 255, 0.15) 70%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

/* -------------------------------------------------------------
   1. Hero Section: Cosmic Deep Obsidian with Cyan/Violet Auroras
   ------------------------------------------------------------- */
html[data-theme="dark"] .hero-section {
  background: 
    radial-gradient(ellipse 90% 65% at 50% -15%, rgba(6, 182, 212, 0.18) 0%, rgba(5, 8, 17, 0) 70%),
    radial-gradient(circle at 85% 35%, rgba(99, 102, 241, 0.14) 0%, rgba(5, 8, 17, 0) 55%),
    radial-gradient(circle at 15% 75%, rgba(245, 158, 11, 0.08) 0%, rgba(5, 8, 17, 0) 45%),
    #050811 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

/* -------------------------------------------------------------
   2. Paradigm Section: Warm Amber / Gold Bullion Slate
   Topic: Dirt to Ingot & Smelting Economics Comparison
   ------------------------------------------------------------- */
html[data-theme="dark"] #paradigm {
  background: 
    radial-gradient(ellipse 70% 50% at 20% 30%, rgba(245, 158, 11, 0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 70%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #090e1d 0%, #0d152a 50%, #080d1a 100%) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.22) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #paradigm::before {
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.4) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   3. Technology Section: High-Tech Blueprint with Cyan Grid
   Topic: 4-Stage Closed-Loop Hydrometallurgy Flowsheet
   ------------------------------------------------------------- */
html[data-theme="dark"] #technology {
  background-color: #050a14 !important;
  background-image: 
    radial-gradient(ellipse 75% 55% at 50% 15%, rgba(6, 182, 212, 0.16) 0%, transparent 70%),
    radial-gradient(circle at 10% 80%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(6, 182, 212, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.035) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 44px 44px, 44px 44px !important;
  border-top: 1px solid rgba(6, 182, 212, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #technology::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.6) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   4. Materials Section: Earthy Dark Bronze & Mineral Slate
   Topic: Feedstock Intake & Geology Spectrum
   ------------------------------------------------------------- */
html[data-theme="dark"] #materials {
  background: 
    radial-gradient(ellipse 70% 50% at 80% 25%, rgba(217, 119, 6, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 15% 75%, rgba(6, 182, 212, 0.07) 0%, transparent 50%),
    linear-gradient(180deg, #090e1b 0%, #101729 50%, #090e1b 100%) !important;
  border-top: 1px solid rgba(217, 119, 6, 0.22) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #materials::before {
  background: linear-gradient(90deg, transparent 0%, rgba(217, 119, 6, 0.45) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   5. Audience / Solutions Section: Deep Executive Navy & Indigo
   Topic: Tailored Commercial Models & Partnerships
   ------------------------------------------------------------- */
html[data-theme="dark"] #audience {
  background: 
    radial-gradient(ellipse 65% 45% at 25% 25%, rgba(99, 102, 241, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 75% 75%, rgba(6, 182, 212, 0.08) 0%, transparent 55%),
    linear-gradient(180deg, #070c19 0%, #0d162b 50%, #060b17 100%) !important;
  border-top: 1px solid rgba(99, 102, 241, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #audience::before {
  background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.5) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   6. Difference Section: Vibrant Emerald / Cyan Spotlight
   Topic: The Rax Advantage (Cyanide-free, on-site, modular)
   ------------------------------------------------------------- */
html[data-theme="dark"] #difference,
html[data-theme="dark"] .difference-section-bg {
  background: 
    radial-gradient(ellipse 80% 55% at 50% 15%, rgba(16, 185, 129, 0.14) 0%, transparent 65%),
    radial-gradient(circle at 85% 70%, rgba(6, 182, 212, 0.11) 0%, transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #091322 0%, #0f1e36 50%, #08111f 100%) !important;
  border-top: 1px solid rgba(16, 185, 129, 0.30) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 24px 48px -20px rgba(16, 185, 129, 0.12),
    inset 0 -24px 48px -20px rgba(6, 182, 212, 0.10) !important;
}

html[data-theme="dark"] #difference::before,
html[data-theme="dark"] .difference-section-bg::before {
  background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.7) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   7. First Bucket Section: Technical Laboratory Micro-Grid & Amber
   Topic: Diagnostic Assay Protocol & Feasibility Verification
   ------------------------------------------------------------- */
html[data-theme="dark"] #first-bucket {
  background-color: #060a15 !important;
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% 25%, rgba(245, 158, 11, 0.11) 0%, transparent 65%),
    radial-gradient(circle at 10% 70%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
    linear-gradient(rgba(245, 158, 11, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.025) 1px, transparent 1px) !important;
  background-size: 100% 100%, 100% 100%, 36px 36px, 36px 36px !important;
  border-top: 1px solid rgba(245, 158, 11, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #first-bucket::before {
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.55) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   8. Investors / Strategic Offtakers: Institutional Deep Charcoal
   Topic: Commercial Offtake Agreements & Industrial Scale
   ------------------------------------------------------------- */
html[data-theme="dark"] #investors {
  background: 
    radial-gradient(ellipse 70% 50% at 75% 30%, rgba(6, 182, 212, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 20% 75%, rgba(99, 102, 241, 0.09) 0%, transparent 55%),
    linear-gradient(180deg, #090e1c 0%, #0e172d 50%, #080d19 100%) !important;
  border-top: 1px solid rgba(6, 182, 212, 0.24) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #investors::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.5) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   9. About Section: Grounded Pure Obsidian Slate
   Topic: Corporate Heritage & MNI Corp Technology Licensing
   ------------------------------------------------------------- */
html[data-theme="dark"] #about {
  background: 
    radial-gradient(ellipse 70% 45% at 30% 25%, rgba(99, 102, 241, 0.09) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #050811 0%, #0a0f21 100%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] #about::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   10. Contact Section: Radiant Conversion Centerpiece
   Topic: Material Evaluation Intake & Dossier Submission
   ------------------------------------------------------------- */
html[data-theme="dark"] #contact {
  background: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6, 182, 212, 0.18) 0%, transparent 65%),
    radial-gradient(circle at 85% 45%, rgba(245, 158, 11, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 15% 70%, rgba(99, 102, 241, 0.09) 0%, transparent 50%),
    linear-gradient(180deg, #0a1122 0%, #060913 100%) !important;
  border-top: 1px solid rgba(6, 182, 212, 0.32) !important;
  box-shadow: inset 0 32px 64px -28px rgba(6, 182, 212, 0.14) !important;
}

html[data-theme="dark"] #contact::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.8) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   11. Site Footer: Grounding Solid Charcoal
   ------------------------------------------------------------- */
html[data-theme="dark"] .site-footer {
  background: #03050a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------
   Card Glassmorphism Refinement
   Enhances glass card depth on top of new distinct backgrounds
   ------------------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .material-card,
html[data-theme="dark"] .feedstock-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .contact-card-wrap {
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}



/* ==========================================================================
   COMPREHENSIVE DARK MODE OVERRIDES & HARMONY
   ========================================================================== */

/* 1. Global Tokens */
html[data-theme="dark"] {
  --bg-deep: #050811 !important;
  --bg-surface: #0a0f1d !important;
  --bg-surface-elevated: #0f172a !important;
  --bg-glass: rgba(13, 20, 37, 0.75) !important;
  --bg-glass-card: rgba(13, 20, 37, 0.70) !important;
  --bg-glass-hover: rgba(22, 33, 62, 0.85) !important;

  --border-subtle: rgba(255, 255, 255, 0.08) !important;
  --border-glass: rgba(255, 255, 255, 0.12) !important;
  --border-highlight: rgba(245, 158, 11, 0.5) !important;

  --gold-primary: #F59E0B !important;
  --gold-glow: rgba(245, 158, 11, 0.35) !important;
  --cyan-primary: #06B6D4 !important;
  --cyan-glow: rgba(6, 182, 212, 0.35) !important;
  --violet-primary: #8B5CF6 !important;
  --violet-glow: rgba(139, 92, 246, 0.35) !important;
  --emerald-primary: #10B981 !important;
  --emerald-glow: rgba(16, 185, 129, 0.35) !important;

  --text-main: #f8fafc !important;
  --text-muted: #94a3b8 !important;
  --text-faint: #64748b !important;
  --text-bright: #ffffff !important;
}

/* 2. Base & Typography */
html[data-theme="dark"] body {
  background-color: #050811 !important;
  color: #f8fafc !important;
  background-image: 
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 90% 20%, rgba(245, 158, 11, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 10% 60%, rgba(99, 102, 241, 0.08) 0%, transparent 40%) !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .brand-name,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .metric-value,
html[data-theme="dark"] .step-title {
  color: #f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .section-desc,
html[data-theme="dark"] .hero-desc,
html[data-theme="dark"] .card-desc,
html[data-theme="dark"] .step-desc,
html[data-theme="dark"] .feature-desc {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .gradient-text-gold {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .gradient-text-elemental {
  background: linear-gradient(135deg, #f59e0b 0%, #06b6d4 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .gradient-text-cyan {
  background: linear-gradient(135deg, #38bdf8 0%, #06b6d4 60%, #0284c7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .section-badge {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] .section-badge a {
  color: #fbbf24 !important;
}

html[data-theme="dark"] .section-badge-gold {
  background: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] .section-badge-cyan {
  background: rgba(6, 182, 212, 0.12) !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
  color: #38bdf8 !important;
}

/* 3. Dark Navbar */
html[data-theme="dark"] .navbar,
html[data-theme="dark"] #main-navbar {
  background: rgba(5, 8, 17, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .nav-link {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] .nav-link:hover {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .brand-name {
  color: #f8fafc !important;
}

html[data-theme="dark"] .brand-elemental {
  color: #f59e0b !important;
}

html[data-theme="dark"] .brand-icon {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(245, 158, 11, 0.2)) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  color: #38bdf8 !important;
}

/* 4. Dark Cards & Panels */
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .tech-stage-card,
html[data-theme="dark"] .material-card,
html[data-theme="dark"] .feedstock-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .difference-card,
html[data-theme="dark"] .bucket-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .element-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .glass-card:hover,
html[data-theme="dark"] .element-card:hover,
html[data-theme="dark"] .material-card:hover {
  border-color: rgba(6, 182, 212, 0.4) !important;
  box-shadow: 0 14px 40px -10px rgba(6, 182, 212, 0.2) !important;
}

html[data-theme="dark"] .element-symbol {
  color: #38bdf8 !important;
}

html[data-theme="dark"] .element-name {
  color: #f8fafc !important;
}

html[data-theme="dark"] .element-category {
  color: #94a3b8 !important;
}

/* 5. Dark Form Inputs */
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea {
  background: rgba(5, 8, 17, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-select:focus,
html[data-theme="dark"] .form-textarea:focus {
  border-color: #06b6d4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2) !important;
}

html[data-theme="dark"] .form-label {
  color: #cbd5e1 !important;
}

/* 6. Dark Active Engagement Channels & Partner Pills */
html[data-theme="dark"] .partner-pill {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #f8fafc !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .partner-pill:hover {
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: rgba(6, 182, 212, 0.5) !important;
  color: #38bdf8 !important;
}

html[data-theme="dark"] .partner-pill svg {
  color: #06b6d4 !important;
}

html[data-theme="dark"] .partner-pill-bullet {
  background: #f59e0b !important;
}

/* 7. Dark Photo Overlays (Seamless blending into dark space background) */
html[data-theme="dark"] .strata-showcase-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .strata-gradient-overlay {
  background: linear-gradient(180deg, rgba(5, 8, 17, 0.88) 0%, rgba(5, 8, 17, 0.12) 30%, rgba(5, 8, 17, 0.90) 100%) !important;
}

html[data-theme="dark"] .strata-badge-top {
  background: rgba(5, 8, 17, 0.85) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] .strata-point {
  background: rgba(13, 20, 37, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .strata-point h4,
html[data-theme="dark"] .strata-point div,
html[data-theme="dark"] .strata-point strong {
  color: #f8fafc !important;
}

html[data-theme="dark"] .strata-point p,
html[data-theme="dark"] .strata-point span {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .chemistry-feature-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .chemistry-overlay {
  background: linear-gradient(90deg, rgba(5, 8, 17, 0) 55%, rgba(5, 8, 17, 0.98) 100%), linear-gradient(180deg, rgba(5, 8, 17, 0.4) 0%, transparent 40%, rgba(5, 8, 17, 0.95) 100%) !important;
}

html[data-theme="dark"] .feedstock-banner-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .feedstock-banner-overlay {
  background: linear-gradient(180deg, rgba(5, 8, 17, 0.35) 0%, rgba(5, 8, 17, 0.70) 35%, rgba(5, 8, 17, 0.96) 85%) !important;
}

html[data-theme="dark"] .feedstock-banner-content h3 {
  color: #f8fafc !important;
}

html[data-theme="dark"] .feedstock-banner-content p {
  color: #94a3b8 !important;
}

html[data-theme="dark"] .feedstock-pill {
  background: rgba(15, 23, 42, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #e2e8f0 !important;
}

html[data-theme="dark"] .sample-image-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .sample-image-overlay {
  background: linear-gradient(180deg, rgba(5, 8, 17, 0) 50%, rgba(5, 8, 17, 0.90) 100%) !important;
}

html[data-theme="dark"] .floating-pill {
  background: rgba(13, 20, 37, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .floating-pill span {
  color: #f8fafc !important;
}

html[data-theme="dark"] .sample-card-details {
  background: rgba(13, 20, 37, 0.90) !important;
}

html[data-theme="dark"] .facility-image-card {
  background: rgba(13, 20, 37, 0.70) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .facility-img-overlay {
  background: linear-gradient(180deg, rgba(5, 8, 17, 0.15) 0%, rgba(5, 8, 17, 0) 40%, rgba(5, 8, 17, 0.90) 100%) !important;
}

html[data-theme="dark"] .facility-badge-top {
  background: rgba(5, 8, 17, 0.85) !important;
  border: 1px solid rgba(245, 158, 11, 0.4) !important;
  color: #fbbf24 !important;
}

html[data-theme="dark"] .facility-badge-bottom {
  background: rgba(5, 8, 17, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #38bdf8 !important;
}

html[data-theme="dark"] .facility-card-body {
  background: rgba(13, 20, 37, 0.90) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .facility-card-body h4,
html[data-theme="dark"] .facility-card-body h3 {
  color: #f8fafc !important;
}

/* 8. Dark Buttons */
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-gold {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
  color: #000000 !important;
  font-weight: 700 !important;
}