/* ==========================================================================
   SK DIGITALS - MODERN 2D FLAT MINIMALIST CSS
   ========================================================================== */

/* --- Custom Properties & Theme System --- */
:root {
    /* Color Palette - Soft Blue & White */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc; /* Very light slate blue-gray */
    --bg-tertiary: #f1f5f9;  /* Soft gray-blue */
    
    --color-primary: #2563eb;        /* Royal Digital Blue */
    --color-primary-hover: #1d4ed8;  /* Deeper Blue */
    --color-primary-dim: #eff6ff;    /* Soft Ice Blue */
    --color-primary-glow: rgba(37, 99, 235, 0.15);
    
    --color-teal: #0d9488;           /* High-end Teal for tax/data representations */
    --color-teal-dim: #f0fdfa;       /* Soft Teal background */
    --color-teal-hover: #0f766e;
    
    --color-accent: #3b82f6;         /* Sky Blue */
    
    --color-text-primary: #0f172a;   /* Deep Slate Navy for perfect readability */
    --color-text-secondary: #475569; /* Slate Gray for secondary text */
    --color-text-muted: #64748b;     /* Slate Muted */
    
    --border-color: #e2e8f0;         /* Clean, subtle borders */
    --border-hover: #cbd5e1;

    /* Fonts - Clean & Professional Sans-serif */
    --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-medium: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-slow: 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Layout */
    --max-width: 1280px;
    --nav-height: 80px;
    
    /* 2D Flat Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(37, 99, 235, 0.03), 0 4px 6px -4px rgba(37, 99, 235, 0.03);
    --shadow-flat: 0 4px 0px 0px #cbd5e1;
    --shadow-flat-primary: 0 4px 0px 0px #1d4ed8;
}

/* --- CSS Reset & Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Custom Scrollbar - Light Theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
    background: var(--border-hover);
    border-radius: 4px;
    border: 2px solid var(--bg-secondary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

/* --- Premium Light Loader Styling --- */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity var(--transition-medium) forwards;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 320px;
    text-align: center;
}

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

.logo-sk {
    color: var(--color-primary);
}

.logo-digitals {
    color: var(--color-text-primary);
    margin-left: 4px;
}

.loader-bar-bg {
    width: 100%;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 10px;
    transition: width 0.1s ease-out;
}

.loader-status {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: 2px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* --- Layout Architecture --- */
.app-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    z-index: 10;
}

/* --- Minimalist Sticky Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    z-index: 100;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.navbar.scrolled {
    background: #ffffff;
    box-shadow: 0 4px 20px -5px rgba(0, 0, 0, 0.05);
}

.nav-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    transition: transform var(--transition-fast);
}

.nav-logo:hover {
    transform: scale(1.02);
}

.logo-symbol {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-primary-dim);
    border: 1.5px solid var(--color-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.logo-icon-svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
}

.sk-text {
    color: var(--color-primary);
    font-weight: 800;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-link {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    position: relative;
    padding: 5px 0;
    transition: color var(--transition-fast);
}

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

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--color-primary);
    transition: width var(--transition-fast);
}

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

.nav-actions {
    display: flex;
    align-items: center;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-text-primary);
    cursor: pointer;
    z-index: 101;
    padding: 4px;
}



.menu-icon {
    width: 24px;
    height: 24px;
}

/* --- Mobile Navigation Dropdown --- */
.mobile-nav {
    display: none;
    position: fixed;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
    padding: 2rem;
    flex-direction: column;
    gap: 1.25rem;
    z-index: 99;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
}

.mobile-nav.active {
    display: flex;
    transform: translateY(0);
    opacity: 1;
}

.mobile-link {
    text-decoration: none;
    color: var(--color-text-secondary);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bg-secondary);
}

.mobile-link:hover {
    color: var(--color-primary);
}

.mobile-btn {
    text-align: center;
    width: 100%;
}

/* --- Modern Minimalist 2D Flat Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0.8rem 1.6rem;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

/* Primary Button: 2D Flat Minimalist Style */
.btn-primary {
    background-color: var(--color-primary);
    color: #ffffff;
    border: 2px solid var(--color-primary);
    box-shadow: var(--shadow-flat-primary);
    transform: translateY(-2px);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    transform: translateY(0px);
    box-shadow: 0 0px 0px 0px var(--color-primary-hover);
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 0px 0px 0px var(--color-primary-hover);
}

/* Secondary / Outline Button: 2D Flat Style */
.btn-secondary {
    background-color: var(--bg-primary);
    color: var(--color-text-primary);
    border: 2px solid var(--border-hover);
    box-shadow: var(--shadow-flat);
    transform: translateY(-2px);
}

.btn-secondary:hover {
    background-color: var(--bg-secondary);
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: translateY(0px);
    box-shadow: 0 0px 0px 0px var(--border-hover);
}

.btn-secondary:active {
    transform: translateY(1px);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-flat-primary);
    transform: translateY(-2px);
}

.btn-outline:hover {
    background-color: var(--color-primary-dim);
    transform: translateY(0px);
    box-shadow: 0 0px 0px 0px var(--color-primary);
}

.btn-icon {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.btn:hover .btn-icon {
    transform: translateX(3px);
}

/* --- Clean Hero Section Layout --- */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding-top: var(--nav-height);
    background-color: var(--bg-primary);
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 2;
}

/* Soft Decorative 2D Blur Dots for SaaS feel */
.hero-glow-cyan {
    position: absolute;
    top: 15%;
    right: 5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, rgba(37, 99, 235, 0) 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.hero-glow-purple {
    position: absolute;
    bottom: 5%;
    left: 2%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(13, 148, 136, 0.04) 0%, rgba(13, 148, 136, 0) 70%);
    filter: blur(80px);
    pointer-events: none;
    z-index: -1;
}

.hero-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 3rem 2rem 4rem 2rem;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    position: relative;
}

/* --- Hero Left Column Copy --- */
.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.hero-badge-container {
    margin-bottom: 1.25rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 50px;
    background-color: var(--color-primary-dim);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
    box-shadow: 0 0 6px var(--color-primary);
    animation: dotPulse 1.8s infinite ease-in-out;
}

.badge-text {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary);
    text-transform: uppercase;
}

.hero-title {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
}

.text-gradient {
    color: var(--color-primary);
}

.hero-tagline {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.3px;
    margin-bottom: 1rem;
}

.hero-description {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.25rem;
    max-width: 550px;
    line-height: 1.7;
}

.hero-actions {
    display: flex;
    gap: 1.25rem;
    margin-bottom: 3rem;
    width: 100%;
}

/* Metric Cards styled for clean 2D layout */
.hero-metrics {
    display: flex;
    gap: 2.5rem;
    width: 100%;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metric-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.cyan-glow {
    border-color: rgba(37, 99, 235, 0.2);
    background-color: var(--color-primary-dim);
}

.purple-glow {
    border-color: rgba(13, 148, 136, 0.2);
    background-color: var(--color-teal-dim);
}

.metric-icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.cyan-glow .metric-icon {
    color: var(--color-primary);
}

.purple-glow .metric-icon {
    color: var(--color-teal);
}

.metric-data {
    display: flex;
    flex-direction: column;
}

.metric-value {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.metric-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

/* --- Hero Right Column (Custom 3D Subsystem Container) --- */
.hero-visual {
    width: 100%;
    height: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

/* Interactive WebGL Canvas Container */
.canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

#webgl-canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: auto;
}

/* Premium Light-Theme Glassmorphism HUD Panels */
.glass-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 15px 35px -5px rgba(37, 99, 235, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    padding: 1.25rem;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 20px 40px -5px rgba(37, 99, 235, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.hud-card {
    position: absolute;
    width: 260px;
    z-index: 10;
}

.hud-card.top-left {
    top: 15%;
    left: 5%;
    border-left: 4px solid var(--color-primary);
}

.hud-card.bottom-right {
    bottom: 15%;
    right: 5%;
    border-right: 4px solid var(--color-teal);
}

.hud-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
}

.hud-icon {
    width: 16px;
    height: 16px;
}

.hud-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--color-text-primary);
}

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

.hud-bar-container {
    width: 100%;
    height: 5px;
    background: rgba(37, 99, 235, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.hud-bar-fill {
    height: 100%;
    border-radius: 10px;
}

.hud-bar-fill.cyan-bg {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    animation: fillWidth 2s ease-out forwards;
}

.hud-meta {
    font-family: var(--font-body);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.signature-line-anim {
    display: flex;
    gap: 3px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-teal);
}

.sig-char {
    display: inline-block;
    animation: sigPulse 1.5s infinite ease-in-out;
}

.sig-char:nth-child(2) { animation-delay: 0.15s; }
.sig-char:nth-child(3) { animation-delay: 0.3s; }
.sig-char:nth-child(4) { animation-delay: 0.45s; }
.sig-char:nth-child(5) { animation-delay: 0.6s; }
.sig-char:nth-child(6) { animation-delay: 0.75s; }

@keyframes sigPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); color: var(--color-teal); }
}

@keyframes fillWidth {
    from { width: 0%; }
    to { width: 100%; }
}

.pulse-animation {
    animation: pulse 1.5s infinite ease-in-out;
}

.cyan-text { color: var(--color-primary); }
.purple-text { color: var(--color-teal); }

/* Illustration Micro-animations & Interactive effects */
.floating-element {
    animation: floatSlow 6s infinite ease-in-out;
}

.floating-element-delayed {
    animation: floatSlow 6s infinite ease-in-out;
    animation-delay: 2s;
}

.floating-element-fast {
    animation: floatSway 4s infinite ease-in-out;
}

.pulse-node {
    animation: pulseGlow 3s infinite ease-in-out;
}

.chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawPath 3s forwards ease-in-out;
    animation-delay: 0.5s;
}

/* --- Premium 2D Services Section --- */
.services-section {
    position: relative;
    width: 100%;
    padding: 8rem 0;
    background-color: #ffffff; /* Clean white background */
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    overflow: hidden;
}

.services-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.section-header {
    text-align: center;
    max-width: 650px;
    margin: 0 auto 5rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

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

.section-underline {
    width: 50px;
    height: 4px;
    background-color: var(--color-primary);
    border-radius: 20px;
    margin: 0.25rem 0;
}

.section-subdesc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2.5rem; /* Spacious and airy gap */
}

/* Modern flat 2D service cards with flat background and soft shadow */
.service-card {
    background-color: var(--bg-secondary); /* Flat background color (#f8fafc) */
    border: 1px solid var(--border-color);   /* Elegant thin border */
    border-radius: 12px;
    padding: 2.5rem 2rem;                     /* Generous breathing space */
    position: relative;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, box-shadow 0.3s;
    cursor: pointer;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.03), 0 1px 3px rgba(15, 23, 42, 0.01); /* Soft subtle shadow */
}

