/* ==========================================================================
   NOVUS EDTECH - PREMIUM 3D ROBOTICS & STEM EDUCATION DESIGN SYSTEM
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR TOKENS & DESIGN VARIABLES
   -------------------------------------------------------------------------- */
:root {
  /* Color System */
  --bg-pure-white: #ffffff;
  --bg-warm-white: #fafcff;
  --bg-canvas: #f4f7fb;
  --bg-subtle-gradient: radial-gradient(circle at 72% 38%, rgba(0, 210, 255, 0.07) 0%, rgba(0, 120, 255, 0.03) 45%, transparent 75%);
  
  /* Text & Neutral Colors */
  --text-primary: #0d1117;
  --text-secondary: #57606a;
  --text-tertiary: #8c959f;
  --text-dark: #161b22;

  /* Accent Palette */
  --accent-cyan: #00f0ff;
  --accent-cyan-rgb: 0, 240, 255;
  --accent-sky-blue: #0088ff;
  --accent-deep-blue: #0a2540;
  --accent-gradient: linear-gradient(135deg, #0088ff 0%, #00f0ff 100%);
  --accent-glow: rgba(0, 240, 255, 0.25);

  /* Glassmorphism System */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.82);
  --glass-blur: blur(16px);
  --glass-border: 1px solid rgba(255, 255, 255, 0.85);
  --glass-border-cyan: 1px solid rgba(0, 240, 255, 0.4);
  --glass-shadow: 0 16px 36px rgba(10, 37, 64, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.95);

  /* Technical Indicators */
  --tech-grid-color: rgba(0, 136, 255, 0.04);
  --tech-line-color: rgba(0, 240, 255, 0.2);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Typography Fonts */
  --font-headline: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', 'JetBrains Mono', monospace;

  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spatial: 0.8s cubic-bezier(0.25, 1, 0.3, 1);

  --nav-height: 72px;
}

/* --------------------------------------------------------------------------
   2. BASE & TYPOGRAPHY STYLES
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  scroll-behavior: auto;
}

body {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--bg-warm-white);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Global Background Atmosphere */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--bg-subtle-gradient);
  pointer-events: none;
  z-index: 0;
}

/* Blueprint Grid Layer */
.bg-blueprint-grid {
  position: absolute;
  inset: 0;
  background-size: 60px 60px;
  background-image: 
    linear-gradient(to right, var(--tech-grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tech-grid-color) 1px, transparent 1px);
  pointer-events: none;
  opacity: 0.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-sky-blue);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
}

/* --------------------------------------------------------------------------
   3. NAVIGATION BAR (MINIMAL FROSTED GLASS)
   -------------------------------------------------------------------------- */
.navbar-novus {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  padding: 1.1rem 2.5rem;
  transition: background-color 0.4s ease, padding 0.4s ease, backdrop-filter 0.4s ease, border-bottom 0.4s ease;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(10, 37, 64, 0.04);
}

.navbar-novus.scrolled {
  padding: 0.85rem 2.5rem;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.08);
}

#main-navbar .container-fluid {
  display: flex;
  align-items: center;
}

#main-navbar .navbar-nav {
  align-items: center;
}

.navbar-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--text-primary);
  letter-spacing: -0.03em;
}

.navbar-brand-logo img {
  height: 40px;
  width: auto;
  display: block;
}

.footer-novus .navbar-brand-logo img {
  height: 48px;
}

.brand-icon-box {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--accent-deep-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.15);
}

.brand-icon-box::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(0, 240, 255, 0.4) 100%);
}

.brand-icon-box svg {
  width: 20px;
  height: 20px;
  color: var(--accent-cyan);
  z-index: 1;
}

.nav-link-novus {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-link-novus:hover,
.nav-link-novus.active {
  color: var(--accent-deep-blue);
  background: rgba(0, 136, 255, 0.06);
}

button.nav-link-novus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: auto;
  min-height: 38px;
  padding: 6px 14px;
  line-height: 1.2;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.nav-company-caret {
  font-size: 0.65rem;
  transition: transform 0.2s ease;
}

.nav-company.is-open .nav-company-caret {
  transform: rotate(180deg);
}

.nav-company-panel {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-company-link {
  display: block;
  padding: 0.55rem 0.9rem;
  font-family: var(--font-headline);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.nav-company-link:hover,
.nav-company-link.active {
  color: var(--accent-deep-blue);
  background: rgba(0, 136, 255, 0.08);
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 17, 30, 0.35);
  z-index: 1040;
}

body.nav-open {
  overflow: hidden;
}

body.nav-open .novus-fab-container {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  #navContent.navbar-collapse {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    width: 100%;
    max-height: calc(100dvh - var(--nav-height));
    overflow-y: auto;
    z-index: 1040;
    margin: 0;
    padding: 0.75rem 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 18px 40px rgba(10, 37, 64, 0.12);
    align-items: stretch;
  }

  #navContent.navbar-collapse.show,
  #navContent.navbar-collapse.collapsing {
    display: flex !important;
    flex-direction: column;
  }

  #navContent .navbar-nav {
    margin: 0;
    width: 100%;
    gap: 0.15rem;
    align-items: stretch;
    text-align: left;
  }

  #navContent .nav-link-novus,
  #navContent button.nav-link-novus {
    display: flex;
    width: 100%;
    padding: 0.85rem 0.35rem;
    font-size: 1.05rem;
    justify-content: flex-start;
    text-align: left;
  }

  .nav-company-panel {
    display: none;
    padding: 0 0 0.5rem 0.75rem;
    text-align: left;
  }

  .nav-company.is-open .nav-company-panel {
    display: block !important;
  }

  .nav-drawer-extras {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 153, 214, 0.15);
    text-align: left;
  }

  .nav-utils {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(11, 153, 214, 0.15);
    justify-content: flex-start;
  }

  .novus-fab-container {
    right: 14px;
    bottom: 14px;
    transform: scale(0.9);
    transform-origin: bottom right;
  }
}

@media (min-width: 992px) {
  #main-navbar .navbar-collapse {
    align-items: center;
  }

  #main-navbar .nav-utils {
    align-items: center;
    height: 38px;
  }

  .nav-link-novus {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    line-height: 1.2;
  }

  .nav-company {
    position: relative;
  }

  .nav-company-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(11, 153, 214, 0.18);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(10, 37, 64, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    z-index: 1060;
  }

  .nav-company:hover .nav-company-panel,
  .nav-company.is-open .nav-company-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   4. BUTTONS & UI CONTROLS
   -------------------------------------------------------------------------- */
.btn-novus-primary {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.9375rem;
  color: #ffffff;
  background: var(--accent-deep-blue);
  border: 1px solid var(--accent-deep-blue);
  padding: 0.85rem 1.85rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(10, 37, 64, 0.18);
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-novus-primary:hover {
  background: #06192d;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 136, 255, 0.25);
}

.btn-novus-primary .btn-arrow {
  transition: transform var(--transition-fast);
}

.btn-novus-primary:hover .btn-arrow {
  transform: translateX(4px);
}

.btn-novus-outline {
  font-family: var(--font-headline);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 136, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-novus-outline:hover {
  background: #ffffff;
  color: var(--accent-sky-blue);
  border-color: var(--accent-sky-blue);
  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.1);
}

/* --------------------------------------------------------------------------
   5. HERO SECTION & 3D SPATIAL SLIDER COMPOSITION (PINNED SCROLL)
   -------------------------------------------------------------------------- */
.hero-pin-container {
  position: relative;
  width: 100%;
  overflow: visible;
}

.hero-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 8px;
  background: transparent;
}

.hero-container {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 3rem;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
}

/* 3D Spatial Presentation Stage */
.hero-3d-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* Unified Slide Composition (Left Text + Right 3D Visual physically bound together) */
.hero-slide-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: perspective(1400px) rotateY(22deg) translateZ(-160px) translateX(10%) scale(0.95);
}

.hero-slide-scene.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: perspective(1400px) rotateY(0deg) translateZ(0px) translateX(0%) scale(1);
}

/* Left Content Column (approx 44%) */
.hero-left-content {
  flex: 0 0 44%;
  max-width: 44%;
  z-index: 20;
  padding-right: 2rem;
  position: relative;
  transform-style: preserve-3d;
}

.hero-heading {
  font-size: clamp(2.85rem, 4.8vw, 5.25rem);
  line-height: 1.06;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  letter-spacing: -0.035em;
}

.hero-description {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 2.25rem;
  max-width: 500px;
  font-weight: 400;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Right Spatial 3D Area (approx 56%) */
.hero-right-spatial {
  flex: 0 0 56%;
  max-width: 56%;
  height: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.hero-spatial-model-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

/* Master Spatial Wrappers with Mouse Parallax & Hover Response */
.spatial-robot-arm-wrap,
.spatial-ai-core-wrap,
.spatial-rover-wrap {
  position: relative;
  width: 440px;
  height: 500px;
  transform-style: preserve-3d;
  transform: 
    perspective(1200px)
    rotateX(var(--spatial-tilt-x, 0deg))
    rotateY(var(--spatial-tilt-y, 0deg))
    translate3d(var(--spatial-shift-x, 0px), var(--spatial-shift-y, 0px), 0)
    scale(var(--spatial-scale, 1));
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Floating Levitation Glow & Contact Shadow */
.spatial-shadow-glow {
  position: absolute;
  bottom: 35px;
  left: 50%;
  transform: translateX(-50%) rotateX(75deg);
  width: 320px;
  height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.35) 0%, rgba(10, 37, 64, 0.22) 42%, transparent 75%);
  filter: blur(10px);
  pointer-events: none;
  animation: shadowPulse 5s ease-in-out infinite alternate;
}

@keyframes shadowPulse {
  0% { transform: translateX(-50%) rotateX(75deg) scale(0.92); opacity: 0.7; }
  100% { transform: translateX(-50%) rotateX(75deg) scale(1.08); opacity: 1; }
}

/* ==========================================================================
   MODEL 1: 3D BIONIC ARTICULATED ROBOTIC ARM
   ========================================================================== */
.spatial-robot-arm-wrap {
  animation: armIdleFloat 7s ease-in-out infinite;
}

@keyframes armIdleFloat {
  0%, 100% { transform: translateY(0px) rotateY(0deg); }
  50% { transform: translateY(-14px) rotateY(3deg); }
}

/* Anti-Gravity Floating Levitation Pedestal */
.arm-pedestal {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%) translateZ(10px);
  width: 190px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(180deg, #2a394c 0%, #101a26 100%);
  box-shadow: 0 12px 28px rgba(10, 37, 64, 0.45), inset 0 2px 5px rgba(255, 255, 255, 0.4);
}

.arm-pedestal-ring-outer {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 2px solid rgba(0, 240, 255, 0.85);
  box-shadow: 0 0 26px rgba(0, 240, 255, 0.65), inset 0 0 18px rgba(0, 240, 255, 0.45);
  transform: rotateX(65deg);
  animation: ringPulse 4s linear infinite;
}

@keyframes ringPulse {
  0%, 100% { transform: rotateX(65deg) scale(1); opacity: 0.85; }
  50% { transform: rotateX(65deg) scale(1.04); opacity: 1; }
}

.arm-pedestal-core {
  position: absolute;
  inset: 12px 24px;
  border-radius: 50%;
  background: radial-gradient(circle, #00f0ff 0%, #0088ff 45%, #101c2b 85%);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.8);
}

.arm-pedestal-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.5);
  animation: spinSlow 20s linear infinite;
}

@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* Rotating Turret Base Collar */
.arm-turret {
  position: absolute;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%) translateZ(20px);
  width: 120px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(90deg, #6c8091 0%, #ffffff 35%, #9cb2c4 70%, #172433 100%);
  box-shadow: 0 8px 18px rgba(10, 37, 64, 0.35), inset 0 -4px 8px rgba(10, 37, 64, 0.4);
}

.arm-led-collar {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #00f0ff;
  box-shadow: 0 0 16px #00f0ff;
  transform: rotateX(65deg);
}

/* Lower Arm Segment */
.arm-segment-lower {
  position: absolute;
  bottom: 104px;
  left: calc(50% - 18px);
  width: 36px;
  height: 165px;
  transform-origin: 50% 100%;
  transform: rotate(-22deg) translateZ(30px);
  border-radius: 18px;
  background: linear-gradient(90deg, #3f5263 0%, #ffffff 32%, #a4bccd 70%, #13202e 100%);
  box-shadow: 12px 14px 26px rgba(10, 37, 64, 0.28), inset -3px 0 6px rgba(10, 37, 64, 0.35);
}

.arm-piston-rod {
  position: absolute;
  left: 8px;
  top: 22px;
  width: 8px;
  height: 110px;
  border-radius: 4px;
  background: linear-gradient(90deg, #cde0ed 0%, #ffffff 50%, #687e8e 100%);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
}

.arm-segment-sheath {
  position: absolute;
  top: 35px;
  left: 3px;
  right: 3px;
  height: 50px;
  border-radius: 6px;
  background: #0f1c2b;
  border: 1px solid rgba(0, 240, 255, 0.4);
}

/* Articulated Joints */
.arm-joint {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #6d8699 45%, #101e2e 80%);
  box-shadow: 0 0 0 4px rgba(0, 240, 255, 0.85), 0 0 24px rgba(0, 240, 255, 0.65), 0 10px 18px rgba(10, 37, 64, 0.35);
}

.arm-joint-core {
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 12px #00f0ff;
}

.arm-joint-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.7);
  animation: spinSlow 12s linear infinite;
}

.arm-joint-shoulder {
  bottom: 88px;
  left: calc(50% - 25px);
  width: 50px;
  height: 50px;
  transform: translateZ(28px);
}

.arm-joint-elbow {
  bottom: 236px;
  left: calc(50% + 26px);
  width: 58px;
  height: 58px;
  transform: translateZ(48px);
}

.arm-joint-wrist {
  bottom: 356px;
  left: calc(50% - 35px);
  width: 44px;
  height: 44px;
  transform: translateZ(58px);
}

/* Upper Arm Segment */
.arm-segment-upper {
  position: absolute;
  bottom: 250px;
  left: calc(50% + 40px);
  width: 30px;
  height: 150px;
  transform-origin: 50% 100%;
  transform: rotate(40deg) translateZ(42px);
  border-radius: 15px;
  background: linear-gradient(90deg, #324454 0%, #f6faff 30%, #9cb3c4 70%, #0f1a26 100%);
  box-shadow: 10px 12px 22px rgba(10, 37, 64, 0.24);
}

.arm-accent-stripe {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 6px;
  background: #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
}

/* Bionic Precision End-Effector Gripper */
.arm-gripper-assembly {
  position: absolute;
  bottom: 382px;
  left: calc(50% - 56px);
  width: 74px;
  height: 46px;
  transform: rotate(-22deg) translateZ(66px);
}

.gripper-wrist-mount {
  position: absolute;
  top: 0;
  left: 12px;
  width: 50px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ffffff 0%, #768f9f 50%, #152538 100%);
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.3);
}

.gripper-claw {
  position: absolute;
  width: 12px;
  height: 38px;
  border-radius: 4px;
  background: linear-gradient(90deg, #152538, #3b5063 50%, #0d1824);
  border-top: 3px solid #00f0ff;
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.35);
}

.gripper-claw-left {
  top: 16px;
  left: 10px;
  transform: rotate(-14deg);
}

.gripper-claw-right {
  top: 16px;
  right: 10px;
  transform: rotate(14deg);
}

.gripper-laser-emitter {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 14px 4px #00f0ff;
}

.laser-ray {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 70px;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.9) 0%, rgba(0, 240, 255, 0.3) 60%, transparent 100%);
  box-shadow: 0 0 8px #00f0ff;
}

/* ==========================================================================
   MODEL 2: 3D FLOATING NEURAL QUANTUM AI CORE
   ========================================================================== */
