/* ==================== VARIABLES & RESETS ==================== */
:root {
    /* NovaFix Theme Colors */
    --brand-neon-blue: #00E5FF;
    --brand-electric-blue: #0A66C2;
    --brand-neon-orange: #FF6A00;
    
    --bg-dark-core: #05070A;
    --bg-dark-panel: #121826;
    
    --text-primary: #FFFFFF;
    --text-secondary: #94A3B8;

    /* Typography */
    --font-body: 'DM Sans', sans-serif;
    --font-tech: 'Orbitron', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark-core);
    color: var(--text-primary);
    font-family: var(--font-body);
    /* THIS ALLOWS SCROLLING */
    overflow-x: hidden;
    overflow-y: auto; 
}

a { text-decoration: none; }
li { list-style: none; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ==================== PRELOADER ==================== */
.preload {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-dark-core);
    z-index: 9999;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.preload.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-wrapper { position: relative; width: 180px; height: 180px; display: flex; justify-content: center; align-items: center; }
.loader-logo-img { width: 100px; z-index: 2; animation: pulse 2s infinite alternate; }
.loader-ring { position: absolute; border-radius: 50%; border: 3px solid transparent; width: 100%; height: 100%; }
.loader-ring.blue-glow { border-top-color: var(--brand-neon-blue); box-shadow: 0 -5px 15px rgba(0, 229, 255, 0.4); animation: spin 1.5s linear infinite; }
.loader-ring.orange-glow { border-bottom-color: var(--brand-neon-orange); width: 140px; height: 140px; animation: spin-reverse 1.2s linear infinite; }
.preload-text { margin-top: 20px; font-family: var(--font-tech); color: var(--brand-neon-blue); letter-spacing: 2px; }

@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes spin-reverse { 100% { transform: rotate(-360deg); } }
@keyframes pulse { 100% { transform: scale(1.05); filter: drop-shadow(0 0 10px rgba(0,229,255,0.5)); } }

/* ==================== TOP BAR ==================== */
.nova-topbar {
    background-color: var(--bg-dark-core);
    border-bottom: 1px solid rgba(0, 229, 255, 0.15);
    padding: 8px 0; font-size: 0.9rem; font-family: var(--font-tech); color: var(--text-secondary);
}
.nova-topbar-inner { display: flex; justify-content: space-between; align-items: center; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 15px; }
.tech-icon { color: var(--brand-neon-orange); margin-right: 5px; }
.topbar-divider { color: rgba(255, 255, 255, 0.2); }
.topbar-link { color: var(--text-secondary); transition: 0.3s; }
.topbar-link:hover { color: var(--brand-neon-blue); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); }

/* ==================== HEADER (GLASSMORPHISM) ==================== */
.nova-header {
    position: fixed; 
    top: 35px; 
    left: 0; 
    width: 100%;
    
    /* True Glassmorphism: Very transparent background with a strong blur */
    background: rgba(5, 7, 10, 0.25); 
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    
    /* Subtle neon/glass border at the bottom */
    border-bottom: 1px solid rgba(0, 229, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    
    z-index: 1000; 
    transition: transform 0.4s ease, top 0.3s ease;
}

.nova-header.hidden { 
    transform: translateY(-100%); 
}

/* 1. Force the header inner container to be strictly 30px tall */
.nova-header-inner { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 60px;  /* Locks the height to exactly 30px */
    padding: 0 20px; /* Keeps left/right spacing, removes top/bottom padding */
}

/* 2. Give the logo wrapper a fixed width so it holds its place in the row */
.nova-logo {
    position: relative; 
    width: 220px; /* Creates invisible space so the menu doesn't slide left */
    height: 100%; /* Matches the 30px parent */
}

/* 3. Make the image absolute so it "hangs out" of the thin navbar */
.nova-logo img {
    position: absolute;
    top: -20px; /* Adjust this number to move the logo up or down */
    left: 0;
    max-height: 200px; /* Your massive logo size */
    width: auto;
    object-fit: contain;
    z-index: 1001; /* Keeps the logo visually on top of everything */
}

.nova-nav-list { display: flex; gap: 30px; align-items: center; }

.nova-nav-link {
    position: relative; color: var(--text-primary); font-family: var(--font-body);
    font-weight: 500; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1.5px;
    padding: 10px 0; display: flex; align-items: center; cursor: pointer;
}
.nav-glow {
    position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
    background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); transition: width 0.3s ease;
}
.nova-nav-link:hover .nav-glow, .nova-nav-link.active .nav-glow { width: 100%; }
.nova-nav-link:hover .nav-text, .nova-nav-link.active .nav-text { color: var(--brand-neon-blue); text-shadow: 0 0 8px rgba(0, 229, 255, 0.3); }

.nova-btn-small {
    background: rgba(255, 106, 0, 0.1); border: 1px solid var(--brand-neon-orange);
    color: var(--brand-neon-orange); padding: 8px 20px; font-family: var(--font-tech);
    font-size: 0.9rem; text-transform: uppercase; border-radius: 3px; transition: 0.3s;
}

.nova-btn-small:hover { background: var(--brand-neon-orange); color: #fff; box-shadow: 0 0 15px rgba(255, 106, 0, 0.5); }
.nova-mobile-toggle { display: none; color: var(--brand-neon-blue); font-size: 1.8rem; background: transparent; border: none; cursor: pointer; }

/* ==================== HERO SECTION ==================== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.hero-video-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; overflow: hidden; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.dark-tech-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(5, 7, 10, 0.85) 0%, rgba(10, 102, 194, 0.4) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 900px; }
.tech-accent { color: var(--brand-neon-orange); font-family: var(--font-tech); letter-spacing: 4px; margin-bottom: 20px; }
.font-tech { font-family: var(--font-tech); text-transform: uppercase; font-size: 3.5rem; line-height: 1.2; text-shadow: 0 0 20px rgba(0, 229, 255, 0.3); margin-bottom: 20px; }
#typewriter { border-right: 3px solid var(--brand-neon-orange); animation: blink 0.7s infinite; }
@keyframes blink { 50% { border-color: transparent; } }

.hero-text { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 40px; line-height: 1.6; max-width: 700px; margin-left: auto; margin-right: auto; }

.tech-btn {
    display: inline-flex; align-items: center; gap: 10px; padding: 15px 35px;
    background: transparent; border: 1px solid var(--brand-neon-blue); color: var(--text-primary);
    font-family: var(--font-tech); text-transform: uppercase; letter-spacing: 2px;
    box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1), 0 0 15px rgba(0, 229, 255, 0.2); transition: 0.3s;
}
.tech-btn:hover { background: rgba(0, 229, 255, 0.15); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.4), 0 0 30px rgba(0, 229, 255, 0.5); }

/* Responsive basics */
@media (max-width: 991px) {
    .nova-topbar, .nova-nav, .nova-btn-small { display: none; }
    .nova-header { top: 0; padding: 10px 0; }
    .nova-mobile-toggle { display: block; }
    .font-tech { font-size: 2.2rem; }
}

/* ==================== NOVAFIX ABOUT SECTION ==================== */
.nova-about {
    position: relative;
    background-color: var(--bg-dark-core);
    padding: 100px 20px;
    overflow: hidden;
    color: var(--text-primary);
}

/* Ambient Glowing Backgrounds */
.nova-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.nova-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: float 10s infinite alternate; }
.nova-orb--blue { width: 500px; height: 500px; background: var(--brand-neon-blue); top: -100px; left: -100px; }
.nova-orb--orange { width: 400px; height: 400px; background: var(--brand-neon-orange); bottom: -100px; right: -50px; animation-delay: -5s; }
.nova-grid-overlay { position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 229, 255, 0.1) 1px, transparent 1px); background-size: 30px 30px; opacity: 0.4; }

@keyframes float {
    0% { transform: translateY(0px) scale(1); }
    100% { transform: translateY(30px) scale(1.1); }
}

.nova-wrapper { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }

/* Header Typography */
.nova-header-section { text-align: center; margin-bottom: 60px; }
.nova-eyebrow { font-family: var(--font-tech); color: var(--brand-neon-orange); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 3px; display: block; margin-bottom: 15px; }
.nova-headline { font-family: var(--font-body); font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 700; line-height: 1.2; }
.glow-text { font-style: normal; color: var(--brand-neon-blue); text-shadow: 0 0 15px rgba(0, 229, 255, 0.4); }

/* Glassmorphism Dashboard Layout */
.nova-body {
    display: grid;
    grid-template-columns: 320px 1fr;
    background: rgba(18, 24, 38, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05);
    overflow: hidden;
}

/* Vertical Navigation */
.nova-tab-nav {
    display: flex;
    flex-direction: column;
    background: rgba(5, 7, 10, 0.6);
    border-right: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-tab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 25px 20px; background: transparent; border: none;
    border-left: 3px solid transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer; transition: all 0.3s ease; text-align: left;
}

.nova-tab:hover { background: rgba(0, 229, 255, 0.05); }
.nova-tab.active { 
    background: rgba(0, 229, 255, 0.08); 
    border-left: 3px solid var(--brand-neon-blue); 
    box-shadow: inset 10px 0 20px rgba(0, 229, 255, 0.05);
}

.nova-tab-num { font-family: var(--font-tech); font-size: 1.1rem; color: var(--text-secondary); }
.nova-tab-label { font-family: var(--font-body); font-size: 1.2rem; color: var(--text-secondary); font-weight: 500; flex: 1; margin-left: 15px; }
.nova-tab-arrow { color: transparent; font-size: 0.9rem; transition: 0.3s; transform: translateX(-10px); }

.nova-tab.active .nova-tab-num, .nova-tab.active .nova-tab-label { color: var(--text-primary); }
.nova-tab.active .nova-tab-arrow { color: var(--brand-neon-orange); transform: translateX(0); }

/* Panels */
.nova-panels { position: relative; min-height: 350px; padding: 40px; }
.nova-panel { position: absolute; top: 40px; left: 40px; right: 40px; opacity: 0; transform: translateY(15px); pointer-events: none; transition: all 0.4s ease; }
.nova-panel.active { opacity: 1; transform: translateY(0); pointer-events: auto; position: relative; top: 0; left: 0; right: 0; }

.nova-panel-text { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 20px; }
.nova-pillars { list-style: none; display: flex; flex-direction: column; gap: 15px; margin-top: 30px; }
.nova-pillars li { display: flex; align-items: center; gap: 15px; font-size: 1.1rem; font-weight: 500; color: var(--text-primary); }
.text-neon-blue { color: var(--brand-neon-blue); font-size: 1.3rem; }
.text-neon-orange { color: var(--brand-neon-orange); font-size: 1.3rem; }

/* Stats Metrics */
.nova-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.nova-stat { 
    background: rgba(18, 24, 38, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: 30px; border-radius: 8px; text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05); transition: 0.3s;
}
.nova-stat:hover { transform: translateY(-5px); }
.nova-stat-blue:hover { border-color: var(--brand-neon-blue); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.15); }
.nova-stat-orange:hover { border-color: var(--brand-neon-orange); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.15); }

.nova-stat-top { display: flex; justify-content: center; align-items: baseline; margin-bottom: 10px; font-family: var(--font-tech); }
.nova-stat-num { font-size: 3.5rem; font-weight: 700; color: var(--text-primary); }
.nova-stat-blue .nova-stat-num { color: var(--brand-neon-blue); }
.nova-stat-orange .nova-stat-num { color: var(--brand-neon-orange); }
.nova-stat-plus { font-size: 1.5rem; color: var(--text-secondary); margin-left: 5px; }

.nova-stat-label { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-secondary); }

.nova-cta { text-align: center; margin-top: 50px; }

/* Responsive Dashboard */
@media (max-width: 991px) {
    .nova-body { grid-template-columns: 1fr; }
    .nova-tab-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid rgba(0, 229, 255, 0.1); }
    .nova-tab { flex-shrink: 0; border-left: none; border-bottom: 3px solid transparent; padding: 15px 20px; }
    .nova-tab.active { border-left: none; border-bottom: 3px solid var(--brand-neon-blue); }
    .nova-tab-arrow { display: none; }
    .nova-stats { grid-template-columns: 1fr; }
    .nova-panels { padding: 30px 20px; }
}

/* ==================== NOVAFIX SERVICES (HONEYCOMB) ==================== */

/* ==================== NOVAFIX SERVICES (PRECISION HONEYCOMB) ==================== */
.nova-services {
  padding: 120px 0;
  background-color: var(--bg-dark-core);
  position: relative;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

/* --- Ambient Floating Orbs --- */
.honeycomb-ambient { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: floatOrb 20s infinite alternate ease-in-out; }
.orb-1 { width: 500px; height: 500px; background: var(--brand-neon-blue); top: -10%; left: -10%; }
.orb-2 { width: 400px; height: 400px; background: var(--brand-neon-orange); top: 50%; right: -10%; animation-delay: -5s; }
.orb-3 { width: 300px; height: 300px; background: var(--brand-neon-blue); bottom: -10%; left: 30%; animation-delay: -10s; }

@keyframes floatOrb { 100% { transform: translate(50px, -50px) scale(1.1); } }

/* --- Precision Honeycomb Grid Mathematics --- */
.honeycomb-grid {
  display: flex;
  flex-wrap: wrap;
  width: 720px; /* STRICT WIDTH: 3 Hexagons (220px) + Margins (20px) = 240 * 3 = 720px */
  margin: 60px auto 0;
  padding-bottom: 20px;
}

/* 3D Wrapper */
.hex-wrapper {
  display: block; text-decoration: none;
  width: 220px; height: 254px; /* Exact Hex Proportion: 220 * 1.1547 = 254 */
  margin: -60px 10px 0 10px; /* -60px pulls rows up to interlock */
  perspective: 1200px;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.6)); /* Shadow applied to wrapper, not clipped area */
  outline: none;
}

/* Top Row - Remove negative top margin */
.hex-wrapper:nth-child(-n+3) { margin-top: 0; }

/* Desktop Offset Rows (The 3-2-3-2 pattern logic) */
.offset-hex { margin-left: 130px; } /* Pushes Item 4 into the gap between Item 1 & 2 */
.offset-hex-bottom { margin-left: 130px; } /* Pushes Item 9 into the gap between Item 6 & 7 */

/* --- 3D Flipping Mechanics --- */
.hex-flipper {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hex-wrapper:hover .hex-flipper { transform: rotateY(180deg); }

.hex-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  /* Pure CSS Hexagon Shape */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hex-front { transform: rotateY(0deg); z-index: 2; }
.hex-back { transform: rotateY(180deg); z-index: 1; }

/* --- Glowing Border Hack (Nested Clip-Paths) --- */
.hex-border {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--brand-neon-blue), transparent 40%, rgba(0, 229, 255, 0.2));
  padding: 2px; /* This padding creates the border thickness */
  transition: all 0.4s ease;
}
.hex-border.theme-orange { background: linear-gradient(135deg, var(--brand-neon-orange), transparent 40%, rgba(255, 106, 0, 0.2)); }

