/* Professional Dark Theme with Advanced Responsive Design */

:root {
    /* Color System */
    --primary-color: #6366f1;
    --secondary-color: #a855f7;
    --accent-color: #ec4899;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;

    /* Background System */
    --bg-primary: #000000;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #1a1a1a;
    --bg-card: #1f1f1f;
    --bg-surface: #2a2a2a;

    /* Text System */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --text-muted: #52525b;

    /* Border System */
    --border-color: #27272a;
    --border-hover: #3f3f46;
    --border-focus: #6366f1;

    /* Gradient System */
    --gradient-1: linear-gradient(135deg, #6366f1, #a855f7);
    --gradient-2: linear-gradient(135deg, #ec4899, #f97316);
    --gradient-3: linear-gradient(135deg, #06b6d4, #3b82f6);
    --gradient-success: linear-gradient(135deg, #10b981, #059669);
    --gradient-error: linear-gradient(135deg, #ef4444, #dc2626);
    --gradient-warm: linear-gradient(135deg, #f59e0b, #ef4444);
    --gradient-cool: linear-gradient(135deg, #3b82f6, #6366f1);

    /* Shadow System */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
    --shadow-glow-primary: 0 0 30px rgba(99, 102, 241, 0.4);
    --shadow-glow-secondary: 0 0 30px rgba(168, 85, 247, 0.4);

    /* Border Radius System */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 50%;

    /* Spacing System */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    --spacing-4xl: 6rem;
    --spacing-5xl: 8rem;

    /* Typography System */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* Transition System */
    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Container System - Fluid Scaling */
    --container-max: 1400px;
    --container-padding: clamp(1rem, 5vw, 3rem);

    /* Z-index System */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* Animation System */
    --animation-duration-fast: 300ms;
    --animation-duration-normal: 500ms;
    --animation-duration-slow: 1000ms;

    /* Scaling System */
    --scale-hover: 1.05;
    --scale-active: 0.98;
    --scale-focus: 1.02;

    /* Glass Effect System */
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --glass-blur: 10px;

    /* Responsive Breakpoints */
    --breakpoint-xs: 320px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}

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

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

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 12px;
    }

    /* Ensure contact button remains hidden on small mobile */
    .professional-header .cta-button {
        display: none !important;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    /* Safari-compatible fallback background */
    background: #0a0a1a;
    background: -webkit-linear-gradient(135deg,
        #0a0a1a 0%,
        #0f0f1f 25%,
        #0d1117 50%,
        #0a0f1f 75%,
        #0f0f1f 100%);
    background: linear-gradient(135deg,
        #0a0a1a 0%,
        #0f0f1f 25%,
        #0d1117 50%,
        #0a0f1f 75%,
        #0f0f1f 100%);
    background-size: 400% 400%;
    -webkit-background-size: 400% 400%;
    animation: professionalGradientShift 15s ease infinite;
    -webkit-animation: professionalGradientShift 15s ease infinite;
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    position: relative;
    min-height: 100vh;
    /* Force dark background in Safari */
    -webkit-text-fill-color: #ffffff;
}

/* Global professional background overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Safari-compatible gradient overlay */
    background: -webkit-radial-gradient(ellipse at center top,
        rgba(99, 102, 241, 0.04) 0%,
        rgba(168, 85, 247, 0.02) 40%,
        rgba(0, 0, 0, 0.05) 100%);
    background: radial-gradient(ellipse at center top,
        rgba(99, 102, 241, 0.04) 0%,
        rgba(168, 85, 247, 0.02) 40%,
        rgba(0, 0, 0, 0.05) 100%);
    /* Safari-compatible backdrop filter with fallback */
    -webkit-backdrop-filter: blur(0.5px);
    backdrop-filter: blur(0.5px);
    z-index: -1;
    pointer-events: none;
}

/* Safari-specific fixes to ensure dark background */
@supports not (-webkit-backdrop-filter: blur(1px)) {
    body {
        background: #0a0a1a !important;
    }
}

/* Safari fallback for gradient animation */
@media not all and (min-resolution: .001dpcm) {
    body {
        background: #0a0a1a !important;
        background: -webkit-linear-gradient(135deg, #0a0a1a, #0f0f1f) !important;
    }
}

/* Additional Safari fix for background color */
_::-webkit-full-page-media, _:future, :root:root {
    background: #0a0a1a !important;
}

/* Custom Scrollbar - Professional */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--radius-sm);
    transition: background var(--transition-normal);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Selection Styling */
::selection {
    background: var(--primary-color);
    color: var(--text-primary);
}

::-moz-selection {
    background: var(--primary-color);
    color: var(--text-primary);
}

/* Focus Management */
:focus {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

:focus:not(:focus-visible) {
    outline: none;
}

/* Typography System with Fluid Scaling */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    text-wrap: balance;
}

h1 {
    font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
    font-weight: var(--font-weight-extrabold);
}

h2 {
    font-size: clamp(var(--font-size-3xl), 4vw, var(--font-size-5xl));
    font-weight: var(--font-weight-extrabold);
}

h3 {
    font-size: clamp(var(--font-size-2xl), 3vw, var(--font-size-4xl));
    font-weight: var(--font-weight-bold);
}

h4 {
    font-size: clamp(var(--font-size-xl), 2vw, var(--font-size-3xl));
    font-weight: var(--font-weight-semibold);
}

h5 {
    font-size: clamp(var(--font-size-lg), 1.5vw, var(--font-size-2xl));
    font-weight: var(--font-weight-semibold);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
    color: var(--text-secondary);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-normal);
}

a:hover {
    color: var(--secondary-color);
}

/* Professional Container System */
.container, .section-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
    position: relative;
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

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

.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }
.text-muted { color: var(--text-muted) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-card { background-color: var(--bg-card) !important; }

/* Margin Utilities */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--spacing-xs) !important; }
.m-2 { margin: var(--spacing-sm) !important; }
.m-3 { margin: var(--spacing-md) !important; }
.m-4 { margin: var(--spacing-lg) !important; }
.m-5 { margin: var(--spacing-xl) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--spacing-xs) !important; }
.mt-2 { margin-top: var(--spacing-sm) !important; }
.mt-3 { margin-top: var(--spacing-md) !important; }
.mt-4 { margin-top: var(--spacing-lg) !important; }
.mt-5 { margin-top: var(--spacing-xl) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--spacing-xs) !important; }
.mb-2 { margin-bottom: var(--spacing-sm) !important; }
.mb-3 { margin-bottom: var(--spacing-md) !important; }
.mb-4 { margin-bottom: var(--spacing-lg) !important; }
.mb-5 { margin-bottom: var(--spacing-xl) !important; }

/* Padding Utilities */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--spacing-xs) !important; }
.p-2 { padding: var(--spacing-sm) !important; }
.p-3 { padding: var(--spacing-md) !important; }
.p-4 { padding: var(--spacing-lg) !important; }
.p-5 { padding: var(--spacing-xl) !important; }

/* Display Utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-grid { display: grid !important; }

/* Flex Utilities */
.flex-column { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-center { align-items: center !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-stretch { align-items: stretch !important; }
.gap-1 { gap: var(--spacing-xs) !important; }
.gap-2 { gap: var(--spacing-sm) !important; }
.gap-3 { gap: var(--spacing-md) !important; }
.gap-4 { gap: var(--spacing-lg) !important; }
.gap-5 { gap: var(--spacing-xl) !important; }

/* Position Utilities */
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

/* Animation Classes */
.animate-fade-in {
    animation: fadeIn 0.5s ease forwards;
}

.animate-slide-up {
    animation: slideUp 0.6s ease forwards;
}

.animate-slide-down {
    animation: slideDown 0.6s ease forwards;
}

.animate-slide-left {
    animation: slideLeft 0.6s ease forwards;
}

.animate-slide-right {
    animation: slideRight 0.6s ease forwards;
}

.animate-scale-up {
    animation: scaleUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* Start closer to final state to prevent layout shift */
    transform: scale(0.995);
    opacity: 0.8;
}

.animate-scale-in {
    animation: scaleIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    transform: scale(0.9);
    opacity: 0;
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

.animate-scale-down {
    animation: scaleDown 0.5s ease forwards;
}

.animate-bounce {
    animation: bounce 1s ease infinite;
}

.animate-pulse {
    animation: pulse 2s ease infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Loading States */
.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-full);
    animation: spin 1s linear infinite;
}

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

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

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

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

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

@keyframes scaleUp {
    from {
        opacity: 0.8;
        transform: scale(0.995);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleDown {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        transform: translate3d(0, -30px, 0);
    }
    70% {
        transform: translate3d(0, -15px, 0);
    }
    90% {
        transform: translate3d(0, -4px, 0);
    }
}

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
    color: var(--text-secondary);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--secondary-color);
}

/* Professional Dynamic Island Header */
.professional-header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg,
        rgba(15, 15, 15, 0.95) 0%,
        rgba(26, 26, 26, 0.85) 100%
    );
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    z-index: 1000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: calc(100% - 6rem);
    width: auto;
    margin: 0;
    padding: 0.3rem 1rem;
}

.professional-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(99, 102, 241, 0.05) 50%,
        transparent 100%
    );
    border-radius: 16px;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.professional-header.scrolled {
    top: 10px;
    background: linear-gradient(135deg,
        rgba(15, 15, 15, 0.98) 0%,
        rgba(26, 26, 26, 0.95) 100%
    );
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

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

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transition);
    position: relative;
}

.logo::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 16px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    filter: blur(10px);
}

.logo:hover::before {
    opacity: 0.3;
}

.logo:hover {
    transform: scale(1.05);
}

.logo img {
    height: 45px;
    border-radius: 16px;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px;
}

.logo:hover img {
    box-shadow:
        0 12px 24px rgba(99, 102, 241, 0.3),
        0 0 0 1px rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.navigation {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0.5rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
}

.nav-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--gradient-1);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: var(--text-primary);
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
    transform: translateY(-1px);
}

.nav-link:hover::before {
    opacity: 0.1;
}

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

.cta-button {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 0.35rem 1.2rem;
    border-radius: 16px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-clip: padding-box;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    transition: left 0.5s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.cta-button:hover::before {
    left: 100%;
}

.cta-button:active {
    transform: translateY(-1px);
}

.mobile-menu-toggle {
    display: none;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    width: 50px;
    height: 50px;
    border-radius: 16px;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    z-index: 1003;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.mobile-menu-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3), transparent);
    transition: all 0.5s ease;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.mobile-menu-toggle:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: rgba(99, 102, 241, 0.5);
    color: #ffffff;
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.4);
}

.mobile-menu-toggle:hover::before {
    width: 100px;
    height: 100px;
}

.mobile-menu-toggle:active {
    transform: scale(0.95) rotate(-5deg);
}

.mobile-menu-toggle.active {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: transparent;
    color: white;
}

/* Hamburger Animation */
.mobile-menu-toggle span {
    display: block;
    position: absolute;
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    left: 50%;
    transform: translateX(-50%);
}

.mobile-menu-toggle span:nth-child(1) {
    top: 35%;
}

.mobile-menu-toggle span:nth-child(2) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.mobile-menu-toggle span:nth-child(3) {
    top: 65%;
}

.mobile-menu-toggle.active span:nth-child(1) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scaleX(0);
}

.mobile-menu-toggle.active span:nth-child(3) {
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* Header Animation Keyframes */
@keyframes headerFloat {
    0%, 100% {
        transform: translateX(-50%) translateY(0px);
    }
    50% {
        transform: translateX(-50%) translateY(-2px);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

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

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

.professional-header {
    animation: none;
}

/* Enhanced Scroll Effects */
.professional-header.header-scrolled {
    animation: none;
    transform: translateX(-50%) translateY(0);
}

/* Loading animations */
.nav-link {
    opacity: 0;
    animation: slideInRight 0.6s ease-out forwards;
}

.nav-link:nth-child(1) { animation-delay: 0.1s; }
.nav-link:nth-child(2) { animation-delay: 0.2s; }
.nav-link:nth-child(3) { animation-delay: 0.3s; }

.cta-button {
    opacity: 0;
    animation: slideInRight 0.6s ease-out 0.4s forwards;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    overflow: hidden;
    margin-top: 0;
    padding-top: 160px;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.6;
    animation: float 20s ease-in-out infinite;
}

.gradient-orb-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.gradient-orb-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    bottom: -200px;
    right: -200px;
    animation-delay: 5s;
}

.gradient-orb-3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

.hero-container {
    position: relative;
    z-index: 10;
    max-width: calc(100% - 6rem);
    margin: 0 auto;
    padding: 0;
    width: auto;
    box-sizing: border-box;
}

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

.hero-left {
    animation: fadeInUp 0.8s ease-out;
}

.hero-badge {
    display: inline-block;
    background: var(--gradient-1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-2);
}

.hero-title {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    margin-bottom: 2rem;
    /* Premium typography settings */
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
    /* Premium letter spacing for elegance */
    letter-spacing: -0.03em;
    word-spacing: 0.1em;
    /* Crisp rendering with premium feel */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Premium subtle effects */
    position: relative;
    display: inline-block;
}

/* Add a premium underline accent */
.hero-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        #6366f1 20%,
        #a855f7 50%,
        #6366f1 80%,
        transparent 100%);
    border-radius: 2px;
    opacity: 0.8;
}

.hero-title .gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    margin-bottom: 3rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.btn-primary, .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-1);
    color: white;
    box-shadow: var(--shadow-2);
}

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

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}

.hero-stats {
    display: flex;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.5rem;
}

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

.hero-right {
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-visual {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-preview {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 300px;
    background: var(--bg-card);
    border-radius: 20px;
    border: 2px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-3);
    transition: var(--transition);
}

.video-preview:hover {
    transform: scale(1.02);
    border-color: var(--primary-color);
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-button {
    width: 80px;
    height: 80px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-2);
}

.play-button:hover {
    /* Removed transform scale to prevent movement */
    box-shadow: var(--shadow-glow);
}

.play-button i {
    color: white;
    font-size: 2rem;
    margin-left: 0.25rem;
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.floating-element {
    position: absolute;
    width: 60px;
    height: 60px;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    animation: float 6s ease-in-out infinite;
    box-shadow: var(--shadow-1);
}

.floating-element:nth-child(1) {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.floating-element:nth-child(2) {
    top: 60%;
    right: 10%;
    animation-delay: 2s;
}

.floating-element:nth-child(3) {
    bottom: 10%;
    left: 20%;
    animation-delay: 4s;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    animation: bounce 2s infinite;
}

.scroll-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: var(--border-color);
    position: relative;
    overflow: hidden;
}

.scroll-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: var(--gradient-1);
    animation: scroll 2s infinite;
}

/* Professional Lens Hero Section */
.hero-lens {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #0a0a0f 0%, #000000 100%);
    overflow: hidden;
    perspective: 1000px;
}

/* Lens Background */
.lens-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Bokeh Effects */
.lens-bokeh {
    position: absolute;
    width: 100%;
    height: 100%;
}

.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    animation: bokehFloat 15s ease-in-out infinite;
}

.bokeh-1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.bokeh-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 15%;
    animation-delay: 3s;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.1) 0%, transparent 70%);
}

.bokeh-3 {
    width: 100px;
    height: 100px;
    bottom: 20%;
    left: 20%;
    animation-delay: 6s;
    background: none;
}

.bokeh-4 {
    width: 120px;
    height: 120px;
    top: 30%;
    right: 30%;
    animation-delay: 9s;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
}

.bokeh-5 {
    width: 80px;
    height: 80px;
    bottom: 40%;
    right: 10%;
    animation-delay: 12s;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
}

/* Light Rays */
.light-rays {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.3;
}

.light-ray {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transform-origin: center;
    animation: raySweep 8s ease-in-out infinite;
}

.ray-1 {
    width: 300px;
    height: 2px;
    top: 20%;
    left: -100px;
    transform: rotate(25deg);
    animation-delay: 0s;
}

.ray-2 {
    width: 400px;
    height: 1px;
    top: 50%;
    right: -150px;
    transform: rotate(-15deg);
    animation-delay: 2s;
    background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.1), transparent);
}

.ray-3 {
    width: 250px;
    height: 1px;
    bottom: 30%;
    left: -80px;
    transform: rotate(45deg);
    animation-delay: 4s;
    background: linear-gradient(90deg, transparent, rgba(236, 72, 153, 0.1), transparent);
}

/* Main Container */
.lens-container {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xxl);
    align-items: center;
}

/* Content Section */
.lens-content {
    text-align: left;
}

.lens-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    margin-bottom: var(--spacing-md);
    backdrop-filter: blur(10px);
}

.badge-pulse {
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.lens-badge span {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

.lens-title h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.title-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: titleReveal 0.8s ease-out forwards;
}

.title-word:nth-child(1) { animation-delay: 0.1s; }
.title-word:nth-child(2) { animation-delay: 0.2s; }
.title-word:nth-child(3) { animation-delay: 0.3s; }
.title-word:nth-child(4) { animation-delay: 0.4s; }

.lens-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
    max-width: 500px;
    line-height: 1.6;
}

.lens-buttons {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xxl);
    justify-content: center;
    align-items: center;
    width: 100%;
}

.lens-btn {
    position: relative;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    overflow: hidden;
    transition: var(--transition);
    border: none;
    cursor: pointer;
}

.lens-btn-text {
    position: relative;
    z-index: 2;
}

.lens-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: var(--transition);
}

.lens-btn:hover .lens-btn-shine {
    left: 100%;
}

.lens-btn-primary {
    background: var(--gradient-1);
    color: white;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.lens-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.lens-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--primary-color);
}

.lens-btn-secondary:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-2px);
}

/* Stats */
.lens-stats {
    display: flex;
    gap: var(--spacing-xl);
}

.lens-stat {
    text-align: center;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 3D Lens System */
.lens-system {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    animation: lensSystemFloat 6s ease-in-out infinite;
}

/* Camera Lens Assembly */
.camera-lens {
    position: relative;
    width: 250px;
    height: 350px;
    transform-style: preserve-3d;
    animation: lensRotate 20s linear infinite;
}

/* Lens Elements */
.lens-element {
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(99, 102, 241, 0.3);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    backdrop-filter: blur(5px);
}

.lens-front {
    width: 200px;
    height: 200px;
    top: 0;
    left: 25px;
    transform: translateZ(50px);
    border-color: rgba(99, 102, 241, 0.5);
}

.lens-middle {
    width: 180px;
    height: 180px;
    top: 85px;
    left: 35px;
    transform: translateZ(30px);
    border-color: rgba(168, 85, 247, 0.4);
}

.lens-back {
    width: 160px;
    height: 160px;
    top: 170px;
    left: 45px;
    transform: translateZ(10px);
    border-color: rgba(236, 72, 153, 0.3);
}

/* Aperture */
.aperture {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 115px;
    left: 65px;
    transform-style: preserve-3d;
}

.aperture-blade {
    position: absolute;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    transform-origin: center;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.blade-1 { transform: rotate(0deg) translateX(30px); }
.blade-2 { transform: rotate(60deg) translateX(30px); }
.blade-3 { transform: rotate(120deg) translateX(30px); }
.blade-4 { transform: rotate(180deg) translateX(30px); }
.blade-5 { transform: rotate(240deg) translateX(30px); }
.blade-6 { transform: rotate(300deg) translateX(30px); }

/* Focus Ring */
.focus-ring {
    position: absolute;
    width: 220px;
    height: 40px;
    top: 155px;
    left: 15px;
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 20px;
    transform: translateZ(60px);
    background: rgba(0, 0, 0, 0.3);
}

.focus-marks {
    position: absolute;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(99, 102, 241, 0.2) 10px,
        rgba(99, 102, 241, 0.2) 12px
    );
}

/* Lens Glass */
.lens-glass {
    position: absolute;
    width: 190px;
    height: 190px;
    top: 5px;
    left: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1), transparent 50%);
    backdrop-filter: blur(2px);
    transform: translateZ(70px);
}

.lens-coating {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(99, 102, 241, 0.1) 50%,
        transparent 70%);
    animation: coatingShine 3s ease-in-out infinite;
}

.lens-flare {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
    border-radius: 50%;
    top: 50px;
    left: 50px;
    animation: flareMove 4s ease-in-out infinite;
}

/* Floating Lenses */
.floating-lenses {
    position: absolute;
    width: 100%;
    height: 100%;
}

.mini-lens {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(99, 102, 241, 0.3);
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    animation: miniLensFloat 8s ease-in-out infinite;
}

.lens-1 {
    top: 20%;
    right: 10%;
    animation-delay: 0s;
}

.lens-2 {
    bottom: 30%;
    left: 5%;
    animation-delay: 3s;
    border-color: rgba(168, 85, 247, 0.3);
}

.lens-3 {
    top: 60%;
    right: 20%;
    animation-delay: 6s;
    border-color: rgba(236, 72, 153, 0.3);
}

/* Light Beams */
.light-beams {
    position: absolute;
    width: 100%;
    height: 100%;
}

.beam {
    position: absolute;
    width: 2px;
    height: 200px;
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.3), transparent);
    transform-origin: top;
    animation: beamSweep 6s ease-in-out infinite;
}

.beam-1 {
    top: 50px;
    left: 100px;
    transform: rotate(15deg);
    animation-delay: 0s;
}

.beam-2 {
    top: 80px;
    right: 120px;
    transform: rotate(-20deg);
    animation-delay: 2s;
    background: linear-gradient(to bottom, transparent, rgba(168, 85, 247, 0.3), transparent);
}

.beam-3 {
    bottom: 100px;
    left: 150px;
    transform: rotate(45deg);
    animation-delay: 4s;
    background: none;
}

/* Scroll Indicator */
.lens-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 20;
}

.lens-scroll span {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Animations */
@keyframes bokehFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -30px) scale(1.1); }
    50% { transform: translate(-20px, 20px) scale(0.9); }
    75% { transform: translate(40px, 10px) scale(1.05); }
}

