/* ===================================
   GLOBAL STYLES & RESET
   =================================== */

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

/* ===================================
   LIGHT MODE (Default)
   =================================== */
:root {
    /* Primary Colors */
    --primary-color: #6366F1;
    --primary-light: #818CF8;
    --primary-dark: #4F46E5;
    --secondary-color: #0EA5E9;
    --accent-color: #f59e0b;

    /* Background Colors - Light Mode */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-card: #ffffff;
    --bg-card-hover: #f9fafb;

    /* Text Colors - Light Mode */
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-light: #9ca3af;
    --text-inverse: #ffffff;

    /* Border Colors - Light Mode */
    --border-color: #e5e7eb;
    --border-hover: #d1d5db;
    --border-accent: rgba(99, 102, 241, 0.3);

    /* Status Colors */
    --success-color: #10B981;
    --error-color: #EF4444;
    --warning-color: #f59e0b;

    /* Shadow & Glow - Light Mode */
    --shadow-sm: 0 1px 2px 0 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-glow: 0 0 20px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 10px 40px rgba(99, 102, 241, 0.15);

    /* Glow Effects - Light Mode */
    --glow-primary: rgba(99, 102, 241, 0.2);
    --glow-secondary: rgba(14, 165, 233, 0.2);
    --glow-accent: rgba(245, 158, 11, 0.2);

    /* Header - Light Mode */
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-bg-scrolled: rgba(255, 255, 255, 0.95);
    --header-border: rgba(99, 102, 241, 0.1);
    --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Hero Gradient - Light Mode */
    --hero-gradient: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 50%, #fef3c7 100%);
    --hero-overlay: rgba(255, 255, 255, 0.85);

    /* Card styles - Light Mode */
    --card-bg: #f9fafb;
    --card-bg-hover: #ffffff;
    --card-border: transparent;
    --card-border-hover: var(--primary-light);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Input/Form - Light Mode */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-focus-border: #6366F1;
    --input-focus-ring: rgba(99, 102, 241, 0.2);

    /* Carousel/Slider - Light Mode */
    --carousel-bg: #f3f4f6;

    /* Dropdown - Light Mode */
    --dropdown-bg: rgba(255, 255, 255, 0.98);
    --dropdown-border: rgba(99, 102, 241, 0.1);

    /* Footer - Light Mode */
    --footer-bg: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    --footer-text: rgba(255, 255, 255, 0.8);

    /* CTA Section - Light Mode */
    --cta-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

    /* Typography */
    --font-primary: 'Inter', sans-serif;
    --font-display: 'Poppins', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;

    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;

    /* Bento Grid System */
    --bento-gap: 1.5rem;
    --bento-gap-mobile: 1rem;
    --bento-radius: 20px;
    --bento-radius-lg: 28px;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-bg-strong: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.3);
    --glass-blur: 20px;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #EC4899 100%);
    --gradient-secondary: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
    --gradient-accent: linear-gradient(135deg, #EC4899 0%, #8B5CF6 100%);
    --gradient-mesh: radial-gradient(at 40% 20%, rgba(99, 102, 241, 0.15) 0px, transparent 50%),
                     radial-gradient(at 80% 80%, rgba(139, 92, 246, 0.1) 0px, transparent 50%),
                     radial-gradient(at 0% 50%, rgba(14, 165, 233, 0.1) 0px, transparent 50%);

    /* Animated Border Gradient */
    --border-gradient: conic-gradient(from 180deg at 50% 50%,
        #6366F1 0deg,
        #8B5CF6 90deg,
        #EC4899 180deg,
        #0EA5E9 270deg,
        #6366F1 360deg);

    /* Pattern */
    --pattern-dot-size: 1px;
    --pattern-dot-space: 24px;
    --pattern-dot-color: rgba(99, 102, 241, 0.15);

    /* Color scheme indicator */
    color-scheme: light;
}

/* ===================================
   DARK MODE (Browser Preference)
   =================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary Colors - Same across modes */
        --primary-color: #6366F1;
        --primary-light: #818CF8;
        --primary-dark: #4F46E5;
        --secondary-color: #0EA5E9;
        --accent-color: #EC4899;

        /* Background Colors - Dark Mode */
        --bg-primary: #0F0F1E;
        --bg-secondary: #1A1A2E;
        --bg-tertiary: #16213E;
        --bg-card: #16213E;
        --bg-card-hover: #1e2a4a;

        /* Text Colors - Dark Mode */
        --text-primary: #E8E8FF;
        --text-secondary: #B0B0D0;
        --text-muted: #8888AA;
        --text-light: #B0B0D0;
        --text-inverse: #0F0F1E;

        /* Border Colors - Dark Mode */
        --border-color: #404070;
        --border-hover: #5050A0;
        --border-accent: rgba(99, 102, 241, 0.4);

        /* Shadow & Glow - Dark Mode */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.3);
        --shadow-card: 0 10px 30px rgba(99, 102, 241, 0.15);
        --shadow-card-hover: 0 20px 50px rgba(99, 102, 241, 0.3);

        /* Card styles - Dark Mode */
        --card-bg: var(--bg-card);
        --card-bg-hover: var(--bg-card-hover);
        --card-border: transparent;
        --card-border-hover: var(--primary-light);

        /* Glow Effects - Dark Mode */
        --glow-primary: rgba(99, 102, 241, 0.4);
        --glow-secondary: rgba(14, 165, 233, 0.4);
        --glow-accent: rgba(168, 85, 247, 0.4);

        /* Header - Dark Mode */
        --header-bg: rgba(26, 26, 46, 0.4);
        --header-bg-scrolled: rgba(26, 26, 46, 0.6);
        --header-border: rgba(99, 102, 241, 0.2);
        --header-shadow: 0 8px 32px rgba(99, 102, 241, 0.15);

        /* Hero Gradient - Dark Mode */
        --hero-gradient: linear-gradient(135deg, #0F0F1E 0%, #1A1A2E 100%);
        --hero-overlay: rgba(0, 0, 0, 0.4);

        /* Input/Form - Dark Mode */
        --input-bg: #16213E;
        --input-border: #404070;
        --input-focus-border: #6366F1;
        --input-focus-ring: rgba(99, 102, 241, 0.3);

        /* Carousel/Slider - Dark Mode */
        --carousel-bg: #16213E;

        /* Dropdown - Dark Mode */
        --dropdown-bg: rgba(26, 26, 46, 0.95);
        --dropdown-border: rgba(99, 102, 241, 0.2);

        /* Footer - Dark Mode */
        --footer-bg: linear-gradient(135deg, #0F0F1E 0%, #1A1A2E 100%);
        --footer-text: rgba(255, 255, 255, 0.7);

        /* Bento Grid - Dark Mode */
        --glass-bg: rgba(22, 33, 62, 0.6);
        --glass-bg-strong: rgba(22, 33, 62, 0.85);
        --glass-border: rgba(99, 102, 241, 0.2);
        --pattern-dot-color: rgba(99, 102, 241, 0.25);

        /* Color scheme indicator */
        color-scheme: dark;
    }
}

/* Legacy variable mappings for backward compatibility */
:root {
    --dark-bg: var(--bg-primary);
    --dark-bg-secondary: var(--bg-secondary);
    --dark-card: var(--bg-card);
    --light-bg: var(--bg-tertiary);
    --text-dark: var(--text-primary);
    --white: #FFFFFF;
    --glow-blue: var(--glow-primary);
    --glow-cyan: var(--glow-secondary);
    --glow-purple: var(--glow-accent);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background: var(--bg-primary);
    line-height: 1.6;
    position: relative;
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cursor Glow Effect - Only visible in dark mode */
body::before {
    content: '';
    position: fixed;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

body.cursor-active::before {
    opacity: 0;
}

@media (prefers-color-scheme: dark) {
    body.cursor-active::before {
        opacity: 0.6;
    }
}

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

/* ===================================
   BUTTONS & LINKS
   =================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    white-space: nowrap;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    border: none;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
}

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

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

.btn-secondary:hover {
    background: var(--primary-color);
    color: var(--white);
}

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

.btn-outline:hover {
    background: var(--primary-color);
    color: var(--white);
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.125rem;
    min-height: 60px;
}

.btn-sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */

.header {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: calc(100% - 40px);
    max-width: 1300px;
    z-index: 1000;
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--header-border);
    border-radius: 12px;
    box-shadow: var(--header-shadow);
    transition: var(--transition);
    padding: 0 var(--spacing-lg);
    opacity: 1;
}

.header:hover {
    background: var(--header-bg-scrolled);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
}

.header.scrolled {
    background: var(--header-bg-scrolled);
    border-color: var(--border-accent);
    box-shadow: var(--shadow-lg);
}

.header.scrolled .nav-link,
.header.scrolled .logo a {
    color: var(--text-primary);
}

.header.scrolled .nav-toggle span {
    background: var(--text-primary);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition);
}

.logo-img {
    height: 36px;
    width: 36px;
    max-width: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.header.scrolled .logo a {
    color: var(--text-primary);
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
    margin-left: auto;
    margin-right: var(--spacing-lg);
}

.nav-list {
    display: flex;
    list-style: none;
    gap: var(--spacing-xl);
    align-items: center;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

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

.nav-dropdown {
    position: relative;
}

/* Mega Dropdown - Innovative Features Menu */
.mega-dropdown {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dropdown-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl), 0 0 60px rgba(99, 102, 241, 0.1);
    width: 480px;
    max-width: 95vw;
    padding: 0;
    z-index: 999;
    border: 1px solid var(--dropdown-border);
    overflow: visible;
    animation: megaDropdownIn 0.3s ease;
}

/* Bridge to close gap between header and dropdown */
.mega-dropdown::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    height: 30px;
    background: transparent;
}

@keyframes megaDropdownIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-dropdown:hover .mega-dropdown,
.nav-dropdown.active .mega-dropdown {
    display: block;
}

.mega-dropdown-content {
    display: flex;
    flex-direction: column;
}

/* Featured Application Section */
.mega-featured {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-bottom: 1px solid var(--dropdown-border);
    position: relative;
}

.mega-featured-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mega-featured-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    text-decoration: none;
    border-radius: var(--radius-lg);
    transition: var(--transition);
    background: var(--card-bg);
    border: 1px solid transparent;
}

.mega-featured-link:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15);
    transform: translateY(-2px);
}

.mega-featured-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-featured-icon i {
    font-size: 1.5rem;
    color: white;
}

.mega-featured-info {
    flex: 1;
    min-width: 0;
}

.mega-featured-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.mega-featured-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.mega-featured-arrow {
    color: var(--primary-color);
    font-size: 1rem;
    transition: var(--transition);
    opacity: 0;
}

.mega-featured-link:hover .mega-featured-arrow {
    opacity: 1;
    transform: translateX(4px);
}

/* Integration Channels Section */
.mega-channels {
    padding: var(--spacing-lg);
}

.mega-section-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-md);
}

.mega-channels-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.mega-channel-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    text-decoration: none;
    border-radius: var(--radius-md);
    background: var(--card-bg);
    border: 1px solid var(--dropdown-border);
    transition: var(--transition);
}

.mega-channel-card:hover {
    border-color: var(--primary-color);
    background: var(--glow-primary);
    transform: translateY(-2px);
}

.mega-channel-card i {
    font-size: 1.4rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: var(--transition);
}

.mega-channel-card i.fa-whatsapp {
    color: #25D366;
    background: rgba(37, 211, 102, 0.1);
}

.mega-channel-card i.fa-envelope {
    color: #EA4335;
    background: rgba(234, 67, 53, 0.1);
}

.mega-channel-card:hover i {
    transform: scale(1.1);
}

.mega-channel-card span {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Explore CTA Section */
.mega-cta {
    padding: var(--spacing-md) var(--spacing-lg);
    background: rgba(99, 102, 241, 0.03);
    border-top: 1px solid var(--dropdown-border);
}

.mega-cta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    text-decoration: none;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 500;
    transition: var(--transition);
}

.mega-cta-link:hover {
    color: var(--secondary-color);
}

.mega-cta-link i {
    font-size: 0.8rem;
    transition: var(--transition);
}

.mega-cta-link:hover i {
    transform: translateX(4px);
}

/* Legacy dropdown-menu styles (for backwards compatibility) */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    padding: var(--spacing-md);
    min-width: 220px;
    z-index: 1000;
    border: 1px solid var(--border-color);
}

/* Bridge to close gap between nav item and dropdown */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 20px;
    background: transparent;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-sm);
    transition: background 0.2s ease, color 0.2s ease;
    font-size: 0.95rem;
}

.dropdown-menu a:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.dropdown-menu a i {
    width: 20px;
    text-align: center;
    color: var(--primary-color);
}

/* Show dropdown on hover (desktop) */
.nav-dropdown:hover .dropdown-menu {
    display: block;
}

/* Show dropdown when active class is added (click/touch) */
.nav-dropdown.active .dropdown-menu {
    display: block;
}

.header-cta {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
    padding: var(--spacing-sm);
}

.nav-toggle span {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: var(--transition);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

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

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}
/* Header Mobile Hide/Show on Scroll */@media (max-width: 768px) {    .header {        transition: transform 0.3s ease, opacity 0.3s ease;        top: 0;        width: 100%;        max-width: 100%;        border-radius: 0;        margin: 0;        padding: 0 var(--spacing-lg);        transform: translateX(0);        left: auto;        right: 0;    }    .header.hide-header {        transform: translateY(-100%);        opacity: 0;        pointer-events: none;    }    .header.show-header {        transform: translateY(0);        opacity: 1;        pointer-events: auto;    }}

/* ===================================
   HERO SECTION
   =================================== */

.hero {
    position: relative;
    min-height: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 104px;
    overflow: hidden;
    background: var(--hero-gradient);
}

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

.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
}

/* Animated gradient orbs for ZapLease-like effect */
.gradient-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: floatOrb 20s infinite ease-in-out;
    pointer-events: none;
}

.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--primary-color), transparent);
    top: -200px;
    left: -200px;
    animation-delay: 0s;
}

.orb-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--accent-color), transparent);
    top: 50%;
    right: -150px;
    animation-delay: 5s;
}

.orb-3 {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, var(--success-color), transparent);
    bottom: -100px;
    left: 30%;
    animation-delay: 10s;
}

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

.neural-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: auto;
}

/* Animated gradient orbs for depth - Dark Mode */
@media (prefers-color-scheme: dark) {
    .hero::before {
        content: '';
        position: absolute;
        top: 10%;
        left: -10%;
        width: 50%;
        height: 50%;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
        filter: blur(60px);
        animation: floatOrb1 15s ease-in-out infinite;
        z-index: 0;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: 10%;
        right: -10%;
        width: 45%;
        height: 45%;
        background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
        filter: blur(60px);
        animation: floatOrb2 18s ease-in-out infinite;
        z-index: 0;
    }
}

/* Animated gradient orbs for depth - Light Mode */
@media (prefers-color-scheme: light) {
    .hero::before {
        content: '';
        position: absolute;
        top: 10%;
        left: -10%;
        width: 50%;
        height: 50%;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, transparent 70%);
        filter: blur(80px);
        animation: floatOrb1 15s ease-in-out infinite;
        z-index: 0;
    }

    .hero::after {
        content: '';
        position: absolute;
        bottom: 10%;
        right: -10%;
        width: 45%;
        height: 45%;
        background: radial-gradient(circle, rgba(6, 182, 212, 0.06) 0%, transparent 70%);
        filter: blur(80px);
        animation: floatOrb2 18s ease-in-out infinite;
        z-index: 0;
    }
}

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(5%, 10%) scale(1.1); }
    50% { transform: translate(10%, 5%) scale(0.95); }
    75% { transform: translate(3%, -5%) scale(1.05); }
}

@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-8%, -5%) scale(1.05); }
    50% { transform: translate(-5%, 8%) scale(1.1); }
    75% { transform: translate(5%, 3%) scale(0.95); }
}

.hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hero-overlay);
    z-index: 2;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    color: var(--text-primary);
    width: 100%;
}

/* Hero Two-Column Grid Layout */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
    min-height: 600px;
}

.hero-grid .hero-text {
    text-align: left;
}

.hero-grid .hero-title {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.hero-grid .hero-subtitle {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.hero-grid .social-proof {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

.hero-grid .hero-buttons {
    justify-content: flex-start;
}

/* Hero Flow Visualization */
.hero-flow-visualization {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

.hero-flow-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: rgba(15, 15, 35, 0.6);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(99, 102, 241, 0.2);
    width: 100%;
    max-width: 900px;
}

/* Flow content row (inputs, hub, outputs) */
.hero-flow-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    width: 100%;
    padding: var(--spacing-md) 0;
    z-index: 2;
}

.hero-flow-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

/* Hero Flow Inputs/Outputs */
.hero-flow-inputs,
.hero-flow-outputs {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    z-index: 2;
}

.hero-flow-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    min-width: 80px;
}

.hero-flow-node:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.hero-node-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.hero-node-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.hero-node-icon i {
    font-size: 1.2rem;
    color: #8B5CF6;
}

.hero-flow-node span {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
}

/* Hero Central Hub */
.hero-flow-hub {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.hero-hub-core {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(139, 92, 246, 0.3) 100%);
    border: 2px solid rgba(99, 102, 241, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.4);
}

.hero-hub-ring {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    animation: heroHubPulse 2s ease-in-out infinite;
    pointer-events: none;
}

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

.hero-hub-core img {
    width: 44px;
    height: 44px;
}

.hero-hub-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    margin-top: var(--spacing-sm);
    white-space: nowrap;
}

/* Hero Flow Steps (inside wrapper) */
.hero-flow-steps {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) 0;
    width: 100%;
    justify-content: center;
    z-index: 2;
}

.hero-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    cursor: pointer;
}

.hero-step:hover {
    background: rgba(99, 102, 241, 0.25);
    z-index: 200;
}

