/* ===== MODERN IT CONSULTING THEME - PROFESSIONAL STANDARD ===== */

/* Import Section Styles */
@import url('https://unpkg.com/aos@2.3.4/dist/aos.css');
/* Removed unused section import */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    background-color: #ffffff;
}
/* Top-edge seam guard (disabled) */
html::before { content: ""; height: 0; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    background-color: transparent;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== PROFESSIONAL COLOR PALETTE ===== */
:root {
    /* Primary Colors - Professional Blue */
    --primary-50: #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    
    /* Professional Accent Colors */
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;
    --accent-info: #06b6d4;
    --accent-purple: #8b5cf6;
    --accent-orange: #f97316;
    --accent-teal: #14b8a6;
    --accent-pink: #ec4899;
    
    /* Neutral Colors - Professional Grays */
    --neutral-50: #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    
    /* Semantic Colors */
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-tertiary: #71717a;
    --text-inverse: #ffffff;
    
    --bg-primary: #ffffff;
    --bg-secondary: #fafafa;
    --bg-tertiary: #f4f4f5;
    --bg-elevated: #ffffff;
    
    --border-light: #e4e4e7;
    --border-medium: #d4d4d8;
    --border-strong: #a1a1aa;
    
    /* Professional Shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    
    /* Spacing System */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    
    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 6rem;
    --font-size-9xl: 8rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 6rem;
    --font-size-9xl: 8rem;
    
    /* Typography */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Compatibility vars for section CSS (why-choose-us.css) */
    --primary-color: var(--primary-600);
    --secondary-color: var(--accent-purple);
    --background-color: var(--bg-primary);
    --heading-color: var(--text-primary);
    --text-color: var(--text-primary);
    --text-muted: var(--text-secondary);
    --card-bg: var(--bg-elevated);
    --border-color: var(--border-light);
    --primary-rgb: 59, 130, 246;
}

/* ===== RESPONSIVE CONTAINER SYSTEM ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

@media (min-width: 640px) {
    .container {
        padding: 0 var(--space-6);
    }
}

@media (min-width: 768px) {
    .container {
        padding: 0 var(--space-8);
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 var(--space-10);
    }
}

@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-12);
    }
}

/* Mobile Menu Styles - Removed conflicting styles */

/* ===== MODERN AVIATION HERO SECTION ===== */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0f1c 0%, #1a2332 50%, #0d1421 100%);
    overflow: hidden;
    color: white;
    padding: 2rem 0;
}

/* Aviation-inspired background pattern */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.08) 0%, transparent 50%),
        linear-gradient(45deg, transparent 49%, rgba(59, 130, 246, 0.03) 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, rgba(16, 185, 129, 0.02) 50%, transparent 51%);
    background-size: 400px 400px, 600px 600px, 60px 60px, 60px 60px;
    animation: heroPatternMove 20s ease-in-out infinite;
    z-index: 1;
}

/* Animated radar sweep effect */
.hero::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, transparent 0deg, rgba(59, 130, 246, 0.1) 60deg, transparent 120deg);
    border-radius: 50%;
    animation: radarSweep 8s linear infinite;
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1000px;
    padding: 0 1.5rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.hero-badge i {
    font-size: 1rem;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 0.75rem;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 30px rgba(59, 130, 246, 0.2);
    text-align: center;
}

.hero-rotator-wrap {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    height: 1.2em;
    width: 0;
    overflow: visible;
}

.hero-rotator {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: #60a5fa;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: opacity 400ms ease;
    text-align: center;
    width: max-content;
    display: block;
}

.hero-description {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    color: #cbd5e1;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    text-align: center;
}

.hero-actions .btn {
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hero-actions .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
}

.hero-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.hero-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* Aviation metrics display */
.hero-metrics {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.hero-metric {
    text-align: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    min-width: 120px;
}

.hero-metric-value {
    font-size: 1.5rem;
    font-weight: 900;
    color: #3b82f6;
    display: block;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.hero-metric-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
}

/* Animations */
@keyframes heroPatternMove {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-10px, -10px); }
    50% { transform: translate(10px, -5px); }
    75% { transform: translate(-5px, 10px); }
}

@keyframes radarSweep {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Performance optimizations */
.hero::before,
.hero::after {
    will-change: transform;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero::before,
    .hero::after {
        animation: none;
    }
    
    .hero-rotator {
        transition: opacity 200ms ease;
    }
}

/* ===== Legal/Policy Layout ===== */
.policy-layout {
  display: flex;
  justify-content: center;
  align-items: start;
  margin-top: 2rem;
  padding: 0 1rem;
}

.policy-toc {
  position: sticky;
  top: 90px;
  align-self: start;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.policy-toc .toc-title {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .5rem;
}

.policy-toc .toc-link {
  display: block;
  padding: .5rem .5rem;
  border-radius: .5rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
  font-size: var(--font-size-sm);
}

.policy-toc .toc-link:hover { background: var(--neutral-100); color: var(--text-primary); }
.policy-toc .toc-link.active { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }

.policy-content {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.policy-content .policy-header {
  margin-bottom: 2rem;
  text-align: center;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}

.policy-content .policy-date { 
  color: var(--text-secondary); 
  text-align: center;
}

.policy-body {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 2.5rem;
  margin-top: 1.5rem;
}

.policy-section { margin-bottom: 1.75rem; }
.policy-section h2 { font-size: var(--font-size-2xl); margin-bottom: .5rem; }
.policy-section p, .policy-section ul { color: var(--text-secondary); }
.policy-section ul { padding-left: 1.25rem; }
.policy-section ul li { margin: .25rem 0; }

/* Enhanced responsive design for policy pages */
@media (max-width: 1024px) {
  .policy-layout { 
    margin-top: 1rem;
    padding: 0 0.75rem;
  }
  
  .policy-content {
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .policy-layout {
    margin-top: 0.5rem;
    padding: 0 0.5rem;
  }
  
  .policy-content {
    max-width: 600px;
  }
  
  .policy-body {
    padding: 1.5rem;
  }
  
  .policy-section {
    margin-bottom: 1.5rem;
  }
  
  .policy-section h2 {
    font-size: var(--font-size-xl);
  }
}

@media (max-width: 480px) {
  .policy-layout {
    margin-top: 0.25rem;
    padding: 0 0.25rem;
  }
  
  .policy-content {
    max-width: 100%;
  }
  
  .policy-body {
    padding: 1rem;
  }
  
  .policy-section {
    margin-bottom: 1.25rem;
  }
  
  .policy-section h2 {
    font-size: var(--font-size-lg);
    margin-bottom: 0.5rem;
  }
  
  .policy-section p,
  .policy-section ul {
    font-size: var(--font-size-sm);
  }
}

/* About - Principles grid */
.principles-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.principle { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease; }
.principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.principle .p-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: linear-gradient(135deg, var(--primary-100), var(--primary-50)); color: var(--primary-700); }
.principle h3 { font-size: 1.05rem; margin: 0 0 6px; }
.principle p { color: var(--text-secondary); margin: 0; }
@media (max-width: 1024px) { .principles-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .principles-grid { grid-template-columns: 1fr; } }

/* About - Credentials strip */
.cred-strip { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 12px; align-items: center; }
.cred { text-align: center; padding: 10px 12px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 999px; font-weight: 700; box-shadow: var(--shadow-xs); }
@media (max-width: 900px) { .cred-strip { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px) { .cred-strip { grid-template-columns: repeat(2,1fr); } }

/* About - Engage steps */
.engage-steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.engage-step { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.engage-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.engage-step .es-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 10px; background: linear-gradient(135deg, var(--accent-teal), var(--primary-100)); color: #0b1220; }
.engage-step h3 { font-size: 1.05rem; margin: 0 0 6px; }
.engage-step .mini { padding-left: 18px; color: var(--text-secondary); }
@media (max-width: 1024px) { .engage-steps { grid-template-columns: 1fr; } }

/* About - Who We Are list */
.who { max-width: 900px; }
.who { max-width: 1040px; text-align: center; margin-left: auto; margin-right: auto; }
.who .lead { max-width: 780px; margin: 8px auto 0; }
.who-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 16px auto 0; max-width: 980px; }
.who-card { background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-sm); text-align: left; transition: transform .2s ease, box-shadow .2s ease; }
.who-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.who-card-head { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.who-card-head i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--primary-100), var(--primary-50)); color: var(--primary-700); }
.who-card h3 { margin: 0; font-size: 1.05rem; }
.who-card p { margin: 8px 0 8px; color: var(--text-secondary); }
.who-card .mini { color: var(--text-secondary); padding-left: 18px; }
@media (max-width: 900px) { .who-cards { grid-template-columns: 1fr; } }

/* Achievement Counter */
.achievements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.achievement-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-normal);
}

.achievement-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.achievement-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--primary-600);
    margin-bottom: 0.5rem;
}

.achievement-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== POLICY PAGES COMPACT HERO ===== */
/* Compact hero styling for policy pages */
.policy-page .hero {
    min-height: 40vh;
    padding: 1.5rem 0;
}

.policy-page .hero-content {
    padding: 0 1rem;
}

.policy-page .hero-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: 0.5rem;
}

.policy-page .hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin-bottom: 0;
    max-width: 600px;
}

/* Responsive policy hero */
@media (max-width: 768px) {
    .policy-page .hero {
        min-height: 35vh;
        padding: 1rem 0;
    }
    
    .policy-page .hero-title {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        margin-bottom: 0.5rem;
    }
    
    .policy-page .hero-description {
        font-size: clamp(0.9rem, 3vw, 1.125rem);
    }
}

@media (max-width: 480px) {
    .policy-page .hero {
        min-height: 30vh;
        padding: 0.75rem 0;
    }
    
    .policy-page .hero-title {
        margin-bottom: 0.25rem;
    }
}

/* ===== RESPONSIVE AVIATION HERO ===== */
@media (max-width: 1024px) {
    .hero {
        min-height: 60vh;
        padding: 1.5rem 0;
    }
    
    .hero-content {
        padding: 0 1.25rem;
    }
    
    .hero::after {
        width: 600px;
        height: 600px;
    }
    
    .hero-actions {
        justify-content: center;
        align-items: center;
        margin-bottom: 1rem;
    }
    
    .hero-metrics {
        gap: 1.5rem;
        margin-top: 0.75rem;
    }
    
    .hero-metric {
        min-width: 100px;
        padding: 0.75rem;
    }
}