.spatial-ai-core-wrap {
  animation: coreIdleFloat 6.5s ease-in-out infinite;
}

@keyframes coreIdleFloat {
  0%, 100% { transform: translateY(0px) rotateY(0deg) rotateX(0deg); }
  50% { transform: translateY(-16px) rotateY(5deg) rotateX(-3deg); }
}

.ai-quantum-core {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(40px);
  width: 130px;
  height: 130px;
  border-radius: 32px;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #00f0ff 30%, #0077ff 65%, #051a33 100%);
  box-shadow: 0 0 50px rgba(0, 240, 255, 0.9), 0 0 100px rgba(0, 136, 255, 0.4), inset -10px -10px 24px rgba(4, 21, 44, 0.8);
  animation: corePulse 4s ease-in-out infinite alternate;
}

@keyframes corePulse {
  0% { transform: translate(-50%, -50%) translateZ(40px) scale(0.96); box-shadow: 0 0 40px rgba(0, 240, 255, 0.7); }
  100% { transform: translate(-50%, -50%) translateZ(40px) scale(1.04); box-shadow: 0 0 65px rgba(0, 240, 255, 1); }
}

.ai-core-inner-glow {
  position: absolute;
  inset: 15px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: radial-gradient(circle, #ffffff 0%, rgba(0, 240, 255, 0.6) 50%, transparent 80%);
}

.ai-core-facet {
  position: absolute;
  inset: 0;
  border-radius: 32px;
  border: 2px solid rgba(0, 240, 255, 0.7);
}

.ai-core-facet-a { transform: rotate(45deg); }
.ai-core-facet-b { transform: rotate(-45deg); }

.ai-core-wireframe {
  position: absolute;
  inset: -12px;
  border-radius: 40px;
  border: 1px dashed rgba(0, 240, 255, 0.6);
  animation: spinSlow 14s linear infinite;
}

/* Concentric Gimbal Rings */
.ai-gimbal-ring {
  position: absolute;
  top: 48%;
  left: 50%;
  transform-style: preserve-3d;
  border-radius: 50%;
  pointer-events: none;
}

.ai-gimbal-ring-1 {
  width: 290px;
  height: 290px;
  margin-top: -145px;
  margin-left: -145px;
  border: 3px solid rgba(10, 37, 64, 0.85);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.4);
  transform: rotateX(68deg) rotateY(18deg);
  animation: gimbal1 16s linear infinite;
}

.ai-gimbal-ring-2 {
  width: 240px;
  height: 240px;
  margin-top: -120px;
  margin-left: -120px;
  border: 3px solid #00f0ff;
  box-shadow: 0 0 24px #00f0ff;
  transform: rotateY(65deg) rotateZ(22deg);
  animation: gimbal2 12s linear infinite reverse;
}

.ai-gimbal-ring-3 {
  width: 190px;
  height: 190px;
  margin-top: -95px;
  margin-left: -95px;
  border: 2px solid rgba(0, 136, 255, 0.8);
  box-shadow: 0 0 18px rgba(0, 136, 255, 0.6);
  transform: rotateX(45deg) rotateZ(-35deg);
  animation: gimbal3 9s linear infinite;
}

@keyframes gimbal1 {
  to { transform: rotateX(68deg) rotateY(18deg) rotateZ(360deg); }
}
@keyframes gimbal2 {
  to { transform: rotateY(65deg) rotateZ(22deg) rotateX(360deg); }
}
@keyframes gimbal3 {
  to { transform: rotateX(45deg) rotateZ(-35deg) rotateY(360deg); }
}

/* Orbiting Data Nodes */
.ai-orbit-cluster {
  position: absolute;
  top: 48%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}

.ai-orbit-node {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 14px 4px #00f0ff;
}

.ai-orbit-node.node-1 { animation: orbitNode1 8s linear infinite; }
.ai-orbit-node.node-2 { animation: orbitNode2 10s linear infinite; }
.ai-orbit-node.node-3 { animation: orbitNode3 7s linear infinite; }
.ai-orbit-node.node-4 { animation: orbitNode4 9s linear infinite; }
.ai-orbit-node.node-5 { animation: orbitNode5 11s linear infinite; }
.ai-orbit-node.node-6 { animation: orbitNode6 6s linear infinite; }

@keyframes orbitNode1 {
  0% { transform: rotateY(0deg) translateZ(160px); }
  100% { transform: rotateY(360deg) translateZ(160px); }
}
@keyframes orbitNode2 {
  0% { transform: rotateX(45deg) rotateY(0deg) translateZ(145px); }
  100% { transform: rotateX(45deg) rotateY(360deg) translateZ(145px); }
}
@keyframes orbitNode3 {
  0% { transform: rotateZ(35deg) rotateY(0deg) translateZ(175px); }
  100% { transform: rotateZ(35deg) rotateY(-360deg) translateZ(175px); }
}
@keyframes orbitNode4 {
  0% { transform: rotateX(70deg) rotateZ(20deg) rotateY(0deg) translateZ(155px); }
  100% { transform: rotateX(70deg) rotateZ(20deg) rotateY(360deg) translateZ(155px); }
}
@keyframes orbitNode5 {
  0% { transform: rotateY(60deg) rotateX(0deg) translateZ(135px); }
  100% { transform: rotateY(60deg) rotateX(360deg) translateZ(135px); }
}
@keyframes orbitNode6 {
  0% { transform: rotateZ(-45deg) rotateY(0deg) translateZ(165px); }
  100% { transform: rotateZ(-45deg) rotateY(360deg) translateZ(165px); }
}

/* ==========================================================================
   MODEL 3: 3D FLOATING AUTONOMOUS STEM ROVER
   ========================================================================== */
.spatial-rover-wrap {
  animation: roverIdleFloat 7.5s ease-in-out infinite;
}

@keyframes roverIdleFloat {
  0%, 100% { transform: translateY(0px) rotateX(22deg) rotateY(-16deg); }
  50% { transform: translateY(-15px) rotateX(20deg) rotateY(-12deg); }
}

/* Rover Chassis */
.rover-chassis {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(30px);
  width: 250px;
  height: 105px;
  border-radius: 20px 26px 14px 14px;
  background: linear-gradient(145deg, #ffffff 0%, #9cb2c4 48%, #142436 100%);
  box-shadow: inset -10px -10px 18px rgba(10, 37, 64, 0.35), 14px 18px 28px rgba(10, 37, 64, 0.25);
}

.rover-hull-top {
  position: absolute;
  top: 10px;
  left: 25px;
  right: 25px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #d8e5ef 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(10, 37, 64, 0.2);
}

.rover-sensor-bar {
  position: absolute;
  bottom: 12px;
  left: 20px;
  right: 20px;
  height: 12px;
  border-radius: 6px;
  background: #0a1828;
  border: 1px solid #00f0ff;
  box-shadow: 0 0 16px #00f0ff;
  overflow: hidden;
}

.sensor-sweep-beam {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 35px;
  background: linear-gradient(90deg, transparent, #00f0ff, #ffffff, #00f0ff, transparent);
  box-shadow: 0 0 12px #00f0ff;
  animation: sensorSweep 2.5s ease-in-out infinite alternate;
}

@keyframes sensorSweep {
  0% { left: -10px; }
  100% { left: calc(100% - 25px); }
}

/* 360 LiDAR Turret Scanner */
.rover-lidar-assembly {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(50px);
}

.rover-lidar-base {
  width: 52px;
  height: 22px;
  border-radius: 50%;
  background: #142232;
  box-shadow: 0 4px 10px rgba(10, 37, 64, 0.4);
}

.rover-lidar-turret {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 30px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #101c2b 0%, #1f3347 100%);
  border: 1px solid rgba(0, 240, 255, 0.7);
  box-shadow: 0 0 16px rgba(0, 240, 255, 0.6);
  animation: lidarSpin 3s linear infinite;
}

@keyframes lidarSpin {
  to { transform: translateX(-50%) rotateY(360deg); }
}

.lidar-optic-lens {
  position: absolute;
  top: 6px;
  right: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 12px 3px #00f0ff;
}

.lidar-beam-pulse {
  position: absolute;
  top: 10px;
  right: -55px;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #00f0ff, transparent);
  box-shadow: 0 0 8px #00f0ff;
}

/* 4 Wheels */
.rover-wheel-unit {
  position: absolute;
  width: 44px;
  height: 70px;
  border-radius: 16px;
  background: radial-gradient(circle at 40% 40%, #526779 0%, #172433 60%, #0c1520 100%);
  border: 3px solid rgba(0, 240, 255, 0.7);
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.5), 0 10px 18px rgba(10, 37, 64, 0.4);
}

.rover-wheel-unit::after {
  content: '';
  position: absolute;
  inset: 18px 8px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 12px #00f0ff;
}

.rover-wheel-fl { top: 38%; left: 60px; transform: translateZ(10px); }
.rover-wheel-fr { top: 38%; right: 60px; transform: translateZ(10px); }
.rover-wheel-rl { bottom: 25%; left: 75px; transform: translateZ(-20px); }
.rover-wheel-rr { bottom: 25%; right: 75px; transform: translateZ(-20px); }

/* ==========================================================================
   FLOATING MICRO TELEMETRY & COORDINATE LABELS
   ========================================================================== */
.spatial-micro-ring {
  position: absolute;
  border: 1px dashed rgba(0, 240, 255, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: spinSlow 18s linear infinite;
}

.ring-arm-1 { top: 18%; right: 18%; width: 90px; height: 90px; }
.ring-arm-2 { bottom: 24%; left: 12%; width: 70px; height: 70px; animation-direction: reverse; }
.ring-core-1 { top: 12%; left: 20%; width: 110px; height: 110px; }
.ring-rover-1 { top: 15%; right: 25%; width: 95px; height: 95px; }

.spatial-coord-pin {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent-cyan);
  background: rgba(10, 37, 64, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 4px;
  padding: 3px 8px;
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.2);
  pointer-events: none;
  animation: pinFloat 4s ease-in-out infinite alternate;
}

.pin-arm-1 { top: 14%; right: 20%; }
.pin-arm-2 { bottom: 28%; left: 8%; animation-delay: 1.5s; }
.pin-core-1 { top: 15%; left: 14%; }
.pin-core-2 { bottom: 22%; right: 14%; animation-delay: 1.8s; }
.pin-rover-1 { top: 16%; right: 18%; }
.pin-rover-2 { bottom: 22%; left: 16%; animation-delay: 1.2s; }

@keyframes pinFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-6px); }
}

/* --------------------------------------------------------------------------
   6. FLOATING GLASSMORPHISM TECHNICAL BADGES (PARALLAX LAYER 3)
   -------------------------------------------------------------------------- */
.floating-glass-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.glass-badge {
  position: absolute;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
  animation: floatMotion 6s ease-in-out infinite alternate;
}

.glass-badge:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(0, 240, 255, 0.6);
  transform: translateY(-4px) scale(1.02);
}

.glass-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  animation: pulseDot 2s infinite;
}

.glass-badge-text {
  display: flex;
  flex-direction: column;
}

.glass-badge-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
}

.glass-badge-val {
  font-family: var(--font-headline);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent-deep-blue);
}

/* Badge Positioning around 3D viewport */
.badge-pos-1 { top: 22%; left: 8%; animation-delay: 0s; }
.badge-pos-2 { top: 68%; left: 4%; animation-delay: 1.5s; }
.badge-pos-3 { top: 30%; right: 4%; animation-delay: 3s; }
.badge-pos-4 { bottom: 18%; right: 12%; animation-delay: 4.5s; }

/* Micro Technical Details & Coordinates */
.tech-coordinate-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  color: rgba(0, 136, 255, 0.4);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
}

.tech-coord-top-right { top: 12%; right: 5%; }
.tech-coord-bottom-left { bottom: 12%; left: 5%; }

/* --------------------------------------------------------------------------
   7. MINIMAL SLIDER INDICATORS & CONTROLS
   -------------------------------------------------------------------------- */
.hero-slider-footer {
  position: absolute;
  bottom: 2.5rem;
  left: 3rem;
  right: 3rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.slider-indicator-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  pointer-events: auto;
}