.hero-step i {
    font-size: 0.85rem;
    color: var(--primary-color);
}

.hero-step span {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

/* Hero Step Tooltips */
.hero-step-tooltip {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 200px;
    padding: var(--spacing-sm);
    background: rgba(20, 20, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 300;
    pointer-events: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.hero-step-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(99, 102, 241, 0.3);
}

.hero-step:hover .hero-step-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.hero-step-tooltip h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.hero-step-tooltip h4 i {
    font-size: 0.85rem;
    color: var(--primary-color);
}

.hero-step-tooltip p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.hero-step-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-step-tooltip li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 0;
}

.hero-step-tooltip li i {
    color: #22C55E;
    font-size: 0.55rem;
}

/* Hero Supported Formats Bar (inside wrapper) */
.hero-formats-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
    width: 100%;
    z-index: 2;
}

.hero-formats-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hero-format-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.hero-format-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 20px;
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    transition: all 0.2s ease;
}

.hero-format-pill:hover {
    background: rgba(99, 102, 241, 0.25);
    border-color: rgba(99, 102, 241, 0.4);
}

.hero-format-pill i {
    font-size: 0.6rem;
    color: var(--primary-color);
}

/* Hero Flow Node Tooltips - Left side (for input nodes) */
.hero-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(-10px);
    width: 180px;
    padding: var(--spacing-sm);
    background: rgba(20, 20, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    pointer-events: none;
}

.hero-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(99, 102, 241, 0.3);
}

/* Right-side tooltips for output nodes */
.hero-tooltip-right {
    right: auto;
    left: calc(100% + 12px);
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) translateX(10px);
}

.hero-tooltip-right::after {
    top: 50%;
    left: auto;
    right: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: transparent;
    border-right-color: rgba(99, 102, 241, 0.3);
}

.hero-flow-node:hover .hero-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.hero-flow-node:hover .hero-tooltip-right {
    transform: translateY(-50%) translateX(0);
}

/* Ensure nodes have proper stacking when hovered */
.hero-flow-node:hover {
    z-index: 50;
}

.hero-tooltip h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 4px 0;
}

.hero-tooltip h4 i {
    font-size: 0.85rem;
    color: var(--primary-color);
}

.hero-tooltip p {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.hero-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hero-tooltip li {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 2px 0;
}

.hero-tooltip li i {
    color: #22C55E;
    font-size: 0.55rem;
}

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

    .hero-grid .hero-text {
        text-align: center;
        order: 1;
    }

    .hero-grid .hero-title,
    .hero-grid .hero-subtitle,
    .hero-grid .social-proof {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-grid .hero-buttons {
        justify-content: center;
    }

    .hero-flow-visualization {
        order: 2;
    }

    .hero-flow-wrapper {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* Reduce sizes for tablet */
    .hero-flow-node {
        min-width: 70px;
        padding: var(--spacing-xs);
    }

    .hero-node-icon {
        width: 36px;
        height: 36px;
    }

    .hero-node-icon img {
        width: 24px;
        height: 24px;
    }

    .hero-flow-node span {
        font-size: 0.65rem;
    }

    .hero-hub-core {
        width: 70px;
        height: 70px;
    }

    .hero-hub-ring {
        width: 90px;
        height: 90px;
    }

    .hero-hub-core img {
        width: 38px;
        height: 38px;
    }

    .hero-hub-label {
        font-size: 0.7rem;
    }

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

    .hero-flow-inputs,
    .hero-flow-outputs {
        gap: var(--spacing-sm);
    }
}

@media (max-width: 600px) {
    .hero-formats-bar {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .hero-formats-label {
        font-size: 0.6rem;
    }

    .hero-format-pill {
        padding: 3px 8px;
        font-size: 0.6rem;
    }

    .hero-format-pill i {
        font-size: 0.55rem;
    }

    .hero-flow-wrapper {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    /* Stack flow vertically on mobile */
    .hero-flow-content {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Inputs row at top */
    .hero-flow-inputs {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-sm);
        order: 1;
    }

    /* Hub in center with CSS connectors */
    .hero-flow-hub {
        order: 2;
        margin: var(--spacing-sm) 0;
        position: relative;
    }

    /* CSS-based vertical connectors for mobile */
    .hero-flow-hub::before,
    .hero-flow-hub::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 20px;
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.6), rgba(139, 92, 246, 0.8));
        z-index: 1;
    }

    /* Connector from inputs to hub */
    .hero-flow-hub::before {
        bottom: 100%;
        margin-bottom: 5px;
        background: linear-gradient(180deg, rgba(37, 211, 102, 0.6), rgba(99, 102, 241, 0.8));
        animation: flowPulseDown 1.5s ease-in-out infinite;
    }

    /* Connector from hub to outputs */
    .hero-flow-hub::after {
        top: 100%;
        margin-top: 5px;
        background: linear-gradient(180deg, rgba(99, 102, 241, 0.8), rgba(66, 133, 244, 0.6));
        animation: flowPulseDown 1.5s ease-in-out infinite 0.5s;
    }

    @keyframes flowPulseDown {
        0%, 100% { opacity: 0.5; }
        50% { opacity: 1; }
    }

    /* Outputs row at bottom */
    .hero-flow-outputs {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-sm);
        order: 3;
    }

    /* Hide SVG connectors on mobile - using CSS connectors instead */
    .hero-flow-svg {
        display: none;
    }

    .hero-flow-node {
        min-width: 70px;
        padding: var(--spacing-xs);
    }

    .hero-node-icon {
        width: 32px;
        height: 32px;
    }

    .hero-node-icon img {
        width: 22px;
        height: 22px;
    }

    .hero-hub-core {
        width: 60px;
        height: 60px;
    }

    .hero-hub-ring {
        width: 80px;
        height: 80px;
    }

    .hero-hub-core img {
        width: 32px;
        height: 32px;
    }

    .hero-hub-label {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin-top: var(--spacing-xs);
    }

    /* Hide tooltips on mobile - hover doesn't work well on touch */
    .hero-tooltip,
    .hero-step-tooltip {
        display: none;
    }

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

    .hero-step {
        padding: 4px 8px;
    }

    .hero-step span {
        font-size: 0.65rem;
    }
}

/* Light mode adjustments for hero flow */
@media (prefers-color-scheme: light) {
    .hero-flow-wrapper {
        background: rgba(255, 255, 255, 0.85);
        border-color: rgba(99, 102, 241, 0.25);
    }

    .hero-flow-node {
        background: rgba(99, 102, 241, 0.08);
        border-color: rgba(99, 102, 241, 0.15);
    }

    .hero-flow-node:hover {
        background: rgba(99, 102, 241, 0.15);
        border-color: rgba(99, 102, 241, 0.35);
    }

    .hero-flow-node span {
        color: var(--text-primary);
    }

    .hero-node-icon {
        background: rgba(99, 102, 241, 0.1);
    }

    .hero-hub-label {
        color: var(--text-primary);
    }

    .hero-flow-steps {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(99, 102, 241, 0.2);
    }

    .hero-step {
        background: rgba(99, 102, 241, 0.1);
    }

    .hero-step:hover {
        background: rgba(99, 102, 241, 0.2);
    }

    .hero-step span {
        color: var(--text-primary);
    }

    .hero-formats-bar {
        /* Now inside wrapper, no separate background needed */
    }

    .hero-formats-label {
        color: var(--text-secondary);
    }

    .hero-format-pill {
        background: rgba(99, 102, 241, 0.1);
        border-color: rgba(99, 102, 241, 0.2);
        color: var(--text-primary);
    }

    .hero-format-pill:hover {
        background: rgba(99, 102, 241, 0.18);
        border-color: rgba(99, 102, 241, 0.35);
    }

    .hero-tooltip {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(99, 102, 241, 0.25);
    }

    .hero-tooltip h4 {
        color: var(--text-primary);
    }

    .hero-tooltip p {
        color: var(--text-secondary);
    }

    .hero-tooltip li {
        color: var(--text-secondary);
    }

    .hero-step-tooltip {
        background: rgba(255, 255, 255, 0.98);
        border-color: rgba(99, 102, 241, 0.25);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    }

    .hero-step-tooltip h4 {
        color: var(--text-primary);
    }

    .hero-step-tooltip p {
        color: var(--text-secondary);
    }

    .hero-step-tooltip li {
        color: var(--text-secondary);
    }
}

/* ===================================================================
   Styles moved from features/whatsapp-integration.html
   These are specific to the feature showcase / whatsapp integration
   =================================================================== */

/* Feature Hero Section */
.feature-hero {
    padding: 164px var(--spacing-lg) var(--spacing-2xl);
    text-align: center;
    background: var(--hero-gradient);
}

.feature-hero h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.feature-hero > div > p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.feature-cta {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
}

/* Feature Showcase Section */
.feature-showcase {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
    gap: var(--spacing-2xl);
    margin: 0 auto;
    counter-reset: feature-counter;
    contain: layout;
}

.feature-item {
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    /* slightly slower, smoother easing + GPU friendly */
    transition: transform 320ms cubic-bezier(.16,.84,.44,1), border-color 320ms ease, box-shadow 320ms ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    box-shadow: var(--shadow-card);
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* promote to its own layer for smoother composite */
    transform: translateZ(0);
}

.feature-item::before {
    content: counter(feature-counter);
    counter-increment: feature-counter;
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) translateZ(0);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    z-index: 10;
}

.feature-item:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    /* use 3D translate to force compositor and keep children smooth */
    transform: translate3d(0,-10px,0) scale3d(1.025,1.025,1);
}

.feature-content {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    transition: transform 320ms cubic-bezier(.16,.84,.44,1), opacity 220ms ease;
    will-change: transform, opacity;
    transform: translateZ(0);
}

.feature-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-lg);
    text-align: center;
    backface-visibility: hidden;
    contain: layout style;
}

.feature-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
    backface-visibility: hidden;
    contain: layout style;
}

.feature-benefits li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    position: relative;
    font-family: var(--font-primary);
    backface-visibility: hidden;
}

.feature-benefits li::before {
    content: '✓';
    color: var(--success-color);
    font-weight: 700;
    font-size: 1rem;
    margin-right: 8px;
    display: inline-block;
    backface-visibility: hidden;
}

.feature-video-container {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-tertiary);
    aspect-ratio: 16 / 9;
    border: 1px solid var(--border-color);
    transition: border-color 320ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(.16,.84,.44,1);
    z-index: 1;
    flex-shrink: 0;
    flex-grow: 0;
    will-change: transform;
    transform: translateZ(0);
}

.feature-item:hover .feature-video-container {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-md);
}

.feature-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    backface-visibility: hidden;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--spacing-xl);
    }

    .feature-item {
        padding: var(--spacing-lg);
        padding-top: calc(var(--spacing-lg) + 20px);
    }

    .feature-title {
        font-size: 1.2rem;
    }

    .feature-item::before {
        top: -8px;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .feature-showcase {
        padding: var(--spacing-xl) 0;
    }

    .features-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .feature-item {
        padding: var(--spacing-lg);
        padding-top: calc(var(--spacing-lg) + 16px);
    }

    .feature-title {
        font-size: 1.1rem;
    }

    .feature-benefits li {
        font-size: 0.9rem;
    }

    .feature-video-container {
        aspect-ratio: 16 / 9;
    }

    .feature-item::before {
        top: -6px;
        width: 30px;
        height: 30px;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .feature-showcase {
        padding: var(--spacing-lg) 0;
    }

    .features-grid {
        gap: var(--spacing-md);
    }

    .feature-item {
        padding: var(--spacing-md);
        padding-top: calc(var(--spacing-md) + 16px);
    }

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

    .feature-benefits li {
        font-size: 0.85rem;
    }

    .feature-item::before {
        top: -5px;
        width: 28px;
        height: 28px;
        font-size: 0.9rem;
    }
}


.hero-title {
    font-family: var(--font-display);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: var(--spacing-lg);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 0.8s ease-out;
}

.hero-subtitle {
    font-size: 1.25rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-2xl);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.95;
    animation: fadeInUp 0.8s ease-out 0.1s both;
}

.social-proof {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    max-width: 700px;
    margin: var(--spacing-2xl) auto;
    animation: fadeInUp 0.8s ease-out 0.2s both;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    font-size: 0.95rem;
}

.proof-item i {
    color: var(--secondary-color);
    font-size: 1.5rem;
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

/* Centered buttons below the hero grid */
.hero-buttons-center {
    margin-top: var(--spacing-md);
    justify-content: center;
    width: 100%;
    padding-bottom: var(--spacing-lg);
}

.hero .btn {
    animation: pulse 2s infinite;
}

/* ===================================
   PROBLEM SECTION
   =================================== */

.problem-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.problem-section h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2xl);
    color: var(--text-primary);
}

.problem-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

.problem-item {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
}

.problem-item i {
    color: var(--error-color);
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.statistics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
}

.stat {
    text-align: center;
}

.stat strong {
    display: block;
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: var(--spacing-xs);
}

.stat span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.problem-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.illustration-placeholder {
    font-size: 6rem;
    display: flex;
    gap: var(--spacing-2xl);
    opacity: 0.3;
}

/* Promo Video */
.promo-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.promo-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
}

.video-btn {
    position: absolute;
    bottom: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(4px);
}

.video-btn:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

.video-btn-left {
    left: 16px;
}

.video-btn-right {
    right: 16px;
}

/* ===================================
   SOLUTION SECTION
   =================================== */

.solution-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-primary);
}

.section-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin-bottom: var(--spacing-2xl);
}

.solution-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.solution-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl) var(--spacing-lg);
    text-align: center;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Gradient bar at top */
.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.solution-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-card);
    border-color: var(--primary-light);
}

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

.solution-icon {
    font-size: 3rem;
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    color: var(--primary-color);
}

.solution-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.solution-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Solution Wrapper - Stacked Layout for Horizontal Flow Diagram */
.solution-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xl);
    align-items: center;
}

.solution-svg-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--spacing-lg);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    transition: var(--transition);
}

.solution-svg-container:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-accent);
}

.solution-svg-container svg {
    max-width: 100%;
    height: auto;
    width: 100%;
}

/* SVG text styling for theme compatibility */
.svg-text {
    fill: var(--text-primary);
}

.solution-cards-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
    width: 100%;
}

/* Tablet layout for solution section */
@media (max-width: 1200px) {
    .solution-cards-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile layout for solution section */
@media (max-width: 768px) {
    .solution-wrapper {
        gap: var(--spacing-xl);
    }

    .solution-svg-container {
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        overflow-x: hidden;
    }

    .solution-svg-container svg {
        min-width: 0;
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    .solution-cards-container {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   INTEGRATIONS SECTION
   =================================== */

.integrations-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.carousel-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.carousel-btn {
    background: var(--primary-color);
    color: var(--white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
}

.carousel-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

.carousel-wrapper {
    flex: 1;
    overflow: hidden;
}

.carousel {
    display: flex;
    gap: var(--spacing-xl);
    transition: transform 0.5s ease;
}

.carousel-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 140px;
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    font-size: 2.5rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    padding: var(--spacing-md);
    box-shadow: var(--shadow-sm);
}

.carousel-slide:hover {
    transform: translateY(-8px) scale(1.05);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-color);
    background: var(--bg-card);
}

.carousel-slide img {
    max-width: 70%;
    max-height: 70%;
    margin-bottom: var(--spacing-sm);
}

.carousel-slide span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-top: var(--spacing-xs);
    line-height: 1.3;
}

.carousel-subtitle {
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
}

/* ===================================
   UNIFIED FLOW VISUALIZATION
   =================================== */

.flow-visualization-section {
    position: relative;
    padding: var(--spacing-2xl) 0;
    background: linear-gradient(180deg, #0a0a1a 0%, #0f0f2a 50%, #0a0a1a 100%);
    overflow: hidden;
}

.flow-bg-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 50%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(236, 72, 153, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.flow-visualization-section .section-title {
    color: #fff;
    margin-bottom: var(--spacing-sm);
}

.flow-visualization-section .section-subtitle {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--spacing-xl);
}

/* Formats Bar */
.formats-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.formats-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
}

.format-pills {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: center;
}

.format-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}

.format-pill:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: rgba(99, 102, 241, 0.4);
    color: #fff;
    transform: translateY(-2px);
}

.format-pill i {
    font-size: 0.9rem;
    color: var(--primary-color);
}

/* Flow Diagram Wrapper - Contains SVG and content layers */
.flow-diagram-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: var(--spacing-2xl);
    min-height: 280px;
}

/* SVG Connection Lines - Background Layer */
.flow-svg-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
    overflow: visible;
}

/* Ensure SVG paths are visible */
.flow-svg-connections path {
    stroke-width: 2.5px;
}

.flow-svg-connections circle {
    filter: drop-shadow(0 0 4px currentColor);
}

.flow-line,
.flow-connector-line {
    stroke-dasharray: 8 4;
    animation: flowDash 1.5s linear infinite;
}

@keyframes flowDash {
    to { stroke-dashoffset: -24; }
}

.svg-label {
    font-family: inherit;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ensure packets are visible */
#flowConnectorPackets circle {
    filter: drop-shadow(0 0 6px currentColor);
}

/* Flow Diagram Layout - 3-column */
.flow-diagram {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 0;
    align-items: center;
    min-height: 280px;
}

/* Flow Columns */
.flow-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.flow-inputs,
.flow-outputs {
    padding: var(--spacing-md);
}

.flow-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Column Labels */
.column-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.column-label span:last-child {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.label-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.label-input {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
}

.label-output {
    background: linear-gradient(135deg, #4285F4 0%, #1A73E8 100%);
    color: white;
}

/* Flow Nodes */
.flow-node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    max-width: 90px;
}

.flow-node:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-4px) scale(1.02);
    z-index: 50;
}