@media (max-width: 768px) {
    .hero {
        min-height: 50vh;
        padding: 1rem 0;
    }
    
    .hero-content {
        padding: 0 1rem;
    }
    
    .hero::after {
        width: 400px;
        height: 400px;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    .hero-title {
        font-size: clamp(2rem, 8vw, 3.5rem);
        margin-bottom: 0.5rem;
    }
    
    .hero-rotator-wrap {
        width: 0;
        height: 1.2em;
        display: inline-block;
        position: relative;
        overflow: visible;
    }
    
    .hero-description {
        font-size: clamp(1rem, 3vw, 1.125rem);
        margin-bottom: 1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        gap: 0.75rem;
        margin-bottom: 1rem;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    
    .hero-actions .btn {
        width: 100%;
        max-width: 300px;
        padding: 0.875rem 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .hero-metrics {
        gap: 1rem;
        margin-top: 0.75rem;
    }
    
    .hero-metric {
        min-width: 80px;
        padding: 0.5rem;
    }
    
    .hero-metric-value {
        font-size: 1.25rem;
    }
    
    .hero-metric-label {
        font-size: 0.625rem;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: 45vh;
        padding: 0.75rem 0;
    }
    
    .hero-content {
        padding: 0 0.75rem;
    }
    
    .hero::after {
        width: 300px;
        height: 300px;
    }
    
    .hero-badge {
        margin-bottom: 0.5rem;
    }
    
    .hero-title {
        margin-bottom: 0.5rem;
    }
    
    .hero-description {
        margin-bottom: 0.75rem;
    }
    
    .hero-actions {
        margin-bottom: 0.75rem;
    }
    
    .hero-rotator-wrap {
        width: 0;
        height: 1.2em;
        display: inline-block;
        position: relative;
        overflow: visible;
    }
    
    .hero-metrics {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .hero-metric {
        width: 100%;
        max-width: 200px;
        padding: 0.375rem;
    }
}

/* Additional mobile styles */
@media (max-width: 480px) {
    .nav-menu { gap: var(--space-2); }
    .nav-link { font-size: var(--font-size-base); }
    .btn { padding: var(--space-3) var(--space-5); }
    
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Clean hamburger menu styling - debugging removed */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1003 !important;
        margin-left: auto !important;
    }
    
    /* Hide screen reader text but keep hamburger lines */
    .mobile-menu-toggle .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}
/* Rotator responsive styles integrated into main responsive sections above */

/* Light theme styles only */
[data-theme="dark"] .pricing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .pricing-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .pricing-card h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .pricing-card .price {
    color: var(--text-primary);
}

[data-theme="dark"] .pricing-card .period {
    color: var(--text-secondary);
}

[data-theme="dark"] .pricing-card .description {
    color: var(--text-secondary);
}

/* Dark theme mappings for section CSS compatibility */
[data-theme="dark"] {
    --background-color: var(--bg-primary);
    --heading-color: var(--text-primary);
    --text-color: var(--text-primary);
    --text-muted: var(--text-secondary);
    --card-bg: var(--bg-elevated);
    --border-color: var(--border-medium);
}

[data-theme="dark"] .pricing-card .features li {
    color: var(--text-secondary);
}

[data-theme="dark"] .contact-details {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .contact-details:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .form-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .form-row:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .brand-description {
    color: var(--text-secondary);
}

[data-theme="dark"] .social-links a {
    color: var(--text-secondary);
}

[data-theme="dark"] .social-links a:hover {
    color: var(--primary-400);
}

[data-theme="dark"] .error-message {
    color: var(--accent-danger);
}

[data-theme="dark"] .form-status.success {
    color: var(--accent-success);
}

[data-theme="dark"] .form-status.error {
    color: var(--accent-danger);
}

[data-theme="dark"] .nav-menu.active {
    background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

[data-theme="dark"] .mobile-menu-toggle span {
    background: var(--text-primary);
}

[data-theme="dark"] .mobile-menu-toggle:active span,
[data-theme="dark"] .mobile-menu-toggle:focus span,
[data-theme="dark"] .mobile-menu-toggle.active span {
    background: var(--text-primary) !important;
}

/* Mobile Menu Toggle Animation */
.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Additional Dark Theme Fixes */
/* Additional dark theme hero badge CSS removed per user request */

[data-theme="dark"] .stat-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .stat-item:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .stat-number {
    color: var(--text-primary);
}

[data-theme="dark"] .stat-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .service-link {
    color: var(--primary-400);
}

[data-theme="dark"] .service-link:hover {
    color: var(--primary-300);
}

[data-theme="dark"] .about-features {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .about-features:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .challenge-level {
    color: var(--text-secondary);
}

[data-theme="dark"] .timeline-year {
    background: var(--primary-600);
    color: var(--text-inverse);
}

[data-theme="dark"] .mission-icon,
[data-theme="dark"] .vision-icon {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .mission-icon i,
[data-theme="dark"] .vision-icon i {
    color: var(--primary-400);
}

[data-theme="dark"] .leader-photo {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .leader-photo i {
    color: var(--primary-400);
}

[data-theme="dark"] .contact-form-container {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .contact-form-container:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

[data-theme="dark"] .form-actions {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .checkbox-group {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .checkbox-group:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

/* Dark theme for notification system */
[data-theme="dark"] .notification {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
}

[data-theme="dark"] .notification.notification-success {
    background: var(--accent-success);
    color: var(--text-inverse);
}

[data-theme="dark"] .notification.notification-error {
    background: var(--accent-danger);
    color: var(--text-inverse);
}

[data-theme="dark"] .notification.notification-warning {
    background: var(--accent-warning);
    color: var(--text-inverse);
}

/* Skip link CSS removed per user request */

/* Dark theme for focus indicators */
[data-theme="dark"] .keyboard-navigation *:focus {
    outline: 2px solid var(--primary-400);
    outline-offset: 2px;
}

/* Dark theme for specific page components */
[data-theme="dark"] .hero-stats {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .hero-stats .stat-item {
    background: transparent;
    border: none;
}

[data-theme="dark"] .hero-stats .stat-item:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .about-visual {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
}

[data-theme="dark"] .about-visual:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

/* Dark theme for specific icons and elements */
[data-theme="dark"] .challenge-icon {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
}

[data-theme="dark"] .challenge-icon i {
    color: var(--primary-400);
}

[data-theme="dark"] .challenge-card:hover .challenge-icon {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

[data-theme="dark"] .challenge-card:hover .challenge-icon i {
    color: var(--text-inverse);
}

/* Dark theme for form elements */
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

[data-theme="dark"] select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2360a5fa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Dark theme for scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* Dark theme for selection */
[data-theme="dark"] ::selection {
    background: var(--primary-600);
    color: var(--text-inverse);
}

[data-theme="dark"] ::-moz-selection {
    background: var(--primary-600);
    color: var(--text-inverse);
}

/* Dark theme for additional components */
[data-theme="dark"] .challenge-card.critical::before {
    background: linear-gradient(135deg, var(--accent-danger) 0%, rgba(239, 68, 68, 0.8) 100%);
}

[data-theme="dark"] .challenge-card.high::before {
    background: linear-gradient(135deg, var(--accent-warning) 0%, rgba(245, 158, 11, 0.8) 100%);
}

[data-theme="dark"] .challenge-card.medium::before {
    background: linear-gradient(135deg, var(--accent-info) 0%, rgba(6, 182, 212, 0.8) 100%);
}

[data-theme="dark"] .timeline-item::before {
    background: var(--primary-600);
}

[data-theme="dark"] .timeline-item::after {
    background: var(--border-medium);
}

[data-theme="dark"] .mission-card::before,
[data-theme="dark"] .vision-card::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

[data-theme="dark"] .value-item::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

[data-theme="dark"] .leader-card::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

[data-theme="dark"] .pricing-card::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

[data-theme="dark"] .contact-details::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

[data-theme="dark"] .form-row::before {
    background: linear-gradient(135deg, var(--primary-600) 0%, rgba(59, 130, 246, 0.8) 100%);
}

/* Dark theme for service cards with pricing */
[data-theme="dark"] .service-pricing {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-medium);
    color: var(--text-secondary);
}

[data-theme="dark"] .service-pricing:hover {
    background: var(--bg-primary);
    border-color: var(--primary-500);
    color: var(--text-primary);
}

/* Dark theme for any remaining text elements */
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6 {
    color: var(--text-primary);
}

[data-theme="dark"] p {
    color: var(--text-secondary);
}

[data-theme="dark"] a {
    color: var(--primary-400);
}

[data-theme="dark"] a:hover {
    color: var(--primary-300);
}

/* Dark theme for any remaining list elements */
[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
    color: var(--text-secondary);
}

[data-theme="dark"] ul li::before,
[data-theme="dark"] ol li::before {
    color: var(--primary-400);
}

/* Dark theme for any remaining button states */
[data-theme="dark"] .btn:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-color: var(--border-light);
}

[data-theme="dark"] .btn:disabled:hover {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border-color: var(--border-light);
    transform: none;
    box-shadow: none;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Accessibility utility */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.section {
    padding: var(--space-16) 0;
    position: relative;
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    z-index: -1;
}

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    z-index: 1002;
    transition: var(--transition-normal);
    /* Ensure navbar is properly sized on all devices */
    min-height: 64px;
}

[data-theme="dark"] .navbar {
    background: rgba(15, 15, 15, 0.95);
    border-bottom: 1px solid var(--border-light);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    position: relative;
    /* Ensure proper spacing on all devices */
    min-height: 64px;
    /* Better responsive behavior for nav container */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.nav-brand {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 700;
    font-size: var(--font-size-xl);
    transition: var(--transition-normal);
    z-index: 1001;
    /* Ensure proper sizing on all devices */
    display: flex;
    align-items: center;
    min-height: 44px;
    /* Better responsive behavior for nav brand */
    flex-shrink: 0;
}

.nav-brand:hover {
    color: var(--primary-600);
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Ensure proper alignment on all devices */
    flex-shrink: 0;
}

.logo-text {
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo-dot {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='7.3' r='2.1' fill='%230b1220'/%3E%3Crect x='9.5' y='10' width='5' height='7' rx='1' fill='%230b1220'/%3E%3Cpath d='M12 11.8 L5.2 8.3' stroke='%230b1220' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 11.8 L18.8 8.3' stroke='%230b1220' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    /* Ensure logo scales properly on all devices */
    flex-shrink: 0;
}
.logo-dot::before,
.logo-dot::after {
    content: '';
    position: absolute;
    top: 8px;
    width: 9px;
    height: 3px;
    border-radius: 999px;
}
.logo-dot::before {
    left: 3.8px;
    top: 7.6px;
    transform-origin: 1px 1.5px;
    background: linear-gradient(90deg, rgba(15,23,42,0.95) 0 26%, rgba(239,68,68,1) 30%, rgba(220,38,38,1) 100%);
    border-left: 2px solid rgba(11,18,32,0.95);
    box-shadow: 0 0 4px rgba(239,68,68,0.75), 0 0 8px rgba(220,38,38,0.6);
    animation: wand-left 1.2s ease-in-out infinite;
}
.logo-dot::after {
    right: 3.8px;
    top: 7.6px;
    transform-origin: 8px 1.5px;
    background: linear-gradient(270deg, rgba(15,23,42,0.95) 0 26%, rgba(239,68,68,1) 30%, rgba(220,38,38,1) 100%);
    border-right: 2px solid rgba(11,18,32,0.95);
    box-shadow: 0 0 4px rgba(239,68,68,0.75), 0 0 8px rgba(220,38,38,0.6);
    animation: wand-right 1.2s ease-in-out infinite;
    animation-delay: 0.1s;
}
@keyframes wand-left {
    0%, 100% { transform: rotate(-32deg); }
    50% { transform: rotate(-8deg); }
}
@keyframes wand-right {
    0%, 100% { transform: rotate(32deg); }
    50% { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .logo-dot::before, .logo-dot::after { animation: none !important; }
}

/* Animated wands enabled via ::before/::after */
.logo-dot::before, .logo-dot::after { /* animation and styling defined above */ }

.nav-menu {
    display: flex;
    list-style: none;
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    visibility: visible;
    align-items: center;
    /* Ensure proper flex behavior on all devices */
    flex-shrink: 0;
}

.nav-link {
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: var(--transition-normal);
    position: relative;
    white-space: nowrap;
    /* Ensure proper touch targets on all devices */
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-600);
    background: var(--primary-50);
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
    background: var(--primary-900);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-600);
    transition: var(--transition-normal);
    transform: translateX(-50%);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Ensure proper flex behavior on all devices */
    flex-shrink: 0;
}

/* Mobile Menu Toggle - Hidden by default, shown on mobile/tablet */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: transparent !important;
    border: none;
    cursor: pointer;
    padding: var(--space-2);
    gap: 4px;
    z-index: 1003;
    transition: var(--transition-normal);
    /* Better touch target for mobile */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.mobile-menu-toggle:focus {
    outline: none !important;
    background: transparent !important;
}

.mobile-menu-toggle:active {
    background: transparent !important;
    transform: scale(0.98);
}

/* Ensure no browser defaults override hamburger styling */
.mobile-menu-toggle:focus span,
.mobile-menu-toggle:active span,
.mobile-menu-toggle:hover span {
    background: var(--text-primary) !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mobile-menu-toggle:hover {
    background: transparent;
    border-radius: var(--radius-md);
    /* Better hover state for mobile */
    transform: scale(1.05);
}

.mobile-menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary) !important;
    transition: var(--transition-normal);
    border-radius: var(--radius-full);
    display: block;
    opacity: 1;
    visibility: visible;
}

.mobile-menu-toggle:active span,
.mobile-menu-toggle:focus span,
.mobile-menu-toggle.active span {
    background: var(--text-primary) !important;
}

/* Ensure hamburger lines are visible in light/dark */
[data-theme="dark"] .mobile-menu-toggle span {
    background: var(--text-primary);
}

[data-theme="dark"] .mobile-menu-toggle:hover {
    background: transparent;
    transform: scale(1.05);
}

[data-theme="dark"] .mobile-menu-toggle:focus {
    outline: none;
    background: transparent !important;
}

[data-theme="dark"] .mobile-menu-toggle:active {
    background: transparent !important;
    transform: scale(0.98);
}

/* ===== RESPONSIVE NAVIGATION - MOBILE FIRST ===== */

/* Large Desktop - Navigation stays horizontal */
@media (min-width: 1025px) {
    .mobile-menu-toggle {
        display: none !important;
    }

    .nav-container {
        justify-content: space-between;
    }
    
    .nav-menu {
        display: flex !important;
        flex-direction: row;
        position: static;
        background: transparent;
        transform: none;
        opacity: 1;
        visibility: visible;
        height: auto;
        width: auto;
        padding: 0;
        gap: var(--space-8);
        overflow: visible;
        margin-left: auto;
        margin-right: 0;
        box-shadow: none;
        border: none;
        animation: none;
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--space-3) var(--space-4);
        width: auto;
        text-align: left;
        min-height: 44px;
        background: transparent;
        border: none;
        max-width: none;
    }
}

/* Tablet - Hidden by default, slides in from right when active */
@media (min-width: 769px) and (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex !important;
        position: relative;
        z-index: 1003;
        margin-left: auto;
        visibility: visible;
        opacity: 1;
    }
    
    .nav-container {
        min-height: 64px;
        padding: var(--space-3) var(--space-4);
        justify-content: space-between;
    }
    
    .nav-menu {
        display: none;
        position: fixed;
        top: 64px;
        right: 0;
        width: 320px;
        height: calc(100vh - 64px);
        background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        z-index: 1001;
        overflow-y: auto;
        padding: var(--space-6);
        gap: var(--space-4);
        padding-top: var(--space-6);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
        border-left: 1px solid rgba(148, 163, 184, 0.18);
    }

    .nav-menu.active {
        display: flex;
        animation: slideInRight 0.3s ease-in-out;
    }
    
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(100%);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        font-weight: 500;
        padding: var(--space-3) var(--space-4);
        width: 100%;
        text-align: left;
        border-radius: var(--radius-md);
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transition: all 0.2s ease;
        background: transparent;
        color: #e2e8f0;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
        transform: translateX(4px);
    }
    
    /* Dark theme uses same styling as light theme for consistency */
    [data-theme="dark"] .nav-menu {
        background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
        border-left-color: rgba(148, 163, 184, 0.18);
    }
    
    [data-theme="dark"] .nav-link {
        color: #e2e8f0;
    }
    
    [data-theme="dark"] .nav-link:hover,
    [data-theme="dark"] .nav-link.active {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
    }
}

/* Mobile Navigation - Hidden by default, slides down when active */
@media (max-width: 768px) {
    .mobile-menu-toggle {
        display: flex !important;
        position: relative;
        z-index: 1003;
        margin-left: auto;
        visibility: visible;
        opacity: 1;
    }
    
    .nav-container {
        min-height: 60px;
        padding: var(--space-3) var(--space-4);
        justify-content: space-between;
    }

    .nav-menu {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        z-index: 1001;
        overflow-y: auto;
        padding: var(--space-6);
        gap: var(--space-6);
        padding-top: var(--space-8);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        display: flex;
        animation: slideDown 0.3s ease-in-out;
    }

    @keyframes slideDown {
        from {
        opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .nav-link {
        font-size: var(--font-size-lg);
        font-weight: 600;
        padding: var(--space-4) var(--space-6);
        width: 100%;
        max-width: 280px;
        text-align: center;
        border-radius: var(--radius-lg);
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        border: 2px solid transparent;
        background: transparent;
        color: #e2e8f0;
    }
    
    .nav-link:hover,
    .nav-link.active {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
        border-color: rgba(255,255,255,0.2);
    }
    
    /* Dark theme uses same styling as light theme for consistency */
    [data-theme="dark"] .nav-menu {
        background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
    }
    
    [data-theme="dark"] .nav-link {
        color: #e2e8f0;
    }
    
    [data-theme="dark"] .nav-link:hover,
    [data-theme="dark"] .nav-link.active {
        background: rgba(255,255,255,0.1);
        color: #ffffff;
        border-color: rgba(255,255,255,0.2);
    }
    
    /* Mobile menu backdrop */
    .nav-menu::before {
        content: '';
        position: fixed;
        top: 60px;
        left: 0;
        width: 100%;
        height: calc(100vh - 60px);
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .nav-container {
        padding: var(--space-3) 0;
        min-height: 56px;
    }
    
    .nav-brand {
        font-size: var(--font-size-lg);
    }
    
    .logo-dot {
        width: 18px;
        height: 18px;
    }
    
    .nav-menu {
        padding: var(--space-6);
        gap: var(--space-6);
        padding-top: calc(56px + var(--space-6));
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--space-3) var(--space-4);
        min-height: 44px;
    }
    
    .mobile-menu-toggle {
        padding: var(--space-1);
        /* Better positioning for small screens */
        position: relative;
        z-index: 1002;
    }
    
    .mobile-menu-toggle span {
        width: 20px;
        height: 2px;
    }
    
    /* Ensure proper spacing for very small screens */
    .container {
        padding: 0 var(--space-3);
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .nav-menu {
        height: 100vh;
        padding: var(--space-4);
        gap: var(--space-4);
        /* Better landscape mobile menu positioning */
        padding-top: calc(64px + var(--space-4));
    }
    
    .nav-link {
        font-size: var(--font-size-base);
        padding: var(--space-2) var(--space-4);
        /* Better touch targets for landscape mobile */
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Ensure mobile menu toggle is properly positioned */
    .mobile-menu-toggle {
        position: relative;
        z-index: 1002;
    }
}

/* Tablet Specific */
@media (min-width: 769px) and (max-width: 1024px) {
    .nav-menu {
        gap: var(--space-4);
    }
    
    .nav-link {
        font-size: var(--font-size-sm);
        padding: var(--space-2) var(--space-3);
        /* Better touch targets for tablets */
        min-height: 40px;
        display: flex;
        align-items: center;
    }
    
    .nav-container {
        padding: var(--space-3) 0;
        min-height: 64px;
    }
    
    /* Ensure proper spacing for tablet navigation */
    .nav-brand {
        font-size: var(--font-size-xl);
    }
    
    .logo-dot {
        width: 20px;
        height: 20px;
    }
    
    /* Mobile menu toggle should be visible on tablets */
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Ensure navigation menu is properly positioned for tablets */
    .nav-menu {
        margin-left: auto;
        margin-right: 0;
    }
}

/* Hero spacing handled in main responsive section above */

/* Duplicate hero section removed - using main hero section above */

/* Standardize hero icon grid across all pages */
.hero .tech-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    justify-items: center;
    align-items: start;
    align-content: start;
    grid-auto-rows: 1fr;
    gap: var(--space-4) !important;
    margin: 0 !important;
}
.hero .tech-item {
  max-width: 136px;
  width: 100%;
  animation: none;
  height: 128px;
  min-height: 128px;
  display: grid !important;
  grid-template-rows: 56px auto;
  row-gap: 8px;
  justify-items: center;
  align-items: start;
  padding: 12px !important;
  margin: 0 !important;
}
.hero .tech-item i { width: 44px !important; height: 44px !important; font-size: 24px !important; margin: 0 !important; }
.hero .tech-item span { font-size: var(--font-size-sm) !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 100% !important; }
.hero .hero-visual { margin-top: 0; }
.hero .tech-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1024px) {
  .hero .tech-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 768px) {
  .hero .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero .tech-item { max-width: 160px; }
}

.hero-text {
    animation: slideInLeft 0.8s ease-out;
}

/* Hero badge CSS removed per user request */

/* Dark theme hero badge CSS removed per user request */

/* Duplicate hero-title removed - using main hero-title definition above */

.hero-title .highlight {
    color: #60a5fa;
    text-shadow: 0 0 20px rgba(96, 165, 250, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
    position: relative;
    display: block;
    margin-top: 0.25rem;
}

/* Highlight underline removed for cleaner design */

.hero-description {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: var(--space-8);
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: var(--transition-normal);
    border: none;
    cursor: pointer;
    letter-spacing: 0.01em;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: #ffffff;
    color: var(--primary-700);
    border: 2px solid var(--primary-600);
}

.btn-secondary:hover {
    background: var(--primary-600);
    color: #ffffff;
    transform: translateY(-2px);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}

.stat-item {
    text-align: center;
    padding: var(--space-4);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: var(--transition-normal);
}

.stat-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-number {
    font-size: var(--font-size-3xl);
    font-weight: 800;
    color: var(--primary-600);
    margin-bottom: var(--space-2);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.hero-visual {
    animation: slideInRight 0.8s ease-out;
    pointer-events: none; /* keep icons from blocking text */
    max-width: 520px;
    justify-self: end;
}

.tech-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    pointer-events: none; /* prevent grid from intercepting pointer over title */
}

.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    transition: var(--transition-normal);
    text-align: center;
    pointer-events: auto; /* re-enable on item */
}

.tech-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-300);
}

.tech-item i {
    font-size: 24px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--glass-stroke);
    box-shadow: 0 6px 14px rgba(13,139,255,0.18);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), filter var(--transition-normal);
}

.tech-item:hover i {
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 10px 24px rgba(13,139,255,0.25);
}

.tech-item span {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0.01em;
}

.tech-item:hover span {
    color: var(--primary-600);
}

/* Playful gradients per position */
.tech-grid .tech-item:nth-child(1) i { background: linear-gradient(135deg, #0d8bff, #00c2ff); }
.tech-grid .tech-item:nth-child(2) i { background: linear-gradient(135deg, #6f7cff, #8b5cf6); }
.tech-grid .tech-item:nth-child(3) i { background: linear-gradient(135deg, #14b8a6, #22c55e); }
.tech-grid .tech-item:nth-child(4) i { background: linear-gradient(135deg, #f59e0b, #f97316); }
.tech-grid .tech-item:nth-child(5) i { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.tech-grid .tech-item:nth-child(6) i { background: linear-gradient(135deg, #ef4444, #f59e0b); }

/* Subtle floating animation */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
.tech-item { animation: floatY 6s ease-in-out infinite; }
.tech-item:nth-child(2n) { animation-duration: 7s; }
.tech-item:nth-child(3n) { animation-duration: 5.5s; }

/* Section Components */
.section {
    padding: var(--space-20) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--space-16);
}

.section-title {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-purple));
    border-radius: var(--radius-full);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Services Grid */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
}
@media (max-width: 900px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* Contact info: force three cards in one row on desktop */
#contact-info .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { #contact-info .services-grid { grid-template-columns: 1fr; } }

/* Home: Aviation Solutions section – three cards on one row */
[aria-labelledby="solutions-heading"] .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { [aria-labelledby="solutions-heading"] .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { [aria-labelledby="solutions-heading"] .services-grid { grid-template-columns: 1fr; } }

/* Services page: Core Service Lines – three cards on one row */
#catalog .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { #catalog .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { #catalog .services-grid { grid-template-columns: 1fr; } }

/* Infrastructure page: Services section – three cards on one row */
#infra-services .services-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { #infra-services .services-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { #infra-services .services-grid { grid-template-columns: 1fr; } }

.service-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-purple));
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-6);
    transition: var(--transition-normal);
}

[data-theme="dark"] .service-icon {
    background: var(--primary-900);
}

.service-card:hover .service-icon {
    background: var(--primary-600);
    transform: scale(1.1);
}

.service-icon i {
    font-size: var(--font-size-2xl);
    color: var(--primary-600);
    transition: var(--transition-normal);
}

.service-card:hover .service-icon i {
    color: white;
}

.service-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.service-features {
    list-style: none;
    margin-bottom: var(--space-6);
}

.service-features li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.service-features i {
    color: var(--accent-success);
    font-size: var(--font-size-sm);
}

.service-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--primary-700);
    text-decoration: none;
    font-weight: 700;
    font-size: var(--font-size-sm);
    transition: var(--transition-normal);
}

.service-link:hover {
    gap: var(--space-3);
    color: var(--primary-800);
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.pricing-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: var(--space-8);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pricing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-purple));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pricing-card:hover::before {
    transform: scaleX(1);
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-300);
}

.pricing-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.pricing-card .price {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--primary-600);
    margin-bottom: var(--space-1);
}

.pricing-card .period {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-bottom: var(--space-4);
}

.pricing-card .description {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.pricing-card .features {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space-6);
}

.pricing-card .features li {
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    padding-left: var(--space-4);
    position: relative;
}

.pricing-card .features li::before {
    content: '✓';
    color: var(--accent-success);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.pricing-card .actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* About Section */
.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.about-text h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.about-lead {
    font-size: var(--font-size-xl);
    color: var(--primary-600);
    font-weight: 600;
    margin-bottom: var(--space-6);
}

.about-text p {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.7;
}

.lead {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--space-6);
}

.about-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-features {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.feature-list {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    transition: var(--transition-normal);
}

.feature-item:hover {
    background: var(--bg-secondary);
    transform: translateX(8px);
}

.feature-item i {
    font-size: var(--font-size-xl);
    color: var(--primary-600);
    margin-top: var(--space-1);
}

.feature-item h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.feature-item p {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    margin: 0;
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
    color: white;
    padding: var(--space-20) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.3;
}

.cta-content {
    position: relative;
    z-index: 1;
}

.cta-content h2 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
    margin-bottom: var(--space-6);
}

.cta-content p {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-8);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
.footer {
    position: relative;
    padding: var(--space-16) 0 var(--space-8);
}

.footer .container { max-width: 1200px; margin: 0 auto; padding-left: var(--space-4); padding-right: var(--space-4); }
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-brand .brand-logo {
    margin-bottom: var(--space-4);
}

.footer-brand .logo-text {
    font-size: var(--font-size-xl);
}

.brand-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: var(--space-3);
}

.social-links a {
    width: 40px;
    height: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: var(--transition-normal);
}

.social-links a:hover {
    background: var(--primary-600);
    color: white;
    transform: translateY(-2px);
}

.footer-section h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--space-2);
}

.footer-section ul li a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition-normal);
    font-size: var(--font-size-base);
}

.footer-section ul li a:hover {
    color: var(--primary-600);
}

.footer-bottom {
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-6);
}

.footer-bottom-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: center;
    gap: var(--space-4);
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.footer-links {
    display: flex;
    gap: var(--space-4);
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: var(--transition-normal);
}

.footer-links a:hover {
    color: var(--primary-600);
}

/* Contact Form */
.contact-form {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

.contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-purple));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.form-group {
    margin-bottom: var(--space-6);
}