/* Subtle lift hover effect */
.service-card:hover {
    transform: translateY(-6px); /* Subtle lift */
    border-color: var(--color-primary);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.07); /* Dynamic soft shadow */
}

.card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
}

/* Monochromatic simple 2D icon box */
.service-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    background-color: var(--bg-tertiary); /* Flat gray-blue background */
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.service-card:hover .service-icon-box {
    background-color: var(--color-primary-dim);
    border-color: var(--color-primary);
}

/* Monochromatic simple 2D icon styling */
.service-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary); /* Monochromatic gray/slate color by default */
    transition: color 0.3s ease;
}

.service-card:hover .service-icon {
    color: var(--color-primary); /* Royal blue highlight on card hover */
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 750;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
}

.service-card p {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.service-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-primary); /* Monochromatic link default */
    transition: all 0.3s ease;
}

.service-card:hover .service-cta {
    color: var(--color-primary);
}

.cta-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
}

.service-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* --- Clean About Us Section --- */
.about-section {
    position: relative;
    width: 100%;
    padding: 7.5rem 0;
    background-color: var(--bg-secondary); /* Elegant light grey/slate-grey background */
    overflow: hidden;
}

.about-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

/* Mission Grid Layout */
.about-mission-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4rem;
    align-items: flex-start;
    margin-bottom: 5rem;
}

.mission-text-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mission-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.mission-text-block h3 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.3;
    margin-bottom: 1.5rem;
}

.mission-paragraph {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.75;
    margin-bottom: 1.25rem;
}

.mission-pillars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pillar-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.015);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.05);
}

.pillar-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background-color: var(--color-primary-dim);
    border: 1.5px solid rgba(37, 99, 235, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.pillar-icon {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.pillar-content h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.pillar-content p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.about-divider {
    height: 1px;
    background-color: var(--border-color);
    margin: 5rem 0;
    width: 100%;
}

/* Our Team Styling */
.team-sub-section {
    width: 100%;
}

.team-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 4rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.team-tag {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-teal);
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.team-header h3 {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.team-subdesc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.team-card {
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 3rem 2rem 2.5rem 2rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.015);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s, box-shadow 0.3s;
}

.team-card:hover {
    transform: translateY(-6px);
    border-color: var(--color-teal);
    box-shadow: 0 20px 40px rgba(13, 148, 136, 0.06);
}

.team-avatar-box {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    border: 3px solid #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}

.team-avatar-box.bg-blue {
    background-color: #eff6ff;
}

.team-avatar-box.bg-teal {
    background-color: #f0fdfa;
}

.team-avatar-box.bg-purple {
    background-color: #faf5ff;
}

.team-avatar {
    width: 100%;
    height: 100%;
}

.credential-badge {
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 50px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    letter-spacing: 0.5px;
}

.badge-ca {
    background-color: var(--color-primary-dim);
    color: var(--color-primary);
    border: 1px solid rgba(37, 99, 235, 0.15);
}

.badge-mba {
    background-color: var(--color-teal-dim);
    color: var(--color-teal);
    border: 1px solid rgba(13, 148, 136, 0.15);
}

.badge-prof {
    background-color: #faf5ff;
    color: #6b21a8;
    border: 1px solid rgba(107, 33, 168, 0.15);
}

.team-card h4 {
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 750;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.team-role {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 1.25rem;
}

.team-card-divider {
    width: 40px;
    height: 2px;
    background-color: var(--border-color);
    margin-bottom: 1.25rem;
}

.team-bio {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.65;
}

/* Stats Counter Bar */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 5rem;
}

.stat-card {
    background-color: #ffffff; /* White background for pop */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.015);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.04);
}

.stat-number-wrapper {
    font-family: var(--font-heading);
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

.stat-suffix {
    color: var(--color-accent);
}

.stat-label {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* --- Clean Contact Us Section --- */
.contact-section {
    position: relative;
    width: 100%;
    padding: 7.5rem 0;
    background-color: var(--bg-primary); /* Absolute white background */
    border-top: 1px solid var(--border-color);
}

.contact-container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 4.5rem;
    align-items: flex-start;
}

/* Contact Form Styling */
.contact-form-container {
    background-color: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 3.5rem;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-container:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}

.contact-form-container h3 {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

.contact-form-sub {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 2.25rem;
    line-height: 1.5;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.form-group-full {
    grid-column: span 2;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.form-input {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-primary);
    padding: 0.85rem 1rem;
    background-color: #ffffff;
    border: 1.5px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:hover {
    border-color: var(--border-hover);
}

.form-input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-glow);
}

textarea.form-input {
    resize: vertical;
    min-height: 140px;
}

/* Submit Button with Soft Accent Teal Color */
.btn-submit {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    color: #ffffff;
    background-color: var(--color-teal); /* Soft teal accent color */
    border: none;
    border-radius: 8px;
    padding: 1.05rem 2rem;
    cursor: pointer;
    width: 100%;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 0px 0px #0b7a70; /* 2D Flat shadow style */
}

.btn-submit:hover {
    background-color: var(--color-teal-hover);
    box-shadow: 0 4px 0px 0px #085e56;
}

.btn-submit:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0px 0px #085e56;
}

.btn-submit-icon {
    width: 16px;
    height: 16px;
}

/* Contact Sidebar Styling */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: 2.25rem;
}

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

.sidebar-desc {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: 0.5rem;
}

.contact-card-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.contact-detail-card {
    background-color: var(--bg-secondary); /* Soft light-grey contrast */
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-detail-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.contact-card-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1.5px solid var(--border-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.contact-detail-card:hover .contact-card-icon-box {
    border-color: rgba(37, 99, 235, 0.2);
    background-color: var(--color-primary-dim);
}

.contact-card-icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}

.contact-detail-card:hover .contact-card-icon {
    color: var(--color-primary);
}

.contact-card-info h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 750;
    color: var(--color-text-primary);
    margin-bottom: 0.35rem;
}

.contact-card-info p {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.contact-card-info a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

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

/* 2D Minimalist Map Graphic Panel */
.office-schematic {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}

.schematic-title-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.schematic-title {
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--color-teal);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.schematic-status {
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-teal);
    background-color: var(--color-teal-dim);
    padding: 2px 8px;
    border-radius: 50px;
}

.schematic-canvas {
    width: 100%;
    height: 130px;
    border-radius: 8px;
    background-color: #ffffff;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.schematic-grid-line-x, .schematic-grid-line-y {
    position: absolute;
    background-color: #f1f5f9;
}

.schematic-grid-line-x {
    width: 100%;
    height: 1px;
}

.schematic-grid-line-y {
    width: 1px;
    height: 100%;
}

.schematic-route {
    position: absolute;
    border: 2px dashed rgba(37, 99, 235, 0.25);
    border-radius: 6px;
    pointer-events: none;
}

.schematic-node-pulse {
    position: absolute;
    width: 24px;
    height: 24px;
    background-color: rgba(37, 99, 235, 0.15);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: schematicPulse 2s infinite ease-out;
    pointer-events: none;
}

.schematic-node-core {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: var(--color-primary);
    border: 2px solid #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(37, 99, 235, 0.4);
}

.schematic-label-pop {
    position: absolute;
    background-color: var(--color-text-primary);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 4px;
    transform: translate(-50%, -100%);
    margin-top: -12px;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(15, 23, 42, 0.1);
}

.schematic-label-pop::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 4px 4px 0;
    border-style: solid;
    border-color: var(--color-text-primary) transparent;
    display: block;
    width: 0;
}

.schematic-coords {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@keyframes schematicPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.6);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* --- CSS Animations --- */
@keyframes dotPulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(0.9);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

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

@keyframes floatSway {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
    }
    50% {
        transform: translateY(-6px) translateX(4px);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.95);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

@keyframes drawPath {
    to {
        stroke-dashoffset: 0;
    }
}

/* --- Responsive Media Queries --- */
@media (max-width: 1024px) {
    .hero-container {
        grid-template-columns: 1fr;
        gap: 3.5rem;
        text-align: center;
        padding-top: 4rem;
    }
    
    .hero-content {
        align-items: center;
        text-align: center;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-actions {
        justify-content: center;
    }
    
    .hero-metrics {
        justify-content: center;
    }
    
    .about-mission-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 70px;
    }
    
    .navbar {
        height: var(--nav-height);
    }
    
    .nav-links, .nav-actions {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-tagline {
        font-size: 1.2rem;
    }
    
    .hero-metrics {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .team-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-form-container {
        padding: 2.5rem 1.75rem;
    }
    
    .contact-form-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .form-group-full {
        grid-column: span 1;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.1rem;
    }
    
    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
    }
    
    .about-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SK DIGITALS - FUTURE-READY COMPLIANCE & FUTURISTIC SERVICES SECTION STYLES
   ========================================================================== */

/* Variables for Premium Services */
:root {
    --glow-cyan-rgb: 0, 245, 255;
    --glow-purple-rgb: 123, 97, 255;
    --glow-blue-rgb: 0, 212, 255;
    
    --glow-cyan-hex: #00F5FF;
    --glow-purple-hex: #7B61FF;
    --glow-blue-hex: #00D4FF;
}

/* Premium Dark Container for High-Contrast Neon Pop */
.services-section-premium {
    position: relative;
    width: 100%;
    padding: 120px 0;
    background-color: #05070c; /* Futuristic deep dark void */
    overflow: hidden;
    z-index: 10;
}

.premium-services-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Grid Mesh Overlay */
.premium-services-bg .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center;
    mask-image: radial-gradient(circle at 50% 50%, black 60%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 60%, transparent 100%);
}

/* Ambient Radial Orbs */
.services-orb {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    animation: floatingOrb 25s infinite ease-in-out alternate;
}

.orb-blue {
    top: -10%;
    left: 5%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.5) 0%, transparent 70%);
}

.orb-purple {
    bottom: -10%;
    right: 5%;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.4) 0%, transparent 70%);
    animation-delay: -5s;
}

.orb-cyan {
    top: 40%;
    left: 45%;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.3) 0%, transparent 70%);
    animation-delay: -10s;
}

@keyframes floatingOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(60px, 40px) scale(1.15); }
}

/* Premium Badge for Dark Section */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 50px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    margin-bottom: 1.25rem;
}

.badge-dot-cyan {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--glow-cyan-hex);
    box-shadow: 0 0 10px var(--glow-cyan-hex);
    animation: neonPulse 1.8s infinite ease-in-out;
}

@keyframes neonPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 8px rgba(0, 245, 255, 0.6); }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 15px rgba(0, 245, 255, 1); }
}

.services-section-premium .section-title {
    color: #ffffff;
    font-size: 2.8rem;
    letter-spacing: -0.5px;
}

.services-section-premium .section-subdesc {
    color: rgba(255, 255, 255, 0.6);
    max-width: 700px;
}

/* Services Premium Grid Layout */
.services-grid-premium {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 5;
}

