/* ===== DESIGN SYSTEM - Professional Fit-to-Screen ===== */
/* AuditArmour - Quality Management System */
/* Converted from monolithic HTML to modular CSS */
/* Universal responsive design for Mobile, Tablet, and Laptop */

:root {
    /* Primary Colors */
    --primary-600: #0052CC;
    --primary-500: #0066FF;
    --primary-400: #3385FF;
    --primary-100: #E6F0FF;

    /* Accent Colors */
    --accent-600: #008080;
    --accent-500: #00A3A3;
    --accent-400: #00C4C4;
    --accent-100: #E6F7F7;

    /* Success Colors */
    --success-600: #16a34a;
    --success-500: #22c55e;
    --success-100: #dcfce7;

    /* Neutral Colors */
    --neutral-900: #1a202c;
    --neutral-700: #374151;
    --neutral-500: #64748b;
    --neutral-300: #cbd5e0;
    --neutral-100: #f8fafc;
    --white: #ffffff;

    /* Universal Responsive Spacing - uses vmin for consistent scaling */
    --space-xs: clamp(0.125rem, 0.5vmin, 0.25rem);
    --space-sm: clamp(0.25rem, 1vmin, 0.5rem);
    --space-md: clamp(0.5rem, 1.5vmin, 1rem);
    --space-lg: clamp(0.75rem, 2vmin, 1.5rem);
    --space-xl: clamp(1rem, 3vmin, 2rem);

    /* Universal Responsive Typography - vmin for proportional scaling */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: clamp(0.55rem, 1.4vmin, 0.75rem);
    --font-size-sm: clamp(0.65rem, 1.6vmin, 0.875rem);
    --font-size-base: clamp(0.75rem, 1.8vmin, 1rem);
    --font-size-lg: clamp(0.85rem, 2vmin, 1.125rem);
    --font-size-xl: clamp(0.95rem, 2.2vmin, 1.25rem);
    --font-size-2xl: clamp(1.05rem, 2.6vmin, 1.5rem);
    --font-size-3xl: clamp(1.2rem, 3.2vmin, 1.875rem);
    --font-size-4xl: clamp(1.4rem, 4vmin, 2.25rem);

    /* Border Radius - vmin based */
    --radius-sm: clamp(0.2rem, 0.6vmin, 0.375rem);
    --radius-md: clamp(0.3rem, 0.8vmin, 0.5rem);
    --radius-lg: clamp(0.4rem, 1.2vmin, 0.75rem);
    --radius-xl: clamp(0.5rem, 1.5vmin, 1rem);
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);

    /* Layout - Universal Responsive using vmin */
    --nav-height: clamp(40px, 8vmin, 65px);
    --slide-padding: clamp(0.4rem, 2vmin, 1.25rem);
    --slide-padding-x: clamp(0.5rem, 2.5vmin, 2rem);

    /* Calculated Heights */
    --content-height: calc(100vh - var(--nav-height));

    /* Safe area insets for notched devices */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
}

/* Universal box sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    font-family: var(--font-family);
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2942 100%);
    color: var(--neutral-900);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-size: var(--font-size-base);
}

/* ===== NAVIGATION BAR - Responsive ===== */
.nav-bar {
    background: var(--white);
    box-shadow: var(--shadow-md);
    padding: 0 var(--slide-padding-x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    border-bottom: clamp(2px, 0.4vh, 3px) solid var(--primary-600);
    height: var(--nav-height);
}

.logo-section {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo {
    width: clamp(30px, 5vh, 40px);
    height: clamp(30px, 5vh, 40px);
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 900;
    font-size: var(--font-size-lg);
    box-shadow: var(--shadow-sm);
}

.title-text {
    display: flex;
    flex-direction: column;
}

.title {
    font-size: var(--font-size-lg);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.subtitle-nav {
    font-size: var(--font-size-xs);
    color: var(--neutral-500);
    font-weight: 600;
}

.nav-controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.btn {
    padding: clamp(0.3rem, 0.8vh, 0.5rem) clamp(0.6rem, 1.5vw, 1rem);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-sm);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: var(--white);
}

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

.btn-secondary {
    background: linear-gradient(135deg, var(--neutral-700), var(--neutral-900));
    color: var(--white);
}

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

.btn:disabled {
    background: var(--neutral-300);
    cursor: not-allowed;
    transform: none;
}

/* Focus states for accessibility */
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.3);
}

.btn:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* Region filter buttons */
.region-btn {
    background: linear-gradient(135deg, var(--neutral-200), var(--neutral-100));
    color: var(--neutral-700);
    border: 2px solid var(--neutral-300);
    padding: clamp(0.4rem, 1vh, 0.6rem) clamp(0.8rem, 2vw, 1.2rem);
    font-size: var(--font-size-sm);
}

.region-btn:hover {
    background: linear-gradient(135deg, var(--primary-100), var(--primary-50));
    border-color: var(--primary-400);
    color: var(--primary-700);
    transform: translateY(-2px);
}

.region-btn.active {
    background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
    color: var(--white);
    border-color: var(--primary-600);
    box-shadow: var(--shadow-md);
}

.region-filter {
    padding: var(--space-sm);
    background: var(--neutral-100);
    border-radius: var(--radius-lg);
}

/* Customer cards styles moved to customers-cards-container section */

.slide-counter {
    font-weight: 700;
    color: var(--primary-600);
    font-size: var(--font-size-sm);
    padding: clamp(0.2rem, 0.5vh, 0.4rem) clamp(0.5rem, 1vw, 0.8rem);
    background: var(--primary-100);
    border-radius: var(--radius-md);
}

/* ===== MAIN CONTAINER - Fit to Screen Vertically & Horizontally ===== */
.container {
    max-width: 100vw;
    width: 100vw;
    margin: 0;
    padding: 0;
    padding-top: var(--nav-height);
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

.slide-wrapper {
    background: var(--white);
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.slide-wrapper > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.slide-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #0052CC, #00A3A3, #0066FF, #00A3A3, #0052CC);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Title Slide */
.title-slide {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--neutral-900);
    text-align: center;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.title-slide::before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(0,82,204,0.08) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: float 25s linear infinite;
}

@keyframes float {
    from { transform: translate(0, 0); }
    to { transform: translate(-60px, -60px); }
}

.pharma-icon-bg {
    position: absolute;
    font-size: 250px;
    opacity: 0.08;
    animation: rotate 30s linear infinite;
}

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

.title-slide-content {
    position: relative;
    z-index: 2;
}

.title-slide h1 {
    font-size: clamp(2.5rem, 6vh, 4rem);
    font-weight: 900;
    margin-bottom: clamp(0.5rem, 1.5vh, 1rem);
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -2px;
    animation: fadeInUp 0.8s ease-out;
}

.title-slide .subtitle {
    font-size: clamp(1.2rem, 2.5vh, 1.8rem);
    margin-bottom: clamp(1rem, 2vh, 2rem);
    font-weight: 500;
    color: var(--neutral-700);
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.title-slide .tagline {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100));
    backdrop-filter: blur(12px);
    padding: clamp(0.6rem, 1.5vh, 1rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-full);
    font-size: clamp(1rem, 2vh, 1.35rem);
    font-weight: 700;
    color: var(--primary-600);
    border: 2px solid var(--primary-400);
    box-shadow: var(--shadow-lg);
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.title-slide .meeting-info {
    margin-top: clamp(1rem, 2vh, 1.5rem);
    font-size: clamp(0.9rem, 1.5vh, 1.1rem);
    background: var(--neutral-100);
    color: var(--neutral-700);
    padding: clamp(0.5rem, 1vh, 0.8rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--neutral-300);
    animation: fadeInUp 0.8s ease-out 0.6s both;
}

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

.badge-row {
    display: flex;
    gap: clamp(0.8rem, 2vw, 1.5rem);
    justify-content: center;
    margin-top: clamp(1rem, 2vh, 2rem);
    flex-wrap: wrap;
}

.badge-item {
    background: var(--white);
    padding: clamp(0.6rem, 1.2vh, 1rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--neutral-300);
    animation: fadeInUp 0.8s ease-out 0.8s both;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.badge-item .badge-value {
    font-size: clamp(1.2rem, 2.5vh, 1.5rem);
    font-weight: 900;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-item .badge-label {
    font-size: clamp(0.7rem, 1.2vh, 0.9rem);
    color: var(--neutral-500);
}

/* ===== MODERN TITLE SLIDE ENHANCEMENTS ===== */

.title-slide-modern {
    background: #ffffff;
}

.title-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.title-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.15;
    animation: nexgen-float 20s ease-in-out infinite;
    filter: blur(40px);
}

.title-shape-1 {
    width: clamp(300px, 50vw, 600px);
    height: clamp(300px, 50vw, 600px);
    background: linear-gradient(135deg, var(--primary-400), var(--accent-400));
    top: -20%;
    right: -10%;
}

.title-shape-2 {
    width: clamp(200px, 35vw, 450px);
    height: clamp(200px, 35vw, 450px);
    background: linear-gradient(135deg, var(--accent-500), var(--primary-500));
    bottom: -15%;
    left: -5%;
    animation-delay: -7s;
}

.title-shape-3 {
    width: clamp(150px, 25vw, 350px);
    height: clamp(150px, 25vw, 350px);
    background: linear-gradient(135deg, var(--primary-600), var(--accent-400));
    top: 50%;
    left: 10%;
    animation-delay: -14s;
}

.title-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(0,82,204,0.08) 2px, transparent 2px),
        radial-gradient(circle at 80% 20%, rgba(0,163,163,0.08) 2px, transparent 2px),
        radial-gradient(circle at 40% 40%, rgba(0,82,204,0.05) 1px, transparent 1px),
        radial-gradient(circle at 60% 60%, rgba(0,163,163,0.05) 1px, transparent 1px);
    background-size: 100px 100px;
    animation: particle-drift 30s linear infinite;
}

@keyframes particle-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-100px, -100px); }
}

/* Logo Styling */
.title-logo-container {
    position: relative;
    display: inline-block;
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
}

.title-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0,82,204,0.2) 0%, transparent 70%);
    border-radius: 50%;
    animation: logo-glow 3s ease-in-out infinite;
}

@keyframes logo-glow {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

.title-logo {
    width: clamp(180px, 30vmin, 320px);
    height: auto;
    max-height: clamp(140px, 22vmin, 220px);
    border-radius: 16px;
    object-fit: contain;
    border: 2px solid var(--neutral-300);
    box-shadow: var(--shadow-xl);
    position: relative;
    z-index: 1;
    background: var(--white);
    padding: 12px;
    animation: animate-scale-in 0.6s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

.title-main {
    font-size: clamp(2.5rem, 6vh, 4rem) !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -2px;
    margin-bottom: clamp(0.5rem, 1vh, 0.8rem) !important;
    animation: animate-slide-up 0.6s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

/* Tagline styling */
.title-slide-modern .tagline {
    display: inline-flex;
    align-items: center;
    gap: clamp(0.5rem, 1.5vw, 1rem);
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100));
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 50px;
    border: 2px solid var(--primary-400);
    box-shadow: var(--shadow-lg);
    margin-bottom: clamp(1rem, 2vh, 1.5rem);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.tagline-item {
    font-size: clamp(1rem, 2.2vh, 1.4rem);
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-600);
}

.tagline-divider {
    font-size: clamp(1rem, 2vh, 1.2rem);
    opacity: 0.5;
    color: var(--accent-500);
}

/* Modern Badge Items */
.badge-item-modern {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 0.8rem);
    background: var(--white);
    padding: clamp(0.6rem, 1.2vh, 1rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: 16px;
    border: 1px solid var(--neutral-300);
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    animation: fadeInUp 0.8s ease-out 0.8s both;
}

.badge-item-modern:hover {
    background: var(--primary-100);
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.badge-icon-ring {
    width: clamp(36px, 6vmin, 48px);
    height: clamp(36px, 6vmin, 48px);
    background: linear-gradient(135deg, var(--primary-100), var(--accent-100));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--primary-400);
}

.badge-icon {
    font-size: clamp(1rem, 2.5vmin, 1.4rem);
}

.badge-content {
    text-align: left;
}

.badge-item-modern .badge-value {
    font-size: clamp(1.1rem, 2.5vh, 1.5rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge-item-modern .badge-label {
    font-size: clamp(0.6rem, 1.2vh, 0.8rem);
    color: var(--neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Meeting Info */
.meeting-info-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 1vw, 0.6rem);
}

.meeting-icon {
    font-size: clamp(1rem, 2vh, 1.3rem);
}

/* ===== CUSTOMERS PAGE STYLES ===== */

.customers-slide {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    overflow: hidden;
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1rem, 2.5vw, 2rem) !important;
}

.customers-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.customers-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.06;
    animation: nexgen-float 25s ease-in-out infinite;
}

.customers-shape-1 {
    width: clamp(250px, 45vw, 550px);
    height: clamp(250px, 45vw, 550px);
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    top: -15%;
    left: -10%;
}

.customers-shape-2 {
    width: clamp(200px, 35vw, 400px);
    height: clamp(200px, 35vw, 400px);
    background: linear-gradient(135deg, #00A3A3, #0066FF);
    bottom: -10%;
    right: -5%;
    animation-delay: -12s;
}

/* Customers Header */
.customers-header {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: clamp(0.6rem, 1.5vh, 1rem);
}

.customers-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
    padding: clamp(0.2rem, 0.4vh, 0.35rem) clamp(0.8rem, 2vw, 1.2rem);
    border-radius: 50px;
    font-size: clamp(0.55rem, 1.1vmin, 0.7rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: clamp(0.4rem, 0.8vh, 0.6rem);
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
    animation: nexgen-badge-glow 3s ease-in-out infinite;
}

.customers-title {
    font-size: clamp(1.3rem, 3.5vmin, 2.2rem);
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    line-height: 1.2;
}

.customers-title-icon {
    font-size: clamp(1.2rem, 3vmin, 1.8rem);
    animation: nexgen-icon-bounce 2s ease-in-out infinite;
}

.customers-highlight {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.customers-subtitle {
    font-size: clamp(0.7rem, 1.6vmin, 0.95rem);
    color: #64748b;
    margin-top: clamp(0.2rem, 0.5vh, 0.4rem);
    font-weight: 500;
}

/* Customer Cards Container - 5 cards per row */
.customers-cards-container,
.customers-slide .customers-cards-container,
.content-slide .customers-cards-container,
.content-slide.customers-slide .customers-cards-container,
#customerCardsContainer {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    grid-auto-rows: minmax(150px, auto) !important;
    gap: 15px !important;
    position: relative;
    z-index: 1;
    align-content: start;
    max-height: calc(100vh - var(--nav-height) - 260px);
    overflow-y: auto;
    padding: 15px 20px;
    width: 100% !important;
    box-sizing: border-box;
}

/* Force child cards to fill grid cells */
.customers-cards-container > *,
#customerCardsContainer > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}

/* Customer Card - Fixed width for 5-column grid */
.customer-card {
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    border-radius: clamp(14px, 2vmin, 18px);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(226, 232, 240, 0.8);
    animation: animate-slide-up 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
    transform: translateY(20px);
    min-height: clamp(160px, 22vmin, 200px);
    max-height: clamp(200px, 30vmin, 280px);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.customer-card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 45px rgba(0, 82, 204, 0.15),
                0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 82, 204, 0.4);
}

.customer-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0052CC, #00A3A3, #0066FF);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

.customer-card:hover .customer-card-glow {
    height: 5px;
}

.customer-card-inner {
    padding: clamp(1.2rem, 2.5vmin, 1.8rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.customer-card-icon-wrapper {
    position: relative;
    margin-bottom: clamp(0.6rem, 1.5vmin, 1rem);
}

.customer-card-icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(55px, 10vmin, 75px);
    height: clamp(55px, 10vmin, 75px);
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.12), rgba(0, 163, 163, 0.12));
    border-radius: 50%;
    animation: nexgen-pulse 3s ease-in-out infinite;
}