.form-group label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--space-4);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    transition: var(--transition-normal);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px var(--primary-100);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group input.error,
.form-group textarea.error {
    border-color: var(--accent-danger);
}

.error-message {
    color: var(--accent-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
    display: none;
}

.error-message.show {
    display: block;
}

.form-status {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    display: none;
}

.form-status.success {
    background: var(--accent-success);
    color: white;
    display: block;
}

.form-status.error {
    background: var(--accent-danger);
    color: white;
    display: block;
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    display: none;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-medium);
    border-radius: var(--radius-sm);
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
}

.checkbox-label input[type="checkbox"]:checked + .checkmark {
    background: var(--primary-600);
    border-color: var(--primary-600);
}

.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-label a {
    color: var(--primary-600);
    text-decoration: none;
}

.checkbox-label a:hover {
    text-decoration: underline;
}

.btn.loading {
    position: relative;
    color: transparent;
}

.btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .container {
        padding: 0 var(--space-6);
    }
    
    /* Hero responsive styles handled in main hero section */
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
    
    .about-content {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

/* Duplicate mobile navigation section removed - using main mobile navigation above */

@media (max-width: 768px) {
    /* Hero responsive styles handled in main hero section */
    
    .hero-stats {
        grid-template-columns: 1fr;
    }
    
    .tech-grid {
        grid-template-columns: repeat(2, 1fr);
        pointer-events: none;
    }
    
    .section-title {
        font-size: var(--font-size-3xl);
    }
    
    .about-features {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-actions {
        flex-direction: column;
        align-items: center;
    }
    
    /* Additional Component Responsive Styles */
    .challenges-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .timeline-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .mission-vision-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-4);
    }
    
    .leadership-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    
    .pricing-card {
        padding: var(--space-6);
    }
    
    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
    
    .contact-details {
        margin-top: var(--space-3);
    }
    
    .challenge-card,
    .timeline-item,
    .mission-card,
    .vision-card,
    .value-item,
    .leader-card {
        padding: var(--space-4);
    }
    
    .challenge-icon {
        width: 50px;
        height: 50px;
    }
    
    .challenge-icon i {
        font-size: 20px;
    }
    
    .mission-icon,
    .vision-icon {
        width: 60px;
        height: 60px;
    }
    
    .mission-icon i,
    .vision-icon i {
        font-size: 24px;
    }
    
    .leader-photo {
        width: 80px;
        height: 80px;
    }
    
    .leader-photo i {
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--space-4);
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
        text-align: center;
    }
    
    /* Hero badge responsive CSS removed per user request */
    
    .btn {
        padding: var(--space-3) var(--space-4);
        font-size: var(--font-size-xs);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
    
    .service-card {
        padding: var(--space-6);
    }
    
    .tech-item {
        padding: var(--space-4);
    }
    
    /* Additional Component Responsive Styles for Mobile */
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .challenge-card,
    .timeline-item,
    .mission-card,
    .vision-card,
    .value-item,
    .leader-card {
        padding: var(--space-3);
    }
    
    .challenge-icon {
        width: 40px;
        height: 40px;
    }
    
    .challenge-icon i {
        font-size: 18px;
    }
    
    .mission-icon,
    .vision-icon {
        width: 50px;
        height: 50px;
    }
    
    .mission-icon i,
    .vision-icon i {
        font-size: 20px;
    }
    
    .leader-photo {
        width: 60px;
        height: 60px;
    }
    
    .leader-photo i {
        font-size: 24px;
    }
    
    .timeline-year {
        font-size: var(--font-size-xs);
        padding: var(--space-1) var(--space-3);
    }
    
    .challenge-level {
        font-size: var(--font-size-xs);
    }
    
    .leader-title {
        font-size: var(--font-size-xs);
    }
    
    .pricing-card {
        padding: var(--space-4);
    }
    
    .pricing-card .price {
        font-size: var(--font-size-3xl);
    }
}