.flow-node .node-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.flow-node-whatsapp .node-glow {
    background: radial-gradient(circle, rgba(37, 211, 102, 0.2) 0%, transparent 70%);
}

.flow-node-email .node-glow {
    background: radial-gradient(circle, rgba(234, 67, 53, 0.2) 0%, transparent 70%);
}

.flow-node-upload .node-glow {
    background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
}

.flow-node-tally .node-glow {
    background: radial-gradient(circle, rgba(66, 133, 244, 0.2) 0%, transparent 70%);
}

.flow-node-zoho .node-glow {
    background: radial-gradient(circle, rgba(31, 112, 193, 0.2) 0%, transparent 70%);
}

.flow-node:hover .node-glow {
    opacity: 1;
}

.flow-node .node-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}

.flow-node .node-icon img {
    width: 40px;
    height: 40px;
}

.flow-node-upload .node-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    color: #8B5CF6;
}

.flow-node .node-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.flow-node .node-status {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

.node-status {
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-live {
    background: rgba(34, 197, 94, 0.2);
    color: #22C55E;
}

/* Large Flow Nodes (Output) */
.flow-node-large {
    flex-direction: column;
    padding: var(--spacing-sm);
    gap: var(--spacing-xs);
    max-width: 100px;
}

.flow-node-large .node-icon {
    width: 40px;
    height: 40px;
}

.flow-node-large .node-icon img {
    width: 36px;
    height: 36px;
}

.flow-node-large .node-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.flow-node-large .node-features {
    display: none;
}

.flow-node-large .node-features span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 4px;
}

.flow-node-large .node-features i {
    color: #22C55E;
    font-size: 0.6rem;
}

/* Flow Tooltips */
.flow-tooltip {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 280px;
    padding: var(--spacing-lg);
    background: rgba(20, 20, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

.flow-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(99, 102, 241, 0.3);
}

/* When tooltip is positioned below the card */
.flow-tooltip[style*="top:"]::after,
.flow-tooltip[style*="top:"]::before {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(99, 102, 241, 0.3);
}

.flow-node:hover .flow-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.flow-tooltip h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 var(--spacing-sm) 0;
}

.flow-tooltip h4 i {
    font-size: 1.1rem;
}

.flow-tooltip h4 .fa-whatsapp { color: #25D366; }
.flow-tooltip h4 .fa-envelope { color: #EA4335; }
.flow-tooltip h4 .fa-cloud-upload-alt { color: #8B5CF6; }

.flow-tooltip p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.flow-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.flow-tooltip li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 4px 0;
}

.flow-tooltip li i {
    color: #22C55E;
    font-size: 0.7rem;
}

/* Connection Lines */
.flow-connections {
    position: relative;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.connection-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.flow-path {
    stroke-dasharray: 8 4;
    animation: flowDash 1.5s linear infinite;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.data-dot {
    filter: drop-shadow(0 0 8px currentColor);
}

.connection-label {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: rgba(0, 0, 0, 0.3);
    padding: 4px 10px;
    border-radius: 10px;
}

/* Central Processing Hub */
.processing-hub {
    position: relative;
    width: 264px; /* 220 * 1.2 */
    height: 264px; /* 220 * 1.2 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hub-outer-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 216px; /* 180 * 1.2 */
    height: 216px; /* 180 * 1.2 */
    border: 2px solid rgba(99, 102, 241, 0.2);
    border-radius: 50%;
    animation: hubPulse 3s ease-in-out infinite;
}

.hub-inner-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 156px; /* 130 * 1.2 */
    height: 156px; /* 130 * 1.2 */
    border: 1px dashed rgba(139, 92, 246, 0.3);
    border-radius: 50%;
    animation: hubRotate 30s linear infinite;
}

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

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

.hub-core {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2) 0%, rgba(139, 92, 246, 0.2) 100%);
    border: 2px solid rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    box-shadow:
        0 0 30px rgba(99, 102, 241, 0.3),
        inset 0 0 20px rgba(99, 102, 241, 0.1);
    z-index: 2;
}

.hub-core img {
    width: 50px;
    height: 50px;
}

.hub-label {
    position: absolute;
    bottom: 15px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

/* Hub Processing Steps */
.hub-steps {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    background: rgba(15, 15, 35, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin: 0 auto var(--spacing-xl);
    max-width: max-content;
}

.hub-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
}

.hub-step:hover,
.hub-step-active {
    background: rgba(99, 102, 241, 0.2);
    z-index: 300;
}

.hub-step .step-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, #8B5CF6 100%);
    border-radius: 50%;
    font-size: 0.7rem;
    color: white;
}

.hub-step .step-info {
    display: flex;
    flex-direction: column;
}

.hub-step .step-title {
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
}

.hub-step .step-desc {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Step Tooltips */
.step-tooltip {
    position: absolute;
    bottom: calc(100% + 16px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    width: 260px;
    padding: var(--spacing-md);
    background: rgba(20, 20, 40, 0.98);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: var(--radius-lg);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 200;
    pointer-events: none;
}

.step-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(99, 102, 241, 0.3);
}

.hub-step:hover .step-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.step-tooltip h4 {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 var(--spacing-xs) 0;
}

.step-tooltip h4 i {
    font-size: 1rem;
    color: var(--primary-color);
}

.step-tooltip p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.4;
}

.step-tooltip ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.step-tooltip li {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 0;
}

.step-tooltip li i {
    color: #22C55E;
    font-size: 0.65rem;
}

/* Coming Soon Bar */
.coming-soon-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    flex-wrap: wrap;
}

.coming-soon-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.4);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.coming-soon-items {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
}

.coming-soon-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.3s ease;
}

.coming-soon-item:hover {
    color: rgba(255, 255, 255, 0.7);
}

.coming-soon-item i {
    font-size: 0.9rem;
}

/* Flow Visualization Responsive */
@media (max-width: 1200px) {
    .flow-diagram {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .processing-hub {
        width: 200px;
        height: 200px;
    }

    .hub-outer-ring { width: 160px; height: 160px; }
    .hub-inner-ring { width: 110px; height: 110px; }
    .hub-core { width: 70px; height: 70px; }
    .hub-core img { width: 45px; height: 45px; }

    .hub-steps {
        flex-wrap: wrap;
        max-width: 400px;
    }
}

@media (max-width: 992px) {
    .flow-svg-connections {
        display: none;
    }

    .flow-diagram {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--spacing-lg);
    }

    .flow-inputs { order: 1; }
    .flow-center { order: 2; }
    .flow-outputs { order: 3; }

    .flow-column.flow-inputs,
    .flow-column.flow-outputs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .flow-center {
        flex-direction: column;
    }

    .column-label {
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-sm);
    }

    .flow-node {
        flex: 0 0 auto;
        min-width: 120px;
    }

    .flow-node-large {
        flex-direction: column;
        text-align: center;
    }

    .processing-hub {
        width: 180px;
        height: 180px;
    }

    .hub-outer-ring { width: 150px; height: 150px; }
    .hub-inner-ring { width: 100px; height: 100px; }
    .hub-core { width: 65px; height: 65px; }
    .hub-core img { width: 40px; height: 40px; }

    .hub-steps {
        margin-top: var(--spacing-lg);
    }

    .connection-svg {
        transform: rotate(90deg);
    }

    .connection-label {
        display: none;
    }
}

@media (max-width: 768px) {
    .flow-visualization-section {
        padding: var(--spacing-xl) 0;
    }

    .formats-bar {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .format-pills {
        gap: var(--spacing-xs);
    }

    .format-pill {
        padding: 6px 12px;
        font-size: 0.75rem;
    }

    .flow-node {
        padding: var(--spacing-sm);
    }

    .flow-node .node-icon {
        width: 40px;
        height: 40px;
    }

    .flow-node .node-icon img {
        width: 32px;
        height: 32px;
    }

    .flow-node .node-label {
        font-size: 0.8rem;
    }

    .processing-hub {
        width: 160px;
        height: 160px;
    }

    .hub-outer-ring { width: 130px; height: 130px; }
    .hub-inner-ring { width: 90px; height: 90px; }
    .hub-core { width: 55px; height: 55px; }
    .hub-core img { width: 35px; height: 35px; }
    .hub-label { font-size: 0.85rem; bottom: 10px; }

    .hub-steps {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }

    .hub-step .step-info {
        display: none;
    }

    .hub-step .step-icon {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }

    .flow-tooltip {
        width: 240px;
        padding: var(--spacing-md);
    }

    .step-tooltip {
        width: 220px;
        padding: var(--spacing-sm);
    }

    .step-tooltip h4 {
        font-size: 0.85rem;
    }

    .step-tooltip p {
        font-size: 0.75rem;
    }

    .step-tooltip li {
        font-size: 0.7rem;
    }

    .coming-soon-bar {
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    .coming-soon-items {
        gap: var(--spacing-sm);
    }

    .coming-soon-item {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .flow-node {
        min-width: 90px;
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .flow-node .node-icon {
        width: 36px;
        height: 36px;
    }

    .flow-node .node-icon img {
        width: 28px;
        height: 28px;
    }

    .flow-node-large .node-features {
        display: none;
    }

    .processing-hub {
        width: 140px;
        height: 140px;
    }

    .hub-outer-ring { width: 120px; height: 120px; }
    .hub-inner-ring { width: 80px; height: 80px; }
    .hub-core { width: 50px; height: 50px; }
    .hub-core img { width: 32px; height: 32px; }
    .hub-label { font-size: 0.75rem; bottom: 5px; }
}

/* ===================================
   INTEGRATIONS HUB (Modern Design)
   =================================== */

.integrations-hub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

.integration-category {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.integration-category:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
}

.integration-category-featured {
    grid-column: 1 / -1;
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.category-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.category-badge-input {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: white;
}

.category-badge-docs {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: white;
}

.category-badge-sync {
    background: linear-gradient(135deg, #EC4899 0%, #F43F5E 100%);
    color: white;
}

.category-badge-soon {
    background: linear-gradient(135deg, #64748B 0%, #475569 100%);
    color: white;
}

/* Integration Cards - Standard */
.integration-cards {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.integration-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.integration-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary-color);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.integration-card:hover {
    transform: translateX(8px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.integration-card:hover::before {
    opacity: 1;
}

.integration-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.integration-card-whatsapp .integration-icon {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.15) 0%, rgba(18, 140, 126, 0.15) 100%);
    color: #25D366;
}

.integration-card-email .integration-icon {
    background: linear-gradient(135deg, rgba(234, 67, 53, 0.15) 0%, rgba(197, 34, 31, 0.15) 100%);
    color: #EA4335;
}

.integration-card-upload .integration-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    color: #6366F1;
}

.integration-info {
    flex: 1;
}

.integration-info h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.integration-info p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.integration-status {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-live {
    background: rgba(34, 197, 94, 0.15);
    color: #22C55E;
}

.status-soon {
    background: rgba(100, 116, 139, 0.15);
    color: #64748B;
}

/* Mini Cards for Document Types */
.integration-cards-compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.integration-card-mini {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.integration-card-mini i {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.integration-card-mini span {
    font-weight: 500;
    color: var(--text-primary);
}

.integration-card-mini:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.integration-card-mini:hover i,
.integration-card-mini:hover span {
    color: white;
}

/* Large Featured Cards */
.integration-cards-featured {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.integration-card-large {
    position: relative;
    padding: var(--spacing-xl);
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 2px solid var(--border-light);
    transition: all 0.4s ease;
    overflow: hidden;
}

.integration-card-large .integration-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.integration-card-tally .integration-glow {
    background: radial-gradient(circle, rgba(66, 133, 244, 0.2) 0%, transparent 70%);
}

.integration-card-zoho .integration-glow {
    background: radial-gradient(circle, rgba(31, 112, 193, 0.2) 0%, transparent 70%);
}

.integration-card-large:hover .integration-glow {
    opacity: 1;
}

.integration-card-large:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.integration-card-tally:hover {
    border-color: #4285F4;
}

.integration-card-zoho:hover {
    border-color: #1F70C1;
}

.integration-card-large .integration-logo {
    margin-bottom: var(--spacing-lg);
}

.integration-card-large .integration-logo img {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

.integration-card-large .integration-status {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
}

.integration-details h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

.integration-details > p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-md) 0;
}

.integration-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.integration-features li {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.integration-features li i {
    color: #22C55E;
    font-size: 0.75rem;
}

/* Coming Soon Cards */
.integration-cards-coming {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.integration-card-soon {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-light);
    transition: all 0.3s ease;
    opacity: 0.7;
}

.integration-card-soon i {
    color: var(--text-muted);
    font-size: 1rem;
}

.integration-card-soon span {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.integration-card-soon:hover {
    opacity: 1;
    border-style: solid;
    transform: translateY(-2px);
}

/* Responsive - Integrations Hub */
@media (max-width: 992px) {
    .integrations-hub {
        grid-template-columns: 1fr;
    }

    .integration-category-featured {
        grid-column: 1;
    }
}

@media (max-width: 768px) {
    .integration-cards-featured {
        grid-template-columns: 1fr;
    }

    .integration-card {
        padding: var(--spacing-md);
    }

    .integration-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .integration-card-large {
        padding: var(--spacing-lg);
    }

    .integration-card-large .integration-logo img {
        width: 56px;
        height: 56px;
    }

    .category-header h3 {
        font-size: 1rem;
    }

    .section-subtitle {
        font-size: 1rem;
        padding: 0 var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .integration-category {
        padding: var(--spacing-lg);
    }

    .integration-cards-compact {
        gap: var(--spacing-xs);
    }

    .integration-card-mini {
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: 0.8rem;
    }

    .integration-card-mini i {
        font-size: 1rem;
    }

    .integration-cards-coming {
        gap: var(--spacing-xs);
    }

    .integration-card-soon {
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .integration-card-soon span {
        font-size: 0.8rem;
    }
}

/* ===================================
   FEATURES SHOWCASE SECTION
   =================================== */

.features-showcase {
    padding: var(--spacing-2xl) 0;
    background: var(--hero-gradient);
    color: var(--text-primary);
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.features-showcase h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-2xl);
}

.feature-placeholder {
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    opacity: 0.2;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.feature-item {
    display: flex;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.feature-item:hover {
    background: rgba(99, 102, 241, 0.1);
    transform: translateX(8px);
    border-left: 3px solid rgba(99, 102, 241, 0.5);
    padding-left: calc(var(--spacing-md) - 3px);
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-color);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: var(--transition);
}

.feature-item h4 {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    font-size: 1rem;
    color: var(--text-primary);
}

.feature-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Feature Card with Left Highlight */
.feature-card-highlight {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    position: relative;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.feature-card-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--primary-color), var(--accent-color));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.feature-card-highlight:hover {
    background: var(--bg-card);
    border-color: var(--primary-light);
    box-shadow: var(--shadow-md);
    transform: translateX(0);
    border-left: 1px solid var(--border-color);
    padding-left: var(--spacing-lg);
}

.feature-card-highlight:hover::before {
    transform: scaleY(1);
}

/* ===================================
   HOW IT WORKS SECTION
   =================================== */

.how-it-works {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-primary);
    overflow: hidden;
}

.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.step-card {
    background: var(--bg-secondary);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
    text-align: center;
    position: relative;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Gradient bar at top */
.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
    z-index: 2;
}

.step-card:hover {
    border-color: var(--primary-light);
    box-shadow: var(--shadow-xl);
    transform: translateY(-10px);
    background: var(--bg-card);
}

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

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
}

.step-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin: var(--spacing-lg) 0;
}

.step-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.step-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
}

.step-time {
    display: inline-block;
    background: var(--bg-tertiary);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* How It Works Section - Two Column Layout */
.how-it-works-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
    align-items: center;
}

.how-it-works-visualization {
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works-visualization svg {
    max-width: 100%;
    height: auto;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

/* Responsive adjustments for how-it-works layout */
@media (max-width: 1024px) {
    .how-it-works-wrapper {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }

    .how-it-works-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .how-it-works-wrapper {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .how-it-works-visualization {
        order: 2;
    }

    .how-it-works-steps {
        order: 1;
        grid-template-columns: 1fr;
    }
}

/* ===================================
   PRICING PREVIEW SECTION
   =================================== */

.pricing-preview {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.pricing-cards.pricing-five-col {
    grid-template-columns: repeat(5, 1fr);
}

.price-card {
    background: var(--bg-card);
    border: 2px solid transparent;
    border-radius: var(--radius-xl);
    padding: var(--spacing-2xl);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 380px;
    box-shadow: var(--shadow-lg);
}

/* Gradient bar at top */
.price-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
    z-index: 2;
}

.price-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-2xl);
    transform: translateY(-10px);
}

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

.price-card.featured {
    border: 3px solid var(--primary-color);
    box-shadow: var(--shadow-2xl);
}

.price-card.featured::before {
    transform: scaleX(1);
}

.price-card.featured:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: var(--shadow-2xl);
}

.badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: var(--white);
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.price-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.price-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.price-amount {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--spacing-md);
}

.currency {
    font-size: 1.25rem;
    color: var(--text-muted);
}

.amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.period {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.price-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.price-card .btn {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9rem;
    white-space: nowrap;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pricing-promo {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: var(--spacing-2xl);
    border-radius: var(--radius-lg);
    text-align: center;
}

.pricing-promo h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

/* ===================================
   TESTIMONIALS SECTION
   =================================== */

.testimonials-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-primary);
}

.testimonials-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.testimonial-card {
    background: var(--bg-secondary);
    padding: var(--spacing-xl) var(--spacing-lg);
    border-radius: var(--radius-xl);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.testimonial-card:hover {
    box-shadow: var(--shadow-2xl);
    transform: translateY(-10px);
    background: var(--bg-card);
}

.testimonial-card.active {
    animation: fadeIn 0.5s ease;
}

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

.quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

.testimonial-text {
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

.testimonial-author {
    margin-bottom: var(--spacing-md);
}

.author-info {
    display: flex;
    flex-direction: column;
}

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

.author-info span {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.rating {
    display: flex;
    gap: 4px;
}

.rating i {
    color: #FCD34D;
    font-size: 0.9rem;
}

/* ===================================
   FAQ SECTION
   =================================== */

.faq-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

/* FAQ Hero Section */
.faq-hero {
    padding: 160px 0 60px;
    background: var(--hero-gradient);
    text-align: center;
}

.faq-hero h1 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.faq-hero p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xl);
}

/* FAQ Category Navigation */
.faq-category-nav {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.faq-category-btn {
    padding: 10px 20px;
    border: 2px solid var(--border-color);
    background: transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
}

.faq-category-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.faq-category-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* FAQ Category Group */
.faq-category-group {
    margin-bottom: var(--spacing-2xl);
}

.faq-category-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 2px solid var(--border-color);
}

.faq-category-title i {
    color: var(--primary-color);
}

.faq-search {
    max-width: 500px;
    margin: 0 auto var(--spacing-2xl);
}

.faq-search-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-family: var(--font-primary);
    transition: var(--transition);
    background: var(--input-bg);
    color: var(--text-primary);
}

.faq-search-input::placeholder {
    color: var(--text-muted);
}

.faq-search-input:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    background: var(--bg-card);
}

.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: var(--spacing-lg) 0;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    transition: var(--transition);
    text-align: left;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question i {
    transition: var(--transition);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
    max-height: 300px;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-lg);
}

.faq-answer p {
    color: var(--text-secondary);
    line-height: 1.8;
}

/* ===================================
   CTA SECTION
   =================================== */

.cta-section {
    padding: var(--spacing-2xl) 0;
    background: var(--cta-gradient);
    color: var(--text-inverse);
    text-align: center;
}

.cta-section h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: #ffffff;
}

.cta-section p {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-2xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.9);
}

.cta-buttons {
    display: flex;
    gap: var(--spacing-lg);
    justify-content: center;
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.cta-section .btn-outline {
    border-color: #fff;
    color: #fff;
}

.cta-section .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

.cta-secondary {
    font-size: 0.95rem;
    opacity: 0.9;
}

/* ===================================
   FOOTER
   =================================== */

.footer {
    background: var(--footer-bg);
    color: #ffffff;
    padding: var(--spacing-2xl) 0 var(--spacing-lg);
    border-top: 1px solid rgba(99, 102, 241, 0.1);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    font-size: 1.3rem;
    font-weight: 700;
}

.footer-logo i {
    color: var(--secondary-color);
    font-size: 1.5rem;
}

.footer-logo-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.footer-column p {
    color: var(--footer-text);
    font-size: 0.95rem;
    margin-bottom: var(--spacing-md);
}

.footer-column h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

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

.footer-column ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-column a {
    color: var(--footer-text);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
}

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

.social-links {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 1.1rem;
}

.social-links a:hover {
    background: var(--primary-color);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: var(--spacing-lg);
}

/* ===================================
   PROCESS FLOW SECTION
   =================================== */

.process-flow {
    padding: var(--spacing-2xl) var(--spacing-lg);
    background: var(--hero-gradient);
    position: relative;
    overflow: hidden;
}

.process-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
    transform: translate(-25%, -25%);
    pointer-events: none;
}

.flow-header {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
}

.flow-header h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.flow-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.flow-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1000px;
    width: 100%;
    position: relative;
}

.flow-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, transparent 0%, rgba(99, 102, 241, 0.5) 50%, transparent 100%);
    transform: translateX(-1px);
    z-index: 0;
}