.hex-wrapper:hover .hex-border { background: linear-gradient(135deg, var(--brand-neon-blue), rgba(0, 229, 255, 0.6)); }
.hex-wrapper:hover .hex-border.theme-orange { background: linear-gradient(135deg, var(--brand-neon-orange), rgba(255, 106, 0, 0.6)); }

/* --- Inner Glassmorphism --- */
.hex-inner {
  width: 100%; height: 100%;
  background: rgba(18, 24, 38, 0.85); /* Dark Glass */
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  /* Inner Hexagon Shape */
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 25px;
}
.bg-solid { background: var(--bg-dark-core); } /* Opaque back for readability */

/* --- Content Styling --- */
.hex-icon { font-size: 2.8rem; color: var(--brand-neon-blue); margin-bottom: 15px; transition: transform 0.4s ease; filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.4)); }
.hex-icon.text-neon-orange { filter: drop-shadow(0 0 10px rgba(255, 106, 0, 0.4)); }
.hex-wrapper:hover .hex-icon { transform: scale(1.15); }

.hex-inner h3 { font-family: var(--font-body); font-size: 1.15rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.hex-tagline { font-family: var(--font-tech); font-size: 0.75rem; color: var(--brand-neon-blue); text-transform: uppercase; letter-spacing: 2px; }

.hex-inner p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 15px; }

.hex-btn { font-family: var(--font-tech); font-size: 0.75rem; color: var(--brand-neon-blue); text-transform: uppercase; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
.hex-btn.text-neon-orange { color: var(--brand-neon-orange); }

/* --- Responsive Layout Adjustments --- */

/* Tablet: Change to 2-1-2-1-2-1-1 pattern */
@media (max-width: 768px) {
  .honeycomb-grid { 
    width: 480px; /* 2 Hexagons (220) + Margins (20) = 480 */
  }
  
  /* Reset margins */
  .hex-wrapper { margin-top: -60px; }
  .offset-hex, .offset-hex-bottom { margin-left: 10px; } /* Disable desktop offsets */
  
  /* Top row is now only 2 items */
  .hex-wrapper:nth-child(-n+3) { margin-top: -60px; }
  .hex-wrapper:nth-child(-n+2) { margin-top: 0; }
  
  /* New Tablet Offsets (Every 3rd item is pushed right) */
  .hex-wrapper:nth-child(3n+3) { margin-left: 130px; }
}

/* Mobile: Change to vertical stack to prevent breakage */
@media (max-width: 550px) {
  .honeycomb-grid { width: 100%; flex-direction: column; align-items: center; }
  /* Remove negative margins for a clean vertical stack */
  .hex-wrapper { margin: 10px 0 !important; }
}

/* ==================== NOVAFIX AI ENGINE SECTION ==================== */
.nova-ai-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  color: var(--text-primary);
}

.nova-ai-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: 
    linear-gradient(to right, rgba(0, 229, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 229, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

.nova-ai-container {
  display: flex; align-items: center; justify-content: space-between; gap: 60px; position: relative; z-index: 2;
}

/* --- Left Side: Content & Grid --- */
.nova-ai-content { flex: 1; max-width: 600px; }
.nova-title { font-size: clamp(2.5rem, 4vw, 3.5rem); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 20px rgba(0, 229, 255, 0.3); }
.nova-text { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.7; margin-bottom: 40px; }

.nova-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.nova-ai-card {
  background: rgba(18, 24, 38, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 10px;
  padding: 25px; transition: all 0.4s ease; cursor: crosshair;
  position: relative; overflow: hidden;
}

.nova-ai-card::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-neon-blue), transparent);
  transform: translateX(-100%); transition: 0.5s ease;
}

.nova-ai-card:hover::before { transform: translateX(100%); }
.nova-ai-card:hover { border-color: rgba(0, 229, 255, 0.3); background: rgba(18, 24, 38, 0.8); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.1); transform: translateY(-5px); }

.ai-card-icon { font-size: 2rem; color: var(--brand-neon-orange); margin-bottom: 15px; transition: 0.3s; }
.nova-ai-card:hover .ai-card-icon { color: var(--brand-neon-blue); text-shadow: 0 0 15px var(--brand-neon-blue); }

.nova-ai-card h3 { font-family: var(--font-tech); font-size: 1.1rem; color: var(--text-primary); margin-bottom: 10px; letter-spacing: 1px; text-transform: uppercase; }
.nova-ai-card p { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }

/* --- Right Side: Interactive Visualizer --- */
.nova-ai-visualizer {
  flex: 1; display: flex; justify-content: center; align-items: center;
  perspective: 1000px; min-height: 500px;
}

.ai-core-wrapper {
  position: relative; width: 400px; height: 400px;
  display: flex; justify-content: center; align-items: center;
  transform-style: preserve-3d; transition: transform 0.1s ease-out;
}

/* Central Glowing Sphere */
.ai-core-sphere {
  position: absolute; width: 120px; height: 120px;
  background: radial-gradient(circle, var(--brand-neon-blue) 0%, #05070a 80%);
  border-radius: 50%; box-shadow: 0 0 50px var(--brand-neon-blue), inset 0 0 20px #fff;
  display: flex; justify-content: center; align-items: center;
  z-index: 10; animation: corePulse 3s infinite alternate;
}

.core-icon { font-size: 3rem; color: #fff; filter: drop-shadow(0 0 5px #fff); }

@keyframes corePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 30px var(--brand-neon-blue); }
  100% { transform: scale(1.05); box-shadow: 0 0 80px var(--brand-neon-blue), 0 0 20px var(--brand-neon-orange); }
}

/* Orbiting Rings */
.ai-ring {
  position: absolute; border-radius: 50%; border: 1px solid rgba(0, 229, 255, 0.3);
  border-top: 2px solid var(--brand-neon-orange); border-bottom: 2px solid var(--brand-neon-blue);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.1);
}

.ai-ring-1 { width: 200px; height: 200px; animation: spinRing 8s linear infinite; }
.ai-ring-2 { width: 300px; height: 300px; animation: spinRingReverse 12s linear infinite; border-left: 2px solid var(--brand-neon-blue); }
.ai-ring-3 { width: 420px; height: 420px; animation: spinRing 20s linear infinite; opacity: 0.5; border: 1px dashed var(--brand-neon-orange); }

@keyframes spinRing { 0% { transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(60deg) rotateY(0deg) rotateZ(360deg); } }
@keyframes spinRingReverse { 0% { transform: rotateX(70deg) rotateY(20deg) rotateZ(360deg); } 100% { transform: rotateX(70deg) rotateY(20deg) rotateZ(0deg); } }

/* Floating Data Nodes */
.ai-node { position: absolute; width: 6px; height: 6px; background: #fff; border-radius: 50%; box-shadow: 0 0 10px #fff; }
.node-a { top: 10%; left: 20%; animation: float 4s infinite alternate; }
.node-b { bottom: 20%; right: 10%; animation: float 5s infinite alternate-reverse; }
.node-c { top: 50%; left: 80%; animation: float 3s infinite alternate; }

/* Responsive */
@media (max-width: 991px) {
  .nova-ai-container { flex-direction: column; text-align: center; }
  .nova-ai-content { max-width: 100%; }
  .nova-ai-visualizer { margin-top: 40px; transform: scale(0.8); }
}
@media (max-width: 576px) {
  .nova-ai-grid { grid-template-columns: 1fr; }
  .nova-ai-visualizer { display: none; /* Hide complex 3D on very small screens to save performance */ }
}

/* ==================== NOVAFIX CONTACT SECTION ==================== */
.nova-contact-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 100px 0;
  overflow: hidden;
  color: var(--text-primary);
  z-index: 1;
}

/* Ambient Background */
.nova-contact-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nova-orb--blue-left { width: 600px; height: 600px; background: var(--brand-neon-blue); top: 10%; left: -200px; }
.nova-orb--orange-right { width: 500px; height: 500px; background: var(--brand-neon-orange); bottom: -100px; right: -150px; animation-delay: -3s; }

.nova-contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* --- Left Side: Content --- */
.nova-contact-content { flex: 1; min-width: 300px; }
.nova-contact-title { font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--text-primary); margin-bottom: 20px; line-height: 1.2; text-transform: uppercase; letter-spacing: 2px; }
.nova-contact-text { color: var(--text-secondary); font-family: var(--font-body); font-size: 1.2rem; line-height: 1.6; margin-bottom: 40px; }

/* Secure Privacy Badge */
.nova-privacy-badge {
  display: flex; align-items: flex-start; gap: 20px; padding: 25px;
  background: rgba(0, 229, 255, 0.05); backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 255, 0.2); border-left: 4px solid var(--brand-neon-blue);
  border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.shield-icon-wrapper { position: relative; font-size: 2.5rem; color: var(--brand-neon-blue); overflow: hidden; }
/* Scanning animation over the shield */
.scan-line { position: absolute; top: -100%; left: 0; width: 100%; height: 5px; background: rgba(0, 229, 255, 0.8); box-shadow: 0 0 15px var(--brand-neon-blue); animation: scanner 3s infinite linear; }
@keyframes scanner { 0% { top: -20%; opacity: 0; } 50% { opacity: 1; } 100% { top: 120%; opacity: 0; } }

.nova-privacy-text h5 { color: var(--brand-neon-blue); font-family: var(--font-tech); font-size: 1.1rem; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 1px; }
.nova-privacy-text p { color: var(--text-secondary); font-size: 1rem; line-height: 1.5; margin: 0; }

/* --- Right Side: Glassmorphism Form --- */
.nova-contact-form-card {
  flex: 1; min-width: 350px;
  background: rgba(18, 24, 38, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  padding: 40px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.05);
  position: relative; z-index: 2;
}

/* Terminal Input Groups */
.nova-form-group {
  position: relative; margin-bottom: 20px; display: flex; align-items: center;
  background-color: rgba(5, 7, 10, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px; transition: 0.3s ease;
}

.nova-form-row { display: flex; gap: 20px; }
.nova-form-row .nova-form-group { flex: 1; width: 100%; }

/* Neon Focus State */
.nova-form-group:focus-within {
  border-color: var(--brand-neon-blue);
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.2);
}
.nova-form-group:focus-within .nova-input-icon { color: var(--brand-neon-orange); }

.nova-input-icon {
  width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary); border-right: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 1.2rem; flex-shrink: 0; transition: 0.3s ease;
}

.nova-form-control {
  width: 100%; height: 50px; border: none; padding: 0 15px;
  font-family: var(--font-body); font-size: 1rem; color: var(--text-primary);
  background: transparent; outline: none;
}
.nova-form-control::placeholder { color: rgba(255, 255, 255, 0.3); font-family: var(--font-tech); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; }

textarea.nova-form-control { height: 120px; padding-top: 15px; resize: vertical; }
.nova-form-icon-textarea { height: 120px; align-self: flex-start; }

/* Customizing Select for Dark Mode */
.nova-country-select { border: none; background: transparent; width: auto; padding: 0 10px; font-weight: bold; color: var(--brand-neon-blue); border-right: 1px solid rgba(255, 255, 255, 0.1); outline: none; cursor: pointer; }
.nova-custom-select { color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.nova-custom-select option, .nova-country-select option { background-color: var(--bg-dark-panel); color: var(--text-primary); }
.nova-custom-select optgroup { color: var(--brand-neon-orange); font-style: normal; font-weight: bold; background-color: var(--bg-dark-core); }

/* Cyber Submit Button */
.nova-btn-submit {
  width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px;
  background-color: transparent; color: var(--brand-neon-orange);
  font-family: var(--font-tech); font-size: 1.1rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px;
  padding: 18px; border: 1px solid var(--brand-neon-orange); border-radius: 6px;
  cursor: pointer; transition: 0.3s; margin-top: 15px; position: relative; overflow: hidden;
}
.nova-btn-submit::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 106, 0, 0.2); transition: 0.4s ease; z-index: 0; }
.nova-btn-submit:hover::before { left: 0; }
.nova-btn-submit:hover { box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); }
.nova-btn-submit span, .nova-btn-submit i { position: relative; z-index: 1; }

/* Scroll Animation Initial States */
.reveal-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal-left.active, .reveal-right.active { opacity: 1; transform: translateX(0); }

/* Mobile Responsive */
@media (max-width: 900px) {
  .nova-contact-wrapper { flex-direction: column; text-align: left; }
  .nova-contact-content { margin-bottom: 20px; }
}
@media (max-width: 576px) {
  .nova-contact-form-card { min-width: 100%; padding: 25px 20px; }
  .nova-form-row { flex-direction: column; gap: 0; }
  .nova-contact-title { font-size: 2rem; }
}


/* ==================== NOVAFIX FOOTER ==================== */
.nova-footer {
  position: relative;
  background-color: #030407; /* Deepest black for the absolute bottom */
  color: var(--text-secondary);
  font-family: var(--font-body);
  overflow: hidden;
  z-index: 10;
}

/* Glowing Top Border */
.nova-footer-cyber-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand-neon-blue) 50%, transparent 100%);
  box-shadow: 0 0 15px var(--brand-neon-blue);
  opacity: 0.7;
}

/* Subtle Ambient Glow inside footer */
.nova-footer-ambient {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%; height: 200px;
  background: radial-gradient(ellipse at top, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.nova-footer-body {
  padding: 80px 20px 60px;
}

.nova-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 50px;
}

/* --- Brand Column --- */
.nova-footer-logo img {
  max-height: 250px;
  margin-bottom: 25px;
}

.nova-brand-description {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 25px;
  max-width: 350px;
}

/* Status Indicator */
.nova-system-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 255, 136, 0.05);
  border: 1px solid rgba(0, 255, 136, 0.2);
  padding: 8px 15px;
  border-radius: 50px;
  margin-bottom: 30px;
}