@keyframes raySweep {
    0%, 100% { opacity: 0.1; transform: translateX(0) rotate(var(--rotation, 25deg)); }
    50% { opacity: 0.3; transform: translateX(100px) rotate(var(--rotation, 25deg)); }
}

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

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

@keyframes lensSystemFloat {
    0%, 100% { transform: translateY(0) rotateX(5deg); }
    50% { transform: translateY(-20px) rotateX(-5deg); }
}

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

@keyframes coatingShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

@keyframes flareMove {
    0%, 100% { transform: translate(0, 0); opacity: 0.8; }
    25% { transform: translate(30px, 20px); opacity: 0.4; }
    50% { transform: translate(-20px, 30px); opacity: 0.6; }
    75% { transform: translate(40px, -10px); opacity: 0.3; }
}

@keyframes miniLensFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -15px) rotate(90deg); }
    50% { transform: translate(-15px, 10px) rotate(180deg); }
    75% { transform: translate(25px, 5px) rotate(270deg); }
}

@keyframes beamSweep {
    0%, 100% { opacity: 0.2; transform: rotate(var(--rotation, 15deg)) scaleY(1); }
    50% { opacity: 0.5; transform: rotate(calc(var(--rotation, 15deg) + 10deg)) scaleY(1.2); }
}

@keyframes scroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(20px); opacity: 0; }
}

/* Responsive Design */
@media (max-width: 1024px) {
    .lens-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--spacing-xl);
    }

    .lens-content {
        max-width: 600px;
        margin: 0 auto;
    }

    .lens-title h1 {
        text-align: center;
    }

    .lens-subtitle {
        margin: 0 auto var(--spacing-xl);
    }

    .lens-buttons {
        justify-content: center;
    }

    .lens-stats {
        justify-content: center;
    }

    .lens-system {
        height: 400px;
    }

    .camera-lens {
        width: 200px;
        height: 280px;
    }

    .lens-front {
        width: 160px;
        height: 160px;
        left: 20px;
    }

    .lens-middle {
        width: 140px;
        height: 140px;
        top: 70px;
        left: 30px;
    }

    .lens-back {
        width: 120px;
        height: 120px;
        top: 140px;
        left: 40px;
    }

    .aperture {
        width: 100px;
        height: 100px;
        top: 90px;
        left: 50px;
    }

    .focus-ring {
        width: 180px;
        height: 35px;
        top: 125px;
        left: 10px;
    }

    .lens-glass {
        width: 150px;
        height: 150px;
        left: 25px;
    }
}

@media (max-width: 768px) {
    .hero-lens {
        min-height: 90vh;
    }

    .lens-container {
        padding: 0 var(--spacing-md);
    }

    .lens-title h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .lens-subtitle {
        font-size: 1.125rem;
    }

    .lens-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .lens-btn {
        width: 100%;
        max-width: 300px;
    }

    .lens-stats {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }

    .lens-system {
        height: 300px;
    }

    .camera-lens {
        width: 150px;
        height: 210px;
    }

    .lens-front {
        width: 120px;
        height: 120px;
        left: 15px;
    }

    .lens-middle {
        width: 100px;
        height: 100px;
        top: 55px;
        left: 25px;
    }

    .lens-back {
        width: 80px;
        height: 80px;
        top: 110px;
        left: 35px;
    }

    .aperture {
        width: 80px;
        height: 80px;
        top: 70px;
        left: 35px;
    }

    .aperture-blade {
        width: 40px;
        height: 40px;
    }

    .focus-ring {
        width: 130px;
        height: 25px;
        top: 95px;
        left: 10px;
    }

    .lens-glass {
        width: 110px;
        height: 110px;
        left: 20px;
    }

    .bokeh-circle {
        transform: scale(0.7);
    }

    .light-ray {
        transform: scale(0.8);
    }
}

@media (max-width: 480px) {
    .hero-lens {
        min-height: 85vh;
    }

    .lens-system {
        height: 250px;
    }

    .camera-lens {
        width: 120px;
        height: 168px;
    }

    .lens-front {
        width: 100px;
        height: 100px;
        left: 10px;
    }

    .lens-middle {
        width: 80px;
        height: 80px;
        top: 44px;
        left: 20px;
    }

    .lens-back {
        width: 60px;
        height: 60px;
        top: 88px;
        left: 30px;
    }

    .aperture {
        width: 60px;
        height: 60px;
        top: 56px;
        left: 30px;
    }

    .aperture-blade {
        width: 30px;
        height: 30px;
    }

    .focus-ring {
        width: 100px;
        height: 20px;
        top: 76px;
        left: 10px;
    }

    .lens-glass {
        width: 90px;
        height: 90px;
        left: 15px;
    }

    .stat-number {
        font-size: 2rem;
    }
}

/* Services Section */
.services {
    padding: 3rem 0;
    background: transparent;
    position: relative;
}

.section-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.section-badge {
    display: inline-block;
    background: var(--gradient-1);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-1);
}

.section-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--spacing-lg);
    max-width: 100%;
}

.service-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-1);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-3);
}

.service-card:hover::before {
    transform: translateX(0);
}

.service-icon {
    width: 70px;
    height: 70px;
    background: var(--gradient-1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    color: white;
    box-shadow: var(--shadow-2);
}

.service-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

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

.service-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-feature {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Enhanced Services Section */
.services-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.services-section .section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Removed moving orbs and grid pattern for clean professional background */
}

/* Removed gradient-orb animations for cleaner background matching hero section */

.services-section .section-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}

.services-section .section-subtitle {
    display: inline-block;
    background: var(--gradient-1);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    font-weight: 600;
    margin-bottom: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.services-section .section-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.1;
}

.services-section .section-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.services-section .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 100%;
    position: relative;
    z-index: 1;
}

/* Make service cards square */
.services-section .services-grid > * {
    aspect-ratio: 1 / 1;
    min-width: 320px;
}

/* ===== MODERN SERVICE CARDS DESIGN ===== */

.services-section .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
    max-width: 100%;
    position: relative;
    z-index: 1;
}

/* Make service cards square */
.services-section .services-grid > * {
    aspect-ratio: 1 / 1;
    min-width: 320px;
}

.services-section .service-card {
    background: linear-gradient(145deg,
        rgba(31, 31, 31, 0.95) 0%,
        rgba(42, 42, 42, 0.95) 50%,
        rgba(26, 26, 26, 0.95) 100%
    );
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 24px;
    padding: 0;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    z-index: 2;
    opacity: 1;
    visibility: visible;
}

.services-section .service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(168, 85, 247, 0.04) 50%,
        rgba(236, 72, 153, 0.02) 100%
    );
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.services-section .service-card:hover::before {
    opacity: 1;
}

.services-section .service-card:hover {
    transform: translateY(-12px) scale(1.03);
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow:
        0 32px 64px -12px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(99, 102, 241, 0.2),
        0 0 60px rgba(168, 85, 247, 0.1);
    opacity: 1;
    visibility: visible;
}

/* ===== CARD HEADER ===== */
.services-section .card-header {
    position: relative;
    padding: 1.5rem 1.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 3;
}

.services-section .service-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-section .icon-wrapper {
    width: clamp(60px, 10vw, 80px);
    height: clamp(60px, 10vw, 80px);
    background: var(--gradient-1);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease;
}

.services-section .icon-wrapper::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: var(--gradient-1);
    border-radius: inherit;
    filter: blur(8px);
    opacity: 0.4;
    z-index: -1;
}

.services-section .service-icon i {
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: white;
    z-index: 2;
    position: relative;
}

.services-section .icon-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: rgba(255, 255, 255, 0.95);
    color: #000000 !important;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
}

/* Ensure all icon badge text is black across all states */
.services-section .icon-badge span {
    color: #000000 !important;
}

/* Comprehensive coverage for all badge text variations */
.services-section .icon-badge,
.services-section .icon-badge *,
.services-section .icon-badge span,
.services-section .icon-badge .badge-text {
    color: #000000 !important;
}

/* Maximum specificity for badge text targeting */
html body .services-section .icon-badge span,
.services-section .service-icon .icon-badge span {
    color: #000000 !important;
}

/* Ultra-high specificity rules to override any conflicting styles */
html body div.services-section div.service-card div.card-header div.service-icon div.icon-badge span,
.services-section .service-icon .icon-badge > span,
div.icon-badge span {
    color: #000000 !important;
}

/* Force black color for all specific badge texts */
.services-section .icon-badge span:contains("PRO"),
.services-section .icon-badge span:contains("CREATIVE"),
.services-section .icon-badge span:contains("VFX"),
.services-section .icon-badge span:contains("AUDIO"),
.services-section .icon-badge span:contains("LIVE") {
    color: #000000 !important;
}

/* Inline-style override with maximum specificity */
[class*="icon-badge"] span,
[class*="service-card"] [class*="icon-badge"] span {
    color: #000000 !important;
}

/* Override CSS custom properties and inherited colors */
.services-section .icon-badge span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important; /* Override any gradient text fills */
}

/* Force black text with maximum specificity */
body html .services-section .service-card .card-header .service-icon .icon-badge span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.services-section .card-accent {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    background: var(--gradient-1);
    border-radius: 0 24px 0 80px;
    opacity: 0.1;
    transition: all 0.4s ease;
}

.services-section .service-card:hover .card-accent {
    width: 120px;
    height: 120px;
    opacity: 0.2;
}

.services-section .service-card:hover .icon-wrapper {
    transform: scale(1.1) rotate(5deg);
}

/* ===== CARD BODY ===== */
.services-section .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 1.5rem 1.5rem;
    position: relative;
    z-index: 3;
}

.services-section .service-number {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 800;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    opacity: 0.2;
    transition: all 0.4s ease;
}

.services-section .service-card:hover .service-number {
    opacity: 0.4;
    transform: scale(1.1);
}

.services-section .service-title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
    transition: all 0.3s ease;
}

.services-section .service-card:hover .service-title {
    transform: translateX(4px);
}

.services-section .service-tagline {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

/* ===== SERVICE FEATURES ===== */
.services-section .service-features {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex: 1;
}

.services-section .feature-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.15);
    transition: all 0.3s ease;
}

.services-section .feature-item:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
    transform: translateX(4px);
}

.services-section .feature-item i {
    color: var(--primary-color);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.services-section .feature-item span {
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    color: var(--text-primary);
    font-weight: 500;
}

/* ===== CARD FOOTER ===== */
.services-section .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    position: relative;
    z-index: 3;
}

.services-section .service-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.services-section .meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-tertiary);
}

.services-section .meta-item i {
    color: var(--primary-color);
    font-size: 0.75rem;
}

.services-section .meta-item span {
    font-weight: 500;
}

.services-section .service-play-btn {
    width: clamp(48px, 8vw, 56px);
    height: clamp(48px, 8vw, 56px);
    border-radius: 50%;
    background: var(--gradient-1);
    border: none;
    color: white;
    font-size: clamp(1rem, 2vw, 1.125rem);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(99, 102, 241, 0.3),
        0 0 0 2px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.services-section .service-play-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.services-section .service-play-btn:hover {
    transform: scale(1.1);
    box-shadow:
        0 12px 32px rgba(99, 102, 241, 0.4),
        0 0 20px rgba(99, 102, 241, 0.3);
}

.services-section .service-play-btn:hover::before {
    transform: translateX(0);
}

.services-section .service-play-btn i {
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.services-section .service-play-btn:hover i {
    transform: scale(1.2);
}

/* ===== ANIMATIONS ===== */
/* Removed conflicting cardFloat animation to prevent hover issues */

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.services-section .icon-wrapper {
    animation: pulse 4s ease-in-out infinite;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Large Desktop (1200px and below) */
@media (max-width: 1200px) {
    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 300px;
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    .services-section .services-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: var(--spacing-lg);
        overflow: hidden;
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 280px;
        max-width: 400px;
        justify-self: center;
    }

    .services-section .card-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .services-section .card-body {
        padding: 0 1.25rem 1.25rem;
    }

    .services-section .service-tagline {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .services-section .feature-item {
        padding: 0.4rem 0.6rem;
    }

    .services-section .meta-item {
        font-size: 0.7rem;
    }
}

/* Mobile Landscape (576px and below) */
@media (max-width: 576px) {
    .services-section .services-grid {
        gap: var(--spacing-md);
        padding: 0 var(--spacing-sm);
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 260px;
        max-width: 350px;
        justify-self: center;
    }

    .services-section .service-card {
        border-radius: 20px;
    }

    .services-section .card-header {
        padding: 1rem 1rem 0.5rem;
    }

    .services-section .card-body {
        padding: 0 1rem 1rem;
    }

    .services-section .icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .services-section .service-icon i {
        font-size: 1.5rem;
    }

    .services-section .icon-badge {
        top: -6px;
        right: -6px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .services-section .service-title {
        font-size: 1.25rem;
    }

    .services-section .service-tagline {
        font-size: 0.875rem;
    }

    .services-section .feature-item span {
        font-size: 0.8rem;
    }

    .services-section .card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .services-section .service-play-btn {
        align-self: center;
    }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
    .services-section .services-grid {
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-xs);
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 240px;
        max-width: 320px;
        justify-self: center;
    }

    .services-section .service-card {
        border-radius: 16px;
    }

    .services-section .card-header {
        padding: 1rem;
    }

    .services-section .card-body {
        padding: 0 1rem 1rem;
    }

    .services-section .icon-wrapper {
        width: 50px;
        height: 50px;
        border-radius: 16px;
    }

    .services-section .service-icon i {
        font-size: 1.25rem;
    }

    .services-section .icon-badge {
        display: none;
    }

    .services-section .service-number {
        font-size: 1.75rem;
    }

    .services-section .service-title {
        font-size: 1.125rem;
    }

    .services-section .service-tagline {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .services-section .service-features {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .services-section .feature-item {
        padding: 0.35rem 0.5rem;
    }

    .services-section .feature-item span {
        font-size: 0.75rem;
    }

    .services-section .service-play-btn {
        width: 44px;
        height: 44px;
        font-size: 0.875rem;
    }

    .services-section .service-meta {
        gap: 0.15rem;
    }

    .services-section .meta-item {
        font-size: 0.65rem;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    .services-section .service-card:hover {
        transform: none;
        animation: none;
    }

    .services-section .service-card:active {
        transform: scale(0.98);
    }

    .services-section .service-play-btn:hover {
        transform: scale(1);
    }

    .services-section .service-play-btn:active {
        transform: scale(0.95);
    }

    .services-section .feature-item:hover {
        transform: none;
    }

    .services-section .feature-item:active {
        background: rgba(99, 102, 241, 0.15);
    }

    /* Hide service play buttons on mobile devices */
    .services-section .service-play-btn {
        display: none !important;
    }
}/* Service stats sections removed - CSS cleaned up */

.services-section .service-play-btn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.services-section .service-play-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
}

/* Service Process */
.services-section .service-process {
    margin-top: clamp(3rem, 6vw, 5rem);
    text-align: center;
    position: relative;
    z-index: 1;
}

.services-section .process-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.services-section .process-subtitle {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.services-section .process-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
}

.services-section .process-step {
    flex: 1;
    min-width: 200px;
    text-align: center;
    position: relative;
}

.services-section .step-number {
    width: 60px;
    height: 60px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
}

.services-section .step-icon {
    width: 50px;
    height: 50px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
    color: var(--primary-color);
}

.services-section .step-icon i {
    position: relative;
    z-index: 1;
}

/* New Process Card Design */
.services-section .process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.services-section .process-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-surface) 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all var(--transition-slow);
    position: relative;
    overflow: hidden;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.services-section .process-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-1);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
}

.services-section .process-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-2xl), var(--shadow-glow-primary);
}

.services-section .process-card:hover::before {
    transform: translateX(0);
}

.services-section .process-number {
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-lg);
}

.services-section .process-icon {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.services-section .process-icon i {
    position: relative;
    z-index: 1;
}

.services-section .process-step-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.services-section .process-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
    flex: 1;
    font-size: 0.95rem;
}

.services-section .process-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: auto;
}

.services-section .process-feature {
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    padding: 0.35rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.services-section .step-number::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    background: var(--gradient-1);
    border-radius: 50%;
    opacity: 0.3;
    filter: blur(10px);
    z-index: -1;
}

.services-section .step-content h4 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.services-section .step-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Service Section Animations */
@keyframes float-orb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes pulse-icon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes glow-pulse {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.1); }
}

/* Process Section */
.process {
    padding: 3rem 0;
    background: transparent;
    position: relative;
}

.process::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 100px 100px;
    opacity: 0.5;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    position: relative;
    z-index: 1;
    max-width: 100%;
}

.process-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
}

.process-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-3);
}

.process-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-1);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
}

.process-icon {
    width: 60px;
    height: 60px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.process-icon i {
    font-size: 1.5rem !important;
    color: var(--primary-color) !important;
    display: inline-block !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    text-align: center !important;
}

/* Fix for process icon Font Awesome ::before pseudo-elements */
.process-icon i:before {
    display: inline-block !important;
    visibility: visible !important;
    font-family: 'Font Awesome 6 Free' !important;
    font-weight: 900 !important;
}

.process-card h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

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

/* Portfolio Section */
.portfolio {
    padding: 3rem 0 4rem;
    background: transparent;
    position: relative;
}

/* Add section separator after portfolio */
.portfolio::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(99, 102, 241, 0.3) 20%,
        rgba(168, 85, 247, 0.3) 50%,
        rgba(99, 102, 241, 0.3) 80%,
        transparent 100%);
    z-index: 5;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    max-width: 100%;
}

.portfolio-item {
    position: relative;
    height: 300px;
    background: var(--bg-card);
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid var(--border-color);
}

.portfolio-item:hover {
    box-shadow: var(--shadow-3);
    border-color: var(--primary-color);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.85) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-play {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    pointer-events: all;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.portfolio-play:hover {
    transform: scale(1.15);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.portfolio-play:active {
    transform: scale(0.95);
}

.portfolio-play i {
    color: white;
    font-size: 1.2rem;
    margin-left: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.portfolio-info {
    text-align: center;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease 0.1s;
}

.portfolio-item:hover .portfolio-info {
    transform: translateY(0);
    opacity: 1;
}

.portfolio-info h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: white;
    font-weight: 600;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.portfolio-info p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    font-weight: 300;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Creative Process Transition Section */
.creative-transition {
    padding: 4rem 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.transition-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.transition-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, 40px); }
}

.gradient-orb-left {
    position: absolute;
    top: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(80px);
    animation: floatOrb 15s ease-in-out infinite;
}

.gradient-orb-right {
    position: absolute;
    bottom: 10%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    filter: blur(100px);
    animation: floatOrb 20s ease-in-out infinite reverse;
}

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

.transition-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.transition-badge {
    display: inline-block;
    background: rgba(99, 102, 241, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--primary-color);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2rem;
    animation: badgePulse 3s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.transition-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.transition-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 4rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.process-step {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    animation: stepFloat 6s ease-in-out infinite;
}

.process-step:nth-child(1) { animation-delay: 0s; }
.process-step:nth-child(2) { animation-delay: 0.5s; }
.process-step:nth-child(3) { animation-delay: 1s; }

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

.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    animation: stepShine 3s ease-in-out infinite;
}

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

.process-step:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.4);
}

.step-number {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    line-height: 1;
}

.step-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.step-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

.transition-cta {
    animation: ctaBounce 2s ease-in-out infinite;
}

@keyframes ctaBounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

.cta-button-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 1.25rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.cta-button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.cta-button-primary:hover::before {
    left: 100%;
}

.cta-button-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

.cta-button-primary i {
    transition: transform 0.3s ease;
}

.cta-button-primary:hover i {
    transform: translateX(5px);
}

/* Responsive Styles for Transition Section */
@media (max-width: 1024px) {
    .creative-transition {
        padding: 6rem 0;
    }

    .process-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .transition-title {
        font-size: clamp(2rem, 4vw, 3rem);
    }

    .transition-subtitle {
        font-size: 1.1rem;
        margin-bottom: 3rem;
    }
}

@media (max-width: 768px) {
    .creative-transition {
        padding: 4rem 0;
    }

    .transition-badge {
        font-size: 0.8rem;
        padding: 0.4rem 1.2rem;
    }

    .transition-title {
        font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    }

    .transition-subtitle {
        font-size: 1rem;
        margin-bottom: 2.5rem;
    }

    .process-step {
        padding: 2rem 1.5rem;
    }

    .step-number {
        font-size: 2.5rem;
    }

    .step-content h3 {
        font-size: 1.25rem;
    }

    .cta-button-primary {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .creative-transition {
        padding: 3rem 0;
    }

    .transition-content {
        padding: 0 1rem;
    }

    .process-step {
        padding: 1.5rem 1rem;
    }

    .step-number {
        font-size: 2rem;
    }

    .step-content h3 {
        font-size: 1.1rem;
    }

    .step-content p {
        font-size: 0.9rem;
    }

    .cta-button-primary {
        padding: 0.875rem 1.75rem;
        font-size: 0.9rem;
    }
}

/* Contact Section */
/* Modern Contact Section */
.contact {
    padding: 4rem 0 3rem;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.contact::before {
    /* Removed background gradients to match hero section clean background */
    /* Now uses global body background */
}

/* Animated Background Elements - Removed to match hero section clean background */
/* .contact-particles and animations removed for professional appearance */

/* Contact Section Header - Matches other sections */
.contact .section-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    position: relative;
    z-index: 1;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    animation: contactSectionFadeIn 1s ease-out;
}

@keyframes contactSectionFadeIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glass Morphism Cards */
.contact-info-card,
.contact-form-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    animation: contactCardFloat 6s ease-in-out infinite;
}

.contact-info-card::before,
.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: contactCardShine 3s ease-in-out infinite;
}

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

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

.contact-info-card {
    animation-delay: 0.2s;
}

.contact-form-card {
    animation-delay: 0.4s;
}

.contact-info h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: contactTitleGlow 3s ease-in-out infinite;
}

@keyframes contactTitleGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

.contact-info p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Enhanced Contact Items */
.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.contact-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.1), transparent);
    transition: left 0.5s ease;
}