.slider-counter {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.slider-counter .current-num {
  color: var(--accent-sky-blue);
  font-size: 1.125rem;
}

.slider-progress-bars {
  display: flex;
  align-items: center;
  gap: 8px;
}

.progress-bar-item {
  width: 40px;
  height: 3px;
  background: rgba(0, 136, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.progress-bar-item.active {
  width: 70px;
  background: rgba(0, 136, 255, 0.3);
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  transition: width 0.1s linear;
}

.slider-nav-arrows {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.btn-slider-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 136, 255, 0.15);
  backdrop-filter: blur(8px);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-slider-arrow:hover {
  background: #ffffff;
  border-color: var(--accent-sky-blue);
  color: var(--accent-sky-blue);
  box-shadow: 0 6px 16px rgba(0, 136, 255, 0.15);
  transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   8. SUPPLEMENTAL STEM SECTIONS (ECOSYSTEM, LAB CONFIG, STATS, DEV TOOLS)
   -------------------------------------------------------------------------- */
.section-padding {
  padding: 7rem 0;
  position: relative;
  z-index: 10;
}

.section-title-box {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 4rem auto;
}

.section-heading {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.section-subtext {
  font-size: 1.0625rem;
  color: var(--text-secondary);
}

/* Interactive Card & Glass Elements */
.novus-card {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.05);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.novus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(0, 136, 255, 0.12);
  border-color: rgba(0, 240, 255, 0.5);
}

.card-icon-wrapper {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(0, 136, 255, 0.08);
  color: var(--accent-sky-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

/* Stats Counter Row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 136, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 3rem;
  box-shadow: 0 16px 40px rgba(10, 37, 64, 0.04);
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-family: var(--font-headline);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--accent-deep-blue);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-sub {
  font-size: 0.8125rem;
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   9. ANIMATIONS & KEYFRAMES
   -------------------------------------------------------------------------- */
@keyframes floatMotion {
  0% { transform: translateY(0px) rotate(0deg); }
  100% { transform: translateY(-12px) rotate(0.8deg); }
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .hero-heading { font-size: 3.5rem; }
  .hero-left-content { flex: 0 0 50%; max-width: 50%; }
  .hero-right-spatial { flex: 0 0 50%; max-width: 50%; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

@media (max-width: 992px) {
  .hero-wrapper {
    height: auto;
    min-height: 100svh;
    padding-top: 24px;
    padding-bottom: 70px;
    overflow: visible;
  }
  .hero-container,
  .hero-3d-stage {
    height: auto;
  }
  .hero-container {
    padding: 0 1.5rem;
  }
  .hero-slide-scene {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 0.5rem;
  }
  .hero-slide-scene.active {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .hero-left-content {
    flex: 0 0 auto;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 1rem;
    text-align: center;
  }
  .hero-heading {
    font-size: clamp(2rem, 5vw, 2.75rem);
    margin-bottom: 0.75rem;
  }
  .hero-description {
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-right-spatial {
    flex: 0 0 auto;
    max-width: 100%;
    height: 220px;
  }
  .spatial-robot-arm-wrap,
  .spatial-ai-core-wrap,
  .spatial-rover-wrap {
    width: 320px;
    height: 220px;
    transform: 
      perspective(1200px)
      scale(0.68) !important;
  }
  .hero-slider-footer {
    padding: 0 1.5rem;
    bottom: 20px;
  }
}

@media (max-width: 576px) {
  .hero-heading { font-size: clamp(1.75rem, 7vw, 2.15rem); }
  .navbar-novus { padding: 0.75rem 1rem; }
  .navbar-brand-logo img {
    height: auto;
    max-height: 36px;
    max-width: min(200px, 58vw);
  }
  .badge-pos-1, .badge-pos-2, .badge-pos-3, .badge-pos-4 {
    scale: 0.85;
  }
  .stats-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   12. INTERACTIVE 3D SPATIAL EVENTS STAGE STYLES
   -------------------------------------------------------------------------- */
.events-hero-wrapper {
  position: relative;
  width: 100%;
  min-height: 85vh;
  padding-top: 58px;
  padding-bottom: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  perspective: 1200px;
}

.events-hero-container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  position: relative;
  z-index: 10;
}

.events-hero-left {
  flex: 0 0 42%;
  max-width: 42%;
  z-index: 20;
}

.events-hero-right {
  flex: 0 0 55%;
  max-width: 55%;
  position: relative;
  z-index: 15;
  perspective: 1200px;
}

/* 3D Stage Container & Multi-Layer Depth */
.events-3d-stage {
  position: relative;
  width: 100%;
  height: 500px;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.events-layer-bg,
.events-layer-mid,
.events-layer-main {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: transform 0.15s ease-out;
}

.events-3d-glow-light {
  position: absolute;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.28) 0%, rgba(0, 136, 255, 0.1) 40%, transparent 70%);
  top: 15%;
  left: 25%;
  filter: blur(45px);
  pointer-events: none;
}

/* Midground Technical Rings */
.tech-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ring-outer {
  width: 450px;
  height: 450px;
  top: 25px;
  left: 45px;
  border: 1px dashed rgba(0, 240, 255, 0.25);
  animation: spinRing 35s linear infinite;
}

.ring-inner {
  width: 330px;
  height: 330px;
  top: 85px;
  left: 105px;
  border: 1px solid rgba(0, 136, 255, 0.18);
  animation: spinRingReverse 22s linear infinite;
}

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

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

/* 3D Visual Slide & Carousel Transformations */
.events-3d-visual-slide {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform 0.85s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.85s cubic-bezier(0.25, 1, 0.3, 1), visibility 0.85s;
}

.events-3d-visual-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: perspective(1200px) rotateY(0deg) scale(1) translate3d(0, 0, 0);
}

.events-3d-visual-slide.slide-exit-left {
  opacity: 0;
  visibility: hidden;
  transform: perspective(1200px) rotateY(-65deg) scale(0.9) translate3d(-120px, 0, -150px);
}

.events-3d-visual-slide.slide-exit-right {
  opacity: 0;
  visibility: hidden;
  transform: perspective(1200px) rotateY(65deg) scale(0.9) translate3d(120px, 0, -150px);
}

.events-3d-visual-slide.slide-enter-left {
  opacity: 0;
  transform: perspective(1200px) rotateY(-65deg) scale(0.9) translate3d(-120px, 0, -150px);
}

.events-3d-visual-slide.slide-enter-right {
  opacity: 0;
  transform: perspective(1200px) rotateY(65deg) scale(0.9) translate3d(120px, 0, -150px);
}

.events-main-visual-card {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-lg);
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

/* Floating Glass Tags on 3D Stage */
.glass-tag-top-right {
  top: 24px;
  right: 24px;
}

.glass-tag-bottom-left {
  bottom: 24px;
  left: 24px;
}

.events-glass-tag {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-md);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 14px 32px rgba(10, 37, 64, 0.15);
  pointer-events: auto;
  transition: transform 0.15s ease-out, background 0.3s ease;
  z-index: 30;
}

.events-glass-tag:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--accent-cyan);
}

/* 3D Card Hover Tilt Controller for Upcoming Events */
.novus-event-card[data-tilt="true"] {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
}

.novus-event-card[data-tilt="true"] .event-card-img-wrapper {
  transform-style: preserve-3d;
  overflow: hidden;
}

.novus-event-card[data-tilt="true"] .event-card-img {
  transition: transform 0.2s ease-out;
}


/* Footer Controls */
.events-slider-footer {
  width: 100%;
  max-width: 1440px;
  margin: 1.5rem auto 0 auto;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.events-progress-bar {
  width: 45px;
  height: 4px;
  background: rgba(0, 136, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition: width 0.3s ease;
}

.events-progress-bar.active {
  width: 75px;
}

.events-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-gradient);
  transition: width 0.1s linear;
}

.events-progress-bar.active .events-progress-fill {
  width: 100%;
  transition: width 6s linear;
}

/* Upcoming Events Cards */
.novus-event-card {
  background: #ffffff;
  border: 1px solid rgba(0, 136, 255, 0.12);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(10, 37, 64, 0.04);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
}

.novus-event-card.featured-card {
  border: 1.5px solid rgba(0, 240, 255, 0.6);
  box-shadow: 0 16px 40px rgba(0, 136, 255, 0.08);
}

.novus-event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(0, 136, 255, 0.14);
  border-color: var(--accent-cyan);
}

.event-card-img-wrapper {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
}

.event-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.novus-event-card:hover .event-card-img {
  transform: scale(1.04);
}

.event-card-category-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(8px);
  color: var(--accent-cyan);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
}

.event-card-featured-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent-gradient);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
}

.event-card-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.event-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.event-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex: 1;
}

.event-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 136, 255, 0.08);
}

.event-card-link {
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--accent-deep-blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.2s ease;
}

.event-card-link .card-arrow {
  transition: transform 0.2s ease;
}

.novus-event-card:hover .event-card-link {
  color: var(--accent-sky-blue);
}

.novus-event-card:hover .card-arrow {
  transform: translateX(4px);
}

/* Event Detail Page Styles */
.event-detail-hero {
  padding-top: 58px;
  padding-bottom: 70px;
  background: radial-gradient(circle at 80% 20%, rgba(0, 240, 255, 0.08) 0%, transparent 60%);
}

.event-detail-title {
  font-size: clamp(2.8rem, 4.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.08;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

.event-detail-tagline {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-sky-blue);
  margin-bottom: 1rem;
}

.event-detail-desc {
  font-size: 1.1rem;
  color: var(--text-secondary);
  line-height: 1.65;
  max-w: 640px;
}

.detail-hero-visual-frame {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(10, 37, 64, 0.12), 0 0 0 1px rgba(0, 240, 255, 0.2);
}

.detail-hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero-glass-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 240, 255, 0.3);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}

/* Compact Glass Metadata Bar */
.event-glass-bar {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 136, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  box-shadow: 0 16px 36px rgba(10, 37, 64, 0.05);
}

.glass-bar-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.glass-bar-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(0, 136, 255, 0.08);
  color: var(--accent-sky-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.glass-bar-label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.08em;
  display: block;
}

.glass-bar-val {
  font-family: var(--font-headline);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  display: block;
}

/* Agenda Vertical Timeline */
.agenda-timeline-container {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.agenda-timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 140px;
  width: 2px;
  background: linear-gradient(to bottom, var(--accent-cyan) 0%, rgba(0, 136, 255, 0.2) 100%);
}

.agenda-timeline-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-bottom: 2rem;
}

.agenda-time-badge {
  width: 120px;
  text-align: right;
  padding-right: 25px;
  padding-top: 18px;
  flex-shrink: 0;
}

.agenda-node {
  position: absolute;
  left: 134px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg-warm-white);
  border: 3px solid var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan);
  z-index: 5;
}

.agenda-content-card {
  margin-left: 45px;
  flex: 1;
}

/* Speakers */
.speaker-avatar {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent-cyan);
  box-shadow: 0 8px 20px rgba(0, 136, 255, 0.15);
  flex-shrink: 0;
}

/* Venue Image */
.venue-image-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.venue-img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.venue-image-badge {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: rgba(13, 17, 23, 0.85);
  backdrop-filter: blur(12px);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(0, 240, 255, 0.3);
}

/* FAQ Accordion */
.faq-accordion-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid rgba(0, 136, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-item:hover,
.faq-item.active {
  border-color: var(--accent-cyan);
  box-shadow: 0 8px 24px rgba(0, 136, 255, 0.08);
}

.faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-toggle-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 136, 255, 0.06);
  color: var(--accent-sky-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 992px) {
  .events-hero-container {
    flex-direction: column;
    padding: 0 1.5rem;
  }
  .events-hero-left, .events-hero-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .events-slide-text-container {
    min-height: auto;
    margin-bottom: 2rem;
  }
  .events-visual-slider-stage {
    height: 350px;
  }
  .event-glass-bar {
    grid-template-columns: repeat(2, 1fr);
    padding: 1.5rem;
  }
  .agenda-timeline-container::before {
    left: 20px;
  }
  .agenda-time-badge {
    width: auto;
    text-align: left;
    padding-right: 0;
    padding-top: 0;
    margin-bottom: 0.5rem;
  }
  .agenda-node {
    left: 14px;
    top: 6px;
  }
  .agenda-timeline-item {
    flex-direction: column;
    padding-left: 45px;
  }
  .agenda-content-card {
    margin-left: 0;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   13. ROBOTIC WATCH SERPENTINE TIMELINE STYLES (RESTORED & ENHANCED)
   -------------------------------------------------------------------------- */
.agenda-pin-wrapper {
  position: relative;
  width: 100%;
}

.serpentine-agenda-section {
  position: relative;
  width: 100%;
  padding: 5rem 0;
  background: var(--bg-canvas);
  overflow: visible;
}

.serpentine-stage-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 980px;
  margin: 0 auto;
  overflow: visible;
}

.serpentine-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  display: block; /* MEASURABLE BY BROWSER & GSAP WITHOUT VISIBLE LINES */
}

/* Primary 3D Robotic Watch Navigation Device (140px Diameter) */
.robotic-watch-device {
  position: absolute;
  top: 0;
  left: 0;
  width: 140px;
  height: 140px;
  z-index: 9999; /* HIGHEST ELEVATION: ALWAYS ABOVE ALL CARDS & BACKGROUNDS */
  pointer-events: none;
  overflow: visible;
  will-change: transform;
}

.robotic-watch-glow {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.85) 0%, rgba(0, 136, 255, 0.3) 50%, transparent 75%);
  filter: blur(14px);
  animation: pulseWatchGlow 2.2s infinite alternate;
}

@keyframes pulseWatchGlow {
  0% { opacity: 0.75; transform: scale(0.94); }
  100% { opacity: 1; transform: scale(1.14); }
}

.robotic-watch-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}

.robotic-watch-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 24px rgba(0, 240, 255, 0.9)) drop-shadow(0 16px 32px rgba(10, 37, 64, 0.25));
}

/* Schedule Card Wrappers & Positions */
.serpentine-card-wrapper {
  position: absolute;
  width: 420px;
  z-index: 20;
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  filter: blur(8px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s;
  pointer-events: none;
}

.serpentine-card-wrapper.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

/* Card Row Positioning aligned cleanly next to waypoints */
.pos-row-1 { top: 0px; left: 450px; }
.pos-row-2 { top: 180px; left: 120px; }
.pos-row-3 { top: 380px; left: 450px; }
.pos-row-4 { top: 580px; left: 120px; }
.pos-row-5 { top: 780px; left: 450px; }

@media (max-width: 992px) {
  .serpentine-stage-container {
    height: 1100px;
  }
  .robotic-watch-device {
    width: 110px;
    height: 110px;
  }
  .serpentine-card-wrapper {
    width: 320px;
  }
  .pos-row-1 { top: 0px; left: 340px; }
  .pos-row-2 { top: 200px; left: 60px; }
  .pos-row-3 { top: 410px; left: 340px; }
  .pos-row-4 { top: 620px; left: 60px; }
  .pos-row-5 { top: 830px; left: 340px; }
}

@media (max-width: 576px) {
  .serpentine-stage-container {
    height: auto;
  }
  .robotic-watch-device {
    width: 85px;
    height: 85px;
  }
  .serpentine-card-wrapper {
    position: relative;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    margin-bottom: 2rem;
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* ==========================================================================
   AUTHENTIC NOVUS EDTECH SECTIONS (novusedtech.com)
   ========================================================================== */

/* 1. Campus Pillar Cards */
.campus-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.campus-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(11, 153, 214, 0.1);
  border-color: rgba(11, 153, 214, 0.4);
}
.campus-icon-box {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(11, 153, 214, 0.08);
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  transition: background var(--transition-base), color var(--transition-base);
}
.campus-card:hover .campus-icon-box {
  background: var(--accent-cyan);
  color: #fff;
}
.hover-cyan:hover {
  color: var(--accent-cyan) !important;
}

/* 2. Running Ticker Marquee */
.novus-ticker-wrapper {
  background: #090e17;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  padding: 18px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.novus-ticker-content {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: tickerScroll 35s linear infinite;
}
.ticker-dot {
  color: var(--accent-cyan);
  font-size: 1.2rem;
}
@keyframes tickerScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 3. About Us Tabs */
.novus-about-tabs {
  gap: 8px;
  border-bottom: none;
}
.novus-about-tabs .nav-link {
  background: #fff;
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  padding: 8px 22px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.85rem;
  transition: all var(--transition-base);
}
.novus-about-tabs .nav-link.active,
.novus-about-tabs .nav-link:hover {
  background: var(--accent-cyan);
  color: #fff;
  border-color: var(--accent-cyan);
  box-shadow: 0 4px 12px rgba(11, 153, 214, 0.25);
}
.about-hero-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
.about-card-glow {
  position: absolute;
  top: -20%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(11, 153, 214, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.bg-white-10 {
  background: rgba(255, 255, 255, 0.06);
}
.border-white-15 {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* 4. Stat Growth Cards */
.stat-grow-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat-grow-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}
.stat-grow-icon i {
  width: 32px;
  height: 32px;
}

/* 5. Package Cards */
.package-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.package-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(11, 153, 214, 0.12);
  border-color: rgba(11, 153, 214, 0.4) !important;
}

/* 6. Testimonial Cards */
.testimonial-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.07);
}

/* 7. Solutions Cards */
.solution-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.solution-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 32px rgba(11, 153, 214, 0.1);
  border-color: rgba(11, 153, 214, 0.4) !important;
}

/* 8. Partner Badges */
.partner-badge-card {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  min-height: 75px;
}
.partner-badge-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* 9. Floating Quick Contact Action Button (FAB) */
.footer-newsletter-form {
  flex-wrap: wrap;
}

@media (max-width: 576px) {
  .footer-newsletter-form {
    flex-direction: column;
    align-items: stretch;
  }
}

.novus-fab-container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  transition: opacity 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
}
.fab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  text-decoration: none;
  font-family: var(--font-headline);
  font-weight: 700;
}
.fab-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.fab-whatsapp {
  width: 48px;
  height: 48px;
  background: #25d366;
  color: #fff;
  font-size: 1.4rem;
}
.fab-whatsapp:hover {
  color: #fff;
}
.fab-call {
  width: 48px;
  height: 48px;
  background: var(--accent-cyan);
  color: #fff;
  font-size: 1.15rem;
}
.fab-call:hover {
  color: #fff;
}
.fab-quote-btn {
  background: #090e17;
  color: #fff;
  padding: 8px 18px;
  font-size: 0.8rem;
  border: 1px solid var(--accent-cyan);
}
.fab-quote-btn:hover {
  background: var(--accent-cyan);
  color: #fff;
}

/* 10. Social Icon Buttons */
.social-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f5f9;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all var(--transition-base);
}
.social-icon-btn:hover {
  background: var(--accent-cyan);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   14. 3D SPATIAL & WEBGL CANVAS STYLES
   ========================================================================== */
.perspective-container {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.preserve-3d {
  transform-style: preserve-3d;
}

/* 3D WebGL Canvas Containers */
.canvas-3d-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
}

.canvas-3d-container {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(11, 153, 214, 0.08) 0%, rgba(9, 14, 23, 0.6) 100%);
  border: 1px solid rgba(11, 153, 214, 0.2);
  box-shadow: 0 20px 40px -15px rgba(2, 6, 23, 0.35);
}