/* Reusable Glassmorphism 3D Service Cards */
.service-card-3d {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform, border-color, box-shadow;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    outline: none;
}

/* Glow Border & Shadow Color Profiles */
.card-glow-cyan {
    --card-glow-rgb: var(--glow-cyan-rgb);
    --card-glow-hex: var(--glow-cyan-hex);
}

.card-glow-purple {
    --card-glow-rgb: var(--glow-purple-rgb);
    --card-glow-hex: var(--glow-purple-hex);
}

.card-glow-blue {
    --card-glow-rgb: var(--glow-blue-rgb);
    --card-glow-hex: var(--glow-blue-hex);
}

/* Card Mouse-Tracking Inner Glow Overlay */
.service-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        350px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--card-glow-rgb), 0.12),
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.service-card-3d:hover::before {
    opacity: 1;
}

/* Dynamic Radial Border Glow Sweep using CSS masks */
.service-card-3d::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: radial-gradient(
        220px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--card-glow-rgb), 0.45),
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 3;
}

.service-card-3d:hover::after {
    opacity: 1;
}

/* Hover States & Micro Interactions */
.service-card-3d:hover {
    border-color: rgba(var(--card-glow-rgb), 0.25);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--card-glow-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Keyboard Accessibility Focus */
.service-card-3d:focus-visible {
    border-color: var(--card-glow-hex);
    box-shadow: 0 0 25px rgba(var(--card-glow-rgb), 0.45);
    transform: translateY(-8px);
}

/* Animated Shimmer Sweep Flare */
.shimmer-sweep {
    position: absolute;
    top: 0;
    left: -150%;
    width: 80%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.2) 50%,
        rgba(255, 255, 255, 0.08) 70%,
        transparent
    );
    transform: skewX(-25deg);
    transition: none;
    pointer-events: none;
    z-index: 4;
}

.service-card-3d:hover .shimmer-sweep {
    left: 150%;
    transition: left 1.2s cubic-bezier(0.2, 0.6, 0.3, 1.0);
}

/* Card Content Inner Layer */
.service-card-3d .card-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    z-index: 5;
    transform: translateZ(30px); /* 3D depth layering */
}

/* Service Icon Premium Container */
.service-icon-box-3d {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2.25rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s, border-color 0.4s;
    transform-style: preserve-3d;
}

.service-card-3d:hover .service-icon-box-3d {
    background-color: rgba(var(--card-glow-rgb), 0.08);
    border-color: rgba(var(--card-glow-rgb), 0.45);
    transform: translateZ(15px) scale(1.08);
}

/* Icon Ambient Backlight Glow */
.service-icon-box-3d::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 22px;
    background: rgba(var(--card-glow-rgb), 0.25);
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: -1;
}

.service-card-3d:hover .service-icon-box-3d::before {
    opacity: 1;
}

/* SVGs Styling & Floating Micro-Animations */
.svg-service-icon {
    width: 38px;
    height: 38px;
    transition: transform 0.4s ease;
}

.svg-service-icon .svg-bg-circle {
    transition: stroke-width 0.4s ease, fill 0.4s ease;
}

.service-card-3d:hover .svg-service-icon .svg-bg-circle {
    fill: rgba(var(--card-glow-rgb), 0.12);
    stroke: rgba(var(--card-glow-rgb), 0.35);
}

.svg-service-icon .svg-main-path {
    transition: stroke-width 0.4s ease;
}

.service-card-3d:hover .svg-service-icon .svg-main-path {
    stroke-width: 3px;
}

/* Continuous Subtle Float & Rotation */
.floating-path {
    animation: pathFloat 4s infinite ease-in-out;
}

.pulse-path {
    animation: pathPulse 2.5s infinite ease-in-out;
}

@keyframes pathFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-2px) rotate(1.5deg); }
}

@keyframes pathPulse {
    0%, 100% { opacity: 0.75; }
    50% { opacity: 1; }
}

/* Typographic Excellence inside Cards */
.service-card-3d h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    transition: color 0.4s ease;
}

.service-card-3d:hover h3 {
    color: var(--card-glow-hex);
}

.service-card-3d p {
    font-family: var(--font-body);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.75;
    margin-bottom: 2.25rem;
    flex-grow: 1;
    transition: color 0.4s ease;
}

.service-card-3d:hover p {
    color: rgba(255, 255, 255, 0.85);
}

/* CTA Arrow Link UI */
.service-cta-premium {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.4s ease;
    margin-top: auto;
}

.service-cta-premium .cta-text {
    position: relative;
}

.service-cta-premium .cta-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--card-glow-hex);
    transition: width 0.3s ease;
}

.service-card-3d:hover .service-cta-premium {
    color: var(--card-glow-hex);
}

.service-card-3d:hover .service-cta-premium .cta-text::after {
    width: 100%;
}

.service-cta-premium .cta-arrow {
    width: 15px;
    height: 15px;
    color: currentColor;
    transition: transform 0.3s cubic-bezier(0.2, 0.6, 0.3, 1.0);
}

.service-card-3d:hover .service-cta-premium .cta-arrow {
    transform: translateX(6px);
}

/* Media Queries for Premium Services Layout */
@media (max-width: 1024px) {
    .services-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    .services-section-premium {
        padding: 100px 0;
    }
}

@media (max-width: 768px) {
    .services-grid-premium {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 1.5rem;
    }
    .services-section-premium {
        padding: 80px 0;
    }
    .services-section-premium .section-title {
        font-size: 2.2rem;
    }
}

/* Reduced Motion Settings */
@media (prefers-reduced-motion: reduce) {
    .service-card-3d {
        transform: none !important;
        transition: none !important;
    }
    
    .shimmer-sweep, .services-orb, .floating-path, .pulse-path {
        animation: none !important;
        display: none !important;
    }
}

/* ==========================================================================
   SK DIGITALS - PREMIUM ANIMATED STATISTICS COUNTER SECTION
   ========================================================================== */

.stats-section-premium {
    position: relative;
    width: 100%;
    padding: 100px 0;
    background-color: #05070c; /* Deep tech void black */
    overflow: hidden;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.premium-stats-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.premium-stats-bg .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center;
    mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
}

.stats-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.1;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
    animation: statsFloatingOrb 22s infinite ease-in-out alternate;
}

.stats-orb.orb-cyan {
    top: -15%;
    left: 10%;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.4) 0%, transparent 70%);
}

.stats-orb.orb-purple {
    bottom: -15%;
    right: 10%;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.3) 0%, transparent 70%);
    animation-delay: -4s;
}

.stats-orb.orb-blue {
    top: 30%;
    left: 45%;
    background: radial-gradient(circle, rgba(0, 212, 255, 0.35) 0%, transparent 70%);
    animation-delay: -8s;
}

@keyframes statsFloatingOrb {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -30px) scale(1.1); }
}

.stats-container-premium {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 5;
}

.stats-grid-premium {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    width: 100%;
}

/* Glassmorphism 3D Statistics Cards */
.stats-card-3d {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    cursor: pointer;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform, border-color, box-shadow;
    box-shadow: 
        0 15px 45px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s ease, box-shadow 0.4s ease;
    outline: none;
}

/* Card Hover States & Micro Interactions */
.stats-card-3d:hover {
    transform: translateY(-8px) scale(1.03);
    border-color: rgba(var(--card-glow-rgb), 0.25);
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 30px rgba(var(--card-glow-rgb), 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.stats-card-3d:focus-visible {
    border-color: var(--card-glow-hex);
    box-shadow: 0 0 25px rgba(var(--card-glow-rgb), 0.45);
    transform: translateY(-8px) scale(1.03);
}

/* Interactive Cursor Radial Glow Overlay */
.stats-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--card-glow-rgb), 0.12),
        transparent 80%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 2;
}

.stats-card-3d:hover::before {
    opacity: 1;
}

/* Dynamic Radial Border Glow Sweep using CSS masks */
.stats-card-3d::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 24px;
    padding: 1px;
    background: radial-gradient(
        200px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(var(--card-glow-rgb), 0.45),
        rgba(255, 255, 255, 0.05) 50%,
        transparent 100%
    );
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 3;
}

.stats-card-3d:hover::after {
    opacity: 1;
}

.stats-card-3d .card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    z-index: 5;
    transform: translateZ(30px);
}

/* Numbers Container with neon slow pulse animations */
.stat-number-box {
    display: flex;
    align-items: baseline;
    font-family: var(--font-heading);
    color: #ffffff;
    margin-bottom: 1.25rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.stat-number-digit {
    font-size: 64px;
    color: #ffffff;
    transition: text-shadow 0.4s ease, color 0.4s ease;
    animation: neonStatPulse 3s infinite ease-in-out;
}

.stat-number-suffix {
    font-size: 40px;
    color: rgba(255, 255, 255, 0.95);
    margin-left: 1px;
}

.stats-card-3d:hover .stat-number-digit {
    color: #ffffff;
    text-shadow: 0 0 20px rgba(var(--card-glow-rgb), 0.75);
}

@keyframes neonStatPulse {
    0%, 100% {
        text-shadow: 0 0 8px rgba(var(--card-glow-rgb), 0.15);
    }
    50% {
        text-shadow: 0 0 20px rgba(var(--card-glow-rgb), 0.4);
    }
}

/* Label box and dynamic underline animation */
.stat-label-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.stat-label-text {
    font-family: var(--font-body);
    font-size: 18px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    transition: color 0.4s ease;
}

.stats-card-3d:hover .stat-label-text {
    color: #ffffff;
}

.stat-label-line {
    width: 0%;
    height: 2px;
    background-color: var(--card-glow-hex);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.2, 0.6, 0.3, 1.0);
}

.stats-card-3d:hover .stat-label-line {
    width: 60%;
}

/* Responsive Rules for Statistics Section */
@media (max-width: 1024px) {
    .stats-grid-premium {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
    }
    .stats-section-premium {
        padding: 80px 0;
    }
    .stat-number-digit {
        font-size: 52px;
    }
    .stat-number-suffix {
        font-size: 32px;
    }
    .stat-label-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .stats-grid-premium {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 0 1.5rem;
    }
    .stats-section-premium {
        padding: 60px 0;
    }
    .stats-card-3d {
        padding: 30px;
    }
    .stat-number-digit {
        font-size: 40px;
    }
    .stat-number-suffix {
        font-size: 26px;
    }
}

/* Reduced Motion Settings */
@media (prefers-reduced-motion: reduce) {
    .stats-card-3d {
        transform: none !important;
        transition: none !important;
    }
    
    .stats-orb, .stat-number-digit, .stat-label-line {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   SK DIGITALS - WORLD-CLASS INTERACTIVE INDIA MAP SECTION STYLES
   ========================================================================== */

/* Container Backdrop */
.map-section-premium {
    position: relative;
    width: 100%;
    padding: 120px 0;
    background-color: #05070c; /* High-end slate deep dark void */
    overflow: hidden;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.premium-map-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.premium-map-bg .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center;
    mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);
}

.map-orb {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.1;
    mix-blend-mode: plus-lighter;
    pointer-events: none;
}

.map-orb.orb-cyan {
    top: 10%;
    left: -10%;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.3) 0%, transparent 80%);
}

