/* ==========================================================================
   CYVAULT TECHNOLOGIES - DESIGN SYSTEM
   ========================================================================== */

/* Variables and Themes */
:root {
    /* Color Palette - Dark Theme (Premium Cybersecurity Blue Palette) */
    --bg-dark: #050814;
    --bg-dark-rgb: 5, 8, 20;
    --bg-card: rgba(13, 20, 38, 0.45);
    --bg-card-hover: rgba(20, 30, 58, 0.7);
    --bg-footer: #02040a;
    --border-color: rgba(0, 210, 255, 0.12);
    --border-hover: rgba(0, 210, 255, 0.35);

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;

    /* Neon Accents - Glowing Cybersecurity Blue/Teal */
    --accent-cyan: #00d2ff;
    --accent-cyan-rgb: 0, 210, 255;
    --accent-purple: #0066ff;
    --accent-purple-rgb: 0, 102, 255;
    --accent-pink: #8ec5fc;

    /* Partner Branded Accents (Re-aligned to Premium Blue Theme) */
    --aruba-orange: #3b82f6;
    --aruba-orange-rgb: 59, 130, 246;
    --checkpoint-blue: #00a8ff;
    --checkpoint-blue-rgb: 0, 168, 255;
    --claroty-emerald: #00ebd4;
    --claroty-emerald-rgb: 0, 235, 212;
    --txone-purple: #818cf8;
    --txone-purple-rgb: 129, 140, 248;
    --engenius-black: #020204;

    /* Fonts (Cybersecurity Tactical Typography System) */
    --font-hero: 'Teko', 'Chakra Petch', sans-serif;
    --font-tactical: 'Chakra Petch', sans-serif;
    --font-heading: 'Space Grotesk', 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-cyber: 'Orbitron', 'Chakra Petch', sans-serif;

    /* Design System Tokens */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.25rem;

    --spacing-section: 9.5rem 0;
    --glass-blur: blur(24px);
    --shadow-premium: 0 10px 40px -10px rgba(0, 0, 0, 0.4);

    /* Shadows & Transitions */
    --glow-cyan: 0 0 25px rgba(0, 210, 255, 0.45);
    --glow-purple: 0 0 25px rgba(0, 102, 255, 0.45);
    --glow-cyan-ambient: 0 8px 32px 0 rgba(0, 210, 255, 0.12);
    --glow-purple-ambient: 0 8px 32px 0 rgba(0, 102, 255, 0.12);
    --transition-speed: 0.35s;
    --ease-preset: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Light Theme Overrides (Apple + Linear + Vercel Styling) */
body.light-theme {
    --bg-dark: #F7F9FC;
    --bg-dark-rgb: 247, 249, 252;
    --bg-card: rgba(255, 255, 255, 0.72);
    --bg-card-hover: rgba(255, 255, 255, 0.92);
    --bg-footer: #F1F3F7;
    --border-color: rgba(0, 210, 255, 0.08);
    --border-hover: rgba(0, 210, 255, 0.22);

    --text-primary: #0a0f1d;
    --text-secondary: #4a5568;
    --text-muted: #718096;

    --accent-cyan: #00d2ff;
    --accent-cyan-rgb: 0, 210, 255;
    --accent-purple: #0066ff;
    --accent-purple-rgb: 0, 102, 255;

    --glow-cyan: 0 0 15px rgba(0, 210, 255, 0.15);
    --glow-purple: 0 0 15px rgba(0, 102, 255, 0.15);
    --glow-cyan-ambient: 0 8px 24px rgba(0, 210, 255, 0.04);
    --glow-purple-ambient: 0 8px 24px rgba(0, 102, 255, 0.04);
    --shadow-premium: 0 8px 30px rgba(0, 0, 0, 0.03), 0 1px 4px rgba(0, 0, 0, 0.02);
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

#main-content {
    flex: 1 0 auto !important;
    width: 100% !important;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   OPTIMIZED CYBER CURSOR & HARDWARE-ACCELERATED FOLLOWER
   ========================================================================== */

/* Native cursor usability standards */
body {
    cursor: default;
}

a,
button,
select,
[role="button"],
.service-card,
.partner-logo-card,
#theme-toggle,
.mobile-menu-btn,
.chat-toggle,
.dropdown-trigger,
.hud-hand-scanner,
.ops-process-card,
.tab-btn,
.quick-prompt-pill,
.btn-primary,
.btn-secondary {
    cursor: pointer;
}

input,
textarea,
[contenteditable="true"] {
    cursor: text;
}

/* Custom Cyber Reticle Follower */
#custom-cursor {
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(0, 242, 254, 0.65);
    background-color: rgba(0, 242, 254, 0.05);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    opacity: 0;
    will-change: transform, opacity;
    box-shadow: 0 0 10px rgba(0, 242, 254, 0.25);
    transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.22s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.2s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease,
                opacity 0.2s ease;
}

/* Micro center optic */
#custom-cursor::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 4px;
    background-color: var(--accent-cyan, #00f2fe);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--accent-cyan, #00f2fe);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#custom-cursor-glow {
    width: 46px;
    height: 46px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.2) 0%, rgba(127, 0, 255, 0.05) 60%, transparent 80%);
    border-radius: 50%;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99998;
    opacity: 0;
    will-change: transform, opacity;
    transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.22s ease,
                background 0.25s ease;
}

/* Hovered state over clickable items */
#custom-cursor.hovered {
    width: 36px;
    height: 36px;
    border-color: rgba(0, 242, 254, 0.95);
    background-color: rgba(0, 242, 254, 0.1);
    box-shadow: 0 0 16px rgba(0, 242, 254, 0.45), inset 0 0 6px rgba(0, 242, 254, 0.2);
}

#custom-cursor.hovered::after {
    transform: translate(-50%, -50%) scale(1.4);
    background-color: #ffffff;
    box-shadow: 0 0 8px #ffffff;
}

#custom-cursor-glow.hovered {
    width: 82px;
    height: 82px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.32) 0%, rgba(127, 0, 255, 0.08) 60%, transparent 80%);
}

/* Click state */
#custom-cursor.clicked {
    transform: scale(0.8);
    background-color: rgba(0, 242, 254, 0.25);
}

/* Hidden state for form typing */
#custom-cursor.cursor-hidden,
#custom-cursor-glow.cursor-hidden {
    opacity: 0 !important;
}

/* Light theme adaptations */
body.light-theme #custom-cursor {
    border-color: rgba(2, 132, 199, 0.7);
    background-color: rgba(2, 132, 199, 0.06);
    box-shadow: 0 0 10px rgba(2, 132, 199, 0.25);
}

body.light-theme #custom-cursor::after {
    background-color: #0284c7;
    box-shadow: 0 0 6px #0284c7;
}

body.light-theme #custom-cursor-glow {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.18) 0%, rgba(99, 102, 241, 0.04) 60%, transparent 80%);
}

/* Hide cursor follower completely on touchscreens and small devices */
@media (hover: none) and (pointer: coarse),
(max-width: 1024px) {
    #custom-cursor,
    #custom-cursor-glow {
        display: none !important;
    }

    body,
    a,
    button,
    select,
    input,
    textarea,
    .service-card,
    .partner-logo-card,
    #theme-toggle,
    .mobile-menu-btn,
    .chat-toggle,
    .dropdown-trigger,
    .hud-hand-scanner {
        cursor: auto !important;
    }
}

/* Glassmorphism helpers */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
}

body.light-theme .glass-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
}

/* Global Decorative Cyber & Ambient Background Elements */
.cyber-ambient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -100;
    pointer-events: none;
    overflow: hidden;
    background-color: var(--bg-dark);
}

.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 2;
}

.cyber-grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.15;
    background-image:
        linear-gradient(rgba(0, 242, 254, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}

.dark-theme .cyber-grid-overlay {
    opacity: 0.2;
}

/* Ambient Floating Orbs (Mesh Gradient look) */
.aurora-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    -webkit-filter: blur(140px);
    opacity: 0.14;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 0;
}

.orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent-cyan) 0%, rgba(0, 242, 254, 0.1) 60%, transparent 100%);
    top: -10%;
    left: -10%;
    animation: orbFloat1 35s infinite ease-in-out alternate;
}

.orb-2 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, var(--accent-purple) 0%, rgba(127, 0, 255, 0.1) 60%, transparent 100%);
    bottom: -10%;
    right: -10%;
    animation: orbFloat2 40s infinite ease-in-out alternate;
}

.orb-3 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #0284c7 0%, rgba(2, 132, 199, 0.1) 60%, transparent 100%);
    top: 35%;
    left: 45%;
    animation: orbFloat3 38s infinite ease-in-out alternate;
}

@keyframes orbFloat1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(80px, 50px) scale(1.15);
    }

    100% {
        transform: translate(-40px, 90px) scale(0.9);
    }
}

@keyframes orbFloat2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-70px, -80px) scale(0.85);
    }

    100% {
        transform: translate(50px, 30px) scale(1.12);
    }
}

@keyframes orbFloat3 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(60px, -50px) scale(1.1);
    }

    100% {
        transform: translate(-60px, 40px) scale(0.95);
    }
}

/* Mouse following spotlight */
.mouse-spotlight {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.05) 0%, rgba(127, 0, 255, 0.01) 50%, transparent 80%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -90;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Canvas Background for particle mesh */
#canvas-cyber-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   NAVIGATION / HEADER STYLES
   ========================================================================== */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: rgba(var(--bg-dark-rgb), 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    transition: background-color var(--transition-speed) ease, border-bottom var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

body.light-theme .header {
    background: linear-gradient(135deg, rgba(8, 24, 58, 0.96) 0%, rgba(13, 38, 86, 0.94) 100%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.25) !important;
}

/* Transparent header when at the very top of the page (not scrolled) */
.header:not(.scrolled) {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
}

.header:not(.scrolled) .nav-link,
.header:not(.scrolled) .dropdown-trigger,
.header:not(.scrolled) .theme-toggle {
    color: rgba(255, 255, 255, 0.88) !important;
}

.header:not(.scrolled) .logo-text h1 {
    color: #ffffff !important;
}

.header:not(.scrolled) .logo-subtitle {
    color: rgba(0, 210, 255, 0.85) !important;
}

.header:not(.scrolled) .nav-link:hover,
.header:not(.scrolled) .dropdown-trigger:hover,
.header:not(.scrolled) .theme-toggle:hover {
    color: var(--accent-cyan) !important;
}

.header:not(.scrolled) .nav-link.active {
    color: var(--accent-cyan) !important;
}

.header:not(.scrolled) .nav-btn-contact {
    color: #ffffff !important;
    border-color: rgba(0, 210, 255, 0.4) !important;
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
}

.header:not(.scrolled) .nav-btn-contact:hover {
    background: linear-gradient(135deg, #00e5ff 0%, #1a75ff 100%) !important;
    box-shadow: 0 4px 18px rgba(0, 210, 255, 0.45) !important;
    transform: translateY(-2px);
}

/* Light Theme overrides when header is over light content */
body.light-theme .header:not(.scrolled):not(.over-dark-hero) {
    background: linear-gradient(135deg, rgba(8, 24, 58, 0.96) 0%, rgba(13, 38, 86, 0.94) 100%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.25) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .nav-link,
body.light-theme .header:not(.scrolled):not(.over-dark-hero) .dropdown-trigger,
body.light-theme .header:not(.scrolled):not(.over-dark-hero) .theme-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .logo-text h1 {
    color: #ffffff !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .logo-subtitle {
    color: rgba(0, 210, 255, 0.9) !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .nav-link:hover,
body.light-theme .header:not(.scrolled):not(.over-dark-hero) .dropdown-trigger:hover,
body.light-theme .header:not(.scrolled):not(.over-dark-hero) .theme-toggle:hover {
    color: var(--accent-cyan) !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .nav-link.active {
    color: var(--accent-cyan) !important;
    font-weight: 700 !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .nav-btn-contact {
    color: #ffffff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
    box-shadow: 0 4px 18px rgba(0, 210, 255, 0.38) !important;
}

body.light-theme .header:not(.scrolled):not(.over-dark-hero) .nav-btn-contact:hover {
    background: linear-gradient(135deg, #00e5ff 0%, #1a75ff 100%) !important;
    box-shadow: 0 6px 24px rgba(0, 210, 255, 0.55) !important;
    transform: translateY(-2px);
}

.header.scrolled {
    background-color: rgba(var(--bg-dark-rgb), 0.7) !important;
    border-bottom: 1px solid rgba(0, 242, 254, 0.15) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.4);
}

body.light-theme .header.scrolled {
    background: linear-gradient(135deg, rgba(6, 18, 46, 0.98) 0%, rgba(10, 30, 72, 0.97) 100%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.38) !important;
    box-shadow: 0 14px 42px -5px rgba(3, 10, 28, 0.5), 0 0 22px rgba(0, 210, 255, 0.16) !important;
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4.5rem;
}

/* Logo Design / Logo Placeholder styling */
.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    cursor: pointer;
}

.logo-placeholder-icon {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--glow-cyan);
}

.logo-placeholder-icon i {
    width: 1.5rem;
    height: 1.5rem;
    color: #080c14;
}

.logo-glow-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    width: calc(100% + 6px);
    height: calc(100% + 6px);
    border-radius: 0.75rem;
    border: 1px solid var(--accent-cyan);
    opacity: 0.6;
    animation: ringPulse 2.5s infinite;
}

.logo-text h1 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    line-height: 1;
}

.logo-text h1 span {
    color: var(--accent-cyan);
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-subtitle {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--text-secondary);
    display: block;
    margin-top: 0.15rem;
}

/* Desktop Menu Links */
.nav-desktop {
    display: none;
    align-items: center;
    gap: 1.75rem;
    position: relative;
    height: 100%;
}

@media (min-width: 768px) {
    .nav-desktop {
        display: flex;
    }
}

.nav-link {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    position: relative;
    padding: 0.25rem 0;
    transition: color var(--transition-speed) ease;
}

.nav-link::after {
    display: none !important;
}

.nav-link:hover {
    color: var(--accent-cyan);
}

.nav-link.active {
    color: var(--text-primary);
    font-weight: 600;
}

/* Dynamic Navbar Secure Button */
.nav-btn-contact {
    background: rgba(var(--accent-cyan-rgb), 0.08);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
    color: var(--accent-cyan);
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    font-weight: 600;
    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.05);
    transition: all 0.3s var(--ease-preset);
}

.nav-btn-contact::after {
    display: none;
}

.nav-btn-contact:hover {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #080c14;
    border-color: transparent;
    box-shadow: var(--glow-cyan);
    transform: translateY(-2px);
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-speed) ease;
}

.dropdown-trigger:hover {
    color: var(--accent-cyan);
}

.dropdown-icon {
    width: 0.85rem;
    height: 0.85rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    min-width: 210px;
    opacity: 0;
    visibility: hidden;
    z-index: 100;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.dropdown:hover .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

.dropdown-content a {
    display: block;
    padding: 0.65rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.dropdown-content a:hover {
    background-color: rgba(var(--accent-cyan-rgb), 0.08);
    color: var(--accent-cyan);
    padding-left: 1.25rem;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 0.375rem;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s, background-color 0.2s;
}

.theme-toggle:hover {
    color: var(--accent-cyan);
    background-color: rgba(255, 255, 255, 0.03);
}

.theme-icon {
    width: 1.2rem;
    height: 1.2rem;
}

/* Mobile Nav Drawer */
.nav-mobile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .nav-mobile {
        display: none;
    }
}

.mobile-menu-btn {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: var(--text-secondary);
}

.menu-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.mobile-menu {
    position: fixed;
    top: 4rem;
    right: -100%;
    width: 300px;
    max-width: 88vw;
    height: calc(100vh - 4rem);
    height: calc(100dvh - 4rem);
    background-color: #050814;
    background: rgba(5, 8, 20, 0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(0, 210, 255, 0.2);
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.7);
    transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99999;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mobile-menu.open {
    right: 0;
}

.mobile-menu-content {
    padding: 1.5rem 1.25rem 3.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mobile-nav-link {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.65rem 0.75rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
}

.mobile-nav-link:hover, .mobile-nav-link:active, .mobile-nav-link.active {
    color: var(--accent-cyan);
    background: rgba(0, 210, 255, 0.1);
}

.mobile-tech-section {
    margin-top: 0.5rem;
    padding: 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-tech-title {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 0.5rem;
    padding-left: 0.35rem;
}

.mobile-tech-link {
    display: block;
    padding: 0.5rem 0.65rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.92rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mobile-tech-link:hover, .mobile-tech-link:active, .mobile-tech-link.active {
    color: #ffffff;
    background: rgba(0, 210, 255, 0.12);
}


/* ==========================================================================
   HERO / SPLASH SECTION
   ========================================================================== */
.hero-section {
    position: relative;
    padding: 8.5rem 0 6rem;
    overflow: hidden;
    background: #050814 !important;
    color: #ffffff !important;
}

body.light-theme .hero-section {
    background: #050814 !important;
    color: #ffffff !important;
}

body.light-theme .hero-section .hero-title,
.hero-section .hero-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 4px 25px rgba(0, 0, 0, 0.45) !important;
}

body.light-theme .hero-section .hero-description,
.hero-section .hero-description {
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75) !important;
}

body.light-theme .hero-section .hero-rebrand-tag,
.hero-section .hero-rebrand-tag {
    color: var(--accent-cyan) !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
}

body.light-theme .hero-section .hero-stat-number,
.hero-section .hero-stat-number {
    background: linear-gradient(135deg, #ffffff, var(--accent-cyan)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8)) !important;
}

body.light-theme .hero-section .hero-stat-label,
.hero-section .hero-stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.light-theme .hero-section .btn-secondary,
.hero-section .btn-secondary {
    color: #ffffff !important;
    border-color: rgba(0, 210, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .hero-section .btn-secondary:hover,
.hero-section .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--accent-cyan) !important;
}

body.light-theme .hero-section .cyber-hud-panel {
    background: rgba(10, 18, 38, 0.65) !important;
    border-color: rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 182, 212, 0.1) !important;
}

.hero-content {
    display: grid;
    gap: 3.5rem;
    align-items: center;
    z-index: 2;
    position: relative;
}

@media (min-width: 1024px) {
    .hero-content {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.hero-text {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

body.light-theme .hero-text {
    background: transparent;
    border: none;
    box-shadow: none;
}

.hero-rebrand-tag {
    font-size: 0.85rem;
    color: var(--accent-cyan);
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: -0.25rem;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

/* Rebrand tag default shadow */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: rgba(var(--accent-cyan-rgb), 0.08);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.2);
    border-radius: 9999px;
    color: var(--accent-cyan);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    width: fit-content;
    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.05);
}

.hero-badge i {
    width: 0.9rem;
    height: 0.9rem;
}

.hero-title {
    font-family: var(--font-hero);
    font-size: clamp(2rem, 8.2vw, 4.8rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 210, 255, 0.25);
}

/* Hero title default shadow */

@media (min-width: 640px) {
    .hero-title {
        font-size: 4rem;
    }
}

@media (min-width: 1024px) {
    .hero-title {
        font-size: 4.8rem;
    }
}

.hero-title-accent {
    display: block;
    font-family: var(--font-hero);
    font-size: clamp(2.1rem, 8.6vw, 5.2rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(135deg, #ffffff 0%, var(--accent-cyan) 50%, #0066ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 20px rgba(0, 210, 255, 0.35));
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 540px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

/* Hero description default shadow */

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

@media (min-width: 640px) {
    .hero-buttons {
        flex-direction: row;
    }
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #080c14;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    box-shadow: var(--glow-cyan-ambient);
    border: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease-preset);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 242, 254, 0.55);
}

.btn-primary i {
    width: 1.1rem;
    height: 1.1rem;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}

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

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--ease-preset);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.hero-stats {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.hero-stat {
    display: flex;
    flex-direction: column;
}

.hero-stat-number-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.hero-domain-pill {
    font-family: var(--font-cyber, 'Chakra Petch', sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    background: rgba(0, 210, 255, 0.12);
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 210, 255, 0.35);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.15);
    line-height: 1;
    display: inline-block;
}

body.light-theme .hero-domain-pill {
    background: rgba(0, 102, 204, 0.12);
    color: #0066cc;
    border-color: rgba(0, 102, 204, 0.4);
}

.hero-stat-number {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary), var(--accent-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.8));
}

body.light-theme .hero-stat-number {
    filter: drop-shadow(0 1px 3px rgba(255, 255, 255, 0.95));
}

.hero-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

body.light-theme .hero-stat-label {
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.85);
}


/* ==========================================================================
   CYBER THREAT SIMULATOR / MONITOR (HERO SECTION RIGHT)
   ========================================================================== */
.cyber-threat-dashboard {
    background-color: rgba(13, 21, 39, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-hover);
    border-radius: 1rem;
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.6), var(--glow-cyan);
    overflow: hidden;
    font-family: 'Courier New', Courier, monospace;
}

.dashboard-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-controls {
    display: flex;
    gap: 0.4rem;
}

.dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
}

.dot.red {
    background-color: #ef4444;
}

.dot.yellow {
    background-color: #f59e0b;
}

.dot.green {
    background-color: #10b981;
}

.dashboard-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.dashboard-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scan-progress-container {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.scan-label {
    font-size: 0.75rem;
    color: var(--accent-cyan);
    display: flex;
    justify-content: space-between;
}

.scan-progress-bar {
    height: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.scan-progress-fill {
    height: 100%;
    width: 65%;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: barScan 4s infinite ease-in-out;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.metric-item {
    background-color: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    text-align: center;
}

.metric-label {
    font-size: 0.6rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.25rem;
}

.metric-val {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.metric-val.glowing {
    color: #10b981;
    text-shadow: 0 0 5px #10b981;
}

.terminal-console {
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.75rem;
    height: 120px;
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.7rem;
    line-height: 1.4;
}

.console-line {
    color: var(--text-secondary);
}

.console-line.alert {
    color: #ef4444;
}

.console-line.secure {
    color: #10b981;
}

.console-line.scan {
    color: var(--accent-cyan);
}


/* ==========================================================================
   SERVICES & PORTFOLIO PAGES
   ========================================================================== */
.services-section {
    padding: 5rem 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.section-title {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
}

.section-title span {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 650px;
    line-height: 1.6;
}

/* Bento Grid Services Layout */
.services-bento-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .services-bento-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: minmax(280px, auto);
    }

    .bento-wide-4 {
        grid-column: span 4;
    }

    .bento-wide-6 {
        grid-column: span 6;
    }

    .bento-tall-2 {
        grid-column: span 2;
    }
}

.services-section {
    position: relative;
    overflow: visible !important;
    background-color: var(--bg-dark);
    padding: 5rem 0;
    z-index: 1;
}

/* Premium Divider line and badge */
.services-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 3.5rem auto;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.divider-line-left,
.divider-line-right {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 242, 254, 0.22));
}

.divider-line-right {
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.22), transparent);
}

.divider-center {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 1.25rem;
}

.divider-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

.divider-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.05);
    border: 1px solid rgba(0, 242, 254, 0.2);
    padding: 0.35rem 0.9rem;
    border-radius: 2rem;
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.04);
}

/* Animated mesh background depth */
.services-bg-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.services-bg-mesh .mesh-glow-1 {
    position: absolute;
    top: 15%;
    left: 8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.045) 0%, transparent 75%);
    filter: blur(70px);
    animation: meshFloat1 22s infinite alternate ease-in-out;
    will-change: transform;
}

.services-bg-mesh .mesh-glow-2 {
    position: absolute;
    bottom: 15%;
    right: 8%;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(127, 0, 255, 0.035) 0%, transparent 75%);
    filter: blur(85px);
    animation: meshFloat2 28s infinite alternate ease-in-out;
    will-change: transform;
}

@keyframes meshFloat1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(40px, -20px, 0) scale(1.08);
    }
}

@keyframes meshFloat2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-30px, 30px, 0) scale(0.96);
    }
}

/* Canvas container for soft background particles */
.services-canvas-particles-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.85;
}

.services-canvas-particles {
    width: 100%;
    height: 100%;
    display: block;
}

/* World class services bento cards styling */
.service-card {
    --bg-card-glass: var(--bg-card);
    --accent-glow: rgba(0, 242, 254, 0.15);
    --accent-rgb: 0, 242, 254;

    background:
        linear-gradient(var(--bg-card-glass), var(--bg-card-glass)) padding-box,
        radial-gradient(350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), var(--accent-glow), transparent 55%) border-box;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    transition: box-shadow var(--transition-speed) var(--ease-preset), border-color var(--transition-speed) ease, transform var(--transition-speed) var(--ease-preset);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-premium), inset 0 1px 0px rgba(255, 255, 255, 0.04);
}

body.light-theme .service-card {
    --bg-card-glass: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium), inset 0 1px 0px rgba(255, 255, 255, 0.4);
}

/* Accent Mapping */
.service-card.blue {
    --accent-glow: rgba(0, 135, 229, 0.28);
    --accent-rgb: 0, 135, 229;
}

.service-card.emerald {
    --accent-glow: rgba(16, 185, 129, 0.28);
    --accent-rgb: 16, 185, 129;
}

.service-card.purple {
    --accent-glow: rgba(139, 92, 246, 0.28);
    --accent-rgb: 139, 92, 246;
}

.service-card.orange {
    --accent-glow: rgba(255, 102, 0, 0.28);
    --accent-rgb: 255, 102, 0;
}

.service-card.cyan {
    --accent-glow: rgba(0, 242, 254, 0.28);
    --accent-rgb: 0, 242, 254;
}

.service-card.muted {
    --accent-glow: rgba(156, 163, 175, 0.22);
    --accent-rgb: 156, 163, 175;
}

/* Backdrop card glow aura on hover */
.card-glow-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(var(--accent-rgb), 0.08) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

/* Custom premium card hover background image container */
.card-hover-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05) translate3d(0, 4px, 0);
    filter: saturate(0.3) brightness(0.2) blur(3px);
    transition:
        opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        transform 0.45s cubic-bezier(0.25, 1, 0.5, 1),
        filter 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    border-radius: inherit;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* Dark Theme Hover (Default) */
.service-card:hover .card-hover-bg {
    opacity: 0.32;
    /* clearly visible background */
    transform: scale(1) translate3d(0, 0, 0);
    filter: saturate(1) brightness(0.4) blur(0px);
}

/* Light Theme Hover Overrides */
body.light-theme .service-card:hover .card-hover-bg {
    opacity: 0.22;
    /* clearly visible watermark */
    transform: scale(1) translate3d(0, 0, 0);
    filter: saturate(0.8) brightness(0.92) contrast(0.95) blur(0px);
}

.service-card:hover .card-glow-bg {
    opacity: 1;
}

.service-card:hover {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow:
        0 30px 60px -15px rgba(0, 0, 0, 0.65),
        0 0 35px rgba(var(--accent-rgb), 0.08),
        inset 0 1px 0px rgba(255, 255, 255, 0.08);
}

body.light-theme .service-card:hover {
    border-color: rgba(var(--accent-rgb), 0.25);
    box-shadow:
        0 30px 60px -15px rgba(31, 38, 135, 0.07),
        0 0 25px rgba(var(--accent-rgb), 0.04),
        inset 0 1px 0px rgba(255, 255, 255, 0.6);
}

.service-card>* {
    position: relative;
    z-index: 2;
    transform: translateZ(25px);
}

.service-card>.card-hover-bg {
    position: absolute !important;
    z-index: 1 !important;
    transform: none !important;
}

.service-card>.card-glow-bg {
    position: absolute !important;
    z-index: 0 !important;
    transform: none !important;
}

/* Floating animation for icons */
.service-icon-wrapper {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.75rem;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    animation: floatIcon 6s infinite ease-in-out;
}

@keyframes floatIcon {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -4px, 0) rotate(1.5deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.service-card:hover .service-icon-wrapper {
    transform: scale(1.12) rotate(4deg) translate3d(0, -2px, 15px) !important;
    animation-play-state: paused;
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.35);
}

.service-icon-wrapper i {
    width: 1.7rem;
    height: 1.7rem;
    color: var(--text-primary);
}

/* Custom Gradient Icon Backgrounds */
.service-icon-wrapper.blue {
    background: linear-gradient(135deg, rgba(var(--checkpoint-blue-rgb), 0.2), rgba(var(--checkpoint-blue-rgb), 0.05));
    border: 1px solid rgba(var(--checkpoint-blue-rgb), 0.3);
}

.service-icon-wrapper.emerald {
    background: linear-gradient(135deg, rgba(var(--claroty-emerald-rgb), 0.2), rgba(var(--claroty-emerald-rgb), 0.05));
    border: 1px solid rgba(var(--claroty-emerald-rgb), 0.3);
}

.service-icon-wrapper.purple {
    background: linear-gradient(135deg, rgba(var(--txone-purple-rgb), 0.2), rgba(var(--txone-purple-rgb), 0.05));
    border: 1px solid rgba(var(--txone-purple-rgb), 0.3);
}

.service-icon-wrapper.orange {
    background: linear-gradient(135deg, rgba(var(--aruba-orange-rgb), 0.2), rgba(var(--aruba-orange-rgb), 0.05));
    border: 1px solid rgba(var(--aruba-orange-rgb), 0.3);
}

.service-icon-wrapper.cyan {
    background: linear-gradient(135deg, rgba(var(--accent-cyan-rgb), 0.2), rgba(var(--accent-cyan-rgb), 0.05));
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.3);
}

.service-icon-wrapper.muted {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
}

.service-card-title {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.service-card-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.75rem;
}

.service-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bullet-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.bullet-item i {
    width: 0.95rem;
    height: 0.95rem;
    color: var(--accent-cyan);
}


/* ==========================================================================
   PARTNER BRANDING SHOWCASE & PAGES
   ========================================================================== */
.partner-showcase {
    position: relative;
    padding: 4rem 0 4.5rem;
    background: radial-gradient(ellipse at 50% 50%, #0c142c 0%, #050814 85%) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.25) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.25) !important;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8) !important;
}

body.light-theme .partner-showcase {
    background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 50%, #e2e8f0 100%) !important;
    border-top: 1px solid rgba(0, 102, 255, 0.15) !important;
    border-bottom: 1px solid rgba(0, 102, 255, 0.15) !important;
}

.partner-showcase-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 300px;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 212, 255, 0.2) 0%, rgba(0, 102, 255, 0.08) 50%, transparent 80%) !important;
    pointer-events: none;
    z-index: 0;
}

body.light-theme .partner-showcase-bg-glow {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.06) 0%, rgba(139, 92, 246, 0.02) 50%, transparent 100%);
}

.partner-slider-title {
    position: relative;
    z-index: 2;
    text-align: center;
    font-family: var(--font-tactical) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #00d2ff !important;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5) !important;
    margin-bottom: 2.5rem;
}

body.light-theme .partner-slider-title {
    color: #0066ff !important;
    text-shadow: none !important;
}

.marquee-container {
    overflow: hidden;
    width: 100%;
    position: relative;
    padding: 1.5rem 0;
    z-index: 2;
}

/* Blur fades at borders */
.marquee-container::before,
.marquee-container::after {
    content: '';
    position: absolute;
    top: 0;
    width: 15%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, #050814 0%, transparent 100%);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, #050814 0%, transparent 100%);
}

body.light-theme .marquee-container::before {
    background: linear-gradient(to right, #f8fafc 0%, transparent 100%);
}

body.light-theme .marquee-container::after {
    background: linear-gradient(to left, #f8fafc 0%, transparent 100%);
}

.marquee-track {
    display: flex;
    gap: 2rem;
    width: max-content;
    animation: scrollMarquee 28s linear infinite;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.partner-logo-card {
    position: relative;
    width: 210px !important;
    height: 90px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    cursor: pointer;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0.85rem 1.4rem;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), inset 0 1px 0px #ffffff !important;
}

body.light-theme .partner-logo-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 102, 255, 0.2) !important;
    box-shadow: 0 8px 25px rgba(15, 23, 42, 0.08), inset 0 1px 0px #ffffff !important;
}

.partner-logo-card img {
    max-height: 2.6rem !important;
    max-width: 85% !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
    z-index: 2;
}

body.light-theme .partner-logo-card img {
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
}

.partner-logo-card:hover img {
    opacity: 1 !important;
    transform: scale(1.06) !important;
}

body.light-theme .partner-logo-card:hover img {
    opacity: 1 !important;
    transform: scale(1.06) !important;
}

/* Mouse spotlight glow style inside card */
.partner-logo-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 212, 255, 0.25),
            transparent 80%) !important;
    opacity: 0 !important;
    transition: opacity 0.35s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.light-theme .partner-logo-card::before {
    background: radial-gradient(120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 102, 255, 0.15),
            transparent 80%) !important;
}

.partner-logo-card:hover::before {
    opacity: 1 !important;
}

.partner-logo-card:hover {
    transform: translateY(-5px) scale(1.04) !important;
    background: #ffffff !important;
    border-color: #00d2ff !important;
    box-shadow: 0 20px 45px rgba(0, 212, 255, 0.4), 0 0 25px rgba(0, 212, 255, 0.25) !important;
}

body.light-theme .partner-logo-card:hover {
    background: #ffffff !important;
    border-color: #0066ff !important;
    box-shadow: 0 15px 35px rgba(0, 102, 255, 0.25) !important;
}

/* Holographic dynamic popup detail container */
.partner-hover-popup {
    position: absolute;
    z-index: 9999;
    width: 320px;
    background: rgba(8, 14, 30, 0.96);
    border: 1px solid rgba(0, 242, 254, 0.35);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 15px 40px -10px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 242, 254, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

body.light-theme .partner-hover-popup {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(2, 132, 199, 0.35);
    box-shadow: 0 15px 40px -10px rgba(31, 38, 135, 0.1), 0 0 25px rgba(2, 132, 199, 0.05);
}

.partner-hover-popup.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.popup-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.popup-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

.popup-tier-badge {
    align-self: flex-start;
    font-family: var(--font-cyber);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0, 242, 254, 0.08);
    border: 1px solid rgba(0, 242, 254, 0.3);
    color: var(--accent-cyan);
}



.popup-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.popup-certs-section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 0.6rem;
}

body.light-theme .popup-certs-section {
    border-top-color: rgba(0, 0, 0, 0.05);
}

.popup-cert-badge {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.light-theme .popup-cert-badge {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Branded Technology Subpages - Premium Partner Hero Banner */
.partner-hero-banner {
    position: relative;
    padding: 7.5rem 0 6rem 0;
    background-size: cover;
    background-position: center;
    border-bottom: none !important;
    margin-bottom: 0 !important;
    overflow: hidden;
    min-height: 480px;
    display: flex;
    align-items: center;
}

/* Multi-layer Cinematic Directional Vignette Overlay with Seamless Section 2 Transition */
.partner-hero-cinematic-overlay {
    position: absolute;
    inset: 0;
    background: 
        linear-gradient(90deg, rgba(7, 13, 30, 0.9) 0%, rgba(7, 13, 30, 0.45) 45%, rgba(7, 13, 30, 0.35) 100%),
        linear-gradient(180deg, rgba(7, 13, 30, 0.3) 0%, transparent 40%, #070d1e 100%);
    z-index: 1;
    pointer-events: none;
}



/* Vendor Accent Radial Ambient Glow */
.partner-hero-radial-glow {
    position: absolute;
    top: 15%;
    left: 15%;
    width: 650px;
    height: 650px;
    background: radial-gradient(
        circle,
        rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.22) 0%,
        rgba(var(--vendor-rgb-secondary, 0, 102, 255), 0.08) 50%,
        transparent 70%
    );
    filter: blur(80px);
    z-index: 1;
    pointer-events: none;
    animation: vendorGlowPulse 8s infinite alternate ease-in-out;
}

@keyframes vendorGlowPulse {
    0% { transform: scale(0.9) translateY(0); opacity: 0.7; }
    100% { transform: scale(1.15) translateY(-20px); opacity: 1; }
}

/* Digital Grid Scan Effect */
.partner-hero-grid-scan {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    z-index: 1;
    pointer-events: none;
    opacity: 0.6;
}

.partner-hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.partner-hero-container {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.partner-hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.75rem;
    max-width: 820px;
}

.partner-hero-badge-row {
    display: flex;
}

.partner-hero-badge {
    font-family: var(--font-cyber);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    padding: 0.45rem 1rem;
    border-radius: 30px;
    background: rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.12);
    border: 1px solid rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.35);
    color: var(--vendor-primary, var(--accent-cyan));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 0 20px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: badgeFloatPulse 3s infinite ease-in-out;
}

