/* ==========================================================================
   AMBIENT BACKGROUND DESIGN SYSTEM — CINEMATIC TECH ARCHITECTURE
   Miracle IT Career Academy — Modern, Clean, Premium Background System
   
   Aesthetic Principles:
   1. Subtle yet VISIBLE — high-definition SVG geometric grids, precision dot
      matrices, and architectural hairline accents with calibrated opacities.
   2. Clean & Uncluttered — keeps all text, cards, buttons, and forms 100% readable.
   3. Distinct per Section — diverse treatments (grids, blocks, dots, glows, lines)
      with dedicated breathing room sections.
   4. Cinematic Motion — GPU-accelerated slow ambient drifts and breathing pulses.
   5. Accessible & Responsive — respects prefers-reduced-motion, scales smoothly
      on mobile devices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO SECTION — Subtle Technical Grid + Floating Blocks + Atmospheric Glow
   Section: #hero / .hero-section
   -------------------------------------------------------------------------- */

#hero.hero-section,
.hero-section {
  position: relative;
  background-color: #F8FAFC !important;
  background-image:
    radial-gradient(ellipse 900px 500px at 15% 25%, rgba(255, 122, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 800px 520px at 85% 60%, rgba(14, 165, 233, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  overflow: hidden;
}

/* Enhanced Hero Tech Backdrop */
.hero-tech-backdrop {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Crisp SVG Blueprint Grid with Intersection Crosshairs */
.hero-grid-matrix {
  position: absolute;
  inset: 0;
  background-image:
    /* High-definition 48px SVG tech grid with corner crosshairs */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M 48 0 L 0 0 0 48' fill='none' stroke='rgba(255,255,255,0.065)' stroke-width='1'/%3E%3Cpath d='M 0 0 L 5 0 M 0 0 L 0 5 M 48 0 L 43 0 M 48 0 L 48 5' fill='none' stroke='rgba(56,189,248,0.28)' stroke-width='1'/%3E%3Ccircle cx='0' cy='0' r='1.2' fill='rgba(56,189,248,0.45)'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.4) 65%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.4) 65%, transparent 92%);
  opacity: 0.9;
  pointer-events: none;
}

/* Atmospheric Glow Spotlight with Subtle Pulse */
.hero-atmospheric-glow {
  position: absolute;
  top: 35%;
  left: 50%;
  width: 820px;
  height: 520px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, rgba(255, 122, 0, 0.12) 0%, rgba(6, 182, 212, 0.08) 45%, transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: bgGlowBreathe 18s ease-in-out infinite alternate;
}

@keyframes bgGlowBreathe {
  0% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.06);
  }

  100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.98);
  }
}


/* --------------------------------------------------------------------------
   2. COURSES SECTION — Structured Block Grid + Soft Accent Glows
   Section: #courses / .courses-section
   -------------------------------------------------------------------------- */

#courses.courses-section,
.courses-section {
  position: relative;
  background-color: #07090E !important;
  background-image:
    /* Atmospheric depth blooms behind course navigation and preview card */
    radial-gradient(ellipse 750px 450px at 85% 15%, rgba(6, 182, 212, 0.12) 0%, transparent 65%),
    radial-gradient(ellipse 700px 420px at 12% 88%, rgba(255, 122, 0, 0.11) 0%, transparent 60%),
    /* Accent highlighted block tiles for architectural rhythm */
    radial-gradient(circle at 78% 36%, rgba(6, 182, 212, 0.07) 0%, transparent 26%),
    radial-gradient(circle at 22% 65%, rgba(255, 122, 0, 0.06) 0%, transparent 24%),
    /* Structured modular technical block pattern (64px x 40px) */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='40' viewBox='0 0 64 40'%3E%3Crect width='64' height='40' fill='none' stroke='rgba(255,255,255,0.068)' stroke-width='1'/%3E%3Ccircle cx='64' cy='40' r='1.4' fill='rgba(6,182,212,0.35)'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='rgba(255,122,0,0.30)'/%3E%3C/svg%3E") !important;
  background-size: auto, auto, auto, auto, 64px 40px !important;
  background-position: 0 0, 0 0, 0 0, 0 0, -1px -1px !important;
}