.customer-card-icon {
    font-size: clamp(2.2rem, 6vmin, 3.2rem);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.12));
    transition: transform 0.3s ease;
}

.customer-card:hover .customer-card-icon {
    transform: scale(1.15) rotate(8deg);
}

.customer-card-content {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.customer-card-title {
    font-size: clamp(1rem, 2.2vmin, 1.3rem);
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 clamp(0.4rem, 1vmin, 0.6rem) 0;
    line-height: 1.3;
}

.customer-card-divider {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #0052CC, #00A3A3);
    margin: 0 auto clamp(0.5rem, 1vmin, 0.8rem);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.customer-card:hover .customer-card-divider {
    width: 80px;
}

.customer-card-companies {
    font-size: clamp(0.75rem, 1.6vmin, 0.95rem);
    color: #64748b;
    line-height: 1.6;
    margin: 0;
    flex: 1;
}

/* Responsive Customer Cards - Grid Column Based */
@media (max-width: 1200px) {
    .customers-cards-container {
        grid-template-columns: repeat(5, 1fr) !important;
    }

    .customer-card {
        min-height: clamp(170px, 25vmin, 220px);
    }
}

@media (max-width: 992px) {
    .customers-cards-container {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: clamp(0.6rem, 1.2vmin, 1rem);
    }

    .customer-card {
        min-height: clamp(160px, 24vmin, 200px);
    }

    .customer-card-icon {
        font-size: clamp(1.8rem, 5vmin, 2.5rem);
    }
}

@media (max-width: 768px) {
    .customers-cards-container {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: clamp(0.5rem, 1vmin, 0.8rem);
    }

    .customer-card {
        min-height: clamp(150px, 22vmin, 180px);
    }

    .customer-card-inner {
        padding: clamp(0.8rem, 1.8vmin, 1.1rem);
    }

    .customer-card-icon {
        font-size: clamp(1.6rem, 4.5vmin, 2.2rem);
    }

    .customer-card-title {
        font-size: clamp(0.8rem, 1.7vmin, 1rem);
    }

    .customer-card-companies {
        font-size: clamp(0.6rem, 1.3vmin, 0.75rem);
    }
}

@media (max-width: 576px) {
    .customers-cards-container {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: clamp(0.4rem, 0.8vmin, 0.6rem);
    }

    .customer-card {
        min-height: clamp(140px, 20vmin, 170px);
    }
}

@media (max-width: 380px) {
    .customers-cards-container {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Region Filter Modern */
.region-filter-modern {
    position: relative;
    z-index: 1;
    margin-top: clamp(0.6rem, 1.2vh, 1rem);
    animation: animate-slide-up 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

.region-buttons-container {
    display: flex;
    justify-content: center;
    gap: clamp(0.4rem, 1vmin, 0.8rem);
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.8);
    padding: clamp(0.4rem, 1vmin, 0.6rem);
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(10px);
}

.region-btn-modern {
    display: flex;
    align-items: center;
    gap: clamp(0.2rem, 0.5vmin, 0.4rem);
    padding: clamp(0.4rem, 1vmin, 0.6rem) clamp(0.8rem, 1.5vmin, 1rem);
    background: transparent;
    border: 2px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    font-weight: 600;
}

.region-btn-modern:hover {
    background: rgba(0, 82, 204, 0.08);
    border-color: rgba(0, 82, 204, 0.2);
}

.region-btn-modern.active {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
}

.region-icon {
    font-size: clamp(0.9rem, 2vmin, 1.2rem);
}

.region-text {
    font-size: clamp(0.65rem, 1.4vmin, 0.85rem);
}

/* Global Presence Banner */
.global-presence-banner {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.5vmin, 1rem);
    background: white;
    padding: clamp(0.6rem, 1.5vmin, 1rem) clamp(1rem, 2.5vmin, 1.5rem);
    border-radius: clamp(10px, 1.5vmin, 14px);
    margin-top: clamp(0.6rem, 1.2vh, 1rem);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 20px rgba(0, 82, 204, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.8);
    animation: animate-scale-in 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

.presence-icon-ring {
    width: clamp(36px, 7vmin, 48px);
    height: clamp(36px, 7vmin, 48px);
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.1), rgba(0, 163, 163, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(0, 82, 204, 0.2);
}

.presence-icon {
    font-size: clamp(1.1rem, 3vmin, 1.5rem);
}

.presence-content {
    flex: 1;
}

.presence-title {
    font-size: clamp(0.8rem, 1.8vmin, 1rem);
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.presence-text {
    font-size: clamp(0.65rem, 1.4vmin, 0.8rem);
    color: #64748b;
    margin: clamp(0.1rem, 0.3vmin, 0.2rem) 0 0 0;
}

/* ===== CONTENT SLIDES - Professional Fit to Screen Vertically ===== */
.content-slide {
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.5rem, 3vw, 2.5rem);
    height: calc(100vh - var(--nav-height) - 10px);
    max-height: calc(100vh - var(--nav-height) - 10px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
}

.content-slide > * {
    flex-shrink: 0;
}

.content-slide > .grid,
.content-slide > .stats-grid,
.content-slide > .two-col {
    flex: 1;
    min-height: 0;
    max-height: calc(100vh - var(--nav-height) - 180px);
}

.slide-header {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: clamp(2px, 0.3vh, 3px) solid transparent;
    border-image: linear-gradient(90deg, var(--primary-600), var(--accent-500), var(--primary-500)) 1;
    flex-shrink: 0;
    text-align: center;
}

.slide-title {
    font-size: clamp(2.48rem, 5.6vh, 4.05rem);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: clamp(0.1rem, 0.3vh, 0.2rem);
    letter-spacing: -0.5px;
    line-height: 1.2;
    text-align: center;
}

.slide-subtitle {
    font-size: var(--font-size-xs);
    color: var(--neutral-500);
    font-weight: 600;
}

/* ===== GRID SYSTEM - Professional Fit to Screen ===== */
.grid {
    display: grid;
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
    flex: 1;
    overflow: visible;
    align-items: stretch;
    align-content: start;
    justify-content: center;
    max-height: 100%;
    min-height: 0;
    margin-top: 8px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
    grid-auto-rows: auto;
}
.grid-3 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-auto-rows: auto;
}
.grid-4 {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    grid-auto-rows: auto;
}
.grid-6 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    grid-auto-rows: auto;
}

/* Responsive grid adjustments */
@media (max-width: 1400px) {
    .grid-4 {
        grid-template-columns: repeat(3, minmax(200px, 1fr));
    }
}

@media (max-width: 1100px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
    }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ===== CARDS - Modern Header Style Design ===== */
.card {
    background: #ffffff;
    padding: 0;
    border-radius: clamp(12px, 2vmin, 18px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    text-align: center;
    box-sizing: border-box;
    color: #1e293b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: auto;
    min-height: fit-content;
}

/* Remove default pseudo-elements */
.card::before,
.card::after {
    display: none;
}

.card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 20px 45px rgba(0, 82, 204, 0.15),
                0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 82, 204, 0.3);
}

/* Card Header Tab - Gradient Header */
.card-header-tab,
.card > .card-icon:first-child {
    display: none;
}

/* New unified header for all cards */
.card {
    padding-top: 0;
}

.card .card-icon {
    background: linear-gradient(135deg, #0052CC 0%, #00A3A3 100%);
    color: white;
    padding: clamp(0.8rem, 1.5vmin, 1.2rem) clamp(1rem, 2vmin, 1.5rem);
    margin: 0;
    font-size: clamp(1.4rem, 3vmin, 1.8rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1vmin, 0.8rem);
    border-radius: clamp(11px, 1.8vmin, 16px) clamp(11px, 1.8vmin, 16px) 0 0;
    filter: none;
    flex-shrink: 0;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.card:hover .card-icon {
    transform: none;
    background: linear-gradient(135deg, #003d99 0%, #008585 100%);
}

.card-title {
    background: linear-gradient(135deg, #0052CC 0%, #00A3A3 100%);
    color: white !important;
    padding: clamp(0.8rem, 1.5vmin, 1.2rem) clamp(1rem, 2vmin, 1.5rem);
    margin: 0;
    font-size: clamp(0.9rem, 2vmin, 1.15rem) !important;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1vmin, 0.8rem);
    border-radius: clamp(11px, 1.8vmin, 16px) clamp(11px, 1.8vmin, 16px) 0 0;
    -webkit-text-fill-color: white;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.card:hover .card-title {
    background: linear-gradient(135deg, #003d99 0%, #008585 100%);
}

/* When card has both icon and title in header */
.card-header-tab {
    display: flex !important;
    background: linear-gradient(135deg, #0052CC 0%, #00A3A3 100%);
    color: white;
    padding: clamp(0.8rem, 1.5vmin, 1.2rem) clamp(1rem, 2vmin, 1.5rem);
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: clamp(0.5rem, 1vmin, 0.8rem);
    border-radius: clamp(11px, 1.8vmin, 16px) clamp(11px, 1.8vmin, 16px) 0 0;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.card:hover .card-header-tab {
    background: linear-gradient(135deg, #003d99 0%, #008585 100%);
}

.card-header-tab .card-icon {
    background: none;
    padding: 0;
    font-size: clamp(1.2rem, 2.5vmin, 1.6rem);
    border-radius: 0;
    width: auto;
}

.card-header-tab .card-title {
    background: none;
    padding: 0;
    font-size: clamp(0.95rem, 2vmin, 1.2rem) !important;
    border-radius: 0;
    width: auto;
    flex: 0;
}

/* Card Body/Content */
.card-text {
    padding: clamp(1rem, 2vmin, 1.5rem);
    font-size: clamp(0.8rem, 1.6vmin, 0.95rem);
    color: #475569;
    line-height: 1.6;
    flex: 1;
    text-align: center;
    background: white;
}

.card-text ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.card-text ul li {
    font-size: clamp(0.8rem, 1.6vmin, 0.95rem);
    margin-bottom: clamp(0.4rem, 0.8vmin, 0.6rem);
    line-height: 1.5;
    text-align: center;
    padding: clamp(0.3rem, 0.6vmin, 0.5rem) 0;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
    color: #475569;
}

.card-text ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.highlight-box {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
    padding: clamp(1.2rem, 2.5vh, 2rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: clamp(14px, 2vmin, 20px);
    margin: clamp(0.8rem, 1.5vh, 1.2rem) 0;
    box-shadow: 0 15px 40px rgba(0,82,204,0.35);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.highlight-box:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 20px 50px rgba(0,82,204,0.45);
}

.highlight-box::before {
    content: '⚡';
    position: absolute;
    right: -40px;
    top: -40px;
    font-size: clamp(80px, 12vh, 150px);
    opacity: 0.1;
    transition: transform 0.5s ease;
}

.highlight-box:hover::before {
    transform: rotate(15deg) scale(1.1);
}

.highlight-box h3 {
    font-size: clamp(1.2rem, 2.5vh, 1.8rem);
    font-weight: 800;
    margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    text-align: center;
}

.highlight-box p {
    font-size: clamp(1rem, 2vh, 1.3rem);
    line-height: 1.6;
    text-align: center;
}

/* Engaging Key Benefits Bar */
.key-benefits-bar {
    background: linear-gradient(135deg, #0052CC 0%, #00A3A3 100%);
    color: white;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 3vw, 2rem);
    border-radius: var(--radius-lg);
    margin-top: clamp(0.5rem, 1vh, 1rem);
    box-shadow: 0 clamp(8px, 1.5vh, 15px) clamp(25px, 4vh, 40px) rgba(0, 82, 204, 0.35);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.key-benefits-bar::before {
    content: '🎯';
    position: absolute;
    right: clamp(-30px, -4vw, -50px);
    top: clamp(-30px, -4vh, -50px);
    font-size: clamp(100px, 15vh, 150px);
    opacity: 0.1;
}

.key-benefits-title {
    font-size: clamp(1rem, 1.8vh, 1.4rem);
    font-weight: 800;
    margin-bottom: clamp(0.8rem, 1.2vh, 1rem);
    text-align: center;
    letter-spacing: 0.5px;
}

.key-benefits-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-items: center;
    align-items: center;
}

.key-benefit-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.7rem 1.4rem;
    border-radius: var(--radius-full);
    transition: all 0.3s ease;
    cursor: default;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 320px;
}

.key-benefit-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.key-benefit-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.key-benefit-item:nth-child(1) .key-benefit-icon { animation-delay: 0s; }
.key-benefit-item:nth-child(2) .key-benefit-icon { animation-delay: 0.5s; }
.key-benefit-item:nth-child(3) .key-benefit-icon { animation-delay: 1s; }
.key-benefit-item:nth-child(4) .key-benefit-icon { animation-delay: 1.5s; }

.key-benefit-text {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Responsive: stack on smaller screens */
@media (max-width: 1200px) {
    .key-benefits-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #16a34a;
    margin: clamp(0.5rem, 1vh, 0.8rem) 0;
    box-shadow: 0 4px 12px rgba(22,163,74,0.12);
    flex-shrink: 0;
    transition: all 0.3s ease;
    height: fit-content;
    min-width: clamp(280px, 40vw, 450px);
}

.info-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(22,163,74,0.2);
    border-color: #16a34a;
    cursor: pointer;
}

.info-card h3 {
    font-size: clamp(1.1rem, 2.2vh, 1.5rem);
    font-weight: 700;
    color: #16a34a;
    margin: 0 0 clamp(0.3rem, 0.8vh, 0.5rem) 0;
    text-align: center;
    line-height: 1.3;
}

.info-card p {
    margin: 0;
    font-size: clamp(0.95rem, 1.8vh, 1.2rem);
    line-height: 1.4;
    text-align: center;
}

.info-card .click-hint {
    font-size: clamp(0.75rem, 1.4vh, 0.9rem) !important;
    color: #16a34a !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    text-align: center !important;
    margin-top: clamp(0.3rem, 0.6vh, 0.5rem) !important;
    font-weight: 600 !important;
}

.info-card:hover .click-hint {
    opacity: 1 !important;
}

/* ===== STATS GRID - Large Professional Cards ===== */
.stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: stretch;
    justify-content: center;
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
    flex: 1;
    width: 100%;
}

.stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: clamp(1.5rem, 3vh, 2.5rem) clamp(2.5rem, 5vw, 4rem);
    border-radius: clamp(14px, 2vmin, 20px);
    text-align: center;
    border: 2px solid rgba(226, 232, 240, 0.8);
    position: relative;
    overflow: hidden;
    border-left: 6px solid var(--primary-600);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.15);
    min-width: clamp(240px, 28vw, 320px);
    min-height: clamp(120px, 18vh, 180px);
    cursor: pointer;
    flex: 1;
    max-width: 350px;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0052CC, #00A3A3, #0066FF);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
}

.stat-card:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(0, 82, 204, 0.3);
    box-shadow: 0 20px 50px rgba(0, 82, 204, 0.2);
}

.stat-card::after {
    content: "Click for details";
    position: absolute;
    bottom: 4px;
    font-size: 0.6rem;
    color: #0052CC;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-weight: 600;
}

.stat-card:hover::after {
    opacity: 0.8;
}

.stat-number {
    font-size: clamp(2.5rem, 5vh, 4rem);
    font-weight: 900;
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: clamp(1rem, 2vh, 1.4rem);
    color: var(--neutral-600);
    font-weight: 700;
}

.icon-badge {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--primary-600), var(--accent-500));
    color: var(--white);
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.5rem, 3vw, 2.5rem);
    border-radius: var(--radius-full);
    font-size: clamp(1rem, 2vh, 1.3rem);
    font-weight: 700;
    margin: clamp(0.2rem, 0.5vh, 0.4rem);
    box-shadow: 0 6px 20px rgba(0, 82, 204, 0.3);
    transition: all 0.25s ease;
    cursor: pointer;
}

.icon-badge:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 82, 204, 0.4);
}

ul {
    list-style: none;
    padding: 0;
}

ul li {
    padding: 0.3rem 0;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
}

ul li:before {
    content: none;
    display: none;
}

/* Cards should have no bullets and centered text */
.card ul,
.card ul li {
    list-style: none !important;
    padding-left: 0 !important;
    text-align: center !important;
}

.card ul li::before {
    content: none !important;
    display: none !important;
}

.benefit-list li:before {
    content: none;
    display: none;
}

.feature-box {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    padding: clamp(0.5rem, 1vh, 1rem);
    border-radius: var(--radius-lg);
    border: clamp(1px, 0.2vh, 2px) solid #e2e8f0;
    border-left: clamp(3px, 0.5vw, 5px) solid #0052CC;
    margin: 0;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.feature-box:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: #00A3A3;
}

.feature-box h3 {
    font-size: clamp(0.85rem, 1.5vh, 1.2rem);
    font-weight: 800;
    color: #0052CC;
    margin-bottom: clamp(0.3rem, 0.6vh, 0.6rem);
    text-align: center;
    flex-shrink: 0;
}

.two-col {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 1fr !important;
    gap: clamp(0.4rem, 0.8vw, 0.8rem) !important;
    margin: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
    flex: 1 !important;
    min-height: 0 !important;
}

.section-title {
    font-size: clamp(1rem, 2vh, 1.5rem);
    font-weight: 800;
    color: #0052CC;
    margin: clamp(0.3rem, 0.6vh, 0.6rem) 0;
    padding-bottom: clamp(0.2rem, 0.4vh, 0.4rem);
    border-bottom: clamp(2px, 0.3vh, 3px) solid #e2e8f0;
}

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

.animate {
    animation: slideIn 0.4s ease-out backwards;
}

/* Feature and Info card borders */
.feature-box {
    border-left: 4px solid #0052CC;
}

.info-card {
    border-left: 4px solid #16a34a;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-slide {
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 768px) {
    .title-slide h1 {
        font-size: 2.5rem;
    }

    .slide-title {
        font-size: 2.25rem;
    }

    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }

    .content-slide {
        padding: 1rem;
    }

    .nav-bar {
        padding: 0.5rem 1rem;
    }

    .logo {
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }

    .title {
        font-size: 1rem;
    }

    .subtitle-nav {
        display: none;
    }

    .card {
        padding: 1rem;
    }

    .card-icon {
        font-size: 2rem;
    }

    .card-title {
        font-size: 1rem;
    }

    .card-text {
        font-size: 0.85rem;
    }
}