.contact-item:hover::before {
    left: 100%;
}

.contact-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.3);
}

.contact-item-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
}

.contact-item-icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.contact-item:hover .contact-item-icon::before {
    opacity: 1;
}

.contact-item:hover .contact-item-icon {
    color: white;
    transform: scale(1.1);
}

.contact-item-content h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 600;
}

.contact-item-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1rem;
    opacity: 0.8;
}

/* Enhanced Social Links */
.social-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.social-link {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.social-link:hover::before {
    width: 100%;
    height: 100%;
}

.social-link:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
    border-color: transparent;
    color: white;
}

.social-link i {
    position: relative;
    z-index: 1;
}
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    text-decoration: none;
    transition: var(--transition);
}

.social-link:hover {
    background: var(--gradient-1);
    color: white;
    transform: translateY(-2px);
}

.contact-form h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.contact-form p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    opacity: 0.9;
}

.form-group {
    margin-bottom: 1rem;
    position: relative;
}

.form-group label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    transform: translateY(-2px);
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    outline: none;
}

/* Form Field Animation */
.form-group {
    animation: formFieldSlideIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}

.form-group:nth-child(1) { animation-delay: 0.1s; }
.form-group:nth-child(2) { animation-delay: 0.2s; }
.form-group:nth-child(3) { animation-delay: 0.3s; }
.form-group:nth-child(4) { animation-delay: 0.4s; }
.form-group:nth-child(5) { animation-delay: 0.5s; }

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

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Form Field States */
.form-group.focused input,
.form-group.focused select,
.form-group.focused textarea {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-group.valid input,
.form-group.valid select,
.form-group.valid textarea {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.form-group.invalid input,
.form-group.invalid select,
.form-group.invalid textarea {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

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

/* Character Counter */
.char-count {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.3s ease;
    pointer-events: none;
}

/* Form field focus animations */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.1),
        0 8px 25px rgba(99, 102, 241, 0.15);
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    animation: submitButtonPulse 2s ease-in-out infinite;
}

@keyframes submitButtonPulse {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
    }
    50% {
        box-shadow: 0 12px 35px rgba(99, 102, 241, 0.5);
    }
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.btn-submit:hover::before {
    left: 100%;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.4);
}

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

.btn-submit i {
    transition: transform 0.3s ease;
}

.btn-submit:hover i {
    transform: translateX(5px);
}

/* Footer */
.footer {
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
}

.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

.footer-content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 calc(var(--spacing-lg) + 1rem);
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 3rem;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.footer-section.brand {
    max-width: 320px;
}

.footer-section h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #ffffff;
    position: relative;
    padding-bottom: 0.75rem;
}

.footer-section h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 1px;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 1.5rem;
    position: relative;
}

.footer-logo img {
    height: 45px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    transition: all 0.3s ease;
}

.footer-logo:hover img {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.4);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    position: relative;
    padding-left: 0;
    display: inline-block;
}

.footer-links a::before {
    content: '→';
    position: absolute;
    left: -15px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.3s ease;
    color: #6366f1;
}

.footer-links a:hover {
    color: #6366f1;
    padding-left: 15px;
}

.footer-links a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.social-links {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

.contact-item i {
    width: 20px;
    color: #6366f1;
    font-size: 1rem;
}

.footer-bottom {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 calc(var(--spacing-lg) + 1rem);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    font-size: 0.85rem;
}

.footer-bottom .copyright {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.footer-bottom .separator {
    color: rgba(255, 255, 255, 0.3);
}

.footer-bottom .links {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

.footer-bottom .links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s ease;
}

.footer-bottom .links a:hover {
    color: #6366f1;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-20px) rotate(5deg);
    }
    66% {
        transform: translateY(-10px) rotate(-5deg);
    }
}

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

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

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

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

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Professional Mobile Responsive Design */

/* Large Desktop (1200px and below) */
@media (max-width: 1200px) {
    :root {
        --container-max: 1140px;
    }

    /* Dynamic Island Header Responsive */
    .professional-header {
        max-width: calc(100% - 4rem);
        width: auto;
        margin: 0;
        padding: 0.5rem 1rem;
    }

    .header-container {
        gap: 1.5rem;
    }

    .navigation {
        gap: 1.5rem;
    }

    .nav-link {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }

    .cta-button {
        padding: 0.65rem 1.5rem;
        font-size: 0.85rem;
    }

    .logo img {
        height: 40px;
    }

    .hero-title {
        font-size: clamp(2.5rem, 5vw, 3.5rem);
    }

    .section-title {
        font-size: clamp(2rem, 4vw, 2.75rem);
    }

    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        max-width: 100%;
    }

    /* Maintain square cards for services section at 1200px breakpoint */
    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 300px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        max-width: 100%;
    }
}

/* Tablet Landscape (992px and below) */
@media (max-width: 992px) {
    :root {
        --container-max: 960px;
    }

    /* Dynamic Island Header Responsive */
    .professional-header {
        top: 15px;
        max-width: calc(100% - 3rem);
        width: auto;
        margin: 0;
        padding: 0.4rem 0.8rem;
        border-radius: 12px;
    }

    .professional-header.scrolled {
        top: 8px;
    }

    .header-container {
        gap: 1rem;
    }

    .navigation {
        gap: 1rem;
    }

    .nav-link {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }

    .cta-button {
        padding: 0.6rem 1.2rem;
        font-size: 0.8rem;
    }

    .logo img {
        height: 36px;
    }

    .section-container {
        padding: 0 var(--spacing-md);
    }

    .hero-container {
        padding: 0 var(--spacing-md);
    }

    .hero-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        text-align: center;
        max-width: 800px;
        margin: 0 auto;
    }

    .hero-left {
        order: 2;
    }

    .hero-right {
        order: 1;
        height: 400px;
        max-width: 600px;
        margin: 0 auto;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
        max-width: 800px;
        margin: 0 auto;
    }

    .contact-info-card {
        order: 2;
    }

    .contact-form-card {
        order: 1;
    }

    .hero-title {
        font-size: clamp(2.25rem, 5vw, 3rem);
    }

    .section-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
}

/* Tablet Portrait (768px and below) */
@media (max-width: 768px) {
    :root {
        --container-max: 720px;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2.5rem;
        --spacing-xxl: 3rem;
    }

    /* Fix horizontal overflow for grids on mobile */
    .services-grid,
    .process-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: var(--spacing-lg);
        overflow: hidden;
    }

    /* Enhanced mobile responsiveness for services section */
    .services-section .services-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: clamp(1.5rem, 4vw, 2rem);
        overflow: hidden;
        padding: 0 1rem;
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 280px;
        max-width: 400px;
        justify-self: center;
    }

    /* Improve card layout on tablet */
    .services-section .card-header {
        padding: 1rem 1rem 0.5rem;
    }

    .services-section .card-body {
        padding: 0 1rem 1rem;
    }

    .services-section .icon-wrapper {
        width: 60px;
        height: 60px;
    }

    .services-section .service-icon i {
        font-size: 1.5rem;
    }

    .services-section .icon-badge {
        top: -6px;
        right: -6px;
        padding: 3px 6px;
        font-size: 9px;
    }

    .services-section .service-number {
        font-size: 2rem;
    }

    .services-section .service-title {
        font-size: 1.25rem;
        margin-bottom: 0.25rem;
    }

    .services-section .service-tagline {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
        line-height: 1.3;
    }

    .services-section .feature-item {
        padding: 0.4rem 0.6rem;
    }

    .services-section .feature-item span {
        font-size: 0.8rem;
    }

    .services-section .card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .services-section .service-play-btn {
        align-self: center;
    }

    .services-section .service-meta {
        gap: 0.15rem;
    }

    .services-section .meta-item {
        font-size: 0.7rem;
    }

    .service-card,
    .services-section .service-card,
    .process-card,
    .services-section .process-card,
    .portfolio-item {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /* Dynamic Island Header Mobile */
    .professional-header {
        top: 10px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 auto;
        padding: 0.8rem 1.2rem;
        border-radius: 10px;
        max-width: calc(100% - 2rem);
        width: calc(100% - 2rem);
        animation: none;
        right: auto !important;
    }

    .professional-header.scrolled {
        top: 5px;
        transform: translateX(-50%) !important;
    }

    .header-container {
        gap: 0.5rem;
        padding: 0;
    }

    .navigation {
        display: none;
    }

    .cta-button {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .logo img {
        height: 42px;
    }

    .hero {
        margin-top: 0;
        min-height: 90vh;
        padding-top: 80px;
    }

    .hero-container {
        padding: 0 var(--spacing-md);
    }

    .hero-content {
        max-width: 100%;
        gap: var(--spacing-lg);
    }

    .hero-title {
        font-size: clamp(2rem, 6vw, 2.75rem);
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-md);
        width: 100%;
    }

    .hero-buttons .btn-primary,
    .hero-buttons .btn-secondary {
        width: 100%;
        justify-content: center;
        max-width: 300px;
    }

    .hero-stats {
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--spacing-lg);
    }

    .stat-item {
        min-width: 100px;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.875rem;
    }

    .hero-right {
        height: 300px;
    }

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

    .section-title {
        font-size: clamp(1.5rem, 4vw, 2.25rem);
    }

    .section-subtitle {
        font-size: 1rem;
        max-width: 100%;
    }

    .services-grid,
    .process-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
        gap: var(--spacing-lg);
    }

    .service-card,
    .process-card,
    .portfolio-item {
        max-width: 100%;
    }

    .process-grid {
        position: relative;
    }

    .process-grid::before {
        display: none;
    }

    .footer-content {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
        text-align: center;
    }

    .footer-section {
        text-align: center;
        align-items: center;
    }

    .footer-section h4,
    .footer-section p,
    .footer-links {
        text-align: center;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links li {
        display: inline-block;
        margin: 0 1rem 0.5rem 0;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-links a:hover {
        padding-left: 0;
    }

    .contact-item {
        justify-content: center;
    }

    .social-links {
        justify-content: center;
    }

    .footer-section.brand {
        max-width: 100%;
    }
}

/* Mobile Landscape (576px and below) */
@media (max-width: 576px) {
    :root {
        --container-max: 540px;
        --spacing-md: 1rem;
        --spacing-lg: 1.5rem;
        --spacing-xl: 2rem;
        --spacing-xxl: 2.5rem;
    }

    /* Enhanced mobile grid fixes */
    .services-grid,
    .process-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: var(--spacing-md);
        padding: 0 var(--spacing-sm);
    }

    /* Enhanced mobile responsiveness for smaller mobile devices */
    .services-section .services-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: clamp(1rem, 3vw, 1.5rem);
        padding: 0 0.75rem;
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 250px;
        max-width: 320px;
        justify-self: center;
    }

    /* Optimize card layout for mobile landscape */
    .services-section .service-card {
        border-radius: 20px;
    }

    .services-section .card-header {
        padding: 1rem 1rem 0.5rem;
    }

    .services-section .card-body {
        padding: 0 1rem 1rem;
    }

    .services-section .icon-wrapper {
        width: 55px;
        height: 55px;
        border-radius: 18px;
    }

    .services-section .service-icon i {
        font-size: 1.375rem;
    }

    .services-section .icon-badge {
        top: -5px;
        right: -5px;
        padding: 2px 5px;
        font-size: 8px;
    }

    .services-section .service-number {
        font-size: 1.75rem;
    }

    .services-section .service-title {
        font-size: 1.125rem;
        margin-bottom: 0.25rem;
        line-height: 1.2;
    }

    .services-section .service-tagline {
        font-size: 0.825rem;
        margin-bottom: 1rem;
        line-height: 1.3;
    }

    .services-section .service-features {
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .services-section .feature-item {
        padding: 0.35rem 0.5rem;
        border-radius: 10px;
    }

    .services-section .feature-item span {
        font-size: 0.75rem;
    }

    .services-section .card-footer {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .services-section .service-play-btn {
        width: 48px;
        height: 48px;
        font-size: 1rem;
        align-self: center;
    }

    .services-section .service-meta {
        gap: 0.1rem;
    }

    .services-section .meta-item {
        font-size: 0.65rem;
    }

    .service-card,
    .services-section .service-card,
    .process-card,
    .services-section .process-card,
    .portfolio-item {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: var(--spacing-md);
    }

    /* Dynamic Island Header Small Mobile */
    .professional-header {
        top: 8px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 auto;
        padding: 0.6rem 1rem;
        border-radius: 8px;
        max-width: calc(100% - 1.5rem);
        width: calc(100% - 1.5rem);
        right: auto !important;
    }

    .professional-header.scrolled {
        top: 3px;
        transform: translateX(-50%) !important;
    }

    .logo img {
        height: 38px;
    }

    .mobile-menu-toggle {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .hero-container {
        padding: 0 var(--spacing-sm);
    }

    .section-container {
        padding: 0 var(--spacing-sm);
    }

    .hero {
        margin-top: 60px;
        min-height: 85vh;
    }

    .hero-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .section-badge {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }

    .section-title {
        font-size: clamp(1.375rem, 4vw, 2rem);
    }

    .section-subtitle {
        font-size: 0.875rem;
    }

    .hero-stats {
        gap: var(--spacing-md);
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .service-card,
    .process-card {
        padding: var(--spacing-lg);
    }

    .service-icon,
    .process-icon {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    .process-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .contact-content {
        gap: var(--spacing-lg);
    }

    .contact-form-card {
        padding: var(--spacing-lg);
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    .video-preview {
        height: 250px;
    }

    .floating-element {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .footer-section {
        align-items: center;
    }

    .footer-section h4,
    .footer-section p,
    .footer-links {
        text-align: center;
    }

    .footer-section h4::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .footer-links li {
        display: inline-block;
        margin: 0 0.75rem 0.75rem 0;
    }

    .footer-links a::before {
        display: none;
    }

    .footer-links a:hover {
        padding-left: 0;
    }

    .contact-item {
        justify-content: center;
    }

    /* Enhanced footer contact items centering */
    .footer .footer-section .contact-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    .footer .footer-section .contact-item i {
        margin: 0 !important;
        margin-bottom: 0.25rem !important;
    }

    .footer .footer-section .contact-item a,
    .footer .footer-section .contact-item span {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
    }

    .footer .footer-section .contact-item span br {
        display: block !important;
        content: "" !important;
        margin: 0.25rem 0 !important;
    }

    .footer-section.brand {
        max-width: 100%;
    }
}

/* Mobile Portrait (375px and below) */
@media (max-width: 375px) {
    :root {
        --container-max: 100%;
        --spacing-sm: 0.75rem;
        --spacing-md: 1rem;
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
    }

    /* Ultra-compact mobile grid fixes */
    .services-grid,
    .process-grid,
    .portfolio-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: var(--spacing-sm);
        padding: 0 var(--spacing-xs);
    }

    /* Enhanced ultra-small mobile responsiveness */
    .services-section .services-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
        margin: 0 auto;
        gap: clamp(0.75rem, 2vw, 1rem);
        padding: 0 0.5rem;
    }

    .services-section .services-grid > * {
        aspect-ratio: 1 / 1;
        min-width: 220px;
        max-width: 300px;
        justify-self: center;
    }

    /* Ultra-compact card layout for very small screens */
    .services-section .service-card {
        border-radius: 16px;
        padding: 0;
    }

    .services-section .card-header {
        padding: 0.75rem 0.75rem 0.25rem;
    }

    .services-section .card-body {
        padding: 0 0.75rem 0.75rem;
    }

    .services-section .icon-wrapper {
        width: 45px;
        height: 45px;
        border-radius: 16px;
    }

    .services-section .service-icon i {
        font-size: 1.25rem;
    }

    .services-section .icon-badge {
        display: none; /* Hide badges on very small screens */
    }

    .services-section .service-number {
        font-size: 1.5rem;
    }

    .services-section .service-title {
        font-size: 1rem;
        margin-bottom: 0.25rem;
        line-height: 1.2;
    }

    .services-section .service-tagline {
        font-size: 0.75rem;
        margin-bottom: 0.75rem;
        line-height: 1.2;
    }

    .services-section .service-features {
        gap: 0.4rem;
        margin-bottom: 0.75rem;
    }

    .services-section .feature-item {
        padding: 0.3rem 0.5rem;
        border-radius: 8px;
        gap: 0.5rem;
    }

    .services-section .feature-item span {
        font-size: 0.7rem;
    }

    .services-section .card-footer {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }

    .services-section .service-play-btn {
        width: 44px;
        height: 44px;
        font-size: 0.875rem;
        align-self: center;
    }

    .services-section .service-meta {
        gap: 0.1rem;
    }

    .services-section .meta-item {
        font-size: 0.6rem;
    }

    .service-card,
    .services-section .service-card,
    .process-card,
    .services-section .process-card,
    .portfolio-item {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: var(--spacing-md);
        min-height: auto;
    }

    /* Ensure no horizontal overflow */
    body {
        overflow-x: hidden;
    }

    .container,
    .section-container,
    .services-grid,
    .process-grid,
    .portfolio-grid {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Dynamic Island Header Ultra Mobile */
    .professional-header {
        top: 5px;
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin: 0 auto;
        padding: 0.5rem 0.8rem;
        border-radius: 6px;
        max-width: calc(100% - 1rem);
        width: calc(100% - 1rem);
        right: auto !important;
    }

    .professional-header.scrolled {
        top: 2px;
        transform: translateX(-50%) !important;
    }

    .header-container {
        padding: 0;
        gap: 0.3rem;
    }

    .logo img {
        height: 35px;
    }

    .mobile-menu-toggle {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .hero-container {
        padding: 0 var(--spacing-sm);
    }

    .section-container {
        padding: 0 var(--spacing-sm);
    }

    .hero {
        margin-top: 60px;
        min-height: 80vh;
    }

    .hero-content {
        padding: var(--spacing-lg) 0;
    }

    .hero-title {
        font-size: clamp(1.5rem, 4.5vw, 2rem);
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .hero-buttons {
        gap: var(--spacing-sm);
    }

    .btn-primary,
    .btn-secondary,
    .cta-button {
        padding: 0.75rem 1.5rem;
        font-size: 0.875rem;
    }

    .hero-stats {
        gap: var(--spacing-md);
    }

    .stat-item {
        min-width: 80px;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .section-title {
        font-size: clamp(1.25rem, 4vw, 1.75rem);
    }

    .section-subtitle {
        font-size: 0.813rem;
    }

    .service-card,
    .process-card {
        padding: var(--spacing-md);
    }

    .service-icon,
    .process-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .process-number {
        width: 35px;
        height: 35px;
        font-size: 0.875rem;
    }

    .service-features {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .service-feature {
        font-size: 0.75rem;
        padding: 0.25rem 0.75rem;
    }

    .contact-info-card,
    .contact-form-card {
        padding: var(--spacing-md);
    }

    .contact-info-card h3,
    .contact-form-card h3 {
        text-align: center;
    }

    .contact-info-card p {
        text-align: center;
    }

    .contact-info-card {
        text-align: center;
    }

    .contact-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
        align-items: center;
    }

    .contact-item-icon {
        margin: 0 auto;
    }

    .contact-item-content {
        text-align: center !important;
    }

    .contact-item-content h4 {
        text-align: center !important;
    }

    .contact-item-content p {
        text-align: center !important;
    }

    .social-links {
        justify-content: center;
        display: flex;
        margin: 0 auto;
    }

    /* Force center all contact text on mobile */
    .contact-info-card * {
        text-align: center !important;
    }

    /* Ultra-specific selectors to override all conflicting styles */
    .contact-content .contact-info-card .contact-item {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .contact-content .contact-info-card .contact-item-icon {
        margin: 0 auto !important;
    }

    .contact-content .contact-info-card .contact-item-content {
        text-align: center !important;
        display: block !important;
    }

    .contact-content .contact-info-card .contact-item-content h4,
    .contact-content .contact-info-card .contact-item-content p {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        display: block !important;
        width: 100% !important;
    }

    .contact-form {
        gap: var(--spacing-sm);
    }

    .form-group {
        margin-bottom: var(--spacing-sm);
    }

    .form-group label {
        font-size: 0.875rem;
        margin-bottom: 0.5rem;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 0.75rem;
        font-size: 0.875rem;
    }

    .mobile-menu {
        width: 85vw;
        max-width: 320px;
        padding: 5rem 1.5rem 1.5rem;
    }

    .mobile-menu-nav a {
        font-size: 1rem;
        padding: 0.5rem 0;
    }

    .mobile-menu-close {
        top: 1.5rem;
        right: 1.5rem;
        font-size: 1.5rem;
    }
}

/* Touch-Optimized Interactions */
@media (hover: none) and (pointer: coarse) {
    .btn-primary:hover,
    .btn-secondary:hover,
    .cta-button:hover,
    .service-card:hover,
    .process-card:hover,
    .portfolio-item:hover {
        transform: none;
    }

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

    .social-link:hover {
        transform: none;
        color: var(--text-primary);
    }

    .play-button:hover {
        transform: none;
    }

    /* Touch-friendly tap targets */
    .btn-primary,
    .btn-secondary,
    .cta-button {
        min-height: 44px;
        min-width: 44px;
    }

    .mobile-menu-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .social-link {
        min-height: 44px;
        min-width: 44px;
    }

    .portfolio-item {
        min-height: 200px;
    }
}

/* Utility Classes */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.text-center {
    text-align: center;
}

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mb-4 { margin-bottom: 4rem; }

/* Modern Mobile Menu */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 400px;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-left: 1px solid rgba(99, 102, 241, 0.2);
    z-index: 1001;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    overflow-y: auto;
    box-shadow: -10px 0 40px rgba(99, 102, 241, 0.3);
}

.mobile-menu.active {
    right: 0;
    transform: perspective(1000px) rotateY(0deg);
}

.mobile-menu:not(.active) {
    transform: perspective(1000px) rotateY(90deg);
}

.mobile-menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.5), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

.mobile-menu-header {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    position: sticky;
    top: 0;
    z-index: 2;
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-menu-logo {
    display: flex;
    align-items: center;
}

.mobile-menu-logo img {
    height: 36px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
    object-fit: contain;
}

.mobile-menu-close {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border: 2px solid rgba(99, 102, 241, 0.3);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
    flex-shrink: 0;
}

.mobile-menu-close:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: transparent;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 12px 35px rgba(99, 102, 241, 0.4);
}

.mobile-menu-body {
    padding: 2.5rem 2rem;
}

.mobile-menu-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
}

.mobile-menu-nav li {
    margin-bottom: 0.75rem;
    transform: translateX(20px);
    opacity: 0;
    animation: slideInLeft 0.6s ease forwards;
}

.mobile-menu-nav li:nth-child(1) { animation-delay: 0.1s; }
.mobile-menu-nav li:nth-child(2) { animation-delay: 0.2s; }
.mobile-menu-nav li:nth-child(3) { animation-delay: 0.3s; }
.mobile-menu-nav li:nth-child(4) { animation-delay: 0.4s; }

@keyframes slideInLeft {
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.mobile-menu-nav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-nav a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3));
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.mobile-menu-nav a:hover {
    color: #ffffff;
    transform: translateX(10px);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
}

.mobile-menu-nav a:hover::before {
    left: 0;
}

.mobile-menu-nav a i {
    margin-right: 1rem;
    width: 24px;
    text-align: center;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-menu-sections {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
}

.mobile-menu-section-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-menu-section-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.5rem;
}

.mobile-menu-section-links li {
    transform: translateX(20px);
    opacity: 0;
    animation: slideInLeft 0.6s ease forwards;
}

.mobile-menu-section-links li:nth-child(1) { animation-delay: 0.5s; }
.mobile-menu-section-links li:nth-child(2) { animation-delay: 0.6s; }
.mobile-menu-section-links li:nth-child(3) { animation-delay: 0.7s; }
.mobile-menu-section-links li:nth-child(4) { animation-delay: 0.8s; }

.mobile-menu-section-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
}

.mobile-menu-section-links a:hover {
    color: #ffffff;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.2);
}

.mobile-cta {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    text-align: center;
}

.mobile-cta .cta-button {
    width: 100%;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border: none;
    padding: 1.2rem;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.mobile-cta .cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transition: all 0.6s ease;
    transform: translate(-50%, -50%);
}

.mobile-cta .cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
}

.mobile-cta .cta-button:hover::before {
    width: 300px;
    height: 300px;
}

.mobile-menu-social {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    text-align: center;
}

.mobile-menu-social-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-menu-social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.mobile-menu-social-links a {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    font-size: 1.1rem;
}

.mobile-menu-social-links a:hover {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 10px 25px rgba(99, 102, 241, 0.4);
}

/* Modern Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.95) 100%);
    backdrop-filter: blur(8px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Professional 3D Hero Section */
.hero-3d {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
    overflow: hidden;
}

/* 3D Background Elements */
.hero-3d-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Animated Gradient Spheres */
.gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: sphereFloat 20s ease-in-out infinite;
}

.sphere-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.sphere-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    bottom: -150px;
    right: -150px;
    animation-delay: 5s;
}

.sphere-3 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

/* 3D Grid */
.grid-3d {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    transform: perspective(1000px) rotateX(45deg);
    transform-origin: center;
    animation: gridMove 30s linear infinite;
}

/* Floating Particles */
.particles-3d {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle-3d {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.8);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
    animation: particleFloat 15s linear infinite;
}

.particle-3d:nth-child(1) {
    top: 10%;
    left: 20%;
    animation-delay: 0s;
}

.particle-3d:nth-child(2) {
    top: 30%;
    right: 25%;
    animation-delay: 3s;
}

.particle-3d:nth-child(3) {
    bottom: 40%;
    left: 30%;
    animation-delay: 6s;
}

.particle-3d:nth-child(4) {
    top: 60%;
    right: 15%;
    animation-delay: 9s;
}

.particle-3d:nth-child(5) {
    bottom: 20%;
    right: 40%;
    animation-delay: 12s;
}

/* Hero Content Container */
.hero-3d-container {
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    max-width: 1400px;
    width: 100%;
    padding: 0 2rem;
    align-items: center;
}

/* Hero Content */
.hero-3d-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Hero Badge */
.hero-badge {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-radius: 50%;
    animation: badgePulse 2s ease-in-out infinite;
}

.hero-badge span {
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Main Title */
.hero-title-3d h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0;
    text-align: center;
}

.title-3d-word {
    display: inline-block;
    background: linear-gradient(135deg, #ffffff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0.25rem;
    transform-style: preserve-3d;
    animation: title3DFloat 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

.title-3d-word:nth-child(1) {
    animation-delay: 0s;
    color: #6366f1;
}

.title-3d-word:nth-child(2) {
    animation-delay: 0.2s;
    color: #8b5cf6;
}

.title-3d-word:nth-child(3) {
    animation-delay: 0.4s;
    color: #a855f7;
}

.title-3d-word:nth-child(4) {
    animation-delay: 0.6s;
    color: #c084fc;
}

/* Subtitle */
.hero-subtitle-3d {
    font-size: 1.25rem;
    color: #94a3b8;
    text-align: center;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* CTA Buttons */
.hero-buttons-3d {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-3d {
    position: relative;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 60px;
}

.btn-3d-primary {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: white;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.btn-3d-secondary {
    background: transparent;
    color: white;
    border-color: rgba(99, 102, 241, 0.5);
    backdrop-filter: blur(10px);
}

.btn-3d-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent);
    border-radius: 50%;
    transition: width 0.6s, height 0.6s;
}

.btn-3d:hover .btn-3d-glow {
    width: 200px;
    height: 200px;
}

.btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}

.btn-3d-primary:hover {
    box-shadow: 0 20px 40px rgba(99, 102, 241, 0.6);
}

.btn-3d-secondary:hover {
    border-color: rgba(99, 102, 241, 0.8);
    background: rgba(99, 102, 241, 0.1);
}

/* Stats */
.hero-stats-3d {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.stat-3d {
    text-align: center;
    position: relative;
}

.stat-number-3d {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label-3d {
    font-size: 0.875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 3D Visual Element */
.hero-3d-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 500px;
    position: relative;
}

/* 3D Cube */
.cube-3d {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 20s linear infinite;
}

.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 2px solid rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.1);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: rgba(99, 102, 241, 0.8);
}

.cube-front {
    transform: translateZ(100px);
    background: rgba(99, 102, 241, 0.2);
}

.cube-back {
    transform: rotateY(180deg) translateZ(100px);
    background: rgba(168, 85, 247, 0.2);
}

.cube-right {
    transform: rotateY(90deg) translateZ(100px);
    background: rgba(236, 72, 153, 0.2);
}

.cube-left {
    transform: rotateY(-90deg) translateZ(100px);
    background: rgba(34, 197, 94, 0.2);
}

.cube-top {
    transform: rotateX(90deg) translateZ(100px);
    background: rgba(251, 191, 36, 0.2);
}

.cube-bottom {
    transform: rotateX(-90deg) translateZ(100px);
    background: rgba(239, 68, 68, 0.2);
}

/* Scroll Indicator */
.scroll-indicator-3d {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.8));
    position: relative;
    overflow: hidden;
}

.scroll-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #6366f1;
    border-radius: 50%;
    animation: scrollDot 2s ease-in-out infinite;
}

