/* ==========================================================================
   MNI Corp — Section Background Architecture & Visual Hierarchy System
   Transforms monolithic page flow into distinct, beautifully separated 
   technical modules with bespoke lighting, grids, and glowing divider beams.
   ========================================================================== */

/* -------------------------------------------------------------
   Global Section Transition Architecture
   ------------------------------------------------------------- */
.section,
.hero-section {
  position: relative !important;
  overflow: hidden;
  z-index: 1;
}

/* Glowing horizontal laser divider beam on top of each main section */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 9999px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.9;
}

/* -------------------------------------------------------------
   1. Hero Section: Cosmic Obsidian with MNI Crimson Auroras
   ------------------------------------------------------------- */
#hero.hero-section {
  background-color: #07080B !important;
  background-image: 
    radial-gradient(ellipse 85% 60% at 50% -10%, rgba(236, 33, 39, 0.18) 0%, transparent 70%),
    radial-gradient(circle at 85% 35%, rgba(6, 182, 212, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 15% 70%, rgba(245, 158, 11, 0.05) 0%, transparent 45%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* -------------------------------------------------------------
   2. Technology Section: High-Tech Chemical Flowsheet Blueprint
   Cyan Micro-Grid & Multi-Phase Partitioning Ambience
   ------------------------------------------------------------- */
#technology {
  background-color: #050B14 !important;
  background-image: 
    radial-gradient(ellipse 75% 50% at 50% 12%, rgba(6, 182, 212, 0.16) 0%, transparent 70%),
    radial-gradient(circle at 8% 85%, rgba(16, 185, 129, 0.09) 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%, 42px 42px, 42px 42px !important;
  border-top: 1px solid rgba(6, 182, 212, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#technology::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.7) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   3. Matrix Section: Noble Metals & Mineral Bullion Vault
   Warm Elemental Amber & Platinum Radial Glow
   ------------------------------------------------------------- */
#matrix {
  background: 
    radial-gradient(ellipse 75% 55% at 50% 15%, rgba(245, 158, 11, 0.12) 0%, transparent 65%),
    radial-gradient(circle at 85% 75%, rgba(236, 33, 39, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0C0B12 0%, #130E1B 50%, #09080E 100%) !important;
  border-top: 1px solid rgba(245, 158, 11, 0.25) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#matrix::before {
  background: linear-gradient(90deg, transparent 0%, rgba(245, 158, 11, 0.65) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   4. Licensing Section: MNI Executive Crimson Spotlight
   Commercial Partnership Models & Technology Transfer
   ------------------------------------------------------------- */
#licensing {
  background: 
    radial-gradient(ellipse 80% 60% at 50% 12%, rgba(236, 33, 39, 0.18) 0%, transparent 65%),
    radial-gradient(circle at 10% 85%, rgba(99, 102, 241, 0.09) 0%, transparent 50%),
    linear-gradient(180deg, #0D080C 0%, #1A0B11 50%, #0B0709 100%) !important;
  border-top: 1px solid rgba(236, 33, 39, 0.35) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 24px 48px -20px rgba(236, 33, 39, 0.15),
    inset 0 -24px 48px -20px rgba(236, 33, 39, 0.10) !important;
}

#licensing::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 56, 63, 0.85) 50%, transparent 100%) !important;
}


/* -------------------------------------------------------------
   4b. Licensee Spotlight: Rax Elemental Commercial Showcase
   Technical Deep Graphite Obsidian with Cyan/Gold Energy Spotlight
   ------------------------------------------------------------- */
#licensee {
  background-color: #060912 !important;
  background-image: 
    radial-gradient(ellipse 75% 50% at 75% 25%, rgba(6, 182, 212, 0.14) 0%, transparent 65%),
    radial-gradient(circle at 20% 80%, rgba(245, 158, 11, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #0B0709 0%, #090E1A 50%, #080E1A 100%) !important;
  border-top: 1px solid rgba(6, 182, 212, 0.28) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

#licensee::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.75) 50%, transparent 100%) !important;
}

.licensee-box {
  background: linear-gradient(135deg, rgba(14, 20, 32, 0.88), rgba(8, 11, 18, 0.95)) !important;
  border: 1px solid rgba(6, 182, 212, 0.25) !important;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.65), 0 0 40px -15px rgba(6, 182, 212, 0.15) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* -------------------------------------------------------------
   5. Contact Section: Radiant Technical Intake Chamber
   High-Focus Conversion Centerpiece with Guiding Auroras
   ------------------------------------------------------------- */
#contact {
  background: 
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(6, 182, 212, 0.16) 0%, transparent 65%),
    radial-gradient(circle at 85% 50%, rgba(236, 33, 39, 0.10) 0%, transparent 55%),
    radial-gradient(circle at 15% 70%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
    linear-gradient(180deg, #080E1A 0%, #05080E 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;
}

#contact::before {
  background: linear-gradient(90deg, transparent 0%, rgba(6, 182, 212, 0.8) 50%, transparent 100%) !important;
}

/* -------------------------------------------------------------
   6. Site Footer: Grounding Solid Charcoal Black
   ------------------------------------------------------------- */
.site-footer {
  background: #040507 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  position: relative;
  z-index: 2;
}

/* -------------------------------------------------------------
   Card Glassmorphism Refinement
   Enhances glass card depth on top of new distinct backgrounds
   ------------------------------------------------------------- */
.stage-card,
.comparison-wrap,
.comp-col,
.model-card,
.element-card,
.contact-section-wrap,
.contact-direct-box,
.hero-card-display,
.direct-email-card,
.operational-card {
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
}

/* Enhance comparison block contrast within technology section */
.comparison-wrap {
  background: rgba(8, 14, 25, 0.75) !important;
  border: 1px solid rgba(6, 182, 212, 0.22) !important;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.5) !important;
}

/* Enhance contact form wrap within contact section */
.contact-section-wrap {
  background: rgba(12, 17, 28, 0.78) !important;
  border: 1px solid rgba(6, 182, 212, 0.25) !important;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.6) !important;
}

/* Enhance model cards within licensing section */
.model-card {
  background: rgba(16, 14, 20, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
}

.model-card.featured {
  background: rgba(26, 14, 18, 0.82) !important;
  border: 1px solid rgba(236, 33, 39, 0.45) !important;
  box-shadow: 0 20px 40px -12px rgba(236, 33, 39, 0.25) !important;
}

/* Enhance element cards within matrix section */
.element-card {
  background: rgba(18, 16, 26, 0.68) !important;
}