/* Focus Styles */
.btn:focus,
.nav-link:focus,
.theme-toggle:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* Additional Component Styles */
.challenges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.challenge-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: var(--space-6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.challenge-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-500), var(--accent-purple));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.challenge-card:hover::before {
    transform: scaleX(1);
}

.challenge-card.critical::before {
    background: linear-gradient(90deg, var(--accent-danger), var(--accent-orange));
}

.challenge-card.high::before {
    background: linear-gradient(90deg, var(--accent-warning), var(--accent-orange));
}

.challenge-card.medium::before {
    background: linear-gradient(90deg, var(--accent-info), var(--accent-teal));
}

.challenge-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.challenge-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-50);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    transition: all 0.3s ease;
}

.challenge-card:hover .challenge-icon {
    background: var(--primary-100);
    transform: scale(1.1);
}

.challenge-icon i {
    font-size: 24px;
    color: var(--primary-600);
}

.challenge-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.challenge-level {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--primary-600);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.challenge-card p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.challenge-details {
    list-style: none;
    padding: 0;
}

.challenge-details li {
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    padding-left: var(--space-4);
    position: relative;
}

.challenge-details li::before {
    content: '•';
    color: var(--primary-500);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.timeline-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: var(--space-6);
    position: relative;
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.timeline-year {
    display: inline-block;
    background: var(--primary-500);
    color: white;
    padding: var(--space-2) var(--space-4);
    border-radius: 20px;
    font-weight: 600;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.timeline-content h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.timeline-content p {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.timeline-content ul {
    list-style: none;
    padding: 0;
}

.timeline-content li {
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
    padding-left: var(--space-4);
    position: relative;
}

.timeline-content li::before {
    content: '✓';
    color: var(--accent-success);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-6);
}

.mission-card,
.vision-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: var(--space-6);
    text-align: center;
    transition: all 0.3s ease;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.mission-icon,
.vision-icon {
    width: 80px;
    height: 80px;
    background: var(--primary-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    transition: all 0.3s ease;
}

.mission-card:hover .mission-icon,
.vision-card:hover .vision-icon {
    background: var(--primary-100);
    transform: scale(1.1);
}

.mission-icon i,
.vision-icon i {
    font-size: 32px;
    color: var(--primary-600);
}

.mission-card h3,
.vision-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

.mission-card p,
.vision-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.values-list {
    margin-top: var(--space-8);
}

.values-list h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-6);
    text-align: center;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-6);
}