@media print {
    .nav-bar { display: none; }
    .slide-wrapper { box-shadow: none; }
}

html {
    height: 100%;
    width: 100%;
}

/* Card text alignment */
.card {
    text-align: center;
}

.card ul {
    text-align: left;
    width: 100%;
}

.card-text {
    width: 100%;
}

/* Slide center variant */
.slide-center .card {
    text-align: center;
}

.slide-center .card ul {
    text-align: center;
    list-style: none;
    padding: 0;
}

.slide-center .card ul li {
    text-align: center;
    padding-left: 0;
}

/* Flow diagram styles */
.flow-container {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 0.5rem;
}

.flow-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    padding: 0.8rem 1rem;
    border-radius: 0.8rem;
    border-left: 4px solid #0052CC;
}

.flow-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.flow-title {
    font-weight: 700;
    color: #0052CC;
    font-size: 1rem;
}

.flow-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.flow-item {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.flow-arrow {
    text-align: center;
    color: #00A3A3;
    font-size: 1.5rem;
    font-weight: bold;
}

/* Phase timeline */
.phase-timeline {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(0.5rem, 1.2vw, 1rem) !important;
    flex: 1 !important;
    align-items: stretch !important;
    align-content: center !important;
    max-height: 100% !important;
}

.phase-card {
    background: #ffffff !important;
    background-image: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border-radius: var(--radius-lg) !important;
    padding: clamp(0.6rem, 1.2vh, 1rem) clamp(0.5rem, 1vw, 0.8rem) !important;
    border: 2px solid #e2e8f0 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.1) !important;
}

.phase-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(0,82,204,0.2) !important;
    border-color: #0052CC !important;
    cursor: pointer !important;
}

.phase-card .click-hint {
    font-size: clamp(0.5rem, 0.9vh, 0.7rem) !important;
    color: #0052CC !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    margin-top: auto !important;
    padding-top: clamp(0.3rem, 0.5vh, 0.5rem) !important;
    font-weight: 600 !important;
}

.phase-card:hover .click-hint {
    opacity: 1 !important;
}

.phase-number {
    background: linear-gradient(135deg, #0052CC, #00A3A3) !important;
    color: white !important;
    width: clamp(30px, 5vh, 45px) !important;
    height: clamp(30px, 5vh, 45px) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 900 !important;
    font-size: clamp(0.9rem, 1.8vh, 1.3rem) !important;
    margin: 0 auto clamp(0.3rem, 0.6vh, 0.6rem) !important;
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3) !important;
}

.phase-title {
    font-weight: 800 !important;
    color: #1a202c !important;
    font-size: clamp(0.75rem, 1.4vh, 1.1rem) !important;
    margin-bottom: clamp(0.2rem, 0.4vh, 0.4rem) !important;
}

.phase-duration {
    background: linear-gradient(135deg, #00A3A3, #0052CC) !important;
    color: white !important;
    padding: clamp(0.15rem, 0.3vh, 0.3rem) clamp(0.4rem, 0.8vw, 0.7rem) !important;
    border-radius: 20px !important;
    font-size: clamp(0.55rem, 1vh, 0.8rem) !important;
    font-weight: 700 !important;
    display: inline-block !important;
    margin-bottom: clamp(0.3rem, 0.6vh, 0.5rem) !important;
}

.phase-items {
    font-size: clamp(0.55rem, 1vh, 0.85rem) !important;
    color: #64748b !important;
    text-align: center !important;
    padding: 0 !important;
    width: 100% !important;
}

.phase-items ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.phase-items ul li {
    margin-bottom: clamp(0.15rem, 0.3vh, 0.25rem) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    padding-left: 0 !important;
}

.phase-items ul li::before {
    content: none !important;
    display: none !important;
}

/* Integration logos */
.integration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.integration-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    padding: 1rem;
    border-radius: 0.8rem;
    border: 2px solid #e2e8f0;
    text-align: center;
    transition: all 0.3s ease;
}

.integration-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,82,204,0.2);
    border-color: #00A3A3;
}

.integration-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.integration-name {
    font-weight: 700;
    color: #1a202c;
    font-size: 1rem;
}

/* Risk matrix */
.risk-matrix {
    display: grid;
    grid-template-columns: auto repeat(3, 1fr);
    gap: 2px;
    background: #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.5rem 0;
}

.risk-cell {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
}

.risk-header {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
}

.risk-low { background: #dcfce7; color: #166534; }
.risk-medium { background: #fef3c7; color: #92400e; }
.risk-high { background: #fed7aa; color: #c2410c; }
.risk-critical { background: #fecaca; color: #dc2626; }

/* Standards/Regulatory grid - 12 cards in 4x3 layout */
.standards-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: clamp(0.5rem, 1vh, 0.8rem) !important;
    flex: 1 !important;
    align-content: center !important;
    align-items: stretch !important;
    max-height: 100% !important;
    width: 100% !important;
    padding: clamp(0.3rem, 0.8vh, 0.8rem) !important;
}

.standard-card {
    background: #4a90d9 !important;
    background-image: linear-gradient(135deg, #4a90d9 0%, #5ba3e0 100%) !important;
    padding: clamp(0.5rem, 1vh, 0.8rem) clamp(0.6rem, 1.2vw, 1rem) !important;
    border-radius: 12px !important;
    text-align: center !important;
    color: #ffffff !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(74, 144, 217, 0.4) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
}

.standard-card:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(74, 144, 217, 0.6) !important;
    background: #5ba3e0 !important;
    background-image: linear-gradient(135deg, #5ba3e0 0%, #6db3f0 100%) !important;
}

.standard-code {
    font-size: clamp(2.4rem, 5vh, 3.6rem) !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    margin-bottom: clamp(0.2rem, 0.6vh, 0.6rem) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
}

.standard-icon {
    font-size: clamp(2.4rem, 5vh, 3.6rem) !important;
    margin-bottom: clamp(0.2rem, 0.6vh, 0.6rem) !important;
}

.standard-name {
    font-size: clamp(1.1rem, 2vh, 1.7rem) !important;
    font-weight: 700 !important;
    margin-bottom: clamp(0.1rem, 0.3vh, 0.4rem) !important;
    color: #ffffff !important;
}

.standard-body {
    font-size: clamp(1rem, 1.8vh, 1.5rem) !important;
    font-weight: 600 !important;
    background: rgba(255,255,255,0.25) !important;
    padding: clamp(0.2rem, 0.5vh, 0.4rem) clamp(0.6rem, 1.2vw, 1rem) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
}

/* Equal height grid for slide 14 */
.equal-height-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: repeat(2, 1fr) !important;
    gap: 1rem !important;
    height: auto !important;
    flex: 1 !important;
}

.equal-card {
    min-height: 180px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.equal-card .card-icon {
    height: 3rem !important;
    margin-bottom: 0.5rem !important;
}

.equal-card .card-title {
    margin-bottom: 0.5rem !important;
}

.equal-card .card-text {
    flex: 1 !important;
}

.equal-card .card-text ul li {
    padding: 0.2rem 0 0.2rem 1.5rem !important;
    font-size: 0.9rem !important;
}

/* IIoT Grid - 4 equal cards in 2x2 layout */
.iiot-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: 0.8rem !important;
    flex: 1 !important;
    align-content: start !important;
}

.iiot-card {
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    padding: clamp(1rem, 1.8vh, 1.4rem) clamp(1.2rem, 2vw, 1.6rem) !important;
}

.iiot-card .card-icon {
    font-size: clamp(1.8rem, 3.5vh, 2.2rem) !important;
    margin-bottom: 0.5rem !important;
}

.iiot-card .card-title {
    font-size: clamp(1rem, 2vh, 1.2rem) !important;
    margin-bottom: 0.4rem !important;
}

.iiot-card .card-text {
    font-size: clamp(0.75rem, 1.4vh, 0.9rem) !important;
    text-align: left !important;
    padding: 0 !important;
}

.iiot-card:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow: 0 12px 30px rgba(0,82,204,0.25) !important;
    border-color: #00A3A3 !important;
}

.iiot-card::after {
    content: none !important;
}

.iiot-card .card-text {
    flex: 1 !important;
    width: 100% !important;
    text-align: left !important;
}

.iiot-card .card-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.iiot-card .card-text ul li {
    position: relative !important;
    padding: 0.15rem 0 0.15rem 1.1em !important;
    font-size: clamp(0.75rem, 1.3vh, 0.9rem) !important;
    line-height: 1.4 !important;
    color: #475569 !important;
}

.iiot-card .card-text ul li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: #0052CC !important;
    font-weight: bold !important;
}

.iiot-card .card-text ul li strong {
    color: #1e293b !important;
    font-weight: 700 !important;
}

/* Benefits grid for slide 15 - 6 equal cards */
.benefits-grid {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 2vh, 1.5rem);
    flex: 1;
    align-content: center;
    align-items: flex-start;
    justify-content: center;
}

.benefits-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(1.5rem, 2.5vh, 2rem);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-radius: var(--radius-lg);
    border: 1px solid #e2e8f0;
    width: auto;
    min-width: 300px;
    flex: 0 0 auto;
}

.benefits-card .card-icon {
    font-size: 48px;
    margin-bottom: 0.8rem;
}

.benefits-card .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #1e293b;
    text-align: center;
}

.benefits-card .card-text {
    width: 100%;
    text-align: center;
}

.benefits-card .card-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.benefits-card .card-text ul li {
    padding: 0.3rem 0;
    font-size: 16px;
    line-height: 1.5;
    color: #475569;
    text-align: center;
}

/* ===== WHY NEXGENSIS SECTION - Modern Industry-Level Design ===== */

/* Slide Container */
.why-nexgensis-slide {
    position: relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    overflow: hidden;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1rem, 3vw, 2rem) !important;
}

/* Animated Background Shapes */
.nexgen-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.nexgen-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    animation: nexgen-float 20s ease-in-out infinite;
}

.nexgen-shape-1 {
    width: clamp(200px, 40vw, 500px);
    height: clamp(200px, 40vw, 500px);
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    top: -10%;
    right: -5%;
    animation-delay: 0s;
}

.nexgen-shape-2 {
    width: clamp(150px, 30vw, 400px);
    height: clamp(150px, 30vw, 400px);
    background: linear-gradient(135deg, #00A3A3, #0066FF);
    bottom: -10%;
    left: -5%;
    animation-delay: -7s;
}

.nexgen-shape-3 {
    width: clamp(100px, 20vw, 300px);
    height: clamp(100px, 20vw, 300px);
    background: linear-gradient(135deg, #0066FF, #0052CC);
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -14s;
}

@keyframes nexgen-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(20px, -20px) scale(1.05); }
    50% { transform: translate(-10px, 20px) scale(0.95); }
    75% { transform: translate(-20px, -10px) scale(1.02); }
}