.flow-step {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-2xl);
    position: relative;
    z-index: 1;
    animation: slideInStep 0.8s ease-out backwards;
}

.flow-step[data-step="1"] { animation-delay: 0.1s; }
.flow-step[data-step="2"] { animation-delay: 0.2s; }
.flow-step[data-step="3"] { animation-delay: 0.3s; }
.flow-step[data-step="4"] { animation-delay: 0.4s; }
.flow-step[data-step="5"] { animation-delay: 0.5s; }

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

.flow-step:nth-child(odd) {
    flex-direction: row;
}

.flow-step:nth-child(even) {
    flex-direction: row-reverse;
}

.step-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--white);
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.6), 0 0 60px rgba(14, 165, 233, 0.4);
    z-index: 10;
    border: 3px solid var(--dark-bg-secondary);
}

.step-content {
    width: 45%;
    background: var(--bg-card);
    border: 2px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.step-content::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glow-primary) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.step-content:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-8px) scale(1.02);
}

.step-content:hover::before {
    opacity: 1;
}

.step-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: linear-gradient(135deg, var(--glow-primary) 0%, var(--glow-secondary) 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--secondary-color);
    border: 2px solid var(--border-color);
    position: relative;
    transition: all 0.4s ease;
}

.step-content:hover .step-icon-wrapper {
    background: linear-gradient(135deg, var(--glow-primary) 0%, var(--glow-secondary) 100%);
    border-color: var(--border-accent);
    transform: scale(1.1) rotate(5deg);
    box-shadow: var(--shadow-glow);
}

.step-content h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    position: relative;
    z-index: 1;
}

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

/* Responsive Flow Diagram */
@media (max-width: 1024px) {
    .flow-header h2 {
        font-size: 2rem;
    }

    .step-content {
        width: 50%;
        padding: var(--spacing-lg);
    }

    .step-icon-wrapper {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }

    .step-badge {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .process-flow {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    .flow-header h2 {
        font-size: 1.75rem;
    }

    .flow-header p {
        font-size: 1rem;
    }

    .flow-timeline::before {
        left: 20px;
    }

    .flow-step {
        flex-direction: column !important;
        margin-bottom: var(--spacing-xl);
    }

    .flow-step:nth-child(even) {
        flex-direction: column !important;
    }

    .step-badge {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 50px;
        height: 50px;
        margin-bottom: -var(--spacing-lg);
        z-index: 11;
    }

    .step-content {
        width: 100%;
        margin-left: var(--spacing-xl);
        padding: var(--spacing-lg);
    }

    .step-icon-wrapper {
        width: 60px;
        height: 60px;
        font-size: 1.8rem;
        margin: 0 auto var(--spacing-md);
    }

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

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

@media (max-width: 480px) {
    .process-flow {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .flow-header h2 {
        font-size: 1.5rem;
    }

    .flow-header p {
        font-size: 0.95rem;
    }

    .flow-timeline::before {
        left: 15px;
    }

    .flow-step {
        margin-bottom: var(--spacing-lg);
    }

    .step-badge {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
        margin-bottom: -var(--spacing-md);
    }

    .step-content {
        margin-left: var(--spacing-lg);
        padding: var(--spacing-md);
    }

    .step-icon-wrapper {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

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

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

/* ===================================
   AI INVOICE PROCESSING STYLES
   =================================== */

/* Overview Section */
.ai-overview-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.ai-overview-section h2,
.ai-deep-dive-section h2,
.ai-supported-formats h2,
.ai-benefits-section h2,
.ai-integration-section h2,
.ai-faq-section h2 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--spacing-2xl);
    color: var(--text-primary);
}

.ai-overview-section > .container > p {
    max-width: 900px;
    margin: 0 auto var(--spacing-2xl);
    text-align: center;
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
}

.overview-highlight {
    background: var(--glow-primary);
    border: 2px solid var(--border-accent);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
}

.overview-highlight h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

.overview-highlight ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

.overview-highlight li {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.overview-highlight li::before {
    content: '✗';
    color: var(--error-color);
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Deep Dive Section */
.ai-deep-dive-section {
    padding: var(--spacing-2xl) 0;
    background: var(--hero-gradient);
}

.deep-dive-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.deep-dive-card {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--border-color);
    position: relative;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.deep-dive-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-10px);
}

.dd-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.3rem;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
    border: 3px solid var(--dark-bg-secondary);
}

.deep-dive-card h3 {
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    margin-top: var(--spacing-lg);
    font-size: 1.2rem;
    color: var(--text-primary);
}

.deep-dive-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Supported Formats Section */
.ai-supported-formats {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.ai-supported-formats > .container > p {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-2xl);
    font-size: 1.05rem;
}

.formats-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-lg);
}

.format-item {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
}

.format-item:hover {
    transform: translateY(-8px) scale(1.05);
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-hover);
}

.format-item i {
    font-size: 2.5rem;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-md);
    display: block;
}

.format-item span {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

/* Benefits Section */
.ai-benefits-section {
    padding: var(--spacing-2xl) 0;
    background: var(--hero-gradient);
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.benefit-card {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 2px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-md);
}

.benefit-card:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-10px);
}

.benefit-icon {
    font-size: 3rem;
    color: var(--secondary-color);
    margin-bottom: var(--spacing-lg);
}

.benefit-card h3 {
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    font-size: 1.2rem;
    color: var(--text-primary);
}

.benefit-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Integration Section */
.ai-integration-section {
    padding: var(--spacing-2xl) 0;
    background: var(--bg-secondary);
}

.integration-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-lg);
}

.integration-item {
    background: var(--bg-card);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--primary-color);
    transition: all 0.4s ease;
    border: 2px solid var(--border-color);
    border-left: 4px solid var(--primary-color);
    box-shadow: var(--shadow-md);
}

.integration-item:hover {
    border-color: var(--border-accent);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-8px);
}

.integration-item h3 {
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
    color: var(--text-primary);
}

.integration-item p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ Section */
.ai-faq-section {
    padding: var(--spacing-2xl) 0;
    background: var(--hero-gradient);
}

.ai-faq-section .faq-list {
    max-width: 900px;
    margin: 0 auto;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .feature-hero h1 {
        font-size: 2.5rem;
    }

    .deep-dive-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .formats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .benefits-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .integration-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .feature-hero h1 {
        font-size: 1.75rem;
    }

    .feature-hero p {
        font-size: 1rem;
    }

    .feature-cta {
        flex-direction: column;
    }

    .feature-cta .btn {
        width: 100%;
    }

    .ai-overview-section h2,
    .ai-deep-dive-section h2,
    .ai-supported-formats h2,
    .ai-benefits-section h2,
    .ai-integration-section h2,
    .ai-faq-section h2 {
        font-size: 1.75rem;
    }

    .deep-dive-grid,
    .formats-grid,
    .benefits-list,
    .integration-grid {
        grid-template-columns: 1fr;
    }

    .overview-highlight ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .feature-hero h1 {
        font-size: 1.5rem;
    }

    .ai-overview-section h2,
    .ai-deep-dive-section h2,
    .ai-supported-formats h2,
    .ai-benefits-section h2,
    .ai-integration-section h2,
    .ai-faq-section h2 {
        font-size: 1.5rem;
    }

    .deep-dive-card,
    .benefit-card,
    .integration-item,
    .format-item {
        padding: var(--spacing-lg);
    }

    .benefit-icon {
        font-size: 2.5rem;
    }
}

/* ===================================
   ANIMATIONS
   =================================== */

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

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

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

section {
    animation: slideIn 0.6s ease-out;
}

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

/* Medium Devices (Tablets) */
@media (max-width: 1024px) {
    :root {
        --spacing-lg: 1.5rem;
        --spacing-xl: 2.5rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .logo-img {
        height: 28px;
        width: 28px;
        max-width: 28px;
        flex-shrink: 0;
    }

    .problem-section h2,
    .features-showcase h2,
    .cta-section h2 {
        font-size: 2rem;
    }

    .problem-grid,
    .features-grid {
        grid-template-columns: 1fr;
    }

    .solution-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .pricing-cards.pricing-five-col {
        grid-template-columns: 1fr;
    }

    .price-card.featured {
        transform: scale(1);
    }

    .testimonials-carousel {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Small Devices (Mobile) */
@media (max-width: 768px) {
    :root {
        --spacing-lg: 1.25rem;
        --spacing-xl: 1.75rem;
        --spacing-2xl: 2.5rem;
    }

    .hero {
        margin-top: 64px;
        min-height: 600px;
    }

    .hero-title {
        font-size: 1.75rem;
    }

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

    .social-proof {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

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

    .hero-buttons .btn {
        width: 100%;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .logo-img {
        height: 24px;
        width: 24px;
        max-width: 24px;
        flex-shrink: 0;
    }

    .nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
        flex-direction: column;
        margin-left: 0;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        z-index: 999;
    }

    .nav-menu.active {
        display: flex;
    }

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

    .nav-link {
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-menu {
        position: static;
        background: rgba(255, 255, 255, 0.05);
        display: none;
        box-shadow: none;
        margin-top: 0;
        width: 100%;
        max-width: 100%;
        min-width: auto;
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
        padding: var(--spacing-md);
        left: auto;
        transform: none;
        top: auto;
        right: auto;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .dropdown-menu a {
        font-size: 0.9rem;
        padding: var(--spacing-md) var(--spacing-md);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .dropdown-menu a i {
        min-width: 24px;
        flex-shrink: 0;
        text-align: center;
        font-size: 1rem;
    }

    .nav-dropdown:hover .dropdown-menu {
        display: none;
    }

    .nav-dropdown.active .dropdown-menu {
        display: block;
    }

    /* Mega Dropdown Mobile Styles */
    .mega-dropdown {
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: none;
        animation: none;
        background: rgba(255, 255, 255, 0.05);
    }

    .nav-dropdown:hover .mega-dropdown {
        display: none;
    }

    .nav-dropdown.active .mega-dropdown {
        display: block;
    }

    .mega-featured {
        padding: var(--spacing-md);
        background: transparent;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mega-featured-badge {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        font-size: 0.6rem;
    }

    .mega-featured-link {
        padding: var(--spacing-sm);
        background: rgba(255, 255, 255, 0.05);
    }

    .mega-featured-icon {
        width: 44px;
        height: 44px;
    }

    .mega-featured-icon i {
        font-size: 1.2rem;
    }

    .mega-featured-info h4 {
        font-size: 0.9rem;
    }

    .mega-featured-info p {
        font-size: 0.8rem;
    }

    .mega-channels {
        padding: var(--spacing-md);
    }

    .mega-channels-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }

    .mega-channel-card {
        padding: var(--spacing-sm) var(--spacing-md);
        background: rgba(255, 255, 255, 0.05);
    }

    .mega-channel-card i {
        width: 32px;
        height: 32px;
        font-size: 1.2rem;
    }

    .mega-channel-card span {
        font-size: 0.9rem;
    }

    .mega-cta {
        padding: var(--spacing-sm) var(--spacing-md);
        background: transparent;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .mega-cta-link {
        font-size: 0.85rem;
    }

    .nav-toggle {
        display: flex;
    }

    .header-cta {
        display: none;
    }

    .problem-list {
        gap: var(--spacing-sm);
    }

    .problem-item {
        font-size: 0.9rem;
    }

    .statistics {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }

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

    .carousel-container {
        flex-wrap: wrap;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .carousel-slide {
        min-width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .features-list {
        grid-template-columns: 1fr;
    }

    .feature-item {
        gap: var(--spacing-sm);
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: var(--spacing-md);
    }
}

/* Extra Small Devices */
@media (max-width: 480px) {
    :root {
        --spacing-md: 1rem;
        --spacing-lg: 1rem;
    }

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

    .header-content {
        padding: 15px 0;
    }

    .hero-title {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 0.9rem;
    }

    .btn-large {
        padding: 12px 20px;
        font-size: 0.95rem;
    }

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

    .logo-img {
        height: 20px;
        width: 20px;
        max-width: 20px;
        flex-shrink: 0;
    }

    .statistics {
        grid-template-columns: 1fr;
    }

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

    .price-amount {
        flex-direction: column;
    }

    .pricing-cards.pricing-five-col {
        grid-template-columns: 1fr;
    }

    .cta-section h2 {
        font-size: 1.5rem;
    }

    .cta-section p {
        font-size: 0.95rem;
    }
}

/* ===================================
   BENTO GRID SYSTEM
   Modern SaaS-style asymmetric grids
   =================================== */

/* Base Grid Container */
.bento-grid {
    display: grid;
    gap: var(--bento-gap);
    width: 100%;
}

/* Column Variants */
.bento-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.bento-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.bento-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Asymmetric Layouts */
.bento-grid-featured {
    grid-template-columns: 2fr 1fr;
}

.bento-grid-featured-right {
    grid-template-columns: 1fr 2fr;
}

/* Span Utilities */
.bento-span-2 { grid-column: span 2; }
.bento-span-3 { grid-column: span 3; }
.bento-span-4 { grid-column: span 4; }
.bento-row-span-2 { grid-row: span 2; }
.bento-row-span-3 { grid-row: span 3; }

/* Base Bento Card */
.bento-card {
    position: relative;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: var(--bento-radius);
    padding: var(--spacing-xl);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.44, 1),
                box-shadow 0.4s ease,
                border-color 0.3s ease;
    will-change: transform;
}

/* Card Size Variants */
.bento-card-sm {
    padding: var(--spacing-lg);
    min-height: 160px;
}

.bento-card-md {
    padding: var(--spacing-xl);
    min-height: 220px;
}

.bento-card-lg {
    padding: var(--spacing-2xl);
    min-height: 300px;
}

.bento-card-featured {
    padding: var(--spacing-2xl);
    min-height: 380px;
    grid-column: span 2;
    grid-row: span 2;
}

/* Glassmorphism Effect */
.bento-card-glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.bento-card-glass::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent);
    pointer-events: none;
}

@media (prefers-color-scheme: dark) {
    .bento-card-glass {
        box-shadow:
            0 8px 32px rgba(0, 0, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .bento-card-glass::before {
        background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.15),
            transparent);
    }
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
    .bento-card-glass {
        background: rgba(255, 255, 255, 0.95);
    }

    @media (prefers-color-scheme: dark) {
        .bento-card-glass {
            background: rgba(22, 33, 62, 0.95);
        }
    }
}

/* Card Hover Effects */
.bento-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 20px 40px rgba(99, 102, 241, 0.15),
        0 0 0 1px rgba(99, 102, 241, 0.1);
    border-color: var(--primary-light);
}

/* Glow Effect on Hover */
.bento-card-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--gradient-primary);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    filter: blur(15px);
}

.bento-card-glow:hover::after {
    opacity: 0.25;
}

@media (prefers-color-scheme: dark) {
    .bento-card-glow:hover::after {
        opacity: 0.4;
    }
}

/* Animated Gradient Border */
.bento-card-animated-border {
    position: relative;
    background: var(--bg-card);
    border: none;
}

.bento-card-animated-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--border-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder 4s linear infinite paused;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bento-card-animated-border:hover::before {
    opacity: 1;
    animation-play-state: running;
}

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

/* Shine Effect on Hover */
.bento-card-shine {
    overflow: hidden;
}

.bento-card-shine::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.bento-card-shine:hover::after {
    transform: translateX(100%);
}

/* Corner Gradient Decoration */
.bento-card-decorated::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    background: radial-gradient(
        circle at bottom right,
        rgba(99, 102, 241, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
    border-radius: inherit;
}

/* Bento Icon Component */
.bento-icon {
    width: 56px;
    height: 56px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    margin-bottom: var(--spacing-md);
    flex-shrink: 0;
}

.bento-icon-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
    border-radius: var(--radius-xl);
}

.bento-icon-gradient {
    background: var(--gradient-primary);
    color: var(--white);
}

.bento-card:hover .bento-icon {
    transform: scale(1.1) rotate(5deg);
    background: var(--gradient-primary);
    color: var(--white);
}

/* Bento Section with Floating Orbs */
.bento-section {
    position: relative;
    overflow: hidden;
}

.bento-section::before,
.bento-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.bento-section::before {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.4), transparent 70%);
    top: -150px;
    left: -100px;
    animation: floatOrb 20s ease-in-out infinite;
}

.bento-section::after {
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
    bottom: -100px;
    right: -100px;
    animation: floatOrb 18s ease-in-out infinite reverse;
}

.bento-section > .container {
    position: relative;
    z-index: 1;
}

/* Dot Pattern Background */
.bento-pattern-dots {
    position: relative;
}

.bento-pattern-dots::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(
        var(--pattern-dot-color) var(--pattern-dot-size),
        transparent var(--pattern-dot-size)
    );
    background-size: var(--pattern-dot-space) var(--pattern-dot-space);
    opacity: 0.5;
    pointer-events: none;
    border-radius: inherit;
}

/* ===================================
   BENTO STATISTICS GRID
   =================================== */

.bento-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bento-gap);
    margin-top: var(--spacing-xl);
}