/* Subtle architectural coordinate watermark in top corner */
#courses.courses-section::before,
.courses-section::before {
  content: '';
  position: absolute;
  top: 24px;
  left: clamp(1.5rem, 5vw, 4rem);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(148, 163, 184, 0.28);
  pointer-events: none;
  z-index: 1;
}

/* Fine architectural bottom guide line with center glow accent */
#courses.courses-section::after,
.courses-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 25%, rgba(255, 122, 0, 0.35) 50%, rgba(255, 255, 255, 0.08) 75%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 768px) {

  #courses.courses-section,
  .courses-section {
    background-size: auto, auto, auto, auto, 48px 32px !important;
  }

  #courses.courses-section::before,
  .courses-section::before {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   3. WHY MIRACLE IT — Minimal Dot Pattern + Fine Technical Lines
   Section: #why-miracle-it / .why-section (Light Theme: #F8FAFC)
   -------------------------------------------------------------------------- */

#why-miracle-it.why-section,
.section-light.why-section {
  background-color: #0C1322 !important;
  background-image:
    radial-gradient(ellipse 900px 520px at 50% 55%, rgba(37, 99, 235, 0.08) 20%, transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='1.25' fill='rgba(255,255,255,0.04)'/%3E%3C/svg%3E"),
    linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 100%) !important;
  background-size: 100% 100%, 24px 24px, 140px 100% !important;
  background-position: center, 0 0, 50% 0 !important;
  background-repeat: no-repeat, repeat, repeat !important;
  position: relative;
  color: #F8FAFC !important;
}

/* Architectural technical container layering */
#why-miracle-it.why-section .why-container,
.section-light.why-section .why-container {
  position: relative;
  z-index: 2;
}


/* --------------------------------------------------------------------------
   4. LEARNING EXPERIENCE — Clean Architectural Canvas + Ambient Stage Glow
   Section: #learning-experience / .learning-experience-section (Breathing Room)
   Kept mostly clean for visual breathing room and high contrast.
   -------------------------------------------------------------------------- */

#learning-experience.learning-experience-section,
.learning-experience-section {
  position: relative;
  background-color: #07090E !important;
  background-image:
    /* Focused ambient sapphire/electric glow beneath 3D coverflow carousel */
    radial-gradient(ellipse 920px 520px at 50% 48%, rgba(37, 99, 235, 0.10) 0%, rgba(6, 182, 212, 0.04) 45%, transparent 75%) !important;
}

/* Subtle corner architectural brackets framing the 3D stage */
#learning-experience.learning-experience-section::before,
.learning-experience-section::before {
  content: '';
  position: absolute;
  top: 28px;
  right: clamp(1.5rem, 5vw, 4rem);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(148, 163, 184, 0.28);
  pointer-events: none;
  z-index: 1;
}

#learning-experience.learning-experience-section::after,
.learning-experience-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.25) 50%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 768px) {

  #learning-experience.learning-experience-section::before,
  .learning-experience-section::before {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   5. PROOF / TRUST — Restrained Dot Matrix Pattern
   Section: #proof / .proof-section (Light Theme: #F8FAFC)
   -------------------------------------------------------------------------- */

#proof.proof-section,
.section-light.proof-section {
  background-color: #0E1628 !important;
  background-image:
    radial-gradient(ellipse 1100px 700px at 50% 50%, rgba(255, 122, 0, 0.06) 0%, rgba(37, 99, 235, 0.04) 50%, transparent 75%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='1.15' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 32px 32px !important;
  background-position: center, 0 0 !important;
  background-repeat: no-repeat, repeat !important;
  position: relative;
  color: #F8FAFC !important;
}


/* --------------------------------------------------------------------------
   6. CAREER COUNSELLING PROCESS — Cinematic Journey Glow + Technical Line Rhythm
   Section: #counselling-process / .counselling-process-section
   -------------------------------------------------------------------------- */

#counselling-process.counselling-process-section,
.counselling-process-section {
  position: relative;
  background-color: #07090E !important;
  background-image:
    /* Cyan upper bloom (step 01 discovery) */
    radial-gradient(ellipse 850px 480px at 50% 16%, rgba(6, 182, 212, 0.12) 0%, transparent 70%),
    /* Miracle orange lower bloom (step 05 roadmap & enrollment) */
    radial-gradient(ellipse 800px 440px at 50% 84%, rgba(255, 122, 0, 0.11) 0%, transparent 68%),
    /* Technical vertical rhythm guidelines */
    linear-gradient(to right, rgba(255, 255, 255, 0.042) 1px, transparent 1px) !important;
  background-size: auto, auto, 110px 100% !important;
  background-position: center 0, center 100%, 50% 0 !important;
  overflow: hidden;
}

/* Architectural vertical node connection accents */
#counselling-process.counselling-process-section::before,
.counselling-process-section::before {
  content: '';
  position: absolute;
  top: 26px;
  left: clamp(1.5rem, 5vw, 4rem);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(148, 163, 184, 0.28);
  pointer-events: none;
  z-index: 1;
}

@media (max-width: 768px) {

  #counselling-process.counselling-process-section,
  .counselling-process-section {
    background-size: auto, auto, 60px 100% !important;
  }

  #counselling-process.counselling-process-section::before,
  .counselling-process-section::before {
    display: none;
  }
}


/* --------------------------------------------------------------------------
   7. FINAL CTA & BOOKING — Cinematic Amber Spotlight + Technical Grid
   Section: #final-cta / .final-cta-section
   -------------------------------------------------------------------------- */

#final-cta.final-cta-section,
.final-cta-section {
  position: relative;
  background-color: #FFFFFF !important;
  background:
    radial-gradient(ellipse 820px 440px at 50% 28%, rgba(255, 122, 0, 0.08) 0%, transparent 65%),
    linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%) !important;
}

/* Laser-line accent beam at the top border of the Final CTA */
#final-cta.final-cta-section::before,
.final-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 122, 0, 0.2) 20%, rgba(255, 122, 0, 0.6) 50%, rgba(255, 122, 0, 0.2) 80%, transparent 100%);
  pointer-events: none;
}