/* Header Section */
.nexgen-header {
    text-align: center;
    position: relative;
    z-index: 1;
    margin-bottom: clamp(0.8rem, 2vh, 1.5rem);
}

.nexgen-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    color: white;
    padding: clamp(0.25rem, 0.5vh, 0.4rem) clamp(0.8rem, 2vw, 1.2rem);
    border-radius: 50px;
    font-size: clamp(0.6rem, 1.2vmin, 0.75rem);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3);
    animation: nexgen-badge-glow 3s ease-in-out infinite;
}

@keyframes nexgen-badge-glow {
    0%, 100% { box-shadow: 0 4px 15px rgba(0, 82, 204, 0.3); }
    50% { box-shadow: 0 4px 25px rgba(0, 82, 204, 0.5); }
}

.nexgen-title {
    font-size: clamp(1.5rem, 4vmin, 2.5rem);
    font-weight: 800;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 1vw, 0.6rem);
    line-height: 1.2;
}

.nexgen-title-icon {
    font-size: clamp(1.3rem, 3.5vmin, 2.2rem);
    animation: nexgen-icon-bounce 2s ease-in-out infinite;
}

@keyframes nexgen-icon-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.nexgen-highlight {
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.nexgen-subtitle {
    font-size: clamp(0.75rem, 1.8vmin, 1rem);
    color: #64748b;
    margin-top: clamp(0.3rem, 0.8vh, 0.5rem);
    font-weight: 500;
}

/* Cards Container */
.nexgen-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.8rem, 2vmin, 1.5rem);
    position: relative;
    z-index: 1;
    margin-bottom: clamp(0.8rem, 2vh, 1.5rem);
}

/* Individual Cards */
.nexgen-card {
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    border-radius: clamp(12px, 2vmin, 20px);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(226, 232, 240, 0.8);
    animation: animate-slide-up 0.6s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
    transform: translateY(30px);
}

.nexgen-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 82, 204, 0.15),
                0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 82, 204, 0.3);
}

.nexgen-card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0052CC, #00A3A3, #0066FF);
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    opacity: 0.8;
}

.nexgen-card:hover .nexgen-card-glow {
    height: 5px;
    opacity: 1;
}

.nexgen-card-inner {
    padding: clamp(1rem, 2.5vmin, 1.8rem);
    text-align: center;
}

.nexgen-card-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(0.5rem, 1.5vmin, 1rem);
}

.nexgen-card-icon-bg {
    position: absolute;
    width: clamp(50px, 10vmin, 80px);
    height: clamp(50px, 10vmin, 80px);
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.1), rgba(0, 163, 163, 0.1));
    border-radius: 50%;
    animation: nexgen-pulse 3s ease-in-out infinite;
}

@keyframes nexgen-pulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.15); opacity: 0.3; }
}

.nexgen-card-icon {
    font-size: clamp(2rem, 6vmin, 3.5rem);
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s ease;
}

.nexgen-card:hover .nexgen-card-icon {
    transform: scale(1.15) rotate(5deg);
}

.nexgen-card-title {
    font-size: clamp(0.9rem, 2.2vmin, 1.25rem);
    font-weight: 700;
    color: #1e293b;
    margin-bottom: clamp(0.4rem, 1vmin, 0.8rem);
    line-height: 1.3;
}

.nexgen-card-divider {
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #0052CC, #00A3A3);
    margin: 0 auto clamp(0.5rem, 1.2vmin, 0.8rem);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.nexgen-card:hover .nexgen-card-divider {
    width: 80px;
}

.nexgen-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.nexgen-card-list li {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 1vmin, 0.6rem);
    padding: clamp(0.3rem, 0.8vmin, 0.5rem) 0;
    font-size: clamp(0.7rem, 1.6vmin, 0.9rem);
    color: #475569;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.nexgen-card-list li:last-child {
    border-bottom: none;
}

.nexgen-card:hover .nexgen-card-list li {
    color: #1e293b;
    transform: translateX(5px);
}

.nexgen-list-icon {
    font-size: clamp(0.8rem, 1.8vmin, 1.1rem);
    flex-shrink: 0;
}

.nexgen-card-arrow {
    position: absolute;
    bottom: clamp(0.5rem, 1.5vmin, 1rem);
    right: clamp(0.5rem, 1.5vmin, 1rem);
    width: clamp(24px, 4vmin, 32px);
    height: clamp(24px, 4vmin, 32px);
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: clamp(0.8rem, 1.8vmin, 1rem);
    font-weight: bold;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.nexgen-card:hover .nexgen-card-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Stats Section */
.nexgen-stats-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.8rem, 2vmin, 1.5rem);
    position: relative;
    z-index: 1;
}

.nexgen-stat {
    position: relative;
    background: white;
    border-radius: clamp(12px, 2vmin, 16px);
    padding: clamp(0.8rem, 2vmin, 1.2rem);
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1.5vmin, 1rem);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow: hidden;
    animation: animate-scale-in 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
    transform: scale(0.8);
}

.nexgen-stat:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0, 82, 204, 0.12);
    border-color: rgba(0, 82, 204, 0.3);
}

.nexgen-stat-icon-ring {
    width: clamp(40px, 8vmin, 55px);
    height: clamp(40px, 8vmin, 55px);
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.1), rgba(0, 163, 163, 0.15));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    border: 2px solid rgba(0, 82, 204, 0.2);
    transition: all 0.3s ease;
}

.nexgen-stat:hover .nexgen-stat-icon-ring {
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.2), rgba(0, 163, 163, 0.25));
    border-color: rgba(0, 82, 204, 0.4);
    transform: rotate(10deg);
}

.nexgen-stat-icon {
    font-size: clamp(1.2rem, 3.5vmin, 1.8rem);
}

.nexgen-stat-content {
    flex: 1;
    min-width: 0;
}

.nexgen-stat-number {
    font-size: clamp(1.5rem, 4vmin, 2.2rem);
    font-weight: 800;
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    line-height: 1.1;
}

.nexgen-stat-plus {
    font-size: clamp(1rem, 2.5vmin, 1.4rem);
    color: #00A3A3;
    -webkit-text-fill-color: #00A3A3;
}

.nexgen-stat-text {
    font-size: clamp(1rem, 2.5vmin, 1.4rem);
    font-weight: 700;
    color: #0052CC;
}

.nexgen-stat-locations {
    display: flex;
    align-items: center;
    gap: clamp(0.3rem, 0.8vmin, 0.5rem);
    flex-wrap: wrap;
}

.nexgen-location {
    font-size: clamp(0.8rem, 2vmin, 1.1rem);
    font-weight: 700;
    color: #0052CC;
}

.nexgen-location-dot {
    color: #00A3A3;
    font-weight: bold;
}

.nexgen-stat-label {
    font-size: clamp(0.65rem, 1.4vmin, 0.8rem);
    color: #64748b;
    font-weight: 600;
    margin-top: clamp(0.1rem, 0.3vmin, 0.2rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nexgen-stat-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 82, 204, 0.05), rgba(0, 163, 163, 0.05));
    border-radius: inherit;
    opacity: 0;
    animation: nexgen-stat-pulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nexgen-stat-pulse {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Animation Keyframes */
@keyframes animate-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes animate-scale-in {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes animate-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animate-fade-in {
    animation: animate-fade-in 0.8s ease-out forwards;
}

.animate-slide-up {
    animation: animate-slide-up 0.6s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

.animate-scale-in {
    animation: animate-scale-in 0.5s ease-out forwards;
    animation-delay: var(--delay, 0s);
    opacity: 0;
}

/* ===== RESPONSIVE DESIGN - Mobile First ===== */

/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
    .nexgen-cards-container {
        gap: clamp(0.6rem, 1.5vmin, 1rem);
    }

    .nexgen-stats-section {
        gap: clamp(0.6rem, 1.5vmin, 1rem);
    }
}

/* Tablets */
@media (max-width: 992px) {
    .why-nexgensis-slide {
        padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(0.8rem, 2vw, 1.5rem) !important;
    }

    .nexgen-cards-container {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.5rem, 1.2vmin, 0.8rem);
    }

    .nexgen-card-inner {
        padding: clamp(0.8rem, 2vmin, 1.2rem);
    }

    .nexgen-stats-section {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.5rem, 1.2vmin, 0.8rem);
    }

    .nexgen-stat {
        padding: clamp(0.6rem, 1.5vmin, 1rem);
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile Landscape & Small Tablets */
@media (max-width: 768px) {
    .why-nexgensis-slide {
        padding: clamp(0.6rem, 1.2vh, 1rem) clamp(0.6rem, 1.5vw, 1rem) !important;
    }

    .nexgen-header {
        margin-bottom: clamp(0.5rem, 1.2vh, 0.8rem);
    }

    .nexgen-title {
        font-size: clamp(1.2rem, 3.5vmin, 1.8rem);
        flex-wrap: wrap;
    }

    .nexgen-cards-container {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.4rem, 1vmin, 0.6rem);
        margin-bottom: clamp(0.5rem, 1.2vh, 0.8rem);
    }

    .nexgen-card-inner {
        padding: clamp(0.6rem, 1.5vmin, 1rem);
    }

    .nexgen-card-list li {
        font-size: clamp(0.6rem, 1.4vmin, 0.75rem);
        padding: clamp(0.2rem, 0.5vmin, 0.3rem) 0;
    }

    .nexgen-stats-section {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.4rem, 1vmin, 0.6rem);
    }

    .nexgen-stat {
        padding: clamp(0.5rem, 1.2vmin, 0.8rem);
        flex-direction: column;
        text-align: center;
        gap: clamp(0.3rem, 0.8vmin, 0.5rem);
    }

    .nexgen-stat-icon-ring {
        width: clamp(32px, 6vmin, 40px);
        height: clamp(32px, 6vmin, 40px);
    }
}

/* Mobile Portrait */
@media (max-width: 576px) {
    .why-nexgensis-slide {
        padding: clamp(0.5rem, 1vh, 0.8rem) clamp(0.5rem, 1vw, 0.8rem) !important;
    }

    .nexgen-badge {
        font-size: clamp(0.5rem, 1vmin, 0.65rem);
        padding: clamp(0.2rem, 0.4vh, 0.3rem) clamp(0.6rem, 1.5vw, 0.9rem);
    }

    .nexgen-title {
        font-size: clamp(1rem, 3vmin, 1.4rem);
    }

    .nexgen-subtitle {
        font-size: clamp(0.6rem, 1.4vmin, 0.8rem);
    }

    .nexgen-cards-container {
        grid-template-columns: 1fr;
        gap: clamp(0.4rem, 1vmin, 0.6rem);
    }

    .nexgen-card {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .nexgen-card-inner {
        display: flex;
        align-items: center;
        gap: clamp(0.5rem, 1.2vmin, 0.8rem);
        text-align: left;
        width: 100%;
    }

    .nexgen-card-icon-wrapper {
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .nexgen-card-icon-bg {
        width: clamp(36px, 8vmin, 48px);
        height: clamp(36px, 8vmin, 48px);
    }

    .nexgen-card-icon {
        font-size: clamp(1.4rem, 4vmin, 2rem);
    }

    .nexgen-card-title {
        font-size: clamp(0.8rem, 2vmin, 1rem);
        margin-bottom: clamp(0.2rem, 0.5vmin, 0.3rem);
    }

    .nexgen-card-divider {
        display: none;
    }

    .nexgen-card-list {
        display: none;
    }

    .nexgen-card-arrow {
        position: static;
        margin-left: auto;
        opacity: 1;
        transform: none;
    }

    .nexgen-stats-section {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.3rem, 0.8vmin, 0.5rem);
    }

    .nexgen-stat {
        padding: clamp(0.4rem, 1vmin, 0.6rem);
    }

    .nexgen-stat-number {
        font-size: clamp(1.2rem, 3vmin, 1.6rem);
    }

    .nexgen-stat-label {
        font-size: clamp(0.5rem, 1.2vmin, 0.65rem);
    }
}

/* Extra Small Devices */
@media (max-width: 380px) {
    .nexgen-stats-section {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .nexgen-stat-icon-ring {
        width: clamp(28px, 5vmin, 36px);
        height: clamp(28px, 5vmin, 36px);
    }

    .nexgen-stat-icon {
        font-size: clamp(0.9rem, 2.5vmin, 1.2rem);
    }

    /* Title Slide Mobile */
    .title-logo {
        width: clamp(120px, 25vmin, 200px);
        max-height: clamp(80px, 15vmin, 140px);
    }

    .title-main {
        font-size: clamp(1.8rem, 5vh, 2.5rem) !important;
    }

    .badge-row {
        flex-direction: column;
        gap: clamp(0.4rem, 1vh, 0.6rem);
    }

    .badge-item-modern {
        width: 100%;
        justify-content: center;
    }

    .region-buttons-container {
        flex-direction: column;
        border-radius: 16px;
    }

    .region-btn-modern {
        width: 100%;
        justify-content: center;
    }

    .global-presence-banner {
        flex-direction: column;
        text-align: center;
    }
}

/* Landscape Mode Optimizations */
@media (max-height: 500px) and (orientation: landscape) {
    /* Title Slide Landscape */
    .title-logo {
        width: clamp(100px, 18vmin, 160px);
        max-height: clamp(60px, 12vmin, 100px);
    }

    .title-logo-container {
        margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    }

    .title-main {
        font-size: clamp(1.5rem, 4vh, 2rem) !important;
    }

    .title-slide-modern .tagline {
        padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(1rem, 2vw, 1.5rem);
        margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    }

    .badge-row {
        margin-top: clamp(0.5rem, 1vh, 0.8rem);
    }

    .badge-item-modern {
        padding: clamp(0.3rem, 0.6vh, 0.5rem) clamp(0.6rem, 1.5vw, 1rem);
    }

    .badge-icon-ring {
        width: clamp(28px, 5vmin, 36px);
        height: clamp(28px, 5vmin, 36px);
    }

    /* Customers Slide Landscape */
    .customers-slide {
        padding: clamp(0.4rem, 0.8vh, 0.6rem) clamp(0.6rem, 1.5vw, 1rem) !important;
    }

    .customers-header {
        margin-bottom: clamp(0.3rem, 0.6vh, 0.5rem);
    }

    .customers-title {
        font-size: clamp(1rem, 2.5vmin, 1.4rem);
    }

    .customers-cards-container {
        max-height: calc(100vh - var(--nav-height) - 180px);
        gap: clamp(0.3rem, 0.8vmin, 0.5rem);
    }

    .customer-card-inner {
        padding: clamp(0.4rem, 1vmin, 0.6rem);
    }

    .customer-card-icon {
        font-size: clamp(1.2rem, 3.5vmin, 1.8rem);
    }

    .region-filter-modern {
        margin-top: clamp(0.3rem, 0.6vh, 0.5rem);
    }

    .region-btn-modern {
        padding: clamp(0.25rem, 0.6vmin, 0.4rem) clamp(0.5rem, 1vmin, 0.7rem);
    }

    .global-presence-banner {
        padding: clamp(0.4rem, 1vmin, 0.6rem) clamp(0.6rem, 1.5vmin, 1rem);
        margin-top: clamp(0.3rem, 0.6vh, 0.5rem);
    }

    .why-nexgensis-slide {
        padding: clamp(0.3rem, 0.8vh, 0.5rem) clamp(0.8rem, 2vw, 1.2rem) !important;
    }

    .nexgen-header {
        margin-bottom: clamp(0.3rem, 0.8vh, 0.5rem);
    }

    .nexgen-badge {
        margin-bottom: clamp(0.2rem, 0.5vh, 0.3rem);
    }

    .nexgen-title {
        font-size: clamp(1rem, 3vmin, 1.4rem);
    }

    .nexgen-subtitle {
        font-size: clamp(0.55rem, 1.3vmin, 0.7rem);
        margin-top: 0.2rem;
    }

    .nexgen-cards-container {
        grid-template-columns: repeat(3, 1fr);
        gap: clamp(0.3rem, 0.8vmin, 0.5rem);
        margin-bottom: clamp(0.3rem, 0.8vh, 0.5rem);
    }

    .nexgen-card-inner {
        padding: clamp(0.4rem, 1vmin, 0.6rem);
    }

    .nexgen-card-icon {
        font-size: clamp(1.2rem, 3.5vmin, 1.8rem);
    }

    .nexgen-card-title {
        font-size: clamp(0.7rem, 1.6vmin, 0.9rem);
    }

    .nexgen-card-list li {
        font-size: clamp(0.55rem, 1.2vmin, 0.7rem);
        padding: clamp(0.15rem, 0.4vmin, 0.25rem) 0;
    }

    .nexgen-stats-section {
        gap: clamp(0.3rem, 0.8vmin, 0.5rem);
    }

    .nexgen-stat {
        padding: clamp(0.3rem, 0.8vmin, 0.5rem);
    }

    .nexgen-stat-icon-ring {
        width: clamp(28px, 5vmin, 36px);
        height: clamp(28px, 5vmin, 36px);
    }

    .nexgen-stat-number {
        font-size: clamp(1rem, 2.5vmin, 1.4rem);
    }

    .nexgen-stat-label {
        font-size: clamp(0.5rem, 1.1vmin, 0.6rem);
    }
}

/* Core QMS Modules Grid for slide 5 - 6 equal cards in 3x2 layout */
.core-qms-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
    grid-template-rows: repeat(2, auto) !important;
    gap: clamp(0.6rem, 1.2vw, 1rem) !important;
    flex: 1 !important;
    align-items: stretch !important;
    align-content: start !important;
    justify-content: center !important;
    max-height: calc(100vh - var(--nav-height) - 150px) !important;
    min-height: 0 !important;
    padding: clamp(0.3rem, 0.6vh, 0.6rem) !important;
    overflow-y: auto !important;
}

@media (max-width: 1200px) {
    .core-qms-grid {
        grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
        grid-template-rows: auto !important;
    }
}

.core-qms-grid .core-qms-card.card {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: clamp(12px, 2vh, 20px) !important;
    box-shadow: 0 6px 25px rgba(0, 82, 204, 0.15) !important;
    border: none !important;
    background: #ffffff !important;
}

.core-qms-grid .core-qms-card.card::before {
    display: none !important;
}

.core-qms-grid .core-qms-card.card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 12px 40px rgba(0, 82, 204, 0.25) !important;
}