.map-orb.orb-purple {
    bottom: 10%;
    right: -10%;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.3) 0%, transparent 80%);
}

.map-orb.orb-blue {
    top: 40%;
    left: 45%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.2) 0%, transparent 80%);
}

.map-section-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    position: relative;
    z-index: 5;
}

/* Two-Column Layout */
.map-grid-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
    margin-top: 50px;
}

/* Map Display Wrapper */
.map-display-wrapper {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.map-canvas-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    touch-action: none;
    cursor: grab;
}

.map-canvas-container:active {
    cursor: grabbing;
}

/* Interactive SVG Map */
.india-svg-map {
    width: 100%;
    height: auto;
    max-height: 650px;
    display: block;
    transform-origin: center center;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.india-svg-map path {
    fill: rgba(255, 255, 255, 0.04);
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1.2px;
    transition: fill 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
                stroke 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), 
                filter 0.35s ease;
}

/* Hover highlights classes */
.india-svg-map path:hover,
.india-svg-map path:focus {
    outline: none;
}

/* Floating Data Badges overlayed on map */
.map-data-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(8, 12, 24, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 50px;
    padding: 6px 14px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.map-data-badge:hover {
    border-color: rgba(0, 245, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2);
}

.map-data-badge .badge-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #00F5FF;
    animation: markerPulse 1.8s infinite ease-in-out;
}