.bento-card-stat {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bento-card-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 0 0 4px 4px;
}

.stat-value-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
}

.stat-value {
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    font-family: var(--font-display);
}

.stat-suffix {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: var(--spacing-sm);
    font-weight: 500;
}

.stat-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bg-tertiary);
}

.stat-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--gradient-primary);
    transition: width 1s ease-out;
}

.bento-card-stat:hover .stat-value {
    animation: countPulse 0.6s ease;
}

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

/* ===================================
   BENTO FEATURES GRID
   =================================== */

.bento-grid-features-top {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.bento-grid-features-top .bento-card {
    padding: var(--spacing-lg);
}

.bento-grid-features-top .bento-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.bento-grid-features-top .bento-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.bento-grid-features {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: minmax(180px, auto);
}

/* Featured card position */
.bento-grid-features .bento-card-featured {
    grid-column: 1 / 3;
    grid-row: span 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Full width spanning card */
.bento-grid-features .bento-span-2 {
    grid-column: span 2;
}

.bento-grid-features .bento-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.bento-grid-features .bento-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

.bento-grid-features .bento-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.bento-grid-features .bento-card-featured h3 {
    font-size: 1.5rem;
}

.bento-grid-features .bento-card-featured p {
    font-size: 1.05rem;
    max-width: 400px;
}

/* Additional styling for features section */
.features-showcase.bento-section {
    padding: var(--spacing-2xl) 0;
}

.features-showcase.bento-section .section-title {
    margin-bottom: var(--spacing-xl);
}

/* ===================================
   BENTO SOLUTION GRID
   =================================== */

.bento-grid-solution {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bento-gap);
    position: relative;
}

.bento-card-solution {
    position: relative;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-xl);
}

.bento-step-number {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--primary-light);
    opacity: 0.6;
    font-family: var(--font-display);
}

.bento-solution-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    color: var(--white);
    font-size: 1.5rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bento-card-solution:hover .bento-solution-icon {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.bento-card-solution h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.bento-card-solution p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Connector Lines */
.bento-connector {
    position: absolute;
    top: 50%;
    right: calc(var(--bento-gap) / -2 - 15px);
    width: calc(var(--bento-gap) + 30px);
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
    opacity: 0.3;
}

.bento-connector::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--primary-color);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.bento-card-solution:last-child .bento-connector {
    display: none;
}

/* ===================================
   BENTO TESTIMONIALS GRID
   =================================== */

.bento-grid-testimonials {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: var(--bento-gap);
}

.bento-grid-testimonials .bento-card-featured {
    grid-row: 1 / 3;
    grid-column: 1;
    display: flex;
    flex-direction: column;
}

.bento-card-testimonial {
    display: flex;
    flex-direction: column;
    padding: var(--spacing-xl);
}

.testimonial-quote-icon {
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.3;
    margin-bottom: var(--spacing-md);
}

.bento-card-featured .testimonial-text {
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xl);
    flex-grow: 1;
}

.bento-card-testimonial .testimonial-text {
    font-size: 1rem;
    font-style: italic;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    flex-grow: 1;
}

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.testimonial-author .author-info {
    display: flex;
    flex-direction: column;
}

.testimonial-author .author-info strong {
    font-weight: 600;
    color: var(--text-primary);
}

.testimonial-author .author-info span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    color: #fbbf24;
}

/* ===================================
   BENTO ANIMATIONS
   =================================== */

/* Staggered Card Entry */
.bento-card {
    animation: bentoFadeIn 0.6s ease-out backwards;
}

.bento-grid .bento-card:nth-child(1) { animation-delay: 0.1s; }
.bento-grid .bento-card:nth-child(2) { animation-delay: 0.15s; }
.bento-grid .bento-card:nth-child(3) { animation-delay: 0.2s; }
.bento-grid .bento-card:nth-child(4) { animation-delay: 0.25s; }
.bento-grid .bento-card:nth-child(5) { animation-delay: 0.3s; }
.bento-grid .bento-card:nth-child(6) { animation-delay: 0.35s; }
.bento-grid .bento-card:nth-child(7) { animation-delay: 0.4s; }
.bento-grid .bento-card:nth-child(8) { animation-delay: 0.45s; }
.bento-grid .bento-card:nth-child(9) { animation-delay: 0.5s; }
.bento-grid .bento-card:nth-child(10) { animation-delay: 0.55s; }

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

/* Reduced Motion Preference */
@media (prefers-reduced-motion: reduce) {
    .bento-card,
    .bento-card::before,
    .bento-card::after,
    .bento-section::before,
    .bento-section::after {
        animation: none;
        transition: none;
    }

    .bento-card:hover {
        transform: none;
    }
}

/* ===================================
   BENTO RESPONSIVE STYLES
   =================================== */

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

    .bento-grid-features {
        grid-template-columns: repeat(3, 1fr);
    }

    .bento-grid-features .bento-card-featured {
        grid-column: span 2;
        grid-row: span 1;
        min-height: auto;
    }

    .bento-grid-solution {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-connector {
        display: none;
    }
}

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

    .bento-grid-featured,
    .bento-grid-featured-right {
        grid-template-columns: 1fr;
    }

    .bento-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-grid-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-grid-features .bento-card-featured {
        grid-column: 1 / -1;
    }

    .bento-grid-testimonials {
        grid-template-columns: 1fr 1fr;
    }

    .bento-grid-testimonials .bento-card-featured {
        grid-column: 1 / 3;
        grid-row: auto;
    }

    .bento-section::before,
    .bento-section::after {
        width: 250px;
        height: 250px;
    }
}

@media (max-width: 768px) {
    :root {
        --bento-gap: var(--bento-gap-mobile);
    }

    .bento-grid-2,
    .bento-grid-3,
    .bento-grid-4,
    .bento-stats-grid,
    .bento-grid-features,
    .bento-grid-features-top,
    .bento-grid-solution,
    .bento-grid-testimonials {
        grid-template-columns: 1fr;
    }

    .bento-span-2,
    .bento-span-3,
    .bento-span-4,
    .bento-card-featured {
        grid-column: 1;
        grid-row: auto;
    }

    .bento-card-featured {
        min-height: auto;
    }

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

    .bento-card:hover {
        transform: translateY(-4px) scale(1.01);
    }

    .stat-value {
        font-size: 2.5rem;
    }

    .bento-section::before,
    .bento-section::after {
        width: 200px;
        height: 200px;
        opacity: 0.2;
    }
}

@media (max-width: 480px) {
    .bento-card {
        padding: var(--spacing-md);
    }

    .bento-icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }

    .bento-icon-lg {
        width: 64px;
        height: 64px;
        font-size: 1.5rem;
    }

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

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

    .bento-section::before,
    .bento-section::after {
        display: none;
    }
}

/* ============================================
   CASCADING FEATURES SECTIONS (Feature Pages)
   ============================================ */

/* Cascading Container */
/* ==========================================
   FEATURES CAROUSEL - Modern Horizontal Slider
   ========================================== */
.features-carousel-section {
    padding: 60px 0 100px;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    overflow: hidden;
    position: relative;
}

.carousel-container {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 100px;
}

.carousel-track-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}

.carousel-track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    will-change: transform;
}

/* Feature Card - Modern Full-Bleed Style */
.feature-card {
    position: relative;
    flex: 0 0 600px;
    height: 450px;
    border-radius: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.feature-card.active {
    transform: scale(1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.feature-card:not(.active) {
    transform: scale(0.9);
    opacity: 0.7;
}

.feature-card:not(.active):hover {
    opacity: 0.85;
    transform: scale(0.92);
}

/* Full-bleed media background */
.feature-card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.feature-card-media video,
.feature-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Gradient overlay for text readability */
.feature-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.1) 40%,
        rgba(0, 0, 0, 0.6) 80%,
        rgba(0, 0, 0, 0.8) 100%
    );
    z-index: 2;
}

/* Content overlay */
.feature-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    z-index: 3;
    color: #fff;
}

/* Label badge */
.feature-card-label {
    display: inline-block;
    padding: 6px 14px;
    background: #f97316;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 14px;
}

/* Large title */
.feature-card-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Timestamp / subtitle */
.feature-card-timestamp {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 16px 0;
}

/* Read more link */
.feature-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 8px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.feature-card-link:hover {
    gap: 12px;
    color: var(--primary-light, #818cf8);
}

.feature-card-link i {
    font-size: 0.85rem;
    transition: transform 0.3s ease;
}

.feature-card-link:hover i {
    transform: translateX(4px);
}

/* Carousel Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    transition: all 0.3s ease;
    color: var(--primary-color);
}

.carousel-nav:hover:not(:disabled) {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(99, 102, 241, 0.3);
}

.carousel-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.carousel-prev {
    left: 20px;
}

.carousel-next {
    right: 20px;
}

.carousel-nav i {
    font-size: 1.3rem;
}

/* Carousel Dots */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

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

.carousel-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.3);
}

/* ==========================================
   FEATURE DETAIL MODAL WITH BENTO GRID
   ========================================== */
.feature-detail-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    overflow-y: auto;
    padding: 40px 20px;
}

.feature-detail-modal.active {
    opacity: 1;
    visibility: visible;
}

.feature-detail-modal-content {
    background: #fff;
    border-radius: 24px;
    max-width: 1000px;
    width: 100%;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.4s ease;
}

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

.feature-detail-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.2s ease;
    z-index: 10;
}

.feature-detail-modal-close:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Video Section */
.feature-detail-video-section {
    background: linear-gradient(135deg, #1e1e2f 0%, #0f0f1a 100%);
    padding: 30px;
}

.feature-detail-video-wrapper {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.feature-detail-video-wrapper video {
    width: 100%;
    display: block;
    background: #000;
    max-height: 450px;
    object-fit: contain;
}

.feature-detail-fullscreen-btn {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.feature-detail-fullscreen-btn:hover {
    background: var(--primary-color);
    transform: scale(1.1);
}

.feature-detail-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin: 24px 0 8px;
}

.feature-detail-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

/* Bento Grid Section */
.feature-detail-bento {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    background: #f8fafc;
}

.bento-item {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bento-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

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

.bento-medium {
    grid-column: span 1;
}

.bento-small {
    grid-column: span 1;
}

.bento-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.bento-icon i {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.bento-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
}

.bento-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

/* Feature Detail Modal - Responsive */
@media (max-width: 768px) {
    .feature-detail-modal {
        padding: 20px 15px;
    }

    .feature-detail-modal-content {
        border-radius: 16px;
    }

    .feature-detail-video-section {
        padding: 20px;
    }

    .feature-detail-title {
        font-size: 1.4rem;
    }

    .feature-detail-bento {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 12px;
    }

    .bento-large,
    .bento-medium,
    .bento-small {
        grid-column: span 1;
    }

    .bento-item {
        padding: 20px;
    }
}

/* Hero Section for App Features */
.app-features-hero {
    padding: 160px 0 100px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0e7ff 50%, #fef3c7 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.app-features-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.app-features-hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    position: relative;
}

.app-features-hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    position: relative;
}

/* Scroll Indicator Animation */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    animation: bounce 2s infinite;
}

.scroll-indicator i {
    font-size: 1.5rem;
}

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

/* ==========================================
   CASCADING FEATURES SECTIONS - STICKY STACKING CARDS
   ========================================== */

.features-cascade {
    position: relative;
    z-index: 10;
}

.cascade-section {
    position: sticky;
    top: 0;
    padding: 80px 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.1);
    transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
    will-change: transform;
}

/* Stacking offset for each card - 8px increments (max ~88px at 12th card) */
.cascade-section:nth-child(1) { top: 0; z-index: 1; }
.cascade-section:nth-child(2) { top: 8px; z-index: 2; }
.cascade-section:nth-child(3) { top: 16px; z-index: 3; }
.cascade-section:nth-child(4) { top: 24px; z-index: 4; }
.cascade-section:nth-child(5) { top: 32px; z-index: 5; }
.cascade-section:nth-child(6) { top: 40px; z-index: 6; }
.cascade-section:nth-child(7) { top: 48px; z-index: 7; }
.cascade-section:nth-child(8) { top: 56px; z-index: 8; }
.cascade-section:nth-child(9) { top: 64px; z-index: 9; }
.cascade-section:nth-child(10) { top: 72px; z-index: 10; }
.cascade-section:nth-child(11) { top: 80px; z-index: 11; }
.cascade-section:nth-child(12) { top: 88px; z-index: 12; }

/* Alternating background colors */
.cascade-section:nth-child(odd) {
    background: var(--bg-primary);
}

.cascade-section:nth-child(even) {
    background: var(--bg-secondary);
}

/* Scale effect when card is being stacked */
.cascade-section.stacked {
    transform: scale(0.95);
    box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.05);
}

/* Visible state for initial animation */
.cascade-section.visible {
    opacity: 1;
}

.cascade-content {
    display: flex;
    align-items: center;
    gap: 60px;
}

.cascade-content.reverse {
    flex-direction: row-reverse;
}

.cascade-text {
    flex: 1;
    max-width: 550px;
}

.cascade-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-radius: 30px;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.cascade-label i {
    font-size: 1rem;
}

.cascade-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.cascade-description {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 30px;
}

.cascade-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cascade-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    color: var(--text-secondary);
    font-size: 1rem;
}

.cascade-features li i {
    color: #10b981;
    font-size: 1.1rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.cascade-video-wrapper {
    flex: 1;
    max-width: 600px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
    background: #000;
    aspect-ratio: 16 / 9;
}

.cascade-video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Responsive Cascading Sections */
@media (max-width: 992px) {
    .cascade-section {
        padding: 60px 0;
        min-height: auto;
        border-radius: 30px 30px 0 0;
    }

    /* Reduce stacking offset on tablet - 6px increments */
    .cascade-section:nth-child(1) { top: 0; }
    .cascade-section:nth-child(2) { top: 6px; }
    .cascade-section:nth-child(3) { top: 12px; }
    .cascade-section:nth-child(4) { top: 18px; }
    .cascade-section:nth-child(5) { top: 24px; }
    .cascade-section:nth-child(6) { top: 30px; }
    .cascade-section:nth-child(7) { top: 36px; }
    .cascade-section:nth-child(8) { top: 42px; }
    .cascade-section:nth-child(9) { top: 48px; }
    .cascade-section:nth-child(10) { top: 54px; }
    .cascade-section:nth-child(11) { top: 60px; }
    .cascade-section:nth-child(12) { top: 66px; }

    .cascade-content,
    .cascade-content.reverse {
        flex-direction: column;
        gap: 40px;
    }

    .cascade-text {
        max-width: 100%;
        text-align: center;
    }

    .cascade-label {
        justify-content: center;
    }

    .cascade-title {
        font-size: 1.875rem;
    }

    .cascade-features li {
        justify-content: center;
        text-align: left;
    }

    .cascade-video-wrapper {
        max-width: 100%;
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cascade-section {
        padding: 50px 0;
        border-radius: 20px 20px 0 0;
    }

    /* Smaller stacking offset on mobile - 4px increments */
    .cascade-section:nth-child(1) { top: 0; }
    .cascade-section:nth-child(2) { top: 4px; }
    .cascade-section:nth-child(3) { top: 8px; }
    .cascade-section:nth-child(4) { top: 12px; }
    .cascade-section:nth-child(5) { top: 16px; }
    .cascade-section:nth-child(6) { top: 20px; }
    .cascade-section:nth-child(7) { top: 24px; }
    .cascade-section:nth-child(8) { top: 28px; }
    .cascade-section:nth-child(9) { top: 32px; }
    .cascade-section:nth-child(10) { top: 36px; }
    .cascade-section:nth-child(11) { top: 40px; }
    .cascade-section:nth-child(12) { top: 44px; }

    .cascade-title {
        font-size: 1.5rem;
    }

    .cascade-description {
        font-size: 1rem;
    }

    .cascade-features li {
        font-size: 0.9rem;
    }
}

/* CTA Button in Cascade Sections */
.cascade-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.25);
}