.scroll-indicator-3d span {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* 3D Hero Animation Keyframes */
@keyframes sphereFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}

@keyframes gridMove {
    from { transform: perspective(1000px) rotateX(45deg) translateY(0); }
    to { transform: perspective(1000px) rotateX(45deg) translateY(50px); }
}

@keyframes particleFloat {
    from {
        transform: translateY(100vh) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    to {
        transform: translateY(-100vh) translateX(50px);
        opacity: 0;
    }
}

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

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

@keyframes cubeRotate {
    from { transform: rotateX(0) rotateY(0); }
    to { transform: rotateX(360deg) rotateY(360deg); }
}

@keyframes scrollDot {
    0%, 100% { top: 0; }
    50% { top: 30px; }
}

/* 3D Hero Responsive Design */
@media (max-width: 1024px) {
    .hero-3d-container {
        grid-template-columns: 1fr;
        gap: 3rem;
        text-align: center;
    }

    .hero-3d-visual {
        height: 400px;
        order: -1;
    }

    .cube-3d {
        width: 150px;
        height: 150px;
    }

    .cube-face {
        width: 150px;
        height: 150px;
        font-size: 2rem;
    }

    .cube-front,
    .cube-back {
        transform: translateZ(75px);
    }

    .cube-back {
        transform: rotateY(180deg) translateZ(75px);
    }

    .cube-right {
        transform: rotateY(90deg) translateZ(75px);
    }

    .cube-left {
        transform: rotateY(-90deg) translateZ(75px);
    }

    .cube-top {
        transform: rotateX(90deg) translateZ(75px);
    }

    .cube-bottom {
        transform: rotateX(-90deg) translateZ(75px);
    }

    .hero-stats-3d {
        gap: 2rem;
    }

    .stat-number-3d {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-3d {
        min-height: 90vh;
    }

    .hero-3d-container {
        padding: 0 1rem;
        gap: 2rem;
    }

    .hero-3d-visual {
        height: 300px;
    }

    .cube-3d {
        width: 120px;
        height: 120px;
    }

    .cube-face {
        width: 120px;
        height: 120px;
        font-size: 1.5rem;
    }

    .cube-front,
    .cube-back {
        transform: translateZ(60px);
    }

    .cube-back {
        transform: rotateY(180deg) translateZ(60px);
    }

    .cube-right {
        transform: rotateY(90deg) translateZ(60px);
    }

    .cube-left {
        transform: rotateY(-90deg) translateZ(60px);
    }

    .cube-top {
        transform: rotateX(90deg) translateZ(60px);
    }

    .cube-bottom {
        transform: rotateX(-90deg) translateZ(60px);
    }

    .hero-title-3d h1 {
        font-size: clamp(2rem, 8vw, 3rem);
    }

    .title-3d-word {
        margin: 0.1rem;
    }

    .hero-subtitle-3d {
        font-size: 1.1rem;
    }

    .hero-buttons-3d {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .btn-3d {
        width: 100%;
        max-width: 280px;
    }

    .hero-stats-3d {
        gap: 1.5rem;
    }

    .stat-number-3d {
        font-size: 1.5rem;
    }

    .stat-label-3d {
        font-size: 0.75rem;
    }

    .sphere-1,
    .sphere-2,
    .sphere-3 {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-3d {
        min-height: 85vh;
    }

    .hero-3d-container {
        padding: 0 0.5rem;
    }

    .hero-3d-visual {
        height: 250px;
    }

    .cube-3d {
        width: 100px;
        height: 100px;
    }

    .cube-face {
        width: 100px;
        height: 100px;
        font-size: 1.2rem;
    }

    .cube-front,
    .cube-back {
        transform: translateZ(50px);
    }

    .cube-back {
        transform: rotateY(180deg) translateZ(50px);
    }

    .cube-right {
        transform: rotateY(90deg) translateZ(50px);
    }

    .cube-left {
        transform: rotateY(-90deg) translateZ(50px);
    }

    .cube-top {
        transform: rotateX(90deg) translateZ(50px);
    }

    .cube-bottom {
        transform: rotateX(-90deg) translateZ(50px);
    }

    .hero-title-3d h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem);
    }

    .hero-subtitle-3d {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hero-buttons-3d {
        gap: 0.75rem;
    }

    .btn-3d {
        padding: 0.875rem 2rem;
        font-size: 0.875rem;
        height: 50px;
    }

    .hero-stats-3d {
        gap: 1rem;
    }

    .stat-number-3d {
        font-size: 1.25rem;
    }

    .grid-3d {
        background-size: 30px 30px;
    }
}

/* Professional Video Hero Section */
.hero-video {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 100px;
}

/* Professional Hero Background - Now uses global body background */
.professional-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    /* Background removed - now uses body background */
}

.gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.6;
    animation: float 20s infinite ease-in-out;
}

.sphere-1 {
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.sphere-2 {
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #ec4899, #f97316);
    bottom: -150px;
    right: -150px;
    animation-delay: 5s;
}

.sphere-3 {
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #06b6d4, #3b82f6);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation-delay: 10s;
}

.animated-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(99, 102, 241, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(99, 102, 241, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: grid-move 10s linear infinite;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay removed - now uses global body::before overlay */
}

/* Hero Container */
.hero-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    justify-content: center;
    max-width: calc(100% - 6rem);
    margin: 0 auto;
    padding: 30px;
    width: auto;
    text-align: center;
    box-sizing: border-box;
}

/* Hero Content - Centered */
.hero-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: center;
    margin: 0 auto 2rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(99, 102, 241, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: all var(--transition-normal);
}

.hero-badge:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 40px rgba(99, 102, 241, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border-color: rgba(99, 102, 241, 0.5);
}

.badge-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 0.875rem;
    animation: badgeIconRotate 3s linear infinite;
}

.hero-badge span {
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    font-weight: 700;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    white-space: nowrap;
}

.badge-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%);
    animation: badgeGlowSweep 3s ease-in-out infinite;
}

/* Badge Icon Animation */
@keyframes badgeIconRotate {
    0% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(90deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1); }
    75% { transform: rotate(270deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
}

/* Badge Glow Sweep Animation */
@keyframes badgeGlowSweep {
    0% { left: -100%; }
    50% { left: 100%; }
    100% { left: 100%; }
}

/* Hero Title */
.hero-title {
    text-align: center;
}

.hero-title h1 {
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 300;
    line-height: 1.05;
    margin: 0;
    color: #ffffff;
    letter-spacing: -0.03em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.title-word {
    display: inline-block;
    margin: 0 0.3rem;
    opacity: 0;
    color: inherit; /* Inherit premium white color from parent */
    animation: fadeInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    /* Premium text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Premium animation performance */
    will-change: opacity, transform;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Subtle premium effects */
    position: relative;
}

/* Add special emphasis to key words */
.title-word:nth-child(1) { /* Capture */
    font-weight: 200;
    letter-spacing: -0.02em;
}

.title-word:nth-child(3) { /* Moment */
    font-weight: 400;
    position: relative;
}

.title-word:nth-child(4) { /* Perfectly */
    font-weight: 200;
    letter-spacing: -0.01em;
}

/* Add subtle glow effect to "Moment" */
.title-word:nth-child(3)::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(ellipse at center,
        rgba(168, 85, 247, 0.1) 0%,
        transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: subtleGlow 3s ease-in-out infinite alternate;
}

.title-word:nth-child(1) { animation-delay: 0.1s; }
.title-word:nth-child(2) { animation-delay: 0.3s; }
.title-word:nth-child(3) { animation-delay: 0.5s; }
.title-word:nth-child(4) { animation-delay: 0.7s; }

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Hero Buttons */
.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.hero-btn {
    position: relative;
    padding: 0.75rem 1.75rem;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 140px;
    height: auto;
    background-clip: padding-box;
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

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

.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
}

.hero-btn:hover .hero-btn-shine {
    left: 100%;
}

.hero-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hero-btn-primary:hover {
    box-shadow:
        0 12px 24px rgba(99, 102, 241, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.2);
}

.hero-btn-secondary:hover {
    box-shadow:
        0 12px 24px rgba(255, 255, 255, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    gap: 3rem;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-stat {
    text-align: center;
    position: relative;
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Hero Video Preview */
.hero-video-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    aspect-ratio: 16/9;
    max-height: 500px;
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* Prevent layout shifts during animation */
    contain: layout style paint;
    /* Ensure stable positioning */
    padding: 0;
    box-sizing: border-box;
    /* Prevent layout jump by maintaining final dimensions */
    min-height: auto;
}

.preview-container {
    position: relative;
    width: 97%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: #000;
    will-change: transform;
}

.preview-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.preview-video.loaded {
    opacity: 1;
}

.preview-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
}

.preview-play {
    width: 80px;
    height: 80px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Removed conflicting transform - parent handles centering */
}

.preview-play:hover {
    background: rgba(99, 102, 241, 0.8);
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
}

/* Force button visibility - DEBUG */
.preview-controls {
    z-index: 9999 !important;
    pointer-events: auto !important;
}

.preview-play {
    z-index: 9999 !important;
    pointer-events: auto !important;
    border: 4px solid #6366f1 !important;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Professional Video Player Overlay */
.video-player-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.7) 0%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.8) 100%
    );
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
    border-radius: 20px;
}

.video-player-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Video Controls */
.video-controls {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Video Control Buttons */
.video-control-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: white;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.video-control-btn:active {
    transform: scale(0.95);
}

.video-play-pause {
    width: 45px;
    height: 45px;
    font-size: 16px;
}

/* Progress Bar */
.video-progress {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}

.video-progress-filled {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 3px;
    width: 0%;
    transition: width 0.1s linear;
    position: relative;
}

.video-progress-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-progress:hover .video-progress-handle {
    opacity: 1;
}

/* Time Display */
.video-time {
    color: white;
    font-size: 12px;
    font-weight: 500;
    min-width: 80px;
    text-align: center;
    font-family: 'Inter', monospace;
}

/* Volume Control */
.volume-slider {
    width: 0;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: width 0.3s ease;
    margin-left: 10px;
    min-width: 0;
    opacity: 0;
    visibility: hidden;
}

.volume-slider.active {
    width: 80px;
    min-width: 80px;
    opacity: 1;
    visibility: visible;
    background: rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.volume-slider-filled {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 3px;
    width: 100%;
    position: relative;
}

.volume-slider-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(50%, -50%);
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Loading Indicator */
.video-loading-indicator.active {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

/* Hero Scroll */
.hero-scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.8));
    position: relative;
    overflow: hidden;
}

.scroll-dot {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: scrollDot 2s ease-in-out infinite;
}

.hero-scroll span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Professional Section Backgrounds */
.professional-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.gradient-mesh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
        radial-gradient(at 80% 80%, rgba(168, 85, 247, 0.3) 0%, transparent 50%),
        radial-gradient(at 20% 80%, rgba(236, 72, 153, 0.3) 0%, transparent 50%);
    animation: mesh-move 15s ease-in-out infinite;
}

.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border: 1px solid rgba(99, 102, 241, 0.3);
    backdrop-filter: blur(10px);
    animation: shape-float 20s infinite ease-in-out;
}

.shape-1 {
    width: 200px;
    height: 200px;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.shape-2 {
    width: 150px;
    height: 150px;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    bottom: 20%;
    right: 10%;
    animation-delay: 5s;
}

.shape-3 {
    width: 180px;
    height: 180px;
    border-radius: 41% 59% 41% 59% / 41% 59% 59% 41%;
    top: 50%;
    left: 70%;
    animation-delay: 10s;
}

.section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.7) 100%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* Service Videos */
.service-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    z-index: 1;
}

.service-video-player {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* Portfolio Videos */
.portfolio-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2 !important;
    transition: opacity 0.3s ease;
}

/* Enhanced portfolio item with fallback background */
.portfolio-item {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
}

/* Video Hover Effects */
.service-card:hover .service-video-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
}