.canvas-3d-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
  cursor: grab;
}

.canvas-3d-container canvas:active {
  cursor: grabbing;
}

/* Specific Height Rules */
#about-3d-robot-canvas {
  height: 480px;
}

#lab-simulator-3d-canvas {
  height: 440px;
  background: #090e17;
  border-radius: var(--radius-lg);
}

#ai-robotics-3d-canvas {
  height: 480px;
  background: radial-gradient(circle at 50% 50%, rgba(11, 153, 214, 0.1) 0%, rgba(9, 14, 23, 0.8) 100%);
}

#tab-solutions-3d-canvas {
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(2, 132, 199, 0.12) 0%, rgba(9, 14, 23, 0.85) 100%);
}

#publications-3d-canvas {
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(245, 158, 11, 0.08) 0%, rgba(9, 14, 23, 0.85) 100%);
}

#lab-setup-3d-canvas {
  height: 500px;
  background: #090e17;
}

#contact-3d-globe-canvas {
  height: 460px;
  background: radial-gradient(circle at 50% 50%, rgba(11, 153, 214, 0.15) 0%, rgba(9, 14, 23, 0.9) 100%);
}

/* Floating 3D Badge Indicator */
.badge-3d-spatial {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: rgba(9, 14, 23, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(11, 153, 214, 0.35);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent-cyan);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.badge-3d-spatial .pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--accent-cyan);
  animation: pulseLight 2s infinite;
}

/* 3D Specular Tilt Glare */
.tilt-glare-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

@keyframes pulseLight {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

/* ==========================================================================
   AMBIENT CANVAS
   ========================================================================== */
#novus-ambient-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* ==========================================================================
   PAGE ENTRY ANIMATION SYSTEM
   ========================================================================== */
#main-content {
  padding-top: var(--nav-height);
}

.py-6 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (min-width: 992px) {
  .py-lg-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

.page-spatial-root {
  position: relative;
  z-index: 10;
}

.page-entering-wrap {
  opacity: 1;
}

main.page-entering .page-entering-wrap > section:first-child {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(4px);
}

main.page-entered .page-entering-wrap > section:first-child {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.9s ease;
}

/* ==========================================================================
   NAVIGATION — Featured Tab Solutions link
   ========================================================================== */
.nav-link-featured {
  position: relative;
}

.nav-link-featured::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--accent-gradient);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.nav-link-featured:hover::after,
.nav-link-featured.active::after {
  transform: scaleX(1);
}

/* ==========================================================================
   DEPTH PARALLAX (via CSS custom props set by mouse engine)
   ========================================================================== */
.depth-fg {
  transform: translate3d(
    calc(var(--mx, 0) * var(--fx, 8) * 1px),
    calc(var(--my, 0) * var(--fy, 5) * 1px),
    0
  );
  transition: transform 0.05s linear;
  will-change: transform;
}

.depth-mid {
  transform: translate3d(
    calc(var(--mx, 0) * var(--fx, 5) * 1px),
    calc(var(--my, 0) * var(--fy, 3) * 1px),
    0
  );
  transition: transform 0.08s linear;
  will-change: transform;
}

.depth-bg {
  transform: translate3d(
    calc(var(--mx, 0) * var(--fx, 2) * 1px),
    calc(var(--my, 0) * var(--fy, 1.5) * 1px),
    0
  );
  transition: transform 0.12s linear;
  will-change: transform;
}

/* Scroll reveal base state */
[data-reveal] {
  opacity: 0;
}

/* ==========================================================================
   TAB SOLUTIONS — PINNED 5-STAGE JOURNEY
   ========================================================================== */
.tab-hero-intro {
  padding: 6rem 0 4rem;
  background: var(--bg-warm-white);
}

.tab-hero-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.tab-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 136, 255, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 136, 255, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.tab-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.tab-bg-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 136, 255, 0.12) 0%, transparent 70%);
  top: -100px;
  right: -100px;
}

.tab-bg-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.08) 0%, transparent 70%);
  bottom: 0;
  left: 10%;
}

.tab-hero-heading {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* ---- Floating device preview ---- */
.tab-hero-device-wrap {
  position: relative;
  width: 380px;
  height: 420px;
  animation: tabDeviceFloat 7s ease-in-out infinite;
}

@keyframes tabDeviceFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.tab-hero-device {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #1a2a3a, #0d1a28);
  border-radius: 24px;
  box-shadow:
    0 40px 80px rgba(10, 37, 64, 0.35),
    0 0 0 1px rgba(0, 240, 255, 0.15),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  padding: 12px;
}

.tab-device-screen {
  width: 100%;
  height: 100%;
  background: #0f1923;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tab-screen-topbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #131f2b;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.tab-screen-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: block;
}

.tab-screen-address {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.3);
}

.tab-screen-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.tab-screen-sidebar {
  width: 40px;
  background: #0a1520;
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
}

.tab-sidebar-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
}

.tab-sidebar-icon.active {
  background: rgba(0, 240, 255, 0.2);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
}

.tab-screen-content {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tab-content-row {
  height: 8px;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
}

.tab-content-row.short { width: 60%; }

.tab-content-cards {
  display: flex;
  gap: 8px;
}

.tab-content-card {
  flex: 1;
  height: 50px;
  border-radius: 8px;
}

.tab-content-card.cyan { background: rgba(0, 240, 255, 0.15); border: 1px solid rgba(0, 240, 255, 0.2); }
.tab-content-card.blue { background: rgba(0, 136, 255, 0.12); border: 1px solid rgba(0, 136, 255, 0.18); }

.tab-content-chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  flex: 1;
  padding-top: 4px;
}

.tab-chart-bar {
  flex: 1;
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.6) 0%, rgba(0, 136, 255, 0.3) 100%);
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}

/* ---- Floating badges ---- */
.tab-hero-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(0, 136, 255, 0.15);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.1);
  white-space: nowrap;
}

.badge-shield {
  top: -20px;
  right: -30px;
  animation: badgeFloat1 6s ease-in-out infinite;
}

.badge-live {
  bottom: 60px;
  left: -40px;
  animation: badgeFloat2 7s ease-in-out infinite;
}

.badge-connected {
  bottom: -10px;
  right: 20px;
  animation: badgeFloat1 5.5s ease-in-out infinite 1s;
}

@keyframes badgeFloat1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes badgeFloat2 {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(6px); }
}

/* ==========================================================================
   TAB SOLUTIONS — REDESIGNED INTERACTIVE SPATIAL STORYTELLING SYSTEM
   ========================================================================== */
.tab-solutions-root {
  position: relative;
  z-index: 2;
}

/* 1. Hero Stage */
.tab-hero-stage {
  padding: 58px 0 80px 0;
  position: relative;
  z-index: 2;
}

.tab-hero-massive-title {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #0b1a2d;
  margin-bottom: 1.5rem;
}

.tab-hero-lead-text {
  font-size: 1.18rem;
  line-height: 1.8;
  color: #475569;
  max-width: 620px;
}

.tab-hero-tagstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1.75rem 0 2.25rem 0;
}

/* Hero Fleet Overview Console (Light Theme Premium Card) */
.tab-hero-console {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 24px;
  padding: 2.25rem;
  box-shadow: 0 20px 50px rgba(11, 153, 214, 0.08), 0 4px 16px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.tab-hero-console .console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 1.5rem;
}

.tab-hero-console .console-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.console-stat-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 6px #10b981;
  animation: pulseDot 2s infinite;
}

.tab-console-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.tab-console-tile {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  transition: all 0.3s ease;
}

.tab-console-tile:hover {
  background: #ffffff;
  border-color: rgba(11, 153, 214, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 153, 214, 0.06);
}

.tab-console-tile .tile-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  color: #0b99d6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tab-console-tile .tile-val {
  font-family: var(--font-headline);
  font-weight: 800;
  font-size: 1.05rem;
  color: #0b1a2d;
}

.tab-console-tile .tile-sub {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 2px;
}

/* 2. Five-Stage Storytelling Showcase */
.tab-showcase-stage {
  padding: 80px 0 120px 0;
  position: relative;
  z-index: 2;
}

.tab-showcase-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 4.5rem;
  position: relative;
}

/* Left Narrative Track (Normal Document Flow - NO Stacking!) */
.tab-narrative-track {
  display: flex;
  flex-direction: column;
}

.tab-stage-node {
  padding: 80px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  position: relative;
}

.tab-stage-node:first-child {
  border-top: none;
  padding-top: 20px;
}

.stage-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0b99d6;
  margin-bottom: 1rem;
}

.stage-node-title {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  color: #0b1a2d;
  letter-spacing: -0.025em;
  margin-bottom: 1.25rem;
}

.stage-node-desc {
  font-size: 1.125rem;
  line-height: 1.85;
  color: #475569;
  max-width: 620px;
  margin-bottom: 1.75rem;
}

.stage-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stage-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #334155;
  font-weight: 500;
}

.stage-feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(11, 153, 214, 0.12);
  color: #0b99d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.stage-metric-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn-stage-detail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-weight: 700;
  font-size: 0.875rem;
  color: #0b99d6;
  background: rgba(11, 153, 214, 0.08);
  border: 1px solid rgba(11, 153, 214, 0.25);
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-stage-detail:hover {
  background: #0b99d6;
  color: #ffffff;
  border-color: #0b99d6;
  transform: translateX(4px);
  box-shadow: 0 4px 14px rgba(11, 153, 214, 0.28);
}

/* Single Closing CTA at end of narrative track */
.tab-track-cta {
  padding-top: 40px;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  margin-top: 20px;
}

/* Right Sticky Column & Viewport */
.tab-sticky-column {
  position: relative;
  height: 100%;
}

.tab-sticky-viewport {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

/* Integrated Stage Rail (Above device) */
.tab-stage-rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 8px 16px;
  border-radius: 9999px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(11, 153, 214, 0.05);
}

.tab-stage-rail-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 700;
  color: #0b99d6;
  letter-spacing: 0.05em;
}

.tab-stage-rail-dots {
  display: flex;
  gap: 6px;
  align-items: center;
}

.stage-rail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s ease;
}

.stage-rail-dot.is-active {
  width: 20px;
  border-radius: 4px;
  background: #00f0ff;
  box-shadow: 0 0 8px #00f0ff;
}

.tab-stage-rail-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Refined Tablet Mockup */
.tab-tablet-device {
  width: 340px;
  height: 480px;
  background: #ffffff;
  border: 10px solid #0f172a;
  border-radius: 26px;
  box-shadow: 
    0 24px 60px rgba(11, 153, 214, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(0, 240, 255, 0.2);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-tablet-camera-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #334155;
  border: 1px solid rgba(0, 240, 255, 0.4);
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
}

.tab-tablet-screen {
  flex: 1;
  position: relative;
  background: #f8fafc;
  border-radius: 16px;
  overflow: hidden;
}

/* Layered Screen States */
.tablet-screen-view {
  position: absolute;
  inset: 0;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.96);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: #f8fafc;
}

.tablet-screen-view.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* Tablet Screen Components */
.ts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 12px;
}

.ts-header-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  color: #0b99d6;
}

.ts-header-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
}

.ts-device-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.ts-device-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ts-device-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0b1a2d;
}

.ts-device-meta {
  font-size: 0.7rem;
  color: #64748b;
  font-family: 'JetBrains Mono', monospace;
}

.ts-toggle-active {
  width: 28px;
  height: 16px;
  background: #00f0ff;
  border-radius: 9999px;
  position: relative;
}

.ts-toggle-active::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
}

/* Orbit Telemetry Rings around tablet */
.tab-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(11, 153, 214, 0.25);
  pointer-events: none;
  z-index: -1;
  animation: orbitSpin 35s linear infinite;
}

.tab-orbit-ring.ring-lg {
  width: 500px;
  height: 500px;
}

.tab-orbit-ring.ring-md {
  width: 420px;
  height: 420px;
  border-style: solid;
  border-color: rgba(0, 240, 255, 0.15);
  animation-duration: 25s;
  animation-direction: reverse;
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

/* Telemetry Badge at Tablet Base */
.tab-tablet-telemetry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 340px;
  margin-top: 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #64748b;
}

/* Responsive Overrides for Tab Solutions */
@media (max-width: 992px) {
  .tab-showcase-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .tab-sticky-column {
    order: -1;
    height: auto;
  }

  .tab-sticky-viewport {
    position: static;
    margin-bottom: 2.5rem;
  }

  .tab-tablet-device {
    width: 300px;
    height: 430px;
  }

  .tab-stage-node {
    padding: 50px 0;
  }
}

@media (max-width: 768px) {
  .tab-hero-stage {
    padding: 100px 0 50px 0;
  }

  .tab-tablet-device {
    width: 270px;
    height: 390px;
  }

  .tab-stage-rail {
    max-width: 290px;
  }
}

/* ==========================================================================
   TAB SOLUTIONS — PROGRAMME DETAIL PAGE SYSTEM
   ========================================================================== */
.tab-detail-root {
  position: relative;
  z-index: 2;
}

.tab-detail-hero {
  padding: 58px 0 60px 0;
  position: relative;
  z-index: 2;
  background: radial-gradient(circle at 85% 15%, rgba(11, 153, 214, 0.05) 0%, transparent 60%);
}

.tab-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

.tab-detail-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tab-detail-breadcrumb a:hover {
  color: #0b99d6;
}

.tab-detail-breadcrumb .bc-sep {
  color: #cbd5e1;
}

.tab-detail-breadcrumb .bc-current {
  color: #0b1a2d;
  font-weight: 600;
}

.tab-detail-title {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #0b1a2d;
  margin-bottom: 1.25rem;
}

.tab-detail-lead {
  font-size: 1.15rem;
  line-height: 1.8;
  color: #475569;
  max-width: 660px;
  margin-bottom: 1.75rem;
}

.tab-detail-hero-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 16px 40px rgba(11, 153, 214, 0.06);
}

.tab-detail-pills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 1.25rem;
}

.tab-detail-tag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #1e293b;
}

.tab-detail-tag-item .tag-icon {
  width: 15px;
  height: 15px;
  color: #0b99d6;
  flex-shrink: 0;
}

.tab-detail-spotlight-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 18px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
}

.tab-detail-spotlight-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 153, 214, 0.4);
  box-shadow: 0 12px 30px rgba(11, 153, 214, 0.08);
}

.tab-detail-spotlight-card .spotlight-num {
  font-size: 0.85rem;
  font-weight: 800;
  color: #0b99d6;
  margin-bottom: 0.75rem;
}

.tab-detail-feature-console {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.95);
  border-radius: 20px;
}

.tab-detail-step-card {
  transition: all 0.3s ease;
}

.tab-detail-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(11, 153, 214, 0.08);
}

.tab-detail-feature-box {
  transition: all 0.3s ease;
}

.tab-detail-feature-box:hover {
  background: #ffffff;
  border-color: rgba(11, 153, 214, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(11, 153, 214, 0.06);
}

.feature-icon-wrap {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(11, 153, 214, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-related-card {
  transition: all 0.3s ease;
}

.tab-related-card:hover {
  background: #ffffff;
  border-color: rgba(11, 153, 214, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(11, 153, 214, 0.06);
}

.orb-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(0, 136, 255, 0.1) 0%, transparent 70%);
  top: -200px;
  right: -100px;
  animation: orbDrift 18s ease-in-out infinite alternate;
}

.orb-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.07) 0%, transparent 70%);
  bottom: -150px;
  left: -50px;
  animation: orbDrift 22s ease-in-out infinite alternate-reverse;
}

@keyframes orbDrift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(40px, 30px); }
}

/* CTA Banner */
.tab-cta-banner {
  background: var(--accent-deep-blue);
  position: relative;
  overflow: hidden;
}