.cascade-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.35);
}

/* ============================================
   ROLE FEATURES SECTION - Detailed Breakdown
   ============================================ */
.role-features-section {
    padding: 100px 0;
    background: var(--bg-secondary);
}

.role-features-section .section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.role-features-section .section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.role-features-section .section-header h2 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.2;
}

.role-features-section .section-header p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Role Feature Block */
.role-feature-block {
    margin-bottom: 0;
    scroll-margin-top: 100px;
    padding: 80px 0;
    border-radius: 0;
    position: relative;
}

/* Alternating backgrounds for clear section distinction */
.role-feature-block:nth-child(odd) {
    background: var(--bg-secondary);
}

.role-feature-block:nth-child(even) {
    background: var(--bg-primary);
}

/* Add subtle top border for separation */
.role-feature-block:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 1000px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

.role-feature-block:last-of-type {
    margin-bottom: 0;
    padding-bottom: 100px;
}

/* Role Header */
.role-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 50px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--border-color);
}

.role-icon {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.role-icon.accountant-icon {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
}

.role-icon.employee-icon {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.3);
}

.role-icon.approver-icon {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
}

.role-info h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.role-info p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

/* Screen Showcase */
.screen-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 60px;
}

.screen-showcase.reverse {
    direction: rtl;
}

.screen-showcase.reverse > * {
    direction: ltr;
}

.screen-visual {
    position: relative;
}

/* Mock Dashboard Styles */
.mock-dashboard {
    background: var(--bg-card);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.mock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #fff;
}

.mock-title {
    font-weight: 600;
    font-size: 1rem;
}

.mock-sync {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #10b981;
}

.mock-sync i {
    animation: spin 2s linear infinite;
}

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

.mock-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.mock-badge.warning {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Mock Cards Grid */
.mock-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 24px;
}

.mock-card {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mock-card i {
    font-size: 1.5rem;
}

.mock-card.receivables i { color: #10b981; }
.mock-card.payables i { color: #ef4444; }
.mock-card.net-position i { color: #6366f1; }
.mock-card.invoices i { color: #f59e0b; }

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

.mock-card .value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.mock-card .value.positive { color: #10b981; }

.mock-bar {
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 8px;
}

.mock-fill {
    height: 100%;
    border-radius: 3px;
}

.mock-card.receivables .mock-fill { background: linear-gradient(90deg, #10b981 0%, #34d399 100%); }
.mock-card.payables .mock-fill { background: linear-gradient(90deg, #ef4444 0%, #f87171 100%); }

/* Mock Stats Row */
.mock-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.mock-stat {
    text-align: center;
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 10px;
}

.mock-stat .stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
}

.mock-stat .stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.mock-stat.pending .stat-value { color: #f59e0b; }
.mock-stat.approved .stat-value { color: #10b981; }
.mock-stat.rejected .stat-value { color: #ef4444; }

/* Mock Tabs */
.mock-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.mock-tabs span {
    padding: 8px 16px;
    font-size: 0.85rem;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.mock-tabs span.active {
    background: var(--primary-color);
    color: #fff;
}

/* Mock List */
.mock-list {
    padding: 16px 24px;
}

.mock-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    margin-bottom: 10px;
}

.mock-item:last-child {
    margin-bottom: 0;
}

.item-id {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.item-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

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

.item-status {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.item-status.approved {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.item-status.pending {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

/* Mock Bulk Actions */
.mock-bulk-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(59, 130, 246, 0.05);
    border-bottom: 1px solid var(--border-color);
}

.mock-bulk-actions label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}

.mock-bulk-actions button {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mock-bulk-actions .approve-btn {
    background: #10b981;
    color: #fff;
}

.mock-bulk-actions .reject-btn {
    background: #ef4444;
    color: #fff;
}

/* Mock Approval Cards */
.mock-approval-cards {
    padding: 20px 24px;
}

.approval-card {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
}

.approval-card .card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-weight: 600;
}

.approval-card .card-header .amount {
    color: var(--primary-color);
}

.approval-card .card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.approval-card .card-actions {
    display: flex;
    gap: 8px;
}

.approval-card .card-actions button {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.approval-card .btn-approve {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.approval-card .btn-reject {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.approval-card .btn-view {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

/* Screen Description */
.screen-description h4 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.screen-description > p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 24px;
}

.feature-highlights {
    list-style: none;
}

.feature-highlights li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    font-size: 1rem;
    color: var(--text-secondary);
}

.feature-highlights li i {
    color: #10b981;
    margin-top: 4px;
}

/* Feature Bento Grid */
.feature-bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bento-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 28px;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

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

.bento-card.large {
    grid-column: span 2;
}

.bento-card.wide {
    grid-column: span 3;
}

.bento-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.bento-icon i {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.bento-card h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.bento-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.bento-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.bento-tags span {
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.1);
    color: var(--primary-color);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
}

/* Employee Bento Specific */
.employee-bento .bento-icon {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
}

.employee-bento .bento-icon i {
    color: #10b981;
}

/* Approver Bento Specific */
.approver-bento .bento-icon {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
}

.approver-bento .bento-icon i {
    color: #f59e0b;
}

/* Submission Methods */
.submission-methods {
    margin: 50px 0;
    text-align: center;
}

.submission-methods h4 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 40px;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.method-card {
    background: var(--bg-card);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid var(--border-color);
    text-align: center;
    transition: all 0.3s ease;
}

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

.method-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 2rem;
}

.method-icon.whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
}

.method-icon.email {
    background: linear-gradient(135deg, #EA4335 0%, #FBBC04 100%);
    color: #fff;
}

.method-icon.upload {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}

.method-card h5 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.method-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Transaction Types Section */
.transaction-types-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 0;
    padding: 80px 0;
    text-align: center;
    margin-top: 0;
}

.transaction-types-section h3 {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.transaction-types-section p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
}

.transaction-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.transaction-type {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.transaction-type:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-4px);
}

.transaction-type i {
    font-size: 1.8rem;
    color: #fff;
}

.transaction-type span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

/* Responsive Styles for Role Features */
@media (max-width: 1024px) {
    .screen-showcase {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .screen-showcase.reverse {
        direction: ltr;
    }

    .feature-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-card.large,
    .bento-card.wide {
        grid-column: span 2;
    }

    .transaction-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .role-features-section {
        padding: 60px 0;
    }

    .role-features-section .section-header h2 {
        font-size: 2rem;
    }

    .role-header {
        flex-direction: column;
        text-align: center;
    }

    .role-icon {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    .role-info h3 {
        font-size: 1.6rem;
    }

    .feature-bento-grid {
        grid-template-columns: 1fr;
    }

    .bento-card.large,
    .bento-card.wide {
        grid-column: span 1;
    }

    .methods-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .transaction-types-section {
        padding: 50px 0;
        border-radius: 0;
    }

    .transaction-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .transaction-type {
        padding: 16px 12px;
    }

    .mock-stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .mock-cards {
        grid-template-columns: 1fr;
    }

    .mock-item {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
}

@media (max-width: 480px) {
    .role-features-section .section-header h2 {
        font-size: 1.6rem;
    }

    .role-info h3 {
        font-size: 1.4rem;
    }

    .screen-description h4 {
        font-size: 1.3rem;
    }

    .transaction-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mock-tabs span {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

/* Final CTA Section */
.features-final-cta {
    position: relative;
    z-index: 20;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 100px 0;
    text-align: center;
}

.features-final-cta h2 {
    font-size: 2.5rem;
    color: #fff;
    margin-bottom: 20px;
}

.features-final-cta p {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto 40px;
}

.features-final-cta .cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.features-final-cta .btn-primary {
    background: #fff;
    color: var(--primary-color);
}

.features-final-cta .btn-primary:hover {
    background: rgba(255, 255, 255, 0.9);
}

.features-final-cta .btn-outline {
    border-color: #fff;
    color: #fff;
}

.features-final-cta .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   FEATURES CAROUSEL - DARK MODE
   ============================================ */
@media (prefers-color-scheme: dark) {
    .features-carousel-section {
        background: linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%);
    }

    .feature-card {
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    .feature-card.active {
        box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    }

    .carousel-nav {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .carousel-nav:hover:not(:disabled) {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: #fff;
    }

    .carousel-nav:disabled {
        opacity: 0.3;
    }

    .carousel-dot {
        background: rgba(255, 255, 255, 0.25);
    }

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

    .carousel-dot.active {
        background: var(--primary-color);
        box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4);
    }

    /* Feature Detail Modal - Dark Mode */
    .feature-detail-modal-content {
        background: #1a1a2e;
    }

    .feature-detail-bento {
        background: #0f0f1a;
    }

    .bento-item {
        background: #1a1a2e;
        border-color: rgba(255, 255, 255, 0.08);
    }

    .bento-item:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    }

    .bento-item h4 {
        color: #fff;
    }

    .bento-item p {
        color: rgba(255, 255, 255, 0.7);
    }

    /* Hero Section - Dark Mode */
    .app-features-hero {
        background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 100%);
    }

    .app-features-hero::before {
        background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    }

    .app-features-hero h1 {
        color: #fff;
    }

    .app-features-hero p {
        color: rgba(255, 255, 255, 0.7);
    }

    .scroll-indicator {
        color: rgba(255, 255, 255, 0.5);
    }

    /* Final CTA Section - Dark Mode */
    .features-final-cta {
        background: linear-gradient(135deg, #1a1a2e 0%, #0a0a0f 100%);
    }

    .features-final-cta p {
        color: rgba(255, 255, 255, 0.7);
    }

    .features-final-cta .btn-primary {
        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
        color: #fff;
    }

    .features-final-cta .btn-outline {
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .features-final-cta .btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.5);
    }
}

/* ============================================
   FEATURES CAROUSEL - RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .carousel-container {
        padding: 0 80px;
    }

    .feature-card {
        flex: 0 0 500px;
        height: 400px;
    }
}

@media (max-width: 992px) {
    .features-carousel-section {
        padding: 50px 0 80px;
    }

    .carousel-container {
        padding: 0 70px;
    }

    .feature-card {
        flex: 0 0 420px;
        height: 360px;
    }

    .feature-card-content {
        padding: 24px;
    }

    .feature-card-title {
        font-size: 1.6rem;
    }

    .app-features-hero h1 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .features-carousel-section {
        padding: 40px 0 70px;
    }

    .carousel-container {
        padding: 0 60px;
    }

    .carousel-track-wrapper {
        padding: 30px 0;
    }

    .feature-card {
        flex: 0 0 320px;
        height: 320px;
    }

    .feature-card:not(.active) {
        transform: scale(0.85);
    }

    .feature-card-content {
        padding: 20px;
    }

    .feature-card-title {
        font-size: 1.4rem;
    }

    .feature-card-timestamp {
        font-size: 0.8rem;
        margin-bottom: 12px;
    }

    .feature-card-link {
        font-size: 0.85rem;
    }

    .carousel-nav {
        width: 44px;
        height: 44px;
    }

    .carousel-prev {
        left: 10px;
    }

    .carousel-next {
        right: 10px;
    }

    .carousel-dots {
        margin-top: 20px;
        gap: 8px;
    }

    .carousel-dot {
        width: 10px;
        height: 10px;
    }

    .app-features-hero {
        padding: 120px 0 80px;
    }

    .app-features-hero h1 {
        font-size: 2rem;
    }

    .features-final-cta h2 {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .carousel-container {
        padding: 0 50px;
    }

    .feature-card {
        flex: 0 0 280px;
        height: 300px;
    }

    .feature-card-content {
        padding: 16px;
    }

    .feature-card-title {
        font-size: 1.2rem;
        margin-bottom: 6px;
    }

    .feature-card-timestamp {
        font-size: 0.75rem;
        margin-bottom: 10px;
    }

    .feature-card-label {
        font-size: 0.6rem;
        margin-bottom: 10px;
    }

    .carousel-nav {
        width: 38px;
        height: 38px;
    }

    .carousel-prev {
        left: 5px;
    }

    .carousel-next {
        right: 5px;
    }

    .carousel-fullscreen-btn {
        width: 38px;
        height: 38px;
        bottom: 60px;
        font-size: 0.9rem;
    }
}

/* ============================================
   BENTO DEMO PAGE COMPONENTS
   ============================================ */

/* Time Badge for Demo Steps */
.bento-time-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--gradient-primary);
    color: var(--white);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: var(--spacing-lg);
}

.bento-time-badge::before {
    content: '⏱️';
}

/* Testimonial Cards for Demo Page */
.bento-testimonial-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.bento-testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.bento-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

.bento-testimonial-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.bento-testimonial-role {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.bento-testimonial-content {
    flex: 1;
}

.bento-testimonial-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-sm);
}

.bento-testimonial-content strong {
    color: var(--text-primary);
}

.bento-quote {
    font-style: italic;
    color: var(--primary-color);
    font-size: 1.1rem;
    border-left: 3px solid var(--primary-color);
    padding-left: var(--spacing-md);
    margin: 0;
    margin-top: auto;
}

@media (max-width: 768px) {
    .bento-testimonial-header {
        flex-direction: column;
        text-align: center;
    }

    .bento-avatar {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }
}

/* ============================================
   BENTO PRICING PAGE COMPONENTS
   ============================================ */

/* Pricing Grid */
.bento-pricing-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--bento-gap);
    margin-bottom: var(--spacing-2xl);
}

/* Pricing Card */
.bento-pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl);
    position: relative;
}

.bento-pricing-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
}

.bento-price-amount {
    margin-bottom: var(--spacing-md);
}

.bento-currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary-color);
    vertical-align: top;
}

.bento-price {
    font-size: 2.5rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bento-price-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: var(--spacing-lg);
}

.bento-pricing-card .btn {
    width: 100%;
    margin-top: auto;
}

/* Featured Pricing Card */
.bento-pricing-featured {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 2px solid var(--primary-color);
    transform: scale(1.05);
    z-index: 2;
}

.bento-pricing-featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: var(--bento-radius) var(--bento-radius) 0 0;
}

.bento-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gradient-primary);
    color: var(--white);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* Promo Card */
.bento-promo-card {
    text-align: center;
    padding: var(--spacing-xl);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(236, 72, 153, 0.15) 100%);
    border: 2px solid rgba(99, 102, 241, 0.3);
}

.bento-promo-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--spacing-sm);
}

.bento-promo-card h3::before {
    content: '🎁 ';
}

.bento-promo-card p {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* Calculator Wrapper */
.bento-calculator-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);
}

.bento-calculator-wrapper .calculator-input {
    padding: var(--spacing-xl);
}

.bento-calculator-output {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
}

/* Result Cards */
.bento-result-card {
    text-align: center;
    padding: var(--spacing-lg);
}

.bento-result-card .bento-icon {
    margin: 0 auto var(--spacing-md);
}

.bento-result-card h3 {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-sm);
}

.bento-result-amount {
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--spacing-sm);
}

.bento-result-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.bento-result-highlight {
    grid-column: span 2;
    background: var(--gradient-primary);
}

.bento-result-highlight .bento-icon {
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
}

.bento-result-highlight h3,
.bento-result-highlight .bento-result-label {
    color: rgba(255, 255, 255, 0.9);
}

.bento-result-highlight .bento-result-amount {
    background: none;
    -webkit-text-fill-color: var(--white);
    color: var(--white);
}

/* Features Checklist */
.bento-features-checklist {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md);
    max-width: 1200px;
    margin: 0 auto;
}

.bento-feature-check {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-lg);
    gap: var(--spacing-sm);
}

.bento-feature-check .bento-icon {
    margin-bottom: var(--spacing-xs);
}

