/* ========== HERO SECTION ========== */
        .hero {
            min-height: 100vh;
            background: #0d0a1a;
            background-image: 
                radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse 500px 500px at 85% 15%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
                radial-gradient(ellipse 400px 300px at 75% 75%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 450px 350px at 25% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse 300px 300px at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, #0d0a1a 0%, #1a1333 50%, #0f0c1f 100%);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 140px 48px 100px;
            text-align: center;
        }

        /* Hero noise overlay */
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.035;
            pointer-events: none;
            z-index: 1;
        }

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

        .orb-1 {
            width: 600px;
            height: 400px;
            background: rgba(124, 92, 252, 0.3);
            top: -150px;
            left: -100px;
            animation-delay: 0s;
        }

        .orb-2 {
            width: 500px;
            height: 500px;
            background: rgba(168, 85, 247, 0.25);
            top: 30%;
            right: -150px;
            animation-delay: -5s;
        }

        .orb-3 {
            width: 400px;
            height: 300px;
            background: rgba(236, 72, 153, 0.2);
            bottom: 10%;
            left: 20%;
            animation-delay: -10s;
        }

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

        .hero-grid {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 900px;
        }

        /* Glassmorphism Hero Badge */
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            padding: 14px 32px 14px 18px;
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 100px;
            margin-bottom: 32px;
            animation: fadeInUp 0.8s ease-out;
            position: relative;
            z-index: 1;
            cursor: pointer;
            transition: all 0.4s ease;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
        }

        .hero-badge::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, 
                rgba(129, 103, 234, 0.4) 0%, 
                rgba(168, 85, 247, 0.2) 50%, 
                rgba(73, 204, 249, 0.3) 100%);
            border-radius: 100px;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .hero-badge:hover::before {
            opacity: 1;
        }

        .hero-badge:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.25),
                0 0 30px rgba(129, 103, 234, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
        }

        .hero-badge-icon {
            width: 32px;
            height: 32px;
            background: var(--gradient-violet);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            box-shadow: 0 4px 12px rgba(129, 103, 234, 0.4);
        }

        .hero-badge span {
            color: var(--white);
            font-size: 15px;
            font-weight: 600;
            letter-spacing: -0.2px;
        }

        .hero-badge-arrow {
            color: rgba(255, 255, 255, 0.7);
            font-size: 20px;
            margin-left: 4px;
            transition: transform 0.3s ease, color 0.3s ease;
        }

        .hero-badge:hover .hero-badge-arrow {
            transform: translateX(4px);
            color: var(--white);
        }

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

        .hero h1 {
            font-size: clamp(48px, 7vw, 84px);
            font-weight: 800;
            color: var(--white);
            line-height: 1.05;
            margin-bottom: 24px;
            letter-spacing: -3px;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .hero h1 .gradient-text {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline;
            word-wrap: break-word;
        }

        .hero h1 .serif-italic,
        .serif-italic {
            font-family: 'Instrument Serif', Georgia, serif;
            font-style: italic;
            font-weight: 400;
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            padding-right: 0.05em;
            white-space: nowrap;
        }

        /* Glowing "Until now" effect */
        .until-now-glow {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
            display: inline-block;
            animation: untilNowPop 0.6s ease-out 1s both;
        }

        .until-now-glow::before {
            content: 'Until now.';
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: blur(12px);
            opacity: 0;
            animation: untilNowGlow 2s ease-in-out 1.6s infinite;
            z-index: -1;
        }

        @keyframes untilNowPop {
            0% {
                opacity: 0;
                transform: scale(0.8) translateY(10px);
            }
            50% {
                transform: scale(1.1) translateY(-5px);
            }
            100% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }

        @keyframes untilNowGlow {
            0%, 100% {
                opacity: 0.5;
                filter: blur(12px);
            }
            50% {
                opacity: 0.9;
                filter: blur(20px);
            }
        }

        .hero-subtitle {
            font-size: clamp(18px, 2.5vw, 22px);
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin-bottom: 40px;
            max-width: 640px;
            margin-left: auto;
            margin-right: auto;
            animation: fadeInUp 0.8s ease-out 0.2s both;
        }

        .hero-cta {
            display: flex;
            gap: 16px;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 32px;
            animation: fadeInUp 0.8s ease-out 0.3s both;
        }

        .hero-note {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            animation: fadeInUp 0.8s ease-out 0.35s both;
        }

        /* Social Proof Bar */
        .hero-social-proof {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 32px;
            padding: 20px 0;
            animation: fadeInUp 0.8s ease-out 0.4s both;
            flex-wrap: wrap;
        }

        .social-proof-left {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .avatar-stack {
            display: flex;
            align-items: center;
        }

        .avatar-stack .avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid var(--navy);
            margin-left: -12px;
            object-fit: cover;
            transition: transform 0.3s ease, z-index 0.3s ease;
        }

        .avatar-stack .avatar-img:first-child {
            margin-left: 0;
        }

        .avatar-stack .avatar-img:hover {
            transform: translateY(-4px) scale(1.1);
            z-index: 10;
        }

        .avatar-more {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--violet) 0%, var(--accent-pink) 100%);
            border: 2px solid var(--navy);
            margin-left: -12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: var(--white);
        }

        .social-proof-text {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .social-proof-number {
            font-size: 18px;
            font-weight: 800;
            color: var(--white);
        }

        .social-proof-label {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.7);
            font-weight: 500;
        }

        .social-proof-divider {
            width: 1px;
            height: 32px;
            background: rgba(255, 255, 255, 0.2);
        }

        .social-proof-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .hero-visual {
            position: relative;
            animation: fadeInUp 0.8s ease-out 0.4s both;
            perspective: 1000px;
            width: 100%;
            margin-top: 60px;
        }

        .hero-visual-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Mac Browser Window - Light Theme */
        .mac-window {
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.1s ease;
            width: 100%;
            max-width: 950px;
        }

        .mac-window-frame {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-radius: 12px;
            box-shadow: 
                0 50px 100px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            overflow: hidden;
        }

        .mac-window-header {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 247, 0.9) 100%);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .mac-window-buttons {
            display: flex;
            gap: 8px;
        }

        .mac-btn {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: relative;
        }

        .mac-btn.close { background: #ff5f57; }
        .mac-btn.minimize { background: #febc2e; }
        .mac-btn.maximize { background: #28c840; }

        .mac-btn::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .mac-window:hover .mac-btn.close::after {
            content: '×';
            font-size: 10px;
            color: #4a0000;
            opacity: 1;
        }

        .mac-window:hover .mac-btn.minimize::after {
            content: '−';
            font-size: 10px;
            color: #985700;
            opacity: 1;
        }

        .mac-window:hover .mac-btn.maximize::after {
            content: '+';
            font-size: 9px;
            color: #006500;
            opacity: 1;
        }

        .mac-window-title {
            flex: 1;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.7);
        }

        .mac-window-url {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 6px 16px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 6px;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.5);
            margin: 0 60px;
        }

        .mac-window-url .lock-icon {
            font-size: 10px;
        }

        .mac-window-spacer {
            width: 52px;
        }

        .mac-window-content {
            background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
        }

        /* Main card wrapper with 3D tilt */
        .hero-image-wrapper {
            position: relative;
            transition: transform 0.1s ease;
            transform-style: preserve-3d;
        }

        /* Gradient glow underneath */
        .hero-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 90%;
            height: 90%;
            transform: translate(-50%, -50%) translateZ(-50px);
            background: radial-gradient(ellipse at center, 
                rgba(73, 204, 249, 0.4) 0%, 
                rgba(135, 0, 255, 0.3) 30%,
                rgba(255, 107, 157, 0.2) 60%,
                transparent 70%);
            filter: blur(80px);
            animation: glowPulse 4s ease-in-out infinite;
            pointer-events: none;
            z-index: -1;
        }

        @keyframes glowPulse {
            0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) translateZ(-50px) scale(1); }
            50% { opacity: 0.7; transform: translate(-50%, -50%) translateZ(-50px) scale(1.05); }
        }

        .hero-image {
            width: 100%;
            background: var(--white);
            overflow: hidden;
            position: relative;
        }

        /* Product Preview - Dashboard Screenshot */
        .dashboard-screenshot {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 0 0 8px 8px;
        }

        .preview-header {
            display: none;
        }

        .preview-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--navy);
        }

        .preview-badge {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 14px;
            background: rgba(126, 231, 135, 0.15);
            border-radius: 100px;
            font-size: 13px;
            font-weight: 600;
            color: #22c55e;
        }

        .preview-badge::before {
            content: '';
            width: 8px;
            height: 8px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

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

        /* Animated Stats Bar inside preview */
        .preview-stats {
            display: flex;
            gap: 24px;
            margin: 0 24px 24px;
            padding: 16px 20px;
            background: linear-gradient(135deg, rgba(129, 103, 234, 0.08) 0%, rgba(73, 204, 249, 0.08) 100%);
            border-radius: 12px;
        }

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

        .preview-stat-value {
            font-size: 24px;
            font-weight: 800;
            color: var(--violet);
        }

        .preview-stat-label {
            font-size: 11px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .expert-cards {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0 24px 24px;
        }

        .expert-card {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 16px;
            background: var(--off-white);
            border-radius: 14px;
            transition: all 0.3s ease;
            cursor: pointer;
            animation: slideInCard 0.6s ease-out both;
        }

        .expert-card:nth-child(1) { animation-delay: 0.8s; }
        .expert-card:nth-child(2) { animation-delay: 1s; }
        .expert-card:nth-child(3) { animation-delay: 1.2s; }

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

        .expert-card:hover {
            background: var(--lavender);
            transform: translateX(8px);
        }

        .expert-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-weight: 700;
            color: var(--white);
            position: relative;
        }

        .expert-avatar::after {
            content: '';
            position: absolute;
            bottom: 2px;
            right: 2px;
            width: 12px;
            height: 12px;
            background: #22c55e;
            border-radius: 50%;
            border: 2px solid var(--white);
        }

        /* Floating notification cards */
        .floating-notifications {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            z-index: 10;
        }

        .floating-card {
            position: absolute;
            background: var(--white);
            border-radius: 16px;
            padding: 16px 20px;
            box-shadow: 
                0 20px 40px rgba(0, 0, 0, 0.15),
                0 0 0 1px rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14px;
            font-weight: 600;
            color: var(--navy);
            opacity: 0;
            animation: floatIn 0.6s ease-out forwards;
            transform-style: preserve-3d;
        }

        .floating-card-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .floating-card.notification-1 {
            top: -10%;
            left: -20%;
            animation-delay: 1.5s;
        }

        .floating-card.notification-1 .floating-card-icon {
            background: rgba(73, 204, 249, 0.15);
        }

        .floating-card.notification-2 {
            top: 30%;
            right: -25%;
            animation-delay: 2s;
        }

        .floating-card.notification-2 .floating-card-icon {
            background: rgba(34, 197, 94, 0.15);
        }

        .floating-card.notification-3 {
            bottom: 5%;
            right: -20%;
            animation-delay: 2.5s;
        }

        .floating-card.notification-3 .floating-card-icon {
            background: rgba(135, 0, 255, 0.15);
        }

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

        /* Continuous floating animation */
        .floating-card.notification-1 {
            animation: floatIn 0.6s ease-out 1.5s forwards, float1 6s ease-in-out 2.1s infinite;
        }

        .floating-card.notification-2 {
            animation: floatIn 0.6s ease-out 2s forwards, float2 7s ease-in-out 2.6s infinite;
        }

        .floating-card.notification-3 {
            animation: floatIn 0.6s ease-out 2.5s forwards, float3 5s ease-in-out 3.1s infinite;
        }

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

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

        @keyframes float3 {
            0%, 100% { transform: translateY(0) rotate(-1deg); }
            50% { transform: translateY(-12px) rotate(1deg); }
        }

        /* Floating expert avatars */
        .floating-avatars {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
        }

        .floating-avatar {
            position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 700;
            color: var(--white);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            opacity: 0;
            animation: avatarFloat 0.5s ease-out forwards;
        }

        .floating-avatar:nth-child(1) {
            top: -8%;
            right: 20%;
            background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
            animation-delay: 1.8s;
        }

        .floating-avatar:nth-child(2) {
            bottom: 10%;
            right: -5%;
            background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange));
            animation-delay: 2.2s;
        }

        .floating-avatar:nth-child(3) {
            top: 50%;
            left: -8%;
            background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
            animation-delay: 2.6s;
        }

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

        .floating-avatar:nth-child(1) {
            animation: avatarFloat 0.5s ease-out 1.8s forwards, orbitFloat1 8s ease-in-out 2.3s infinite;
        }

        .floating-avatar:nth-child(2) {
            animation: avatarFloat 0.5s ease-out 2.2s forwards, orbitFloat2 10s ease-in-out 2.7s infinite;
        }

        .floating-avatar:nth-child(3) {
            animation: avatarFloat 0.5s ease-out 2.6s forwards, orbitFloat3 9s ease-in-out 3.1s infinite;
        }

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

        @keyframes orbitFloat2 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(-15px, 10px) scale(1.05); }
            66% { transform: translate(-10px, -15px) scale(0.95); }
        }

        @keyframes orbitFloat3 {
            0%, 100% { transform: translate(0, 0) scale(1); }
            50% { transform: translate(15px, -10px) scale(1.05); }
        }

        /* Connection lines */
        .connection-lines {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            pointer-events: none;
            overflow: visible;
        }

        .connection-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--accent-cyan), var(--accent-purple), transparent);
            opacity: 0;
            animation: lineDraw 2s ease-out forwards;
            transform-origin: left center;
        }

        .connection-line:nth-child(1) {
            top: 20%;
            left: -10%;
            width: 15%;
            transform: rotate(20deg);
            animation-delay: 2s;
        }

        .connection-line:nth-child(2) {
            top: 50%;
            right: -10%;
            width: 12%;
            transform: rotate(-15deg);
            animation-delay: 2.3s;
        }

        @keyframes lineDraw {
            from {
                opacity: 0;
                transform: scaleX(0);
            }
            to {
                opacity: 0.6;
                transform: scaleX(1);
            }
        }
            color: var(--white);
            flex-shrink: 0;
        }

        .expert-avatar.purple { background: linear-gradient(135deg, var(--accent-purple) 0%, var(--violet) 100%); }
        .expert-avatar.pink { background: linear-gradient(135deg, var(--accent-pink) 0%, var(--violet) 100%); }
        .expert-avatar.cyan { background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--violet) 100%); }
        .expert-avatar.teal { background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); }
        .expert-avatar.orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); }
        .expert-avatar.blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
        .expert-avatar.green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }

        /* Preview badge variants */
        .preview-badge.live { background: #10b981; color: #fff; }
        .preview-badge.upgrade { background: linear-gradient(135deg, #8b5cf6, #a855f7); color: #fff; }
        .preview-badge.abm { background: linear-gradient(135deg, #f97316, #ea580c); color: #fff; }

        /* Upgrade modal styles */
        .upgrade-prompt {
            padding: 12px 16px;
            background: rgba(139, 92, 246, 0.1);
            border-radius: 12px;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        
        .upgrade-prompt p {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: var(--violet);
        }
        
        /* ABM card styles */
        .abm-note {
            padding: 12px 16px;
            background: rgba(249, 115, 22, 0.1);
            border-radius: 12px;
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }
        
        .abm-note p {
            margin: 0;
            font-size: 14px;
            font-weight: 600;
            color: #ea580c;
        }

        .expert-info {
            flex: 1;
        }

        .expert-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--navy);
        }

        .expert-role {
            font-size: 13px;
            color: var(--muted);
        }

        .expert-match {
            padding: 6px 12px;
            background: var(--navy);
            color: var(--white);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
        }

        /* ========== SCROLL REVEAL TYPOGRAPHY SECTION ========== */
        .scroll-typography-section {
            padding: 120px 48px;
            background: var(--off-white);
            overflow: hidden;
            position: relative;
        }

        .scroll-typography-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at 30% 0%, rgba(129, 103, 234, 0.05) 0%, transparent 50%),
                        radial-gradient(ellipse at 70% 100%, rgba(73, 204, 249, 0.05) 0%, transparent 50%);
            pointer-events: none;
        }

        .scroll-typography-container {
            max-width: 1400px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }

        .scroll-intro {
            margin-bottom: 40px;
        }

        .scroll-intro-label {
            display: inline-block;
            padding: 10px 24px;
            background: var(--navy);
            color: var(--white);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 2px;
            border-radius: 100px;
        }

        .scroll-typography-line {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            gap: 0;
            margin-bottom: 10px;
        }

        .scroll-word {
            font-size: clamp(48px, 8vw, 100px);
            font-weight: 800;
            color: var(--navy);
            letter-spacing: -3px;
            line-height: 1.1;
            display: inline-flex;
            align-items: center;
        }

        .scroll-word.gradient {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .scroll-images-group {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin: 0 15px;
            position: relative;
        }

        .scroll-image {
            width: 0;
            height: 80px;
            border-radius: 12px;
            overflow: hidden;
            opacity: 0;
            transform: scale(0.8) rotate(-5deg);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .scroll-image.visible {
            width: 100px;
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }

        .scroll-image:nth-child(2) {
            transition-delay: 0.1s;
            transform: scale(0.8) rotate(5deg);
        }

        .scroll-image:nth-child(2).visible {
            transform: scale(1) rotate(3deg);
        }

        .scroll-image:nth-child(3) {
            transition-delay: 0.2s;
            transform: scale(0.8) rotate(-3deg);
        }

        .scroll-image:nth-child(3).visible {
            transform: scale(1) rotate(-2deg);
        }

        .scroll-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .scroll-image-label {
            position: absolute;
            bottom: -10px;
            right: -10px;
            background: var(--navy);
            color: var(--white);
            padding: 8px 14px;
            border-radius: 100px;
            font-size: 12px;
            font-weight: 600;
            white-space: nowrap;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.4s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .scroll-image-label.white {
            background: rgba(255, 255, 255, 0.95);
            color: var(--navy);
        }

        .scroll-image-label.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .scroll-image-label svg {
            width: 12px;
            height: 12px;
        }

        /* Different image sizes for variety */
        .scroll-image.tall {
            height: 100px;
        }

        .scroll-image.tall.visible {
            width: 75px;
        }

        .scroll-image.wide {
            height: 70px;
        }

        .scroll-image.wide.visible {
            width: 120px;
        }

        /* Second group styling */
        .scroll-images-group:nth-child(2) .scroll-image {
            transform: scale(0.8) rotate(8deg);
        }

        .scroll-images-group:nth-child(2) .scroll-image.visible {
            transform: scale(1) rotate(-2deg);
        }

        @media (max-width: 768px) {
            .scroll-word {
                font-size: clamp(32px, 10vw, 48px);
                letter-spacing: -1px;
            }

            .scroll-image {
                height: 50px;
            }

            .scroll-image.visible {
                width: 60px;
            }

            .scroll-image.tall {
                height: 65px;
            }

            .scroll-image.tall.visible {
                width: 50px;
            }

            .scroll-images-group {
                margin: 0 8px;
            }
        }

        /* ========== LOGO BAR ========== */
        .logo-bar {
            padding: 80px 48px 100px;
            background: #0d0a1a;
            background-image: 
                radial-gradient(ellipse 800px 400px at 0% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse 600px 350px at 100% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 55%),
                radial-gradient(ellipse 500px 300px at 50% 100%, rgba(124, 92, 252, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 400px 200px at 50% 0%, rgba(124, 92, 252, 0.12) 0%, transparent 70%),
                linear-gradient(180deg, #0d0a1a 0%, #0a0815 50%, #080610 100%);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .logo-bar::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.035;
            pointer-events: none;
        }

        .logo-bar-label {
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.4);
            text-transform: uppercase;
            letter-spacing: 4px;
            margin-bottom: 48px;
            position: relative;
            z-index: 1;
        }

        .logo-grid {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 64px;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

        .logo-item {
            font-size: 18px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
            letter-spacing: 0.5px;
        }

        .logo-item:hover {
            color: rgba(255, 255, 255, 0.85);
        }

        /* ========== PROBLEM SECTION (Work Sprawl style) ========== */
        .problem-section {
            padding: 120px 48px;
            background: var(--off-white);
            text-align: center;
        }

        .section-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: rgba(129, 103, 234, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(129, 103, 234, 0.2);
            border-radius: 100px;
            margin-bottom: 24px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .section-badge-dot {
            width: 8px;
            height: 8px;
            background: var(--violet);
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(129, 103, 234, 0.5);
        }

        .section-badge span {
            font-size: 13px;
            font-weight: 700;
            color: var(--violet);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Badge icons - monoline style */
        .badge-icon {
            width: 16px;
            height: 16px;
            stroke: var(--violet);
            stroke-width: 1.5;
            flex-shrink: 0;
        }
        
        /* Dark background section badge icons */
        .solution-section .badge-icon,
        .metrics-section .badge-icon {
            stroke: #fff;
        }
        
        /* Dark background section badges */
        .dark-badge {
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .dark-badge .section-badge-dot {
            background: #fff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
        }
        
        .dark-badge span {
            color: #fff;
        }

        .section-title {
            font-size: clamp(36px, 5vw, 56px);
            font-weight: 800;
            color: var(--navy);
            line-height: 1.1;
            margin-bottom: 20px;
            letter-spacing: -2px;
        }

        .section-title .highlight {
            color: var(--violet);
        }

        .section-title .gradient-text {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .section-title .serif-italic {
            font-family: 'Instrument Serif', Georgia, serif;
            font-style: italic;
            font-weight: 400;
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            padding-right: 0.05em;
            white-space: nowrap;
        }

        .section-title .accent-underline {
            position: relative;
            display: inline-block;
        }

        .section-title .accent-underline::after {
            content: '';
            position: absolute;
            bottom: 4px;
            left: 0;
            right: 0;
            height: 8px;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple), var(--accent-pink));
            opacity: 0.3;
            z-index: -1;
            border-radius: 4px;
        }

        .section-subtitle {
            font-size: 20px;
            color: var(--muted);
            max-width: 700px;
            margin: 0 auto 60px;
            line-height: 1.7;
        }

        /* Problem Cards */
        .problem-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 60px;
        }

        .problem-card {
            background: var(--white);
            border-radius: 24px;
            padding: 40px 32px;
            text-align: left;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            border: 1px solid rgba(14, 14, 68, 0.06);
        }

        .problem-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(14, 14, 68, 0.12);
        }

        .problem-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--gradient-violet);
            opacity: 0;
            transition: opacity 0.4s ease;
        }

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

        .problem-icon {
            width: 64px;
            height: 64px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            font-size: 28px;
        }

        .problem-icon.ghost { background: rgba(135, 0, 255, 0.12); }
        .problem-icon.fire { background: rgba(255, 107, 157, 0.12); }
        .problem-icon.chart { background: rgba(73, 204, 249, 0.12); }

        .problem-card h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 12px;
        }

        .problem-card p {
            font-size: 16px;
            color: var(--muted);
            line-height: 1.7;
            margin-bottom: 24px;
        }

        .problem-stat {
            padding-top: 24px;
            border-top: 1px solid rgba(14, 14, 68, 0.08);
        }

        .problem-stat-value {
            font-size: 40px;
            font-weight: 800;
            line-height: 1;
            margin-bottom: 4px;
        }

        .problem-stat-value.purple { color: var(--accent-purple); }
        .problem-stat-value.pink { color: var(--accent-pink); }
        .problem-stat-value.cyan { color: var(--accent-cyan); }

        .problem-stat-label {
            font-size: 14px;
            color: var(--muted);
        }

        /* Mid-Page CTA */
        .mid-cta {
            margin-top: 60px;
            padding: 40px;
            background: linear-gradient(135deg, rgba(129, 103, 234, 0.1) 0%, rgba(73, 204, 249, 0.1) 100%);
            border-radius: 20px;
            border: 1px solid rgba(129, 103, 234, 0.2);
            text-align: center;
        }

        .mid-cta-text {
            font-size: 20px;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 20px;
        }

        /* ========== SOLUTION SECTION ========== */
        .solution-section {
            padding: 120px 48px;
            background: #0d0a1a;
            background-image: 
                radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse 500px 500px at 85% 15%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
                radial-gradient(ellipse 400px 300px at 75% 75%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 450px 350px at 25% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse 300px 300px at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, #0d0a1a 0%, #1a1333 50%, #0f0c1f 100%);
            position: relative;
            overflow: hidden;
        }

        .solution-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.035;
            pointer-events: none;
            z-index: 0;
        }

        .solution-section .section-badge {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 18px;
            border-radius: 50px;
            position: relative;
            z-index: 1;
        }

        .solution-section .section-badge .star-icon {
            width: 16px;
            height: 16px;
            stroke: white;
            stroke-width: 1.5;
            fill: none;
        }

        .solution-section .section-badge span {
            color: #fff;
            font-weight: 600;
        }

        .solution-section .section-badge-dot {
            display: none;
        }

        .solution-section .section-title {
            color: var(--white);
            text-align: left;
            position: relative;
            z-index: 1;
        }

        .solution-section .section-subtitle {
            color: rgba(255, 255, 255, 0.7);
            text-align: left;
            max-width: 700px;
            margin-left: 0;
            margin-right: auto;
            margin-bottom: 60px;
            position: relative;
            z-index: 1;
        }
        
        .solution-section .section-container {
            position: relative;
            z-index: 1;
            text-align: left;
        }

        .solution-steps {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 32px;
            margin-top: 60px;
            position: relative;
            z-index: 1;
        }

        .solution-step {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 24px;
            padding: 40px 32px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            perspective: 1000px;
            position: relative;
            cursor: pointer;
            overflow: visible;
            /* Gradient border using background trick */
            border: 1px solid transparent;
            background-image: 
                linear-gradient(rgba(20, 15, 35, 0.8), rgba(20, 15, 35, 0.9)),
                linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(236, 72, 153, 0.4) 100%);
            background-origin: border-box;
            background-clip: padding-box, border-box;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 60px rgba(139, 92, 246, 0.15);
        }

        /* Top highlight line */
        .solution-step::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20px;
            right: 20px;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
            z-index: 1;
        }

        /* Inner gradient overlay */
        .solution-step::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 40%, rgba(139, 92, 246, 0.03) 100%);
            border-radius: 22px;
            z-index: 0;
            opacity: 0.6;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .solution-step:hover {
            background-image: 
                linear-gradient(rgba(20, 15, 35, 0.7), rgba(20, 15, 35, 0.85)),
                linear-gradient(135deg, rgba(139, 92, 246, 0.8) 0%, rgba(168, 85, 247, 0.6) 50%, rgba(236, 72, 153, 0.7) 100%);
            transform: translateY(-8px);
            box-shadow: 
                0 25px 50px rgba(0, 0, 0, 0.5),
                0 0 80px rgba(139, 92, 246, 0.3),
                0 0 120px rgba(168, 85, 247, 0.15);
        }

        .solution-step:hover::after {
            opacity: 1;
        }

        /* Glow effect on hover */
        .solution-step-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            transform: translate(-50%, -50%);
            background: radial-gradient(circle at center, rgba(129, 103, 234, 0.15) 0%, transparent 70%);
            border-radius: 24px;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 0;
        }

        .solution-step:hover .solution-step-glow {
            opacity: 1;
        }

        .step-number {
            width: 56px;
            height: 56px;
            background: var(--gradient-violet);
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 24px;
            font-size: 24px;
            font-weight: 800;
            color: var(--white);
            box-shadow: 0 8px 24px rgba(129, 103, 234, 0.4);
            transition: transform 0.2s ease, box-shadow 0.3s ease;
            position: relative;
            z-index: 2;
        }

        .solution-step:hover .step-number {
            transform: translateY(-4px) scale(1.05);
            box-shadow: 0 12px 30px rgba(129, 103, 234, 0.5);
        }

        .solution-step h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--white);
            margin-bottom: 12px;
            position: relative;
            z-index: 2;
            transition: transform 0.2s ease;
        }

        .solution-step:hover h3 {
            transform: translateY(-2px);
        }

        .solution-step p {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.7;
            position: relative;
            z-index: 2;
            transition: color 0.3s ease;
        }

        .solution-step:hover p {
            color: rgba(255, 255, 255, 0.85);
        }

        /* ========== USE CASES TABS ========== */
        .usecases-section {
            padding: 120px 48px;
            background: var(--white);
        }

        .usecases-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 60px;
            flex-wrap: wrap;
        }

        .usecase-tab {
            padding: 14px 28px;
            background: var(--off-white);
            border: 2px solid transparent;
            border-radius: 100px;
            font-size: 15px;
            font-weight: 600;
            color: var(--muted);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .usecase-tab:hover {
            color: var(--navy);
            background: var(--lavender);
        }

        .usecase-tab.active {
            background: var(--navy);
            color: var(--white);
        }

        .usecase-content {
            display: none;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
            max-width: 1100px;
            margin: 0 auto;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }
        
        .usecase-content.active {
            display: grid;
            opacity: 1;
            transform: translateY(0);
        }

        .usecase-text {
            text-align: left;
        }

        .usecase-text h3 {
            font-size: 36px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 20px;
            letter-spacing: -1px;
            text-align: left;
        }

        .usecase-text h3 .gradient-text-dark {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .usecase-text p {
            font-size: 18px;
            color: var(--muted);
            line-height: 1.7;
            margin-bottom: 32px;
            text-align: left;
        }

        .usecase-features {
            display: flex;
            flex-direction: column;
            gap: 16px;
            margin-bottom: 32px;
        }

        .usecase-feature {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 16px;
            color: var(--dark-text);
        }

        .usecase-feature-icon {
            width: 24px;
            height: 24px;
            background: rgba(126, 231, 135, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #22c55e;
            font-size: 14px;
        }

        .usecase-visual {
            background: var(--gradient-hero);
            border-radius: 24px;
            padding: 40px;
            position: relative;
            overflow: hidden;
        }

        .usecase-visual::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--gradient-mesh);
            opacity: 0.5;
        }

        .usecase-card {
            background: var(--white);
            border-radius: 16px;
            padding: 24px;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        /* ========== DEAL ACCELERATION VISUAL ========== */
        .deal-card {
            padding: 0;
            background: #f8fafc;
        }

        .crm-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: linear-gradient(135deg, #0176d3 0%, #1b96ff 100%);
            border-radius: 16px 16px 0 0;
        }

        .crm-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #fff;
            font-size: 13px;
            font-weight: 600;
        }

        .crm-deal-stage {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
        }

        .stage-label { color: rgba(255,255,255,0.7); }
        .stage-value { color: #fff; font-weight: 600; }

        .deal-info-block {
            padding: 16px;
            border-bottom: 1px solid #e2e8f0;
        }

        .deal-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
            margin-bottom: 4px;
        }

        .deal-amount {
            font-size: 20px;
            font-weight: 800;
            color: #059669;
            margin-bottom: 8px;
        }

        .deal-meta {
            display: flex;
            gap: 12px;
            font-size: 12px;
        }

        .deal-tag {
            background: #fef3c7;
            color: #d97706;
            padding: 4px 8px;
            border-radius: 4px;
            font-weight: 600;
        }

        .deal-days { color: var(--muted); }

        .chrome-extension-popup {
            margin: 16px;
            background: #fff;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            border: 1px solid #e2e8f0;
        }

        .extension-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 14px;
            font-weight: 700;
            color: var(--navy);
        }

        .extension-icon {
            width: 24px;
            height: 24px;
            background: var(--gradient-violet);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .extension-badge {
            margin-left: auto;
            background: #f1f5f9;
            color: var(--muted);
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 10px;
            font-weight: 600;
        }

        .extension-label {
            font-size: 12px;
            color: var(--muted);
            margin-bottom: 12px;
        }

        .match-score {
            background: #dcfce7;
            color: #16a34a;
            padding: 4px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 700;
        }

        .extension-cta {
            width: 100%;
            padding: 10px;
            background: var(--gradient-violet);
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 12px;
        }

        /* ========== WEBSITE CONVERSION VISUAL ========== */
        .website-card {
            padding: 0;
            background: #fff;
        }

        .browser-chrome {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: #f1f5f9;
            border-radius: 16px 16px 0 0;
            border-bottom: 1px solid #e2e8f0;
        }

        .browser-dots {
            display: flex;
            gap: 6px;
        }

        .browser-dots .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

        .dot.red { background: #ef4444; }
        .dot.yellow { background: #f59e0b; }
        .dot.green { background: #22c55e; }

        .browser-url {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 6px;
            background: #fff;
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 12px;
            color: var(--muted);
        }

        .browser-url svg { color: #22c55e; }

        .website-content {
            padding: 20px;
        }

        .website-hero-mini {
            text-align: center;
            margin-bottom: 16px;
        }

        .website-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 4px;
        }

        .website-subtitle {
            font-size: 12px;
            color: var(--muted);
        }

        .filter-bar {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
            overflow: hidden;
        }

        .filter-chip {
            padding: 6px 12px;
            background: #f1f5f9;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 500;
            color: var(--muted);
            white-space: nowrap;
        }

        .filter-chip.active {
            background: var(--navy);
            color: #fff;
        }

        .expert-grid-mini {
            display: flex;
            gap: 10px;
        }

        .expert-card-mini {
            flex: 1;
            background: #f8fafc;
            border-radius: 10px;
            padding: 12px;
            text-align: center;
            border: 1px solid #e2e8f0;
        }

        .expert-card-mini .expert-avatar {
            width: 36px;
            height: 36px;
            font-size: 12px;
            margin: 0 auto 8px;
        }

        .expert-name-mini {
            font-size: 12px;
            font-weight: 600;
            color: var(--navy);
            margin-bottom: 4px;
        }

        .expert-tag {
            font-size: 10px;
            color: var(--muted);
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
        }

        .visitor-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 10px;
            background: #f0fdf4;
            font-size: 11px;
            color: #16a34a;
            font-weight: 500;
            border-radius: 0 0 16px 16px;
        }

        .visitor-dot {
            width: 6px;
            height: 6px;
            background: #22c55e;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }

        /* ========== PLG CONVERSION VISUAL ========== */
        .plg-card {
            padding: 0;
            background: #1e1e2e;
            min-height: 320px;
        }

        .app-context {
            display: flex;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .app-sidebar {
            width: 50px;
            background: #15151f;
            padding: 12px 8px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            border-radius: 16px 0 0 16px;
        }

        .sidebar-item {
            width: 100%;
            height: 28px;
            background: #2a2a3d;
            border-radius: 6px;
        }

        .sidebar-item.active {
            background: var(--gradient-violet);
        }

        .app-main {
            flex: 1;
            background: #1e1e2e;
            border-radius: 0 16px 16px 0;
        }

        .app-content-blur {
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(rgba(30,30,46,0.8), rgba(30,30,46,0.8)),
                repeating-linear-gradient(0deg, #2a2a3d 0px, #2a2a3d 8px, transparent 8px, transparent 16px);
            filter: blur(2px);
        }

        .upgrade-modal-overlay {
            position: absolute;
            top: 50%;
            left: 55%;
            transform: translate(-50%, -50%);
            width: 85%;
            max-width: 280px;
            z-index: 10;
        }

        .upgrade-modal-content {
            background: #fff;
            border-radius: 16px;
            padding: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.4);
        }

        .modal-header {
            text-align: center;
            margin-bottom: 16px;
        }

        .modal-icon {
            font-size: 24px;
            margin-bottom: 8px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--navy);
        }

        .modal-subtitle {
            font-size: 12px;
            color: var(--muted);
        }

        .pricing-pills {
            display: flex;
            gap: 8px;
            margin-bottom: 16px;
        }

        .pricing-pill {
            flex: 1;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
            background: #f1f5f9;
            border: 2px solid transparent;
        }

        .pricing-pill.recommended {
            background: #f5f3ff;
            border-color: var(--violet);
        }

        .pill-name {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: var(--navy);
        }

        .pill-price {
            font-size: 11px;
            color: var(--muted);
        }

        .pill-price.current {
            color: #16a34a;
        }

        .talk-to-user {
            background: #fef3c7;
            border-radius: 10px;
            padding: 12px;
        }

        .talk-header {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 600;
            color: #92400e;
            margin-bottom: 10px;
        }

        .expert-card.compact {
            background: #fff;
            border-radius: 8px;
            padding: 8px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .expert-card.compact .expert-avatar {
            width: 32px;
            height: 32px;
            font-size: 11px;
        }

        .expert-card.compact .expert-name {
            font-size: 12px;
        }

        .expert-card.compact .expert-role {
            font-size: 10px;
        }

        .book-btn {
            margin-left: auto;
            padding: 6px 12px;
            background: var(--gradient-violet);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }

        /* ========== ABM CAMPAIGNS VISUAL ========== */
        .abm-card {
            padding: 0;
            background: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 100%);
        }

        .abm-landing {
            padding: 20px;
        }

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

        .abm-logo-placeholder {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            color: var(--navy);
            font-size: 14px;
        }

        .company-logo-box {
            width: 32px;
            height: 32px;
            background: var(--navy);
            color: #fff;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
        }

        .abm-badge {
            background: #fff;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 600;
            color: var(--violet);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .abm-title {
            font-size: 18px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 4px;
        }

        .abm-subtitle {
            font-size: 12px;
            color: var(--muted);
            margin-bottom: 16px;
        }

        .expert-stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 16px;
        }

        .expert-card-abm {
            display: flex;
            align-items: center;
            gap: 10px;
            background: #fff;
            padding: 10px 12px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .expert-card-abm .expert-avatar {
            width: 36px;
            height: 36px;
            font-size: 12px;
        }

        .expert-card-abm .expert-name {
            font-size: 13px;
        }

        .expert-card-abm .expert-role {
            font-size: 10px;
        }

        .book-btn-abm {
            margin-left: auto;
            padding: 6px 14px;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 600;
            cursor: pointer;
        }

        .abm-stats {
            display: flex;
            gap: 16px;
            padding: 12px;
            background: #fff;
            border-radius: 10px;
        }

        .abm-stat {
            flex: 1;
            text-align: center;
        }

        .abm-stat .stat-value {
            display: block;
            font-size: 20px;
            font-weight: 800;
            color: var(--violet);
        }

        .abm-stat .stat-label {
            font-size: 10px;
            color: var(--muted);
        }

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

        /* ========== METRICS SECTION ========== */
        .metrics-section {
            padding: 120px 48px;
            background: #0d0a1a;
            background-image: 
                radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
                radial-gradient(ellipse 500px 500px at 85% 15%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
                radial-gradient(ellipse 400px 300px at 75% 75%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
                radial-gradient(ellipse 450px 350px at 25% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
                radial-gradient(ellipse 300px 300px at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
                linear-gradient(135deg, #0d0a1a 0%, #1a1333 50%, #0f0c1f 100%);
            position: relative;
            overflow: hidden;
        }

        /* Grid pattern overlay */
        .metrics-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(to right, rgba(139, 92, 246, 0.08) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(139, 92, 246, 0.08) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }
        
        /* Noise texture overlay */
        .metrics-section::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
            opacity: 0.035;
            pointer-events: none;
            z-index: 0;
        }

        .metrics-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
        }

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

        .metrics-header .section-badge {
            background: rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
        }

        .metrics-header .section-badge span {
            color: var(--white);
        }

        .metrics-header .section-badge-dot {
            background: var(--accent-cyan);
            box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
        }

        .metrics-title {
            font-size: clamp(36px, 5vw, 52px);
            font-weight: 800;
            color: var(--white);
            letter-spacing: -2px;
            margin-bottom: 16px;
        }

        .metrics-subtitle {
            font-size: 18px;
            color: rgba(255, 255, 255, 0.7);
            max-width: 550px;
            margin: 0 auto;
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        /* Card with flip-up hover effect */
        .metric-card {
            position: relative;
            height: 320px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 
                0 15px 40px rgba(0, 0, 0, 0.3),
                0 0 60px rgba(139, 92, 246, 0.1);
        }

        .metric-card .face {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        /* Back face - content revealed on hover */
        .metric-card .face1 {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            box-sizing: border-box;
            padding: 30px 24px 100px 24px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            justify-content: flex-start;
            padding-top: 40px;
        }

        .metric-card .face1 .content {
            opacity: 0;
            transition: opacity 0.3s ease 0.2s;
        }

        .metric-card:hover .face1 .content {
            opacity: 1;
        }

        .metric-card .face1 h3 {
            font-size: 22px;
            font-weight: 700;
            color: var(--white);
            margin: 0 0 16px 0;
        }

        .metric-card .face1 p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.75);
            margin: 0;
            line-height: 1.7;
        }

        /* Front face - enhanced glassmorphism */
        .metric-card .face2 {
            background: rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        /* Top highlight line */
        .metric-card .face2::before {
            content: '';
            position: absolute;
            top: 0;
            left: 20px;
            right: 20px;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
            border-radius: 24px 24px 0 0;
        }

        /* Gradient border glow */
        .metric-card .face2::after {
            content: '';
            position: absolute;
            top: -1px;
            left: -1px;
            right: -1px;
            bottom: -1px;
            border-radius: 24px;
            padding: 1px;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.5) 0%, rgba(168, 85, 247, 0.3) 50%, rgba(236, 72, 153, 0.4) 100%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* Different gradient accent for each card */
        .metric-card:nth-child(1) .face2::after {
            background: linear-gradient(135deg, rgba(6, 182, 212, 0.6) 0%, rgba(139, 92, 246, 0.5) 100%);
        }

        .metric-card:nth-child(2) .face2::after {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.6) 0%, rgba(236, 72, 153, 0.5) 100%);
        }

        .metric-card:nth-child(3) .face2::after {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.6) 0%, rgba(249, 115, 22, 0.5) 100%);
        }

        .metric-card:nth-child(4) .face2::after {
            background: linear-gradient(135deg, rgba(249, 115, 22, 0.6) 0%, rgba(6, 182, 212, 0.5) 100%);
        }

        /* Inner glow per card - enhanced */
        .metric-card:nth-child(1) .face2 {
            box-shadow: 
                inset 0 0 80px rgba(6, 182, 212, 0.12),
                0 0 40px rgba(6, 182, 212, 0.1);
        }

        .metric-card:nth-child(2) .face2 {
            box-shadow: 
                inset 0 0 80px rgba(139, 92, 246, 0.12),
                0 0 40px rgba(139, 92, 246, 0.1);
        }

        .metric-card:nth-child(3) .face2 {
            box-shadow: 
                inset 0 0 80px rgba(236, 72, 153, 0.12),
                0 0 40px rgba(236, 72, 153, 0.1);
        }

        .metric-card:nth-child(4) .face2 {
            box-shadow: 
                inset 0 0 80px rgba(249, 115, 22, 0.12),
                0 0 40px rgba(249, 115, 22, 0.1);
        }

        .metric-card:hover .face2 {
            height: 80px;
            border-radius: 0 0 24px 24px;
        }

        .metric-card .face2 .metric-value {
            font-size: 72px;
            font-weight: 800;
            line-height: 1;
            margin: 0;
            transition: font-size 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
        }

        /* Gradient text for each card's number */
        .metric-card:nth-child(1) .face2 .metric-value {
            background: linear-gradient(135deg, #67e8f9 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-card:nth-child(2) .face2 .metric-value {
            background: linear-gradient(135deg, #c4b5fd 0%, #f9a8d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-card:nth-child(3) .face2 .metric-value {
            background: linear-gradient(135deg, #f9a8d4 0%, #fdba74 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-card:nth-child(4) .face2 .metric-value {
            background: linear-gradient(135deg, #fdba74 0%, #67e8f9 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .metric-card:hover .face2 .metric-value {
            font-size: 28px;
        }

        .metric-card .face2 .metric-label {
            font-size: 16px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 8px;
            opacity: 1000;
            transition: opacity 0.3s ease;
            position: relative;
            z-index: 1;
        }

        .metric-card:hover .face2 .metric-label {
            opacity: 1;
        }

        .metrics-source {
            text-align: center;
            margin-top: 56px;
            padding-top: 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .metrics-source-text {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 20px;
        }

        .metrics-source a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 14px 28px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: 100px;
            color: var(--white);
            text-decoration: none;
            font-weight: 600;
            font-size: 15px;
            transition: all 0.3s ease;
        }

        .metrics-source a:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
        }

        /* ========== TESTIMONIALS ========== */
        .testimonials-section {
            padding: 120px 48px;
            background: var(--off-white);
        }

        /* Light Mode Stats Bar */
        .testimonial-stats-bar {
            margin-top: 40px;
            margin-bottom: 20px;
        }

        .testimonial-stats-subtitle {
            text-align: left;
            font-size: 18px;
            color: var(--muted);
            margin-bottom: 32px;
            max-width: 700px;
        }

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

        .testimonial-stat-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(129, 103, 234, 0.15);
            border-radius: 20px;
            padding: 32px 24px;
            text-align: center;
            transition: all 0.3s ease;
            box-shadow: 
                0 4px 24px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .testimonial-stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 
                0 12px 32px rgba(129, 103, 234, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border-color: rgba(129, 103, 234, 0.25);
        }

        .testimonial-stat-value {
            font-size: 48px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--violet) 0%, var(--accent-purple) 50%, var(--accent-cyan) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 12px;
            letter-spacing: -2px;
        }

        .testimonial-stat-label {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.5;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 60px;
        }

        .testimonial-card {
            background: var(--white);
            border-radius: 24px;
            padding: 36px;
            position: relative;
            transition: all 0.4s ease;
            border: 1px solid rgba(14, 14, 68, 0.04);
        }

        .testimonial-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 30px 60px rgba(14, 14, 68, 0.1);
        }

        .testimonial-card.featured {
            background: var(--navy);
        }

        .testimonial-card.featured .testimonial-content,
        .testimonial-card.featured .testimonial-name {
            color: var(--white);
        }

        .testimonial-card.featured .testimonial-role {
            color: rgba(255, 255, 255, 0.7);
        }

        .testimonial-card.featured .testimonial-logo {
            color: var(--violet-light);
        }

        .testimonial-card.featured .testimonial-metric {
            background: rgba(129, 103, 234, 0.3);
            color: var(--white);
        }

        .testimonial-quote {
            font-size: 48px;
            color: var(--lavender);
            line-height: 1;
            margin-bottom: 16px;
            font-family: Georgia, serif;
        }

        .testimonial-card.featured .testimonial-quote {
            color: rgba(255, 255, 255, 0.4);
        }

        .testimonial-content {
            font-size: 17px;
            color: var(--dark-text);
            line-height: 1.7;
            margin-bottom: 28px;
        }

        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .testimonial-avatar {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: var(--white);
        }

        .testimonial-avatar-img {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            border: 3px solid var(--white);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .testimonial-avatar-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .testimonial-info {
            flex: 1;
        }

        .testimonial-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--navy);
        }

        .testimonial-role {
            font-size: 14px;
            color: var(--muted);
        }

        .testimonial-logo {
            font-size: 18px;
            font-weight: 800;
            color: var(--violet);
        }

        .testimonial-metric {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-top: 20px;
            padding: 10px 16px;
            background: rgba(129, 103, 234, 0.1);
            border-radius: 10px;
            font-size: 14px;
            font-weight: 700;
            color: var(--violet);
        }

        /* ========== WHY SLASHEXPERTS SECTION ========== */
        .why-section {
            padding: 120px 48px;
            background: var(--off-white);
            text-align: center;
        }

        /* Typing Word Animation - Center Aligned, Fixed Height */
        .typing-container {
            display: inline-flex;
            justify-content: center;
            align-items: baseline;
            position: relative;
            width: 200px;
            text-align: center;
        }

        .typing-word {
            background: linear-gradient(135deg, var(--violet) 0%, var(--accent-purple) 50%, var(--accent-cyan) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline;
        }

        .typing-cursor {
            display: inline-block;
            width: 3px;
            height: 0.75em;
            background: var(--violet);
            margin-left: 2px;
            animation: blink 1s infinite;
            vertical-align: baseline;
            position: relative;
            top: 0.1em;
        }

        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 32px;
            margin-top: 60px;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .comparison-card {
            padding: 40px;
            border-radius: 24px;
            text-align: left;
        }

        .comparison-card.old-way {
            background: rgba(14, 14, 68, 0.03);
            border: 1px solid rgba(14, 14, 68, 0.08);
        }

        .comparison-card.new-way {
            background: linear-gradient(135deg, rgba(129, 103, 234, 0.1) 0%, rgba(73, 204, 249, 0.1) 100%);
            border: 1px solid rgba(129, 103, 234, 0.3);
        }

        .comparison-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .comparison-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .old-way .comparison-icon {
            background: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }

        .new-way .comparison-icon {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }

        .comparison-card h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--navy);
        }

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

        .comparison-list li {
            padding: 12px 0;
            font-size: 16px;
            color: var(--muted);
            border-bottom: 1px solid rgba(14, 14, 68, 0.06);
        }

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

        .new-way .comparison-list li {
            color: var(--navy);
            font-weight: 500;
        }

        /* ========== FAQ SECTION ========== */
        .faq-section {
            padding: 120px 48px;
            background: var(--white);
            text-align: center;
        }

        .faq-accordion {
            max-width: 800px;
            margin: 60px auto 0;
            text-align: left;
        }

        .faq-item {
            border-bottom: 1px solid rgba(14, 14, 68, 0.1);
        }

        .faq-item:first-child {
            border-top: 1px solid rgba(14, 14, 68, 0.1);
        }

        .faq-question {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 24px 0;
            background: none;
            border: none;
            cursor: pointer;
            text-align: left;
            font-family: inherit;
        }

        .faq-question span {
            font-size: 18px;
            font-weight: 600;
            color: var(--navy);
            transition: color 0.3s ease;
        }

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

        .faq-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: var(--off-white);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            font-weight: 300;
            color: var(--violet);
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .faq-item.active .faq-icon {
            background: var(--violet);
            color: var(--white);
            transform: rotate(45deg);
        }

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

        .faq-item.active .faq-answer {
            max-height: 200px;
            padding-bottom: 24px;
        }

        .faq-answer p {
            font-size: 16px;
            color: var(--muted);
            line-height: 1.7;
            padding-right: 48px;
        }

        /* ========== RESEARCH CTA ========== */
        .research-section {
            padding: 100px 48px;
            background: var(--white);
            position: relative;
            overflow: hidden;
        }
        
        /* Subtle background orbs */
        .research-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(ellipse 400px 300px at 10% 30%, rgba(249, 115, 22, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse 350px 350px at 90% 20%, rgba(6, 182, 212, 0.1) 0%, transparent 55%),
                radial-gradient(ellipse 300px 250px at 80% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 250px 200px at 20% 70%, rgba(168, 85, 247, 0.06) 0%, transparent 55%);
            pointer-events: none;
            z-index: 0;
        }

        .research-card {
            max-width: 1100px;
            margin: 0 auto;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 243, 255, 0.95) 50%, rgba(240, 253, 250, 0.9) 100%);
            backdrop-filter: blur(40px);
            -webkit-backdrop-filter: blur(40px);
            border-radius: 32px;
            padding: 80px;
            display: grid;
            grid-template-columns: 1fr;
            gap: 40px;
            position: relative;
            overflow: hidden;
            z-index: 1;
            border: 1px solid rgba(139, 92, 246, 0.1);
            box-shadow: 
                0 25px 80px rgba(139, 92, 246, 0.08),
                0 8px 32px rgba(0, 0, 0, 0.04);
        }

        /* Subtle gradient overlay */
        .research-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(ellipse 400px 300px at 100% 0%, rgba(139, 92, 246, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse 300px 200px at 0% 100%, rgba(6, 182, 212, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 0;
        }
        
        /* Remove dark mode highlight line */
        .research-card::after {
            display: none;
        }

        /* Remove cursor-following glow for light mode */
        .glow-overlay {
            display: none;
        }

        .research-content {
            position: relative;
            z-index: 1;
        }

        .research-limited {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 10px 18px;
            background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
            border: none;
            border-radius: 100px;
            font-size: 14px;
            font-weight: 600;
            color: var(--white);
            margin-bottom: 24px;
            box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
        }

        .research-content h3 {
            font-size: 42px;
            font-weight: 800;
            color: var(--navy);
            margin-bottom: 20px;
            letter-spacing: -1px;
        }

        .research-content h3 .gradient-text-light {
            background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 50%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .research-content p {
            font-size: 18px;
            color: var(--muted);
            margin-bottom: 36px;
            line-height: 1.7;
            max-width: 700px;
        }

        .research-stats {
            display: flex;
            gap: 56px;
            margin-bottom: 36px;
        }

        .research-stat-value {
            font-size: 40px;
            font-weight: 800;
            color: var(--accent-purple);
        }

        .research-stat-value.purple { color: var(--accent-purple); }
        .research-stat-value.pink { color: var(--accent-pink); }
        .research-stat-value.cyan { color: var(--accent-cyan); }

        .research-stat-label {
            font-size: 14px;
            color: var(--muted);
            margin-top: 4px;
        }

        .research-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 16px 32px;
            background: var(--white);
            color: var(--navy);
            font-size: 16px;
            font-weight: 600;
            border-radius: 100px;
            text-decoration: none;
            border: 1px solid rgba(14, 14, 68, 0.1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
        }

        .research-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
            border-color: rgba(139, 92, 246, 0.3);
        }

        /* ========== FINAL CTA ========== */
        .final-cta {
            padding: 160px 48px;
            background: var(--off-white);
            text-align: center;
            position: relative;
        }

        .final-cta h2 {
            font-size: clamp(40px, 6vw, 72px);
            font-weight: 800;
            color: var(--navy);
            line-height: 1.1;
            margin-bottom: 24px;
            letter-spacing: -3px;
        }

        .final-cta h2 .gradient-text {
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 50%, var(--accent-pink) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .final-cta h2 .serif-italic {
            font-family: 'Instrument Serif', Georgia, serif;
            font-style: italic;
            font-weight: 400;
            background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-purple) 33%, var(--accent-pink) 66%, var(--accent-orange) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            display: inline-block;
            padding-right: 0.05em;
        }

        .final-cta > p {
            font-size: 20px;
            color: var(--muted);
            max-width: 600px;
            margin: 0 auto 64px;
            line-height: 1.7;
        }

        .final-cta-buttons {
            display: flex;
            justify-content: center;
            gap: 24px;
            flex-wrap: wrap;
        }

        .final-cta-buttons .btn {
            /* min-width: 220px; */
        }

        /* Dark Navy Button */
        .btn-dark {
            background: var(--navy);
            color: var(--white);
            box-shadow: 0 4px 20px rgba(14, 14, 68, 0.3);
        }

        .btn-dark:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(14, 14, 68, 0.4);
        }

        /* Gradient Purple Button with Glow */
        .btn-gradient-glow {
            background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #9333ea 100%);
            color: var(--white);
            box-shadow: 
                0 4px 20px rgba(139, 92, 246, 0.4),
                0 0 40px rgba(139, 92, 246, 0.2);
        }

        .btn-gradient-glow:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 8px 30px rgba(139, 92, 246, 0.5),
                0 0 60px rgba(139, 92, 246, 0.3);
        }

        /* ========== FOOTER ========== */
        footer {
            background: var(--navy);
            padding: 80px 48px 40px;
        }

        .footer-top {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            gap: 60px;
            padding-bottom: 60px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .footer-brand {
            max-width: 300px;
        }

        .footer-brand .logo {
            margin-bottom: 20px;
        }

        .footer-brand p {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.7;
        }

        .footer-column h4 {
            font-size: 14px;
            font-weight: 700;
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 24px;
        }

        .footer-column a {
            display: block;
            font-size: 15px;
            color: rgba(255, 255, 255, 0.6);
            text-decoration: none;
            margin-bottom: 14px;
            transition: all 0.3s ease;
        }

        .footer-column a:hover {
            color: var(--white);
            transform: translateX(4px);
        }

        .footer-bottom {
            max-width: 1200px;
            margin: 40px auto 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .footer-bottom p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

        .footer-legal {
            display: flex;
            gap: 32px;
        }

        .footer-legal a {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-legal a:hover {
            color: var(--white);
        }

        /* ========== LIVE COUNTER WIDGET ========== */
        .invisible-counter-widget {
            position: fixed;
            bottom: 32px;
            right: 32px;
            z-index: 999;
            background: var(--white);
            border-radius: 20px;
            padding: 24px 28px;
            box-shadow: 
                0 20px 60px rgba(14, 14, 68, 0.2),
                0 0 0 1px rgba(14, 14, 68, 0.05);
            transform: translateX(calc(100% + 50px));
            opacity: 0;
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            max-width: 320px;
            cursor: pointer;
        }

        .widget-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 24px;
            height: 24px;
            border: none;
            background: var(--off-white);
            color: var(--muted);
            border-radius: 50%;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            z-index: 1;
        }

        .widget-close:hover {
            background: var(--lavender);
            color: var(--navy);
        }

        /* Sticky CTA Bar */
        .sticky-cta {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: var(--navy);
            padding: 16px 48px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 998;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.2);
        }

        .sticky-cta.visible {
            transform: translateY(0);
        }

        .sticky-cta-text {
            color: var(--white);
            font-size: 16px;
            font-weight: 600;
        }

        .sticky-cta-text span {
            color: var(--accent-cyan);
        }

        .sticky-cta-buttons {
            display: flex;
            gap: 12px;
        }

        .invisible-counter-widget.visible {
            transform: translateX(0);
            opacity: 1;
        }

        .invisible-counter-widget:hover {
            transform: translateX(0) scale(1.02);
            box-shadow: 
                0 24px 70px rgba(14, 14, 68, 0.25),
                0 0 0 1px rgba(129, 103, 234, 0.3);
        }

        .widget-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        .widget-pulse {
            width: 10px;
            height: 10px;
            background: var(--violet);
            border-radius: 50%;
            animation: widgetPulse 1.5s infinite;
            box-shadow: 0 0 12px rgba(129, 103, 234, 0.6);
        }

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

        .widget-label {
            font-size: 12px;
            font-weight: 700;
            color: var(--violet);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .widget-title {
            font-size: 14px;
            color: var(--muted);
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .widget-counter {
            display: flex;
            align-items: baseline;
            gap: 8px;
            margin-bottom: 16px;
        }

        .widget-number {
            font-size: 48px;
            font-weight: 800;
            color: var(--navy);
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .widget-suffix {
            font-size: 16px;
            color: var(--muted);
            font-weight: 500;
        }

        .widget-cta {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 700;
            color: var(--violet);
            transition: gap 0.3s ease;
        }

        .invisible-counter-widget:hover .widget-cta {
            gap: 12px;
        }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 1200px) {
            .footer-top {
                grid-template-columns: 1fr 1fr 1fr;
            }

            .footer-brand {
                grid-column: span 3;
                max-width: 100%;
                margin-bottom: 20px;
            }
        }

        @media (max-width: 992px) {
            nav, .hero, .problem-section, .solution-section, .usecases-section, .metrics-section, .testimonials-section, .research-section, .final-cta, footer {
                padding-left: 24px;
                padding-right: 24px;
            }

            .nav-center {
                display: none;
            }

            .hero-grid {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .hero-content {
                text-align: center;
            }

            .hero-subtitle {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-cta {
                justify-content: center;
            }

            .hero-visual {
                max-width: 500px;
                margin: 0 auto;
            }

            .floating-notifications,
            .floating-avatars,
            .connection-lines {
                display: none;
            }

            .problem-grid,
            .solution-steps,
            .testimonial-grid {
                grid-template-columns: 1fr;
            }

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

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

            .usecase-content {
                grid-template-columns: 1fr;
            }
            
            .usecase-content.active {
                display: grid;
            }

            .usecase-visual {
                order: -1;
            }

            .research-card {
                grid-template-columns: 1fr;
                padding: 48px 32px;
                text-align: center;
            }

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

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

            .footer-top {
                grid-template-columns: 1fr 1fr;
            }

            .footer-brand {
                grid-column: span 2;
            }
        }

        @media (max-width: 768px) {
            /* Navigation */
            nav {
                padding: 12px 16px;
            }
            
            .nav-center {
                display: none;
            }
            
            .logo-text {
                font-size: 22px;
            }
            
            .btn-nav-cta {
                padding: 10px 16px;
                font-size: 13px;
            }
            
            .btn-ghost {
                padding: 10px 12px;
                font-size: 13px;
            }

            /* Hero Section */
            .hero {
                padding: 100px 20px 60px;
            }
            
            .hero h1 {
                font-size: 32px;
                letter-spacing: -1.5px;
                line-height: 1.1;
            }

            .hero-subtitle {
                font-size: 16px;
            }
            
            .hero-badge {
                padding: 10px 20px 10px 14px;
                gap: 10px;
            }
            
            .hero-badge span {
                font-size: 13px;
            }

            .hero-cta {
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }

            .hero-cta .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }

            .hero-visual {
                max-width: 100%;
                margin-top: 40px;
            }
            
            .mac-window {
                border-radius: 12px;
            }
            
            .preview-header {
                padding: 8px 12px;
            }
            
            .preview-dots span {
                width: 8px;
                height: 8px;
            }

            .preview-stats {
                flex-direction: column;
                gap: 12px;
            }
            
            /* Social Proof */
            .hero-social-proof {
                flex-direction: column;
                gap: 16px;
                padding: 20px;
            }
            
            .social-proof-divider {
                width: 60px;
                height: 1px;
            }
            
            .social-proof-left,
            .social-proof-right {
                flex-direction: column;
                text-align: center;
                gap: 8px;
            }
            
            .avatar-stack {
                justify-content: center;
            }

            /* Section Titles */
            .section-title {
                font-size: 28px;
            }
            
            .section-subtitle {
                font-size: 16px;
            }
            
            .section-badge {
                padding: 8px 14px;
            }
            
            .section-badge span {
                font-size: 11px;
            }

            /* Problem Section */
            .problem-section {
                padding: 60px 20px;
            }
            
            .problem-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .problem-card {
                padding: 28px 24px;
            }

            /* Solution Section */
            .solution-section {
                padding: 60px 20px;
            }
            
            .solution-steps {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .solution-step {
                padding: 28px 24px;
            }

            /* Use Cases */
            .usecases-section {
                padding: 60px 20px;
            }
            
            .usecase-tabs {
                flex-wrap: wrap;
                gap: 8px;
            }
            
            .usecase-tab {
                padding: 10px 16px;
                font-size: 13px;
            }
            
            .usecase-content {
                grid-template-columns: 1fr;
                gap: 30px;
            }
            
            .usecase-visual {
                order: -1;
            }
            
            .usecase-card {
                min-height: 280px;
            }

            /* Metrics Section */
            .metrics-section {
                padding: 60px 20px;
            }
            
            .metrics-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .metric-card {
                padding: 28px 24px;
            }
            
            .metric-value {
                font-size: 42px;
            }

            /* Testimonials */
            .testimonials-section {
                padding: 60px 20px;
            }
            
            .testimonial-stats-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .testimonial-stat-card {
                padding: 24px 20px;
            }
            
            .testimonial-stat-value {
                font-size: 36px;
            }
            
            .testimonial-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .testimonial-card {
                padding: 28px 24px;
            }

            /* Why Section */
            .why-section {
                padding: 60px 20px;
            }
            
            .comparison-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .comparison-card {
                padding: 28px 24px;
            }
            
            /* Typing word animation */
            .typing-container {
                width: 140px;
            }

            /* Research Section */
            .research-section {
                padding: 60px 20px;
            }
            
            .research-card {
                padding: 32px 24px;
                border-radius: 20px;
            }
            
            .research-content h3 {
                font-size: 28px;
            }
            
            .research-content p {
                font-size: 15px;
            }
            
            .research-stats {
                flex-direction: column;
                gap: 20px;
                align-items: flex-start;
            }
            
            .research-stat-value {
                font-size: 32px;
            }
            
            .research-cta {
                width: 100%;
                justify-content: center;
            }

            /* FAQ Section */
            .faq-section {
                padding: 60px 20px;
            }
            
            .faq-question {
                font-size: 16px;
                padding: 20px;
            }
            
            .faq-answer {
                padding: 0 20px 20px;
                font-size: 15px;
            }

            /* Final CTA */
            .final-cta {
                padding: 80px 20px;
            }
            
            .final-cta h2 {
                font-size: 28px;
                letter-spacing: -1px;
            }

            .final-cta-buttons {
                flex-direction: column;
                align-items: center;
                gap: 12px;
            }
            
            .final-cta-buttons .btn {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }

            /* Footer */
            footer {
                padding: 60px 20px 30px;
            }
            
            .footer-top {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .footer-brand {
                grid-column: span 1;
                text-align: center;
            }
            
            .footer-links {
                text-align: center;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }

            /* Widget */
            .invisible-counter-widget {
                bottom: 16px;
                right: 16px;
                left: 16px;
                max-width: none;
            }
            
            /* Scroll Typography */
            .scroll-headline {
                font-size: 24px;
            }
        }
        
        /* Extra small devices */
        @media (max-width: 480px) {
            .hero h1 {
                font-size: 28px;
            }
            
            .section-title {
                font-size: 24px;
                letter-spacing: -1px;
            }

            .metric-value {
                font-size: 36px;
            }
            
            .testimonial-stat-value {
                font-size: 32px;
            }
            
            .final-cta h2 {
                font-size: 24px;
            }
            
            .research-content h3 {
                font-size: 24px;
            }

            /* Hide widget on small mobile - covers too much screen */
            .invisible-counter-widget {
                display: none !important;
            }
        }

        /* ========== DARK PURPLE PREMIUM THEME v10 ========== */
/* Dark Purple Premium Background */
body {
    background: #0d0a1a;
    background-image: 
        /* Scattered gradient blobs */
        radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 500px 500px at 85% 15%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
        radial-gradient(ellipse 400px 300px at 75% 75%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 450px 350px at 25% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 300px 300px at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        /* Base gradient */
        linear-gradient(135deg, #0d0a1a 0%, #1a1333 50%, #0f0c1f 100%);
    min-height: 100vh;
}

/* Noise overlay for premium texture */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.035;
    pointer-events: none;
    z-index: 9999;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* Update text colors for dark background */
.hero-headline,
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}

.hero-subheadline,
p {
    color: rgba(255, 255, 255, 0.75);
}

/* Section titles - HIGH VISIBILITY */
.section-title {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.section-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Scroll text visibility */
.scroll-text-content h2,
.scroll-text-content .scroll-headline {
    color: #ffffff !important;
}

.scroll-text-content p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Feature section text */
.feature-card h3,
.feature-card-title {
    color: #ffffff !important;
}

.feature-card p,
.feature-card-description {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Testimonial text */
.testimonial-card p,
.testimonial-text {
    color: rgba(255, 255, 255, 0.85) !important;
}

.testimonial-author,
.testimonial-role {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* FAQ text */
.faq-question {
    color: #ffffff !important;
}

.faq-answer {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Navigation updates for dark theme */
.nav {
    background: rgba(13, 10, 26, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-logo {
    color: #ffffff;
}

.nav-link {
    color: rgba(255, 255, 255, 0.8);
}

.nav-link:hover {
    color: #ffffff;
}

/* HIDE sticky book a demo */
.sticky-cta,
.fixed-cta,
.sticky-demo,
[class*="sticky"],
.book-demo-sticky {
    display: none !important;
}

/* Logo bar - dark premium gradient */
.logo-bar {
    background: linear-gradient(180deg, 
        #3d2878 0%, 
        #2d1f69 15%,
        #1a1a5e 40%,
        #0e0e44 70%,
        #0a0a30 100%
    );
    border-top: none;
    border-bottom: none;
}

.logo-bar-title {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Logo items - muted gray text */
.logo-item {
    opacity: 1;
    filter: none;
    color: rgba(255, 255, 255, 0.5);
}

.logo-item:hover {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
}

/* Hero section updates */
.hero {
    background: #0d0a1a !important;
    background-image: 
        radial-gradient(ellipse 600px 400px at 15% 20%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
        radial-gradient(ellipse 500px 500px at 85% 15%, rgba(168, 85, 247, 0.2) 0%, transparent 55%),
        radial-gradient(ellipse 400px 300px at 75% 75%, rgba(236, 72, 153, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 450px 350px at 25% 80%, rgba(99, 102, 241, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse 300px 300px at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, #0d0a1a 0%, #1a1333 50%, #0f0c1f 100%) !important;
    position: relative;
}

/* Hero noise overlay */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.035;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Hero bottom fade for smooth transition to logo bar */
.hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 250px;
    background: linear-gradient(to bottom, transparent 0%, #0d0a1a 100%);
    pointer-events: none;
    z-index: 0;
}

.hero-glow {
    background: radial-gradient(ellipse at center, rgba(139, 92, 246, 0.15) 0%, transparent 60%);
}

/* HIDE floating avatars/gradient bubbles */
.floating-avatars {
    display: none !important;
}

/* Hero Visual Container */
.hero-visual-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    height: 750px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Dashboard Wrapper - Back Layer */
.dashboard-wrapper {
    position: relative;
    width: 95%;
    max-width: 1100px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.4),
        0 0 60px rgba(124, 92, 252, 0.15);
    transition: all 0.4s ease;
    z-index: 2;
}

/* Hover glow effect - purple/pink outline glow */
.dashboard-wrapper:hover {
    box-shadow: 
        0 0 0 3px rgba(124, 92, 252, 0.6),
        0 0 30px rgba(124, 92, 252, 0.4),
        0 0 60px rgba(168, 85, 247, 0.3),
        0 0 100px rgba(236, 72, 153, 0.2),
        0 25px 80px rgba(0, 0, 0, 0.5);
}

.dashboard-screenshot {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 20px;
}

/* Floating Profile Cards - Front Layer (z-index: 10) */
.floating-profile-cards {
    position: absolute;
    top: 0;
    left: -120px;
    right: -120px;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.profile-card {
    position: absolute;
    pointer-events: auto;
    transition: box-shadow 0.3s ease;
    border-radius: 12px;
    overflow: hidden;
    /* Override cards.css defaults for homepage */
    background: none;
    padding: 0;
    /* Enhanced shadow for dark background */
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(124, 92, 252, 0.1);
    opacity: 0;
    will-change: transform, opacity;
}

/* Swipe from left */
.profile-card[data-direction="left"] {
    transform: translateX(-120vw);
}

/* Swipe from right */
.profile-card[data-direction="right"] {
    transform: translateX(120vw);
}

/* When swiped in */
.profile-card.swiped-in {
    opacity: 1;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease, box-shadow 0.3s ease;
}

.profile-card img {
    width: 100%;
    height: auto;
    display: block;
    filter: none;
}

.profile-card:hover {
    box-shadow: 
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(124, 92, 252, 0.2);
}

/* Card Positions */
.profile-card-1 {
    left: -50px;
    top: 30px;
    width: 352px;
}

.profile-card-2 {
    left: -30px;
    bottom: 40px;
    width: 308px;
}

.profile-card-3 {
    right: -40px;
    top: 50px;
    width: 286px;
}

.profile-card-4 {
    right: -60px;
    bottom: 20px;
    width: 330px;
}

/* Section backgrounds for dark theme */
section {
    background: transparent;
}

/* Cards and content boxes on dark background */
.feature-card,
.testimonial-card,
.pricing-card,
.faq-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.feature-card:hover,
.testimonial-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(124, 92, 252, 0.3);
}

.testimonial-card.featured:hover {
    background: rgba(255, 255, 255, 0.95);
}

.testimonial-card.featured:hover .testimonial-content,
.testimonial-card.featured:hover .testimonial-name {
    color: var(--navy);
}

.testimonial-card.featured:hover .testimonial-role {
    color: var(--muted);
}

.testimonial-card.featured:hover .testimonial-metric {
    background: rgba(129, 103, 234, 0.2);
    color: var(--navy);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #7c5cfc 0%, #6366f1 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(124, 92, 252, 0.4);
}

.btn-primary:hover {
    box-shadow: 0 6px 30px rgba(124, 92, 252, 0.6);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Footer */
footer {
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

footer, footer p, footer a, footer h4, footer h5 {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* Hide old hero elements */
.mac-window {
    display: none !important;
}

/* ========== COMPREHENSIVE TEXT READABILITY FIXES ========== */

/* ========================================
   DARK BACKGROUND SECTIONS - WHITE TEXT
   (hero, solution-section, metrics-section)
   ======================================== */

/* Hero section - WHITE text (dark purple background) */
.hero,
.hero * {
    text-shadow: none;
}

.hero h1,
.hero h2,
.hero h3,
.hero p,
.hero .hero-headline,
.hero .hero-subtitle {
    color: #ffffff !important;
}

.hero .hero-subtitle,
.hero p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.hero .hero-badge,
.hero .hero-badge span {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Solution section - WHITE text (navy background) */
.solution-section h2,
.solution-section .section-title,
.solution-section h3,
.solution-section p,
.solution-section .section-subtitle,
.solution-section li {
    color: #ffffff !important;
    text-shadow: none !important;
}

.solution-section .section-subtitle,
.solution-section p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.solution-section .section-subtitle {
    text-align: left !important;
}

.solution-section .solution-step p {
    text-align: center !important;
}

.solution-section .section-badge span {
    color: #ffffff !important;
}

.solution-section .solution-card h3 {
    color: #ffffff !important;
}

.solution-section .solution-card p {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Metrics section - WHITE text (navy background) */
.metrics-section h2,
.metrics-section .section-title,
.metrics-section .metrics-title,
.metrics-section h3,
.metrics-section p,
.metrics-section .section-subtitle {
    color: #ffffff !important;
    text-shadow: none !important;
}

.metrics-section .section-subtitle,
.metrics-section p {
    color: rgba(255, 255, 255, 0.8) !important;
}

.metrics-section .metric-card h3,
.metrics-section .stat-number {
    color: #ffffff !important;
}

.metrics-section .metric-card p,
.metrics-section .stat-label {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   LIGHT BACKGROUND SECTIONS - NAVY/DARK TEXT
   (problem, usecases, testimonials, faq, research, final-cta)
   ======================================== */

/* Problem section - NAVY text (off-white background) */
.problem-section h2,
.problem-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.problem-section .section-subtitle,
.problem-section > p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

.problem-section .section-badge span {
    color: #6366f1 !important;
}

/* Glassmorphism badges for light background sections */
.problem-section .section-badge,
.usecases-section .section-badge,
.testimonials-section .section-badge,
.why-section .section-badge,
.research-section .section-badge,
.faq-section .section-badge {
    background: rgba(129, 103, 234, 0.08) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(129, 103, 234, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.problem-section .section-badge-dot,
.usecases-section .section-badge-dot,
.testimonials-section .section-badge-dot,
.why-section .section-badge-dot,
.research-section .section-badge-dot,
.faq-section .section-badge-dot {
    box-shadow: 0 0 8px rgba(129, 103, 234, 0.5) !important;
}

.problem-section .problem-card h3,
.problem-section .problem-card-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.problem-section .problem-card p,
.problem-section .problem-card-description {
    color: #4a5568 !important;
    text-shadow: none !important;
}

.problem-section .stat-number {
    color: #7c5cfc !important;
}

.problem-section .stat-label {
    color: #64748b !important;
}

/* Use cases section - NAVY text (white background) */
.usecases-section h2,
.usecases-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.usecases-section .section-subtitle,
.usecases-section > p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

.usecases-section .section-badge span {
    color: #6366f1 !important;
}

.usecases-section .tab-btn {
    color: #1a1a2e !important;
}

.usecases-section .tab-btn.active {
    color: #ffffff !important;
}

.usecases-section .use-case-content h3,
.usecases-section h3 {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.usecases-section .use-case-content p,
.usecases-section p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

.usecases-section li {
    color: #4a5568 !important;
}

.usecases-section .before-label,
.usecases-section .after-label {
    color: #1a1a2e !important;
}

/* Comparison cards in usecases */
.comparison-card h3,
.comparison-card .comparison-title,
.old-way h3,
.new-way h3 {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.comparison-card p,
.comparison-list li,
.old-way li,
.new-way li {
    color: #4a5568 !important;
    text-shadow: none !important;
}

/* Testimonials section - NAVY text (off-white background) */
.testimonials-section h2,
.testimonials-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.testimonials-section .section-badge span {
    color: #6366f1 !important;
}

.testimonials-section .testimonial-card p,
.testimonials-section .testimonial-text,
.testimonials-section .testimonial-quote {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.testimonials-section .testimonial-card.featured .testimonial-quote {
    color: rgba(255, 255, 255, 0.4) !important;
}

.testimonials-section .testimonial-card.featured:hover .testimonial-quote {
    color: var(--violet) !important;
}

.testimonials-section .testimonial-author {
    color: #1a1a2e !important;
    font-weight: 600 !important;
}

.testimonials-section .testimonial-role {
    color: #64748b !important;
}

/* Scroll typography section - NAVY text (off-white background) */
.scroll-typography-section h2,
.scroll-typography-section .scroll-headline {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.scroll-typography-section p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

/* Why/Comparison section - NAVY text */
.why-section h2,
.why-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.why-section .section-badge span {
    color: #6366f1 !important;
}

.why-section p {
    color: #4a5568 !important;
}

/* Research section - NAVY text (white background) */
.research-section h2,
.research-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.research-section .section-badge span {
    color: #6366f1 !important;
}

.research-section p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

.research-section .research-card h3 {
    color: #1a1a2e !important;
}

.research-section .research-card p {
    color: #4a5568 !important;
}

/* FAQ section - NAVY text (white background) */
.faq-section h2,
.faq-section .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.faq-section .section-badge span {
    color: #6366f1 !important;
}

.faq-section .faq-question,
.faq-section summary {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.faq-section .faq-answer,
.faq-section details p {
    color: #4a5568 !important;
    text-shadow: none !important;
}

/* Final CTA section - NAVY text (off-white background) */
.final-cta h2,
.final-cta .section-title {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.final-cta > p,
.final-cta .section-subtitle {
    color: #64748b !important;
    text-shadow: none !important;
}

/* ========================================
   PRESERVE GRADIENT TEXT EVERYWHERE
   ======================================== */
.gradient-text,
.serif-italic.gradient-text,
h2 .gradient-text,
.section-title .gradient-text {
    background: linear-gradient(135deg, #7c5cfc 0%, #a855f7 33%, #ec4899 66%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: transparent !important;
    text-shadow: none !important;
}

/* ========================================
   LOGO BAR - Dark purple gradient with noise
   ======================================== */
.logo-bar {
    background: linear-gradient(180deg, 
        #3d2878 0%, 
        #2d1f69 15%,
        #1a1a5e 40%,
        #0e0e44 70%,
        #0a0a30 100%
    ) !important;
}

.logo-bar-label {
    color: rgba(255, 255, 255, 0.4) !important;
}

.logo-item {
    filter: none !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

.logo-item:hover {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ========================================
   NAVIGATION - Light text on dark
   ======================================== */
.nav {
    background: rgba(13, 10, 26, 0.95) !important;
    backdrop-filter: blur(20px) !important;
}

.nav-logo,
.nav-link {
    color: #ffffff !important;
}

.nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ========================================
   FOOTER - Light text on dark
   ======================================== */
footer {
    background: #0a0815 !important;
}

footer h4,
footer h5,
footer .footer-title {
    color: #ffffff !important;
}

footer p,
footer a,
footer li {
    color: rgba(255, 255, 255, 0.7) !important;
}

footer a:hover {
    color: #ffffff !important;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn-primary {
    color: #ffffff !important;
}

.btn-secondary {
    color: #1a1a2e !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.btn-secondary:hover {
    background: #f8fafc !important;
}

/* Dark section buttons */
.solution-section .btn-secondary,
.metrics-section .btn-secondary,
.hero .btn-secondary {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ========================================
   SCROLL TYPOGRAPHY SECTION FIXES
   ======================================== */
.scroll-typography-section .scroll-word {
    color: #1a1a2e !important;
    text-shadow: none !important;
}

.scroll-typography-section .scroll-word.gradient {
    background: linear-gradient(135deg, #7c5cfc 0%, #a855f7 33%, #ec4899 66%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.scroll-typography-section .scroll-intro-label {
    color: #6366f1 !important;
}

.scroll-typography-section .scroll-image-label span {
    color: #1a1a2e !important;
}

/* ========================================
   LOGO BAR SECTION - Dark Premium Style
   Seamless transition from hero section
   ======================================== */
.logo-bar {
    padding: 80px 48px 100px !important;
    background: #0d0a1a !important;
    background-image: 
        radial-gradient(ellipse 800px 400px at 0% 50%, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
        radial-gradient(ellipse 600px 350px at 100% 50%, rgba(236, 72, 153, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 500px 300px at 50% 100%, rgba(124, 92, 252, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 400px 200px at 50% 0%, rgba(124, 92, 252, 0.12) 0%, transparent 70%),
        linear-gradient(180deg, #0d0a1a 0%, #0a0815 50%, #080610 100%) !important;
    position: relative;
    overflow: hidden;
}

.logo-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

.logo-bar-label,
.logo-bar-title {
    color: rgba(255, 255, 255, 0.35) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin-bottom: 40px !important;
    position: relative;
    z-index: 1;
}

.logo-grid {
    position: relative;
    z-index: 1;
}

.logo-item {
    color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
    transition: color 0.3s ease, transform 0.3s ease !important;
}

.logo-item:hover {
    color: rgba(255, 255, 255, 0.7) !important;
    transform: translateY(-2px);
}

/* ========================================
   RESEARCH STATS SECTION - Horizontal Swiper
   ======================================== */
.research-stats-section {
    padding: 100px 0 140px;
    background: #0d0a1a;
    background-image: 
        radial-gradient(ellipse 600px 400px at 15% 30%, rgba(139, 92, 246, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse 500px 350px at 85% 40%, rgba(168, 85, 247, 0.1) 0%, transparent 55%),
        radial-gradient(ellipse 400px 300px at 50% 80%, rgba(124, 92, 252, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, #080610 0%, #0d0a1a 30%, #0d0a1a 70%, #0a0815 100%);
    position: relative;
    overflow: hidden;
}

.research-stats-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.035;
    pointer-events: none;
    z-index: 0;
}

.research-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    padding: 0 48px;
}

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

.research-stats-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.9);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 16px;
}

.research-stats-title {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.research-stats-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
}

/* Horizontal Swiper Gallery */
.stats-gallery {
    position: relative;
    width: 100%;
    padding: 40px 0;
    overflow: visible;
}

.stats-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 420px;
}

.stats-cards li {
    position: absolute;
    width: 320px;
    height: 380px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

/* Card positions - 5 visible cards */
.stats-cards li[data-position="center"] {
    z-index: 5;
    transform: translateX(0) scale(1);
    opacity: 1;
}

.stats-cards li[data-position="left-1"] {
    z-index: 4;
    transform: translateX(-340px) scale(0.85);
    opacity: 0.7;
}

.stats-cards li[data-position="left-2"] {
    z-index: 3;
    transform: translateX(-580px) scale(0.7);
    opacity: 0.4;
}

.stats-cards li[data-position="right-1"] {
    z-index: 4;
    transform: translateX(340px) scale(0.85);
    opacity: 0.7;
}

.stats-cards li[data-position="right-2"] {
    z-index: 3;
    transform: translateX(580px) scale(0.7);
    opacity: 0.4;
}

.stats-cards li[data-position="hidden"] {
    z-index: 1;
    transform: translateX(0) scale(0.5);
    opacity: 0;
    pointer-events: none;
}

/* Card inner styling */
.stats-card-inner {
    background: rgba(20, 15, 35, 0.85);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 40px 35px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card 1 - Purple/Violet gradient */
.stats-cards li[data-index="0"] .stats-card-inner {
    border: 2px solid;
    border-image: linear-gradient(135deg, #8b5cf6, #6366f1, #818cf8) 1;
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #8b5cf6, #6366f1, #818cf8) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="0"] .research-stat-number {
    background: linear-gradient(135deg, #a78bfa 0%, #818cf8 50%, #6366f1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 2 - Orange/Peach gradient */
.stats-cards li[data-index="1"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #f97316, #fb923c, #fdba74) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="1"] .research-stat-number {
    background: linear-gradient(135deg, #fdba74 0%, #fb923c 50%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 3 - Teal/Cyan gradient */
.stats-cards li[data-index="2"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #06b6d4, #22d3d1, #67e8f9) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="2"] .research-stat-number {
    background: linear-gradient(135deg, #67e8f9 0%, #22d3d1 50%, #06b6d4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 4 - Pink/Rose gradient */
.stats-cards li[data-index="3"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #ec4899, #f472b6, #f9a8d4) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="3"] .research-stat-number {
    background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 5 - Green/Emerald gradient */
.stats-cards li[data-index="4"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #10b981, #34d399, #6ee7b7) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="4"] .research-stat-number {
    background: linear-gradient(135deg, #6ee7b7 0%, #34d399 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 6 - Yellow/Amber gradient */
.stats-cards li[data-index="5"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #f59e0b, #fbbf24, #fcd34d) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="5"] .research-stat-number {
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 7 - Blue/Sky gradient */
.stats-cards li[data-index="6"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #3b82f6, #60a5fa, #93c5fd) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="6"] .research-stat-number {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 50%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card 8 - Red/Coral gradient */
.stats-cards li[data-index="7"] .stats-card-inner {
    background: linear-gradient(rgba(20, 15, 35, 0.95), rgba(20, 15, 35, 0.95)) padding-box,
                linear-gradient(135deg, #ef4444, #f87171, #fca5a5) border-box;
    border-radius: 20px;
    border: 2px solid transparent;
}
.stats-cards li[data-index="7"] .research-stat-number {
    background: linear-gradient(135deg, #fca5a5 0%, #f87171 50%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Active card glow effect - match border color */
.stats-cards li[data-position="center"][data-index="0"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(139, 92, 246, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="1"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(249, 115, 22, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="2"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(6, 182, 212, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="3"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(236, 72, 153, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="4"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(16, 185, 129, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="5"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(245, 158, 11, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="6"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(59, 130, 246, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.stats-cards li[data-position="center"][data-index="7"] .stats-card-inner {
    box-shadow: 
        0 0 40px rgba(239, 68, 68, 0.3),
        0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.stats-card-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.15) 50%, transparent 100%);
}

.research-stat-number {
    font-size: clamp(56px, 8vw, 80px);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 20px;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
}

.research-stat-text {
    font-size: 17px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    max-width: 280px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Navigation */
.stats-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

.stats-actions button {
    padding: 16px 36px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    transition: all 0.3s ease;
    letter-spacing: 0.3px;
}

.stats-actions button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.stats-actions button:active {
    transform: scale(0.98);
}

/* Remove old dots styling, keep for indicator */
.stats-dots {
    display: none;
}

.research-stat-source {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    font-style: italic;
    margin-top: 50px;
    padding: 0 48px;
}

@media (max-width: 1200px) {
    .stats-cards li {
        width: 280px;
        height: 340px;
    }
    
    .stats-cards li[data-position="left-1"] {
        transform: translateX(-300px) scale(0.85);
    }
    
    .stats-cards li[data-position="left-2"] {
        transform: translateX(-500px) scale(0.7);
    }
    
    .stats-cards li[data-position="right-1"] {
        transform: translateX(300px) scale(0.85);
    }
    
    .stats-cards li[data-position="right-2"] {
        transform: translateX(500px) scale(0.7);
    }
}

@media (max-width: 900px) {
    .stats-cards {
        height: 360px;
    }
    
    .stats-cards li {
        width: 260px;
        height: 320px;
    }
    
    .stats-cards li[data-position="left-1"] {
        transform: translateX(-200px) scale(0.8);
    }
    
    .stats-cards li[data-position="left-2"] {
        transform: translateX(-320px) scale(0.65);
        opacity: 0.25;
    }
    
    .stats-cards li[data-position="right-1"] {
        transform: translateX(200px) scale(0.8);
    }
    
    .stats-cards li[data-position="right-2"] {
        transform: translateX(320px) scale(0.65);
        opacity: 0.25;
    }
    
    .stats-card-inner {
        padding: 35px 25px;
    }
    
    .research-stat-text {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .research-stats-section {
        padding: 80px 0 100px;
    }
    
    .testimonial-stats-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .testimonial-stat-card {
        padding: 24px 20px;
    }
    
    .testimonial-stat-value {
        font-size: 40px;
    }
    
    .stats-cards {
        height: 320px;
    }
    
    .stats-cards li {
        width: 240px;
        height: 290px;
    }
    
    .stats-cards li[data-position="left-1"],
    .stats-cards li[data-position="right-1"] {
        transform: translateX(-140px) scale(0.75);
        opacity: 0.5;
    }
    
    .stats-cards li[data-position="right-1"] {
        transform: translateX(140px) scale(0.75);
    }
    
    .stats-cards li[data-position="left-2"],
    .stats-cards li[data-position="right-2"] {
        opacity: 0;
    }
    
    .stats-actions {
        gap: 12px;
    }
    
    .stats-actions button {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* ========================================
   RESEARCH SECTION LIGHT MODE
   ======================================== */
.research-section .research-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(245, 243, 255, 0.98) 50%, rgba(240, 253, 250, 0.95) 100%) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
}

.research-section .research-card h3 {
    color: var(--navy) !important;
}

.research-section .research-card p {
    color: var(--muted) !important;
}

.research-section .research-limited {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%) !important;
    border: none !important;
}

.research-section .research-stat-value {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-pink) 50%, var(--accent-orange) 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.research-section .research-stat-label {
    color: var(--muted) !important;
}

/* ========================================
   INVISIBLE WIDGET FIXES (dark widget)
   ======================================== */
.invisible-counter-widget {
    background: rgba(13, 10, 26, 0.95) !important;
    color: #ffffff !important;
}

.invisible-counter-widget .widget-label,
.invisible-counter-widget .widget-title,
.invisible-counter-widget .widget-number,
.invisible-counter-widget .widget-suffix,
.invisible-counter-widget .widget-cta {
    color: #ffffff !important;
}

/* ========================================
   ENSURE SERIF ITALIC GRADIENT WORKS
   ======================================== */
.serif-italic {
    font-family: 'Instrument Serif', Georgia, serif !important;
    font-style: italic !important;
}

h2 .serif-italic,
.section-title .serif-italic {
    background: linear-gradient(135deg, #7c5cfc 0%, #a855f7 33%, #ec4899 66%, #f97316 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ========================================
   HERO BADGE - Glassmorphism Style
   ======================================== */
.hero .hero-content .hero-badge {
    background: rgba(255, 255, 255, 0.08) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.hero .hero-content .hero-badge span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.hero .hero-content .hero-badge .hero-badge-arrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   HERO NOTE FIX - Visible on dark background
   ======================================== */
.hero .hero-content .hero-note {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* ========================================
   FINAL CTA FIX - Dark text on light background + 100px padding
   ======================================== */
section.final-cta .section-container > h2 {
    color: #1a1a2e !important;
    -webkit-text-fill-color: #1a1a2e !important;
    text-shadow: none !important;
}

section.final-cta .section-container > p {
    color: #4a5568 !important;
    -webkit-text-fill-color: #4a5568 !important;
    text-shadow: none !important;
    padding-bottom: 100px !important;
}

        </style>