.status-dot {
  width: 8px; height: 8px;
  background-color: #00FF88;
  border-radius: 50%;
  box-shadow: 0 0 8px #00FF88;
  animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(0, 255, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

.status-text {
  color: #00FF88;
  font-family: var(--font-tech);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Social Buttons */
.nova-footer-socials {
  display: flex;
  gap: 15px;
}

.nova-social-btn {
  display: flex; justify-content: center; align-items: center;
  width: 40px; height: 40px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 1.1rem;
  transition: all 0.3s ease;
}

.nova-social-btn:hover {
  background: rgba(0, 229, 255, 0.1);
  border-color: var(--brand-neon-blue);
  color: var(--brand-neon-blue);
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 229, 255, 0.2);
}

/* --- Nav Columns --- */
.nova-footer-heading {
  color: var(--text-primary);
  font-family: var(--font-tech);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  position: relative;
  display: inline-block;
}

.nova-footer-heading::after {
  content: ''; position: absolute; left: 0; bottom: -8px;
  width: 30px; height: 2px;
  background: var(--brand-neon-orange);
}

.nova-footer-links { list-style: none; padding: 0; }
.nova-footer-links li { margin-bottom: 15px; }

.nova-footer-links a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-secondary);
  font-size: 1rem; transition: all 0.3s ease;
}

.nova-footer-links a i {
  font-size: 0.8rem; color: var(--brand-neon-blue);
  opacity: 0; transform: translateX(-10px); transition: all 0.3s ease;
}

.nova-footer-links a:hover { color: var(--brand-neon-blue); transform: translateX(5px); }
.nova-footer-links a:hover i { opacity: 1; transform: translateX(0); }

/* Hiring Badge */
.nova-badge {
  background: rgba(255, 106, 0, 0.1);
  color: var(--brand-neon-orange);
  border: 1px solid var(--brand-neon-orange);
  font-size: 0.65rem; text-transform: uppercase; font-family: var(--font-tech);
  padding: 2px 6px; border-radius: 3px; margin-left: 5px;
}

/* --- Contact List --- */
.nova-footer-contact-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.nova-footer-contact-list li { display: flex; align-items: flex-start; gap: 15px; }

.contact-icon {
  color: var(--brand-neon-orange); font-size: 1.2rem; margin-top: 5px;
}

.contact-details { display: flex; flex-direction: column; }
.contact-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--text-primary); margin-bottom: 3px; opacity: 0.6; }
.contact-details a, .contact-details span { color: var(--text-secondary); font-size: 1rem; transition: 0.3s; }
.contact-details a:hover { color: var(--brand-neon-blue); }

/* --- Bottom Bar --- */
.nova-footer-bottom {
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 25px 20px;
}

.bottom-inner {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px;
}

.copyright-text { font-size: 0.9rem; }

.legal-nav { display: flex; gap: 20px; }
.legal-nav a { color: var(--text-secondary); font-size: 0.9rem; transition: 0.3s; }
.legal-nav a:hover { color: var(--text-primary); text-shadow: 0 0 5px rgba(255,255,255,0.5); }

/* --- Responsive Adjustments --- */
@media (max-width: 1024px) {
  .nova-footer-grid { grid-template-columns: 1fr 1fr; }
  .nova-footer-brand-col { grid-column: span 2; }
}

@media (max-width: 768px) {
  .nova-footer-grid { grid-template-columns: 1fr; }
  .nova-footer-brand-col { grid-column: span 1; }
  .bottom-inner { flex-direction: column; text-align: center; }
  .legal-nav { justify-content: center; }
}

/* Contact US page NOVAFIX */
/* ==================== NOVAFIX INTERNAL PAGE HERO ==================== */
.nova-page-hero {
  position: relative;
  height: 60vh;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-dark-core);
  padding-top: 60px; /* Accounts for the fixed header */
  border-bottom: 1px solid rgba(0, 229, 255, 0.15);
}

/* Ambient Radar Background */
.nova-hero-ambient {
  position: absolute; inset: 0; z-index: 0;
  display: flex; justify-content: center; align-items: center;
  transition: transform 0.1s ease-out;
}

.radar-wrapper {
  position: relative;
  width: 800px; height: 800px;
  display: flex; justify-content: center; align-items: center;
  opacity: 0.3; /* Keeps it subtle behind the text */
}

.radar-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.2);
}
.r-1 { width: 200px; height: 200px; }
.r-2 { width: 400px; height: 400px; }
.r-3 { width: 600px; height: 600px; border: 1px dashed rgba(255, 106, 0, 0.3); }

/* The Sweeping Beam */
.radar-sweep {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 70%, rgba(0, 229, 255, 0.1) 95%, rgba(0, 229, 255, 0.5) 100%);
  animation: radarSpin 4s linear infinite;
}

@keyframes radarSpin { 100% { transform: rotate(360deg); } }

/* Blinking Map Nodes */
.radar-node {
  position: absolute; width: 6px; height: 6px;
  background-color: var(--brand-neon-orange); border-radius: 50%;
  box-shadow: 0 0 10px var(--brand-neon-orange);
  animation: nodePing 2s infinite;
}
.n-1 { top: 25%; left: 35%; animation-delay: 0.5s; }
.n-2 { bottom: 30%; right: 25%; animation-delay: 1.2s; }
.n-3 { top: 60%; left: 65%; animation-delay: 0.8s; background-color: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

@keyframes nodePing { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.5); } }

/* Content Styling */
.nova-page-hero-content {
  position: relative; z-index: 2; text-align: center; max-width: 800px;
}

/* Breadcrumbs */
.nova-breadcrumbs {
  display: flex; justify-content: center; align-items: center; gap: 10px;
  list-style: none; padding: 0; margin-bottom: 20px;
  font-family: var(--font-tech); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px;
}
.nova-breadcrumbs a { color: var(--text-secondary); transition: 0.3s; }
.nova-breadcrumbs a:hover { color: var(--brand-neon-blue); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }
.nova-separator { color: var(--brand-neon-orange); }
.nova-current { color: var(--brand-neon-blue); font-weight: 700; }

/* Titles and Text */
.nova-page-title {
  font-size: clamp(2.5rem, 5vw, 4rem); color: var(--text-primary);
  margin-bottom: 20px; text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);
}
.terminal-cursor { animation: blinkCursor 1s step-end infinite; color: var(--brand-neon-orange); }
@keyframes blinkCursor { 50% { opacity: 0; } }

.nova-page-subtitle {
  font-family: var(--font-body); font-size: 1.2rem; color: var(--text-secondary);
  line-height: 1.6; margin-bottom: 30px;
}

.inline-status { margin-bottom: 0; background: rgba(0, 255, 136, 0.1); backdrop-filter: blur(5px); }

/* ==================== NOVAFIX ABOUT HERO (CYBER-GRID) ==================== */

/* Container for the 3D Grid */
.cyber-grid-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  perspective: 600px; /* Gives the 3D depth */
  z-index: 0;
}

/* Central Horizon Glow (Like a digital sunrise) */
.cyber-horizon-glow {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(0, 229, 255, 0.3) 0%, rgba(255, 106, 0, 0.1) 40%, transparent 70%);
  filter: blur(30px);
  z-index: 1;
}

/* The Infinite Moving Floor */
.cyber-grid {
  position: absolute;
  bottom: -20%;
  width: 200%;
  height: 120%;
  background-image: 
    linear-gradient(rgba(0, 229, 255, 0.3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.3) 1px, transparent 1px);
  background-size: 60px 60px;
  transform-origin: bottom center;
  transform: rotateX(75deg); /* Tilts the grid flat */
  animation: gridMove 3s linear infinite;
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
}

/* Animation makes the grid lines endlessly flow toward the screen */
@keyframes gridMove {
  0% { transform: rotateX(75deg) translateY(0); }
  100% { transform: rotateX(75deg) translateY(60px); } /* Matches background-size */
}

/* Floating Ambient Data Particles */
.data-particle {
  position: absolute;
  width: 3px; height: 15px;
  background: var(--brand-neon-orange);
  box-shadow: 0 0 10px var(--brand-neon-orange);
  opacity: 0;
  animation: dataRise 4s infinite linear;
}

.dp-1 { left: 20%; bottom: -10%; animation-delay: 0s; }
.dp-2 { left: 40%; bottom: -10%; animation-delay: 1.5s; background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }
.dp-3 { left: 70%; bottom: -10%; animation-delay: 0.8s; }
.dp-4 { left: 85%; bottom: -10%; animation-delay: 2.2s; background: var(--brand-neon-blue); }

@keyframes dataRise {
  0% { transform: translateY(0) scaleY(1); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-500px) scaleY(2); opacity: 0; }
}

/* ==================== NOVAFIX WHO WE ARE SECTION ==================== */
.nova-who-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  color: var(--text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nova-who-ambient {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(circle at 80% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
  pointer-events: none;
}

.nova-who-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

/* --- Left Side: Content --- */
.nova-who-content { max-width: 600px; }

.nova-feature-list {
  list-style: none; padding: 0; margin-top: 40px;
  display: flex; flex-direction: column; gap: 25px;
}

.nova-feature-list li {
  display: flex; align-items: flex-start; gap: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px; border-radius: 8px;
  transition: all 0.3s ease;
}

.nova-feature-list li:hover {
  background: rgba(0, 229, 255, 0.05);
  border-color: rgba(0, 229, 255, 0.2);
  transform: translateX(10px);
}

.feature-icon {
  width: 50px; height: 50px;
  background: rgba(255, 106, 0, 0.1);
  color: var(--brand-neon-orange);
  display: flex; justify-content: center; align-items: center;
  font-size: 1.5rem; border-radius: 8px; flex-shrink: 0;
  border: 1px solid rgba(255, 106, 0, 0.2);
}

.nova-feature-list li:hover .feature-icon {
  background: var(--brand-neon-orange);
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 106, 0, 0.4);
}

.feature-text h4 { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-primary); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px; }
.feature-text p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* --- Right Side: Holographic Visualizer --- */
.nova-who-visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 500px;
}

.nova-holo-pane {
  position: relative;
  width: 400px; height: 400px;
  background: rgba(18, 24, 38, 0.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.15);
  box-shadow: inset 0 0 50px rgba(0, 229, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex; justify-content: center; align-items: center;
  animation: floatHolo 6s infinite alternate ease-in-out;
}

@keyframes floatHolo {
  0% { transform: translateY(0px); box-shadow: inset 0 0 50px rgba(0, 229, 255, 0.05), 0 20px 50px rgba(0, 0, 0, 0.5); }
  100% { transform: translateY(-20px); box-shadow: inset 0 0 70px rgba(0, 229, 255, 0.1), 0 40px 60px rgba(0, 0, 0, 0.6); }
}

/* Glowing Core */
.holo-core {
  position: relative;
  display: flex; justify-content: center; align-items: center;
}

.globe-icon {
  font-size: 6rem;
  color: var(--brand-neon-blue);
  filter: drop-shadow(0 0 20px var(--brand-neon-blue));
  z-index: 5;
}

/* Orbiting Rings */
.holo-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.3);
}

.h-ring-1 { width: 180px; height: 180px; border-top: 2px solid var(--brand-neon-blue); animation: spinRing 6s linear infinite; }
.h-ring-2 { width: 240px; height: 240px; border-left: 2px solid var(--brand-neon-orange); animation: spinRingReverse 10s linear infinite; }
.h-ring-3 { width: 300px; height: 300px; border: 1px dashed rgba(0, 229, 255, 0.2); animation: spinRing 15s linear infinite; }

/* Floating Glass Cards */
.holo-float-card {
  position: absolute;
  background: rgba(10, 15, 25, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 12px 20px;
  border-radius: 8px;
  display: flex; align-items: center; gap: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

.card-top-right {
  top: 10%; right: -15%;
  border-right: 3px solid var(--brand-neon-orange);
  animation: floatNode 4s infinite alternate;
}

.card-bottom-left {
  bottom: 15%; left: -20%;
  border-left: 3px solid var(--brand-neon-blue);
  animation: floatNode 5s infinite alternate-reverse;
}

@keyframes floatNode { 0% { transform: translateY(0); } 100% { transform: translateY(-15px); } }

.holo-float-card i { font-size: 1.5rem; }
.card-data { display: flex; flex-direction: column; }
.data-label { font-family: var(--font-tech); font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.data-value { font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-who-grid { grid-template-columns: 1fr; text-align: center; }
  .nova-feature-list li { text-align: left; }
  .nova-who-visual { margin-top: 60px; }
}

@media (max-width: 576px) {
  .nova-holo-pane { width: 300px; height: 300px; }
  .card-top-right { top: -5%; right: 0; }
  .card-bottom-left { bottom: -5%; left: 0; }
}

/* ==================== NOVAFIX WHAT WE DO (CYBER GRID) ==================== */
.nova-wwd-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 100px 0;
  overflow: hidden;
}

.nova-wwd-ambient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
}

.relative-z { position: relative; z-index: 2; }

/* Section Headers */
.nova-section-header { max-width: 1000px; margin: 0 auto 60px; }
.nova-subtitle { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.6; margin-top: 15px; }

/* The Grid */
.nova-wwd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  position: relative;
}

/* Individual Cards (Glassmorphism + Spotlight) */
.nova-wwd-card {
  position: relative;
  background: rgba(18, 24, 38, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

/* 
  The Spotlight Effect: 
  This pseudo-element creates a glowing radial gradient that follows the mouse 
*/
.nova-wwd-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(
    400px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(0, 229, 255, 0.1), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
  pointer-events: none;
}

/* Hover States */
.nova-wwd-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.nova-wwd-card:hover::before {
  opacity: 1; /* Reveals the spotlight on hover */
}

/* Internal Card Content */
.card-content {
  position: relative;
  z-index: 1; /* Keeps text above the spotlight */
  pointer-events: none;
}

.wwd-icon {
  font-size: 2.5rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  transition: all 0.4s ease;
}

.nova-wwd-card:hover .wwd-icon {
  color: var(--brand-neon-orange);
  transform: scale(1.1);
  filter: drop-shadow(0 0 15px rgba(255, 106, 0, 0.5));
}

.nova-wwd-card h3 {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.wwd-tagline {
  font-family: var(--font-tech);
  font-size: 0.75rem;
  color: var(--brand-neon-blue);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.8;
}

/* Subtle Top Border Glow */
.card-border-glow {
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px;
  background: var(--brand-neon-orange);
  box-shadow: 0 0 10px var(--brand-neon-orange);
  transition: width 0.4s ease;
}

.nova-wwd-card:hover .card-border-glow { width: 100%; }

/* Responsive adjustments */
@media (max-width: 768px) {
  .nova-wwd-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .nova-wwd-card { padding: 30px 15px; }
  .wwd-icon { font-size: 2rem; margin-bottom: 15px; }
  .nova-wwd-card h3 { font-size: 1rem; }
}

/* ==================== NOVAFIX WHY CHOOSE US ==================== */
.nova-why-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 106, 0, 0.1);
}

.nova-why-ambient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 0% 100%, rgba(255, 106, 0, 0.05) 0%, transparent 60%);
}

.nova-why-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