.bento-feature-check span {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Pricing Responsive */
@media (max-width: 1200px) {
    .bento-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .bento-pricing-featured {
        transform: scale(1);
    }

    .bento-features-checklist {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .bento-calculator-wrapper {
        grid-template-columns: 1fr;
    }

    .bento-features-checklist {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .bento-calculator-output {
        grid-template-columns: 1fr;
    }

    .bento-result-highlight {
        grid-column: span 1;
    }

    .bento-features-checklist {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bento-pricing-grid {
        grid-template-columns: 1fr;
    }

    .bento-features-checklist {
        grid-template-columns: 1fr;
    }

    .bento-price {
        font-size: 2rem;
    }
}

/* ============================================
   ENHANCED MOBILE RESPONSIVENESS
   index.html & demo.html
   ============================================ */

/* --- HERO SECTION MOBILE IMPROVEMENTS --- */
@media (max-width: 768px) {
    .hero {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-xl);
    }

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

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

    .hero-title br {
        display: none;
    }

    .gradient-orb {
        opacity: 0.3;
        transform: scale(0.6);
    }

    .orb-1, .orb-2, .orb-3 {
        width: 150px;
        height: 150px;
    }

    /* Better social proof on mobile */
    .social-proof {
        text-align: left;
        padding: 0 var(--spacing-xs);
    }

    .proof-item {
        gap: var(--spacing-sm);
        font-size: 0.85rem;
    }

    .proof-item i {
        font-size: 1.1rem;
        min-width: 20px;
    }

    .proof-item span {
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .hero {
        min-height: auto;
        margin-top: 54px;
    }

    .hero-title {
        padding: 0;
        word-wrap: break-word;
        hyphens: auto;
    }

    .hero-subtitle {
        line-height: 1.6;
        padding: 0 var(--spacing-xs);
    }

    .social-proof {
        margin: var(--spacing-lg) auto;
    }

    .proof-item {
        font-size: 0.8rem;
    }
}

/* --- PROBLEM SECTION MOBILE IMPROVEMENTS --- */
@media (max-width: 768px) {
    .problem-section {
        padding: var(--spacing-xl) 0;
    }

    .problem-section h2 {
        font-size: 1.5rem;
        line-height: 1.3;
        margin-bottom: var(--spacing-lg);
    }

    .problem-content {
        order: 1;
    }

    .problem-image {
        order: 2;
        display: flex;
        margin-top: var(--spacing-lg);
    }

    .promo-video-wrapper {
        max-width: 100%;
    }

    .problem-item span {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .problem-item i {
        font-size: 1rem;
        margin-top: 3px;
    }

    /* Bento stats grid mobile */
    .bento-stats-grid {
        gap: var(--spacing-sm);
    }

    .bento-card-stat {
        padding: var(--spacing-md) !important;
    }

    .stat-value-wrapper {
        margin-bottom: var(--spacing-xs);
    }

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

@media (max-width: 480px) {
    .problem-section h2 {
        font-size: 1.25rem;
    }

    .problem-list {
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-lg);
    }

    .problem-item {
        gap: var(--spacing-sm);
    }

    .problem-item span {
        font-size: 0.85rem;
    }
}

/* --- SOLUTION SECTION MOBILE IMPROVEMENTS --- */
@media (max-width: 768px) {
    .solution-section {
        padding: var(--spacing-xl) 0;
    }

    .solution-svg-container {
        max-width: 100%;
        overflow-x: hidden;
        padding: var(--spacing-sm);
    }

    .solution-svg-container svg {
        width: 100%;
        height: auto;
        min-width: 0;
    }

    .bento-grid-solution {
        gap: var(--spacing-md);
    }

    .bento-card-solution {
        padding: var(--spacing-lg) !important;
    }

    .bento-card-solution h3 {
        font-size: 1.1rem;
    }

    .bento-card-solution p {
        font-size: 0.9rem;
    }

    .bento-step-number {
        font-size: 0.9rem;
        padding: 6px 14px;
    }

    .bento-solution-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .bento-card-solution {
        padding: var(--spacing-md) !important;
    }

    .bento-card-solution h3 {
        font-size: 1rem;
    }

    .bento-solution-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
}

/* --- INTEGRATIONS CAROUSEL MOBILE --- */
@media (max-width: 768px) {
    .integrations-section {
        padding: var(--spacing-xl) 0;
    }

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

    .carousel-btn {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
        flex-shrink: 0;
    }

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

    .carousel-slide {
        min-width: 70px;
        min-height: 90px;
        font-size: 1.5rem;
        padding: var(--spacing-sm);
    }

    .carousel-slide span {
        font-size: 0.7rem;
    }

    .carousel-slide img {
        max-width: 50%;
        max-height: 50%;
    }

    .carousel-subtitle {
        font-size: 0.9rem;
        padding: 0 var(--spacing-sm);
    }

    .carousel-subtitle br {
        display: none;
    }
}

@media (max-width: 480px) {
    .carousel-slide {
        min-width: 60px;
        min-height: 80px;
        font-size: 1.3rem;
    }

    .carousel-slide span {
        font-size: 0.65rem;
    }

    .carousel-btn {
        width: 32px;
        height: 32px;
    }
}

/* ============================================
   INNOVATIVE MOBILE FEATURES & TESTIMONIALS
   Complete redesign for mobile readability
   ============================================ */

@media (max-width: 768px) {
    /* --- FEATURES SHOWCASE - HORIZONTAL SCROLL CAROUSEL --- */
    .features-showcase {
        padding: var(--spacing-xl) 0;
        overflow: hidden;
    }

    .features-showcase .section-title {
        font-size: 1.5rem;
        padding: 0 var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    /* Transform bento grid into horizontal scroll */
    .bento-grid-features {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
        padding-bottom: var(--spacing-lg);
        margin: 0 calc(-1 * var(--spacing-md));
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    .bento-grid-features::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* Each card becomes a snap point */
    .bento-grid-features .bento-card {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
        scroll-snap-align: center;
        padding: var(--spacing-lg) !important;
        margin: 0;
        border-radius: var(--radius-lg);
        /* Add left accent border */
        border-left: 4px solid var(--primary-color);
        background: var(--glass-bg);
    }

    /* Featured card styling on mobile */
    .bento-grid-features .bento-card-featured {
        flex: 0 0 300px;
        min-width: 300px;
        max-width: 300px;
        border-left-color: var(--secondary-color);
        background: linear-gradient(135deg, var(--glass-bg) 0%, rgba(99, 102, 241, 0.1) 100%);
    }

    .bento-grid-features .bento-card-featured::before {
        display: none;
    }

    /* Spanning cards become normal size on mobile */
    .bento-grid-features .bento-span-2 {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }

    .bento-grid-features .bento-card h3 {
        font-size: 1.15rem;
        margin-bottom: var(--spacing-sm);
    }

    .bento-grid-features .bento-card h4 {
        font-size: 1.05rem;
        margin-bottom: var(--spacing-xs);
    }

    .bento-grid-features .bento-card p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .bento-grid-features .bento-card-featured h3 {
        font-size: 1.25rem;
    }

    .bento-grid-features .bento-card-featured p {
        font-size: 0.95rem !important;
        max-width: none;
    }

    /* Icon improvements */
    .bento-grid-features .bento-icon {
        width: 50px;
        height: 50px;
        margin-bottom: var(--spacing-md);
    }

    .bento-grid-features .bento-icon-lg {
        width: 60px;
        height: 60px;
    }

    /* Scroll indicator hint */
    .features-showcase .container::after {
        content: 'Swipe to see more →';
        display: block;
        text-align: center;
        font-size: 0.75rem;
        color: var(--text-muted);
        margin-top: var(--spacing-sm);
        opacity: 0.7;
    }

    /* --- TESTIMONIALS - STACKED CARD DESIGN --- */
    .testimonials-section {
        padding: var(--spacing-xl) 0;
    }

    .testimonials-section .section-title {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-bottom: var(--spacing-lg);
    }

    /* Stack testimonials vertically with visual hierarchy */
    .bento-grid-testimonials {
        display: flex !important;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    /* Featured testimonial stands out */
    .bento-grid-testimonials .bento-card-featured {
        padding: var(--spacing-lg) !important;
        position: relative;
        /* Gradient top border */
        border-top: 4px solid transparent;
        background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
                    var(--gradient-primary) border-box;
    }

    .bento-grid-testimonials .bento-card-featured::before {
        content: '★ Featured Review';
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
        font-size: 0.7rem;
        font-weight: 600;
        color: var(--primary-color);
        background: rgba(99, 102, 241, 0.1);
        padding: 4px 10px;
        border-radius: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .bento-grid-testimonials .bento-card-featured .testimonial-text {
        font-size: 1.05rem !important;
        line-height: 1.6;
        margin-bottom: var(--spacing-lg);
    }

    /* Regular testimonial cards */
    .bento-card-testimonial {
        padding: var(--spacing-md) !important;
        border-left: 3px solid var(--primary-light);
    }

    .bento-card-testimonial .testimonial-text {
        font-size: 0.9rem !important;
        line-height: 1.5;
        margin-bottom: var(--spacing-md);
    }

    /* Quote icon smaller on mobile */
    .testimonial-quote-icon {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-sm);
    }

    /* Author layout */
    .testimonial-author {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }

    .author-avatar {
        width: 42px;
        height: 42px;
        font-size: 0.9rem;
    }

    .testimonial-author .author-info strong {
        font-size: 0.95rem;
    }

    .testimonial-author .author-info span {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    /* Compact star rating */
    .testimonial-rating {
        font-size: 0.8rem;
        gap: 2px;
    }
}

@media (max-width: 480px) {
    /* Even smaller cards for very small screens */
    .bento-grid-features .bento-card {
        flex: 0 0 260px;
        min-width: 260px;
        max-width: 260px;
        padding: var(--spacing-md) !important;
    }

    .bento-grid-features .bento-card-featured {
        flex: 0 0 280px;
        min-width: 280px;
        max-width: 280px;
    }

    .bento-grid-features .bento-card h3 {
        font-size: 1.05rem;
    }

    .bento-grid-features .bento-card h4 {
        font-size: 0.95rem;
    }

    .bento-grid-features .bento-card p {
        font-size: 0.85rem;
    }

    .bento-grid-features .bento-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }

    .bento-icon-gradient {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    /* Testimonials even more compact */
    .bento-grid-testimonials .bento-card-featured .testimonial-text {
        font-size: 0.95rem !important;
    }

    .bento-card-testimonial .testimonial-text {
        font-size: 0.85rem !important;
    }

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

    .author-avatar {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
}

/* --- HOW IT WORKS / STEPS SECTION MOBILE --- */
@media (max-width: 768px) {
    .how-it-works {
        padding: var(--spacing-xl) 0;
    }

    .steps-grid {
        gap: var(--spacing-lg);
    }

    .step-card {
        padding: var(--spacing-lg);
        text-align: center;
    }

    .step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: var(--spacing-md);
    }

    .step-icon {
        font-size: 2rem;
        margin-bottom: var(--spacing-md);
    }

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

    .step-card p {
        font-size: 0.85rem;
    }

    .step-time {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

@media (max-width: 480px) {
    .step-card {
        padding: var(--spacing-md);
    }

    .step-number {
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }

    .step-icon {
        font-size: 1.75rem;
    }

    .step-card h3 {
        font-size: 1rem;
    }
}

/* --- TESTIMONIALS SECTION MOBILE --- */
@media (max-width: 768px) {
    .testimonials-section {
        padding: var(--spacing-xl) 0;
    }

    .bento-grid-testimonials {
        gap: var(--spacing-md);
    }

    .bento-card-testimonial {
        padding: var(--spacing-lg) !important;
    }

    .testimonial-quote-icon {
        font-size: 1.25rem;
        margin-bottom: var(--spacing-sm);
    }

    .testimonial-text {
        font-size: 0.9rem;
        line-height: 1.6;
    }

    .bento-card-featured .testimonial-text {
        font-size: 1rem;
    }

    .testimonial-author {
        margin-top: var(--spacing-md);
    }

    .author-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .author-info strong {
        font-size: 0.9rem;
    }

    .author-info span {
        font-size: 0.75rem;
    }

    .testimonial-rating {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .bento-card-testimonial {
        padding: var(--spacing-md) !important;
    }

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

    .author-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

/* --- FAQ SECTION MOBILE --- */
@media (max-width: 768px) {
    .faq-section {
        padding: var(--spacing-xl) 0;
    }

    .faq-search-input {
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }

    .faq-question {
        padding: var(--spacing-md);
        font-size: 0.9rem;
    }

    .faq-question span {
        padding-right: var(--spacing-md);
    }

    .faq-item.active .faq-answer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }

    .faq-answer p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .faq-question {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.85rem;
    }

    .faq-item.active .faq-answer {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
}

/* --- CTA SECTION MOBILE --- */
@media (max-width: 768px) {
    .cta-section {
        padding: var(--spacing-xl) 0;
    }

    .cta-section h2 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-md);
    }

    .cta-section p {
        font-size: 0.9rem;
        margin-bottom: var(--spacing-lg);
    }

    .cta-secondary {
        font-size: 0.8rem;
        margin-top: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    .cta-section h2 {
        font-size: 1.25rem;
    }

    .cta-section p {
        font-size: 0.85rem;
    }
}

/* ============================================
   DEMO.HTML MOBILE IMPROVEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Demo Hero */
    .demo-hero {
        margin-top: 64px;
        padding: var(--spacing-lg) 0;
    }

    .demo-hero h1 {
        font-size: 1.75rem;
    }

    .demo-hero p {
        font-size: 1rem;
    }

    /* Demo Booking Section */
    .demo-booking-section {
        padding: var(--spacing-xl) 0;
    }

    .demo-calendar,
    .demo-form-wrapper {
        padding: var(--spacing-lg);
    }

    .demo-calendar h2,
    .demo-form-wrapper h2 {
        font-size: 1.25rem;
    }

    /* Calendar Grid Improvements */
    .calendar-placeholder {
        padding: var(--spacing-md);
    }

    .calendar-header {
        margin-bottom: var(--spacing-md);
        font-size: 0.9rem;
    }

    .calendar-header button {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .calendar-grid {
        gap: var(--spacing-xs);
    }

    .calendar-day-header {
        font-size: 0.7rem;
        padding: var(--spacing-xs);
    }

    .calendar-grid button {
        padding: 8px 4px;
        font-size: 0.8rem;
    }

    #selectedDate {
        font-size: 0.85rem;
        padding: var(--spacing-sm);
    }

    /* Form Improvements */
    .form-group label {
        font-size: 0.9rem;
    }

    .form-input {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: 0.9rem;
    }

    .checkbox-label {
        font-size: 0.85rem;
    }

    .checkbox-label input {
        width: 16px;
        height: 16px;
    }

    .form-note {
        font-size: 0.8rem;
    }

    /* What to Expect Section */
    .what-to-expect h2 {
        font-size: 1.5rem;
        margin-bottom: var(--spacing-lg);
    }

    .bento-grid-3 {
        gap: var(--spacing-md);
    }

    /* Hide connectors on mobile */
    .bento-grid-3 .bento-connector {
        display: none;
    }

    /* Time badges */
    .bento-time-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }

    /* Success Stories / Case Studies */
    .case-studies h2 {
        font-size: 1.5rem;
    }

    .bento-testimonial-card {
        padding: var(--spacing-lg) !important;
    }

    .bento-testimonial-header {
        gap: var(--spacing-sm);
    }

    .bento-avatar {
        width: 40px;
        height: 40px;
        font-size: 0.85rem;
    }

    .bento-testimonial-header h3 {
        font-size: 1rem;
    }

    .bento-testimonial-role {
        font-size: 0.75rem;
    }

    .bento-testimonial-content p {
        font-size: 0.85rem;
    }

    .bento-quote {
        font-size: 0.9rem;
        padding: var(--spacing-sm);
    }

    /* Demo FAQ */
    .demo-faq h2 {
        font-size: 1.5rem;
    }

    /* Demo CTA */
    .demo-cta h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .demo-hero {
        margin-top: 54px;
    }

    .demo-hero h1 {
        font-size: 1.5rem;
    }

    .demo-hero p {
        font-size: 0.9rem;
    }

    .demo-calendar,
    .demo-form-wrapper {
        padding: var(--spacing-md);
    }

    .demo-calendar h2,
    .demo-form-wrapper h2 {
        font-size: 1.1rem;
    }

    /* Smaller calendar cells */
    .calendar-day-header {
        font-size: 0.65rem;
    }

    .calendar-grid button {
        padding: 6px 2px;
        font-size: 0.75rem;
    }

    .what-to-expect h2,
    .case-studies h2,
    .demo-faq h2,
    .demo-cta h2 {
        font-size: 1.25rem;
    }

    .bento-testimonial-card {
        padding: var(--spacing-md) !important;
    }

    .bento-avatar {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }

    .bento-testimonial-header h3 {
        font-size: 0.95rem;
    }

    .bento-quote {
        font-size: 0.85rem;
    }
}

/* --- TOUCH-FRIENDLY IMPROVEMENTS --- */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-toggle span {
        height: 3px;
    }

    .faq-question {
        min-height: 54px;
    }

    .carousel-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Disable hover effects on touch devices */
    .bento-card:hover {
        transform: none;
    }

    .bento-card:active {
        transform: scale(0.98);
    }

    .carousel-slide:hover {
        transform: none;
    }

    .carousel-slide:active {
        transform: scale(0.95);
    }

    /* Better tap feedback */
    .btn:active,
    .bento-card:active,
    .faq-question:active {
        opacity: 0.8;
        transition: opacity 0.1s ease;
    }
}

/* --- LANDSCAPE MOBILE IMPROVEMENTS --- */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--spacing-xl) 0;
    }

    .social-proof {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    .hero-buttons {
        flex-direction: row;
        gap: var(--spacing-md);
    }

    .hero-buttons .btn {
        width: auto;
        flex: 1;
    }
}

/* --- SAFE AREA INSETS (Notched Devices) --- */
@supports (padding: max(0px)) {
    .header {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }

    .footer {
        padding-bottom: max(var(--spacing-lg), env(safe-area-inset-bottom));
    }

    .container {
        padding-left: max(var(--spacing-md), env(safe-area-inset-left));
        padding-right: max(var(--spacing-md), env(safe-area-inset-right));
    }
}

/* ============================================
   FEATURE PAGES MOBILE IMPROVEMENTS
   (whatsapp-integration.html, email-integration.html)
   ============================================ */

@media (max-width: 768px) {
    /* Feature Hero */
    .feature-hero {
        margin-top: 64px;
        padding: var(--spacing-xl) 0;
    }

    .feature-hero h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .feature-hero p {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .feature-cta {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .feature-cta .btn {
        width: 100%;
    }

    /* Process Flow Section */
    .process-flow {
        padding: var(--spacing-xl) 0;
    }

    .flow-header h2 {
        font-size: 1.5rem;
    }

    .flow-header p {
        font-size: 0.9rem;
    }

    /* Feature Showcase Section */
    .feature-showcase {
        padding: var(--spacing-xl) 0;
    }

    .feature-showcase .section-header h2 {
        font-size: 1.5rem;
    }

    .feature-showcase .section-header p {
        font-size: 0.9rem;
    }

    /* Global overflow prevention */
    .bento-card,
    .bento-feature-card,
    .feature-content {
        max-width: 100%;
        overflow: hidden;
    }

    /* Ensure text doesn't overflow */
    .bento-card h3,
    .bento-card h4,
    .bento-card p,
    .feature-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* Process flow cards on feature pages */
    .process-flow .bento-card {
        padding: var(--spacing-lg);
    }

    .process-flow .bento-card h3 {
        font-size: 1rem;
    }

    .process-flow .bento-card p {
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .feature-hero {
        margin-top: 54px;
        padding: var(--spacing-lg) 0;
    }

    .feature-hero h1 {
        font-size: 1.25rem;
    }

    .feature-hero p {
        font-size: 0.85rem;
    }

    .flow-header h2,
    .feature-showcase .section-header h2 {
        font-size: 1.25rem;
    }

    .flow-header p,
    .feature-showcase .section-header p {
        font-size: 0.85rem;
    }

    .process-flow .bento-card {
        padding: var(--spacing-md);
    }

    .process-flow .bento-card h3 {
        font-size: 0.95rem;
    }

    .process-flow .bento-card p {
        font-size: 0.8rem;
    }

    .process-flow .bento-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .process-flow .bento-step-number {
        font-size: 0.8rem;
        padding: 4px 10px;
    }
}

/* Global mobile overflow prevention */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    .container {
        max-width: 100%;
        overflow-x: hidden;
    }

    section {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Ensure all text content wraps properly */
    p, li, span, h1, h2, h3, h4, h5, h6 {
        max-width: 100%;
    }

    /* Video containers responsive */
    iframe,
    video,
    .feature-video-container {
        max-width: 100%;
    }
}

/* --- PRINT STYLES --- */
@media print {
    .hero-background,
    .gradient-orb,
    .neural-canvas,
    .hero-video,
    .carousel-container,
    .nav-menu,
    .header-cta,
    .nav-toggle {
        display: none !important;
    }

    .hero {
        margin-top: 0;
        min-height: auto;
        padding: 20px;
    }

    .bento-card {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body {
        background: white !important;
        color: black !important;
    }
}

/* ============================================
   FLOATING WHATSAPP CHAT BUTTON
   ============================================ */

.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.whatsapp-float-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: floatPulse 2s ease-in-out infinite;
}

.whatsapp-float-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(37, 211, 102, 0.5), 0 4px 15px rgba(0, 0, 0, 0.15);
}

.whatsapp-float-btn i {
    font-size: 1.4rem;
}

.whatsapp-float-btn span {
    white-space: nowrap;
}

@keyframes floatPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 25px rgba(37, 211, 102, 0.6), 0 3px 12px rgba(0, 0, 0, 0.12);
    }
}

/* Notification Badge */
.whatsapp-float-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    animation: badgeBounce 1s ease-in-out infinite;
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }

    .whatsapp-float-btn {
        padding: 12px 18px;
        font-size: 0.9rem;
        gap: 8px;
    }

    .whatsapp-float-btn i {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
    }

    .whatsapp-float-btn {
        padding: 12px 16px;
    }

    .whatsapp-float-btn span {
        display: none;
    }

    .whatsapp-float-btn {
        padding: 14px;
        border-radius: 50%;
    }

    .whatsapp-float-btn i {
        font-size: 1.5rem;
    }
}

/* ========================================
   EMAIL FLOATING BUTTON
======================================== */
.email-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.email-float-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    color: #fff;
    padding: 14px 24px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    animation: emailFloatPulse 2s ease-in-out infinite;
}

.email-float-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5), 0 4px 15px rgba(0, 0, 0, 0.15);
}

.email-float-btn i {
    font-size: 1.4rem;
}

.email-float-btn span {
    white-space: nowrap;
}

@keyframes emailFloatPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4), 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    50% {
        box-shadow: 0 6px 25px rgba(99, 102, 241, 0.6), 0 3px 12px rgba(0, 0, 0, 0.12);
    }
}