.partner-hero-badge i,
.partner-hero-badge svg {
    width: 14px;
    height: 14px;
}

@keyframes badgeFloatPulse {
    0%, 100% { transform: translateY(0); box-shadow: 0 0 15px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.15); }
    50% { transform: translateY(-3px); box-shadow: 0 0 25px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.35); }
}

.partner-hero-logo-box {
    background: #FFFFFF !important;
    padding: 0.85rem 1.6rem;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.25), 0 0 25px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.2);
    border: 1px solid rgba(255, 255, 255, 0.9);
    height: 4.8rem;
    width: 13rem;
    transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms ease;
    cursor: pointer;
}

.partner-hero-logo-box:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), 0 0 35px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.4);
}

.partner-hero-logo-box img {
    max-height: 3.2rem;
    max-width: 100%;
    object-fit: contain;
    display: block;
}

.partner-hero-title {
    font-family: var(--font-heading);
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.8px;
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0;
}

body.dark-theme .partner-hero-title {
    color: #FFFFFF !important;
}

body.light-theme .partner-hero-title {
    color: #0A0F1D !important;
}

@media (max-width: 640px) {
    .partner-hero-title {
        font-size: 2.1rem;
    }
}

.partner-hero-description {
    font-size: 1.15rem;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 760px;
    margin: 0;
}

body.dark-theme .partner-hero-description {
    color: rgba(241, 245, 249, 0.82) !important;
}

body.light-theme .partner-hero-description {
    color: #475569 !important;
}

.partner-hero-cta-wrapper {
    margin-top: 0.5rem;
}

.partner-hero-cta,
.partner-section-cta {
    background: var(--vendor-gradient, linear-gradient(135deg, #00d2ff, #0066ff)) !important;
    border: none !important;
    color: #FFFFFF !important;
    padding: 0.95rem 2.2rem !important;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 10px 30px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: transform 300ms ease, box-shadow 300ms ease !important;
}

.partner-hero-cta:hover,
.partner-section-cta:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 16px 40px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.55) !important;
}

.cta-arrow-icon {
    transition: transform 300ms ease !important;
}

.partner-hero-cta:hover .cta-arrow-icon,
.partner-section-cta:hover .cta-arrow-icon {
    transform: translateX(5px) !important;
}

body.dark-theme .partner-detail-section {
    background-color: #070d1e !important;
    background: linear-gradient(180deg, #070d1e 0%, #050814 100%) !important;
}

body.light-theme .partner-detail-section {
    background-color: #F4F8FC !important;
    background: linear-gradient(180deg, #F4F8FC 0%, #EBF2F9 100%) !important;
}

.tech-detail-grid {
    display: grid;
    gap: 3.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .tech-detail-grid {
        grid-template-columns: 1.1fr 0.9fr;
    }
}

.tech-detail-desc {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tech-detail-desc h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
}

.tech-detail-desc p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    line-height: 1.7;
}

.partner-detail-section .tech-detail-visual {
    padding: 2.25rem !important;
    border-radius: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    transition: transform 300ms ease, box-shadow 300ms ease !important;
}

body.dark-theme .partner-detail-section .tech-detail-visual {
    background: rgba(13, 22, 45, 0.6) !important;
    border: 1px solid rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.18) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.08) !important;
}

body.light-theme .partner-detail-section .tech-detail-visual {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 120, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(31, 38, 135, 0.06) !important;
}

.partner-detail-section .tech-detail-icon-card {
    display: flex !important;
    gap: 1.25rem !important;
    align-items: flex-start !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    transition: background 300ms ease, transform 300ms ease !important;
}

.partner-detail-section .tech-detail-icon-card:hover {
    transform: translateX(4px) !important;
}

body.dark-theme .partner-detail-section .tech-detail-icon-card:hover {
    background: rgba(255, 255, 255, 0.04) !important;
}

body.light-theme .partner-detail-section .tech-detail-icon-card:hover {
    background: rgba(0, 120, 255, 0.04) !important;
}

.partner-detail-section .tech-detail-icon {
    width: 3.2rem !important;
    height: 3.2rem !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 300ms ease, box-shadow 300ms ease !important;
}

.partner-detail-section .tech-detail-icon-card:hover .tech-detail-icon {
    transform: scale(1.08) !important;
    box-shadow: 0 0 20px rgba(var(--vendor-rgb-primary, 0, 210, 255), 0.3) !important;
}

.tech-detail-icon-info h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.tech-detail-icon-info p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.55;
}


/* ==========================================================================
   CONTACT AND CONSULTATION LAYOUTS
   ========================================================================== */
.contact-showcase {
    position: relative;
    padding: var(--spacing-section);
    overflow: hidden;
    background-color: var(--bg-dark);
}

body.light-theme .contact-showcase {
    background-color: var(--bg-light);
}

/* Repeating Cyber Grid background pattern */
.contact-showcase::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 242, 254, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 242, 254, 0.02) 1px, transparent 1px);
    background-size: 30px 30px;
    pointer-events: none;
    z-index: 1;
}

body.light-theme .contact-showcase::before {
    background-image:
        linear-gradient(rgba(2, 132, 199, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(2, 132, 199, 0.02) 1px, transparent 1px);
}

/* Mesh radial gradients */
.contact-showcase-bg-glows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.contact-glow-1 {
    position: absolute;
    top: 10%;
    right: 5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.06) 0%, transparent 70%);
    filter: blur(40px);
}

.contact-glow-2 {
    position: absolute;
    bottom: 10%;
    left: 5%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    filter: blur(40px);
}

body.light-theme .contact-glow-1 {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.04) 0%, transparent 70%);
}

body.light-theme .contact-glow-2 {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.03) 0%, transparent 70%);
}

.contact-showcase .container {
    position: relative;
    z-index: 2;
}

.contact-layout {
    display: grid;
    gap: 3.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.contact-card,
.contact-info-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    box-shadow: var(--shadow-premium), inset 0 1px 0px rgba(255, 255, 255, 0.02);
}

body.light-theme .contact-card,
body.light-theme .contact-info-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-premium), inset 0 1px 0px rgba(255, 255, 255, 0.4);
}

.contact-card-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    margin-top: 1rem;
}

.form-group-row {
    display: grid;
    gap: 1.75rem;
}

@media (min-width: 640px) {
    .form-group-row {
        grid-template-columns: 1fr 1fr;
    }
}

.floating-label-group {
    position: relative;
    width: 100%;
}

.floating-label-group input,
.floating-label-group select,
.floating-label-group textarea {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    padding: 1.25rem 1rem 0.65rem 1rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.95rem;
    outline: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

body.light-theme .floating-label-group input,
body.light-theme .floating-label-group select,
body.light-theme .floating-label-group textarea {
    background-color: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
}

.floating-label-group select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2300d2ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.75rem !important;
    cursor: pointer;
}

body.light-theme .floating-label-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230066ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Explicit styling for select dropdown options in Dark & Light modes */
.floating-label-group select option {
    background-color: #080e1e !important;
    color: #f1f5f9 !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.95rem !important;
}

.floating-label-group select option:disabled {
    color: var(--text-muted) !important;
}

body.light-theme .floating-label-group select option {
    background-color: #ffffff !important;
    color: #0f172a !important;
}

.floating-label-group label {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--text-muted);
    font-size: 0.92rem;
    transform-origin: left top;
}

.floating-label-group textarea~label {
    top: 1.5rem;
}

/* Floating status animations */
.floating-label-group input:focus~label,
.floating-label-group input:not(:placeholder-shown)~label,
.floating-label-group textarea:focus~label,
.floating-label-group textarea:not(:placeholder-shown)~label,
.floating-label-group select:focus~label,
.floating-label-group select:valid~label {
    top: 0.65rem;
    transform: translateY(-50%) scale(0.78);
    color: var(--accent-cyan);
    font-weight: 700;
}

body.light-theme .floating-label-group input:focus~label,
body.light-theme .floating-label-group input:not(:placeholder-shown)~label,
body.light-theme .floating-label-group textarea:focus~label,
body.light-theme .floating-label-group textarea:not(:placeholder-shown)~label,
body.light-theme .floating-label-group select:focus~label,
body.light-theme .floating-label-group select:valid~label {
    color: var(--accent-blue);
}

/* Animated inputs focus glow */
.floating-label-group input:focus,
.floating-label-group select:focus,
.floating-label-group textarea:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 12px rgba(0, 242, 254, 0.2), inset 0 0 4px rgba(0, 242, 254, 0.05);
    background-color: rgba(0, 0, 0, 0.35);
}

body.light-theme .floating-label-group input:focus,
body.light-theme .floating-label-group select:focus,
body.light-theme .floating-label-group textarea:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 12px rgba(2, 132, 199, 0.15), inset 0 0 4px rgba(2, 132, 199, 0.05);
    background-color: rgba(255, 255, 255, 1);
}

/* Validity Validation Rings */
.floating-label-group input:not(:placeholder-shown):not(:focus):invalid,
.floating-label-group textarea:not(:placeholder-shown):not(:focus):invalid {
    border-color: rgba(239, 68, 68, 0.5);
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.1);
    background-color: rgba(239, 68, 68, 0.01);
}

.floating-label-group input:not(:placeholder-shown):not(:focus):valid,
.floating-label-group textarea:not(:placeholder-shown):not(:focus):valid {
    border-color: rgba(16, 185, 129, 0.4);
}

.contact-info-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contact-info-item {
    display: flex;
    gap: 1.5rem;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid transparent;
    padding: 1.25rem;
    border-radius: 0.75rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-info-item:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(6, 182, 212, 0.15);
    transform: translateX(6px);
}

body.light-theme .contact-info-item:hover {
    background: rgba(0, 0, 0, 0.01);
    border-color: rgba(2, 132, 199, 0.15);
}

.contact-info-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.5rem;
    background-color: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.2);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.05);
}

body.light-theme .contact-info-icon {
    background-color: rgba(var(--accent-cyan-rgb), 0.06);
    border-color: rgba(var(--accent-cyan-rgb), 0.2);
    color: var(--accent-cyan);
    box-shadow: 0 0 15px rgba(var(--accent-cyan-rgb), 0.03);
}

.contact-info-item:hover .contact-info-icon {
    transform: scale(1.1) rotate(6deg);
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(var(--accent-cyan-rgb), 0.2);
    color: #fff;
    background-color: var(--accent-cyan);
}

body.light-theme .contact-info-item:hover .contact-info-icon {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(var(--accent-cyan-rgb), 0.2);
    color: #fff;
    background-color: var(--accent-cyan);
}

.contact-info-icon i {
    width: 1.4rem;
    height: 1.4rem;
    transition: transform 0.3s ease;
}

.contact-info-item:hover .contact-info-icon i {
    transform: scale(1.1);
}

.contact-info-details h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.contact-info-details p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.contact-info-details a {
    color: var(--accent-cyan);
    text-decoration: none;
}

body.light-theme .contact-info-details a {
    color: var(--accent-blue);
}

.contact-info-details a:hover {
    text-decoration: underline;
}

/* Coordinates HUD Overlay around Google Map */
.map-viewport-wrapper {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.25);
    background: #000;
    margin-top: 3.5rem;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.map-viewport-wrapper:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 242, 254, 0.15);
    transform: translateY(-2px);
}

body.light-theme .map-viewport-wrapper {
    border-color: rgba(2, 132, 199, 0.25);
    box-shadow: 0 15px 35px rgba(31, 38, 135, 0.05);
}

body.light-theme .map-viewport-wrapper:hover {
    border-color: var(--accent-blue);
    box-shadow: 0 20px 45px rgba(31, 38, 135, 0.1), 0 0 25px rgba(2, 132, 199, 0.1);
}

.map-hud-header {
    background: rgba(3, 7, 18, 0.95);
    border-bottom: 1px solid rgba(6, 182, 212, 0.2);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-cyber);
    font-size: 0.7rem;
    color: var(--text-secondary);
    z-index: 10;
    position: relative;
}

body.light-theme .map-hud-header {
    background: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

.map-viewport {
    background-color: #08080c;
    padding: 0.25rem;
    overflow: hidden;
}

.map-viewport iframe {
    border-radius: 0.75rem;
    display: block;
    filter: grayscale(100%) invert(90%) contrast(120%);
    transition: filter 0.5s ease;
}

body.light-theme .map-viewport iframe {
    filter: grayscale(30%) contrast(100%);
}

.map-viewport-wrapper:hover iframe {
    filter: grayscale(20%) invert(0%) contrast(100%);
}

body.light-theme .map-viewport-wrapper:hover iframe {
    filter: grayscale(0%) contrast(100%);
}

/* Success HUD details */
.success-hud-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    padding: 1.5rem 0.5rem;
    animation: successEntrance 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes successEntrance {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.success-icon-wrapper {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid rgba(16, 185, 129, 0.35);
    color: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.15);
    animation: successPulse 2s infinite ease-in-out;
}

@keyframes successPulse {
    0% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
    }

    50% {
        box-shadow: 0 0 30px rgba(16, 185, 129, 0.3);
    }

    100% {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
    }
}

.success-icon-wrapper i {
    width: 2.25rem;
    height: 2.25rem;
}

.success-hud-title {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.success-ticket-box {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(6, 182, 212, 0.25);
    border-radius: 0.5rem;
    padding: 1.25rem;
    font-family: var(--font-cyber);
    font-size: 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: left;
}

body.light-theme .success-ticket-box {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(2, 132, 199, 0.25);
}

.success-ticket-line {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 0.35rem;
}

body.light-theme .success-ticket-line {
    border-bottom-color: rgba(0, 0, 0, 0.03);
}

.success-ticket-line:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.success-ticket-label {
    color: var(--text-secondary);
}

.success-ticket-val {
    color: var(--accent-cyan);
    font-weight: bold;
}

body.light-theme .success-ticket-val {
    color: var(--accent-blue);
}


/* ==========================================================================
   ABOUT PAGE STYLES
   ========================================================================== */
.about-hero {
    display: grid;
    gap: 4rem;
    align-items: flex-start;
    margin-bottom: 5.5rem;
}

@media (min-width: 1024px) {
    .about-hero {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.about-visual-box {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.6);
    animation: floatImage 7s infinite ease-in-out;
    transform-style: preserve-3d;
    will-change: transform;
}

@keyframes floatImage {
    0% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -10px, 0) rotate(0.5deg);
    }

    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

.about-visual-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.6s var(--ease-preset);
}

.about-visual-box:hover img {
    transform: scale(1.05);
}

/* Glass panel metrics overlay */
.about-overlay-metrics {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(3, 7, 18, 0.95) 0%, rgba(3, 7, 18, 0.5) 70%, transparent 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 3rem 1.5rem 1.75rem;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.about-metric-item {
    text-align: center;
    position: relative;
    z-index: 2;
}

.about-metric-num {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--accent-cyan);
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
    letter-spacing: -0.5px;
}

.about-metric-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-top: 0.25rem;
}

/* Milestones Timeline Styling */
.timeline-container {
    position: relative;
    margin-top: 2.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(6, 182, 212, 0.15);
}

.timeline-item {
    position: relative;
    margin-bottom: 2.25rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(-1.5rem - 7px);
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-dark);
    border: 2px solid var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    transition: all 0.3s ease;
    z-index: 2;
}

.timeline-item:hover::before {
    background: var(--accent-cyan);
    transform: scale(1.2);
}

.timeline-year {
    font-family: var(--font-cyber);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 0.25rem;
    letter-spacing: 1px;
}

.timeline-content h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.timeline-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Premium SOC Dashboard Layout */
.soc-dashboard {
    display: grid;
    gap: 2.5rem;
    margin-top: 3rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .soc-dashboard {
        grid-template-columns: 1.15fr 0.85fr;
    }
}

.soc-map-panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Threat Map wrapper glow & scan sweeps */
.threat-map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 580px;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75), 0 0 30px rgba(6, 182, 212, 0.08), inset 0 0 20px rgba(0, 0, 0, 0.8);
    background: #000;
}

.threat-map-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 242, 254, 0.04) 50%, transparent 100%);
    background-size: 100% 300px;
    animation: mapScanLine 9s linear infinite;
    pointer-events: none;
    z-index: 12;
}

@keyframes mapScanLine {
    0% {
        background-position-y: -300px;
    }

    100% {
        background-position-y: 100%;
    }
}

.threat-hud-header {
    background: rgba(3, 7, 18, 0.95) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.threat-hud-footer {
    background: rgba(3, 7, 18, 0.95) !important;
    border-top: 1px solid rgba(6, 182, 212, 0.25) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* SOC Metrics Panel & Widgets */
.soc-metrics-panel {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .soc-metrics-panel {
        grid-template-columns: 1fr 1fr;
    }

    .wide-widget {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .soc-metrics-panel {
        grid-template-columns: 1fr;
    }

    .wide-widget {
        grid-column: span 1;
    }
}

.soc-widget {
    background: rgba(8, 14, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), inset 0 1px 0px rgba(255, 255, 255, 0.02);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

body.light-theme .soc-widget {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(31, 38, 135, 0.03), inset 0 1px 0px rgba(255, 255, 255, 0.4);
}

.soc-widget:hover {
    border-color: rgba(6, 182, 212, 0.25);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45), 0 0 15px rgba(6, 182, 212, 0.03);
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    padding-bottom: 0.5rem;
}

body.light-theme .widget-header {
    border-bottom-color: rgba(0, 0, 0, 0.03);
}

.widget-header h4 {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    margin-right: auto;
    margin-left: 0.5rem;
}

.widget-header i {
    width: 1.25rem;
    height: 1.25rem;
}

.widget-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.metric-big {
    font-family: var(--font-cyber);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -1px;
    line-height: 1;
}

.widget-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Percentage fill bar */
.meter-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.25rem;
}

body.light-theme .meter-bar {
    background: rgba(0, 0, 0, 0.05);
}

.meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fill-cyan {
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
}

.fill-emerald {
    background: var(--claroty-emerald);
    box-shadow: 0 0 8px var(--claroty-emerald);
}

/* Telemetry info layout */
.telemetry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0.25rem;
}

.telemetry-item {
    display: flex;
    flex-direction: column;
}

.telemetry-val {
    font-family: var(--font-cyber);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
}

.telemetry-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

/* Dynamic SOC Console feed */
.badge-active {
    font-family: var(--font-cyber);
    font-size: 0.62rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--claroty-emerald);
    padding: 1px 6px;
    border-radius: 4px;
}

.soc-console-feed {
    background: #02040a;
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 0.5rem;
    padding: 0.75rem;
    height: 155px;
    overflow-y: auto;
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    scroll-behavior: smooth;
}

body.light-theme .soc-console-feed {
    background: #0f172a;
}

.soc-log-line {
    display: flex;
    justify-content: space-between;
    line-height: 1.3;
}

.soc-log-line.alert {
    color: #ef4444;
}

.soc-log-line.success {
    color: #10b981;
}

.soc-log-line.info {
    color: var(--accent-cyan);
}


/* ==========================================================================
   FOOTER STYLES
   ========================================================================== */
.footer {
    position: relative !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    background-color: var(--bg-footer) !important;
    border-top: 1px solid var(--border-color);
    padding: 4.5rem 0 0 !important;
    margin-bottom: 0 !important;
    font-family: var(--font-body);
}

body.light-theme .footer {
    background-color: #EEF4FA !important;
}

body.dark-theme .footer {
    background-color: #08111F !important;
}

.footer-content {
    display: grid;
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (min-width: 640px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .footer-content {
        grid-template-columns: 1.2fr 0.8fr 0.8fr 1.2fr;
    }
}

.footer-section h4 {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-logo h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.footer-logo h3 span {
    color: var(--accent-cyan);
}

.footer-logo-img {
    height: 2.25rem;
}

.footer-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.cyber-badge-secured {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 0.25rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

.glow-pulse-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: #10b981;
    animation: glowPulse 2s infinite;
}

.footer-links {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-cyan);
    padding-left: 0.25rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.contact-address {
    line-height: 1.5;
}

.contact-email,
.contact-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-email i,
.contact-phone i {
    width: 1rem;
    height: 1rem;
    color: var(--accent-cyan);
}

.contact-email a,
.contact-phone a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.contact-email a:hover,
.contact-phone a:hover {
    color: var(--accent-cyan);
}

.emergency-tag {
    font-size: 0.7rem;
    font-weight: 700;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer-bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem !important;
    padding-bottom: 0.75rem !important;
    margin-bottom: 0 !important;
}

.footer-bottom-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}

@media (min-width: 640px) {
    .footer-bottom-content {
        flex-direction: row;
        justify-content: space-between;
    }
}

.footer-bottom-links {
    display: flex;
    gap: 1.5rem;
}

.footer-bottom-links a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-bottom-links a:hover {
    color: var(--text-secondary);
}


/* ==========================================================================
   LIVE CHET / TERMINAL WIDGET
   ========================================================================== */
.chat-widget {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1000;
}

.chat-toggle {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border: none;
    box-shadow: 0 10px 25px rgba(0, 242, 254, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    animation: chatButtonFloat 3s infinite ease-in-out;
}

@keyframes chatButtonFloat {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.chat-toggle:hover {
    transform: scale(1.1) translateY(-6px);
    box-shadow: 0 15px 30px rgba(0, 242, 254, 0.6);
}

.chat-toggle i {
    width: 1.5rem;
    height: 1.5rem;
    color: #080c14;
    transition: transform 0.3s ease;
}

.chat-toggle:hover i {
    transform: rotate(360deg);
}

/* Pulsing radar lines */
.chat-pulse-ring {
    position: absolute;
    top: -6px;
    left: -6px;
    width: calc(100% + 12px);
    height: calc(100% + 12px);
    border-radius: 50%;
    border: 1px solid var(--accent-cyan);
    opacity: 0.6;
    animation: pulseChat 2.2s cubic-bezier(0.25, 0, 0, 1) infinite;
    pointer-events: none;
}

.chat-pulse-ring.ring-2 {
    animation-delay: 0.7s;
}

@keyframes pulseChat {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.chat-window {
    position: absolute;
    bottom: 4.5rem;
    right: 0;
    width: 350px;
    height: 480px;
    background: rgba(8, 14, 30, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(0, 242, 254, 0.05);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1010;
}

.chat-window.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.chat-header {
    background: rgba(15, 23, 42, 0.55);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Animated Copilot Avatar */
.chat-avatar-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-avatar-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1.5px dashed var(--accent-cyan);
    border-radius: 50%;
    animation: rotateAvatarRing 6s linear infinite;
}

.chat-avatar-core {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    animation: pulseCore 1.5s ease-in-out infinite alternate;
}

@keyframes rotateAvatarRing {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes pulseCore {
    0% {
        transform: scale(0.85);
        box-shadow: 0 0 6px var(--accent-cyan);
    }

    100% {
        transform: scale(1.15);
        box-shadow: 0 0 14px var(--accent-cyan);
    }
}

.chat-header h3 {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: var(--font-heading);
}

.chat-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    transition: all 0.25s;
}

.chat-close:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.chat-close i {
    width: 1.1rem;
    height: 1.1rem;
}

.chat-body {
    flex: 1;
    padding: 1.25rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.82rem;
    scroll-behavior: smooth;
}

.chat-message {
    max-width: 85%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    line-height: 1.5;
    animation: msgEntrance 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes msgEntrance {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.bot-message {
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-self: flex-start;
    border-bottom-left-radius: 0;
    color: var(--text-primary);
}

.user-message {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #080c14;
    font-weight: 600;
    align-self: flex-end;
    border-bottom-right-radius: 0;
    box-shadow: 0 8px 20px rgba(0, 242, 254, 0.15);
}

.terminal-txt {
    color: #10b981;
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    font-weight: bold;
    margin-bottom: 0.35rem;
    letter-spacing: 0.5px;
}

/* Quick Prompts Row */
.chat-quick-prompts {
    position: relative;
    display: flex;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    overflow-x: auto;
    background: rgba(0, 0, 0, 0.25);
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    z-index: 20;
    pointer-events: auto;
}

.chat-quick-prompts::-webkit-scrollbar {
    display: none;
}

.quick-prompt-pill {
    position: relative;
    z-index: 25;
    pointer-events: auto;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 0.28rem 0.65rem;
    color: var(--text-secondary);
    font-size: 0.72rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: inherit;
}

.quick-prompt-pill:hover {
    background: rgba(0, 242, 254, 0.08);
    border-color: rgba(0, 242, 254, 0.25);
    color: var(--accent-cyan);
    transform: translateY(-1px);
}

.chat-input-wrapper {
    background: rgba(15, 23, 42, 0.55);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chat-input-wrapper input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

.chat-input-wrapper input:focus {
    outline: none;
}

/* Action Ingest Buttons */
.chat-action-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.chat-action-btn:hover {
    color: var(--accent-cyan);
    background: rgba(0, 242, 254, 0.05);
}

.chat-action-btn i {
    width: 1.1rem;
    height: 1.1rem;
}

/* Red flashing mic button when active */
#chat-voice-btn.active {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    animation: micRecordingPulse 1.2s infinite alternate;
}

@keyframes micRecordingPulse {
    0% {
        box-shadow: 0 0 4px rgba(239, 68, 68, 0.2);
    }

    100% {
        box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
    }
}

.chat-send-btn {
    background: none;
    border: none;
    color: var(--accent-cyan);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.chat-send-btn:hover {
    color: #fff;
    background: rgba(0, 242, 254, 0.1);
}

.chat-send-btn i {
    width: 1.1rem;
    height: 1.1rem;
}

/* Jumping Thinking Dots Animation */
.thinking-bubble {
    display: flex;
    align-items: center;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.05);
    align-self: flex-start;
    border-bottom-left-radius: 0;
    padding: 0.75rem 1rem;
}

.thinking-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    height: 12px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--accent-cyan);
    animation: bounceThinkingDot 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.thinking-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounceThinkingDot {

    0%,
    80%,
    100% {
        transform: scale(0.3);
        opacity: 0.4;
    }

    40% {
        transform: scale(1.1);
        opacity: 1;
    }
}


/* ==========================================================================
   NOTIFICATION SYSTEM
   ========================================================================== */
.notification {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    z-index: 2000;
    background-color: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    animation: toastIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.notification-content i {
    width: 1.25rem;
    height: 1.25rem;
}

.notification-success {
    border-color: #10b981;
}

.notification-success i {
    color: #10b981;
}

.notification-error {
    border-color: #ef4444;
}

.notification-error i {
    color: #ef4444;
}

.notification-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}


/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */
@keyframes ringPulse {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.08);
        opacity: 0.1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

@keyframes pulseChat {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.3);
        opacity: 0;
    }
}

@keyframes glowPulse {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

@keyframes barScan {
    0% {
        width: 0%;
        left: 0;
    }

    50% {
        width: 100%;
        left: 0;
    }

    100% {
        width: 0%;
        left: 100%;
    }
}

@keyframes toastIn {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Page Dynamic Transition Animation */
.fade-in-section {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s var(--ease-preset), transform 0.5s var(--ease-preset);
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-section.invisible {
    opacity: 0;
    transform: translateY(15px);
}

/* Chat Badge Label Styling */
.chat-badge-label {
    position: absolute;
    right: 4.5rem;
    top: 50%;
    transform: translateY(-50%);
    background: #080c14;
    border: 1px solid var(--border-hover);
    color: var(--text-primary);
    padding: 0.5rem 1.25rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.chat-widget:hover .chat-badge-label {
    opacity: 1;
    transform: translateY(-50%) translateX(-4px);
}

.badge-status-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: #10b981;
    box-shadow: 0 0 6px #10b981;
    animation: glowPulse 1.5s infinite;
}

/* Chatbot Light Theme Overrides */
body.light-theme .chat-window {
    background-color: #ffffff;
    border-color: rgba(2, 132, 199, 0.22);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

body.light-theme .chat-header {
    background-color: #f8fafc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .bot-message {
    background-color: #f1f5f9;
    border-color: rgba(0, 0, 0, 0.06);
    color: #0f172a;
}

body.light-theme .chat-input-wrapper {
    background-color: #f8fafc;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-theme .chat-input-wrapper input {
    color: #0f172a;
}

body.light-theme .chat-badge-label {
    background-color: #ffffff;
    color: #0f172a;
    border-color: rgba(2, 132, 199, 0.25);
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.12);
}

body.light-theme .user-message {
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(2, 132, 199, 0.2);
}

/* Header Rebranding Subtitle */
.logo-formerly {
    transition: color var(--transition-speed) ease;
}

body.light-theme .logo-formerly {
    color: #64748b !important;
}

/* Threat Dashboard Grid */
.threat-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    padding: 1.25rem;
    transition: background-color var(--transition-speed) ease;
}

@media (min-width: 992px) {
    .threat-dashboard-grid {
        grid-template-columns: 2.2fr 1.1fr;
    }
}

.threat-map-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    background: #04060a;
    border-radius: 0.375rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.threat-feed-wrapper {
    display: flex;
    flex-direction: column;
    background: rgba(8, 12, 20, 0.45);
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    height: 420px;
}

body.light-theme .threat-feed-wrapper {
    background: rgba(255, 255, 255, 0.85);
}

body.light-theme .threat-map-wrapper {
    background: #090e1a;
    /* Keep map dark for premium look */
}

.threat-log-item {
    padding: 0.45rem 0.6rem;
    border-radius: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    animation: logFadeIn 0.3s ease-out forwards;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-family: monospace;
    font-size: 0.7rem;
}

body.light-theme .threat-log-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

.threat-log-header {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
}

.threat-log-desc {
    color: var(--accent-cyan);
    display: flex;
    justify-content: space-between;
}

@keyframes logFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   PREMIUM CYBER HUD & HANDPRINT SCANNER
   ========================================================================== */

.cyber-hud-panel {
    background: rgba(10, 18, 38, 0.45);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 0.75rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 182, 212, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    position: relative;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    font-family: var(--font-cyber);
}

body.light-theme .cyber-hud-panel {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(2, 132, 199, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 20px rgba(2, 132, 199, 0.05);
}

.hud-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
    padding-bottom: 0.75rem;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: var(--accent-cyan);
}

.hud-grid-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 576px) {
    .hud-grid-body {
        grid-template-columns: 1.2fr 1fr;
    }
}

/* Digital Clock */
.hud-clock-card {
    background: rgba(4, 6, 14, 0.75);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: center;
    position: relative;
}

body.light-theme .hud-clock-card {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(0, 0, 0, 0.06);
}

.hud-clock-time {
    font-size: 2.25rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

body.light-theme .hud-clock-time {
    color: #0f172a;
    text-shadow: none;
}

.hud-clock-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Handprint Scanner */
.handprint-scanner-box {
    background: rgba(4, 6, 14, 0.8);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 0.5rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    height: 200px;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.handprint-scanner-box:hover {
    border-color: rgba(6, 182, 212, 0.5);
    box-shadow: 0 0 15px rgba(6, 182, 212, 0.15);
}

body.light-theme .handprint-scanner-box {
    background: rgba(241, 245, 249, 0.95);
}

.scanner-svg-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scanner-svg-wrapper svg {
    width: 68px;
    height: 68px;
    fill: var(--accent-cyan);
    transition: fill 0.3s ease;
    filter: drop-shadow(0 0 8px rgba(0, 242, 254, 0.3));
}

.handprint-scanner-box.scanning svg {
    fill: #ef4444;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.5));
}

.handprint-scanner-box.granted svg {
    fill: #10b981;
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6));
}

/* Glowing Scanning Line */
.scanner-sweep-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    box-shadow: 0 0 10px var(--accent-cyan);
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}

.handprint-scanner-box.scanning .scanner-sweep-line {
    opacity: 1;
    animation: scannerSweep 1.5s infinite ease-in-out;
    background: linear-gradient(90deg, transparent, #ef4444, transparent);
    box-shadow: 0 0 10px #ef4444;
}

@keyframes scannerSweep {
    0% {
        top: 10%;
    }

    50% {
        top: 90%;
    }

    100% {
        top: 10%;
    }
}

.scanner-status-text {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    margin-top: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.scanner-status-text.restricted {
    color: #ef4444;
}

.scanner-status-text.scanning {
    color: var(--accent-cyan);
    animation: glowPulse 1.2s infinite;
}

.scanner-status-text.granted {
    color: #10b981;
}

/* Diagnostics Console */
.hud-diagnostics-console {
    background: rgba(2, 3, 8, 0.85);
    border: 1px solid rgba(6, 182, 212, 0.1);
    border-radius: 0.5rem;
    padding: 0.75rem;
    height: 260px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.68rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

body.light-theme .hud-diagnostics-console {
    background: #0f172a;
    color: #cbd5e1;
}

.diagnostics-line {
    display: flex;
    justify-content: space-between;
    line-height: 1.3;
}

.diagnostics-line.alert {
    color: #ef4444;
}

.diagnostics-line.success {
    color: #10b981;
}

.diagnostics-line.info {
    color: var(--accent-cyan);
}

/* ==========================================================================
   AUTHENTIC WORLD THREAT MAP STYLES
   ========================================================================== */

.threat-map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 580px;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid rgba(6, 182, 212, 0.35) !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
    background: #000;
}

@media (max-width: 768px) {
    .threat-map-wrapper {
        height: 400px;
    }
}

.threat-map-label {
    position: absolute;
    background: var(--bg-dark);
    padding: 3px 12px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-family: var(--font-cyber);
    font-weight: 700;
    text-transform: uppercase;
    z-index: 5;
    transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease;
    letter-spacing: 0.5px;
}

.threat-map-label.left-label {
    top: -12px;
    left: 20px;
    border: 1px solid rgba(6, 182, 212, 0.5);
    color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.2);
}

.threat-map-label.right-label {
    bottom: -12px;
    right: 20px;
    border: 1px solid rgba(147, 51, 234, 0.5);
    color: var(--accent-purple);
    box-shadow: 0 0 8px rgba(147, 51, 234, 0.2);
}

/* ==========================================================================
   CINEMATIC HERO & NAVIGATION ENHANCEMENTS
   ========================================================================== */

#nav-underline {
    position: absolute;
    bottom: 1.3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
}

/* layered backgrounds and mesh gradients */
.hero-section {
    position: relative;
    padding: 8.5rem 0 6rem;
    overflow: hidden;
    background-color: var(--bg-dark);
}

.hero-background-image {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    background: radial-gradient(circle at 75% 30%, rgba(10, 18, 38, 0.45) 0%, var(--bg-dark) 85%), url('assets/hero_cyber_background.png') no-repeat center center;
    background-size: cover;
    z-index: -10;
    pointer-events: none;
    opacity: 0.85;
}

.hero-background-video {
    position: absolute;
    top: -5%;
    left: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    z-index: -10;
    pointer-events: none;
    opacity: 0.85;
    filter: saturate(1.1) brightness(0.62);
    transition: opacity 0.3s ease;
}

body.light-theme .hero-background-video {
    opacity: 0.85 !important;
    filter: saturate(1.1) brightness(0.62) !important;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(8, 10, 18, 0.55) 0%, rgba(8, 10, 18, 0.15) 50%, rgba(8, 10, 18, 0.4) 100%),
        radial-gradient(circle at 30% 50%, rgba(8, 10, 18, 0) 0%, rgba(8, 10, 18, 0.5) 100%);
    z-index: -9;
    pointer-events: none;
}

.hero-bg-glows {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.hero-bg-glows .glow-1 {
    position: absolute;
    top: -10%;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 242, 254, 0.12) 0%, transparent 70%);
    filter: blur(80px);
    animation: floatGlow1 20s infinite alternate ease-in-out;
    will-change: transform;
}

.hero-bg-glows .glow-2 {
    position: absolute;
    bottom: 10%;
    right: 15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(127, 0, 255, 0.1) 0%, transparent 70%);
    filter: blur(80px);
    animation: floatGlow2 25s infinite alternate ease-in-out;
    will-change: transform;
}

.hero-bg-glows .glow-3 {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(225, 0, 255, 0.06) 0%, transparent 70%);
    filter: blur(60px);
    animation: floatGlow3 18s infinite alternate ease-in-out;
    will-change: transform;
}