/* --- Left Side: Interactive Menu --- */
.nova-why-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-left: 20px;
}

/* The vertical glowing timeline track */
.menu-progress-line {
  position: absolute;
  top: 10px; bottom: 10px; left: 24px;
  width: 2px;
  background: rgba(255, 255, 255, 0.05);
  z-index: 0;
}

.why-menu-item {
  position: relative;
  display: flex; align-items: center; gap: 20px;
  cursor: pointer; z-index: 1;
  padding: 15px 20px;
  border-radius: 8px;
  transition: all 0.4s ease;
  background: transparent;
}

.menu-dot {
  width: 10px; height: 10px;
  background: var(--bg-dark-panel);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transition: all 0.4s ease;
  box-shadow: 0 0 0 4px var(--bg-dark-core);
}

.why-menu-item h4 {
  font-family: var(--font-tech); font-size: 1.1rem;
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px;
  transition: all 0.4s ease; margin: 0;
}

/* Active & Hover States for Menu */
.why-menu-item:hover h4 { color: var(--text-primary); }
.why-menu-item:hover .menu-dot { border-color: var(--brand-neon-orange); }

.why-menu-item.active {
  background: rgba(0, 229, 255, 0.05);
  border: 1px solid rgba(0, 229, 255, 0.1);
  transform: translateX(10px);
}

.why-menu-item.active .menu-dot {
  background: var(--brand-neon-blue);
  border-color: var(--brand-neon-blue);
  box-shadow: 0 0 15px var(--brand-neon-blue), 0 0 0 4px var(--bg-dark-core);
}

.why-menu-item.active h4 { color: var(--brand-neon-blue); text-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }

/* --- Right Side: Dynamic Glass Display --- */
.nova-why-visual {
  perspective: 1000px;
}

.glass-display-card {
  position: relative;
  background: rgba(18, 24, 38, 0.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 3px solid var(--brand-neon-blue);
  border-radius: 12px;
  padding: 60px 40px;
  min-height: 450px;
  display: flex; align-items: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 229, 255, 0.05);
  overflow: hidden;
}

/* Background Rotating Rings inside the Glass Card */
.display-rings { position: absolute; top: -50px; right: -50px; opacity: 0.15; pointer-events: none; }
.d-ring { position: absolute; border-radius: 50%; border: 2px dashed var(--brand-neon-blue); }
.d-ring-1 { width: 300px; height: 300px; animation: spinRing 20s linear infinite; }
.d-ring-2 { width: 400px; height: 400px; top: -50px; left: -50px; border: 1px solid var(--brand-neon-orange); animation: spinRingReverse 25s linear infinite; }

/* Content inside the display */
.display-content {
  position: relative; z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Class used by JS to trigger fade animation */
.display-content.fade-out { opacity: 0; transform: translateY(15px); }

.display-icon { font-size: 3.5rem; color: var(--brand-neon-blue); margin-bottom: 25px; filter: drop-shadow(0 0 15px rgba(0, 229, 255, 0.5)); }
.display-title { font-size: 1.8rem; color: var(--text-primary); margin-bottom: 20px; line-height: 1.3; }
.display-text { font-family: var(--font-body); font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: 40px; }

/* Action Button */
.display-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-tech); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;
  color: var(--brand-neon-orange); transition: 0.3s;
}
.display-btn:hover { color: var(--brand-neon-blue); transform: translateX(5px); text-shadow: 0 0 8px rgba(0, 229, 255, 0.5); }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-why-grid { grid-template-columns: 1fr; }
  .glass-display-card { min-height: auto; padding: 40px 30px; }
  .menu-progress-line { left: 24px; }
}

@media (max-width: 576px) {
  .why-menu-item { padding: 15px 10px; }
  .why-menu-item h4 { font-size: 0.9rem; }
  .display-title { font-size: 1.4rem; }
}

/* ==================== NOVAFIX BUSINESS BENEFITS ==================== */
.nova-benefits-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-benefits-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 106, 0, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

.reveal-up {
  opacity: 0; transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}
.reveal-up.active { opacity: 1; transform: translateY(0); }

/* --- Asymmetrical Grid (Bento Box Layout) --- */
.nova-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  position: relative;
}

/* Make specific cards span 2 columns for a dynamic layout */
.nova-benefit-card.span-2 { grid-column: span 2; display: flex; text-align: left; align-items: center; gap: 30px; }
.nova-benefit-card.span-2 .benefit-icon { margin-bottom: 0; font-size: 3.5rem; flex-shrink: 0; }

/* --- Glassmorphism Cards --- */
.nova-benefit-card {
  position: relative;
  background: rgba(18, 24, 38, 0.5);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 35px 25px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  
  /* Initial State for JS Stagger Animation */
  opacity: 0; transform: translateY(30px);
}

/* JS applies this class sequentially */
.nova-benefit-card.booted {
  opacity: 1; transform: translateY(0);
}

.nova-benefit-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 229, 255, 0.05);
}

/* Hover Cyber-Scanline Effect */
.cyber-scanline {
  position: absolute;
  top: -100%; left: 0; width: 100%; height: 5px;
  background: linear-gradient(90deg, transparent, var(--brand-neon-blue), transparent);
  box-shadow: 0 0 15px var(--brand-neon-blue);
  opacity: 0; transition: opacity 0.3s ease;
  z-index: 0; pointer-events: none;
}

.nova-benefit-card:hover .cyber-scanline {
  opacity: 1;
  animation: scanDown 1.5s linear infinite;
}

@keyframes scanDown {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* Content Styling */
.benefit-icon {
  font-size: 2.5rem; margin-bottom: 20px;
  transition: transform 0.4s ease, filter 0.4s ease;
  position: relative; z-index: 1;
}

.nova-benefit-card:hover .benefit-icon {
  transform: scale(1.1); filter: brightness(1.3) drop-shadow(0 0 10px currentColor);
}

.benefit-content { position: relative; z-index: 1; }
.benefit-content h3 { font-family: var(--font-body); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; letter-spacing: 1px; }
.benefit-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; }

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  .nova-benefits-grid { grid-template-columns: repeat(2, 1fr); }
  .nova-benefit-card.span-2 { grid-column: span 2; }
}

@media (max-width: 768px) {
  .nova-benefits-grid { grid-template-columns: 1fr; }
  .nova-benefit-card.span-2 { grid-column: span 1; flex-direction: column; text-align: center; gap: 15px; }
  .nova-benefit-card.span-2 .benefit-icon { margin-bottom: 10px; }
}

/* ==================== NOVAFIX SERVICES HERO (CIRCUIT ARCHITECTURE) ==================== */

.circuit-wrapper {
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0; left: 0;
  opacity: 0.5; /* Keeps it as a subtle background element */
  z-index: 1;
}

/* The Circuit Lines */
.circuit-path {
  position: absolute;
  background: rgba(0, 229, 255, 0.1); /* Faint blue tracks */
  overflow: hidden;
}

/* Horizontal Lines */
.h-path { height: 1px; width: 100%; left: 0; }
.p-1 { top: 20%; }
.p-2 { top: 50%; background: rgba(255, 106, 0, 0.1); } /* Faint orange track */
.p-3 { top: 80%; }

/* Vertical Lines */
.v-path { width: 1px; height: 100%; top: 0; }
.p-4 { left: 15%; background: rgba(255, 106, 0, 0.1); }
.p-5 { left: 50%; }
.p-6 { left: 85%; }

/* The Moving Data Sparks */
.data-spark {
  position: absolute;
  border-radius: 50px;
}

.spark-blue {
  background: var(--brand-neon-blue);
  box-shadow: 0 0 15px var(--brand-neon-blue), 0 0 30px var(--brand-neon-blue);
}

.spark-orange {
  background: var(--brand-neon-orange);
  box-shadow: 0 0 15px var(--brand-neon-orange), 0 0 30px var(--brand-neon-orange);
}

/* Horizontal Sparks Animation */
.h-path .data-spark {
  top: -1px; width: 100px; height: 3px;
  animation: sparkTravelH 6s linear infinite;
}
.p-2 .data-spark { animation: sparkTravelHReverse 5s linear infinite; }
.p-3 .data-spark { animation: sparkTravelH 8s linear infinite; animation-delay: 2s; }

/* Vertical Sparks Animation */
.v-path .data-spark {
  left: -1px; width: 3px; height: 100px;
  animation: sparkTravelV 7s linear infinite;
}
.p-5 .data-spark { animation: sparkTravelVReverse 6s linear infinite; animation-delay: 1s; }
.p-6 .data-spark { animation: sparkTravelV 9s linear infinite; animation-delay: 3s; }

/* Travel Keyframes */
@keyframes sparkTravelH {
  0% { left: -150px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

@keyframes sparkTravelHReverse {
  0% { right: -150px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { right: 100%; opacity: 0; }
}

@keyframes sparkTravelV {
  0% { top: -150px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes sparkTravelVReverse {
  0% { bottom: -150px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { bottom: 100%; opacity: 0; }
}

/* Static Connection Nodes (Intersections) */
.circuit-node {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--bg-dark-core);
  border: 2px solid var(--text-secondary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  transition: 0.3s;
}

.n-a { top: 20%; left: 15%; border-color: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }
.n-b { top: 50%; left: 50%; border-color: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }
.n-c { top: 80%; left: 85%; border-color: var(--brand-neon-blue); }
.n-d { top: 20%; left: 85%; border-color: var(--brand-neon-orange); }

/* ==================== NOVAFIX SERVICES OVERVIEW ==================== */
.nova-overview-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 100px 0;
  overflow: hidden;
}

.nova-overview-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
}

/* --- HUD Terminal Container --- */
.nova-hud-terminal {
  background: rgba(5, 7, 10, 0.6);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 229, 255, 0.05);
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* --- Top: Main Display Screen --- */
.hud-main-screen {
  position: relative;
  background: rgba(10, 15, 25, 0.9);
  padding: 60px 40px;
  min-height: 350px;
  border-bottom: 2px solid var(--brand-neon-blue);
  overflow: hidden;
}

/* CRT Screen Scanline Effect */
.hud-scanline {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0, 229, 255, 0.05) 50%, rgba(0, 229, 255, 0.05));
  background-size: 100% 4px;
  z-index: 1; pointer-events: none; opacity: 0.5;
}

.hud-screen-inner {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 50px;
  transition: opacity 0.2s ease;
}
.hud-screen-inner.glitch { opacity: 0; transform: scale(0.98); }

.hud-icon-large { font-size: 8rem; opacity: 0.8; filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.4)); flex-shrink: 0; }

.hud-content { display: flex; flex-direction: column; align-items: flex-start; }
.hud-status { font-family: var(--font-tech); font-size: 0.75rem; color: #00FF88; letter-spacing: 2px; margin-bottom: 15px; background: rgba(0, 255, 136, 0.1); padding: 5px 10px; border-radius: 3px; }
.hud-content h3 { font-size: 2.5rem; color: var(--text-primary); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; }
.hud-content h4 { font-family: var(--font-tech); font-size: 1rem; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 20px; }
.hud-content p { font-size: 1.1rem; color: var(--text-secondary); line-height: 1.7; max-width: 700px; margin-bottom: 30px; }

.hud-btn {
  font-family: var(--font-tech); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px;
  color: #fff; background: rgba(0, 229, 255, 0.1); border: 1px solid var(--brand-neon-blue);
  padding: 12px 25px; border-radius: 4px; transition: 0.3s;
}
.hud-btn:hover { background: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); }

/* --- Bottom: Control Panel --- */
.hud-control-panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--bg-dark-panel);
}

.hud-key {
  background: transparent; border: none; border-right: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 25px 15px; color: var(--text-secondary); font-family: var(--font-tech); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: 0.3s;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hud-key i { font-size: 1.5rem; transition: 0.3s; }

.hud-key:hover { background: rgba(255, 106, 0, 0.05); color: var(--brand-neon-orange); }
.hud-key:hover i { transform: translateY(-3px); color: var(--brand-neon-orange); }

.hud-key.active {
  background: rgba(0, 229, 255, 0.1); color: #fff;
  border-top: 3px solid var(--brand-neon-blue); margin-top: -3px;
  box-shadow: inset 0 20px 20px -20px rgba(0, 229, 255, 0.5);
}
.hud-key.active i { color: var(--brand-neon-blue); filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.5)); }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .hud-control-panel { grid-template-columns: repeat(3, 1fr); }
  .hud-screen-inner { flex-direction: column; text-align: center; gap: 30px; }
  .hud-content { align-items: center; }
  .hud-icon-large { font-size: 5rem; }
}
@media (max-width: 576px) {
  .hud-control-panel { grid-template-columns: repeat(2, 1fr); }
  .hud-main-screen { padding: 40px 20px; }
  .hud-content h3 { font-size: 1.8rem; }
}

/* ==================== NOVAFIX ERP ARCHITECTURE ==================== */
.nova-erp-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-erp-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at center, rgba(255, 106, 0, 0.03) 0%, transparent 60%);
}

.nova-erp-layout {
  position: relative;
  max-width: 1000px;
  margin: 80px auto 0;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- The Central Core --- */
.erp-core-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex; justify-content: center; align-items: center;
}

.erp-core-node {
  width: 140px; height: 140px;
  background: rgba(10, 15, 25, 0.9);
  border: 2px solid var(--brand-neon-blue);
  border-radius: 50%;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px;
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.2), inset 0 0 20px rgba(0, 229, 255, 0.1);
  transition: all 0.3s ease;
  z-index: 2;
}

.erp-core-node .core-icon { font-size: 2.5rem; color: var(--text-primary); transition: 0.3s; }
.erp-core-node .core-label { font-size: 0.75rem; color: var(--brand-neon-blue); text-transform: uppercase; letter-spacing: 2px; text-align: center; }

/* Radar pulse behind the core */
.erp-core-pulse {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%; border: 1px solid var(--brand-neon-blue);
  animation: coreRipple 3s infinite linear;
  z-index: 1; opacity: 0;
}