/* Card Header Tab */
.core-qms-grid .core-qms-card .card-header-tab {
    background: linear-gradient(135deg, #0052CC 0%, #00A3A3 100%) !important;
    padding: clamp(0.5rem, 1vh, 0.9rem) clamp(0.6rem, 1.2vw, 1rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(0.4rem, 0.8vw, 0.7rem) !important;
    border-radius: clamp(12px, 2vh, 20px) clamp(12px, 2vh, 20px) 0 0 !important;
}

.core-qms-grid .core-qms-card .card-icon {
    font-size: clamp(1.2rem, 2.2vh, 1.8rem) !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.core-qms-grid .core-qms-card .card-title {
    font-size: clamp(1.2rem, 2.2vh, 1.7rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1.2 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

/* Card Body */
.core-qms-grid .core-qms-card .card-text {
    flex: 1 !important;
    width: 100% !important;
    overflow: hidden !important;
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1rem, 2vw, 1.5rem) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
}

.core-qms-grid .core-qms-card .card-text ul {
    text-align: center !important;
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.core-qms-grid .core-qms-card .card-text ul li {
    font-size: clamp(0.88rem, 1.8vh, 1.28rem) !important;
    padding: clamp(0.25rem, 0.5vh, 0.4rem) 0 !important;
    line-height: 1.4 !important;
    color: #334155 !important;
    position: relative !important;
    font-weight: 600 !important;
}

.core-qms-grid .core-qms-card .card-text ul li::before {
    content: none !important;
}

/* QMS Overview Grid for slide 4 - 4 cards per row */
.qms-overview-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(1rem, 2vw, 1.5rem);
    flex: 1;
    align-items: stretch;
    justify-content: center;
    margin-top: clamp(8px, 1.5vh, 15px);
    width: 100%;
}

.qms-overview-grid .qms-overview-card.card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(0.8rem, 1.2vw, 1.2rem);
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto;
    min-height: clamp(180px, 22vh, 240px);
    max-height: none;
    background: linear-gradient(145deg, #ffffff 0%, #f0f4ff 100%);
    border-radius: 16px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.15);
    transition: all 0.3s ease;
}

.qms-overview-grid .qms-overview-card.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 82, 204, 0.25);
}

.qms-overview-grid .qms-overview-card .card-icon {
    font-size: clamp(28px, 5vh, 40px);
    margin-bottom: clamp(0.4rem, 1vh, 0.8rem);
    filter: drop-shadow(0 4px 8px rgba(0, 82, 204, 0.3));
}

.qms-overview-grid .qms-overview-card .card-title {
    font-size: clamp(12px, 1.8vh, 16px);
    font-weight: 700;
    margin-bottom: clamp(0.3rem, 0.6vh, 0.5rem);
    line-height: 1.3;
    color: #0052CC;
}

.qms-overview-grid .qms-overview-card .card-text {
    font-size: clamp(11px, 1.5vh, 14px);
    text-align: left;
    line-height: 1.5;
    color: #475569;
    width: 100%;
    flex: 1;
}

.qms-overview-grid .qms-overview-card .card-text ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.qms-overview-grid .qms-overview-card .card-text ul li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: clamp(0.3rem, 0.6vh, 0.5rem);
    font-size: clamp(11px, 1.4vh, 13px);
    color: #475569;
    line-height: 1.4;
}

.qms-overview-grid .qms-overview-card .card-text ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #0052CC;
    font-weight: bold;
}

.qms-overview-grid .qms-overview-card .card-text ul li:last-child {
    margin-bottom: 0;
}

.qms-overview-grid .qms-overview-card .card-text ul li strong {
    color: #1e293b;
    font-weight: 700;
}

/* Interactive Flow Slide Styles - Professional Fit to Screen */
.flow-slide {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f2942 100%) !important;
}

.interactive-flow-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: clamp(0.2rem, 0.5vh, 0.5rem) 0;
    flex: 1;
    min-height: 0;
    justify-content: center;
}

.flow-stage {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    padding: clamp(0.75rem, 1.9vh, 1.5rem) clamp(1.6rem, 5vw, 3.25rem);
    min-width: clamp(288px, 40vw, 450px);
    min-height: clamp(150px, 22.5vh, 225px);
    text-align: center;
    cursor: pointer;
    position: relative;
    border: clamp(2px, 0.4vh, 4px) solid #0052CC;
    box-shadow: 0 clamp(5px, 1.3vh, 10px) clamp(20px, 4vh, 32px) rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.flow-stage:hover {
    transform: scale(1.03);
    box-shadow: 0 clamp(8px, 2vh, 15px) clamp(25px, 5vh, 40px) rgba(0, 82, 204, 0.5);
    border-color: #00A3A3;
}

.flow-stage:hover .flow-pulse {
    animation: pulse-ring 1s ease-out infinite;
}

.flow-stage-central {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border-color: #16a34a !important;
    min-width: clamp(325px, 45vw, 525px);
    min-height: clamp(175px, 27.5vh, 275px);
    padding: clamp(0.88rem, 2vh, 1.6rem) clamp(2rem, 5.6vw, 4rem);
    box-shadow: 0 clamp(8px, 1.6vh, 13px) clamp(26px, 5vh, 45px) rgba(22, 163, 74, 0.5);
}

.flow-stage-central:hover {
    box-shadow: 0 clamp(12px, 2.5vh, 20px) clamp(30px, 6vh, 50px) rgba(22, 163, 74, 0.6);
    border-color: #15803d !important;
}

.flow-stage-central .flow-stage-title,
.flow-stage-central .flow-stage-subtitle {
    color: white !important;
}

.flow-stage-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: glow-rotate 4s linear infinite;
    pointer-events: none;
}

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

.flow-stage-icon {
    font-size: clamp(2rem, 4vh, 3.1rem);
    margin-bottom: clamp(0.25rem, 0.6vh, 0.5rem);
    position: relative;
    z-index: 1;
    line-height: 1;
}

.flow-stage-title {
    font-size: clamp(1.1rem, 2.1vh, 1.56rem);
    font-weight: 800;
    color: #0052CC;
    margin-bottom: clamp(0.25rem, 0.5vh, 0.5rem);
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0 0 clamp(0.25rem, 0.5vh, 0.5rem) 0;
}