/* Responsive Video Styles */
@media (max-width: 1024px) {
    .hero-container {
        gap: 3rem;
        text-align: center;
        max-width: calc(100% - 4rem);
        margin: 0 auto;
        padding: 0;
        width: auto;
        box-sizing: border-box;
    }

    .hero-content {
        max-width: 700px;
    }

    .hero-video-preview {
        height: auto;
        aspect-ratio: 16/9;
        max-height: 400px;
        max-width: 700px;
    }

    .hero-stats {
        gap: 2rem;
    }

    .stat-number {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .hero-video {
        min-height: 90vh;
        padding-top: 100px;
    }

    .hero-container {
        margin: 0 auto;
        padding: 0;
        gap: 2rem;
        width: auto;
        max-width: calc(100% - 4rem);
        box-sizing: border-box;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-video-preview {
        height: auto;
        aspect-ratio: 16/9;
        max-height: 300px;
        max-width: 100%;
    }

    /* Mobile Video Controls - YouTube Style */
    .video-controls {
        bottom: 0;
        left: 0;
        right: 0;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.6));
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        flex-wrap: nowrap;
        overflow-x: auto;
        /* More compact like YouTube */
        min-height: 44px;
        align-items: center;
    }

    .video-control-btn {
        width: 36px;
        height: 36px;
        font-size: 14px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.1);
        border: none;
        min-width: 36px;
        min-height: 36px;
        flex-shrink: 0;
        /* YouTube-style transparent background */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .video-play-pause {
        width: 40px;
        height: 40px;
        font-size: 16px;
        min-width: 40px;
        min-height: 40px;
        background: rgba(255, 255, 255, 0.2);
        /* Slightly more prominent play button */
    }

    .video-time {
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
        padding: 0;
        margin: 0 4px;
        color: rgba(255, 255, 255, 0.9);
        font-weight: 500;
    }

    .video-progress {
        height: 4px;
        border-radius: 2px;
        flex: 1;
        min-width: 60px;
        margin: 0 4px;
        background: rgba(255, 255, 255, 0.3);
        /* More subtle like YouTube */
    }

    .video-progress-filled {
        border-radius: 4px;
    }

    .video-progress-handle {
        width: 12px;
        height: 12px;
    }

    .volume-slider {
        width: 0;
        height: 4px;
        margin-left: 6px;
        border-radius: 2px;
        flex-shrink: 0;
        background: rgba(255, 255, 255, 0.3);
    }

    .volume-slider.active {
        width: 48px;
        min-width: 48px;
    }

    .volume-slider-filled {
        border-radius: 4px;
    }

    .volume-slider-handle {
        width: 12px;
        height: 12px;
    }

    /* Optional: Hide fullscreen on smaller mobile devices */
    .video-fullscreen {
        display: none;
    }

    /* YouTube-style hover effects for mobile */
    .video-control-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.05);
    }

    .video-play-pause:hover {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(1.1);
    }

    /* Better tap targets */
    .video-control-btn::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        right: -4px;
        bottom: -4px;
        background: transparent;
    }

    .hero-title h1 {
        font-size: clamp(2.5rem, 7vw, 3.5rem);
        font-weight: 300;
        letter-spacing: -0.025em;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .hero-btn {
        width: 100%;
        max-width: 280px;
    }

    .hero-stats {
        gap: 1.5rem;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.75rem;
    }

    .preview-play {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Hero Scroll Mobile Styles */
    .hero-scroll {
        bottom: 4rem;
        gap: 0.3rem;
    }

    .scroll-line {
        height: 30px;
    }

    .hero-scroll span {
        font-size: 0.65rem;
        letter-spacing: 0.05em;
    }
}

@media (max-width: 480px) {
    .hero-video {
        min-height: 85vh;
        padding-top: 120px;
    }

    .hero-container {
        margin: 0 auto;
        padding: 0;
        gap: 1.5rem;
        width: auto;
        max-width: calc(100% - 2rem);
        box-sizing: border-box;
    }

    .hero-content {
        max-width: 100%;
    }

    .hero-video-preview {
        height: auto;
        aspect-ratio: 16/9;
        max-height: 250px;
        max-width: 100%;
    }

    /* Extra Small Mobile Video Controls - Ultra Compact */
    .video-controls {
        bottom: 0;
        left: 0;
        right: 0;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.7));
        font-size: 11px;
        min-height: 40px;
        /* Even more compact */
    }

    .video-control-btn {
        width: 32px;
        height: 32px;
        font-size: 12px;
        border-radius: 50%;
        min-width: 32px;
        min-height: 32px;
        background: rgba(255, 255, 255, 0.15);
    }

    .video-play-pause {
        width: 36px;
        height: 36px;
        font-size: 14px;
        min-width: 36px;
        min-height: 36px;
        background: rgba(255, 255, 255, 0.25);
    }

    .video-time {
        font-size: 10px;
        padding: 0;
        margin: 0 2px;
        color: rgba(255, 255, 255, 0.8);
        font-weight: 400;
    }

    .video-progress {
        height: 3px;
        border-radius: 1.5px;
        min-width: 40px;
        margin: 0 2px;
        background: rgba(255, 255, 255, 0.2);
    }

    .video-progress-handle {
        width: 10px;
        height: 10px;
    }

    .volume-slider {
        height: 6px;
        margin-left: 5px;
        border-radius: 3px;
    }

    .volume-slider.active {
        width: 50px;
        min-width: 50px;
    }

    .volume-slider-handle {
        width: 10px;
        height: 10px;
    }

    /* Hide volume button on very small screens to save space */
    .video-volume,
    .volume-slider {
        display: none;
    }

    /* Touch-friendly improvements */
    .video-control-btn {
        /* Prevent zoom on double-tap */
        touch-action: manipulation;
        /* Add subtle touch feedback */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
    }

    .video-progress {
        /* Larger touch target for progress bar */
        height: 12px;
        padding: 3px 0;
    }

    .video-progress::before {
        content: '';
        position: absolute;
        top: -3px;
        left: 0;
        right: 0;
        bottom: -3px;
        background: transparent;
    }

    .hero-title h1 {
        font-size: clamp(2rem, 6vw, 3rem);
        font-weight: 300;
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 1rem;
        line-height: 1.5;
    }

    .hero-buttons {
        gap: 0.75rem;
    }

    .hero-btn {
        padding: 0.875rem 2rem;
        font-size: 0.875rem;
        height: 50px;
    }

    .hero-stats {
        gap: 1rem;
    }

    .stat-number {
        font-size: 1.25rem;
    }

    .preview-play {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* Hero Scroll Mobile Styles for smaller screens */
    .hero-scroll {
        bottom: 3.5rem;
        gap: 0.25rem;
    }

    .scroll-line {
        height: 25px;
    }

    .hero-scroll span {
        font-size: 0.6rem;
        letter-spacing: 0.03em;
    }
}

/* Video Loading States */
.hero-video-player,
.service-video-player,
.section-video,
.portfolio-video,
.preview-video {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.hero-video-player.loaded,
.service-video-player.loaded,
.section-video.loaded,
.portfolio-video.loaded,
.preview-video.loaded {
    opacity: 1;
}

/* Video loading indicator */
.hero-video-player:not(.loaded)::before,
.service-video-player:not(.loaded)::before,
.section-video:not(.loaded)::before,
.preview-video:not(.loaded)::before {
    content: 'Loading video...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.875rem;
    z-index: 2;
    background: rgba(0, 0, 0, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 20px;
}

/* Video Error States */
.hero-video-player::after,
.service-video-player::after,
.section-video::after,
.preview-video::after {
    content: 'Video loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.875rem;
    z-index: -1;
}
/* Policy Pages Styles */
.privacy-hero, .terms-hero, .cookie-hero {
    position: relative;
    padding: 80px 0 40px;
    overflow: hidden;
    background: var(--bg-secondary);
    min-height: 40vh;
    display: flex;
    align-items: center;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-1);
    opacity: 0.1;
}

.gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, transparent 100%);
}

.privacy-hero-content, .terms-hero-content, .cookie-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.privacy-hero p, .terms-hero p, .cookie-hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.last-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-tertiary);
    font-size: 0.875rem;
    background: var(--bg-card);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    border: 1px solid var(--border-color);
}

/* Policy Content Layout */
.privacy-content, .terms-content, .cookie-content {
    padding: 40px 0;
    background: transparent;
}

.policy-container, .terms-container, .cookie-container {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Table of Contents */
.table-of-contents {
    position: sticky;
    top: 120px;
    height: fit-content;
    background: var(--bg-card);
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid var(--border-color);
}

.table-of-contents h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.toc-link {
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

.toc-link:hover {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(4px);
}

.toc-link.active {
    color: var(--primary-color);
    background: rgba(99, 102, 241, 0.15);
    border-left: 3px solid var(--primary-color);
}

/* Main Policy Content */
.privacy-main, .terms-main, .cookie-main {
    background: var(--bg-card);
    border-radius: 1rem;
    padding: 3rem;
    border: 1px solid var(--border-color);
}

.privacy-section, .terms-section, .cookie-section {
    margin-bottom: 4rem;
    scroll-margin-top: 120px;
}

.privacy-section:last-child, .terms-section:last-child, .cookie-section:last-child {
    margin-bottom: 0;
}

.privacy-section h2, .terms-section h2, .cookie-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.privacy-section h2::before, .terms-section h2::before, .cookie-section h2::before {
    content: '';
    width: 4px;
    height: 30px;
    background: var(--gradient-1);
    border-radius: 2px;
}

.privacy-section h3, .terms-section h3, .cookie-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: var(--text-primary);
}

.privacy-section h4, .terms-section h4, .cookie-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--text-primary);
}

.section-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1rem;
}

.privacy-list, .terms-list, .cookie-list {
    list-style: none;
    margin: 1.5rem 0;
}

.privacy-list li, .terms-list li, .cookie-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.privacy-list li::before, .terms-list li::before, .cookie-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

.privacy-list strong, .terms-list strong, .cookie-list strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Special Policy Elements */
.contact-info {
    background: var(--bg-surface);
    border-radius: 0.75rem;
    padding: 2rem;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.contact-item:last-child {
    margin-bottom: 0;
}

.contact-item i {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
}

.contact-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
}

.contact-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--secondary-color);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-1);
    border-radius: 50%;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-xl);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .policy-container, .terms-container, .cookie-container {
        grid-template-columns: 250px 1fr;
        gap: 2rem;
    }

    .table-of-contents {
        position: relative;
        top: 0;
    }
}

@media (max-width: 768px) {
    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 2.5rem;
    }

    .privacy-hero p, .terms-hero p, .cookie-hero p {
        font-size: 1.125rem;
    }

    .policy-container, .terms-container, .cookie-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .table-of-contents {
        position: sticky;
        top: 80px;
        order: 2;
    }

    .privacy-main, .terms-main, .cookie-main {
        order: 1;
        padding: 2rem;
    }

    .privacy-section, .terms-section, .cookie-section {
        margin-bottom: 3rem;
    }

    .privacy-section h2, .terms-section h2, .cookie-section h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .privacy-hero, .terms-hero, .cookie-hero {
        padding: 60px 0 30px;
        min-height: 35vh;
    }

    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 2rem;
    }

    .privacy-content, .terms-content, .cookie-content {
        padding: 60px 0;
    }

    .privacy-main, .terms-main, .cookie-main {
        padding: 1.5rem;
    }

    .table-of-contents {
        padding: 1.5rem;
    }

    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.125rem;
    }
}

/* Container class for policy pages */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Enhanced responsive design for policy pages */
@media (max-width: 1200px) {
    .container {
        padding: 0 1.5rem;
    }
    
    .policy-container, .terms-container, .cookie-container {
        max-width: 100%;
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .privacy-hero p, .terms-hero p, .cookie-hero p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .policy-container, .terms-container, .cookie-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .table-of-contents {
        position: sticky;
        top: 80px;
        order: 2;
        max-height: 400px;
        overflow-y: auto;
    }
    
    .privacy-main, .terms-main, .cookie-main {
        order: 1;
        padding: 1.5rem;
    }
    
    .privacy-section, .terms-section, .cookie-section {
        margin-bottom: 2rem;
    }
    
    .privacy-section h2, .terms-section h2, .cookie-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .privacy-section h3, .terms-section h3, .cookie-section h3 {
        font-size: 1.25rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    .section-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .contact-info {
        padding: 1.5rem;
    }
    
    .contact-item {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .contact-item i {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 480px) {
    .privacy-hero, .terms-hero, .cookie-hero {
        padding: 60px 0 30px;
        min-height: 35vh;
    }
    
    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 1.75rem;
    }
    
    .privacy-content, .terms-content, .cookie-content {
        padding: 40px 0;
    }
    
    .container {
        padding: 0 0.75rem;
    }
    
    .table-of-contents {
        padding: 1rem;
        border-radius: 0.75rem;
    }
    
    .table-of-contents h3 {
        font-size: 1.1rem;
        margin-bottom: 1rem;
    }
    
    .toc-link {
        font-size: 0.825rem;
        padding: 0.4rem 0.6rem;
    }
    
    .privacy-main, .terms-main, .cookie-main {
        padding: 1rem;
    }
    
    .privacy-section, .terms-section, .cookie-section {
        margin-bottom: 1.5rem;
    }
    
    .privacy-section h2, .terms-section h2, .cookie-section h2 {
        font-size: 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .privacy-section h2::before, .terms-section h2::before, .cookie-section h2::before {
        width: 3px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 0.25rem;
    }
    
    .last-updated {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Smooth scrolling for policy pages */
html {
    scroll-behavior: smooth;
}

/* Policy page specific enhancements */
.policy-container, .terms-container, .cookie-container {
    /* Removed animation to ensure content is visible immediately */
}

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

/* Enhanced table of contents styling */
.toc-nav {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.toc-nav::-webkit-scrollbar {
    width: 4px;
}

.toc-nav::-webkit-scrollbar-track {
    background: var(--bg-surface);
    border-radius: 2px;
}

.toc-nav::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 2px;
}

.toc-nav::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* Enhanced section styling */
.privacy-section, .terms-section, .cookie-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2rem;
}

.privacy-section:last-child, .terms-section:last-child, .cookie-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Enhanced list styling */
.privacy-list, .terms-list, .cookie-list {
    background: var(--bg-surface);
    border-radius: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.privacy-list li, .terms-list li, .cookie-list li {
    padding-left: 1.25rem;
    margin-bottom: 0.5rem;
    position: relative;
}

.privacy-list li::before, .terms-list li::before, .cookie-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--primary-color);
    font-weight: bold;
}

/* Enhanced contact info styling */
.contact-info {
    background: linear-gradient(135deg, var(--bg-surface) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
}

.contact-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-1);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateY(-2px);
}

.contact-item i {
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-top: 0.25rem;
    background: rgba(99, 102, 241, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.contact-item a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: var(--secondary-color);
}

/* Professional Portfolio Section Styles */
.portfolio-section {
    padding: clamp(3rem, 4vw, 4rem) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

.portfolio-section .section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    position: relative;
    z-index: 1;
}

/* Process Section - Clean & Simple */
.process-section {
  padding: clamp(3rem, 4vw, 4rem) 0;
  position: relative;
}

.section-header {
  text-align: center;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-header h2 {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
}

.section-header p {
  font-size: 18px;
  color: #94a3b8;
  max-width: 600px;
  margin: 0 auto;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.process-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
}

.process-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(99, 102, 241, 0.3);
}

.process-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2)) !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  transition: all 0.3s ease;
}

.process-card:hover .process-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(139, 92, 246, 0.3)) !important;
  border-color: rgba(99, 102, 241, 0.5) !important;
  transform: scale(1.05);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
}

.process-icon svg {
  width: 32px;
  height: 32px;
  color: #6366f1;
}

.process-card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
}

.process-card p {
  font-size: 16px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

/* Responsive Styles for Process Section */
@media (max-width: 1024px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    max-width: 800px;
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  .section-header h2 {
    font-size: 28px;
  }

  .section-header p {
    font-size: 16px;
  }

  .process-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 500px;
  }

  .process-card {
    padding: 30px 20px;
  }

  .process-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
  }

  .process-icon svg {
    width: 28px;
    height: 28px;
  }

  .process-card h3 {
    font-size: 20px;
  }

  .process-card p {
    font-size: 15px;
  }
}

/* Responsive Styles for Professional Process Section */
@media (max-width: 1024px) {
  .process-section {
    padding: 120px 0;
  }

  .process-title {
    font-size: 48px;
  }

  .process-item {
    flex-direction: column !important;
    text-align: center;
  }

  .process-marker {
    margin: 0 0 32px 0;
  }

  .process-timeline {
    display: none;
  }

  .process-content {
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .process-section {
    padding: 100px 0;
  }

  .process-container {
    padding: 0 16px;
  }

  .process-header {
    margin-bottom: 80px;
  }

  .process-title {
    font-size: 36px;
  }

  .process-subtitle {
    font-size: 18px;
  }

  .process-content {
    padding: 32px 24px;
  }

  .process-step-title {
    font-size: 28px;
  }

  .process-description {
    font-size: 16px;
  }

  .process-features {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .cta-content h3 {
    font-size: 28px;
  }

  .cta-button {
    padding: 16px 32px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .process-section {
    padding: 80px 0;
  }

  .process-title {
    font-size: 28px;
  }

  .process-subtitle {
    font-size: 16px;
  }

  .process-content {
    padding: 24px 20px;
  }

  .process-step-title {
    font-size: 24px;
  }

  .process-description {
    font-size: 15px;
  }

  .process-cta-section {
    padding: 60px 20px;
  }

  .cta-content h3 {
    font-size: 24px;
  }

  .cta-content p {
    font-size: 16px;
  }

  .cta-button {
    padding: 14px 28px;
    font-size: 15px;
  }
}

/* Process Background Matching Hero Section */
.process-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.process-background .background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center,
    rgba(99, 102, 241, 0.03) 0%,
    transparent 70%);
  pointer-events: none;
}

.process-background .gradient-spheres {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.process-background .gradient-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
  animation: float 20s infinite ease-in-out;
}

.process-background .sphere-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  top: -200px;
  left: -200px;
  animation-delay: 0s;
}

.process-background .sphere-2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
  bottom: -300px;
  right: -300px;
  animation-delay: 7s;
}

.process-background .sphere-3 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-delay: 14s;
}

.process-background .floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.process-background .particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: particleFloat 10s infinite ease-in-out;
}

.process-background .particle-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.process-background .particle-2 {
  top: 60%;
  left: 80%;
  animation-delay: 2s;
}

.process-background .particle-3 {
  top: 30%;
  left: 60%;
  animation-delay: 4s;
}

.process-background .particle-4 {
  top: 80%;
  left: 30%;
  animation-delay: 6s;
}

.process-background .particle-5 {
  top: 10%;
  left: 90%;
  animation-delay: 8s;
}

/* Premium Background with Subtle Dynamic Effects */
.premium-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(0, 153, 255, 0.06) 0%, transparent 60%),
    var(--secondary-background);
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
  will-change: transform;
}

/* Subtle Animated Gradient Overlay */
.premium-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(0, 212, 255, 0.02) 50%,
    transparent 70%
  );
  animation: gradientShift 20s ease-in-out infinite;
}

@keyframes gradientShift {
  0%, 100% {
    transform: translateX(0) translateY(0);
  }
  33% {
    transform: translateX(-30px) translateY(30px);
  }
  66% {
    transform: translateX(30px) translateY(-30px);
  }
}

.premium-container {
  position: relative;
  z-index: 2;
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Premium Header with Enterprise Scroll Effects */
.premium-header {
  text-align: center;
  margin-bottom: clamp(100px, 12vw, 150px);
  position: relative;
  opacity: 0;
  transform: translateY(80px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.premium-header.in-view {
  opacity: 1;
  transform: translateY(0);
}

.header-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  opacity: 0;
  transform: translateX(-50px);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.premium-header.in-view .header-indicator {
  opacity: 1;
  transform: translateX(0);
}

.indicator-line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  position: relative;
  overflow: hidden;
}

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

@keyframes lineShine {
  0% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}

.header-indicator span {
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--accent);
  position: relative;
}

.header-indicator span::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 1s ease 0.5s;
}

.premium-header.in-view .header-indicator span::after {
  width: 100%;
}

.premium-title {
  margin-bottom: var(--spacing-xl);
}

.title-main {
  display: block;
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  color: var(--primary-white);
  line-height: 1.05;
  margin-bottom: var(--spacing-lg);
  opacity: 0;
  transform: translateY(60px) scale(0.9);
  transition: all 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.5s;
  position: relative;
}

.premium-header.in-view .title-main {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.title-main::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 100px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
}

.premium-header.in-view .title-main::after {
  transform: translateX(-50%) scaleX(1);
}

.title-sub {
  display: block;
  font-size: clamp(1.4rem, 2.8vw, 1.8rem);
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(40px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
}

.premium-header.in-view .title-sub {
  opacity: 1;
  transform: translateY(0);
}

.premium-description {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  color: var(--text-secondary);
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(30px);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1) 1.1s;
}

.premium-header.in-view .premium-description {
  opacity: 1;
  transform: translateY(0);
}

/* Stick-Based Process Flow */
.process-flow {
  position: relative;
  height: clamp(600px, 70vh, 800px);
  margin: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.flow-background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.flow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
}

.flow-orb-1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  animation-delay: 0s;
}

.flow-orb-2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  animation-delay: 10s;
}

/* Hero-style background elements for stick-flow */
.stick-flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  z-index: 1;
}

.stick-flow-orb-1 {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: float 20s ease-in-out infinite;
  z-index: 1;
}

.stick-flow-orb-2 {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.2) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: float 25s ease-in-out infinite reverse;
  z-index: 1;
}

/* Central Stick/Trunk */
.process-timeline {
  position: relative;
  height: 85%;
  width: 8px;
  z-index: 10;
}

.timeline-line {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(99, 102, 241, 0.6) 20%,
    rgba(99, 102, 241, 0.9) 50%,
    rgba(168, 85, 247, 0.6) 80%,
    rgba(99, 102, 241, 0.3) 100%
  );
  border-radius: 3px;
  box-shadow:
    0 0 20px rgba(99, 102, 241, 0.4),
    inset 0 0 10px rgba(255, 255, 255, 0.1);
  animation: timelinePulse 3s ease-in-out infinite;
}

@keyframes timelinePulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(99, 102, 241, 0.4),
      inset 0 0 10px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow:
      0 0 40px rgba(99, 102, 241, 0.7),
      inset 0 0 15px rgba(255, 255, 255, 0.2);
  }
}

/* Timeline Nodes on Stick */
.stick-nodes {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 40px) 0;
}

.stick-timeline-node {
  position: relative;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 50%;
  margin-left: -6px;
  box-shadow:
    0 0 20px rgba(99, 102, 241, 0.6),
    0 0 40px rgba(99, 102, 241, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: scale(0);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 11;
}

.stick-timeline-node.active {
  opacity: 1;
  transform: scale(1);
  animation: nodePulse 2s ease-in-out infinite;
}

@keyframes nodePulse {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(99, 102, 241, 0.6),
      0 0 40px rgba(99, 102, 241, 0.3),
      inset 0 2px 4px rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      0 0 30px rgba(99, 102, 241, 0.9),
      0 0 60px rgba(99, 102, 241, 0.5),
      inset 0 2px 6px rgba(255, 255, 255, 0.4);
  }
}

/* Flip Cards Container */
.flip-cards-container {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 900px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0 20px;
  pointer-events: none;
  z-index: 5;
}

.left-cards,
.right-cards {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 380px;
  pointer-events: all;
  position: relative;
  gap: 20px;
}

.left-cards {
  align-items: flex-end;
  margin-right: 15px;
}

.right-cards {
  align-items: flex-start;
  margin-left: 15px;
}

/* Connection Lines from Stick to Cards */
.left-cards::before,
.right-cards::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(99, 102, 241, 0.2) 10%,
    rgba(99, 102, 241, 0.4) 50%,
    rgba(99, 102, 241, 0.2) 90%,
    transparent 100%
  );
  z-index: -1;
  opacity: 0.6;
  transition: opacity 0.8s ease;
}

.left-cards::before {
  right: -17px;
}

.right-cards::before {
  left: -17px;
}

.stick-flow .stick-timeline-node.active ~ .flip-cards-container .left-cards::before,
.stick-flow .stick-timeline-node.active ~ .flip-cards-container .right-cards::before {
  opacity: 1;
}

/* Responsive Styles for Stick Flow */
@media (max-width: 768px) {
  .stick-flow {
    height: clamp(800px, 120vh, 1000px);
    margin: 20px 0;
  }

  .central-stick {
    height: 90%;
  }

  .left-cards,
  .right-cards {
    width: 280px;
    gap: 15px;
  }

  .flip-card {
    width: 240px;
    height: 140px;
  }

  .card-left {
    transform: rotateY(-35deg) translateX(-8px);
  }

  .card-right {
    transform: rotateY(35deg) translateX(8px);
  }

  .card-left.flipped,
  .card-right.flipped {
    transform: rotateY(0deg) translateX(0);
  }

  .left-cards {
    margin-right: 10px;
  }

  .right-cards {
    margin-left: 10px;
  }

  .left-cards::before {
    right: -14px;
  }

  .right-cards::before {
    left: -14px;
  }
}