@keyframes floatGlow1 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(50px, 30px, 0) scale(1.1);
    }
}

@keyframes floatGlow2 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-40px, -50px, 0) scale(1.15);
    }
}

@keyframes floatGlow3 {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(-30px, 40px, 0) scale(0.9);
    }
}

/* Premium grainy noise and cyber scanning scanlines */
.noise-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.scanline-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to bottom,
            rgba(0, 242, 254, 0) 0%,
            rgba(0, 242, 254, 0.04) 50%,
            rgba(0, 242, 254, 0) 100%);
    background-size: 100% 400px;
    animation: sweepScanlines 12s linear infinite;
}

@keyframes sweepScanlines {
    0% {
        background-position-y: -400px;
    }

    100% {
        background-position-y: 100%;
    }
}

/* Magnetic Buttons & Ripple Interactions */
.btn-magnetic {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease;
}

.btn-primary.btn-magnetic {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
    background-size: 200% 200%;
    animation: shiftGradient 8s linear infinite;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3);
}

.btn-primary.btn-magnetic:hover {
    box-shadow: 0 0 30px rgba(0, 242, 254, 0.6);
}

@keyframes shiftGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Click ripples */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    transform: scale(0);
    animation: rippleAnimation 0.6s cubic-bezier(0.1, 0.8, 0.3, 1);
    pointer-events: none;
    z-index: 0;
}

@keyframes rippleAnimation {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Dashboard Floating and Widget Pulsars */
.cyber-hud-panel {
    background: rgba(10, 18, 38, 0.4) !important;
    border: 1px solid rgba(6, 182, 212, 0.15) !important;
    box-shadow: 0 25px 55px -10px rgba(0, 0, 0, 0.7), 0 0 30px rgba(6, 182, 212, 0.05), inset 0 0 20px rgba(6, 182, 212, 0.05) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: floatDashboard 8s infinite ease-in-out;
    will-change: transform;
}

body.light-theme .cyber-hud-panel {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(2, 132, 199, 0.18) !important;
    box-shadow: 0 25px 55px -10px rgba(31, 38, 135, 0.08), 0 0 30px rgba(2, 132, 199, 0.03), inset 0 0 20px rgba(2, 132, 199, 0.02) !important;
}

@keyframes floatDashboard {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(0.5deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.handprint-scanner-box {
    box-shadow: inset 0 0 15px rgba(6, 182, 212, 0.05);
}

.handprint-scanner-box.scanning {
    box-shadow: inset 0 0 25px rgba(239, 68, 68, 0.15) !important;
}

.handprint-scanner-box.granted {
    box-shadow: inset 0 0 25px rgba(16, 185, 129, 0.2) !important;
}

/* Accessibility: Respect preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {

    .cyber-hud-panel,
    .hero-bg-glows .glow-1,
    .hero-bg-glows .glow-2,
    .hero-bg-glows .glow-3,
    .scanline-overlay,
    .btn-primary.btn-magnetic {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }

    .service-card:hover {
        transform: none !important;
    }
}

/* Tactical Boot-up Preloader */
.cyber-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
    pointer-events: auto;
}

.cyber-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 280px;
}

.preloader-logo {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-icon {
    width: 2rem;
    height: 2rem;
    color: var(--accent-cyan);
    animation: preloaderPulse 1.5s ease-in-out infinite alternate;
}

.preloader-logo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed var(--accent-cyan);
    border-radius: 50%;
    animation: preloaderSpin 6s linear infinite;
}

.preloader-text-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.preloader-status {
    font-size: 0.65rem;
    font-family: var(--font-cyber);
    color: var(--accent-cyan);
    letter-spacing: 1px;
}

.preloader-bar-wrapper {
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.preloader-bar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transition: width 0.1s ease;
}

.preloader-pct {
    font-size: 0.7rem;
    font-family: var(--font-cyber);
    color: var(--text-secondary);
}

@keyframes preloaderPulse {
    0% {
        transform: scale(0.9);
        opacity: 0.7;
    }

    100% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes preloaderSpin {
    0% {
        transform: rotate(0deg);
    }

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

/* Scroll Progress Header Bar */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    z-index: 10000;
    pointer-events: none;
    transition: width 0.1s ease-out;
}

/* ==========================================================================
   IMMERSIVE SERVICES STORYTELLING SECTIONS
   ========================================================================== */
.services-stories-container {
    padding-top: 2rem;
}

.service-story-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
    padding: 3rem 0;
    border-bottom: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .service-story-row {
        grid-template-columns: 1.15fr 0.85fr;
        gap: 4.5rem;
    }

    .service-story-row.alternate {
        direction: rtl;
    }

    .service-story-row.alternate .service-story-content {
        direction: ltr;
    }
}

.service-story-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-premium);
    aspect-ratio: 16/10;
    border: 1px solid var(--border-color);
}

.service-story-visual img,
.service-story-visual video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-preset);
    display: block;
}

.service-story-visual:hover img,
.service-story-visual:hover video {
    transform: scale(1.04);
}

.visual-glass-overlay {
    position: absolute;
    bottom: 1.25rem;
    right: 1.25rem;
    background: rgba(8, 14, 30, 0.72);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.25rem;
    color: #ffffff;
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    line-height: 1.4;
    box-shadow: var(--shadow-premium);
    z-index: 5;
    pointer-events: none;
}

body.light-theme .visual-glass-overlay {
    background: rgba(255, 255, 255, 0.85);
    color: var(--text-primary);
}

.service-story-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.service-story-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem;
    background: rgba(var(--accent-cyan-rgb), 0.08);
    border: 1px solid rgba(var(--accent-cyan-rgb), 0.15);
    border-radius: 999px;
    color: var(--accent-cyan);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    width: fit-content;
}

.service-story-title {
    font-family: var(--font-heading);
    font-size: 2.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.service-story-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.service-story-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.story-stat-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.15rem;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.story-stat-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--glow-cyan-ambient);
}

body.light-theme .story-stat-card {
    background: rgba(255, 255, 255, 0.5);
}

.story-stat-value {
    font-family: var(--font-cyber);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 0.25rem;
}

.story-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Journey selector bar */
.journey-selector {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 2rem 0;
    padding: 0 1rem;
}

.journey-selector-line {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    right: 1.5rem;
    height: 2px;
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-50%);
    z-index: 1;
}

.journey-selector-progress {
    position: absolute;
    top: 50%;
    left: 1.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transform: translateY(-50%);
    z-index: 2;
    transition: width 0.4s var(--ease-preset);
    width: 0%;
}

.journey-tab {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 3;
    padding: 0.5rem;
}

.journey-tab-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.9);
    border: 2px solid rgba(0, 242, 254, 0.5);
    transition: all 0.3s ease;
    box-shadow: 0 0 6px rgba(0, 242, 254, 0.2);
}

.journey-tab.active .journey-tab-dot {
    background: var(--accent-cyan);
    border-color: #fff;
    box-shadow: 0 0 14px var(--accent-cyan), 0 0 24px rgba(0, 242, 254, 0.5);
    transform: scale(1.2);
}

.journey-tab-year {
    font-family: var(--font-cyber);
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.journey-tab.active .journey-tab-year {
    color: var(--accent-cyan);
    font-weight: 800;
    text-shadow: 0 0 12px rgba(0, 242, 254, 0.6);
}


/* ==========================================================================
   ULTRA-PREMIUM PARTNERS PAGE & VENDOR ECOSYSTEM STYLES
   ========================================================================== */

.partners-hero-section {
    position: relative;
    min-height: 75vh;
    padding: 8rem 0 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, rgba(10, 132, 255, 0.12), rgba(4, 6, 14, 0.95) 70%);
    border-bottom: 1px solid var(--border-color);
}

.partners-hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.laser-scanner-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
    box-shadow: 0 0 15px var(--accent-cyan), 0 0 30px var(--accent-cyan);
    z-index: 4;
    opacity: 0.7;
    pointer-events: none;
    animation: laserScanLoop 6s linear infinite;
}

@keyframes laserScanLoop {
    0% {
        top: 0%;
        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    90% {
        opacity: 0.8;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}

.partners-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.partners-hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

.partners-hero-subtitle {
    font-size: clamp(1rem, 2.2vw, 1.2rem);
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 780px;
    margin: 0 auto;
}

.partners-hero-buttons {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Partners Grid & Interactive Feature Cards */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3.5rem;
}

.partner-feature-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.2rem 2rem;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-premium);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.partner-feature-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(0, 212, 255, 0.12),
            transparent 80%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.partner-feature-card:hover::before {
    opacity: 1;
}

.card-light-sweep {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
            transparent 45%,
            rgba(255, 255, 255, 0.08) 50%,
            transparent 55%);
    transform: translate(-100%, -100%);
    transition: transform 0.8s ease;
    pointer-events: none;
    z-index: 2;
}

.partner-feature-card:hover .card-light-sweep {
    transform: translate(100%, 100%);
}

.partner-feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(0, 212, 255, 0.15);
}

.partner-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    z-index: 3;
}

.partner-card-logo-container {
    height: 48px;
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 12px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35), inset 0 1px 0px rgba(255, 255, 255, 1) !important;
    transition: all 0.35s ease !important;
}

.partner-card-logo-container img {
    max-height: 32px !important;
    max-width: 140px !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 0.95 !important;
    mix-blend-mode: normal !important;
    transition: all 0.35s ease !important;
}

.partner-feature-card:hover .partner-card-logo-container {
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4), inset 0 1px 0px rgba(255, 255, 255, 1) !important;
    transform: scale(1.03) !important;
}

.partner-feature-card:hover .partner-card-logo-container img {
    opacity: 1 !important;
    transform: scale(1.04) !important;
}

.partner-tier-pill {
    font-family: var(--font-cyber);
    font-size: 0.6rem;
    font-weight: 800;
    padding: 0.35rem 0.75rem;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.partner-tier-pill.blue {
    background: rgba(10, 132, 255, 0.1);
    border: 1px solid rgba(10, 132, 255, 0.25);
    color: #3b82f6;
}

.partner-tier-pill.emerald {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #10b981;
}

.partner-tier-pill.purple {
    background: rgba(127, 0, 255, 0.1);
    border: 1px solid rgba(127, 0, 255, 0.25);
    color: var(--accent-purple);
}

.partner-tier-pill.orange {
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.25);
    color: #f97316;
}

.partner-tier-pill.cyan {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    color: var(--accent-cyan);
}

.partner-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0.5rem 0 0.25rem;
    position: relative;
    z-index: 3;
}

.partner-card-desc {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 3;
}

.partner-certs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    position: relative;
    z-index: 3;
}

.cert-pill {
    font-family: var(--font-cyber);
    font-size: 0.6rem;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.partner-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 3;
}

.partner-category-tag {
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    color: var(--accent-cyan);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-card-action {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.3s ease;
}

.partner-feature-card:hover .btn-card-action {
    color: var(--accent-cyan);
    transform: translateX(4px);
}

/* Why Partner Feature Grid */
.why-partner-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.75rem;
    margin-top: 3.5rem;
}

.why-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-premium);
    transition: all 0.4s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
}

.why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.12);
}

.why-icon-wrapper {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: transform 0.3s ease;
}

.why-card:hover .why-icon-wrapper {
    transform: scale(1.1) rotate(4deg);
}

.why-icon-wrapper.cyan {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--accent-cyan);
}

.why-icon-wrapper.purple {
    background: rgba(127, 0, 255, 0.08);
    border: 1px solid rgba(127, 0, 255, 0.2);
    color: var(--accent-purple);
}

.why-icon-wrapper.emerald {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.why-icon-wrapper.blue {
    background: rgba(10, 132, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.2);
    color: #3b82f6;
}

.why-icon-wrapper.orange {
    background: rgba(249, 115, 22, 0.08);
    border: 1px solid rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.why-card h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.why-card p {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Integration Workflow Timeline */
.workflow-timeline {
    position: relative;
    margin-top: 4rem;
    padding: 2rem 0;
}

.workflow-line {
    position: absolute;
    top: 62px;
    left: 8%;
    right: 8%;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
    z-index: 1;
    overflow: hidden;
}

.workflow-progress-beam {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan));
    animation: beamPulse 3s linear infinite;
    box-shadow: 0 0 10px var(--accent-cyan);
}

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

    100% {
        transform: translateX(100%);
    }
}

.workflow-steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 2;
}

@media (max-width: 992px) {
    .workflow-line {
        display: none;
    }

    .workflow-steps-grid {
        grid-template-columns: 1fr;
    }
}

.workflow-step-node {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.25rem;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.workflow-step-node:hover,
.workflow-step-node.active {
    border-color: var(--accent-cyan);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4), 0 0 15px rgba(0, 212, 255, 0.2);
    transform: translateY(-4px);
}

.step-badge {
    font-family: var(--font-cyber);
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: 1.5px;
}

.step-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(4, 6, 14, 0.9);
    border: 2px solid rgba(0, 212, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.2rem;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.2);
    transition: all 0.3s ease;
}

.workflow-step-node:hover .step-icon-circle {
    background: var(--accent-cyan);
    color: var(--bg-dark);
    box-shadow: 0 0 20px var(--accent-cyan);
}

.workflow-step-node h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.workflow-step-node p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Partners CTA Banner */
.partners-cta-banner {
    position: relative;
    border-radius: var(--radius-lg);
    padding: 4rem 3rem;
    overflow: hidden;
    background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.15), rgba(4, 6, 14, 0.95) 80%);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
    text-align: center;
}

.cta-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.15), transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.cta-badge {
    font-family: var(--font-cyber);
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-cyan);
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    padding: 0.35rem 0.85rem;
    border-radius: 99px;
}

.cta-content h2 {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
    margin: 0;
}

.cta-content p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.cta-actions {
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.journey-content-card {
    display: none;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    transition: all 0.4s ease;
}

.journey-content-card.active {
    display: block;
}

.journey-card-badge {
    font-family: var(--font-cyber);
    font-size: 0.65rem;
    color: var(--accent-cyan);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.journey-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.journey-card-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* World Map Grid Layout */
.world-map-grid-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-top: 2rem;
}

@media (min-width: 1024px) {
    .world-map-grid-layout {
        grid-template-columns: 1.2fr 0.8fr;
        gap: 3.5rem;
    }
}

.world-map-card {
    position: relative;
    background: rgba(8, 14, 30, 0.25);
    border: 1px solid var(--border-color);
}

.world-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.map-pulse-pin {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
}

.pulse-ring {
    position: absolute;
    width: 300%;
    height: 300%;
    top: -100%;
    left: -100%;
    border-radius: 50%;
    background: rgba(0, 242, 254, 0.25);
    animation: mapPinPulse 2s infinite ease-out;
    pointer-events: none;
}

.pulse-dot {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 10px var(--accent-cyan);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.map-pulse-pin:hover .pulse-dot {
    background: #ffffff;
    box-shadow: 0 0 15px #ffffff;
}

.map-pulse-pin[data-region="munich"] .pulse-dot {
    background: var(--accent-cyan);
}

.map-pulse-pin[data-region="houston"] .pulse-dot {
    background: var(--accent-cyan);
}

.map-pulse-pin[data-region="bangalore"] .pulse-dot {
    background: var(--accent-cyan);
}

@keyframes mapPinPulse {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

/* Tooltip on map */
.map-tooltip-overlay {
    position: absolute;
    background: rgba(8, 14, 30, 0.85);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.65rem 1rem;
    color: #fff;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease;
    min-width: 150px;
    box-shadow: var(--shadow-premium);
}

.map-tooltip-overlay h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-cyan);
    margin-bottom: 0.15rem;
}

.map-tooltip-overlay p {
    font-size: 0.62rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.tooltip-meta {
    font-family: var(--font-cyber);
    font-size: 0.55rem;
    font-weight: 700;
    color: #10b981;
}

.map-details-card {
    background: rgba(8, 14, 30, 0.45);
    border: 1px solid var(--border-color);
}

/* Local ops security engineering process grid styling */
.ops-process-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 1024px) {
    .ops-process-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.ops-process-card {
    position: relative;
    padding: 2.5rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(8, 14, 30, 0.35);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-color);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    transform-style: preserve-3d;
}

/* Dynamic Radial spotlight glow on Hover */
.ops-process-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y),
            rgba(0, 242, 254, 0.06),
            transparent 80%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.ops-process-card:hover::before {
    opacity: 1;
}

/* Gradient borders on Hover */
.ops-process-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: radial-gradient(350px circle at var(--mouse-x) var(--mouse-y),
            rgba(0, 242, 254, 0.3) 0%,
            rgba(127, 0, 255, 0.15) 50%,
            transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 2;
}

.ops-process-card:hover::after {
    opacity: 1;
}

.ops-process-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-premium), 0 10px 30px -10px rgba(0, 242, 254, 0.15);
}

/* ==========================================================================
   TACTICAL BOOT-UP PRELOADER OVERLAY
   ========================================================================== */
.cyber-preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #020204;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
}

.cyber-preloader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.preloader-logo {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preloader-icon {
    font-size: 2.5rem;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 10px rgba(var(--accent-cyan-rgb), 0.5));
    animation: pulseIcon 1.5s infinite ease-in-out;
}

.preloader-logo-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(var(--accent-cyan-rgb), 0.15);
    border-top: 2px solid var(--accent-cyan);
    border-radius: 50%;
    animation: rotateRing 1.2s infinite linear;
}

.preloader-text-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 250px;
}

.preloader-status {
    font-family: var(--font-cyber);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.preloader-bar-wrapper {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    overflow: hidden;
}

.preloader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    box-shadow: 0 0 8px var(--accent-cyan);
    transition: width 0.1s ease;
}

.preloader-pct {
    font-family: var(--font-cyber);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 1.5px;
}

@keyframes pulseIcon {

    0%,
    100% {
        transform: scale(0.95);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes rotateRing {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes hudScan {
    0% {
        top: 0%;
    }

    50% {
        top: 100%;
    }

    100% {
        top: 0%;
    }
}

.about-visual-box img {
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.about-visual-box:hover img {
    transform: scale(1.04) rotate(0.5deg) !important;
}

/* ==========================================================================
   ULTIMATE PREMIUM REDESIGN (20 UI/UX UPGRADES)
   ========================================================================== */

/* 1. Global Spacing & Breathing Room Updates */
section:not(.hero-section) {
    padding: var(--spacing-section) !important;
}

.services-bento-grid,
.soc-metrics-panel,
.hud-metrics-grid {
    gap: 32px !important;
}

/* 2. Premium Card & Panel Overhaul (SaaS Frosted Glassmorphism) */
.service-card,
.partner-logo-card,
.ops-process-card,
.contact-card,
.contact-info-card,
.cyber-hud-panel,
.story-stat-card,
.hud-metric-card {
    border-radius: 20px !important;
    background: rgba(13, 20, 38, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(0, 210, 255, 0.12) !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0px rgba(255, 255, 255, 0.05) !important;
    transition: all 350ms cubic-bezier(0.25, 1, 0.5, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Vector Noise Texture Overlay on Cards */
.service-card::before,
.ops-process-card::before,
.contact-card::before,
.cyber-hud-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.012;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Light Theme Card Overrides (Frosted White Premium Surfaces) */
body.light-theme .service-card,
body.light-theme .partner-logo-card,
body.light-theme .ops-process-card,
body.light-theme .contact-card,
body.light-theme .contact-info-card,
body.light-theme .story-stat-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 1px solid rgba(0, 210, 255, 0.08) !important;
    box-shadow: var(--shadow-premium), inset 0 1px 0px rgba(255, 255, 255, 0.7) !important;
}

body.light-theme .service-card::before,
body.light-theme .partner-logo-card::before,
body.light-theme .ops-process-card::before,
body.light-theme .contact-card::before,
body.light-theme .cyber-hud-panel::before {
    opacity: 0.008;
}

/* Neon Gradient Animated Borders on Hover */
.service-card::after,
.ops-process-card::after,
.partner-logo-card::after,
.contact-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple)) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    opacity: 0.1;
    transition: opacity 350ms ease;
    pointer-events: none;
    z-index: 2;
}

.service-card:hover::after,
.ops-process-card:hover::after,
.partner-logo-card:hover::after,
.contact-card:hover::after {
    opacity: 0.85;
}

/* 3D Elevations and Shift content on Hover */
.service-card:hover,
.ops-process-card:hover,
.partner-logo-card:hover,
.contact-card:hover,
.contact-info-card:hover,
.cyber-hud-panel:hover {
    box-shadow: 0 20px 45px -10px rgba(0, 210, 255, 0.18), 0 0 25px rgba(0, 210, 255, 0.1), inset 0 1px 0px rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .service-card:hover,
body.light-theme .ops-process-card:hover,
body.light-theme .partner-logo-card:hover,
body.light-theme .contact-card:hover,
body.light-theme .contact-info-card:hover,
body.light-theme .cyber-hud-panel:hover {
    box-shadow: 0 15px 30px rgba(31, 38, 135, 0.06), 0 0 15px rgba(0, 210, 255, 0.06), inset 0 1px 0px rgba(255, 255, 255, 0.8) !important;
}

/* Icon scale & content shifts */
.service-card:hover .service-icon-wrapper,
.ops-process-card:hover .service-icon-wrapper {
    transform: scale(1.1) rotate(3deg) !important;
}

.service-card>* {
    transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* 3. Primary & Contact Buttons Upgrade (Light Sweeps & Hover states) */
.btn-primary,
.nav-btn-contact {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple), var(--accent-cyan)) !important;
    background-size: 200% auto !important;
    transition: all 350ms cubic-bezier(0.25, 1, 0.5, 1) !important;
    border: none !important;
}

.btn-primary::after,
.nav-btn-contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-25deg);
    pointer-events: none;
}

.btn-primary:hover::after,
.nav-btn-contact:hover::after {
    animation: btnSweep 1.6s infinite ease-in-out;
}

@keyframes btnSweep {
    0% {
        left: -150%;
    }

    100% {
        left: 150%;
    }
}

.btn-primary:hover,
.nav-btn-contact:hover {
    background-position: right center !important;
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.45) !important;
}

.btn-primary:active,
.nav-btn-contact:active {
    transform: translateY(1px) scale(0.96) !important;
}

.btn-primary i,
.nav-btn-contact i {
    transition: transform 350ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.btn-primary:hover i,
.nav-btn-contact:hover i {
    transform: translateX(6px) scale(1.1) !important;
}

/* 4. Section Title Decorative Glowing Lines & reveals */
.section-title {
    position: relative;
    padding-bottom: 1.25rem;
    margin-bottom: 24px !important;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 65px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 99px;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
    transition: width 0.4s ease;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem !important;
}

.service-story-content .section-title::after,
.partner-content-left .section-title::after,
.about-hero .section-title::after {
    left: 0;
    transform: none;
}

/* 5. Images Floating & Parallax Effects */
.about-visual-box,
.partner-media-box {
    animation: premiumImgFloat 7s infinite alternate ease-in-out;
}

@keyframes premiumImgFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-8px) rotate(0.5deg);
    }
}

.about-visual-box::after,
.partner-media-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 40px rgba(0, 210, 255, 0.15);
    pointer-events: none;
    z-index: 5;
}

/* 6. Service Cards Checklist Animations */
.bullet-item i {
    animation: checkmarkPulse 2.2s infinite ease-in-out;
}

@keyframes checkmarkPulse {

    0%,
    100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(0, 210, 255, 0.2));
    }

    50% {
        transform: scale(1.15);
        filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.6));
    }
}

.story-stat-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 600ms cubic-bezier(0.25, 1, 0.5, 1);
}

.service-story-row:hover .story-stat-card::after {
    transform: scaleX(1);
}

/* 7. Interactive Timeline Node Pulsing & Expand on Click */
.timeline-item::before {
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.7) !important;
    animation: timelineNodePulse 2s infinite ease-in-out;
    cursor: pointer;
}

@keyframes timelineNodePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 6px rgba(0, 210, 255, 0.4);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 18px rgba(0, 210, 255, 0.85);
    }
}

.timeline-content {
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem !important;
    cursor: pointer;
    transition: all 350ms cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}

.timeline-content:hover {
    transform: translateX(4px);
    border-color: rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 8px 25px rgba(0, 210, 255, 0.05);
}



/* 8. Modernized Floating Header Shrink on Scroll */
.header {
    padding: 1.35rem 0 !important;
    transition: padding var(--transition-speed) ease, background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.header.scrolled {
    padding: 0.8rem 0 !important;
}

/* 9. Contact Form Premium Fields (Glow focus & validation check) */
.floating-label-group {
    position: relative;
    margin-bottom: 1.85rem !important;
}

.floating-label-group input,
.floating-label-group textarea {
    border-radius: 10px !important;
    border: 1px solid rgba(0, 210, 255, 0.15) !important;
    background: rgba(10, 18, 38, 0.35) !important;
    transition: all 300ms ease !important;
    padding: 1.25rem 1rem 0.6rem 1rem !important;
}

body.light-theme .floating-label-group input,
body.light-theme .floating-label-group textarea {
    background: rgba(255, 255, 255, 0.6) !important;
    border: 1px solid rgba(0, 210, 255, 0.08) !important;
}

.floating-label-group input:focus,
.floating-label-group textarea:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.25) !important;
    background: rgba(10, 18, 38, 0.5) !important;
}

body.light-theme .floating-label-group input:focus,
body.light-theme .floating-label-group textarea:focus {
    background: #ffffff !important;
}

/* 10. Chatbot Wave & Waveform animations */
.thinking-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0.5rem;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    animation: chatThink 1.2s infinite ease-in-out;
}

.thinking-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.thinking-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes chatThink {

    0%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

/* Subtle Ambient Cyber Background */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(circle at 50% 30%, rgba(0, 210, 255, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: -2;
}

/* ==========================================================================
   CINEMATIC STACKED CARDS SERVICES SECTION OVERHAUL
   ========================================================================== */
.services-scroll-container {
    --navbar-height: 80px;
    --card-vertical-spacing: 36px;
    position: sticky !important;
    top: 0 !important;
    width: 100%;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10;
}

.service-stack-card {
    position: absolute !important;
    width: calc(100% - 4rem) !important;
    max-width: 1400px !important;
    height: calc(100vh - var(--navbar-height) - (2 * var(--card-vertical-spacing))) !important;
    top: calc(var(--navbar-height) + var(--card-vertical-spacing)) !important;
    border-radius: 24px !important;
    background: rgba(10, 18, 38, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(var(--card-accent-rgb, 0, 210, 255), 0.15) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), inset 0 1px 0px rgba(255, 255, 255, 0.05) !important;
    transition: border-color 0.4s ease, box-shadow 0.4s ease !important;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    transform-origin: center top;

    /* Initial state set by GSAP, fallback styles here */
    transform: translate3d(0, 100%, 0);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.service-stack-card.active {
    pointer-events: auto !important;
}

/* Card active/inactive stacking states */
.service-stack-card.stack-inactive {
    pointer-events: none !important;
}

/* Internal layout */
.service-stack-card .card-visual-pane {
    width: 45%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.service-stack-card .card-content-pane {
    width: 55%;
    height: 100%;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    gap: 1.25rem !important;
    overflow-y: auto;
    background: rgba(8, 10, 20, 0.2);
    position: relative;
    z-index: 5;
}

/* Custom Premium Scrollbar for Card Content Pane */
.service-stack-card .card-content-pane::-webkit-scrollbar {
    width: 6px !important;
}

.service-stack-card .card-content-pane::-webkit-scrollbar-track {
    background: transparent !important;
}

.service-stack-card .card-content-pane::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

.service-stack-card .card-content-pane::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--active-accent-rgb), 0.4) !important;
}

/* Video transitions */
.service-stack-card .card-visual-pane video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
    transition: opacity 0.8s ease, transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
}

.service-stack-card.active .card-visual-pane video {
    opacity: 0.95;
    transform: scale(1.05);
}

/* Accent specific glow aura mapping */
.service-stack-card .video-glow-overlay {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 50px rgba(var(--card-accent-rgb), 0.3);
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 2;
}

/* Content revealing animations - Managed by GSAP */
.service-stack-card .seq-item {
    opacity: 1;
    transform: none;
}

/* Interactive Blueprint / Topology / Network backgrounds */
.card-tech-bg {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    pointer-events: none;
    z-index: 1;
    transition: opacity 0.6s ease;
}

.service-stack-card.active .card-tech-bg {
    opacity: 0.16;
}

/* Background grid specific graphics */
.bg-topo-grid {
    background-image: radial-gradient(rgba(0, 157, 255, 0.15) 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-blueprint-grid {
    background-image: linear-gradient(rgba(0, 200, 83, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 200, 83, 0.1) 1px, transparent 1px);
    background-size: 30px 30px;
}

.bg-radar-grid {
    background: radial-gradient(circle, transparent 30%, rgba(142, 68, 255, 0.05) 31%, transparent 35%, rgba(142, 68, 255, 0.05) 55%, transparent 60%);
}

.bg-hex-grid {
    background: radial-gradient(circle, transparent 20%, rgba(0, 229, 255, 0.05) 21%, transparent 40%);
    background-size: 40px 40px;
}

.bg-audit-grid {
    background: repeating-linear-gradient(0deg, rgba(255, 193, 7, 0.03), rgba(255, 193, 7, 0.03) 2px, transparent 2px, transparent 10px);
}

.bg-mesh-grid {
    background: radial-gradient(circle at 50% 50%, rgba(66, 165, 245, 0.08) 0%, transparent 60%);
}

/* Dynamic lights/spotlights */
.card-lighting-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--card-accent-rgb), 0.15) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.5s ease;
}

/* Light Theme stack overrides */
body.light-theme .service-stack-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(var(--card-accent-rgb), 0.12) !important;
    box-shadow: 0 15px 35px rgba(31, 38, 135, 0.04), inset 0 1px 0px rgba(255, 255, 255, 0.8) !important;
}

body.light-theme .service-stack-card .card-content-pane {
    background: rgba(255, 255, 255, 0.4);
}

body.light-theme .service-stack-card .card-tech-bg {
    opacity: 0.04;
}

body.light-theme .service-stack-card.active .card-tech-bg {
    opacity: 0.08;
}

/* Mobile responsive stacked cards */
@media (max-width: 991px) {
    .service-stack-card {
        flex-direction: column;
        height: auto;
        max-height: none;
    }

    .service-stack-card .card-visual-pane {
        width: 100%;
        height: 240px;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .service-stack-card .card-content-pane {
        width: 100%;
        height: auto;
        padding: 2rem;
    }
}

/* ==========================================================================
   STATS COUNTER GRID & ULTRA-PREMIUM LIGHT THEME ENHANCEMENTS
   ========================================================================== */

/* Stats Counter Grid Layout & Cards */
.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.75rem;
    margin-top: 1rem;
}

@media (max-width: 992px) {
    .stats-counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 576px) {
    .stats-counter-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.stat-card {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2.25rem 1.5rem;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-premium);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease;
    overflow: hidden;
    cursor: pointer;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-6px) scale(1.02);
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 212, 255, 0.15);
}

.stat-card:hover::before {
    opacity: 1;
}

.stat-icon {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-md);
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-cyan);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
    transform: scale(1.1) rotate(4deg);
    background: var(--accent-cyan);
    color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.about-metric-num {
    font-family: var(--font-cyber);
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 800;
    color: var(--accent-cyan);
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

.stat-label {
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================================
   ULTRA-PREMIUM LIGHT THEME (LIGHT MODE) COMPREHENSIVE OVERRIDES
   ========================================================================== */

body.light-theme {
    background-color: #f8fafc !important;
    color: #0f172a !important;
}

/* Light Mode Section Backgrounds & Inline Style Overrides */
body.light-theme section[style*="background"]:not(.partner-hero-banner):not(.premium-vendor-hero):not(.hero-section),
body.light-theme div[style*="background: rgba(8, 14, 30"]:not(.cyber-hud-panel),
body.light-theme div[style*="background: rgba(4, 6, 14"]:not(.cyber-hud-panel) {
    background: rgba(241, 245, 249, 0.75) !important;
    border-color: rgba(0, 102, 255, 0.12) !important;
}

body.light-theme .partner-showcase {
    background: rgba(241, 245, 249, 0.85) !important;
    border-color: rgba(0, 102, 255, 0.12) !important;
}

/* Light Mode Glass Panels & Cards */
body.light-theme .glass-panel,
body.light-theme .stat-card,
body.light-theme .partner-feature-card,
body.light-theme .why-card,
body.light-theme .workflow-step-node,
body.light-theme .ops-process-card,
body.light-theme .journey-content-card,
body.light-theme .timeline-content,
body.light-theme .soc-widget,
body.light-theme .world-map-card {
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(0, 102, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

body.light-theme .stat-card:hover,
body.light-theme .partner-feature-card:hover,
body.light-theme .why-card:hover,
body.light-theme .workflow-step-node:hover,
body.light-theme .ops-process-card:hover,
body.light-theme .timeline-content:hover {
    background: #ffffff !important;
    border-color: rgba(0, 102, 255, 0.35) !important;
    box-shadow: 0 18px 40px rgba(0, 102, 255, 0.12), 0 0 15px rgba(0, 210, 255, 0.08) !important;
}

/* Light Mode Typography & Accents */
body.light-theme .about-metric-num {
    color: #0066ff !important;
    text-shadow: none !important;
}

body.light-theme .stat-label {
    color: #475569 !important;
    font-weight: 700 !important;
}

body.light-theme .stat-icon {
    background: rgba(0, 102, 255, 0.08) !important;
    border-color: rgba(0, 102, 255, 0.2) !important;
    color: #0066ff !important;
}

body.light-theme .stat-card:hover .stat-icon {
    background: #0066ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.4) !important;
}

body.light-theme .section-title,
body.light-theme .partners-hero-title,
body.light-theme .partner-card-title,
body.light-theme .why-card h3,
body.light-theme .workflow-step-node h4,
body.light-theme .cta-content h2,
body.light-theme .journey-card-title {
    color: #0f172a !important;
}

body.light-theme .section-description,
body.light-theme .partners-hero-subtitle,
body.light-theme .partner-card-desc,
body.light-theme .why-card p,
body.light-theme .workflow-step-node p,
body.light-theme .cta-content p,
body.light-theme .journey-card-text {
    color: #475569 !important;
}

body.light-theme .cert-pill {
    background: rgba(0, 102, 255, 0.06) !important;
    border-color: rgba(0, 102, 255, 0.15) !important;
    color: #1e293b !important;
}

body.light-theme .step-icon-circle {
    background: #ffffff !important;
    border-color: rgba(0, 102, 255, 0.35) !important;
    color: #0066ff !important;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.12) !important;
}

body.light-theme .workflow-step-node:hover .step-icon-circle {
    background: #0066ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.5) !important;
}

body.light-theme .partners-cta-banner {
    background: radial-gradient(circle at 50% 0%, rgba(0, 210, 255, 0.12), rgba(241, 245, 249, 0.95) 80%) !important;
    border-color: rgba(0, 102, 255, 0.18) !important;
}

body.light-theme .partner-logo-card {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 102, 255, 0.15) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04), inset 0 1px 0px rgba(255, 255, 255, 0.8) !important;
}

body.light-theme .partner-logo-card img {
    filter: none !important;
    opacity: 0.95 !important;
    mix-blend-mode: normal !important;
}

body.light-theme .partner-logo-card:hover img {
    filter: none !important;
    opacity: 1 !important;
}

body.light-theme .journey-tab-year {
    color: #64748b !important;
}

body.light-theme .journey-tab.active .journey-tab-year {
    color: #0066ff !important;
    text-shadow: none !important;
}

body.light-theme .journey-tab-dot {
    background: #ffffff !important;
    border-color: rgba(0, 102, 255, 0.4) !important;
}

body.light-theme .journey-tab.active .journey-tab-dot {
    background: #0066ff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 14px rgba(0, 102, 255, 0.5) !important;
}

body.light-theme .partners-hero-section {
    background: radial-gradient(circle at 50% 20%, rgba(0, 102, 255, 0.08), rgba(248, 250, 252, 0.95) 70%) !important;
    border-bottom-color: rgba(0, 102, 255, 0.12) !important;
}

/* ==========================================================================
   ULTRA-PREMIUM INTERACTIVE DEFENSE FRAMEWORKS SHOWCASE (TABS)
   ========================================================================== */

.defense-frameworks-showcase {
    position: relative;
    margin-top: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Tabs Navigation Bar */
.defense-tabs-nav-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

.defense-tabs-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 99px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
    flex-wrap: wrap;
    justify-content: center;
}

.defense-tab-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.35rem;
    border-radius: 99px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.defense-tab-btn i {
    width: 18px;
    height: 18px;
    color: var(--accent-cyan);
    transition: transform 0.3s ease, color 0.3s ease;
}

.defense-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.15);
}