.flow-stage-subtitle {
    font-size: clamp(0.94rem, 1.56vh, 1.25rem);
    font-weight: 600;
    color: #64748b;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.flow-stage-items {
    display: flex;
    gap: clamp(0.25rem, 0.6vw, 0.5rem);
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.flow-stage-items span {
    background: linear-gradient(135deg, #0052CC, #0066FF);
    color: white;
    padding: clamp(0.15rem, 0.35vh, 0.25rem) clamp(0.4rem, 1vw, 0.75rem);
    border-radius: var(--radius-full);
    font-size: clamp(0.65rem, 1.1vh, 0.9rem);
    font-weight: 600;
}

.flow-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 3px solid #0052CC;
    border-radius: 1rem;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}

.flow-pulse-central {
    border-color: #16a34a;
}

@keyframes pulse-ring {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
}

.flow-connector {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: clamp(20px, 4vh, 35px);
    position: relative;
}

.flow-line {
    width: clamp(3px, 0.5vw, 4px);
    height: clamp(15px, 3vh, 25px);
    background: linear-gradient(180deg, #0052CC, #00A3A3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.flow-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: flow-animation 1.5s ease-in-out infinite;
}

@keyframes flow-animation {
    0% { top: -100%; }
    100% { top: 200%; }
}

.flow-line-highlight {
    background: linear-gradient(180deg, #16a34a, #22c55e) !important;
    width: clamp(4px, 0.6vw, 6px);
}

.flow-arrow-icon {
    color: #0052CC;
    font-size: clamp(0.7rem, 1.3vh, 1rem);
    font-weight: bold;
    animation: bounce-arrow 1s ease-in-out infinite;
}

.flow-arrow-highlight {
    color: #16a34a !important;
    font-size: clamp(0.85rem, 1.6vh, 1.2rem);
}

@keyframes bounce-arrow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(2px); }
}

.flow-legend {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(0.5rem, 1vh, 1rem);
    padding: clamp(0.5rem, 1vh, 0.8rem) clamp(1rem, 2vw, 1.5rem);
    background: rgba(0, 82, 204, 0.08);
    border-radius: var(--radius-full);
    font-size: 24px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    color: #1a202c;
    font-size: 24px;
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot-blue {
    background: linear-gradient(135deg, #0052CC, #0066FF);
}

.legend-dot-green {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.legend-dot-animated {
    background: linear-gradient(135deg, #00A3A3, #0066FF);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
}

/* Horizontal Flow Slide (Slide 6) - Professional Fit to Screen */
.flow-slide-horizontal {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.horizontal-flow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: clamp(0.3rem, 0.8vh, 1rem) 0;
    flex-wrap: nowrap;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

.h-flow-stage {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    padding: clamp(0.8rem, 1.5vh, 1.4rem) clamp(0.8rem, 1.8vw, 1.5rem);
    min-width: clamp(100px, 13vw, 160px);
    width: clamp(100px, 13vw, 160px);
    height: clamp(120px, 18vh, 180px);
    text-align: center;
    cursor: pointer;
    border: clamp(2px, 0.3vh, 3px) solid #0052CC;
    box-shadow: 0 clamp(4px, 1vh, 8px) clamp(15px, 3vh, 25px) rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.h-flow-stage:hover {
    transform: scale(1.05);
    box-shadow: 0 clamp(8px, 2vh, 15px) clamp(25px, 5vh, 40px) rgba(0, 82, 204, 0.5);
}

.h-flow-stage-central {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border-color: #16a34a !important;
    min-width: clamp(110px, 15vw, 180px);
    width: clamp(110px, 15vw, 180px);
    height: clamp(120px, 18vh, 180px);
    position: relative;
    overflow: hidden;
}

.h-flow-stage-central .h-flow-title,
.h-flow-stage-central .h-flow-subtitle {
    color: white !important;
}

.h-flow-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: glow-rotate 4s linear infinite;
    pointer-events: none;
}

.h-flow-icon {
    font-size: clamp(1.5rem, 2.8vh, 2.4rem);
    margin-bottom: clamp(0.15rem, 0.4vh, 0.5rem);
    position: relative;
    z-index: 1;
    line-height: 1;
}

.h-flow-title {
    font-size: clamp(0.7rem, 1.3vh, 1.1rem);
    font-weight: 800;
    color: #0052CC;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.h-flow-subtitle {
    font-size: clamp(0.5rem, 0.85vh, 0.7rem);
    color: #64748b;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.h-flow-items {
    display: flex;
    flex-direction: column;
    gap: clamp(0.1rem, 0.2vh, 0.2rem);
    margin-top: clamp(0.15rem, 0.3vh, 0.3rem);
    position: relative;
    z-index: 1;
}

.h-flow-items span {
    background: linear-gradient(135deg, #0052CC, #0066FF);
    color: white;
    padding: clamp(0.08rem, 0.15vh, 0.15rem) clamp(0.25rem, 0.6vw, 0.5rem);
    border-radius: var(--radius-full);
    font-size: clamp(0.4rem, 0.75vh, 0.6rem);
    font-weight: 600;
}

.h-flow-connector {
    display: flex;
    align-items: center;
    padding: 0 clamp(0.1rem, 0.3vw, 0.3rem);
}

.h-flow-line {
    width: clamp(15px, 2.5vw, 25px);
    height: clamp(3px, 0.4vh, 4px);
    background: linear-gradient(90deg, #0052CC, #00A3A3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.h-flow-line::after {
    content: '';
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: h-flow-animation 1.5s ease-in-out infinite;
}

@keyframes h-flow-animation {
    0% { left: -100%; }
    100% { left: 200%; }
}

.h-flow-line-green {
    background: linear-gradient(90deg, #16a34a, #22c55e) !important;
}

.h-flow-arrow {
    color: #0052CC;
    font-size: clamp(0.7rem, 1.2vh, 1rem);
    font-weight: bold;
    animation: h-bounce-arrow 1s ease-in-out infinite;
}

.h-flow-arrow-green {
    color: #16a34a !important;
}

@keyframes h-bounce-arrow {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(2px); }
}

/* CAPA Flow Slide (Slide 7) - Professional Fit to Screen */
.capa-flow-slide {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.capa-horizontal-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.3rem, 0.8vw, 0.5rem);
    padding: clamp(0.2rem, 0.5vh, 0.5rem) 0;
    flex: 1;
    max-height: 100%;
    min-height: 0;
}

.capa-section {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    padding: clamp(0.8rem, 1.4vh, 1.2rem);
    min-width: clamp(150px, 18vw, 220px);
    cursor: default;
    border: clamp(2px, 0.3vh, 3px) solid #0052CC;
    box-shadow: 0 clamp(4px, 1vh, 8px) clamp(15px, 3vh, 25px) rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
}

.capa-section:hover {
    transform: scale(1.03);
    box-shadow: 0 clamp(8px, 2vh, 15px) clamp(25px, 5vh, 40px) rgba(0, 82, 204, 0.5);
}

.capa-outputs {
    border-color: #16a34a !important;
}

.capa-section-header {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 0.5vw, 0.5rem);
    margin-bottom: clamp(0.3rem, 0.6vh, 0.8rem);
    justify-content: center;
}

.capa-section-icon {
    font-size: 32px;
}

.capa-section-title {
    font-size: 18px;
    font-weight: 800;
    color: #0052CC;
}

.capa-items-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.capa-item {
    background: linear-gradient(135deg, #0052CC, #0066FF);
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.capa-item-clickable {
    cursor: pointer;
}

.capa-item-clickable:hover {
    transform: scale(1.05);
    box-shadow: 0 clamp(2px, 0.5vh, 4px) clamp(8px, 1.5vh, 15px) rgba(0, 82, 204, 0.5);
}

.capa-item-green {
    background: linear-gradient(135deg, #16a34a, #22c55e) !important;
}

.capa-item-green.capa-item-clickable:hover {
    box-shadow: 0 clamp(2px, 0.5vh, 4px) clamp(8px, 1.5vh, 15px) rgba(22, 163, 74, 0.5);
}

.capa-flow-arrow {
    display: flex;
    align-items: center;
}

.capa-arrow-line {
    width: clamp(18px, 3vw, 30px);
    height: clamp(3px, 0.4vh, 4px);
    background: linear-gradient(90deg, #0052CC, #00A3A3);
    border-radius: 2px;
}

.capa-arrow-head {
    color: #00A3A3;
    font-size: clamp(0.8rem, 1.5vh, 1.2rem);
    animation: h-bounce-arrow 1s ease-in-out infinite;
}

.capa-hub {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border-radius: 50%;
    width: clamp(180px, 28vh, 280px);
    height: clamp(180px, 28vh, 280px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 clamp(8px, 1.5vh, 14px) clamp(25px, 5vh, 45px) rgba(22, 163, 74, 0.5);
    transition: all 0.3s ease;
    text-align: center;
    padding: clamp(14px, 2vh, 24px);
    box-sizing: border-box;
}

.capa-hub:hover {
    transform: scale(1.08);
    box-shadow: 0 clamp(12px, 2.5vh, 20px) clamp(30px, 6vh, 50px) rgba(22, 163, 74, 0.6);
}

.capa-hub-glow {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: glow-rotate 4s linear infinite;
    pointer-events: none;
}

.capa-hub-icon {
    font-size: clamp(50px, 8vh, 70px);
    position: relative;
    z-index: 1;
    line-height: 1;
    margin-bottom: clamp(6px, 1vh, 10px);
}

.capa-hub-title {
    font-size: clamp(20px, 3.5vh, 32px);
    font-weight: 800;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.capa-hub-subtitle {
    font-size: clamp(14px, 2.5vh, 22px);
    color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.capa-hub-ring {
    position: absolute;
    top: clamp(-6px, -1vh, -10px);
    left: clamp(-6px, -1vh, -10px);
    right: clamp(-6px, -1vh, -10px);
    bottom: clamp(-6px, -1vh, -10px);
    border: clamp(2px, 0.3vh, 3px) solid rgba(255,255,255,0.3);
    border-radius: 50%;
    animation: pulse-ring 2s ease-out infinite;
}

.capa-connections {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.capa-connection-item {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border: 2px solid #0052CC;
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: #1a202c;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 82, 204, 0.15);
}

.capa-connection-item:hover {
    background: linear-gradient(135deg, #e6f0ff 0%, #d9e8ff 100%);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 82, 204, 0.25);
}

/* Module Detail Cards (Slides 8, 9) */
.module-detail-grid {
    gap: 1.5rem !important;
    align-items: stretch !important;
}

.module-detail-card {
    min-height: clamp(320px, 45vh, 400px) !important;
    padding: clamp(1.5rem, 3vh, 2rem) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
}

.module-detail-card::before {
    width: 6px !important;
}

.module-detail-card .card-icon {
    font-size: clamp(3rem, 6vh, 4rem) !important;
    margin-bottom: clamp(0.8rem, 1.5vh, 1.2rem) !important;
}

.module-detail-card .card-title {
    font-size: clamp(1.3rem, 2.5vh, 1.8rem) !important;
    margin-bottom: clamp(1rem, 2vh, 1.5rem) !important;
}

.module-detail-card .card-text {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
}

.module-detail-card .card-text ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

.module-detail-card .card-text ul li {
    padding: clamp(0.4rem, 0.8vh, 0.6rem) 0 !important;
    font-size: clamp(0.9rem, 1.6vh, 1.1rem) !important;
    color: #475569 !important;
    text-align: center !important;
    line-height: 1.4 !important;
}

.module-detail-card .card-text ul li strong {
    color: #0052CC !important;
    font-weight: 700 !important;
}

/* DMS Workflow Slide (Slide 11) */
.dms-workflow-slide {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.dms-workflow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(1rem, 2vh, 2rem) 0;
    flex: 1;
}

.dms-stage {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    padding: clamp(1.2rem, 2.5vh, 2rem) clamp(1rem, 2vw, 1.8rem);
    min-width: clamp(140px, 16vw, 220px);
    min-height: clamp(120px, 18vh, 180px);
    text-align: center;
    cursor: pointer;
    border: clamp(2px, 0.3vh, 3px) solid #0052CC;
    box-shadow: 0 clamp(6px, 1.2vh, 12px) clamp(15px, 3vh, 25px) rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.dms-stage:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 82, 204, 0.5);
}

.dms-stage-highlight {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border-color: #16a34a !important;
}

.dms-stage-highlight .dms-stage-title,
.dms-stage-highlight .dms-stage-desc {
    color: white !important;
}

.dms-stage-icon {
    font-size: clamp(2.2rem, 4vh, 3.5rem);
    margin-bottom: clamp(0.4rem, 0.8vh, 0.6rem);
}

.dms-stage-title {
    font-size: clamp(0.95rem, 1.8vh, 1.4rem);
    font-weight: 800;
    color: #0052CC;
    margin-bottom: clamp(0.2rem, 0.4vh, 0.3rem);
}

.dms-stage-desc {
    font-size: clamp(0.75rem, 1.4vh, 1.1rem);
    color: #64748b;
}

.dms-arrow {
    color: #00A3A3;
    font-size: clamp(1.2rem, 2.2vh, 1.8rem);
    font-weight: bold;
    animation: h-bounce-arrow 1s ease-in-out infinite;
}

.dms-features-row {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.2rem, 2.5vh, 2rem);
    flex-wrap: wrap;
}

.dms-feature {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border: 2px solid #0052CC;
    border-radius: var(--radius-full);
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #1a202c;
    font-size: clamp(0.9rem, 1.8vh, 1.2rem);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
}

.dms-feature:hover {
    background: linear-gradient(135deg, #e6f0ff 0%, #d9e8ff 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 82, 204, 0.25);
}

/* LMS Workflow Slide (Slide 12) */
.lms-workflow-slide {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.lms-workflow-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.4rem, 0.8vw, 0.6rem);
    padding: clamp(1rem, 2vh, 2rem) 0;
    flex: 1;
}

.lms-stage {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: var(--radius-lg);
    padding: clamp(1.2rem, 2.5vh, 2rem) clamp(1rem, 2vw, 1.8rem);
    min-width: clamp(140px, 16vw, 220px);
    min-height: clamp(120px, 18vh, 180px);
    text-align: center;
    cursor: pointer;
    border: clamp(2px, 0.3vh, 3px) solid #0052CC;
    box-shadow: 0 clamp(6px, 1.2vh, 12px) clamp(15px, 3vh, 25px) rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lms-stage:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 82, 204, 0.5);
}

.lms-stage-highlight {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%) !important;
    border-color: #d97706 !important;
}

.lms-stage-highlight .lms-stage-title,
.lms-stage-highlight .lms-stage-desc {
    color: white !important;
}

.lms-stage-success {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
    border-color: #16a34a !important;
}

.lms-stage-success .lms-stage-title,
.lms-stage-success .lms-stage-desc {
    color: white !important;
}

.lms-stage-icon {
    font-size: clamp(2.2rem, 4vh, 3.5rem);
    margin-bottom: clamp(0.4rem, 0.8vh, 0.6rem);
}

.lms-stage-title {
    font-size: clamp(0.95rem, 1.8vh, 1.4rem);
    font-weight: 800;
    color: #0052CC;
    margin-bottom: clamp(0.2rem, 0.4vh, 0.3rem);
}

.lms-stage-desc {
    font-size: clamp(0.75rem, 1.4vh, 1.1rem);
    color: #64748b;
}

.lms-arrow {
    color: #00A3A3;
    font-size: clamp(1.2rem, 2.2vh, 1.8rem);
    font-weight: bold;
    animation: h-bounce-arrow 1s ease-in-out infinite;
}

.lms-features-row {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    margin-top: clamp(1.2rem, 2.5vh, 2rem);
    flex-wrap: wrap;
}

.lms-feature {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border: 2px solid #0052CC;
    border-radius: var(--radius-full);
    padding: clamp(0.8rem, 1.5vh, 1.2rem) clamp(1.5rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #1a202c;
    font-size: clamp(0.9rem, 1.8vh, 1.2rem);
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
}

.lms-feature:hover {
    background: linear-gradient(135deg, #e6f0ff 0%, #d9e8ff 100%);
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 82, 204, 0.25);
}

/* IIoT Architecture Slide (Slide 13) */
.iiot-architecture-slide {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
}

.iiot-architecture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 2vh, 1.5rem);
    padding: 0.5rem 0;
    width: 100%;
}

.iiot-layer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iiot-layer-label {
    color: #0052CC;
    font-size: clamp(1rem, 2.2vh, 1.4rem);
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: clamp(0.5rem, 1vh, 0.8rem);
    text-transform: uppercase;
}

.iiot-nodes {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 2rem);
    width: 100%;
    flex-wrap: wrap;
}

.iiot-node {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
    border-radius: 1rem;
    padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 3vw, 2.5rem);
    min-width: clamp(200px, 22vw, 280px);
    min-height: clamp(100px, 15vh, 140px);
    text-align: center;
    cursor: pointer;
    border: 3px solid #0052CC;
    box-shadow: 0 8px 25px rgba(0, 82, 204, 0.3);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
    max-width: 320px;
}

.iiot-node:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 82, 204, 0.5);
}

.iiot-node-icon {
    font-size: clamp(2.5rem, 5vh, 3.5rem);
    margin-bottom: 0.4rem;
}

.iiot-node-title {
    font-size: clamp(1.1rem, 2.2vh, 1.5rem);
    font-weight: 800;
    color: #0052CC;
}

.iiot-node-brands {
    font-size: clamp(0.85rem, 1.6vh, 1.1rem);
    color: #64748b;
    margin-top: 0.3rem;
}

.iiot-connectors {
    display: flex;
    justify-content: center;
    gap: 6rem;
}

.iiot-connector-line {
    width: 4px;
    height: 30px;
    background: linear-gradient(180deg, #0052CC, #00A3A3);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.iiot-connector-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.8), transparent);
    animation: flow-animation 1.5s ease-in-out infinite;
}

.iiot-hub {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border-radius: var(--radius-xl);
    padding: clamp(1rem, 2vh, 1.5rem) clamp(2rem, 4vw, 3rem);
    text-align: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 clamp(8px, 2vh, 15px) clamp(25px, 5vh, 40px) rgba(22, 163, 74, 0.5);
    transition: all 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: clamp(280px, 35vw, 400px);
}

.iiot-hub:hover {
    transform: scale(1.05);
    box-shadow: 0 clamp(12px, 2.5vh, 20px) clamp(30px, 6vh, 50px) rgba(22, 163, 74, 0.6);
}

.iiot-hub-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    animation: glow-rotate 4s linear infinite;
    pointer-events: none;
}

.iiot-hub-icon {
    font-size: clamp(2.5rem, 5vh, 3.5rem);
    position: relative;
    z-index: 1;
    line-height: 1;
    margin-bottom: 6px;
}

.iiot-hub-title {
    font-size: clamp(1.2rem, 2.5vh, 1.6rem);
    font-weight: 800;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.iiot-hub-subtitle {
    font-size: clamp(0.9rem, 1.8vh, 1.2rem);
    color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.iiot-protocols {
    display: flex;
    justify-content: center;
    gap: clamp(0.8rem, 1.5vw, 1.2rem);
    margin: clamp(0.8rem, 1.5vh, 1.2rem) 0;
    flex-wrap: wrap;
}

.iiot-protocol {
    background: linear-gradient(135deg, #e6f7f7 0%, #d0f0f0 100%);
    border: 2px solid #00A3A3;
    color: #007a7a;
    padding: clamp(0.5rem, 1vh, 0.8rem) clamp(1rem, 2vw, 1.5rem);
    border-radius: var(--radius-full);
    font-size: clamp(0.9rem, 1.8vh, 1.2rem);
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 163, 163, 0.2);
}

.iiot-protocol:hover {
    background: linear-gradient(135deg, #d0f0f0 0%, #b8e8e8 100%);
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 163, 163, 0.35);
}

.iiot-outputs {
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 2vw, 1.5rem);
    flex-wrap: wrap;
}

.iiot-output {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
    border: 2px solid #0052CC;
    border-radius: var(--radius-full);
    padding: clamp(0.6rem, 1.2vh, 1rem) clamp(1.2rem, 2.5vw, 2rem);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1a202c;
    font-size: clamp(0.9rem, 1.8vh, 1.2rem);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 82, 204, 0.15);
}

.iiot-output:hover {
    background: linear-gradient(135deg, #e6f0ff 0%, #d9e8ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 82, 204, 0.25);
}

/* Security & Compliance Slide - Professional Fit to Screen */
.security-slide {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
}

.security-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(0.8rem, 1.5vh, 1.5rem);
    padding: clamp(0.5rem, 1vh, 1rem) 0;
    flex: 1;
    min-height: 0;
    justify-content: center;
}

.security-center {
    display: flex;
    justify-content: center;
}

.security-shield {
    background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
    border-radius: 50%;
    width: clamp(160px, 25vh, 240px);
    height: clamp(160px, 25vh, 240px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    box-shadow: 0 clamp(8px, 2vh, 15px) clamp(25px, 5vh, 45px) rgba(22, 163, 74, 0.5);
    transition: all 0.3s ease;
    text-align: center;
    padding: clamp(15px, 2.5vh, 28px);
    box-sizing: border-box;
}

.security-shield:hover {
    transform: scale(1.08);
    box-shadow: 0 clamp(15px, 3vh, 25px) clamp(40px, 8vh, 60px) rgba(22, 163, 74, 0.6);
}

.shield-glow {
    position: absolute;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    animation: glow-rotate 4s linear infinite;
    pointer-events: none;
}

.shield-icon {
    font-size: clamp(48px, 8vh, 72px);
    position: relative;
    z-index: 1;
    line-height: 1;
    margin-bottom: clamp(4px, 0.8vh, 8px);
}

.shield-title {
    font-size: clamp(16px, 2.8vh, 26px);
    font-weight: 800;
    color: white;
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.shield-subtitle {
    font-size: clamp(12px, 2vh, 20px);
    color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 1;
    line-height: 1.2;
    margin: 0;
}

.security-features-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: clamp(0.4rem, 0.8vw, 0.8rem) !important;
    width: 100% !important;
    max-width: min(850px, 92vw) !important;
}

.security-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%) !important;
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: var(--radius-lg) !important;
    padding: 16px 12px !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.security-card:hover {
    transform: translateY(-5px) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.1) 100%) !important;
    border-color: #00A3A3 !important;
    box-shadow: 0 10px 30px rgba(0, 163, 163, 0.3) !important;
}

.security-card-icon {
    font-size: 36px !important;
    margin-bottom: 8px !important;
}

.security-card-title {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: white !important;
    margin-bottom: 8px !important;
}

.security-card-items {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.security-card-items span {
    background: rgba(0, 163, 163, 0.3) !important;
    color: #4dd4d4 !important;
    padding: 6px 12px !important;
    border-radius: 0.4rem !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.security-card-items span:hover {
    background: rgba(0, 163, 163, 0.5) !important;
    transform: scale(1.02) !important;
}

.security-certifications {
    display: flex !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    margin-top: 12px !important;
    flex-shrink: 0 !important;
}

.cert-badge {
    background: rgba(255,255,255,0.1) !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    color: white !important;
    padding: 10px 20px !important;
    border-radius: 2rem !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.cert-badge:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-3px);
    border-color: #00A3A3;
    box-shadow: 0 8px 20px rgba(0, 163, 163, 0.3);
}

/* Universal clickable card styles */
.card.clickable-card {
    cursor: pointer !important;
    position: relative !important;
}

.card.clickable-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow: 0 20px 45px rgba(0,82,204,0.35) !important;
    border-color: #00A3A3 !important;
}

.card.clickable-card::after {
    content: "Click for details" !important;
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    font-size: 0.65rem !important;
    color: #0052CC !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    background: rgba(255,255,255,0.9) !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
}

.card.clickable-card:hover::after {
    opacity: 1 !important;
}

.standard-card.clickable {
    cursor: pointer;
}

.standard-card.clickable:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(74, 144, 217, 0.5);
}

.standard-card.clickable::after {
    content: "Click for details";
    position: absolute;
    bottom: 5px;
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.standard-card.clickable:hover::after {
    opacity: 0.7;
}

/* Modal Styles */
.standards-modal {
    display: none !important;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease;
    visibility: hidden;
    opacity: 0;
}

.standards-modal.show {
    display: flex !important;
    justify-content: center;
    align-items: center;
    visibility: visible;
    opacity: 1;
}

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

.modal-content {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: clamp(0.75rem, 2vw, 1.5rem);
    padding: clamp(1rem, 2vh, 2rem);
    max-width: min(600px, 90vw);
    width: 90%;
    max-height: 85vh;
    overflow: hidden;
    position: relative;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.modal-close {
    position: absolute;
    top: clamp(8px, 1.5vh, 15px);
    right: clamp(10px, 2vw, 20px);
    font-size: clamp(1.2rem, 3vh, 2rem);
    font-weight: bold;
    color: #64748b;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 1;
    z-index: 10;
}

.modal-close:hover {
    color: #0052CC;
    transform: scale(1.2);
}

.modal-header {
    text-align: center;
    margin-bottom: clamp(0.5rem, 1.5vh, 1.5rem);
    padding-bottom: clamp(0.5rem, 1vh, 1rem);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg, #0052CC, #00A3A3, #0066FF) 1;
    flex-shrink: 0;
}

.modal-header h2 {
    font-size: clamp(1.1rem, 2.5vh, 1.8rem);
    font-weight: 900;
    background: linear-gradient(135deg, #0052CC, #00A3A3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: clamp(0.2rem, 0.5vh, 0.5rem);
}

.modal-header p {
    color: #64748b;
    font-size: clamp(0.75rem, 1.5vh, 1rem);
}

.modal-body {
    padding: clamp(0.25rem, 0.5vh, 0.5rem) 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.standards-list {
    display: flex;
    flex-direction: column;
    gap: clamp(0.3rem, 0.8vh, 0.8rem);
    flex: 1;
    overflow: hidden;
}

.standard-item {
    background: linear-gradient(135deg, #f8fafc, #ffffff);
    padding: clamp(0.4rem, 1vh, 1rem) clamp(0.6rem, 1.5vw, 1.2rem);
    border-radius: clamp(0.4rem, 1vw, 0.8rem);
    border-left: 3px solid #0052CC;
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1vw, 1rem);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.standard-item:hover {
    transform: translateX(5px);
    box-shadow: 0 5px 20px rgba(0, 82, 204, 0.15);
}

.standard-item-icon {
    font-size: clamp(1rem, 2vh, 1.5rem);
    flex-shrink: 0;
}

.standard-item-content h4 {
    font-size: clamp(0.75rem, 1.5vh, 1rem);
    font-weight: 700;
    color: #1a202c;
    margin-bottom: clamp(0.1rem, 0.3vh, 0.2rem);
}

.standard-item-content p {
    font-size: clamp(0.65rem, 1.2vh, 0.85rem);
    color: #64748b;
    margin: 0;
    line-height: 1.3;
}

/* ===== SLIDE CONTAINER LAYOUT ===== */
#slideContainer {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#slideContainer > * {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Flow containers */
.horizontal-flow-container,
.capa-horizontal-flow,
.interactive-flow-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ===== UNIVERSAL RESPONSIVE DESIGN ===== */
/* Same proportional view on Mobile, Tablet, and Laptop */
/* Uses vmin units to maintain consistent aspect ratios across all devices */

/* Universal card sizing - 4 cards per row grid */
.qms-overview-grid .qms-overview-card.card {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: clamp(140px, 20vmin, 220px) !important;
    max-height: none !important;
    padding: clamp(0.8rem, 1.5vmin, 1.2rem) clamp(0.6rem, 1vmin, 1rem) !important;
}

.qms-overview-grid .qms-overview-card .card-icon {
    font-size: clamp(24px, 5vmin, 48px) !important;
}

.qms-overview-grid .qms-overview-card .card-title {
    font-size: clamp(0.7rem, 1.8vmin, 1.2rem) !important;
}

.qms-overview-grid .qms-overview-card .card-text {
    font-size: clamp(0.55rem, 1.4vmin, 0.95rem) !important;
}

/* Customer cards styles consolidated in customers-cards-container section */

/* Universal standard/regulatory cards */
.standard-card {
    padding: clamp(0.6rem, 1.5vmin, 1.2rem) clamp(0.8rem, 2vmin, 1.6rem) !important;
}

.standard-code {
    font-size: clamp(1.6rem, 5vmin, 4rem) !important;
    letter-spacing: clamp(1px, 0.3vmin, 3px) !important;
}

.standard-icon {
    font-size: clamp(1.6rem, 5vmin, 4rem) !important;
}

.standard-name {
    font-size: clamp(0.7rem, 2vmin, 1.5rem) !important;
}

.standard-body {
    font-size: clamp(0.6rem, 1.6vmin, 1.3rem) !important;
    padding: clamp(0.15rem, 0.4vmin, 0.35rem) clamp(0.4rem, 1vmin, 0.9rem) !important;
}

/* Universal slide title */
.slide-title {
    font-size: clamp(1.5rem, 5vmin, 4rem) !important;
}

/* Universal navigation */
.nav-bar {
    height: clamp(40px, 8vmin, 70px) !important;
    padding: 0 clamp(0.5rem, 2vmin, 2rem) !important;
}

.logo {
    width: clamp(28px, 5vmin, 45px) !important;
    height: clamp(28px, 5vmin, 45px) !important;
    font-size: clamp(0.8rem, 2vmin, 1.2rem) !important;
}

.title {
    font-size: clamp(0.8rem, 2vmin, 1.3rem) !important;
}

.subtitle-nav {
    font-size: clamp(0.5rem, 1.2vmin, 0.8rem) !important;
}

.btn {
    padding: clamp(0.25rem, 0.8vmin, 0.5rem) clamp(0.5rem, 1.5vmin, 1.2rem) !important;
    font-size: clamp(0.6rem, 1.5vmin, 0.95rem) !important;
    border-radius: clamp(4px, 1vmin, 8px) !important;
}

.slide-counter {
    font-size: clamp(0.6rem, 1.5vmin, 0.95rem) !important;
    padding: clamp(0.2rem, 0.5vmin, 0.4rem) clamp(0.4rem, 1vmin, 0.8rem) !important;
}

/* Universal content slide padding */
.content-slide {
    padding: clamp(0.5rem, 1.5vmin, 1.2rem) clamp(1rem, 2.5vmin, 2.5rem) !important;
}

.slide-header {
    margin-bottom: clamp(0.2rem, 0.8vmin, 0.6rem) !important;
}

/* Universal grid gaps */
.grid {
    gap: clamp(0.5rem, 1.5vmin, 1.2rem) !important;
}

.qms-overview-grid {
    gap: clamp(0.5rem, 1.5vmin, 1.2rem) !important;
}

.standards-grid {
    gap: clamp(0.5rem, 1.5vmin, 1.2rem) !important;
}

/* ===== DEVICE-SPECIFIC OPTIMIZATIONS ===== */

/* Laptop / Desktop (width > 1024px) */
@media (min-width: 1025px) {
    .standards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .qms-overview-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablet (width 768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .standards-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .qms-overview-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .nav-controls {
        gap: clamp(0.2rem, 1vmin, 0.5rem) !important;
    }
}

/* Mobile (width < 768px) */
@media (max-width: 767px) {
    .standards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .qms-overview-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .qms-overview-grid .qms-overview-card.card {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: clamp(100px, 18vmin, 150px) !important;
        max-height: none !important;
    }
    .nav-controls {
        gap: clamp(0.15rem, 0.8vmin, 0.3rem) !important;
    }
    /* Compact buttons on mobile */
    .btn {
        padding: clamp(0.2rem, 0.6vmin, 0.4rem) clamp(0.4rem, 1.2vmin, 0.8rem) !important;
        font-size: clamp(0.55rem, 1.3vmin, 0.8rem) !important;
    }
}

/* Small Mobile (width < 480px) */
@media (max-width: 479px) {
    .logo-section .title-text {
        display: none !important;
    }
    .standards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .btn {
        padding: clamp(0.15rem, 0.5vmin, 0.3rem) clamp(0.3rem, 1vmin, 0.6rem) !important;
        font-size: clamp(0.5rem, 1.2vmin, 0.7rem) !important;
    }
}

/* Landscape orientation optimization */
@media (orientation: landscape) and (max-height: 500px) {
    .content-slide {
        overflow-y: auto !important;
        padding: clamp(0.3rem, 1vmin, 0.6rem) clamp(0.8rem, 2vmin, 1.5rem) !important;
    }
    .slide-title {
        font-size: clamp(1.2rem, 4vmin, 2.5rem) !important;
    }
    .slide-header {
        margin-bottom: clamp(0.1rem, 0.5vmin, 0.3rem) !important;
    }
}

/* High DPI / Retina displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .card, .standard-card, .qms-overview-card {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    .btn, .card, .standard-card {
        min-height: 44px;
        min-width: 44px;
    }
    .card:hover, .standard-card:hover {
        transform: none !important;
    }
    .card:active, .standard-card:active {
        transform: scale(0.98) !important;
    }
}

/* ===== COMPREHENSIVE RESPONSIVE DESIGN FOR ALL DEVICES & ZOOM LEVELS ===== */

/* Base responsive using vmin/vmax for zoom-proof scaling */
:root {
    --responsive-base: min(1vw, 1vh);
}

/* Universal scaling for any zoom level */
@media screen {
    .slide-title {
        font-size: clamp(1rem, 4vmin, 3rem) !important;
    }
    .slide-subtitle {
        font-size: clamp(0.7rem, 2vmin, 1.5rem) !important;
    }
    .card-title {
        font-size: clamp(0.7rem, 2vmin, 1.2rem) !important;
    }
    .card-text {
        font-size: clamp(0.6rem, 1.5vmin, 1rem) !important;
    }
    .card-icon {
        font-size: clamp(1.5rem, 5vmin, 3rem) !important;
    }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
    .container {
        max-width: 100vw !important;
    }
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(1rem, 2vmin, 2rem) !important;
    }
    .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Standard Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .stats-grid {
        gap: clamp(1rem, 2vmin, 1.5rem) !important;
    }
    .phase-timeline {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Small Desktop / Large Tablet (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .grid-2 {
        gap: clamp(0.8rem, 1.5vmin, 1.2rem) !important;
    }
    .horizontal-flow-container {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    .h-flow-stage {
        min-width: clamp(80px, 12vw, 140px) !important;
        width: clamp(80px, 12vw, 140px) !important;
        height: clamp(100px, 15vh, 160px) !important;
    }
    .flow-stage {
        min-width: clamp(200px, 30vw, 320px) !important;
        min-height: clamp(120px, 18vh, 200px) !important;
    }
}

/* Tablet Landscape (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .content-slide {
        padding: clamp(0.5rem, 1.5vmin, 1rem) clamp(1rem, 2vmin, 1.5rem) !important;
    }
    .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.6rem, 1.2vmin, 1rem) !important;
    }
    .phase-timeline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.5rem, 1vmin, 0.8rem) !important;
    }
    .stats-grid {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 1.5vmin, 1rem) !important;
    }
    .stat-card {
        min-width: clamp(150px, 28vw, 220px) !important;
        min-height: clamp(50px, 7vh, 80px) !important;
    }
    .horizontal-flow-container {
        flex-wrap: wrap !important;
        gap: clamp(0.3rem, 0.8vmin, 0.6rem) !important;
    }
    .h-flow-stage {
        min-width: clamp(70px, 14vw, 120px) !important;
        width: clamp(70px, 14vw, 120px) !important;
        height: clamp(90px, 14vh, 140px) !important;
    }
    .h-flow-connector {
        display: none !important;
    }
    .capa-horizontal-flow {
        flex-wrap: wrap !important;
    }
    .capa-section {
        min-width: clamp(120px, 40vw, 200px) !important;
    }
    .iiot-architecture {
        gap: clamp(0.4rem, 1vmin, 0.8rem) !important;
    }
    .iiot-nodes {
        flex-wrap: wrap !important;
        gap: clamp(0.5rem, 1.5vmin, 1rem) !important;
    }
    .iiot-node {
        min-width: clamp(120px, 25vw, 160px) !important;
        padding: clamp(8px, 1.5vmin, 14px) clamp(12px, 2vmin, 20px) !important;
    }
    .nexgen-card {
        min-height: auto !important;
    }
}

/* Tablet Portrait (600px - 767px) */
@media (min-width: 600px) and (max-width: 767px) {
    .nav-bar {
        padding: clamp(0.3rem, 1vmin, 0.5rem) clamp(0.5rem, 1.5vmin, 1rem) !important;
    }
    .logo {
        width: clamp(28px, 5vmin, 36px) !important;
        height: clamp(28px, 5vmin, 36px) !important;
        font-size: clamp(14px, 2.5vmin, 18px) !important;
    }
    .title {
        font-size: clamp(0.8rem, 2vmin, 1.1rem) !important;
    }
    .content-slide {
        padding: clamp(0.4rem, 1vmin, 0.8rem) clamp(0.8rem, 1.5vmin, 1.2rem) !important;
    }
    .grid-2 {
        grid-template-columns: 1fr !important;
        gap: clamp(0.5rem, 1vmin, 0.8rem) !important;
    }
    .card {
        padding: clamp(0.6rem, 1.5vmin, 1rem) !important;
    }
    .phase-timeline {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .flow-stage {
        min-width: clamp(180px, 45vw, 280px) !important;
        min-height: clamp(100px, 15vh, 160px) !important;
        padding: clamp(0.5rem, 1.2vmin, 1rem) clamp(1rem, 2.5vmin, 2rem) !important;
    }
    .flow-stage-central {
        min-width: clamp(200px, 50vw, 320px) !important;
        min-height: clamp(120px, 18vh, 200px) !important;
    }
    .horizontal-flow-container {
        flex-wrap: wrap !important;
        gap: clamp(0.3rem, 1vmin, 0.6rem) !important;
    }
    .h-flow-stage {
        min-width: clamp(80px, 25vw, 120px) !important;
        width: clamp(80px, 25vw, 120px) !important;
        height: clamp(100px, 18vh, 140px) !important;
    }
    .h-flow-connector {
        display: none !important;
    }
    .capa-horizontal-flow {
        flex-direction: column !important;
        align-items: center !important;
    }
    .capa-flow-arrow {
        transform: rotate(90deg) !important;
    }
    .capa-hub {
        width: clamp(140px, 35vw, 200px) !important;
        height: clamp(140px, 35vw, 200px) !important;
    }
    .stats-grid {
        gap: clamp(0.4rem, 1vmin, 0.8rem) !important;
    }
    .stat-card {
        min-width: clamp(140px, 40vw, 200px) !important;
        min-height: clamp(45px, 6vh, 70px) !important;
        padding: clamp(0.4rem, 1vmin, 0.8rem) clamp(1rem, 2.5vmin, 1.5rem) !important;
    }
    .highlight-box {
        padding: clamp(0.5rem, 1.2vmin, 0.8rem) !important;
    }
    .highlight-box h3 {
        font-size: clamp(0.9rem, 2vmin, 1.2rem) !important;
    }
    .highlight-box p {
        font-size: clamp(0.75rem, 1.5vmin, 0.95rem) !important;
    }
}

/* Mobile Large (480px - 599px) */
@media (min-width: 480px) and (max-width: 599px) {
    .nav-bar {
        padding: clamp(0.2rem, 0.8vmin, 0.4rem) clamp(0.4rem, 1vmin, 0.8rem) !important;
    }
    .logo-section .title-text {
        display: none !important;
    }
    .slide-title {
        font-size: clamp(1rem, 3.5vmin, 1.8rem) !important;
    }
    .slide-subtitle {
        font-size: clamp(0.65rem, 1.8vmin, 1rem) !important;
    }
    .content-slide {
        padding: clamp(0.3rem, 0.8vmin, 0.6rem) clamp(0.5rem, 1.2vmin, 1rem) !important;
    }
    .grid-2, .grid-3, .iiot-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(0.4rem, 1vmin, 0.7rem) !important;
    }
    .card {
        padding: clamp(0.5rem, 1.2vmin, 0.8rem) !important;
        min-height: auto !important;
    }
    .phase-timeline {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .phase-card {
        padding: clamp(0.4rem, 1vmin, 0.7rem) !important;
    }
    .flow-container {
        flex-direction: column !important;
    }
    .flow-stage {
        min-width: clamp(200px, 70vw, 300px) !important;
        min-height: clamp(80px, 12vh, 120px) !important;
    }
    .flow-connector {
        transform: rotate(90deg) !important;
        height: clamp(15px, 3vh, 25px) !important;
    }
    .horizontal-flow-container {
        flex-direction: column !important;
        gap: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .h-flow-stage {
        min-width: clamp(140px, 60vw, 220px) !important;
        width: clamp(140px, 60vw, 220px) !important;
        height: clamp(80px, 12vh, 120px) !important;
    }
    .h-flow-connector {
        transform: rotate(90deg) !important;
        padding: clamp(0.1rem, 0.3vmin, 0.2rem) 0 !important;
    }
    .capa-horizontal-flow {
        flex-direction: column !important;
    }
    .capa-section {
        min-width: clamp(160px, 70vw, 260px) !important;
    }
    .capa-hub {
        width: clamp(120px, 40vw, 180px) !important;
        height: clamp(120px, 40vw, 180px) !important;
    }
    .stats-grid {
        flex-direction: column !important;
        align-items: center !important;
        gap: clamp(0.3rem, 0.8vmin, 0.6rem) !important;
    }
    .stat-card {
        min-width: clamp(180px, 70vw, 260px) !important;
        min-height: clamp(40px, 6vh, 60px) !important;
    }
    .iiot-architecture {
        gap: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .iiot-nodes {
        flex-direction: column !important;
        align-items: center !important;
    }
    .iiot-node {
        min-width: clamp(160px, 65vw, 240px) !important;
    }
    .iiot-connectors {
        flex-direction: column !important;
        gap: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .nexgen-card {
        min-height: auto !important;
    }
}

/* Mobile Small (320px - 479px) */
@media (max-width: 479px) {
    .nav-bar {
        padding: clamp(0.15rem, 0.5vmin, 0.3rem) clamp(0.3rem, 0.8vmin, 0.5rem) !important;
        gap: clamp(0.2rem, 0.5vmin, 0.4rem) !important;
    }
    .logo {
        width: clamp(24px, 6vmin, 32px) !important;
        height: clamp(24px, 6vmin, 32px) !important;
        font-size: clamp(12px, 3vmin, 16px) !important;
    }
    .logo-section .title-text {
        display: none !important;
    }
    .nav-controls {
        gap: clamp(0.1rem, 0.4vmin, 0.2rem) !important;
    }
    .btn {
        padding: clamp(0.1rem, 0.4vmin, 0.2rem) clamp(0.2rem, 0.6vmin, 0.4rem) !important;
        font-size: clamp(0.45rem, 1.2vmin, 0.65rem) !important;
    }
    .slide-counter {
        font-size: clamp(0.5rem, 1.3vmin, 0.7rem) !important;
        padding: 0 clamp(0.2rem, 0.5vmin, 0.3rem) !important;
    }
    .content-slide {
        padding: clamp(0.2rem, 0.6vmin, 0.4rem) clamp(0.3rem, 0.8vmin, 0.6rem) !important;
    }
    .slide-header {
        margin-bottom: clamp(0.2rem, 0.5vmin, 0.4rem) !important;
    }
    .slide-title {
        font-size: clamp(0.9rem, 3vmin, 1.5rem) !important;
    }
    .slide-subtitle {
        font-size: clamp(0.55rem, 1.5vmin, 0.85rem) !important;
    }
    .grid-2, .grid-3, .iiot-grid, .equal-height-grid {
        grid-template-columns: 1fr !important;
        gap: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .card {
        padding: clamp(0.4rem, 1vmin, 0.6rem) !important;
    }
    .card-icon {
        font-size: clamp(1.2rem, 4vmin, 2rem) !important;
    }
    .card-title {
        font-size: clamp(0.65rem, 1.8vmin, 0.95rem) !important;
    }
    .card-text {
        font-size: clamp(0.55rem, 1.4vmin, 0.8rem) !important;
    }
    .phase-timeline {
        grid-template-columns: 1fr 1fr !important;
        gap: clamp(0.2rem, 0.6vmin, 0.4rem) !important;
    }
    .phase-card {
        padding: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .phase-number {
        width: clamp(22px, 5vmin, 32px) !important;
        height: clamp(22px, 5vmin, 32px) !important;
        font-size: clamp(0.7rem, 1.8vmin, 1rem) !important;
    }
    .phase-title {
        font-size: clamp(0.6rem, 1.5vmin, 0.85rem) !important;
    }
    .phase-items {
        font-size: clamp(0.45rem, 1.1vmin, 0.65rem) !important;
    }
    .standards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: clamp(0.2rem, 0.6vmin, 0.4rem) !important;
    }
    .standard-card {
        padding: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .standard-code {
        font-size: clamp(1.2rem, 4vmin, 2rem) !important;
    }
    .standard-name {
        font-size: clamp(0.6rem, 1.6vmin, 0.9rem) !important;
    }
    .flow-stage {
        min-width: clamp(180px, 80vw, 280px) !important;
        min-height: clamp(70px, 10vh, 100px) !important;
        padding: clamp(0.4rem, 1vmin, 0.7rem) clamp(0.8rem, 2vmin, 1.2rem) !important;
    }
    .flow-stage-icon {
        font-size: clamp(1.2rem, 3vmin, 1.8rem) !important;
    }
    .flow-stage-title {
        font-size: clamp(0.7rem, 1.8vmin, 1rem) !important;
    }
    .flow-stage-subtitle {
        font-size: clamp(0.55rem, 1.3vmin, 0.8rem) !important;
    }
    .h-flow-stage {
        min-width: clamp(120px, 70vw, 200px) !important;
        width: clamp(120px, 70vw, 200px) !important;
        height: clamp(70px, 11vh, 100px) !important;
    }
    .h-flow-icon {
        font-size: clamp(1rem, 2.5vmin, 1.5rem) !important;
    }
    .h-flow-title {
        font-size: clamp(0.55rem, 1.4vmin, 0.8rem) !important;
    }
    .capa-section {
        min-width: clamp(140px, 80vw, 220px) !important;
        padding: clamp(0.4rem, 1vmin, 0.7rem) !important;
    }
    .capa-hub {
        width: clamp(100px, 35vw, 150px) !important;
        height: clamp(100px, 35vw, 150px) !important;
    }
    .capa-hub-icon {
        font-size: clamp(30px, 8vmin, 50px) !important;
    }
    .capa-hub-title {
        font-size: clamp(12px, 3vmin, 18px) !important;
    }
    .stats-grid {
        gap: clamp(0.2rem, 0.6vmin, 0.4rem) !important;
    }
    .stat-card {
        min-width: clamp(140px, 75vw, 220px) !important;
        min-height: clamp(35px, 5vh, 50px) !important;
        padding: clamp(0.3rem, 0.8vmin, 0.5rem) clamp(0.8rem, 2vmin, 1.2rem) !important;
    }
    .stat-number {
        font-size: clamp(1rem, 2.5vmin, 1.5rem) !important;
    }
    .stat-label {
        font-size: clamp(0.55rem, 1.3vmin, 0.75rem) !important;
    }
    .highlight-box {
        padding: clamp(0.4rem, 1vmin, 0.6rem) !important;
        margin-top: clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .highlight-box h3 {
        font-size: clamp(0.75rem, 1.8vmin, 1rem) !important;
    }
    .highlight-box p {
        font-size: clamp(0.6rem, 1.4vmin, 0.8rem) !important;
    }
    .info-card {
        padding: clamp(0.4rem, 1vmin, 0.6rem) !important;
    }
    .info-card h3 {
        font-size: clamp(0.7rem, 1.7vmin, 0.95rem) !important;
    }
    .icon-badge {
        font-size: clamp(0.5rem, 1.2vmin, 0.7rem) !important;
        padding: clamp(0.15rem, 0.4vmin, 0.25rem) clamp(0.3rem, 0.8vmin, 0.5rem) !important;
    }
    .iiot-node {
        min-width: clamp(140px, 75vw, 220px) !important;
        padding: clamp(8px, 2vmin, 14px) clamp(12px, 3vmin, 20px) !important;
    }
    .iiot-node-title {
        font-size: clamp(12px, 3vmin, 16px) !important;
    }
    .iiot-hub {
        padding: clamp(0.3rem, 0.8vmin, 0.5rem) clamp(0.6rem, 1.5vmin, 1rem) !important;
    }
    .nexgen-card {
        min-height: auto !important;
    }
    #customerCardsContainer .card {
        height: clamp(100px, 20vmin, 140px) !important;
        min-height: clamp(100px, 20vmin, 140px) !important;
    }
}

/* Extra Small Mobile (< 320px) */
@media (max-width: 319px) {
    .nav-bar {
        flex-direction: column !important;
        gap: clamp(0.1rem, 0.3vmin, 0.2rem) !important;
        padding: clamp(0.1rem, 0.3vmin, 0.2rem) !important;
    }
    .slide-title {
        font-size: clamp(0.8rem, 4vmin, 1.2rem) !important;
    }
    .phase-timeline {
        grid-template-columns: 1fr !important;
    }
    .standards-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Zoom Level Adaptations using aspect ratio */
@media (min-aspect-ratio: 21/9) {
    /* Ultra-wide screens */
    .content-slide {
        max-width: 80vw !important;
        margin: 0 auto !important;
    }
}

@media (max-aspect-ratio: 3/4) {
    /* Portrait mode - tall screens */
    .horizontal-flow-container {
        flex-direction: column !important;
    }
    .capa-horizontal-flow {
        flex-direction: column !important;
    }
    .flow-container {
        flex-direction: column !important;
    }
}