/* Email Notification Badge */
.email-float-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 12px;
    animation: badgeBounce 1s ease-in-out infinite;
}

/* Email Float Mobile Responsive */
@media (max-width: 768px) {
    .email-float {
        bottom: 20px;
        right: 20px;
    }

    .email-float-btn {
        padding: 12px 18px;
        font-size: 0.9rem;
        gap: 8px;
    }

    .email-float-btn i {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .email-float {
        bottom: 15px;
        right: 15px;
    }

    .email-float-btn {
        padding: 12px 16px;
    }

    .email-float-btn span {
        display: none;
    }

    .email-float-btn {
        padding: 14px;
        border-radius: 50%;
    }

    .email-float-btn i {
        font-size: 1.5rem;
    }
}

/* ===================================
   CHATBOT WIDGET STYLES
   =================================== */

/* Widget Container */
.zb-chat-widget {
    --zb-primary: #6366F1;
    --zb-primary-dark: #4F46E5;
    --zb-primary-light: #818CF8;
    --zb-secondary: #10B981;
    --zb-bg-dark: #1E1E2E;
    --zb-bg-light: #2D2D3F;
    --zb-text-primary: #FFFFFF;
    --zb-text-secondary: rgba(255, 255, 255, 0.7);
    --zb-border: rgba(255, 255, 255, 0.1);
    --zb-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    --zb-radius: 16px;
    --zb-radius-sm: 12px;
    --zb-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Toggle Button */
.zb-chat-toggle {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zb-primary) 0%, var(--zb-primary-dark) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
    transition: var(--zb-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zb-chat-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(99, 102, 241, 0.5);
}

.zb-chat-toggle:active {
    transform: scale(0.98);
}

.zb-chat-toggle-icon {
    position: relative;
    width: 28px;
    height: 28px;
}

.zb-chat-toggle-icon svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    transition: var(--zb-transition);
}

.zb-icon-chat {
    opacity: 1;
    transform: scale(1);
}

.zb-icon-close {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.zb-chat-toggle.zb-active .zb-icon-chat {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.zb-chat-toggle.zb-active .zb-icon-close {
    opacity: 1;
    transform: scale(1) rotate(0);
}

/* Notification Badge */
.zb-chat-toggle-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 22px;
    height: 22px;
    background: #EF4444;
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: zbBadgePulse 2s ease-in-out infinite;
}

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

/* Chat Window */
.zb-chat-window {
    position: absolute;
    bottom: 75px;
    right: 0;
    width: 380px;
    height: 520px;
    background: var(--zb-bg-dark);
    border-radius: var(--zb-radius);
    box-shadow: var(--zb-shadow);
    border: 1px solid var(--zb-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom right;
    transition: var(--zb-transition);
}

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

/* Chat Header */
.zb-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--zb-primary) 0%, var(--zb-primary-dark) 100%);
    border-bottom: 1px solid var(--zb-border);
}

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

.zb-chat-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zb-chat-avatar img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.zb-chat-status {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: var(--zb-secondary);
    border: 2px solid white;
    border-radius: 50%;
}

.zb-chat-header-text h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.zb-chat-subtitle {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
}

.zb-chat-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zb-transition);
}

.zb-chat-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.zb-chat-close svg {
    width: 18px;
    height: 18px;
    color: white;
}

/* Header Actions Container */
.zb-chat-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Maximize Button */
.zb-chat-maximize {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zb-transition);
    position: relative;
}

.zb-chat-maximize:hover {
    background: rgba(255, 255, 255, 0.2);
}

.zb-chat-maximize svg {
    width: 16px;
    height: 16px;
    color: white;
    position: absolute;
    transition: var(--zb-transition);
}

.zb-icon-maximize {
    opacity: 1;
}

.zb-icon-minimize {
    opacity: 0;
}

.zb-chat-maximized .zb-icon-maximize {
    opacity: 0;
}

.zb-chat-maximized .zb-icon-minimize {
    opacity: 1;
}

/* Maximized State - Vertical Expansion Only */
.zb-chat-widget.zb-chat-maximized .zb-chat-window {
    height: calc(100vh - 120px);
    max-height: 800px;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Messages Area */
.zb-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--zb-bg-dark);
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
.zb-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.zb-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.zb-chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.zb-chat-messages::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Message Styles */
.zb-message {
    display: flex;
    gap: 10px;
    max-width: 85%;
    animation: zbMessageFadeIn 0.3s ease-out;
}

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

.zb-message-user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.zb-message-bot {
    align-self: flex-start;
}

.zb-message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--zb-bg-light);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.zb-message-avatar img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.zb-message-content {
    position: relative;
    padding: 12px 16px;
    border-radius: var(--zb-radius-sm);
    font-size: 0.9rem;
    line-height: 1.5;
}

.zb-message-user .zb-message-content {
    background: linear-gradient(135deg, var(--zb-primary) 0%, var(--zb-primary-dark) 100%);
    color: white;
    border-bottom-right-radius: 4px;
}

.zb-message-bot .zb-message-content {
    background: var(--zb-bg-light);
    color: var(--zb-text-primary);
    border-bottom-left-radius: 4px;
}

.zb-message-content p {
    margin: 0;
}

.zb-message-content a {
    color: var(--zb-primary-light);
    text-decoration: underline;
}

.zb-message-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    padding: 2px 8px;
    background: var(--zb-secondary);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
}

/* Typing Indicator */
.zb-typing-dots {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.zb-typing-dots span {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: zbTypingBounce 1.4s ease-in-out infinite;
}

.zb-typing-dots span:nth-child(1) { animation-delay: 0s; }
.zb-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.zb-typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes zbTypingBounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

/* Quick Replies */
.zb-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--zb-bg-dark);
    border-top: 1px solid var(--zb-border);
}

.zb-quick-reply {
    padding: 8px 14px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 20px;
    color: var(--zb-primary-light);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--zb-transition);
    white-space: nowrap;
}

.zb-quick-reply:hover {
    background: rgba(99, 102, 241, 0.2);
    border-color: var(--zb-primary);
}

/* Input Area */
.zb-chat-input-area {
    display: flex;
    gap: 10px;
    padding: 16px;
    background: var(--zb-bg-light);
    border-top: 1px solid var(--zb-border);
}

.zb-chat-input {
    flex: 1;
    padding: 12px 16px;
    background: var(--zb-bg-dark);
    border: 1px solid var(--zb-border);
    border-radius: 24px;
    color: var(--zb-text-primary);
    font-size: 0.9rem;
    outline: none;
    transition: var(--zb-transition);
}

.zb-chat-input::placeholder {
    color: var(--zb-text-secondary);
}

.zb-chat-input:focus {
    border-color: var(--zb-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.zb-chat-send {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--zb-primary) 0%, var(--zb-primary-dark) 100%);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--zb-transition);
    flex-shrink: 0;
}

.zb-chat-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
}

.zb-chat-send:active {
    transform: scale(0.95);
}

.zb-chat-send svg {
    width: 20px;
    height: 20px;
    color: white;
}

/* Chat Footer */
.zb-chat-footer {
    padding: 10px 16px;
    background: var(--zb-bg-dark);
    border-top: 1px solid var(--zb-border);
    text-align: center;
}

.zb-chat-footer span {
    font-size: 0.7rem;
    color: var(--zb-text-secondary);
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .zb-chat-widget {
        bottom: 16px;
        right: 16px;
    }

    .zb-chat-toggle {
        width: 56px;
        height: 56px;
    }

    .zb-chat-window {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform: translateY(100%);
    }

    .zb-chat-widget.zb-chat-open .zb-chat-window {
        transform: translateY(0);
    }

    .zb-chat-header {
        padding: 16px;
        border-radius: 0;
    }

    .zb-quick-replies {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .zb-quick-replies::-webkit-scrollbar {
        display: none;
    }

    /* Hide maximize button on mobile - already full screen */
    .zb-chat-maximize {
        display: none;
    }
}

/* Tablet Responsive */
@media (min-width: 481px) and (max-width: 768px) {
    .zb-chat-window {
        width: 340px;
        height: 480px;
        bottom: 70px;
    }
}

/* Hide when other floats are present - adjust z-index */
.zb-chat-widget.has-whatsapp {
    bottom: 100px;
}

/* Accessibility - Focus States */
.zb-chat-toggle:focus-visible,
.zb-chat-close:focus-visible,
.zb-chat-maximize:focus-visible,
.zb-quick-reply:focus-visible,
.zb-chat-send:focus-visible {
    outline: 2px solid var(--zb-primary-light);
    outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zb-chat-widget * {
        animation: none !important;
        transition: none !important;
    }
}

/* Print - Hide Widget */
@media print {
    .zb-chat-widget {
        display: none !important;
    }
}

/* ============================================
   PROMO VIDEO WITH SCROLL ZOOM EFFECT
   ============================================ */

.promo-video-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    perspective: 1000px;
}

/* Video Loading Placeholder */
.promo-video-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: linear-gradient(135deg, var(--bg-tertiary, #1a1a2e) 0%, var(--bg-secondary, #0f0f1a) 100%);
    z-index: 5;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.promo-video-loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.promo-video-loader span {
    color: var(--text-secondary, rgba(255, 255, 255, 0.7));
    font-size: 0.9rem;
    font-weight: 500;
}

.promo-loader-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: var(--primary-color, #6366F1);
    border-radius: 50%;
    animation: promoSpinLoader 0.8s linear infinite;
}

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

.promo-video-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-xl, 20px);
    overflow: hidden;
    background: var(--bg-tertiary, #1a1a2e);
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.3),
        0 10px 30px rgba(99, 102, 241, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.85) translateY(30px);
    opacity: 0.7;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.6s ease;
    will-change: transform, opacity;
}

/* Scroll-triggered zoom state */
.promo-video-wrapper.zoomed-in {
    transform: scale(1) translateY(0);
    opacity: 1;
    box-shadow:
        0 40px 80px rgba(0, 0, 0, 0.4),
        0 20px 50px rgba(99, 102, 241, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Decorative frame border */
.promo-video-wrapper::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg,
        var(--primary-color, #6366F1) 0%,
        var(--secondary-color, #0EA5E9) 50%,
        var(--accent-color, #A855F7) 100%);
    border-radius: calc(var(--radius-xl, 20px) + 2px);
    z-index: -1;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.promo-video-wrapper.zoomed-in::before {
    opacity: 1;
}

/* Video Element */
.promo-video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #000;
}

/* Video Controls Overlay */
.promo-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.promo-video-wrapper:hover .promo-video-controls,
.promo-video-wrapper.controls-visible .promo-video-controls {
    opacity: 1;
    transform: translateY(0);
}

/* Control Buttons */
.promo-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.promo-control-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.promo-control-btn:active {
    transform: scale(0.95);
}

/* Play/Pause Button - Larger */
.promo-play-pause {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
    background: linear-gradient(135deg, var(--primary-color, #6366F1), var(--secondary-color, #0EA5E9));
    border: none;
}

.promo-play-pause:hover {
    background: linear-gradient(135deg, #7C7FFF, #22D3EE);
}

/* Progress Bar */
.promo-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: height 0.2s ease;
}

.promo-video-wrapper:hover .promo-progress-bar {
    height: 6px;
}

.promo-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary-color, #6366F1), var(--secondary-color, #0EA5E9));
    border-radius: 0 3px 3px 0;
    transition: width 0.1s linear;
}

/* Center Play Button Overlay (when paused) */
.promo-video-wrapper.paused::after {
    content: '\f04b';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 50%;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    pointer-events: none;
    opacity: 0.9;
    animation: pulsePlay 2s ease-in-out infinite;
}

@keyframes pulsePlay {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.05);
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }
}

/* Fullscreen Styles */
.promo-video-wrapper:fullscreen,
.promo-video-wrapper:-webkit-full-screen,
.promo-video-wrapper:-moz-full-screen,
.promo-video-wrapper:-ms-fullscreen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    background: #000;
}

.promo-video-wrapper:fullscreen video,
.promo-video-wrapper:-webkit-full-screen video {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.promo-video-wrapper:fullscreen .promo-video-controls {
    padding: 24px 40px;
}

.promo-video-wrapper:fullscreen .promo-control-btn {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
}

.promo-video-wrapper:fullscreen .promo-play-pause {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* --- PROMO VIDEO TABLET STYLES --- */
@media (max-width: 1024px) {
    .promo-video-container {
        max-width: 500px;
    }

    .promo-video-wrapper {
        transform: scale(0.9) translateY(20px);
    }
}

/* --- PROMO VIDEO MOBILE STYLES --- */
@media (max-width: 768px) {
    .problem-image {
        order: 2;
        margin-top: var(--spacing-lg);
    }

    .promo-video-container {
        max-width: 100%;
        padding: 0 var(--spacing-sm);
    }

    .promo-video-wrapper {
        transform: scale(0.92) translateY(15px);
        border-radius: var(--radius-lg, 16px);
    }

    .promo-video-wrapper.zoomed-in {
        transform: scale(1) translateY(0);
    }

    /* Always show controls on mobile for touch */
    .promo-video-controls {
        opacity: 1;
        transform: translateY(0);
        padding: 12px 16px;
    }

    .promo-control-btn {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }

    .promo-play-pause {
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
    }

    .promo-progress-bar {
        height: 5px;
    }

    /* Larger center play button on mobile */
    .promo-video-wrapper.paused::after {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .promo-video-wrapper {
        border-radius: var(--radius-md, 12px);
    }

    .promo-video-controls {
        padding: 10px 12px;
    }

    .promo-control-btn {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }

    .promo-play-pause {
        width: 44px;
        height: 44px;
        font-size: 1rem;
    }

    .promo-video-wrapper.paused::after {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
    .promo-video-controls {
        opacity: 1;
        transform: translateY(0);
    }

    .promo-control-btn:hover {
        transform: none;
    }

    .promo-control-btn:active {
        transform: scale(0.92);
        background: rgba(255, 255, 255, 0.3);
    }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
    .promo-video-container {
        max-width: 70%;
    }

    .promo-video-wrapper.paused::after {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }
}