.defense-tab-btn.active {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.18), rgba(0, 102, 255, 0.25));
    border-color: rgba(0, 212, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25);
}

.defense-tab-btn.active i {
    color: var(--accent-cyan);
    transform: scale(1.15);
}

.tab-active-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan);
    display: none;
}

.defense-tab-btn.active .tab-active-dot {
    display: inline-block;
}

/* Tab Panels */
.defense-tab-panel {
    position: relative;
    overflow: hidden;
    display: none;
    border-radius: var(--radius-lg);
    padding: 3.25rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--shadow-premium);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.defense-tab-panel:hover {
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 12px 40px rgba(0, 212, 255, 0.12);
}

.defense-tab-panel.active {
    display: block;
}

/* Ambient Background Video in Section */
.panel-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    opacity: 0.15;
    filter: blur(1px) brightness(0.85);
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;
    pointer-events: none;
}

.defense-tab-panel:hover .panel-bg-video {
    opacity: 0.45;
    filter: blur(0px) brightness(1.15);
    transform: scale(1.04);
}

.panel-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(circle at 35% 50%, rgba(8, 14, 30, 0.78) 0%, rgba(4, 6, 14, 0.94) 100%);
    pointer-events: none;
    transition: background 0.5s ease;
}

.defense-tab-panel:hover .panel-bg-overlay {
    background: radial-gradient(circle at 35% 50%, rgba(8, 14, 30, 0.52) 0%, rgba(4, 6, 14, 0.84) 100%);
}

.panel-grid-layout {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.panel-content-left {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 920px;
    width: 100%;
}

.panel-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    border-radius: 99px;
    font-family: var(--font-cyber);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 1px;
    width: fit-content;
}

.panel-category-badge.blue {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--accent-cyan);
}

.panel-category-badge.emerald {
    background: rgba(0, 235, 212, 0.08);
    border: 1px solid rgba(0, 235, 212, 0.2);
    color: #00ebd4;
}

.panel-category-badge.purple {
    background: rgba(129, 140, 248, 0.08);
    border: 1px solid rgba(129, 140, 248, 0.2);
    color: #818cf8;
}

.panel-category-badge.orange {
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.panel-category-badge.cyan {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    color: var(--accent-cyan);
}

.panel-title {
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.panel-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.panel-bullets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.85rem 1.25rem;
    margin: 0.5rem 0;
}

.panel-bullet-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.panel-bullet-item i {
    width: 18px;
    height: 18px;
    color: var(--accent-cyan);
    flex-shrink: 0;
}

.panel-stats-row {
    display: flex;
    gap: 1.5rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

.panel-stat-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.panel-stat-pill .stat-value {
    font-family: var(--font-cyber);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--accent-cyan);
}

.panel-stat-pill .stat-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.panel-actions {
    margin-top: 0.5rem;
}

.panel-visual-right {
    position: relative;
}

.panel-video-box {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16/10;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-premium);
}

.panel-video-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s var(--ease-preset);
}

.panel-video-box:hover video {
    transform: scale(1.05);
}

.panel-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(4, 6, 14, 0.75) 100%);
    pointer-events: none;
}

.hud-tag {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(8, 14, 30, 0.8);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border-color);
    border-radius: 99px;
    padding: 0.35rem 0.85rem;
    color: #ffffff;
    font-family: var(--font-cyber);
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.5px;
    z-index: 5;
}

/* Light Theme Support for Defense Showcase Tabs */
body.light-theme .defense-tabs-nav {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 102, 255, 0.15) !important;
}

body.light-theme .defense-tab-btn {
    color: #475569 !important;
}

body.light-theme .defense-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(0, 102, 255, 0.05) !important;
}

body.light-theme .defense-tab-btn.active {
    color: #0066ff !important;
    background: rgba(0, 102, 255, 0.08) !important;
    border-color: rgba(0, 102, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.15) !important;
}

body.light-theme .defense-tab-panel {
    background: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(0, 102, 255, 0.14) !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05) !important;
}

body.light-theme .panel-bg-video {
    opacity: 0.08 !important;
    filter: blur(2px) !important;
}

body.light-theme .defense-tab-panel:hover .panel-bg-video {
    opacity: 0.28 !important;
    filter: blur(0px) !important;
}

body.light-theme .panel-bg-overlay {
    background: radial-gradient(circle at 35% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(248, 250, 252, 0.96) 100%) !important;
}

body.light-theme .defense-tab-panel:hover .panel-bg-overlay {
    background: radial-gradient(circle at 35% 50%, rgba(255, 255, 255, 0.68) 0%, rgba(248, 250, 252, 0.88) 100%) !important;
}

body.light-theme .panel-title {
    color: #0f172a !important;
}

body.light-theme .panel-desc,
body.light-theme .panel-bullet-item {
    color: #475569 !important;
}

body.light-theme .panel-stat-pill {
    background: rgba(0, 102, 255, 0.04) !important;
    border-color: rgba(0, 102, 255, 0.12) !important;
}

body.light-theme .panel-stat-pill .stat-value {
    color: #0066ff !important;
}

body.light-theme .hud-tag {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0f172a !important;
    border-color: rgba(0, 102, 255, 0.15) !important;
}

/* ==========================================================================
   COMPREHENSIVE LIGHT THEME OVERHAUL (APPLE + STRIPE + CROWDSTRIKE GRADE)
   ========================================================================== */

/* 1. Light Theme Navigation & Header (Cyvault Theme Blue) */
body.light-theme .header,
body.light-theme .header:not(.scrolled),
body.light-theme .header.scrolled {
    background: linear-gradient(135deg, rgba(8, 24, 58, 0.96) 0%, rgba(13, 38, 86, 0.94) 100%) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(5, 16, 42, 0.35), 0 0 15px rgba(0, 210, 255, 0.1) !important;
}

body.light-theme .nav-link,
body.light-theme .dropdown-trigger,
body.light-theme .theme-toggle,
body.light-theme .mobile-menu-btn,
body.light-theme .header:not(.scrolled) .nav-link,
body.light-theme .header:not(.scrolled) .dropdown-trigger,
body.light-theme .header:not(.scrolled) .theme-toggle {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

body.light-theme .logo-text h1,
body.light-theme .header:not(.scrolled) .logo-text h1 {
    color: #ffffff !important;
}

body.light-theme .logo-text h1 span,
body.light-theme .header:not(.scrolled) .logo-text h1 span {
    color: var(--accent-cyan, #00d2ff) !important;
    text-shadow: 0 0 14px rgba(0, 210, 255, 0.55) !important;
}

body.light-theme .logo-subtitle,
body.light-theme .header:not(.scrolled) .logo-subtitle {
    color: rgba(0, 210, 255, 0.9) !important;
    font-weight: 700 !important;
}

body.light-theme .nav-link:hover,
body.light-theme .dropdown-trigger:hover,
body.light-theme .theme-toggle:hover,
body.light-theme .header:not(.scrolled) .nav-link:hover,
body.light-theme .header:not(.scrolled) .dropdown-trigger:hover,
body.light-theme .header:not(.scrolled) .theme-toggle:hover {
    color: var(--accent-cyan, #00d2ff) !important;
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important;
}

body.light-theme .nav-link.active,
body.light-theme .header:not(.scrolled) .nav-link.active {
    color: var(--accent-cyan, #00d2ff) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.45) !important;
}

body.light-theme .nav-btn-contact,
body.light-theme .header:not(.scrolled) .nav-btn-contact {
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 18px rgba(0, 210, 255, 0.38) !important;
}

body.light-theme .dropdown-menu {
    background: rgba(8, 24, 58, 0.98) !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 15px 40px rgba(4, 12, 32, 0.5) !important;
}

body.light-theme .dropdown-item {
    color: #e2e8f0 !important;
}

body.light-theme .dropdown-item:hover {
    background: rgba(0, 210, 255, 0.12) !important;
    color: var(--accent-cyan, #00d2ff) !important;
}

/* 2. Light Theme Dynamic Ambient Mesh Gradients & Animations */
body.light-theme {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
}

body.light-theme .cyber-ambient-background {
    background-color: #f1f5f9 !important;
}

body.light-theme .aurora-orb {
    mix-blend-mode: multiply !important;
    opacity: 0.45 !important;
    filter: blur(100px) !important;
}

body.light-theme .orb-1 {
    background: radial-gradient(circle, #38bdf8 0%, rgba(56, 189, 248, 0.25) 50%, transparent 80%) !important;
}

body.light-theme .orb-2 {
    background: radial-gradient(circle, #818cf8 0%, rgba(129, 140, 248, 0.25) 50%, transparent 80%) !important;
}

body.light-theme .orb-3 {
    background: radial-gradient(circle, #0284c7 0%, rgba(2, 132, 199, 0.25) 50%, transparent 80%) !important;
}

body.light-theme .cyber-grid-overlay {
    opacity: 0.25 !important;
    background-image:
        linear-gradient(rgba(0, 102, 255, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 102, 255, 0.12) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}

/* 3. Light Theme Section Color Contrast Hierarchy */
body.light-theme .hero-section {
    background: #050814 !important;
}

body.light-theme .services-scroll-container,
body.light-theme #services-stack-section {
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%) !important;
}

body.light-theme #partner-grid-section,
body.light-theme .partner-showcase {
    background: #f1f5f9 !important;
    border-top: 1px solid rgba(0, 102, 255, 0.1) !important;
    border-bottom: 1px solid rgba(0, 102, 255, 0.1) !important;
}

body.light-theme .defense-frameworks-showcase,
body.light-theme #frameworks-section {
    background: linear-gradient(180deg, #edf2f7 0%, #e2e8f0 100%) !important;
}

body.light-theme .interactive-journey-section,
body.light-theme #journey-section {
    background: #f1f5f9 !important;
}

body.light-theme .partners-cta-banner,
body.light-theme .cta-section {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25) !important;
    border-radius: 24px !important;
}

body.light-theme .partners-cta-banner h2,
body.light-theme .cta-section h2 {
    color: #ffffff !important;
}

body.light-theme .partners-cta-banner p,
body.light-theme .cta-section p {
    color: #cbd5e1 !important;
}

/* 4. Light Theme Cinematic Video & Animation Contrast Panes */
body.light-theme .defense-tab-panel {
    background: #060a17 !important;
    border: 1px solid rgba(0, 212, 255, 0.25) !important;
    box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.25), 0 0 30px rgba(0, 212, 255, 0.1) !important;
    color: #ffffff !important;
}

body.light-theme .defense-tab-panel:hover {
    border-color: rgba(0, 212, 255, 0.5) !important;
    box-shadow: 0 30px 70px -10px rgba(0, 212, 255, 0.25), 0 0 40px rgba(0, 212, 255, 0.15) !important;
}

body.light-theme .panel-bg-video {
    opacity: 0.65 !important;
    filter: brightness(1.15) contrast(1.2) !important;
}

body.light-theme .defense-tab-panel:hover .panel-bg-video {
    opacity: 0.9 !important;
    filter: brightness(1.25) contrast(1.25) !important;
    transform: scale(1.04) !important;
}

body.light-theme .panel-bg-overlay {
    background: radial-gradient(circle at 35% 50%, rgba(6, 10, 23, 0.65) 0%, rgba(3, 6, 14, 0.88) 100%) !important;
}

body.light-theme .defense-tab-panel:hover .panel-bg-overlay {
    background: radial-gradient(circle at 35% 50%, rgba(6, 10, 23, 0.45) 0%, rgba(3, 6, 14, 0.75) 100%) !important;
}

body.light-theme .defense-tab-panel .panel-title {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.light-theme .defense-tab-panel .panel-desc,
body.light-theme .defense-tab-panel .panel-bullet-item {
    color: #cbd5e1 !important;
}

body.light-theme .defense-tab-panel .panel-bullet-item i {
    color: #00d2ff !important;
}

body.light-theme .defense-tab-panel .panel-stat-pill {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(0, 212, 255, 0.25) !important;
}

body.light-theme .defense-tab-panel .panel-stat-pill .stat-value {
    color: #00d2ff !important;
}

body.light-theme .defense-tab-panel .panel-stat-pill .stat-label {
    color: #94a3b8 !important;
}

body.light-theme .service-stack-card .card-visual-pane,
body.light-theme .panel-video-box,
body.light-theme .bento-card-video-wrap {
    background: #060913 !important;
    border-right: 1px solid rgba(0, 102, 255, 0.25) !important;
}

body.light-theme .service-stack-card .card-visual-pane video,
body.light-theme .panel-video-box video {
    opacity: 0.95 !important;
    filter: brightness(1.1) contrast(1.15) !important;
}

body.light-theme .video-glow-overlay {
    mix-blend-mode: screen !important;
    opacity: 0.85 !important;
}

/* 5. Light Theme Cards & Containers */
body.light-theme .service-stack-card {
    background: #ffffff !important;
    border: 1px solid rgba(0, 102, 255, 0.2) !important;
    box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

body.light-theme .service-stack-card .card-content-pane {
    background: #ffffff !important;
    color: #0f172a !important;
}

body.light-theme .service-stack-card h3,
body.light-theme .service-stack-card h4 {
    color: #0f172a !important;
}

body.light-theme .service-stack-card p,
body.light-theme .service-stack-card li {
    color: #334155 !important;
}

body.light-theme .bento-card,
body.light-theme .glass-panel,
body.light-theme .stat-card,
body.light-theme .partner-feature-card,
body.light-theme .why-card,
body.light-theme .workflow-step-node,
body.light-theme .ops-process-card,
body.light-theme .timeline-content {
    background: #ffffff !important;
    border: 1px solid rgba(0, 102, 255, 0.18) !important;
    box-shadow: 0 12px 35px -5px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

body.light-theme .bento-card:hover,
body.light-theme .glass-panel:hover,
body.light-theme .stat-card:hover,
body.light-theme .partner-feature-card:hover,
body.light-theme .why-card:hover,
body.light-theme .workflow-step-node:hover,
body.light-theme .ops-process-card:hover,
body.light-theme .timeline-content:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(0, 102, 255, 0.4) !important;
    box-shadow: 0 20px 45px -10px rgba(0, 102, 255, 0.18) !important;
}

/* 6. Light Theme Typography & Badges */
body.light-theme h1,
body.light-theme h2,
body.light-theme h3,
body.light-theme h4,
body.light-theme h5,
body.light-theme h6,
body.light-theme .section-title,
body.light-theme .partner-card-title {
    color: #0f172a !important;
}

body.light-theme p,
body.light-theme li,
body.light-theme .section-description,
body.light-theme .partner-card-desc {
    color: #334155 !important;
}

body.light-theme .badge,
body.light-theme .hero-badge,
body.light-theme .cert-pill {
    background: rgba(0, 102, 255, 0.08) !important;
    color: #0066ff !important;
    border: 1px solid rgba(0, 102, 255, 0.22) !important;
    font-weight: 700 !important;
}

body.light-theme .btn-primary {
    background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.3) !important;
}

body.light-theme .btn-secondary {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: rgba(0, 102, 255, 0.25) !important;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.04) !important;
}

/* 7. Light Theme Hover Detail Popups & Footer */
body.light-theme .partner-hover-popup {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(0, 102, 255, 0.2) !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15) !important;
    color: #0f172a !important;
}

body.light-theme .partner-hover-popup h4 {
    color: #0f172a !important;
}

body.light-theme .partner-hover-popup p {
    color: #334155 !important;
}

body.light-theme footer,
body.light-theme .footer {
    background: #e2e8f0 !important;
    border-top: 1px solid rgba(0, 102, 255, 0.12) !important;
    color: #334155 !important;
}

body.light-theme .footer-title,
body.light-theme .footer h4 {
    color: #0f172a !important;
}

body.light-theme .footer-links a,
body.light-theme .footer-link {
    color: #475569 !important;
}

body.light-theme .footer-links a:hover,
body.light-theme .footer-link:hover {
    color: #0066ff !important;
}

body.light-theme .footer-bottom,
body.light-theme .footer-copyright {
    color: #64748b !important;
    border-top-color: rgba(0, 102, 255, 0.08) !important;
}

/* 8. Light Theme Alliance Desk CTA Banner Final Overrides */
body.light-theme .partners-cta-banner,
body.light-theme .partners-cta-banner.glass-panel,
body.light-theme .cta-section,
body.light-theme .cta-section.glass-panel,
body.light-theme .cta-banner {
    background: linear-gradient(135deg, #070c18 0%, #0d1527 50%, #080f1e 100%) !important;
    border: 1px solid rgba(0, 212, 255, 0.35) !important;
    box-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.3), 0 0 30px rgba(0, 212, 255, 0.15) !important;
    border-radius: 24px !important;
    color: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

body.light-theme .partners-cta-banner h2,
body.light-theme .partners-cta-banner.glass-panel h2,
body.light-theme .cta-section h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 212, 255, 0.2) !important;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.light-theme .partners-cta-banner p,
body.light-theme .partners-cta-banner.glass-panel p,
body.light-theme .cta-section p {
    color: #cbd5e1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
    font-size: 1.05rem !important;
}

body.light-theme .partners-cta-banner .cta-badge,
body.light-theme .partners-cta-banner.glass-panel .cta-badge,
body.light-theme .cta-section .cta-badge {
    background: rgba(0, 212, 255, 0.12) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #00d2ff !important;
    font-weight: 800 !important;
    letter-spacing: 1.5px !important;
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.4) !important;
}

body.light-theme .partners-cta-banner .btn-primary,
body.light-theme .partners-cta-banner.glass-panel .btn-primary {
    background: linear-gradient(135deg, #0066ff, #00d2ff) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.4) !important;
}

body.light-theme .partners-cta-banner .btn-secondary,
body.light-theme .partners-cta-banner.glass-panel .btn-secondary {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

body.light-theme .partners-cta-banner .btn-secondary:hover,
body.light-theme .partners-cta-banner.glass-panel .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #00d2ff !important;
}

/* ==========================================================================
   9. GLOBAL TACTICAL TYPOGRAPHY & BADGE STYLING (CYBERSECURITY POSTER GRADE)
   ========================================================================== */
.section-title,
.panel-title,
.partner-card-title,
.service-story-title,
.partner-slider-title {
    font-family: var(--font-hero) !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

.section-title {
    font-size: clamp(2.2rem, 4.5vw, 3.4rem) !important;
    line-height: 1.05 !important;
}

.panel-title {
    font-size: clamp(2rem, 3.8vw, 3rem) !important;
    line-height: 1.05 !important;
}

.partner-card-title {
    font-size: 1.85rem !important;
    line-height: 1.1 !important;
}

.hero-badge,
.cta-badge,
.panel-category-badge,
.partner-tier-pill,
.step-badge,
.cert-pill {
    font-family: var(--font-tactical) !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

.tactical-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1.1rem;
    background: linear-gradient(135deg, #0052cc 0%, #00d2ff 100%);
    color: #ffffff !important;
    font-family: var(--font-tactical) !important;
    font-weight: 700 !important;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    border-radius: 4px;
    box-shadow: 0 4px 18px rgba(0, 210, 255, 0.35);
}

/* ==========================================================================
   10. 3D CYBER CARD EFFECT DESIGN SYSTEM
   ========================================================================== */
.cyber-3d-card-container {
    position: relative;
    width: 100%;
    min-height: 270px;
    height: 100%;
    transition: 200ms ease;
}

.cyber-3d-card-container:active {
    transform: scale(0.98);
}

.cyber-3d-canvas {
    perspective: 800px;
    inset: 0;
    z-index: 200;
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0px 0px;
    grid-template-areas:
        "tr-1 tr-2 tr-3 tr-4 tr-5"
        "tr-6 tr-7 tr-8 tr-9 tr-10"
        "tr-11 tr-12 tr-13 tr-14 tr-15"
        "tr-16 tr-17 tr-18 tr-19 tr-20"
        "tr-21 tr-22 tr-23 tr-24 tr-25";
}

.cyber-3d-canvas .tracker {
    position: relative;
    z-index: 200;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* 5x5 Grid Area Mapping */
.cyber-3d-canvas .tr-1 {
    grid-area: tr-1;
}

.cyber-3d-canvas .tr-2 {
    grid-area: tr-2;
}

.cyber-3d-canvas .tr-3 {
    grid-area: tr-3;
}

.cyber-3d-canvas .tr-4 {
    grid-area: tr-4;
}

.cyber-3d-canvas .tr-5 {
    grid-area: tr-5;
}

.cyber-3d-canvas .tr-6 {
    grid-area: tr-6;
}

.cyber-3d-canvas .tr-7 {
    grid-area: tr-7;
}

.cyber-3d-canvas .tr-8 {
    grid-area: tr-8;
}

.cyber-3d-canvas .tr-9 {
    grid-area: tr-9;
}

.cyber-3d-canvas .tr-10 {
    grid-area: tr-10;
}

.cyber-3d-canvas .tr-11 {
    grid-area: tr-11;
}

.cyber-3d-canvas .tr-12 {
    grid-area: tr-12;
}

.cyber-3d-canvas .tr-13 {
    grid-area: tr-13;
}

.cyber-3d-canvas .tr-14 {
    grid-area: tr-14;
}

.cyber-3d-canvas .tr-15 {
    grid-area: tr-15;
}

.cyber-3d-canvas .tr-16 {
    grid-area: tr-16;
}

.cyber-3d-canvas .tr-17 {
    grid-area: tr-17;
}

.cyber-3d-canvas .tr-18 {
    grid-area: tr-18;
}

.cyber-3d-canvas .tr-19 {
    grid-area: tr-19;
}

.cyber-3d-canvas .tr-20 {
    grid-area: tr-20;
}

.cyber-3d-canvas .tr-21 {
    grid-area: tr-21;
}

.cyber-3d-canvas .tr-22 {
    grid-area: tr-22;
}

.cyber-3d-canvas .tr-23 {
    grid-area: tr-23;
}

.cyber-3d-canvas .tr-24 {
    grid-area: tr-24;
}

.cyber-3d-canvas .tr-25 {
    grid-area: tr-25;
}

/* Exact Uiverse Card Base */
.cyber-3d-card {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    border-radius: 20px;
    transition: 700ms;
    background: linear-gradient(135deg, rgba(13, 20, 38, 0.96), rgba(6, 10, 23, 0.98)) !important;
    border: 2px solid rgba(0, 212, 255, 0.22) !important;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

body.light-theme .cyber-3d-card {
    background: linear-gradient(135deg, rgba(13, 20, 38, 0.96), rgba(6, 10, 23, 0.98)) !important;
    border: 2px solid rgba(0, 212, 255, 0.28) !important;
    box-shadow: 0 15px 40px rgba(15, 23, 42, 0.25), inset 0 0 20px rgba(0, 212, 255, 0.05) !important;
}

body.light-theme .cyber-3d-card h3,
body.light-theme .cyber-3d-card .service-story-title {
    color: #ffffff !important;
}

body.light-theme .cyber-3d-card p,
body.light-theme .cyber-3d-card .service-story-desc {
    color: #cbd5e1 !important;
}

/* Uiverse Backdrop Blur Glow Aura */
.cyber-3d-card::before {
    content: "";
    background: radial-gradient(circle at center,
            rgba(0, 212, 255, 0.22) 0%,
            rgba(0, 162, 255, 0.08) 50%,
            transparent 100%);
    filter: blur(20px);
    opacity: 0;
    width: 150%;
    height: 150%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 2;
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card::before {
    opacity: 1;
}

.cyber-3d-card-container:hover .cyber-3d-card::before {
    transition: 200ms;
    opacity: 0.8;
}

.cyber-3d-card .card-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 5;
}

.cyber-3d-card .card-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(125deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.05) 45%,
            rgba(255, 255, 255, 0.15) 50%,
            rgba(255, 255, 255, 0.05) 55%,
            rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
    z-index: 6;
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card .card-glare {
    opacity: 1;
}

.cyber-lines span {
    position: absolute;
    background: linear-gradient(90deg,
            transparent,
            rgba(0, 212, 255, 0.35),
            transparent);
    pointer-events: none;
    z-index: 6;
}

.cyber-lines span:nth-child(1) {
    top: 20%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    animation: lineGrow 3s linear infinite;
}

.cyber-lines span:nth-child(2) {
    top: 40%;
    right: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    animation: lineGrow 3s linear infinite 1s;
}

.cyber-lines span:nth-child(3) {
    top: 60%;
    left: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    animation: lineGrow 3s linear infinite 2s;
}

.cyber-lines span:nth-child(4) {
    top: 80%;
    right: 0;
    width: 100%;
    height: 1px;
    transform: scaleX(0);
    transform-origin: right;
    animation: lineGrow 3s linear infinite 1.5s;
}

@keyframes lineGrow {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }

    100% {
        transform: scaleX(0);
        opacity: 0;
    }
}

.corner-elements span {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(0, 212, 255, 0.35);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 7;
}

.corner-elements span:nth-child(1) {
    top: 10px;
    left: 10px;
    border-right: 0;
    border-bottom: 0;
}

.corner-elements span:nth-child(2) {
    top: 10px;
    right: 10px;
    border-left: 0;
    border-bottom: 0;
}

.corner-elements span:nth-child(3) {
    bottom: 10px;
    left: 10px;
    border-right: 0;
    border-top: 0;
}

.corner-elements span:nth-child(4) {
    bottom: 10px;
    right: 10px;
    border-left: 0;
    border-top: 0;
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card .corner-elements span {
    border-color: rgba(0, 212, 255, 0.9);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.6);
}

.scan-line {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            transparent,
            rgba(0, 212, 255, 0.15),
            transparent);
    transform: translateY(-100%);
    animation: scanMove 2.5s linear infinite;
    pointer-events: none;
    z-index: 6;
}

@keyframes scanMove {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(100%);
    }
}

.glowing-elements {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

.glow-1,
.glow-2,
.glow-3 {
    position: absolute;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(0, 212, 255, 0.35) 0%, rgba(0, 212, 255, 0) 70%);
    filter: blur(16px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glow-1 {
    top: -20px;
    left: -20px;
}

.glow-2 {
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
}

.glow-3 {
    bottom: -20px;
    left: 30%;
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card .glowing-elements div {
    opacity: 1;
}

.card-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #00d2ff;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 7;
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card .card-particles span {
    animation: particleFloat 2s infinite;
}

@keyframes particleFloat {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(calc(var(--x, 0) * 30px), calc(var(--y, 0) * 30px));
        opacity: 0;
    }
}

.card-particles span:nth-child(1) {
    --x: 1;
    --y: -1;
    top: 40%;
    left: 20%;
}

.card-particles span:nth-child(2) {
    --x: -1;
    --y: -1;
    top: 60%;
    right: 20%;
}

.card-particles span:nth-child(3) {
    --x: 0.5;
    --y: 1;
    top: 20%;
    left: 40%;
}

.card-particles span:nth-child(4) {
    --x: -0.5;
    --y: 1;
    top: 80%;
    right: 40%;
}

.card-particles span:nth-child(5) {
    --x: 1;
    --y: 0.5;
    top: 30%;
    left: 60%;
}

.card-particles span:nth-child(6) {
    --x: -1;
    --y: 0.5;
    top: 70%;
    right: 60%;
}

/* Exact 100% Uiverse 3D Tilt Transformations */
.cyber-3d-canvas .tr-1:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-2:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-3:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-4:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-5:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-6:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-7:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-8:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-9:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-10:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-11:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-12:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-13:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-14:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-15:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-16:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-17:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-18:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-19:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-20:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-21:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-22:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-23:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-24:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);
}

.cyber-3d-canvas .tr-25:hover~.cyber-3d-card {
    transition: 125ms ease-in-out;
    transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);
}

.cyber-3d-canvas .tracker:hover~.cyber-3d-card {
    filter: brightness(1.15) !important;
    border-color: #00d2ff !important;
    box-shadow: 0 22px 50px rgba(0, 212, 255, 0.45), 0 0 35px rgba(0, 212, 255, 0.3) !important;
}

body.light-theme .cyber-3d-canvas .tracker:hover~.cyber-3d-card {
    border-color: #0066ff !important;
    box-shadow: 0 20px 45px rgba(0, 102, 255, 0.3) !important;
}

/* ==========================================================================
   11. PARTNER FEATURE CARD OVERFLOW PROTECTION & CONTAINER BOUNDARY FIX
   ========================================================================== */
.partner-feature-card {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 2rem 1.75rem !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

.partner-card-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.75rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.partner-card-logo-container {
    background: #ffffff !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    width: 160px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    flex-shrink: 0 !important;
}

.partner-card-logo-container img {
    max-height: 36px !important;
    max-width: 100% !important;
    object-fit: contain !important;
}

.partner-tier-pill {
    font-family: var(--font-tactical) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 0.35rem 0.85rem !important;
    border-radius: 4px !important;
    white-space: normal !important;
    text-align: center !important;
    max-width: 100% !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
    margin: 0 auto !important;
}

.partner-card-title {
    font-family: var(--font-hero) !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    margin-bottom: 0.75rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    width: 100% !important;
}

.partner-card-desc {
    font-size: 0.92rem !important;
    line-height: 1.6 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin-bottom: 1.25rem !important;
    width: 100% !important;
}

.partner-certs-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

.cert-pill {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
}

.partner-cards-grid,
.partners-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 2rem !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    padding: 0 1rem !important;
}

@media (max-width: 768px) {

    .partner-cards-grid,
    .partners-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   12. INTEGRATION & DEPLOYMENT WORKFLOW CARD EFFECT 
   ========================================================================== */
/* Hide horizontal timeline line & moving progress beam */
.workflow-line,
.workflow-progress-beam {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
}

.workflow-steps-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 2.25rem !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 2.5rem !important;
}

.workflow-step-node {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    background-color: #0B1329 !important;
    background: linear-gradient(145deg, #0f172a 0%, #080e1a 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.75rem 1.25rem !important;
    gap: 0.85rem !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    margin: 0 !important;
    transform-style: preserve-3d !important;
    z-index: 1 !important;
}

/* Premium Light Mode Card Styling - Metallic Light Grey Slate Gradient (NOT Black, NOT White, NOT Blue) */
body.light-theme .workflow-step-node,
body.light-theme .workflow-step-node.active,
body.light-theme .workflow-steps-grid .workflow-step-node,
body.light-theme .workflow-steps-grid .workflow-step-node.active {
    background-color: #e5e7eb !important;
    background: linear-gradient(145deg, #f3f4f6 0%, #e5e7eb 100%) !important;
    color: #111827 !important;
    border: 1px solid rgba(156, 163, 175, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform-style: preserve-3d !important;
    z-index: 1 !important;
}

body.light-theme .workflow-step-node h4,
body.light-theme .workflow-step-node.active h4 {
    color: #0f172a !important;
    font-weight: 800 !important;
}

body.light-theme .workflow-step-node p,
body.light-theme .workflow-step-node.active p {
    color: #334155 !important;
    font-weight: 500 !important;
}

body.light-theme .workflow-step-node .step-badge,
body.light-theme .workflow-step-node.active .step-badge {
    color: #0f172a !important;
    background: rgba(148, 163, 184, 0.2) !important;
    border: 1px solid rgba(100, 116, 139, 0.35) !important;
    font-weight: 800 !important;
}

body.light-theme .workflow-step-node .step-icon-circle,
body.light-theme .workflow-step-node.active .step-icon-circle {
    color: #0f172a !important;
    background: rgba(148, 163, 184, 0.15) !important;
    border: 1px solid rgba(100, 116, 139, 0.3) !important;
}

body.light-theme .workflow-step-node::before,
body.light-theme .workflow-step-node.active::before {
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
}

body.light-theme .workflow-step-node::after,
body.light-theme .workflow-step-node.active::after {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.35) 0%, rgba(0, 102, 255, 0.2) 100%) !important;
    filter: blur(16px) !important;
}

/* Force all inner content children to stay strictly in front of the background rotation */
.workflow-step-node>* {
    position: relative !important;
    z-index: 10 !important;
    transform: translateZ(2px) !important;
}

/* Rotating Gradient Frame (::before) - Pure Cybersecurity Blue Palette */
.workflow-step-node::before {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    margin: auto !important;
    width: calc(100% + 6px) !important;
    height: calc(100% + 6px) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
    z-index: -10 !important;
    transform: translateZ(-2px) rotate(0deg) !important;
    pointer-events: none !important;
    transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Glowing Ambient Blur Backdrop Aura (::after) - Premium Electric Blue Shadow */
.workflow-step-node::after {
    content: "" !important;
    z-index: -20 !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.35) 0%, rgba(0, 102, 255, 0.22) 100%) !important;
    transform: translate3d(0, 0, -5px) scale(0.95) !important;
    filter: blur(18px) !important;
    pointer-events: none !important;
    transition: filter 0.5s ease !important;
}

/* Hover Interactions: 180deg Rotation maintaining stable 100% original card size */
.workflow-step-node:hover::after {
    filter: blur(30px) !important;
}

.workflow-step-node:hover::before {
    transform: translateZ(-2px) rotate(180deg) !important;
}

/* Step Badge, Icon, Title, and Description inside Card */
.workflow-step-node .step-badge {
    font-family: var(--font-cyber) !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    color: #00f2fe !important;
    background: rgba(0, 242, 254, 0.1) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 20px !important;
}

.workflow-step-node .step-icon-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: rgba(0, 242, 254, 0.08) !important;
    border: 1px solid rgba(0, 242, 254, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #00f2fe !important;
    margin: 0.25rem 0 !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.workflow-step-node .step-icon-circle i,
.workflow-step-node .step-icon-circle svg {
    width: 24px !important;
    height: 24px !important;
    transition: color 0.35s ease, stroke 0.35s ease !important;
}

/* Hover State for Step Icon Circle across ALL cards (including Card 1 Consultation / .active) */
.workflow-step-node:hover .step-icon-circle,
.workflow-step-node.active:hover .step-icon-circle,
body.light-theme .workflow-step-node:hover .step-icon-circle,
body.light-theme .workflow-step-node.active:hover .step-icon-circle {
    background: #0066ff !important;
    background-color: #0066ff !important;
    border-color: #40c9ff !important;
    color: #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.6), 0 0 35px rgba(0, 242, 254, 0.4) !important;
    transform: scale(1.12) !important;
}

.workflow-step-node:hover .step-icon-circle i,
.workflow-step-node.active:hover .step-icon-circle i,
body.light-theme .workflow-step-node:hover .step-icon-circle i,
body.light-theme .workflow-step-node.active:hover .step-icon-circle i,
.workflow-step-node:hover .step-icon-circle svg,
.workflow-step-node.active:hover .step-icon-circle svg,
body.light-theme .workflow-step-node:hover .step-icon-circle svg,
body.light-theme .workflow-step-node.active:hover .step-icon-circle svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.workflow-step-node h4 {
    font-family: var(--font-heading) !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 !important;
    letter-spacing: 0.5px !important;
}

.workflow-step-node p {
    font-size: 0.9rem !important;
    color: #cbd5e1 !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ==========================================================================
   13. SUCCESS STATISTICS CARDS EFFECT (Uiverse.io by eslam-hany)
   ========================================================================== */
.stats-counter-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 1.75rem !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 1rem !important;
}

.stat-card {
    position: relative !important;
    width: 100% !important;
    min-height: 220px !important;
    background: #0d1426 !important;
    background-color: #0d1426 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 2rem 1.25rem !important;
    gap: 0.85rem !important;
    border-radius: 15px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    border: 1px solid rgba(0, 242, 254, 0.2) !important;
    transition: all 0.5s !important;
    z-index: 1 !important;
}

/* Light Mode Base for Stat Card - Exact eslam-hany mediumturquoise */
body.light-theme .stat-card {
    background: mediumturquoise !important;
    background-color: #48d1cc !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 10px 25px rgba(72, 209, 204, 0.25) !important;
}

/* Inner content must stay above corner patch expansions */
.stat-card > * {
    position: relative !important;
    z-index: 5 !important;
    transition: all 0.5s !important;
}

/* eslam-hany Uiverse Effect: Corner Patches */
.stat-card::before,
.stat-card::after {
    position: absolute !important;
    content: "" !important;
    width: 20% !important;
    height: 20% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #00f2fe !important;
    transition: all 0.5s !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

/* Top-Right Corner Patch (eslam-hany Uiverse Effect) */
.stat-card::before {
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    border-radius: 0 15px 0 100% !important;
}

/* Bottom-Left Corner Patch (eslam-hany Uiverse Effect) */
.stat-card::after {
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    top: auto !important;
    border-radius: 0 100% 0 15px !important;
}

/* Light Theme Corner Patches (Exact eslam-hany lightblue) */
body.light-theme .stat-card::before,
body.light-theme .stat-card::after {
    background-color: lightblue !important;
    background: #add8e6 !important;
    opacity: 1 !important;
}

/* Hover Interaction: Corner Patches Expand to 100% Full Card Coverage */
.stat-card:hover::before,
.stat-card:hover::after {
    width: 100% !important;
    height: 100% !important;
    border-radius: 15px !important;
    transition: all 0.5s !important;
}

.stat-card:hover::before {
    background-color: #00f2fe !important;
}

.stat-card:hover::after {
    background-color: #7000ff !important;
    opacity: 0.8 !important;
}

body.light-theme .stat-card:hover::before,
body.light-theme .stat-card:hover::after {
    background-color: lightblue !important;
    background: #add8e6 !important;
    opacity: 1 !important;
}

/* Hover Content Styling */
.stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 35px rgba(0, 242, 254, 0.3) !important;
}

body.light-theme .stat-card:hover {
    box-shadow: 0 15px 35px rgba(72, 209, 204, 0.4) !important;
}

.stat-card:hover .about-metric-num,
.stat-card:hover .stat-label {
    color: #ffffff !important;
}

.stat-card:hover .stat-icon {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #0f172a !important;
    transform: scale(1.1) !important;
}

/* Text and Icon styling inside Stat Cards */
.stat-card .stat-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 12px !important;
    background: rgba(0, 242, 254, 0.12) !important;
    border: 1px solid rgba(0, 242, 254, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #00f2fe !important;
    font-size: 1.5rem !important;
    margin-bottom: 0.25rem !important;
}

body.light-theme .stat-card .stat-icon {
    background: rgba(255, 255, 255, 0.35) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    color: #0f172a !important;
}

.stat-card .about-metric-num {
    font-family: var(--font-cyber) !important;
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1 !important;
    letter-spacing: -1px !important;
}

body.light-theme .stat-card .about-metric-num {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
}

.stat-card .stat-label {
    font-family: var(--font-cyber) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
}

body.light-theme .stat-card .stat-label {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   PARTNERS HERO SECTION TYPOGRAPHY OVERRIDE (HIGH-CONTRAST OVER VIDEO)
   ========================================================================== */
.partners-hero-section,
body.light-theme .partners-hero-section {
    position: relative !important;
    background: #04060e !important;
}

/* 1. Badge Pill Over Dark Video */
.partners-hero-section .hero-badge,
body.light-theme .partners-hero-section .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.45rem 1rem !important;
    background: rgba(0, 242, 254, 0.15) !important;
    border: 1px solid rgba(0, 242, 254, 0.5) !important;
    border-radius: 9999px !important;
    color: #00f2fe !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    box-shadow: 0 0 20px rgba(0, 242, 254, 0.3) !important;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8) !important;
}

.partners-hero-section .hero-badge i,
.partners-hero-section .hero-badge svg,
body.light-theme .partners-hero-section .hero-badge i,
body.light-theme .partners-hero-section .hero-badge svg {
    color: #00f2fe !important;
    stroke: #00f2fe !important;
}

/* 2. Main Title Over Dark Video ("Enterprise Security") */
.partners-hero-section .partners-hero-title,
body.light-theme .partners-hero-section .partners-hero-title {
    font-family: var(--font-hero) !important;
    font-size: clamp(3rem, 5.8vw, 4.8rem) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.95), 0 0 35px rgba(0, 210, 255, 0.4) !important;
}

/* 3. Title Accent ("PARTNERSHIPS") - CRYSTAL CLEAR VIBRANT ELECTRIC BLUE */
.partners-hero-section .hero-title-accent,
body.light-theme .partners-hero-section .hero-title-accent {
    display: inline-block !important;
    font-family: var(--font-hero) !important;
    font-size: clamp(3.2rem, 6.2vw, 5.2rem) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #0099ff !important;
    -webkit-text-fill-color: #0099ff !important;
    background: none !important;
    filter: none !important;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.95), 0 0 30px rgba(0, 153, 255, 0.8) !important;
}

/* 4. Subtitle Paragraph ("Partnering with the world's leading cybersecurity vendors...") */
.partners-hero-section .partners-hero-subtitle,
body.light-theme .partners-hero-section .partners-hero-subtitle {
    font-size: 1.15rem !important;
    font-weight: 500 !important;
    color: #e2e8f0 !important;
    max-width: 680px !important;
    margin: 1.25rem auto 2rem auto !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.95), 0 0 15px rgba(0, 0, 0, 0.9) !important;
    line-height: 1.6 !important;
}

/* 5. Secondary Button in Partners Hero Section */
body.light-theme .partners-hero-section .btn-secondary {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #0f172a !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
}

body.light-theme .partners-hero-section .btn-secondary:hover {
    background-color: #ffffff !important;
    color: #0066ff !important;
    box-shadow: 0 10px 30px rgba(0, 242, 254, 0.4) !important;
}

/* ==========================================================================
   PARTNER LOGOS CAROUSEL VISIBILITY FIX (DARK MODE & LIGHT MODE)
   ========================================================================== */
.partner-showcase {
    position: relative !important;
    overflow: hidden !important;
}

.marquee-container {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%) !important;
    padding: 0.75rem 0 !important;
}