.tab-cta-glow {
  position: absolute;
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.15) 0%, transparent 70%);
  top: -100px;
  left: -100px;
  pointer-events: none;
}

/* ==========================================================================
   PUBLICATIONS — SPATIAL LIBRARY
   ========================================================================== */
.pub-hero {
  padding: 6rem 0 3rem;
  background: var(--bg-warm-white);
}

.pub-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.pub-hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 136, 255, 0.07) 0%, transparent 70%);
}

.pub-hero-particles {
  position: absolute;
  inset: 0;
}

.pub-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 240, 255, 0.25);
  animation: pubParticleFloat 8s ease-in-out infinite alternate;
}

@keyframes pubParticleFloat {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  100% { transform: translateY(-30px) scale(1.3); opacity: 0.2; }
}

.pub-hero-heading {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.pub-library-section {
  padding: 6rem 0;
  background: var(--bg-canvas);
  position: relative;
  z-index: 10;
}

.pub-shelf-perspective {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 1rem 0 3rem;
}

.pub-panel {
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0;
}

.pub-panel-inner {
  display: flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(10, 37, 64, 0.12),
    0 0 0 1px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}

.pub-panel-inner:hover {
  box-shadow:
    0 40px 100px rgba(10, 37, 64, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translateY(-4px) scale(1.005);
}

.pub-panel-spine {
  width: 48px;
  flex-shrink: 0;
  background: var(--panel-gradient, linear-gradient(135deg, #0a2540, #0088ff));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  position: relative;
}

.pub-spine-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

.pub-spine-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
}

.pub-panel-front {
  flex: 1;
  padding: 2.5rem;
  position: relative;
  background: #ffffff;
}

.pub-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.pub-panel-num {
  font-size: 2rem;
  font-weight: 700;
  color: var(--panel-color, var(--accent-sky-blue));
  line-height: 1;
}

.pub-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(0, 136, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--panel-color, var(--accent-sky-blue));
}

.pub-icon-wrap svg {
  width: 22px;
  height: 22px;
}

.pub-panel-title {
  font-family: var(--font-headline);
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.pub-series-badge {
  display: inline-block;
  font-size: 0.75rem;
  color: var(--panel-color, var(--accent-sky-blue));
  margin-bottom: 1rem;
  letter-spacing: 0.08em;
}

.pub-panel-desc {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 1.5rem;
  max-width: 520px;
}

.pub-topics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.75rem;
}

.pub-topic-chip {
  background: rgba(0, 136, 255, 0.06);
  border: 1px solid rgba(0, 136, 255, 0.12);
  color: var(--accent-sky-blue);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-headline);
}

.pub-panel-footer {
  border-top: 1px solid rgba(0,0,0,0.05);
  padding-top: 1.5rem;
}

.pub-panel-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--panel-color, rgba(0, 136, 255, 0.08)) 0%, transparent 70%);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.pub-panel-inner:hover .pub-panel-glow {
  opacity: 0.3;
}

/* ==========================================================================
   LAB SETUP — EXPLODED ASSEMBLY
   ========================================================================== */
.lab-hero {
  padding: 6rem 0 4rem;
  background: var(--bg-warm-white);
}

.lab-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.lab-hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0, 240, 255, 0.06) 0%, transparent 70%);
}

.lab-bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(0, 136, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 136, 255, 0.03) 1px, transparent 1px);
  background-size: 80px 80px;
}

.lab-hero-heading {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

/* Stats panel */
.lab-stats-panel {
  background: var(--accent-deep-blue);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(10, 37, 64, 0.3);
}

.lab-stats-glow {
  position: absolute;
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(0, 240, 255, 0.1) 0%, transparent 70%);
  top: -100px;
  right: -50px;
  pointer-events: none;
}

.lab-stat-cell {
  padding: 1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.lab-stat-icon {
  color: var(--accent-cyan);
}

.lab-stat-icon svg {
  width: 20px;
  height: 20px;
}

/* Assembly section */
.lab-assembly-section {
  padding: 7rem 0;
  background: var(--bg-canvas);
  position: relative;
  z-index: 10;
}

.lab-blueprint-hub {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4rem;
  position: relative;
}

.lab-hub-core {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-deep-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-cyan);
  box-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
  z-index: 2;
  position: relative;
}

.lab-hub-core svg {
  width: 28px;
  height: 28px;
}

.lab-hub-ring {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 240, 255, 0.35);
  animation: ringOrbit 12s linear infinite;
}

.lab-hub-pulse {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 240, 255, 0.12) 0%, transparent 70%);
  animation: hubPulse 3s ease-in-out infinite;
}

@keyframes hubPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 0.3; }
}

/* Zone grid */
.lab-zones-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  position: relative;
}

.lab-zone {
  position: relative;
  will-change: transform, opacity;
}

.lab-zone-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 12px 40px rgba(10, 37, 64, 0.08);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.lab-zone-card:hover {
  box-shadow: 0 20px 60px rgba(10, 37, 64, 0.14);
  transform: translateY(-4px);
}

.lab-zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.lab-zone-num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--zone-color, var(--accent-sky-blue));
}

.lab-zone-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(0, 136, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zone-color, var(--accent-sky-blue));
}

.lab-zone-icon svg {
  width: 20px;
  height: 20px;
}

.lab-zone-title {
  font-family: var(--font-headline);
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.lab-zone-desc {
  line-height: 1.6;
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}

.lab-zone-specs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1.5rem;
}

.lab-spec-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.lab-spec-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--zone-color, var(--accent-sky-blue));
  box-shadow: 0 0 6px var(--zone-color, var(--accent-sky-blue));
  flex-shrink: 0;
}

.lab-zone-cta {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 8px 18px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lab-zone-cta:hover {
  background: var(--zone-color, var(--accent-sky-blue));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(0, 136, 255, 0.25);
}

.lab-zone-glow {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--zone-color, rgba(0, 136, 255, 0.15)) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.4;
  transition: opacity 0.4s ease;
}

.lab-zone-card:hover .lab-zone-glow {
  opacity: 0.8;
}

.lab-zone-connector {
  position: absolute;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--zone-color, rgba(0, 136, 255, 0.5)), transparent);
  top: 50%;
  right: -40px;
  transform-origin: left center;
}

/* lab zone positions */
.lab-zone-center {
  grid-column: 2;
}

.lab-zone-top-left { grid-column: 1; }
.lab-zone-top-right { grid-column: 3; }
.lab-zone-bottom-left { grid-column: 1; }
.lab-zone-bottom-right { grid-column: 3; }

/* ==========================================================================
   EVENTS — IMPROVEMENTS
   ========================================================================== */
.event-card-item .novus-event-card {
  transform-style: preserve-3d;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.event-card-item .novus-event-card:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 20px 50px rgba(10, 37, 64, 0.12) !important;
}

/* ==========================================================================
   ABOUT PAGE IMPROVEMENTS
   ========================================================================== */
.about-hero-node-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.about-hero-node-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.06;
}

.process-step {
  will-change: transform, opacity;
}

/* ==========================================================================
   UTILITY ADDITIONS
   ========================================================================== */
.max-w-520 { max-width: 520px; }
.max-w-600 { max-width: 600px; }

.fs-17 { font-size: 1.0625rem; }

/* ==========================================================================
   RESPONSIVE — NEW COMPONENTS
   ========================================================================== */
@media (max-width: 992px) {
  .lab-zones-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lab-zone-center,
  .lab-zone-top-left,
  .lab-zone-top-right,
  .lab-zone-bottom-left,
  .lab-zone-bottom-right {
    grid-column: auto;
  }

  .lab-zone-connector { display: none; }
}

@media (max-width: 576px) {
  .lab-zones-grid {
    grid-template-columns: 1fr;
  }

  .pub-panel-spine {
    display: none;
  }

  .tab-device-label {
    display: none;
  }

  .tab-hero-heading,
  .lab-hero-heading,
  .pub-hero-heading {
    font-size: 1.9rem;
  }
}

/* --------------------------------------------------------------------------
   SPATIAL HARDWARE KINETIC ASSEMBLY (AI & Robotics)
   -------------------------------------------------------------------------- */