@keyframes coreRipple {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* --- The Connecting Data Streams --- */
.data-stream {
  position: absolute;
  background: rgba(255, 255, 255, 0.05);
  z-index: 0;
  overflow: hidden;
}

/* Glowing pulse that travels down the stream */
.data-stream::after {
  content: ''; position: absolute; background: var(--brand-neon-blue);
  box-shadow: 0 0 15px var(--brand-neon-blue);
  transition: all 0.3s ease; opacity: 0;
}

/* Positioning the 4 lines (Diagonal connections) */
.stream-top-left { top: -100px; left: -180px; width: 220px; height: 2px; transform: rotate(35deg); }
.stream-top-right { top: -100px; right: -180px; width: 220px; height: 2px; transform: rotate(-35deg); }
.stream-bottom-left { bottom: -100px; left: -180px; width: 220px; height: 2px; transform: rotate(-35deg); }
.stream-bottom-right { bottom: -100px; right: -180px; width: 220px; height: 2px; transform: rotate(35deg); }

/* Stream Animations triggered by JS */
.data-stream.active-blue::after { width: 100%; height: 100%; opacity: 1; background: var(--brand-neon-blue); box-shadow: 0 0 15px var(--brand-neon-blue); animation: streamFlow 1s infinite linear; }
.data-stream.active-orange::after { width: 100%; height: 100%; opacity: 1; background: var(--brand-neon-orange); box-shadow: 0 0 15px var(--brand-neon-orange); animation: streamFlow 1s infinite linear; }

@keyframes streamFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* --- The 4 Module Cards --- */
.erp-modules-grid {
  position: relative;
  width: 100%; height: 100%;
  min-height: 500px;
}

.erp-module-card {
  position: absolute;
  width: 320px;
  background: rgba(18, 24, 38, 0.6);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 30px;
  transition: all 0.4s ease;
  cursor: crosshair;
  z-index: 5;
}

.pos-top-left { top: 0; left: 0; }
.pos-top-right { top: 0; right: 0; }
.pos-bottom-left { bottom: 0; left: 0; }
.pos-bottom-right { bottom: 0; right: 0; }

.module-icon { font-size: 2rem; margin-bottom: 15px; transition: 0.3s; }
.erp-module-card h3 { font-family: var(--font-body); font-size: 1.3rem; color: var(--text-primary); margin-bottom: 10px; }
.erp-module-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Hover States */
.erp-module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
}
.erp-module-card[data-color="blue"]:hover { border-color: rgba(0, 229, 255, 0.3); }
.erp-module-card[data-color="orange"]:hover { border-color: rgba(255, 106, 0, 0.3); }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .nova-erp-layout { display: flex; flex-direction: column; gap: 40px; min-height: auto; margin-top: 40px; }
  .erp-core-container { position: relative; top: 0; left: 0; transform: none; margin: 0 auto 40px; }
  .data-stream { display: none; /* Hide streams on mobile/tablet for clean layout */ }
  .erp-modules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: auto; }
  .erp-module-card { position: relative; width: 100%; top: auto; left: auto; right: auto; bottom: auto; }
}

@media (max-width: 768px) {
  .erp-modules-grid { grid-template-columns: 1fr; }
}


/* ==================== NOVAFIX CRM SOLUTIONS ==================== */
.nova-crm-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-crm-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 50%);
}

.nova-crm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: The Omnichannel Hologram --- */
.nova-crm-visualizer {
  display: flex; justify-content: center; align-items: center;
  min-height: 500px; perspective: 1000px;
}

.crm-hologram-container {
  position: relative; width: 400px; height: 400px;
  display: flex; justify-content: center; align-items: center;
  transform-style: preserve-3d;
  transform: rotateX(20deg); /* Slight 3D tilt */
}

/* Central Client Core */
.crm-client-core {
  position: absolute; z-index: 10;
  width: 100px; height: 100px;
  background: rgba(18, 24, 38, 0.9);
  border: 2px solid var(--brand-neon-blue);
  border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 0 30px rgba(0, 229, 255, 0.3), inset 0 0 15px rgba(0, 229, 255, 0.2);
  transition: all 0.4s ease;
}

.core-user-icon { font-size: 3rem; color: var(--brand-neon-blue); transition: 0.4s; filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5)); }

.core-pulse {
  position: absolute; width: 100%; height: 100%;
  border-radius: 50%; border: 1px solid var(--brand-neon-orange);
  animation: radarPulse 3s infinite; opacity: 0;
}
@keyframes radarPulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.5); opacity: 0; } }

/* Orbital Rings */
.crm-orbit {
  position: absolute; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  display: flex; justify-content: center;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.ring-1 { width: 200px; height: 200px; animation: orbitSpin 10s linear infinite; }
.ring-2 { width: 300px; height: 300px; animation: orbitSpinReverse 15s linear infinite; }
.ring-3 { width: 400px; height: 400px; animation: orbitSpin 20s linear infinite; }

/* Active States for Rings (Triggered by JS) */
.crm-orbit.active-blue { border: 1px solid var(--brand-neon-blue); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.1), 0 0 20px rgba(0, 229, 255, 0.1); }
.crm-orbit.active-orange { border: 1px solid var(--brand-neon-orange); box-shadow: inset 0 0 20px rgba(255, 106, 0, 0.1), 0 0 20px rgba(255, 106, 0, 0.1); }
.crm-orbit.active-fast { animation-duration: 4s !important; }

@keyframes orbitSpin { 100% { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { 100% { transform: rotate(-360deg); } }

/* Nodes on the rings */
.orbit-node {
  position: absolute; top: -15px;
  width: 30px; height: 30px;
  background: var(--bg-dark-panel);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; justify-content: center; align-items: center;
  color: var(--text-secondary); font-size: 0.8rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: all 0.4s ease;
}

.crm-orbit.active-blue .orbit-node { border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 15px var(--brand-neon-blue); }
.crm-orbit.active-orange .orbit-node { border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 15px var(--brand-neon-orange); }

/* Status Readout Panel */
.crm-status-readout {
  position: absolute; bottom: -80px;
  background: rgba(18, 24, 38, 0.7); backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 229, 255, 0.2); border-radius: 6px;
  padding: 10px 20px; text-align: center;
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.readout-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 5px; }
.readout-value { font-size: 1rem; letter-spacing: 1px; }

/* --- Right: Interactive Capabilities --- */
.nova-crm-features { display: flex; flex-direction: column; gap: 20px; }

.crm-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.crm-feature-card:hover, .crm-feature-card.active {
  background: rgba(0, 229, 255, 0.05);
  transform: translateX(10px);
}

.crm-feature-card[data-color="blue"]:hover, .crm-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.crm-feature-card[data-color="blue"]:hover .feature-indicator, .crm-feature-card[data-color="blue"].active .feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.crm-feature-card[data-color="orange"]:hover, .crm-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.crm-feature-card[data-color="orange"]:hover .feature-indicator, .crm-feature-card[data-color="orange"].active .feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.crm-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.crm-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-crm-grid { grid-template-columns: 1fr; gap: 80px; }
  .crm-status-readout { bottom: -60px; }
  .crm-feature-card:hover, .crm-feature-card.active { transform: translateX(5px); }
}
@media (max-width: 576px) {
  .crm-hologram-container { width: 300px; height: 300px; transform: scale(0.85); }
  .ring-3 { width: 300px; height: 300px; }
}

/* ==================== NOVAFIX WEB DEVELOPMENT SECTION ==================== */
.nova-web-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-web-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(0deg, transparent 24%, rgba(0, 229, 255, 0.05) 25%, rgba(0, 229, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 229, 255, 0.05) 75%, rgba(0, 229, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 229, 255, 0.05) 25%, rgba(0, 229, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(0, 229, 255, 0.05) 75%, rgba(0, 229, 255, 0.05) 76%, transparent 77%, transparent);
  background-size: 50px 50px;
  mask-image: radial-gradient(circle at center, black 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at center, black 10%, transparent 70%);
}

.nova-web-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Interactive Features --- */
.nova-web-features { display: flex; flex-direction: column; gap: 20px; }

.web-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.web-feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.web-feature-card:hover, .web-feature-card.active {
  background: rgba(0, 229, 255, 0.05);
  transform: translateX(10px);
}

.web-feature-card[data-color="blue"]:hover, .web-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.web-feature-card[data-color="blue"]:hover .web-feature-indicator, .web-feature-card[data-color="blue"].active .web-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.web-feature-card[data-color="orange"]:hover, .web-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.web-feature-card[data-color="orange"]:hover .web-feature-indicator, .web-feature-card[data-color="orange"].active .web-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.web-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.web-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.web-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.web-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.web-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Right: 3D Holographic Browser --- */
.nova-web-visualizer {
  display: flex; justify-content: center; align-items: center;
  perspective: 1200px; min-height: 500px;
}

.nova-3d-browser {
  width: 100%; max-width: 450px; height: 350px;
  background: rgba(10, 15, 25, 0.8);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 30px rgba(0, 229, 255, 0.1);
  overflow: hidden;
  display: flex; flex-direction: column;
  
  /* 3D Isometric Transform */
  transform: rotateX(15deg) rotateY(-25deg) rotateZ(5deg);
  transform-style: preserve-3d;
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nova-3d-browser.glow-blue { border-color: var(--brand-neon-blue); box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 30px rgba(0, 229, 255, 0.2), inset 0 0 30px rgba(0, 229, 255, 0.1); }
.nova-3d-browser.glow-orange { border-color: var(--brand-neon-orange); box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 30px rgba(255, 106, 0, 0.2), inset 0 0 30px rgba(255, 106, 0, 0.1); }

/* Float Animation */
.nova-web-visualizer:hover .nova-3d-browser { transform: rotateX(10deg) rotateY(-15deg) rotateZ(2deg) translateY(-10px); }

/* Browser Top Bar */
.browser-header { height: 30px; background: rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; padding: 0 15px; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; }
.close-dot { background: #ff5f56; } .min-dot { background: #ffbd2e; } .max-dot { background: #27c93f; }
.url-bar { margin-left: 15px; flex: 1; height: 16px; background: rgba(0,0,0,0.5); border-radius: 4px; color: rgba(255,255,255,0.3); font-family: var(--font-tech); font-size: 0.6rem; display: flex; align-items: center; padding-left: 10px; }

/* Browser Internal Layers */
.browser-body { position: relative; flex: 1; padding: 20px; }
.wireframe-layer { position: absolute; inset: 20px; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; pointer-events: none; }
.wireframe-layer.active { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* 1. Frontend UI Wireframe */
.wf-header { width: 100%; height: 20px; background: rgba(0, 229, 255, 0.1); border: 1px dashed var(--brand-neon-blue); margin-bottom: 20px; }
.wf-hero-block { text-align: center; margin-bottom: 20px; }
.wf-title { width: 60%; height: 15px; background: var(--brand-neon-blue); margin: 0 auto 10px; box-shadow: 0 0 10px var(--brand-neon-blue); }
.wf-subtitle { width: 40%; height: 8px; background: rgba(0, 229, 255, 0.5); margin: 0 auto 15px; }
.wf-btn { width: 80px; height: 20px; border: 1px solid var(--brand-neon-blue); margin: 0 auto; border-radius: 4px; }
.wf-grid { display: flex; gap: 10px; }
.wf-box { flex: 1; height: 60px; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 4px; }

/* 2. Backend Data Wireframe */
.data-stream-line { position: absolute; background: linear-gradient(180deg, transparent, var(--brand-neon-orange), transparent); width: 2px; height: 100px; animation: dataFall 1.5s infinite linear; }
.v1 { left: 20%; animation-delay: 0s; } .v2 { left: 50%; height: 150px; animation-delay: 0.5s; } .v3 { right: 20%; animation-delay: 0.2s; }
.server-node { position: absolute; width: 40px; height: 40px; background: var(--bg-dark-panel); border: 1px solid var(--brand-neon-orange); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--brand-neon-orange); font-size: 1.2rem; box-shadow: 0 0 15px rgba(255, 106, 0, 0.4); }
.top-node { top: 10%; left: 10%; } .mid-node { top: 40%; right: 10%; } .bot-node { bottom: 10%; left: 40%; }
@keyframes dataFall { 0% { top: -100px; opacity: 0; } 50% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* 3. E-Commerce Wireframe */
.cart-layout { display: flex; gap: 15px; margin-bottom: 20px; padding: 15px; border: 1px solid rgba(0, 229, 255, 0.2); background: rgba(0, 229, 255, 0.05); border-radius: 6px; }
.product-img { width: 50px; height: 50px; background: rgba(0, 229, 255, 0.2); border-radius: 4px; }
.product-details { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.pd-line { width: 100%; height: 6px; background: rgba(255,255,255,0.2); margin-bottom: 8px; }
.pd-line.short { width: 60%; }
.checkout-btn { font-family: var(--font-tech); font-size: 0.6rem; color: #fff; background: var(--brand-neon-blue); padding: 5px; text-align: center; border-radius: 3px; letter-spacing: 1px; }

/* 4. Performance Speed Layer */
.speed-gauge-wrapper { position: relative; width: 150px; height: 150px; margin: 0 auto 30px; display: flex; justify-content: center; align-items: center; }
.gauge-ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 4px solid rgba(255, 106, 0, 0.2); border-top-color: var(--brand-neon-orange); border-right-color: var(--brand-neon-orange); animation: gaugeRev 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite alternate; }
.speed-readout { position: absolute; font-family: var(--font-tech); font-size: 1.2rem; color: #fff; text-shadow: 0 0 10px var(--brand-neon-orange); }
.cdn-map { display: flex; justify-content: space-around; width: 100%; }
.cdn-node { width: 10px; height: 10px; background: var(--brand-neon-orange); border-radius: 50%; box-shadow: 0 0 10px var(--brand-neon-orange); animation: pingNode 1s infinite alternate; }
.n2 { animation-delay: 0.3s; } .n3 { animation-delay: 0.6s; }
@keyframes gaugeRev { 0% { transform: rotate(-45deg); } 100% { transform: rotate(135deg); } }
@keyframes pingNode { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(2); opacity: 1; } }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-web-grid { grid-template-columns: 1fr; gap: 80px; }
  .nova-web-visualizer { min-height: 400px; }
}
@media (max-width: 576px) {
  .nova-3d-browser { transform: scale(0.9); }
  .nova-web-visualizer:hover .nova-3d-browser { transform: scale(0.9) translateY(-10px); }
}

/* ==================== NOVAFIX APP DEVELOPMENT SECTION ==================== */
.nova-app-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 106, 0, 0.1);
}

.nova-app-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 106, 0, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at left center, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at left center, black 10%, transparent 60%);
}

.nova-app-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* Phone smaller on left, text wider on right */
  gap: 80px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: 3D Holographic Smartphone --- */
.nova-app-visualizer {
  display: flex; justify-content: center; align-items: center;
  perspective: 1500px; min-height: 600px;
}