.marquee-track {
    display: flex !important;
    gap: 2rem !important;
    align-items: center !important;
    width: max-content !important;
    animation: marqueeScroll 25s linear infinite !important;
}

.marquee-container:hover .marquee-track {
    animation-play-state: paused !important;
}

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

/* Partner Logo Card Capsule Pill */
.partner-logo-card {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 64px !important;
    padding: 0.65rem 1.75rem !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 0 15px rgba(0, 242, 254, 0.1) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
    cursor: pointer !important;
}

body.light-theme .partner-logo-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 102, 255, 0.15) !important;
    box-shadow: 0 8px 24px rgba(0, 102, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

/* Hover effect on logo card */
.partner-logo-card:hover {
    transform: translateY(-4px) scale(1.04) !important;
    border-color: #00f2fe !important;
    box-shadow: 0 12px 30px rgba(0, 242, 254, 0.35), 0 0 20px rgba(0, 242, 254, 0.2) !important;
}

body.light-theme .partner-logo-card:hover {
    border-color: #0066ff !important;
    box-shadow: 0 12px 30px rgba(0, 102, 255, 0.25) !important;
}

/* Partner Logo Images inside Carousel */
.partner-logo-card img {
    height: 38px !important;
    max-height: 38px !important;
    width: auto !important;
    max-width: 140px !important;
    object-fit: contain !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    display: block !important;
    transition: transform 0.3s ease !important;
}

.partner-logo-card:hover img {
    transform: scale(1.05) !important;
}

/* ==========================================================================
   PERIMETER DEVELOPMENT TIMELINE - FINAL ENTERPRISE POLISH PASS
   ========================================================================== */

/* 1. Outer Section Background (Soft Blue-White Gradient for Contrast) */
.timeline-section {
    position: relative !important;
    background: transparent !important;
    padding: 2.5rem 0 !important;
    margin-top: 4.5rem !important;
    overflow: hidden !important;
}

body.light-theme .timeline-section {
    background: radial-gradient(circle at 10% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 90% 50%, rgba(29, 78, 216, 0.07) 0%, transparent 50%),
                linear-gradient(180deg, #f0f7ff 0%, #eef6ff 50%, #f4f8fe 100%) !important;
}

body.dark-theme .timeline-section {
    background: radial-gradient(circle at 10% 50%, rgba(6, 182, 212, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 90% 50%, rgba(29, 78, 216, 0.08) 0%, transparent 50%) !important;
}

/* Badge Header above Timeline */
.timeline-section-badge {
    font-family: var(--font-cyber) !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    color: #06B6D4 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    text-align: center !important;
    margin-bottom: 24px !important;
}

/* 5. Top Horizontal Timeline Year Bar (Spacing +16-20px -> 40px) */
.journey-selector {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 900px !important;
    margin: 0 auto 40px auto !important;
    padding: 0 1rem !important;
}

/* 5. Subtle Vertical Connector Line connecting Timeline Bar to Card */
.journey-selector::after {
    content: '' !important;
    position: absolute !important;
    bottom: -40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 2px !important;
    height: 40px !important;
    background: linear-gradient(180deg, rgba(59, 130, 246, 0.35) 0%, transparent 100%) !important;
    pointer-events: none !important;
}

/* Timeline Track Base Line */
.journey-selector-line {
    position: absolute !important;
    top: 50% !important;
    left: 2rem !important;
    right: 2rem !important;
    height: 2px !important;
    background: rgba(59, 130, 246, 0.2) !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}

body.light-theme .journey-selector-line {
    background: rgba(59, 130, 246, 0.2) !important;
}

body.dark-theme .journey-selector-line {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Active Expanding Progress Line (#1D4ED8 to #06B6D4) */
.journey-selector-progress,
#journey-progress-line {
    position: absolute !important;
    top: 50% !important;
    left: 2rem !important;
    height: 3px !important;
    background: linear-gradient(90deg, #1D4ED8 0%, #06B6D4 100%) !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    transition: width 0.45s ease-out !important;
    width: 0%;
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.5) !important;
}

/* Year Tabs */
.journey-tab {
    position: relative !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.65rem !important;
    z-index: 3 !important;
    padding: 0.5rem 0.75rem !important;
    transition: transform 0.3s ease !important;
}

.journey-tab:hover {
    transform: translateY(-2px) !important;
}

/* Inactive vs Active Tab Dots */
.journey-tab-dot {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid rgba(59, 130, 246, 0.4) !important;
    transition: all 0.35s ease-out !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body.dark-theme .journey-tab-dot {
    background: #0f172a !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
}

.journey-tab.active .journey-tab-dot {
    background: #1D4ED8 !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 16px #1D4ED8, 0 0 24px rgba(6, 182, 212, 0.5) !important;
    transform: scale(1.25) !important;
}

/* Year Labels (Blue only for active year) */
.journey-tab-year {
    font-family: var(--font-cyber) !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    color: #64748b !important;
    transition: color 0.35s ease, font-weight 0.35s ease !important;
    letter-spacing: 1px !important;
}

body.dark-theme .journey-tab-year {
    color: #94a3b8 !important;
}

.journey-tab.active .journey-tab-year {
    color: #1D4ED8 !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

body.dark-theme .journey-tab.active .journey-tab-year {
    color: #06B6D4 !important;
}

/* 1. & 4. Refined Glass Panel Outer Card (Increased Opacity rgba(255,255,255,0.90), Subtle Shadow 0 18px 40px rgba(15,23,42,0.06)) */
.journey-content-wrapper {
    max-width: 1100px !important;
    margin: 0 auto !important;
}

.journey-content-card {
    display: none;
    border-radius: 24px !important;
    padding: 32px 40px !important;
    transition: opacity 0.45s ease-out !important;
}

body.light-theme .journey-content-card {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.06) !important;
}

body.dark-theme .journey-content-card {
    background: rgba(10, 16, 32, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(6, 182, 212, 0.2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}

.journey-content-card.active {
    display: block !important;
}

/* 2-Column Grid Layout (Left 40% SVG, Right 60% Content Column) */
.journey-card-grid {
    display: grid !important;
    grid-template-columns: 40% 60% !important;
    gap: 2.5rem !important;
    align-items: center !important;
}

/* Standardized Illustration Container (Width 420px Max, Height 340px, Flex Center) */
.journey-card-illustration {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 420px !important;
    height: 340px !important;
    margin: 0 auto !important;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%) !important;
    border-radius: 50% !important;
    padding: 0.5rem !important;
}

.journey-card-illustration img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 20px rgba(0, 102, 255, 0.08)) !important;
    transition: transform 0.45s ease-out !important;
}

/* Individual Per-Year Visual Weight Balance Adjustments */
#journey-card-2019 .journey-card-illustration img {
    max-height: 96% !important;
}

#journey-card-2021 .journey-card-illustration img {
    max-height: 98% !important;
}

#journey-card-2023 .journey-card-illustration img {
    max-height: 94% !important;
}

#journey-card-2025 .journey-card-illustration img {
    max-height: 98% !important;
}

#journey-card-2026 .journey-card-illustration img {
    max-height: 94% !important;
}

/* Right Content Column (Max-width 600px for Optimal Readability & Title Fit) */
.journey-card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 600px !important;
    width: 100% !important;
}

/* Stage Badge (Small uppercase, Letter spacing, Blue outline) */
.journey-card-badge {
    font-family: var(--font-cyber) !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #1D4ED8 !important;
    border: 1px solid rgba(29, 78, 216, 0.28) !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 999px !important;
    background: rgba(29, 78, 216, 0.05) !important;
    margin-bottom: 0.85rem !important;
    display: inline-block !important;
}

body.dark-theme .journey-card-badge {
    color: #06B6D4 !important;
    border-color: rgba(6, 182, 212, 0.35) !important;
    background: rgba(6, 182, 212, 0.08) !important;
}

/* 3. Responsive Heading Scale (clamp 42px, 3vw, 48px, Weight 700) */
.journey-card-title {
    font-family: var(--font-heading) !important;
    font-size: clamp(42px, 3vw, 48px) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.22 !important;
    margin-bottom: 0.85rem !important;
    letter-spacing: -0.5px !important;
    word-wrap: break-word !important;
    word-break: normal !important;
}

body.dark-theme .journey-card-title {
    color: #f8fafc !important;
}

/* Description (18px, Line-height 1.8, Max-width 600px) */
.journey-card-text {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.8 !important;
    max-width: 600px !important;
    color: #334155 !important;
    margin-bottom: 1.25rem !important;
    font-weight: 450 !important;
}

body.dark-theme .journey-card-text {
    color: #cbd5e1 !important;
}

/* Feature Highlights Pills */
.journey-card-highlights {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
}

.highlight-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-family: var(--font-cyber) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    background: rgba(59, 130, 246, 0.05) !important;
    border: 1px solid rgba(59, 130, 246, 0.12) !important;
    padding: 0.25rem 0.65rem !important;
    border-radius: 6px !important;
}

body.dark-theme .highlight-pill {
    color: #e2e8f0 !important;
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.2) !important;
}

.highlight-pill i,
.highlight-pill svg {
    width: 12px !important;
    height: 12px !important;
    color: #1D4ED8 !important;
}

body.dark-theme .highlight-pill i,
body.dark-theme .highlight-pill svg {
    color: #06B6D4 !important;
}

/* Responsive Rules */
@media (max-width: 992px) {
    .journey-card-grid {
        grid-template-columns: 1fr !important;
        gap: 1.75rem !important;
    }

    .journey-card-illustration {
        height: 280px !important;
    }

    .journey-card-body {
        align-items: center !important;
        text-align: center !important;
    }

    .journey-content-card {
        padding: 28px !important;
    }
}

@media (max-width: 640px) {
    .journey-selector {
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 1.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .journey-selector-line,
    .journey-selector-progress,
    .journey-selector::after {
        display: none !important;
    }

    .journey-content-card {
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .journey-card-illustration {
        height: 220px !important;
    }
}

/* ==========================================================================
   REUSABLE ENTERPRISE CYBER CARD SECTIONS - FINAL VISUAL POLISH PASS
   ========================================================================== */

/* 1. Section Backgrounds (Light Mode Enterprise Gradient & Soft Corner Radial Glows) */
.local-ops-section {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
}

body.light-theme .local-ops-section {
    background: #EEF4FA !important;
    background-image: radial-gradient(circle at center, rgba(0, 170, 255, 0.04) 0%, transparent 70%),
                      linear-gradient(180deg, #F3F7FB 0%, #EEF4FA 100%) !important;
    padding: 5rem 0 !important;
    border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
}

body.light-theme .why-partner-section,
body.light-theme .services-section:has(.why-partner-grid) {
    position: relative !important;
    background: linear-gradient(180deg, #F7FBFF 0%, #EEF5FF 100%) !important;
    background-image: radial-gradient(circle at 10% 20%, rgba(6, 182, 212, 0.04) 0%, transparent 40%),
                      radial-gradient(circle at 90% 80%, rgba(29, 78, 216, 0.04) 0%, transparent 40%),
                      linear-gradient(180deg, #F7FBFF 0%, #EEF5FF 100%) !important;
    padding: 4.5rem 0 !important;
    border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
}

body.dark-theme .local-ops-section,
body.dark-theme .why-partner-section,
body.dark-theme .services-section:has(.why-partner-grid) {
    background: #08111F !important;
    border-top: 1px solid rgba(6, 182, 212, 0.15) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15) !important;
}

/* Spacing Adjustments */
.local-ops-section .section-header,
.services-section:has(.why-partner-grid) .section-header {
    margin-bottom: 4rem !important; /* +12px increased spacing */
}

.ops-process-grid,
.why-partner-grid {
    gap: 2.25rem 2rem !important; /* +12-16px row spacing */
}

/* 2. & 3. Reusable Enterprise Card Core Sizing & Off-White Background */
.cyber-3d-card {
    border-radius: 20px !important;
    border: 1px solid rgba(0, 150, 255, 0.22) !important;
    background: #FCFDFF !important;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
    transition: transform 280ms ease,
                box-shadow 280ms ease,
                border-color 280ms ease !important;
    will-change: transform, box-shadow, border-color !important;
}

body.dark-theme .cyber-3d-card {
    background: #111C2D !important;
    border: 1px solid rgba(0, 180, 255, 0.25) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35) !important;
}

/* 8. Elegant Hover State (translateY(-8px), Elevated Shadow, Crisp Accent Border) */
.cyber-3d-card-container:hover .cyber-3d-card {
    transform: translateY(-8px) !important;
    border-color: rgba(0, 160, 255, 0.5) !important;
    box-shadow: 0 28px 55px rgba(15, 23, 42, 0.12) !important;
}

body.dark-theme .cyber-3d-card-container:hover .cyber-3d-card {
    border-color: rgba(0, 210, 255, 0.6) !important;
    box-shadow: 0 28px 55px rgba(0, 0, 0, 0.45) !important;
}

/* Disable 3D Tilt / Continuous Rotations */
.cyber-3d-canvas {
    transform: none !important;
    transition: none !important;
}

/* Corner Brackets Refinement */
.corner-elements span {
    border-color: rgba(0, 150, 255, 0.3) !important;
    transition: border-color 280ms ease !important;
}

body.dark-theme .corner-elements span {
    border-color: rgba(0, 210, 255, 0.35) !important;
}

.cyber-3d-card-container:hover .corner-elements span {
    border-color: #0077CC !important;
}

body.dark-theme .cyber-3d-card-container:hover .corner-elements span {
    border-color: #00C2FF !important;
}

/* Suppress Unnecessary Decorative Noise Elements */
.card-particles,
.scan-line,
.glowing-elements,
.cyber-lines,
.card-glare {
    display: none !important;
}

/* 5. Enterprise Icon Container Styling */
.process-icon-wrapper,
.why-icon-wrapper {
    width: 50px !important;
    height: 50px !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, #EEF8FF 0%, #DFF2FF 100%) !important;
    border: 1px solid rgba(0, 150, 255, 0.25) !important;
    box-shadow: 0 8px 18px rgba(0, 150, 255, 0.12) !important;
    color: #0077CC !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 280ms ease, box-shadow 280ms ease !important;
}

body.dark-theme .process-icon-wrapper,
body.dark-theme .why-icon-wrapper {
    background: linear-gradient(180deg, rgba(0, 194, 255, 0.15) 0%, rgba(0, 194, 255, 0.06) 100%) !important;
    border: 1px solid rgba(0, 194, 255, 0.3) !important;
    box-shadow: 0 8px 18px rgba(0, 194, 255, 0.15) !important;
    color: #00C2FF !important;
}

.process-icon-wrapper i,
.process-icon-wrapper svg,
.why-icon-wrapper i,
.why-icon-wrapper svg {
    width: 22px !important;
    height: 22px !important;
    color: #0077CC !important;
}

body.dark-theme .process-icon-wrapper i,
body.dark-theme .process-icon-wrapper svg,
body.dark-theme .why-icon-wrapper i,
body.dark-theme .why-icon-wrapper svg {
    color: #00C2FF !important;
}

/* Header Badge / Phase Label Color */
.process-card-header > div:last-child {
    color: #0077CC !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
}

body.dark-theme .process-card-header > div:last-child {
    color: #00C2FF !important;
}

/* 6. Typography Contrast & Hierarchy */
.cyber-3d-card h3,
.cyber-3d-card .service-story-title {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body.dark-theme .cyber-3d-card h3,
body.dark-theme .cyber-3d-card .service-story-title {
    color: #F8FAFC !important;
}

.cyber-3d-card p,
.cyber-3d-card .service-story-desc {
    color: #334155 !important;
    line-height: 1.7 !important;
}

body.dark-theme .cyber-3d-card p,
body.dark-theme .cyber-3d-card .service-story-desc {
    color: #CBD5E1 !important;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .cyber-3d-card,
    .process-icon-wrapper,
    .why-icon-wrapper {
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   GLOBAL SECURITY VENDOR ECOSYSTEM CARDS - FRAMER / VERCEL / LINEAR LAYERED UI
   ========================================================================== */

/* 1. Vendor Ecosystem Section Container & Background */
#partner-grid-section {
    position: relative !important;
    background: linear-gradient(180deg, #EEF4FB 0%, #F4F8FD 50%, #F8FBFF 100%) !important;
    padding: 5.5rem 0 !important;
    border-top: 1px solid rgba(59, 130, 246, 0.15) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.15) !important;
}

body.dark-theme #partner-grid-section {
    background: #08111F !important;
    border-top: 1px solid rgba(6, 182, 212, 0.15) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15) !important;
}

/* 2. Multi-Layered Blended Radial Surface Base */
.partner-feature-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    background: #FCFDFE !important;
    background-image: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.95) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.05) 0%, transparent 60%),
                      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 60%),
                      linear-gradient(180deg, #FFFFFF 0%, #FAFCFF 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 20px 45px rgba(15, 23, 42, 0.08),
                0 8px 24px rgba(59, 130, 246, 0.05) !important;
    padding: 0 !important;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 300ms ease,
                box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    will-change: transform, border-color, box-shadow !important;
    cursor: pointer !important;
}

body.dark-theme .partner-feature-card {
    background: #0F172A !important;
    background-image: radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
                      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
                      linear-gradient(180deg, #0F172A 0%, #13253B 100%) !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                0 20px 45px rgba(0, 0, 0, 0.45) !important;
}

/* Top Area & Content Inner Padding Wrapper */
.partner-card-header,
.partner-card-title,
.partner-card-desc,
.partner-certs-row {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

.partner-card-header {
    padding-top: 2rem !important;
    padding-bottom: 0.5rem !important;
}

.partner-certs-row {
    padding-bottom: 1.5rem !important;
}

/* 3. Vendor Accent Mesh Layer (5%-10% Opacity & Framer Motion Loop) */
.partner-feature-card .card-glow-bg {
    position: absolute !important;
    top: -20% !important;
    left: -20% !important;
    width: 140% !important;
    height: 140% !important;
    background: radial-gradient(circle at 30% 20%, rgba(6, 182, 212, 0.10) 0%, transparent 50%),
                radial-gradient(circle at 80% 60%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.06) 0%, transparent 50%) !important;
    filter: blur(28px) !important;
    opacity: 0.7 !important;
    pointer-events: none !important;
    animation: framerMeshMove 18s ease-in-out infinite alternate !important;
    z-index: 0 !important;
}

@keyframes framerMeshMove {
    0% { transform: scale(1) translate(0, 0); }
    50% { transform: scale(1.08) translate(3%, 3%); }
    100% { transform: scale(1) translate(0, 0); }
}

/* Vendor Accent Color Mapping */
.partner-feature-card[data-partner="checkpoint"] .card-glow-bg {
    background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(37, 99, 235, 0.08) 0%, transparent 50%) !important;
}