.hardware-kinetic-assembly {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 380px;
  perspective: 1200px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.kinetic-part {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
  margin: 6px 0;
}

.kinetic-pill {
  background: rgba(11, 153, 214, 0.15);
  border: 1px solid rgba(0, 240, 255, 0.4);
  border-radius: 999px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 700;
  color: #00f0ff;
  box-shadow: 0 4px 20px rgba(11, 153, 214, 0.25);
  backdrop-filter: blur(8px);
}

.gripper-bracket {
  position: relative;
  width: 140px;
  height: 44px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.gripper-finger {
  width: 12px;
  height: 28px;
  background: linear-gradient(180deg, #0b99d6 0%, #00d2ff 100%);
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.5);
}

.laser-pointer-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff3366;
  box-shadow: 0 0 8px #ff3366;
}

.brain-box {
  width: 220px;
  padding: 16px 20px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(11, 153, 214, 0.4);
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(11, 153, 214, 0.2);
}

.brain-chip-core {
  width: 32px;
  height: 32px;
  margin: 0 auto 8px;
  background: radial-gradient(circle, #00f0ff 0%, #0b99d6 60%, #054468 100%);
  border-radius: 6px;
  box-shadow: 0 0 16px #00f0ff;
  animation: pulseBrain 2.5s ease-in-out infinite alternate;
}

@keyframes pulseBrain {
  0% { transform: scale(0.95); filter: drop-shadow(0 0 4px #00f0ff); }
  100% { transform: scale(1.05); filter: drop-shadow(0 0 14px #00f0ff); }
}

.brain-status-label {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: #94a3b8;
}

.servo-row {
  display: flex;
  gap: 12px;
}

.servo-pod {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px 12px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
}

.servo-knob {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d2ff;
  box-shadow: 0 0 6px #00d2ff;
}

.chassis-ring {
  position: relative;
  width: 260px;
  padding: 12px 20px;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.chassis-wheel {
  position: absolute;
  width: 14px;
  height: 28px;
  background: #475569;
  border: 1px solid #64748b;
  border-radius: 4px;
}
.chassis-wheel.wheel-1 { left: -7px; top: 50%; transform: translateY(-50%); }
.chassis-wheel.wheel-2 { right: -7px; top: 50%; transform: translateY(-50%); }
.chassis-wheel.wheel-3 { top: -14px; left: 50%; transform: translateX(-50%) rotate(90deg); }

.chassis-label {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

/* Exploded state transformations */
.hardware-kinetic-assembly.is-exploded .part-vision {
  transform: translateY(-40px) translateZ(40px) scale(1.05);
}

.hardware-kinetic-assembly.is-exploded .part-gripper {
  transform: translateY(-20px) translateZ(25px);
}

.hardware-kinetic-assembly.is-exploded .part-brain {
  transform: translateZ(10px) scale(1.02);
  border-color: #00f0ff;
  box-shadow: 0 12px 40px rgba(0, 240, 255, 0.25);
}

.hardware-kinetic-assembly.is-exploded .part-servos {
  transform: translateY(22px) translateZ(30px);
}

.hardware-kinetic-assembly.is-exploded .part-base {
  transform: translateY(45px) translateZ(-20px);
}

.hardware-telemetry-overlay {
  position: absolute;
  inset: 16px;
  pointer-events: none;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.telemetry-badge {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #94a3b8;
  backdrop-filter: blur(6px);
}

.telemetry-badge.tag-top-right {
  position: absolute;
  top: 16px;
  right: 16px;
}

.telemetry-badge.tag-bottom-left {
  position: absolute;
  bottom: 16px;
  left: 16px;
}

/* ==========================================================================
   SPATIAL 3D STAGES & CONTINUOUS NON-HERO INTERACTION SYSTEM
/* ==========================================================================
   CONTINUOUS 3D ROBOTIC JOURNEY ENGINE & SPATIAL WAYPOINTS (LIGHT THEME)
   ========================================================================== */

.novus-journey-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1;
  transition: opacity 0.5s ease;
}

/* Page Layering: Sections are transparent so the continuous 3D robot is visible in the background */
.page-spatial-root {
  position: relative;
  z-index: 2;
  background: transparent !important;
}

.page-spatial-root section:not(.hero-slider-section) {
  background-color: transparent !important;
}

.page-spatial-root .bg-canvas,
.page-spatial-root .bg-white:not(.campus-card):not(.about-hero-card):not(.package-card):not(.stat-grow-card):not(.testimonial-card):not(#lab-result-card):not(.dropdown-menu) {
  background-color: transparent !important;
}

/* Content cards retain crisp, premium white glassmorphism so robot passes behind them */
.campus-card,
.about-hero-card,
.package-card,
.stat-grow-card,
.testimonial-card,
.novus-about-tab-content,
.about-visual-frame,
.about-pillar-block,
.about-timeline-item,
.about-quote-container,
#lab-result-card {
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  position: relative;
  z-index: 3;
}

.about-editorial-hero,
.about-split-section,
.about-metric-cell {
  position: relative;
  z-index: 3;
}

/* 3D Journey Spatial Waypoints */
.journey-waypoint {
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
              border-color 0.4s ease, 
              box-shadow 0.4s ease;
  position: relative;
}

.journey-waypoint.is-active-journey {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(11, 153, 214, 0.6) !important;
  box-shadow: 0 20px 45px -10px rgba(11, 153, 214, 0.22), 0 0 20px rgba(11, 153, 214, 0.12) !important;
}

.waypoint-beacon-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0B99D6;
  box-shadow: 0 0 6px #0B99D6;
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.is-active-journey .waypoint-beacon-dot {
  background: #00f0ff;
  box-shadow: 0 0 14px #00f0ff, 0 0 24px rgba(0, 240, 255, 0.8);
  transform: scale(1.4);
  animation: beaconPulse 1.2s infinite ease-in-out;
}

@keyframes beaconPulse {
  0%, 100% { transform: scale(1.3); opacity: 0.85; }
  50% { transform: scale(1.7); opacity: 1; box-shadow: 0 0 20px #00f0ff; }
}

.waypoint-glow-pulse {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(11, 153, 214, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.is-active-journey .waypoint-glow-pulse {
  opacity: 1;
}

/* Subtle pulse dot */
.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #00f0ff;
  box-shadow: 0 0 10px #00f0ff;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 16px #00f0ff; }
}

/* Footer 3D Robot Final Destination (Directly Below Social Media Buttons) */
.footer-novus {
  position: relative;
  z-index: 2;
  background-color: transparent !important;
}

.footer-robot-dock-bay {
  height: 160px;
  position: relative;
  z-index: 2;
  margin-top: 0.5rem;
  pointer-events: none;
}

/* ==========================================================================
   ABOUT PAGE — IMMERSIVE ROBOTICS SPATIAL STORYTELLING DESIGN SYSTEM
   ========================================================================== */
.about-experience-root {
  position: relative;
  z-index: 2;
}

.blueprint-grid-subtle {
  background-image: 
    linear-gradient(to right, rgba(11, 153, 214, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 153, 214, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Technical System Annotations (Not Cards!) */
.system-annotation {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #0b99d6;
  text-transform: uppercase;
}

.system-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  color: #475569;
  border: 1px solid rgba(203, 213, 225, 0.7);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
}

.system-tag .tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #00f0ff;
  box-shadow: 0 0 6px #00f0ff;
}

/* 1. Cinematic Hero Stage */
.about-hero-stage {
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 58px 0 80px 0;
  position: relative;
  z-index: 2;
}

.about-hero-massive-title {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #0b1a2d;
  margin-bottom: 1.75rem;
}

.about-hero-lead-text {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #475569;
  max-width: 680px;
}

.about-hero-tech-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2rem;
}

/* 2. Narrative Bridge ("FROM LAB → TO LEARNING") */
.narrative-bridge-stage {
  padding: 110px 0;
  position: relative;
  z-index: 2;
}

.narrative-statement-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0b99d6;
  margin-bottom: 3.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.narrative-arrow {
  color: #94a3b8;
}

.narrative-manifesto-text {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.38;
  color: #0b1a2d;
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
}

.editorial-body-lead {
  font-size: 1.125rem;
  line-height: 1.85;
  color: #475569;
}

/* Asymmetric Visual Composition with Blueprint Crop Marks */
.blueprint-visual-composition {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(11, 153, 214, 0.08), 0 4px 20px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
}

.blueprint-visual-composition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.blueprint-visual-composition:hover img {
  transform: scale(1.03);
}

.blueprint-crop-mark {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(11, 26, 45, 0.75);
  backdrop-filter: blur(4px);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  z-index: 3;
}

/* 3. Robotic Core: Mission / Vision / Values (System Sequence) */
.robotic-core-stage {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

.core-sequence-node {
  position: relative;
  padding: 3.5rem 0;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.4s ease;
}

.core-node-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(11, 153, 214, 0.25);
}

.core-node-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0b99d6;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.core-node-title {
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  font-weight: 800;
  line-height: 1.25;
  color: #0b1a2d;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}

.core-node-desc {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #475569;
  max-width: 720px;
}

/* 4. What We Do — 3-Environment Ecosystem Journey */
.services-journey-stage {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

.service-environment-block {
  padding: 85px 0;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}

.service-env-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  color: #0b99d6;
  opacity: 0.9;
}

.service-env-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0b99d6;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.service-env-title {
  font-size: clamp(2rem, 3.8vw, 3.2rem);
  font-weight: 800;
  line-height: 1.15;
  color: #0b1a2d;
  letter-spacing: -0.025em;
  margin-bottom: 1.5rem;
}

.service-env-desc {
  font-size: 1.15rem;
  line-height: 1.85;
  color: #475569;
  margin-bottom: 2rem;
}

.service-spec-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  color: #0b1a2d;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(203, 213, 225, 0.8);
  padding: 6px 14px;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* 5. Scale & Impact */
.scale-impact-stage {
  padding: 100px 0;
  position: relative;
  z-index: 2;
  background: rgba(248, 250, 252, 0.8);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.scale-giant-number {
  font-size: clamp(3.2rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #0b1a2d;
  margin-bottom: 0.75rem;
}

.scale-caption {
  font-size: 1.05rem;
  color: #475569;
  line-height: 1.5;
  max-width: 260px;
}

/* 6. How We Partner: 4-Phase Engineering Rollout */
.rollout-engineering-stage {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

.rollout-conduit-item {
  position: relative;
  padding-top: 2.5rem;
  border-top: 2px solid #e2e8f0;
  transition: all 0.35s ease;
}

.rollout-conduit-item:hover {
  border-color: #00f0ff;
}

.rollout-conduit-item .phase-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.8rem;
  font-weight: 800;
  color: #0b99d6;
  margin-bottom: 0.75rem;
}

.rollout-conduit-item .phase-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0b1a2d;
  margin-bottom: 0.75rem;
}

.rollout-conduit-item .phase-desc {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #64748b;
}

/* 7. Leadership Manifesto */
.leadership-manifesto-stage {
  padding: 120px 0;
  position: relative;
  z-index: 2;
}

.leadership-quote-card {
  padding: 4.5rem 4rem;
  border-radius: 32px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  box-shadow: 0 24px 60px rgba(11, 153, 214, 0.06);
}

.leadership-quote-editorial {
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  line-height: 1.75;
  color: #0b1a2d;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 2.5rem;
}

/* ==========================================================================
   8. CONTINUOUS 3D ROBOTICS ECOSYSTEM SCROLL STORYTELLING
   ========================================================================== */

.story-ecosystem-root {
  position: relative;
  z-index: 2;
  overflow-x: clip;
}

/* Common Story Chapter Styling */
.story-chapter {
  position: relative;
  z-index: 2;
  padding: 120px 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.65);
}

@media (max-width: 991px) {
  .story-chapter {
    padding: 80px 0;
  }
}

/* Chapter 02: Big Editorial Statement */
.story-statement-section {
  padding: 140px 0;
  text-align: center;
  position: relative;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%, rgba(11, 153, 214, 0.05) 0%, rgba(255, 255, 255, 0) 70%);
}

.story-statement-massive {
  font-family: var(--font-headline);
  font-size: clamp(2.4rem, 5.2vw, 4.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #0b1a2d;
  max-width: 1100px;
  margin: 0 auto 3rem auto;
}

.story-progression-track {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 1rem 2rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(11, 153, 214, 0.22);
  box-shadow: 0 10px 30px rgba(11, 153, 214, 0.08);
}

.prog-step {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(0.8rem, 1.4vw, 0.95rem);
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.04em;
}

.prog-arrow {
  color: #0b99d6;
  font-size: 1.25rem;
  font-weight: 800;
}

.prog-highlight {
  color: #0b99d6;
  background: rgba(11, 153, 214, 0.1);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid rgba(11, 153, 214, 0.25);
}

/* Translucent Editorial Spec Cards (Letting 3D ecosystem shine through) */
.story-spec-card {
  padding: 3rem 2.5rem;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 18px 45px rgba(11, 153, 214, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.story-spec-card:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 153, 214, 0.35);
  box-shadow: 0 24px 60px rgba(11, 153, 214, 0.10);
}

/* Asymmetric Feature Rows */
.story-feature-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

.story-feature-row:last-child {
  border-bottom: none;
}

.story-feature-bullet {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(11, 153, 214, 0.12);
  color: #0b99d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Large Editorial Metric Panels */
.story-metric-col {
  padding: 2.5rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  transition: all 0.3s ease;
}

.story-metric-col:hover {
  background: #ffffff;
  border-color: rgba(11, 153, 214, 0.3);
  box-shadow: 0 16px 40px rgba(11, 153, 214, 0.08);
}

.story-metric-val {
  font-family: var(--font-headline);
  font-size: clamp(2.8rem, 4.5vw, 3.8rem);
  font-weight: 800;
  color: #0b1a2d;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.story-metric-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  font-weight: 700;
  color: #0b99d6;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

/* Tab Solutions Horizon Cards */
.story-tab-item {
  padding: 2.25rem;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: all 0.3s ease;
}

.story-tab-item:hover {
  transform: translateY(-4px);
  border-color: #0b99d6;
  box-shadow: 0 16px 45px rgba(11, 153, 214, 0.12);
}

/* Technical Telemetry Badge Strips */
.telemetry-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 1.5rem 0;
}

.telemetry-badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  background: rgba(11, 153, 214, 0.08);
  border: 1px solid rgba(11, 153, 214, 0.22);
  color: #0b99d6;
}

/* Open 3D Spatial Arena Viewports */
.story-spatial-arena {
  position: relative;
  min-height: 420px;
  border-radius: 24px;
  border: 1px dashed rgba(11, 153, 214, 0.35);
  background: radial-gradient(circle at 50% 50%, rgba(11, 153, 214, 0.04) 0%, transparent 70%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.5rem;
  overflow: visible;
  pointer-events: none;
}

.story-spatial-arena * {
  pointer-events: auto;
}

.arena-hud-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #0b99d6;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(11, 153, 214, 0.18);
}

.arena-hud-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #64748b;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(11, 153, 214, 0.18);
}

.story-vertical-nav-item {
  padding: 1.15rem 1.35rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  margin-bottom: 0.75rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  text-decoration: none;
}

.story-vertical-nav-item:hover {
  border-color: rgba(11, 153, 214, 0.45);
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(11, 153, 214, 0.08);
}

.story-stat-mini {
  padding: 1.25rem;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.85);
}

/* ==========================================================================
   OFFICIAL HOMEPAGE ECOSYSTEM SECTIONS (LIGHT THEME & SPATIAL INTEGRATION)
   ========================================================================== */

/* 1. CAMPUS */
.campus-node-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11, 153, 214, 0.16);
  box-shadow: 0 10px 30px rgba(7, 17, 30, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.campus-node-card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 153, 214, 0.45);
  box-shadow: 0 20px 40px rgba(11, 153, 214, 0.1);
}

.node-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(11, 153, 214, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.campus-tag-pill {
  transition: all 0.2s ease;
  cursor: default;
}

.campus-tag-pill:hover {
  background: rgba(11, 153, 214, 0.1) !important;
  color: #0B99D6 !important;
  border-color: rgba(11, 153, 214, 0.3) !important;
}

/* 2. ABOUT US CONSOLE & TABS */
.about-console-panel {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(11, 153, 214, 0.16);
  box-shadow: 0 12px 36px rgba(7, 17, 30, 0.05);
}

.about-tab-btn {
  border-radius: 9999px;
  padding: 0.6rem 1.35rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: #4b5563;
  background: rgba(243, 244, 246, 0.8);
  border: 1px solid rgba(229, 231, 235, 0.8);
  transition: all 0.25s ease;
}

.about-tab-btn:hover {
  color: #0B99D6;
  background: rgba(11, 153, 214, 0.08);
  border-color: rgba(11, 153, 214, 0.25);
}

.about-tab-btn.active {
  background: #0B99D6 !important;
  color: #ffffff !important;
  border-color: #0B99D6 !important;
  box-shadow: 0 4px 14px rgba(11, 153, 214, 0.35);
}

.system-telemetry-box {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(11, 153, 214, 0.18);
  box-shadow: 0 12px 36px rgba(7, 17, 30, 0.05);
}

.telemetry-feature-item {
  transition: all 0.25s ease;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.telemetry-feature-item:hover {
  transform: translateX(4px);
  background: rgba(11, 153, 214, 0.06);
  border-color: rgba(11, 153, 214, 0.25);
}

.telemetry-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(11, 153, 214, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 3. STATS */
.stat-spatial-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11, 153, 214, 0.16);
  box-shadow: 0 10px 30px rgba(7, 17, 30, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-spatial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 153, 214, 0.45);
  box-shadow: 0 20px 40px rgba(11, 153, 214, 0.1);
}

.stat-number-display {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(135deg, #0B99D6 0%, #0099ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 4. PACKAGES */
.package-spatial-card {
  background: linear-gradient(165deg, rgba(246, 250, 255, 0.98) 0%, rgba(234, 243, 252, 0.94) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(170, 205, 235, 0.7);
  box-shadow: 0 12px 32px rgba(7, 25, 55, 0.07), 0 2px 6px rgba(11, 153, 214, 0.04);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.package-spatial-card:hover {
  transform: translateY(-8px);
  border-color: rgba(11, 153, 214, 0.55);
  box-shadow: 0 24px 48px rgba(11, 153, 214, 0.14), 0 4px 12px rgba(7, 25, 55, 0.06);
}

/* 5. TESTIMONIALS - SPATIAL STAGGERED COMPOSITION */
.testimonials-spatial-stream {
  position: relative;
}

.testimonial-spatial-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(11, 153, 214, 0.18);
  box-shadow: 0 10px 30px rgba(7, 17, 30, 0.04);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
  will-change: transform;
}

/* Staggered Spatial Rotations & Offsets */
.testimonial-stagger-1 {
  transform: rotate(-1.5deg) translateY(0);
}

.testimonial-stagger-2 {
  transform: rotate(1.4deg) translateY(24px);
}

.testimonial-stagger-3 {
  transform: rotate(-1deg) translateY(-8px);
}

.testimonial-stagger-4 {
  transform: rotate(1.6deg) translateY(18px);
}

.testimonial-stagger-5 {
  transform: rotate(-1.8deg) translateY(4px);
}

.testimonial-stagger-6 {
  transform: rotate(1.2deg) translateY(28px);
}

/* Hover Leveling & Depth Spotlight */
.testimonial-spatial-card:hover {
  transform: rotate(0deg) translateY(-8px) scale(1.03) !important;
  z-index: 15;
  border-color: rgba(11, 153, 214, 0.55) !important;
  box-shadow: 0 24px 50px rgba(11, 153, 214, 0.16), 0 4px 12px rgba(7, 17, 30, 0.06) !important;
}

@media (max-width: 991px) {
  .testimonial-stagger-1,
  .testimonial-stagger-2,
  .testimonial-stagger-3,
  .testimonial-stagger-4,
  .testimonial-stagger-5,
  .testimonial-stagger-6 {
    transform: none !important;
  }
}

/* 6. PROGRAMMES CTA */
.programme-module-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11, 153, 214, 0.16);
  box-shadow: 0 10px 30px rgba(7, 17, 30, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.programme-module-card:hover {
  transform: translateY(-6px);
  border-color: rgba(11, 153, 214, 0.5);
  box-shadow: 0 22px 45px rgba(11, 153, 214, 0.12);
}

.programme-module-card:hover .module-arrow-icon {
  transform: translate(3px, -3px);
  color: #0B99D6;
}

.module-arrow-icon {
  transition: transform 0.25s ease;
}

/* 7. PARTNERS */
.partner-network-node {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11, 153, 214, 0.14);
  box-shadow: 0 8px 24px rgba(7, 17, 30, 0.03);
  transition: all 0.3s ease;
}

.partner-network-node:hover {
  transform: translateY(-4px);
  border-color: rgba(11, 153, 214, 0.35);
  box-shadow: 0 16px 32px rgba(11, 153, 214, 0.08);
}

/* 8. ARTICLES */
.article-spatial-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(11, 153, 214, 0.16);
  box-shadow: 0 10px 30px rgba(7, 17, 30, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-spatial-card:hover {
  transform: translateY(-5px);
  border-color: rgba(11, 153, 214, 0.45);
  box-shadow: 0 20px 40px rgba(11, 153, 214, 0.1);
}

/* --------------------------------------------------------------------------
   NAVBAR UTILITIES & COMPACT MENU
   -------------------------------------------------------------------------- */
.btn-nav-util {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  min-width: 38px;
  padding: 0 12px;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 153, 214, 0.22);
  color: #0b2545;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(7, 17, 30, 0.04);
}

.btn-nav-util:hover {
  background: rgba(11, 153, 214, 0.1);
  border-color: rgba(11, 153, 214, 0.45);
  color: #0B99D6;
  transform: translateY(-1px);
}

.btn-nav-lang {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  gap: 4px;
}

.btn-nav-lang .lang-opt {
  opacity: 0.55;
  transition: all 0.2s ease;
}

.btn-nav-lang .lang-opt.active {
  opacity: 1;
  color: #0B99D6;
  font-weight: 700;
}

.btn-nav-lang .lang-sep {
  opacity: 0.35;
}

.btn-novus-menu {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 50rem;
  background: linear-gradient(135deg, rgba(11, 153, 214, 0.1) 0%, rgba(0, 210, 255, 0.16) 100%);
  border: 1px solid rgba(11, 153, 214, 0.35);
  color: #0b2545;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-novus-menu:hover, .btn-novus-menu[aria-expanded="true"] {
  background: linear-gradient(135deg, #0B99D6 0%, #00b4d8 100%);
  color: #ffffff;
  border-color: #0B99D6;
  box-shadow: 0 4px 16px rgba(11, 153, 214, 0.35);
  transform: translateY(-1px);
}

.nav-compact-menu-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 310px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(11, 153, 214, 0.25);
  z-index: 1060;
  box-shadow: 0 20px 50px rgba(7, 25, 55, 0.15), 0 4px 12px rgba(11, 153, 214, 0.08);
  animation: fadeInMenuPanel 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInMenuPanel {
  from { opacity: 0; transform: translateY(-8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.menu-panel-link {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.menu-panel-link:hover {
  background: rgba(11, 153, 214, 0.09);
  color: #0B99D6;
  transform: translateX(3px);
}

.menu-contact-item {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 13px;
  transition: all 0.2s ease;
}

.menu-contact-item:hover {
  background: rgba(11, 153, 214, 0.06);
  color: #0B99D6 !important;
}

/* Dark Theme Mode Styles */
body.dark-theme-mode {
  background-color: #060d16 !important;
  color: #e2e8f0 !important;
}

body.dark-theme-mode .navbar-novus {
  background: rgba(6, 13, 22, 0.88) !important;
  border-bottom-color: rgba(0, 210, 255, 0.18) !important;
}

body.dark-theme-mode .nav-link-novus {
  color: #cbd5e1 !important;
}

body.dark-theme-mode .nav-company-panel {
  background: rgba(9, 18, 32, 0.97);
  border-color: rgba(0, 210, 255, 0.22);
}

body.dark-theme-mode .nav-company-link {
  color: #cbd5e1;
}

@media (max-width: 991.98px) {
  body.dark-theme-mode #navContent.navbar-collapse {
    background: rgba(6, 13, 22, 0.98);
    border-bottom-color: rgba(0, 210, 255, 0.18);
  }
}

body.dark-theme-mode .btn-nav-util {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f1f5f9;
}

body.dark-theme-mode .btn-novus-menu {
  background: rgba(11, 153, 214, 0.18);
  border-color: rgba(0, 210, 255, 0.35);
  color: #f1f5f9;
}

body.dark-theme-mode .nav-compact-menu-panel {
  background: rgba(9, 18, 32, 0.97);
  border-color: rgba(0, 210, 255, 0.25);
  color: #e2e8f0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}

body.dark-theme-mode .menu-panel-link {
  color: #cbd5e1;
}

body.dark-theme-mode .menu-contact-item {
  color: #94a3b8 !important;
}

body.dark-theme-mode .bg-white-glass,
body.dark-theme-mode .about-console-panel,
body.dark-theme-mode .stat-spatial-card,
body.dark-theme-mode .programme-module-card,
body.dark-theme-mode .partner-network-node,
body.dark-theme-mode .article-spatial-card,
body.dark-theme-mode .campus-pillar-card {
  background: rgba(11, 22, 38, 0.85) !important;
  border-color: rgba(0, 210, 255, 0.16) !important;
  color: #e2e8f0;
}

body.dark-theme-mode .package-spatial-card {
  background: linear-gradient(165deg, rgba(14, 26, 44, 0.98) 0%, rgba(8, 16, 28, 0.95) 100%) !important;
  border-color: rgba(0, 210, 255, 0.28) !important;
  color: #e2e8f0;
}

body.dark-theme-mode .testimonial-spatial-card {
  background: rgba(11, 24, 42, 0.88) !important;
  border-color: rgba(0, 210, 255, 0.18) !important;
  color: #e2e8f0;
}

body.dark-theme-mode .text-dark {
  color: #f1f5f9 !important;
}

body.dark-theme-mode .text-secondary {
  color: #94a3b8 !important;
}

/* --------------------------------------------------------------------------
   ABOUT US: OPEN 3D ROBOTICS & AI MECHANISM VISUAL STAGE
   Boundless, spatial mechanism with kinetic rings, optical core, & servo calipers.
   -------------------------------------------------------------------------- */
.about-robotics-stage {
  position: relative;
  width: 100%;
  min-height: 440px;
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 10px;
}

.about-robotics-aura {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 153, 214, 0.2) 0%, rgba(0, 210, 255, 0.06) 50%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  animation: aboutAuraPulse 6s ease-in-out infinite alternate;
}

@keyframes aboutAuraPulse {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.12); opacity: 1; }
}

.about-robotics-rig {
  position: relative;
  width: 310px;
  height: 310px;
  transform-style: preserve-3d;
  animation: aboutRigFloat 7s ease-in-out infinite;
}

@keyframes aboutRigFloat {
  0%, 100% { transform: translateY(0px) rotateX(12deg) rotateY(-8deg); }
  50% { transform: translateY(-14px) rotateX(8deg) rotateY(6deg); }
}

/* Kinetic Concentric Rings */
.about-mechanism-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

.about-ring-outer {
  width: 290px;
  height: 290px;
  border: 2px dashed rgba(11, 153, 214, 0.45);
  box-shadow: 0 0 22px rgba(11, 153, 214, 0.16);
  animation: spinSlow 30s linear infinite;
}

.about-ring-mid {
  width: 220px;
  height: 220px;
  border: 2px solid rgba(0, 210, 255, 0.7);
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow: 0 0 16px rgba(0, 210, 255, 0.35);
  animation: spinSlow 18s linear infinite reverse;
}

.about-ring-inner {
  width: 160px;
  height: 160px;
  border: 1.5px dotted rgba(11, 153, 214, 0.75);
  animation: spinSlow 12s linear infinite;
}

/* Central Optical Core & Scanner */
.about-optical-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, #00f0ff 30%, #0077ff 70%, #041933 100%);
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.8), 0 0 70px rgba(11, 153, 214, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-optical-iris {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #061528;
  border: 2px solid #00f0ff;
  box-shadow: inset 0 0 12px #00f0ff;
  position: relative;
  overflow: hidden;
}

.about-optical-beam {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0%, #00f0ff 50%, transparent 100%);
  box-shadow: 0 0 8px #00f0ff;
  animation: scanBeamSweep 3s ease-in-out infinite alternate;
}

@keyframes scanBeamSweep {
  0% { transform: translateX(-22px); }
  100% { transform: translateX(22px); }
}

/* Articulated Caliper Servo Arms */
.about-servo-caliper {
  position: absolute;
  width: 46px;
  height: 12px;
  background: linear-gradient(90deg, #1e293b 0%, #334155 100%);
  border-radius: 4px;
  border: 1px solid rgba(0, 210, 255, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.caliper-top-left {
  top: 36px;
  left: 26px;
  transform: rotate(-40deg);
}

.caliper-top-right {
  top: 36px;
  right: 26px;
  transform: rotate(40deg);
}

.caliper-bottom-left {
  bottom: 36px;
  left: 26px;
  transform: rotate(40deg);
}

.caliper-bottom-right {
  bottom: 36px;
  right: 26px;
  transform: rotate(-40deg);
}

/* Floating Technical Badges & Data Pins */
.about-spatial-hud-tag {
  position: absolute;
  padding: 6px 14px;
  border-radius: 50rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 153, 214, 0.35);
  box-shadow: 0 8px 24px rgba(7, 25, 55, 0.1);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  color: #0b2545;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  animation: hudPinFloat 5s ease-in-out infinite alternate;
}

body.dark-theme-mode .about-spatial-hud-tag {
  background: rgba(10, 20, 35, 0.94);
  border-color: rgba(0, 210, 255, 0.4);
  color: #00f0ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.hud-tag-1 {
  top: 15px;
  left: -10px;
  animation-delay: 0s;
}

.hud-tag-2 {
  bottom: 15px;
  right: -5px;
  animation-delay: 1.5s;
}

.hud-tag-3 {
  top: 50%;
  right: -25px;
  transform: translateY(-50%);
  animation-delay: 2.5s;
}

@keyframes hudPinFloat {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

/* ==========================================================================
   DEDICATED PAGES: TESTIMONIALS, PARTNERS, GALLERY, BLOG, COMPETITIONS, BUILDER 360
   ========================================================================== */
.badge-novus-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 9999px;
  background: rgba(11, 153, 214, 0.08);
  border: 1px solid rgba(11, 153, 214, 0.25);
  color: #0b99d6;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.btn-filter-pill {
  border: none;
  background: transparent;
  color: #57606a;
  padding: 6px 16px;
  border-radius: 9999px;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-filter-pill:hover {
  color: #0b99d6;
}
.btn-filter-pill.active {
  background: #0b99d6;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(11, 153, 214, 0.3);
}

.btn-zone-select {
  border: 1px solid rgba(11, 153, 214, 0.2);
  background: #ffffff;
  color: #0b2545;
  padding: 6px 14px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-zone-select:hover {
  border-color: #0b99d6;
  color: #0b99d6;
}
.btn-zone-select.active {
  background: #0b2545;
  color: #ffffff;
  border-color: #0b2545;
  box-shadow: 0 4px 12px rgba(11, 37, 69, 0.2);
}

/* Builder 360 Hotspot Pins */
.builder-hotspot-pin {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #0b99d6;
  color: #ffffff;
  border: 2px solid #ffffff;
  box-shadow: 0 0 20px rgba(11, 153, 214, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
  z-index: 10;
}
.builder-hotspot-pin:hover {
  transform: translate(-50%, -50%) scale(1.2);
  background: #00d4ff;
}
.hotspot-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #00d4ff;
  animation: hotspotPing 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes hotspotPing {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2); opacity: 0; }
}
.hotspot-tooltip {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 6px;
  background: #0b2545;
  color: #ffffff;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.builder-hotspot-pin:hover .hotspot-tooltip {
  opacity: 1;
}

/* Gallery Zoom & Hover */
.gallery-interactive-card:hover .gallery-img-zoom {
  transform: scale(1.05);
}
.gallery-hover-overlay {
  background: linear-gradient(180deg, rgba(11, 37, 69, 0.2) 0%, rgba(11, 37, 69, 0.85) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-interactive-card:hover .gallery-hover-overlay {
  opacity: 1;
}

/* Hover Lift */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(11, 37, 69, 0.08) !important;
}

/* Builder Sphere 360 Editorial Scrollytelling Utilities */
.floating-hero-3d-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 380px;
  margin: 0 auto;
  pointer-events: none;
}

.floating-hero-3d-stage canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.editorial-chapter-num {
  font-family: var(--font-headline, sans-serif);
  font-size: 5rem;
  font-weight: 900;
  line-height: 0.8;
  color: rgba(3, 105, 161, 0.08);
  user-select: none;
}

.timeline-milestone-card {
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.timeline-milestone-card:hover {
  border-color: var(--color-cyan, #0ea5e9) !important;
}

.pedagogy-flow-node {
  transition: all 0.3s ease;
}

.pedagogy-flow-node:hover {
  transform: translateY(-4px);
}

.tech-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  background-color: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  color: #1e293b;
  font-family: var(--font-mono, monospace);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.25s ease;
}

.tech-tag-pill:hover {
  background-color: #f8fafc;
  border-color: #0ea5e9;
  color: #0369a1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(14, 165, 233, 0.12);
}

/* ==========================================================================
   Grade-Wise Book Progression — Editorial Timeline Journey (01 -> 02 -> 03)
   ========================================================================== */
.progression-journey-wrap {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 2rem;
  padding: 4rem 2.5rem;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.03);
}

.progression-track-container {
  position: relative;
  margin: 3.5rem 0 2.5rem 0;
}

/* Horizontal Track on Desktop */
@media (min-width: 992px) {
  .progression-timeline-rail {
    position: absolute;
    top: 32px;
    left: 14%;
    right: 14%;
    height: 3px;
    background: rgba(226, 232, 240, 0.9);
    border-radius: 9999px;
    z-index: 1;
    overflow: hidden;
  }

  .progression-timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0ea5e9 0%, #0284c7 50%, #2563eb 100%);
    border-radius: 9999px;
    transition: width 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.6);
  }
}

/* Stage Node */
.progression-stage-item {
  position: relative;
  z-index: 2;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  cursor: pointer;
}

.progression-node-disc {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 1.125rem;
  font-weight: 800;
  color: #64748b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.progression-node-disc .pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
  transition: all 0.4s ease;
}

.progression-stage-item:hover .progression-node-disc,
.progression-stage-item.is-active .progression-node-disc {
  border-color: #0ea5e9;
  color: #0284c7;
  background: #f0f9ff;
  transform: scale(1.1);
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.25);
}

.progression-stage-item.is-active .progression-node-disc .pulse-ring {
  border-color: rgba(14, 165, 233, 0.4);
  opacity: 1;
  animation: pingRing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes pingRing {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.progression-grade-num {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(2.2rem, 3.8vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0f172a;
  line-height: 1.1;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.progression-stage-item.is-active .progression-grade-num {
  color: #0284c7;
}

.progression-category-badge {
  display: inline-block;
  font-family: var(--font-headline, sans-serif);
  font-size: 0.825rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0369a1;
  background: rgba(14, 165, 233, 0.08);
  border: 1px solid rgba(14, 165, 233, 0.2);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 0.85rem;
  transition: all 0.3s ease;
}

.progression-stage-item.is-active .progression-category-badge {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}

.progression-desc-text {
  font-size: 0.95rem;
  line-height: 1.65;
  color: #64748b;
  max-width: 320px;
  margin: 0 auto;
  transition: color 0.3s ease;
}

.progression-stage-item.is-active .progression-desc-text {
  color: #334155;
}

.progression-micro-tech {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 1rem;
}

/* Mobile Vertical Progression (under 992px) */
@media (max-width: 991.98px) {
  .progression-timeline-rail {
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 31px;
    width: 3px;
    background: rgba(226, 232, 240, 0.9);
    z-index: 1;
  }

  .progression-timeline-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, #0ea5e9 0%, #0284c7 50%, #2563eb 100%);
    transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .progression-stage-item {
    display: flex;
    text-align: left !important;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
  }

  .progression-node-disc {
    margin: 0;
    flex-shrink: 0;
  }

  .progression-stage-item .progression-grade-num {
    margin-top: 0;
  }

  .progression-desc-text {
    margin: 0;
    max-width: 100%;
  }
}

/* ==========================================================================
   Pedagogy / Curriculum Journey — Scroll-Driven Interactive Story Experience
   Contained in One Large White Rounded Container with Pinned Heading
   ========================================================================== */
.pedagogy-journey-section {
  position: relative;
  background: transparent;
  margin: 3rem 0 4.5rem;
}

.pedagogy-scroll-track {
  position: relative;
  height: 240vh; /* Smooth, natural scroll journey without dead space */
}

.pedagogy-pinned-frame {
  position: sticky;
  top: 55px; /* Sits cleanly below the navbar */
  height: calc(100vh - 65px);
  max-height: 980px;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 1.5rem;
  overflow: hidden;
  z-index: 10;
}

/* Heading Block positioned visibly above the container the entire time */
.pedagogy-sticky-header {
  text-align: center;
  margin-bottom: 1.65rem;
  flex-shrink: 0;
  width: 100%;
}

.pedagogy-sticky-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.pedagogy-sticky-title {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(2.4rem, 3.8vw, 3.5rem);
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.04em;
  line-height: 1.12;
  margin-bottom: 0.55rem;
}

.pedagogy-sticky-subtitle {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  color: #64748b;
  font-weight: 500;
  max-width: 820px;
  margin: 0 auto;
}

/* One Large, Elegant White Rounded Container — Substantially Enlarged */
.pedagogy-journey-card {
  position: relative;
  width: 100%;
  max-width: 1420px;
  height: 610px;
  background: #ffffff;
  border-radius: 2.25rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 
    0 30px 65px -15px rgba(15, 23, 42, 0.08),
    0 0 1px 1px rgba(226, 232, 240, 0.7);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  flex-shrink: 0;
}

/* LEFT SIDE: Active Stage Content */
.pedagogy-card-left {
  flex: 0 0 36%;
  max-width: 36%;
  padding: 3.25rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: #ffffff;
}

.pedagogy-learning-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.775rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 2rem;
}

.pedagogy-stage-text-stage {
  position: relative;
  min-height: 270px;
  display: flex;
  align-items: center;
}

.pedagogy-text-moment {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pedagogy-text-moment.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.pedagogy-stage-name {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(3.2rem, 4.8vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0f172a;
  line-height: 1.0;
  margin-bottom: 0.55rem;
}

.pedagogy-stage-sub {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

.pedagogy-accent-line {
  width: 52px;
  height: 4px;
  background: #00d2ff;
  border-radius: 9999px;
  margin-bottom: 1.4rem;
}

.pedagogy-stage-body {
  font-size: 1.06rem;
  line-height: 1.7;
  color: #475569;
  font-weight: 400;
  margin-bottom: 0;
}

/* RIGHT SIDE: 3D Storytelling Stage */
.pedagogy-card-right {
  flex: 0 0 55%;
  max-width: 55%;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.25rem 1.75rem 1.75rem;
  overflow: hidden;
}

.pedagogy-visual-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.75rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
}

.pedagogy-scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.75rem;
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pedagogy-scene-img.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* RIGHT STAGE RAIL: Subtle vertical indicator (matching reference image) */
.pedagogy-stage-rail {
  flex: 0 0 9%;
  max-width: 9%;
  background: #ffffff;
  border-left: 1px solid rgba(241, 245, 249, 0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 2.5rem 1.5rem;
  position: relative;
}

.pedagogy-rail-track-line {
  position: absolute;
  left: 27px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.pedagogy-rail-list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 65%;
  position: relative;
  z-index: 2;
  gap: 1.6rem;
}

.pedagogy-rail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
  user-select: none;
}

.pedagogy-rail-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2px solid #ffffff;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.pedagogy-rail-item.is-active {
  color: #0284c7;
  font-weight: 800;
}

.pedagogy-rail-item.is-active .pedagogy-rail-dot {
  background: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2);
  transform: scale(1.35);
}

/* Bottom Quote Ribbon */
.pedagogy-quote-ribbon {
  margin-top: 1.25rem;
  color: #64748b;
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pedagogy-quote-mark {
  color: #00d2ff;
  font-family: var(--font-headline, sans-serif);
  font-size: 1.4rem;
  line-height: 1;
}

/* Tablet & Mobile Layout */
@media (max-width: 991.98px) {
  .pedagogy-pinned-frame {
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    padding: 0 1rem;
  }
  .pedagogy-scroll-track {
    height: auto;
  }
  .pedagogy-journey-card {
    flex-direction: column;
    height: auto;
    max-height: none;
    border-radius: 1.5rem;
  }
  .pedagogy-card-left {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 2rem 1.5rem;
  }
  .pedagogy-card-right {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 320px;
    padding: 1rem;
  }
  .pedagogy-stage-rail {
    display: none;
  }
}

/* ==========================================================================
   GRADE PATHWAYS SYSTEM (Section 02 — Spatial 3D Continuum)
   ========================================================================== */
.pathways-continuum-wrapper {
  position: relative;
  background: transparent;
  padding: 1rem 0;
}

.pathways-circuit-track {
  position: relative;
  width: 100%;
}

.pathways-circuit-line {
  position: absolute;
  top: 48px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: linear-gradient(90deg, rgba(2, 132, 199, 0.2) 0%, rgba(0, 229, 255, 0.8) 50%, rgba(2, 132, 199, 0.2) 100%);
  z-index: 1;
}

.pathway-hub-card {
  position: relative;
  background: #ffffff;
  border-radius: 1.75rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 15px 35px -10px rgba(15, 23, 42, 0.06);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
  height: 100%;
}

.pathway-hub-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(2, 132, 199, 0.15);
  border-color: rgba(2, 132, 199, 0.4);
}

.pathway-hub-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono, monospace);
  font-size: 1rem;
  font-weight: 800;
  color: #0284c7;
  box-shadow: 0 0 0 6px rgba(2, 132, 199, 0.12);
  margin-bottom: 1.25rem;
  transition: all 0.3s ease;
}

.pathway-hub-card:hover .pathway-hub-num {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 0 8px rgba(2, 132, 199, 0.25);
  transform: scale(1.08);
}

.pathway-grade-title {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 0.65rem;
}

.pathway-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0284c7;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  padding: 0.3rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.pathway-badge-secondary {
  color: #0369a1;
  background: rgba(3, 105, 161, 0.08);
  border-color: rgba(3, 105, 161, 0.25);
}

/* 3D Floating Stage Inside Pathway Card */
.pathway-3d-scene-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0.5rem auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pathway-floating-orb {
  position: absolute;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(0, 229, 255, 0.25) 0%, rgba(2, 132, 199, 0.08) 70%, transparent 100%);
  animation: pathwayOrbFloat 4s ease-in-out infinite alternate;
}

.pathway-floating-ring {
  position: absolute;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 1.5px dashed rgba(2, 132, 199, 0.35);
  animation: pathwayRingSpin 16s linear infinite;
}

.pathway-3d-icon {
  position: relative;
  z-index: 2;
  font-size: 2.2rem;
  color: #0284c7;
  filter: drop-shadow(0 6px 14px rgba(2, 132, 199, 0.25));
  transition: transform 0.3s ease;
}

.pathway-hub-card:hover .pathway-3d-icon {
  transform: scale(1.15) rotate(5deg);
}

@keyframes pathwayOrbFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-8px) scale(1.06); }
}

@keyframes pathwayRingSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.pathway-desc-lead {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #64748b;
  font-weight: 400;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.pathway-micro-tech {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  padding: 0.45rem 1rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
}

.pathway-explore-btn {
  font-family: var(--font-headline, sans-serif);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.55rem 1.4rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.3s ease;
  border: 1.5px solid #0284c7;
  color: #0284c7;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.pathway-explore-btn:hover {
  background: #0284c7;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(2, 132, 199, 0.25);
}

.pathway-explore-btn i {
  transition: transform 0.2s ease;
}

.pathway-explore-btn:hover i {
  transform: translateX(3px);
}

/* ==========================================================================
   CURRICULUM EXPLORER SYSTEM (Pinned Scroll-Driven Interactive Storytelling)
   ========================================================================== */
.curriculum-explorer-section {
  position: relative;
  background: transparent;
  margin: 3.5rem 0 5rem;
}

.curriculum-explorer-track {
  position: relative;
  height: 280vh; /* Smooth, natural scrollytelling distance */
}

.curriculum-explorer-frame {
  position: sticky;
  top: 55px;
  height: calc(100vh - 65px);
  max-height: 980px;
  min-height: 680px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 1.5rem;
  overflow: hidden;
  z-index: 10;
}

/* Sticky Explorer Header & Grade Switcher Control Bar */
.curriculum-explorer-header {
  width: 100%;
  max-width: 1420px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 1rem;
  flex-shrink: 0;
}

.curriculum-explorer-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0284c7;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.2rem;
}

.curriculum-explorer-title {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}

/* Grade Switcher Tabs */
.curriculum-grade-switcher {
  display: inline-flex;
  align-items: center;
  background: #ffffff;
  padding: 0.35rem;
  border-radius: 9999px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.05);
  gap: 0.35rem;
}

.curriculum-grade-pill {
  border: none;
  background: transparent;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #64748b;
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.curriculum-grade-pill:hover {
  color: #0284c7;
}

.curriculum-grade-pill.is-active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3);
}

.curriculum-grade-pill .pill-sub {
  font-size: 0.65rem;
  opacity: 0.85;
  font-weight: 600;
}

/* One Large, Elegant White Rounded Architecture Card */
.curriculum-explorer-card {
  position: relative;
  width: 100%;
  max-width: 1420px;
  height: 610px;
  background: #ffffff;
  border-radius: 2.25rem;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: 
    0 30px 65px -15px rgba(15, 23, 42, 0.08),
    0 0 1px 1px rgba(226, 232, 240, 0.7);
  display: flex;
  align-items: stretch;
  overflow: hidden;
  flex-shrink: 0;
}

/* LEFT COLUMN: Narrative, Compact Kit Specs & Integrated Outcomes (~42%) */
.curriculum-card-left {
  flex: 0 0 42%;
  max-width: 42%;
  padding: 2.75rem 2.5rem;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-right: 1px solid rgba(241, 245, 249, 0.95);
  gap: 1.75rem;
}

/* Vertical Subject Spine on Left */
.curriculum-subject-spine {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 1.5rem 0;
  position: relative;
  flex-shrink: 0;
  width: 24px;
}

.curriculum-spine-line {
  position: absolute;
  top: 15%;
  bottom: 15%;
  width: 2px;
  background: #e2e8f0;
  z-index: 1;
}

.curriculum-spine-node {
  position: relative;
  z-index: 2;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #cbd5e1;
  border: 2.5px solid #ffffff;
  transition: all 0.3s ease;
}

.curriculum-spine-node.is-active {
  background: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.2);
  transform: scale(1.3);
}

/* Content Area inside Left Column */
.curriculum-subject-content-area {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
}

.curriculum-subject-moment {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.curriculum-subject-moment.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.curriculum-subject-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0284c7;
  margin-bottom: 0.35rem;
}

.curriculum-subject-title {
  font-family: var(--font-headline, sans-serif);
  font-size: clamp(2rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  color: #0f172a;
  line-height: 1.05;
  margin-bottom: 0.35rem;
}

.curriculum-subject-sub {
  font-family: var(--font-headline, sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.curriculum-accent-line {
  width: 44px;
  height: 3.5px;
  background: #00d2ff;
  border-radius: 9999px;
  margin-bottom: 0.9rem;
}

.curriculum-subject-lead {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #475569;
  margin-bottom: 0.9rem;
}

/* Compact Kit / Specs Badge */
.curriculum-kit-specs-pill {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.55rem 0.85rem;
  font-size: 0.78rem;
  color: #334155;
  margin-bottom: 0.75rem;
}

.curriculum-kit-specs-pill strong {
  color: #0f172a;
}

.curriculum-featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  color: #0284c7;
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  width: fit-content;
  margin-bottom: 0.9rem;
}

/* Integrated Learning Outcomes Box */
.curriculum-outcomes-block {
  background: #fdfefe;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.8rem;
}

.curriculum-outcomes-heading {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.curriculum-outcomes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.curriculum-outcomes-list li {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #475569;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.curriculum-outcomes-list li i {
  color: #00d2ff;
  font-size: 0.75rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

/* RIGHT COLUMN: Subject-Tailored 3D Visual Stage (~58%) */
.curriculum-card-right {
  flex: 0 0 58%;
  max-width: 58%;
  position: relative;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 2rem;
  overflow: hidden;
}

.curriculum-visual-canvas-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 1.75rem;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.curriculum-visual-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.curriculum-visual-scene.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}

.curriculum-scene-img {
  max-width: 100%;
  max-height: 80%;
  object-fit: contain;
  border-radius: 1.25rem;
  filter: drop-shadow(0 15px 25px rgba(15, 23, 42, 0.08));
  transition: transform 0.4s ease;
}

.curriculum-scene-caption {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  margin-top: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Tablet & Mobile Fallback for Curriculum Explorer */
@media (max-width: 991.98px) {
  .pathways-circuit-line {
    display: none;
  }
  .curriculum-explorer-frame {
    position: relative;
    top: 0;
    height: auto;
    max-height: none;
    padding: 0 1rem;
  }
  .curriculum-explorer-track {
    height: auto;
  }
  .curriculum-explorer-card {
    flex-direction: column;
    height: auto;
    max-height: none;
    border-radius: 1.5rem;
  }
  .curriculum-card-left {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 2rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .curriculum-card-right {
    flex: 1 1 100%;
    max-width: 100%;
    min-height: 340px;
    padding: 1.5rem;
  }
}

/* ==========================================================================
   DEDICATED CURRICULUM DETAIL PAGE STYLES
   ========================================================================== */

.curriculum-detail-root {
  position: relative;
  min-height: 100vh;
}

/* Sticky Grade Navigation Bar */
.curriculum-sticky-grade-nav-wrap {
  position: sticky;
  top: 80px;
  z-index: 100;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.curriculum-grade-nav-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(14, 165, 233, 0.25);
  border-radius: 9999px;
  padding: 0.65rem 1.4rem;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(14, 165, 233, 0.05);
  transition: all 0.3s ease;
}

.curriculum-grade-nav-card:hover {
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 12px 30px -5px rgba(14, 165, 233, 0.12);
}

.curriculum-nav-grade-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.45rem 1.15rem;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #334155;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  line-height: 1.25;
}

.curriculum-nav-grade-btn .grade-nav-label {
  font-family: var(--font-headline, sans-serif);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

.curriculum-nav-grade-btn .grade-nav-model {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  color: #64748b;
  font-weight: 600;
}

.curriculum-nav-grade-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  transform: translateY(-1px);
}

.curriculum-nav-grade-btn.is-active {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.curriculum-nav-grade-btn.is-active .grade-nav-label {
  color: #ffffff;
}

.curriculum-nav-grade-btn.is-active .grade-nav-model {
  color: rgba(255, 255, 255, 0.88);
}

/* Subject Chapter Cards */
.curriculum-chapter-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 2.25rem;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.curriculum-chapter-card:hover {
  border-color: rgba(14, 165, 233, 0.3);
  box-shadow: 0 24px 50px -15px rgba(14, 165, 233, 0.1);
}

.curriculum-chapter-watermark {
  position: absolute;
  right: 2rem;
  top: -1.5rem;
  font-size: 11rem;
  font-weight: 900;
  color: rgba(14, 165, 233, 0.035);
  line-height: 1;
  user-select: none;
  pointer-events: none;
  z-index: 1;
}

/* Editorial Large Visual Stage with Airy Negative Space */
.curriculum-editorial-visual-stage {
  background: radial-gradient(circle at center, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  padding: 3.5rem 2rem;
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04);
}

.curriculum-editorial-backdrop-glow {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.14), transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 1;
}

.curriculum-floating-visual-wrap {
  position: relative;
  z-index: 2;
  animation: scienceFloat 6s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@keyframes scienceFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-9px);
  }
}

.curriculum-editorial-large-img {
  max-height: 420px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 35px rgba(15, 23, 42, 0.09));
  transition: transform 0.4s ease;
}

.curriculum-chapter-card:hover .curriculum-editorial-large-img {
  transform: scale(1.025);
}

.curriculum-editorial-kit-tag {
  position: relative;
  z-index: 3;
}

/* Three Large Clean Statistics (Zero Tiny Cards) */
.curriculum-editorial-stats-row {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
}

.curriculum-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.curriculum-stat-num {
  font-family: var(--font-headline, sans-serif);
  font-size: 1.85rem;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.curriculum-stat-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

/* Outcomes Clean Vertical List with Breathing Room */
.curriculum-editorial-outcomes {
  padding-top: 0.5rem;
}

.curriculum-editorial-outcomes-list li {
  padding-left: 0.25rem;
  transition: transform 0.2s ease;
}

.curriculum-editorial-outcomes-list li:hover {
  transform: translateX(3px);
}

.curriculum-outcome-bullet {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #0ea5e9;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.6);
  flex-shrink: 0;
  margin-top: 0.55rem;
}

/* Bottom CTA */
.curriculum-bottom-cta {
  background: linear-gradient(135deg, #090e17 0%, #0f172a 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
}

.curriculum-cta-glow {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(14, 165, 233, 0.25), transparent 70%);
  pointer-events: none;
}

/* Mobile Adjustments for Curriculum Detail */
@media (max-width: 991.98px) {
  .curriculum-editorial-visual-stage {
    min-height: 340px;
    padding: 2rem 1.5rem;
  }
  .curriculum-editorial-large-img {
    max-height: 300px;
  }
  .curriculum-stat-num {
    font-size: 1.45rem;
  }
}

@media (max-width: 767.98px) {
  .curriculum-sticky-grade-nav-wrap {
    top: 65px;
  }
  .curriculum-grade-nav-card {
    border-radius: 1.25rem;
    padding: 0.75rem 1rem;
  }
  .curriculum-nav-grade-btn {
    padding: 0.35rem 0.75rem;
  }
  .curriculum-chapter-card {
    border-radius: 1.5rem;
    padding: 1.25rem;
  }
  .curriculum-chapter-watermark {
    font-size: 6rem;
  }
  .curriculum-stat-num {
    font-size: 1.2rem;
  }
  .curriculum-stat-label {
    font-size: 0.65rem;
  }
}