* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --electric-orange: #ff6b00;
            --electric-blue: #00d4ff;
            --cosmic-purple: #2d1b69;
            --dark-matter: #0a0a0a;
            --nebula-pink: #ff006e;
            --starlight: #ffffff;
            --plasma-green: #39ff14;

            /* RGB values for transparency effects */
            --electric-orange-rgb: 255, 107, 0;
            --electric-blue-rgb: 0, 212, 255;
            --cosmic-purple-rgb: 45, 27, 105;
            --nebula-pink-rgb: 255, 0, 110;
            --plasma-green-rgb: 57, 255, 20;
        }
        
        html { background: var(--dark-matter); }
        body {
            font-family: 'Exo 2', 'Inter', sans-serif;
            line-height: 1.6;
            color: var(--starlight);
            overflow-x: hidden;
            background: transparent;
        }
        
        /* Clean background - no overlay */
        
        @keyframes cosmicShift {
            0% { transform: scale(1) rotate(0deg); }
            100% { transform: scale(1.1) rotate(2deg); }
        }
        
        
        /* Navigation */
        /* Modern Enhanced Navbar */
        /* ================================================================
           NAVBAR (rebuilt 2026-04-28)
           3-zone grid: brand (left) · primary nav (center) · actions (right)
           Goal: nothing overflows, conversion CTA is always visible.
           ================================================================ */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(5, 5, 10, 0.92);
            /* Reduced from blur(20px) — heavy blur over the playing hero video was forcing
               the browser to re-sample video pixels through a blur shader every frame */
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid rgba(0, 212, 255, 0.18);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
            transition: padding 0.25s ease, background 0.25s ease;
        }
        .navbar.scrolled {
            background: rgba(0, 0, 0, 0.96);
            border-bottom-color: rgba(0, 212, 255, 0.32);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 32px;
            padding: 12px 24px;
            min-height: 68px;
        }

        /* ---- Brand (left) ---- */
        .nav-brand {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            white-space: nowrap;
            transition: opacity 0.2s ease;
        }
        .nav-brand:hover { opacity: 0.9; }
        .nav-brand-mark {
            height: 44px;
            width: 44px;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 0 16px rgba(255, 107, 0, 0.28), 0 0 32px rgba(0, 212, 255, 0.18);
            transition: box-shadow 0.25s ease;
        }
        .nav-brand:hover .nav-brand-mark {
            box-shadow: 0 0 22px rgba(255, 107, 0, 0.45), 0 0 44px rgba(0, 212, 255, 0.32);
        }
        .nav-brand-text {
            font-family: 'Orbitron', monospace;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            color: var(--electric-orange);
            background: linear-gradient(135deg, var(--electric-orange) 0%, var(--electric-blue) 50%, var(--nebula-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            background-size: 200% 200%;
            animation: navBrandGradient 6s ease-in-out infinite;
            line-height: 1;
        }
        @supports not (-webkit-background-clip: text) {
            .nav-brand-text { color: var(--electric-orange) !important; background: none !important; }
        }
        @keyframes navBrandGradient {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
        }

        /* ---- Primary nav links (center) ---- */
        .nav-links {
            justify-self: center;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        .nav-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 14px;
            color: rgba(255, 255, 255, 0.82);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            border-radius: 8px;
            background: transparent;
            border: 0;
            cursor: pointer;
            font-family: inherit;
            transition: color 0.18s ease, background 0.18s ease;
            white-space: nowrap;
        }
        .nav-link:hover { color: #fff; background: rgba(0, 212, 255, 0.10); }

        /* "More" dropdown */
        .nav-more { position: relative; }
        .nav-more-chevron {
            font-size: 0.7em;
            margin-left: 2px;
            transition: transform 0.2s ease;
        }
        .nav-more[data-open="true"] .nav-more-chevron { transform: rotate(180deg); }
        .nav-more-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            min-width: 210px;
            background: rgba(10, 10, 14, 0.98);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 212, 255, 0.22);
            border-radius: 12px;
            padding: 8px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .nav-more[data-open="true"] .nav-more-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
        }
        .nav-more-menu a,
        .nav-more-menu .nav-more-action {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px 12px;
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            font-size: 0.9rem;
            font-weight: 500;
            border-radius: 8px;
            background: transparent;
            border: 0;
            cursor: pointer;
            font-family: inherit;
            text-align: left;
            width: 100%;
            transition: color 0.18s ease, background 0.18s ease;
        }
        .nav-more-menu a i,
        .nav-more-menu .nav-more-action i {
            width: 16px;
            text-align: center;
            color: var(--electric-blue);
            font-size: 0.95em;
        }
        .nav-more-menu a:hover,
        .nav-more-menu .nav-more-action:hover {
            color: #fff;
            background: rgba(0, 212, 255, 0.12);
        }

        /* "Compare" categorized mega-menu — same interaction pattern as
           .nav-more, but a wider grid panel with headed category columns. */
        .nav-compare { position: relative; }
        .nav-compare-toggle .nav-more-chevron {
            font-size: 0.7em;
            margin-left: 2px;
            transition: transform 0.2s ease;
        }
        .nav-compare[data-open="true"] .nav-compare-toggle .nav-more-chevron {
            transform: rotate(180deg);
        }
        .nav-compare-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%) translateY(-4px);
            width: min(720px, 92vw);
            background: rgba(10, 10, 14, 0.98);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 212, 255, 0.22);
            border-radius: 14px;
            padding: 18px 20px;
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 18px 24px;
            z-index: 1100;
        }
        .nav-compare[data-open="true"] .nav-compare-menu {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(-50%) translateY(0);
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
        }
        .nav-compare-menu .nav-compare-col h4 {
            font-size: 0.72rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: var(--electric-blue);
            margin: 0 0 8px 2px;
            padding-bottom: 6px;
            border-bottom: 1px solid rgba(0, 212, 255, 0.18);
        }
        .nav-compare-menu .nav-compare-col a {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 7px 10px;
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 500;
            border-radius: 8px;
            transition: color 0.18s ease, background 0.18s ease;
        }
        .nav-compare-menu .nav-compare-col a i {
            width: 14px;
            text-align: center;
            color: var(--electric-blue);
            font-size: 0.85em;
            opacity: 0.85;
        }
        .nav-compare-menu .nav-compare-col a:hover {
            color: #fff;
            background: rgba(0, 212, 255, 0.12);
        }
        .nav-compare-menu .nav-compare-col a.coming-soon {
            opacity: 0.5;
            pointer-events: none;
        }
        .nav-compare-footer {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            margin-top: 4px;
            border-top: 1px solid rgba(0, 212, 255, 0.16);
            font-size: 0.82rem;
        }
        .nav-compare-footer a {
            color: var(--electric-blue);
            text-decoration: none;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .nav-compare-footer a:hover { text-decoration: underline; }
        .nav-compare-footer span {
            color: rgba(255, 255, 255, 0.55);
            font-size: 0.78rem;
        }
        @media (max-width: 880px) {
            .nav-compare-menu {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                width: min(560px, 92vw);
            }
        }

        /* ---- Actions (right) ---- */
        .nav-actions {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            justify-self: end;
        }
        .nav-login-link {
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            padding: 8px 4px;
            transition: color 0.18s ease;
        }
        .nav-login-link:hover { color: #fff; }

        .nav-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            font-size: 0.95rem;
            font-weight: 700;
            color: #0a0a0a;
            text-decoration: none;
            background: linear-gradient(135deg, var(--electric-orange) 0%, var(--electric-blue) 100%);
            border-radius: 10px;
            border: 0;
            cursor: pointer;
            white-space: nowrap;
            box-shadow: 0 6px 20px rgba(255, 107, 0, 0.32);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .nav-cta:hover {
            transform: translateY(-1px);
            box-shadow: 0 10px 28px rgba(255, 107, 0, 0.46);
        }
        .nav-cta:active { transform: translateY(0); }

        /* ---- App Store pill ---- */
        .nav-app-store-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 12px;
            border-radius: 8px;
            background: #000;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #fff !important;
            text-decoration: none;
            transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
            line-height: 1;
            white-space: nowrap;
        }
        .nav-app-store-btn i { font-size: 1.4em; line-height: 1; }
        .nav-app-store-btn .nav-app-store-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
            font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }
        .nav-app-store-btn .nav-app-store-line1 { font-size: 8px; font-weight: 400; color: rgba(255, 255, 255, 0.85); }
        .nav-app-store-btn .nav-app-store-line2 { font-size: 13px; font-weight: 600; color: #fff; }
        .nav-app-store-btn:hover {
            background: #1a1a1a;
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
        }

        /* ---- Display rules ---- */
        .desktop-only { display: flex; }
        .mobile-only  { display: none; }

        /* ---- Mid-width (compress less-critical bits before going to mobile) ---- */
        @media (max-width: 1280px) {
            .nav-app-store-btn { display: none; }   /* hide app store + google play pills, keep CTA */
            .nav-container { gap: 20px; padding: 12px 18px; }
        }
        @media (max-width: 1024px) {
            .nav-link { padding: 8px 10px; font-size: 0.9rem; }
            .nav-actions { gap: 10px; }
            .nav-brand-text { font-size: 1.2rem; }
            .nav-cta { padding: 10px 16px; }
        }

        /* ---- Mobile (≤900px to avoid cramped tablet) ---- */
        @media (max-width: 900px) {
            .desktop-only { display: none; }
            .mobile-only  { display: flex; }
            .mobile-menu-toggle { display: flex !important; margin-left: auto; }
            .nav-container {
                grid-template-columns: auto 1fr;
                gap: 12px;
                padding: 10px 16px;
                min-height: 60px;
            }
            .nav-brand-mark { height: 38px; width: 38px; }
            .nav-brand-text { font-size: 1.1rem; }
        }
        @media (max-width: 480px) {
            .nav-container { padding: 8px 12px; gap: 8px; min-height: 56px; }
            .nav-brand-mark { height: 34px; width: 34px; }
            .nav-brand-text { font-size: 1rem; }
        }

        /* Enhanced Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none; /* Hidden by default on desktop */
            flex-direction: column;
            cursor: pointer;
            padding: 12px;
            width: 52px;
            height: 52px;
            align-items: center;
            justify-content: center;
            background: rgba(0, 212, 255, 0.1);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 12px;
            z-index: 2001;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
            border: none;
        }

        .mobile-menu-toggle:focus-visible {
            outline: 2px solid var(--electric-blue);
            outline-offset: 2px;
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.4);
        }

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

        .mobile-menu-toggle:hover::before {
            left: 100%;
        }

        .mobile-menu-toggle:hover {
            background: rgba(0, 212, 255, 0.2);
            border-color: rgba(0, 212, 255, 0.6);
            transform: scale(1.05);
            box-shadow:
                0 0 20px rgba(0, 212, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .mobile-menu-toggle span {
            width: 26px;
            height: 3px;
            background: linear-gradient(135deg, var(--electric-blue), var(--starlight));
            margin: 2.5px 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 4px;
            position: relative;
            box-shadow: 0 0 6px rgba(0, 212, 255, 0.3);
        }

        .mobile-menu-toggle span::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--plasma-green), var(--electric-blue));
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .mobile-menu-toggle:hover span::before {
            opacity: 0.8;
        }

        .mobile-menu-toggle.active {
            background: rgba(255, 107, 0, 0.2);
            border-color: rgba(255, 107, 0, 0.6);
            transform: rotate(180deg) scale(1.1);
            box-shadow:
                0 0 25px rgba(255, 107, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .mobile-menu-toggle.active span {
            background: linear-gradient(135deg, var(--electric-orange), var(--nebula-pink));
            box-shadow: 0 0 8px rgba(255, 107, 0, 0.5);
        }

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

        .mobile-menu-toggle.active span:nth-child(2) {
            opacity: 0;
            transform: scale(0);
        }

        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(8px, -7px);
        }
        
        /* Enhanced Mobile Menu */
        .mobile-menu {
            position: fixed;
            top: 85px;
            left: 0;
            right: 0;
            background:
                linear-gradient(135deg,
                    rgba(5, 5, 15, 0.98) 0%,
                    rgba(10, 10, 20, 0.95) 50%,
                    rgba(5, 5, 15, 0.98) 100%);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-top: 2px solid rgba(0, 212, 255, 0.4);
            border-bottom: 2px solid rgba(255, 107, 0, 0.4);
            padding: 25px 30px;
            transform: translateY(-100%) scale(0.95);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2000;
            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.7),
                0 0 60px rgba(0, 212, 255, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            pointer-events: none;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
        }

        .mobile-menu::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg,
                var(--electric-blue) 0%,
                var(--plasma-green) 25%,
                var(--electric-orange) 50%,
                var(--nebula-pink) 75%,
                var(--electric-blue) 100%);
            background-size: 200% 100%;
            animation: menuGlow 3s ease-in-out infinite;
        }

        @keyframes menuGlow {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

        .mobile-menu.active {
            transform: translateY(0) scale(1);
            opacity: 1;
            pointer-events: auto;
        }

        .mobile-menu nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .mobile-menu a {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--starlight);
            text-decoration: none;
            padding: 18px 20px;
            font-weight: 500;
            font-size: 1.1em;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.02);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }

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

        .mobile-menu a:hover::before {
            left: 100%;
        }

        .mobile-menu a::after {
            content: '';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--electric-blue), var(--plasma-green));
            transition: width 0.3s ease;
        }

        .mobile-menu a:hover {
            color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.1);
            border-color: rgba(0, 212, 255, 0.3);
            transform: translateX(8px);
            box-shadow:
                0 4px 20px rgba(0, 212, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .mobile-menu a:hover::after {
            width: 30px;
        }

        /* Enhanced mobile menu icons */
        .mobile-menu a i {
            font-size: 1.2em;
            width: 24px;
            text-align: center;
            color: var(--electric-blue);
            transition: all 0.3s ease;
        }

        .mobile-menu a:hover i {
            color: var(--plasma-green);
            transform: scale(1.2);
        }

        /* Mobile compare collapsible group — uses native <details>/<summary>
           so no JS is needed. Visually matches the rest of the mobile menu. */
        .mobile-menu .mobile-compare-group {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            overflow: hidden;
        }
        .mobile-menu .mobile-compare-group > summary {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--starlight);
            padding: 18px 20px;
            font-weight: 500;
            font-size: 1.1em;
            cursor: pointer;
            list-style: none;
            transition: color 0.25s ease;
        }
        .mobile-menu .mobile-compare-group > summary::-webkit-details-marker { display: none; }
        .mobile-menu .mobile-compare-group > summary > i.fas:first-child {
            font-size: 1.2em;
            width: 24px;
            text-align: center;
            color: var(--electric-blue);
        }
        .mobile-menu .mobile-compare-group > summary .mobile-compare-chevron {
            margin-left: auto;
            font-size: 0.85em;
            color: rgba(255, 255, 255, 0.55);
            transition: transform 0.25s ease;
        }
        .mobile-menu .mobile-compare-group[open] > summary .mobile-compare-chevron {
            transform: rotate(180deg);
        }
        .mobile-menu .mobile-compare-group[open] > summary {
            color: var(--electric-blue);
            border-bottom: 1px solid rgba(0, 212, 255, 0.18);
        }
        .mobile-menu .mobile-compare-section {
            padding: 8px 16px 4px;
        }
        .mobile-menu .mobile-compare-section h5 {
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: var(--electric-blue);
            margin: 6px 4px 4px;
        }
        .mobile-menu .mobile-compare-section a {
            display: block;
            padding: 10px 12px;
            font-size: 0.95em;
            color: rgba(255, 255, 255, 0.85);
            border: 0;
            background: transparent;
            border-radius: 8px;
        }
        .mobile-menu .mobile-compare-section a::before,
        .mobile-menu .mobile-compare-section a::after { display: none; }
        .mobile-menu .mobile-compare-section a:hover {
            background: rgba(0, 212, 255, 0.10);
            transform: none;
            box-shadow: none;
        }
        .mobile-menu .mobile-compare-soon {
            display: block;
            padding: 6px 12px 12px;
            font-size: 0.82em;
            color: rgba(255, 255, 255, 0.55);
            line-height: 1.5;
        }
        .mobile-menu .mobile-compare-all {
            display: block;
            text-align: center;
            padding: 12px;
            margin: 4px 12px 12px;
            font-size: 0.9em;
            font-weight: 600;
            color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.08);
            border: 1px solid rgba(0, 212, 255, 0.22);
            border-radius: 10px;
        }
        .mobile-menu .mobile-compare-all::before,
        .mobile-menu .mobile-compare-all::after { display: none; }

        /* Enhanced Restaurant Login button in mobile menu */
        .mobile-menu .btn.btn-secondary {
            background: linear-gradient(135deg,
                var(--electric-orange) 0%,
                var(--nebula-pink) 50%,
                var(--electric-blue) 100%);
            color: var(--starlight);
            font-weight: 700;
            border-radius: 16px;
            margin-top: 20px;
            text-align: center;
            border: 2px solid rgba(255, 107, 0, 0.4);
            padding: 16px 28px;
            font-size: 1.1em;
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

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

        .mobile-menu .btn.btn-secondary:hover::before {
            left: 100%;
        }

        .mobile-menu .btn.btn-secondary:hover {
            transform: translateY(-3px) scale(1.02);
            border-color: rgba(255, 107, 0, 0.8);
            box-shadow:
                0 8px 25px rgba(255, 107, 0, 0.4),
                0 0 30px rgba(0, 212, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 25px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            font-size: 0.875rem;
            position: relative;
            overflow: hidden;
            font-family: 'Exo 2', sans-serif;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s ease;
        }
        
        .btn:hover::before {
            left: 100%;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, var(--electric-orange) 0%, var(--electric-blue) 100%);
            color: var(--starlight);
            border: 2px solid transparent;
            box-shadow: 
                0 0 20px rgba(255, 107, 0, 0.3),
                inset 0 0 20px rgba(0, 212, 255, 0.1);
        }
        
        .btn-primary:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 
                0 0 30px rgba(255, 107, 0, 0.6),
                0 0 50px rgba(0, 212, 255, 0.4),
                inset 0 0 20px rgba(255, 255, 255, 0.1);
            background: linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-orange) 100%);
        }
        
        .btn-secondary {
            background: rgba(10, 10, 10, 0.8);
            color: var(--electric-blue);
            border: 2px solid var(--electric-blue);
            backdrop-filter: blur(10px);
        }

        .btn-secondary:hover {
            background: var(--electric-blue);
            color: var(--dark-matter);
            transform: translateY(-2px);
            box-shadow: 0 0 25px rgba(0, 212, 255, 0.5);
        }

        /* Report Issue Button */
        .report-issue-btn {
            background: linear-gradient(135deg, #ff006e, #ff6b00);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 8px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: 'Exo 2', sans-serif;
        }

        .report-issue-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 0, 110, 0.4);
        }

        /* Report Modal */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(10px);
            z-index: 10000;
            justify-content: center;
            align-items: center;
        }

        .modal-content {
            background: linear-gradient(135deg, rgba(10, 10, 10, 0.98), rgba(45, 27, 105, 0.95));
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 12px;
            padding: 40px;
            max-width: 600px;
            width: 90%;
            position: relative;
            animation: slideIn 0.3s ease-out;
            max-height: 90vh;
            overflow-y: auto;
        }

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

        .close {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 2em;
            cursor: pointer;
            color: rgba(255, 255, 255, 0.7);
        }

        .close:hover {
            color: var(--electric-blue);
        }

        .modal-content h2 {
            color: var(--electric-blue);
            margin-bottom: 15px;
        }

        .modal-content h3 {
            color: var(--electric-orange);
            margin: 25px 0 15px;
        }

        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 20px 0;
        }

        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 10px;
            border-radius: 6px;
            transition: background 0.3s;
        }

        .checkbox-group label:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        textarea {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 8px;
            padding: 12px;
            color: white;
            font-family: 'Exo 2', sans-serif;
            resize: vertical;
        }

        .submit-btn {
            background: linear-gradient(135deg, #00d4ff, #39ff14);
            color: #0a0a0a;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            margin-top: 20px;
            font-size: 1.1em;
            transition: all 0.3s ease;
        }

        .submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(57, 255, 20, 0.4);
        }

        #reportSuccess {
            text-align: center;
            padding: 40px 20px;
        }

        #reportSuccess i {
            font-size: 3em;
            color: var(--plasma-green);
            margin-bottom: 20px;
        }
        
        /* Cosmic Energy Pulses */
        @keyframes energyPulse {
            0% { box-shadow: 0 0 5px var(--electric-blue); }
            50% { box-shadow: 0 0 20px var(--electric-blue), 0 0 30px var(--electric-orange); }
            100% { box-shadow: 0 0 5px var(--electric-blue); }
        }
        
        /* Hero Section - Full-Width Video Background */
        .hero {
            position: relative;
            overflow: hidden;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--starlight);
        }

        /* Video Background - Full Width */
        .hero-video-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            /* Promote to its own GPU layer so overlay animations don't trigger video re-raster */
            will-change: transform;
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* Gradient Overlay — dark at top/bottom where text sits, lighter in middle so the video still reads */
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                180deg,
                rgba(10, 10, 20, 0.78) 0%,
                rgba(10, 10, 20, 0.5) 30%,
                rgba(10, 10, 20, 0.42) 55%,
                rgba(10, 10, 20, 0.6) 85%,
                rgba(10, 10, 20, 0.72) 100%
            );
            z-index: 1;
        }

        /* Hero Content Container */
        .hero .container {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 140px 20px 80px;
            text-align: center;
        }

        /* Hero Content Positioning */

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3) 0%, rgba(0, 100, 255, 0.3) 100%);
            border: 1px solid rgba(0, 212, 255, 0.5);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            color: var(--electric-blue);
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        .hero-badge i {
            font-size: 1.1em;
        }

        .hero-title {
            font-family: 'Orbitron', monospace;
            font-size: clamp(2.2em, 4vw, 3.5em);
            margin-bottom: 30px;
            font-weight: 900;
            line-height: 1.2;
            color: var(--starlight);
            text-shadow:
                0 2px 12px rgba(0, 0, 0, 0.95),
                0 4px 24px rgba(0, 0, 0, 0.85),
                0 0 40px rgba(0, 212, 255, 0.3);
        }

        .hero-description {
            font-size: 1.25em;
            line-height: 1.65;
            margin: 0 auto 30px;
            max-width: 760px;
            padding: 22px 32px;
            color: #ffffff;
            font-weight: 500;
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 14px;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
        }

        /* Compact Agents Bar */
        .hero-agents-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 10px;
            margin: 30px 0;
            padding: 18px 30px;
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.15) 0%,
                rgba(255, 107, 0, 0.15) 100%);
            border: 1px solid rgba(0, 212, 255, 0.4);
            border-radius: 12px;
            backdrop-filter: blur(15px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
        }

        .agents-bar-label {
            font-weight: 700;
            font-size: 0.85em;
            color: var(--electric-blue);
            letter-spacing: 1.5px;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        .agents-bar-list {
            font-size: 0.95em;
            color: rgba(255, 255, 255, 0.95);
            font-weight: 500;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
        }

        /* Compact Stats Grid - 2x2 */
        .hero-stats-compact {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin: 30px 0;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .stat-compact {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 1em;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
        }

        .stat-compact i {
            color: var(--plasma-green);
            font-size: 1.2em;
            filter: drop-shadow(0 0 8px rgba(57, 255, 20, 0.5));
        }

        /* Mobile Responsive for Compact Layout */
        @media (max-width: 768px) {
            .hero-agents-bar {
                flex-direction: column;
                text-align: center;
                padding: 15px 20px;
            }

            .hero-stats-compact {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .stat-compact {
                justify-content: center;
            }
        }

        /* Above-the-fold proof strip — factual credibility next to the CTA. */
        .hero-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 6px 14px;
            margin: 24px auto 0;
            max-width: 720px;
            font-size: 0.92em;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.88);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }
        .hero-proof-item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
        .hero-proof-item i { color: var(--electric-blue); filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.4)); }
        .hero-proof-dot { color: rgba(255, 255, 255, 0.3); }
        @media (max-width: 640px) {
            .hero-proof { font-size: 0.85em; gap: 5px 10px; }
            .hero-proof-dot { display: none; }
        }

        .hero-actions {
            display: flex;
            gap: 25px;
            margin-top: 40px;
            justify-content: center;
            flex-wrap: wrap;
            animation: heroActionsSlideIn 1.8s ease-out 0.6s both;
        }

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

        .hero-actions .btn {
            font-size: 1.1em;
            padding: 16px 32px;
            font-weight: 600;
            border-radius: 12px;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            min-width: 180px;
            text-align: center;
        }

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

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

        .hero-actions .btn:hover {
            transform: translateY(-2px);
            box-shadow:
                0 10px 30px rgba(0, 0, 0, 0.2),
                0 0 20px rgba(var(--electric-blue-rgb), 0.15);
        }

        /* Hero — App Store badge */
        .hero-app-store {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
        }
        .hero-app-store-label {
            font-size: 0.85em;
            font-weight: 500;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.8);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
        }
        .hero-app-store-link {
            display: inline-block;
            transition: transform 0.3s ease, filter 0.3s ease;
            line-height: 0;
        }
        .hero-app-store-link:hover {
            transform: translateY(-2px) scale(1.03);
            filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.5));
        }
        .hero-app-store-badge {
            display: block;
            height: 54px;
            width: 180px;
            object-fit: contain;
        }
        .hero-store-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            align-items: center;
        }
        .hero-store-badges .hero-app-store-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 54px;
            width: 180px;
            box-sizing: border-box;
        }

        /* Professional Hero Video Section */
        .hero-video-section {
            position: relative;
            animation: heroVideoSlideIn 1.5s ease-out 0.4s both;
            max-width: 500px;
        }

        @keyframes heroVideoSlideIn {
            0% {
                opacity: 0;
                transform: translateX(-40px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .hero-video-section .video-card {
            background:
                linear-gradient(135deg,
                    rgba(255, 255, 255, 0.08) 0%,
                    rgba(255, 255, 255, 0.02) 100%);
            border: 1px solid rgba(var(--electric-blue-rgb), 0.2);
            border-radius: 20px;
            overflow: hidden;
            transition: all 0.4s ease;
            backdrop-filter: blur(15px);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.2),
                0 0 30px rgba(var(--electric-blue-rgb), 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
            position: relative;
        }

        .hero-video-section .video-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 20px;
            background: linear-gradient(135deg,
                rgba(var(--electric-orange-rgb), 0.05) 0%,
                rgba(var(--electric-blue-rgb), 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }

        .hero-video-section .video-card:hover {
            transform: translateY(-8px) scale(1.02);
            border-color: rgba(var(--electric-blue-rgb), 0.4);
            box-shadow:
                0 25px 80px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(var(--electric-blue-rgb), 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .hero-video-section .video-card:hover::before {
            opacity: 1;
        }

        .hero-video-section .video-placeholder {
            position: relative;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .hero-video-section .play-button {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--electric-orange) 0%, var(--hot-pink) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
            color: white;
            transition: all 0.3s ease;
            box-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
        }

        .hero-video-section .play-button:hover {
            transform: scale(1.1);
            box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
        }

        .hero-video-section .video-info {
            padding: 20px;
            background: rgba(0, 0, 0, 0.2);
        }

        .hero-video-section .video-title {
            font-size: 1.3em;
            font-weight: 700;
            color: var(--starlight);
            margin-bottom: 8px;
            font-family: 'Orbitron', monospace;
        }

        .hero-video-section .video-subtitle {
            font-size: 0.95em;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.4;
            margin: 0;
        }

        @keyframes heroAura {
            0% { transform: scale(1) rotate(0deg); opacity: 0.3; }
            100% { transform: scale(1.1) rotate(5deg); opacity: 0.7; }
        }
        
        .hero-content {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            padding: 20px;
            animation: heroContentFadeIn 1.2s ease-out;
        }

        @keyframes heroContentFadeIn {
            0% {
                opacity: 0;
                transform: translateY(30px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .hero h1 {
            font-family: 'Orbitron', monospace;
            font-size: clamp(2.5em, 5vw, 4em);
            margin-bottom: 20px;
            font-weight: 900;
            line-height: 1.2;
            background: linear-gradient(135deg, var(--starlight) 0%, var(--electric-blue) 30%, var(--electric-orange) 70%, var(--starlight) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            animation: titleShimmer 4s ease-in-out infinite alternate;
        }

        /* Opacity-only shimmer — cheap on the GPU, doesn't force layer re-raster every frame
           (the original filter: brightness/saturate animation contended with hero video decoding) */
        @keyframes titleShimmer {
            0%   { opacity: 0.92; }
            100% { opacity: 1; }
        }
        
        .hero p {
            font-size: 1.3em;
            margin-bottom: 40px;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            font-weight: 300;
        }
        
        .hero-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 60px;
        }
        
        .hero .btn {
            font-size: 1.1em;
            padding: 15px 30px;
        }
        
        /* Demo Preview */
        .demo-preview {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 30px;
            max-width: 800px;
            margin: 0 auto;
            backdrop-filter: blur(10px);
        }
        
        .demo-preview h3 {
            margin-bottom: 20px;
            font-size: 1.5em;
        }
        
        .demo-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .demo-card {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
        }
        
        .demo-card .icon {
            font-size: 2em;
            margin-bottom: 10px;
            display: block;
        }

        /* Video Sections */
        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
            margin: 0 auto;
        }

        .video-container {
            position: relative;
            background: rgba(10, 10, 10, 0.8);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            padding: 20px;
            backdrop-filter: blur(20px);
            box-shadow:
                0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(0, 212, 255, 0.1);
            transition: all 0.4s ease;
            overflow: hidden;
        }

        .video-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 107, 0, 0.05), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .video-container:hover {
            transform: translateY(-5px) scale(1.02);
            border-color: var(--electric-orange);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(255, 107, 0, 0.3),
                inset 0 0 30px rgba(0, 212, 255, 0.2);
        }

        .video-container:hover::before {
            opacity: 1;
        }

        .video-placeholder {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(255, 107, 0, 0.1));
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: var(--starlight);
            font-family: 'Orbitron', monospace;
            position: relative;
            overflow: hidden;
        }

        .video-placeholder::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80px;
            height: 80px;
            background: rgba(255, 107, 0, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            animation: videoPulse 2s ease-in-out infinite;
        }

        .video-placeholder .play-icon {
            font-size: 3em;
            color: var(--electric-orange);
            z-index: 1;
            position: relative;
        }

        .video-placeholder .video-title {
            margin-top: 20px;
            font-size: 1.2em;
            text-align: center;
            z-index: 1;
            position: relative;
        }

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

        /* Modern Revenue Growth Section */
        .revenue-growth-section {
            padding: 80px 0;
            background: transparent;
            position: relative;
        }

        .revenue-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 40px;
        }

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

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 100, 255, 0.2) 100%);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            color: var(--electric-blue);
            margin-bottom: 20px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .revenue-title {
            font-size: 3.2em;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 25px;
            color: white;
        }

        .highlight-text {
            background: linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .revenue-description {
            font-size: 1.2em;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 40px;
            max-width: 520px;
        }


        /* Clean Benefits List */
        .benefits-showcase {
            margin-bottom: 30px;
        }

        .benefits-title {
            font-size: 1.2em;
            font-weight: 600;
            color: white;
            margin-bottom: 15px;
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9em;
        }

        .benefit-item i {
            color: var(--electric-blue);
            font-size: 1.2em;
            min-width: 20px;
            text-align: center;
        }

        /* Revenue Actions */
        .revenue-actions {
            display: flex;
            gap: 20px;
            align-items: center;
        }

        .btn.btn-outline {
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            transition: all 0.3s ease;
        }

        .btn.btn-outline:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: var(--electric-blue);
            color: var(--electric-blue);
            transform: translateY(-2px);
        }

        /* Clean Video Section */
        .revenue-video-section {
            position: relative;
        }

        .video-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .video-card:hover {
            transform: translateY(-5px);
        }

        .video-placeholder {
            position: relative;
            aspect-ratio: 16/9;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .play-button {
            width: 70px;
            height: 70px;
            background: var(--electric-orange);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8em;
            color: white;
            transition: all 0.3s ease;
        }

        .play-button:hover {
            transform: scale(1.05);
        }

        .video-info {
            padding: 20px;
        }

        .video-title {
            font-size: 1.2em;
            font-weight: 600;
            color: white;
            margin-bottom: 5px;
        }

        .video-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .revenue-grid {
                gap: 60px;
                padding: 0 30px;
            }
        }

        @media (max-width: 968px) {
            .revenue-grid {
                grid-template-columns: 1fr;
                gap: 60px;
                text-align: center;
            }

            .revenue-title {
                font-size: 2.8em;
            }


            .benefits-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }

            .revenue-actions {
                justify-content: center;
                flex-wrap: wrap;
            }
        }

        @media (max-width: 640px) {
            .revenue-growth-section {
                padding: 80px 0;
            }

            .revenue-grid {
                padding: 0 20px;
            }

            .revenue-title {
                font-size: 2.2em;
            }

            .stat-card {
                padding: 20px;
                gap: 15px;
            }

            .stat-number {
                font-size: 1.8em;
            }

            .play-button {
                width: 60px;
                height: 60px;
                font-size: 1.5em;
            }
        }

        .hero-content-text {
            padding: 20px 0;
        }

        .hero-content-text h1 {
            font-family: 'Orbitron', monospace;
            font-size: clamp(2.2em, 4vw, 3.5em);
            margin-bottom: 20px;
            font-weight: 900;
            line-height: 1.2;
            background: linear-gradient(135deg, var(--starlight) 0%, var(--electric-blue) 30%, var(--electric-orange) 70%, var(--starlight) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            animation: titleShimmer 4s ease-in-out infinite alternate;
        }

        .hero-content-text p {
            font-size: 1.2em;
            margin-bottom: 30px;
            opacity: 0.9;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
            font-weight: 300;
            line-height: 1.6;
        }

        .benefits-list {
            list-style: none;
            padding: 0;
            margin: 30px 0;
        }

        .benefits-list li {
            display: flex;
            align-items: center;
            margin: 15px 0;
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.9);
        }

        .benefits-list li i {
            margin-right: 15px;
            color: var(--electric-blue);
            font-size: 1.2em;
        }

        /* Executive Video Sections */
        .executive-section {
            padding: 100px 20px;
            background:
                radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(255, 107, 0, 0.08) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.2) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
            overflow: hidden;
        }

        /* Executive section - clean background */

        @keyframes executiveAura {
            0% { transform: scale(1) rotate(0deg); opacity: 0.4; }
            100% { transform: scale(1.03) rotate(2deg); opacity: 0.7; }
        }

        .executive-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .executive-grid.reverse {
            grid-template-columns: 1fr 1fr;
        }

        .executive-content h2 {
            font-family: 'Orbitron', monospace;
            font-size: 2.5em;
            margin-bottom: 20px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--starlight) 0%, var(--electric-blue) 50%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }

        .executive-content p {
            font-size: 1.2em;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 30px 0;
        }

        .stat-item {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(0, 212, 255, 0.2);
        }

        .stat-number {
            font-size: 2.5em;
            font-weight: 900;
            color: var(--electric-orange);
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 15px rgba(255, 107, 0, 0.5);
        }

        .stat-label {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 5px;
        }

        /* Enhanced Mobile Responsive for Hero Section */
        @media (max-width: 768px) {
            .hero {
                min-height: 100vh;
            }

            .hero .container {
                padding: 120px 15px 60px;
            }

            .hero-content {
                max-width: 100%;
                padding: 15px;
            }

            .executive-grid {
                grid-template-columns: 1fr;
                gap: 50px;
            }


            .hero-actions {
                justify-content: center;
                gap: 20px;
            }

            .hero-actions .btn {
                min-width: 160px;
                padding: 14px 28px;
            }

            .executive-grid.reverse {
                grid-template-columns: 1fr;
            }

            .executive-grid.reverse .executive-content {
                order: 2;
            }

            .executive-grid.reverse .video-container {
                order: 1;
            }

            .video-placeholder {
                height: 250px;
            }

            .hero-content-text h1 {
                font-size: 2.2em;
            }

            .executive-content h2 {
                font-size: 2em;
            }

            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }

        }


        .feature-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-orange) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
            flex-shrink: 0;
        }

        .feature-content h4 {
            font-size: 1.1em;
            font-weight: 600;
            color: white;
            margin-bottom: 8px;
        }

        .feature-content p {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.4;
            margin: 0;
        }





        /* Features Section */
        .features {
            padding: 100px 20px;
            background: 
                radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(255, 107, 0, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 10% 50%, rgba(255, 0, 110, 0.08) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.3) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
            overflow: hidden;
        }
        
        /* Features section - clean background */
        
        @keyframes featuresAura {
            0% { transform: scale(1) rotate(0deg); opacity: 0.4; }
            100% { transform: scale(1.05) rotate(3deg); opacity: 0.7; }
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }
        
        .section-title {
            text-align: center;
            font-size: 2.5em;
            margin-bottom: 20px;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            background: linear-gradient(135deg, var(--starlight) 0%, var(--electric-blue) 50%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
        }
        
        .section-subtitle {
            text-align: center;
            font-size: 1.2em;
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 60px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
        }
        
        .feature-card {
            background: rgba(10, 10, 10, 0.8);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            padding: 40px 30px;
            text-align: center;
            backdrop-filter: blur(20px);
            box-shadow: 
                0 10px 40px rgba(0, 0, 0, 0.5),
                inset 0 0 20px rgba(0, 212, 255, 0.1);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }
        
        .feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 107, 0, 0.05), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }
        
        .feature-card:hover {
            transform: translateY(-15px) scale(1.02);
            border-color: var(--electric-orange);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.7),
                0 0 40px rgba(255, 107, 0, 0.3),
                inset 0 0 30px rgba(0, 212, 255, 0.2);
        }
        
        .feature-card:hover::before {
            opacity: 1;
        }
        
        .feature-card .icon {
            font-size: 3em;
            margin-bottom: 20px;
            display: block;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.5));
        }
        
        .feature-card h3 {
            font-size: 1.5em;
            margin-bottom: 15px;
            color: var(--starlight);
            font-family: 'Orbitron', monospace;
            font-weight: 600;
        }
        
        .feature-card p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
        }

        /* Setup Feature Cards */
        .setup-features-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            max-width: 300px;
            margin: 0 auto;
            padding: 20px 0;
        }

        .setup-feature-card {
            background: rgba(10, 10, 10, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px 12px;
            text-align: left;
            backdrop-filter: blur(20px);
            box-shadow:
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 0 5px rgba(255, 255, 255, 0.03);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            min-height: 50px;
        }

        .setup-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.02), transparent);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .setup-feature-card:hover {
            transform: translateY(-1px) scale(1.005);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow:
                0 3px 12px rgba(0, 0, 0, 0.3),
                inset 0 0 8px rgba(255, 255, 255, 0.06);
        }

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

        .setup-feature-card .feature-icon {
            margin-right: 12px;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
            flex-shrink: 0;
        }

        .setup-feature-card .feature-icon i {
            font-size: 1.1em;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
            transition: all 0.3s ease;
        }

        .setup-feature-card:hover .feature-icon i {
            filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
            transform: scale(1.02);
        }

        .setup-feature-card .feature-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .setup-feature-card .feature-content h4 {
            font-size: 0.85em;
            margin-bottom: 2px;
            color: var(--starlight);
            font-family: 'Orbitron', monospace;
            font-weight: 600;
            line-height: 1.2;
        }

        .setup-feature-card .feature-content p {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.3;
            font-size: 0.7em;
            margin: 0;
        }

        /* Mobile Responsive for Setup Features */
        @media (max-width: 768px) {
            .setup-features-grid {
                grid-template-columns: 1fr;
                gap: 6px;
                padding: 15px 0;
                max-width: 280px;
            }

            .setup-feature-card {
                padding: 8px 10px;
                min-height: 45px;
            }

            .setup-feature-card .feature-icon i {
                font-size: 1em;
            }

            .setup-feature-card .feature-content h4 {
                font-size: 0.8em;
            }

            .setup-feature-card .feature-content p {
                font-size: 0.65em;
            }
        }

        @media (max-width: 480px) {
            .setup-features-grid {
                gap: 5px;
                max-width: 260px;
            }

            .setup-feature-card {
                padding: 6px 8px;
                min-height: 40px;
            }

            .setup-feature-card .feature-icon i {
                font-size: 0.9em;
            }

            .setup-feature-card .feature-content h4 {
                font-size: 0.75em;
            }

            .setup-feature-card .feature-content p {
                font-size: 0.6em;
            }
        }

        /* Setup Tabs Styles */
        /* Training Section Full-Width Layout */
        section.training-section-fullwidth,
        .executive-section.training-section-fullwidth {
            background: transparent !important;
        }

        .training-section-fullwidth {
            max-width: 1400px;
            margin: 0 auto;
            padding: 80px 20px;
        }

        .training-header-compact {
            text-align: center;
            margin-bottom: 50px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .training-header-compact h2 {
            margin: 15px 0 10px 0;
            font-size: 2.2em;
        }

        .training-header-compact p {
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
        }

        /* Upload Benefits Cards */
        .upload-benefits-cards {
            margin-top: 30px;
        }

        .upload-benefits-cards h4 {
            text-align: center;
            font-size: 1.2em;
            color: var(--starlight);
            margin-bottom: 25px;
            font-family: 'Orbitron', monospace;
        }

        .upload-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 600px;
            margin: 0 auto;
        }

        .upload-info-card {
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.1) 0%,
                rgba(57, 255, 20, 0.05) 100%);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 12px;
            padding: 25px 20px;
            text-align: center;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .upload-info-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.6);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
        }

        .upload-card-icon {
            font-size: 2.5em;
            color: var(--electric-blue);
            margin-bottom: 15px;
        }

        .upload-info-card h5 {
            font-size: 1.1em;
            color: var(--starlight);
            margin: 0 0 8px 0;
            font-family: 'Orbitron', monospace;
        }

        .upload-info-card p {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
        }

        /* Mobile Responsive for Cards */
        @media (max-width: 768px) {
            .upload-cards-grid {
                grid-template-columns: 1fr;
            }
        }

        .setup-tabs-container {
            margin: 30px 0;
        }

        .setup-tabs-nav {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .setup-tab-btn {
            background: rgba(10, 10, 10, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-bottom: none;
            color: rgba(255, 255, 255, 0.7);
            padding: 12px 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9em;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            bottom: -2px;
        }

        .setup-tab-btn i {
            font-size: 1.1em;
        }

        .setup-tab-btn:hover {
            background: rgba(20, 20, 20, 0.6);
            color: rgba(255, 255, 255, 0.9);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .setup-tab-btn.active {
            background: rgba(0, 212, 255, 0.1);
            color: var(--electric-blue);
            border-color: var(--electric-blue);
            border-bottom: 2px solid var(--electric-blue);
        }

        .setup-tabs-content {
            position: relative;
        }

        .setup-tab-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .setup-tab-panel.active {
            display: block;
        }

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

        .tab-panel-header {
            margin-bottom: 25px;
            text-align: center;
        }

        .tab-panel-header h3 {
            font-size: 1.5em;
            color: var(--starlight);
            margin-bottom: 10px;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .tab-panel-header h3 i {
            color: var(--electric-blue);
        }

        .tab-panel-header p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1em;
        }

        /* Compact Header */
        .tab-panel-header-compact {
            margin-bottom: 20px;
            text-align: center;
        }

        .tab-panel-header-compact h3 {
            font-size: 1.5em;
            color: var(--starlight);
            margin-bottom: 0;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .tab-panel-header-compact h3 i {
            color: var(--electric-blue);
        }

        /* Segmented Control */
        .segmented-control {
            display: flex;
            gap: 0;
            background: rgba(15, 15, 15, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 4px;
            margin-bottom: 30px;
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }

        .segment-btn {
            background: transparent;
            border: none;
            color: rgba(255, 255, 255, 0.6);
            padding: 12px 24px;
            cursor: pointer;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.95em;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
            white-space: nowrap;
        }

        .segment-btn i {
            font-size: 1.1em;
        }

        .segment-btn:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        .segment-btn.active {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(57, 255, 20, 0.1));
            color: var(--electric-blue);
            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
        }

        /* Platform Selection Grid */
        .platform-selection-grid {
            display: block;
        }

        .platform-selection-grid h4 {
            color: var(--starlight);
            font-size: 1.3em;
            margin-bottom: 12px;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .platform-selection-grid h4 i {
            color: var(--electric-blue);
        }

        .platform-selection-grid > p {
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 30px;
        }

        .platform-cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }

        .platform-card {
            background: rgba(10, 10, 10, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .platform-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.5);
            background: rgba(10, 10, 10, 0.7);
            box-shadow: 0 8px 25px rgba(0, 212, 255, 0.2);
        }

        .platform-card-icon {
            font-size: 3em;
            color: var(--electric-blue);
            margin-bottom: 15px;
        }

        .platform-card h5 {
            color: var(--starlight);
            font-size: 1.1em;
            margin: 0 0 8px 0;
            font-family: 'Orbitron', monospace;
        }

        .platform-card p {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85em;
            margin: 0;
        }

        .platform-card-other {
            border-color: rgba(255, 107, 0, 0.3);
        }

        .platform-card-other:hover {
            border-color: rgba(255, 107, 0, 0.6);
            box-shadow: 0 8px 25px rgba(255, 107, 0, 0.2);
        }

        .platform-card-other .platform-card-icon {
            color: var(--electric-orange);
        }

        /* Back Button */
        .back-to-platforms-btn {
            background: rgba(15, 15, 15, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            padding: 10px 16px;
            cursor: pointer;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.9em;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .back-to-platforms-btn:hover {
            background: rgba(25, 25, 25, 0.7);
            border-color: rgba(255, 255, 255, 0.3);
            color: var(--starlight);
        }

        /* Platform Actions Row */
        .platform-actions-row {
            display: flex;
            gap: 12px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .copy-code-btn {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(57, 255, 20, 0.3);
            color: var(--plasma-green);
            padding: 12px 20px;
            cursor: pointer;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.95em;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .copy-code-btn:hover {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.25), rgba(0, 212, 255, 0.15));
            border-color: rgba(57, 255, 20, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(57, 255, 20, 0.3);
        }

        /* Widget Code Display */
        .widget-code-display {
            background: rgba(10, 10, 10, 0.6);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .widget-code-label {
            color: var(--electric-blue);
            font-size: 0.9em;
            font-weight: 600;
            margin-bottom: 12px;
            font-family: 'Exo 2', sans-serif;
        }

        .widget-code-display .code-mockup {
            margin: 0;
        }

        .widget-code-display .code-snippet {
            background: rgba(5, 5, 5, 0.8);
            padding: 15px;
            border-radius: 6px;
            border: 1px solid rgba(57, 255, 20, 0.2);
        }

        .widget-code-display .code-snippet code {
            color: var(--plasma-green);
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            line-height: 1.6;
            word-break: break-all;
        }

        .tab-panel-body {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            align-items: start;
            max-width: 1200px;
            margin: 0 auto;
        }

        .upload-visual,
        .training-visual {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Upload Tab Styles */
        .upload-mockup {
            background: rgba(10, 10, 10, 0.6);
            border: 2px dashed rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            padding: 30px;
        }

        .upload-zone {
            text-align: center;
            padding: 40px 20px;
            background: rgba(0, 212, 255, 0.05);
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .upload-zone i {
            font-size: 3em;
            color: var(--electric-blue);
            margin-bottom: 15px;
        }

        .upload-zone p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1em;
        }

        .upload-files {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .file-item {
            background: rgba(20, 20, 20, 0.8);
            padding: 12px 15px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid rgba(57, 255, 20, 0.3);
        }

        .file-item i:first-child {
            color: #ff6b6b;
            font-size: 1.3em;
        }

        .file-item span {
            flex: 1;
            color: var(--starlight);
            font-size: 0.95em;
        }

        .file-item i:last-child {
            color: var(--plasma-green);
            font-size: 1.2em;
        }

        .upload-benefits h4,
        .training-info h4,
        .widget-info h4,
        .payment-info h4 {
            color: var(--starlight);
            font-size: 1.1em;
            margin-bottom: 15px;
            font-family: 'Orbitron', monospace;
        }

        .upload-benefits ul,
        .training-info ul,
        .widget-info ul,
        .payment-info ul {
            list-style: none;
            padding: 0;
        }

        .upload-benefits li,
        .training-info li,
        .widget-info li,
        .payment-info li {
            padding: 8px 0;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .upload-benefits li i,
        .training-info li i,
        .widget-info li i,
        .payment-info li i {
            color: var(--plasma-green);
            font-size: 0.9em;
        }

        /* Training Tab Styles */
        .training-mockup {
            background: rgba(10, 10, 10, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px;
        }

        .training-progress {
            margin-bottom: 25px;
        }

        .progress-bar {
            background: rgba(20, 20, 20, 0.8);
            height: 30px;
            border-radius: 15px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 10px;
        }

        .progress-fill {
            background: linear-gradient(90deg, var(--electric-blue), var(--electric-orange));
            height: 100%;
            border-radius: 15px;
            transition: width 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 15px;
            color: white;
            font-weight: 600;
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }

        .progress-text {
            color: rgba(255, 255, 255, 0.9);
            text-align: center;
            font-size: 0.9em;
        }

        .training-steps {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .training-steps .step {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px;
            background: rgba(20, 20, 20, 0.6);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .training-steps .step.completed i {
            color: var(--plasma-green);
        }

        .training-steps .step.active {
            border-color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.05);
        }

        .training-steps .step.active i {
            color: var(--electric-blue);
        }

        .training-steps .step span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9em;
        }

        .training-time {
            margin-top: 20px;
            padding: 15px;
            background: rgba(0, 212, 255, 0.1);
            border-radius: 8px;
            border: 1px solid var(--electric-blue);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .training-time i {
            color: var(--electric-blue);
            font-size: 1.2em;
        }

        .training-time span {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.95em;
        }

        /* YouTube Training Resource Card */
        .training-resource-card {
            margin-top: 50px;
            padding: 30px;
            background: linear-gradient(135deg,
                rgba(255, 0, 0, 0.1) 0%,
                rgba(255, 0, 0, 0.05) 100%);
            border: 2px solid rgba(255, 0, 0, 0.3);
            border-radius: 16px;
            text-align: center;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .resource-card-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 15px;
        }

        .resource-card-header i {
            font-size: 2em;
            color: #ff0000;
        }

        .resource-card-header h4 {
            font-size: 1.5em;
            color: var(--starlight);
            margin: 0;
            font-family: 'Orbitron', monospace;
        }

        .training-resource-card p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.05em;
            margin-bottom: 25px;
            line-height: 1.6;
        }

        .youtube-link-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #ff0000, #cc0000);
            color: white;
            padding: 16px 32px;
            border-radius: 30px;
            text-decoration: none;
            font-weight: 700;
            font-size: 1.1em;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
        }

        .youtube-link-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 25px rgba(255, 0, 0, 0.5);
            background: linear-gradient(135deg, #ff1a1a, #e60000);
        }

        .youtube-link-btn i:first-child {
            font-size: 1.3em;
        }

        .youtube-link-btn i:last-child {
            font-size: 0.9em;
        }

        /* Widget Code Tab Styles */
        .code-visual {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .code-mockup {
            background: rgba(10, 10, 10, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
            overflow: hidden;
        }

        .code-header {
            background: rgba(20, 20, 20, 0.9);
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .code-label {
            color: var(--electric-blue);
            font-family: 'Orbitron', monospace;
            font-size: 0.9em;
        }

        .copy-btn {
            background: var(--electric-blue);
            color: var(--dark-matter);
            border: none;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .copy-btn:hover {
            background: var(--electric-orange);
            transform: translateY(-2px);
        }

        .code-snippet {
            padding: 20px;
            background: rgba(0, 0, 0, 0.6);
        }

        .code-snippet code {
            color: var(--plasma-green);
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.6;
            display: block;
            white-space: pre-wrap;
        }

        .widget-preview-mock {
            background: rgba(10, 10, 10, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            overflow: hidden;
        }

        .preview-header {
            background: var(--electric-blue);
            color: var(--dark-matter);
            padding: 12px 15px;
            font-weight: 600;
            font-family: 'Orbitron', monospace;
        }

        .preview-chat {
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .chat-bubble {
            padding: 12px 15px;
            border-radius: 12px;
            max-width: 80%;
            font-size: 0.9em;
            line-height: 1.4;
        }

        .chat-bubble.ai {
            background: rgba(0, 212, 255, 0.2);
            border: 1px solid var(--electric-blue);
            color: var(--starlight);
            align-self: flex-start;
        }

        .chat-bubble.user {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--starlight);
            align-self: flex-end;
        }

        /* Payment Tab Styles */
        .payment-mockup {
            background: rgba(10, 10, 10, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 30px;
            text-align: center;
        }

        .stripe-connect-btn {
            background: #635bff;
            color: white;
            padding: 15px 30px;
            border-radius: 8px;
            font-size: 1em;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .stripe-connect-btn:hover {
            background: #7a73ff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 91, 255, 0.4);
        }

        .payment-flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .flow-step {
            text-align: center;
        }

        .step-number {
            width: 40px;
            height: 40px;
            background: var(--electric-blue);
            color: var(--dark-matter);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.1em;
            margin: 0 auto 10px;
        }

        .flow-step p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.85em;
        }

        .flow-arrow {
            color: var(--electric-blue);
            font-size: 1.5em;
            font-weight: 700;
        }

        .fee-info {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 107, 0, 0.1);
            border-radius: 8px;
            border: 1px solid var(--electric-orange);
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
        }

        .fee-info i {
            color: var(--electric-orange);
            font-size: 1.2em;
        }

        .fee-info span {
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.95em;
        }

        /* Widget Subsections Styles */
        .widget-subsections {
            display: flex;
            flex-direction: column;
            gap: 25px;
        }

        .widget-subsection {
            background: rgba(10, 10, 10, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 20px;
        }

        .subsection-header {
            margin-bottom: 15px;
            position: relative;
        }

        .subsection-badge {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.75em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 10px;
        }

        .subsection-badge.recommended {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: var(--dark-matter);
        }

        .subsection-badge.simple {
            background: linear-gradient(135deg, var(--plasma-green), #2dd4bf);
            color: var(--dark-matter);
        }

        .subsection-header h4 {
            color: var(--starlight);
            font-size: 1.2em;
            margin-bottom: 8px;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .subsection-header h4 i {
            color: var(--electric-blue);
        }

        .subsection-header p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
            margin: 0;
        }

        .subsection-content {
            margin-top: 15px;
        }

        .platform-note {
            margin-top: 15px;
            padding: 12px;
            background: rgba(0, 212, 255, 0.1);
            border-left: 3px solid var(--electric-blue);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 0.9em;
        }

        .platform-note strong {
            color: var(--electric-blue);
        }

        /* Platform Grid Styles */
        .platform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .platform-card {
            background: rgba(20, 20, 20, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .platform-card:hover {
            border-color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.05);
            transform: translateY(-3px);
        }

        .platform-icon {
            font-size: 2.5em;
            color: var(--electric-blue);
            margin-bottom: 12px;
        }

        .platform-card h5 {
            color: var(--starlight);
            font-size: 1.1em;
            margin-bottom: 15px;
            font-family: 'Orbitron', monospace;
        }

        .platform-steps {
            text-align: left;
            padding-left: 20px;
            margin: 0;
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.85em;
            line-height: 1.6;
        }

        .platform-steps li {
            margin-bottom: 8px;
        }

        /* Method Toggle Buttons */
        .method-toggles {
            display: flex;
            gap: 12px;
            margin: 25px 0;
            justify-content: center;
            flex-wrap: wrap;
        }

        .method-toggle-btn {
            background: rgba(20, 20, 20, 0.6);
            border: 2px solid rgba(255, 255, 255, 0.15);
            color: rgba(255, 255, 255, 0.8);
            padding: 14px 24px;
            cursor: pointer;
            border-radius: 10px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.95em;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .method-toggle-btn i {
            font-size: 1.2em;
        }

        .method-toggle-btn:hover {
            background: rgba(30, 30, 30, 0.8);
            border-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        .method-toggle-btn.active {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border-color: transparent;
            color: var(--dark-matter);
            box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4);
        }

        .method-content-container {
            margin-top: 30px;
        }

        .method-section {
            display: none;
            animation: fadeIn 0.4s ease;
        }

        .method-section.active {
            display: block;
        }

        .method-section h4 {
            color: var(--starlight);
            font-size: 1.3em;
            margin-bottom: 12px;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .method-section h4 i {
            color: var(--electric-blue);
        }

        .method-section > p {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 20px;
        }

        /* Platform Tabs Navigation (Nested) */
        .platform-tabs-nav {
            display: flex;
            gap: 8px;
            margin: 20px 0;
            flex-wrap: wrap;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }

        .platform-tab-btn {
            background: rgba(15, 15, 15, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: rgba(255, 255, 255, 0.7);
            padding: 10px 16px;
            cursor: pointer;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.85em;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .platform-tab-btn i {
            font-size: 1.1em;
        }

        .platform-tab-btn:hover {
            background: rgba(25, 25, 25, 0.7);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .platform-tab-btn.active {
            background: rgba(57, 255, 20, 0.15);
            border-color: var(--plasma-green);
            color: var(--plasma-green);
        }

        /* Platform Panel Styles */
        .platform-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }

        .platform-panel.active {
            display: block;
        }

        .platform-panel-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 2px solid rgba(0, 212, 255, 0.3);
        }

        .platform-panel-header i {
            font-size: 2em;
            color: var(--electric-blue);
        }

        .platform-panel-header h5 {
            color: var(--starlight);
            font-size: 1.4em;
            margin: 0;
            font-family: 'Orbitron', monospace;
        }

        /* Detailed Steps */
        .detailed-steps {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 30px;
        }

        .step-item {
            display: flex;
            gap: 15px;
            background: rgba(10, 10, 10, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            transition: all 0.3s ease;
        }

        .step-item:hover {
            border-color: rgba(0, 212, 255, 0.3);
            background: rgba(10, 10, 10, 0.6);
        }

        .step-number {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: var(--dark-matter);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1.2em;
            font-family: 'Orbitron', monospace;
        }

        .step-content {
            flex: 1;
        }

        .step-content h6 {
            color: var(--starlight);
            font-size: 1.1em;
            margin: 0 0 10px 0;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
        }

        .step-content p {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin: 0 0 12px 0;
        }

        .step-content code {
            background: rgba(0, 0, 0, 0.6);
            color: var(--plasma-green);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }

        /* Step Tips, Warnings, Verification */
        .step-tip,
        .step-warning {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 12px;
            padding: 12px;
            border-radius: 8px;
            font-size: 0.9em;
        }

        .step-tip {
            background: rgba(57, 255, 20, 0.1);
            border-left: 3px solid var(--plasma-green);
        }

        .step-tip i {
            color: var(--plasma-green);
            font-size: 1.2em;
            flex-shrink: 0;
        }

        .step-warning {
            background: rgba(255, 107, 0, 0.1);
            border-left: 3px solid var(--electric-orange);
        }

        .step-warning i {
            color: var(--electric-orange);
            font-size: 1.2em;
            flex-shrink: 0;
        }

        .step-tip span,
        .step-warning span {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.5;
        }

        .code-example {
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(57, 255, 20, 0.3);
            border-radius: 8px;
            padding: 15px;
            margin-top: 12px;
        }

        .code-example code {
            color: var(--plasma-green);
            font-family: 'Courier New', monospace;
            font-size: 0.85em;
            line-height: 1.8;
            display: block;
            white-space: pre-wrap;
            background: transparent;
            padding: 0;
        }

        .verification-box {
            background: rgba(57, 255, 20, 0.15);
            border: 1px solid var(--plasma-green);
            border-radius: 8px;
            padding: 12px;
            margin-top: 12px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 0.9em;
        }

        .verification-box strong {
            color: var(--plasma-green);
        }

        /* Common Mistakes & Troubleshooting Boxes */
        .common-mistakes,
        .troubleshooting-box {
            background: rgba(20, 20, 20, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
        }

        .common-mistakes h6,
        .troubleshooting-box h6 {
            color: var(--starlight);
            font-size: 1.1em;
            margin: 0 0 15px 0;
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .common-mistakes h6 i {
            color: #ff6b6b;
        }

        .troubleshooting-box h6 i {
            color: var(--electric-blue);
        }

        .common-mistakes ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .common-mistakes li {
            color: rgba(255, 255, 255, 0.85);
            padding: 8px 0;
            line-height: 1.5;
        }

        .troubleshooting-box p {
            color: rgba(255, 255, 255, 0.85);
            margin: 0 0 12px 0;
            line-height: 1.6;
        }

        .troubleshooting-box p:last-child {
            margin-bottom: 0;
        }

        .troubleshooting-box strong {
            color: var(--electric-blue);
        }

        /* Accordion Styles */
        .view-full-guide-btn {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: var(--dark-matter);
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-family: 'Exo 2', sans-serif;
            font-size: 0.95em;
            font-weight: 600;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }

        .view-full-guide-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
        }

        .accordion-steps {
            gap: 12px;
        }

        .accordion-item {
            display: flex;
            flex-direction: column;
            background: rgba(10, 10, 10, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 0;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .accordion-item:hover {
            border-color: rgba(0, 212, 255, 0.2);
        }

        .step-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
        }

        .step-header:hover {
            background: rgba(0, 212, 255, 0.05);
        }

        .step-header-left {
            display: flex;
            align-items: center;
            gap: 15px;
            flex: 1;
        }

        .step-header-left .step-number {
            margin: 0;
        }

        .step-header-left h6 {
            margin: 0;
            color: var(--starlight);
            font-size: 1.05em;
            font-family: 'Exo 2', sans-serif;
            font-weight: 600;
        }

        .accordion-icon {
            color: var(--electric-blue);
            font-size: 1.2em;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        .accordion-item.active .accordion-icon {
            transform: rotate(180deg);
        }

        .step-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 20px;
        }

        .accordion-item.active .step-body {
            max-height: 1000px;
            padding: 0 20px 20px 20px;
        }

        .step-body p:first-child {
            margin-top: 0;
        }

        /* Modal Overlay */
        .guide-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(5px);
            z-index: 10000;
            overflow-y: auto;
            animation: fadeIn 0.3s ease;
        }

        .guide-modal-overlay.active {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 40px 20px;
        }

        .guide-modal {
            background: linear-gradient(135deg, rgba(10, 10, 20, 0.98), rgba(45, 27, 105, 0.95));
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 16px;
            max-width: 900px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
            box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
        }

        .guide-modal-header {
            position: sticky;
            top: 0;
            background: rgba(10, 10, 20, 0.98);
            border-bottom: 2px solid rgba(0, 212, 255, 0.3);
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .guide-modal-title {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--starlight);
            font-size: 1.5em;
            font-family: 'Orbitron', monospace;
            margin: 0;
        }

        .guide-modal-title i {
            color: var(--electric-blue);
            font-size: 1.2em;
        }

        .guide-modal-close {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--starlight);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            font-size: 1.2em;
        }

        .guide-modal-close:hover {
            background: rgba(255, 107, 0, 0.3);
            border-color: var(--electric-orange);
            transform: rotate(90deg);
        }

        .guide-modal-content {
            padding: 30px 25px;
        }

        .guide-modal-content .detailed-steps {
            margin-bottom: 0;
        }

        .guide-modal-content .step-item {
            margin-bottom: 20px;
        }

        .guide-modal-content .step-body {
            max-height: none;
            padding: 15px 20px 20px 75px;
        }

        /* Responsive for Tabs */
        @media (max-width: 768px) {
            .setup-tabs-nav {
                flex-direction: column;
                gap: 5px;
            }

            .setup-tab-btn {
                justify-content: center;
                padding: 10px 15px;
                border-radius: 8px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            .setup-tab-btn.active {
                border-bottom: 1px solid var(--electric-blue);
            }

            .tab-panel-body {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .tab-panel-header h3 {
                font-size: 1.2em;
            }

            .payment-flow {
                flex-direction: column;
                gap: 10px;
            }

            .flow-arrow {
                transform: rotate(90deg);
            }

            .platform-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .platform-card {
                padding: 15px;
            }

            .subsection-header h4 {
                font-size: 1em;
            }

            .method-toggles {
                flex-direction: column;
                gap: 8px;
            }

            .method-toggle-btn {
                justify-content: center;
                padding: 12px 18px;
                width: 100%;
            }

            .platform-tabs-nav {
                gap: 6px;
                overflow-x: auto;
                flex-wrap: nowrap;
                padding-bottom: 10px;
            }

            .platform-tab-btn {
                padding: 8px 12px;
                font-size: 0.8em;
                white-space: nowrap;
            }

            .step-item {
                flex-direction: column;
                padding: 15px;
            }

            .step-number {
                width: 35px;
                height: 35px;
                font-size: 1.1em;
            }

            .platform-panel-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .platform-panel-header i {
                font-size: 1.5em;
            }

            .platform-panel-header h5 {
                font-size: 1.2em;
            }
        }

        /* Urgency Section Styles */
        .urgency-section {
            padding: 100px 20px;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(255, 0, 110, 0.2) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 100%, rgba(255, 107, 0, 0.15) 0%, transparent 50%),
                linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.6) 100%);
            position: relative;
            overflow: hidden;
        }

        .urgency-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .market-reality-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 0, 110, 0.2));
            border: 2px solid rgba(255, 107, 0, 0.6);
            border-radius: 25px;
            padding: 12px 25px;
            margin-top: 20px;
            font-size: 1em;
            font-weight: 600;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3);
            animation: pulse-orange 2s ease-in-out infinite alternate;
        }

        @keyframes pulse-orange {
            from { box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3); }
            to { box-shadow: 0 15px 40px rgba(255, 107, 0, 0.5); }
        }

        .urgency-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            margin-bottom: 80px;
        }

        .problem-card, .solution-card {
            position: relative;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 25px;
            padding: 40px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            overflow: hidden;
        }

        .problem-card {
            border-left: 5px solid rgba(255, 0, 110, 0.8);
            box-shadow: 0 20px 60px rgba(255, 0, 110, 0.2);
        }

        .problem-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 70px rgba(255, 0, 110, 0.3);
        }

        .solution-card {
            border-left: 5px solid rgba(57, 255, 20, 0.8);
            box-shadow: 0 20px 60px rgba(57, 255, 20, 0.2);
        }

        .solution-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 25px 70px rgba(57, 255, 20, 0.3);
        }

        .card-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 25px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.1);
        }

        .problem-icon, .solution-icon {
            width: 80px;
            height: 80px;
            min-width: 80px;
            min-height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 2em;
            backdrop-filter: blur(10px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            aspect-ratio: 1;
            flex-shrink: 0;
        }

        .problem-icon {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.3), rgba(255, 0, 110, 0.1));
            border: 2px solid rgba(255, 0, 110, 0.5);
            color: var(--neon-pink);
        }

        .solution-icon {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.3), rgba(57, 255, 20, 0.1));
            border: 2px solid rgba(57, 255, 20, 0.5);
            color: var(--plasma-green);
        }

        .card-header h3 {
            font-size: 1.8em;
            margin: 15px 0 10px;
            font-family: 'Orbitron', monospace;
            font-weight: 700;
        }

        .card-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 1em;
            font-style: italic;
        }

        .challenge-items, .solution-items {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .challenge-item, .solution-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .challenge-item:hover, .solution-item:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateX(5px);
        }

        .challenge-item i {
            color: var(--neon-pink);
            font-size: 1.3em;
            margin-top: 2px;
        }

        .solution-item i {
            color: var(--plasma-green);
            font-size: 1.3em;
            margin-top: 2px;
        }

        .challenge-item div, .solution-item div {
            flex: 1;
        }

        .challenge-item strong, .solution-item strong {
            display: block;
            font-size: 1.1em;
            margin-bottom: 5px;
            color: #fff;
        }

        .challenge-item span, .solution-item span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.95em;
        }

        .stats-showcase {
            text-align: center;
            margin: 80px 0;
            padding: 50px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 25px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.2);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .stats-header {
            margin-bottom: 50px;
        }

        .stats-header h3 {
            font-size: 2.2em;
            margin-bottom: 15px;
            color: var(--electric-blue);
            font-family: 'Orbitron', monospace;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

        .stats-header p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
            max-width: 600px;
            margin: 0 auto;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }

        .stat {
            text-align: center;
            padding: 30px 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .stat:hover {
            transform: translateY(-5px);
            background: rgba(255, 255, 255, 0.08);
        }

        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(57, 255, 20, 0.3));
            border: 2px solid rgba(0, 212, 255, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 1.5em;
            color: var(--electric-blue);
        }

        .stat-number {
            font-size: 3.5em;
            font-weight: 900;
            color: var(--plasma-green);
            font-family: 'Orbitron', monospace;
            text-shadow: 0 0 20px rgba(57, 255, 20, 0.5);
            margin-bottom: 10px;
        }

        .stat-label {
            font-size: 1.2em;
            color: #fff;
            margin-bottom: 8px;
            font-weight: 600;
        }

        .stat-detail {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.7);
            font-style: italic;
        }

        .competitive-advantage {
            text-align: center;
            padding: 50px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 25px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(255, 107, 0, 0.2);
            border: 1px solid rgba(255, 107, 0, 0.4);
        }

        .advantage-header {
            margin-bottom: 40px;
        }

        .warning-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 0, 110, 0.3));
            border: 3px solid rgba(255, 107, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            font-size: 2.5em;
            color: var(--electric-orange);
            animation: pulse-warning 2s ease-in-out infinite alternate;
        }

        @keyframes pulse-warning {
            from {
                box-shadow: 0 0 30px rgba(255, 107, 0, 0.5);
                transform: scale(1);
            }
            to {
                box-shadow: 0 0 40px rgba(255, 107, 0, 0.8);
                transform: scale(1.05);
            }
        }

        .competitive-advantage h3 {
            font-size: 2.4em;
            margin-bottom: 20px;
            color: var(--electric-orange);
            font-family: 'Orbitron', monospace;
        }

        .competitive-advantage p {
            font-size: 1.3em;
            margin-bottom: 40px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.9);
        }

        .urgency-metrics {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin: 40px 0;
            flex-wrap: wrap;
        }

        .urgency-metric {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px 25px;
            background: rgba(255, 107, 0, 0.1);
            border: 1px solid rgba(255, 107, 0, 0.3);
            border-radius: 20px;
            color: var(--electric-orange);
            font-weight: 600;
        }

        .urgency-metric i {
            font-size: 1.3em;
        }
        
        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        @media (max-width: 768px) {
            .urgency-grid {
                grid-template-columns: 1fr;
            }
            
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }
        }
        
        /* Live Demo Section */
        .live-demo {
            padding: 100px 20px;
            background: 
                radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(255, 107, 0, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(45, 27, 105, 0.4) 100%);
            color: var(--starlight);
            position: relative;
            overflow: hidden;
        }
        
        /* Live demo section - clean background */
        
        .demo-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }
        
        .demo-info h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }
        
        .demo-info p {
            font-size: 1.2em;
            margin-bottom: 30px;
            opacity: 0.9;
        }
        
        .status-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .status-item {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            text-align: center;
        }
        
        .status-indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 8px;
        }
        
        .status-online {
            background: #10b981;
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
        }
        
        .status-offline {
            background: #ef4444;
        }
        
        /* Chat Widget Demo */
        .chat-widget-demo {
            background: rgba(10, 10, 10, 0.9);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            overflow: hidden;
            backdrop-filter: blur(20px);
            box-shadow: 
                0 20px 60px rgba(0, 0, 0, 0.7),
                inset 0 0 20px rgba(0, 212, 255, 0.1);
            height: 500px;
            display: flex;
            flex-direction: column;
            color: var(--starlight);
        }
        
        .chat-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .message {
            max-width: 80%;
            padding: 12px 16px;
            border-radius: 18px;
            word-wrap: break-word;
            line-height: 1.4;
        }
        
        .message.assistant {
            background: rgba(0, 212, 255, 0.15);
            color: var(--starlight);
            align-self: flex-start;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }
        
        .message.user {
            background: linear-gradient(135deg, var(--electric-orange) 0%, var(--electric-blue) 100%);
            color: var(--starlight);
            align-self: flex-end;
            border: 1px solid var(--electric-orange);
        }
        
        .chat-input {
            padding: 20px;
            background: rgba(10, 10, 10, 0.8);
            border-top: 1px solid rgba(0, 212, 255, 0.3);
            display: flex;
            gap: 10px;
        }
        
        .chat-input input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #d1d5db;
            border-radius: 25px;
        }

        .chat-input input:focus-visible {
            outline: 2px solid var(--electric-blue);
            outline-offset: 2px;
            border-color: var(--electric-blue);
        }
        
        .chat-input button {
            background: #667eea;
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px 24px;
            cursor: pointer;
        }

        /* Technical Architecture Section */
        .tech-architecture {
            padding: 120px 20px;
            background:
                radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(57, 255, 20, 0.06) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.12) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
        }

        .section-header-tech {
            text-align: center;
            margin-bottom: 70px;
        }

        .architecture-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 35px;
            margin-bottom: 80px;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }

        .architecture-card {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.02) 100%);
            border: 2px solid rgba(0, 212, 255, 0.2);
            border-radius: 18px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .architecture-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .architecture-card:hover {
            transform: translateY(-10px);
            border-color: rgba(0, 212, 255, 0.5);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(0, 212, 255, 0.2);
        }

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

        .architecture-icon-wrapper {
            margin-bottom: 25px;
        }

        .architecture-icon {
            width: 80px;
            height: 80px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2em;
            margin-bottom: 20px;
            transition: all 0.4s ease;
        }

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

        .database-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(57, 255, 20, 0.3));
            color: var(--electric-blue);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
        }

        .ai-icon {
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 20, 147, 0.3));
            color: var(--sunset-orange);
            box-shadow: 0 0 30px rgba(255, 107, 0, 0.4);
        }

        .realtime-icon {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.3), rgba(0, 212, 255, 0.3));
            color: var(--plasma-green);
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.4);
        }

        .security-icon {
            background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(255, 107, 0, 0.3));
            color: #a78bfa;
            box-shadow: 0 0 30px rgba(138, 43, 226, 0.4);
        }

        .architecture-card h3 {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.6em;
            font-weight: 700;
            margin: 0 0 15px 0;
        }

        .architecture-description {
            color: rgba(255, 255, 255, 0.75);
            font-size: 1em;
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .tech-features {
            display: flex;
            flex-direction: column;
            gap: 12px;
            text-align: left;
        }

        .tech-feature-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .tech-feature-item:hover {
            background: rgba(0, 212, 255, 0.08);
            border-color: rgba(0, 212, 255, 0.3);
            transform: translateX(5px);
        }

        .tech-feature-item i {
            color: var(--electric-blue);
            font-size: 1.1em;
            flex-shrink: 0;
        }

        .tech-feature-item span {
            color: rgba(255, 255, 255, 0.85);
            font-size: 0.95em;
            line-height: 1.5;
        }

        .performance-metrics {
            max-width: 1200px;
            margin: 0 auto 60px;
            text-align: center;
        }

        .performance-metrics h3 {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.8em;
            font-weight: 700;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }

        .performance-metrics h3 i {
            color: var(--electric-blue);
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 25px;
        }

        .metric-card {
            background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(0, 212, 255, 0.25);
            border-radius: 14px;
            padding: 30px 20px;
            transition: all 0.3s ease;
            text-align: center;
        }

        .metric-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.5);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.15);
        }

        .metric-value {
            color: var(--electric-blue);
            font-size: 2.5em;
            font-weight: 800;
            margin-bottom: 10px;
            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }

        .metric-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95em;
            line-height: 1.4;
        }

        .tech-stack {
            text-align: center;
            max-width: 1000px;
            margin: 0 auto;
        }

        .tech-stack h4 {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.2em;
            font-weight: 600;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .tech-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
        }

        .tech-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.5) 0%,
                rgba(0, 0, 0, 0.3) 100%);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 25px;
            font-size: 0.95em;
            color: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }

        .tech-badge:hover {
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.2) 0%,
                rgba(0, 212, 255, 0.1) 100%);
            border-color: rgba(0, 212, 255, 0.4);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.2);
        }

        .tech-badge i {
            color: var(--electric-blue);
            font-size: 1.3em;
        }

        /* Responsive adjustments for Technical Architecture */
        @media (max-width: 1200px) {
            .architecture-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .tech-architecture {
                padding: 80px 20px;
            }

            .architecture-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }

            .architecture-card {
                grid-column: span 1 !important;
            }

            .architecture-icon {
                width: 70px;
                height: 70px;
                font-size: 1.8em;
            }

            .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }

            .metric-value {
                font-size: 2em;
            }
        }

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

            .tech-badges {
                gap: 10px;
            }

            .tech-badge {
                padding: 10px 16px;
                font-size: 0.9em;
            }
        }

        /* Employee Management Section */
        .employee-management {
            padding: 120px 20px;
            background:
                radial-gradient(ellipse at 20% 0%, rgba(138, 43, 226, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.06) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.15) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
        }

        .section-header-employee {
            text-align: center;
            margin-bottom: 70px;
        }

        .management-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .feature-block-emp {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.02) 100%);
            border: 2px solid rgba(138, 43, 226, 0.25);
            border-radius: 18px;
            padding: 35px;
            transition: all 0.4s ease;
            backdrop-filter: blur(12px);
            position: relative;
            overflow: hidden;
        }

        .feature-block-emp::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 0%, rgba(138, 43, 226, 0.1) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .feature-block-emp:hover {
            transform: translateY(-8px);
            border-color: rgba(138, 43, 226, 0.5);
            box-shadow:
                0 20px 50px rgba(0, 0, 0, 0.25),
                0 0 35px rgba(138, 43, 226, 0.15);
        }

        .feature-block-emp:hover::before {
            opacity: 1;
        }

        .feature-emp-header {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 28px;
            padding-bottom: 20px;
            border-bottom: 2px solid rgba(255, 255, 255, 0.08);
        }

        .feature-emp-icon {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6em;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .feature-block-emp:hover .feature-emp-icon {
            transform: scale(1.1) rotate(5deg);
        }

        .scheduling-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(57, 255, 20, 0.25));
            color: var(--electric-blue);
            box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
        }

        .permission-icon {
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.25), rgba(255, 20, 147, 0.25));
            color: var(--sunset-orange);
            box-shadow: 0 0 25px rgba(255, 107, 0, 0.3);
        }

        .chat-icon {
            background: linear-gradient(135deg, rgba(138, 43, 226, 0.25), rgba(0, 212, 255, 0.25));
            color: #a78bfa;
            box-shadow: 0 0 25px rgba(138, 43, 226, 0.3);
        }

        .feature-emp-header h3 {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.5em;
            font-weight: 700;
            margin: 0;
            line-height: 1.3;
        }

        .feature-emp-content {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .feature-point {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            padding: 14px 18px;
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .feature-point:hover {
            background: rgba(138, 43, 226, 0.08);
            border-color: rgba(138, 43, 226, 0.3);
            transform: translateX(5px);
        }

        .feature-point i {
            color: var(--electric-blue);
            font-size: 1.2em;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .feature-point span {
            color: rgba(255, 255, 255, 0.85);
            font-size: 1em;
            line-height: 1.6;
        }

        .roles-grid-emp {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            gap: 18px;
            margin-top: 10px;
        }

        .role-card-emp {
            background: linear-gradient(135deg,
                rgba(0, 0, 0, 0.4) 0%,
                rgba(0, 0, 0, 0.2) 100%);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 22px 18px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .role-card-emp:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }

        .admin-role {
            border-color: rgba(255, 215, 0, 0.4);
        }

        .admin-role:hover {
            background: linear-gradient(135deg,
                rgba(255, 215, 0, 0.1) 0%,
                rgba(255, 215, 0, 0.05) 100%);
            border-color: rgba(255, 215, 0, 0.6);
        }

        .admin-role .role-icon-emp {
            color: #ffd700;
        }

        .manager-role {
            border-color: rgba(0, 212, 255, 0.4);
        }

        .manager-role:hover {
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.1) 0%,
                rgba(0, 212, 255, 0.05) 100%);
            border-color: rgba(0, 212, 255, 0.6);
        }

        .manager-role .role-icon-emp {
            color: var(--electric-blue);
        }

        .server-role {
            border-color: rgba(57, 255, 20, 0.4);
        }

        .server-role:hover {
            background: linear-gradient(135deg,
                rgba(57, 255, 20, 0.1) 0%,
                rgba(57, 255, 20, 0.05) 100%);
            border-color: rgba(57, 255, 20, 0.6);
        }

        .server-role .role-icon-emp {
            color: var(--plasma-green);
        }

        .hostess-role {
            border-color: rgba(255, 107, 0, 0.4);
        }

        .hostess-role:hover {
            background: linear-gradient(135deg,
                rgba(255, 107, 0, 0.1) 0%,
                rgba(255, 107, 0, 0.05) 100%);
            border-color: rgba(255, 107, 0, 0.6);
        }

        .hostess-role .role-icon-emp {
            color: var(--sunset-orange);
        }

        .role-icon-emp {
            font-size: 2em;
            margin-bottom: 12px;
            transition: transform 0.3s ease;
        }

        .role-card-emp:hover .role-icon-emp {
            transform: scale(1.15);
        }

        .role-card-emp h4 {
            color: rgba(255, 255, 255, 0.95);
            font-size: 1.1em;
            font-weight: 700;
            margin: 0 0 10px 0;
        }

        .role-card-emp p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
            line-height: 1.5;
            margin: 0;
        }

        /* Responsive adjustments for Employee Management */
        @media (max-width: 1200px) {
            .management-features-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .employee-management {
                padding: 80px 20px;
            }

            .feature-emp-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }

            .feature-emp-icon {
                width: 50px;
                height: 50px;
                font-size: 1.4em;
            }

            .roles-grid-emp {
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }
        }

        @media (max-width: 480px) {
            .roles-grid-emp {
                grid-template-columns: 1fr;
            }
        }

        /* Intelligence Layer Section */
        .intelligence-layer {
            padding: 120px 20px;
            background:
                radial-gradient(ellipse at 50% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.06) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(45, 27, 105, 0.12) 50%, rgba(10, 10, 10, 0.98) 100%);
            position: relative;
        }

        .section-header-intelligence {
            text-align: center;
            margin-bottom: 60px;
        }

        .agents-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 80px;
        }

        .agent-card {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 100%);
            border: 2px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 35px;
            text-align: center;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .agent-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.05) 0%,
                rgba(255, 107, 0, 0.05) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }

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

        .agent-card:hover {
            transform: translateY(-10px);
            border-color: rgba(0, 212, 255, 0.5);
            box-shadow:
                0 20px 60px rgba(0, 0, 0, 0.3),
                0 0 40px rgba(0, 212, 255, 0.2);
        }

        .agent-card > * {
            position: relative;
            z-index: 1;
        }

        .agent-icon-large {
            width: 80px;
            height: 80px;
            margin: 0 auto 25px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5em;
            position: relative;
        }

        .orchestrator-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(57, 255, 20, 0.3));
            color: var(--electric-blue);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }

        .reasoning-icon {
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.3), rgba(255, 0, 110, 0.3));
            color: var(--electric-orange);
            box-shadow: 0 0 30px rgba(255, 107, 0, 0.3);
        }

        .validator-icon {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.3), rgba(0, 212, 255, 0.3));
            color: var(--plasma-green);
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.3);
        }

        .resolver-icon {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.3), rgba(255, 107, 0, 0.3));
            color: var(--nebula-pink);
            box-shadow: 0 0 30px rgba(255, 0, 110, 0.3);
        }

        .extractor-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(255, 107, 0, 0.3));
            color: var(--electric-blue);
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }

        .agent-card h3 {
            font-size: 1.4em;
            font-weight: 700;
            color: var(--starlight);
            margin-bottom: 15px;
        }

        .agent-description {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1em;
            line-height: 1.6;
            margin-bottom: 25px;
        }

        .agent-capabilities {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .capability-badge {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 8px;
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.9);
            transition: all 0.3s ease;
        }

        .capability-badge:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: rgba(0, 212, 255, 0.4);
            transform: translateX(5px);
        }

        .capability-badge i {
            color: var(--plasma-green);
            font-size: 1.1em;
        }

        .intelligence-benefits {
            margin-top: 80px;
            text-align: center;
        }

        .intelligence-benefits h3 {
            font-size: 2em;
            font-weight: 700;
            color: var(--starlight);
            margin-bottom: 40px;
        }

        /* ── Add-Ons grid: balanced 4-up (no orphan card / dead space) ── */
        .addons-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            max-width: 1180px;
            margin: 0 auto;
        }
        .addon-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            text-align: left;
            padding: 30px 26px 26px;
            border-radius: 18px;
            background: linear-gradient(160deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
            border: 1px solid rgba(255,255,255,0.09);
            overflow: hidden;
            transition: transform 0.28s cubic-bezier(.2,.7,.3,1), border-color 0.28s, box-shadow 0.28s, background 0.28s;
        }
        /* accent bar keyed per card via --accent */
        .addon-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: var(--accent, #00d4ff);
            opacity: 0.9;
        }
        .addon-card:hover {
            transform: translateY(-8px);
            /* fallbacks first (older browsers), color-mix override for modern */
            border-color: rgba(255,255,255,0.28);
            border-color: color-mix(in srgb, var(--accent, #00d4ff) 45%, transparent);
            box-shadow: 0 22px 50px -22px rgba(0,0,0,0.55);
            box-shadow: 0 22px 50px -22px color-mix(in srgb, var(--accent, #00d4ff) 65%, transparent),
                        0 0 0 1px color-mix(in srgb, var(--accent, #00d4ff) 25%, transparent) inset;
            background: linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
        }
        .addon-icon {
            width: 52px; height: 52px;
            display: flex; align-items: center; justify-content: center;
            border-radius: 13px;
            font-size: 1.5em;
            margin-bottom: 18px;
            color: var(--accent, #00d4ff);
            background: rgba(255,255,255,0.08);
            background: color-mix(in srgb, var(--accent, #00d4ff) 14%, transparent);
            border: 1px solid rgba(255,255,255,0.14);
            border: 1px solid color-mix(in srgb, var(--accent, #00d4ff) 30%, transparent);
        }
        .addon-card h4 {
            font-size: 1.18em;
            font-weight: 700;
            color: var(--starlight);
            margin: 0 0 6px;
            letter-spacing: -0.01em;
        }
        .addon-card .addon-sub {
            color: rgba(255,255,255,0.55);
            font-size: 0.9em;
            line-height: 1.45;
            margin: 0 0 auto;
            padding-bottom: 20px;
        }
        .addon-price {
            display: flex;
            align-items: baseline;
            gap: 6px;
            margin-top: 4px;
        }
        .addon-price .amt {
            font-family: 'Orbitron', sans-serif;
            font-size: 2em;
            font-weight: 800;
            color: #fff;
            line-height: 1;
        }
        .addon-price .per {
            font-size: 0.82em;
            color: rgba(255,255,255,0.5);
            font-weight: 500;
        }
        .addon-unit {
            font-size: 0.85em;
            color: rgba(255,255,255,0.45);
            margin: 6px 0 14px;
        }
        .addon-save {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.8em;
            font-weight: 600;
            color: #cfe9ff;
            color: color-mix(in srgb, var(--accent, #00d4ff) 80%, white);
            background: rgba(255,255,255,0.06);
            background: color-mix(in srgb, var(--accent, #00d4ff) 12%, transparent);
            border: 1px solid rgba(255,255,255,0.12);
            border: 1px solid color-mix(in srgb, var(--accent, #00d4ff) 24%, transparent);
            padding: 5px 11px;
            border-radius: 20px;
        }
        .addon-card.featured {
            background: linear-gradient(160deg, rgba(139,92,246,0.14), rgba(139,92,246,0.04));
            border-color: rgba(139,92,246,0.35);
        }
        .addon-featured-badge {
            position: absolute;
            top: 14px; right: 14px;
            font-size: 0.62em;
            font-weight: 800;
            letter-spacing: 0.06em;
            color: #fff;
            background: linear-gradient(135deg, #7c3aed, #ff006e);
            padding: 3px 9px;
            border-radius: 20px;
        }
        @media (max-width: 980px) {
            .addons-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 640px; }
        }
        @media (max-width: 520px) {
            .addons-grid { grid-template-columns: 1fr; max-width: 400px; }
        }

        .benefits-comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 40px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .comparison-column {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.02) 100%);
            border-radius: 16px;
            padding: 35px;
            text-align: left;
        }

        .chatbot-column {
            border: 2px solid rgba(255, 0, 110, 0.3);
        }

        .aedan-column {
            border: 2px solid rgba(57, 255, 20, 0.3);
        }

        .comparison-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .comparison-header i {
            font-size: 2em;
        }

        .chatbot-column .comparison-header i {
            color: var(--nebula-pink);
        }

        .aedan-column .comparison-header i {
            color: var(--plasma-green);
        }

        .comparison-header h4 {
            font-size: 1.5em;
            font-weight: 700;
            color: var(--starlight);
            margin: 0;
        }

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

        .comparison-list li {
            padding: 12px 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            color: rgba(255, 255, 255, 0.85);
            font-size: 1em;
            line-height: 1.5;
        }

        .chatbot-column .comparison-list li {
            border-left: 3px solid rgba(255, 0, 110, 0.5);
        }

        .aedan-column .comparison-list li {
            border-left: 3px solid rgba(57, 255, 20, 0.5);
        }

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

            .benefits-comparison {
                grid-template-columns: 1fr;
            }
        }

        /* Dashboard Showcase Section */
        .dashboard-showcase {
            padding: 120px 20px;
            background:
                radial-gradient(ellipse at 30% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 100%, rgba(255, 107, 0, 0.06) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.15) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
        }

        .section-header-dashboard {
            text-align: center;
            margin-bottom: 60px;
        }

        .analytics-tabs-overview {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 60px;
        }

        .analytics-tab-card {
            background: linear-gradient(135deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.02) 100%);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 16px;
            padding: 30px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .analytics-tab-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow:
                0 15px 40px rgba(0, 0, 0, 0.2),
                0 0 30px rgba(0, 212, 255, 0.1);
        }

        .tab-card-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .tab-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5em;
        }

        .revenue-icon {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(0, 212, 255, 0.2));
            color: var(--plasma-green);
        }

        .customer-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(255, 107, 0, 0.2));
            color: var(--electric-blue);
        }

        .ai-icon {
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 0, 110, 0.2));
            color: var(--electric-orange);
        }

        .operational-icon {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(57, 255, 20, 0.2));
            color: var(--electric-blue);
        }

        .email-icon {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(0, 212, 255, 0.2));
            color: var(--nebula-pink);
        }

        .tab-card-header h3 {
            font-size: 1.3em;
            font-weight: 700;
            color: var(--starlight);
            margin: 0;
        }

        .tab-card-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .feature-row-dash {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .feature-row-dash:hover {
            background: rgba(0, 212, 255, 0.05);
            transform: translateX(5px);
        }

        .feature-row-dash > i {
            color: var(--electric-blue);
            font-size: 1.3em;
            min-width: 24px;
            margin-top: 3px;
        }

        .feature-text {
            flex: 1;
        }

        .feature-text strong {
            display: block;
            color: var(--starlight);
            font-size: 1.05em;
            margin-bottom: 5px;
        }

        .feature-text p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.95em;
            line-height: 1.5;
            margin: 0;
        }

        .dashboard-cta {
            background: linear-gradient(135deg,
                rgba(0, 212, 255, 0.1) 0%,
                rgba(255, 107, 0, 0.1) 100%);
            border: 2px solid rgba(0, 212, 255, 0.3);
            border-radius: 16px;
            padding: 40px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
        }

        .cta-content-dash h3 {
            font-size: 1.8em;
            font-weight: 700;
            color: var(--starlight);
            margin-bottom: 10px;
        }

        .cta-content-dash p {
            font-size: 1.1em;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
        }

        .btn-large {
            padding: 18px 40px;
            font-size: 1.2em;
        }

        @media (max-width: 768px) {
            .analytics-tabs-overview {
                grid-template-columns: 1fr;
            }
        }

        /* Enhanced Pricing Section */
        .pricing {
            padding: 120px 20px;
            background:
                radial-gradient(ellipse at 20% 0%, rgba(255, 107, 0, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.95) 0%, rgba(45, 27, 105, 0.2) 50%, rgba(10, 10, 10, 0.95) 100%);
            position: relative;
            overflow: hidden;
        }

        /* Pricing section - clean background */

        .pricing-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
            z-index: 2;
        }

        .billing-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin: 30px 0 40px;
            padding: 8px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            backdrop-filter: blur(10px);
        }

        .billing-option {
            font-size: 1.1em;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            transition: all 0.3s ease;
        }

        .billing-option#yearly-label {
            color: var(--electric-blue);
        }

        .savings-badge {
            background: linear-gradient(135deg, var(--electric-orange), var(--neon-pink));
            color: white;
            font-size: 0.8em;
            padding: 4px 8px;
            border-radius: 12px;
            margin-left: 8px;
            font-weight: 700;
            animation: pulse 2s ease-in-out infinite;
        }

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

        .toggle-switch {
            position: relative;
            display: inline-block;
        }

        .toggle-input {
            opacity: 0;
            width: 0;
            height: 0;
        }

        .toggle-label {
            display: block;
            width: 60px;
            height: 30px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid rgba(0, 212, 255, 0.3);
        }

        .toggle-input:checked + .toggle-label {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border-color: var(--electric-blue);
        }

        .toggle-switch-element {
            position: absolute;
            top: 2px;
            left: 2px;
            width: 22px;
            height: 22px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .toggle-input:checked + .toggle-label .toggle-switch-element {
            transform: translateX(30px);
        }

        .social-proof-banner {
            background: rgba(0, 0, 0, 0.6);
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 50px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .trust-indicators {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-bottom: 15px;
            flex-wrap: wrap;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--electric-blue);
            font-weight: 600;
        }

        .trust-item i {
            font-size: 1.2em;
        }

        .guarantee-text {
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
            font-size: 1em;
        }

        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        /* Plan Tier Toggle Styles */
        .plan-tier-toggle {
            margin-bottom: 40px;
        }

        .tier-toggle-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
            padding: 20px 35px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1em;
        }

        .tier-toggle-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(0, 212, 255, 0.4);
            transform: translateY(-2px);
        }

        .tier-toggle-btn.active {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(57, 255, 20, 0.1));
            border-color: var(--electric-blue);
            color: var(--starlight);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
        }

        .tier-indicator.pulse {
            animation: tierPulse 2s infinite;
        }

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

        .pricing-tier-group {
            animation: fadeInUp 0.4s ease;
        }

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

        @media (max-width: 1200px) {
            .pricing-grid {
                grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            }
        }

        @media (max-width: 768px) {
            .plan-tier-toggle {
                flex-direction: column;
                gap: 15px;
            }
            .tier-toggle-btn {
                width: 100%;
                max-width: 300px;
            }
        }

        .pricing-card {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 35px 25px;
            text-align: center;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            position: relative;
            transition: all 0.4s ease;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 620px;
        }

        .pricing-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent, rgba(255, 107, 0, 0.03), transparent);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
        }

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

        /* Free Plan Styling */
        .free-plan {
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.1);
        }

        .free-plan:hover {
            border-color: var(--electric-blue);
            box-shadow: 0 30px 80px rgba(0, 212, 255, 0.2);
        }

        /* Professional Plan - Most Popular (subtle elevation) */
        .professional-plan.popular {
            transform: scale(1.05);
            border: 3px solid var(--electric-orange);
            box-shadow:
                0 15px 40px rgba(255, 107, 0, 0.25),
                0 0 20px rgba(255, 107, 0, 0.35);
            background: rgba(0, 0, 0, 0.8);
            z-index: 2;
            margin: 15px 0;
        }

        .professional-plan.popular:hover {
            transform: scale(1.05) translateY(-10px);
            box-shadow:
                0 20px 50px rgba(255, 107, 0, 0.35),
                0 0 30px rgba(255, 107, 0, 0.45);
        }

        /* Responsive scaling for Professional card */
        @media (max-width: 1600px) {
            .professional-plan.popular {
                transform: scale(1.03);
            }
            .professional-plan.popular:hover {
                transform: scale(1.03) translateY(-10px);
            }
        }

        @media (max-width: 1400px) {
            .professional-plan.popular {
                transform: scale(1.03);
            }
            .professional-plan.popular:hover {
                transform: scale(1.03) translateY(-8px);
            }
        }

        @media (max-width: 1200px) {
            .professional-plan.popular {
                transform: scale(1.02);
            }
            .professional-plan.popular:hover {
                transform: scale(1.02) translateY(-8px);
            }
        }

        @media (max-width: 992px) {
            .professional-plan.popular {
                transform: scale(1.0);
                margin: 10px 0;
            }
            .professional-plan.popular:hover {
                transform: scale(1.0) translateY(-5px);
            }

            /* Maintain consistent grid gap on tablets */
            .pricing-grid {
                gap: 35px;
            }
        }

        .plan-badge {
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .starter-badge {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: white;
        }

        .popular-badge {
            background: linear-gradient(135deg, var(--electric-orange), var(--neon-pink));
            color: white;
            animation: glow 2s ease-in-out infinite alternate;
        }

        .enterprise-badge {
            background: linear-gradient(135deg, var(--plasma-green), var(--electric-blue));
            color: white;
        }

        @keyframes glow {
            from { box-shadow: 0 5px 20px rgba(255, 107, 0, 0.3); }
            to { box-shadow: 0 5px 30px rgba(255, 107, 0, 0.6); }
        }

        .plan-header {
            margin-bottom: 25px;
            flex-shrink: 0;
        }

        .plan-icon {
            width: 55px;
            height: 55px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 1.6em;
            color: white;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .plan-name {
            font-size: 1.8em;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--starlight);
            font-family: 'Orbitron', monospace;
        }

        .plan-price {
            display: flex;
            align-items: baseline;
            justify-content: center;
            margin-bottom: 15px;
        }

        .plan-price .currency {
            font-size: 1.2em;
            color: var(--electric-blue);
            font-weight: 600;
        }

        .plan-price .amount {
            font-size: 3.5em;
            font-weight: 900;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 15px rgba(0, 212, 255, 0.3));
            margin: 0 5px;
        }

        .plan-price .period {
            font-size: 1em;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 400;
        }

        .plan-description {
            color: rgba(255, 255, 255, 0.8);
            margin-bottom: 30px;
            font-size: 1.1em;
            line-height: 1.5;
        }

        .plan-features {
            margin-bottom: 30px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        /* iOS app included — highlighted feature row */
        .feature-item-ios-app {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(57, 255, 20, 0.05));
            border-left: 2px solid var(--plasma-green);
            padding-left: 10px;
            border-radius: 4px;
        }
        .feature-item-ios-app i.fab.fa-apple {
            color: var(--plasma-green) !important;
        }

        .feature-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .feature-item:last-child {
            border-bottom: none;
        }

        .feature-item i {
            color: var(--electric-blue);
            margin-right: 15px;
            font-size: 1.1em;
            width: 20px;
            text-align: center;
        }

        .feature-item.highlight i {
            color: var(--electric-orange);
        }

        .feature-item span {
            color: var(--starlight);
            font-weight: 500;
            flex: 1;
            text-align: left;
        }

        .feature-item:hover {
            background: rgba(255, 255, 255, 0.05);
            padding-left: 15px;
            border-radius: 8px;
        }

        /* Quick Benefits Styling */
        .quick-benefits {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(57, 255, 20, 0.1) 100%);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            position: relative;
            overflow: hidden;
        }

        .quick-benefits::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--electric-blue), var(--plasma-green), var(--electric-orange));
        }

        .quick-benefits h4 {
            color: var(--electric-blue);
            font-size: 1.1em;
            font-weight: 700;
            margin: 0 0 15px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .quick-benefits ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 8px;
        }

        .quick-benefits li {
            color: var(--starlight);
            font-size: 0.95em;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.3s ease;
        }

        .quick-benefits li:hover {
            color: var(--plasma-green);
            transform: translateX(5px);
        }

        .quick-benefits li i {
            color: var(--plasma-green);
            font-size: 0.9em;
            width: 16px;
            flex-shrink: 0;
            filter: drop-shadow(0 0 3px rgba(57, 255, 20, 0.3));
        }

        .plan-button {
            width: 100%;
            padding: 16px 20px;
            border: none;
            border-radius: 15px;
            font-size: 1em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            flex-shrink: 0;
            margin-top: auto;
            overflow: hidden;
        }

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

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

        .free-button {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: white;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.4);
        }

        .free-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6);
        }

        .starter-button {
            background: linear-gradient(135deg, var(--electric-blue), var(--plasma-green));
            color: white;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .starter-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(0, 212, 255, 0.5);
        }

        .professional-button {
            background: linear-gradient(135deg, var(--electric-orange), var(--neon-pink));
            color: white;
            box-shadow: 0 10px 30px rgba(255, 107, 0, 0.4);
        }

        .professional-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(255, 107, 0, 0.6);
        }

        .growth-button {
            background: linear-gradient(135deg, var(--plasma-green), var(--electric-blue));
            color: white;
            box-shadow: 0 10px 30px rgba(57, 255, 20, 0.3);
        }

        .growth-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(57, 255, 20, 0.5);
        }

        .enterprise-button {
            background: linear-gradient(135deg, var(--cosmic-purple), var(--electric-blue));
            color: white;
            box-shadow: 0 10px 30px rgba(138, 43, 226, 0.3);
        }

        .enterprise-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(138, 43, 226, 0.5);
        }

        /* Feature Comparison Section */
        .feature-comparison {
            margin-top: 80px;
            padding: 50px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 25px;
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .feature-comparison h3 {
            text-align: center;
            font-size: 2em;
            margin-bottom: 30px;
            color: var(--electric-blue);
            font-family: 'Orbitron', monospace;
        }

        .comparison-toggle {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 40px;
        }

        .toggle-btn {
            padding: 12px 25px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .toggle-btn.active,
        .toggle-btn:hover {
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border-color: var(--electric-blue);
            color: white;
        }

        .comparison-table {
            display: grid;
            grid-template-columns: 2fr repeat(5, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            overflow: hidden;
        }

        .feature-row {
            display: contents;
        }

        .feature-row.header .feature-name,
        .feature-row.header .plan-col {
            background: rgba(0, 0, 0, 0.8);
            padding: 20px 15px;
            font-weight: 700;
            color: var(--electric-blue);
            text-align: center;
        }

        .feature-name,
        .plan-col {
            background: rgba(0, 0, 0, 0.6);
            padding: 15px;
            color: var(--starlight);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .feature-name {
            justify-content: flex-start;
            font-weight: 600;
        }

        .plan-col i.fas.fa-check {
            color: var(--plasma-green);
            font-size: 1.2em;
        }

        .plan-col i.fas.fa-times {
            color: rgba(255, 107, 0, 0.6);
            font-size: 1.2em;
        }

        /* Enhanced comparison table styles */
        .feature-row.category .feature-name {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(255, 107, 0, 0.2) 100%);
            font-weight: 800;
            color: var(--electric-orange);
            font-size: 1.1em;
            border-top: 2px solid rgba(255, 107, 0, 0.3);
        }

        .feature-row.category .plan-col {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(255, 107, 0, 0.1) 100%);
            border-top: 2px solid rgba(255, 107, 0, 0.3);
        }

        .plan-col.popular {
            position: relative;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(57, 255, 20, 0.1) 100%);
            border: 2px solid var(--electric-blue);
        }

        .plan-col.popular::before {
            content: 'POPULAR';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--electric-blue);
            color: white;
            padding: 4px 12px;
            font-size: 0.7em;
            font-weight: 800;
            border-radius: 12px;
            white-space: nowrap;
        }

        .comparison-subtitle {
            text-align: center;
            color: var(--starlight);
            opacity: 0.8;
            margin: 10px 0 30px 0;
            font-size: 1.1em;
        }

        /* Toggle removed - all features now visible by default */

        .roi-indicators {
            margin: 40px 0;
            padding: 30px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .roi-title {
            text-align: center;
            color: var(--electric-orange);
            font-size: 1.3em;
            font-weight: 700;
            margin-bottom: 25px;
        }

        .roi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }

        .roi-item {
            text-align: center;
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .roi-plan {
            color: var(--electric-blue);
            font-weight: 700;
            font-size: 1.1em;
            margin-bottom: 8px;
        }

        .roi-value {
            color: var(--plasma-green);
            font-size: 1.4em;
            font-weight: 800;
            margin-bottom: 5px;
        }

        .roi-description {
            color: var(--starlight);
            opacity: 0.8;
            font-size: 0.9em;
        }

        /* Modern Table Design */
        .comparison-table.modern-table {
            display: block;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(20, 20, 40, 0.9) 100%);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .comparison-table.modern-table .feature-row {
            display: grid;
            grid-template-columns: 2fr repeat(5, 1fr);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;
        }

        .comparison-table.modern-table .feature-row:hover {
            background: rgba(255, 255, 255, 0.02);
            transform: translateX(5px);
        }

        .comparison-table.modern-table .feature-row.header {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(255, 107, 0, 0.2) 100%);
            border-bottom: 2px solid rgba(255, 107, 0, 0.3);
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .comparison-table.modern-table .feature-row.header .feature-name,
        .comparison-table.modern-table .feature-row.header .plan-col {
            padding: 25px 20px;
            font-weight: 800;
            font-size: 1.1em;
            color: var(--electric-blue);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .comparison-table.modern-table .feature-name {
            padding: 20px 25px;
            font-weight: 600;
            color: var(--starlight);
            display: flex;
            align-items: center;
            font-size: 1.05em;
            border-right: 1px solid rgba(255, 255, 255, 0.05);
        }

        .comparison-table.modern-table .plan-col {
            padding: 20px 15px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            color: var(--starlight);
            border-right: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
        }

        .comparison-table.modern-table .plan-col:last-child {
            border-right: none;
        }

        .comparison-table.modern-table .feature-row.category {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(255, 107, 0, 0.15) 100%);
            border-top: 2px solid rgba(255, 107, 0, 0.4);
            border-bottom: 2px solid rgba(255, 107, 0, 0.2);
        }

        .comparison-table.modern-table .feature-row.category .feature-name {
            font-weight: 800;
            color: var(--electric-orange);
            font-size: 1.2em;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .comparison-table.modern-table .plan-col.popular {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(57, 255, 20, 0.15) 100%);
            border-left: 3px solid var(--electric-blue);
            border-right: 3px solid var(--electric-blue);
            position: relative;
        }

        .comparison-table.modern-table .plan-col.popular::before {
            content: 'POPULAR';
            position: absolute;
            top: -15px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--electric-blue);
            color: white;
            padding: 5px 15px;
            font-size: 0.8em;
            font-weight: 800;
            border-radius: 15px;
            white-space: nowrap;
            box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
        }

        .comparison-table.modern-table .plan-col i.fas.fa-check {
            color: var(--plasma-green);
            font-size: 1.4em;
            filter: drop-shadow(0 0 5px rgba(57, 255, 20, 0.5));
        }

        .comparison-table.modern-table .plan-col i.fas.fa-times {
            color: rgba(255, 107, 0, 0.4);
            font-size: 1.2em;
        }

        /* Enhanced ROI Section */
        .roi-indicators {
            margin: 50px 0;
            padding: 40px;
            background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(20, 20, 40, 0.8) 100%);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
        }

        .roi-indicators h4 {
            text-align: center;
            color: var(--electric-orange);
            font-size: 1.5em;
            font-weight: 800;
            margin-bottom: 30px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .roi-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
        }

        .roi-card {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
            padding: 30px 25px;
            border-radius: 15px;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .roi-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--electric-blue), var(--plasma-green), var(--electric-orange));
        }

        .roi-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 212, 255, 0.2);
            border-color: rgba(0, 212, 255, 0.3);
        }

        .roi-card.popular {
            border: 2px solid var(--electric-blue);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        }

        .roi-plan {
            color: var(--electric-blue);
            font-weight: 800;
            font-size: 1.2em;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .roi-value {
            color: var(--plasma-green);
            font-size: 1.6em;
            font-weight: 900;
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(57, 255, 20, 0.3);
        }

        .roi-desc {
            color: var(--starlight);
            opacity: 0.9;
            font-size: 1em;
            line-height: 1.4;
        }

        /* Mobile Responsiveness */
        @media (max-width: 1024px) {
            .comparison-table.modern-table .feature-row {
                grid-template-columns: 1.5fr repeat(5, 1fr);
            }

            .comparison-table.modern-table .feature-name {
                font-size: 0.95em;
                padding: 15px 20px;
            }

            .comparison-table.modern-table .plan-col {
                padding: 15px 10px;
                font-size: 0.9em;
            }
        }

        @media (max-width: 768px) {
            .features-toggle {
                flex-direction: column;
                gap: 15px;
            }

            .toggle-btn {
                padding: 15px 30px;
                font-size: 1.1em;
            }

            .comparison-table.modern-table {
                overflow-x: auto;
                border-radius: 15px;
            }

            .comparison-table.modern-table .feature-row {
                grid-template-columns: 200px repeat(5, 120px);
                min-width: 800px;
            }

            .comparison-table.modern-table .feature-name {
                sticky: left;
                background: rgba(0, 0, 0, 0.9);
                z-index: 5;
                padding: 15px;
                font-size: 0.9em;
            }

            .comparison-table.modern-table .plan-col {
                padding: 15px 8px;
                font-size: 0.85em;
            }

            .comparison-table.modern-table .feature-row.header .feature-name,
            .comparison-table.modern-table .feature-row.header .plan-col {
                padding: 20px 8px;
                font-size: 0.9em;
            }

            .roi-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }
        
        /* CTA Section */
        .cta {
            padding: 100px 20px;
            background: 
                radial-gradient(ellipse at 50% 0%, rgba(255, 107, 0, 0.2) 0%, transparent 70%),
                radial-gradient(ellipse at 0% 100%, rgba(0, 212, 255, 0.15) 0%, transparent 70%),
                linear-gradient(135deg, rgba(10, 10, 10, 0.9) 0%, rgba(45, 27, 105, 0.6) 100%);
            color: var(--starlight);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        
        /* CTA section - clean background */
        
        .cta h2 {
            font-family: 'Orbitron', monospace;
            font-size: 2.5em;
            margin-bottom: 20px;
            font-weight: 900;
            background: linear-gradient(135deg, var(--starlight) 0%, var(--electric-blue) 50%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
            position: relative;
            z-index: 1;
        }
        
        .cta p {
            font-size: 1.2em;
            margin-bottom: 40px;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }
        
        /* Contact Section */
        .contact-section {
            padding: 100px 20px;
            background: 
                radial-gradient(ellipse at 30% 70%, rgba(0, 212, 255, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 30%, rgba(255, 107, 0, 0.08) 0%, transparent 60%),
                linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 32, 44, 0.9) 100%);
        }
        
        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: start;
        }
        
        .contact-info h3 {
            color: var(--electric-orange);
            font-size: 1.8em;
            margin-bottom: 30px;
            font-weight: 700;
        }
        
        .benefit-list {
            margin-bottom: 40px;
        }
        
        .benefit-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            margin-bottom: 25px;
            padding: 20px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .benefit-icon {
            font-size: 1.5em;
            min-width: 40px;
            text-align: center;
        }
        
        .benefit-item strong {
            color: var(--electric-blue);
            font-size: 1.1em;
            display: block;
            margin-bottom: 5px;
        }
        
        .benefit-item p {
            opacity: 0.8;
            margin: 0;
        }
        
        .contact-methods h4 {
            color: var(--plasma-green);
            font-size: 1.4em;
            margin-bottom: 20px;
            font-weight: 600;
        }
        
        .abilities-list {
            list-style: none;
            padding: 0;
        }
        
        .abilities-list li {
            margin-bottom: 12px;
            font-size: 1.1em;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .form-container {
            background: rgba(255, 255, 255, 0.03);
            padding: 40px;
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .form-container h3 {
            color: var(--electric-orange);
            font-size: 1.8em;
            margin-bottom: 20px;
            text-align: center;
        }
        
        .form-container p {
            text-align: center;
            margin-bottom: 30px;
            opacity: 0.8;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--electric-blue);
            font-weight: 600;
        }
        
        .form-group input,
        .form-group select {
            width: 100%;
            padding: 15px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.3);
            color: var(--starlight);
            font-size: 1em;
            transition: all 0.3s ease;
        }
        
        .form-group input:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--electric-blue);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
        }
        
        .form-group input::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .btn-submit {
            width: 100%;
            padding: 18px;
            background: linear-gradient(135deg, var(--electric-orange), var(--nebula-pink));
            border: none;
            border-radius: 12px;
            color: var(--starlight);
            font-size: 1.2em;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(255, 107, 0, 0.4);
        }
        
        @media (max-width: 768px) {
            .contact-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }
            
            .contact-section {
                padding: 60px 20px;
            }
            
            .form-container {
                padding: 30px 20px;
            }
        }

        /* Modern Contact Section Styles */
        .contact-section-modern {
            padding: 100px 0;
            background: linear-gradient(135deg, rgba(10, 10, 15, 0.95), rgba(20, 20, 30, 0.9));
            position: relative;
            /* overflow-x, NOT overflow. `overflow: hidden` here silently killed
               `position: sticky` on .transform-form-modern below — a clipping
               ancestor on the BLOCK axis makes itself the sticky descendant's
               scroll container, and a container that never scrolls can never
               pin. Measured: as shipped the form's sticky offset was 0px across
               six scroll steps; with this rule relaxed it travels up to 756px,
               which is exactly the sibling-height delta the layout sweep was
               flagging as "unevenness". overflow-x: clip keeps the original
               intent (a full-bleed gradient band must not spawn a horizontal
               scrollbar) without touching the vertical axis. */
            overflow-x: clip;
        }

        .section-header-centered {
            text-align: center;
            margin-bottom: 80px;
        }

        .section-badge-centered {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            color: white;
            padding: 12px 24px;
            border-radius: 30px;
            font-size: 0.9em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 25px;
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.3);
        }

        .section-title-modern {
            font-size: 3.2em;
            font-weight: 900;
            background: linear-gradient(135deg, var(--starlight), var(--electric-blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 20px;
            font-family: 'Orbitron', monospace;
        }

        .section-subtitle-modern {
            font-size: 1.3em;
            color: rgba(255, 255, 255, 0.8);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .transform-grid-modern {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1400px;
            margin: 0 auto;
            align-items: start;
        }

        /* Left Side - Info Cards */
        .transform-info-modern {
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .info-card-modern {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 35px;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }

        .info-card-modern:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 50px rgba(0, 212, 255, 0.15);
            border-color: rgba(0, 212, 255, 0.3);
        }

        .card-header-modern {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .card-header-modern .header-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2em;
        }

        .card-header-modern h3 {
            color: var(--starlight);
            font-size: 1.4em;
            font-weight: 700;
            margin: 0;
        }

        /* Setup Options Grid */
        .setup-options-grid-modern {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .setup-option-modern {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s ease;
            position: relative;
        }

        .setup-option-modern:hover {
            transform: translateY(-3px);
            border-color: var(--electric-blue);
            box-shadow: 0 10px 30px rgba(0, 212, 255, 0.2);
        }

        .setup-option-modern.popular {
            border-color: var(--electric-orange);
            box-shadow: 0 5px 20px rgba(255, 107, 0, 0.3);
        }

        .popular-badge-modern {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--electric-orange), var(--neon-pink));
            color: white;
            padding: 6px 16px;
            border-radius: 15px;
            font-size: 0.8em;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .option-icon-wrapper {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 15px;
            font-size: 1.5em;
            color: white;
        }

        .option-icon-wrapper.diy {
            background: linear-gradient(135deg, var(--electric-blue), var(--plasma-green));
        }

        .option-icon-wrapper.iframe {
            background: linear-gradient(135deg, var(--neon-pink), var(--electric-orange));
        }

        .option-icon-wrapper.professional {
            background: linear-gradient(135deg, var(--electric-orange), var(--electric-blue));
        }

        .option-icon-wrapper.support {
            background: linear-gradient(135deg, var(--plasma-green), var(--electric-blue));
        }

        .option-content-modern h4 {
            color: var(--starlight);
            font-size: 1.1em;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .option-time, .option-price {
            color: var(--electric-blue);
            font-weight: 700;
            font-size: 0.9em;
            margin-bottom: 8px;
        }

        .option-content-modern p {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
            line-height: 1.4;
            margin: 0;
        }

        /* Capabilities Grid */
        .capabilities-grid-modern {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
        }

        .capability-item-modern {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .capability-item-modern:hover {
            background: rgba(0, 212, 255, 0.05);
            border-color: rgba(0, 212, 255, 0.3);
            transform: translateX(5px);
        }

        .capability-item-modern i {
            color: var(--electric-blue);
            font-size: 1.3em;
            min-width: 24px;
            text-align: center;
        }

        .capability-item-modern span {
            color: rgba(255, 255, 255, 0.9);
            font-weight: 500;
        }

        /* Right Side - Form */
        .transform-form-modern {
            position: sticky;
            top: 100px;
        }

        .form-card-modern {
            background: rgba(255, 255, 255, 0.03);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 25px;
            padding: 40px;
            backdrop-filter: blur(20px);
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
        }

        .form-header-modern {
            text-align: center;
            margin-bottom: 40px;
        }

        .form-header-modern .form-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            color: white;
            font-size: 1.5em;
        }

        .form-header-modern h3 {
            color: var(--starlight);
            font-size: 1.8em;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .form-header-modern p {
            color: rgba(255, 255, 255, 0.8);
            font-size: 1.1em;
        }

        .form-grid-modern {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-field-modern {
            margin-bottom: 25px;
        }

        .form-field-modern.full-width {
            grid-column: 1 / -1;
        }

        .form-field-modern label {
            display: block;
            color: var(--starlight);
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.95em;
        }

        .input-wrapper-modern {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-wrapper-modern i {
            position: absolute;
            left: 15px;
            color: var(--electric-blue);
            z-index: 2;
            font-size: 1.1em;
        }

        .input-wrapper-modern input,
        .input-wrapper-modern select,
        .input-wrapper-modern textarea {
            width: 100%;
            padding: 15px 20px 15px 45px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: var(--starlight);
            font-size: 1em;
            transition: all 0.3s ease;
            font-family: inherit;
        }

        .input-wrapper-modern input:focus,
        .input-wrapper-modern select:focus,
        .input-wrapper-modern textarea:focus {
            outline: none;
            border-color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.05);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
        }

        .input-wrapper-modern input::placeholder,
        .input-wrapper-modern textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        .input-wrapper-modern textarea {
            resize: vertical;
            min-height: 80px;
        }

        .form-actions-modern {
            margin-top: 30px;
        }

        .btn-modern.btn-primary-modern {
            width: 100%;
            background: linear-gradient(135deg, var(--electric-blue), var(--electric-orange));
            border: none;
            border-radius: 15px;
            padding: 20px 30px;
            color: white;
            font-weight: 700;
            font-size: 1.1em;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            margin-bottom: 25px;
        }

        .btn-modern.btn-primary-modern:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4);
        }

        .btn-modern .btn-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .btn-modern .btn-text {
            font-size: 1.2em;
            font-weight: 800;
        }

        .btn-modern .btn-subtitle {
            font-size: 0.9em;
            font-weight: 500;
            opacity: 0.9;
        }

        .form-benefits-modern {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            text-align: center;
        }

        .benefit-item-contact {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            flex: 1;
        }

        .benefit-item-contact i {
            color: var(--electric-blue);
            font-size: 1.3em;
        }

        .benefit-item-contact span {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.85em;
            font-weight: 500;
        }

        /* Responsive Design for Modern Contact */
        @media (max-width: 1024px) {
            .transform-grid-modern {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .transform-form-modern {
                position: static;
            }

            .setup-options-grid-modern {
                grid-template-columns: 1fr;
            }

            .form-grid-modern {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .contact-section-modern {
                padding: 60px 0;
            }

            .section-title-modern {
                font-size: 2.2em;
            }

            .section-subtitle-modern {
                font-size: 1.1em;
            }

            .info-card-modern,
            .form-card-modern {
                padding: 25px;
            }

            .form-benefits-modern {
                flex-direction: column;
                gap: 10px;
            }

            .benefit-item-contact {
                flex-direction: row;
                justify-content: center;
            }
        }

        /* ========================================
           FOOTER STYLES - Enhanced Design
           ======================================== */

        .footer {
            padding: 80px 0 0;
            background:
                radial-gradient(ellipse at 50% 100%, rgba(0, 212, 255, 0.12) 0%, transparent 70%),
                radial-gradient(ellipse at 0% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 70%),
                linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, #0a0a0a 100%);
            color: var(--starlight);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(0, 212, 255, 0.15);
        }

        /* Animated Background Particles */
        .footer-bg-animation {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
        }

        .footer-particle {
            position: absolute;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            opacity: 0.03;
            animation: floatParticle 20s infinite ease-in-out;
        }

        .footer-particle:nth-child(1) {
            background: radial-gradient(circle, var(--electric-blue), transparent);
            top: -150px;
            left: 10%;
            animation-delay: 0s;
        }

        .footer-particle:nth-child(2) {
            background: radial-gradient(circle, var(--electric-orange), transparent);
            top: 50%;
            right: 5%;
            animation-delay: 5s;
            animation-duration: 25s;
        }

        .footer-particle:nth-child(3) {
            background: radial-gradient(circle, var(--electric-blue), transparent);
            bottom: -100px;
            left: 50%;
            animation-delay: 10s;
            animation-duration: 30s;
        }

        .footer-particle:nth-child(4) {
            background: radial-gradient(circle, var(--electric-orange), transparent);
            top: 20%;
            left: 70%;
            animation-delay: 15s;
            animation-duration: 22s;
        }

        @keyframes floatParticle {
            0%, 100% {
                transform: translate(0, 0) scale(1);
            }
            25% {
                transform: translate(30px, -30px) scale(1.1);
            }
            50% {
                transform: translate(-20px, 20px) scale(0.9);
            }
            75% {
                transform: translate(20px, 30px) scale(1.05);
            }
        }

        /* Footer Container */
        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
            position: relative;
            z-index: 1;
        }

        /* Main Footer Content */
        /* FP-P89 footer rebalance: tighten brand column + shrink gap so the link
           grid spreads into the empty space next to the Aedan Rose block instead
           of bunching on the right. */
        .footer-main {
            display: grid;
            grid-template-columns: minmax(240px, 0.85fr) minmax(0, 3fr);
            gap: 48px;
            padding-bottom: 60px;
        }
        @media (max-width: 1180px) {
            .footer-main {
                grid-template-columns: minmax(220px, 0.75fr) minmax(0, 3fr);
                gap: 36px;
            }
        }

        /* Brand Section */
        .footer-brand {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .footer-logo-wrapper {
            position: relative;
            width: fit-content;
        }

        .footer-logo-image {
            height: 50px;
            width: auto;
            border-radius: 10px;
            position: relative;
            z-index: 2;
            transition: transform 0.4s ease;
        }

        .footer-logo-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 70px;
            height: 70px;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.4), transparent 70%);
            border-radius: 50%;
            animation: pulse 3s ease-in-out infinite;
            z-index: 1;
        }

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

        .footer-logo-wrapper:hover .footer-logo-image {
            transform: scale(1.05);
        }

        .footer-brand-name {
            font-family: 'Orbitron', monospace;
            font-size: 1.75rem;
            font-weight: 700;
            margin: 0;
        }

        .gradient-text {
            background: linear-gradient(135deg, var(--electric-blue) 0%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: gradientShift 5s ease infinite;
            background-size: 200% 200%;
        }

        @keyframes gradientShift {
            0%, 100% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
        }

        .footer-tagline {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            font-size: 0.9375rem;
            margin: 0;
        }

        .highlight-text {
            color: var(--electric-blue);
            font-weight: 600;
        }

        /* Social Links */
        .footer-social {
            display: flex;
            gap: 12px;
            margin-top: 8px;
        }

        .social-link {
            position: relative;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 10px;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1.125rem;
        }

        .social-link:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--electric-blue);
            color: var(--electric-blue);
            transform: translateY(-3px);
            box-shadow: 0 5px 20px rgba(0, 212, 255, 0.3);
        }

        .social-tooltip {
            position: absolute;
            bottom: 110%;
            left: 50%;
            transform: translateX(-50%) scale(0.8);
            background: rgba(0, 212, 255, 0.95);
            color: #0a0a0a;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s ease;
        }

        .social-link:hover .social-tooltip {
            opacity: 1;
            transform: translateX(-50%) scale(1);
        }

        /* Footer Links Grid */
        .footer-links-grid {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 40px;
        }

        .footer-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .footer-heading {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Orbitron', monospace;
            font-size: 1rem;
            font-weight: 700;
            color: var(--electric-blue);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 0;
        }

        .footer-heading i {
            font-size: 1.125rem;
        }

        .footer-nav {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .footer-link {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            padding: 8px 0;
            font-size: 0.875rem;
            transition: all 0.3s ease;
            position: relative;
        }

        .footer-link i {
            font-size: 0.625rem;
            transition: transform 0.3s ease;
            opacity: 0;
        }

        .footer-link:hover {
            color: var(--electric-orange);
            padding-left: 12px;
        }

        .footer-link:hover i {
            opacity: 1;
            transform: translateX(5px);
        }

        /* Compare column — categorized collapsible groups (replaces long vertical list) */
        .footer-link-strong {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 600 !important;
        }
        .footer-link-strong i {
            opacity: 1 !important;
            color: var(--electric-blue);
            font-size: 0.75rem !important;
        }
        .footer-compare-top {
            gap: 4px;
        }
        .footer-compare-groups {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-top: 14px;
            border-top: 1px solid rgba(0, 212, 255, 0.12);
            padding-top: 14px;
        }
        .footer-compare-group {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            overflow: hidden;
            transition: border-color 0.2s ease, background 0.2s ease;
        }
        .footer-compare-group[open] {
            border-color: rgba(0, 212, 255, 0.25);
            background: rgba(0, 212, 255, 0.04);
        }
        .footer-compare-group > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            font-size: 0.85rem;
            color: rgba(255, 255, 255, 0.78);
            font-weight: 600;
            user-select: none;
            transition: color 0.2s ease;
        }
        .footer-compare-group > summary::-webkit-details-marker { display: none; }
        .footer-compare-group > summary:hover { color: var(--electric-blue); }
        .footer-compare-group > summary > i:first-child {
            color: var(--electric-blue);
            font-size: 0.85em;
            width: 16px;
            text-align: center;
        }
        .footer-compare-group > summary > span { flex: 1; }
        .footer-compare-chevron {
            font-size: 0.7em;
            color: rgba(255, 255, 255, 0.5);
            transition: transform 0.2s ease;
        }
        .footer-compare-group[open] > summary .footer-compare-chevron {
            transform: rotate(180deg);
            color: var(--electric-blue);
        }
        .footer-compare-links {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 2px 8px;
            padding: 4px 12px 12px 38px;
        }
        .footer-compare-links a {
            display: block;
            padding: 5px 0;
            color: rgba(255, 255, 255, 0.65);
            text-decoration: none;
            font-size: 0.82rem;
            transition: color 0.2s ease, transform 0.2s ease;
            border-radius: 4px;
        }
        .footer-compare-links a:hover {
            color: var(--electric-orange);
            transform: translateX(3px);
        }
        @media (max-width: 600px) {
            .footer-compare-links {
                grid-template-columns: 1fr;
                padding-left: 32px;
            }
        }

        /* Bottom Bar */
        .footer-bottom-bar {
            border-top: 1px solid rgba(0, 212, 255, 0.15);
            background: linear-gradient(90deg,
                transparent 0%,
                rgba(0, 212, 255, 0.05) 50%,
                transparent 100%);
        }

        .footer-bottom-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 30px 0;
            flex-wrap: wrap;
            gap: 20px;
        }

        .footer-copyright {
            display: flex;
            align-items: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.875rem;
            margin: 0;
        }

        .footer-copyright i {
            font-size: 0.75rem;
        }

        /* Powered By Badge */
        .footer-powered {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.875rem;
        }

        .powered-text {
            color: rgba(255, 255, 255, 0.5);
        }

        .aedan-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(255, 107, 0, 0.15));
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            color: var(--electric-blue);
            font-weight: 700;
            font-family: 'Orbitron', monospace;
            transition: all 0.3s ease;
        }

        .aedan-badge:hover {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.25), rgba(255, 107, 0, 0.25));
            border-color: var(--electric-blue);
            box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
            transform: translateY(-2px);
        }

        .aedan-badge i {
            font-size: 1rem;
        }

        /* Footer Badges */
        .footer-badges {
            display: flex;
            gap: 16px;
        }

        .badge-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.75rem;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .badge-item:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--electric-blue);
            color: var(--electric-blue);
        }

        .badge-item i {
            font-size: 0.875rem;
        }

        /* Responsive Design */
        @media (max-width: 1180px) {
            .footer-links-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 36px;
            }
        }
        @media (max-width: 1024px) {
            .footer-main {
                grid-template-columns: 1fr;
                gap: 50px;
            }

            .footer-links-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 40px;
            }
        }

        @media (max-width: 768px) {
            .footer {
                padding: 60px 0 0;
            }

            .footer-main {
                gap: 40px;
                padding-bottom: 40px;
            }

            .footer-links-grid {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .footer-bottom-content {
                flex-direction: column;
                text-align: center;
                gap: 16px;
            }

            .footer-badges {
                flex-wrap: wrap;
                justify-content: center;
            }

            .footer-social {
                justify-content: center;
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .demo-container {
                grid-template-columns: 1fr;
            }
            
            .demo-grid {
                grid-template-columns: 1fr;
            }
            
            .hero-buttons {
                flex-direction: column;
                align-items: center;
            }
            
            .desktop-only {
                display: none !important;
            }
            
            .mobile-only {
                display: flex !important;
            }
        }
        
        /* Loading and Success States */
        .loading {
            opacity: 0.7;
            pointer-events: none;
        }
        
        .success {
            background: #10b981 !important;
        }
        
        .error {
            background: #ef4444 !important;
        }

        /* Testimonials Section */
        .testimonials-section {
            background: linear-gradient(135deg, rgba(45, 27, 105, 0.1) 0%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 212, 255, 0.1) 100%);
            padding: 100px 0;
            position: relative;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }

        .testimonial-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            padding: 30px;
            position: relative;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
            border-color: rgba(255, 107, 0, 0.5);
        }

        .testimonial-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 20px;
        }

        .restaurant-info h4 {
            color: var(--electric-orange);
            margin: 0 0 5px 0;
            font-size: 1.2em;
        }

        .location {
            color: var(--electric-blue);
            font-size: 0.9em;
        }

        .rating {
            font-size: 1.1em;
        }

        .testimonial-card blockquote {
            font-style: italic;
            font-size: 1.1em;
            line-height: 1.6;
            margin: 20px 0;
            color: var(--starlight);
        }

        .results-stats {
            display: flex;
            gap: 15px;
            margin: 20px 0;
            flex-wrap: wrap;
        }

        .stat-mini {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9em;
            color: var(--electric-blue);
        }

        .testimonial-card cite {
            color: var(--electric-orange);
            font-weight: 600;
            font-style: normal;
        }

        /* Comparison Section */
        .comparison-section {
            background: linear-gradient(180deg, rgba(255, 0, 110, 0.1) 0%, rgba(10, 10, 10, 0.9) 50%, rgba(57, 255, 20, 0.1) 100%);
            padding: 100px 0;
        }

        .comparison-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            margin-top: 60px;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }

        .comparison-title {
            text-align: center;
            font-size: 1.8em;
            margin-bottom: 30px;
            padding: 15px;
            border-radius: 15px;
        }

        .comparison-title.before {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(255, 107, 0, 0.2));
            color: var(--nebula-pink);
            border: 2px solid rgba(255, 0, 110, 0.3);
        }

        .comparison-title.after {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(0, 212, 255, 0.2));
            color: var(--plasma-green);
            border: 2px solid rgba(57, 255, 20, 0.3);
        }

        .comparison-items {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .before-section, .after-section {
            position: relative;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 25px;
            padding: 30px;
            backdrop-filter: blur(20px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .before-section {
            border-left: 4px solid var(--nebula-pink);
        }

        .after-section {
            border-left: 4px solid var(--plasma-green);
        }

        .dashboard-preview {
            width: 100%;
            height: 350px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.15), rgba(57, 255, 20, 0.15));
            border: 2px dashed rgba(0, 212, 255, 0.4);
            border-radius: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin: 25px 0;
            position: relative;
            overflow: hidden;
        }

        .dashboard-preview::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.7; }
        }

        .dashboard-preview i {
            font-size: 4em;
            color: var(--electric-blue);
            margin-bottom: 15px;
            text-shadow: 0 0 30px rgba(0, 212, 255, 0.8);
        }

        .dashboard-preview-text {
            color: var(--starlight);
            font-size: 1.2em;
            font-weight: 600;
            text-align: center;
            z-index: 2;
        }

        .dashboard-preview-subtitle {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.9em;
            margin-top: 8px;
            z-index: 2;
        }

        .comparison-item {
            display: flex;
            align-items: flex-start;
            gap: 18px;
            padding: 25px;
            border-radius: 18px;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        .comparison-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .comparison-item:hover::before {
            opacity: 1;
        }

        .comparison-item.problem {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.15), rgba(255, 107, 0, 0.1));
            border: 1px solid rgba(255, 0, 110, 0.3);
            box-shadow: 0 8px 32px rgba(255, 0, 110, 0.1);
        }

        .comparison-item.problem::before {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.1), rgba(255, 107, 0, 0.05));
        }

        .comparison-item.problem:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(255, 0, 110, 0.2);
        }

        .comparison-item.solution {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(57, 255, 20, 0.3);
            box-shadow: 0 8px 32px rgba(57, 255, 20, 0.1);
        }

        .comparison-item.solution::before {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(0, 212, 255, 0.05));
        }

        .comparison-item.solution:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(57, 255, 20, 0.2);
        }

        .comparison-item .icon {
            font-size: 2em;
            flex-shrink: 0;
            padding: 15px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 60px;
            min-height: 60px;
            position: relative;
            z-index: 2;
        }

        .comparison-item.problem .icon {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.3), rgba(255, 107, 0, 0.2));
            color: var(--nebula-pink);
            box-shadow: 0 0 20px rgba(255, 0, 110, 0.4);
        }

        .comparison-item.solution .icon {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.3), rgba(0, 212, 255, 0.2));
            color: var(--plasma-green);
            box-shadow: 0 0 20px rgba(57, 255, 20, 0.4);
        }

        .comparison-item strong {
            color: var(--starlight);
            font-size: 1.3em;
            display: block;
            margin-bottom: 8px;
            font-weight: 700;
            position: relative;
            z-index: 2;
        }

        .comparison-item p {
            margin: 8px 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 1.05em;
            line-height: 1.5;
            position: relative;
            z-index: 2;
        }

        .impact {
            font-size: 1.1em;
            font-weight: 700;
            margin-top: 12px;
            padding: 8px 15px;
            border-radius: 12px;
            display: inline-block;
            position: relative;
            z-index: 2;
        }

        .comparison-item.problem .impact {
            color: var(--nebula-pink);
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(255, 107, 0, 0.15));
            border: 1px solid rgba(255, 0, 110, 0.4);
        }

        .comparison-item.solution .impact {
            color: var(--plasma-green);
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.2), rgba(0, 212, 255, 0.15));
            border: 1px solid rgba(57, 255, 20, 0.4);
        }

        .unique-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: linear-gradient(45deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
            border: 2px solid rgba(255, 215, 0, 0.5);
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 700;
            color: #FFD700;
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
            margin: 20px auto;
            font-size: 0.9em;
            box-shadow: 0 5px 20px rgba(255, 215, 0, 0.2);
            width: fit-content;
            text-align: center;
        }

        .unique-badge i {
            color: #FFD700;
            font-size: 1.2em;
            text-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
        }

        .transformation-summary {
            text-align: center;
            margin-top: 60px;
            padding: 40px;
            background: rgba(0, 212, 255, 0.1);
            border-radius: 20px;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .summary-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin: 30px 0;
        }

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

        .summary-number {
            font-size: 2.5em;
            font-weight: 900;
            color: var(--electric-blue);
            text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
        }

        .summary-label {
            color: var(--starlight);
            font-weight: 600;
            margin-top: 10px;
        }

        /* ROI Calculator Section */
        .roi-calculator-section {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(10, 10, 10, 0.9) 50%, rgba(255, 107, 0, 0.1) 100%);
            padding: 100px 0;
        }

        .roi-showcase {
            max-width: 1000px;
            margin: 0 auto;
        }

        .roi-stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .roi-stat-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 20px;
            padding: 30px;
            text-align: center;
            transition: all 0.3s ease;
        }

        .roi-stat-card.primary {
            border-color: rgba(255, 107, 0, 0.5);
            background: rgba(255, 107, 0, 0.1);
            transform: scale(1.05);
        }

        .roi-stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2);
        }

        .roi-stat-icon {
            font-size: 2.5em;
            margin-bottom: 15px;
        }

        .roi-stat-number {
            font-size: 3em;
            font-weight: 900;
            color: var(--electric-blue);
            margin-bottom: 10px;
        }

        .roi-stat-card.primary .roi-stat-number {
            color: var(--electric-orange);
        }

        .roi-stat-label {
            font-size: 1.1em;
            color: var(--starlight);
            margin-bottom: 5px;
        }

        .roi-stat-detail {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.7);
        }

        .roi-calculator {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 107, 0, 0.3);
            border-radius: 20px;
            padding: 40px;
            margin-bottom: 40px;
        }

        .roi-calculator h3 {
            text-align: center;
            color: var(--electric-orange);
            margin-bottom: 30px;
            font-size: 1.8em;
        }

        .calculator-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 30px;
        }

        .calc-input {
            text-align: center;
        }

        .calc-input label {
            display: block;
            color: var(--starlight);
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.9em;
        }

        .calc-input input {
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 10px;
            color: var(--starlight);
            font-size: 1.2em;
            font-weight: bold;
            text-align: center;
            width: 120px;
        }

        .calc-multiplier, .calc-equals {
            font-size: 2em;
            color: var(--electric-blue);
            font-weight: bold;
        }

        .calc-stat {
            text-align: center;
            background: rgba(0, 212, 255, 0.1);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .calc-percentage {
            font-size: 1.8em;
            color: var(--electric-blue);
            font-weight: 900;
        }

        .calc-label {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
        }

        .calc-result {
            text-align: center;
            background: rgba(255, 107, 0, 0.1);
            padding: 20px;
            border-radius: 15px;
            border: 2px solid rgba(255, 107, 0, 0.5);
        }

        .calc-result-number {
            font-size: 2.2em;
            color: var(--electric-orange);
            font-weight: 900;
            margin-bottom: 5px;
        }

        .calc-result-label {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
        }

        .roi-comparison {
            display: grid;
            gap: 15px;
            margin-top: 30px;
        }

        .comparison-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .comparison-item.highlight {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
        }

        .comparison-item.profit {
            background: rgba(57, 255, 20, 0.1);
            border: 1px solid rgba(57, 255, 20, 0.3);
        }

        .comparison-label {
            font-weight: 600;
            color: var(--starlight);
        }

        .comparison-value {
            font-weight: 900;
            font-size: 1.2em;
            color: var(--electric-blue);
        }

        .comparison-item.profit .comparison-value {
            color: var(--plasma-green);
        }

        .roi-cta {
            text-align: center;
            background: rgba(255, 107, 0, 0.1);
            border: 1px solid rgba(255, 107, 0, 0.3);
            border-radius: 20px;
            padding: 30px;
        }

        .roi-cta h3 {
            color: var(--electric-orange);
            margin-bottom: 10px;
        }

        .roi-cta p {
            font-size: 1.1em;
            margin-bottom: 20px;
        }

        #roiPercentage {
            color: var(--plasma-green);
            font-weight: 900;
        }

        /* Mobile Responsive Updates */
        @media (max-width: 768px) {
            .testimonials-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .comparison-container {
                grid-template-columns: 1fr;
                gap: 30px;
                max-width: 100%;
                padding: 0 20px;
            }

            .before-section, .after-section {
                padding: 25px 20px;
            }

            .dashboard-preview {
                height: 280px;
                margin: 20px 0;
            }

            .dashboard-preview i {
                font-size: 3em;
            }

            .comparison-item {
                padding: 20px;
                gap: 15px;
            }

            .comparison-item .icon {
                min-width: 50px;
                min-height: 50px;
                font-size: 1.6em;
                padding: 12px;
            }

            .comparison-item strong {
                font-size: 1.2em;
            }

            .comparison-item p {
                font-size: 1em;
            }

            .impact {
                font-size: 1em;
                padding: 6px 12px;
            }

            .calculator-container {
                grid-template-columns: 1fr;
                gap: 30px;
            }

            .summary-stats {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .results-stats {
                flex-direction: column;
                gap: 10px;
            }

            .comparison-title {
                font-size: 1.4em;
            }

            .summary-number {
                font-size: 2em;
            }

            /* Urgency Section Mobile */
            .urgency-grid {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-bottom: 60px;
            }

            .problem-card, .solution-card {
                padding: 30px 20px;
            }

            .problem-icon, .solution-icon {
                width: 60px;
                height: 60px;
                min-width: 60px;
                min-height: 60px;
                font-size: 1.5em;
            }

            .card-header h3 {
                font-size: 1.5em;
            }

            .stats-showcase {
                padding: 30px 20px;
                margin: 60px 0;
            }

            .stats-header h3 {
                font-size: 1.8em;
                flex-direction: column;
                gap: 10px;
            }

            .stats-grid {
                grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                gap: 25px;
            }

            .stat {
                padding: 25px 15px;
            }

            .stat-icon {
                width: 50px;
                height: 50px;
                font-size: 1.3em;
            }

            .stat-number {
                font-size: 2.8em;
            }

            .competitive-advantage {
                padding: 30px 20px;
            }

            .warning-icon {
                width: 60px;
                height: 60px;
                font-size: 2em;
            }

            .competitive-advantage h3 {
                font-size: 1.8em;
            }

            .competitive-advantage p {
                font-size: 1.1em;
                margin-bottom: 30px;
            }

            .urgency-metrics {
                flex-direction: column;
                gap: 20px;
                align-items: center;
            }

            .urgency-metric {
                padding: 12px 20px;
                font-size: 0.9em;
            }

            .cta-buttons {
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }

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

            /* Enhanced Pricing Section Mobile */
            .pricing {
                padding: 80px 15px;
            }

            .pricing-header {
                margin-bottom: 40px;
            }

            .billing-toggle {
                flex-direction: column;
                gap: 15px;
                padding: 15px;
            }

            .trust-indicators {
                flex-direction: column;
                gap: 20px;
            }

            .social-proof-banner {
                padding: 20px;
                margin-bottom: 40px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 25px;
                max-width: 450px;
            }

            .pricing-card {
                padding: 30px 20px;
                min-height: auto;
            }

            .professional-plan.popular {
                transform: scale(1.0);
                z-index: 2;
                margin: 10px 0;
            }

            .professional-plan.popular:hover {
                transform: scale(1.0) translateY(-5px);
            }

            .plan-icon {
                width: 50px;
                height: 50px;
                font-size: 1.5em;
            }

            .plan-name {
                font-size: 1.5em;
            }

            .plan-price .amount {
                font-size: 2.8em;
            }

            .plan-button {
                padding: 15px 20px;
                font-size: 1em;
            }

            .feature-comparison {
                margin-top: 60px;
                padding: 20px 10px;
            }

            .feature-comparison h3 {
                font-size: 1.5em;
                padding: 0 10px;
            }

            .comparison-subtitle {
                font-size: 0.9em;
                padding: 0 10px;
            }

            /* Mobile: Horizontal scroll for pricing header */
            .feature-comparison > div[style*="grid-template-columns: repeat(7"] {
                display: flex !important;
                overflow-x: auto;
                gap: 10px !important;
                margin: 30px 0 !important;
                padding: 0 10px 15px 10px;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
            }

            .feature-comparison > div[style*="grid-template-columns: repeat(7"] > div {
                min-width: 140px;
                flex-shrink: 0;
                scroll-snap-align: center;
                padding: 15px 10px !important;
            }

            .feature-comparison > div[style*="grid-template-columns: repeat(7"] > div:first-child {
                display: none; /* Hide "FEATURE" label on mobile */
            }

            /* Category headers stay full width */
            .feature-category {
                margin: 0 -10px 15px -10px !important;
            }

            .category-header {
                padding: 20px 15px !important;
            }

            .category-header h4 {
                font-size: 1.1em !important;
            }

            .category-header i.fas {
                font-size: 1.2em !important;
            }

            /* Mobile: Horizontal scroll for table rows */
            .category-content table {
                display: block;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                margin: 0 -10px;
                padding: 0 10px;
            }

            .category-content tr {
                display: flex;
                min-width: max-content;
                border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            }

            .category-content td:first-child {
                min-width: 180px;
                max-width: 180px;
                padding: 12px 8px !important;
                font-size: 0.85em !important;
                position: sticky;
                left: 0;
                background: rgba(5, 5, 10, 0.95);
                z-index: 1;
                backdrop-filter: blur(10px);
            }

            .category-content td:not(:first-child) {
                min-width: 90px;
                max-width: 90px;
                padding: 12px 5px !important;
                font-size: 0.75em !important;
                text-align: center;
            }

            .category-content td i.fa-check {
                font-size: 1.2em;
            }

            .category-content td i.fa-times {
                font-size: 1em;
            }

            /* Scroll indicator */
            .feature-comparison::after {
                content: '\f0a9  Swipe to see all plans';
                font-family: 'Font Awesome 5 Free', sans-serif;
                font-weight: 900;
                display: block;
                text-align: center;
                font-size: 0.8em;
                color: var(--electric-blue);
                padding: 15px;
                margin-top: 20px;
                background: rgba(0, 212, 255, 0.05);
                border-radius: 10px;
                border: 1px solid rgba(0, 212, 255, 0.2);
            }

            .comparison-table {
                grid-template-columns: 1fr;
                gap: 0;
            }

            .feature-row {
                display: grid;
                grid-template-columns: 2fr repeat(5, 1fr);
                gap: 1px;
            }

            .comparison-toggle {
                flex-direction: column;
                gap: 10px;
            }

            .toggle-btn {
                padding: 10px 20px;
                font-size: 0.9em;
            }
        }

        /* Extra Small Mobile Devices - Feature Comparison */
        @media (max-width: 480px) {
            .feature-comparison {
                padding: 15px 5px;
            }

            .feature-comparison h3 {
                font-size: 1.3em;
                padding: 0 5px;
            }

            .comparison-subtitle {
                font-size: 0.85em;
                padding: 0 5px;
            }

            .feature-comparison > div[style*="grid-template-columns: repeat(7"] > div {
                min-width: 120px;
                padding: 12px 8px !important;
            }

            .feature-comparison > div[style*="grid-template-columns: repeat(7"] > div > div {
                font-size: 0.9em !important;
            }

            .feature-comparison > div[style*="grid-template-columns: repeat(7"] > div > div:nth-child(2) {
                font-size: 1.5em !important;
            }

            .category-content td:first-child {
                min-width: 160px;
                max-width: 160px;
                font-size: 0.8em !important;
                padding: 10px 6px !important;
            }

            .category-content td:not(:first-child) {
                min-width: 80px;
                max-width: 80px;
                font-size: 0.7em !important;
                padding: 10px 4px !important;
            }

            .feature-comparison::after {
                font-size: 0.75em;
                padding: 12px;
            }
        }

        /* Mobile Responsive: Core Capabilities Section */
        @media (max-width: 968px) {
            .quick-value-section {
                padding: 40px 0 !important;
            }

            .capabilities-header h2 {
                font-size: 1.8em !important;
            }

            .capabilities-header p {
                font-size: 1em !important;
            }

            /* Stack cards vertically on tablet and mobile.
               Targets the explicit .capabilities-cards class (was `> div:last-child`,
               which broke when the screenshot showcase became the new last child). */
            #core-capabilities .capabilities-cards {
                grid-template-columns: 1fr !important;
                gap: 25px !important;
            }

            /* Adjust card padding on smaller screens */
            #core-capabilities .capabilities-cards > div {
                padding: 30px 25px !important;
            }

            /* Slightly smaller icons on mobile */
            #core-capabilities .capabilities-cards > div > div:first-child {
                font-size: 2.8em !important;
            }

            /* Adjust heading sizes */
            #core-capabilities h3 {
                font-size: 1.3em !important;
            }

            #core-capabilities .capabilities-cards > div > div:nth-child(3) {
                font-size: 1em !important;
            }
        }

        @media (max-width: 480px) {
            .quick-value-section {
                padding: 30px 0 !important;
            }

            .capabilities-header {
                margin-bottom: 30px !important;
            }

            .capabilities-header h2 {
                font-size: 1.5em !important;
            }

            .capabilities-badge {
                font-size: 0.9em !important;
                padding: 8px 16px !important;
            }

            /* More compact cards on small mobile */
            #core-capabilities .capabilities-cards > div {
                padding: 25px 20px !important;
            }

            /* Smaller icons on small mobile */
            #core-capabilities .capabilities-cards > div > div:first-child {
                font-size: 2.5em !important;
                margin-bottom: 15px !important;
            }

            /* Smaller text on mobile */
            #core-capabilities h3 {
                font-size: 1.2em !important;
            }

            #core-capabilities p {
                font-size: 0.95em !important;
            }

            /* Adjust bullet points on mobile */
            #core-capabilities .container > div:last-child > div > div:last-child > div {
                font-size: 0.9em !important;
            }
        }

        /* Contact Section Urgency Banner */
        .urgency-banner {
            background: linear-gradient(135deg, rgba(255, 0, 110, 0.2), rgba(255, 107, 0, 0.2));
            border: 2px solid rgba(255, 107, 0, 0.5);
            border-radius: 20px;
            padding: 30px;
            margin: 40px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .urgency-banner::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            animation: urgencyShine 3s infinite;
        }

        @keyframes urgencyShine {
            0% { left: -100%; }
            100% { left: 100%; }
        }

        .urgency-content h3 {
            color: var(--electric-orange);
            font-size: 1.8em;
            margin-bottom: 15px;
            text-shadow: 0 0 20px rgba(255, 107, 0, 0.5);
        }

        .urgency-content p {
            font-size: 1.1em;
            margin-bottom: 25px;
            color: var(--starlight);
        }

        .urgency-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .urgency-stat {
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 15px;
            padding: 15px;
        }

        .urgency-number {
            font-size: 2em;
            font-weight: 900;
            color: var(--electric-blue);
            margin-bottom: 5px;
        }

        .urgency-label {
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
        }

        /* ===================================
           CONVERSATIONS & COMMUNICATION HUB SECTION
           =================================== */

        .conversations-hub-section {
            padding: 120px 0;
            background: linear-gradient(180deg, rgba(45, 27, 105, 0.2) 0%, var(--dark-matter) 50%, rgba(57, 255, 20, 0.05) 100%);
            position: relative;
            overflow: hidden;
        }

        .conversations-hub-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--electric-blue), transparent);
        }

        .conversations-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 80px;
            padding: 0 30px;
        }

        .conversations-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(0, 212, 255, 0.1);
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            margin-bottom: 30px;
            font-size: 14px;
            color: var(--electric-blue);
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .conversations-badge i {
            font-size: 18px;
            animation: pulse-glow 2s ease-in-out infinite;
        }

        .conversations-title {
            font-size: 56px;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, var(--electric-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .conversations-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 0;
        }

        .conversations-split-view {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
            align-items: start;
        }

        .conversations-preview {
            position: relative;
        }

        .conversation-types-grid {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .conversation-type-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 16px;
            padding: 25px;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .conversation-type-card:hover {
            transform: translateX(10px);
            border-color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.05);
            box-shadow: 0 10px 40px rgba(0, 212, 255, 0.2);
        }

        .conversation-type-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 12px;
        }

        .conversation-type-icon {
            width: 50px;
            height: 50px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            position: relative;
            flex-shrink: 0;
        }

        .conversation-type-icon.active-icon {
            background: linear-gradient(135deg, var(--plasma-green), #00ff88);
            color: var(--dark-matter);
            animation: pulse-scale 2s ease-in-out infinite;
        }

        .conversation-type-icon.recent-icon {
            background: linear-gradient(135deg, var(--electric-blue), #0066ff);
            color: #ffffff;
        }

        .conversation-type-icon.reservation-icon {
            background: linear-gradient(135deg, var(--electric-orange), #ff9500);
            color: #ffffff;
        }

        .conversation-type-icon.complete-icon {
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            color: #ffffff;
        }

        .conversation-type-icon.ai-icon {
            background: linear-gradient(135deg, #ec4899, #f43f5e);
            color: #ffffff;
        }

        .conversation-type-title {
            flex: 1;
        }

        .conversation-type-title h3 {
            font-size: 20px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 5px 0;
        }

        .conversation-type-title .count {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            font-weight: 400;
        }

        .conversation-type-status {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: rgba(57, 255, 20, 0.15);
            border: 1px solid rgba(57, 255, 20, 0.3);
            border-radius: 20px;
            font-size: 13px;
            color: var(--plasma-green);
            font-weight: 600;
        }

        .conversation-type-status.pending-status {
            background: rgba(255, 183, 0, 0.15);
            border-color: rgba(255, 183, 0, 0.3);
            color: #ffb700;
        }

        .conversation-type-status i {
            font-size: 10px;
        }

        .conversation-type-features {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 15px;
        }

        .conversation-feature-tag {
            padding: 6px 12px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .conversation-feature-tag i {
            font-size: 11px;
            color: var(--electric-blue);
        }

        .conversations-metrics {
            position: relative;
        }

        .metrics-dashboard {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .metrics-dashboard::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(0, 212, 255, 0.1), transparent 50%);
            pointer-events: none;
        }

        .metrics-dashboard-header {
            margin-bottom: 40px;
        }

        .metrics-dashboard-header h3 {
            font-size: 28px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 10px 0;
        }

        .metrics-dashboard-header p {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.6);
            margin: 0;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 25px;
            margin-bottom: 40px;
        }

        .metric-card {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 25px;
            position: relative;
            transition: all 0.3s ease;
            text-align: center;
        }

        .metric-card:hover {
            border-color: var(--electric-blue);
            background: rgba(0, 212, 255, 0.05);
            transform: translateY(-5px);
        }

        .metric-label {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .metric-label i {
            font-size: 14px;
            color: var(--electric-blue);
        }

        .metric-value {
            font-size: 36px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .metric-value.success-metric {
            color: var(--plasma-green);
        }

        .metric-value.warning-metric {
            color: var(--electric-orange);
        }

        .metric-change {
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .metric-change.positive {
            color: var(--plasma-green);
        }

        .metric-change.neutral {
            color: rgba(255, 255, 255, 0.5);
        }

        .metric-change i {
            font-size: 12px;
        }

        .conversation-insights {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.1), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(57, 255, 20, 0.3);
            border-radius: 16px;
            padding: 25px;
        }

        .conversation-insights h4 {
            font-size: 18px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .conversation-insights h4 i {
            color: var(--plasma-green);
        }

        .insight-list {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .insight-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
        }

        .insight-icon {
            width: 32px;
            height: 32px;
            background: rgba(57, 255, 20, 0.15);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 14px;
            color: var(--plasma-green);
        }

        .insight-content {
            flex: 1;
        }

        .insight-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            margin: 0;
            line-height: 1.6;
        }

        .insight-content .insight-value {
            color: var(--electric-blue);
            font-weight: 600;
        }

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

        @media (max-width: 1024px) {
            .conversations-split-view {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .conversations-title {
                font-size: 42px;
            }

            .metrics-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 768px) {
            .conversations-title {
                font-size: 32px;
            }

            .conversations-subtitle {
                font-size: 16px;
            }

            .conversation-type-card {
                padding: 20px;
            }

            .conversation-type-title h3 {
                font-size: 18px;
            }

            .metrics-dashboard {
                padding: 25px;
            }

            .metric-value {
                font-size: 28px;
            }
        }

        /* ===================================
           RESERVATIONS & ORDERS COMMAND CENTER SECTION
           =================================== */

        .reservations-command-section {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-matter) 0%, rgba(255, 107, 0, 0.05) 50%, var(--dark-matter) 100%);
            position: relative;
            overflow: hidden;
        }

        .reservations-command-section::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(255, 107, 0, 0.1), transparent 70%);
            pointer-events: none;
        }

        .reservations-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 80px;
            padding: 0 30px;
        }

        .reservations-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(255, 107, 0, 0.1);
            border: 1px solid rgba(255, 107, 0, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            margin-bottom: 30px;
            font-size: 14px;
            color: var(--electric-orange);
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .reservations-badge i {
            font-size: 18px;
        }

        .reservations-title {
            font-size: 56px;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, var(--electric-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .reservations-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 0;
        }

        .reservations-content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .reservations-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .reservation-stat-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 107, 0, 0.2);
            border-radius: 16px;
            padding: 30px 25px;
            text-align: center;
            position: relative;
            transition: all 0.3s ease;
        }

        .reservation-stat-card:hover {
            transform: translateY(-10px);
            border-color: var(--electric-orange);
            box-shadow: 0 20px 50px rgba(255, 107, 0, 0.3);
        }

        .reservation-stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--electric-orange), transparent);
            border-radius: 16px 16px 0 0;
        }

        .stat-icon-wrapper {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, rgba(255, 107, 0, 0.2), rgba(255, 149, 0, 0.1));
            border: 1px solid rgba(255, 107, 0, 0.3);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--electric-orange);
            position: relative;
        }

        .stat-icon-wrapper::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(135deg, var(--electric-orange), transparent);
            border-radius: 16px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: -1;
        }

        .reservation-stat-card:hover .stat-icon-wrapper::after {
            opacity: 0.3;
        }

        .stat-number {
            font-size: 42px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            font-weight: 700;
            margin-bottom: 10px;
        }

        .stat-number .currency {
            font-size: 28px;
            color: var(--plasma-green);
        }

        .stat-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .stat-change {
            font-size: 13px;
            color: var(--plasma-green);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .stat-change.negative {
            color: #ff4444;
        }

        .stat-change i {
            font-size: 11px;
        }

        .reservations-features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
        }

        .reservation-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 40px 30px;
            position: relative;
            transition: all 0.4s ease;
        }

        .reservation-feature-card:hover {
            transform: translateY(-10px);
            border-color: var(--electric-orange);
            background: rgba(255, 107, 0, 0.05);
            box-shadow: 0 20px 60px rgba(255, 107, 0, 0.3);
        }

        .reservation-feature-card::before {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            background: linear-gradient(135deg, var(--electric-orange), transparent, var(--electric-blue));
            border-radius: 20px;
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

        .reservation-feature-card:hover::before {
            opacity: 0.3;
        }

        .feature-icon-large {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--electric-orange), #ff9500);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #ffffff;
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }

        .reservation-feature-card:hover .feature-icon-large {
            transform: scale(1.1) rotate(5deg);
        }

        .feature-title {
            font-size: 24px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin-bottom: 15px;
        }

        .feature-description {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 20px;
        }

        .feature-highlights {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .feature-highlight-item {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
        }

        .feature-highlight-item i {
            color: var(--electric-orange);
            font-size: 12px;
            flex-shrink: 0;
        }

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

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

            .reservations-title {
                font-size: 42px;
            }
        }

        @media (max-width: 768px) {
            .reservations-stats-grid {
                grid-template-columns: 1fr;
            }

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

            .reservations-title {
                font-size: 32px;
            }

            .reservations-subtitle {
                font-size: 16px;
            }

            .stat-number {
                font-size: 32px;
            }
        }

        /* ===================================
           ANALYTICS DASHBOARD PREVIEW SECTION
           =================================== */

        .analytics-dashboard-section {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-matter) 0%, rgba(0, 212, 255, 0.05) 50%, var(--dark-matter) 100%);
            position: relative;
            overflow: hidden;
        }

        .analytics-dashboard-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background:
                radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.1), transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(57, 255, 20, 0.1), transparent 40%);
            pointer-events: none;
        }

        .analytics-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 80px;
            padding: 0 30px;
        }

        .analytics-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(57, 255, 20, 0.1));
            border: 1px solid rgba(0, 212, 255, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            margin-bottom: 30px;
            font-size: 14px;
            color: var(--electric-blue);
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .analytics-badge i {
            font-size: 18px;
        }

        .analytics-title {
            font-size: 56px;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, var(--electric-blue) 50%, var(--plasma-green) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .analytics-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 0;
        }

        .analytics-content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .analytics-categories-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        .analytics-category-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 35px 30px;
            position: relative;
            transition: all 0.4s ease;
            overflow: hidden;
        }

        .analytics-category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--electric-blue), var(--plasma-green));
            transform: translateX(-100%);
            transition: transform 0.4s ease;
        }

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

        .analytics-category-card:hover {
            transform: translateY(-10px);
            border-color: var(--electric-blue);
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
        }

        .category-header {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .category-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--electric-blue), #0066ff);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
            color: #ffffff;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .analytics-category-card:hover .category-icon {
            transform: rotate(10deg) scale(1.1);
        }

        .category-icon.revenue-icon {
            background: linear-gradient(135deg, var(--plasma-green), #00ff88);
        }

        .category-icon.customer-icon {
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
        }

        .category-icon.operational-icon {
            background: linear-gradient(135deg, var(--electric-orange), #ff9500);
        }

        .category-icon.performance-icon {
            background: linear-gradient(135deg, #ec4899, #f43f5e);
        }

        .category-icon.predictive-icon {
            background: linear-gradient(135deg, #06b6d4, #0ea5e9);
        }

        .category-title-wrapper {
            flex: 1;
        }

        .category-title-wrapper h3 {
            font-size: 22px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 8px 0;
        }

        .category-kpi-count {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .category-kpi-count i {
            color: var(--electric-blue);
            font-size: 11px;
        }

        .category-metrics-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .category-metric-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .category-metric-item:hover {
            background: rgba(0, 212, 255, 0.05);
            border-color: rgba(0, 212, 255, 0.2);
            transform: translateX(5px);
        }

        .metric-item-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .metric-item-label i {
            font-size: 11px;
            color: var(--electric-blue);
        }

        .metric-item-value {
            font-size: 15px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            font-weight: 600;
        }

        .metric-item-value.success {
            color: var(--plasma-green);
        }

        .metric-item-value.warning {
            color: var(--electric-orange);
        }

        .analytics-showcase-banner {
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(57, 255, 20, 0.1));
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 24px;
            padding: 50px 40px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .analytics-showcase-banner::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(0, 212, 255, 0.1), transparent 40%);
            animation: rotate-gradient 20s linear infinite;
        }

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

        .analytics-showcase-content {
            position: relative;
            z-index: 1;
        }

        .analytics-showcase-banner h3 {
            font-size: 32px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 20px 0;
        }

        .analytics-showcase-banner p {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .analytics-feature-pills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 15px;
        }

        .analytics-feature-pill {
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(0, 212, 255, 0.3);
            border-radius: 50px;
            font-size: 14px;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.3s ease;
        }

        .analytics-feature-pill:hover {
            background: rgba(0, 212, 255, 0.1);
            border-color: var(--electric-blue);
            transform: translateY(-3px);
        }

        .analytics-feature-pill i {
            color: var(--electric-blue);
            font-size: 13px;
        }

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

            .analytics-title {
                font-size: 42px;
            }
        }

        @media (max-width: 768px) {
            .analytics-categories-grid {
                grid-template-columns: 1fr;
            }

            .analytics-title {
                font-size: 32px;
            }

            .analytics-subtitle {
                font-size: 16px;
            }

            .analytics-showcase-banner {
                padding: 35px 25px;
            }

            .analytics-showcase-banner h3 {
                font-size: 24px;
            }

            .analytics-showcase-banner p {
                font-size: 16px;
            }
        }

        /* ===================================
           TEAM MANAGEMENT & SCHEDULING SECTION
           =================================== */

        .team-management-section {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-matter) 0%, rgba(139, 92, 246, 0.05) 50%, var(--dark-matter) 100%);
            position: relative;
            overflow: hidden;
        }

        .team-management-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 50%, rgba(139, 92, 246, 0.1), transparent 50%);
            pointer-events: none;
        }

        .team-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 80px;
            padding: 0 30px;
        }

        .team-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            margin-bottom: 30px;
            font-size: 14px;
            color: #8b5cf6;
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .team-badge i {
            font-size: 18px;
        }

        .team-title {
            font-size: 56px;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, #8b5cf6 50%, #6366f1 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .team-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 0;
        }

        .team-content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .team-split-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            margin-bottom: 60px;
        }

        .team-roles-showcase {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .team-roles-showcase::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #8b5cf6, #6366f1);
        }

        .team-roles-showcase h3 {
            font-size: 28px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 25px 0;
        }

        .roles-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .role-tag {
            padding: 12px 16px;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.8);
            text-align: center;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .role-tag:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: #8b5cf6;
            transform: translateY(-3px);
        }

        .role-tag i {
            color: #8b5cf6;
            font-size: 12px;
        }

        .team-scheduling-features {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 20px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .team-scheduling-features::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
        }

        .team-scheduling-features h3 {
            font-size: 28px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 25px 0;
        }

        .scheduling-feature-list {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .scheduling-feature-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 18px;
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .scheduling-feature-item:hover {
            background: rgba(139, 92, 246, 0.05);
            border-color: rgba(139, 92, 246, 0.2);
            transform: translateX(10px);
        }

        .scheduling-icon-wrapper {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            color: #ffffff;
            flex-shrink: 0;
        }

        .scheduling-feature-content h4 {
            font-size: 18px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 8px 0;
        }

        .scheduling-feature-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            margin: 0;
            line-height: 1.5;
        }

        .team-collaboration-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
        }

        .collaboration-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 16px;
            padding: 30px 25px;
            text-align: center;
            transition: all 0.4s ease;
        }

        .collaboration-card:hover {
            transform: translateY(-10px);
            border-color: #8b5cf6;
            box-shadow: 0 20px 60px rgba(139, 92, 246, 0.3);
        }

        .collaboration-icon {
            width: 70px;
            height: 70px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, #8b5cf6, #6366f1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
            color: #ffffff;
            transition: all 0.3s ease;
        }

        .collaboration-card:hover .collaboration-icon {
            transform: rotate(360deg) scale(1.1);
        }

        .collaboration-card h4 {
            font-size: 20px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 12px 0;
        }

        .collaboration-card p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin: 0;
        }

        @media (max-width: 1024px) {
            .team-split-layout {
                grid-template-columns: 1fr;
                gap: 40px;
            }

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

            .team-title {
                font-size: 42px;
            }
        }

        @media (max-width: 768px) {
            .team-collaboration-grid {
                grid-template-columns: 1fr;
            }

            .roles-grid {
                grid-template-columns: 1fr;
            }

            .team-title {
                font-size: 32px;
            }

            .team-subtitle {
                font-size: 16px;
            }
        }

        /* ===================================
           BILLING & FINANCIAL INTELLIGENCE SECTION
           =================================== */

        .billing-intelligence-section {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-matter) 0%, rgba(57, 255, 20, 0.05) 50%, var(--dark-matter) 100%);
            position: relative;
            overflow: hidden;
        }

        .billing-intelligence-section::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 1000px;
            background: radial-gradient(circle, rgba(57, 255, 20, 0.08), transparent 60%);
            pointer-events: none;
        }

        .billing-header {
            text-align: center;
            max-width: 900px;
            margin: 0 auto 80px;
            padding: 0 30px;
        }

        .billing-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(57, 255, 20, 0.1);
            border: 1px solid rgba(57, 255, 20, 0.3);
            padding: 12px 24px;
            border-radius: 50px;
            margin-bottom: 30px;
            font-size: 14px;
            color: var(--plasma-green);
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .billing-badge i {
            font-size: 18px;
        }

        .billing-title {
            font-size: 56px;
            font-family: 'Orbitron', sans-serif;
            margin-bottom: 25px;
            background: linear-gradient(135deg, #ffffff 0%, var(--plasma-green) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1.2;
        }

        .billing-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: 0;
        }

        .billing-content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .billing-features-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            margin-bottom: 60px;
        }

        .billing-feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(57, 255, 20, 0.2);
            border-radius: 20px;
            padding: 40px 35px;
            position: relative;
            transition: all 0.4s ease;
        }

        .billing-feature-card:hover {
            transform: translateY(-10px);
            border-color: var(--plasma-green);
            box-shadow: 0 20px 60px rgba(57, 255, 20, 0.3);
        }

        .billing-feature-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--plasma-green), transparent);
            border-radius: 20px 20px 0 0;
        }

        .billing-feature-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 25px;
        }

        .billing-feature-icon {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, var(--plasma-green), #00ff88);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: var(--dark-matter);
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        .billing-feature-card:hover .billing-feature-icon {
            transform: scale(1.15) rotate(-10deg);
        }

        .billing-feature-header h3 {
            font-size: 26px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0;
        }

        .billing-feature-description {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
            margin-bottom: 25px;
        }

        .billing-feature-points {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .billing-point-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 15px;
            background: rgba(57, 255, 20, 0.05);
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .billing-point-item:hover {
            background: rgba(57, 255, 20, 0.1);
            transform: translateX(8px);
        }

        .billing-point-icon {
            width: 24px;
            height: 24px;
            background: rgba(57, 255, 20, 0.2);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            color: var(--plasma-green);
            flex-shrink: 0;
            margin-top: 2px;
        }

        .billing-point-text {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.5;
            flex: 1;
        }

        .billing-benefits-banner {
            background: linear-gradient(135deg, rgba(57, 255, 20, 0.15), rgba(0, 212, 255, 0.1));
            border: 1px solid rgba(57, 255, 20, 0.3);
            border-radius: 24px;
            padding: 50px 45px;
            position: relative;
            overflow: hidden;
        }

        .billing-benefits-banner::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.05));
            pointer-events: none;
        }

        .billing-benefits-content {
            position: relative;
            z-index: 1;
        }

        .billing-benefits-content h3 {
            font-size: 32px;
            font-family: 'Orbitron', sans-serif;
            color: #ffffff;
            margin: 0 0 20px 0;
        }

        .billing-benefits-content p {
            font-size: 17px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.7;
            margin-bottom: 30px;
        }

        .billing-benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .billing-benefit-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(57, 255, 20, 0.2);
            border-radius: 12px;
            transition: all 0.3s ease;
        }

        .billing-benefit-item:hover {
            background: rgba(57, 255, 20, 0.1);
            border-color: var(--plasma-green);
            transform: scale(1.05);
        }

        .billing-benefit-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--plasma-green), #00ff88);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--dark-matter);
            flex-shrink: 0;
        }

        .billing-benefit-text {
            font-size: 14px;
            color: #ffffff;
            font-weight: 600;
        }

        @media (max-width: 1024px) {
            .billing-features-grid {
                grid-template-columns: 1fr;
            }

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

            .billing-title {
                font-size: 42px;
            }
        }

        @media (max-width: 768px) {
            .billing-benefits-grid {
                grid-template-columns: 1fr;
            }

            .billing-title {
                font-size: 32px;
            }

            .billing-subtitle {
                font-size: 16px;
            }

            .billing-benefits-banner {
                padding: 35px 25px;
            }

            .billing-benefits-content h3 {
                font-size: 24px;
            }

            .billing-benefits-content p {
                font-size: 15px;
            }
        }

        /* ===================================
           CORE AI CAPABILITIES SHOWCASE SECTION
           =================================== */

        .ai-capabilities-section {
            padding: 120px 0;
            background: linear-gradient(180deg, var(--dark-matter) 0%, rgba(45, 27, 105, 0.2) 100%);
            position: relative;
            overflow: hidden;
        }

        .ai-capabilities-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            height: 100%;
            background: radial-gradient(ellipse at center, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
            pointer-events: none;
        }

        .capabilities-header {
            text-align: center;
            margin-bottom: 80px;
            position: relative;
            z-index: 1;
        }

        .capabilities-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(57, 255, 20, 0.2));
            border: 1px solid rgba(0, 212, 255, 0.4);
            padding: 12px 24px;
            border-radius: 30px;
            font-weight: 600;
            font-size: 0.95em;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 30px;
            animation: float 3s ease-in-out infinite;
        }

        .capabilities-badge i {
            font-size: 1.2em;
            color: var(--electric-blue);
        }

        .capabilities-title {
            font-family: 'Orbitron', monospace;
            font-size: 3.5em;
            font-weight: 900;
            background: linear-gradient(135deg, var(--electric-blue), var(--plasma-green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .capabilities-subtitle {
            font-size: 1.3em;
            color: rgba(255, 255, 255, 0.8);
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.6;
        }

        .capabilities-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 30px;
        }

        .capability-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 20px;
            padding: 40px 30px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
            text-align: center;
        }

        .capability-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.05), rgba(57, 255, 20, 0.05));
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .capability-card:hover {
            transform: translateY(-10px);
            border-color: var(--electric-blue);
            box-shadow: 0 20px 60px rgba(0, 212, 255, 0.3);
        }

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

        .capability-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(0, 212, 255, 0.2), rgba(57, 255, 20, 0.2));
            border: 2px solid rgba(0, 212, 255, 0.4);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            position: relative;
            z-index: 1;
        }

        .capability-icon i {
            font-size: 2.2em;
            background: linear-gradient(135deg, var(--electric-blue), var(--plasma-green));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .capability-card:hover .capability-icon {
            transform: scale(1.1) rotate(5deg);
            border-color: var(--plasma-green);
            box-shadow: 0 0 30px rgba(57, 255, 20, 0.4);
        }

        .capability-title {
            font-family: 'Orbitron', monospace;
            font-size: 1.4em;
            font-weight: 700;
            color: var(--electric-blue);
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .capability-metric {
            font-size: 1.1em;
            color: var(--plasma-green);
            font-weight: 600;
            margin-bottom: 15px;
            position: relative;
            z-index: 1;
        }

        .capability-description {
            font-size: 1em;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.8;
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .capability-features {
            display: flex;
            flex-direction: column;
            gap: 10px;
            position: relative;
            z-index: 1;
        }

        .capability-feature {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9em;
            color: rgba(255, 255, 255, 0.8);
        }

        .capability-feature i {
            color: var(--plasma-green);
            font-size: 0.9em;
        }

        @media (max-width: 1024px) {
            .capabilities-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 30px;
            }

            .capabilities-title {
                font-size: 2.5em;
            }
        }

        @media (max-width: 768px) {
            .capabilities-grid {
                grid-template-columns: 1fr;
                gap: 25px;
                padding: 0 20px;
            }

            .capabilities-title {
                font-size: 2em;
            }

            .capabilities-subtitle {
                font-size: 1.1em;
            }

            .ai-capabilities-section {
                padding: 80px 0;
            }
        }

        /* Sticky CTA Button - Appears after hero scroll */
        .sticky-cta {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 999;
            opacity: 0;
            transform: translateY(100px);
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            pointer-events: none;
        }

        .sticky-cta.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .sticky-cta-button {
            background: linear-gradient(135deg, var(--electric-blue), var(--nebula-pink));
            color: var(--starlight);
            border: none;
            padding: 18px 32px;
            font-size: 16px;
            font-weight: 700;
            font-family: 'Exo 2', sans-serif;
            border-radius: 50px;
            cursor: pointer;
            box-shadow:
                0 10px 40px rgba(0, 212, 255, 0.4),
                0 0 20px rgba(255, 0, 110, 0.3);
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: ctaPulse 2s ease-in-out infinite;
        }

        .sticky-cta-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow:
                0 15px 50px rgba(0, 212, 255, 0.5),
                0 0 30px rgba(255, 0, 110, 0.4);
        }

        @keyframes ctaPulse {
            0%, 100% {
                box-shadow:
                    0 10px 40px rgba(0, 212, 255, 0.4),
                    0 0 20px rgba(255, 0, 110, 0.3);
            }
            50% {
                box-shadow:
                    0 10px 40px rgba(0, 212, 255, 0.6),
                    0 0 30px rgba(255, 0, 110, 0.5);
            }
        }

        /* Pricing Preview Indicator Animations */
        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
        }

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

        .pricing-preview-indicator a:hover {
            color: var(--nebula-pink);
            transform: translateY(2px);
        }

        .pricing-preview-indicator a:hover i {
            transform: translateY(3px);
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .sticky-cta {
                bottom: 20px;
                right: 20px;
            }

            .sticky-cta-button {
                padding: 14px 24px;
                font-size: 14px;
            }
        }

        /* Accordion Styles for Collapsible Feature Sections */
        .feature-accordion {
            margin: 60px 0;
        }

        .accordion-item {
            border: 1px solid rgba(0, 212, 255, 0.2);
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
            background: rgba(10, 10, 20, 0.6);
            transition: all 0.3s ease;
        }

        .accordion-item:hover {
            border-color: rgba(0, 212, 255, 0.4);
            box-shadow: 0 4px 20px rgba(0, 212, 255, 0.1);
        }

        .accordion-header {
            background: rgba(10, 10, 20, 0.8);
            padding: 25px 35px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.3s ease;
            border-bottom: 1px solid transparent;
        }

        .accordion-header:hover {
            background: rgba(0, 212, 255, 0.1);
        }

        .accordion-item.active .accordion-header {
            border-bottom-color: rgba(0, 212, 255, 0.2);
            background: rgba(0, 212, 255, 0.05);
        }

        .accordion-header-content {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .accordion-icon-left {
            font-size: 2em;
            color: var(--electric-blue);
            transition: all 0.3s ease;
        }

        .accordion-item.active .accordion-icon-left {
            color: var(--plasma-green);
            transform: scale(1.1);
        }

        .accordion-header h3 {
            margin: 0;
            font-size: 1.8em;
            color: var(--starlight);
            font-weight: 700;
        }

        .accordion-toggle-icon {
            font-size: 1.5em;
            color: var(--electric-blue);
            transition: transform 0.3s ease;
        }

        .accordion-item.active .accordion-toggle-icon {
            transform: rotate(180deg);
            color: var(--plasma-green);
        }

        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }

        .accordion-item.active .accordion-content {
            max-height: 10000px; /* Large enough for any content */
        }

        .accordion-content-inner {
            padding: 0 35px 35px 35px;
        }

        /* Responsive accordion */
        @media (max-width: 768px) {
            .accordion-header {
                padding: 20px 25px;
            }

            .accordion-header h3 {
                font-size: 1.4em;
            }

            .accordion-icon-left {
                font-size: 1.5em;
            }

            .accordion-content-inner {
                padding: 0 25px 25px 25px;
            }
        }

        /* ============================================
           Neural Mesh AI Architecture — Ultra-Realistic
           ============================================ */

        #neuralMeshContainer {
            position: relative;
            /* CSS owns height now (inline height:600px removed from markup, B1).
               Explicit desktop height so the canvas backing store and the card
               grid measure the same box. */
            height: 600px;
            min-height: 600px;
            background:
                radial-gradient(ellipse 80% 60% at 50% 45%, rgba(0, 212, 255, 0.10), transparent 70%),
                radial-gradient(ellipse 120% 120% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%),
                #05070d;
            box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.6),
                        inset 0 0 1px rgba(0, 212, 255, 0.4);
        }

        #neuralMeshCanvas {
            display: block;
            /* CSS size is 100%; JS scales the backing store by DPR */
            width: 100%;
            height: 100%;
        }

        /* Faint scanline/grain for "real screen" texture.
           M7: blend-mode compositing is a per-frame GPU cost on mobile — the
           JS adds a `.nm-no-grain` class on the low tier to drop this layer. */
        #neuralMeshContainer::after {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 5;
            background-image:
                repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
            mix-blend-mode: overlay;
            opacity: 0.5;
        }
        #neuralMeshContainer.nm-no-grain::after { display: none; }

        .ai-agents-grid {
            pointer-events: none;
            /* M4: JS owns the parallax easing and writes transform every frame,
               so there must be NO CSS transition on transform (it would fight
               the per-frame writes and never settle). */
            will-change: transform;
        }

        .agent-node {
            pointer-events: all;
            opacity: 0;
            animation: nmFadeInScale 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
            transform-style: preserve-3d;
        }

        .agent-node:nth-child(1) { animation-delay: 0.10s; }
        .agent-node:nth-child(2) { animation-delay: 0.20s; }
        .agent-node:nth-child(3) { animation-delay: 0.30s; }
        .agent-node:nth-child(4) { animation-delay: 0.40s; }
        .agent-node:nth-child(5) { animation-delay: 0.50s; }

        @keyframes nmFadeInScale {
            0%   { opacity: 0; transform: translateY(14px) scale(0.92); }
            100% { opacity: 1; transform: translateY(0)    scale(1); }
        }

        /* Inner card — refined tactile glass.
           L5: the inline onmouseover/onmouseout handlers have been REMOVED from
           the markup, so CSS :hover is the single source of hover truth (no
           !important arms race with JS-set inline styles). */
        /* Borderless brain-region labels — NO card. The labels sit directly on
           the canvas brain as glowing functional regions, so there is NO
           background fill, NO border, NO box-shadow, NO backdrop blur. Legibility
           comes entirely from the per-element text-shadow glows in the markup. */
        .agent-node > div {
            position: relative;
            background: transparent !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            padding: 4px 6px !important;
            transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), filter 0.32s ease !important;
            transform: translateZ(0);
        }

        /* Hover = the region "lights up" a touch more — pure glow, never a box */
        .agent-node > div:hover {
            transform: translateY(-2px) scale(1.04) !important;
            filter: brightness(1.18) !important;
        }

        /* Breathing icon glow */
        @keyframes nmBreathe {
            0%, 100% { filter: brightness(1)    drop-shadow(0 0 8px currentColor); }
            50%      { filter: brightness(1.12) drop-shadow(0 0 16px currentColor); }
        }
        .agent-node i { animation: nmBreathe 4.5s ease-in-out infinite; }

        /* ---------- Responsive (B1: all heights use !important so they beat
                       any residual inline style and the canvas tracks the cards) ---------- */
        @media (max-width: 1024px) {
            #neuralMeshContainer { height: 700px !important; min-height: 700px !important; }
            .ai-agents-grid { padding: 30px 20px; }
            .agent-node > div { padding: 15px !important; }
            .agent-node i  { font-size: 2em !important; }
            .agent-node h4 { font-size: 1em !important; }
            .agent-node p  { font-size: 0.75em !important; }
        }

        @media (max-width: 768px) {
            #neuralMeshContainer { height: auto !important; min-height: 880px !important; }
            .ai-agents-grid {
                display: flex !important;
                flex-direction: column !important;
                gap: 14px !important;
                padding: 22px !important;
                justify-content: center !important;
                /* M4/M5: parallax is disabled here AND the JS tier ≤768px sets
                   parallaxStrength:0, so JS never writes transform on these widths. */
                transform: none !important;
            }
            .agent-node { grid-column: unset !important; grid-row: unset !important; }
            .agent-node > div {
                padding: 18px !important;
                max-width: 420px; margin: 0 auto; width: 100%;
            }
            .agent-node i  { font-size: 2.1em !important; }
            .agent-node h4 { font-size: 1.1em !important; }
            .agent-node p  { font-size: 0.85em !important; }
        }

        @media (max-width: 480px) {
            #neuralMeshContainer { height: auto !important; min-height: 960px !important; }
            .ai-agents-grid { padding: 14px !important; }
            .agent-node > div { padding: 15px !important; }
            .agent-node i  { font-size: 1.95em !important; }
            .agent-node h4 { font-size: 1em !important; }
            .agent-node p  { font-size: 0.8em !important; }
        }

        /* ---------- Accessibility: reduced motion ---------- */
        @media (prefers-reduced-motion: reduce) {
            .agent-node,
            .agent-node i,
            .agent-node > div { animation: none !important; transition: none !important; }
            .ai-agents-grid { transition: none !important; }
        }

        /* ROI Calculator Mobile Responsiveness */
        @media (max-width: 768px) {
            .performance-stats-grid {
                flex-direction: column;
                gap: 15px;
                padding: 20px;
            }

            .stat-card {
                padding: 20px 15px;
                min-height: auto;
            }

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

            .calculator-inputs {
                gap: 25px;
            }

            .slider-group {
                padding: 20px;
            }

            .slider-value {
                font-size: 1.5rem;
            }

            .preset-buttons {
                flex-wrap: wrap;
            }

            .preset-buttons button {
                flex: 1 1 calc(50% - 5px);
            }

            .revenue-comparison-chart {
                padding: 25px 20px;
            }

            .revenue-comparison-chart h4 {
                font-size: 1.3em;
            }

            .bar {
                font-size: 1rem;
                padding-right: 10px;
            }

            .investment-breakdown {
                padding: 25px 20px;
            }

            .roi-metrics-grid {
                gap: 15px;
            }

            .roi-metric-card {
                padding: 20px 15px;
            }

            .roi-metric-value {
                font-size: 1.7rem;
            }

            .payback-time {
                flex-direction: column;
                text-align: center;
                padding: 20px;
            }

            .payback-time i {
                font-size: 2rem;
            }

            .calculator-cta {
                padding: 30px 20px;
            }

            .cta-content h4 {
                font-size: 1.5em;
            }

            .cta-content p {
                font-size: 1em;
            }

            .cta-actions {
                flex-direction: column;
                gap: 15px;
            }

            .cta-actions .btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 480px) {
            .stat-card {
                padding: 15px;
            }

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

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

            .slider-group {
                padding: 15px;
            }

            .slider-group label {
                font-size: 0.9rem;
            }

            .slider-value {
                font-size: 1.2rem;
            }

            .preset-buttons button {
                padding: 10px 12px;
                font-size: 0.85em;
            }

            .bar {
                font-size: 0.9rem;
            }

            .revenue-increase {
                font-size: 0.9rem;
                padding: 12px;
            }

            .roi-metrics-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }

            .roi-metric-value {
                font-size: 1.5rem;
            }

            .payback-time {
                padding: 15px;
            }

            .calculator-cta {
                padding: 25px 15px;
                margin-top: 40px;
            }

            .cta-content h4 {
                font-size: 1.3em;
            }

            .cta-content p {
                font-size: 0.95em;
            }

            .cta-actions .btn {
                padding: 14px 25px;
                font-size: 1em;
            }
        }
    

/* #831 perf: content-visibility skips style+layout+paint for offscreen sections
   (the homepage main-thread cost is layout on a ~4k-element DOM). contain-intrinsic-size
   reserves placeholder height so scrollbar + #anchor jumps stay correct; sections render
   IDENTICALLY once in view — zero visual change, DOM byte-identical. Below-fold sections
   only (hero/partner-wall/trust-bar render eagerly). Unsupported browsers ignore it. */
#core-capabilities,
.appstack-section#mobile-app,
.pricing#pricing,
.addon-pricing-section,
.multi-restaurant-section#multi-location-plans,
.feature-preview-section,
.executive-section#training,
.contact-section-modern#contact,
.urgency-section#why-aedan,
.comparison-section#comparison {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}