.partner-feature-card[data-partner="claroty"] .card-glow-bg {
    background: radial-gradient(circle at 30% 20%, rgba(147, 51, 234, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(168, 85, 247, 0.08) 0%, transparent 50%) !important;
}

.partner-feature-card[data-partner="tx1"] .card-glow-bg {
    background: radial-gradient(circle at 30% 20%, rgba(225, 29, 72, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(244, 63, 94, 0.08) 0%, transparent 50%) !important;
}

.partner-feature-card[data-partner="hp-aruba"] .card-glow-bg {
    background: radial-gradient(circle at 30% 20%, rgba(249, 115, 22, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(251, 146, 60, 0.08) 0%, transparent 50%) !important;
}

.partner-feature-card[data-partner="engenius"] .card-glow-bg {
    background: radial-gradient(circle at 30% 20%, rgba(6, 182, 212, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(14, 165, 233, 0.08) 0%, transparent 50%) !important;
}

/* 4. Bottom Surface Panel (~35% Surface Panel) */
.partner-card-footer {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 1.25rem 2rem !important;
    background: linear-gradient(180deg, #F5FAFF 0%, #E8F5FF 100%) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.18) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transition: background 300ms ease, border-color 300ms ease !important;
}

body.dark-theme .partner-card-footer {
    background: linear-gradient(180deg, #15263B 0%, #0F1F31 100%) !important;
    border-top: 1px solid rgba(56, 189, 248, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* 5. Premium Floating Brand Badge Logo Container (Light & Dark Mode Shared) */
.partner-card-logo-container {
    position: relative !important;
    z-index: 3 !important;
    width: 140px !important;
    height: 64px !important;
    background: #FFFFFF !important; /* Pure white background in both light and dark mode for 100% logo visibility */
    border: 1px solid rgba(0, 150, 255, 0.12) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 25px rgba(0, 120, 255, 0.08) !important;
    overflow: hidden !important;
    padding: 0.75rem 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 280ms ease-out, box-shadow 280ms ease-out, border-color 280ms ease-out !important;
    will-change: transform, box-shadow, border-color !important;
}

body.dark-theme .partner-card-logo-container {
    background: #FFFFFF !important; /* Pure white floating badge prevents dark mode logo clipping/invisible issues */
    border: 1px solid rgba(0, 150, 255, 0.18) !important;
    box-shadow: 0 10px 25px rgba(0, 120, 255, 0.12) !important;
}

.partner-card-logo-container img {
    max-width: 85% !important;
    max-height: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 280ms ease-out !important;
}

/* Hover Lift 6px + Scale 1.03 + Soft Cyan Glow 0 0 30px rgba(0,180,255,0.18) */
.partner-feature-card:hover .partner-card-logo-container {
    transform: translateY(-6px) scale(1.03) !important;
    border-color: rgba(0, 180, 255, 0.35) !important;
    box-shadow: 0 14px 30px rgba(0, 120, 255, 0.14),
                0 0 30px rgba(0, 180, 255, 0.18) !important;
}

/* 6. Cursor Spotlight (4-6% Opacity) */
.partner-feature-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: radial-gradient(180px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(56, 189, 248, 0.05) 0%, transparent 80%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 300ms ease !important;
    z-index: 2 !important;
}

.partner-feature-card:hover::after {
    opacity: 1 !important;
}

/* 7. Hover Sequence (250-350ms) */
.partner-feature-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    border-color: rgba(56, 189, 248, 0.45) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1),
                0 28px 60px rgba(15, 23, 42, 0.12),
                0 14px 35px rgba(56, 189, 248, 0.08) !important;
}

body.dark-theme .partner-feature-card:hover {
    border-color: rgba(56, 189, 248, 0.6) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 28px 60px rgba(0, 0, 0, 0.55) !important;
}

.partner-feature-card:hover .partner-card-footer {
    background: linear-gradient(180deg, #EDF7FF 0%, #E0F2FE 100%) !important;
}

body.dark-theme .partner-feature-card:hover .partner-card-footer {
    background: linear-gradient(180deg, #1E3A5F 0%, #132845 100%) !important;
}

/* 8. Single Logo Container Light Sweep (800ms Pass) */
.partner-feature-card .card-light-sweep {
    position: absolute !important;
    top: 0 !important;
    left: -150% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%) !important;
    transform: skewX(-25deg) !important;
    pointer-events: none !important;
    z-index: 4 !important;
}

.partner-feature-card:hover .card-light-sweep {
    animation: logoLightSweep 800ms ease-out 1 !important;
}

@keyframes logoLightSweep {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* 9. Tier Pill Badge & Compliance Tags Glass Upgrade */
.partner-tier-pill {
    position: relative !important;
    z-index: 3 !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 0.3rem 0.75rem !important;
    border-radius: 6px !important;
    background: rgba(56, 189, 248, 0.08) !important;
    border: 1px solid rgba(56, 189, 248, 0.22) !important;
}

.partner-certs-row .cert-pill {
    position: relative !important;
    z-index: 3 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04) !important;
    color: #475569 !important;
    font-weight: 600 !important;
    transition: transform 250ms ease, border-color 250ms ease !important;
}

body.dark-theme .partner-certs-row .cert-pill {
    background: rgba(30, 41, 59, 0.7) !important;
    border-color: rgba(71, 85, 105, 0.4) !important;
    color: #94A3B8 !important;
}

.partner-feature-card:hover .cert-pill {
    transform: translateY(-2px) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

/* 10. CTA Button Motion & Color Accent */
.btn-card-action {
    transition: color 250ms ease !important;
}

.btn-card-action i,
.btn-card-action svg {
    transition: transform 250ms ease !important;
}

.partner-feature-card:hover .btn-card-action {
    color: #0284C7 !important;
}

body.dark-theme .partner-feature-card:hover .btn-card-action {
    color: #38BDF8 !important;
}

.partner-feature-card:hover .btn-card-action i,
.partner-feature-card:hover .btn-card-action svg {
    transform: translateX(6px) !important;
}

/* 11. Typography Hierarchy Contrast */
.partner-card-title {
    position: relative !important;
    z-index: 3 !important;
    color: #0F172A !important;
    font-weight: 700 !important;
}

body.dark-theme .partner-card-title {
    color: #F8FAFC !important;
}

.partner-card-desc {
    position: relative !important;
    z-index: 3 !important;
    color: #475569 !important;
    line-height: 1.65 !important;
}

body.dark-theme .partner-card-desc {
    color: #CBD5E1 !important;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
    .partner-feature-card,
    .partner-card-logo-container,
    .partner-card-logo-container img,
    .btn-card-action i,
    .card-light-sweep {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   TRUSTED TECHNOLOGY PARTNERS (COMPACT LOGO CAROUSEL SHOWCASE)
   ========================================================================== */

/* 1. Section Container & Compact Height (180-220px Maximum Target Height) */
.partner-showcase {
    position: relative !important;
    width: 100% !important;
    padding: 20px 0 20px 0 !important;
    min-height: 180px !important;
    max-height: 220px !important;
    background: #EEF4FA !important;
    background-image: radial-gradient(circle at center, rgba(0, 170, 255, 0.05) 0%, transparent 70%),
                      linear-gradient(180deg, #F3F7FB 0%, #EEF4FA 100%) !important;
    border-top: 1px solid rgba(59, 130, 246, 0.12) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.12) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.dark-theme .partner-showcase {
    background: #0B1528 !important;
    background-image: radial-gradient(circle at center, rgba(6, 182, 212, 0.08) 0%, transparent 70%),
                      linear-gradient(180deg, #091120 0%, #0E1A30 100%) !important;
    border-top: 1px solid rgba(6, 182, 212, 0.15) !important;
    border-bottom: 1px solid rgba(6, 182, 212, 0.15) !important;
}

.partner-showcase-bg-glow {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 600px !important;
    height: 150px !important;
    background: radial-gradient(ellipse at center, rgba(56, 189, 248, 0.08) 0%, transparent 70%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* 2. Title Typography (24px spacing to logo carousel) */
.partner-slider-title {
    text-align: center !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #0F172A !important;
    margin-bottom: 24px !important;
    position: relative !important;
    z-index: 2 !important;
    text-transform: uppercase !important;
}

body.dark-theme .partner-slider-title {
    color: #F8FAFC !important;
}

/* 3. Marquee Infinite Loop Track */
.marquee-container {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%) !important;
}

.marquee-track {
    display: flex !important;
    align-items: center !important;
    gap: 1.75rem !important;
    width: max-content !important;
    animation: marqueeScroll 38s linear infinite !important;
    will-change: transform !important;
}

.marquee-track:hover {
    animation-play-state: paused !important;
}

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

/* 4. White Logo Capsules (220-240px width, 80-90px height, 18px radius) */
.partner-logo-card {
    position: relative !important;
    width: 230px !important;
    height: 84px !important;
    background: #FFFFFF !important; /* Pure white background in BOTH light and dark modes for 100% logo visibility */
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 20px rgba(0, 120, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.75rem 1.5rem !important;
    cursor: pointer !important;
    transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease !important;
    will-change: transform, box-shadow, border-color !important;
    flex-shrink: 0 !important;
}

body.dark-theme .partner-logo-card {
    background: #FFFFFF !important; /* Always white capsule in dark mode as requested */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 20px rgba(0, 120, 255, 0.12) !important;
}

.partner-logo-card img {
    max-width: 75% !important;
    max-height: 70% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    transition: transform 300ms ease !important;
}

/* Hover Lift 6px + Scale 1.03 */
.partner-logo-card:hover {
    transform: translateY(-6px) scale(1.03) !important;
    border-color: rgba(0, 180, 255, 0.35) !important;
    box-shadow: 0 14px 30px rgba(0, 120, 255, 0.16) !important;
}

/* ==========================================================================
   MASTER PROMPT — CINEMATIC PARALLAX & MICRO-INTERACTION ENGINE
   ========================================================================== */

/* 1. Reusable Cinematic Parallax Depth System */
.parallax-container {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.parallax-layer-bg {
    position: absolute;
    inset: -10%;
    z-index: 0;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.parallax-layer-mid {
    position: absolute;
    inset: -5%;
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.1s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.parallax-layer-fg {
    position: relative;
    z-index: 2;
    will-change: transform;
}

/* Atmospheric Ambient Vignette & Gradient Overlays */
.cinematic-vignette-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle at 50% 30%, transparent 40%, rgba(5, 8, 20, 0.75) 100%);
}

body.light-theme .cinematic-vignette-overlay {
    background: radial-gradient(circle at 50% 30%, transparent 40%, rgba(244, 248, 252, 0.75) 100%);
}

/* 2. Scroll-Linked Viewport Reveal Effects */
.scroll-reveal {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
    transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }

/* 3. High-End Micro-Interactions & Magnetic Hover Effects */
.magnetic-btn {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.magnetic-btn:hover {
    box-shadow: 0 12px 35px rgba(0, 210, 255, 0.35) !important;
}

/* 4. Motion Accessibility Support */
@media (prefers-reduced-motion: reduce) {
    .parallax-layer-bg,
    .parallax-layer-mid,
    .parallax-layer-fg {
        transform: none !important;
        transition: none !important;
    }

    .scroll-reveal,
    .scroll-reveal-left,
    .scroll-reveal-right {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   CYVAULT PREMIUM EXPERIENCE LAYER v1
   Focus: restraint, depth, cinematic motion, enterprise credibility
   ========================================================================== */

/* Cleaner typography: fewer visual voices */
:root {
    --font-hero: 'Space Grotesk', 'Outfit', sans-serif;
    --font-cyber: 'Chakra Petch', sans-serif;
    --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reduce global "cyber template" intensity */
.cyber-ambient-background .cyber-grid-overlay {
    opacity: 0.14;
}
.cyber-ambient-background .noise-overlay {
    opacity: 0.035;
}
.aurora-orb {
    opacity: 0.45;
}
.scanline-overlay,
.laser-scanner-line {
    opacity: 0.18 !important;
}

/* More editorial headings */
.section-title {
    letter-spacing: -0.035em;
    text-shadow: none !important;
}
.section-title span {
    filter: none !important;
}
.hero-title,
.hero-title-accent {
    letter-spacing: -0.025em;
    text-shadow: 0 12px 45px rgba(0,0,0,.35) !important;
    filter: none !important;
}

/* Softer buttons and cards */
.btn-primary,
.btn-secondary {
    transition: transform .45s var(--premium-ease), box-shadow .45s var(--premium-ease), border-color .45s var(--premium-ease), background .45s var(--premium-ease) !important;
}
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
}

.partner-logo-card,
.service-card,
.bento-card,
.contact-card,
.tech-detail-icon-card {
    box-shadow: 0 18px 50px rgba(0,0,0,.16);
}
.partner-logo-card::before {
    opacity: .35 !important;
}
.partner-logo-card:hover {
    box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;
}

/* -------------------- About: Digital Twin -------------------- */

.about-digital-twin {
    --twin-mx: 0;
    --twin-my: 0;
    position: relative !important;
    min-height: 520px;
    aspect-ratio: auto !important;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(0,210,255,.16) !important;
    border-radius: 1.35rem !important;
    background:
        radial-gradient(circle at 50% 48%, rgba(0,210,255,.11), transparent 34%),
        radial-gradient(circle at 80% 15%, rgba(0,102,255,.11), transparent 30%),
        linear-gradient(145deg, #07101f 0%, #040914 55%, #02050c 100%);
    box-shadow:
        0 35px 80px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.04);
    transform-style: preserve-3d;
}

.digital-twin-atmosphere {
    position: absolute;
    inset: -30%;
    z-index: -2;
    background:
        radial-gradient(circle at 30% 45%, rgba(0,210,255,.13), transparent 22%),
        radial-gradient(circle at 72% 30%, rgba(0,102,255,.12), transparent 25%);
    filter: blur(35px);
    transform: translate3d(calc(var(--twin-mx) * -12px), calc(var(--twin-my) * -8px), 0);
    transition: transform .7s var(--premium-ease);
}

.digital-twin-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .2;
    background-image:
        linear-gradient(rgba(0,210,255,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,210,255,.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
    transform: translate3d(calc(var(--twin-mx) * -4px), calc(var(--twin-my) * -3px), 0);
    transition: transform .7s var(--premium-ease);
}

.digital-twin-header {
    position: absolute;
    top: 1.15rem;
    left: 1.25rem;
    right: 1.25rem;
    z-index: 8;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    pointer-events: none;
}
.digital-twin-kicker,
.digital-twin-footer,
.digital-node small,
.digital-twin-readout,
.digital-twin-status {
    font-family: var(--font-cyber);
    letter-spacing: .09em;
    text-transform: uppercase;
}
.digital-twin-kicker {
    display: block;
    color: rgba(255,255,255,.55);
    font-size: .56rem;
    margin-bottom: .25rem;
}
.digital-twin-header strong {
    color: #f8fbff;
    font-size: .82rem;
    letter-spacing: .08em;
}
.digital-twin-status {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #bfffe8;
    font-size: .58rem;
}
.digital-twin-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #35e39a;
    box-shadow: 0 0 14px rgba(53,227,154,.8);
    animation: twinStatusPulse 2.4s ease-in-out infinite;
}

@keyframes twinStatusPulse {
    0%,100% { opacity:.55; transform:scale(.85); }
    50% { opacity:1; transform:scale(1.1); }
}

.digital-twin-stage {
    position: absolute;
    inset: 3.4rem .35rem 3rem;
    transform: translate3d(calc(var(--twin-mx) * 7px), calc(var(--twin-my) * 5px), 0);
    transition: transform .65s var(--premium-ease);
    will-change: transform;
}

.digital-twin-connections {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translate3d(calc(var(--twin-mx) * 3px), calc(var(--twin-my) * 2px), 0);
}
.twin-line {
    fill: none;
    stroke: url(#twinLine);
    stroke-width: 1.5;
    stroke-dasharray: 6 10;
    animation: twinFlow 5s linear infinite;
}
.twin-line.threat-route {
    stroke: rgba(255,160,90,.55);
    stroke-dasharray: 3 11;
    animation-duration: 2.2s;
}
@keyframes twinFlow {
    to { stroke-dashoffset: -64; }
}
.twin-pulse {
    fill: #00d2ff;
    filter: url(#twinGlow);
    opacity: .7;
    animation: twinNodePulse 2.8s ease-in-out infinite;
}
.p2 { animation-delay: .5s; }
.p3 { animation-delay: 1s; }
.p4 { animation-delay: 1.5s; }
@keyframes twinNodePulse {
    0%,100% { r: 3; opacity: .35; }
    50% { r: 6; opacity: 1; }
}

.digital-node {
    position: absolute;
    width: 150px;
    min-height: 72px;
    padding: .8rem .9rem;
    border: 1px solid rgba(0,210,255,.18);
    border-radius: .8rem;
    background: linear-gradient(145deg, rgba(14,28,48,.88), rgba(4,10,19,.72));
    backdrop-filter: blur(10px);
    box-shadow: 0 18px 40px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
    transform:
        translate3d(calc(var(--twin-mx) * 3px), calc(var(--twin-my) * 3px), 0);
    transition: transform .5s var(--premium-ease), border-color .4s ease, box-shadow .4s ease;
}
.digital-node:hover {
    border-color: rgba(0,210,255,.45);
    box-shadow: 0 20px 50px rgba(0,0,0,.32), 0 0 30px rgba(0,210,255,.08);
}
.node-cloud { top: 2%; left: 50%; transform: translateX(-50%); }
.node-it { left: 2%; top: 20%; }
.node-ot { left: 2%; bottom: 14%; }
.node-edge { right: 2%; bottom: 14%; }

.node-icon {
    display: block;
    color: #8eeaff;
    font-size: 1.15rem;
    line-height: 1;
    margin-bottom: .45rem;
}
.node-label {
    display: block;
    color: #f6fbff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.digital-node small {
    display: block;
    color: rgba(203,213,225,.5);
    font-size: .48rem;
    margin-top: .2rem;
}

.digital-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) translate3d(calc(var(--twin-mx) * 5px), calc(var(--twin-my) * 5px), 0);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,210,255,.15), rgba(3,8,18,.72) 60%);
    box-shadow: 0 0 70px rgba(0,210,255,.12);
}
.core-shield {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(0,210,255,.55);
    border-radius: 14px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    background: linear-gradient(145deg, rgba(0,210,255,.16), rgba(0,102,255,.18));
    box-shadow: 0 0 30px rgba(0,210,255,.14);
}
.digital-core > span {
    margin-top: .45rem;
    font-family: var(--font-heading);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
}
.digital-core > small {
    margin-top: .12rem;
    color: rgba(203,213,225,.52);
    font-family: var(--font-cyber);
    font-size: .42rem;
    letter-spacing: .1em;
}
.core-ring {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(0,210,255,.12);
    border-radius: 50%;
}
.ring-two { inset: 18px; border-color: rgba(0,210,255,.16); }
.ring-three { inset: 32px; border-color: rgba(0,102,255,.18); }
.ring-one { animation: twinRotate 18s linear infinite; border-style: dashed; }
.ring-two { animation: twinRotateReverse 13s linear infinite; border-style: dotted; }
@keyframes twinRotate { to { transform: rotate(360deg); } }
@keyframes twinRotateReverse { to { transform: rotate(-360deg); } }

.digital-threat {
    position: absolute;
    right: 15%;
    top: 54%;
    display: flex;
    align-items: center;
    gap: .4rem;
    color: #ffb07a;
    font-family: var(--font-cyber);
    font-size: .48rem;
    letter-spacing: .08em;
    opacity: .9;
}
.digital-threat span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff8a4c;
    box-shadow: 0 0 18px rgba(255,138,76,.85);
    animation: threatPulse 1.6s ease-in-out infinite;
}
@keyframes threatPulse {
    0%,100% { transform: scale(.7); opacity: .45; }
    50% { transform: scale(1.15); opacity: 1; }
}

.digital-twin-readout {
    position: absolute;
    right: 2%;
    top: 14%;
    width: 150px;
    padding: .7rem .75rem;
    border: 1px solid rgba(53,227,154,.14);
    border-radius: .65rem;
    background: rgba(4,10,18,.62);
    backdrop-filter: blur(8px);
    color: rgba(203,213,225,.55);
    font-size: .45rem;
}
.digital-twin-readout strong {
    display: block;
    color: #aef5d2;
    font-size: .65rem;
    margin: .18rem 0 .4rem;
}
.readout-bar {
    height: 3px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255,255,255,.07);
}
.readout-bar i {
    display: block;
    width: 96%;
    height: 100%;
    background: linear-gradient(90deg, #35e39a, #00d2ff);
    box-shadow: 0 0 10px rgba(53,227,154,.4);
}

.digital-twin-footer {
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1rem;
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    color: rgba(203,213,225,.42);
    font-size: .42rem;
}
.digital-twin-footer span {
    white-space: nowrap;
}

@media (max-width: 900px) {
    .about-digital-twin { min-height: 470px; }
    .digital-node { width: 125px; }
    .digital-twin-readout { width: 130px; }
}
@media (max-width: 640px) {
    .about-digital-twin { min-height: 420px; }
    .digital-node { width: 108px; min-height: 64px; padding: .6rem; }
    .node-label { font-size: .57rem; }
    .digital-node small { font-size: .38rem; }
    .node-cloud { top: 1%; }
    .node-it { left: 1%; top: 25%; }
    .node-ot { left: 1%; bottom: 18%; }
    .node-edge { right: 1%; bottom: 18%; }
    .digital-core { width: 118px; height: 118px; }
    .core-shield { width: 40px; height: 40px; }
    .digital-twin-readout { display: none; }
    .digital-threat { right: 8%; top: 56%; }
    .digital-twin-footer { font-size: .36rem; }
    .digital-twin-footer span:nth-child(2) { display: none; }
}

/* Reduce decorative motion on reduced-motion systems */
@media (prefers-reduced-motion: reduce) {
    .twin-line,
    .twin-pulse,
    .ring-one,
    .ring-two,
    .digital-twin-status i,
    .digital-threat span {
        animation: none !important;
    }
}

/* ==========================================================================
   CYVAULT ULTRA-PREMIUM V2
   Art direction: enterprise technology, depth, restraint, meaningful motion
   ========================================================================== */

/* --- ABOUT: use the available horizontal space instead of leaving a dead zone --- */
.about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(520px, .95fr) !important;
    gap: 4.5rem !important;
    align-items: stretch !important;
    margin-bottom: 2.75rem !important;
}
.about-story-copy {
    justify-content: center;
    gap: 1.15rem !important;
    min-height: 460px;
    padding: 1rem 0;
}
.about-eyebrow {
    font-family: var(--font-cyber);
    font-size: .62rem;
    letter-spacing: .18em;
    color: var(--accent-cyan);
    text-transform: uppercase;
    opacity: .78;
}
.about-pillar-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: .75rem;
    margin-top: .45rem;
}
.about-pillar {
    display:flex;
    align-items:flex-start;
    gap:.65rem;
    padding:.85rem .8rem;
    border:1px solid rgba(255,255,255,.07);
    border-radius:.8rem;
    background:linear-gradient(145deg,rgba(14,24,43,.62),rgba(5,10,20,.42));
    transition:transform .45s var(--premium-ease), border-color .45s ease, background .45s ease;
}
.about-pillar:hover {
    transform:translateY(-4px);
    border-color:rgba(0,210,255,.25);
    background:linear-gradient(145deg,rgba(14,31,53,.78),rgba(5,10,20,.52));
}
.about-pillar-icon {
    flex:0 0 30px;
    width:30px;height:30px;
    display:grid;place-items:center;
    color:var(--accent-cyan);
    border:1px solid rgba(0,210,255,.18);
    border-radius:.55rem;
    background:rgba(0,210,255,.06);
}
.about-pillar-icon svg { width:15px;height:15px; }
.about-pillar strong {
    display:block;
    font-size:.72rem;
    color:var(--text-primary);
    line-height:1.2;
}
.about-pillar small {
    display:block;
    margin-top:.3rem;
    color:var(--text-muted);
    font-size:.56rem;
    line-height:1.35;
}
.about-trust-line {
    display:flex;
    flex-wrap:wrap;
    gap:1.2rem;
    margin-top:.35rem;
    color:rgba(203,213,225,.5);
    font-family:var(--font-cyber);
    font-size:.55rem;
    letter-spacing:.1em;
    text-transform:uppercase;
}
.about-trust-line span { display:inline-flex;align-items:center;gap:.35rem; }
.about-trust-line svg { width:12px;height:12px;color:#35e39a; }

.about-digital-twin {
    min-height:460px !important;
    height:100%;
}
.digital-twin-stage { inset:3.25rem .3rem 2.75rem !important; }
.timeline-section { margin-top:1.5rem !important; padding-top:2rem !important; }

/* --- HOME: premium, less "game HUD" --- */
.hero-section .scanline-overlay { opacity:.08 !important; }
.hero-section .noise-overlay { opacity:.025 !important; }
.hero-badge {
    letter-spacing:.08em !important;
    box-shadow:0 10px 30px rgba(0,0,0,.18) !important;
}
.hero-stats {
    border-top:1px solid rgba(255,255,255,.08);
    padding-top:1.2rem;
}
.hero-stat-number {
    letter-spacing:.02em !important;
    text-shadow:none !important;
}
.hero-stat-label { color:rgba(203,213,225,.52) !important; }
.cyber-hud-panel {
    border-color:rgba(0,210,255,.14) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04) !important;
    background:linear-gradient(145deg,rgba(7,16,31,.76),rgba(3,7,15,.72)) !important;
    backdrop-filter:blur(18px) !important;
}
.hud-metric-card {
    box-shadow:none !important;
}
.hud-diagnostics-console {
    border-color:rgba(255,255,255,.06) !important;
}

/* --- SERVICES: reduce the "forever scroll" feeling --- */
.services-scroll-wrapper { height:520vh !important; }
.service-stack-card {
    box-shadow:0 30px 80px rgba(0,0,0,.28) !important;
}
.visual-glass-overlay {
    backdrop-filter:blur(8px);
    background:linear-gradient(90deg,rgba(2,7,15,.72),rgba(2,7,15,.2)) !important;
    border-color:rgba(255,255,255,.08) !important;
}
.seq-stats .story-stat-card {
    background:rgba(255,255,255,.025) !important;
    border-color:rgba(255,255,255,.07) !important;
}

/* --- PARTNERS MAIN PAGE: calm the hero and cards --- */
.partners-hero-section {
    min-height:68vh !important;
    padding:7rem 0 4rem !important;
}
.partners-hero-section .laser-scanner-line { opacity:.14 !important; }
.partners-hero-section .scanline-overlay { opacity:.06 !important; }
.partner-feature-card {
    transition:transform .6s var(--premium-ease), border-color .4s ease, box-shadow .6s var(--premium-ease) !important;
}
.partner-feature-card:hover {
    transform:translateY(-8px) !important;
}
.partner-certs-row {
    gap:.4rem !important;
}
.cert-pill {
    font-family:var(--font-cyber);
    font-size:.48rem !important;
    letter-spacing:.07em;
    opacity:.7;
}

/* --- PARTNER DETAIL PAGES: vendor-specific visual identity --- */
.premium-vendor-hero {
    min-height:68vh !important;
    padding:7rem 0 5rem !important;
    background-position:center right !important;
    background-size:cover !important;
}
.premium-vendor-hero .partner-hero-cinematic-overlay {
    background:
        linear-gradient(90deg,rgba(3,7,17,.97) 0%,rgba(3,7,17,.83) 35%,rgba(3,7,17,.38) 68%,rgba(3,7,17,.55) 100%),
        linear-gradient(180deg,rgba(3,7,17,.2) 0%,rgba(3,7,17,.1) 55%,#070d1e 100%) !important;
}
.vendor-hero-depth {
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 72% 45%,rgba(var(--vendor-rgb-primary),.18),transparent 28%),
        linear-gradient(90deg,transparent 0%,rgba(var(--vendor-rgb-primary),.035) 50%,transparent 100%);
    z-index:2;
    pointer-events:none;
    animation:vendorDepthShift 10s ease-in-out infinite alternate;
}
@keyframes vendorDepthShift {
    from { transform:translate3d(-1%,0,0) scale(1); opacity:.7; }
    to { transform:translate3d(1%,0,0) scale(1.03); opacity:1; }
}
.premium-vendor-hero .partner-hero-content {
    max-width:760px !important;
    gap:1.25rem !important;
}
.premium-vendor-hero .partner-hero-logo-box {
    width:auto !important;
    min-width:11rem;
    height:4.25rem !important;
    padding:.65rem 1.3rem !important;
    box-shadow:0 16px 50px rgba(0,0,0,.35),0 0 35px rgba(var(--vendor-rgb-primary),.12) !important;
}
.premium-vendor-hero .partner-hero-title {
    font-size:clamp(2.8rem,5vw,5.3rem) !important;
    line-height:.96 !important;
    letter-spacing:-.04em !important;
}
.premium-vendor-hero .partner-hero-description {
    max-width:650px !important;
    font-size:1.08rem !important;
    line-height:1.65 !important;
    color:rgba(232,239,248,.76) !important;
}
.vendor-hero-meta {
    display:flex;
    flex-wrap:wrap;
    gap:.55rem;
}
.vendor-hero-meta span {
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    padding:.5rem .72rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:999px;
    background:rgba(5,12,24,.45);
    color:rgba(226,235,246,.58);
    font:600 .5rem/1 var(--font-cyber);
    letter-spacing:.09em;
}
.vendor-hero-meta svg { width:12px;height:12px;color:var(--vendor-primary); }
.vendor-hero-side {
    position:absolute;
    right:0;
    bottom:4.5rem;
    width:290px;
    z-index:4;
    padding:1rem 1.1rem;
    border:1px solid rgba(255,255,255,.08);
    border-radius:1rem;
    background:rgba(4,9,18,.52);
    backdrop-filter:blur(14px);
    box-shadow:0 20px 50px rgba(0,0,0,.24);
}
.vendor-side-label,
.vendor-section-kicker {
    display:block;
    font:700 .52rem/1 var(--font-cyber);
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--vendor-primary);
}
.vendor-hero-side p {
    margin:.6rem 0;
    color:rgba(234,241,249,.72);
    font-size:.82rem;
    line-height:1.5;
}
.vendor-hero-side small {
    display:block;
    color:rgba(203,213,225,.42);
    line-height:1.45;
    font-size:.62rem;
}
.vendor-side-line {
    height:1px;
    margin:.75rem 0;
    background:rgba(255,255,255,.07);
}
.vendor-side-line span {
    display:block;width:30%;height:1px;background:var(--vendor-primary);box-shadow:0 0 12px rgba(var(--vendor-rgb-primary),.55);
}
.premium-vendor-overview {
    padding:6rem 0 7rem !important;
}
.vendor-section-heading {
    max-width:780px;
    margin-bottom:2.8rem;
}
.vendor-section-heading > span {
    font:700 .55rem/1 var(--font-cyber);
    letter-spacing:.16em;
    color:var(--vendor-primary);
}
.vendor-section-heading h2 {
    margin:.8rem 0 1rem;
    font-family:var(--font-heading);
    font-size:clamp(2rem,4vw,3.4rem);
    line-height:1.05;
    letter-spacing:-.035em;
}
.vendor-section-heading h2 em {
    color:var(--vendor-primary);
    font-style:normal;
}
.vendor-section-heading p {
    max-width:720px;
    color:var(--text-secondary);
    line-height:1.7;
}
.vendor-capability-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
}
.vendor-capability-card {
    min-height:190px;
    padding:1.35rem;
    border:1px solid rgba(255,255,255,.07);
    border-radius:1rem;
    background:linear-gradient(145deg,rgba(12,23,42,.65),rgba(4,9,17,.58));
    transition:transform .55s var(--premium-ease),border-color .4s ease,box-shadow .55s var(--premium-ease);
}
.vendor-capability-card:hover {
    transform:translateY(-7px);
    border-color:rgba(var(--vendor-rgb-primary),.28);
    box-shadow:0 25px 60px rgba(0,0,0,.25);
}
.vendor-capability-icon {
    display:grid;place-items:center;
    width:40px;height:40px;
    border-radius:.7rem;
    color:var(--vendor-primary);
    border:1px solid rgba(var(--vendor-rgb-primary),.2);
    background:rgba(var(--vendor-rgb-primary),.07);
}
.vendor-capability-icon svg { width:19px;height:19px; }
.vendor-capability-card h3 {
    margin:1rem 0 .4rem;
    font-size:1rem;
}
.vendor-capability-card p {
    color:var(--text-secondary);
    font-size:.82rem;
    line-height:1.55;
}
.vendor-integration-panel {
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:2rem;
    margin-top:4rem;
    padding:2rem;
    border:1px solid rgba(var(--vendor-rgb-primary),.12);
    border-radius:1.25rem;
    background:
        radial-gradient(circle at 85% 50%,rgba(var(--vendor-rgb-primary),.08),transparent 30%),
        rgba(7,14,27,.6);
}
.vendor-integration-panel h2 {
    margin:.65rem 0 .55rem;
    font-size:1.7rem;
}
.vendor-integration-panel p {
    max-width:620px;color:var(--text-secondary);line-height:1.6;
}
.vendor-flow {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    white-space: nowrap;
    color: var(--vendor-primary);
    font: 800 0.68rem/1 var(--font-cyber);
    letter-spacing: 0.1em;
}
.vendor-flow svg,
.vendor-flow i {
    width: 15px !important;
    height: 15px !important;
    color: #94a3b8 !important;
    opacity: 0.9 !important;
    flex-shrink: 0;
}

body.light-theme .vendor-flow span {
    color: #0284c7 !important;
    font-weight: 800 !important;
}

body.light-theme .vendor-flow svg,
body.light-theme .vendor-flow i {
    color: #334155 !important;
    opacity: 1 !important;
    width: 15px !important;
    height: 15px !important;
}
.vendor-final-cta {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:2rem;
    margin-top:5rem;
    padding-top:3rem;
    border-top:1px solid rgba(255,255,255,.07);
}
.vendor-final-cta h2 { margin:.65rem 0 .55rem;font-size:1.8rem; }
.vendor-final-cta p { max-width:650px;color:var(--text-secondary);line-height:1.6; }

/* --- CONTACT: make the experience feel like an enterprise consultation, not a terminal --- */
.contact-showcase .section-title { letter-spacing:-.035em; }
.contact-form input,
.contact-form textarea,
.contact-form select {
    transition:border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    border-color:rgba(0,210,255,.35) !important;
    box-shadow:0 0 0 4px rgba(0,210,255,.05) !important;
}
.contact-card,
.contact-info-card {
    box-shadow:0 25px 70px rgba(0,0,0,.28) !important;
}

/* --- Global restraint --- */
.cyber-3d-card .scan-line,
.cyber-3d-card .card-glare,
.card-light-sweep {
    opacity:.35 !important;
}
.services-section-divider .divider-line-left,
.services-section-divider .divider-line-right { opacity:.55; }

@media (max-width:1100px) {
    .about-hero { grid-template-columns:1fr !important; }
    .about-story-copy { min-height:auto; padding:0; }
    .about-digital-twin { min-height:500px !important; }
    .vendor-hero-side { position:relative; right:auto; bottom:auto; margin-top:1.5rem; width:min(100%,420px); }
    .premium-vendor-hero .partner-hero-container { display:flex;flex-direction:column; }
}
@media (max-width:760px) {
    .about-pillar-grid { grid-template-columns:1fr; }
    .about-digital-twin { min-height:430px !important; }
    .vendor-capability-grid { grid-template-columns:1fr; }
    .vendor-integration-panel { grid-template-columns:1fr; }
    .vendor-flow { flex-wrap:wrap;white-space:normal; }
    .vendor-final-cta { flex-direction:column;align-items:flex-start; }
    .premium-vendor-hero { min-height:650px !important; }
    .premium-vendor-hero .partner-hero-title { font-size:3rem !important; }
}
@media (prefers-reduced-motion:reduce) {
    .vendor-hero-depth { animation:none !important; }
}

/* ========================================================================
   V5 ULTRA-PREMIUM POLISH — ECOSYSTEM, LIGHT MODE & PARTNER VISUALS
   ======================================================================== */

/* Realistic depth on vendor hero imagery without washing the image out. */
.premium-vendor-hero {
    --hero-shift-x: 0px;
    --hero-shift-y: 0px;
    background-position: calc(50% + var(--hero-shift-x)) calc(50% + var(--hero-shift-y)) !important;
    transition: background-position 180ms ease-out;
}
.premium-vendor-hero .partner-hero-cinematic-overlay {
    background:
        linear-gradient(90deg, rgba(3,7,17,.96) 0%, rgba(3,7,17,.82) 32%, rgba(3,7,17,.34) 65%, rgba(3,7,17,.52) 100%),
        linear-gradient(180deg, rgba(3,7,17,.10) 0%, rgba(3,7,17,.06) 55%, #070d1e 100%) !important;
}


.vendor-side-focus {
    display:flex;
    align-items:center;
    gap:.55rem;
    margin:.7rem 0 .15rem;
    color:var(--vendor-primary);
    font:700 .62rem/1.3 var(--font-cyber);
    letter-spacing:.07em;
    text-transform:uppercase;
}
.vendor-side-focus svg { width:14px; height:14px; }
.vendor-side-environments {
    display:flex;
    flex-direction:column;
    gap:.28rem;
    margin-top:.8rem;
    padding:.7rem .75rem;
    border-radius:.75rem;
    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.06);
}
.vendor-side-environments span {
    font:700 .46rem/1 var(--font-cyber);
    letter-spacing:.13em;
    color:var(--text-muted);
}
.vendor-side-environments strong {
    color:#e8eef7;
    font-size:.70rem;
    line-height:1.4;
}

/* Partner cards: move from generic cards to editorial product tiles. */
.partner-feature-card {
    min-height: 590px !important;
    isolation: isolate;
}
.partner-card-visual {
    position:relative;
    z-index:1;
    height:150px;
    margin:0 !important;
    overflow:hidden;
    border-bottom:1px solid rgba(56,189,248,.14);
    background-size:cover;
    background-position:center;
    transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.partner-card-visual::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(3,8,18,.06) 0%, rgba(3,8,18,.25) 42%, rgba(3,8,18,.96) 100%);
}
.partner-card-visual::after {
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 75% 25%, rgba(0,210,255,.22), transparent 35%), linear-gradient(90deg, transparent 0 65%, rgba(255,255,255,.04) 66%, transparent 67%);
    mix-blend-mode:screen;
}
.partner-feature-card[data-partner="checkpoint"] .partner-card-visual { background-image:url('assets/partner_checkpoint_premium.jpg'); }
.partner-feature-card[data-partner="claroty"] .partner-card-visual { background-image:url('assets/partner_claroty_premium.jpg'); }
.partner-feature-card[data-partner="tx1"] .partner-card-visual { background-image:url('assets/partner_txone_premium.jpg'); }
.partner-feature-card[data-partner="hp-aruba"] .partner-card-visual { background-image:url('assets/partner_aruba_premium.jpg'); }
.partner-feature-card[data-partner="engenius"] .partner-card-visual { background-image:url('assets/partner_engenius_premium.jpg'); }
.partner-feature-card:hover .partner-card-visual { transform:scale(1.045); filter:saturate(1.08) contrast(1.03); }
.partner-visual-kicker {
    position:absolute;
    left:1.15rem;
    bottom:1rem;
    z-index:3;
    color:rgba(255,255,255,.76);
    font:700 .46rem/1 var(--font-cyber);
    letter-spacing:.14em;
}
.partner-visual-line {
    position:absolute;
    right:1.15rem;
    bottom:1.02rem;
    width:70px;
    height:2px;
    z-index:3;
    background:linear-gradient(90deg, transparent, var(--accent-cyan));
    box-shadow:0 0 12px rgba(0,210,255,.55);
}
body.light-theme .partner-feature-card {
    background:#f9fbfe !important;
    border-color:rgba(15,23,42,.09) !important;
    box-shadow:0 20px 50px rgba(15,23,42,.08) !important;
}
body.light-theme .partner-card-visual::before {
    background:linear-gradient(180deg, rgba(3,8,18,.02) 0%, rgba(3,8,18,.18) 40%, rgba(3,8,18,.82) 100%);
}
body.light-theme .partner-card-footer { background:linear-gradient(180deg,#f4f9ff,#e9f3fb) !important; }
body.light-theme .partner-card-title { color:#0f172a !important; }
body.light-theme .partner-card-desc { color:#475569 !important; }
body.light-theme .cert-pill { color:#475569 !important; border-color:rgba(15,23,42,.08) !important; background:rgba(15,23,42,.025) !important; }

/* Replace the old zero-counter feeling with a real, factual ecosystem signal band. */
.partner-ecosystem-signals {
    position:relative;
    padding:6rem 0 6.5rem;
    overflow:hidden;
    background:
      radial-gradient(circle at 10% 40%, rgba(0,210,255,.08), transparent 30%),
      radial-gradient(circle at 90% 60%, rgba(99,102,241,.08), transparent 32%),
      linear-gradient(180deg,#050914 0%,#07111f 100%);
    border-top:1px solid rgba(0,210,255,.10);
    border-bottom:1px solid rgba(0,210,255,.10);
}
.partner-ecosystem-signals::before {
    content:"";
    position:absolute;
    inset:0;
    background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:52px 52px;
    mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);
    pointer-events:none;
}
.ecosystem-signal-intro {
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4rem;
    align-items:end;
    margin-bottom:2.4rem;
}
.ecosystem-signal-intro h2 { margin:.7rem 0 0; font-size:clamp(2rem,4vw,3.5rem); line-height:1.02; letter-spacing:-.045em; }
.ecosystem-signal-intro h2 span { color:var(--accent-cyan); }
.ecosystem-signal-intro p { max-width:560px; color:#9aa9bc; line-height:1.7; }
.section-eyebrow { color:var(--accent-cyan); font:700 .55rem/1 var(--font-cyber); letter-spacing:.18em; text-transform:uppercase; }
.ecosystem-signal-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.ecosystem-signal-card {
    min-height:190px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:1.35rem;
    border:1px solid rgba(148,163,184,.12);
    border-radius:1.15rem;
    background:linear-gradient(145deg,rgba(15,23,42,.82),rgba(5,10,20,.62));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 20px 50px rgba(0,0,0,.18);
    transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease;
}
.ecosystem-signal-card:hover { transform:translateY(-7px); border-color:rgba(0,210,255,.30); box-shadow:0 25px 60px rgba(0,0,0,.32),0 0 30px rgba(0,210,255,.06); }
.signal-index { color:rgba(255,255,255,.22); font:700 2.2rem/1 var(--font-cyber); letter-spacing:-.05em; }
.ecosystem-signal-card strong { display:block; margin:.9rem 0 .35rem; font-size:1rem; color:#f8fafc; }
.ecosystem-signal-card p { color:#8fa0b5; font-size:.78rem; line-height:1.55; }
.ecosystem-signal-card > svg { position:absolute; top:1.35rem; right:1.35rem; width:18px; height:18px; color:var(--accent-cyan); }
body.light-theme .partner-ecosystem-signals { background:linear-gradient(180deg,#eef5fb 0%,#f7fafc 100%); border-color:rgba(0,102,255,.10); }
body.light-theme .partner-ecosystem-signals::before { background-image:linear-gradient(rgba(15,23,42,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.035) 1px,transparent 1px); }
body.light-theme .ecosystem-signal-intro p { color:#475569; }
body.light-theme .ecosystem-signal-card { background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(244,248,252,.92)); border-color:rgba(15,23,42,.08); box-shadow:0 18px 45px rgba(15,23,42,.06); }
body.light-theme .ecosystem-signal-card strong { color:#0f172a; }
body.light-theme .ecosystem-signal-card p { color:#64748b; }
body.light-theme .signal-index { color:rgba(15,23,42,.20); }

/* More deliberate partner detail hierarchy in both themes. */
.partner-detail-section .vendor-capability-card { position:relative; overflow:hidden; }
.partner-detail-section .vendor-capability-card::after {
    content:"";
    position:absolute;
    inset:auto -30% -65% -30%;
    height:120px;
    background:radial-gradient(ellipse,rgba(var(--vendor-rgb-primary),.12),transparent 65%);
    pointer-events:none;
}
body.light-theme .partner-detail-section .vendor-capability-card {
    background:linear-gradient(145deg,#ffffff,#f2f7fb) !important;
    border-color:rgba(15,23,42,.08) !important;
    box-shadow:0 18px 45px rgba(15,23,42,.05);
}
body.light-theme .partner-detail-section .vendor-capability-card h3 { color:#0f172a; }
body.light-theme .partner-detail-section .vendor-capability-card p { color:#475569; }
body.light-theme .vendor-integration-panel { background:linear-gradient(145deg,#ffffff,#eef5fb) !important; border-color:rgba(15,23,42,.08) !important; }
body.light-theme .vendor-final-cta { border-top-color:rgba(15,23,42,.08); }

/* Navigation consistency */
.nav-btn-contact { letter-spacing:.01em; }

@media (max-width:1000px) {
    .ecosystem-signal-intro { grid-template-columns:1fr; gap:1.25rem; }
    .ecosystem-signal-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
    .partner-feature-card { min-height:540px !important; }
    .partner-card-visual { height:130px; }
    .ecosystem-signal-grid { grid-template-columns:1fr; }
    .premium-vendor-hero .partner-hero-content { padding:1rem; }
}
@media (prefers-reduced-motion:reduce) {
    .premium-vendor-hero { transition:none; }
    .partner-card-visual { transition:none; }
}

/* About page: factual coverage signals instead of unverified client/performance counters. */
.about-coverage-signals {
    position:relative;
    padding:6.5rem 0;
    overflow:hidden;
    background:linear-gradient(180deg,#050914 0%,#08111f 100%);
    border-top:1px solid rgba(0,210,255,.10);
    border-bottom:1px solid rgba(0,210,255,.10);
}
.about-coverage-signals .section-header { position:relative; z-index:1; margin-bottom:2.5rem; }
.about-coverage-signals .section-header .section-eyebrow { display:block; margin-bottom:.75rem; }
.about-coverage-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.about-coverage-card {
    position:relative;
    min-height:230px;
    padding:1.5rem;
    border-radius:1.2rem;
    border:1px solid rgba(148,163,184,.12);
    background:linear-gradient(145deg,rgba(15,23,42,.82),rgba(4,9,18,.72));
    overflow:hidden;
    transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,box-shadow .45s ease;
}
.about-coverage-card:hover { transform:translateY(-7px); border-color:rgba(0,210,255,.30); box-shadow:0 25px 60px rgba(0,0,0,.30),0 0 30px rgba(0,210,255,.06); }
.about-coverage-card::after { content:""; position:absolute; right:-35px; bottom:-55px; width:170px; height:170px; border-radius:50%; background:radial-gradient(circle,rgba(0,210,255,.16),transparent 70%); pointer-events:none; }
.about-coverage-card .coverage-number { display:block; color:rgba(255,255,255,.20); font:700 2.3rem/1 var(--font-cyber); letter-spacing:-.06em; }
.about-coverage-card > svg { position:absolute; top:1.5rem; right:1.5rem; width:20px; height:20px; color:var(--accent-cyan); }
.about-coverage-card h3 { margin:2.5rem 0 .45rem; font-size:1.05rem; }
.about-coverage-card p { color:#8fa0b5; font-size:.80rem; line-height:1.6; max-width:290px; }
body.light-theme .about-coverage-signals { background:linear-gradient(180deg,#eef5fb 0%,#f8fafc 100%); border-color:rgba(0,102,255,.10); }
body.light-theme .about-coverage-card { background:linear-gradient(145deg,#fff,#f3f7fb); border-color:rgba(15,23,42,.08); box-shadow:0 18px 45px rgba(15,23,42,.06); }
body.light-theme .about-coverage-card h3 { color:#0f172a; }
body.light-theme .about-coverage-card p { color:#64748b; }
body.light-theme .about-coverage-card .coverage-number { color:rgba(15,23,42,.18); }
@media (max-width:1000px) { .about-coverage-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .about-coverage-grid { grid-template-columns:1fr; } }


/* ========================================================================
   V6 FINAL POLISH — VERIFIED VISUAL SYSTEM, PARTNER ART DIRECTION & THEMES
   ======================================================================== */
:root {
  --surface-1: #0a1222;
  --surface-2: #0e192b;
  --surface-3: #111f34;
  --text-on-surface: #f8fbff;
  --muted-on-surface: #a8b7ca;
}
body.light-theme {
  --bg-dark: #edf3f9;
  --bg-dark-rgb: 237,243,249;
  --bg-card: rgba(255,255,255,.82);
  --bg-card-hover: rgba(255,255,255,.96);
  --bg-footer: #dfe8f2;
  --border-color: rgba(15,23,42,.12);
  --border-hover: rgba(0,120,255,.30);
  --text-primary: #0b1426;
  --text-secondary: #34445c;
  --text-muted: #607086;
  --shadow-premium: 0 22px 60px rgba(15,23,42,.10), 0 2px 10px rgba(15,23,42,.05);
}
/* Light-mode surfaces must have visible separation. */
body.light-theme .glass-panel,
body.light-theme .contact-card,
body.light-theme .contact-info-card,
body.light-theme .partner-feature-card,
body.light-theme .vendor-capability-card,
body.light-theme .vendor-integration-panel {
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(235,242,249,.92)) !important;
  border-color: rgba(15,23,42,.12) !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
body.light-theme input, body.light-theme textarea, body.light-theme select,
body.light-theme .contact-form input, body.light-theme .contact-form textarea, body.light-theme .contact-form select {
  background: #f5f8fc !important;
  color: #0b1426 !important;
  border-color: rgba(15,23,42,.16) !important;
}
body.light-theme input::placeholder, body.light-theme textarea::placeholder { color:#6b7b90 !important; opacity:1; }
body.light-theme select option { background:#f5f8fc; color:#0b1426; }
body.light-theme .section-description, body.light-theme .partner-card-desc,
body.light-theme .vendor-section-heading p, body.light-theme .vendor-capability-card p,
body.light-theme .vendor-integration-panel p, body.light-theme .vendor-final-cta p { color:#3d4d63 !important; }
body.light-theme .partner-card-title, body.light-theme .partner-feature-card h3,
body.light-theme .vendor-capability-card h3, body.light-theme .contact-card h2,
body.light-theme .contact-info-card h3 { color:#0b1426 !important; }
/* Partner cards: real imagery, no empty placeholder feeling. */
.partner-card-visual {
  height: 176px !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 1.15rem 1.15rem 0 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}
.partner-feature-card[data-partner="checkpoint"] .partner-card-visual { background-image:url('assets/partner_checkpoint_premium.jpg') !important; }
.partner-feature-card[data-partner="claroty"] .partner-card-visual { background-image:url('assets/partner_claroty_premium.jpg') !important; }
.partner-feature-card[data-partner="tx1"] .partner-card-visual { background-image:url('assets/partner_txone_premium.jpg') !important; }
.partner-feature-card[data-partner="hp-aruba"] .partner-card-visual { background-image:url('assets/partner_aruba_premium.jpg') !important; }
.partner-feature-card[data-partner="engenius"] .partner-card-visual { background-image:url('assets/partner_engenius_premium.jpg') !important; }
.partner-card-visual::before {
  background:linear-gradient(180deg, rgba(2,8,18,.12), rgba(2,8,18,.30) 40%, rgba(2,8,18,.92) 100%) !important;
}
.partner-visual-kicker { bottom:1rem !important; }
.partner-visual-status {
  position:absolute; right:1.1rem; top:1rem; z-index:4;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .55rem; border:1px solid rgba(255,255,255,.18);
  border-radius:999px; background:rgba(3,10,20,.45); backdrop-filter:blur(10px);
  color:rgba(240,248,255,.85); font:700 .42rem/1 var(--font-cyber); letter-spacing:.08em;
}
.partner-visual-status i { width:6px; height:6px; border-radius:50%; background:#35e0a1; box-shadow:0 0 10px rgba(53,224,161,.8); }
body.light-theme .partner-visual-status { background:rgba(7,16,29,.55); color:#f8fbff; }
/* Partner cards should breathe, not look like generic dashboards. */
.partner-feature-card { min-height: 620px !important; background:linear-gradient(160deg,rgba(12,24,43,.94),rgba(6,13,25,.98)) !important; }
body.light-theme .partner-feature-card { background:linear-gradient(160deg,#fdfefe,#eaf2f9) !important; }
.partner-card-header { padding-top:1.15rem !important; }
.partner-card-footer { margin-top:auto; }
/* Remove any visual language that implies unsupported certification. */
.partner-tier-pill, .cert-pill { letter-spacing:.07em; }
/* Contact: visible, tactile fields in both themes. */
.contact-form input, .contact-form textarea, .contact-form select {
  min-height:56px;
  border-radius:.85rem !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.contact-form textarea { min-height:140px; }
body.light-theme .contact-form input:focus, body.light-theme .contact-form textarea:focus, body.light-theme .contact-form select:focus {
  border-color:#008cff !important;
  box-shadow:0 0 0 4px rgba(0,140,255,.10), 0 8px 24px rgba(15,23,42,.06) !important;
}
body.light-theme .contact-card, body.light-theme .contact-info-card { background:linear-gradient(145deg,#ffffff,#eef4f9) !important; }
body.light-theme .contact-info-card p, body.light-theme .contact-info-card span, body.light-theme .contact-info-card a { color:#34445c !important; }
/* Ecosystem signal cards: consistent 01-04 editorial sequence. */
.signal-index { font-variant-numeric:tabular-nums; }
body.light-theme .ecosystem-signal-card { background:linear-gradient(145deg,#ffffff,#edf4fa) !important; }
body.light-theme .ecosystem-signal-card strong { color:#0b1426 !important; }
body.light-theme .ecosystem-signal-card p { color:#4b5d73 !important; }
/* Footer and navigation contrast. */
body.light-theme footer, body.light-theme .site-footer { color:#25364e; }
body.light-theme footer a, body.light-theme .site-footer a { color:#3c5069; }
body.light-theme footer a:hover, body.light-theme .site-footer a:hover { color:#0078ff; }
/* Avoid white-on-white CTA and icon states. */
body.light-theme .btn-card-action { color:#0b1426 !important; }
body.light-theme .partner-category-tag { color:#0078ff !important; }
/* Premium motion: restrained and GPU-friendly. */
.partner-feature-card, .ecosystem-signal-card, .about-coverage-card, .vendor-capability-card { will-change:transform; }
@media (max-width:900px) {
  .partner-feature-card { min-height:0 !important; }
  .partner-card-visual { height:155px !important; }
}

/* ========================================================================
   V7 FINAL VISUAL CORRECTIONS — CONTRAST, IMAGERY & EDITORIAL NUMBERING
   ======================================================================== */

/* Partner cards: the visual band must visibly show the partner-specific image.
   Keep the image readable in both themes instead of turning it into a blank gradient. */
.partner-card-visual {
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  isolation: isolate;
}
.partner-card-visual::before {
  background: linear-gradient(180deg,
    rgba(2,8,18,.08) 0%,
    rgba(2,8,18,.16) 42%,
    rgba(2,8,18,.72) 100%) !important;
  z-index: 1;
}
.partner-card-visual::after {
  background:
    linear-gradient(90deg, rgba(0,210,255,.05), transparent 35%, rgba(0,210,255,.10)),
    radial-gradient(circle at 78% 28%, rgba(0,210,255,.18), transparent 34%) !important;
  z-index: 2;
}
.partner-visual-kicker,
.partner-visual-status,
.partner-visual-line { z-index: 4 !important; }

body.light-theme .partner-card-visual::before {
  background: linear-gradient(180deg,
    rgba(4,12,24,.03) 0%,
    rgba(4,12,24,.10) 38%,
    rgba(4,12,24,.64) 100%) !important;
}
body.light-theme .partner-card-visual::after {
  background:
    linear-gradient(90deg, rgba(0,153,255,.05), transparent 38%, rgba(0,153,255,.10)),
    radial-gradient(circle at 78% 28%, rgba(0,210,255,.15), transparent 34%) !important;
}
body.light-theme .partner-visual-kicker { color: rgba(255,255,255,.94) !important; text-shadow: 0 1px 5px rgba(0,0,0,.55); }

/* ========================================================================
   ULTRA-PREMIUM LIGHT MODE SYSTEM — MAXIMUM READABILITY & BACKGROUND VISIBILITY
   ======================================================================== */

/* 1. Root Light Theme Variables (High-contrast corporate tech palette) */
body.light-theme {
    --bg-dark: #F4F8FC;
    --bg-dark-rgb: 244, 248, 252;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-footer: #EAF0F6;
    --border-color: rgba(15, 23, 42, 0.12);
    --border-hover: rgba(0, 102, 204, 0.35);

    --text-primary: #071225;
    --text-secondary: #2c3e55;
    --text-muted: #475569;

    --accent-cyan: #0066cc;
    --accent-cyan-rgb: 0, 102, 204;
    --accent-purple: #0052cc;
    --accent-purple-rgb: 0, 82, 204;

    --glow-cyan: 0 0 15px rgba(0, 102, 204, 0.15);
    --glow-purple: 0 0 15px rgba(0, 82, 204, 0.15);
    --glow-cyan-ambient: 0 8px 24px rgba(0, 102, 204, 0.08);
    --glow-purple-ambient: 0 8px 24px rgba(0, 82, 204, 0.08);
    --shadow-premium: 0 10px 35px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* ========================================================================
   ULTRA-PREMIUM LIGHT MODE SYSTEM — MAXIMUM READABILITY & BACKGROUND VISIBILITY
   ======================================================================== */

/* 0. Landing Page Hero Section — Seamless Edge-to-Edge Dark Navy Base (Zero White Edge Gaps) */
.hero-section,
body.light-theme .hero-section {
    position: relative !important;
    padding: 8.5rem 0 6rem !important;
    overflow: hidden !important;
    background-color: #050814 !important;
}

.hero-bg-glows,
body.light-theme .hero-bg-glows {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.hero-background-video,
body.light-theme .hero-background-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -10 !important;
    pointer-events: none !important;
    opacity: 0.85 !important;
    filter: saturate(1.1) brightness(0.62) !important;
}

/* 1. Root Light Theme Variables (High-contrast corporate tech palette) */
body.light-theme {
    --bg-dark: #F4F8FC;
    --bg-dark-rgb: 244, 248, 252;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(255, 255, 255, 1);
    --bg-footer: #EAF0F6;
    --border-color: rgba(15, 23, 42, 0.12);
    --border-hover: rgba(0, 102, 204, 0.35);

    --text-primary: #071225;
    --text-secondary: #2c3e55;
    --text-muted: #475569;

    --accent-cyan: #0066cc;
    --accent-cyan-rgb: 0, 102, 204;
    --accent-purple: #0052cc;
    --accent-purple-rgb: 0, 82, 204;

    --glow-cyan: 0 0 15px rgba(0, 102, 204, 0.15);
    --glow-purple: 0 0 15px rgba(0, 82, 204, 0.15);
    --glow-cyan-ambient: 0 8px 24px rgba(0, 102, 204, 0.08);
    --glow-purple-ambient: 0 8px 24px rgba(0, 82, 204, 0.08);
    --shadow-premium: 0 10px 35px rgba(15, 23, 42, 0.08), 0 2px 6px rgba(15, 23, 42, 0.04);
}

/* 2. About Us Page - 3 Pillar Small Boxes (Exact Dark Mode Size & Length with High Light Mode Contrast) */
body.light-theme .about-pillar {
    padding: .85rem .8rem !important;
    border-radius: .8rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.16) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .about-pillar strong {
    font-size: .72rem !important;
    font-weight: 700 !important;
    color: #071225 !important;
    line-height: 1.2 !important;
}

body.light-theme .about-pillar small {
    font-size: .56rem !important;
    font-weight: 500 !important;
    color: #2c3e55 !important;
    margin-top: .3rem !important;
}

body.light-theme .about-pillar-icon {
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    background: rgba(0, 102, 204, 0.1) !important;
    color: #0066cc !important;
    border: 1px solid rgba(0, 102, 204, 0.25) !important;
    border-radius: .55rem !important;
}

body.light-theme .about-trust-line span {
    color: #071225 !important;
    font-weight: 700 !important;
}

/* 3. Home Page HUD Console (Right-Side Cognitive Core Active Panel) */
.cyber-hud-panel,
body.light-theme .cyber-hud-panel {
    background: rgba(6, 12, 26, 0.92) !important;
    border: 1px solid rgba(0, 210, 255, 0.3) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(0, 210, 255, 0.15) !important;
}

.cyber-hud-panel .hud-header span,
body.light-theme .cyber-hud-panel .hud-header span {
    color: #f1f5f9 !important;
    font-weight: 700 !important;
}

body.light-theme #hero-digital-time {
    color: #00d2ff !important;
}

.cyber-hud-panel .hud-metric-card,
body.light-theme .cyber-hud-panel .hud-metric-card {
    background: rgba(4, 8, 20, 0.88) !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
}

/* Metric Card Title Labels */
.cyber-hud-panel .hud-metric-card div:first-child,
body.light-theme .cyber-hud-panel .hud-metric-card div:first-child {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* THREATS DEFLECTED Value & Sublabel */
#hero-deflected-counter,
body.light-theme #hero-deflected-counter {
    color: #f87171 !important;
    font-weight: 800 !important;
}

.cyber-hud-panel .hud-metric-card div:last-child,
body.light-theme .cyber-hud-panel .hud-metric-card div:last-child {
    color: #10b981 !important;
    font-weight: 700 !important;
}

/* AI ACCURACY Value & Sublabel */
#hero-ai-accuracy,
body.light-theme #hero-ai-accuracy {
    color: #38bdf8 !important;
    font-weight: 800 !important;
}

.cyber-hud-panel .hud-metric-card:last-child div:last-child,
body.light-theme .cyber-hud-panel .hud-metric-card:last-child div:last-child {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

/* Zero Trust Edge Plausibility Row */
.cyber-hud-panel .hud-metrics-row span:first-child,
body.light-theme .cyber-hud-panel .hud-metrics-row span:first-child {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
}

.cyber-hud-panel .hud-metrics-row span:last-child,
body.light-theme .cyber-hud-panel .hud-metrics-row span:last-child {
    color: #10b981 !important;
    font-weight: 700 !important;
}

/* Packet Interception Feeds Console */
.cyber-hud-panel div[style*="PACKET INTERCEPTION"] span:first-child,
body.light-theme .cyber-hud-panel div[style*="PACKET INTERCEPTION"] span:first-child {
    color: #38bdf8 !important;
    font-weight: 700 !important;
}

#hero-packets-speed,
body.light-theme #hero-packets-speed {
    color: #cbd5e1 !important;
}

.hud-diagnostics-console,
body.light-theme .hud-diagnostics-console {
    background: rgba(2, 6, 14, 0.95) !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
    color: #cbd5e1 !important;
}

.diagnostics-line,
body.light-theme .diagnostics-line {
    display: flex !important;
    justify-content: space-between !important;
    font-family: var(--font-cyber), monospace !important;
    font-size: 0.65rem !important;
    line-height: 1.45 !important;
}

.diagnostics-line.alert,
body.light-theme .diagnostics-line.alert,
body.light-theme .diagnostics-line.alert span {
    color: #ef4444 !important;
    font-weight: 700 !important;
}

.diagnostics-line.success,
body.light-theme .diagnostics-line.success,
body.light-theme .diagnostics-line.success span {
    color: #10b981 !important;
    font-weight: 700 !important;
}

.diagnostics-line.info,
body.light-theme .diagnostics-line.info,
body.light-theme .diagnostics-line.info span {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

/* 4. Individual Partner Hero — Full Vivid Background Image Visibility in Light Mode (Identical to Dark Mode) */
body.light-theme .partner-hero-banner,
body.light-theme .premium-vendor-hero {
    position: relative !important;
    min-height: 480px !important;
    background-size: cover !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}

body.light-theme .partner-hero-cinematic-overlay,
body.light-theme .premium-vendor-hero .partner-hero-cinematic-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: 
        linear-gradient(90deg, rgba(7, 13, 30, 0.90) 0%, rgba(7, 13, 30, 0.45) 45%, rgba(7, 13, 30, 0.35) 100%),
        linear-gradient(180deg, rgba(7, 13, 30, 0.30) 0%, transparent 40%, #070d1e 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.light-theme .premium-vendor-hero .partner-hero-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

body.light-theme .premium-vendor-hero .partner-hero-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6) !important;
}

body.light-theme .premium-vendor-hero .partner-hero-description {
    color: rgba(241, 245, 249, 0.9) !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6) !important;
}

body.light-theme .premium-vendor-hero .partner-hero-badge {
    color: #00d2ff !important;
    background: rgba(0, 210, 255, 0.12) !important;
    border-color: rgba(0, 210, 255, 0.35) !important;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2) !important;
    font-weight: 800 !important;
}

body.light-theme .premium-vendor-hero .vendor-hero-meta span {
    color: rgba(241, 245, 249, 0.85) !important;
    background: rgba(13, 20, 38, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    font-weight: 600 !important;
}

body.light-theme .premium-vendor-hero .vendor-hero-side {
    background: rgba(10, 16, 32, 0.78) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35) !important;
}

body.light-theme .premium-vendor-hero .vendor-side-label {
    color: #00d2ff !important;
    font-weight: 800 !important;
}

body.light-theme .premium-vendor-hero .vendor-side-focus span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

body.light-theme .premium-vendor-hero .vendor-hero-side p {
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}

body.light-theme .premium-vendor-hero .vendor-side-environments {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 0.75rem !important;
    padding: 0.7rem 0.75rem !important;
}

body.light-theme .premium-vendor-hero .vendor-side-environments span {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.13em !important;
}

body.light-theme .premium-vendor-hero .vendor-side-environments strong {
    color: #ffffff !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

body.light-theme .premium-vendor-hero .vendor-hero-side small {
    color: #cbd5e1 !important;
    font-weight: 400 !important;
}

/* 5. Header & Dropdown Ultra-Premium Theme Blue Cybersecurity Glassmorphism */
body.light-theme .header,
body.light-theme .header:not(.scrolled),
body.light-theme .header.scrolled {
    background: linear-gradient(135deg, rgba(8, 24, 58, 0.96) 0%, rgba(13, 38, 86, 0.94) 100%) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 8px 32px rgba(5, 16, 42, 0.35), 0 0 15px rgba(0, 210, 255, 0.1) !important;
    transition: all 0.3s ease !important;
}

body.light-theme .header.scrolled {
    background: linear-gradient(135deg, rgba(6, 18, 46, 0.98) 0%, rgba(10, 30, 72, 0.97) 100%) !important;
    border-bottom: 1px solid rgba(0, 210, 255, 0.38) !important;
    box-shadow: 0 14px 42px -5px rgba(3, 10, 28, 0.5), 0 0 22px rgba(0, 210, 255, 0.16) !important;
}

body.light-theme .nav-link,
body.light-theme .dropdown-trigger,
body.light-theme .theme-toggle,
body.light-theme .mobile-menu-btn {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 600 !important;
}

body.light-theme .nav-link:hover,
body.light-theme .dropdown-trigger:hover,
body.light-theme .theme-toggle:hover {
    color: var(--accent-cyan, #00d2ff) !important;
    text-shadow: 0 0 12px rgba(0, 210, 255, 0.5) !important;
}

body.light-theme .nav-link.active {
    color: var(--accent-cyan, #00d2ff) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(0, 210, 255, 0.45) !important;
}

body.light-theme .logo-text h1 {
    color: #ffffff !important;
}

body.light-theme .logo-text h1 span {
    color: var(--accent-cyan, #00d2ff) !important;
    text-shadow: 0 0 14px rgba(0, 210, 255, 0.55) !important;
}

body.light-theme .logo-subtitle {
    color: rgba(0, 210, 255, 0.9) !important;
    font-weight: 700 !important;
}

body.light-theme .logo-placeholder-icon {
    color: var(--accent-cyan, #00d2ff) !important;
}

body.light-theme .nav-btn-contact {
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 18px rgba(0, 210, 255, 0.38) !important;
}

body.light-theme .nav-btn-contact:hover {
    background: linear-gradient(135deg, #00e5ff 0%, #1a75ff 100%) !important;
    box-shadow: 0 6px 24px rgba(0, 210, 255, 0.55) !important;
    transform: translateY(-2px);
}

body.light-theme .dropdown-content {
    background: rgba(8, 24, 58, 0.98) !important;
    backdrop-filter: blur(24px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
    border: 1px solid rgba(0, 210, 255, 0.25) !important;
    box-shadow: 0 20px 45px rgba(4, 12, 32, 0.5), 0 0 20px rgba(0, 210, 255, 0.1) !important;
    border-radius: 14px !important;
}

body.light-theme .dropdown-content a {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

body.light-theme .dropdown-content a[style*="accent-cyan"] {
    color: var(--accent-cyan, #00d2ff) !important;
    border-top-color: rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .dropdown-content a:hover {
    background-color: rgba(0, 210, 255, 0.12) !important;
    color: var(--accent-cyan, #00d2ff) !important;
}

body.light-theme .dropdown-content a i {
    color: var(--accent-cyan, #00d2ff) !important;
}

/* 6. Global Typography & Text Contrast */
body.light-theme .section-title,
body.light-theme .section-heading,
body.light-theme .section-header h2,
body.light-theme .about-story-copy h2,
body.light-theme .about-pillar-card h3,
body.light-theme .service-card h3,
body.light-theme .service-feature-card h3,
body.light-theme .contact-showcase h2,
body.light-theme .contact-form h2,
body.light-theme .contact-info-card h3,
body.light-theme .vendor-capability-card h3,
body.light-theme .footer-title,
body.light-theme .footer-heading { color: #071225 !important; font-weight: 700 !important; }

body.light-theme .section-description,
body.light-theme .about-story-copy p,
body.light-theme .about-pillar-card p,
body.light-theme .service-card p,
body.light-theme .service-feature-card p,
body.light-theme .contact-showcase p,
body.light-theme .contact-info-card p,
body.light-theme .vendor-capability-card p { color: #2c3e55 !important; }

body.light-theme .eyebrow,
body.light-theme .section-eyebrow,
body.light-theme .section-kicker,
body.light-theme .service-card .service-category,
body.light-theme .partner-category-tag { color: #0066cc !important; font-weight: 700 !important; }

/* 7. Contact Form in Light Mode */
body.light-theme .contact-form input,
body.light-theme .contact-form textarea,
body.light-theme .contact-form select {
    background: #ffffff !important;
    color: #071225 !important;
    border: 1px solid rgba(15, 23, 42, 0.20) !important;
    font-weight: 500 !important;
}

body.light-theme .contact-form input::placeholder,
body.light-theme .contact-form textarea::placeholder { color: #64748b !important; }

body.light-theme .contact-form label { color: #1e293b !important; font-weight: 600 !important; }

body.light-theme .contact-form input:focus,
body.light-theme .contact-form textarea:focus,
body.light-theme .contact-form select:focus {
    background: #ffffff !important;
    border-color: #0066cc !important;
    color: #071225 !important;
    box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.12) !important;
}

/* 8. Footer & Copyright */
body.light-theme footer,
body.light-theme .site-footer { background: #EAF0F6 !important; color: #2c3e55 !important; border-top: 1px solid rgba(15, 23, 42, 0.08) !important; }

body.light-theme footer a,
body.light-theme .site-footer a { color: #1e293b !important; font-weight: 500 !important; }

body.light-theme footer a:hover,
body.light-theme .site-footer a:hover { color: #0066cc !important; }

body.light-theme .cyber-badge-secured {
    background: rgba(0, 102, 204, 0.08) !important;
    color: #0066cc !important;
    border-color: rgba(0, 102, 204, 0.25) !important;
    font-weight: 600 !important;
}


/* ==========================================================================
   CYVAULT EXPANSION STYLES: PRODUCT, VAPT, MANAGED SERVICES
   ========================================================================== */
.product-hero-banner, .vapt-hero-banner, .managed-hero-banner {
    position: relative; padding: 9rem 0 6rem 0; min-height: 75vh;
    display: flex; align-items: center; overflow: hidden; background: #050814;
}
.product-hero-cinematic-overlay, .vapt-hero-overlay, .managed-hero-overlay {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 30%, rgba(0, 210, 255, 0.08) 0%, rgba(5, 8, 20, 0.85) 60%, #050814 100%);
    pointer-events: none; z-index: 1;
}
.product-hero-radial-glow {
    position: absolute; top: 20%; left: 50%; transform: translateX(-50%);
    width: 650px; height: 350px; background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
    filter: blur(50px); pointer-events: none; z-index: 2;
}
.product-hero-content, .vapt-hero-content, .managed-hero-content {
    max-width: 860px; margin: 0 auto; text-align: center; position: relative; z-index: 5;
}
.product-hero-title, .vapt-hero-title, .managed-hero-title {
    font-family: var(--font-heading); font-size: 3.25rem; font-weight: 800;
    line-height: 1.15; color: #ffffff; margin: 1.25rem 0; letter-spacing: -0.02em;
}
.product-hero-title span, .vapt-hero-title span, .managed-hero-title span {
    color: var(--accent-cyan); background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.product-hero-description, .vapt-hero-description, .managed-hero-description {
    font-size: 1.2rem; line-height: 1.65; color: var(--text-secondary);
    max-width: 740px; margin: 0 auto 2.5rem auto; font-weight: 400;
}
.product-hero-actions, .vapt-hero-actions, .managed-hero-actions {
    display: flex; gap: 1.25rem; justify-content: center; align-items: center; flex-wrap: wrap;
}

/* SAFETY PIPELINE */
.safety-pipeline-section {
    padding: 6rem 0; position: relative; background: rgba(5, 8, 20, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.safety-pipeline-visualizer {
    display: grid; grid-template-columns: 1fr 60px 1fr 60px 1fr;
    align-items: center; gap: 0; margin-top: 3.5rem; position: relative;
}
.pipeline-stage-card {
    background: rgba(10, 18, 38, 0.75); border: 1px solid rgba(0, 210, 255, 0.18);
    border-radius: 12px; padding: 1.5rem; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px); display: flex; flex-direction: column; height: 100%; min-height: 480px;
}
.stage-header {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: 0.85rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 1rem;
}
.stage-tag {
    font-family: var(--font-mono, monospace); font-size: 0.78rem; font-weight: 700;
    color: var(--accent-cyan); letter-spacing: 0.05em; display: flex; align-items: center; gap: 6px;
}
.stage-live-badge {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700;
    color: #10b981; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 2px 8px; border-radius: 20px; display: flex; align-items: center; gap: 5px;
}
.stage-status-active {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700;
    color: var(--accent-cyan); background: rgba(0, 210, 255, 0.12); border: 1px solid rgba(0, 210, 255, 0.3);
    padding: 2px 8px; border-radius: 20px;
}
.badge-status-action {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800;
    color: #ef4444; background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35);
    padding: 2px 8px; border-radius: 20px;
}
.pulse-dot {
    width: 6px; height: 6px; background: #10b981; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px #10b981;
}
.camera-feed-viewport {
    position: relative; height: 240px; background: #02040a; border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px; overflow: hidden; margin-bottom: 1rem;
}
.cam-overlay-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px; pointer-events: none;
}
.cam-scanline {
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.6; animation: scanVertical 4s linear infinite; pointer-events: none;
}
@keyframes scanVertical { 0% { top: 0; } 100% { top: 100%; } }
.cam-hud-header {
    position: absolute; top: 8px; left: 10px; font-family: var(--font-mono, monospace);
    font-size: 0.65rem; color: rgba(255, 255, 255, 0.7); z-index: 2;
}
.cam-hud-footer {
    position: absolute; bottom: 6px; left: 10px; right: 10px; display: flex; justify-content: space-between;
    font-family: var(--font-mono, monospace); font-size: 0.62rem; color: rgba(255, 255, 255, 0.55); z-index: 2;
}
.bounding-box {
    position: absolute; border: 1.5px solid var(--accent-cyan); background: rgba(0, 210, 255, 0.08); pointer-events: none; z-index: 3;
}
.bounding-box.worker-box { border-color: #10b981; background: rgba(16, 185, 129, 0.08); }
.bounding-box.machine-box { border-color: #f59e0b; background: rgba(245, 158, 11, 0.08); }
.box-label {
    position: absolute; top: -18px; left: -1px; background: #10b981; color: #050814;
    font-family: var(--font-mono, monospace); font-size: 0.62rem; font-weight: 800;
    padding: 1px 5px; border-radius: 2px 2px 0 0; white-space: nowrap; display: flex; align-items: center; gap: 3px;
}
.machine-box .box-label { background: #f59e0b; }
.box-tags { position: absolute; bottom: 2px; left: 2px; display: flex; flex-direction: column; gap: 2px; }
.box-tags span { font-family: var(--font-mono, monospace); font-size: 0.55rem; font-weight: 700; padding: 1px 3px; border-radius: 2px; }
.tag-ok { background: rgba(16, 185, 129, 0.25); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }
.tag-warn { background: rgba(245, 158, 11, 0.25); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.4); }
.box-corner { position: absolute; width: 5px; height: 5px; border-color: inherit; }
.box-corner.tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; }
.box-corner.tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; }
.box-corner.bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; }
.box-corner.br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; }
.hazard-zone-perimeter {
    position: absolute; border: 1.5px dashed rgba(239, 68, 68, 0.7); background: rgba(239, 68, 68, 0.05);
    border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2;
}
.zone-label {
    font-family: var(--font-mono, monospace); font-size: 0.52rem; font-weight: 800;
    color: #ef4444; background: rgba(5, 8, 20, 0.85); padding: 1px 4px; border-radius: 2px;
    border: 1px solid rgba(239, 68, 68, 0.4); display: flex; align-items: center; gap: 2px;
}
.pipeline-connector {
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 4px; position: relative;
}
.flow-line {
    width: 100%; height: 2px; background: linear-gradient(90deg, rgba(0, 210, 255, 0.2), var(--accent-cyan), rgba(0, 210, 255, 0.2));
    position: relative; margin-bottom: 6px;
}
.pulse-particle {
    position: absolute; top: -3px; width: 8px; height: 8px; background: #00d2ff; border-radius: 50%;
    box-shadow: 0 0 10px #00d2ff; animation: flowPulse 2s linear infinite;
}
@keyframes flowPulse {
    0% { left: 0; opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { left: 100%; opacity: 0; }
}
.connector-label { font-family: var(--font-mono, monospace); font-size: 0.58rem; color: var(--text-secondary); text-align: center; }
.ai-engines-container { display: flex; flex-direction: column; gap: 12px; min-height: 240px; height: auto; justify-content: center; margin-bottom: 1rem; }
.engine-node {
    background: rgba(5, 12, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; position: relative;
}
.engine-node.active { border-color: rgba(0, 210, 255, 0.3); background: rgba(7, 16, 38, 0.9); }
.engine-icon { width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.engine-icon.cyan { background: rgba(0, 210, 255, 0.12); color: var(--accent-cyan); }
.engine-icon.blue { background: rgba(0, 102, 255, 0.12); color: #38bdf8; }
.engine-icon.purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }
.engine-text strong { display: block; font-family: var(--font-heading); font-size: 0.88rem; color: var(--text-primary); }
.engine-text small { display: block; font-size: 0.72rem; color: var(--text-secondary); }

.event-alert-card {
    background: rgba(5, 12, 28, 0.85); border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 8px; padding: 14px; min-height: 240px; height: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; margin-bottom: 1rem;
}
.alert-top-row { display: flex; justify-content: space-between; align-items: center; }
.alert-type { font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 800; color: #ef4444; display: flex; align-items: center; gap: 4px; }
.alert-time { font-family: var(--font-mono, monospace); font-size: 0.62rem; color: var(--text-secondary); }
.alert-title { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #ffffff; margin: 4px 0 2px 0; }
.alert-desc { font-size: 0.76rem; line-height: 1.45; color: var(--text-secondary); margin: 0; }
.alert-telemetry-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: rgba(0, 0, 0, 0.35); padding: 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.05);
}
.telemetry-cell small { display: block; font-family: var(--font-mono, monospace); font-size: 0.58rem; color: var(--text-secondary); }
.telemetry-cell strong { font-size: 0.72rem; color: var(--text-primary); }
.alert-action-bar { display: flex; flex-direction: column; gap: 3px; }
.action-item { font-family: var(--font-mono, monospace); font-size: 0.64rem; color: #10b981; display: flex; align-items: center; gap: 5px; }
.stage-caption { padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.stage-caption strong { display: block; font-family: var(--font-heading); font-size: 0.95rem; color: var(--text-primary); margin-bottom: 4px; }
.stage-caption p { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); margin: 0; }

.product-capabilities-section, .vapt-pillars-section, .managed-capabilities-section { padding: 6rem 0; position: relative; }
.capabilities-grid, .vapt-pillars-grid, .managed-caps-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem;
}
.capability-card, .vapt-pillar-card, .managed-cap-card {
    background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 2rem; transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column; position: relative; overflow: hidden;
}
.capability-card:hover, .vapt-pillar-card:hover, .managed-cap-card:hover {
    transform: translateY(-4px); border-color: rgba(0, 210, 255, 0.3); box-shadow: 0 16px 36px rgba(0, 102, 255, 0.12);
}
.capability-card.wide-card, .vapt-pillar-card.wide-card { grid-column: span 3; }
.cap-icon-wrapper, .pillar-icon, .mcap-icon {
    width: 52px; height: 52px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem; background: rgba(0, 210, 255, 0.1); color: var(--accent-cyan);
}
.cap-icon-wrapper.cyan, .mcap-icon.cyan { background: rgba(0, 210, 255, 0.12); color: var(--accent-cyan); }
.cap-icon-wrapper.blue, .mcap-icon.blue { background: rgba(0, 102, 255, 0.12); color: #38bdf8; }
.cap-icon-wrapper.emerald, .mcap-icon.emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.cap-icon-wrapper.purple, .mcap-icon.purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }
.cap-icon-wrapper.orange, .mcap-icon.orange { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.capability-card h3, .vapt-pillar-card h3, .managed-cap-card h4 {
    font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.65rem 0;
}
.capability-card p, .vapt-pillar-card p, .managed-cap-card p {
    font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 1.25rem 0; flex: 1;
}
.cap-footer {
    padding-top: 0.85rem; border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--accent-cyan);
}
.pillar-checklist {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 0.85rem;
}
.pillar-checklist li {
    font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px;
}
.pillar-checklist li i { width: 14px; height: 14px; color: var(--accent-cyan); }

/* DASHBOARD SHOWCASE */
.dashboard-showcase-section { padding: 6rem 0; background: rgba(5, 8, 20, 0.8); }
.dashboard-tab-bar {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 2.5rem 0 2rem 0;
}
.dash-tab-btn {
    background: rgba(10, 18, 38, 0.7); border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; font-family: var(--font-heading);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.25s ease;
}
.dash-tab-btn i { width: 15px; height: 15px; }
.dash-tab-btn:hover { color: var(--text-primary); border-color: rgba(0, 210, 255, 0.3); background: rgba(15, 25, 52, 0.8); }
.dash-tab-btn.active {
    background: rgba(0, 102, 255, 0.2); border-color: var(--accent-cyan); color: #ffffff; box-shadow: 0 0 16px rgba(0, 210, 255, 0.2);
}
.dashboard-view-wrapper { position: relative; min-height: 380px; }
.dash-panel { display: none; }
.dash-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.mock-dash-container {
    background: #070e22; border: 1px solid rgba(0, 210, 255, 0.2); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5);
}
.mock-dash-topbar {
    background: #050a18; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar-left {
    display: flex; align-items: center; gap: 10px; font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--text-primary);
}
.topbar-dot { width: 8px; height: 8px; border-radius: 50%; }
.topbar-dot.green { background: #10b981; box-shadow: 0 0 8px #10b981; }
.topbar-dot.blue { background: #00d2ff; box-shadow: 0 0 8px #00d2ff; }
.topbar-dot.emerald { background: #059669; box-shadow: 0 0 8px #059669; }
.topbar-dot.warning { background: #f59e0b; box-shadow: 0 0 8px #f59e0b; }
.topbar-dot.cyan { background: #0284c7; box-shadow: 0 0 8px #0284c7; }
.topbar-dot.purple { background: #a855f7; box-shadow: 0 0 8px #a855f7; }
.topbar-dot.red { background: #ef4444; box-shadow: 0 0 8px #ef4444; }
.topbar-sub { color: var(--text-secondary); margin-left: 8px; }
.topbar-right { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--text-secondary); }

.mock-dash-grid { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mock-widget { background: rgba(10, 20, 44, 0.6); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; padding: 18px; }
.mock-widget.wide { grid-column: span 2; }
.mock-widget h4 { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--accent-cyan); margin: 0 0 12px 0; letter-spacing: 0.04em; }
.mock-widget p { font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); margin: 8px 0 0 0; }
.widget-status-row { display: flex; gap: 10px; margin-bottom: 8px; }
.status-pill {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; display: flex; align-items: center; gap: 6px;
}
.status-pill.warning { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-pill.success { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.widget-feed-list { display: flex; flex-direction: column; gap: 6px; }
.feed-item { font-family: var(--font-mono, monospace); font-size: 0.74rem; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.dot-online { width: 6px; height: 6px; background: #10b981; border-radius: 50%; }
.mock-table { display: flex; flex-direction: column; gap: 4px; }
.table-row {
    display: grid; grid-template-columns: 1fr 1.5fr 2fr 1.2fr; padding: 8px 12px; border-radius: 4px;
    font-family: var(--font-mono, monospace); font-size: 0.76rem; align-items: center; background: rgba(0, 0, 0, 0.2);
}
.table-row.header { background: transparent; color: var(--text-secondary); font-weight: 700; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.badge-action { color: #ef4444; background: rgba(239, 68, 68, 0.12); padding: 2px 6px; border-radius: 4px; text-align: center; font-weight: 700; }
.badge-resolved { color: #10b981; background: rgba(16, 185, 129, 0.12); padding: 2px 6px; border-radius: 4px; text-align: center; font-weight: 700; }

.trend-visual-bar-group { display: flex; gap: 16px; align-items: flex-end; height: 120px; margin-top: 14px; padding-top: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.trend-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 6px; }
.trend-bar-col span { font-family: var(--font-mono, monospace); font-size: 0.65rem; color: var(--text-secondary); }
.trend-bar-fill { width: 100%; background: linear-gradient(180deg, var(--accent-cyan), var(--accent-blue)); border-radius: 4px 4px 0 0; }
.trend-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.trend-list li { display: flex; justify-content: space-between; font-size: 0.82rem; color: var(--text-secondary); padding-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.trend-list strong { color: var(--accent-cyan); font-family: var(--font-mono, monospace); }

.compliance-dial-box { display: flex; justify-content: center; margin: 12px 0; }
.compliance-ring {
    width: 80px; height: 80px; border-radius: 50%; border: 3px solid #10b981; display: flex; align-items: center;
    justify-content: center; font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800;
    color: #10b981; background: rgba(16, 185, 129, 0.08); box-shadow: 0 0 16px rgba(16, 185, 129, 0.2);
}
.zone-grid-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 10px; }
.zone-cell { padding: 14px; border-radius: 6px; border: 1px solid; display: flex; flex-direction: column; gap: 4px; }
.zone-cell span { font-family: var(--font-mono, monospace); font-size: 0.78rem; font-weight: 800; }
.zone-cell small { font-size: 0.72rem; line-height: 1.35; }
.zone-cell.danger { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.4); color: #f87171; }
.zone-cell.warning { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.4); color: #fbbf24; }
.zone-cell.safe { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.4); color: #34d399; }

.score-pill { font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 4px; display: inline-block; margin-bottom: 8px; }
.score-pill.good { background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.score-pill.fair { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }

.hazard-log-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.hazard-log-item {
    font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.2); padding: 8px 12px; border-radius: 4px;
}
.hazard-log-item i { width: 15px; height: 15px; color: #fbbf24; flex-shrink: 0; }
.mustering-status {
    font-family: var(--font-mono, monospace); font-size: 0.75rem; font-weight: 700; color: var(--accent-cyan);
    background: rgba(0, 210, 255, 0.1); padding: 4px 8px; border-radius: 4px; display: inline-block; margin-bottom: 6px;
}
.portfolio-site-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.site-card { background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06); padding: 12px; border-radius: 6px; display: flex; flex-direction: column; gap: 4px; }
.site-card strong { font-size: 0.85rem; color: var(--text-primary); }
.site-card span { font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--text-secondary); }

/* AI CORE MODULES */
.ai-core-modules-section { padding: 6rem 0; }
.ai-modules-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; }
.ai-module-card {
    background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px; padding: 2.25rem 2rem; position: relative; transition: all 0.3s ease;
}
.ai-module-card:hover { transform: translateY(-4px); border-color: rgba(0, 210, 255, 0.3); }
.ai-mod-badge {
    position: absolute; top: 20px; right: 20px; font-family: var(--font-mono, monospace);
    font-size: 0.7rem; font-weight: 700; color: var(--accent-cyan); background: rgba(0, 210, 255, 0.1); padding: 2px 8px; border-radius: 4px;
}
.ai-mod-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; }
.ai-mod-icon.cyan { background: rgba(0, 210, 255, 0.12); color: var(--accent-cyan); }
.ai-mod-icon.blue { background: rgba(0, 102, 255, 0.12); color: #38bdf8; }
.ai-mod-icon.purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }
.ai-module-card h3 { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.65rem 0; }
.ai-module-card p { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 1.25rem 0; }
.ai-mod-points {
    list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 1rem;
}
.ai-mod-points li { font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; }
.ai-mod-points li i { width: 14px; height: 14px; color: var(--accent-cyan); }

/* TECH FOUNDATION */
.tech-foundation-section { padding: 6rem 0; background: rgba(5, 8, 20, 0.6); }
.tech-foundation-panel {
    background: rgba(10, 18, 38, 0.7); border: 1px solid rgba(0, 210, 255, 0.18); border-radius: 16px; padding: 3rem; backdrop-filter: blur(16px);
}
.tech-foundation-header { text-align: center; max-width: 700px; margin: 0 auto 2.5rem auto; }
.tech-foundation-header h2 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 800; color: var(--text-primary); margin: 0.75rem 0; }
.tech-foundation-header p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.6; }
.tech-tags-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 2.5rem; }
.tech-tag {
    background: rgba(5, 12, 28, 0.85); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-primary);
    padding: 8px 18px; border-radius: 30px; font-family: var(--font-heading); font-size: 0.88rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; transition: all 0.25s ease;
}
.tech-tag i { width: 15px; height: 15px; color: var(--accent-cyan); }
.tech-tag:hover { border-color: var(--accent-cyan); background: rgba(0, 210, 255, 0.08); transform: translateY(-2px); }
.tech-accordion-wrapper { max-width: 800px; margin: 0 auto; }
.tech-accordion-btn {
    width: 100%; background: rgba(5, 12, 28, 0.9); border: 1px solid rgba(0, 210, 255, 0.2); padding: 14px 20px;
    border-radius: 8px; color: var(--accent-cyan); font-family: var(--font-heading); font-size: 0.92rem; font-weight: 700;
    cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease;
}
.tech-accordion-btn i { transition: transform 0.3s ease; }
.tech-accordion-btn.open i { transform: rotate(180deg); }
.tech-accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tech-accordion-content.open { max-height: 350px; margin-top: 12px; }
.tech-arch-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 16px;
    background: rgba(5, 10, 24, 0.8); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px;
}
.arch-box h4 { font-family: var(--font-heading); font-size: 0.95rem; color: var(--text-primary); margin: 0 0 6px 0; }
.arch-box p { font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* USE CASES */
.product-usecases-section { padding: 6rem 0; }
.usecases-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
.usecase-card {
    background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px; padding: 1.5rem; transition: all 0.3s ease; display: flex; flex-direction: column;
}
.usecase-card:hover { transform: translateY(-4px); border-color: rgba(0, 210, 255, 0.3); box-shadow: 0 12px 28px rgba(0, 102, 255, 0.1); }
.usecase-icon {
    width: 42px; height: 42px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 210, 255, 0.1); color: var(--accent-cyan); margin-bottom: 1rem;
}
.usecase-card h4 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.usecase-card p { font-size: 0.84rem; line-height: 1.55; color: var(--text-secondary); margin: 0; }

/* VAPT & MANAGED SERVICES PROTOCOLS */
.vapt-methodology-section, .managed-lifecycle-section { padding: 6rem 0; background: rgba(5, 8, 20, 0.6); }
.vapt-protocol-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 3.5rem; }
.protocol-step-card {
    background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
    padding: 1.5rem 1rem; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center;
}
.protocol-step-card:hover, .protocol-step-card.active {
    background: rgba(14, 25, 52, 0.9); border-color: var(--accent-cyan); transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 210, 255, 0.15);
}
.protocol-num {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: var(--accent-cyan);
    background: rgba(0, 210, 255, 0.1); padding: 2px 8px; border-radius: 12px; margin-bottom: 0.75rem;
}
.protocol-icon { width: 44px; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-bottom: 0.75rem; }
.protocol-icon.cyan { background: rgba(0, 210, 255, 0.12); color: var(--accent-cyan); }
.protocol-icon.blue { background: rgba(0, 102, 255, 0.12); color: #38bdf8; }
.protocol-icon.emerald { background: rgba(16, 185, 129, 0.12); color: #10b981; }
.protocol-icon.purple { background: rgba(168, 85, 247, 0.12); color: #c084fc; }
.protocol-icon.orange { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.protocol-step-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.protocol-step-card p { font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary); margin: 0; }

.lifecycle-flow-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-top: 3.5rem; }
.lifecycle-step-node {
    background: rgba(10, 18, 38, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
    padding: 1.75rem 1.25rem; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: column; align-items: center;
}
.lifecycle-step-node:hover, .lifecycle-step-node.active {
    background: rgba(14, 25, 52, 0.9); border-color: #38bdf8; transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0, 102, 255, 0.15);
}
.step-badge {
    font-family: var(--font-mono, monospace); font-size: 0.72rem; font-weight: 800; color: #38bdf8;
    background: rgba(0, 102, 255, 0.12); padding: 2px 8px; border-radius: 12px; margin-bottom: 0.75rem;
}
.step-icon { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(0, 102, 255, 0.12); color: #38bdf8; margin-bottom: 0.75rem; }
.lifecycle-step-node h4 { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 0 0 0.5rem 0; }
.lifecycle-step-node p { font-size: 0.8rem; line-height: 1.5; color: var(--text-secondary); margin: 0; }

/* CTAs */
.product-cta-section, .vapt-cta-section, .managed-cta-section { padding: 6rem 0 8rem 0; }
.product-cta-card, .vapt-cta-card, .managed-cta-card {
    background: linear-gradient(135deg, rgba(8, 18, 44, 0.9) 0%, rgba(5, 10, 24, 0.95) 100%);
    border: 1px solid rgba(0, 210, 255, 0.25); border-radius: 16px; padding: 4rem 3rem; text-align: center;
    position: relative; overflow: hidden; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.4);
}
.cta-glow-backdrop {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450px; height: 250px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.12) 0%, transparent 70%); filter: blur(40px); pointer-events: none;
}
.cta-content-wrapper { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-kicker { font-family: var(--font-mono, monospace); font-size: 0.78rem; font-weight: 800; color: var(--accent-cyan); letter-spacing: 0.08em; display: block; margin-bottom: 0.75rem; }
.product-cta-card h2, .vapt-cta-card h2, .managed-cta-card h2 { font-family: var(--font-heading); font-size: 2.4rem; font-weight: 800; color: #ffffff; margin: 0 0 1rem 0; }
.product-cta-card p, .vapt-cta-card p, .managed-cta-card p { font-size: 1.05rem; line-height: 1.6; color: var(--text-secondary); margin: 0 0 2rem 0; }
.cta-actions { display: flex; justify-content: center; }

/* ==========================================================================
   FIRST-CLASS LIGHT MODE DESIGN SYSTEM (WCAG AAA AUDITED)
   ========================================================================== */
body.light-theme .product-hero-banner,
body.light-theme .vapt-hero-banner,
body.light-theme .managed-hero-banner { 
    background: #071225 !important; 
}

body.light-theme .product-hero-title,
body.light-theme .vapt-hero-title,
body.light-theme .managed-hero-title {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.light-theme .product-hero-title span,
body.light-theme .vapt-hero-title span,
body.light-theme .managed-hero-title span {
    color: #00d2ff !important;
    background: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    filter: none !important;
}

body.light-theme .product-hero-description,
body.light-theme .vapt-hero-description,
body.light-theme .managed-hero-description {
    color: rgba(241, 245, 249, 0.9) !important;
    text-shadow: none !important;
}

body.light-theme .product-hero-banner .hero-badge,
body.light-theme .vapt-hero-banner .hero-badge,
body.light-theme .managed-hero-banner .hero-badge {
    background: rgba(0, 210, 255, 0.12) !important;
    border: 1px solid rgba(0, 210, 255, 0.35) !important;
    color: #00d2ff !important;
}

body.light-theme .product-hero-banner .btn-secondary,
body.light-theme .vapt-hero-banner .btn-secondary,
body.light-theme .managed-hero-banner .btn-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(0, 210, 255, 0.4) !important;
}

body.light-theme .product-hero-banner .btn-secondary:hover,
body.light-theme .vapt-hero-banner .btn-secondary:hover,
body.light-theme .managed-hero-banner .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: #00d2ff !important;
    color: #ffffff !important;
}

body.light-theme .safety-pipeline-section,
body.light-theme .vapt-methodology-section,
body.light-theme .managed-lifecycle-section,
body.light-theme .tech-foundation-section,
body.light-theme .dashboard-showcase-section { background: #f4f8fc !important; border-color: #cbd5e1 !important; }

/* Safety Pipeline - Light Theme Card Overrides */
body.light-theme .pipeline-stage-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .stage-header {
    border-bottom: 1px solid #e2e8f0 !important;
}

body.light-theme .stage-tag {
    color: #0066cc !important;
    font-weight: 800 !important;
}

body.light-theme .stage-live-badge {
    background: rgba(16, 185, 129, 0.12) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #059669 !important;
}

body.light-theme .stage-status-active {
    background: rgba(0, 102, 204, 0.1) !important;
    border: 1px solid rgba(0, 102, 204, 0.3) !important;
    color: #0066cc !important;
}

body.light-theme .badge-status-action {
    background: rgba(239, 68, 68, 0.12) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    color: #dc2626 !important;
}

/* Engine Nodes (AI Processing Core) in Light Mode */
body.light-theme .engine-node {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.03) !important;
}

body.light-theme .engine-node.active {
    background: #f0f7ff !important;
    border-color: rgba(0, 102, 204, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.08) !important;
}

body.light-theme .engine-text strong {
    color: #071225 !important;
    font-weight: 700 !important;
}

body.light-theme .engine-text small {
    color: #475569 !important;
    font-weight: 500 !important;
}

/* Real-Time Dispatch Alert Card in Light Mode */
body.light-theme .event-alert-card {
    background: #fff8f8 !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    box-shadow: 0 4px 16px rgba(239, 68, 68, 0.06) !important;
    height: auto !important;
    min-height: 240px !important;
}

body.light-theme .alert-title {
    color: #991b1b !important;
    font-weight: 700 !important;
}

body.light-theme .alert-desc {
    color: #475569 !important;
    font-weight: 400 !important;
}

body.light-theme .alert-time {
    color: #64748b !important;
}

body.light-theme .alert-telemetry-grid {
    background: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, 0.18) !important;
}

body.light-theme .telemetry-cell small {
    color: #64748b !important;
    font-weight: 600 !important;
}

body.light-theme .telemetry-cell strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}

body.light-theme .action-item {
    color: #059669 !important;
    font-weight: 600 !important;
}

/* Connectors & Flow Lines in Light Mode */
body.light-theme .flow-line {
    background: linear-gradient(90deg, rgba(0, 102, 204, 0.15), #0066cc, rgba(0, 102, 204, 0.15)) !important;
}

body.light-theme .pulse-particle {
    background: #0066cc !important;
    box-shadow: 0 0 10px rgba(0, 102, 204, 0.6) !important;
}

body.light-theme .connector-label {
    color: #0066cc !important;
    font-weight: 700 !important;
}

/* Stage Captions in Light Mode */
body.light-theme .stage-caption {
    border-top: 1px solid #e2e8f0 !important;
}

body.light-theme .stage-caption strong {
    color: #071225 !important;
}

body.light-theme .stage-caption p {
    color: #334155 !important;
}

body.light-theme .pipeline-stage-card,
body.light-theme .capability-card,
body.light-theme .vapt-pillar-card,
body.light-theme .managed-cap-card,
body.light-theme .ai-module-card,
body.light-theme .usecase-card,
body.light-theme .tech-foundation-panel,
body.light-theme .mock-dash-container,
body.light-theme .protocol-step-card,
body.light-theme .lifecycle-step-node {
    background: #ffffff !important; border: 1px solid #cbd5e1 !important; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .pipeline-stage-card:hover,
body.light-theme .capability-card:hover,
body.light-theme .vapt-pillar-card:hover,
body.light-theme .managed-cap-card:hover,
body.light-theme .ai-module-card:hover,
body.light-theme .usecase-card:hover,
body.light-theme .protocol-step-card:hover,
body.light-theme .lifecycle-step-node:hover {
    border-color: #0066cc !important; box-shadow: 0 16px 36px rgba(0, 102, 204, 0.12) !important;
}

body.light-theme .protocol-step-card.active,
body.light-theme .lifecycle-step-node.active {
    background: #f0f7ff !important;
    border-color: #0066cc !important;
    box-shadow: 0 12px 28px rgba(0, 102, 204, 0.15) !important;
}

body.light-theme .protocol-step-card .protocol-num {
    background: rgba(0, 102, 204, 0.1) !important;
    color: #0066cc !important;
}

body.light-theme .lifecycle-step-node .step-badge {
    background: rgba(0, 102, 204, 0.1) !important;
    color: #0066cc !important;
}

body.light-theme .capability-card h3,
body.light-theme .vapt-pillar-card h3,
body.light-theme .managed-cap-card h4,
body.light-theme .ai-module-card h3,
body.light-theme .usecase-card h4,
body.light-theme .protocol-step-card h3,
body.light-theme .lifecycle-step-node h4,
body.light-theme .tech-foundation-header h2,
body.light-theme .stage-caption strong { color: #071225 !important; }

body.light-theme .capability-card p,
body.light-theme .vapt-pillar-card p,
body.light-theme .managed-cap-card p,
body.light-theme .ai-module-card p,
body.light-theme .usecase-card p,
body.light-theme .protocol-step-card p,
body.light-theme .lifecycle-step-node p,
body.light-theme .tech-foundation-header p,
body.light-theme .stage-caption p,
body.light-theme .pillar-checklist li,
body.light-theme .ai-mod-points li { color: #334155 !important; }

body.light-theme .pillar-checklist li i { color: #0066cc !important; }

body.light-theme .dash-tab-btn { background: #ffffff !important; border: 1px solid #cbd5e1 !important; color: #334155 !important; }
body.light-theme .dash-tab-btn:hover { background: #f1f5f9 !important; color: #071225 !important; }
body.light-theme .dash-tab-btn.active {
    background: #0066cc !important; border-color: #0066cc !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25) !important;
}

body.light-theme .mock-dash-topbar { background: #f8fafc !important; border-bottom: 1px solid #e2e8f0 !important; }
body.light-theme .topbar-left, body.light-theme .topbar-right, body.light-theme .topbar-sub { color: #1e293b !important; }
body.light-theme .mock-widget { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
body.light-theme .mock-widget h4 { color: #0066cc !important; }
body.light-theme .mock-widget p, body.light-theme .feed-item, body.light-theme .trend-list li, body.light-theme .hazard-log-item, body.light-theme .site-card strong { color: #1e293b !important; }
body.light-theme .table-row { background: #f1f5f9 !important; color: #071225 !important; }
body.light-theme .table-row.header { background: transparent !important; color: #475569 !important; }
body.light-theme .tech-tag { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #071225 !important; }
body.light-theme .tech-tag:hover { background: #e2e8f0 !important; border-color: #0066cc !important; }
body.light-theme .tech-accordion-btn { background: #f1f5f9 !important; border: 1px solid #cbd5e1 !important; color: #0066cc !important; }
body.light-theme .tech-arch-grid { background: #f8fafc !important; border: 1px solid #e2e8f0 !important; }
body.light-theme .arch-box h4 { color: #071225 !important; }
body.light-theme .arch-box p { color: #334155 !important; }

body.light-theme .product-cta-card, 
body.light-theme .vapt-cta-card, 
body.light-theme .managed-cta-card {
    background: linear-gradient(135deg, #071225 0%, #0d1e3d 100%) !important; 
    border: 1px solid rgba(0, 102, 204, 0.3) !important;
}

body.light-theme .product-cta-card h2,
body.light-theme .vapt-cta-card h2,
body.light-theme .managed-cta-card h2 {
    color: #ffffff !important;
    text-shadow: none !important;
}

body.light-theme .product-cta-card p,
body.light-theme .vapt-cta-card p,
body.light-theme .managed-cta-card p {
    color: rgba(241, 245, 249, 0.88) !important;
    text-shadow: none !important;
}

body.light-theme .product-cta-card .cta-kicker,
body.light-theme .vapt-cta-card .cta-kicker,
body.light-theme .managed-cta-card .cta-kicker {
    color: #00d2ff !important;
    text-shadow: none !important;
}

/* RESPONSIVE BREAKPOINTS (1920px down to 390px) */
@media (max-width: 1200px) {
    .safety-pipeline-visualizer { grid-template-columns: 1fr; gap: 1.5rem; }
    .pipeline-connector { transform: rotate(90deg); height: 40px; margin: 0.5rem 0; }
    .vapt-protocol-grid { grid-template-columns: repeat(3, 1fr); }
    .lifecycle-flow-grid { grid-template-columns: repeat(3, 1fr); }
    .usecases-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .product-hero-title, .vapt-hero-title, .managed-hero-title { font-size: 2.5rem; }
    .capabilities-grid, .vapt-pillars-grid, .managed-caps-grid, .ai-modules-grid { grid-template-columns: repeat(2, 1fr); }
    .capability-card.wide-card, .vapt-pillar-card.wide-card { grid-column: span 2; }
    .mock-dash-grid { grid-template-columns: 1fr; }
    .mock-widget.wide { grid-column: span 1; }
    .portfolio-site-row, .zone-grid-map { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .product-hero-banner, .vapt-hero-banner, .managed-hero-banner { padding: 7rem 0 4rem 0; min-height: auto; }
    .product-hero-title, .vapt-hero-title, .managed-hero-title { font-size: 2.1rem; }
    .capabilities-grid, .vapt-pillars-grid, .managed-caps-grid, .ai-modules-grid,
    .vapt-protocol-grid, .lifecycle-flow-grid, .usecases-grid, .tech-arch-grid { grid-template-columns: 1fr; }
    .capability-card.wide-card, .vapt-pillar-card.wide-card { grid-column: span 1; }
    .portfolio-site-row, .zone-grid-map { grid-template-columns: 1fr; }
    .product-cta-card, .vapt-cta-card, .managed-cta-card { padding: 2.5rem 1.5rem; }
    .product-cta-card h2, .vapt-cta-card h2, .managed-cta-card h2 { font-size: 1.75rem; }
    .tech-foundation-panel { padding: 1.5rem; }
}

@media (max-width: 480px) {
    .product-hero-title, .vapt-hero-title, .managed-hero-title { font-size: 1.75rem; }
    .product-hero-description, .vapt-hero-description, .managed-hero-description { font-size: 0.95rem; }
    .camera-feed-viewport { height: 200px; }
    .bounding-box.worker-box { width: 80px !important; height: 110px !important; }
    .bounding-box.machine-box { width: 100px !important; height: 90px !important; }
    .dash-tab-btn { width: 100%; justify-content: center; }
}

/* Light Mode Mobile Menu Drawer */
body.light-theme .mobile-menu {
    background: linear-gradient(180deg, #091a3c 0%, #061328 100%) !important;
    border-left: 1px solid rgba(0, 210, 255, 0.2) !important;
    box-shadow: -10px 0 35px rgba(4, 12, 32, 0.5) !important;
}

body.light-theme .mobile-nav-link {
    color: #f1f5f9 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.light-theme .mobile-nav-link:hover,
body.light-theme .mobile-nav-link:active,
body.light-theme .mobile-nav-link.active {
    color: var(--accent-cyan, #00d2ff) !important;
    background: rgba(0, 210, 255, 0.1) !important;
}

body.light-theme .mobile-tech-section {
    background: rgba(13, 28, 60, 0.6) !important;
    border: 1px solid rgba(0, 210, 255, 0.15) !important;
}

body.light-theme .mobile-tech-title {
    color: var(--accent-cyan, #00d2ff) !important;
}

body.light-theme .mobile-tech-link {
    color: #cbd5e1 !important;
}

body.light-theme .mobile-tech-link:hover,
body.light-theme .mobile-tech-link:active,
body.light-theme .mobile-tech-link.active {
    color: var(--accent-cyan, #00d2ff) !important;
    background: rgba(0, 210, 255, 0.12) !important;
}

body.light-theme .mobile-menu-btn {
    color: #ffffff !important;
}


/* ==========================================================================
   ULTRA-RESPONSIVE MOBILE MASTER OVERRIDES (Down to 360px)
   ========================================================================== */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* Hero Section Mobile Typography & Spacing */
    .hero-section {
        padding: 6rem 0 3.5rem !important;
        overflow: hidden !important;
    }

    .hero-content {
        max-width: 100% !important;
    }

    .hero-badge {
        font-size: 0.68rem !important;
        line-height: 1.35 !important;
        white-space: normal !important;
        max-width: 100% !important;
        padding: 0.35rem 0.7rem !important;
        margin-bottom: 0.85rem !important;
    }

    .hero-title {
        font-size: clamp(2rem, 8.5vw, 3rem) !important;
        line-height: 1.04 !important;
        letter-spacing: 0.5px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .hero-title-accent {
        font-size: clamp(2.1rem, 9vw, 3.2rem) !important;
        line-height: 1.06 !important;
        letter-spacing: 0.5px !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }

    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        max-width: 100% !important;
        word-break: break-word !important;
        margin-top: 0.75rem !important;
    }

    .hero-buttons {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.75rem !important;
        margin-top: 1.25rem !important;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.8rem 1.25rem !important;
        font-size: 0.95rem !important;
    }

    .hero-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 1.25rem !important;
        padding-top: 1rem !important;
        width: 100% !important;
    }

    .hero-stat-number {
        font-size: 1.35rem !important;
    }

    .hero-stat-label {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
    }

    .hero-domain-pill {
        font-size: 0.58rem !important;
        padding: 0.1rem 0.3rem !important;
    }

    /* Floating Chat Widget on Mobile */
    .chat-widget {
        bottom: 1rem !important;
        right: 1rem !important;
        z-index: 9999 !important;
    }

    .chat-badge-label {
        display: none !important;
    }

    .chat-toggle {
        width: 3.1rem !important;
        height: 3.1rem !important;
    }

    .chat-toggle i {
        width: 1.35rem !important;
        height: 1.35rem !important;
    }

    .chat-window {
        width: calc(100vw - 2rem) !important;
        max-width: 360px !important;
        bottom: 4.8rem !important;
        right: 0 !important;
    }
}

@media (max-width: 400px) {
    .hero-title {
        font-size: 1.85rem !important;
    }
    .hero-title-accent {
        font-size: 1.95rem !important;
    }
    .hero-stat-number {
        font-size: 1.15rem !important;
    }
    .hero-stat-label {
        font-size: 0.6rem !important;
    }
}


/* Mobile responsive stacked services cards */
@media (max-width: 991px) {
    .services-scroll-wrapper {
        height: auto !important;
        min-height: auto !important;
        padding-bottom: 3rem !important;
    }

    .services-scroll-container {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        min-height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
        overflow: visible !important;
        padding: 0 !important;
    }

    .service-stack-card {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        flex-direction: column !important;
        margin-bottom: 2rem !important;
        display: flex !important;
        border-radius: 16px !important;
        background: rgba(10, 18, 38, 0.75) !important;
    }

    .service-stack-card .card-visual-pane {
        width: 100% !important;
        height: 220px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    .service-stack-card .card-content-pane {
        width: 100% !important;
        height: auto !important;
        padding: 1.5rem 1.25rem !important;
        overflow: visible !important;
    }

    .service-stack-card .seq-item {
        opacity: 1 !important;
        transform: none !important;
    }

    .service-story-title {
        font-size: 1.6rem !important;
    }

    .service-story-desc {
        font-size: 0.92rem !important;
        line-height: 1.55 !important;
    }

    .service-bullets {
        grid-template-columns: 1fr !important;
    }

    .story-stat-card {
        padding: 0.65rem !important;
    }
}


/* ==========================================================================
   ENTERPRISE SERVICES MODULES GRID & SHOWCASE
   ========================================================================== */
.services-section {
    position: relative;
    padding: 7rem 0 6rem 0;
    min-height: 100vh;
    background: #050814;
    overflow: hidden;
}

.services-ambient-glow {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 210, 255, 0.08) 0%, rgba(0, 102, 255, 0.04) 50%, transparent 70%);
    filter: blur(80px);
    pointer-events: none;
}

.services-header-wrap {
    max-width: 850px;
    margin: 0 auto 3.5rem auto;
}

.services-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 5vw, 3.4rem);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.15;
    margin: 1rem 0 1rem 0;
}

.services-main-subtitle {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 auto;
}

/* Category Filter Bar */
.services-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 2rem;
}

.svc-filter-pill {
    background: rgba(10, 18, 38, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: all 0.25s ease;
}

.svc-filter-pill i {
    width: 14px;
    height: 14px;
}

.svc-filter-pill:hover {
    color: #ffffff;
    border-color: rgba(0, 210, 255, 0.35);
    background: rgba(15, 25, 52, 0.9);
}

.svc-filter-pill.active {
    background: linear-gradient(135deg, rgba(0, 210, 255, 0.2), rgba(0, 102, 255, 0.25)) !important;
    border-color: var(--accent-cyan) !important;
    color: #ffffff !important;
    box-shadow: 0 0 18px rgba(0, 210, 255, 0.25) !important;
}

/* Services Grid Layout */
.services-modules-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 4rem;
}

.service-module-card {
    background: rgba(10, 18, 38, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}

.service-module-card:hover {
    transform: translateY(-5px);
    border-color: var(--mod-accent, rgba(0, 210, 255, 0.4));
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 210, 255, 0.12);
}

.module-card-media {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
    background: #02040a;
}

.module-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
}

.module-media-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(10, 18, 38, 0.95) 100%);
    pointer-events: none;
}

.module-status-badge {
    position: absolute;
    bottom: 12px;
    left: 14px;
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    font-weight: 700;
    color: #ffffff;
    background: rgba(5, 8, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 3px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(8px);
}

.module-card-body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.module-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
}

.module-category-tag {
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.module-sys-label {
    font-family: var(--font-mono, monospace);
    font-size: 0.68rem;
    color: var(--text-muted);
}

.module-title {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
}

.module-desc {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.25rem 0;
}

.module-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.check-item {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.check-item i {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.module-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 1.5rem;
}

.mod-stat-box {
    background: rgba(5, 8, 20, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 10px 12px;
}

.mod-stat-box strong {
    display: block;
    font-family: var(--font-mono, monospace);
    font-size: 0.88rem;
    font-weight: 800;
    color: #ffffff;
}

.mod-stat-box small {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.module-card-footer {
    display: flex;
}

.module-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9rem;
    border-radius: 8px;
}

/* Services Bottom CTA */
.services-bottom-cta {
    background: linear-gradient(135deg, rgba(7, 18, 37, 0.9) 0%, rgba(13, 30, 61, 0.9) 100%);
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 16px;
    padding: 3.5rem 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.4);
    margin-top: 2rem;
}

.services-bottom-cta h2 {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 1rem 0;
}

.services-bottom-cta p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 2rem 0;
}

/* Light Theme Overrides for Services */
body.light-theme .services-section {
    background: #f4f8fc !important;
}

body.light-theme .services-main-title {
    color: #071225 !important;
}

body.light-theme .services-main-subtitle {
    color: #334155 !important;
}

body.light-theme .svc-filter-pill {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

body.light-theme .svc-filter-pill:hover {
    background: #f1f5f9 !important;
    color: #071225 !important;
    border-color: #0066cc !important;
}

body.light-theme .svc-filter-pill.active {
    background: #0066cc !important;
    border-color: #0066cc !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 102, 204, 0.25) !important;
}

body.light-theme .service-module-card {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

body.light-theme .service-module-card:hover {
    border-color: #0066cc !important;
    box-shadow: 0 16px 36px rgba(0, 102, 204, 0.15) !important;
}

body.light-theme .module-title {
    color: #071225 !important;
}

body.light-theme .module-desc,
body.light-theme .check-item {
    color: #334155 !important;
}

body.light-theme .module-sys-label {
    color: #64748b !important;
}

body.light-theme .mod-stat-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

body.light-theme .mod-stat-box strong {
    color: #071225 !important;
}

body.light-theme .mod-stat-box small {
    color: #64748b !important;
}

body.light-theme .services-bottom-cta {
    background: linear-gradient(135deg, #071225 0%, #0d1e3d 100%) !important;
    border: 1px solid rgba(0, 102, 204, 0.3) !important;
}

body.light-theme .services-bottom-cta h2 {
    color: #ffffff !important;
}

body.light-theme .services-bottom-cta p {
    color: rgba(241, 245, 249, 0.88) !important;
}

/* Responsive Breakpoints for Services */
@media (max-width: 992px) {
    .services-modules-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .services-section {
        padding: 5.5rem 0 4rem 0;
    }
    .services-bottom-cta h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 600px) {
    .module-card-media {
        height: 190px;
    }
    .module-card-body {
        padding: 1.25rem;
    }
    .module-title {
        font-size: 1.25rem;
    }
    .services-filter-bar {
        gap: 6px;
    }
    .svc-filter-pill {
        padding: 6px 12px;
        font-size: 0.76rem;
    }
    .services-bottom-cta {
        padding: 2.5rem 1.25rem;
    }
}