.map-data-badge.badge-up .badge-pulse { background-color: #00D4FF; }
.map-data-badge.badge-mh .badge-pulse { background-color: #7B61FF; }
.map-data-badge.badge-ka .badge-pulse { background-color: #7B61FF; }
.map-data-badge.badge-dl .badge-pulse { background-color: #00D4FF; }
.map-data-badge.badge-gj .badge-pulse { background-color: #00F5FF; }
.map-data-badge.badge-tn .badge-pulse { background-color: #00F5FF; }

/* Animated Client Pins */
.city-pin-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
    z-index: 12;
    opacity: 0;
    transform: scale(0.6);
}

.city-pin-marker .pin-pulse-ring {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
    transform: scale(1);
    animation: pinPulse 2s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

.city-pin-marker .pin-core {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: currentColor;
    border: 1.5px solid #ffffff;
    box-shadow: 0 0 10px currentColor;
    transition: transform 0.3s ease;
}

.city-pin-marker .pin-tooltip-label {
    position: absolute;
    bottom: 20px;
    background: rgba(8, 12, 24, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    padding: 3px 8px;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 600;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.city-pin-marker:hover .pin-tooltip-label,
.city-pin-marker:focus .pin-tooltip-label {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Pin Color Variations */
.city-pin-marker .color-cyan { color: #00D4FF; }
.city-pin-marker .color-purple { color: #7B61FF; }
.city-pin-marker .color-blue { color: #00F5FF; }

@keyframes pinPulse {
    0% {
        transform: scale(0.6);
        opacity: 1;
    }
    100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

@keyframes markerPulse {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Mobile Zoom & Pan Controls overlay */
.map-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 20;
}

.btn-map-control {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(8, 12, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    outline: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.btn-map-control:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.btn-map-control:active {
    transform: translateY(0);
}

/* Right Column: Side Statistics Panel */
.map-stats-panel {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.012);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 24px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
}

.stats-panel-header h3 {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.stats-panel-header p {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.6;
}

.stats-panel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* Stat Panel Cards */
.stat-panel-card {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), 
                border-color 0.3s ease, 
                box-shadow 0.3s ease;
    cursor: pointer;
    outline: none;
}

.stat-panel-card:hover,
.stat-panel-card:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.stat-icon-wrapper {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

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

.stat-icon-wrapper.color-cyan { color: #00D4FF; border-color: rgba(0, 212, 255, 0.15); background: rgba(0, 212, 255, 0.02); }
.stat-icon-wrapper.color-purple { color: #7B61FF; border-color: rgba(123, 97, 255, 0.15); background: rgba(123, 97, 255, 0.02); }
.stat-icon-wrapper.color-blue { color: #00F5FF; border-color: rgba(0, 245, 255, 0.15); background: rgba(0, 245, 255, 0.02); }

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-number-wrapper {
    font-family: var(--font-heading);
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    letter-spacing: -1px;
}

.panel-stat-suffix {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 1px;
}

.panel-stat-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
}

/* Call to action */
.panel-actions {
    width: 100%;
    margin-top: 10px;
}

.btn-panel-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 18px 24px;
    border-radius: 12px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 750;
    color: #ffffff;
    background: linear-gradient(135deg, #00D4FF 0%, #0066FF 100%);
    box-shadow: 0 15px 30px rgba(0, 102, 255, 0.25);
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-panel-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px rgba(0, 102, 255, 0.35);
}

.btn-panel-cta svg {
    transition: transform 0.3s ease;
}

.btn-panel-cta:hover svg {
    transform: translateX(4px);
}

/* Glassmorphic Dynamic Floating Tooltip overlay */
.floating-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 220px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(8, 12, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(25px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(0, 0, 0);
    transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Glow indicators based on active state data */
.floating-tooltip.glow-cyan { border-color: rgba(0, 212, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.floating-tooltip.glow-purple { border-color: rgba(123, 97, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 20px rgba(123, 97, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
.floating-tooltip.glow-blue { border-color: rgba(0, 245, 255, 0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 20px rgba(0, 245, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1); }

.tooltip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: 8px;
}

.tooltip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}
.floating-tooltip.glow-cyan .tooltip-dot { color: #00D4FF; }
.floating-tooltip.glow-purple .tooltip-dot { color: #7B61FF; }
.floating-tooltip.glow-blue .tooltip-dot { color: #00F5FF; }

.tooltip-header h4 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 750;
    color: #ffffff;
}

.tooltip-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.tooltip-label {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.tooltip-val {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
}

.tooltip-val.text-neon-green {
    color: #00FF87;
}

.tooltip-val.text-dim {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
}

/* Neon text color bindings */
.text-neon-cyan { color: #00D4FF; }
.text-neon-purple { color: #7B61FF; }
.text-neon-blue { color: #00F5FF; }

/* Responsive Media Queries */
@media (max-width: 1200px) {
    .map-grid-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .map-section-premium {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .map-display-wrapper {
        padding: 15px;
        border-radius: 16px;
    }
    .map-stats-panel {
        padding: 30px;
        border-radius: 16px;
    }
    .stats-panel-grid {
        grid-template-columns: 1fr;
    }
    .stat-panel-card {
        padding: 20px;
    }
    .map-data-badge {
        padding: 4px 10px;
        font-size: 10px;
    }
    .btn-panel-cta {
        padding: 15px 20px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .india-svg-map,
    .city-pin-marker,
    .map-data-badge,
    .btn-map-control,
    .stat-panel-card,
    .btn-panel-cta,
    .floating-tooltip {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   🤖 SK AI BUSINESS ASSISTANT CHATBOT WIDGET
   Modern SaaS + AI Assistant + Glassmorphism + Corporate FinTech + Premium UX
   ========================================================================== */

:root {
    --sk-chat-cyan: #00D4FF;
    --sk-chat-purple: #7B61FF;
    --sk-chat-navy: #081120;
    --sk-chat-void: #050505;
    --sk-chat-white: #FFFFFF;
    --sk-chat-glass-bg: rgba(8, 17, 32, 0.7);
    --sk-chat-glass-border: rgba(255, 255, 255, 0.08);
    --sk-chat-glow-cyan: rgba(0, 212, 255, 0.35);
    --sk-chat-glow-purple: rgba(123, 97, 255, 0.35);
    --sk-chat-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* --- Floating Chat Trigger Button --- */
.sk-chat-trigger-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--sk-chat-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1.5px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 212, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    z-index: 999;
    outline: none;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), border-color 0.4s, box-shadow 0.4s;
    animation: chatFloat 6s ease-in-out infinite;
    pointer-events: auto;
}

.sk-chat-trigger-btn:hover {
    transform: scale(1.1) translateY(-2px);
    border-color: var(--sk-chat-purple);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(123, 97, 255, 0.35), inset 0 0 15px rgba(0, 212, 255, 0.25);
}

.sk-chat-trigger-btn:active {
    transform: scale(0.95);
}

/* Neon Glow Ring overlay */
.sk-chat-glow-ring {
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sk-chat-cyan), var(--sk-chat-purple));
    z-index: -1;
    opacity: 0.4;
    filter: blur(6px);
    animation: ringGlowRotate 8s linear infinite;
    transition: opacity 0.4s, filter 0.4s;
}

.sk-chat-trigger-btn:hover .sk-chat-glow-ring {
    opacity: 0.8;
    filter: blur(10px);
}

.sk-chat-trigger-icon {
    width: 28px;
    height: 28px;
    stroke: #ffffff;
    stroke-width: 1.5;
    fill: none;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sk-chat-trigger-btn:hover .sk-chat-trigger-icon {
    transform: rotate(15deg) scale(1.05);
}

/* Pulsing Notification Badge */
.sk-chat-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 15px;
    height: 15px;
    background: var(--sk-chat-purple);
    border-radius: 50%;
    border: 2px solid var(--sk-chat-navy);
    box-shadow: 0 0 10px var(--sk-chat-purple);
    animation: badgePulse 2s infinite;
}

/* --- Confetti Canvas --- */
#sk-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10000;
}

/* --- Chatbot Window Frame Container --- */
.sk-chat-window-frame {
    position: fixed;
    bottom: 110px;
    right: 30px;
    width: 420px;
    height: 650px;
    border-radius: 24px;
    background: rgba(8, 17, 32, 0.75);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--sk-chat-glass-border);
    box-shadow: var(--sk-chat-shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 998;
    
    /* Animation initial states */
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s cubic-bezier(0.19, 1, 0.22, 1), backdrop-filter 0.4s;
    
    will-change: transform, opacity;
}

.sk-chat-window-frame.active {
    opacity: 1;
    transform: scale(1) translateY(0);
    pointer-events: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 30px rgba(0, 212, 255, 0.1), 0 0 50px rgba(123, 97, 255, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Gradient glow borders inside glass panel */
.sk-chat-border-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    pointer-events: none;
    box-shadow: inset 0 0 15px rgba(0, 212, 255, 0.05);
    z-index: 10;
}

/* Background digital grid & mesh overlay */
.sk-chat-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    opacity: 0.65;
}

.sk-chat-grid-overlay {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: linear-gradient(rgba(0, 212, 255, 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 212, 255, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(500px) rotateX(45deg);
    animation: gridScroll 30s linear infinite;
}

.sk-chat-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.15;
    mix-blend-mode: screen;
}

.sk-chat-glow-orb.orb-1 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--sk-chat-cyan) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    animation: orbMove1 12s ease-in-out infinite alternate;
}

.sk-chat-glow-orb.orb-2 {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--sk-chat-purple) 0%, transparent 70%);
    bottom: -30px;
    left: -30px;
    animation: orbMove2 10s ease-in-out infinite alternate;
}

/* --- Header Panel --- */
.sk-chat-header {
    background: linear-gradient(180deg, rgba(8, 17, 32, 0.95) 0%, rgba(8, 17, 32, 0.8) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

.sk-chat-header-identity {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sk-chat-header-avatar {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(123, 97, 255, 0.15));
    border: 1px solid rgba(0, 212, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15);
}

.sk-chat-header-avatar svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: var(--sk-chat-cyan);
    stroke-width: 1.5;
}

.sk-chat-header-status-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #00FF87;
    border: 2px solid var(--sk-chat-navy);
    box-shadow: 0 0 8px #00FF87;
}

.sk-chat-header-meta {
    display: flex;
    flex-direction: column;
}

.sk-chat-header-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 750;
    color: #ffffff;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sk-chat-header-sublabel {
    font-family: var(--font-body);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 500;
}

.sk-chat-header-controls {
    display: flex;
    gap: 6px;
}

.sk-chat-header-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.sk-chat-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.sk-chat-header-btn svg {
    width: 16px;
    height: 16px;
}

/* --- Scrollable Chat Viewport Container --- */
.sk-chat-logs {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 5;
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
.sk-chat-logs::-webkit-scrollbar {
    width: 5px;
}

.sk-chat-logs::-webkit-scrollbar-track {
    background: transparent;
}

.sk-chat-logs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
}

.sk-chat-logs::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.3);
}

/* --- Message Bubbles --- */
.sk-chat-msg-row {
    display: flex;
    width: 100%;
    margin-bottom: 2px;
    animation: bubbleEnter 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.sk-chat-msg-row.msg-user {
    justify-content: flex-end;
}

.sk-chat-msg-row.msg-ai {
    justify-content: flex-start;
}

.sk-chat-msg-bubble {
    max-width: 82%;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.5;
    font-family: var(--font-body);
}

/* User Bubble Design: Gradient blue-purple */
.sk-chat-msg-row.msg-user .sk-chat-msg-bubble {
    background: linear-gradient(135deg, #00A6FF 0%, var(--sk-chat-purple) 100%);
    color: #ffffff;
    border-radius: 18px 18px 4px 18px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0, 166, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* AI Bubble Design: Dark translucent Glassmorphism panel */
.sk-chat-msg-row.msg-ai .sk-chat-msg-bubble {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 18px 18px 18px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sk-chat-msg-bubble strong {
    color: #ffffff;
    font-weight: 650;
}

.sk-chat-msg-bubble ul, .sk-chat-msg-bubble ol {
    margin: 8px 0 8px 20px;
    padding: 0;
}

.sk-chat-msg-bubble li {
    margin-bottom: 6px;
}

.sk-chat-msg-bubble a {
    color: var(--sk-chat-cyan);
    text-decoration: underline;
    font-weight: 600;
}

/* Time Indicator */
.sk-chat-msg-time {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 4px;
    display: flex;
    justify-content: flex-end;
}

.sk-chat-msg-row.msg-ai .sk-chat-msg-time {
    justify-content: flex-start;
}

/* --- Typing Indicator Animation --- */
.sk-typing-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
}

.sk-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--sk-chat-cyan);
    opacity: 0.3;
    animation: typingBounce 1.4s infinite ease-in-out;
}

.sk-typing-dot:nth-child(2) {
    animation-delay: 0.2s;
    background-color: #3b82f6;
}

.sk-typing-dot:nth-child(3) {
    animation-delay: 0.4s;
    background-color: var(--sk-chat-purple);
}

/* --- Smart Suggestion Chips --- */
.sk-chat-suggestions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    animation: bubbleEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.sk-chat-chip {
    padding: 8px 14px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.sk-chat-chip:hover {
    color: #ffffff;
    background: rgba(0, 212, 255, 0.08);
    border-color: rgba(0, 212, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.15);
}

.sk-chat-chip:active {
    transform: translateY(0);
}

.sk-chat-chip.highlight {
    background: rgba(123, 97, 255, 0.08);
    border-color: rgba(123, 97, 255, 0.35);
    color: #ffffff;
}

.sk-chat-chip.highlight:hover {
    background: rgba(123, 97, 255, 0.15);
    border-color: var(--sk-chat-purple);
    box-shadow: 0 4px 12px rgba(123, 97, 255, 0.25);
}

/* --- Expandable AI Service Cards --- */
.sk-chat-service-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 14px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all 0.3s ease;
}

.sk-chat-service-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.2);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.sk-chat-card-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 750;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sk-chat-card-title svg {
    width: 16px;
    height: 16px;
    color: var(--sk-chat-cyan);
}

.sk-chat-card-bullets {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sk-chat-bullet-item {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sk-chat-bullet-item svg {
    width: 12px;
    height: 12px;
    color: #00FF87;
}

.sk-chat-card-cta {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transition: all 0.3s ease;
}

.sk-chat-card-cta:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(123, 97, 255, 0.15) 100%);
    border-color: rgba(0, 212, 255, 0.4);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

/* --- Inline Lead Capture Form --- */
.sk-chat-inline-form {
    background: rgba(8, 17, 32, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 18px;
    padding: 18px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sk-chat-form-title {
    font-family: var(--font-heading);
    font-size: 13.5px;
    font-weight: 750;
    color: #ffffff;
    margin-bottom: 4px;
    text-align: center;
}

.sk-chat-form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-chat-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sk-chat-form-input {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: var(--font-body);
    font-size: 12px;
    color: #ffffff;
    outline: none;
    transition: all 0.3s ease;
}

.sk-chat-form-input:focus {
    border-color: var(--sk-chat-cyan);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.15);
}

.sk-chat-form-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.sk-chat-form-input.error {
    border-color: #FF4A4A;
    box-shadow: 0 0 8px rgba(255, 74, 74, 0.2);
}

.sk-chat-form-error-txt {
    font-family: var(--font-body);
    font-size: 9.5px;
    color: #FF4A4A;
    margin-top: 2px;
}

.sk-chat-form-submit {
    margin-top: 6px;
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(135deg, #00A6FF, var(--sk-chat-purple));
    border: none;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(123, 97, 255, 0.3);
    transition: all 0.3s ease;
}

.sk-chat-form-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(123, 97, 255, 0.45);
    filter: brightness(1.1);
}

.sk-chat-form-submit:active {
    transform: translateY(0);
}

/* Success lead state container */
.sk-chat-form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    text-align: center;
    gap: 12px;
}

.sk-chat-success-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 255, 135, 0.1);
    border: 2.5px solid #00FF87;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00FF87;
    animation: successPulse 1.8s infinite;
}

.sk-chat-success-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2.5;
}

.sk-chat-success-h {
    font-family: var(--font-heading);
    font-weight: 750;
    font-size: 14.5px;
    color: #ffffff;
}

.sk-chat-success-p {
    font-family: var(--font-body);
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* --- Contact Cards Grid --- */
.sk-chat-contact-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 18px;
    padding: 16px;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-chat-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.sk-chat-contact-btn {
    padding: 10px 12px;
    border-radius: 10px;
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sk-chat-contact-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

.sk-chat-contact-btn svg {
    width: 14px;
    height: 14px;
}

.sk-chat-contact-btn.phone-btn:hover {
    border-color: rgba(0, 212, 255, 0.4);
    background: rgba(0, 212, 255, 0.08);
    box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.sk-chat-contact-btn.wa-btn:hover {
    border-color: rgba(0, 255, 135, 0.4);
    background: rgba(0, 255, 135, 0.08);
    box-shadow: 0 4px 12px rgba(0, 255, 135, 0.2);
}

.sk-chat-contact-btn.mail-btn:hover {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.08);
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.2);
}

.sk-chat-contact-btn.book-btn {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.1) 0%, rgba(0, 212, 255, 0.1) 100%);
    border-color: rgba(123, 97, 255, 0.25);
    color: #ffffff;
}

.sk-chat-contact-btn.book-btn:hover {
    background: linear-gradient(135deg, rgba(123, 97, 255, 0.2) 0%, rgba(0, 212, 255, 0.2) 100%);
    border-color: var(--sk-chat-purple);
    box-shadow: 0 5px 15px rgba(123, 97, 255, 0.25);
    transform: translateY(-2px);
}

/* --- Input Footer panel --- */
.sk-chat-footer {
    background: linear-gradient(0deg, rgba(8, 17, 32, 0.95) 0%, rgba(8, 17, 32, 0.8) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 14px 18px 18px 18px;
    position: relative;
    z-index: 10;
}

.sk-chat-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 6px 8px 6px 14px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sk-chat-input-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.35);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sk-chat-text-input {
    flex: 1;
    border: none;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    padding: 6px 0;
}

.sk-chat-text-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.sk-chat-input-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.sk-chat-input-btn svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.0;
}

.sk-chat-input-btn.send-btn {
    background: var(--sk-chat-gradient-glow);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(0, 212, 255, 0.2);
}

.sk-chat-input-btn.send-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(0, 212, 255, 0.35);
    filter: brightness(1.1);
}

.sk-chat-input-btn.send-btn:active {
    transform: scale(0.95);
}

.sk-chat-input-btn:hover:not(.send-btn) {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

/* Trust Elements Banner footer */
.sk-chat-trust-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    opacity: 0.6;
}

.sk-chat-trust-badge {
    font-family: var(--font-body);
    font-size: 8px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 3px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-weight: 700;
}

.sk-chat-trust-badge svg {
    width: 9px;
    height: 9px;
    color: #00FF87;
}

/* --- KEYFRAMES --- */
@keyframes chatFloat {
    0% { transform: translateY(0px) scale(1); }
    50% { transform: translateY(-7px) scale(1.01); }
    100% { transform: translateY(0px) scale(1); }
}

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

@keyframes badgePulse {
    0% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(123, 97, 255, 0.7); }
    70% { transform: scale(1.15); opacity: 0.9; box-shadow: 0 0 0 8px rgba(123, 97, 255, 0); }
    100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(123, 97, 255, 0); }
}

@keyframes gridScroll {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}

@keyframes orbMove1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, 30px) scale(1.15); }
}

@keyframes orbMove2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(25px, -25px) scale(1.1); }
}

@keyframes bubbleEnter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes typingBounce {
    0%, 100% { transform: translateY(0); opacity: 0.3; }
    50% { transform: translateY(-5px); opacity: 1; }
}

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

/* --- MOBILE SPECIFICS --- */
@media (max-width: 480px) {
    .sk-chat-trigger-btn {
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
    }
    
    .sk-chat-trigger-icon {
        width: 24px;
        height: 24px;
    }
    
    .sk-chat-window-frame {
        width: 100vw;
        height: 88vh;
        bottom: 0;
        right: 0;
        border-radius: 24px 24px 0 0;
        border-bottom: none;
        border-left: none;
        border-right: none;
        transform: scale(1) translateY(100%);
    }
    
    .sk-chat-window-frame.active {
        transform: scale(1) translateY(0);
        border-radius: 24px 24px 0 0;
    }
    
    .sk-chat-border-glow {
        border-radius: 24px 24px 0 0;
    }
}

/* Accessibility Reduced Motion overrides */
@media (prefers-reduced-motion: reduce) {
    .sk-chat-trigger-btn,
    .sk-chat-window-frame,
    .sk-chat-badge,
    .sk-chat-chip,
    .sk-chat-msg-row,
    .sk-typing-dot,
    .sk-chat-glow-ring,
    .sk-chat-grid-overlay,
    .sk-chat-glow-orb,
    .sk-chat-success-icon {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* ==========================================================================
   🎬 SK DIGITALS - WORLD-CLASS CINEMATIC SCROLLING & TEXT REVEAL SYSTEMS
   ========================================================================== */

/* 1. Lenis Smooth Scrolling Base Overrides */
html.lenis, html.lenis body {
    height: auto;
}
.lenis-smooth {
    scroll-behavior: auto !important;
}
.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

/* 2. Hardware-accelerated text reveal wrappers */
.char-span {
    display: inline-block;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
    white-space: pre; /* Retain standard spacing */
}
.word-span {
    display: inline-block;
    will-change: transform, opacity, filter;
    white-space: nowrap; /* Prevent words splitting across lines */
}

/* 3. Slow Gradient Glowing Pulse Loop */
@keyframes slowGradientGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.gradient-glow-active {
    background: linear-gradient(270deg, #00D4FF, #7B61FF, #00F5FF, #6A5AFF);
    background-size: 800% 800%;
    animation: slowGradientGlow 12s ease infinite;
}

/* 4. GPU Compositing Layer Acceleration */
.scroll-reveal,
.service-card-3d,
.stats-card-3d,
.pillar-card,
.team-card,
.stat-card,
.contact-form-container,
.contact-sidebar,
.contact-detail-card,
.canvas-container,
.navbar {
    will-change: transform, opacity;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

/* Magnetic Button Target Wrapping */
.magnetic-wrap {
    display: inline-block;
    position: relative;
    z-index: 10;
}

/* ==========================================================================
   🎠 SK DIGITALS - PREMIUM CLIENT TESTIMONIALS CAROUSEL & VIDEO MODAL STYLES
   ========================================================================== */

/* 1. Section Container & Digital Space Backdrop */
.testimonials-section-premium {
    position: relative;
    background-color: #081120;
    padding: 100px 0;
    overflow: hidden;
    width: 100%;
}

.premium-testimonials-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.premium-testimonials-bg .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
        radial-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px);
    background-size: 40px 40px, 20px 20px;
    opacity: 0.85;
}

/* Drifting Neon Ambient Blur Orbs */
.testimonials-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    will-change: transform;
    animation: driftTestimonialOrbs 18s ease-in-out infinite alternate;
}

.testimonials-orb.orb-blue {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, #00D4FF 0%, transparent 70%);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.testimonials-orb.orb-purple {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, #7B61FF 0%, transparent 70%);
    bottom: -15%;
    right: -10%;
    animation-delay: -5s;
}

@keyframes driftTestimonialOrbs {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(40px, -50px) scale(1.1); }
    100% { transform: translate(-30px, 30px) scale(0.9); }
}

.testimonials-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
}

/* 2. Testimonials Trust Statistics Row */
.testimonials-stats-row {
    display: grid;
    grid-template-cols: repeat(4, 1fr);
    gap: 24px;
    margin: 50px auto 70px auto;
    width: 100%;
}

.testimonial-stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s, background-color 0.4s;
    will-change: transform;
}

.testimonial-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(0, 245, 255, 0.25);
}

.testimonial-stat-card .stat-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    position: relative;
}

.testimonial-stat-card .stat-icon-box.cyan-glow {
    background: rgba(0, 212, 255, 0.08);
    color: #00D4FF;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.testimonial-stat-card .stat-icon-box.purple-glow {
    background: rgba(123, 97, 255, 0.08);
    color: #7B61FF;
    border: 1px solid rgba(123, 97, 255, 0.15);
}

.testimonial-stat-card .stat-icon {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 4px currentColor);
}

.testimonial-stat-card .stat-data {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.testimonial-stat-card .stat-number,
.testimonial-stat-card .stat-number-static {
    font-family: 'Outfit', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    background: linear-gradient(135deg, #FFFFFF 50%, rgba(255, 255, 255, 0.65));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonial-stat-card:hover .stat-number,
.testimonial-stat-card:hover .stat-number-static {
    background: linear-gradient(135deg, #00D4FF, #00F5FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.testimonial-stat-card .stat-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* 3. Slider Interface & Track Structure */
.sk-carousel-container {
    position: relative;
    width: 100%;
}

/* Left & Right Magnetic Navigation Buttons */
.sk-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: border-color 0.4s, background-color 0.4s, color 0.4s, box-shadow 0.4s;
    will-change: transform;
}

.sk-carousel-btn.prev-btn {
    left: -80px;
}

.sk-carousel-btn.next-btn {
    right: -80px;
}

.sk-carousel-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(0, 245, 255, 0.3);
    color: #00F5FF;
    box-shadow: 0 10px 30px rgba(0, 245, 255, 0.15);
}

.sk-carousel-btn:focus-visible {
    outline: 2px solid #00F5FF;
    outline-offset: 4px;
}

.sk-carousel-btn .carousel-btn-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.sk-carousel-btn.prev-btn:hover .carousel-btn-icon {
    transform: translateX(-2px);
}

.sk-carousel-btn.next-btn:hover .carousel-btn-icon {
    transform: translateX(2px);
}

.sk-carousel-viewport {
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.sk-carousel-viewport:active {
    cursor: grabbing;
}

.sk-carousel-track {
    display: flex;
    gap: 32px;
    will-change: transform;
    transition: transform 0s ease; /* controlled dynamically via JS loops */
}

/* 4. Luxurious Glassmorphism Testimonial Cards */
.testimonial-card-3d {
    flex: 0 0 calc(33.333% - 21.33px); /* 3 cards visible on desktop with 32px gaps */
    min-width: 320px;
    box-sizing: border-box;
    position: relative;
    border-radius: 28px;
    padding: 36px 32px;
    background: rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, box-shadow, border-color, background-color;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s, border-color 0.4s, background-color 0.4s;
}

/* Soft glare overlay reflection simulation */
.testimonial-card-3d::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%, transparent 100%);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.4s;
}

/* Glowing mask border setup */
.testimonial-card-3d::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 28px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent, rgba(255, 255, 255, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    transition: background 0.4s;
}

/* Hover Lift, Scale, & Glow Escalations */
.testimonial-card-3d:hover {
    transform: translateY(-10px) scale(1.03);
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 25px 55px rgba(0, 0, 0, 0.5),
        0 0 35px rgba(0, 212, 255, 0.1);
}

.testimonial-card-3d:hover::after {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.3) 0%, rgba(123, 97, 255, 0.3) 50%, rgba(255, 255, 255, 0.08) 100%);
}

.testimonial-card-3d:focus-visible {
    outline: 2px solid #00F5FF;
    outline-offset: 4px;
}

/* Decorative Quote Icon */
.sk-quote-decor {
    position: absolute;
    top: 24px;
    right: 28px;
    opacity: 0.03;
    color: #FFFFFF;
    transform: translateZ(10px);
    transition: opacity 0.4s, color 0.4s, transform 0.4s;
}

.testimonial-card-3d:hover .sk-quote-decor {
    opacity: 0.08;
    color: #00D4FF;
    transform: translateZ(25px) scale(1.1) rotate(-5deg);
}

.sk-quote-decor .quote-icon {
    width: 64px;
    height: 64px;
}

/* Stars Rating */
.star-rating {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    transform: translateZ(15px);
}

.star-rating .star-icon {
    width: 18px;
    height: 18px;
    color: #FFAA00;
    fill: #FFAA00;
    filter: drop-shadow(0 0 3px rgba(255, 170, 0, 0.3));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.3s;
}

.testimonial-card-3d:hover .star-rating .star-icon {
    filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.65));
    animation: starPulse 1.2s ease-in-out infinite alternate;
}

/* Stagger star pulsing on card hover */
.testimonial-card-3d:hover .star-rating .star-icon:nth-child(1) { animation-delay: 0s; }
.testimonial-card-3d:hover .star-rating .star-icon:nth-child(2) { animation-delay: 0.1s; }
.testimonial-card-3d:hover .star-rating .star-icon:nth-child(3) { animation-delay: 0.2s; }
.testimonial-card-3d:hover .star-rating .star-icon:nth-child(4) { animation-delay: 0.3s; }
.testimonial-card-3d:hover .star-rating .star-icon:nth-child(5) { animation-delay: 0.4s; }

@keyframes starPulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.testimonial-review {
    font-size: 1.05rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    margin: 0 0 24px 0;
    flex-grow: 1;
    transform: translateZ(20px);
}

.testimonial-card-3d:hover .testimonial-review {
    color: #FFFFFF;
}

/* Profile Metadata */
.testimonial-profile {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    transform: translateZ(25px);
}

.avatar-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    z-index: 2;
}

.avatar-wrapper .avatar-glow {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00D4FF, #7B61FF);
    opacity: 0.3;
    z-index: -1;
    transition: opacity 0.4s, transform 0.4s;
}

.testimonial-card-3d:hover .avatar-wrapper .avatar-glow {
    opacity: 0.85;
    transform: scale(1.08);
    animation: avatarPulseLoop 2s linear infinite;
}

@keyframes avatarPulseLoop {
    0% { transform: scale(1.08) rotate(0deg); }
    100% { transform: scale(1.08) rotate(360deg); }
}

.avatar-initials {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    transition: border-color 0.4s, background 0.4s;
}

.avatar-initials.cyan-theme {
    background: radial-gradient(circle at center, rgba(0, 212, 255, 0.12) 0%, rgba(8, 17, 32, 0.8) 100%);
    border-color: rgba(0, 212, 255, 0.4);
}

.avatar-initials.purple-theme {
    background: radial-gradient(circle at center, rgba(123, 97, 255, 0.12) 0%, rgba(8, 17, 32, 0.8) 100%);
    border-color: rgba(123, 97, 255, 0.4);
}

.avatar-wrapper .verified-badge {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #081120;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.avatar-wrapper .verified-icon {
    width: 14px;
    height: 14px;
    color: #00F5FF;
    fill: rgba(0, 245, 255, 0.15);
    filter: drop-shadow(0 0 3px #00F5FF);
}

.profile-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.profile-meta .profile-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: #FFFFFF;
}

.profile-meta .profile-verified {
    font-size: 0.78rem;
    font-weight: 700;
    color: #00F5FF;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.profile-meta .profile-company {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.testimonial-card-3d:hover .profile-company {
    color: rgba(255, 255, 255, 0.7);
}

/* Service tag badge */
.service-tag-badge {
    position: absolute;
    bottom: 36px;
    right: 32px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.4s, opacity 0.4s;
    transform: translateZ(10px);
}

.service-tag-badge.cyan-glow-badge {
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.15);
    color: #00D4FF;
}

.service-tag-badge.purple-glow-badge {
    background: rgba(123, 97, 255, 0.05);
    border: 1px solid rgba(123, 97, 255, 0.15);
    color: #7B61FF;
}

.testimonial-card-3d:hover .service-tag-badge {
    transform: translateZ(25px) scale(1.05);
    opacity: 0.95;
}

/* 5. Special Video Testimonial Card */
.testimonial-card-3d.video-card {
    padding: 0;
    overflow: hidden;
    cursor: pointer;
}

.testimonial-card-3d.video-card::before {
    border-radius: 28px;
}

.video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 230px;
    overflow: hidden;
}

.video-overlay-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8, 17, 32, 0) 40%, rgba(8, 17, 32, 0.8) 100%);
    z-index: 2;
    transition: background 0.4s;
}