@media (max-width: 768px) {

  #final-cta.final-cta-section,
  .final-cta-section {
    background-size: auto, auto, 36px 36px, 100% 100% !important;
  }
}


/* --------------------------------------------------------------------------
   8. LOCATION SECTION — Deep Slate Atmosphere + Clean Blueprint Accents
   Section: #location / .location-section
   -------------------------------------------------------------------------- */

#location.location-section,
.location-section {
  position: relative;
  background-color: #080E18 !important;
  background-image:
    /* Deep slate radial atmosphere */
    radial-gradient(ellipse 900px 520px at 50% 18%, rgba(15, 23, 42, 0.95) 0%, #080E18 75%),
    /* Micro tech dot grid */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'%3E%3Ccircle cx='18' cy='18' r='1' fill='rgba(255,255,255,0.035)'/%3E%3C/svg%3E") !important;
  background-size: 100% 100%, 36px 36px !important;
  background-position: center top, 0 0 !important;
  color: #F8FAFC;
}


/* --------------------------------------------------------------------------
   9. VISUAL BREATHING ROOM SECTIONS
   The following sections intentionally retain their clean styling for balance:
   - #problem (.problem-section)
   - #who-can-join (.who-join-section)
   - #faq (.faq-section)
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   9. ACCESSIBILITY & PERFORMANCE
   Disable motion for users with prefers-reduced-motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero-tech-backdrop::before,
  .hero-tech-backdrop::after,
  .hero-atmospheric-glow {
    animation: none !important;
  }
}