.holo-phone-container {
  position: relative;
  width: 280px; height: 560px;
  transform-style: preserve-3d;
  transform: rotateY(15deg) rotateX(10deg);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.holo-phone-container.glow-blue .holo-phone { border-color: var(--brand-neon-blue); box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 40px rgba(0, 229, 255, 0.2), inset 0 0 30px rgba(0, 229, 255, 0.2); }
.holo-phone-container.glow-orange .holo-phone { border-color: var(--brand-neon-orange); box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 40px rgba(255, 106, 0, 0.2), inset 0 0 30px rgba(255, 106, 0, 0.2); }

/* Float Animation */
.nova-app-visualizer:hover .holo-phone-container { transform: rotateY(5deg) rotateX(5deg) translateY(-15px); }

/* The Phone Body */
.holo-phone {
  position: absolute; inset: 0;
  background: rgba(10, 15, 25, 0.7); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  border: 2px solid var(--brand-neon-blue);
  border-radius: 40px; padding: 12px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8), -20px 20px 40px rgba(0, 229, 255, 0.2), inset 0 0 30px rgba(0, 229, 255, 0.2);
  display: flex; flex-direction: column;
  transition: all 0.4s ease;
}

/* The Notch / Dynamic Island */
.phone-notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 25px; background: #05070a;
  border-radius: 20px; z-index: 10;
}

/* The Screen */
.phone-screen {
  position: relative; flex: 1;
  background: rgba(5, 7, 10, 0.9);
  border-radius: 30px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Base Layer Styling */
.app-layer { position: absolute; inset: 0; padding: 30px 20px; opacity: 0; transform: scale(0.95); transition: all 0.5s ease; pointer-events: none; display: flex; flex-direction: column; }
.app-layer.active { opacity: 1; transform: scale(1); pointer-events: auto; }

/* Layer 1: Native (Code & CPU) */
#layer-native { background: linear-gradient(180deg, rgba(0, 229, 255, 0.1), transparent); }
.app-header { font-family: var(--font-tech); font-size: 0.7rem; color: var(--brand-neon-blue); text-align: center; margin-bottom: 20px; letter-spacing: 2px; }
.code-stream { display: flex; flex-direction: column; gap: 8px; margin-bottom: 40px; }
.code-line { height: 4px; background: rgba(0, 229, 255, 0.4); border-radius: 2px; }
.w-80 { width: 80%; } .w-60 { width: 60%; } .w-90 { width: 90%; } .w-40 { width: 40%; } .w-70 { width: 70%; } .w-50 { width: 50%; }
.indent { margin-left: 15px; background: rgba(255, 255, 255, 0.2); }
.cpu-ring { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 80px; height: 80px; border: 2px dashed var(--brand-neon-blue); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 2rem; color: var(--brand-neon-blue); animation: spinRing 4s linear infinite; }
.cpu-ring i { animation: spinRingReverse 4s linear infinite; }

/* Layer 2: Cross Platform (Split Screen) */
#layer-cross { padding: 0; }
.split-screen { width: 100%; height: 100%; display: flex; flex-direction: column; }
.split-half { flex: 1; display: flex; justify-content: center; align-items: center; font-size: 4rem; position: relative; }
.top-half { background: rgba(0, 229, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.bot-half { background: rgba(255, 106, 0, 0.05); }
.bridge-sync { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; background: var(--bg-dark-panel); border: 2px solid var(--text-secondary); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1.2rem; color: var(--text-primary); z-index: 5; animation: rotateSync 3s linear infinite; }
@keyframes rotateSync { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

/* Layer 3: UI/UX (Wireframes) */
#layer-ui { background: rgba(0, 229, 255, 0.02); }
.ui-mockup { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 15px; position: relative; }
.ui-skeleton-img { width: 100%; height: 120px; background: rgba(0, 229, 255, 0.2); border-radius: 10px; margin-top: 20px; }
.ui-skeleton-text { width: 100%; height: 10px; background: rgba(255, 255, 255, 0.1); border-radius: 5px; }
.ui-skeleton-text.short { width: 60%; }
.ui-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ui-box { height: 80px; background: rgba(0, 229, 255, 0.1); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 10px; }
.ui-fab { position: absolute; bottom: 20px; right: 0; width: 40px; height: 40px; background: var(--brand-neon-blue); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; box-shadow: 0 5px 15px rgba(0, 229, 255, 0.5); }

/* Layer 4: API & Cloud Sync */
#layer-api { justify-content: space-between; align-items: center; padding: 60px 20px; background: linear-gradient(0deg, rgba(255, 106, 0, 0.1), transparent); }
.cloud-node, .device-node { width: 60px; height: 60px; background: rgba(255, 106, 0, 0.1); border: 1px solid var(--brand-neon-orange); border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; color: var(--brand-neon-orange); box-shadow: 0 0 15px rgba(255, 106, 0, 0.2); z-index: 2; }
.sync-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; z-index: 1; }
.s-line { width: 2px; height: 120px; background: linear-gradient(180deg, transparent, var(--brand-neon-orange), transparent); animation: syncData 1.5s infinite linear; }
.l-1 { animation-delay: 0s; } .l-2 { height: 160px; animation-delay: 0.5s; } .l-3 { animation-delay: 0.2s; }
@keyframes syncData { 0% { transform: translateY(-50px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(50px); opacity: 0; } }

/* Hologram Floor Shadow */
.holo-base-shadow {
  position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%) rotateX(70deg);
  width: 200px; height: 50px; background: radial-gradient(ellipse, rgba(0, 229, 255, 0.4) 0%, transparent 70%);
  filter: blur(10px); transition: 0.4s; z-index: -1;
}

/* --- Right: Interactive Capabilities --- */
.nova-app-features { display: flex; flex-direction: column; gap: 20px; }

.app-feature-card {
  position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px; cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.app-feature-indicator { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease; }

.app-feature-card:hover, .app-feature-card.active { background: rgba(255, 106, 0, 0.05); transform: translateX(-10px); }

.app-feature-card[data-color="blue"]:hover, .app-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.app-feature-card[data-color="blue"]:hover .app-feature-indicator, .app-feature-card[data-color="blue"].active .app-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.app-feature-card[data-color="orange"]:hover, .app-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.app-feature-card[data-color="orange"]:hover .app-feature-indicator, .app-feature-card[data-color="orange"].active .app-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.app-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.app-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.app-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.app-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.app-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .nova-app-grid { grid-template-columns: 1fr; gap: 60px; text-align: left; }
  .nova-app-visualizer { min-height: 600px; }
  .app-feature-card:hover, .app-feature-card.active { transform: translateX(5px); } /* Reverse slide on mobile */
}
@media (max-width: 576px) {
  .holo-phone-container { transform: scale(0.85); }
  .nova-app-visualizer:hover .holo-phone-container { transform: scale(0.85) translateY(-10px); }
  .nova-app-visualizer { min-height: 500px; }
}

/* ==================== NOVAFIX MARKETING & GROWTH SECTION ==================== */
.nova-growth-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-growth-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center right, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
}

.nova-growth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Holographic Data Visualizer --- */
.nova-growth-visualizer {
  display: flex; justify-content: center; align-items: center;
  min-height: 500px;
}

.growth-chart-container {
  position: relative;
  width: 100%; max-width: 500px; height: 350px;
  background: rgba(10, 15, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(0, 229, 255, 0.05);
  overflow: hidden;
  transition: all 0.5s ease;
}

.growth-chart-container.glow-blue { border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(0, 229, 255, 0.1); }
.growth-chart-container.glow-orange { border-color: rgba(255, 106, 0, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 30px rgba(255, 106, 0, 0.1); }

/* Chart Grid Background */
.chart-grid { position: absolute; inset: 20px; display: flex; flex-direction: column; justify-content: space-between; z-index: 1; pointer-events: none; }
.h-line { width: 100%; height: 1px; background: rgba(255,255,255,0.05); }
.v-line { position: absolute; top: 0; height: 100%; width: 1px; background: rgba(255,255,255,0.05); }
.v-line:nth-child(5) { left: 25%; } .v-line:nth-child(6) { left: 50%; } .v-line:nth-child(7) { left: 75%; }

/* Dynamic Area Chart (Morphs using Clip-Path) */
.chart-area-fill {
  position: absolute; bottom: 20px; left: 20px; right: 20px; top: 20px;
  background: linear-gradient(180deg, rgba(0, 229, 255, 0.6) 0%, rgba(0, 229, 255, 0.0) 100%);
  z-index: 2;
  transition: clip-path 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.6s ease;
}

.glow-orange .chart-area-fill { background: linear-gradient(180deg, rgba(255, 106, 0, 0.6) 0%, rgba(255, 106, 0, 0.0) 100%); }

/* The Data Morph Shapes */
.shape-seo { clip-path: polygon(0% 100%, 0% 80%, 33% 60%, 66% 40%, 100% 10%, 100% 100%); }
.shape-ads { clip-path: polygon(0% 100%, 0% 90%, 33% 30%, 66% 50%, 100% 20%, 100% 100%); }
.shape-cro { clip-path: polygon(0% 100%, 0% 70%, 33% 80%, 66% 20%, 100% 15%, 100% 100%); }
.shape-data { clip-path: polygon(0% 100%, 0% 60%, 33% 40%, 66% 10%, 100% 5%, 100% 100%); }

/* Animated Data Nodes */
.chart-node {
  position: absolute; width: 12px; height: 12px;
  background: #fff; border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 10px #fff;
  z-index: 3;
}

.node-pulse {
  position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
  border-radius: 50%; border: 2px solid #fff;
  animation: pingNode 2s infinite; opacity: 0;
}
@keyframes pingNode { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

.node-tooltip {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: var(--bg-dark-panel); border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 8px; border-radius: 4px; font-size: 0.65rem; color: #fff;
  white-space: nowrap; pointer-events: none;
}
#final-node-tooltip { background: var(--brand-neon-blue); border-color: var(--brand-neon-blue); font-size: 0.75rem; font-weight: 700; transition: background 0.6s, border-color 0.6s; }
.glow-orange #final-node-tooltip { background: var(--brand-neon-orange); border-color: var(--brand-neon-orange); }

/* Node Positioning based on shape active class */
.shape-seo .node-1 { left: 0%; top: 80%; } .shape-seo .node-2 { left: 33%; top: 60%; } .shape-seo .node-3 { left: 66%; top: 40%; } .shape-seo .node-4 { left: 100%; top: 10%; }
.shape-ads .node-1 { left: 0%; top: 90%; } .shape-ads .node-2 { left: 33%; top: 30%; } .shape-ads .node-3 { left: 66%; top: 50%; } .shape-ads .node-4 { left: 100%; top: 20%; }
.shape-cro .node-1 { left: 0%; top: 70%; } .shape-cro .node-2 { left: 33%; top: 80%; } .shape-cro .node-3 { left: 66%; top: 20%; } .shape-cro .node-4 { left: 100%; top: 15%; }
.shape-data .node-1 { left: 0%; top: 60%; } .shape-data .node-2 { left: 33%; top: 40%; } .shape-data .node-3 { left: 66%; top: 10%; } .shape-data .node-4 { left: 100%; top: 5%; }

/* Bottom Holographic Glow */
.chart-base-glow { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--brand-neon-blue); box-shadow: 0 0 20px var(--brand-neon-blue); transition: 0.6s ease; }
.glow-orange .chart-base-glow { background: var(--brand-neon-orange); box-shadow: 0 0 20px var(--brand-neon-orange); }

/* --- Right: Interactive Capabilities --- */
.nova-growth-features { display: flex; flex-direction: column; gap: 20px; }

.growth-feature-card {
  position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px; cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.growth-feature-indicator { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease; }
.growth-feature-card:hover, .growth-feature-card.active { background: rgba(0, 229, 255, 0.05); transform: translateX(10px); }

.growth-feature-card[data-color="blue"]:hover, .growth-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.growth-feature-card[data-color="blue"]:hover .growth-feature-indicator, .growth-feature-card[data-color="blue"].active .growth-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.growth-feature-card[data-color="orange"]:hover, .growth-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.growth-feature-card[data-color="orange"]:hover .growth-feature-indicator, .growth-feature-card[data-color="orange"].active .growth-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.growth-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.growth-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.growth-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.growth-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.growth-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-growth-grid { grid-template-columns: 1fr; gap: 60px; }
  .nova-growth-visualizer { min-height: 400px; }
}
@media (max-width: 576px) {
  .growth-chart-container { height: 280px; padding: 10px; }
  .chart-area-fill { bottom: 10px; left: 10px; right: 10px; top: 30px; }
}

/* ==================== NOVAFIX IT STAFFING SECTION ==================== */
.nova-staffing-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-staffing-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 20% 50%, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
}

.nova-staffing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Holographic Talent Matrix --- */
.nova-staffing-visualizer {
  display: flex; justify-content: center; align-items: center;
  min-height: 500px;
}

.talent-matrix-container {
  position: relative;
  width: 100%; max-width: 450px; height: 450px;
  background: rgba(10, 15, 25, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(0, 229, 255, 0.05);
  overflow: hidden;
  transition: all 0.5s ease;
}

.talent-matrix-container.glow-blue { border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(0, 229, 255, 0.1); }
.talent-matrix-container.glow-orange { border-color: rgba(255, 106, 0, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(255, 106, 0, 0.1); }

/* Radar Scanner */
.matrix-scanner {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 50%;
  transform-origin: top left;
  background: linear-gradient(45deg, rgba(0, 229, 255, 0.2), transparent);
  border-left: 2px solid var(--brand-neon-blue);
  animation: radarScan 4s linear infinite;
  z-index: 1; border-radius: 100% 0 0 0;
}
.talent-matrix-container.glow-orange .matrix-scanner { background: linear-gradient(45deg, rgba(255, 106, 0, 0.2), transparent); border-left-color: var(--brand-neon-orange); }

@keyframes radarScan { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Central Enterprise Hub */
.enterprise-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  background: rgba(18, 24, 38, 0.9);
  border: 2px solid var(--brand-neon-blue); border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  z-index: 10; transition: 0.4s;
}
.talent-matrix-container.glow-orange .enterprise-hub { border-color: var(--brand-neon-orange); }
.hub-icon { font-size: 2rem; color: var(--text-primary); transition: 0.4s; }
.talent-matrix-container.glow-blue .hub-icon { color: var(--brand-neon-blue); filter: drop-shadow(0 0 10px var(--brand-neon-blue)); }
.talent-matrix-container.glow-orange .hub-icon { color: var(--brand-neon-orange); filter: drop-shadow(0 0 10px var(--brand-neon-orange)); }

.hub-pulse { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--brand-neon-blue); animation: pingNode 2s infinite; opacity: 0; z-index: -1; }
.talent-matrix-container.glow-orange .hub-pulse { border-color: var(--brand-neon-orange); }

/* Floating Talent Nodes */
.talent-node {
  position: absolute; width: 40px; height: 40px;
  background: rgba(10, 15, 25, 0.8); backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  font-size: 1rem; color: var(--text-secondary);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5); z-index: 5;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  opacity: 0.4; filter: grayscale(1);
}

/* Node Positioning */
.t-1 { top: 20%; left: 20%; transform: translate(-50%, -50%); animation: floatNode 3s infinite alternate; }
.t-2 { top: 25%; left: 80%; transform: translate(-50%, -50%); animation: floatNode 4s infinite alternate-reverse; }
.t-3 { top: 75%; left: 20%; transform: translate(-50%, -50%); animation: floatNode 5s infinite alternate; }
.t-4 { top: 70%; left: 85%; transform: translate(-50%, -50%); animation: floatNode 3.5s infinite alternate-reverse; }
.t-5 { top: 10%; left: 50%; transform: translate(-50%, -50%); animation: floatNode 4.5s infinite alternate; }
.t-6 { top: 50%; left: 25%; transform: translate(-50%, -50%); animation: floatNode 3s infinite alternate-reverse; }
.t-7 { bottom: 10%; left: 50%; transform: translate(-50%, -50%); animation: floatNode 4s infinite alternate; }
.t-8 { top: 50%; left: 80%; transform: translate(-50%, -50%); animation: floatNode 5s infinite alternate-reverse; }

/* Connecting Lines (SVG) */
.matrix-connections { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.conn-line { stroke: rgba(255,255,255,0); stroke-width: 2; stroke-dasharray: 10 5; transition: stroke 0.4s ease; }

/* Active State Logic (Triggered by JS adding classes to the container) */
.talent-matrix-container.target-cloud .t-cloud { opacity: 1; filter: grayscale(0); border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); transform: translate(-50%, -50%) scale(1.2); }
.talent-matrix-container.target-cloud .c-cloud { stroke: var(--brand-neon-blue); animation: dashFlow 20s linear infinite; }

.talent-matrix-container.target-dev .t-dev { opacity: 1; filter: grayscale(0); border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transform: translate(-50%, -50%) scale(1.2); }
.talent-matrix-container.target-dev .c-dev { stroke: var(--brand-neon-orange); animation: dashFlowReverse 20s linear infinite; }

.talent-matrix-container.target-cyber .t-cyber { opacity: 1; filter: grayscale(0); border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); transform: translate(-50%, -50%) scale(1.2); }
.talent-matrix-container.target-cyber .c-cyber { stroke: var(--brand-neon-blue); animation: dashFlow 20s linear infinite; }

.talent-matrix-container.target-data .t-data { opacity: 1; filter: grayscale(0); border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transform: translate(-50%, -50%) scale(1.2); }
.talent-matrix-container.target-data .c-data { stroke: var(--brand-neon-orange); animation: dashFlowReverse 20s linear infinite; }

@keyframes dashFlow { to { stroke-dashoffset: -1000; } }
@keyframes dashFlowReverse { to { stroke-dashoffset: 1000; } }

/* Status Terminal Panel */
.staffing-status-panel {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 15, 25, 0.8); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  padding: 8px 15px; text-align: center; white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8); z-index: 20; transition: 0.4s ease;
}
.status-label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 3px; }
.status-value { font-size: 0.85rem; letter-spacing: 1.5px; transition: color 0.4s ease; }