.testimonial-card-3d.video-card:hover .video-overlay-gradient {
    background: linear-gradient(to bottom, rgba(8, 17, 32, 0.15) 30%, rgba(8, 17, 32, 0.9) 100%);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1) translateZ(30px);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(0, 212, 255, 0.15);
    border: 2px solid #00F5FF;
    color: #00F5FF;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 0 25px rgba(0, 245, 255, 0.4);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.4s, color 0.4s, box-shadow 0.4s;
}

.video-play-btn .play-icon {
    width: 24px;
    height: 24px;
    fill: currentColor;
    margin-left: 4px; /* offset play icon horizontally for perfect centering */
    filter: drop-shadow(0 0 5px currentColor);
}

.video-play-btn .play-pulse-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 245, 255, 0.5);
    opacity: 0.8;
    animation: playRingPulse 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes playRingPulse {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { opacity: 0.4; }
    100% { transform: scale(1.3); opacity: 0; }
}

.testimonial-card-3d.video-card:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.15) translateZ(40px);
    background-color: #00F5FF;
    color: #081120;
    box-shadow: 
        0 0 35px rgba(0, 245, 255, 0.75),
        inset 0 0 10px rgba(255, 255, 255, 0.5);
}

.video-duration {
    position: absolute;
    bottom: 16px;
    right: 20px;
    background: rgba(8, 17, 32, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 4px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #FFFFFF;
    z-index: 3;
    transition: transform 0.4s;
}

.testimonial-card-3d.video-card:hover .video-duration {
    transform: scale(1.05);
}

/* Custom visual meshes inside video cards to act as thumbnail backgrounds */
.video-thumb-visual {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.bg-mesh-thumb1 {
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 80% 70%, rgba(123, 97, 255, 0.3) 0%, transparent 60%),
        linear-gradient(210deg, #09172e 0%, #060b13 100%);
}

.bg-mesh-thumb2 {
    background-image: 
        radial-gradient(circle at 30% 80%, rgba(123, 97, 255, 0.3) 0%, transparent 60%),
        radial-gradient(circle at 70% 20%, rgba(0, 245, 255, 0.25) 0%, transparent 60%),
        linear-gradient(150deg, #09172e 0%, #060b13 100%);
}

.testimonial-card-3d.video-card:hover .video-thumb-visual {
    transform: scale(1.08);
}

.video-card-content {
    padding: 24px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateZ(20px);
}

.video-client-name {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
}

.video-subtitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.video-action-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: #00F5FF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.video-small-icon {
    width: 14px;
    height: 14px;
}

/* 6. Carousel Pagination Dots & Progress Indicator */
.sk-carousel-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 48px;
    padding: 0 4px;
}

.sk-carousel-progress-track {
    width: 250px;
    height: 4px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    overflow: hidden;
}

.sk-carousel-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00D4FF, #7B61FF);
    border-radius: 30px;
    transition: width 0.1s linear; /* smooth, continuous frame loop update */
}