@media (max-width: 480px) {
  .stick-flow {
    height: clamp(900px, 140vh, 1200px);
  }

  .flip-cards-container {
    padding: 0 10px;
  }

  .left-cards,
  .right-cards {
    width: 220px;
    gap: 12px;
  }

  .flip-card {
    width: 200px;
    height: 120px;
  }

  .card-face {
    padding: 1rem;
  }

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

  .card-icon {
    width: 36px;
    height: 36px;
  }

  .card-face h4 {
    font-size: 0.9rem;
  }
}

/* Flip Cards */
.flip-card {
  width: 280px;
  height: 160px;
  position: relative;
  transform-style: preserve-3d;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform-origin: center center;
  pointer-events: all;
}

.card-left {
  transform: rotateY(-45deg) translateX(-10px);
  transform-origin: right center;
}

.card-right {
  transform: rotateY(45deg) translateX(10px);
  transform-origin: left center;
}

.flip-card.flipped {
  opacity: 1;
}

.card-left.flipped {
  transform: rotateY(0deg) translateX(0);
}

.card-right.flipped {
  transform: rotateY(0deg) translateX(0);
}

/* Card Faces */
.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-lg);
  transition: all 0.4s ease;
}

.card-front {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.1) 0%,
    rgba(168, 85, 247, 0.1) 50%,
    rgba(0, 0, 0, 0.4) 100%
  );
  border: 2px solid rgba(99, 102, 241, 0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  position: relative;
}

.card-front::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.05) 0%,
    transparent 50%,
    rgba(168, 85, 247, 0.05) 100%
  );
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-front:hover::before {
  opacity: 1;
}

.card-back {
  background: linear-gradient(135deg,
    rgba(99, 102, 241, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  border: 2px solid rgba(99, 102, 241, 0.6);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transform: rotateY(180deg);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Card Front Content */
.card-number {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--accent);
  margin-bottom: var(--spacing-sm);
  position: absolute;
  top: var(--spacing-md);
  left: var(--spacing-md);
}

.card-icon {
  width: 48px;
  height: 48px;
  color: var(--accent);
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 2;
}

.card-icon svg {
  width: 100%;
  height: 100%;
}

.card-front h4 {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-white);
  margin: 0;
  position: relative;
  z-index: 2;
}

/* Card Back Content */
.card-back h4 {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 700;
  color: var(--primary-white);
  margin-bottom: var(--spacing-md);
  text-align: center;
}

.card-back p {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
  text-align: center;
}

.card-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  justify-content: center;
}

.feature {
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.feature:hover {
  background: rgba(0, 212, 255, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Hover Effects */
.flip-card:hover .card-front {
  border-color: rgba(0, 212, 255, 0.5);
  transform: translateZ(10px);
}

.flip-card:hover .card-back {
  border-color: rgba(0, 212, 255, 0.6);
  transform: rotateY(180deg) translateZ(10px);
}

.flip-card:hover .card-icon {
  transform: scale(1.1);
  color: rgba(255, 255, 255, 1);
}

/* Flip Button Indicator */
.flip-indicator {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.card-front .flip-indicator {
  color: var(--accent);
}

.card-back .flip-indicator {
  color: var(--text-secondary);
}

.flip-card:hover .flip-indicator {
  opacity: 0.6;
}

.flip-indicator svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Active States */
.flip-card.active-left {
  transform: rotateY(0deg) translateX(-50%) scale(1.05);
  opacity: 1;
}

.flip-card.active-right {
  transform: rotateY(0deg) translateX(50%) scale(1.05);
  opacity: 1;
}

/* Connection Lines */
.card-connection {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: all 0.6s ease;
}

.card-left .card-connection {
  right: 100%;
  transform: translateY(-50%);
}

.card-right .card-connection {
  left: 100%;
  transform: translateY(-50%);
}

.flip-card.flipped .card-connection {
  opacity: 0.6;
}

.flip-card:hover .card-connection {
  opacity: 1;
}

.hub-core {
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 212, 255, 0.4);
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  backdrop-filter: blur(15px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: hubPulse 8s ease-in-out infinite;
}

.hub-core::before {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  animation: hubRotate 20s linear infinite;
}

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

@keyframes hubPulse {
  0%, 100% {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-color: rgba(0, 212, 255, 0.4);
    transform: scale(1);
  }
  25% {
    box-shadow: 0 25px 50px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.6);
    transform: scale(1.02);
  }
  50% {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 212, 255, 0.5);
    transform: scale(1);
  }
  75% {
    box-shadow: 0 25px 50px rgba(0, 212, 255, 0.2);
    border-color: rgba(0, 212, 255, 0.6);
    transform: scale(1.02);
  }
}

.hub-icon {
  width: 35px;
  height: 35px;
  color: var(--accent);
  margin-bottom: var(--spacing-sm);
}

.hub-text {
  text-align: center;
  line-height: 1.2;
}

.hub-text span {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Process Nodes Grid */
.process-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(40px, 6vw, 60px);
  position: relative;
  z-index: 5;
}

.process-node {
  opacity: 0;
  transform: translateY(100px) scale(0.8) rotateX(-10deg);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
  perspective: 1000px;
}

.process-node.in-view {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
}

.process-node:nth-child(1) {
  transition-delay: 0.2s;
  transform-origin: center bottom;
}
.process-node:nth-child(2) {
  transition-delay: 0.4s;
  transform-origin: center bottom;
}
.process-node:nth-child(3) {
  transition-delay: 0.6s;
  transform-origin: center bottom;
}
.process-node:nth-child(4) {
  transition-delay: 0.8s;
  transform-origin: center bottom;
}
.process-node:nth-child(5) {
  transition-delay: 1s;
  transform-origin: center bottom;
}

.node-card {
  position: relative;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(15px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  height: 100%;
  transform-style: preserve-3d;
}

.node-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.6s ease 0.3s;
}

.process-node.in-view .node-card::before {
  opacity: 0.6;
}

.node-card:hover {
  transform: translateY(-8px) rotateX(5deg);
  border-color: rgba(0, 212, 255, 0.5);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.node-glow {
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 60%);
  opacity: 0;
  transition: all 0.8s ease;
  pointer-events: none;
  filter: blur(20px);
}

.node-card:hover .node-glow {
  opacity: 1;
  top: -150%;
  left: -150%;
}

.node-inner {
  padding: var(--spacing-xl);
  position: relative;
  z-index: 2;
}

.node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.node-visual {
  position: relative;
  width: 70px;
  height: 70px;
}

.visual-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(0, 212, 255, 0.3);
  border-radius: 50%;
  animation: visualPulse 6s ease-in-out infinite;
  transform-origin: center;
}

.visual-ring::before {
  content: '';
  position: absolute;
  top: -6px;
  left: -6px;
  right: -6px;
  bottom: -6px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 50%;
  animation: visualRotate 15s linear infinite reverse;
}

@keyframes visualPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
    border-color: rgba(0, 212, 255, 0.3);
  }
  25% {
    transform: scale(1.1);
    opacity: 0.5;
    border-color: rgba(0, 212, 255, 0.5);
  }
  50% {
    transform: scale(1.05);
    opacity: 0.4;
    border-color: rgba(0, 212, 255, 0.4);
  }
  75% {
    transform: scale(1.15);
    opacity: 0.6;
    border-color: rgba(0, 212, 255, 0.6);
  }
}

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

.visual-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  color: var(--accent);
  opacity: 0;
  animation: iconFadeIn 1s ease-out 0.8s forwards;
  transition: all 0.4s ease;
}

.process-node.in-view .visual-icon {
  opacity: 1;
}

.node-card:hover .visual-icon {
  transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
  color: rgba(255, 255, 255, 1);
}

.node-number {
  font-size: var(--font-size-xl);
  font-weight: 900;
  color: var(--accent);
  opacity: 0;
  animation: numberSlideIn 1s ease-out 1s forwards;
  transform: translateY(20px);
}

.process-node.in-view .node-number {
  opacity: 1;
  transform: translateY(0);
}

@keyframes iconFadeIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

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

.node-title {
  font-size: clamp(1.2rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--primary-white);
  margin-bottom: var(--spacing-md);
  line-height: 1.3;
}

.node-description {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.node-attributes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-lg);
}

.attribute {
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  border: 1px solid rgba(0, 212, 255, 0.2);
  transition: all 0.3s ease;
}

.attribute:hover {
  background: rgba(0, 212, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.2);
}

.node-progress {
  margin-top: auto;
}

.progress-bg {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(0, 153, 255, 0.8) 100%);
  border-radius: 2px;
  width: 0;
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.3);
}

.process-node.in-view .progress-fill {
  width: 100%;
}

/* Connection SVG */
.connection-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.3;
}

/* Premium Results */
.premium-results {
  text-align: center;
  position: relative;
  z-index: 5;
}

/* Success Metrics Section */
.success-metrics {
  margin-top: 80px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.metrics-container {
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

.metrics-title {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metrics-subtitle {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  margin-bottom: 3rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.success-metrics .metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

.success-metrics .metric-card {
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.success-metrics .metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--gradient-1);
  opacity: 0;
  transition: opacity var(--transition-normal);
  z-index: -1;
}

.success-metrics .metric-card:hover {
  transform: translateY(-10px);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-xl), var(--shadow-glow-primary);
}

.success-metrics .metric-card:hover::before {
  opacity: 0.05;
}

.success-metrics .metric-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  background: var(--gradient-1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
}

.success-metrics .metric-icon svg {
  width: 24px;
  height: 24px;
  color: white;
}

.success-metrics .metric-value {
  font-size: clamp(2.5rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  background: var(--gradient-1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.success-metrics .metric-label {
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

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

.results-title {
  font-size: clamp(1.8rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--primary-white);
  margin-bottom: clamp(40px, 6vw, 60px);
  text-align: center;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.metric-card {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 16px;
  padding: var(--spacing-lg);
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(30px);
  animation: metricAppear 1s ease-out forwards;
}

.metric-card:nth-child(1) { animation-delay: 0.1s; }
.metric-card:nth-child(2) { animation-delay: 0.2s; }
.metric-card:nth-child(3) { animation-delay: 0.3s; }

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

.metric-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.metric-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--spacing-md);
  color: var(--accent);
}

.metric-value {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  color: var(--accent);
  margin-bottom: var(--spacing-sm);
}

.metric-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Animated Tree Background */
.tree-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.tree-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #00d4ff, #0099ff);
  border-radius: 50%;
  opacity: 0;
  animation: particleFloat 8s infinite ease-in-out;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.particle-1 { top: 20%; left: 10%; animation-delay: 0s; }
.particle-2 { top: 30%; right: 15%; animation-delay: 1s; }
.particle-3 { top: 50%; left: 5%; animation-delay: 2s; }
.particle-4 { top: 60%; right: 10%; animation-delay: 3s; }
.particle-5 { top: 70%; left: 20%; animation-delay: 4s; }
.particle-6 { top: 80%; right: 5%; animation-delay: 5s; }
.particle-7 { top: 40%; left: 50%; animation-delay: 6s; }
.particle-8 { top: 90%; right: 25%; animation-delay: 7s; }

@keyframes particleFloat {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
  20%, 80% {
    opacity: 0.6;
    transform: translateY(-20px) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateY(-40px) scale(1.2);
  }
}

.tree-connections {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.tree-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.enterprise-container {
  max-width: var(--container-large);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

.enterprise-header {
  text-align: center;
  margin-bottom: clamp(60px, 8vw, 120px);
  position: relative;
}

.header-decoration {
  margin-bottom: var(--spacing-lg);
}

.line-decoration {
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 20%,
    var(--accent) 80%,
    transparent 100%);
  width: 200px;
  margin: 0 auto;
  animation: linePulse 3s infinite ease-in-out;
}

@keyframes linePulse {
  0%, 100% { opacity: 0.3; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

.enterprise-title {
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 900;
  color: var(--primary-white);
  line-height: 1.1;
  margin-bottom: var(--spacing-lg);
  text-transform: uppercase;
  letter-spacing: 2px;
  background: linear-gradient(135deg,
    var(--primary-white) 0%,
    var(--accent) 50%,
    var(--primary-white) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: titleShimmer 4s infinite ease-in-out;
}

@keyframes titleShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.enterprise-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--text-secondary);
  max-width: 800px;
  margin: 0 auto var(--spacing-xl);
  line-height: 1.6;
  font-weight: 300;
}

.header-accent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

.accent-dot {
  width: 12px;
  height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
  animation: dotPulse 2s infinite ease-in-out;
}

.accent-dot:nth-child(2) {
  animation-delay: 0.5s;
}

.accent-line {
  width: 100px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

@keyframes dotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 30px rgba(0, 212, 255, 1);
  }
}

/* Enterprise Tree Structure */
.enterprise-tree {
  position: relative;
  padding: var(--spacing-xl) 0;
}

.tree-root {
  text-align: center;
  margin-bottom: clamp(80px, 12vw, 150px);
  position: relative;
}

.root-node {
  display: inline-block;
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.15) 0%,
    rgba(0, 102, 204, 0.1) 100%);
  border: 2px solid var(--accent);
  border-radius: 30px;
  padding: var(--spacing-xl);
  position: relative;
  box-shadow:
    0 20px 60px rgba(0, 212, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-root.in-view .root-node {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.root-content {
  text-align: center;
}

.root-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  box-shadow:
    0 15px 35px rgba(0, 212, 255, 0.4),
    0 0 0 4px rgba(0, 212, 255, 0.2);
  animation: rootIconPulse 3s infinite ease-in-out;
}

@keyframes rootIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 15px 35px rgba(0, 212, 255, 0.4),
      0 0 0 4px rgba(0, 212, 255, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 20px 45px rgba(0, 212, 255, 0.6),
      0 0 0 8px rgba(0, 212, 255, 0.3);
  }
}

.root-icon i {
  font-size: 2rem;
  color: var(--primary-white);
}

.root-node h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--primary-white);
  margin-bottom: var(--spacing-sm);
  text-transform: uppercase;
  letter-spacing: 1px;
}

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

/* Tree Branches */
.tree-branches {
  display: flex;
  flex-direction: column;
  gap: clamp(60px, 8vw, 100px);
  position: relative;
}

.tree-branch {
  opacity: 0;
  transform: translateX(-100px) rotateY(-15deg);
  transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tree-branch.branch-right {
  transform: translateX(100px) rotateY(15deg);
}

.tree-branch.branch-center {
  transform: translateY(50px) scale(0.9);
}

.tree-branch.in-view {
  opacity: 1;
  transform: translateX(0) rotateY(0) translateY(0) scale(1);
}

.branch-left {
  align-self: flex-start;
  margin-right: auto;
  max-width: 90%;
}

.branch-right {
  align-self: flex-end;
  margin-left: auto;
  max-width: 90%;
  text-align: right;
}

.branch-center {
  align-self: center;
  max-width: 700px;
  text-align: center;
}

.branch-node {
  position: relative;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.03) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 25px;
  padding: var(--spacing-xl);
  backdrop-filter: blur(15px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.branch-node::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
    transparent,
    rgba(0, 212, 255, 0.2),
    transparent);
  transition: left 0.8s ease;
}

.branch-node:hover::before {
  left: 100%;
}

.branch-node:hover {
  transform: translateY(-10px);
  box-shadow:
    0 30px 60px rgba(0, 212, 255, 0.2),
    0 0 0 2px rgba(0, 212, 255, 0.4);
  border-color: var(--accent);
}

.node-connector {
  position: absolute;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  opacity: 0;
  animation: connectorGrow 1s ease-out forwards;
  animation-delay: 0.5s;
}

.branch-right .node-connector {
  left: auto;
  right: 50%;
  transform: translateX(50%);
}

.branch-center .node-connector {
  left: 50%;
  transform: translateX(-50%);
}

@keyframes connectorGrow {
  from {
    height: 0;
    opacity: 0;
  }
  to {
    height: 50px;
    opacity: 0.6;
  }
}

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

.node-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.branch-right .node-header {
  justify-content: flex-end;
}

.node-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 10px 25px rgba(0, 212, 255, 0.3),
    0 0 0 3px rgba(0, 212, 255, 0.2);
  transition: all 0.4s ease;
}

.branch-node:hover .node-icon {
  transform: scale(1.1) rotate(5deg);
  box-shadow:
    0 15px 35px rgba(0, 212, 255, 0.5),
    0 0 0 6px rgba(0, 212, 255, 0.3);
}

.node-icon i {
  font-size: 1.5rem;
  color: var(--primary-white);
}

.node-number {
  width: 40px;
  height: 40px;
  background: rgba(0, 212, 255, 0.2);
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-lg);
  font-weight: 800;
  color: var(--accent);
  box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
}

.branch-node h4 {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--primary-white);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.branch-node p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.node-features {
  display: flex;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
  margin-bottom: var(--spacing-lg);
}

.branch-right .node-features {
  justify-content: flex-end;
}

.feature-tag {
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.2) 0%,
    rgba(0, 102, 204, 0.15) 100%);
  color: var(--accent);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: 20px;
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(0, 212, 255, 0.3);
  transition: all 0.3s ease;
}

.feature-tag:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #0066cc 100%);
  color: var(--primary-white);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.node-progress {
  margin-top: var(--spacing-lg);
}

.progress-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, #0066cc 100%);
  border-radius: 3px;
  width: 0;
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.tree-branch.in-view .progress-fill {
  width: 100%;
}

/* Tree Results */
.tree-results {
  text-align: center;
  margin-top: clamp(80px, 12vw, 150px);
  position: relative;
}

.result-node {
  background: linear-gradient(135deg,
    rgba(0, 212, 255, 0.1) 0%,
    rgba(0, 153, 255, 0.05) 100%);
  border: 2px solid var(--accent);
  border-radius: 30px;
  padding: var(--spacing-xl);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    0 25px 50px rgba(0, 212, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tree-results.in-view .result-node {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.result-content {
  text-align: center;
}

.result-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--spacing-lg);
  box-shadow:
    0 15px 35px rgba(255, 215, 0, 0.4),
    0 0 0 4px rgba(255, 215, 0, 0.2);
  animation: resultIconPulse 3s infinite ease-in-out;
}

@keyframes resultIconPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 15px 35px rgba(255, 215, 0, 0.4),
      0 0 0 4px rgba(255, 215, 0, 0.2);
  }
  50% {
    transform: scale(1.05);
    box-shadow:
      0 20px 45px rgba(255, 215, 0, 0.6),
      0 0 0 8px rgba(255, 215, 0, 0.3);
  }
}

.result-icon i {
  font-size: 2rem;
  color: var(--primary-white);
}

.result-node h4 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--primary-white);
  margin-bottom: var(--spacing-md);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.result-node p {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-xl);
  line-height: 1.6;
}

.result-metrics {
  display: flex;
  justify-content: center;
  gap: var(--spacing-xl);
  flex-wrap: wrap;
}

.metric {
  text-align: center;
  flex: 1;
  min-width: 100px;
}

.metric-number {
  display: block;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 900;
  color: var(--accent);
  margin-bottom: var(--spacing-xs);
  text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.metric-label {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.process-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.process-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

/* Process Timeline */
.process-timeline {
    position: relative;
    padding: 2rem 0;
}

.process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4rem;
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Process Number */
.process-number {
    flex: 0 0 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.2) 100%);
    border: 2px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .process-number {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0.4) 100%);
    border-color: rgba(99, 102, 241, 0.6);
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
}

.step-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    letter-spacing: 1px;
}

.step-indicator {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    background: rgba(99, 102, 241, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, 0.3);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-indicator::after {
    content: '✓';
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
}

.process-step.completed .step-indicator {
    opacity: 1;
    transform: scale(1);
}

/* Process Content */
.process-content {
    flex: 1;
    padding-left: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.process-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #6366f1, #8b5cf6);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.process-step:hover .process-content {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(99, 102, 241, 0.3);
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.process-step:hover .process-content::before {
    opacity: 1;
}

/* Process Icon */
.process-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .process-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
}

/* Process Title */
.process-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

/* Process Description */
.process-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Process Tags */
.process-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.process-tag {
    background: rgba(99, 102, 241, 0.2);
    color: rgba(255, 255, 255, 0.9);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.process-tag:hover {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-2px);
}

/* Process Progress Line */
.process-progress-line {
    position: absolute;
    left: 40px;
    top: 80px;
    bottom: 80px;
    width: 2px;
    background: linear-gradient(to bottom,
        rgba(99, 102, 241, 0.3) 0%,
        rgba(99, 102, 241, 0.5) 50%,
        rgba(99, 102, 241, 0.3) 100%
    );
    z-index: -1;
}

/* YouTube-Style Portfolio Carousel - Match Hero Video Preview Exactly */
.portfolio-carousel-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Section Header for Portfolio */
.portfolio-section .section-header {
    max-width: 900px;
    margin: 0 auto var(--spacing-xl) auto;
    padding: 0 var(--spacing-lg);
}

/* Portfolio Filters */
.portfolio-filters {
    max-width: 900px;
    margin: 3rem auto 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Featured Video Section */
.portfolio-featured {
    margin-bottom: 3rem;
}

.featured-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.featured-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%);
    padding: 2rem;
    display: flex;
    align-items: flex-end;
    gap: 1.5rem;
    transition: opacity 0.3s ease-in-out;
}

.featured-play-btn {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.featured-play-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.1);
}