/* --- Right: Interactive Capabilities --- */
.nova-staffing-features { display: flex; flex-direction: column; gap: 20px; }

.staffing-feature-card {
  position: relative; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px; cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.staffing-feature-indicator { position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease; }
.staffing-feature-card:hover, .staffing-feature-card.active { background: rgba(0, 229, 255, 0.05); transform: translateX(10px); }

.staffing-feature-card[data-color="blue"]:hover, .staffing-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.staffing-feature-card[data-color="blue"]:hover .staffing-feature-indicator, .staffing-feature-card[data-color="blue"].active .staffing-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.staffing-feature-card[data-color="orange"]:hover, .staffing-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.staffing-feature-card[data-color="orange"]:hover .staffing-feature-indicator, .staffing-feature-card[data-color="orange"].active .staffing-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.staffing-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.staffing-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.staffing-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.staffing-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.staffing-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-staffing-grid { grid-template-columns: 1fr; gap: 80px; }
  .staffing-feature-card:hover, .staffing-feature-card.active { transform: translateX(5px); }
}
@media (max-width: 576px) {
  .talent-matrix-container { width: 320px; height: 320px; }
  .conn-line { display: none; /* Hide complex SVG lines on very small screens to avoid overflow issues */ }
}

/* ==================== NOVAFIX NON-IT STAFFING SECTION ==================== */
.nova-nonit-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-nonit-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse at center left, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
}

.nova-nonit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Interactive Features --- */
.nova-nonit-features { display: flex; flex-direction: column; gap: 20px; }

.nonit-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.nonit-feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.nonit-feature-card:hover, .nonit-feature-card.active { background: rgba(0, 229, 255, 0.05); transform: translateX(10px); }

.nonit-feature-card[data-color="blue"]:hover, .nonit-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.nonit-feature-card[data-color="blue"]:hover .nonit-feature-indicator, .nonit-feature-card[data-color="blue"].active .nonit-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.nonit-feature-card[data-color="orange"]:hover, .nonit-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.nonit-feature-card[data-color="orange"]:hover .nonit-feature-indicator, .nonit-feature-card[data-color="orange"].active .nonit-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.nonit-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.nonit-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.nonit-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.nonit-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.nonit-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Right: Holographic Org Chart Visualizer --- */
.nova-nonit-visualizer {
  display: flex; justify-content: center; align-items: center;
  min-height: 500px;
}

.org-matrix-container {
  position: relative;
  width: 100%; max-width: 450px; height: 450px;
  background: rgba(10, 15, 25, 0.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(0, 229, 255, 0.05);
  overflow: hidden; transition: all 0.5s ease;
}

.org-matrix-container.glow-blue { border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(0, 229, 255, 0.1); }
.org-matrix-container.glow-orange { border-color: rgba(255, 106, 0, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(255, 106, 0, 0.1); }

/* Background Tech Grid */
.org-bg-grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px; z-index: 0; pointer-events: none;
}

/* Structural Nodes */
.org-node {
  position: absolute; width: 50px; height: 50px;
  background: var(--bg-dark-panel); border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px; transform: translate(-50%, -50%);
  display: flex; justify-content: center; align-items: center;
  font-size: 1.2rem; color: var(--text-secondary);
  z-index: 5; transition: all 0.4s ease;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.node-pulse {
  position: absolute; inset: -10px; border-radius: 12px;
  border: 1px solid var(--text-primary); opacity: 0; z-index: -1;
  animation: pingNode 2s infinite;
}

/* Default Placements */
.node-exec { top: 20%; left: 50%; width: 60px; height: 60px; font-size: 1.5rem; border-radius: 50%; }
.node-finance { top: 50%; left: 25%; }
.node-hr { top: 50%; left: 75%; }
.node-ops-left { top: 80%; left: 37.5%; }
.node-ops-right { top: 80%; left: 62.5%; }

/* SVG Connecting Lines */
.org-connections { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.org-line { fill: none; stroke: rgba(255, 255, 255, 0.1); stroke-width: 2; transition: 0.4s; }

/* Active States (Controlled by JS Classes on Container) */
/* Exec Active */
.target-exec .node-exec { border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transform: translate(-50%, -50%) scale(1.1); }
.target-exec .node-exec .node-pulse { border-color: var(--brand-neon-orange); opacity: 1; }
.target-exec .line-exec-finance, .target-exec .line-exec-hr { stroke: var(--brand-neon-orange); stroke-dasharray: 10; animation: dashFlow 2s linear infinite; }

/* Finance Active */
.target-finance .node-finance { border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); transform: translate(-50%, -50%) scale(1.1); }
.target-finance .node-finance .node-pulse { border-color: var(--brand-neon-blue); opacity: 1; }
.target-finance .line-exec-finance { stroke: var(--brand-neon-blue); stroke-dasharray: 10; animation: dashFlowReverse 2s linear infinite; }
.target-finance .line-finance-ops { stroke: var(--brand-neon-blue); stroke-dasharray: 10; animation: dashFlow 2s linear infinite; }

/* HR Active */
.target-hr .node-hr { border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); transform: translate(-50%, -50%) scale(1.1); }
.target-hr .node-hr .node-pulse { border-color: var(--brand-neon-blue); opacity: 1; }
.target-hr .line-exec-hr { stroke: var(--brand-neon-blue); stroke-dasharray: 10; animation: dashFlowReverse 2s linear infinite; }
.target-hr .line-hr-ops { stroke: var(--brand-neon-blue); stroke-dasharray: 10; animation: dashFlow 2s linear infinite; }

/* Ops/Supply Chain Active */
.target-ops .node-ops-left, .target-ops .node-ops-right { border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.4); transform: translate(-50%, -50%) scale(1.1); }
.target-ops .node-ops-left .node-pulse, .target-ops .node-ops-right .node-pulse { border-color: var(--brand-neon-orange); opacity: 1; }
.target-ops .line-finance-ops, .target-ops .line-hr-ops { stroke: var(--brand-neon-orange); stroke-dasharray: 10; animation: dashFlowReverse 2s linear infinite; }

/* Status Panel */
.nonit-status-panel {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 15, 25, 0.8); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  padding: 8px 20px; text-align: center; white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8); z-index: 20; transition: 0.4s ease;
}
.nonit-status-panel .status-label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 3px; }
.nonit-status-panel .status-value { font-size: 0.85rem; letter-spacing: 1.5px; transition: color 0.4s ease; }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-nonit-grid { grid-template-columns: 1fr; gap: 80px; }
  .nonit-feature-card:hover, .nonit-feature-card.active { transform: translateX(5px); }
}
@media (max-width: 576px) {
  .org-matrix-container { width: 320px; height: 350px; }
  .node-ops-left { left: 30%; } .node-ops-right { left: 70%; }
}

/* ==================== NOVAFIX HEALTHCARE STAFFING SECTION ==================== */
.nova-health-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-health-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 80% 50%, rgba(255, 106, 0, 0.05) 0%, transparent 50%);
}

.nova-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Interactive Features --- */
.nova-health-features { display: flex; flex-direction: column; gap: 20px; }

.health-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.health-feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.health-feature-card:hover, .health-feature-card.active {
  background: rgba(0, 229, 255, 0.05);
  transform: translateX(10px);
}

.health-feature-card[data-color="blue"]:hover, .health-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.health-feature-card[data-color="blue"]:hover .health-feature-indicator, .health-feature-card[data-color="blue"].active .health-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.health-feature-card[data-color="orange"]:hover, .health-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.health-feature-card[data-color="orange"]:hover .health-feature-indicator, .health-feature-card[data-color="orange"].active .health-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.health-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.health-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.health-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.health-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.health-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Right: Biometric Scanner Visualizer --- */
.nova-health-visualizer {
  display: flex; justify-content: center; align-items: center;
  perspective: 1200px; min-height: 500px;
}

.health-scanner-container {
  position: relative;
  width: 100%; max-width: 450px; height: 450px;
  background: rgba(10, 15, 25, 0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 229, 255, 0.3);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(0, 229, 255, 0.1);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: hidden; transition: all 0.5s ease;
}

.health-scanner-container.glow-blue { border-color: var(--brand-neon-blue); box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(0, 229, 255, 0.15); }
.health-scanner-container.glow-orange { border-color: var(--brand-neon-orange); box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 40px rgba(255, 106, 0, 0.15); }

/* Sweeping Laser Line */
.scanner-laser {
  position: absolute; top: -10%; left: 0; width: 100%; height: 4px;
  background: var(--brand-neon-blue);
  box-shadow: 0 0 20px var(--brand-neon-blue), 0 50px 50px rgba(0, 229, 255, 0.2);
  animation: scanLaser 3s infinite linear alternate;
  z-index: 10; opacity: 0.8; transition: 0.5s ease;
}
.health-scanner-container.glow-orange .scanner-laser { background: var(--brand-neon-orange); box-shadow: 0 0 20px var(--brand-neon-orange), 0 50px 50px rgba(255, 106, 0, 0.2); }

@keyframes scanLaser { 0% { top: 0%; } 100% { top: 100%; } }

/* Tech HUD Corners */
.scanner-hud-corners .corner { position: absolute; width: 30px; height: 30px; border: 2px solid rgba(255, 255, 255, 0.3); transition: 0.5s ease; }
.health-scanner-container.glow-blue .corner { border-color: var(--brand-neon-blue); }
.health-scanner-container.glow-orange .corner { border-color: var(--brand-neon-orange); }
.tl { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.tr { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

/* Biometric Core */
.biometric-core {
  position: relative; width: 250px; height: 250px;
  display: flex; justify-content: center; align-items: center;
}

.bio-ring {
  position: absolute; border-radius: 50%;
  border: 2px dashed rgba(255, 255, 255, 0.2);
  transition: border-color 0.5s ease;
}
.b-ring-1 { width: 100%; height: 100%; animation: spinRing 12s linear infinite; }
.b-ring-2 { width: 75%; height: 75%; animation: spinRingReverse 8s linear infinite; border-style: dotted; }

.health-scanner-container.glow-blue .b-ring-1 { border-color: var(--brand-neon-blue); }
.health-scanner-container.glow-orange .b-ring-2 { border-color: var(--brand-neon-orange); }

/* Central Icon */
.bio-icon-wrapper {
  font-size: 5rem; color: var(--brand-neon-blue);
  filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.5));
  transition: all 0.3s ease; z-index: 5;
}
.health-scanner-container.glow-orange .bio-icon-wrapper { color: var(--brand-neon-orange); filter: drop-shadow(0 0 20px rgba(255, 106, 0, 0.5)); }

/* Glitch Animation for Icon Swap */
.bio-icon-wrapper.glitch { opacity: 0; transform: scale(0.5) rotate(-15deg); filter: blur(5px); }

/* Status Readout */
.scanner-readout {
  position: absolute; bottom: 30px; font-size: 0.85rem; letter-spacing: 2px; color: var(--text-secondary);
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-health-grid { grid-template-columns: 1fr; gap: 60px; }
  .nova-health-visualizer { min-height: 400px; }
}
@media (max-width: 576px) {
  .health-scanner-container { height: 350px; }
  .biometric-core { width: 200px; height: 200px; }
  .bio-icon-wrapper { font-size: 4rem; }
}

/* ==================== NOVAFIX MANAGED IT SECTION ==================== */
.nova-managed-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-managed-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(0, 229, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
  mask-image: radial-gradient(ellipse at center right, black 10%, transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at center right, black 10%, transparent 60%);
}

.nova-managed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Interactive Features --- */
.nova-managed-features { display: flex; flex-direction: column; gap: 20px; }