.sk-carousel-dots {
    display: flex;
    gap: 10px;
}

.sk-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    cursor: pointer;
    transition: transform 0.3s, background-color 0.3s, box-shadow 0.3s;
    padding: 0;
}

.sk-carousel-dot:hover {
    background: rgba(255, 255, 255, 0.3);
}

.sk-carousel-dot.active {
    background: #00F5FF;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.6);
}

.sk-carousel-dot:focus-visible {
    outline: 2px solid #00F5FF;
    outline-offset: 3px;
}

/* 7. Cinematic Glassmorphic Video Popup Modal */
.sk-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity;
}

.sk-video-modal.active {
    opacity: 1;
    pointer-events: all;
}

.sk-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(3, 8, 16, 0.85);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    z-index: 1;
}

.sk-video-modal-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    background: rgba(8, 17, 32, 0.4);
    backdrop-filter: blur(35px);
    -webkit-backdrop-filter: blur(35px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 28px;
    box-shadow: 
        0 25px 65px rgba(0, 0, 0, 0.6),
        0 0 45px rgba(0, 212, 255, 0.05);
    z-index: 2;
    overflow: hidden;
    transform: scale(0.9) translateZ(0);
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* organic bouncing ease */
}

.sk-video-modal.active .sk-video-modal-container {
    transform: scale(1) translateZ(0);
}

.sk-video-modal-close {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform 0.3s, background-color 0.3s, border-color 0.3s, color 0.3s;
}

.sk-video-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #00F5FF;
    transform: rotate(90deg);
}

.sk-video-modal-close-icon {
    width: 20px;
    height: 20px;
}

.sk-video-modal-viewport {
    width: 100%;
    position: relative;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    background: #040810;
}

.sk-video-modal-viewport video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: cover;
}

.sk-modal-title-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Fallback streaming graphical visual player in modal (used when offlines) */
.custom-player-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #09172e 0%, #03060a 100%);
    z-index: 5;
    gap: 20px;
}

.custom-player-fallback .fallback-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(0, 245, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(20px);
    animation: fallbackLightPulse 3s infinite alternate;
}

@keyframes fallbackLightPulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.4); opacity: 0.9; }
}

.custom-player-fallback .fallback-waves {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 48px;
}

.fallback-waves .wave-bar {
    width: 4px;
    background: linear-gradient(to top, #7B61FF, #00F5FF);
    border-radius: 4px;
    animation: waveMotion 1.2s ease-in-out infinite alternate;
}

.fallback-waves .wave-bar:nth-child(1) { height: 15px; animation-delay: -0.2s; }
.fallback-waves .wave-bar:nth-child(2) { height: 35px; animation-delay: -0.5s; }
.fallback-waves .wave-bar:nth-child(3) { height: 48px; animation-delay: -0.8s; }
.fallback-waves .wave-bar:nth-child(4) { height: 28px; animation-delay: -0.3s; }
.fallback-waves .wave-bar:nth-child(5) { height: 18px; animation-delay: -0.1s; }

@keyframes waveMotion {
    0% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}

.custom-player-fallback .fallback-text {
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.4);
    animation: textFlicker 2s infinite alternate;
}

@keyframes textFlicker {
    0% { opacity: 0.75; }
    100% { opacity: 1; }
}

/* 8. Responsive Adaptations */
@media (max-width: 1200px) {
    .sk-carousel-btn.prev-btn { left: -20px; }
    .sk-carousel-btn.next-btn { right: -20px; }
    .testimonials-container { padding: 0 32px; }
}

@media (max-width: 1024px) {
    .testimonials-stats-row {
        grid-template-cols: repeat(2, 1fr);
        gap: 20px;
    }
    .testimonial-card-3d {
        flex: 0 0 calc(50% - 16px); /* 2 cards visible on tablets with 32px gaps */
    }
    .sk-carousel-btn {
        width: 52px;
        height: 52px;
    }
    .sk-carousel-btn.prev-btn { left: -10px; }
    .sk-carousel-btn.next-btn { right: -10px; }
}

@media (max-width: 768px) {
    .testimonials-section-premium {
        padding: 70px 0;
    }
    .testimonials-container {
        padding: 0 20px;
    }
    .testimonials-stats-row {
        grid-template-cols: 1fr;
        gap: 16px;
        margin: 40px 0;
    }
    .testimonial-card-3d {
        flex: 0 0 100%; /* 1 card visible on mobile viewports */
        min-height: auto;
        padding: 32px 24px;
    }
    .sk-carousel-btn {
        display: none; /* Hide navigation buttons on mobile, rely entirely on swipe gestures */
    }
    .sk-carousel-progress-track {
        width: 120px;
    }
    .sk-carousel-controls-row {
        margin-top: 36px;
    }
    .sk-video-modal-container {
        border-radius: 20px;
    }
    .sk-video-modal-close {
        top: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
    }
}

/* Reduced Motion Preferences Override */
@media (prefers-reduced-motion: reduce) {
    .testimonials-orb {
        animation: none !important;
    }
    .testimonial-card-3d:hover {
        transform: none !important;
    }
    .testimonial-card-3d:hover .star-rating .star-icon {
        animation: none !important;
        transform: none !important;
    }
    .testimonial-card-3d:hover .avatar-wrapper .avatar-glow {
        animation: none !important;
        transform: none !important;
    }
    .video-play-btn .play-pulse-ring {
        animation: none !important;
    }
    .sk-carousel-progress-fill {
        transition: none !important;
    }
    .custom-player-fallback .fallback-glow,
    .custom-player-fallback .fallback-waves .wave-bar,
    .custom-player-fallback .fallback-text {
        animation: none !important;
        transform: none !important;
    }
}







/* =========================================================================
   📈 PREMIUM CASE STUDIES & SUCCESS METRICS STYLES
   ========================================================================= */

.case-studies-section-premium {
    position: relative;
    background-color: #081120;
    padding: 100px 0;
    overflow: hidden;
    z-index: 1;
}

/* Background Grids & Moving Orbs */
.premium-case-studies-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    pointer-events: none;
}

.premium-case-studies-bg .grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 0),
        radial-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 0);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    opacity: 0.85;
}

.case-studies-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    transition: transform 12s ease-in-out, opacity 5s;
    will-change: transform;
}

.case-studies-orb.orb-cyan {
    top: -10%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: #00F5FF;
}