/* Volume Controls */
.featured-volume-controls {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.volume-btn {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.volume-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.volume-slider-container {
    position: relative;
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease, opacity 0.3s ease;
    opacity: 0;
}

.volume-slider-container:hover,
.volume-slider-container.active {
    width: 80px;
    opacity: 1;
}

.featured-volume-controls:hover .volume-slider-container {
    width: 80px;
    opacity: 1;
}

/* Volume level indicator */
.volume-slider-container::after {
    content: attr(data-volume) "%";
    position: absolute;
    top: -25px;
    right: 0;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.volume-slider-container:hover::after {
    opacity: 1;
}

.volume-slider {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    margin: 0 8px;
}

.volume-track {
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.volume-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ff0000;
    border-radius: 2px;
    transition: width 0.1s ease;
    width: 50%; /* Initial volume */
}

.volume-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.volume-handle:hover {
    transform: translate(-50%, -50%) scale(1.2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.volume-slider:hover .volume-handle {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Volume states */
.volume-btn.muted .fa-volume-up::before {
    content: "\f6a6"; /* volume-mute icon */
}

.volume-btn.low .fa-volume-up::before {
    content: "\f027"; /* volume-down icon */
}

.volume-btn.medium .fa-volume-up,
.volume-btn.high .fa-volume-up {
    /* Keep volume-up icon */
}

.featured-info {
    flex: 1;
}

.featured-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.featured-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
}

.featured-views::before {
    content: "•";
    margin-right: 0.5rem;
}

.featured-date::before {
    content: "•";
    margin-right: 0.5rem;
}

.featured-duration {
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Video Playlist Section */
.video-playlist-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.playlist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.playlist-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin: 0;
}

.playlist-controls {
    display: flex;
    gap: 0.5rem;
}

.playlist-nav-btn {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.playlist-nav-btn:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.5);
}

.playlist-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.video-playlist-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.video-playlist-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.video-item {
    flex: 0 0 calc(25% - 12px);
    margin-right: 16px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-color: rgba(99, 102, 241, 0.3);
}

.video-item.active {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2);
}

.video-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #000;
}

.thumbnail-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.thumbnail-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0.5rem;
}

.thumbnail-duration {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    font-weight: 500;
}

.video-info {
    padding: 1rem;
}

.video-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.3rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.video-channel {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.video-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.video-views::after {
    content: "•";
    margin-left: 0.5rem;
}

/* Process Section Responsive Design */
@media (max-width: 1024px) {
    .process-container {
        max-width: 700px;
        padding: 0 2rem;
    }

    .process-header {
        max-width: 700px;
        padding: 0 2rem;
    }

    .process-step {
        margin-bottom: 3rem;
    }

    .process-number {
        flex: 0 0 70px;
        height: 70px;
    }

    .step-number {
        font-size: 1.3rem;
    }

    .process-content {
        padding-left: 1.5rem;
        padding: 1.5rem;
    }

    .process-title {
        font-size: 1.3rem;
    }

    .process-description {
        font-size: 0.95rem;
    }

    .process-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
    }

    .process-progress-line {
        left: 35px;
        top: 70px;
        bottom: 70px;
    }

    .portfolio-carousel-container {
        max-width: 700px;
        padding: 0 2rem;
    }

    .portfolio-section .section-header {
        max-width: 700px;
        padding: 0 2rem;
    }

    .portfolio-filters {
        max-width: 700px;
        padding: 0 2rem;
    }

    .video-item {
        flex: 0 0 calc(33.333% - 11px);
    }
}

@media (max-width: 768px) {
    .process-container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .process-header {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .process-step {
        margin-bottom: 2.5rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .process-number {
        flex: none;
        margin-bottom: 1.5rem;
    }

    .step-number {
        font-size: 1.2rem;
    }

    .process-content {
        padding-left: 0;
        padding: 1.5rem;
        text-align: center;
    }

    .process-title {
        font-size: 1.2rem;
    }

    .process-description {
        font-size: 0.9rem;
        margin-bottom: 1rem;
    }

    .process-icon {
        width: 45px;
        height: 45px;
        font-size: 1.2rem;
        margin: 0 auto 1.2rem auto;
    }

    .process-tags {
        justify-content: center;
    }

    .process-progress-line {
        display: none; /* Hide vertical line on mobile */
    }

    .portfolio-carousel-container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .portfolio-section .section-header {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .portfolio-filters {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .featured-overlay {
        padding: 1.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .featured-play-btn {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }

    .featured-volume-controls {
        bottom: 1.5rem;
        right: 1.5rem;
    }

    .volume-btn {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .volume-slider-container.active {
        width: 70px;
    }

    .featured-volume-controls:hover .volume-slider-container {
        width: 70px;
    }

    .featured-title {
        font-size: 1.3rem;
    }

    .video-item {
        flex: 0 0 calc(50% - 6px);
        margin-right: 12px;
    }

    .video-info {
        padding: 0.75rem;
    }

    .video-title {
        font-size: 0.85rem;
    }

    .video-channel {
        font-size: 0.8rem;
    }

    .playlist-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .process-section {
        padding: 3rem 0;
    }

    .process-container {
        padding: 0 var(--spacing-md);
    }

    .process-header {
        padding: 0 var(--spacing-md);
        margin-bottom: 3rem;
    }

    .process-step {
        margin-bottom: 2rem;
    }

    .process-number {
        width: 60px;
        height: 60px;
        margin-bottom: 1.2rem;
    }

    .step-number {
        font-size: 1.1rem;
    }

    .process-content {
        padding: 1.2rem;
    }

    .process-title {
        font-size: 1.1rem;
    }

    .process-description {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .process-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 1rem;
    }

    .process-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.8rem;
    }

    .portfolio-carousel-container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .portfolio-section .section-header {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .portfolio-filters {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .video-item {
        flex: 0 0 70vw; /* Smaller size to allow multiple items visible */
        margin-right: 12px;
        max-width: 280px; /* Smaller cap for mobile */
        min-width: 240px; /* Smaller minimum width */
    }

    /* Keep horizontal layout for navigation compatibility */
    .video-playlist-track {
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /* Ensure proper scrolling behavior */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    }

    /* Hide scrollbar for Chrome/Safari */
    .video-playlist-track::-webkit-scrollbar {
        display: none;
    }

    .video-item {
        scroll-snap-align: start;
        margin-bottom: 0;
        margin-right: 8px;
        /* Ensure items don't shrink */
        min-width: 0;
        flex-shrink: 0;
    }

    /* Ensure container allows horizontal scrolling */
    .video-playlist-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Ensure container doesn't hide content */
        position: relative;
        width: 100%;
    }

    /* Ensure track has proper width for all items */
    .video-playlist-track {
        position: relative;
        display: flex;
        width: auto; /* Let content determine width */
        /* Calculate width based on number of items */
        width: calc(6 * (70vw + 12px)); /* 6 items * (item width + margin) */
        min-width: 100%; /* At least container width */
    }

    /* Ensure container properly contains the track */
    .video-playlist-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: relative;
        width: 100%;
        /* Hide scrollbar but allow scrolling */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .video-playlist-container::-webkit-scrollbar {
        display: none;
    }

    .featured-title {
        font-size: 1.1rem;
    }

    .featured-description {
        font-size: 0.85rem;
    }

    .featured-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: 0.8rem;
    }
}

/* Portfolio Filters */
.portfolio-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3rem;
    flex-wrap: wrap;
    padding: 0 var(--spacing-lg);
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.filter-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: rgba(99, 102, 241, 0.9);
    border-color: rgba(99, 102, 241, 1);
    color: white;
}

/* Responsive Portfolio Grid */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 var(--spacing-md);
    }

    .portfolio-info {
        padding: 1.25rem;
    }

    .portfolio-title {
        font-size: 1.1rem;
    }

    .portfolio-description {
        font-size: 0.85rem;
    }

    .portfolio-filters {
        gap: 0.75rem;
        margin-top: 2rem;
    }

    .filter-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.85rem;
    }
}

.indicator:hover {
    background: rgba(99, 102, 241, 0.6);
    border-color: rgba(99, 102, 241, 0.8);
}

/* YouTube Section */
.youtube-section {
    padding: clamp(3rem, 4vw, 4rem) 0;
    background: transparent;
    position: relative;
    overflow: hidden;
}

/* YouTube Section Container - Match Portfolio Width */
.youtube-section .section-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.youtube-section .section-header {
    text-align: center;
    margin-bottom: clamp(3rem, 6vw, 4rem);
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--spacing-lg);
}

.youtube-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

.youtube-video-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    aspect-ratio: 16/9;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.youtube-video-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.youtube-video-link:hover {
    transform: translateY(-4px);
}

.youtube-video-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3);
    border-color: rgba(99, 102, 241, 0.4);
}

.youtube-thumbnail {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

.youtube-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.95);
}

.youtube-video-item:hover .youtube-thumbnail-img {
    transform: scale(1.08);
    filter: brightness(1);
}

.youtube-thumbnail-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.1) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.7) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.youtube-video-item:hover .youtube-thumbnail-overlay {
    opacity: 1;
}