.value-item {
    text-align: center;
    padding: var(--space-6);
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.value-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.value-item i {
    font-size: 32px;
    color: var(--primary-600);
    margin-bottom: var(--space-4);
}

.value-item h4 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.value-item p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.leader-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: var(--space-6);
    text-align: center;
    transition: all 0.3s ease;
}

.leader-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-300);
}

.leader-photo {
    width: 100px;
    height: 100px;
    background: var(--primary-50);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-4);
    transition: all 0.3s ease;
}

.leader-card:hover .leader-photo {
    background: var(--primary-100);
    transform: scale(1.1);
}

.leader-photo i {
    font-size: 40px;
    color: var(--primary-600);
}

.leader-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.leader-title {
    font-size: var(--font-size-sm);
    color: var(--primary-600);
    font-weight: 500;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leader-bio {
    color: var(--text-secondary);
    margin-bottom: var(--space-4);
    line-height: 1.6;
}

.leader-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
}

.leader-expertise span {
    background: var(--primary-50);
    color: var(--primary-700);
    padding: var(--space-1) var(--space-3);
    border-radius: 20px;
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.contact-details {
    margin-top: var(--space-4);
}

.contact-item {
    margin-bottom: var(--space-3);
    color: var(--text-secondary);
}

.contact-item strong {
    color: var(--text-primary);
    font-weight: 600;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.form-actions {
    margin-top: var(--space-6);
    text-align: center;
}

.checkbox-group {
    margin-top: var(--space-4);
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }

/* Print Styles */
@media print {
    .navbar,
    .hero-actions,
    .cta-section,
    .footer {
        display: none;
    }
    
    .hero {
        padding: var(--space-8) 0;
    }
    
    .section {
        padding: var(--space-8) 0;
    }
}

/* ===== AVIATION THEME OVERRIDES (Modern, Glass, Gradients) ===== */
:root {
  /* Updated aviation palette */
  --primary-50: #e8f5ff;
  --primary-100: #cfeaff;
  --primary-200: #a6d8ff;
  --primary-300: #73c0ff;
  --primary-400: #3aa5ff;
  --primary-500: #0d8bff;
  --primary-600: #0a6fd1;
  --primary-700: #0a56a3;
  --primary-800: #0a3f7a;
  --primary-900: #082c57;

  --text-primary: #0b1220;
  --text-secondary: #334155; /* darker for contrast */
  --text-tertiary: #475569;
  --bg-primary: #ffffff;
  --bg-secondary: #f6f9ff;
  --bg-tertiary: #eef3fb;
  --bg-elevated: rgba(255, 255, 255, 0.9);
  --border-light: rgba(15, 23, 42, 0.12);
  --border-medium: rgba(15, 23, 42, 0.18);

  /* Theme helpers */
  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-stroke: rgba(15, 23, 42, 0.12);
  --glass-blur: 14px;
  --gradient-brand: linear-gradient(135deg, var(--primary-500) 0%, #00c2ff 50%, #6f7cff 100%);
  --gradient-hero: radial-gradient(1100px 600px at 10% -10%, rgba(0, 194, 255, 0.12), transparent 60%),
                   radial-gradient(900px 520px at 90% 0%, rgba(111, 124, 255, 0.10), transparent 60%),
                   linear-gradient(180deg, #f9fcff 0%, #edf5ff 55%, #e7f0ff 100%);

  /* Compatibility for why-choose-us imported section */
  --primary-color: var(--primary-500);
  --secondary-color: #6f7cff;
  --background-color: var(--bg-primary);
  --heading-color: var(--text-primary);
  --text-color: var(--text-primary);
  --text-muted: var(--text-secondary);
  --card-bg: rgba(255, 255, 255, 0.7);
  --border-color: var(--border-light);
  --primary-rgb: 13, 139, 255;
}

/* Navbar: transparent → glass on scroll */
.navbar {
  background: linear-gradient(135deg, #0b1220 0%, #0b1220 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  /* Ensure proper responsive behavior */
  min-height: 64px;
  /* Better responsive behavior */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
}
.navbar.scrolled {
  background: #0b1220;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: rgba(148, 163, 184, 0.18);
  box-shadow: 0 6px 20px rgba(2,6,23,0.25);
  /* Ensure proper responsive behavior */
  min-height: 64px;
  /* Better responsive behavior for scrolled state */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.logo-text {
  background: linear-gradient(135deg, var(--primary-500), #6f7cff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  /* Better responsive behavior for logo text */
  font-weight: 800;
  font-size: var(--font-size-xl);
  transition: all 200ms ease;
}
.nav-link:hover, .nav-link.active {
  color: var(--primary-600);
  background: var(--primary-50);
}

/* High-contrast nav links depending on scroll state */
.navbar .nav-link { 
    color: #e2e8f0; 
    /* Better responsive behavior for nav links */
    transition: all 200ms ease;
}
.navbar .nav-link:hover, .navbar .nav-link.active { 
    color: #ffffff; 
    background: rgba(255,255,255,0.1); 
    /* Better hover state */
    transform: translateY(-1px);
}
.navbar .mobile-menu-toggle span { background: #ffffff; }
.navbar .mobile-menu-toggle:active span,
.navbar .mobile-menu-toggle:focus span,
.navbar .mobile-menu-toggle.active span { background: #ffffff; }
.navbar .nav-brand .logo-text { 
    background: linear-gradient(135deg, #e2e8f0, #ffffff); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    /* Better responsive behavior for logo text in navbar */
    transition: all 200ms ease;
}
.navbar.scrolled .nav-link { color: #cbd5e1; }
.navbar.scrolled .nav-link:hover, .navbar.scrolled .nav-link.active { 
    color: #ffffff; 
    background: rgba(255,255,255,0.12); 
    /* Better hover state for scrolled navbar */
    transform: translateY(-1px);
}
.navbar.scrolled .mobile-menu-toggle span { background: var(--text-primary); }
.navbar.scrolled .mobile-menu-toggle:active span,
.navbar.scrolled .mobile-menu-toggle:focus span,
.navbar.scrolled .mobile-menu-toggle.active span { background: var(--text-primary); }
.navbar.scrolled .nav-brand .logo-text { 
    background: linear-gradient(135deg, #e2e8f0, #ffffff); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    background-clip: text; 
    /* Better responsive behavior for logo text in scrolled navbar */
    transition: all 200ms ease;
}

/* Hero: deep aviation gradient with subtle grid */
.hero {
  background: var(--gradient-hero) !important;
  padding-top: calc(80px + var(--space-16)) !important;
  position: relative;
  /* Better responsive behavior for hero section */
  margin-top: 0;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 35%),
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" preserveAspectRatio="none"><defs><radialGradient id="ring" cx="0.12" cy="-0.05" r="0.45"><stop offset="0%" stop-color="%2300c2ff" stop-opacity="0.18"/><stop offset="100%" stop-color="%2300c2ff" stop-opacity="0"/></radialGradient></defs><rect width="1200" height="600" fill="url(%23ring)"/><g stroke="%2363748b" stroke-opacity="0.16" stroke-width="1" fill="none"><circle cx="140" cy="-30" r="60"/><circle cx="140" cy="-30" r="120"/><circle cx="140" cy="-30" r="180"/></g><g stroke="%2363748b" stroke-opacity="0.14" stroke-width="1" stroke-dasharray="8 8" fill="none"><path d="M1200 520 L840 600"/><path d="M1200 540 L860 600"/></g></svg>');
  opacity: 0.6;
  z-index: 0;
}
.hero-title { color: var(--text-primary) !important; }
.hero-title .highlight { color: var(--text-primary) !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; }
.hero-description { color: var(--text-secondary) !important; }
/* Hero badge override CSS removed per user request */

/* Buttons */
.btn-primary {
  background: var(--gradient-brand) !important;
  color: #fff !important;
  box-shadow: 0 10px 25px rgba(13, 139, 255, 0.25) !important;
}
.btn-primary:hover { box-shadow: 0 18px 35px rgba(13, 139, 255, 0.35) !important; }
.btn-secondary {
  background: #ffffff !important;
  color: var(--primary-700) !important;
  border: 2px solid var(--primary-600) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: none !important;
}
.btn-secondary:hover {
  background: var(--primary-600) !important;
  color: #ffffff !important;
  border-color: var(--primary-600) !important;
  box-shadow: var(--shadow-md) !important;
}

/* Glass cards */
.tech-item, .service-card, .pricing-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-stroke) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
}
.tech-item:hover, .service-card:hover { box-shadow: 0 18px 45px rgba(13, 139, 255, 0.2) !important; border-color: rgba(13, 139, 255, 0.35) !important; }
.service-card::before, .pricing-card::before { background: var(--gradient-brand) !important; }
.service-icon { background: rgba(255,255,255,0.08) !important; border: 1px solid rgba(255,255,255,0.16) !important; }
.service-card:hover .service-icon { background: rgba(13, 139, 255, 0.18) !important; }
.service-icon i { color: var(--primary-400) !important; }

/* Footer: dark aviation base */
.footer {
  background:
    radial-gradient(600px 300px at 15% -10%, rgba(0, 194, 255, 0.08), transparent 60%),
    radial-gradient(800px 400px at 85% -5%, rgba(111, 124, 255, 0.08), transparent 60%),
    #0b1220 !important;
  border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
  color: #cbd5e1 !important;
  position: relative;
}
.footer::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: linear-gradient(90deg, rgba(13,139,255,0.0), rgba(13,139,255,0.6), rgba(111,124,255,0.6), rgba(13,139,255,0.0));
  pointer-events: none;
}
.footer-section h4 { color: #e2e8f0 !important; }
.footer-section ul li a { color: #9fb2c9 !important; }
.footer-section ul li a:hover { color: #dbeafe !important; }
/* Modern headings and link treatment */
.footer-section h4 {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  opacity: 0.95;
  position: relative;
  padding-bottom: 8px;
}
.footer-section h4::after {
  content: '';
  position: absolute; left: 0; bottom: 0; width: 32px; height: 2px;
  background: linear-gradient(90deg, #0d8bff, #6f7cff);
  border-radius: 2px;
}
.footer-section ul li a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  transition: color 200ms ease, transform 200ms ease;
}
.footer-section ul li a::before {
  content: '\f061'; /* fa-arrow-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.75rem;
  color: #89a6c7;
  opacity: 0.9;
  transform: translateX(0);
  transition: transform 200ms ease;
}
.footer-section ul li a:hover::before { transform: translateX(2px); color: #dbeafe; }
/* Footer brand and bottom link contrast fixes */
.footer .logo-text { background: linear-gradient(135deg, #e2e8f0, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-bottom p { color: #9fb2c9 !important; }
.footer-links a { color: #cbd5e1 !important; }
.footer-links a:hover { color: #dbeafe !important; }
.footer a:focus { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; border-radius: 6px; }

/* Layout refinements for footer grids */
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 20px; }
@media (max-width: 1024px) { .footer-links { grid-template-columns: repeat(2, minmax(200px, 1fr)); } }
@media (max-width: 640px) { .footer-links { grid-template-columns: 1fr; } }
.footer-brand { max-width: 520px; }
@media (min-width: 1025px) { .footer-brand { grid-column: span 1; } }
.footer-bottom { border-top: 1px solid rgba(148, 163, 184, 0.18) !important; padding-top: 18px; }

/* Section subtle overlay */
.section::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0) 0%, rgba(11, 18, 32, 0.03) 100%);
  z-index: -1;
}

/* ===== Additional Theming for All Sections Across Pages ===== */
/* Ensure fixed header does not overlap non-hero first sections */
body { scroll-padding-top: 80px; }
/* Hero layout handled in main hero section - centered design */
.hero .tech-grid { display: none !important; }
/* All benefit card CSS removed per user request */
/* Precisely scaled and aligned to hand endpoints for 96x96 */
.logo-card .logo-dot::before, .logo-card .logo-dot::after { width: 39px; height: 13px; }
.logo-card .logo-dot::before {
  top: 33px; left: 16.6px; transform-origin: 4.4px 6.5px;
  border-left: 6px solid rgba(11,18,32,0.95);
  background: linear-gradient(90deg, rgba(15,23,42,0.95) 0 26%, rgba(239,68,68,1) 30%, rgba(220,38,38,1) 100%);
  box-shadow: 0 0 8px rgba(239,68,68,0.7), 0 0 14px rgba(220,38,38,0.5);
}
.logo-card .logo-dot::after {
  top: 33px; left: 40.4px; right: auto; transform-origin: 34.9px 6.5px;
  border-right: 6px solid rgba(11,18,32,0.95);
  background: linear-gradient(270deg, rgba(15,23,42,0.95) 0 26%, rgba(239,68,68,1) 30%, rgba(220,38,38,1) 100%);
  box-shadow: 0 0 8px rgba(239,68,68,0.7), 0 0 14px rgba(220,38,38,0.5);
}

/* Benefit card mobile CSS removed per user request */
@media (max-width: 1024px) { .hero .tech-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 768px) { .hero .tech-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } .hero .tech-item { max-width: 160px !important; } }
/* Fix hero highlight text being blue/transparent across all pages */
.hero-title .highlight { color: var(--text-primary) !important; background: none !important; -webkit-background-clip: initial !important; -webkit-text-fill-color: initial !important; background-clip: initial !important; }
.hero-title .highlight::after { display: none !important; }
/* Ensure desktop nav menu is always visible */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border-top: none !important;
        padding: 0 !important;
        gap: var(--space-8) !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .nav-link {
        font-size: var(--font-size-sm) !important;
        padding: var(--space-2) var(--space-3) !important;
        width: auto !important;
        text-align: left !important;
        background: transparent !important;
        transform: none !important;
        box-shadow: none !important;
        min-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* Ensure mobile menu toggle is hidden on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
}

/* ===== Page-specific: Stylish Approaches/Processes ===== */
/* Services: approach tiles */
.approach-tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.approach-tile { position: relative; background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 18px; padding: 18px; box-shadow: 0 10px 24px rgba(11,18,32,.08); transition: transform .18s ease, box-shadow .18s ease; }
.approach-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,18,32,.18); }
.approach-tile::before { content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: radial-gradient(120px 80px at 20% -10%, rgba(13,139,255,.12), transparent 60%), radial-gradient(120px 80px at 110% 120%, rgba(99,102,241,.12), transparent 60%); }
.approach-tile h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.approach-tile p { margin: 0 0 8px 0; color: var(--text-secondary); font-size: .95rem; }
.approach-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.approach-meta .badge { background: linear-gradient(135deg, rgba(13,139,255,.12), rgba(99,102,241,.14)); border: 1px solid rgba(13,139,255,.25); color: #0b1220; border-radius: 999px; padding: 4px 8px; font-weight: 700; font-size: .78rem; }
@media (max-width: 1024px){ .approach-tiles { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 768px){ .approach-tiles { grid-template-columns: 1fr;} }

/* Infrastructure: timeline */
.methodology-timeline { position: relative; display: grid; gap: 16px; }
.methodology-timeline::before { content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, rgba(13,139,255,.35), rgba(99,102,241,.35)); }
.timeline-step { position: relative; background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 14px; padding: 14px 16px 14px 44px; box-shadow: var(--shadow-sm); }
.timeline-step::before { content: ""; position: absolute; left: 8px; top: 16px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(13,139,255,.7)); border: 1px solid rgba(0,0,0,.1); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.timeline-step h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.timeline-step p { margin: 0; color: var(--text-secondary); font-size: .95rem; }

/* ERP: phase grid */
.methodology-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.phase-card { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); display: grid; gap: 8px; }
.phase-card h4 { margin: 0; font-size: 1rem; font-weight: 800; }
.phase-card .artifacts { display: flex; flex-wrap: wrap; gap: 6px; }
.phase-card .chip { background: rgba(11,18,32,.04); border: 1px solid rgba(11,18,32,.08); border-radius: 999px; padding: 4px 8px; font-size: .78rem; font-weight: 700; }
@media (max-width: 1024px){ .methodology-grid { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 768px){ .methodology-grid { grid-template-columns: 1fr;} }

/* Revenue: flywheel */
.methodology-flywheel { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; align-items: center; }
.fly-node { position: relative; background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 14px; padding: 14px; text-align: center; box-shadow: var(--shadow-sm); }
.fly-node h4 { margin: 0 0 4px 0; font-size: .98rem; font-weight: 800; }
.fly-node p { margin: 0; font-size: .9rem; color: var(--text-secondary); }
.fly-arrow { text-align: center; color: var(--primary-600); font-weight: 800; }
@media (max-width: 1024px){ .methodology-flywheel { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 768px){ .methodology-flywheel { grid-template-columns: 1fr;} }

/* Compliance: process canvas */
.process-canvas { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.process-lane { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm); }
.process-lane h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.process-lane p { margin: 0 0 8px 0; color: var(--text-secondary); }
.process-list { margin: 0; padding-left: 18px; color: var(--text-secondary); }
@media (max-width: 1024px){ .process-canvas { grid-template-columns: 1fr 1fr;} }
@media (max-width: 768px){ .process-canvas { grid-template-columns: 1fr;} }

/* Modern, glossy cards (shared) */
.modern-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
@media (max-width: 1200px){ .modern-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px){ .modern-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .modern-grid { grid-template-columns: 1fr; } }
.modern-card { position: relative; background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); border-radius: 18px; padding: 18px 18px; border: 1px solid rgba(11,18,32,0.08); box-shadow: 0 12px 30px rgba(11,18,32,0.12); overflow: hidden; }
.modern-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--accent-1, #0d8bff), var(--accent-2, #6f7cff)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.modern-card h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.modern-card p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.modern-card .mini { margin-top: 10px; display: grid; gap: 6px; }
.modern-card .mini li { list-style: none; position: relative; padding-left: 16px; font-size: .9rem; color: var(--text-secondary); }
.modern-card .mini li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-1, #0d8bff), var(--accent-2, #6f7cff)); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.mini { margin-top: 10px; display: grid; gap: 6px; }
.mini li { list-style: none; position: relative; padding-left: 16px; font-size: .9rem; color: var(--text-secondary); }
.mini li::before { content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #0d8bff, #6f7cff); box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.modern-card.accent-blue { --accent-1: #0d8bff; --accent-2: #6f7cff; }
.modern-card.accent-indigo { --accent-1: #6366f1; --accent-2: #4f46e5; }
.modern-card.accent-teal { --accent-1: #14b8a6; --accent-2: #2dd4bf; }
.modern-card.accent-purple { --accent-1: #a78bfa; --accent-2: #7c3aed; }
.modern-card.accent-sky { --accent-1: #0ea5e9; --accent-2: #38bdf8; }

/* ========== Services: Zigzag Timeline ========== */
.zigzag { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; position: relative; }
.zigzag::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: linear-gradient(180deg, rgba(13,139,255,.20), rgba(99,102,241,.20)); }
.zig-item { position: relative; background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px 18px; box-shadow: 0 12px 28px rgba(11,18,32,.10); }
.zig-item { transition: transform .2s ease, box-shadow .2s ease; }
.zig-item:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,18,32,.18); }
.zig-item h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.zig-item p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.zig-item::after { content: ""; position: absolute; top: 20px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, rgba(13,139,255,.85)); border: 1px solid rgba(0,0,0,.1); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.zig-item.left { grid-column: 1; margin-right: 18px; }
.zig-item.left::after { right: -28px; }
.zig-item.right { grid-column: 2; margin-left: 18px; }
.zig-item.right::after { left: -28px; }
@media (max-width: 900px){ .zigzag { grid-template-columns: 1fr; } .zig-item.left,.zig-item.right { grid-column: 1; margin: 0; } .zig-item::after { left: auto; right: auto; display: none; } .zigzag::before { display: none; } }

/* ========== Infrastructure: Pillar Cards ========== */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.pillar { position: relative; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.92)); border: 1px solid rgba(11,18,32,.08); box-shadow: 0 16px 32px rgba(11,18,32,.12); padding: 18px; overflow: hidden; }
.pillar { transition: transform .2s ease, box-shadow .2s ease; }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(11,18,32,.18); }
.pillar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(180px 120px at -20% -20%, rgba(13,139,255,.18), transparent 60%), radial-gradient(180px 120px at 120% 120%, rgba(99,102,241,.18), transparent 60%); pointer-events: none; }
.pillar h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.pillar p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
@media (max-width: 1200px){ .pillars { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px){ .pillars { grid-template-columns: 1fr; } }

/* ========== ERP: Numbered Steps ========== */
.num-steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; counter-reset: step; }
.num-card { position: relative; background: #0b1220; color: #fff; border-radius: 16px; padding: 18px; box-shadow: 0 16px 36px rgba(2,6,23,.35); border: 1px solid rgba(255,255,255,.08); }
.num-card { transition: transform .2s ease, box-shadow .2s ease; }
.num-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(2,6,23,.45); }
.num-card::before { counter-increment: step; content: counter(step); position: absolute; top: 10px; right: 14px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0d8bff, #6f7cff); color: #0b1220; font-weight: 800; box-shadow: 0 4px 10px rgba(13,139,255,.35); }
.num-card h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; color: #fff; }
.num-card p { margin: 0; font-size: .95rem; color: rgba(255,255,255,.85); }
.num-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.num-chips .chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 4px 8px; font-size: .78rem; font-weight: 700; }
@media (max-width: 1100px){ .num-steps { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 700px){ .num-steps { grid-template-columns: 1fr;} }

/* ========== Revenue: Metric Bars ========== */
.metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.metric-card { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: 0 12px 28px rgba(11,18,32,.10); }
.metric-card { transition: transform .2s ease, box-shadow .2s ease; }
.metric-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(11,18,32,.18); }
.bar .fill { transition: width .8s cubic-bezier(.2,.7,.2,1); }
.metric-card h4 { margin: 0 0 8px 0; font-size: 1rem; font-weight: 800; }
.bar { height: 10px; border-radius: 999px; background: rgba(11,18,32,.06); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.bar .fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0d8bff, #6f7cff); box-shadow: 0 4px 10px rgba(13,139,255,.25); }
.metric-note { margin-top: 8px; color: var(--text-secondary); font-size: .9rem; }
@media (max-width: 1100px){ .metrics { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 700px){ .metrics { grid-template-columns: 1fr;} }

/* ========== Compliance: Kanban Sticky Board ========== */
.kanban { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.lane { background: linear-gradient(180deg, #f8fbff, #ffffff); border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 14px; box-shadow: 0 12px 28px rgba(11,18,32,.08); }
.lane h4 { margin: 0 0 10px 0; font-size: 1rem; font-weight: 800; }
.sticky { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 12px; padding: 10px 12px; box-shadow: 0 10px 20px rgba(11,18,32,.10); margin-bottom: 10px; transform: rotate(-0.8deg); }
.sticky { transition: transform .2s ease, box-shadow .2s ease; }
.sticky:hover { transform: rotate(-0.2deg) translateY(-2px); box-shadow: 0 16px 30px rgba(11,18,32,.16); }
.sticky.alt { transform: rotate(0.8deg); }
.sticky strong { display: block; margin-bottom: 4px; }
@media (max-width: 1100px){ .kanban { grid-template-columns: 1fr 1fr;} }
@media (max-width: 700px){ .kanban { grid-template-columns: 1fr;} }
/* ========== New unique designs (Proceed A) ========== */
/* Services: Curved SVG Roadmap */
.roadmap { position: relative; padding-top: 10px; }
.roadmap svg { width: 100%; height: 180px; overflow: visible; }
.roadmap-path { fill: none; stroke: url(#roadmapGradient); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 800; stroke-dashoffset: 800; opacity: .9; }
.roadmap.drawn .roadmap-path { animation: drawPath 2.2s ease forwards; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }
.roadmap-nodes { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-top: -40px; }
.roadmap-node { background: rgba(255,255,255,.85); backdrop-filter: blur(8px); border: 1px solid rgba(11,18,32,.08); border-radius: 14px; padding: 14px; box-shadow: 0 14px 30px rgba(11,18,32,.12); transition: transform .2s ease, box-shadow .2s ease, opacity .35s ease; opacity: 0; transform: translateY(12px); }
.roadmap-node.show { opacity: 1; transform: translateY(0); }
/* Vertical variant */
.roadmap.vertical { display: grid; grid-template-columns: 120px 1fr; align-items: start; gap: 16px; padding-top: 0; }
.roadmap.vertical svg { width: 120px; height: 720px; }
.roadmap.vertical .roadmap-nodes { margin-top: 0; display: flex; flex-direction: column; gap: 18px; }
@media (max-width: 900px){ .roadmap.vertical { grid-template-columns: 100px 1fr; } .roadmap.vertical svg { width: 100px; height: 640px; } }

/* ===== Compliance: Left-Rail Milestones (clean) ===== */
.milestones { position: relative; padding-left: 28px; display: grid; gap: 8px; }
.milestones::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 1px; background: rgba(11,18,32,.10); background-image: linear-gradient(180deg, rgba(14,165,233,.18), rgba(124,58,237,.18)); background-size: 100% 300%; background-position: 0 0; animation: railShimmer 14s linear infinite; }
.milestone { position: relative; opacity: 0; transform: translateY(8px); transition: all .28s ease; will-change: opacity, transform; }
.milestone.show { opacity: 1; transform: translateY(0); }
.milestone-marker { position: absolute; left: 7px; top: 10px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #0d8bff, #6f7cff); box-shadow: 0 1px 4px rgba(13,139,255,.25); }
.milestone-card { position: relative; background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 10px; padding: 8px 12px; box-shadow: 0 8px 18px rgba(11,18,32,.06); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow: hidden; }
.milestone-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(11,18,32,.12); border-color: rgba(13,139,255,.22); }
.milestones { counter-reset: step; }
.milestone { counter-increment: step; }
.milestone-card::before { content: counter(step); position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: .8rem; background: linear-gradient(135deg, #111827, #1f2937); opacity: 0; transform: translateY(-4px) scale(.92); transition: transform .35s ease .1s, opacity .35s ease .1s; }
.milestone.show .milestone-card::before { opacity: 1; transform: translateY(0) scale(1); }

/* Progress bar on reveal */
.milestone-card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: linear-gradient(90deg, #0ea5e9, #6366f1); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22,.61,.36,1) .1s; }
.milestone.show .milestone-card::after { transform: scaleX(1); }
.milestone-card h4 { margin: 0 0 2px 0; font-size: .95rem; font-weight: 800; }
.milestone-card p { margin: 0 0 2px 0; color: var(--text-secondary); font-size: .88rem; }
/* Compact bullets within milestone cards */
.milestone-card ul.mini { margin: 4px 0 0 0; padding-left: 16px; }
.milestone-card ul.mini li { margin: 0; line-height: 1.25; }

/* Remove icon badges in minimal design */
.step-icon { display: none; }

/* Desktop keeps vertical timeline for clarity */
/* Compact bullets in milestone cards */
#process .mini { gap: 4px; }
#process .mini li { font-size: .88rem; }
/* Narrow the process container for a cleaner look */
#process .container { max-width: 980px; }

/* ===== Compliance: Icon Tiles (Clean, 2-column) ===== */
.icon-tiles { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 760px){ .icon-tiles { grid-template-columns: 1fr; } }
.icon-tile { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 12px; padding: 12px 14px; box-shadow: 0 8px 18px rgba(11,18,32,.08); transition: transform .18s ease, box-shadow .18s ease; display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; }
.icon-tile:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(11,18,32,.12); }
.icon-tile .it-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0d8bff, #6f7cff); color: #fff; box-shadow: 0 2px 10px rgba(13,139,255,.3); }
.icon-tile h4 { margin: 0 0 4px 0; font-size: .95rem; font-weight: 800; }
.icon-tile .mini { margin: 0; }
.icon-tile .mini li { font-size: .88rem; }
.roadmap-node:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(11,18,32,.18); }
.roadmap-node h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.roadmap-node p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
@media (max-width: 1024px) { .roadmap-nodes { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .roadmap-nodes { grid-template-columns: 1fr; } .roadmap svg { height: 120px; } }

/* Override: hide milestone dot markers on compliance roadmap */
.milestones .milestone-marker { display: none !important; }

/* Animated rail flow */
@keyframes railFlow {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

/* Subtle shimmer for the rail */
@keyframes railShimmer {
  0% { background-position: 0 0; }
  50% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .milestone, .milestone-card, .milestone-card::before, .milestone-card::after, .milestones::before {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Infrastructure: Stacked Glass Layers */
.layers { perspective: 1000px; display: grid; gap: 14px; }
.layer { position: relative; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92)); border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: 0 18px 40px rgba(11,18,32,.14); transform-style: preserve-3d; transition: transform .2s ease, box-shadow .2s ease; }
.layer:hover { transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 26px 60px rgba(11,18,32,.2); }
.layer::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(13,139,255,.18), rgba(99,102,241,.18)); opacity: .35; pointer-events: none; mix-blend-mode: overlay; }
.layer h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.layer p { margin: 0; color: var(--text-secondary); font-size: .95rem; }

/* ERP: Connected Stepper */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; position: relative; }
.stepper::before { content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: linear-gradient(90deg, rgba(13,139,255,.25), rgba(99,102,241,.25)); }
.step { position: relative; background: #0b1220; color: #fff; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 16px; box-shadow: 0 18px 44px rgba(2,6,23,.4); transition: transform .2s ease, box-shadow .2s ease; }
.step:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(2,6,23,.5); }
.step .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #0d8bff, #6f7cff); color: #0b1220; font-weight: 800; box-shadow: 0 4px 10px rgba(13,139,255,.35); margin-bottom: 8px; }
.step h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; color: #fff; }
.step p { margin: 0; color: rgba(255,255,255,.85); }
@media (max-width: 1100px) { .stepper { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 700px) { .stepper { grid-template-columns: 1fr; } }

/* Revenue: Radial Gauges + Sparklines */
.gauges { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.gauge { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 14px; box-shadow: 0 14px 34px rgba(11,18,32,.12); text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.gauge:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(11,18,32,.18); }
.gauge-arc { width: 84px; height: 84px; margin: 6px auto 8px; border-radius: 50%; background: conic-gradient(#0d8bff 0turn, #6f7cff 0turn, rgba(11,18,32,.08) 0turn); position: relative; }
.gauge-arc::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; }
.gauge-value { font-weight: 800; font-size: 1.2rem; }
.spark { width: 100%; height: 36px; margin-top: 6px; background: linear-gradient(180deg, rgba(13,139,255,.08), transparent); mask: none; }
.gauge-note { color: var(--text-secondary); font-size: .9rem; margin-top: 6px; }
@media (max-width: 1100px){ .gauges { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 700px){ .gauges { grid-template-columns: 1fr;} }

/* Compliance: Audit Checklist Cards */
.audit { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.audit-card { background: #fff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: 0 14px 34px rgba(11,18,32,.12); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.audit-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(11,18,32,.18); }
.audit-card h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.audit-card p { margin: 0; color: var(--text-secondary); }
.badge-status { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: .78rem; }
.badge-pass { background: rgba(20,184,166,.18); color: #065f46; border: 1px solid rgba(20,184,166,.35); animation: pulsePass 2s ease infinite; }
.badge-exc { background: rgba(251,191,36,.18); color: #92400e; border: 1px solid rgba(251,191,36,.35); animation: pulseExc 2.1s ease infinite; }
@keyframes pulsePass { 0%,100%{ box-shadow: 0 0 0 0 rgba(20,184,166,.35);} 50%{ box-shadow: 0 0 0 6px rgba(20,184,166,0); } }
@keyframes pulseExc { 0%,100%{ box-shadow: 0 0 0 0 rgba(251,191,36,.35);} 50%{ box-shadow: 0 0 0 6px rgba(251,191,36,0); } }
@media (max-width: 1100px){ .audit { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px){ .audit { grid-template-columns: 1fr; } }

/* ===== Value Cards (Business-benefit focused) ===== */
.value-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1200px){ .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .value-grid { grid-template-columns: 1fr; } }
.value-card { position: relative; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-radius: 18px; padding: 18px; border: 1px solid rgba(11,18,32,.08); box-shadow: 0 14px 34px rgba(11,18,32,.12); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; display: grid; align-content: start; min-height: 160px; }
.value-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--val-a, #0d8bff), var(--val-b, #6f7cff)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: .7; }
.value-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11,18,32,.18); }
.value-card h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.value-card p { margin: 0 0 10px 0; color: var(--text-secondary); font-size: .95rem; }
.value-card .mini { margin-top: 8px; }
.value-card .kpi { position: absolute; bottom: 10px; right: 10px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: .78rem; background: rgba(13,139,255,.12); border: 1px solid rgba(13,139,255,.35); color: #0b1220; }
.value--blue { --val-a: #0d8bff; --val-b: #6f7cff; }
.value--indigo { --val-a: #6366f1; --val-b: #4f46e5; }
.value--teal { --val-a: #14b8a6; --val-b: #2dd4bf; }
.value--sky { --val-a: #0ea5e9; --val-b: #38bdf8; }

/* ===== Services: Phases Band (Scope → Design → Ship → Enable) ===== */
.phases-band { display: none; }

/* New: Phases Pills (no large rectangle) */
.phases-pills { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.phase-pill { position: relative; background: rgba(255,255,255,.82); backdrop-filter: blur(8px); border: 1px solid rgba(11,18,32,.08); border-radius: 999px; padding: 12px 16px 20px 16px; box-shadow: 0 10px 26px rgba(11,18,32,.12); transition: transform .2s ease, box-shadow .2s ease; display: grid; align-content: start; }
.phase-pill:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,18,32,.18); }
.phase-pill h4 { margin: 0 0 4px 0; font-size: 0.98rem; font-weight: 800; }
.phase-pill p { margin: 0 6px 6px 0; color: var(--text-secondary); font-size: .92rem; }
.phase-pill::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 8px; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #0d8bff, #6f7cff); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; box-shadow: 0 4px 12px rgba(13,139,255,.35); }
.phase-pill:hover::after, .phase-pill:focus-within::after { transform: scaleX(1); }
@media (max-width: 1024px) { .phases-pills { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .phases-pills { grid-template-columns: 1fr; } }

/* ===== Services: Outcome Rail (business-value focused) ===== */
.outcome-rail { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1100px){ .outcome-rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px){ .outcome-rail { grid-template-columns: 1fr; } }
.outcome-card { position: relative; background: #ffffff; border: 1px solid rgba(11,18,32,.08); border-radius: 16px; padding: 16px; box-shadow: 0 14px 34px rgba(11,18,32,.12); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; display: grid; align-content: start; min-height: 160px; }
.outcome-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(11,18,32,.18); }
.outcome-card::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--oc-a, #0d8bff), var(--oc-b, #6f7cff)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .75; pointer-events: none; }
.outcome-card h4 { margin: 0 0 6px 0; font-size: 1rem; font-weight: 800; }
.outcome-card p { margin: 0 0 10px 0; color: var(--text-secondary); font-size: .95rem; }
.outcome-card .kpi-badge { position: absolute; bottom: 10px; right: 10px; padding: 6px 10px; border-radius: 999px; font-weight: 800; font-size: .78rem; background: rgba(13,139,255,.12); border: 1px solid rgba(13,139,255,.35); color: #0b1220; }
.outcome--blue { --oc-a: #0d8bff; --oc-b: #6f7cff; }
.outcome--indigo { --oc-a: #6366f1; --oc-b: #4f46e5; }
.outcome--teal { --oc-a: #14b8a6; --oc-b: #2dd4bf; }
.outcome--amber { --oc-a: #f59e0b; --oc-b: #fbbf24; }

@media (min-width: 1025px) {
  .nav-menu {
    position: static !important;
    top: auto !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}
/* CTA block used on services.html */
.cta {
  position: relative;
  background: linear-gradient(135deg, var(--primary-600), #00c2ff, #6f7cff);
  color: #fff;
  overflow: hidden;
}
.cta .cta-title { color: #fff; }
.cta .cta-description { color: rgba(255,255,255,0.9); }
.cta::after {
  content: '';
  position: absolute; inset: -30% -10% auto -10%; height: 140%;
  background: radial-gradient(600px 300px at 20% 20%, rgba(255,255,255,0.18), transparent 60%),
              radial-gradient(500px 260px at 80% 30%, rgba(255,255,255,0.12), transparent 60%);
  pointer-events: none;
}

/* Case studies (expertise.html) */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.case-study-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur));
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.case-study-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(13, 139, 255, 0.35); }
.case-study-header { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin-bottom: 10px; }
.case-study-icon {
  width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, rgba(13,139,255,0.12), rgba(111,124,255,0.12));
  border: 1px solid var(--border-light);
  color: var(--primary-600);
}
.case-study-meta h3 { margin: 0; font-size: 1.1rem; }
.case-study-meta p { margin: 2px 0; color: var(--text-tertiary); font-size: 0.95rem; }
.case-study-content h4 { margin-top: 10px; margin-bottom: 6px; font-size: 1rem; }
.case-study-content ul { padding-left: 18px; display: grid; gap: 6px; }

/* Threats (cybersecurity.html) */
.threats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.threat-card {
  position: relative; background: var(--glass-bg); border: 1px solid var(--glass-stroke);
  backdrop-filter: blur(var(--glass-blur)); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.threat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(13, 139, 255, 0.35); }
.threat-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, rgba(13,139,255,0.12), rgba(111,124,255,0.12)); border: 1px solid var(--border-light); color: var(--primary-600); margin-bottom: 8px; }
.threat-level { color: var(--text-tertiary); font-weight: 600; }

/* Capabilities (why-choose visual) */
.capabilities-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.capability-item { background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 16px; padding: 14px; display: grid; gap: 8px; }
.capability-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, rgba(13,139,255,0.12), rgba(111,124,255,0.12)); color: var(--primary-600); }
.capability-label { color: var(--text-secondary); font-weight: 600; }

/* Feature cards (why-choose text list) */
.feature-card { background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 18px; padding: 16px; display: grid; grid-template-columns: 56px 1fr; gap: 12px; }
.feature-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, rgba(13,139,255,0.12), rgba(111,124,255,0.12)); border: 1px solid var(--border-light); color: var(--primary-600); }
.feature-details .feature-title { margin: 0 0 6px; }
.feature-details .feature-description { color: var(--text-tertiary); }

/* Policy pages */
.policy-content { background: var(--glass-bg); border: 1px solid var(--glass-stroke); border-radius: 22px; padding: 20px; backdrop-filter: blur(var(--glass-blur)); box-shadow: var(--shadow-sm); }
.policy-header h1 { margin-bottom: 4px; }
.policy-date { color: var(--text-tertiary); }
.policy-section { margin: 14px 0; }
.policy-section h2 { font-size: 1.15rem; margin-bottom: 6px; }
.policy-section ul { padding-left: 18px; display: grid; gap: 6px; }
.policy-content .contact-info i { color: var(--primary-600); margin-right: 8px; }

/* Service badge (services professional card) */
.service-card.featured { border-color: rgba(13, 139, 255, 0.35); box-shadow: 0 8px 32px rgba(13,139,255,0.15); }
.service-badge { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 800; background: var(--gradient-brand); color: #fff; padding: 6px 10px; border-radius: 999px; letter-spacing: 0.4px; }

/* Decorative patterns */
.section-bg-pattern, .hero-bg-pattern { position: absolute; inset: 0; pointer-events: none; opacity: 0.45; background-image: linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(13,139,255,0.06) 1px, transparent 1px); background-size: 28px 28px, 28px 28px; background-position: 0 6px, 0 6px; mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 10px, rgba(0,0,0,1) 24px, rgba(0,0,0,1) 100%); }
/* Push hero pattern farther down to avoid a visible top seam under the navbar */
.hero { --hero-pattern-top: 96px; }
.hero .hero-bg-pattern { top: var(--hero-pattern-top); bottom: 0; left: 0; right: 0; background-position: 0 0, 0 0; mask-image: none; }
.section-overlay, .hero-overlay { display: none; }

/* Home page hero: aviation + IT consulting themed background */
.home-hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-hero) !important;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(13,139,255,0.075) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(111,124,255,0.06) 0 1px, transparent 1px 28px);
  background-size: 100% 100%, 100% 100%;
  opacity: 0.5;
  animation: heroGridDrift 20s linear infinite;
  will-change: transform, background-position, opacity;
}

.home-hero::after {
  content: '';
  position: absolute;
  inset: -20% -10% -20% -10%;
  pointer-events: none;
  background:
    radial-gradient(900px 260px at 10% 30%, rgba(13,139,255,0.10), transparent 60%),
    radial-gradient(900px 260px at 90% 70%, rgba(111,124,255,0.10), transparent 60%),
    linear-gradient(110deg, rgba(0,194,255,0.08), rgba(111,124,255,0.08));
  filter: saturate(120%);
  animation: heroSweep 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@keyframes heroGridDrift {
  0% { background-position: 0 0, 0 0; }
  100% { background-position: 240px 140px, -180px -120px; }
}

@keyframes heroSweep {
  0% { transform: translateX(-2%) translateY(-1%); }
  100% { transform: translateX(2%) translateY(2%); }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero::before,
  .home-hero::after { animation: none; }
}

/* Remove fixed attachment to avoid scroll jank on some GPUs */
@media (min-width: 1200px) {
  .home-hero { background-attachment: scroll; }
}

/* FINAL OVERRIDE - Hamburger menu with proper styling */
@media screen and (max-width: 1024px) {
    .mobile-menu-toggle,
    button.mobile-menu-toggle,
    #mobileMenuToggle,
    button#mobileMenuToggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1003 !important;
        background: transparent !important;
        border: none !important;
        width: 44px !important;
        height: 44px !important;
        margin-left: auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        cursor: pointer !important;
        padding: 8px !important;
        border-radius: 6px !important;
        transition: background-color 0.2s ease !important;
    }
    
    .mobile-menu-toggle:hover,
    button.mobile-menu-toggle:hover,
    #mobileMenuToggle:hover {
        background: rgba(0, 0, 0, 0.05) !important;
    }
    
    .mobile-menu-toggle span:not(.sr-only),
    button.mobile-menu-toggle span:not(.sr-only),
    #mobileMenuToggle span:not(.sr-only) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #374151 !important;
        width: 24px !important;
        height: 2px !important;
        margin: 2px 0 !important;
        border-radius: 1px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Navbar context - ensure visibility on different backgrounds */
    .navbar .mobile-menu-toggle span:not(.sr-only),
    .navbar button.mobile-menu-toggle span:not(.sr-only),
    .navbar #mobileMenuToggle span:not(.sr-only) {
        background: #ffffff !important;
    }
    
    .navbar.scrolled .mobile-menu-toggle span:not(.sr-only),
    .navbar.scrolled button.mobile-menu-toggle span:not(.sr-only),
    .navbar.scrolled #mobileMenuToggle span:not(.sr-only) {
        background: #374151 !important;
    }
    
    /* Dark theme support */
    [data-theme="dark"] .mobile-menu-toggle span:not(.sr-only),
    [data-theme="dark"] button.mobile-menu-toggle span:not(.sr-only),
    [data-theme="dark"] #mobileMenuToggle span:not(.sr-only) {
        background: #f3f4f6 !important;
    }
    
    /* Hamburger to X animation when menu is active */
    .mobile-menu-toggle.active span:not(.sr-only):nth-child(2),
    button.mobile-menu-toggle.active span:not(.sr-only):nth-child(2),
    #mobileMenuToggle.active span:not(.sr-only):nth-child(2) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .mobile-menu-toggle.active span:not(.sr-only):nth-child(3),
    button.mobile-menu-toggle.active span:not(.sr-only):nth-child(3),
    #mobileMenuToggle.active span:not(.sr-only):nth-child(3) {
        opacity: 0 !important;
    }
    
    .mobile-menu-toggle.active span:not(.sr-only):nth-child(4),
    button.mobile-menu-toggle.active span:not(.sr-only):nth-child(4),
    #mobileMenuToggle.active span:not(.sr-only):nth-child(4) {
        transform: rotate(-45deg) translate(7px, -6px) !important;
    }
}