.case-studies-orb.orb-purple {
    bottom: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: #7B61FF;
}

.case-studies-orb.orb-blue {
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 450px;
    height: 450px;
    background: #00D4FF;
}

.case-studies-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 2;
}

/* Premium Key Business Metrics Grid */
.metrics-grid-premium {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
    margin-bottom: 60px;
}

.metric-card-3d {
    position: relative;
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 24px;
    overflow: hidden;
    outline: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease;
    will-change: transform;
}

.metric-card-3d:focus-visible {
    border-color: #00F5FF;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
    transform: translateY(-5px);
}

.card-glow-indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.08) 0%, transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.metric-card-3d:hover .card-glow-indicator {
    opacity: 1;
}

.metric-card-3d:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.16);
}

/* Neon Glow Themes on Hover */
.metric-card-3d.cyan-theme:hover {
    box-shadow: 0 12px 30px rgba(0, 245, 255, 0.12);
}

.metric-card-3d.purple-theme:hover {
    box-shadow: 0 12px 30px rgba(123, 97, 255, 0.12);
}

.metric-card-3d.blue-theme:hover {
    box-shadow: 0 12px 30px rgba(0, 212, 255, 0.12);
}

.metric-data {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.metric-number {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    display: block;
    background-clip: text;
    -webkit-background-clip: text;
    color: #FFF;
    transition: transform 0.3s;
}

.cyan-theme .metric-number {
    background-image: linear-gradient(135deg, #FFF 30%, #00F5FF 100%);
    -webkit-text-fill-color: transparent;
}

.purple-theme .metric-number {
    background-image: linear-gradient(135deg, #FFF 30%, #7B61FF 100%);
    -webkit-text-fill-color: transparent;
}

.blue-theme .metric-number {
    background-image: linear-gradient(135deg, #FFF 30%, #00D4FF 100%);
    -webkit-text-fill-color: transparent;
}

.metric-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.35;
    font-weight: 500;
    transition: color 0.3s;
}

.metric-card-3d:hover .metric-label {
    color: rgba(255, 255, 255, 0.9);
}

/* Bottom Glow line */
.metric-line-indicator {
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.metric-card-3d:hover .metric-line-indicator {
    transform: scaleX(1);
}

.cyan-theme .metric-line-indicator {
    background: #00F5FF;
    box-shadow: 0 0 10px #00F5FF;
}

.purple-theme .metric-line-indicator {
    background: #7B61FF;
    box-shadow: 0 0 10px #7B61FF;
}

.blue-theme .metric-line-indicator {
    background: #00D4FF;
    box-shadow: 0 0 10px #00D4FF;
}

/* Dashboard And Before/After Comparison Row */
.dashboard-and-slider-row {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 32px;
    margin-bottom: 60px;
}

.before-after-card, .dashboard-metrics-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.before-after-card:focus-visible, .dashboard-metrics-card:focus-visible {
    border-color: #00F5FF;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.2);
}

.dashboard-card-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.dashboard-card-desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 24px;
    line-height: 1.45;
}

/* Before/After Draggable Slider */
.split-slider-container {
    position: relative;
    height: 310px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    user-select: none;
}

.before-pane, .after-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 24px 32px;
    box-sizing: border-box;
    overflow: hidden;
}

.before-pane {
    background: #0f1628;
}

.after-pane {
    background: #081120;
    background-image: radial-gradient(rgba(0, 245, 255, 0.04) 1px, transparent 0);
    background-size: 20px 20px;
    clip-path: inset(0 0 0 50%);
    z-index: 2;
}

.pane-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pane-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 20px;
    align-self: flex-start;
}

.before-badge {
    background: rgba(239, 68, 68, 0.08);
    color: #EF4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.after-badge {
    background: rgba(16, 185, 129, 0.08);
    color: #10B981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.pane-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
}

.pane-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.list-bullet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.bullet-red {
    background: #EF4444;
    box-shadow: 0 0 8px #EF4444;
}

.bullet-green {
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
}

.list-text strong {
    font-size: 0.95rem;
    color: #FFF;
    display: block;
}

.list-text p {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 2px 0 0 0;
}

/* Slider Separator Handle */
.split-slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, #00F5FF, #7B61FF);
    z-index: 3;
    transform: translateX(-50%);
    cursor: ew-resize;
    pointer-events: auto;
}

.handle-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #081120;
    border: 2px solid #00F5FF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
}

.split-slider-handle:hover .handle-button {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.6);
}

.handle-icon {
    width: 14px;
    height: 14px;
    color: #00F5FF;
}

/* Circular Dashboard Gauges */
.dashboard-gauges-container {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.gauge-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.circular-gauge-box {
    position: relative;
    width: 84px;
    height: 84px;
}

.circular-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.gauge-bg-ring {
    fill: none;
    stroke: rgba(255, 255, 255, 0.04);
    stroke-width: 8;
}

.gauge-fill-ring {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 263.89; /* 2 * PI * r (where r = 42) */
    stroke-dashoffset: 263.89; /* Default hidden */
    transition: stroke-dashoffset 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.cyan-stroke {
    stroke: #00F5FF;
    filter: drop-shadow(0 0 5px rgba(0, 245, 255, 0.4));
}

.purple-stroke {
    stroke: #7B61FF;
    filter: drop-shadow(0 0 5px rgba(123, 97, 255, 0.4));
}

.blue-stroke {
    stroke: #00D4FF;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.4));
}

.gauge-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.95rem;
    font-weight: 800;
    color: #FFF;
    letter-spacing: -0.01em;
}

.cyan-glow-text {
    text-shadow: 0 0 8px rgba(0, 245, 255, 0.5);
}

.purple-glow-text {
    text-shadow: 0 0 8px rgba(123, 97, 255, 0.5);
}

.blue-glow-text {
    text-shadow: 0 0 8px rgba(0, 212, 255, 0.5);
}

.gauge-label {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin-top: 10px;
    font-weight: 600;
}

/* Linear progress bars */
.progress-bar-item {
    margin-bottom: 24px;
}

.progress-bar-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 8px;
    font-weight: 500;
}

.progress-bar-label {
    color: rgba(255, 255, 255, 0.65);
}

.progress-bar-percentage {
    color: #00F5FF;
    font-weight: 800;
}

.progress-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 0%; /* Dynamic fill via script */
    border-radius: 4px;
    transition: width 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.cyan-bg-gradient {
    background: linear-gradient(to right, #00F5FF, #7B61FF);
    box-shadow: 0 0 8px rgba(0, 245, 255, 0.3);
}

/* Sparkline wave trend graph */
.dashboard-graph-box {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 14px 18px;
}

.graph-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.graph-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #FFF;
}

.graph-sub {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
}

.svg-graph-container {
    height: 65px;
    position: relative;
}

.sparkline-svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.graph-grid-line {
    stroke: rgba(255, 255, 255, 0.02);
    stroke-width: 1;
}

.graph-stroke-path {
    fill: none;
    stroke: #00F5FF;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 3s cubic-bezier(0.22, 1, 0.36, 1);
}

.graph-area-path {
    opacity: 0;
    transition: opacity 1.5s ease-out 1.2s;
}

.graph-pulse-dot {
    fill: #00F5FF;
    stroke: #081120;
    stroke-width: 2.5;
    opacity: 0;
    transition: opacity 0.3s ease-out 2.8s;
}

/* 3 Case Study Cards Grid */
.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 60px;
}

.case-study-card {
    background: rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    outline: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.4s ease, 
                box-shadow 0.4s ease;
    will-change: transform;
}

.case-study-card:focus-visible {
    border-color: #00F5FF;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.3);
    transform: translateY(-8px);
}

.case-study-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
}

.case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.client-type {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.4);
}

.service-used {
    font-size: 0.72rem;
    font-weight: 800;
    color: #00F5FF;
    background: rgba(0, 245, 255, 0.08);
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 245, 255, 0.15);
}

.case-title {
    font-size: 1.22rem;
    font-weight: 700;
    color: #FFF;
    margin-bottom: 22px;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.case-challenge-solution {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 22px;
}

.case-detail-block {
    display: flex;
    flex-direction: column;
}

.case-detail-block .block-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.case-detail-block .block-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.45;
    margin: 0;
}

/* Case Result Banner */
.case-result-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.18);
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 22px;
}

.case-result-badge .badge-icon {
    width: 15px;
    height: 15px;
    color: #10B981;
}

.case-result-badge .badge-text {
    font-size: 0.82rem;
    font-weight: 700;
    color: #10B981;
}

/* Micro metrics grid inside card */
.case-micro-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    margin-bottom: 22px;
    text-align: center;
}

.micro-metric-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.micro-value {
    font-size: 0.9rem;
    font-weight: 800;
    color: #FFF;
}

.micro-label {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

/* Quote Bubble */
.case-quote-bubble {
    position: relative;
    padding: 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 16px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.case-quote-bubble .quote-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.03);
    transform: scaleX(-1);
    pointer-events: none;
}

.case-quote-bubble .quote-text {
    font-style: italic;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.45;
    margin: 0;
}

.case-quote-bubble .quote-author {
    font-size: 0.75rem;
    font-weight: 700;
    color: #00F5FF;
}

/* CTA details button */
.sk-case-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: background 0.3s, transform 0.3s;
}

.sk-case-cta .cta-arrow {
    width: 14px;
    height: 14px;
    transition: transform 0.3s;
}

.sk-case-cta:hover .cta-arrow {
    transform: translateX(4px);
}

/* Corporate trust indicators footer row */
.achievement-badges-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.achievement-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s, border-color 0.3s, color 0.3s;
    outline: none;
}

.achievement-badge:focus-visible {
    border-color: #00F5FF;
    transform: translateY(-3px);
}

.achievement-badge:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.95);
}

.achievement-badge .badge-icon {
    width: 13px;
    height: 13px;
    color: #00F5FF;
}

.badge-shimmer {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-25deg);
    transition: left 0.8s;
}

.achievement-badge:hover .badge-shimmer {
    left: 150%;
}

/* =========================================================================
   📱 RESPONSIVE ADJUSTMENTS FOR CASE STUDIES
   ========================================================================= */

@media (max-width: 1200px) {
    .metrics-grid-premium {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    
    .dashboard-and-slider-row {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    
    .case-studies-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .case-studies-section-premium {
        padding: 60px 0;
    }
    
    .metrics-grid-premium {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .case-studies-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .split-slider-container {
        height: auto;
    }
    
    .before-pane, .after-pane {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        clip-path: none !important;
        padding: 20px;
    }
    
    .before-pane {
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .split-slider-handle {
        display: none;
    }
    
    .dashboard-gauges-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }
    
    .gauge-item {
        flex: none;
        width: 45%;
    }
}

@media (max-width: 480px) {
    .metrics-grid-premium {
        grid-template-columns: 1fr;
    }
    
    .gauge-item {
        width: 100%;
    }
}