.managed-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.managed-feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.managed-feature-card:hover, .managed-feature-card.active { background: rgba(0, 229, 255, 0.05); transform: translateX(10px); }

.managed-feature-card[data-color="blue"]:hover, .managed-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.managed-feature-card[data-color="blue"]:hover .managed-feature-indicator, .managed-feature-card[data-color="blue"].active .managed-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.managed-feature-card[data-color="orange"]:hover, .managed-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.managed-feature-card[data-color="orange"]:hover .managed-feature-indicator, .managed-feature-card[data-color="orange"].active .managed-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.managed-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.managed-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.managed-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.managed-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.managed-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Right: NOC Dashboard Visualizer --- */
.nova-managed-visualizer {
  display: flex; justify-content: center; align-items: center;
  min-height: 500px;
}

.noc-dashboard-container {
  position: relative;
  width: 100%; max-width: 480px; height: 480px;
  background: rgba(10, 15, 25, 0.6); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px; padding: 20px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(0, 229, 255, 0.05);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 15px;
  transition: all 0.5s ease;
}

.noc-dashboard-container.glow-blue { border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(0, 229, 255, 0.1); }
.noc-dashboard-container.glow-orange { border-color: rgba(255, 106, 0, 0.3); box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 40px rgba(255, 106, 0, 0.1); }

/* Generic Module Styling */
.noc-module {
  position: relative; background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,255,255,0.1); border-radius: 8px;
  display: flex; justify-content: center; align-items: center;
  overflow: hidden; transition: 0.4s ease;
}
.module-icon { position: absolute; font-size: 4rem; color: rgba(255,255,255,0.05); z-index: 0; pointer-events: none; }
.bg-icon { font-size: 5rem; }

/* Active States for Modules */
.noc-module.active-blue { border-color: var(--brand-neon-blue); box-shadow: inset 0 0 20px rgba(0, 229, 255, 0.2); }
.noc-module.active-orange { border-color: var(--brand-neon-orange); box-shadow: inset 0 0 20px rgba(255, 106, 0, 0.2); }

/* 1. Radar Module */
.radar-bg { position: absolute; width: 120px; height: 120px; border: 1px dashed rgba(0, 229, 255, 0.3); border-radius: 50%; z-index: 1; }
.radar-sweep { position: absolute; width: 60px; height: 60px; transform-origin: bottom right; background: conic-gradient(from 0deg, transparent 70%, rgba(0, 229, 255, 0.5) 100%); border-right: 2px solid var(--brand-neon-blue); top: calc(50% - 60px); left: calc(50% - 60px); animation: sweepSpin 3s linear infinite; z-index: 2; border-radius: 100% 0 0 0; }
.active-blue .radar-sweep { animation-duration: 1s; } /* Spin faster when active */
@keyframes sweepSpin { 100% { transform: rotate(360deg); } }
.radar-blip { position: absolute; width: 6px; height: 6px; background: #00FF88; border-radius: 50%; box-shadow: 0 0 8px #00FF88; opacity: 0; z-index: 3; }
.b-1 { top: 30%; left: 40%; animation: blipPing 3s infinite 0.5s; }
.b-2 { bottom: 40%; right: 30%; animation: blipPing 3s infinite 1.5s; }
.b-3 { top: 60%; left: 70%; animation: blipPing 3s infinite 2.2s; }
@keyframes blipPing { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }

/* 2. Server Rack Module */
.noc-server-wrapper { flex-direction: column; gap: 10px; }
.server-unit { width: 80%; height: 25px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; display: flex; align-items: center; padding: 0 10px; gap: 8px; z-index: 1; }
.s-light { width: 6px; height: 6px; border-radius: 50%; }
.green { background: #00FF88; box-shadow: 0 0 5px #00FF88; }
.red { background: #FF3366; box-shadow: 0 0 5px #FF3366; }
.blinking { animation: blinkLight 1s infinite; }
.s-line { flex: 1; height: 2px; background: rgba(255,255,255,0.1); }
@keyframes blinkLight { 50% { opacity: 0.3; } }
/* Server Active State */
.active-orange .server-unit:nth-child(2) { border-color: var(--brand-neon-orange); box-shadow: inset 0 0 10px rgba(255, 106, 0, 0.3); }
.active-orange .server-unit:nth-child(2) .s-light:nth-child(2) { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); animation-duration: 0.2s; }

/* 3. Helpdesk Audio Wave Module */
.audio-wave { display: flex; align-items: center; gap: 5px; z-index: 1; height: 60px; }
.bar { width: 8px; background: var(--brand-neon-blue); border-radius: 4px; height: 10px; transition: 0.2s; }
/* Static small bars normally */
/* Active State Audio */
.active-blue .bar { animation: waveBounce 0.5s infinite alternate ease-in-out; box-shadow: 0 0 10px var(--brand-neon-blue); }
.active-blue .bar:nth-child(2) { animation-delay: 0.1s; } .active-blue .bar:nth-child(3) { animation-delay: 0.2s; } .active-blue .bar:nth-child(4) { animation-delay: 0.3s; } .active-blue .bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes waveBounce { 0% { height: 10px; } 100% { height: 50px; } }

/* 4. Security Shield Module */
.shield-core { font-size: 3rem; color: rgba(255,255,255,0.2); z-index: 1; transition: 0.4s ease; }
.shield-pulse { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid var(--brand-neon-orange); opacity: 0; z-index: 0; }
/* Shield Active State */
.active-orange .shield-core { color: var(--brand-neon-orange); filter: drop-shadow(0 0 15px var(--brand-neon-orange)); }
.active-orange .shield-pulse { animation: shieldPing 1.5s infinite; }
@keyframes shieldPing { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

/* Central Status Readout */
.noc-status-panel {
  position: absolute; bottom: -25px; left: 50%; transform: translateX(-50%);
  background: rgba(10, 15, 25, 0.9); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  padding: 8px 25px; text-align: center; white-space: nowrap;
  box-shadow: 0 10px 20px rgba(0,0,0,0.8); z-index: 20; transition: 0.4s ease;
}
.noc-dashboard-container.glow-blue .noc-status-panel { border-bottom: 2px solid var(--brand-neon-blue); }
.noc-dashboard-container.glow-orange .noc-status-panel { border-bottom: 2px solid var(--brand-neon-orange); }

.status-label { font-size: 0.65rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 3px; }
.status-value { font-size: 0.85rem; letter-spacing: 1.5px; transition: color 0.4s ease; }

/* Responsive Adjustments */
@media (max-width: 991px) {
  .nova-managed-grid { grid-template-columns: 1fr; gap: 80px; }
  .managed-feature-card:hover, .managed-feature-card.active { transform: translateX(5px); }
}
@media (max-width: 576px) {
  .noc-dashboard-container { height: auto; grid-template-columns: 1fr; grid-template-rows: repeat(4, 120px); }
  .noc-status-panel { bottom: -20px; padding: 8px 15px; }
}

/* ==================== NOVAFIX BPO SERVICES SECTION ==================== */
.nova-bpo-section {
  position: relative;
  background-color: var(--bg-dark-core);
  padding: 120px 0;
  overflow: hidden;
  border-top: 1px solid rgba(0, 229, 255, 0.1);
}

.nova-bpo-ambient {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(circle at 70% 50%, rgba(255, 106, 0, 0.05) 0%, transparent 60%);
}

.nova-bpo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-top: 60px;
}

/* --- Left: Interactive Features --- */
.nova-bpo-features { display: flex; flex-direction: column; gap: 20px; }

.bpo-feature-card {
  position: relative;
  background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 25px 30px 25px 40px;
  cursor: pointer; overflow: hidden; transition: all 0.4s ease;
}

.bpo-feature-indicator {
  position: absolute; top: 0; left: 0; width: 4px; height: 100%;
  background: rgba(255, 255, 255, 0.1); transition: all 0.4s ease;
}

.bpo-feature-card:hover, .bpo-feature-card.active { background: rgba(0, 229, 255, 0.05); transform: translateX(10px); }

.bpo-feature-card[data-color="blue"]:hover, .bpo-feature-card[data-color="blue"].active { border-color: rgba(0, 229, 255, 0.2); box-shadow: 0 10px 30px rgba(0, 229, 255, 0.05); }
.bpo-feature-card[data-color="blue"]:hover .bpo-feature-indicator, .bpo-feature-card[data-color="blue"].active .bpo-feature-indicator { background: var(--brand-neon-blue); box-shadow: 0 0 10px var(--brand-neon-blue); }

.bpo-feature-card[data-color="orange"]:hover, .bpo-feature-card[data-color="orange"].active { border-color: rgba(255, 106, 0, 0.2); box-shadow: 0 10px 30px rgba(255, 106, 0, 0.05); }
.bpo-feature-card[data-color="orange"]:hover .bpo-feature-indicator, .bpo-feature-card[data-color="orange"].active .bpo-feature-indicator { background: var(--brand-neon-orange); box-shadow: 0 0 10px var(--brand-neon-orange); }

.bpo-feature-content h3 { font-size: 1.2rem; color: var(--text-primary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px; }
.bpo-feature-content h3 i { margin-right: 10px; color: var(--text-secondary); transition: 0.3s; }
.bpo-feature-card[data-color="blue"].active h3 i { color: var(--brand-neon-blue); }
.bpo-feature-card[data-color="orange"].active h3 i { color: var(--brand-neon-orange); }
.bpo-feature-content p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* --- Right: Holographic Globe Visualizer --- */
.nova-bpo-visualizer {
  display: flex; justify-content: center; align-items: center;
  perspective: 1200px; min-height: 550px;
}

.bpo-globe-container {
  position: relative;
  width: 100%; max-width: 450px; height: 450px;
  display: flex; justify-content: center; align-items: center;
  transition: all 0.5s ease;
}

/* Outer Orbit Track */
.globe-orbit-track {
  position: absolute; width: 420px; height: 420px;
  border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: orbitTrack 15s linear infinite; z-index: 10;
}
.bpo-globe-container.glow-blue .globe-orbit-track { border-color: rgba(0, 229, 255, 0.3); }
.bpo-globe-container.glow-orange .globe-orbit-track { border-color: rgba(255, 106, 0, 0.3); }

.globe-satellite {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; background: var(--bg-dark-panel);
  border-radius: 50%; border: 1px solid var(--text-secondary);
  display: flex; justify-content: center; align-items: center;
  color: var(--text-secondary); font-size: 0.9rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.8); transition: 0.4s ease;
}
.bpo-globe-container.glow-blue .globe-satellite { border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 15px var(--brand-neon-blue); }
.bpo-globe-container.glow-orange .globe-satellite { border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 15px var(--brand-neon-orange); }

@keyframes orbitTrack { 100% { transform: rotate(360deg); } }

/* 3D Wireframe Globe */
.holographic-globe {
  position: relative; width: 280px; height: 280px;
  transform-style: preserve-3d;
  animation: spinGlobe 20s linear infinite;
}

/* The Fast Spin triggered by JS */
.holographic-globe.spin-fast { animation-duration: 8s; }

@keyframes spinGlobe {
  0% { transform: rotateX(15deg) rotateY(0deg); }
  100% { transform: rotateX(15deg) rotateY(360deg); }
}

.globe-core-glow {
  position: absolute; inset: 10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 229, 255, 0.15) 0%, transparent 70%);
  box-shadow: inset 0 0 40px rgba(0, 229, 255, 0.2); transition: 0.4s ease;
}
.bpo-globe-container.glow-orange .globe-core-glow { background: radial-gradient(circle, rgba(255, 106, 0, 0.15) 0%, transparent 70%); box-shadow: inset 0 0 40px rgba(255, 106, 0, 0.2); }

.g-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, 0.3); transition: 0.4s ease;
}
.bpo-globe-container.glow-orange .g-ring { border-color: rgba(255, 106, 0, 0.3); }

/* Longitude */
.r-0 { transform: rotateY(0deg); } .r-45 { transform: rotateY(45deg); }
.r-90 { transform: rotateY(90deg); } .r-135 { transform: rotateY(135deg); }
/* Latitude */
.r-eq { transform: rotateX(90deg); }
.r-lat-top { transform: rotateX(90deg) translateZ(70px) scale(0.86); }
.r-lat-bot { transform: rotateX(90deg) translateZ(-70px) scale(0.86); }

/* Floating Connection Nodes */
.bpo-node {
  position: absolute; width: 45px; height: 45px;
  background: rgba(18, 24, 38, 0.8); backdrop-filter: blur(5px);
  border-radius: 50%; border: 1px solid var(--text-secondary);
  display: flex; justify-content: center; align-items: center;
  font-size: 1.2rem; color: var(--text-primary);
  box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 20; transition: 0.4s ease;
}
.node-hq { top: 10%; left: 10%; border-color: var(--brand-neon-blue); color: var(--brand-neon-blue); box-shadow: 0 0 20px rgba(0, 229, 255, 0.2); animation: floatNode 4s infinite alternate; }
.node-offshore { bottom: 15%; right: 5%; border-color: var(--brand-neon-orange); color: var(--brand-neon-orange); box-shadow: 0 0 20px rgba(255, 106, 0, 0.2); animation: floatNode 5s infinite alternate-reverse; }

/* Status Terminal Panel */
.bpo-status-panel {
  position: absolute; bottom: -30px;
  background: rgba(10, 15, 25, 0.8); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px;
  padding: 12px 25px; text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.8); transition: 0.4s ease;
}
.bpo-globe-container.glow-blue .bpo-status-panel { border-bottom: 3px solid var(--brand-neon-blue); }
.bpo-globe-container.glow-orange .bpo-status-panel { border-bottom: 3px solid var(--brand-neon-orange); }

.status-label { font-size: 0.75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1.5px; display: block; margin-bottom: 5px; }
.status-value { font-size: 0.95rem; letter-spacing: 1.5px; transition: color 0.4s ease; }

/* Responsive */
@media (max-width: 991px) {
  .nova-bpo-grid { grid-template-columns: 1fr; gap: 80px; }
  .nova-bpo-visualizer { min-height: 450px; }
  .bpo-feature-card:hover, .bpo-feature-card.active { transform: translateX(5px); }
}
@media (max-width: 576px) {
  .globe-orbit-track { width: 320px; height: 320px; }
  .holographic-globe { width: 220px; height: 220px; }
  .r-lat-top { transform: rotateX(90deg) translateZ(55px) scale(0.86); }
  .r-lat-bot { transform: rotateX(90deg) translateZ(-55px) scale(0.86); }
  .node-hq { top: 0%; left: 0%; } .node-offshore { bottom: 5%; right: 0%; }
}