.youtube-play-button {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.8rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: scale(0.7);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.youtube-video-item:hover .youtube-play-button {
    transform: scale(1);
    box-shadow: 0 12px 35px rgba(255, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.4);
}

.youtube-play-button:hover {
    transform: scale(1.15);
    box-shadow: 0 15px 45px rgba(255, 0, 0, 0.6);
    background: linear-gradient(135deg, #ff0000 0%, #990000 100%);
}

.youtube-duration {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    letter-spacing: 0.5px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.youtube-video-item:hover .youtube-duration {
    opacity: 1;
    transform: translateY(0);
}



/* YouTube CTA */
.youtube-cta {
    text-align: center;
    margin-top: 3rem;
}

.youtube-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: white;
    padding: 1rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 0, 0, 0.3);
}

.youtube-subscribe-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(255, 0, 0, 0.4);
    background: linear-gradient(135deg, #cc0000, #990000);
}

.youtube-subscribe-btn i {
    font-size: 1.2rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .portfolio-carousel {
        padding: 0 var(--spacing-md);
    }

    .carousel-nav {
        padding: 0 0.5rem;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .portfolio-info h4 {
        font-size: 1.25rem;
    }

    }

/* YouTube Section Responsive - Match Portfolio Exactly */
@media (max-width: 1024px) {
    .youtube-section .section-container {
        max-width: 700px;
        padding: 0 2rem;
    }

    .youtube-section .section-header {
        max-width: 700px;
        padding: 0 2rem;
    }

    .youtube-grid {
        max-width: 700px;
        padding: 0 2rem;
        grid-template-columns: repeat(2, 1fr);
    }

    .youtube-play-button {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        border-width: 2px;
    }

    .youtube-duration {
        font-size: 0.85rem;
        padding: 0.4rem 0.7rem;
        bottom: 0.8rem;
        right: 0.8rem;
    }
}

@media (max-width: 768px) {
    .youtube-section .section-container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .youtube-section .section-header {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .youtube-grid {
        max-width: 100%;
        padding: 0 var(--spacing-md);
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .youtube-play-button {
        width: 55px;
        height: 55px;
        font-size: 1.4rem;
        border-width: 2px;
    }
}

@media (max-width: 480px) {
    .youtube-section .section-container {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .youtube-section .section-header {
        max-width: 100%;
        padding: 0 var(--spacing-md);
    }

    .youtube-grid {
        max-width: 100%;
        padding: 0 var(--spacing-md);
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .youtube-play-button {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
        border-width: 2px;
    }

    .youtube-duration {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
        bottom: 0.6rem;
        right: 0.6rem;
    }
}

/* Print styles for policy pages */
@media print {
    .privacy-hero, .terms-hero, .cookie-hero {
        padding: 2rem 0;
        background: none;
    }
    
    .hero-background, .gradient-overlay {
        display: none;
    }
    
    .table-of-contents {
        display: none;
    }
    
    .policy-container, .terms-container, .cookie-container {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .privacy-main, .terms-main, .cookie-main {
        box-shadow: none;
        border: none;
        padding: 0;
    }
    
    .back-to-top {
        display: none;
    }
    
    footer {
        display: none;
    }
    
    .contact-info {
        page-break-inside: avoid;
    }
}

/* Simplified Policy Pages Layout (No Table of Contents) */
.policy-container {
    max-width: 900px;
    margin: 0 auto;
    display: block;
}

.policy-main {
    width: 100%;
    background: var(--bg-card);
    border-radius: 1rem;
    padding: 3rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
}

/* Responsive design for simplified layout */
@media (max-width: 1200px) {
    .policy-container {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .policy-main {
        padding: 2.5rem;
    }
}

@media (max-width: 768px) {
    .policy-container {
        padding: 0 1rem;
    }
    
    .policy-main {
        padding: 1.5rem;
        border-radius: 0.75rem;
    }
    
    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 2rem;
        line-height: 1.2;
    }
    
    .privacy-hero p, .terms-hero p, .cookie-hero p {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .privacy-section, .terms-section, .cookie-section {
        margin-bottom: 2rem;
    }
    
    .privacy-section h2, .terms-section h2, .cookie-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .privacy-section h3, .terms-section h3, .cookie-section h3 {
        font-size: 1.25rem;
        margin: 1.5rem 0 0.75rem;
    }
    
    .section-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .contact-info {
        padding: 1.5rem;
    }
    
    .contact-item {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }
    
    .contact-item i {
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 480px) {
    .privacy-hero, .terms-hero, .cookie-hero {
        padding: 60px 0 30px;
        min-height: 35vh;
    }
    
    .privacy-hero h1, .terms-hero h1, .cookie-hero h1 {
        font-size: 1.75rem;
    }
    
    .privacy-content, .terms-content, .cookie-content {
        padding: 40px 0;
    }
    
    .container {
        padding: 0 0.75rem;
    }
    
    .policy-main {
        padding: 1rem;
    }
    
    .privacy-section, .terms-section, .cookie-section {
        margin-bottom: 1.5rem;
    }
    
    .privacy-section h2, .terms-section h2, .cookie-section h2 {
        font-size: 1.25rem;
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .privacy-section h2::before, .terms-section h2::before, .cookie-section h2::before {
        width: 3px;
        height: 24px;
        flex-shrink: 0;
        margin-top: 0.25rem;
    }
    
    .last-updated {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .back-to-top {
        bottom: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Cookie Policy specific adjustments */
.cookie-types-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

@media (max-width: 768px) {
    .cookie-types-visual {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .cookie-types-visual {
        grid-template-columns: 1fr;
    }

    /* About section text centering for small mobile */
    .about-text {
        text-align: center !important;
    }

    .about-text h3 {
        text-align: center !important;
        font-size: 1.3rem;
    }

    .about-text p {
        text-align: center !important;
        font-size: 1rem;
        line-height: 1.6;
    }
}

/* Enhanced spacing and typography */
.privacy-section, .terms-section, .cookie-section {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
}

.privacy-section:last-child, .terms-section:last-child, .cookie-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.privacy-section h2, .terms-section h2, .cookie-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.privacy-section h2::before, .terms-section h2::before, .cookie-section h2::before {
    content: '';
    width: 4px;
    height: 30px;
    background: var(--gradient-1);
    border-radius: 2px;
}

.privacy-section h3, .terms-section h3, .cookie-section h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
    color: var(--text-primary);
}

.privacy-section h4, .terms-section h4, .cookie-section h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 1.5rem 0 0.75rem;
    color: var(--text-primary);
}

/* Smooth animations */
.policy-main {
    /* Removed animation to ensure content is visible immediately */
}

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

/* Remove old table of contents related styles that are no longer needed */
.table-of-contents {
    display: none !important;
}

.toc-nav {
    display: none !important;
}

.toc-link {
    display: none !important;
}

/* Print styles for simplified layout */
@media print {
    .policy-container {
        max-width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .policy-main {
        box-shadow: none;
        border: none;
        padding: 0;
    }
    
    .back-to-top {
        display: none;
    }
    
    footer {
        display: none;
    }

    .contact-info {
        page-break-inside: avoid;
    }

    .privacy-section, .terms-section, .cookie-section {
        page-break-inside: avoid;
    }
}

/* Turnstile CAPTCHA Styling */
.turnstile-container {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    overflow: hidden; /* Prevent overflow issues */
}

.turnstile-container:hover {
    border-color: var(--primary-color);
    box-shadow: 0 5px 20px rgba(99, 102, 241, 0.1);
}

.cf-turnstile {
    max-width: 300px;
    margin: 0 auto;
    transform-origin: center center; /* Ensure proper scaling */
}

/* Turnstile loading state */
.turnstile-loading .cf-turnstile {
    opacity: 0.6;
    pointer-events: none;
}

/* Turnstile error state */
.turnstile-error .cf-turnstile {
    border: 2px solid var(--error-color);
    border-radius: 8px;
}

/* Turnstile error message */
.turnstile-error-message {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error-color);
    color: var(--error-color);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.turnstile-error-message i {
    font-size: 1rem;
    flex-shrink: 0;
}

.turnstile-error-message:hover {
    background: rgba(239, 68, 68, 0.15);
    transform: translateY(-1px);
}

/* Mobile error message adjustments */
@media (max-width: 768px) {
    .turnstile-error-message {
        font-size: 0.813rem;
        padding: 10px 14px;
        gap: 8px;
    }

    .turnstile-error-message i {
        font-size: 0.875rem;
    }
}

/* Mobile-specific Turnstile fixes */
@media (max-width: 768px) {
    .turnstile-container {
        margin: 1.5rem 0;
        padding: 1rem;
        border-radius: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .cf-turnstile {
        max-width: 100%;
        width: 100% !important; /* Force full width on mobile */
        transform: scale(0.9); /* Slightly scale down for better fit */
        margin: 0 auto; /* Center the Turnstile widget */
        display: block; /* Ensure block-level for centering */
    }

    /* Contact form specific Turnstile centering */
    .contact-form .turnstile-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 1rem !important;
    }

    .contact-form .cf-turnstile {
        margin: 0 auto !important;
        display: block !important;
        transform-origin: center center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* Additional Turnstile iframe centering for contact form */
    .contact-form .cf-turnstile iframe {
        margin: 0 auto !important;
        display: block !important;
        transform-origin: center center !important;
    }
}

@media (max-width: 480px) {
    .turnstile-container {
        margin: 1rem 0;
        padding: 0.75rem;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .cf-turnstile {
        max-width: 100%;
        width: 100% !important;
        transform: scale(0.85); /* Scale down more for smaller screens */
        min-height: 65px; /* Ensure minimum height */
        margin: 0 auto;
        display: block;
        transform-origin: center center;
    }

    /* Contact form specific Turnstile centering for small mobile */
    .contact-form .turnstile-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0.5rem !important;
        width: 100% !important;
    }

    .contact-form .cf-turnstile {
        margin: 0 auto !important;
        display: block !important;
        transform-origin: center center !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* Enhanced iframe centering for small mobile contact forms */
    .contact-form .cf-turnstile iframe {
        margin: 0 auto !important;
        display: block !important;
        transform-origin: center center !important;
        max-width: 100% !important;
    }

    /* Handle Turnstile iframe on mobile */
    .cf-turnstile iframe {
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 8px;
    }

    /* Enhanced Turnstile widget centering for 480px mobile */
    .cf-turnstile,
    .cf-turnstile #content,
    .cf-turnstile #uMtSJ0 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Force Turnstile grid container to center */
    .cf-turnstile #uMtSJ0 {
        display: grid !important;
        place-items: center !important;
        justify-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Center Turnstile checkbox container */
    .cf-turnstile .cb-c {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Force center Turnstile checkbox and labels */
    .cf-turnstile label,
    .cf-turnstile .cb-lb {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .cf-turnstile .cb-lb-t {
        text-align: center !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* Override any default flex alignment */
    .cf-turnstile [style*="display: flex"] {
        justify-content: center !important;
        align-items: center !important;
    }

    .cf-turnstile [style*="display: grid"] {
        place-items: center !important;
        justify-items: center !important;
    }

    /* Center Turnstile verification states */
    .cf-turnstile #verifying,
    .cf-turnstile #success,
    .cf-turnstile #fail,
    .cf-turnstile #expired,
    .cf-turnstile #timeout {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Center Turnstile branding */
    .cf-turnstile #branding {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Universal mobile Turnstile centering for all contact forms */
    .contact-section .turnstile-container,
    .contact-card .turnstile-container,
    .form-group .turnstile-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    .contact-section .cf-turnstile,
    .contact-card .cf-turnstile,
    .form-group .cf-turnstile {
        margin: 0 auto !important;
        display: block !important;
        transform-origin: center center !important;
    }

    /* Enhanced Turnstile widget centering for mobile */
    .cf-turnstile,
    .cf-turnstile #content,
    .cf-turnstile #uMtSJ0 {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Force Turnstile grid container to center */
    .cf-turnstile #uMtSJ0 {
        display: grid !important;
        place-items: center !important;
        justify-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* Center Turnstile checkbox container */
    .cf-turnstile .cb-c {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    /* Force center Turnstile checkbox and labels */
    .cf-turnstile label,
    .cf-turnstile .cb-lb {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .cf-turnstile .cb-lb-t {
        text-align: center !important;
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* Override any default flex alignment */
    .cf-turnstile [style*="display: flex"] {
        justify-content: center !important;
        align-items: center !important;
    }

    .cf-turnstile [style*="display: grid"] {
        place-items: center !important;
        justify-items: center !important;
    }

    /* Center Turnstile verification states */
    .cf-turnstile #verifying,
    .cf-turnstile #success,
    .cf-turnstile #fail,
    .cf-turnstile #expired,
    .cf-turnstile #timeout {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Center Turnstile branding */
    .cf-turnstile #branding {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
    }

    /* Hide navbar contact button on mobile - it's already in mobile menu */
    .professional-header .cta-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Small mobile devices */
@media (max-width: 360px) {
    .cf-turnstile {
        transform: scale(0.75); /* Even smaller scale for very small screens */
        min-height: 60px;
    }

    /* Enhanced Turnstile widget centering for very small mobile */
    .cf-turnstile,
    .cf-turnstile #content,
    .cf-turnstile #uMtSJ0,
    .cf-turnstile .cb-c {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
        width: auto !important;
        max-width: 100% !important;
    }

    /* Center Turnstile checkbox and labels */
    .cf-turnstile label,
    .cf-turnstile .cb-lb,
    .cf-turnstile .cb-lb-t {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        font-size: 0.9rem;
    }

    /* Center Turnstile verification states */
    .cf-turnstile #verifying,
    .cf-turnstile #success,
    .cf-turnstile #fail,
    .cf-turnstile #expired,
    .cf-turnstile #timeout {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Center Turnstile branding */
    .cf-turnstile #branding {
        text-align: center !important;
        margin: 0 auto !important;
        display: block !important;
        font-size: 0.8rem;
    }

    /* Extra small mobile - ensure contact button is completely hidden */
    .professional-header .cta-button {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    /* About section text centering for very small mobile */
    .about-text {
        text-align: center !important;
        padding: 0 1rem;
    }

    .about-text h3 {
        text-align: center !important;
        font-size: 1.2rem;
        line-height: 1.4;
    }

    .about-text p {
        text-align: center !important;
        font-size: 0.95rem;
        line-height: 1.5;
    }
}

/* Prevent zoom issues on iOS */
@supports (-webkit-touch-callout: none) {
    .cf-turnstile {
        transform: scale(0.95);
        touch-action: manipulation; /* Prevent zoom on double-tap */
    }

    @media (max-width: 768px) {
        .cf-turnstile {
            transform: scale(0.85);
            touch-action: manipulation;
        }
    }

    @media (max-width: 480px) {
        .cf-turnstile {
            transform: scale(0.8);
            touch-action: manipulation;
        }
    }
}

/* Additional mobile-specific fixes */
@media (hover: none) and (pointer: coarse) {
    .cf-turnstile {
        transform-origin: center center;
        will-change: transform; /* Optimize for mobile rendering */
    }

    .turnstile-container {
        overflow: hidden; /* Prevent overflow on mobile */
    }
}

/* Mobile Safari specific fixes */
@supports (-webkit-touch-callout: none) and (not (hover: hover)) {
    .cf-turnstile iframe {
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}

/* Professional Contact Background */
.professional-contact-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.contact-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(at 30% 20%, rgba(99, 102, 241, 0.5) 0%, transparent 60%),
        radial-gradient(at 70% 80%, rgba(168, 85, 247, 0.4) 0%, transparent 60%),
        radial-gradient(at 50% 50%, rgba(236, 72, 153, 0.3) 0%, transparent 70%);
    animation: contact-gradient-move 20s ease-in-out infinite;
}

.geometric-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(45deg, rgba(99, 102, 241, 0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(99, 102, 241, 0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(99, 102, 241, 0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(99, 102, 241, 0.1) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    animation: pattern-move 15s linear infinite;
}

.animated-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(99, 102, 241, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.8);
}

.animated-particles .particle-1 {
    top: 20%;
    left: 10%;
    animation: particle-float-1 12s infinite ease-in-out;
}

.animated-particles .particle-2 {
    top: 60%;
    left: 80%;
    animation: particle-float-2 15s infinite ease-in-out;
}

.animated-particles .particle-3 {
    top: 80%;
    left: 30%;
    animation: particle-float-3 18s infinite ease-in-out;
}

.animated-particles .particle-4 {
    top: 40%;
    left: 60%;
    animation: particle-float-4 14s infinite ease-in-out;
}

.contact-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.8) 100%);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

/* Professional Background Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-20px) rotate(90deg);
        opacity: 0.8;
    }
    50% {
        transform: translateY(10px) rotate(180deg);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-15px) rotate(270deg);
        opacity: 0.9;
    }
}

@keyframes grid-move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes mesh-move {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translate(20px, -20px) scale(1.1);
        opacity: 1;
    }
}

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

@keyframes shape-float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.6;
    }
    25% {
        transform: translateY(-30px) rotate(90deg) scale(1.1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(20px) rotate(180deg) scale(0.9);
        opacity: 0.7;
    }
    75% {
        transform: translateY(-25px) rotate(270deg) scale(1.05);
        opacity: 0.9;
    }
}

@keyframes contact-gradient-move {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.9;
    }
    33% {
        transform: translate(30px, -30px) scale(1.2);
        opacity: 1;
    }
    66% {
        transform: translate(-20px, 20px) scale(1.1);
        opacity: 0.8;
    }
}

@keyframes pattern-move {
    0% {
        background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    }
    100% {
        background-position: 60px 60px, 60px 90px, 90px 30px, 30px 60px;
    }
}

/* Responsive Styles for Simple Process Section */
@media (max-width: 768px) {
    .simple-process {
        padding: 80px 0;
    }

    .simple-process .section-title {
        font-size: 36px;
    }

    .simple-process .section-description {
        font-size: 16px;
    }

    .simple-process .process-grid {
        grid-template-columns: 1fr;
        gap: 24px;
        max-width: 500px;
    }

    .simple-process .process-step {
        padding: 32px 24px;
    }

    .simple-process .step-number {
        width: 56px;
        height: 56px;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .simple-process .step-icon {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
    }

    .simple-process .step-icon svg {
        width: 36px;
        height: 36px;
    }

    .simple-process .process-step h3 {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .simple-process .process-step p {
        font-size: 15px;
    }

    .simple-process .btn-primary {
        padding: 14px 28px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .simple-process {
        padding: 60px 0;
    }

    .simple-process .section-title {
        font-size: 28px;
        margin-bottom: 20px;
    }

    .simple-process .section-description {
        font-size: 15px;
    }

    .simple-process .process-step {
        padding: 24px 20px;
    }

    .simple-process .step-number {
        width: 48px;
        height: 48px;
        font-size: 16px;
        margin-bottom: 16px;
    }

    .simple-process .step-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 16px;
    }

    .simple-process .step-icon svg {
        width: 32px;
        height: 32px;
    }

    .simple-process .process-step h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .simple-process .process-step p {
        font-size: 14px;
        line-height: 1.6;
    }

    .simple-process .btn-primary {
        padding: 12px 24px;
        font-size: 14px;
    }
}

@keyframes particle-float-1 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    25% {
        transform: translate(100px, -100px);
        opacity: 1;
    }
    75% {
        transform: translate(-50px, -150px);
        opacity: 0.8;
    }
}

@keyframes particle-float-2 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    25% {
        transform: translate(-80px, 120px);
        opacity: 1;
    }
    75% {
        transform: translate(60px, 80px);
        opacity: 0.7;
    }
}

@keyframes particle-float-3 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    25% {
        transform: translate(120px, 60px);
        opacity: 1;
    }
    75% {
        transform: translate(-90px, -40px);
        opacity: 0.9;
    }
}

@keyframes particle-float-4 {
    0%, 100% {
        transform: translate(0, 0);
        opacity: 0;
    }
    25% {
        transform: translate(-70px, -80px);
        opacity: 1;
    }
    75% {
        transform: translate(110px, 50px);
        opacity: 0.6;
    }
}

/* Responsive Design for Enterprise Tree */
@media (max-width: 1024px) {
  .branch-left,
  .branch-right,
  .branch-center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 95%;
    text-align: center;
  }

  .branch-right .node-header,
  .branch-right .node-features {
    justify-content: center;
  }

  .node-header {
    justify-content: center;
  }

  .tree-branch.branch-right {
    transform: translateX(-100px) rotateY(-15deg);
  }

  .tree-branch.branch-left {
    transform: translateX(100px) rotateY(15deg);
  }

  .tree-branch.in-view {
    transform: translateX(0) rotateY(0);
  }

  .node-connector {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
  }
}

@media (max-width: 768px) {
  .enterprise-process {
    padding: clamp(60px, 8vw, 100px) 0;
  }

  .enterprise-title {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .enterprise-subtitle {
    font-size: clamp(1rem, 3vw, 1.2rem);
  }

  .tree-branches {
    gap: clamp(40px, 6vw, 60px);
  }

  .branch-node {
    padding: var(--spacing-lg);
  }

  .node-features {
    justify-content: center !important;
  }

  .result-metrics {
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  .metric {
    min-width: auto;
  }

  .particle {
    display: none;
  }
}

@media (max-width: 480px) {
  .enterprise-title {
    letter-spacing: 1px;
  }

  .tree-root,
  .result-node {
    padding: var(--spacing-lg);
  }

  .root-icon,
  .result-icon {
    width: 60px;
    height: 60px;
  }

  .root-icon i,
  .result-icon i {
    font-size: 1.5rem;
  }

  .node-icon {
    width: 50px;
    height: 50px;
  }

  .node-icon i {
    font-size: 1.2rem;
  }
}

/* Animation for floating particles */
@keyframes particleFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
    opacity: 0.3;
  }
  25% {
    transform: translateY(-30px) translateX(20px);
    opacity: 0.6;
  }
  50% {
    transform: translateY(-20px) translateX(-15px);
    opacity: 0.8;
  }
  75% {
    transform: translateY(30px) translateX(10px);
    opacity: 0.5;
  }
}


/* Testimonials Section */
.testimonials-section {
  padding: clamp(3rem, 4vw, 4rem) 0;
  position: relative;
}

.testimonials-grid {
  display: flex;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.testimonials-track {
  display: flex;
  gap: 2rem;
  animation: testimonialsSlideWithBlur 30s linear infinite;
  width: fit-content;
}

.testimonial-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  min-width: 300px;
  max-width: 320px;
  flex-shrink: 0;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.05);
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.testimonial-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(99, 102, 241, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.testimonial-card:hover::before {
  opacity: 1;
}

.testimonial-card:hover::after {
  opacity: 1;
  top: -25%;
  left: -25%;
  width: 150%;
  height: 150%;
}

.testimonial-content {
  margin-bottom: 1.5rem;
}

.quote-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  border: 1px solid rgba(99, 102, 241, 0.3);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transition: all 0.3s ease;
}

.testimonial-card:hover .quote-icon {
  transform: rotate(3deg) scale(1.05);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.25));
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.quote-icon svg {
  width: 24px;
  height: 24px;
  color: #a5b4fc;
  transition: all 0.3s ease;
}

.testimonial-content p {
  color: #f1f5f9;
  font-size: 0.95rem;
  line-height: 1.7;
  font-style: italic;
  font-weight: 400;
  margin-bottom: 1.2rem;
  position: relative;
  padding: 0 0.5rem;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.author-info h4 {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
  letter-spacing: 0.5px;
}

.author-info span {
  color: #cbd5e1;
  font-size: 0.85rem;
  display: block;
  font-weight: 400;
  opacity: 0.9;
}

/* Star Rating Styles for Testimonials */
.star-rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  animation: starsMoveRightToLeft 8s linear infinite;
}

.star-rating i {
  color: #fbbf24;
  font-size: 1rem;
  animation: starPulse 2s ease-in-out infinite;
}

.star-rating i:nth-child(1) { animation-delay: 0s; }
.star-rating i:nth-child(2) { animation-delay: 0.2s; }
.star-rating i:nth-child(3) { animation-delay: 0.4s; }
.star-rating i:nth-child(4) { animation-delay: 0.6s; }
.star-rating i:nth-child(5) { animation-delay: 0.8s; }

/* Professional Right-to-Left Animation for Stars */
@keyframes starsMoveRightToLeft {
  0% {
    transform: translateX(10px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-5px);
    opacity: 1;
  }
  100% {
    transform: translateX(10px);
    opacity: 0.8;
  }
}

@keyframes starPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}

/* Responsive Styles for Testimonials */
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .testimonials-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .testimonial-card {
    padding: 1.5rem;
  }
}


/* Star Rating Styles for Testimonials */
.star-rating {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.5rem;
  animation: starsMoveRightToLeft 8s linear infinite;
}

.star-rating i {
  color: #fbbf24;
  font-size: 1rem;
  animation: starPulse 2s ease-in-out infinite;
}

.star-rating i:nth-child(1) { animation-delay: 0s; }
.star-rating i:nth-child(2) { animation-delay: 0.2s; }
.star-rating i:nth-child(3) { animation-delay: 0.4s; }
.star-rating i:nth-child(4) { animation-delay: 0.6s; }
.star-rating i:nth-child(5) { animation-delay: 0.8s; }

/* Updated Testimonial Author Layout */
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.author-info h4 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.author-info span {
  color: #94a3b8;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Professional Right-to-Left Animation for Stars */
@keyframes starsMoveRightToLeft {
  0% {
    transform: translateX(10px);
    opacity: 0.8;
  }
  50% {
    transform: translateX(-5px);
    opacity: 1;
  }
  100% {
    transform: translateX(10px);
    opacity: 0.8;
  }
}

@keyframes starPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}


/* Professional Right-to-Left Animation for Testimonial Cards */
@keyframes cardSlideInFromRight {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  60% {
    transform: translateX(-10px);
    opacity: 0.8;
  }
  80% {
    transform: translateX(5px);
    opacity: 0.9;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}


/* Continuous subtle movement for testimonial cards */
.testimonial-card {
  animation: cardSlideInFromRight 0.8s ease-out forwards, 
             cardFloat 6s ease-in-out infinite 2s;
}

.testimonial-card:hover {
  animation-play-state: paused;
}

@keyframes cardFloat {
  0%, 100% {
    transform: translateY(0) translateX(0);
  }
  25% {
    transform: translateY(-3px) translateX(-2px);
  }
  50% {
    transform: translateY(0) translateX(2px);
  }
  75% {
    transform: translateY(2px) translateX(-1px);
  }
}


/* Continuous Right-to-Left Sliding Animation */
@keyframes testimonialsSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.testimonials-grid:hover .testimonials-track {
  animation-play-state: paused;
}


/* Modern Testimonial Card Overrides */
.testimonial-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  padding: 1.8rem !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  min-width: 300px !important;
  max-width: 320px !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.testimonial-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.testimonial-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(99, 102, 241, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

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

.quote-icon {
  width: 48px !important;
  height: 48px !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15)) !important;
  border-radius: 16px !important;
  margin-bottom: 1.2rem !important;
  border: 1px solid rgba(99, 102, 241, 0.3) !important;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important;
  transition: all 0.3s ease !important;
}

.testimonial-card:hover .quote-icon {
  transform: rotate(3deg) scale(1.05) !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.25)) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3) !important;
}

.quote-icon svg {
  width: 24px !important;
  height: 24px !important;
  color: #a5b4fc !important;
}

.testimonial-content p {
  color: #f1f5f9 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  font-style: italic !important;
  font-weight: 400 !important;
  margin-bottom: 1.2rem !important;
  padding: 0 0.5rem !important;
}

.testimonial-author {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  padding-top: 0.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.author-info h4 {
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.2rem !important;
  letter-spacing: 0.5px !important;
}

.author-info span {
  color: #cbd5e1 !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  opacity: 0.9 !important;
}

.star-rating {
  display: flex !important;
  gap: 0.2rem !important;
  margin-top: 0.3rem !important;
  animation: none !important;
}

.star-rating i {
  color: #fbbf24 !important;
  font-size: 0.9rem !important;
  animation: starPulse 2s ease-in-out infinite !important;
  filter: drop-shadow(0 0 3px rgba(251, 191, 36, 0.5)) !important;
  transition: all 0.2s ease !important;
}

.star-rating i:hover {
  transform: scale(1.2) !important;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.8)) !important;
}


/* Blur effect for cards entering/exiting */
.testimonials-grid {
  position: relative;
}

.testimonials-grid::before,
.testimonials-grid::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 10;
  pointer-events: none;
}

.testimonials-grid::before {
  left: 0;
  background: linear-gradient(90deg, 
    rgba(10, 10, 26, 1) 0%, 
    rgba(10, 10, 26, 0.7) 40%, 
    transparent 100%);
}

.testimonials-grid::after {
  right: 0;
  background: linear-gradient(270deg, 
    rgba(10, 10, 26, 1) 0%, 
    rgba(10, 10, 26, 0.7) 40%, 
    transparent 100%);
}

/* Enhanced sliding animation with blur */
.testimonials-track {
  animation: testimonialsSlideWithBlur 30s linear infinite;
}

@keyframes testimonialsSlideWithBlur {
  0% {
    transform: translateX(0);
    filter: blur(0px);
  }
  100% {
    transform: translateX(-50%);
    filter: blur(0px);
  }
}

/* Individual card blur effects */
.testimonial-card {
  transition: all 0.3s ease, filter 0.3s ease;
}

/* Blur effect for edge cards (handled by the pseudo-elements above) */
.testimonials-grid:hover .testimonials-track {
  animation-play-state: paused;
}

/* Enhanced card visibility in center */
.testimonial-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              filter 0.4s ease,
              transform 0.4s ease;
}

/* Subtle opacity change for depth effect */
.testimonials-track .testimonial-card {
  opacity: 0.85;
}

.testimonials-track .testimonial-card:hover {
  opacity: 1;
  filter: brightness(1.1) !important;
}


/* Dynamic blur and scale effect for sliding cards */
@keyframes dynamicBlur {
  0%, 100% {
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
  50% {
    filter: blur(0px) brightness(1);
    transform: scale(1);
  }
}

/* Apply to individual cards with staggered timing */
.testimonials-track .testimonial-card:nth-child(odd) {
  animation: subtleFloat 4s ease-in-out infinite;
}

.testimonials-track .testimonial-card:nth-child(even) {
  animation: subtleFloat 4s ease-in-out infinite 2s;
}

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

/* Enhanced blur masks with wider coverage */
.testimonials-grid::before {
  width: 150px;
  background: linear-gradient(90deg, 
    rgba(10, 10, 26, 1) 0%, 
    rgba(10, 10, 26, 0.8) 30%, 
    rgba(10, 10, 26, 0.3) 70%, 
    transparent 100%);
}

.testimonials-grid::after {
  width: 150px;
  background: linear-gradient(270deg, 
    rgba(10, 10, 26, 1) 0%, 
    rgba(10, 10, 26, 0.8) 30%, 
    rgba(10, 10, 26, 0.3) 70%, 
    transparent 100%);
}

/* Add shimmer effect to cards */
.testimonial-card::before {
  background: linear-gradient(90deg, 
    transparent 0%, 
    rgba(255, 255, 255, 0.1) 50%, 
    transparent 100%);
  animation: shimmer 3s ease-in-out infinite;
}

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


/* Beautiful About Section */
.about-section {
  padding: clamp(4rem, 6vw, 6rem) 0;
  position: relative;
  overflow: hidden;
  /* Match other sections with transparent background */
  background: transparent;
}

.about-section::before {
  /* Removed radial gradient overlay to match hero section background */
  display: none;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
}

.about-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-bottom: 4rem;
  align-items: center;
}

.about-text h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.about-text p {
  color: #e2e8f0;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.stat-item:hover {
  transform: translateY(-5px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #6366f1;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  color: #94a3b8;
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
}

.feature-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-10px) scale(1.02);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  border-color: rgba(99, 102, 241, 0.3);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(99, 102, 241, 0.2);
}

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

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.15));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 1.5rem;
  color: #a5b4fc;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.feature-card:hover .feature-icon {
  transform: rotate(5deg) scale(1.1);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.3), rgba(168, 85, 247, 0.25));
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
}

.feature-card h4 {
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.feature-card p {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.6;
}

.about-cta {
  text-align: center;
  padding: 3rem;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  backdrop-filter: blur(10px);
}

.about-cta h3 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 1rem;
}

.about-cta p {
  color: #cbd5e1;
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: white;
  text-decoration: none;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
  background: linear-gradient(135deg, #7c3aed, #9333ea);
}

.cta-button i {
  transition: transform 0.3s ease;
}

.cta-button:hover i {
  transform: translateX(3px);
}

/* Responsive Styles for About Section */
@media (max-width: 1024px) {
  .about-main {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .about-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: clamp(2rem, 4vw, 3rem) 0;
  }

  .about-text {
    text-align: center !important;
  }

  .about-text h3 {
    font-size: 1.5rem;
    text-align: center !important;
  }

  .about-text p {
    text-align: center !important;
  }

  .about-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .about-features {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .stat-number {
    font-size: 2rem;
  }
  
  .about-cta {
    padding: 2rem 1rem;
  }
}

/* Ultimate Turnstile Centering Override - Force center on all mobile devices */
@media (max-width: 768px) {
  /* Target Turnstile with maximum specificity */
  body .cf-turnstile #content,
  body .cf-turnstile #uMtSJ0,
  body .cf-turnstile .cb-c {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  body .cf-turnstile label,
  body .cf-turnstile .cb-lb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  body .cf-turnstile .cb-lb-t {
    text-align: center !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }

  /* Override inline styles with maximum specificity */
  [style*="display: flex"].cf-turnstile,
  [style*="display: grid"].cf-turnstile,
  .cf-turnstile [style*="display: flex"],
  .cf-turnstile [style*="display: grid"] {
    justify-content: center !important;
    align-items: center !important;
    place-items: center !important;
    text-align: center !important;
  }

  /* Additional aggressive targeting */
  .cf-turnstile[style],
  .cf-turnstile #content[style],
  .cf-turnstile #uMtSJ0[style],
  .cf-turnstile .cb-c[style] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  /* Force label centering with higher specificity */
  html body .cf-turnstile label,
  html body .cf-turnstile .cb-lb {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  /* Target all possible label variations */
  .cf-turnstile label[style],
  .cf-turnstile .cb-lb[style],
  .cf-turnstile .cb-lb-t[style] {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
  }
}

/* Touch-optimized interactions for mobile */
@media (max-width: 768px) {
    /* Ensure content is visible on mobile by overriding animation initial states */
    .service-card,
    .animate-scale-in,
    .animate-fade-in-up,
    .animate-scale-up,
    .section-header,
    .animate-fade-in {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }

    .service-card {
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }

    .service-card:hover {
        transform: translateY(-3px);
    }

    .service-card:active {
        transform: translateY(-1px);
    }

    .btn-primary {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
    }

    .feature-list li {
        touch-action: manipulation;
    }
}

/* Reduce motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card {
        transition: none;
    }

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

    .service-card:hover .card-icon {
        transform: none;
    }

    .glow-line {
        animation: none;
    }

    .floating {
        animation: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .service-card {
        border: 2px solid #ffffff;
    }

    .services-section {
        background: #000000;
    }
}