*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
        
        :root {
            --promo-offset: 60px;
            --white: #ffffff;
            --off-white: #fcfcfd;
            --soft-gray: #f5f7fb;
            --light-blue: #4f8cff;
            --electric-purple: #7b61ff;
            --cyan: #00c2ff;
            --emerald: #10b981;
            --amber: #f59e0b;
            --rose: #f43f5e;
            --dark: #0f172a;
            --muted: #64748b;
            --border: rgba(79, 140, 255, 0.1);
            --artify-blue: #1173d4;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
            --radius-xl: 28px;
            --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
        }

        html { scroll-behavior: auto; }

		.promo-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1200;
            display: none;
            align-items: center;
            justify-content: center;
            min-height: 60px;
            padding: 14px 18px;
            background: linear-gradient(135deg, #0f172a, #1d4ed8, #7c3aed);
            color: #fff;
            box-shadow: 0 8px 24px rgba(30, 64, 175, 0.22);
            letter-spacing: 0.02em;
        }

        .promo-bar.visible {
            display: flex;
        }

        .promo-bar .promo-content {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
            max-width: 1180px;
            text-align: center;
        }

        .promo-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.25);
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .promo-text-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
            overflow: hidden;
            gap: 8px;
        }

        .promo-gift {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #fef3c7;
            line-height: 1;
        }

        .promo-text {
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            white-space: nowrap;
            transition: opacity 0.25s ease;
        }

        .promo-close {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.12);
            color: #fff;
            font-size: 18px;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
        }

        .promo-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        @media (max-width: 768px) {
            .promo-bar {
                min-height: 54px;
                padding: 12px 50px 12px 14px;
            }

            .promo-bar .promo-content {
                gap: 10px;
            }

            .promo-pill {
                font-size: 9px;
                padding: 3px 8px;
            }

            .promo-text-wrap {
                min-height: 24px;
                gap: 6px;
            }

            .promo-gift {
                font-size: 14px;
            }

            .promo-text {
                font-size: 13px;
            }

            .promo-close {
                right: 12px;
                width: 22px;
                height: 22px;
                font-size: 16px;
            }
        }

        @media (max-width: 500px) {
            :root {
                --promo-offset: 50px;
            }

            .promo-bar {
                min-height: 50px;
                padding: 10px 46px 10px 12px;
            }

            .promo-bar .promo-content {
                gap: 8px;
                flex-direction: row;
                justify-content: flex-start;
            }

            .promo-pill {
                display: none;
            }

            .promo-text-wrap {
                min-height: 22px;
                gap: 6px;
                flex: 1;
                justify-content: flex-start;
            }

            .promo-gift {
                font-size: 13px;
                flex-shrink: 0;
            }

            .promo-text {
                font-size: 12px;
                white-space: normal;
            }

            .promo-close {
                right: 10px;
                width: 20px;
                height: 20px;
                font-size: 14px;
            }

            body {
                padding-top: var(--promo-offset, 0px);
            }
        }

        body {
           font-family: 'Inter', -apple-system, sans-serif;
            background: var(--white);
            color: var(--dark);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            line-height: 1.6;
            padding-top: var(--promo-offset, 0px);
            transition: padding-top 0.3s ease;
        }

        h1, h2, h3, h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }
        a { text-decoration: none; color: inherit; }
        button { font-family: inherit; cursor: pointer; border: none; background: none; }

        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: var(--soft-gray); }
        ::-webkit-scrollbar-thumb { background: rgba(79, 140, 255, 0.3); border-radius: 3px; }

        .gradient-text {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple), var(--cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ============================================= */
        /* NAVBAR                                        */
        /* ============================================= */
        .navbar {
            position: fixed;
            top: var(--promo-offset, 60px);
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 16px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: all 0.4s var(--ease-premium);
        }

        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(20px) saturate(180%);
            padding: 12px 40px;
            box-shadow: 0 1px 20px rgba(15, 23, 42, 0.04);
        }

        .nav-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; z-index: 1001; }

        .nav-logo-img {
            height: 38px;
            width: auto;
            display: block;
            transition: transform 0.3s var(--ease-premium);
        }

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

        .nav-logo-text {
            font-family: 'Space Grotesk';
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -0.5px;
        }

        .nav-center { display: flex; align-items: center; gap: 4px; }

        .nav-link {
            color: var(--muted);
			color: rgb(60,60,60);
            font-size: 13px;
            font-weight: 500;
            padding: 10px 16px;
            border-radius: var(--radius-md);
            transition: all 0.3s var(--ease-premium);
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            position: relative;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%) scaleX(0);
            width: 20px;
            height: 2px;
            background: var(--light-blue);
            border-radius: 1px;
            transition: transform 0.3s var(--ease-premium);
        }

        .nav-link:hover, .nav-link.active { color: var(--light-blue); background: rgba(79, 140, 255, 0.06); }
        .nav-link.active::after { transform: translateX(-50%) scaleX(1); }
        .nav-link i.fa-chevron-down { font-size: 10px; transition: transform 0.3s; }
        .nav-item.dropdown-open .nav-link i.fa-chevron-down { transform: rotate(180deg); }

        /* Mega Dropdown */
        .mega-dropdown {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(24px);
            border: 1px solid rgba(79, 140, 255, 0.1);
            border-radius: var(--radius-lg);
            padding: 20px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
            width: 600px;
            transition: all 0.3s var(--ease-premium);
            z-index: 100;
        }

        .nav-item.dropdown-open .mega-dropdown {
            opacity: 1;
            visibility: visible;
            pointer-events: all;
            transform: translateX(-50%) translateY(0);
        }

        .mega-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
        .mega-grid-single { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

        .mega-item {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: all 0.3s var(--ease-premium);
            transform: translateX(0);
        }

        .mega-item:hover {
            background: rgba(79, 140, 255, 0.06);
            transform: translateX(4px);
        }

        .mega-item.active {
            background: rgba(79, 140, 255, 0.12);
            border: 1px solid rgba(79, 140, 255, 0.18);
        }

        .mega-item.active .mega-text-title {
            color: var(--light-blue);
        }

        .mega-icon {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
        }

        .mega-text-title { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
        .mega-text-desc { font-size: 11px; color: var(--muted); line-height: 1.4; }

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

        .btn-primary {
            padding: 12px 24px;
            /* border-radius: var(--radius-md); */
            background: linear-gradient(135deg, #ff6b6b, #f43f79, #7dd3fc);
            color: white;
            font-size: 14px;
            font-weight: 400;
            transition: all 0.3s var(--ease-premium);
            box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }

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

        .btn-primary:hover::before { left: 100%; }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(79, 140, 255, 0.4);
        }

        .trial-note {
            flex-basis: 100%;
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
            font-size: 14px;
            font-weight: 800;
            line-height: 1.6;
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .hero-buttons.trial-cta {
            flex-direction: column;
            align-items: flex-start;
            gap: 14px;
        }

        .payroll-content .trial-note,
        .simple-hero-content .trial-note,
        .ip-cta-content .trial-note,
        .pricing-cta-banner .trial-note,
        .anim-item[style*="justify-content: center"] .trial-note {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .btn-secondary {
            padding: 12px 24px;
            border: 1.5px solid rgba(15, 23, 42, 0.1);
            background: var(--white);
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s var(--ease-premium);
            white-space: nowrap;
        }

        .btn-secondary:hover {
          	border-image: linear-gradient(135deg, #ff6b6b, #f43f79, #7dd3fc) 1;
            color: #f43f79;
            background: rgba(244, 63, 121, 0.04);
            transform: translateY(-1px);
        }

        .nav-mobile-toggle { display: none; font-size: 24px; padding: 8px; color: var(--dark); }

        /* ============================================= */
        /* MOBILE MENU                                   */
        /* ============================================= */
        .mobile-menu-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(8px);
            z-index: 2001;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.4s;
        }

        .mobile-menu-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }

        .mobile-menu-panel {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            width: 320px;
            background: var(--white);
            z-index: 2002;
            transform: translateX(100%);
            transition: transform 0.4s var(--ease-premium);
            padding: 24px;
            overflow-y: auto;
        }

        .mobile-menu-overlay.active + .mobile-menu-panel,
        .mobile-menu-panel.active { transform: translateX(0); }

        .mobile-menu-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }

        .mobile-menu-close {
            width: 36px;
            height: 36px;
            border-radius: var(--radius-md);
            background: var(--soft-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            transition: all 0.3s;
        }

        .mobile-menu-close:hover { background: rgba(244, 63, 94, 0.1); color: var(--rose); }

        .mobile-nav-section { margin-bottom: 24px; }

        .mobile-nav-section-title {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--muted);
            margin-bottom: 12px;
            padding-left: 4px;
        }

        .mobile-nav-link {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            border-radius: var(--radius-md);
            font-size: 15px;
            font-weight: 500;
            transition: all 0.3s;
            cursor: pointer;
            width: 100%;
        }

        .mobile-nav-link:hover, .mobile-nav-link.active { background: rgba(79, 140, 255, 0.06); color: var(--light-blue); }
        .mobile-nav-link i { width: 20px; text-align: center; color: var(--muted); font-size: 14px; }

        /* Page Transition */
        .page-transition-overlay {
            position: fixed;
            inset: 0;
            background: var(--white);
            z-index: 9000;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .page-transition-overlay.active { opacity: 1; }

        .page-transition-overlay.active::after {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -26px 0 0 -26px;
            width: 52px;
            height: 52px;
            border: 4px solid #e8eafe;
            border-top-color: #7657f6;
            border-right-color: #f24e79;
            border-radius: 50%;
            content: '';
            animation: referenceDataSpin 0.9s linear infinite;
        }

        @media (prefers-reduced-motion: reduce) {
            .page-transition-overlay.active::after { animation-duration: 3s; }
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 23, 42, 0.5);
            backdrop-filter: blur(8px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.4s;
            padding: 20px;
        }

        .modal-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }

        .modal-box {
            background: var(--white);
            border-radius: var(--radius-xl);
            padding: 48px 40px;
            width: 440px;
            max-width: 100%;
            max-height: 95vh;
            overflow-y: auto;
            box-shadow: 0 40px 100px rgba(15, 23, 42, 0.15);
            transform: translateY(20px) scale(0.96);
            opacity: 0;
            transition: all 0.4s var(--ease-premium);
            position: relative;
        }

        .modal-overlay.active .modal-box { transform: translateY(0) scale(1); opacity: 1; }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 32px;
            height: 32px;
            border-radius: var(--radius-sm);
            background: var(--soft-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--muted);
            font-size: 14px;
            transition: all 0.3s;
        }

        .modal-close:hover { background: rgba(244, 63, 94, 0.1); color: var(--rose); }

        .modal-title { font-size: 24px; font-weight: 800; margin-bottom: 8px; }
        .modal-subtitle { font-size: 14px; color: var(--muted); margin-bottom: 28px; }
        .form-group { margin-bottom: 18px; }

        .form-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--dark);
            margin-bottom: 6px;
            display: block;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1.5px solid rgba(15, 23, 42, 0.1);
            border-radius: var(--radius-md);
            font-size: 14px;
            font-family: inherit;
            background: var(--soft-gray);
            transition: all 0.3s;
            outline: none;
        }

        .form-input:focus {
            border-color: var(--light-blue);
            box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.1);
            background: var(--white);
        }

        textarea.form-input { resize: vertical; min-height: 100px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

        .form-section-heading {
            font-size: 18px;
            font-weight: 800;
            margin: 24px 0 18px;
            color: var(--dark);
        }

         .tag-input-wrap {
            min-height: 48px;
            padding: 8px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
        }

        .branch-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.08);
            color: var(--light-blue);
            font-size: 12px;
            font-weight: 700;
        }

        .branch-tag button {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(79, 140, 255, 0.14);
            color: var(--light-blue);
            font-size: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .branch-tag-input {
            flex: 1;
            min-width: 160px;
            border: 0;
            outline: 0;
            padding: 6px;
            font: inherit;
            color: var(--dark);
            background: transparent;
        }

        .form-submit {
            width: 100%;
            padding: 14px;
            /* border-radius: var(--radius-md); */
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            color: white;
            font-size: 15px;
            font-weight: 700;
            transition: all 0.3s;
            box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
            margin-top: 6px;
        }

        .form-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(79, 140, 255, 0.4); }

        .form-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 20px 0;
            color: var(--muted);
            font-size: 12px;
        }

        .form-divider::before, .form-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(15, 23, 42, 0.08);
        }

        .social-btns { display: flex; gap: 10px; }

        .social-btn {
            flex: 1;
            padding: 10px;
            border: 1.5px solid rgba(15, 23, 42, 0.08);
            border-radius: var(--radius-md);
            background: var(--white);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.3s;
        }

        .social-btn:hover { border-color: rgba(79, 140, 255, 0.2); box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06); }

        /* Phone input with country code */
        .phone-input-group {
            display: flex;
            gap: 8px;
        }

        .country-code-select {
            width: 110px;
            padding: 12px 12px;
            border: 1.5px solid rgba(15, 23, 42, 0.1);
            border-radius: var(--radius-md);
            font-size: 14px;
            font-family: inherit;
            background: var(--soft-gray);
            transition: all 0.3s;
            outline: none;
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            padding-right: 30px;
        }

        .country-code-select:focus {
            border-color: var(--light-blue);
            box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.1);
            background-color: var(--white);
        }

        .phone-number-input {
            flex: 1;
            min-width: 0;
        }

        /* Contact form section top margin fix */
        .hero-form-premium + .simple-section,
        .section-after-hero {
            padding-top: 0px !important;
        }

        /* ============================================= */
        /* RESELLER DEMO PAGE                           */
        /* ============================================= */
        .reseller-demo-page {
            background: var(--white);
            color: var(--dark);
        }

        .reseller-demo-page .btn-primary {
            padding: 12px 24px;
            /* border-radius: var(--radius-md); */
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            color: white;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s var(--ease-premium);
            box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            white-space: nowrap;
        }

        .reseller-demo-page .btn-secondary {
            padding: 12px 24px;
            border: 1.5px solid rgba(15, 23, 42, 0.1);
            /* border-radius: var(--radius-md); */
            background: var(--white);
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s var(--ease-premium);
            white-space: nowrap;
        }

        .reseller-demo-page .btn-primary:hover,
        .reseller-demo-page .btn-secondary:hover {
            transform: translateY(-2px);
        }

        .reseller-demo-page .hero-reseller {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 140px 40px 100px;
            background: linear-gradient(135deg, #f0f4ff 0%, #f5f3ff 50%, #f0fdfa 100%);
        }

        .reseller-demo-page .hero-bg { position: absolute; inset: 0; pointer-events: none; }

        .reseller-demo-page .hero-mesh {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            background:
                radial-gradient(ellipse 600px 400px at 30% 40%, rgba(123, 97, 255, 0.08), transparent),
                radial-gradient(ellipse 500px 500px at 70% 30%, rgba(79, 140, 255, 0.06), transparent),
                radial-gradient(ellipse 400px 300px at 50% 80%, rgba(0, 194, 255, 0.05), transparent);
            animation: resellerMeshMove 25s ease-in-out infinite;
        }

        @keyframes resellerMeshMove {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(2%, -1%) scale(1.02); }
            66% { transform: translate(-1%, 2%) scale(0.98); }
        }

        .reseller-demo-page .hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: resellerOrbFloat 12s ease-in-out infinite;
        }

        .reseller-demo-page .hero-orb-1 { width: 350px; height: 350px; top: 10%; left: 10%; background: rgba(123, 97, 255, 0.15); }
        .reseller-demo-page .hero-orb-2 { width: 280px; height: 280px; top: 50%; right: 8%; background: rgba(79, 140, 255, 0.12); animation-delay: -4s; }
        .reseller-demo-page .hero-orb-3 { width: 220px; height: 220px; bottom: 15%; left: 35%; background: rgba(0, 194, 255, 0.1); animation-delay: -8s; }

        @keyframes resellerOrbFloat {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-30px) translateX(15px); }
            50% { transform: translateY(-15px) translateX(-15px); }
            75% { transform: translateY(-45px) translateX(8px); }
        }

        .reseller-demo-page .hero-content {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .reseller-demo-page .hero-left {
            max-width: 640px;
            text-align: left;
        }

        .reseller-demo-page .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px 8px 10px;
            border-radius: 100px;
            background: rgba(123, 97, 255, 0.06);
            border: 1px solid rgba(123, 97, 255, 0.15);
            font-size: 13px;
            color: var(--electric-purple);
            font-weight: 500;
            margin-bottom: 28px;
        }

        .reseller-demo-page .hero-badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--electric-purple);
            animation: resellerPulse 2s ease-in-out infinite;
        }

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

        .reseller-demo-page .hero-title {
            font-size: clamp(44px, 5.5vw, 68px);
            font-weight: 800;
            letter-spacing: -2.5px;
            color: var(--dark);
            margin-bottom: 24px;
        }

        .reseller-demo-page .hero-subtitle {
            font-size: 18px;
            line-height: 1.75;
            color: var(--muted);
            margin-bottom: 22px;
            max-width: none;
        }

        .reseller-demo-page .hero-module-orbit {
            width: min(100%, 430px);
            margin: 8px 0 26px;
            position: relative;
            isolation: isolate;
            perspective: 1400px;
            --orbit-radius: clamp(98px, 18vw, 146px);
            --orbit-duration: 34s;
            --orbit-pan-x: 0px;
            --orbit-pan-y: 0px;
            --orbit-tilt-x: 0deg;
            --orbit-tilt-y: 0deg;
        }

        .reseller-demo-page .hero-module-orbit::before {
            content: '';
            position: absolute;
            inset: -16%;
            background:
                radial-gradient(circle at 50% 50%, rgba(123, 97, 255, 0.12), transparent 34%),
                radial-gradient(circle at 35% 35%, rgba(0, 194, 255, 0.12), transparent 24%),
                radial-gradient(circle at 68% 72%, rgba(79, 140, 255, 0.1), transparent 26%);
            filter: blur(18px);
            opacity: 0.9;
            z-index: -3;
            animation: resellerOrbitAura 14s ease-in-out infinite;
        }

        @keyframes resellerOrbitAura {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.04) rotate(4deg); }
        }

        .reseller-demo-page .module-orbit-ambient {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            background:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.74) 0 18%, rgba(255, 255, 255, 0.18) 18% 35%, transparent 35% 100%),
                conic-gradient(from 0deg, rgba(123, 97, 255, 0.16), rgba(0, 194, 255, 0.08), rgba(79, 140, 255, 0.14), rgba(123, 97, 255, 0.16));
            filter: blur(10px);
            opacity: 0.9;
            animation: resellerAmbientSpin 22s linear infinite;
            pointer-events: none;
        }

        @keyframes resellerAmbientSpin {
            to { transform: rotate(360deg); }
        }

        .reseller-demo-page .module-orbit-shell {
            position: relative;
            width: 100%;
            aspect-ratio: 1;
            display: grid;
            place-items: center;
            transform: perspective(1400px) translate3d(var(--orbit-pan-x), var(--orbit-pan-y), 0) rotateX(var(--orbit-tilt-y)) rotateY(var(--orbit-tilt-x));
            animation: resellerOrbitSpin var(--orbit-duration) linear infinite;
            filter: drop-shadow(0 22px 48px rgba(79, 140, 255, 0.14));
            will-change: transform;
        }

        .reseller-demo-page .module-orbit-shell::before,
        .reseller-demo-page .module-orbit-shell::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
        }

        .reseller-demo-page .module-orbit-shell::before {
            inset: 9%;
            background:
                radial-gradient(circle at center, rgba(255, 255, 255, 0.45), transparent 48%),
                conic-gradient(from 180deg, rgba(123, 97, 255, 0.08), rgba(0, 194, 255, 0.18), rgba(123, 97, 255, 0.08));
            opacity: 0.85;
            filter: blur(1px);
            animation: resellerOrbitScan 12s linear infinite;
        }

        .reseller-demo-page .module-orbit-shell::after {
            inset: 18%;
            border: 1px solid rgba(123, 97, 255, 0.12);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.45),
                0 0 80px rgba(123, 97, 255, 0.08);
            animation: resellerOrbitPulseRing 8s ease-in-out infinite;
        }

        @keyframes resellerOrbitScan {
            to { transform: rotate(360deg); }
        }

        @keyframes resellerOrbitPulseRing {
            0%, 100% { transform: scale(1); opacity: 0.72; }
            50% { transform: scale(1.03); opacity: 1; }
        }

        .reseller-demo-page .module-orbit-network {
            position: absolute;
            inset: 2%;
            border-radius: 50%;
            background:
                repeating-conic-gradient(from 0deg, rgba(123, 97, 255, 0.18) 0deg 1deg, transparent 1deg 50deg),
                repeating-conic-gradient(from 25deg, rgba(0, 194, 255, 0.12) 0deg 1deg, transparent 1deg 50deg);
            mask: radial-gradient(circle at center, transparent 0 17%, #000 17% 56%, transparent 56% 100%);
            -webkit-mask: radial-gradient(circle at center, transparent 0 17%, #000 17% 56%, transparent 56% 100%);
            opacity: 0.35;
            animation: resellerNetworkSpin 28s linear infinite reverse;
            pointer-events: none;
        }

        @keyframes resellerNetworkSpin {
            to { transform: rotate(360deg); }
        }

        .reseller-demo-page .module-orbit-particles {
            position: absolute;
            inset: -8%;
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }

        .reseller-demo-page .module-orbit-particle {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--size);
            height: var(--size);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.96), var(--glow, rgba(123, 97, 255, 0.78)) 55%, transparent 76%);
            box-shadow: 0 0 16px var(--glow, rgba(123, 97, 255, 0.55));
            opacity: 0.65;
            animation: resellerParticleFloat var(--duration) ease-in-out infinite;
            animation-delay: var(--delay);
        }

        .reseller-demo-page .module-orbit-particle::after {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: inherit;
            background: radial-gradient(circle, var(--glow, rgba(123, 97, 255, 0.28)), transparent 70%);
            filter: blur(6px);
            opacity: 0.7;
        }

        @keyframes resellerParticleFloat {
            0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
            50% { transform: translate3d(0, -18px, 0) scale(1.12); }
        }

        .reseller-demo-page .module-orbit-link {
            position: absolute;
            left: 50%;
            top: 50%;
            width: calc(var(--orbit-radius) - 66px);
            height: 1px;
            transform-origin: 0 50%;
            transform: translateY(-50%) rotate(var(--angle));
            background: linear-gradient(90deg, rgba(123, 97, 255, 0.52), rgba(0, 194, 255, 0.1));
            opacity: 0.55;
            filter: drop-shadow(0 0 10px rgba(123, 97, 255, 0.18));
            pointer-events: none;
        }

        .reseller-demo-page .module-orbit-link::after {
            content: '';
            position: absolute;
            right: -7px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.96), rgba(0, 194, 255, 0.82));
            transform: translateY(-50%);
            box-shadow: 0 0 14px rgba(0, 194, 255, 0.42);
        }

        @keyframes resellerOrbitSpin {
            from {
                transform: translate3d(var(--orbit-pan-x), var(--orbit-pan-y), 0) rotateX(var(--orbit-tilt-y)) rotateY(var(--orbit-tilt-x)) rotate(0deg);
            }
            to {
                transform: translate3d(var(--orbit-pan-x), var(--orbit-pan-y), 0) rotateX(var(--orbit-tilt-y)) rotateY(var(--orbit-tilt-x)) rotate(360deg);
            }
        }

        .reseller-demo-page .module-orbit-ring {
            position: absolute;
            inset: 8%;
            border-radius: 50%;
            background:
                radial-gradient(circle at center, rgba(255, 255, 255, 0.94) 0 14%, rgba(255, 255, 255, 0.78) 14% 26%, rgba(255, 255, 255, 0.16) 26% 56%, transparent 56% 100%),
                radial-gradient(circle at 50% 50%, rgba(123, 97, 255, 0.12), rgba(79, 140, 255, 0.08) 44%, transparent 72%);
            border: 1px solid rgba(79, 140, 255, 0.14);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.36),
                0 20px 60px rgba(79, 140, 255, 0.08);
            backdrop-filter: blur(22px);
        }

        .reseller-demo-page .module-orbit-ring-primary {
            inset: 6%;
            animation: resellerRingSpin 26s linear infinite;
        }

        .reseller-demo-page .module-orbit-ring-secondary {
            inset: 16%;
            border-style: dashed;
            opacity: 0.78;
            animation: resellerRingSpin 38s linear infinite reverse;
        }

        .reseller-demo-page .module-orbit-ring-tertiary {
            inset: 28%;
            border-color: rgba(123, 97, 255, 0.16);
            box-shadow:
                inset 0 0 0 1px rgba(255, 255, 255, 0.38),
                0 0 0 1px rgba(255, 255, 255, 0.2),
                0 20px 60px rgba(79, 140, 255, 0.06);
            animation: resellerRingPulse 7s ease-in-out infinite;
        }

        @keyframes resellerRingSpin {
            to { transform: rotate(360deg); }
        }

        @keyframes resellerRingPulse {
            0%, 100% { transform: scale(1); opacity: 0.82; }
            50% { transform: scale(1.035); opacity: 1; }
        }

        .reseller-demo-page .module-orbit-ring::before,
        .reseller-demo-page .module-orbit-ring::after {
            content: '';
            position: absolute;
            inset: 10%;
            border-radius: 50%;
            border: 1px solid rgba(79, 140, 255, 0.08);
        }

        .reseller-demo-page .module-orbit-ring::after {
            inset: 22%;
            border-style: dashed;
            opacity: 0.7;
        }

        .reseller-demo-page .module-orbit-center {
            position: absolute;
            width: clamp(104px, 18vw, 140px);
            aspect-ratio: 1;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 255, 0.92)),
                linear-gradient(135deg, rgba(79, 140, 255, 0.18), rgba(123, 97, 255, 0.16), rgba(0, 194, 255, 0.12));
            border: 1px solid rgba(79, 140, 255, 0.14);
            box-shadow:
                0 18px 48px rgba(15, 23, 42, 0.10),
                inset 0 0 0 1px rgba(255, 255, 255, 0.75);
            z-index: 2;
            text-align: center;
            animation: resellerCoreHover 6.5s ease-in-out infinite;
        }

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

        .reseller-demo-page .module-orbit-center::before {
            content: '';
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(123, 97, 255, 0.14), transparent 68%);
            z-index: -1;
            filter: blur(8px);
        }

        .reseller-demo-page .module-orbit-center::after {
            content: '';
            position: absolute;
            inset: 10%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(123, 97, 255, 0.16), transparent 68%);
            filter: blur(12px);
            animation: resellerCorePulse 3.6s ease-in-out infinite;
        }

        @keyframes resellerCorePulse {
            0%, 100% { transform: scale(0.96); opacity: 0.7; }
            50% { transform: scale(1.08); opacity: 1; }
        }

        .reseller-demo-page .module-orbit-center img {
            width: 58px;
            height: auto;
            display: block;
            filter: drop-shadow(0 6px 18px rgba(79, 140, 255, 0.18));
        }

        .reseller-demo-page .module-orbit-center span {
            font-family: 'Space Grotesk';
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--dark);
        }

        .reseller-demo-page .module-orbit-node {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            transform: rotate(var(--angle)) translateY(calc(-1 * var(--orbit-radius)));
            transform-origin: center center;
            will-change: transform;
        }

        .reseller-demo-page .module-orbit-chip {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--chip-start, rgba(15, 23, 42, 0.88)), var(--chip-end, rgba(79, 140, 255, 0.3)));
            border: 1px solid var(--chip-border, rgba(255, 255, 255, 0.28));
            color: var(--white);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            box-shadow:
                0 12px 28px var(--chip-shadow, rgba(15, 23, 42, 0.18)),
                inset 0 0 0 1px rgba(255, 255, 255, 0.12);
            transition: transform 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium), border-color 0.25s var(--ease-premium);
            backdrop-filter: blur(14px);
            animation: resellerOrbitCounterSpin var(--orbit-duration) linear infinite reverse;
            will-change: transform;
            text-shadow: 0 1px 1px rgba(15, 23, 42, 0.25);
            --chip-hover-scale: 1;
        }

        @keyframes resellerOrbitCounterSpin {
            from { transform: rotate(0deg) scale(var(--chip-hover-scale, 1)); }
            to { transform: rotate(360deg) scale(var(--chip-hover-scale, 1)); }
        }

        .reseller-demo-page .module-orbit-chip i {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.98);
        }

        .reseller-demo-page .module-orbit-chip:hover {
            --chip-hover-scale: 1.08;
            box-shadow:
                0 16px 36px var(--chip-shadow, rgba(15, 23, 42, 0.22)),
                0 0 0 1px rgba(255, 255, 255, 0.16),
                0 0 40px var(--chip-glow, rgba(79, 140, 255, 0.3));
            border-color: var(--chip-border-hover, rgba(0, 194, 255, 0.38));
        }

        .reseller-demo-page .module-orbit-chip .chip-glow {
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(135deg, var(--chip-glow, rgba(79, 140, 255, 0.38)), rgba(255, 255, 255, 0.02));
            filter: blur(12px);
            opacity: 0.45;
            z-index: -1;
            transition: opacity 0.25s var(--ease-premium);
        }

        .reseller-demo-page .module-orbit-chip:hover .chip-glow { opacity: 0.75; }

        .reseller-demo-page .hero-buttons { display: flex; gap: 14px; justify-content: center; margin-top: 12px; margin-bottom: 24px; flex-wrap: wrap; }
        .reseller-demo-page .hero-right { position: relative; }
        .reseller-demo-page .hero-visual-stack {
            position: relative;
            height: 700px;
            overflow: visible;
            display: block;
        }

        .reseller-demo-page .floating-card {
            position: absolute;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.82)),
                linear-gradient(135deg, rgba(123, 97, 255, 0.08), rgba(0, 194, 255, 0.04));
            backdrop-filter: blur(18px) saturate(150%);
            border: 1px solid rgba(79, 140, 255, 0.12);
            border-radius: 18px;
            padding: 12px 14px;
            box-shadow: 0 16px 44px rgba(15, 23, 42, 0.08);
            z-index: 1;
            animation: resellerFloatCard 7.2s ease-in-out infinite;
            overflow: hidden;
            min-width: 138px;
            max-width: 156px;
            transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
        }

        .reseller-demo-page .floating-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), transparent 45%);
            opacity: 0.9;
            pointer-events: none;
        }

        .reseller-demo-page .floating-card::after {
            content: '';
            position: absolute;
            width: 120px;
            height: 120px;
            right: -36px;
            top: -46px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(123, 97, 255, 0.14), transparent 70%);
            filter: blur(10px);
            pointer-events: none;
        }

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

        .reseller-demo-page .floating-card:hover {
            transform: translateY(-3px) scale(1.01);
            box-shadow: 0 22px 50px rgba(79, 140, 255, 0.14);
        }

        .reseller-demo-page .fc-1 { top: 8px; right: 20px; width: 146px; --float-duration: 8.2s; --float-y: 8px; --float-x: 2px; }
        .reseller-demo-page .fc-2 { top: 96px; right: 180px; animation-delay: -1.8s; width: 144px; --float-duration: 9s; --float-y: 10px; --float-x: -2px; }
        .reseller-demo-page .fc-3 { top: 28px; right: 340px; animation-delay: -3.8s; width: 146px; --float-duration: 8.8s; --float-y: 9px; --float-x: 4px; }
        .reseller-demo-page .fc-4 { top: 228px; right: 20px; animation-delay: -0.8s; width: 146px; --float-duration: 9.2s; --float-y: 10px; --float-x: -3px; }
        .reseller-demo-page .fc-5 { top: 312px; right: 180px; animation-delay: -3s; width: 146px; --float-duration: 8.4s; --float-y: 8px; --float-x: 5px; }
        .reseller-demo-page .fc-6 { top: 248px; right: 340px; animation-delay: -2.4s; width: 146px; --float-duration: 9.1s; --float-y: 9px; --float-x: -2px; }
        .reseller-demo-page .fc-7 { top: 448px; right: 20px; animation-delay: -4.4s; width: 146px; --float-duration: 8.6s; --float-y: 8px; --float-x: 3px; }
        .reseller-demo-page .fc-8 { top: 532px; right: 180px; animation-delay: -5.2s; width: 146px; --float-duration: 9.4s; --float-y: 10px; --float-x: -4px; }
        .reseller-demo-page .fc-9 { top: 432px; right: 340px; animation-delay: -6s; width: 146px; --float-duration: 8.9s; --float-y: 9px; --float-x: 2px; }

        .reseller-demo-page .fc-icon {
            width: 30px;
            height: 30px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            margin-bottom: 10px;
        }

        .reseller-demo-page .fc-value {
            font-family: 'Space Grotesk';
            font-size: 20px;
            font-weight: 800;
            margin-bottom: 4px;
        }

        .reseller-demo-page .fc-label {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
        }

        .reseller-demo-page .fc-row { display: flex; align-items: center; gap: 12px; }
        .reseller-demo-page .fc-row .fc-icon { margin-bottom: 0; width: 28px; height: 28px; font-size: 11px; }
        .reseller-demo-page .fc-row .fc-text { font-size: 12px; font-weight: 600; }
        .reseller-demo-page .fc-row .fc-sub { font-size: 12px; color: var(--muted); }
        .reseller-demo-page .fc-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(123, 97, 255, 0.08);
            color: var(--electric-purple);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0;
        }
        .reseller-demo-page .fc-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 12px;
        }
        .reseller-demo-page .fc-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; line-height: 1.15; }
        .reseller-demo-page .fc-copy { font-size: 10px; color: var(--muted); line-height: 1.45; }

        .reseller-demo-page .section { padding: 100px 40px; position: relative; }
        .reseller-demo-page .section-alt { background: var(--soft-gray); }
        .reseller-demo-page .container { max-width: 1200px; margin: 0 auto; }
        .reseller-demo-page .container-narrow { max-width: 900px; margin: 0 auto; }
        .reseller-demo-page .section-header { text-align: center; margin-bottom: 60px; }

        .reseller-demo-page .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px 8px 10px;
            border-radius: 100px;
            background: rgba(79, 140, 255, 0.06);
            border: 1px solid rgba(79, 140, 255, 0.12);
            font-size: 13px;
            color: var(--light-blue);
            font-weight: 500;
            margin-bottom: 20px;
        }

        .reseller-demo-page .section-title {
            font-size: clamp(38px, 4.5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }

        .reseller-demo-page .section-subtitle {
            font-size: 18px;
            color: var(--muted);
            max-width: 760px;
            margin: 0 auto 12px;
            line-height: 1.7;
            text-align: center;
        }

        .reseller-demo-page .section-subtitle:last-child { margin-bottom: 0; }

        .reseller-demo-page .benefits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .reseller-demo-page .benefit-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: none;
            position: relative;
            overflow: hidden;
        }

        .reseller-demo-page .benefit-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--light-blue), var(--electric-purple));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s;
        }

        .reseller-demo-page .benefit-card:hover::before { transform: scaleX(0); }
        .reseller-demo-page .benefit-card:hover { transform: none; box-shadow: none; }

        .reseller-demo-page .benefit-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 20px;
        }

        .reseller-demo-page .benefit-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
        .reseller-demo-page .benefit-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }

        .reseller-demo-page .modules-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .reseller-demo-page .module-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 28px;
            transition: all 0.5s var(--ease-premium);
            text-align: center;
        }

        .reseller-demo-page .module-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1); }

        .reseller-demo-page .module-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 16px;
        }

        .reseller-demo-page .module-name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
        .reseller-demo-page .module-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

        .reseller-demo-page .features-row {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 16px;
        }

        .reseller-demo-page .feature-mini {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-md);
            padding: 24px;
            transition: all 0.4s var(--ease-premium);
            text-align: center;
        }

        .reseller-demo-page .feature-mini:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); }

        .reseller-demo-page .feature-mini-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            margin: 0 auto 12px;
        }

        .reseller-demo-page .feature-mini-name { font-size: 14px; font-weight: 600; margin-bottom: 6px; }
        .reseller-demo-page .feature-mini-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }

        .reseller-demo-page .steps-timeline {
            position: relative;
            padding-left: 60px;
        }

        .reseller-demo-page .steps-timeline::before {
            content: '';
            position: absolute;
            left: 24px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, var(--light-blue), var(--electric-purple), var(--cyan));
        }

        .reseller-demo-page .step-item {
            position: relative;
            margin-bottom: 48px;
        }

        .reseller-demo-page .step-item:last-child { margin-bottom: 0; }

        .reseller-demo-page .step-marker {
            position: absolute;
            left: -60px;
            top: 0;
            width: 50px;
            height: 50px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            font-weight: 700;
            z-index: 2;
        }

        .reseller-demo-page .step-content {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 28px 32px;
            transition: all 0.4s var(--ease-premium);
        }

        .reseller-demo-page .step-content:hover { transform: translateX(8px); box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08); }

        .reseller-demo-page .step-num {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .reseller-demo-page .step-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
        .reseller-demo-page .step-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }

        .reseller-demo-page .market-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .reseller-demo-page .market-card {
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 255, 0.88)),
                linear-gradient(135deg, rgba(123, 97, 255, 0.06), rgba(0, 194, 255, 0.04));
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 28px;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.4s var(--ease-premium);
            position: relative;
            overflow: hidden;
        }

        .reseller-demo-page .market-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 30% 20%, rgba(123, 97, 255, 0.08), transparent 38%);
            pointer-events: none;
        }

        .reseller-demo-page .market-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08); }

        .reseller-demo-page .market-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .reseller-demo-page .market-name { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
        .reseller-demo-page .market-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

        .reseller-demo-page .opportunity-shell {
            position: relative;
            border-radius: 34px;
            padding: 30px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 255, 0.86)),
                linear-gradient(135deg, rgba(123, 97, 255, 0.05), rgba(0, 194, 255, 0.03));
            border: 1px solid rgba(79, 140, 255, 0.1);
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
            overflow: hidden;
        }

        .reseller-demo-page .opportunity-shell::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent 0 49.5%, rgba(123, 97, 255, 0.05) 49.5% 50.5%, transparent 50.5% 100%),
                linear-gradient(0deg, transparent 0 49.5%, rgba(0, 194, 255, 0.05) 49.5% 50.5%, transparent 50.5% 100%);
            background-size: 120px 120px;
            opacity: 0.3;
            pointer-events: none;
        }

        .reseller-demo-page .opportunity-editorial {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1fr;
            gap: 24px;
            align-items: start;
        }

        .reseller-demo-page .opportunity-lead {
            position: relative;
            padding: 26px;
            border-radius: 28px;
            background: linear-gradient(135deg, rgba(123, 97, 255, 0.12), rgba(0, 194, 255, 0.08), rgba(255, 255, 255, 0.88));
            border: 1px solid rgba(123, 97, 255, 0.12);
            overflow: hidden;
        }

        .reseller-demo-page .opportunity-lead::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 20%, rgba(123, 97, 255, 0.2), transparent 30%),
                radial-gradient(circle at 80% 80%, rgba(0, 194, 255, 0.16), transparent 28%);
            pointer-events: none;
        }

        .reseller-demo-page .opportunity-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--electric-purple);
            margin-bottom: 16px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-headline {
            font-size: clamp(30px, 3.4vw, 48px);
            line-height: 1.06;
            letter-spacing: -2px;
            margin-bottom: 18px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-intro {
            font-size: 18px;
            line-height: 1.85;
            color: var(--text);
            margin-bottom: 20px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-body {
            font-size: 16px;
            line-height: 1.9;
            color: var(--muted);
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-body p { margin-bottom: 16px; }

        .reseller-demo-page .opportunity-grid {
            margin: 18px 0 24px;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-card {
            position: relative;
            padding: 20px 18px;
            border-radius: 22px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 250, 255, 0.88)),
                linear-gradient(135deg, rgba(123, 97, 255, 0.04), rgba(0, 194, 255, 0.03));
            border: 1px solid rgba(79, 140, 255, 0.08);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.04);
            overflow: hidden;
            backdrop-filter: blur(12px);
            transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium);
        }

        .reseller-demo-page .opportunity-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 18% 18%, rgba(123, 97, 255, 0.08), transparent 34%);
            pointer-events: none;
        }

        .reseller-demo-page .opportunity-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
        }

        .reseller-demo-page .opportunity-card-head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-card-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            flex-shrink: 0;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
        }

        .reseller-demo-page .opportunity-card-title {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.25;
            margin-bottom: 6px;
            color: var(--dark);
        }

        .reseller-demo-page .opportunity-card-text {
            font-size: 13px;
            line-height: 1.7;
            color: var(--muted);
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-closing {
            font-size: 16px;
            font-weight: 600;
            line-height: 1.8;
            color: var(--dark);
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-side {
            display: grid;
            gap: 14px;
            position: relative;
            z-index: 1;
        }

        .reseller-demo-page .opportunity-side-card {
            padding: 20px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.76);
            border: 1px solid rgba(123, 97, 255, 0.08);
            backdrop-filter: blur(12px);
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
        }

        .reseller-demo-page .opportunity-side-title {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--electric-purple);
            margin-bottom: 10px;
        }

        .reseller-demo-page .opportunity-side-text {
            font-size: 14px;
            line-height: 1.7;
            color: var(--muted);
        }

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

        .reseller-demo-page .faq-item {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            margin-bottom: 14px;
            overflow: hidden;
            transition: all 0.4s;
        }

        .reseller-demo-page .faq-item:hover { border-color: rgba(79, 140, 255, 0.12); }

        .reseller-demo-page .faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 28px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            width: 100%;
            text-align: left;
        }

        .reseller-demo-page .faq-question:hover { color: var(--light-blue); }
        .reseller-demo-page .faq-question i { font-size: 12px; transition: transform 0.4s; }
        .reseller-demo-page .faq-item.open .faq-question i { transform: rotate(180deg); }

        .reseller-demo-page .faq-answer {
            padding: 0 28px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .reseller-demo-page .faq-item.open .faq-answer {
            max-height: 300px;
            padding: 0 28px 24px;
        }

        .reseller-demo-page .faq-answer p { font-size: 14px; color: var(--muted); line-height: 1.8; }

        .reseller-demo-page .cta-section {
            padding: 120px 40px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f0f4ff, #ede9fe, #f0fdfa);
        }

        .reseller-demo-page .cta-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

        .reseller-demo-page .cta-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: resellerOrbFloat 12s ease-in-out infinite;
        }

        .reseller-demo-page .cta-orb-1 { width: 400px; height: 400px; top: -100px; left: 20%; background: rgba(123, 97, 255, 0.2); }
        .reseller-demo-page .cta-orb-2 { width: 300px; height: 300px; bottom: -50px; right: 20%; background: rgba(79, 140, 255, 0.15); }

        .reseller-demo-page .cta-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .reseller-demo-page .cta-title {
            font-size: clamp(38px, 4.5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }

        .reseller-demo-page .cta-subtitle { font-size: 18px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; }
        .reseller-demo-page .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

        .reseller-demo-page .cta-primary-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 16px 36px;
            /* border-radius: 18px; */
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 0.01em;
            box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
            overflow: hidden;
            transition: transform 0.35s var(--ease-premium), box-shadow 0.35s var(--ease-premium), filter 0.35s var(--ease-premium);
        }

        .reseller-demo-page .cta-primary-btn::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.22) 45%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0.18) 55%, transparent 100%);
            transform: translateX(-120%);
            transition: transform 0.8s var(--ease-premium);
        }

        .reseller-demo-page .cta-primary-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(79, 140, 255, 0.4);
            filter: saturate(1.08);
        }

        .reseller-demo-page .cta-primary-btn:hover::before {
            transform: translateX(120%);
        }

        .reseller-demo-page .cta-primary-btn:focus-visible {
            outline: 2px solid rgba(255, 255, 255, 0.9);
            outline-offset: 3px;
        }

        .reseller-demo-page .anim-item {
            opacity: 0;
            transform: translateY(40px);
            filter: blur(8px);
        }

        @media (max-width: 1024px) {
            .reseller-demo-page .hero-content { grid-template-columns: 1fr; gap: 60px; text-align: center; }
            .reseller-demo-page .hero-left { max-width: 100%; }
            .reseller-demo-page .hero-subtitle { margin-left: auto; margin-right: auto; }
            .reseller-demo-page .hero-module-orbit { margin-left: auto; margin-right: auto; }
            .reseller-demo-page .hero-buttons { justify-content: center; }
            .reseller-demo-page .hero-visual-stack { height: 520px; }
            .reseller-demo-page .benefits-grid { grid-template-columns: repeat(2, 1fr); }
            .reseller-demo-page .modules-grid { grid-template-columns: repeat(2, 1fr); }
            .reseller-demo-page .features-row { grid-template-columns: repeat(3, 1fr); }
            .reseller-demo-page .market-grid { grid-template-columns: repeat(2, 1fr); }
            .reseller-demo-page .opportunity-grid { grid-template-columns: repeat(2, 1fr); }
            .reseller-demo-page .opportunity-feature-card { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .reseller-demo-page .hero-reseller { padding: 120px 20px 80px; }
            .reseller-demo-page .hero-title { font-size: 36px; letter-spacing: -1.5px; }
            .reseller-demo-page .hero-module-orbit { width: min(100%, 330px); margin-bottom: 18px; }
            .reseller-demo-page .module-orbit-shell { --orbit-radius: 92px; }
            .reseller-demo-page .module-orbit-center { width: 92px; }
            .reseller-demo-page .module-orbit-center img { width: 42px; }
            .reseller-demo-page .module-orbit-chip { padding: 8px 12px; font-size: 10px; }
            .reseller-demo-page .hero-visual-stack { height: auto; min-height: 0; margin-top: 12px; }
            .reseller-demo-page .floating-card {
                position: relative;
                top: auto !important;
                right: auto !important;
                left: auto !important;
                bottom: auto !important;
                width: 100% !important;
                max-width: 100%;
                margin-bottom: 14px;
            }
            .reseller-demo-page .section { padding: 80px 20px; }
            .reseller-demo-page .benefits-grid { grid-template-columns: 1fr; }
            .reseller-demo-page .modules-grid { grid-template-columns: 1fr; }
            .reseller-demo-page .features-row { grid-template-columns: 1fr; }
            .reseller-demo-page .market-grid { grid-template-columns: 1fr; }
            .reseller-demo-page .opportunity-grid { grid-template-columns: 1fr; }
            .reseller-demo-page .opportunity-shell { padding: 18px; }
            .reseller-demo-page .opportunity-editorial { grid-template-columns: 1fr; gap: 16px; }
            .reseller-demo-page .opportunity-lead { padding: 20px; }
            .reseller-demo-page .opportunity-side-card { padding: 16px; }
            .reseller-demo-page .steps-timeline { padding-left: 50px; }
            .reseller-demo-page .steps-timeline::before { left: 18px; }
            .reseller-demo-page .step-marker { left: -50px; width: 38px; height: 38px; font-size: 16px; }
            .reseller-demo-page .cta-section { padding: 100px 20px 80px; }
            .reseller-demo-page .cta-primary-btn { width: 100%; justify-content: center; }
            .reseller-demo-page .navbar,
            .reseller-demo-page .navbar.scrolled { padding: 12px 20px; }
        }

        @media (max-width: 768px) {
            .phone-input-group {
                flex-direction: column;
            }
            
            .country-code-select {
                width: 100%;
            }
            
            .hero-form-premium + .simple-section,
            .section-after-hero {
                padding-top: 0px !important;
            }
        }

        /* ============================================= */
        /* HOME PAGE - HERO                             */
        /* ============================================= */
        .hero {
            min-height: auto;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding: 70px 40px 40px;
            position: relative;
            overflow: hidden;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .hero-bg::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
            background-size: 24px 24px;
            opacity: 0.35;
            mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
            -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 80%);
            pointer-events: none;
        }

        .hero-bg::after {
            content: '';
            position: absolute;
            top: -10%;
            left: 50%;
            transform: translateX(-50%);
            width: 1000px;
            height: 500px;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.16) 0%, rgba(123, 97, 255, 0.08) 35%, transparent 70%);
            filter: blur(96px);
            opacity: 0.75;
            pointer-events: none;
        }

        .hero-mesh {
            position: absolute;
            width: 140%;
            height: 140%;
            top: -20%;
            left: -20%;
            background:
                radial-gradient(ellipse 600px 400px at 30% 40%, rgba(79, 140, 255, 0.08), transparent),
                radial-gradient(ellipse 500px 500px at 70% 30%, rgba(123, 97, 255, 0.06), transparent),
                radial-gradient(ellipse 400px 300px at 50% 80%, rgba(0, 194, 255, 0.05), transparent);
            /* animation: meshMove 25s ease-in-out infinite; */
        }

        @keyframes meshMove {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(2%, -1%) scale(1.02); }
            66% { transform: translate(-1%, 2%) scale(0.98); }
        }

        .hero-grid-lines {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(79, 140, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(79, 140, 255, 0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black, transparent);
        }

        .hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            /* animation: orbFloat 12s ease-in-out infinite; */
        }

        .hero-orb-1 { width: 350px; height: 350px; top: 10%; left: 10%; background: rgba(79, 140, 255, 0.15); }
        .hero-orb-2 { width: 280px; height: 280px; top: 50%; right: 8%; background: rgba(123, 97, 255, 0.12); animation-delay: -4s; }
        .hero-orb-3 { width: 220px; height: 220px; bottom: 15%; left: 35%; background: rgba(0, 194, 255, 0.1); animation-delay: -8s; }

        @keyframes orbFloat {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-30px) translateX(15px); }
            50% { transform: translateY(-15px) translateX(-15px); }
            75% { transform: translateY(-45px) translateX(8px); }
        }

        .hero-content {
            max-width: 960px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 48px;
            position: relative;
            z-index: 2;
            text-align: center;
        }

        .hero-left {
            max-width: 860px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px !important;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px 8px 10px;
            border-radius: 100px;
            background: rgba(79, 140, 255, 0.06);
            border: 1px solid rgba(79, 140, 255, 0.15);
            font-size: 13px;
            color: var(--light-blue);
            font-weight: 500;
            margin-bottom: 28px;
        }

        .hero-badge-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--light-blue);
            /* animation: pulse 2s ease-in-out infinite; */
        }

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

        .hero-title {
            font-family: 'Poppins', sans-serif;
            font-size: clamp(32px, 2.8vw, 46px);
            font-weight: 900;
            letter-spacing: -0.03em;
            background: linear-gradient(135deg, #ff6b6b, #f43f79, #7dd3fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            line-height: 1.06;
            max-width: 100%;
            white-space: normal;
            overflow-wrap: break-word;
            word-break: keep-all;
        }

        .hero-subtitle {
             max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            text-align: center;
            font-size: 0.8rem;
            line-height: 1.7;
             margin-bottom: 20px;
        }

        .hero-buttons {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 22px;
            flex-wrap: wrap;
            text-align: center;
        }

        .hero-buttons .btn-primary {
            padding: 14px 28px;
            font-size: 15px;
            margin: 0 auto;
        }

        .hero-buttons .trial-note {
            text-align: center;
        }

        .hero-trust {
            display: flex;
            align-items: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        .hero-trust-avatars {
            display: flex;
        }

        .hero-dynamic {
            display: block;
            font-family: 'Poppins', sans-serif;
            font-size: clamp(28px, 2.8vw, 42px);
            font-weight: 900!important;
            margin: 10px 0 0;
            line-height: 1.20;
            white-space: normal;
            min-height: 1.1em;
        }

        .plain-brand {
            font-family: 'Poppins', sans-serif;
            font-weight: 900;
        }

        .hero-trust-avatars img {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2.5px solid var(--white);
            margin-left: -10px;
            object-fit: cover;
        }

        .hero-trust-avatars img:first-child { margin-left: 0; }
        .hero-trust-text { font-size: 13px; color: var(--muted); line-height: 1.5; }
        .hero-trust-text strong { color: var(--dark); }

        /* Dashboard Mockup */
        .hero-right {
            position: relative;
            perspective: 1000px;
            /* display: flex; */
            justify-content: center;
            align-items: center;
            width: 100%;
            max-width: 1100px;
            /* increased width for larger hero */
            margin: 0 auto;
        }

        .hero-right::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 55% 20%, rgba(79, 140, 255, 0.18), transparent 40%),
                radial-gradient(circle at 30% 60%, rgba(123, 97, 255, 0.12), transparent 30%);
            filter: blur(68px);
            opacity: 0.75;
            pointer-events: none;
            z-index: 0;
        }

        .hero-dashboard {
            position: relative;
            z-index: 10;
            width: min(100%, 1100px);
            max-height: none;
            /* allow full expansion */
            padding: 0;
            min-height: auto;
            padding-bottom: 40px;
            /* keep only tidy breathing room for floating elements */
            border-radius: 36px;
            background: transparent;
            box-shadow: none;
            overflow: visible;
            /* allow floating/animated elements to show outside container */
            transition: all 0.45s var(--ease-premium);
            transform-origin: center center;
            margin-bottom: 0;
            /* next section spacing controlled by section padding */
        }

        .hero-dashboard::before {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 36px;
            background: linear-gradient(135deg, transparent 0%, rgba(79, 140, 255, 0) 30%, rgba(123, 97, 255, 0) 70%, transparent 100%);
            opacity: 0;
            transition: opacity 0.5s var(--ease-premium), inset 0.5s var(--ease-premium);
            z-index: -1;
            pointer-events: none;
        }

        .hero-dashboard:hover::before {
            opacity: 1;
            inset: -25px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.34) 0%, rgba(0, 194, 255, 0.28) 35%, rgba(79, 210, 255, 0.24) 70%, rgba(79, 140, 255, 0.28) 100%);
            filter: blur(28px);
        }

        .hero-dashboard:hover {
            transform: translateY(-8px) scale(1.01);
        }

        .dashboard-interface {
            position: relative;
            width: 100%;
            min-height: 360px;
            /* more compact dashboard layout */
            border-radius: 32px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 250, 255, 0.92));
            border: 1.5px solid rgba(79, 140, 255, 0.12);
            border-bottom-color: transparent;
            /* hide bottom border to avoid visible line */
            box-shadow: 0 40px 100px rgba(79, 140, 255, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(28px);
            overflow: visible;
            /* ensure internal widgets and animations are not clipped */
            transition: all 0.4s var(--ease-premium);
        }

        /* Allow the dashboard to size naturally while preserving visible overflow */
        .dashboard-interface,
        .dashboard-mockup,
        .dashboard-wrapper {
            height: auto !important;
            min-height: auto !important;
            overflow: visible !important;
            position: relative !important;
        }

        /* Keep only professional spacing below the dashboard */
        .hero-dashboard:hover .dashboard-interface {
            border-color: rgba(79, 140, 255, 0.25);
            box-shadow: 0 50px 120px rgba(79, 140, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.95);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 255, 0.96));
        }

        .dash-glow {
            position: absolute;
            inset: -20px;
            background: radial-gradient(circle at 25% 25%, rgba(79, 140, 255, 0.18), transparent 25%),
                radial-gradient(circle at 75% 60%, rgba(123, 97, 255, 0.16), transparent 22%);
            filter: blur(60px);
            opacity: 0.7;
            pointer-events: none;
            z-index: 0;
        }

        .dashboard-interface>* {
            position: relative;
            z-index: 1;
        }

        .dash-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 12px 16px;
            background: rgba(255, 255, 255, 0.88);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
            border-top-left-radius: 28px;
            border-top-right-radius: 28px;
        }

        .dash-controls {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .control-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #cbd5e1;
        }

        .control-dot.red {
            background: #ff5f57;
        }

        .control-dot.yellow {
            background: #febc2e;
        }

        .control-dot.green {
            background: #28c840;
        }

        .dash-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: monospace;
            font-size: 11px;
            font-weight: 700;
            color: var(--emerald);
            text-transform: uppercase;
            letter-spacing: 0.08em;
        }

        .dash-status .status-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--emerald);
            box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
        }

        .dash-body {
            position: relative;
            padding: 12px;
            /* tighter interior spacing */
            min-height: 360px;
            /* more compact interior */
            border-radius: 28px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.3) 100%),
                repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(79, 140, 255, 0.03) 19px, rgba(79, 140, 255, 0.03) 20px),
                repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(79, 140, 255, 0.03) 19px, rgba(79, 140, 255, 0.03) 20px);
            transition: background 0.4s var(--ease-premium);
        }

        .hero-dashboard:hover .dash-body {
            background: linear-gradient(135deg, rgba(245, 248, 255, 0.8) 0%, rgba(239, 246, 255, 0.6) 100%),
                repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(79, 140, 255, 0.06) 19px, rgba(79, 140, 255, 0.06) 20px),
                repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(79, 140, 255, 0.06) 19px, rgba(79, 140, 255, 0.06) 20px);
        }

        .dash-grid-label {
            display: block;
            margin-bottom: 12px;
            font-size: 12px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .dash-grid {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 18px;
            align-items: start;
            width: 100%;
        }

        .dashboard-stats {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-bottom: 16px;
        }

        .stat-card {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 20px;
            padding: 18px 16px;
            box-shadow: 0 18px 32px rgba(15, 23, 42, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 24px 42px rgba(15, 23, 42, 0.1);
        }

        .stat-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--muted);
        }

        .stat-value {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 28px;
            line-height: 1;
            font-weight: 800;
            color: var(--dark);
        }

        .stat-change {
            font-size: 12px;
            font-weight: 700;
            color: var(--emerald);
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .dashboard-activity {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .activity-item {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 18px;
            box-shadow: 0 16px 30px rgba(15, 23, 42, 0.05);
            font-size: 13px;
        }

        .activity-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .activity-text {
            color: var(--dark);
            font-weight: 600;
            line-height: 1.4;
        }

        .activity-time {
            color: var(--muted);
            font-size: 11px;
            white-space: nowrap;
        }

        .dash-left,
        .dash-right {
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
        }

        .dash-left .dashboard-metrics {
            padding: 16px 16px 18px;
        }

        .module-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .module-card {
            min-height: 86px;
        }

        .dash-right .agent-card {
            flex-direction: column;
            align-items: stretch;
        }

        .dash-right .agent-card .ac-left {
            width: 100%;
        }

        .dash-title-overlay {
            display: none;
        }

        .activity-feed {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding-top: 40px;
            height: 100%;
            overflow: hidden;
        }

        .agent-card {
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: 12px;
            padding: 7px 10px;
            /* more compact cards */
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
        }

        .ac-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ac-icon {
            width: 32px;
            height: 32px;
            border-radius: 10px;
            background: var(--soft-gray);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light-blue);
            font-size: 14px;
            border: 1px solid rgba(0, 0, 0, 0.04);
        }

        .ac-info h4 {
            font-size: 13px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 2px;
            font-family: 'Inter', sans-serif;
        }

        .ac-info p {
            font-size: 12px;
            color: var(--muted);
            margin: 0;
        }

        .ac-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 6px;
            text-align: right;
        }

        .ac-timestamp {
            font-size: 10px;
            color: #94a3b8;
        }

        .ac-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 9px;
            font-weight: 800;
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .badge-success {
            background: rgba(16, 185, 129, 0.12);
            color: var(--emerald);
            border: 1px solid rgba(16, 185, 129, 0.2);
        }

        .badge-process {
            background: rgba(245, 158, 11, 0.12);
            color: var(--amber);
            border: 1px solid rgba(245, 158, 11, 0.2);
        }

        .dashboard-activity {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .activity-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--soft-gray);
            border-radius: var(--radius-md);
            font-size: 12px;
        }

        .activity-icon {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .activity-text {
            flex: 1;
            font-weight: 500;
        }

        .activity-time {
            color: var(--muted);
            font-size: 11px;
        }

        /* Floating Cards */
        .floating-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(79, 140, 255, 0.1);
            border-radius: 16px;
            padding: 14px 18px;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            z-index: 10;
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        .floating-card-1 {
            top: -20px;
            right: -30px;
        }

        .floating-card-2 {
            bottom: 40px;
            left: -40px;
            animation-delay: -2s;
        }

        .floating-card-3 {
            top: 40%;
            right: -50px;
            animation-delay: -4s;
        }

        .fc-row {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 12px;
        }

        .fc-icon {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
        }

        .fc-text {
            font-weight: 600;
        }

        .fc-sub {
            font-size: 11px;
            color: var(--muted);
        }

        @media (max-width: 980px) {
            .dashboard-panels {
                grid-template-columns: 1fr;
            }

            .hero-dashboard {
                padding: 22px;
            }

            .dashboard-stream {
                min-height: auto;
            }

            .dashboard-interface {
                min-height: auto;
            }

            .dash-body {
                min-height: auto;
            }

            .dash-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

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

            .dash-right .agent-card {
                flex-direction: row;
                align-items: center;
            }

            .hero-dashboard {
                margin-bottom: 60px;
            }

            .hero-dashboard {
                padding-bottom: 60px;
            }
        }

        @media (max-width: 720px) {
            .hero-dashboard {
                padding: 18px;
            }

            .dashboard-status-strip {
                flex-direction: column;
                align-items: stretch;
            }

            .dashboard-main-heading {
                flex-direction: column;
                align-items: stretch;
            }

            .dashboard-main-copy {
                max-width: 100%;
            }

            .dashboard-interface {
                min-height: auto;
            }

            .dash-body {
                min-height: auto;
                padding: 14px;
            }

            .dash-grid {
                gap: 14px;
            }

            .module-grid {
                grid-template-columns: 1fr;
            }

            .dash-right .agent-card {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .dash-right .agent-card .ac-left {
                width: 100%;
            }

            .chart-svg {
                height: 100px;
            }

            .chart-title {
                font-size: 12px;
            }

            .chart-legend {
                gap: 10px;
                font-size: 11px;
            }

            .dash-grid-label {
                font-size: 11px;
                letter-spacing: 0.16em;
            }

            .agent-card {
                padding: 10px 12px;
            }

            .ac-icon {
                width: 30px;
                height: 30px;
            }

            .ac-info h4 {
                font-size: 12px;
            }

            .ac-info p {
                font-size: 11px;
            }

            .hero-dashboard {
                margin-bottom: 50px;
            }

            .hero-dashboard {
                padding-bottom: 50px;
            }
        }

        .dashboard-status-strip {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            justify-content: center;
            margin-bottom: 14px;
        }

        .status-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 10px 16px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 0.02em;
            color: #102a43;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(20px);
        }

        .status-pill-online {
            background: rgba(79, 140, 255, 0.12);
            color: #175cd3;
        }

        .status-pill-automation {
            background: rgba(123, 97, 255, 0.12);
            color: #4e3bff;
        }

        .status-pill-employees {
            background: rgba(0, 194, 255, 0.12);
            color: #056cff;
        }

        .dashboard-panels {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 18px;
        }

        .glass-panel {
            position: relative;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 28px;
            box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(28px);
            padding: 22px;
            overflow: hidden;
        }

        .dashboard-stream {
            min-height: 360px;
        }

        .stream-label {
            font-size: 11px;
            color: var(--muted);
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 18px;
        }

        .stream-lines {
            display: grid;
            gap: 12px;
            font-size: 13px;
            line-height: 1.6;
            color: var(--dark);
        }

        .stream-line {
            display: flex;
            gap: 8px;
            align-items: flex-start;
            padding: 12px 14px;
            border-radius: 18px;
            background: rgba(243, 246, 255, 0.78);
            border: 1px solid rgba(15, 23, 42, 0.06);
            opacity: 0;
            transform: translateX(-18px);
        }

        .stream-init span,
        .stream-activity span,
        .stream-success span {
            font-weight: 700;
            color: #334155;
        }

        .stream-success {
            background: rgba(16, 185, 129, 0.1);
        }

        .typing-cursor {
            margin-left: 2px;
            animation: blinkCursor 1s steps(2, start) infinite;
        }

        @keyframes blinkCursor {

            0%,
            100% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }
        }

        .dashboard-main {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .dashboard-main-heading {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 14px;
            flex-wrap: wrap;
        }

        .dashboard-main-title {
            font-size: 16px;
            font-weight: 800;
            letter-spacing: 0.02em;
            color: var(--light-blue);
            text-transform: uppercase;
            margin-bottom: 6px;
        }

        .dashboard-main-copy {
            font-size: 14px;
            color: var(--dark);
            line-height: 1.6;
            max-width: 320px;
        }

        .dashboard-badge {
            padding: 10px 16px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.15);
            color: #1848c8;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.08em;
        }

        .dashboard-tasks {
            display: grid;
            gap: 14px;
        }

        .task-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 16px 18px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.56);
            opacity: 0;
            transform: translateY(20px);
        }

        .task-info {
            display: grid;
            gap: 4px;
        }

        .task-name {
            font-size: 14px;
            font-weight: 700;
            color: var(--dark);
        }

        .task-copy {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.5;
        }

        .task-meta {
            display: flex;
            align-items: center;
        }

        .task-pill {
            padding: 8px 12px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 0.01em;
        }

        .task-pill.active {
            background: rgba(79, 140, 255, 0.14);
            color: #175cd3;
        }

        .task-pill.complete {
            background: rgba(34, 197, 94, 0.12);
            color: #15803d;
        }

        .dashboard-metrics {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .metric-card {
            background: rgba(255, 255, 255, 0.94);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: 20px;
            padding: 16px 18px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
            opacity: 0;
            transform: translateY(20px);
        }

        .metric-label {
            font-size: 11px;
            font-weight: 700;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 8px;
        }

        .metric-value {
            font-size: 20px;
            font-weight: 800;
            color: var(--dark);
            margin-bottom: 10px;
        }

        .metric-spark {
            height: 8px;
            background: rgba(15, 23, 42, 0.05);
            border-radius: 999px;
            overflow: hidden;
        }

        .spark-bar {
            display: block;
            height: 100%;
            background: linear-gradient(90deg, var(--light-blue), var(--electric-purple));
            border-radius: 999px;
            transform-origin: left;
            width: 0%;
            animation: sparkGrow 1.8s ease-out forwards;
        }

        .wide-1 {
            animation-delay: 0.2s;
        }

        .wide-2 {
            animation-delay: 0.35s;
        }

        .wide-3 {
            animation-delay: 0.5s;
        }

        .wide-4 {
            animation-delay: 0.65s;
        }

        @keyframes sparkGrow {
            to {
                width: 100%;
            }
        }

        @media (max-width: 980px) {
            .dashboard-panels {
                grid-template-columns: 1fr;
            }

            .hero-dashboard {
                padding: 22px;
            }

            .dashboard-stream {
                min-height: auto;
            }
        }

        @media (max-width: 720px) {
            .hero-dashboard {
                padding: 18px;
            }

            .dashboard-status-strip {
                flex-direction: column;
                align-items: stretch;
            }

            .dashboard-main-heading {
                flex-direction: column;
                align-items: stretch;
            }

            .dashboard-main-copy {
                max-width: 100%;
            }
        }

        .stat-value {
            font-family: 'Space Grotesk';
            font-size: 24px;
            font-weight: 700;
        }

        .stat-change {
            font-size: 11px;
            color: var(--emerald);
            font-weight: 500;
            margin-top: 2px;
        }

        .dashboard-chart {
            margin-bottom: 16px;
        }

        .chart-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            flex-wrap: wrap;
            gap: 8px;
        }

        .chart-title { font-size: 13px; font-weight: 600; }
        .chart-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
        .chart-svg { width: 100%; height: 100px; }

        .chart-line {
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .dashboard-activity { display: flex; flex-direction: column; gap: 8px; }

        .activity-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            background: var(--soft-gray);
            border-radius: var(--radius-md);
            font-size: 12px;
        }

        .activity-icon {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            flex-shrink: 0;
        }

        .activity-text { flex: 1; font-weight: 500; }
        .activity-time { color: var(--muted); font-size: 11px; }

        /* Floating Cards */
        .floating-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(79, 140, 255, 0.1);
            border-radius: 16px;
            padding: 14px 18px;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            z-index: 10;
            animation: float 6s ease-in-out infinite;
        }

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

        .floating-card-1 { top: -20px; right: -30px; }
        .floating-card-2 { bottom: 40px; left: -40px; animation-delay: -2s; }
        .floating-card-3 { top: 40%; right: -50px; animation-delay: -4s; }

        .fc-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }

        .fc-icon {
            width: 28px;
            height: 28px;
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
        }

        .fc-text { font-weight: 600; }
        .fc-sub { font-size: 11px; color: var(--muted); }

        /* Trusted Section */
        .trusted-section {
            padding: 70px 40px 90px;
            border-top: 1px solid rgba(15, 23, 42, 0.04);
            position: relative;
            z-index: 1;
        }

        /* When Trusted section immediately follows the hero, hide the top border
           and keep extra padding so the dashboard doesn't show a hard separator. */
        .hero+.trusted-section {
            border-top: none;
            padding-top: 90px;
            /* extra breathing space when after hero */
        }

        @media (max-width: 980px) {
            .hero+.trusted-section {
                padding-top: 80px;
            }
        }

        @media (max-width: 720px) {
            .hero+.trusted-section {
                padding-top: 60px;
            }
        }

        .trusted-label {
            text-align: center;
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 36px;
        }

        .client-logo-carousel {
            display:grid;
            grid-template-columns:42px minmax(0, 1fr) 42px;
            align-items:center;
            gap:14px;
        }
        .marquee-container {
            position: relative;
            overflow-x: auto;
            overflow-y: hidden;
            padding:0 8px;
            scroll-behavior: smooth;
            scroll-snap-type:x proximity;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .marquee-container::-webkit-scrollbar { display:none; }
        .marquee-container:focus-visible { outline: 2px solid rgba(79, 140, 255, 0.7); outline-offset: 4px; }
        .client-logo-scroll {
            position:static;
            width:42px;
            height:42px;
            border:1px solid rgba(103, 88, 168, .18);
            border-radius:50%;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.95);
            color:#6758a8;
            box-shadow:0 8px 22px rgba(35,42,70,.14);
            cursor:pointer;
            transition:background .2s ease, box-shadow .2s ease;
        }
        .client-logo-scroll:hover { background:#6758a8; color:#fff; box-shadow:0 11px 26px rgba(103,88,168,.25); }
        .client-logo-scroll:focus-visible { outline:2px solid #4f8cff; outline-offset:3px; }
        .client-logo-scroll-prev { grid-column:1; }
        .client-logo-scroll-next { grid-column:3; }
        .marquee-container { grid-column:2; }
        .client-logo-carousel .marquee-item { scroll-snap-align:center; }
        @media(max-width:640px) {
            .client-logo-carousel { grid-template-columns:36px minmax(0, 1fr) 36px; gap:8px; }
            .marquee-container { padding:0 6px; }
            .client-logo-scroll { width:36px; height:36px; font-size:13px; }
        }
        @media(max-width:480px) {
            .client-logo-carousel .marquee-track { gap:24px; }
            .client-logo-carousel .marquee-item { min-width:180px; justify-content:center; padding:0 12px; }
        }

        .marquee-track {
            display: flex;
            gap: 60px;
            align-items: center;
            animation: none;
            width: max-content;
        }

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

        .marquee-item {
            font-family: 'Space Grotesk';
            font-size: 21px;
            font-weight: 600;
            color: rgba(15, 23, 42, 0.15);
            white-space: nowrap;
            transition: all 0.4s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .marquee-item img {
            height: 60px;
            /* increase size */
            width: auto;
            object-fit: contain;
        }

        .marquee-item:hover { color: rgba(15, 23, 42, 0.45); }

        .marquee-fade-l, .marquee-fade-r {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 120px;
            z-index: 2;
            pointer-events: none;
        }

        .marquee-fade-l { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
        .marquee-fade-r { right: 0; background: linear-gradient(-90deg, var(--white), transparent); }

        /* Features Section */
        .features-section { padding: 120px 40px; }

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

        .section-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px 8px 10px;
            border-radius: 100px;
            background: rgba(79, 140, 255, 0.06);
            border: 1px solid rgba(79, 140, 255, 0.12);
            font-size: 13px;
            color: var(--light-blue);
            font-weight: 500;
            margin-bottom: 20px;
        }

        .section-title {
            font-size: clamp(38px, 4.5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }

        .section-subtitle {
            font-size: 1rem;
            /* color: var(--muted); */
            max-width: 560px;
            margin: 0 auto;
            line-height: 1.7;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 32px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s var(--ease-premium);
            cursor: default;
        }

        .feature-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-lg);
            background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(79, 140, 255, 0.06), transparent 60%);
            opacity: 0;
            transition: opacity 0.4s;
        }

        .feature-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--light-blue), var(--electric-purple), var(--cyan));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s var(--ease-premium);
        }

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

        .feature-card:hover::after {
            transform: scaleX(1);
        }

        .feature-card:hover {
            transform: translateY(-12px) rotateX(2deg) scale(1.02);
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
            border-color: rgba(79, 140, 255, 0.15);
        }

        .feature-card-icon {
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            margin-bottom: 20px;
            transition: all 0.4s;
            box-shadow: 0 8px 24px rgba(79, 140, 255, 0.08);
        }

        .feature-card:hover .feature-card-icon {
            transform: scale(1.15) rotate(10deg);
            box-shadow: 0 12px 36px rgba(79, 140, 255, 0.15);
        }

        .feature-card-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--dark);
        }

        .feature-card-desc {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
			padding-right: 54px;
            min-height: 82px;
        }

		.feature-card-btn {
            position: absolute;
            bottom: 24px;
            right: 24px;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--light-blue);
            color: white;
            text-decoration: none;
            box-shadow: 0 14px 34px rgba(79, 140, 255, 0.22);
            transition: transform 0.25s var(--ease-premium), background 0.25s var(--ease-premium), box-shadow 0.25s var(--ease-premium);
        }

        .feature-card-btn:hover,
        .feature-card-btn:focus-visible {
            transform: translateY(-2px);
            background: var(--electric-purple);
            box-shadow: 0 18px 40px rgba(79, 140, 255, 0.28);
        }

        .feature-card-btn i {
            font-size: 14px;
        }

        .feature-card:hover .feature-card-btn {
            transform: translateY(-3px);
        }

		/*core modules*/

		.feature-group {
            max-width: 1200px;
            margin: 0 auto;
        }

        .feature-group + .feature-group {
            margin-top: 56px;
        }

        .feature-group-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            text-align: center;
            margin-bottom: 28px;
        }

        .feature-group-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.06);
            border: 1px solid rgba(79, 140, 255, 0.12);
            color: var(--light-blue);
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .feature-group-title {
            font-size: clamp(24px, 2.6vw, 34px);
            font-weight: 800;
            letter-spacing: -0.5px;
            margin-top: 2px;
        }

        .feature-group-copy {
            color: var(--muted);
            font-size: 15px;
            line-height: 1.7;
            max-width: 620px;
            margin: 0 auto;
        }

        .card-container {
            perspective: 1400px;
            opacity: 0;
            transform: translateY(40px);
            animation: cardEnter 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
            cursor: pointer;
            touch-action: manipulation;
        }

        .feature-group .card-container:nth-child(1) {
            animation-delay: 0.1s;
        }

        .feature-group .card-container:nth-child(2) {
            animation-delay: 0.2s;
        }

        .feature-group .card-container:nth-child(3) {
            animation-delay: 0.3s;
        }

        .feature-group .card-container:nth-child(4) {
            animation-delay: 0.4s;
        }

        .feature-group .card-container:nth-child(5) {
            animation-delay: 0.5s;
        }

        .feature-group .card-container:nth-child(6) {
            animation-delay: 0.6s;
        }

        .feature-group .card-container:nth-child(7) {
            animation-delay: 0.7s;
        }

        .feature-group .card-container:nth-child(8) {
            animation-delay: 0.8s;
        }

        .card-inner {
            position: relative;
            width: 100%;
            height: 420px;
            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d;
        }

        .card-container:hover {
            transform: translateY(-8px);
        }

        .card-container:hover .card-inner {
            transform: rotateY(180deg);
        }

        .card-container.is-flipped .card-inner {
            transform: rotateY(180deg);
        }

        .card-front,
        .card-back {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            gap: 18px;
            padding: 32px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 24px;
            overflow: hidden;
        }

        .card-front {
            z-index: 1;
            pointer-events: auto;
        }

        .card-back {
            transform: rotateY(180deg);
            z-index: 2;
            pointer-events: none;
        }

        .card-container:hover .card-front,
        .card-container.is-flipped .card-front {
            pointer-events: none;
        }

        .card-container:hover .card-back,
        .card-container.is-flipped .card-back {
            pointer-events: auto;
        }

        .card-front-stack {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            position: relative;
            z-index: 1;
            min-height: 132px;
        }

        .card-front-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .card-back-stack {
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
            z-index: 1;
            flex: 1;
        }

        .card-back-footer {
            position: relative;
            z-index: 1;
            margin-top: auto;
        }

        .g1f {
            background: linear-gradient(135deg, #e0e7ff 0%, #ede9fe 35%, #fce7f3 70%, #fdf2f8 100%);
        }

        .g2f {
            background: linear-gradient(135deg, #ecfeff 0%, #cffafe 30%, #dbeafe 65%, #ede9fe 100%);
        }

        .g3f {
            background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 30%, #fee2e2 65%, #fce7f3 100%);
        }

        .g4f {
            background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 30%, #cffafe 65%, #dbeafe 100%);
        }

        .g5f {
            background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 30%, #ffedd5 65%, #fee2e2 100%);
        }

        .g1b {
            background: linear-gradient(135deg, #818cf8 0%, #a78bfa 35%, #e879f9 70%, #f0abfc 100%);
        }

        .g2b {
            background: linear-gradient(135deg, #22d3ee 0%, #60a5fa 35%, #818cf8 70%, #a78bfa 100%);
        }

        .g3b {
            background: linear-gradient(135deg, #fb923c 0%, #f87171 35%, #fb7185 70%, #f9a8d4 100%);
        }

        .g4b {
            background: linear-gradient(135deg, #34d399 0%, #22d3ee 35%, #60a5fa 70%, #818cf8 100%);
        }

        .g5b {
            background: linear-gradient(135deg, #fbbf24 0%, #fb923c 35%, #f87171 70%, #fb7185 100%);
        }

        .mesh {
            position: absolute;
            inset: -50%;
            width: 200%;
            height: 200%;
            background:
                radial-gradient(ellipse 600px 600px at 20% 30%, rgba(99, 102, 241, 0.12), transparent),
                radial-gradient(ellipse 500px 500px at 80% 70%, rgba(236, 72, 153, 0.1), transparent),
                radial-gradient(ellipse 400px 400px at 50% 50%, rgba(34, 211, 238, 0.08), transparent);
            animation: meshMove 12s ease-in-out infinite alternate;
            pointer-events: none;
        }

        .shimmer {
            position: absolute;
            top: -100%;
            left: -100%;
            width: 300%;
            height: 300%;
            background: linear-gradient(60deg, transparent 38%, rgba(255, 255, 255, 0.7) 44%, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.7) 56%, transparent 62%);
            animation: shimmerSweep 4s ease-in-out infinite;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            animation: particleRise linear infinite;
        }

        .orbit-ring {
            position: absolute;
            width: 120px;
            height: 120px;
            border: 1.5px dashed rgba(99, 102, 241, 0.2);
            border-radius: 50%;
            top: -20px;
            right: -20px;
            animation: orbitSpin 20s linear infinite;
            pointer-events: none;
        }

        .orbit-ring::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: rgba(99, 102, 241, 0.4);
            border-radius: 50%;
            top: -4px;
            left: 50%;
            transform: translateX(-50%);
        }

        .num-badge {
            width: 50px;
            height: 50px;
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 17px;
            position: relative;
            overflow: hidden;
            flex: 0 0 auto;
        }

        .num-badge::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 40%, rgba(255, 255, 255, 0.4) 50%, transparent 60%);
            animation: badgeShine 3s ease-in-out infinite;
        }

        .icon-glow {
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            filter: blur(30px);
            animation: glowPulse 3s ease-in-out infinite;
            pointer-events: none;
        }

        .icon-box {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(8px);
            position: relative;
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease;
            flex: 0 0 auto;
        }

		.title-line {
            height: 3px;
            border-radius: 3px;
            width: 0;
            transition: width 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0.1s;
            margin-top: 8px;
        }

        .card-title {
            font-size: 13px;
            font-weight: 700;
            letter-spacing: -0.5px;
            color: #111827;
            line-height: 1.3;
            /* min-height: 46px; */

			/* font-size: 13px;
            font-weight: 700;
            color: var(--dark);
            line-height: 1.3; */
        }

        .card-copy {
            color: #6b7280;
            font-size: 14px;
            line-height: 1.7;
            min-height: 72px;
            max-width: 100%;
        }

        .card-back-kicker {
            width: 100%;
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 2px;
            min-height: 48px;
        }

        .card-back-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.6);
            flex: 0 0 auto;
        }

        .card-back-title {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            margin: 0;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
            min-height: 24px;
        }

        .card-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: 12px;
            flex: 1;
        }

        .card-list-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: rgba(255, 255, 255, 0.95);
            font-size: 14px;
            line-height: 1.5;
        }

        .card-list-mark {
            width: 24px;
            height: 24px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }

        .card-action {
            width: 100%;
            padding: 13px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.7);
            color: #111827;
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
            font-size: 14px;
            font-weight: 700;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            z-index: 5;
            pointer-events: auto;
        }

        .card-action:hover,
        .card-action:focus-visible {
            background: rgba(255, 255, 255, 0.75);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
        }

		.border-glow {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            padding: 2px;
            background: linear-gradient(var(--angle, 0deg), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.5));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            animation: borderRotate 4s linear infinite;
            pointer-events: none;
        }

        .dot-grid {
            position: absolute;
            inset: 0;
            background-image: radial-gradient(circle, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
            background-size: 20px 20px;
            animation: gridDrift 20s linear infinite;
            pointer-events: none;
        }

        .deco-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.25);
            pointer-events: none;
        }

        .deco-ring.r1 {
            width: 220px;
            height: 220px;
            top: -80px;
            right: -80px;
            animation: ringPulse 6s ease-in-out infinite;
        }

        .deco-ring.r2 {
            width: 160px;
            height: 160px;
            bottom: -60px;
            left: -60px;
            animation: ringPulse 6s ease-in-out infinite 2s;
        }

        .deco-ring.r3 {
            width: 100px;
            height: 100px;
            top: 40%;
            left: -30px;
            animation: ringPulse 6s ease-in-out infinite 4s;
        }

        .card-back .list-item {
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.4s ease;
        }

        .card-container:hover .card-back .list-item:nth-child(1) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.35s;
        }

        .card-container.is-flipped .card-back .list-item:nth-child(1) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.35s;
        }

        .card-container:hover .card-back .list-item:nth-child(2) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.45s;
        }

        .card-container.is-flipped .card-back .list-item:nth-child(2) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.45s;
        }

        .card-container:hover .card-back .list-item:nth-child(3) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.55s;
        }

        .card-container.is-flipped .card-back .list-item:nth-child(3) {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.55s;
        }

        .card-back .more-btn {
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease 0.6s;
        }

        .card-container:hover .card-back .more-btn {
            opacity: 1;
            transform: translateY(0);
        }

        .card-container.is-flipped .card-back .more-btn {
            opacity: 1;
            transform: translateY(0);
        }

        .more-btn {
            position: relative;
            overflow: hidden;
            transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1) !important;
        }

        .more-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            transform: translate(-50%, -50%);
            transition: width 0.5s ease, height 0.5s ease;
        }

        .more-btn:hover::before {
            width: 300px;
            height: 300px;
        }

        .more-btn:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.2);
        }

        .more-btn:active {
            transform: translateY(0) !important;
        }

        .card-container:hover .card-front .icon-box {
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 8px 24px -4px var(--icon-shadow, rgba(0, 0, 0, 0.1));
        }

        .card-container:hover .card-front .title-line {
            width: 40px;
        }

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

        @keyframes meshMove {
            0% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(30px, -20px) scale(1.05);
            }

            100% {
                transform: translate(-20px, 15px) scale(0.97);
            }
        }

        @keyframes shimmerSweep {
            0% {
                transform: translateX(-60%) translateY(-60%) rotate(25deg);
            }

            100% {
                transform: translateX(60%) translateY(60%) rotate(25deg);
            }
        }

        @keyframes particleRise {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0.5);
            }

            15% {
                opacity: 0.7;
            }

            85% {
                opacity: 0.5;
            }

            100% {
                opacity: 0;
                transform: translateY(-320px) scale(0);
            }
        }

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

        @keyframes glowPulse {
            0%,
            100% {
                opacity: 0.4;
                transform: scale(1);
            }

            50% {
                opacity: 0.7;
                transform: scale(1.15);
            }
        }

        @keyframes badgeShine {
            0%,
            100% {
                transform: translateX(-150%);
            }

            50% {
                transform: translateX(150%);
            }
        }

        @keyframes gridDrift {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 20px 20px;
            }
        }

        @keyframes ringPulse {
            0%,
            100% {
                opacity: 0.3;
                transform: scale(1);
            }

            50% {
                opacity: 0.6;
                transform: scale(1.08);
            }
        }

        @keyframes borderRotate {
            to {
                --angle: 360deg;
            }
        }

        @property --angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }

		/*core modules*/

        /* ============================================= */
        /* NEW AI SECTION - CHAT ANIMATION              */
        /* ============================================= */
        .ai-section {
            padding: 120px 40px;
            background: var(--soft-gray);
            position: relative;
            overflow: hidden;
        }

        .ai-content {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .ai-visual-container {
            position: relative;
            height: 500px;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: 0 40px 80px rgba(15, 23, 42, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .ai-chat-animation {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 30px;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* Prompt Input Animation */
        .ai-typing-prompt {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            opacity: 0;
            transform: translateY(20px);
        }

        .ai-typing-prompt.animate {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.5s var(--ease-premium);
        }

        .ai-typing-prompt .user-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.6);
        }

        .ai-typing-prompt .user-badge i {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 10px;
        }

        .ai-typing-prompt .typing-text {
            font-size: 16px;
            color: white;
            font-weight: 500;
            line-height: 1.5;
            min-height: 24px;
            white-space: nowrap;
            overflow: hidden;
        }

        .cursor-blink {
            display: inline-block;
            width: 2px;
            height: 1.1em;
            background: var(--light-blue);
            margin-left: 2px;
            vertical-align: text-bottom;
            animation: blink 1s step-end infinite;
        }

        @keyframes blink {
            from, to { opacity: 0; }
            50% { opacity: 1; }
        }

        /* AI Response Animation */
        .ai-response {
            background: rgba(99, 102, 241, 0.05);
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(99, 102, 241, 0.1);
            opacity: 0;
            transform: translateY(20px);
            margin-top: auto;
        }

        .ai-response.animate {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.5s var(--ease-premium);
            transition-delay: 0.2s;
        }

        .ai-response .ai-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            font-size: 12px;
            color: var(--electric-purple);
        }

        .ai-response .ai-badge i {
            width: 24px;
            height: 24px;
            background: rgba(99, 102, 241, 0.15);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
        }

        .ai-response .response-text {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            opacity: 0;
        }

        .ai-response .response-text.animate {
            opacity: 1;
            transition: opacity 0.3s ease;
        }

        .ai-response .response-visual {
            margin-top: 16px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            opacity: 0;
            transform: translateY(10px);
        }

        .ai-response .response-visual.animate {
            opacity: 1;
            transform: translateY(0);
            transition: all 0.4s ease 0.3s;
        }

        .ai-response .mini-stat {
            background: rgba(0, 0, 0, 0.3);
            padding: 12px;
            border-radius: 8px;
            text-align: center;
        }

        .ai-response .mini-stat-value {
            font-family: 'Space Grotesk';
            font-size: 20px;
            font-weight: 700;
            color: var(--cyan);
            margin-bottom: 4px;
        }

        .ai-response .mini-stat-label {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.5);
            text-transform: uppercase;
        }

        /* AI Floating Cards */
        .ai-floating-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(79, 140, 255, 0.1);
            border-radius: 16px;
            padding: 14px 18px;
            box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
            z-index: 10;
            animation: float 5s ease-in-out infinite;
        }

        .ai-features { display: flex; flex-direction: column; gap: 20px; }

        .ai-feature-item {
            display: flex;
            gap: 16px;
            padding: 20px;
            background: var(--white);
            border-radius: var(--radius-lg);
            border: 1px solid rgba(15, 23, 42, 0.05);
            transition: all 0.4s;
        }

        .ai-feature-item:hover {
            transform: translateX(8px);
            box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
            border-color: rgba(79, 140, 255, 0.15);
        }

        .ai-feature-icon {
            width: 46px;
            height: 46px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .ai-feature-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .ai-feature-desc { font-size: 13px; color: var(--muted); line-height: 1.6; }

        /* Stats Section */
        .stats-section { padding: 100px 40px; position: relative; }

        .stats-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 24px;
        }

        .stat-item { text-align: center; padding: 24px; }

        .stat-number {
            font-family: 'Space Grotesk';
            font-size: 52px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 8px;
            line-height: 1;
        }

        .stat-label { font-size: 13px; color: var(--muted); font-weight: 500; }

        /* Testimonials Section */
        .testimonials-section { padding: 120px 40px; background: var(--soft-gray); }

        .testimonials-track {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .testimonial-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.5s;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1); }

        .testimonial-stars {
            display: flex;
            gap: 3px;
            margin-bottom: 18px;
            color: var(--amber);
            font-size: 14px;
        }

        .testimonial-text { font-size: 12px; line-height: 1.8; margin-bottom: 24px; flex: 1; }

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

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

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

        /* CTA Section */
        .cta-section {
            padding: 120px 40px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f0f4ff, #ede9fe, #f0fdfa);
        }

        .cta-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

        .cta-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.5;
            animation: orbFloat 12s ease-in-out infinite;
        }

        .cta-orb-1 { width: 400px; height: 400px; top: -100px; left: 20%; background: rgba(79, 140, 255, 0.2); }
        .cta-orb-2 { width: 300px; height: 300px; bottom: -50px; right: 20%; background: rgba(123, 97, 255, 0.15); }

        .cta-content {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .cta-title {
            font-size: clamp(38px, 4.5vw, 56px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 20px;
        }

        .cta-subtitle { font-size: 18px; color: var(--muted); line-height: 1.7; margin-bottom: 40px; }

        /* Footer */
        .inline-enquiry-strip {
             padding: 60px 40px;
            background:
                radial-gradient(circle at 18% 20%, rgba(79, 140, 255, 0.12), transparent 34%),
                radial-gradient(circle at 84% 12%, rgba(123, 97, 255, 0.12), transparent 30%),
                var(--soft-gray);
        }

        .inline-enquiry-card {
            max-width: 1200px;
            margin: 0 auto;
            padding: 34px 38px;
            border: 1px solid rgba(79, 140, 255, 0.12);
            border-radius: 28px;
            background:
                linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(247, 250, 255, 0.78)),
                linear-gradient(135deg, rgba(79, 140, 255, 0.08), rgba(123, 97, 255, 0.06));
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            position: relative;
            overflow: hidden;
        }

        .inline-enquiry-card::before {
            content: '';
            position: absolute;
            width: 180px;
            height: 180px;
            right: -54px;
            top: -76px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 194, 255, 0.2), transparent 70%);
            pointer-events: none;
        }

        .footer-enquiry-copy {
            position: relative;
            max-width: 680px;
        }

        .footer-enquiry-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 12px;
            color: var(--light-blue);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .footer-enquiry-title {
            font-family: 'Space Grotesk';
            font-size: clamp(26px, 3vw, 38px);
            font-weight: 800;
            letter-spacing: -1.2px;
            margin-bottom: 10px;
            color: var(--dark);
        }

        .footer-enquiry-text {
            font-size: 15px;
            color: var(--muted);
            line-height: 1.7;
        }

        .inline-enquiry-card .btn-primary {
            position: relative;
            flex-shrink: 0;
            padding: 16px 28px;
        }

        .footer {
            padding: 80px 40px 40px;
            background: var(--soft-gray);
            border-top: 0;
        }

        .footer-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 2fr repeat(4, 1fr);
            gap: 40px;
            margin-bottom: 60px;
        }

        .footer-brand { max-width: 280px; }
        .footer-brand-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 16px; }
        .footer-socials { display: flex; gap: 10px; margin-top: 20px; }

        .footer-social {
            width: 38px;
            height: 38px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            color: var(--muted);
            font-size: 14px;
            transition: all 0.3s;
            cursor: pointer;
        }

        .footer-social:hover { color: var(--light-blue); border-color: rgba(79, 140, 255, 0.2); }

        .footer-col-title {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .footer-links { display: flex; flex-direction: column; gap: 12px; }

        .footer-link {
            font-size: 13px;
            color: var(--muted);
            transition: all 0.3s;
            cursor: pointer;
        }

        .footer-link:hover { color: var(--light-blue); transform: translateX(4px); }

        .footer-bottom {
            max-width: 1200px;
            margin: 0 auto;
            padding-top: 30px;
            border-top: 1px solid rgba(15, 23, 42, 0.06);
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 12px;
            color: var(--muted);
            flex-wrap: wrap;
            gap: 12px;
        }

        /* ============================================= */
        /* SUB PAGE CONTAINERS                          */
        /* ============================================= */
        .sub-page {
            display: none;
            min-height: 100vh;
            opacity: 0;
            transition: opacity 0.4s;
        }

        .sub-page.active { display: block; opacity: 1; }

        .reference-data-loading {
            min-height: calc(100vh - 72px);
            display: grid;
            place-items: center;
            padding: 48px 20px;
            background:
                radial-gradient(ellipse at 18% 18%, rgba(124, 58, 237, 0.09), transparent 38%),
                radial-gradient(ellipse at 85% 82%, rgba(59, 130, 246, 0.09), transparent 40%),
                #f8faff;
        }

        .reference-data-loading__spinner {
            width: 52px;
            height: 52px;
            border: 4px solid #e8eafe;
            border-top-color: #7657f6;
            border-right-color: #f24e79;
            border-radius: 50%;
            animation: referenceDataSpin 0.9s linear infinite;
        }

        @keyframes referenceDataSpin { to { transform: rotate(360deg); } }

        @media (prefers-reduced-motion: reduce) {
            .reference-data-loading__spinner { animation-duration: 3s; }
        }

        /* ============================================= */
        /* PREMIUM INNER PAGE HERO STYLES               */
        /* ============================================= */
        .ip-section { padding: 120px 40px; position: relative; }

        @media (min-width: 1200px) {
            .hero,
            .hero-hrms,
            .hero-payroll,
            .hero-crm,
            .hero-crm-premium,
            .hero-inventory,
            .hero-financial,
            .hero-procurement-premium,
            .hero-integratedai-premium,
            .hero-reports-premium,
            .hero-templates-premium,
            .hero-aiflow-premium,
            .hero-api-premium,
            .hero-form-premium,
            .ip-section,
            .ip-features-deepdive,
            .ip-kpi-section,
            .ip-industries-section,
            .ip-faq-section,
            .ip-integrations-section,
            .features-section,
            .stats-section,
            .testimonials-section,
            .cta-section,
            .footer {
                padding-inline: 60px;
            }
        }

        .ip-container { max-width: 1200px; margin: 0 auto; }
        .ip-container-narrow { max-width: 900px; margin: 0 auto; }

        .ip-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 18px 8px 10px;
            border-radius: 100px;
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 20px;
        }

        .ip-title {
            font-size: clamp(38px, 4.5vw, 52px);
            font-weight: 800;
            letter-spacing: -2px;
            margin-bottom: 16px;
        }

        .ip-desc { font-size: 16px; color: var(--muted); line-height: 1.7; }

        /* Three.js Canvas */
        .three-canvas-container {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .three-canvas-container canvas {
            width: 100% !important;
            height: 100% !important;
            display: block;
        }

        /* ============================================= */
        /* HRMS HERO - GLASS COMMAND CENTER             */
        /* ============================================= */
        .hero-hrms {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
        }

        .hrms-grid-bg {
            position: absolute;
            inset: 0;
            background: 
                linear-gradient(90deg, rgba(79, 140, 255, 0.03) 1px, transparent 1px),
                linear-gradient(rgba(79, 140, 255, 0.03) 1px, transparent 1px);
            background-size: 80px 80px;
            mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black, transparent);
            animation: gridMove 20s linear infinite;
        }

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

        .hrms-volumetric-light {
            position: absolute;
            width: 600px;
            height: 600px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.12) 0%, transparent 70%);
            filter: blur(60px);
            animation: lightPulse 8s ease-in-out infinite;
        }

        @keyframes lightPulse {
            0%, 100% { opacity: 0.5; transform: scale(1); }
            50% { opacity: 0.8; transform: scale(1.1); }
        }

        .hrms-content {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hrms-glass-stack {
            position: relative;
            height: 500px;
            perspective: 2000px;
        }

        .glass-panel-3d {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1);
            transition: all 0.5s var(--ease-premium);
        }

        .glass-panel-3d:hover {
            transform: translateY(-10px) scale(1.02) rotateY(0) rotateX(0) !important;
            box-shadow: 0 35px 70px rgba(15, 23, 42, 0.15);
        }

		/*Stopped hover movement on the HRMS glass panels*/
		.glass-panel-3d:not(.hrms-panel-static):hover {
			transform: translateY(-10px) scale(1.02) rotateY(0) rotateX(0) !important;
			box-shadow: 0 35px 70px rgba(15, 23, 42, 0.15);
		}

		.hrms-panel-static:hover {
			transform: var(--hrms-base-transform) !important;
			box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1) !important;
		}

       /* Kept each HRMS card on a fixed base transform*/

		.gp-main {
			width: clamp(280px, 32vw, 340px);
			height: clamp(320px, 36vw, 380px);
			top: 50%;
			left: 50%;
			--hrms-base-transform: translate(-50%, -50%) rotateY(-5deg) rotateX(5deg);
			transform: var(--hrms-base-transform);
			z-index: 3;
		}

		.gp-left {
			width: clamp(220px, 24vw, 260px);
			height: clamp(180px, 18vw, 200px);
			top: 20%;
			left: 5%;
			--hrms-base-transform: rotateY(15deg) rotateX(-5deg);
			transform: var(--hrms-base-transform);
			z-index: 1;
		}

		.gp-right {
			width: clamp(220px, 24vw, 260px);
			height: clamp(190px, 20vw, 220px);
			top: 30%;
			right: 5%;
			--hrms-base-transform: rotateY(-15deg) rotateX(5deg);
			transform: var(--hrms-base-transform);
			z-index: 1;
		}

        .gp-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        .gp-avatar {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
        }

        .gp-name { font-weight: 600; font-size: 14px; }
        .gp-role { font-size: 11px; color: var(--muted); }

        .gp-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }

        .gp-stat {
            background: rgba(15, 23, 42, 0.02);
            border-radius: 12px;
            padding: 12px;
            text-align: center;
        }

        .gp-stat-value { font-family: 'Space Grotesk'; font-size: 22px; font-weight: 700; color: var(--light-blue); }
        .gp-stat-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

        .gp-activity { display: flex; flex-direction: column; gap: 8px; }

        .gp-activity-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            background: rgba(15, 23, 42, 0.02);
            border-radius: 10px;
            font-size: 11px;
        }

        .gp-activity-icon {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
        }

        .floating-hologram {
            position: absolute;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.1), rgba(123, 97, 255, 0.05));
            border: 1px solid rgba(79, 140, 255, 0.2);
            border-radius: 16px;
            padding: 16px;
            backdrop-filter: blur(10px);
            animation: hologramFloat 6s ease-in-out infinite;
        }

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

        .holo-1 { top: 10%; right: 15%; width: 180px; }
        .holo-2 { bottom: 20%; left: 10%; width: 160px; animation-delay: -3s; }

        /* ============================================= */
        /* PAYROLL HERO - DARK CINEMATIC FINTECH        */
        /* ============================================= */
        .hero-payroll {
            min-height: 100vh;
            background: linear-gradient(135deg, #0a0e1a 0%, #12172a 50%, #0d1220 100%);
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 120px 40px;
        }

        .payroll-aurora {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 800px 400px at 30% 20%, rgba(34, 197, 94, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse 600px 500px at 70% 60%, rgba(79, 140, 255, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse 500px 300px at 50% 80%, rgba(123, 97, 255, 0.05) 0%, transparent 50%);
            animation: auroraMove 15s ease-in-out infinite;
        }

        @keyframes auroraMove {
            0%, 100% { transform: translate(0, 0) scale(1); }
            33% { transform: translate(3%, -2%) scale(1.05); }
            66% { transform: translate(-2%, 3%) scale(0.95); }
        }

        .payroll-light-beam {
            position: absolute;
            width: 2px;
            height: 200px;
            background: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            animation: beamSweep 8s ease-in-out infinite;
        }

        @keyframes beamSweep {
            0% { left: 10%; opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { left: 90%; opacity: 0; }
        }

        .payroll-content {
            max-width: 1200px;
            width: 100%;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        .payroll-title {
            font-size: clamp(38px, 5vw, 80px);
            font-weight: 900;
            color: white;
            letter-spacing: -4px;
            margin-bottom: 24px;
            line-height: 0.95;
        }

        .payroll-subtitle {
            font-size: 20px;
            color: rgba(255, 255, 255, 0.5);
            max-width: 600px;
            margin: 0 auto 60px;
            line-height: 1.8;
        }

        .payroll-metrics {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .payroll-metric {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 20px;
            padding: 32px 24px;
            position: relative;
            overflow: hidden;
            transition: all 0.5s;
        }

        .payroll-metric::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.5), transparent);
            opacity: 0;
            transition: opacity 0.5s;
        }

        .payroll-metric:hover::before { opacity: 1; }

        .payroll-metric:hover {
            background: rgba(255, 255, 255, 0.06);
            transform: translateY(-8px);
        }

        .pm-value {
            font-family: 'Space Grotesk';
            font-size: 42px;
            font-weight: 800;
            background: linear-gradient(135deg, #22c55e, var(--cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 8px;
        }

        .pm-label { font-size: 13px; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; letter-spacing: 1px; }

        .currency-particle {
            position: absolute;
            font-size: 14px;
            color: rgba(34, 197, 94, 0.2);
            animation: particleRise 10s linear infinite;
            pointer-events: none;
        }

        @keyframes particleRise {
            0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
        }

        /* ============================================= */
        /* CRM HERO - 3D NETWORK EXPERIENCE             */
        /* ============================================= */
        .hero-crm {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        }

        .crm-network-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .network-node {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 20px rgba(0, 194, 255, 0.5);
            animation: nodePulse 3s ease-in-out infinite;
        }

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

        .crm-content {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 100px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .crm-visual-container {
            position: relative;
            height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .crm-orb-main {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(0, 194, 255, 0.3), rgba(20, 184, 166, 0.2));
            box-shadow: 0 0 60px rgba(0, 194, 255, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: orbRotate 20s linear infinite;
            position: relative;
        }

        @keyframes orbRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .crm-orb-inner {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, white, rgba(0, 194, 255, 0.1));
            display: flex;
            align-items: center;
            justify-content: center;
            animation: orbRotate 15s linear infinite reverse;
        }

        .crm-orb-icon { font-size: 50px; color: var(--cyan); }

        .crm-floating-node {
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            border: 2px solid rgba(0, 194, 255, 0.2);
            box-shadow: 0 10px 40px rgba(15, 23, 42, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--cyan);
            animation: nodeFloat 5s ease-in-out infinite;
        }

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

        .crm-node-1 { top: 10%; left: 15%; }
        .crm-node-2 { top: 15%; right: 20%; animation-delay: -1s; }
        .crm-node-3 { bottom: 25%; left: 10%; animation-delay: -2s; }
        .crm-node-4 { bottom: 15%; right: 15%; animation-delay: -3s; }
        .crm-node-5 { top: 45%; left: 5%; animation-delay: -1.5s; }
        .crm-node-6 { top: 50%; right: 5%; animation-delay: -2.5s; }

        /* ============================================= */
        /* INVENTORY HERO - FUTURISTIC WAREHOUSE GRID   */
        /* ============================================= */
        .hero-inventory {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #fefce8 0%, #fef9c3 50%, #fef08a 100%);
        }

        .inventory-grid-3d {
            position: absolute;
            inset: 0;
            transform: perspective(1000px) rotateX(60deg);
            transform-origin: center center;
        }

        .inv-grid-floor {
            position: absolute;
            inset: -50%;
            background:
                linear-gradient(90deg, rgba(251, 191, 36, 0.1) 1px, transparent 1px),
                linear-gradient(rgba(251, 191, 36, 0.1) 1px, transparent 1px);
            background-size: 100px 100px;
            animation: gridScroll 20s linear infinite;
        }

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

        .scan-beam {
            position: absolute;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent);
            animation: scanMove 4s ease-in-out infinite;
        }

        @keyframes scanMove {
            0%, 100% { top: 20%; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 80%; opacity: 0; }
        }

        .inventory-content {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .inventory-cubes {
            position: relative;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .inv-cube {
            position: absolute;
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(251, 191, 36, 0.2), rgba(251, 191, 36, 0.05));
            border: 1px solid rgba(251, 191, 36, 0.3);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            animation: cubeFloat 6s ease-in-out infinite;
        }

        @keyframes cubeFloat {
            0%, 100% { transform: translateY(0) rotateY(0deg); }
            50% { transform: translateY(-30px) rotateY(180deg); }
        }

        .cube-1 { top: 10%; left: 20%; }
        .cube-2 { top: 30%; right: 25%; animation-delay: -1s; width: 60px; height: 60px; }
        .cube-3 { bottom: 25%; left: 30%; animation-delay: -2s; width: 70px; height: 70px; }
        .cube-4 { bottom: 15%; right: 20%; animation-delay: -3s; }
        .cube-5 { top: 50%; left: 10%; animation-delay: -1.5s; width: 50px; height: 50px; }
        .cube-6 { top: 40%; right: 10%; animation-delay: -2.5s; width: 65px; height: 65px; }

        /* ============================================= */
        /* FINANCIAL HERO - PREMIUM DATA VIZ            */
        /* ============================================= */
        .hero-financial {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: #0f0f14;
        }

        .financial-content {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 100px;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .financial-visual {
            position: relative;
            height: 450px;
        }

        .fin-glass-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
        }

        .fin-card-1 { width: 300px; top: 0; left: 0; }
        .fin-card-2 { width: 280px; bottom: 20px; right: 0; }
        .fin-card-3 { width: 240px; top: 40%; left: 50%; transform: translate(0px, 0px); z-index: 3; }

        .fin-metric-value {
            font-family: 'Space Grotesk';
            font-size: 36px;
            font-weight: 800;
            background: linear-gradient(135deg, var(--electric-purple), var(--cyan));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .fin-metric-label { font-size: 12px; color: rgba(255, 255, 255, 0.5); margin-bottom: 8px; }
        .fin-metric-change { font-size: 12px; color: #22c55e; font-weight: 600; }

        .fin-mini-chart {
            display: flex;
            align-items: flex-end;
            gap: 4px;
            height: 60px;
            margin-top: 16px;
        }

        .fin-bar {
            flex: 1;
            background: linear-gradient(180deg, var(--electric-purple), transparent);
            border-radius: 4px 4px 0 0;
            animation: barGrow 1s ease-out forwards;
            transform-origin: bottom;
        }

        @keyframes barGrow {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }

        /* ============================================= */
        /* PREMIUM ENHANCED HERO STYLES                 */
        /* ============================================= */
        
        /* CRM Premium Hero */
        .hero-crm-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #0c1222 0%, #0f172a 50%, #0a0f1c 100%);
        }
        
        .crm-premium-mesh {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 800px 600px at 20% 30%, rgba(0, 194, 255, 0.08), transparent 50%),
                radial-gradient(ellipse 600px 400px at 80% 70%, rgba(20, 184, 166, 0.06), transparent 50%),
                radial-gradient(ellipse 400px 300px at 50% 50%, rgba(79, 140, 255, 0.04), transparent 50%);
        }
        
        .crm-ai-ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(0, 194, 255, 0.1);
            animation: aiRingPulse 8s ease-in-out infinite;
        }
        
        @keyframes aiRingPulse {
            0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
            50% { transform: scale(1.1) rotate(180deg); opacity: 0.6; }
        }
        
        .crm-customer-node {
            position: absolute;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 12px;
            animation: customerFloat 6s ease-in-out infinite;
            transition: all 0.4s var(--ease-premium);
        }
        
        .crm-customer-node:hover {
            transform: scale(1.2) !important;
            box-shadow: 0 0 40px rgba(0, 194, 255, 0.4);
        }
        
        @keyframes customerFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(5deg); }
        }
        
        .crm-connection-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 194, 255, 0.3), transparent);
            transform-origin: left center;
            animation: linePulse 4s ease-in-out infinite;
        }
        
        @keyframes linePulse {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 0.6; }
        }
        
        .crm-activity-pulse {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--cyan);
            animation: activityPulse 2s ease-out infinite;
        }
        
        @keyframes activityPulse {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(3); opacity: 0; }
        }
        
        .crm-content-premium {
            max-width: 1400px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 80px;
            align-items: center;
            position: relative;
            z-index: 2;
        }
        
        .crm-visual-premium {
            position: relative;
            height: 600px;
        }
        
        .crm-central-orb {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(0, 194, 255, 0.3), rgba(20, 184, 166, 0.15), transparent);
            box-shadow: 0 0 80px rgba(0, 194, 255, 0.3), inset 0 0 60px rgba(0, 194, 255, 0.1);
            animation: centralOrbPulse 6s ease-in-out infinite;
        }
        
        @keyframes centralOrbPulse {
            0%, 100% { box-shadow: 0 0 80px rgba(0, 194, 255, 0.3), inset 0 0 60px rgba(0, 194, 255, 0.1); }
            50% { box-shadow: 0 0 120px rgba(0, 194, 255, 0.5), inset 0 0 80px rgba(0, 194, 255, 0.2); }
        }
        
        .crm-orb-rings {
            position: absolute;
            inset: -80px;
            border-radius: 50%;
            border: 1px solid rgba(0, 194, 255, 0.1);
            animation: orbRingsRotate 20s linear infinite;
        }
        
        @keyframes orbRingsRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .crm-float-card {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 16px;
            padding: 16px 20px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
            animation: cardFloat 5s ease-in-out infinite;
            z-index: 10;
        }
        
        @keyframes cardFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-12px); }
        }

        /* Procurement Premium Hero */
        .hero-procurement-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #1a1207 0%, #29200c 50%, #1c1406 100%);
        }
        
        .procurement-glow {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 700px 500px at 30% 40%, rgba(251, 191, 36, 0.08), transparent 50%),
                radial-gradient(ellipse 500px 400px at 70% 60%, rgba(245, 158, 11, 0.06), transparent 50%);
        }
        
        .supply-chain-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.5), transparent);
            animation: supplyFlow 4s linear infinite;
        }
        
        @keyframes supplyFlow {
            0% { transform: translateX(-100%); opacity: 0; }
            50% { opacity: 1; }
            100% { transform: translateX(100vw); opacity: 0; }
        }
        
        .procurement-cube {
            position: absolute;
            background: rgba(251, 191, 36, 0.1);
            border: 1px solid rgba(251, 191, 36, 0.2);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            animation: procCubeFloat 8s ease-in-out infinite;
        }
        
        @keyframes procCubeFloat {
            0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
            25% { transform: translateY(-20px) rotateX(90deg) rotateY(0deg); }
            50% { transform: translateY(0) rotateX(90deg) rotateY(90deg); }
            75% { transform: translateY(-10px) rotateX(0deg) rotateY(90deg); }
        }
        
        .warehouse-scan {
            position: absolute;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.6), transparent);
            animation: warehouseScan 6s ease-in-out infinite;
        }
        
        @keyframes warehouseScan {
            0%, 100% { top: 10%; opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { top: 90%; opacity: 0; }
        }
        
        .procurement-metric-float {
            position: absolute;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(251, 191, 36, 0.15);
            border-radius: 16px;
            padding: 20px 24px;
            animation: metricFloat 6s ease-in-out infinite;
        }
        
        @keyframes metricFloat {
            0%, 100% { transform: translateY(0) translateX(0); }
            50% { transform: translateY(-15px) translateX(10px); }
        }

		/*procurement*/

		 .procurement-hero-visual {
            position: relative;
            min-height: 520px;
        }

        .procurement-flow-panel {
            position: absolute;
            inset: 8% 0 auto 8%;
            width: min(520px, 100%);
            padding: 28px;
            border: 1px solid rgba(251, 191, 36, 0.18);
            border-radius: 24px;
            background: rgba(12, 8, 3, 0.58);
            box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28), inset 0 0 60px rgba(251, 191, 36, 0.04);
            backdrop-filter: blur(18px);
            animation: metricFloat 7s ease-in-out infinite;
        }

        .procurement-flow-item {
            display: grid;
            grid-template-columns: 46px 1fr auto;
            gap: 16px;
            align-items: center;
            padding: 16px 0;
            border-bottom: 1px solid rgba(251, 191, 36, 0.1);
            color: rgba(255, 255, 255, 0.86);
        }

        .procurement-flow-item:last-child {
            border-bottom: 0;
        }

        .procurement-flow-item i {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(251, 191, 36, 0.12);
            color: #fbbf24;
        }

        .procurement-flow-item strong {
            display: block;
            font-size: 15px;
            margin-bottom: 4px;
        }

        .procurement-flow-item span {
            color: rgba(255, 255, 255, 0.48);
            font-size: 12px;
        }

        .procurement-flow-item em {
            color: #22c55e;
            font-size: 12px;
            font-style: normal;
            font-weight: 800;
        }

        .procurement-approval-card {
            position: absolute;
            right: 0;
            bottom: 10%;
            width: 280px;
            padding: 22px;
            border-radius: 20px;
            border: 1px solid rgba(34, 197, 94, 0.22);
            background: rgba(4, 12, 8, 0.72);
            color: white;
            box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
            animation: metricFloat 6s ease-in-out infinite reverse;
        }

        .procurement-approval-card strong {
            display: block;
            font-size: 18px;
            margin-bottom: 14px;
        }

        .procurement-approval-progress {
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.08);
            overflow: hidden;
        }

        .procurement-approval-progress span {
            display: block;
            width: 76%;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, #fbbf24, #22c55e);
            animation: shimmer 2.4s ease-in-out infinite;
        }

		.hero-payroll .payroll-subtitle,
        .simple-hero .ip-desc,
        .hero-integratedai-premium .ip-desc {
            max-width: 920px !important;
            line-height: 1.55;
        }
		
		/*procurement*/

        /* Integrated AI Premium Hero */
        .hero-integratedai-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #0a0612 0%, #1a0f2e 50%, #0d0818 100%);
        }
        
        .ai-neural-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }
        
        .neural-particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: var(--electric-purple);
            animation: neuralMove 20s linear infinite;
        }
        
        @keyframes neuralMove {
            0% { transform: translate(0, 0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
        }
        
        .ai-mega-orb {
            position: relative;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.3), rgba(123, 97, 255, 0.2), rgba(79, 140, 255, 0.1), transparent);
            box-shadow: 
                0 0 100px rgba(99, 102, 241, 0.3),
                0 0 200px rgba(123, 97, 255, 0.2),
                inset 0 0 80px rgba(99, 102, 241, 0.1);
            animation: megaOrbPulse 8s ease-in-out infinite;
        }
        
        @keyframes megaOrbPulse {
            0%, 100% { 
                transform: scale(1); 
                box-shadow: 0 0 100px rgba(99, 102, 241, 0.3), 0 0 200px rgba(123, 97, 255, 0.2), inset 0 0 80px rgba(99, 102, 241, 0.1);
            }
            50% { 
                transform: scale(1.05); 
                box-shadow: 0 0 150px rgba(99, 102, 241, 0.5), 0 0 300px rgba(123, 97, 255, 0.3), inset 0 0 120px rgba(99, 102, 241, 0.2);
            }
        }
        
        .ai-orb-shell {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(99, 102, 241, 0.15);
            animation: shellRotate 30s linear infinite;
        }
        
        @keyframes shellRotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .ai-thought-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.4), transparent);
            animation: thoughtPulse 3s ease-in-out infinite;
        }
        
        @keyframes thoughtPulse {
            0%, 100% { opacity: 0; transform: scaleX(0.5); }
            50% { opacity: 1; transform: scaleX(1); }
        }
        
        .ai-capability-card {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(99, 102, 241, 0.15);
            border-radius: 16px;
            padding: 18px 22px;
            animation: capabilityFloat 5s ease-in-out infinite;
            z-index: 10;
        }

        .hero-integratedai-premium .btn-primary {
            margin: 0 auto;
        }
        
        @keyframes capabilityFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        /* Reports Designer Premium Hero */
        .hero-reports-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #eef4fb 50%, #e5edf7 100%);
        }
        
        .reports-glow {
            position: absolute;
            inset: 0;
            background: 
                linear-gradient(rgba(148, 163, 184, 0.18) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148, 163, 184, 0.18) 1px, transparent 1px),
                radial-gradient(ellipse 600px 400px at 20% 30%, rgba(17, 115, 212, 0.1), transparent 50%),
                radial-gradient(ellipse 400px 300px at 80% 70%, rgba(139, 92, 246, 0.08), transparent 50%);
            background-size: 32px 32px, 32px 32px, auto, auto;
        }
        
        .report-chart-bar {
            position: absolute;
            width: 30px;
            background: linear-gradient(180deg, rgba(249, 115, 22, 0.6), rgba(249, 115, 22, 0.1));
            border-radius: 6px 6px 0 0;
            animation: chartBarGrow 1.5s ease-out forwards;
            transform-origin: bottom;
        }
        
        @keyframes chartBarGrow {
            from { transform: scaleY(0); }
            to { transform: scaleY(1); }
        }
        
        .report-line-chart {
            position: absolute;
            fill: none;
            stroke: rgba(249, 115, 22, 0.6);
            stroke-width: 2;
            stroke-linecap: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            animation: lineDraw 3s ease-out forwards;
        }
        
        @keyframes lineDraw {
            to { stroke-dashoffset: 0; }
        }
        
        .floating-dashboard {
            position: absolute;
            background: rgba(0, 0, 0, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(249, 115, 22, 0.15);
            border-radius: 20px;
            padding: 24px;
            animation: dashboardFloat 6s ease-in-out infinite;
        }
        
        @keyframes dashboardFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(1deg); }
        }
        
        .kpi-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(249, 115, 22, 0.1);
            border: 1px solid rgba(249, 115, 22, 0.2);
            border-radius: 100px;
            font-size: 12px;
            color: #f97316;
        }

        .dashboard-metrics {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .dashboard-metrics .metric-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
        }

        .dashboard-metrics .metric-header .metric-title {
            font-size: 20px;
            font-weight: 800;
            color: var(--dark);
            line-height: 1.1;
        }

        .dashboard-metrics .metric-summary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .dashboard-metrics .metric-card {
            display: flex;
            flex-direction: column;
            gap: 6px;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            border-radius: 16px;
            padding: 14px;
            border: 1px solid rgba(15, 23, 42, 0.06);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .dashboard-metrics .metric-label {
            font-size: 11px;
            color: var(--muted);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }

        .dashboard-metrics .metric-value {
            font-size: 22px;
            font-weight: 800;
            color: var(--dark);
            line-height: 1.05;
        }

        .dashboard-metrics .metric-note {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.5;
        }

        .dashboard-chart {
            width: 100%;
            min-height: 100px;
            padding: 12px 0 0;
        }

        .chart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .chart-title {
            font-size: 13px;
            font-weight: 600;
            color: var(--dark);
        }

        .chart-legend {
            display: flex;
            gap: 12px;
            font-size: 11px;
            color: var(--muted);
        }

        .chart-legend-color {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 6px;
        }

        .chart-legend-color.blue {
            background: var(--light-blue);
        }

        .chart-legend-color.purple {
            background: var(--electric-purple);
        }

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

        .chart-svg line {
            stroke-linecap: square;
        }

        .chart-line {
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            opacity: 0.92;
            animation: lineDraw 2s ease-out forwards, dashboardLinePulse 4s ease-in-out 2s infinite alternate;
        }

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

        @keyframes dashboardLinePulse {
            from {
                opacity: 0.85;
                filter: drop-shadow(0 0 8px rgba(79, 140, 255, 0.12));
            }

            to {
                opacity: 1;
                filter: drop-shadow(0 0 16px rgba(79, 140, 255, 0.22));
            }
        }

        .reports-builder-mockup,
        .templates-designer-mockup {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(148, 163, 184, 0.24);
            border-radius: 8px;
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.18);
            overflow: hidden;
            transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.55s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .reports-builder-mockup:hover,
        .templates-designer-mockup:hover {
            transform: translateY(-10px) scale(1.01);
            box-shadow: 0 36px 96px rgba(15, 23, 42, 0.22);
        }

        .builder-sweep {
            position: absolute;
            inset: -20% auto -20% -40%;
            width: 48%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.16), transparent);
            transform: skewX(-18deg) translateX(-120%);
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: screen;
        }

        .reports-builder-mockup:hover .builder-sweep,
        .templates-designer-mockup:hover .builder-sweep {
            opacity: 1;
            animation: builderSweep 2.9s ease-in-out infinite;
        }

        .builder-cursor {
            position: absolute;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.82);
            color: #1173d4;
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
            opacity: 0;
            pointer-events: none;
        }

        .reports-builder-mockup:hover .builder-cursor,
        .templates-designer-mockup:hover .builder-cursor {
            opacity: 1;
        }

        .builder-cursor::after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: inherit;
            border: 1px solid rgba(17, 115, 212, 0.18);
            animation: builderCursorPulse 1.8s ease-in-out infinite;
        }

        .reports-builder-mockup:hover .rb-cursor {
            animation: builderCursorDrift 4.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        .templates-designer-mockup:hover .td-cursor {
            animation: templateCursorDrift 4.8s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        #section-reports .rb-btn,
        #section-templates .td-controls,
        #section-reports .showcase-tb-btn.primary,
        #section-templates .showcase-tb-btn.primary,
        #section-reports .slide-cta,
        #section-templates .slide-cta {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 14px 30px rgba(79, 140, 255, 0.22);
        }

        #section-reports .showcase-tb-btn,
        #section-templates .showcase-tb-btn,
        #section-reports .td-tool,
        #section-templates .td-tool {
            border-color: rgba(79, 140, 255, 0.14);
            color: var(--primary);
            background: rgba(79, 140, 255, 0.08);
        }

        #section-templates .showcase-tb-btn.primary.rose,
        #section-reports .showcase-tb-btn.primary.rose {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            color: #ffffff;
        }
        
        .reports-builder-mockup {
            display: grid;
            grid-template-columns: 140px 1fr;
            min-height: 430px;
            animation: builderWorkspaceFloat 7s ease-in-out infinite;
        }

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

        .rb-sidebar,
        .td-sidebar,
        .td-props {
            background: #ffffff;
            border-right: 1px solid #e2e8f0;
            padding: 14px;
        }

        .rb-header,
        .td-header {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 16px;
            border-bottom: 1px solid #e2e8f0;
            background: #ffffff;
        }

        .rb-title,
        .td-title { font-size: 13px; font-weight: 800; color: #1e293b; }
        .rb-subtitle,
        .td-subtitle { font-size: 10px; color: #64748b; margin-top: 2px; }

        .rb-btn,
        .td-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 6px;
            background: #2563eb;
            color: #ffffff;
            font-size: 10px;
            font-weight: 700;
        }

        .rb-entity,
        .td-tool {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            border-radius: 7px;
            font-size: 10px;
            font-weight: 700;
            color: #334155;
            margin-bottom: 8px;
        }

        .rb-workspace {
            display: grid;
            grid-template-rows: 1fr 145px;
            background: #f8fafc;
        }

        .rb-canvas {
            position: relative;
            min-height: 245px;
            background-image: linear-gradient(#e2e8f0 1px, transparent 1px), linear-gradient(90deg, #e2e8f0 1px, transparent 1px);
            background-size: 24px 24px;
            padding: 28px;
        }

        .rb-node {
            position: absolute;
            width: 128px;
            padding: 12px;
            background: #ffffff;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            font-size: 10px;
            font-weight: 800;
            color: #1e293b;
            animation: rbNodePulse 4s ease-in-out infinite;
        }

        .rb-node span { display: block; margin-top: 6px; font-size: 9px; color: #64748b; font-weight: 600; }
        .rb-link { position: absolute; height: 2px; background: linear-gradient(90deg, #3b82f6, #8b5cf6); transform-origin: left center; }

        .rb-node:nth-child(2) { animation-delay: -1s; }
        .rb-node:nth-child(4) { animation-delay: -2s; }

        @keyframes rbNodePulse {
            0%, 100% { box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08); transform: scale(1); }
            50% { box-shadow: 0 14px 34px rgba(17, 115, 212, 0.16); transform: scale(1.025); }
        }

        .rb-fields {
            border-top: 1px solid #e2e8f0;
            background: #ffffff;
            padding: 12px 16px;
        }

        .rb-table-row {
            display: grid;
            grid-template-columns: 1.4fr 1fr 0.8fr;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 10px;
            color: #475569;
        }

		.rb-cursor {
            top: 34px;
            left: 28px;
        }
        .templates-designer-mockup {
            display: grid;
            grid-template-columns: 120px 1fr 130px;
            min-height: 430px;
            background: #f3f4f6;
            animation: designerWorkspaceFloat 7s ease-in-out infinite;
        }

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

        .td-toolbar {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 14px;
            border-bottom: 1px solid #e5e7eb;
            background: #ffffff;
        }

        .td-controls {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            font-size: 10px;
            color: #4b5563;
        }

        .td-canvas {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 28px 18px;
            background: #f3f4f6;
            background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
            background-size: 28px 28px;
        }

        .td-paper {
            width: 210px;
            min-height: 285px;
            background: #ffffff;
            border: 1px solid #e5e7eb;
            box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
            padding: 22px;
            position: relative;
        }

        .td-paper-line { height: 8px; border-radius: 4px; background: #e5e7eb; margin-bottom: 10px; }
        .td-paper-block { height: 54px; border-radius: 6px; border: 1px solid #bfdbfe; background: #eff6ff; margin: 18px 0; }
        .td-props { border-right: 0; border-left: 1px solid #e5e7eb; }

        .td-selected-box {
            position: absolute;
            left: 34px;
            top: 112px;
            width: 142px;
            height: 46px;
            border: 2px solid #1173d4;
            box-shadow: 0 0 0 3px rgba(17, 115, 212, 0.12);
            animation: selectedBoxPulse 2.8s ease-in-out infinite;
        }

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

        /* Templates Builder Premium Hero */
        .hero-templates-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
        }
        
        .template-mesh {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 500px 400px at 30% 40%, rgba(132, 204, 22, 0.06), transparent 50%),
                radial-gradient(ellipse 400px 300px at 70% 60%, rgba(34, 197, 94, 0.04), transparent 50%);
        }
        
        .template-card-3d {
            position: absolute;
            background: white;
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            animation: templateCardFloat 5s ease-in-out infinite;
            transition: all 0.5s var(--ease-premium);
        }
        
        .template-card-3d:hover {
            transform: translateY(-20px) scale(1.05) !important;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
        }
        
        @keyframes templateCardFloat {
            0%, 100% { transform: translateY(0) rotateY(0deg); }
            50% { transform: translateY(-10px) rotateY(5deg); }
        }
        
        .template-preview-strip {
            height: 4px;
            background: linear-gradient(90deg, #84cc16, #22c55e, #10b981);
        }

        /* AI Flow Builder Premium Hero */
        .hero-aiflow-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #0d0615 0%, #1a0a2e 50%, #0f051d 100%);
        }
        
        .aiflow-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(236, 72, 153, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(236, 72, 153, 0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black, transparent);
        }
        
        .flow-node {
            position: absolute;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(236, 72, 153, 0.2);
            border-radius: 12px;
            padding: 14px 18px;
            color: rgba(255, 255, 255, 0.95);
            animation: flowNodePulse 4s ease-in-out infinite;
        }
        
        @keyframes flowNodePulse {
            0%, 100% { box-shadow: 0 0 20px rgba(236, 72, 153, 0.1); }
            50% { box-shadow: 0 0 40px rgba(236, 72, 153, 0.3); }
        }
        
        .flow-connection {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, rgba(236, 72, 153, 0.1), rgba(236, 72, 153, 0.5), rgba(236, 72, 153, 0.1));
            animation: flowPulse 2s ease-in-out infinite;
        }
        
        @keyframes flowPulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 1; }
        }
        
        .flow-particle {
            position: absolute;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ec4899;
            animation: flowParticleMove 3s linear infinite;
        }
        
        @keyframes flowParticleMove {
            0% { transform: translateX(0); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translateX(200px); opacity: 0; }
        }

        /* API Integration Premium Hero */
        .hero-api-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #0a0f14 0%, #12181f 50%, #0d1117 100%);
        }
        
        .code-window {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 12px;
            overflow: hidden;
            animation: codeWindowFloat 6s ease-in-out infinite;
        }
        
        @keyframes codeWindowFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        .code-header {
            display: flex;
            gap: 6px;
            padding: 12px 16px;
            background: rgba(0, 0, 0, 0.5);
            border-bottom: 1px solid rgba(100, 116, 139, 0.1);
        }
        
        .code-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }
        
        .code-content {
            padding: 16px;
            font-family: 'Monaco', 'Menlo', monospace;
            font-size: 12px;
            line-height: 1.6;
        }
        
        .api-particle {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #64748b;
            animation: apiParticleFlow 5s linear infinite;
        }
         
        @keyframes apiParticleFlow {
            0% { transform: translate(0, 0); opacity: 0; }
            20% { opacity: 1; }
            80% { opacity: 1; }
            100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
        }
        
        .endpoint-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: rgba(100, 116, 139, 0.1);
            border: 1px solid rgba(100, 116, 139, 0.2);
            border-radius: 6px;
            font-family: 'Monaco', monospace;
            font-size: 11px;
            color: #64748b;
        }

        /* Enhanced Form Pages */
        .hero-form-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 120px 40px;
        }
        
        .form-glow-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            animation: formGlowPulse 10s ease-in-out infinite;
        }
        
        @keyframes formGlowPulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.2); opacity: 0.5; }
        }
        
        .form-particle-field {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        
        .form-particle {
            position: absolute;
            width: 2px;
            height: 2px;
            border-radius: 50%;
            background: currentColor;
            opacity: 0.3;
            animation: formParticleRise 15s linear infinite;
        }
        
        @keyframes formParticleRise {
            0% { transform: translateY(100vh); opacity: 0; }
            10% { opacity: 0.3; }
            90% { opacity: 0.3; }
            100% { transform: translateY(-100px); opacity: 0; }
        }
        
        .form-card-premium {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(40px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 28px;
            padding: 48px;
            box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .form-card-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--light-blue), var(--electric-purple), var(--cyan));
        }
        
        .info-card-premium {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(0, 0, 0, 0.05);
            border-radius: 24px;
            padding: 36px;
            transition: all 0.4s var(--ease-premium);
        }
        
        .info-card-premium:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        }

        /* ============================================= */
        /* SIMPLE HERO                                  */
        /* ============================================= */
        .simple-hero {
            min-height: 80vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 140px 40px 80px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg,        #f8faff 0%, var(--white) 100%);
        }

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

        .simple-section { padding: 80px 40px; }

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

        .simple-form-container {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: var(--radius-xl);
            padding: 48px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);        }

        .simple-info-card {
            background: var(--soft-gray);
            border-radius: var(--radius-xl);
            padding: 40px;
        }

        .info-item { display: flex; gap: 16px; margin-bottom: 28px; }
        .info-item:last-child { margin-bottom: 0; }

        .info-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .info-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
        .info-text { font-size: 13px; color: var(--muted); line-height: 1.6; }

        /* ============================================= */
        /* UNIVERSAL INNER PAGE SECTIONS                */
        /* ============================================= */
        .ip-features-deepdive { padding: 120px 40px; background: var(--soft-gray); }

        .ip-features-deepdive-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .ip-deepdive-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            padding: 36px;
            transition: all 0.5s var(--ease-premium);
            cursor: default;
            position: relative;
            overflow: hidden;
        }

        .ip-deepdive-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--light-blue), var(--electric-purple));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s;
        }

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

        .ip-deepdive-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1);
        }

        .ip-icon-box {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin-bottom: 20px;
        }
        
        .ip-card-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
        .ip-card-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }

        .ip-deepdive-mini {
            margin-top: 20px;
            background: var(--soft-gray);
            border-radius: var(--radius-md);
            padding: 16px;
        }

        .ip-deepdive-bar {
            height: 5px;
            border-radius: 3px;
            background: rgba(15, 23, 42, 0.04);
            margin-bottom: 6px;
            overflow: hidden;
        }

        .ip-deepdive-bar:last-child { margin-bottom: 0; }

        .ip-deepdive-bar-fill {
            height: 100%;
            border-radius: 3px;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 1s ease-out;
        }

        .ip-deepdive-bar-fill.animate { transform: scaleX(1); }

        /* Workflow Timeline */
        .ip-workflow-section { padding: 120px 40px; position: relative; }

        .ip-workflow-timeline {
            max-width: 900px;
            margin: 0 auto;
            position: relative;
        }

        .ip-workflow-line {
            position: absolute;
            left: 34px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: linear-gradient(to bottom, rgba(79, 140, 255, 0.1), rgba(123, 97, 255, 0.1), rgba(0, 194, 255, 0.1));
        }

        .ip-workflow-step {
            display: flex;
            gap: 34px;
            margin-bottom: 48px;
            position: relative;
        }

        .ip-workflow-step:last-child { margin-bottom: 0; }

        .ip-workflow-marker {
            width: 68px;
            height: 68px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            flex-shrink: 0;
            position: relative;
            z-index: 2;
            transition: all 0.4s;
        }

        .ip-workflow-step:hover .ip-workflow-marker { transform: scale(1.08); }

        .ip-workflow-content {
            flex: 1;
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.4s;
        }

        .ip-workflow-step:hover .ip-workflow-content {
            transform: translateX(8px);
            box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
        }

        .ip-workflow-num {
            font-family: 'Space Grotesk';
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .ip-workflow-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
        .ip-workflow-desc { font-size: 14px; color: var(--muted); line-height: 1.7; }

        /* Testimonials */
        .ip-testimonials-section { padding: 120px 40px; background: var(--soft-gray); }

        .ip-testimonials-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .ip-testimonial-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            padding: 32px;
            transition: all 0.5s;
        }

        .ip-testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.1); }

        .ip-testimonial-stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--amber); font-size: 14px; }
        .ip-testimonial-text { font-size: 15px; line-height: 1.8; margin-bottom: 24px; }
        .ip-testimonial-author { display: flex; align-items: center; gap: 14px; }

        .ip-testimonial-avatar {
            width: 44px;
            height: 44px;
            border-radius: var(--radius-md);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
            font-weight: 700;
            color: white;
        }

        .ip-testimonial-name { font-size: 14px; font-weight: 600; }
        .ip-testimonial-role { font-size: 11px; color: var(--muted); }

        /* CTA Section */
        .ip-cta-section {
            padding: 120px 40px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #f0f4ff, #ede9fe, #f0fdfa);
        }

        .ip-cta-content {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
            position: relative;
            z-index: 2;
        }

        /* KPI Section */
        .ip-kpi-section {
            padding: 80px 40px;
            background: var(--soft-gray);
        }

        .ip-kpi-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .ip-kpi-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            padding: 32px;
            text-align: center;
            transition: all 0.4s;
        }

        .ip-kpi-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
        }

        .ip-kpi-value {
            font-family: 'Space Grotesk';
            font-size: 42px;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .ip-kpi-label {
            font-size: 13px;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* Industries Section */
        .ip-industries-section { padding: 120px 40px; }

        .ip-industries-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .ip-industry-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            padding: 32px;
            text-align: center;
            transition: all 0.5s;
        }

        .ip-industry-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 28px 70px rgba(15, 23, 42, 0.1);
        }

        .ip-industry-icon {
            width: 56px;
            height: 56px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin: 0 auto 18px;
        }

        .ip-industry-name { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
        .ip-industry-desc { font-size: 12px; color: var(--muted); line-height: 1.6; }

        /* FAQ Section */
        .ip-faq-section { padding: 120px 40px; background: var(--soft-gray); }

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

        .ip-faq-item {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-lg);
            margin-bottom: 14px;
            overflow: hidden;
            transition: all 0.4s;
        }

        .ip-faq-item:hover { border-color: rgba(79, 140, 255, 0.12); }

        .ip-faq-question {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 22px 28px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s;
            width: 100%;
            text-align: left;
        }

        .ip-faq-question:hover { color: var(--light-blue); }
        .ip-faq-question i { font-size: 12px; transition: transform 0.4s; }

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

        .ip-faq-answer {
            padding: 0 28px;
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease;
        }

        .ip-faq-item.open .ip-faq-answer {
            max-height: 300px;
            padding: 0 28px 24px;
        }

        .ip-faq-answer p { font-size: 14px; color: var(--muted); line-height: 1.8; }

        /* Integration Cards */
        .ip-integrations-section { padding: 120px 40px; }

        .ip-integrations-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 16px;
        }

        .ip-integration-card {
            background: var(--white);
            border: 1px solid rgba(15, 23, 42, 0.05);
            border-radius: var(--radius-md);
            padding: 24px;
            text-align: center;
            transition: all 0.4s;
        }

        .ip-integration-card:hover {
            transform: translateY(-4px) scale(1.02);
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
            border-color: rgba(79, 140, 255, 0.15);
        }

        .ip-integration-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            margin: 0 auto 12px;
        }

        .ip-integration-name { font-size: 13px; font-weight: 600; }

        /* ============================================= */
        /* RESPONSIVE - TABLET                         */
        /* ============================================= */
        @media (max-width: 1024px) {
            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 60px;
            }

            .hero-left {
                max-width: 100%;
            }

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

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

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

            .hero-right {
                max-width: 100%;
                margin: 0 auto;
                padding: 0 12px;
            }

            .hero-title {
                font-size: 40px;
            }

            .hero-dynamic {
                font-size: 34px;
            }

            .hero-subtitle {
                white-space: normal;
            }

            .dash-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .dashboard-interface {
                min-height: auto;
            }

            .dash-body {
                padding: 14px;
            }

            .dashboard-stats {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            .stat-card {
                padding: 16px 14px;
            }

            .dash-right .agent-card {
                flex-direction: row;
                align-items: center;
            }

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

            .chart-svg {
                height: 110px;
            }

            .activity-item {
                grid-template-columns: auto 1fr;
            }

            .activity-time {
                justify-self: end;
            }

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

            .ai-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .ai-visual {
                height: 350px;
                order: -1;
            }

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

            .testimonials-track {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }

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

            .mega-dropdown {
                width: 500px;
            }

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

            .hrms-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .crm-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .crm-content-premium {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .inventory-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .financial-content {
                grid-template-columns: 1fr;
                gap: 60px;
            }

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

            .simple-grid {
                grid-template-columns: 1fr;
                gap: 40px;
            }

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

            .ip-testimonials-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }

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

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

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

            .fin-glass-card {
                position: relative;
                width: 100%;
                margin-bottom: 20px;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
            }

            .financial-visual {
                height: auto;
                display: flex;
                flex-direction: column;
                gap: 20px;
            }

            .gp-left,
            .gp-right {
                display: none;
            }

            .gp-main {
                transform: translate(-50%, -50%) rotateY(0deg) rotateX(0deg);
                width: 100%;
                max-width: 340px;
            }

            .hrms-glass-stack {
                height: auto;
                min-height: 350px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .holo-1,
            .holo-2 {
                display: none;
            }

            .crm-visual-container {
                height: 350px;
            }

            .crm-visual-premium {
                height: 400px;
            }

            .crm-float-card {
                display: none;
            }

            .crm-customer-node {
                display: none;
            }
        }

        /* ============================================= */
        /* RESPONSIVE - MOBILE                          */
        /* ============================================= */
        @media (max-width: 768px) {
            /* Navbar */
            .nav-center { display: none; }
            .nav-mobile-toggle { display: block; color: var(--light-blue); }
            .mega-dropdown { display: none !important; }
            .nav-actions .btn-secondary,
            .nav-actions .btn-primary { display: none; }
            
            /* Hero */
            .hero {
                padding: 100px 20px 60px;
                min-height: auto;
            }

            .hero-title {
                font-size: 34px;
                letter-spacing: -1.3px;
                line-height: 1.08;
            }

            .hero-dynamic {
                font-size: 28px;
            }

            .hero-subtitle {
                white-space: normal;
            }

            .hero-subtitle {
                font-size: 16px;
                line-height: 1.6;
            }

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

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

            .hero-trust {
                flex-direction: column;
                text-align: center;
            }

            .hero-right {
                margin-top: 20px;
            }

            .dashboard-interface {
                min-height: auto;
            }

            .dash-body {
                min-height: auto;
                padding: 14px;
            }

            .dash-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

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

            .stat-card {
                padding: 16px 14px;
            }

            .dashboard-activity {
                gap: 12px;
            }

            .module-grid {
                grid-template-columns: 1fr;
            }

            .dashboard-metrics {
                display: flex;
                flex-direction: column;
                gap: 16px;
            }

            .dash-right .agent-card {
                flex-direction: column;
                align-items: stretch;
                width: 100%;
            }

            .dash-right .agent-card .ac-left {
                width: 100%;
            }

            .dash-title-overlay {
                top: 14px;
                left: 16px;
                right: 16px;
            }

            .agent-card {
                padding: 10px 12px;
            }

            .ac-icon {
                width: 30px;
                height: 30px;
            }

            .chart-svg {
                height: 130px;
            }

            .chart-title {
                font-size: 12px;
            }

            .chart-legend {
                gap: 10px;
                font-size: 11px;
            }

            .dash-grid-label {
                font-size: 11px;
                letter-spacing: 0.16em;
            }

            .hero-dashboard {
                margin-bottom: 40px;
                padding-bottom: 40px;
            }

            .activity-item {
                grid-template-columns: auto 1fr;
                padding: 12px 14px;
            }

            .activity-time {
                justify-self: end;
            }

            /* Floating Cards */
            .floating-card { display: none; }
            
            /* Trusted */
            .trusted-section {
                padding: 40px 20px;
            }

            .marquee-item {
                font-size: 16px;
                gap: 6px;
            }

            /* Features */
            .features-section { padding: 80px 20px; }
            .features-grid { grid-template-columns: 1fr; }
            .feature-card { padding: 24px; }
            
            /* AI Section */
            .ai-section { padding: 80px 20px; }
            .ai-visual { height: 280px; }
            .ai-orb { width: 200px; height: 200px; }
            .ai-orb-ring:nth-child(3) { display: none; }
            .ai-floating-card { display: none; }
            
            /* Stats */
            .stats-section { padding: 60px 20px; }
            .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .stat-number { font-size: 38px; }
            
            /* Testimonials */
            .testimonials-section { padding: 80px 20px; }
            
            /* CTA */
            .cta-section { padding: 80px 20px; }
            
            /* Footer */
            /* .inline-enquiry-strip { padding: 40px 20px 0; } */
            .inline-enquiry-card {
                padding: 28px 24px;
                flex-direction: column;
                align-items: flex-start;
            }
            .inline-enquiry-card .btn-primary {
                width: 100%;
                justify-content: center;
            }
            .footer { padding: 60px 20px 40px; }
            .footer-grid { grid-template-columns: 1fr; gap: 30px; }
            .footer-bottom { flex-direction: column; text-align: center; }
            
            /* Section Titles */
            .section-title { font-size: 32px; letter-spacing: -1px; }
            .section-subtitle { font-size: 16px; }
            .ip-title { font-size: 32px; letter-spacing: -1px; }
            .ip-desc { font-size: 16px; }
            
             /* Features Grid */
            .features-grid {
                grid-template-columns: 1fr;
            }

            .feature-card {
                padding: 24px;
            }

             /* Force single column for all grids on mobile */
            .selection-cards-grid { grid-template-columns: 1fr; }
            .selection-cards-grid.three-col { grid-template-columns: 1fr; }
            
            /* Modals & Forms */
            .modal-box { padding: 32px 24px; }
            .form-row { grid-template-columns: 1fr; }
            .social-btns { flex-direction: column; }
            
            /* Navbar scrolled */
            .navbar { padding: 12px 20px; }
            .navbar.scrolled { padding: 10px 20px; }
            
            /* HRMS Page */
            .hero-hrms { padding: 100px 20px 60px; }
            .gp-stats { grid-template-columns: 1fr 1fr; }
            .hrms-glass-stack { min-height: 300px; }
            
            /* Payroll Page */
            .hero-payroll { padding: 100px 20px 60px; }
            .payroll-title { font-size: 40px; letter-spacing: -2px; }
            .payroll-subtitle { font-size: 16px; }
            .payroll-metrics { grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 10px; }
            .pm-value { font-size: 32px; }
            .pm-label { font-size: 11px; }
            
            /* CRM Page */
            .hero-crm, .hero-crm-premium { padding: 100px 20px 60px; }
            .crm-visual-container { height: 250px; }
            .crm-orb-main { width: 140px; height: 140px; }
            .crm-orb-inner { width: 110px; height: 110px; }
            .crm-orb-icon { font-size: 36px; }
            .crm-floating-node { width: 40px; height: 40px; font-size: 10px; }
            
            /* Inventory Page */
            .hero-inventory { padding: 100px 20px 60px; }
            .inventory-cubes { height: 250px; }
            .inv-cube { width: 50px !important; height: 50px !important; }
            .inv-cube i { font-size: 16px !important; }
            
            /* Financial Page */
            .hero-financial { padding: 100px 20px 60px; }
            .financial-visual { gap: 16px; }
            .fin-glass-card { padding: 20px; }
            .fin-metric-value { font-size: 28px; }
            .fin-mini-chart { height: 50px; }
            
            /* Procurement Page */
            .hero-procurement-premium { padding: 100px 20px 60px; }
            .procurement-metric-float { position: relative; margin-bottom: 16px; animation: none; }
            
            /* Integrated AI Page */
            .hero-integratedai-premium { padding: 100px 20px 60px; }
            .ai-mega-orb { width: 220px; height: 220px; }
            .ai-capability-card {
                position: relative;
                margin-bottom: 16px;
                animation: none;
                width: min(100%, 260px) !important;
                max-width: 100% !important;
                padding: 14px 18px !important;
                top: auto !important;
                left: auto !important;
                right: auto !important;
                bottom: auto !important;
                transform: none !important;
            }
            .hero-integratedai-premium .btn-primary,
            .hero-integratedai-premium .btn-secondary {
                margin: 0 auto !important;
                width: min(100%, 340px) !important;
                max-width: 340px !important;
                display: inline-flex !important;
                justify-content: center !important;
            }
            .hero-integratedai-premium div[style*="height: 400px;"] {
                height: auto !important;
                min-height: 280px !important;
                padding-bottom: 18px !important;
            }
            
            /* Reports, Templates, Flow, API Pages */
            .hero-reports-premium, .hero-templates-premium, .hero-aiflow-premium, .hero-api-premium { padding: 100px 20px 60px; }
            .floating-dashboard { position: relative; margin-bottom: 16px; animation: none; }
            .template-card-3d { position: relative; margin-bottom: 16px; animation: none; }
            .flow-node { position: relative; margin-bottom: 16px; animation: none; }
            .code-window { position: relative; margin-bottom: 16px; animation: none; width: 100% !important; }

            /* MOBILE HERO SECTION FIX */
            .hero-procurement-premium > div:last-child,
            .hero-reports-premium > div:last-child,
            .hero-templates-premium > div:last-child,
            .hero-aiflow-premium > div:last-child,
            .hero-api-premium > div:last-child {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: none !important;
                gap: 40px !important;
                text-align: center !important;
                align-items: center !important;
                justify-content: flex-start !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 0 20px !important;
            }
            
            /* Text content appears first */
            .hero-procurement-premium > div:last-child > div:first-child,
            .hero-reports-premium > div:last-child > div:first-child,
            .hero-templates-premium > div:last-child > div:first-child,
            .hero-aiflow-premium > div:last-child > div:first-child,
            .hero-api-premium > div:last-child > div:first-child {
                order: 1 !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            
            /* Visual/Graphic appears after buttons */
            .hero-procurement-premium > div:last-child > div:nth-child(2),
            .hero-reports-premium > div:last-child > div:nth-child(2),
            .hero-templates-premium > div:last-child > div:nth-child(2),
            .hero-aiflow-premium > div:last-child > div:nth-child(2),
            .hero-api-premium > div:last-child > div:nth-child(2) {
                order: 2 !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 280px !important;
                position: relative !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                gap: 24px !important;
            }
            
            /* Ensure hero section uses flex column layout */
            .hero-procurement-premium,
            .hero-integratedai-premium,
            .hero-reports-premium,
            .hero-templates-premium,
            .hero-aiflow-premium,
            .hero-api-premium {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: flex-start !important;
                min-height: auto !important;
                padding: 100px 0 60px !important;
                overflow-x: hidden !important;
            }
            
            /* Background elements - keep relative and contained */
            .procurement-glow,
            .ai-neural-bg,
            .reports-glow,
            .template-mesh,
            .aiflow-grid {
                position: absolute !important;
                width: 100% !important;
                height: 100% !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
            }
            
            /* Three.js canvas container */
            .hero-procurement-premium .three-canvas-container,
            .hero-integratedai-premium .three-canvas-container,
            .hero-reports-premium .three-canvas-container,
            .hero-templates-premium .three-canvas-container,
            .hero-aiflow-premium .three-canvas-container,
            .hero-api-premium .three-canvas-container {
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                width: 100% !important;
                height: 100% !important;
                pointer-events: none !important;
            }
            
            /* Floating elements - position relative, stack vertically */
            .procurement-metric-float,
            .ai-capability-card,
            .floating-dashboard,
            .template-card-3d,
            .flow-node,
            .code-window {
                position: relative !important;
                width: 100% !important;
                max-width: 340px !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                transform: none !important;
                margin: 0 auto 16px !important;
                animation: none !important;
            }

            .hero-procurement-premium .procurement-metric-float {
                order: 2 !important;
                width: min(100%, 340px) !important;
                margin: 20px auto 0 !important;
            }

            .hero-procurement-premium > div:last-child > div:nth-child(2) {
                display: none !important;
            }
            
            /* AI Mega Orb - center and scale down */
            .ai-mega-orb {
                position: relative !important;
                width: 240px !important;
                height: 240px !important;
                margin: 0 auto 24px !important;
            }
            
            .ai-orb-shell {
                display: none !important;
            }
            
            /* CRM Premium Hero Mobile Fix */
            .crm-content-premium {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: none !important;
                gap: 40px !important;
                text-align: center !important;
                align-items: center !important;
                width: 100% !important;
                padding: 0 20px !important;
            }
            
            .crm-visual-premium {
                order: 2 !important;
                width: 100% !important;
                height: auto !important;
                min-height: 300px !important;
                position: relative !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }
            
            .crm-central-orb {
                position: relative !important;
                width: 180px !important;
                height: 180px !important;
                margin: 0 auto 16px !important;
                top: auto !important;
                left: auto !important;
                transform: none !important;
            }
            
            .crm-customer-node {
                display: none !important;
            }
            
            .crm-float-card {
                position: relative !important;
                width: 100% !important;
                max-width: 340px !important;
                margin: 0 auto 12px !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                animation: none !important;
            }
            
            /* Flow connections - hide on mobile */
            .flow-connection,
            .flow-particle,
            .supply-chain-line {
                display: none !important;
            }
            
            /* Procurement cubes - simplified */
            .procurement-cube {
                display: none !important;
            }
            
            /* Code windows */
            .code-window {
                width: 100% !important;
                max-width: 340px !important;
            }
            
            .code-content {
                font-size: 11px !important;
                line-height: 1.5 !important;
            }
            
            /* Warehouse scan animation */
            .warehouse-scan {
                display: none !important;
            }
            
            /* Neural particles */
            .neural-particle {
                display: none !important;
            }
            
            /* Chart bars - keep but scale */
            .report-chart-bar {
                width: 20px !important;
            }
            
            /* Template cards */
            .template-card-3d {
                width: 100% !important;
                max-width: 280px !important;
            }
            
            /* Title and subtitle centering */
            .hero-procurement-premium .ip-title,
            .hero-procurement-premium .ip-desc,
            .hero-integratedai-premium .ip-title,
            .hero-integratedai-premium .ip-desc,
            .hero-reports-premium .ip-title,
            .hero-reports-premium .ip-desc,
            .hero-templates-premium .ip-title,
            .hero-templates-premium .ip-desc,
            .hero-aiflow-premium .ip-title,
            .hero-aiflow-premium .ip-desc,
            .hero-api-premium .ip-title,
            .hero-api-premium .ip-desc {
                text-align: center !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }
            
            /* Buttons centered */
            .hero-procurement-premium .btn-primary,
            .hero-integratedai-premium .btn-primary,
            .hero-reports-premium .btn-primary,
            .hero-templates-premium .btn-primary,
            .hero-aiflow-premium .btn-primary,
            .hero-api-premium .btn-primary {
                margin: 0 auto !important;
            }
            
            /* Badge centered */
            .hero-procurement-premium .ip-badge,
            .hero-integratedai-premium .ip-badge,
            .hero-reports-premium .ip-badge,
            .hero-templates-premium .ip-badge,
            .hero-aiflow-premium .ip-badge,
            .hero-api-premium .ip-badge {
                margin: 0 auto 20px !important;
            }
            
            /* Prevent horizontal overflow */
            .hero-procurement-premium,
            .hero-integratedai-premium,
            .hero-reports-premium,
            .hero-templates-premium,
            .hero-aiflow-premium,
            .hero-api-premium {
                overflow-x: hidden !important;
            }
            
            /* KPI badges and endpoint badges */
            .kpi-badge,
            .endpoint-badge {
                margin: 4px auto !important;
            }

            /* Form Pages */
            .hero-form-premium { padding: 100px 20px 60px; }
            .form-card-premium { padding: 32px 24px; }
            .info-card-premium { padding: 24px; }
            
            /* Simple Hero */
            .simple-hero { padding: 100px 20px 60px; min-height: auto; }
            
            /* Simple Section */
            .simple-section { padding: 60px 20px; }
            .simple-form-container { padding: 32px 24px; }
            .simple-info-card { padding: 24px; }
            
            /* Inner Page Sections */
            .ip-section { padding: 80px 20px; }
            .ip-features-deepdive { padding: 80px 20px; }
            .ip-features-deepdive-grid { grid-template-columns: 1fr; }
            .ip-deepdive-card { padding: 24px; }
            
            /* Workflow */
            .ip-workflow-section { padding: 80px 20px; }
            .ip-workflow-timeline { padding-left: 0; }
            .ip-workflow-line { display: none; }
            .ip-workflow-step { flex-direction: column; gap: 16px; margin-bottom: 32px; }
            .ip-workflow-marker { width: 100%; height: auto; padding: 16px; border-radius: var(--radius-md); }
            .ip-workflow-content { padding: 20px; }
            
            /* KPI */
            .ip-kpi-section { padding: 60px 20px; }
            .ip-kpi-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
                        /* KPI */
            .ip-kpi-card { padding: 20px; }
            .ip-kpi-value { font-size: 32px; }
            
            /* Industries */
            .ip-industries-section { padding: 80px 20px; }
            .ip-industries-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
            .ip-industry-card { padding: 20px; }
            
            /* Integrations */
            .ip-integrations-section { padding: 80px 20px; }
            .ip-integrations-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .ip-integration-card { padding: 16px; }
            
            /* Testimonials */
            .ip-testimonials-section { padding: 80px 20px; }
            
            /* CTA */
            .ip-cta-section { padding: 80px 20px; }
        }

        /* ============================================= */
        /* RESPONSIVE - SMALL MOBILE                    */
        /* ============================================= */
        @media (max-width: 480px) {
            /* Typography */
            .hero-title { font-size: 30px; }
            .section-title { font-size: 28px; }
            .ip-title { font-size: 28px; }
            .payroll-title { font-size: 36px; }
            
            /* Buttons */
            .btn-primary, .btn-secondary { padding: 12px 20px; font-size: 14px; width: 100%; justify-content: center; }
            .recaptcha-wrap { padding: 12px 10px; }
            .recaptcha-wrap .g-recaptcha { transform: scale(0.86); }
            
            /* Stats */
            .stats-grid { grid-template-columns: 1fr 1fr; }
            .stat-number { font-size: 32px; }
            
            /* KPI */
            .ip-kpi-grid { grid-template-columns: 1fr; }
            
            /* Industries */
            .ip-industries-grid { grid-template-columns: 1fr; }
            
            /* Integrations */
            .ip-integrations-grid { grid-template-columns: 1fr; }
            
            /* Payroll Metrics */
            .payroll-metrics { grid-template-columns: 1fr; }
            
            /* Modal */
            .modal-title { font-size: 20px; }








            /* Hero Trust */
            .hero-trust-avatars img {
                width: 32px;
                height: 32px;
            }

            .hero-trust-text {
                font-size: 12px;
            }

            /* Dashboard */
            .hero-dashboard {
                padding: 0 0 40px;
                margin-bottom: 40px;
            }

            .dashboard-interface {
                min-height: auto;
            }

            .dash-body {
                min-height: auto;
                padding: 12px;
            }

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

            .dashboard-stats {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .stat-card {
                padding: 14px 12px;
            }

            .dash-activity {
                gap: 10px;
            }

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

            .dash-right .agent-card {
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100%;
            }

            .chart-svg {
                height: 90px;
            }

            .chart-header {
                gap: 6px;
            }

            .chart-legend {
                flex-wrap: wrap;
                gap: 8px;
                font-size: 10.5px;
            }

            .dash-grid-label {
                font-size: 10px;
                letter-spacing: 0.14em;
            }

            .agent-card {
                padding: 10px 10px;
            }

            .ac-icon {
                width: 28px;
                height: 28px;
                font-size: 13px;
            }

            .ac-info h4 {
                font-size: 12px;
            }

            .ac-info p {
                font-size: 10px;
            }

            .activity-item {
                grid-template-columns: auto 1fr;
                padding: 10px 12px;
            }

            .activity-time {
                justify-self: end;
            }

            /* Extra small screen hero fixes */
            .ai-mega-orb {
                width: 200px !important;
                height: 200px !important;
            }
            
            .crm-central-orb {
                width: 150px !important;
                height: 150px !important;
            }
            
            .procurement-metric-float,
            .ai-capability-card,
            .floating-dashboard,
            .template-card-3d,
            .flow-node,
            .code-window {
                max-width: 280px !important;
                padding: 14px !important;
            }
            
            .fin-metric-value {
                font-size: 28px !important;
            }

            .marquee-item {
                padding: 0 48px;
                font-size: 20px;
                font-weight: 700;
            }

            .marquee-item img {
                height: 60px;
                width: auto;
            }

            .marquee-item i {
                font-size: 28px;
            }
        }

        .required {
                color: red;
                font-weight: bold;
                margin-left: 2px;
            }

        /*module card*/
        .product-selection-section { margin-top: 24px; margin-bottom: 20px; }

        .selection-section-title {
            font-size: 13px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 12px;
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .selection-section-title:first-child { margin-top: 0; }

        .selection-section-title i {
            width: 24px; height: 24px;
            border-radius: 6px;
            display: flex; align-items: center; justify-content: center;
            font-size: 11px;
        }

        .selection-section-title.modules i { background: rgba(99, 102, 241, 0.1); color: #6366f1; }
        .selection-section-title.features i { background: rgba(34, 197, 94, 0.1); color: #22c55e; }

        /* ============================================= */
        /* INDIVIDUAL SELECTION CARDS (SMALLER)          */
        /* ============================================= */
        .selection-cards-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

         /* 3-column grid for partnership types partnership col */
        .selection-cards-grid.three-col { grid-template-columns: repeat(3, 1fr); }

        .selection-card-item {
            position: relative;
            border-radius: 12px;
            cursor: pointer;
            overflow: hidden;
            transition: all 0.3s var(--ease-premium);
            border: 1.5px solid transparent;
        }

        /* Card Background Gradients */
        .card-bg-1 { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); }
        .card-bg-2 { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%); }
        .card-bg-3 { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
        .card-bg-4 { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
        .card-bg-5 { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
        .card-bg-6 { background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%); }
        .card-bg-7 { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); }

        .card-bg-green { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
        .card-bg-teal { background: linear-gradient(135deg, #f0fdfa 0%, #ccfbf1 100%); }
        .card-bg-lime { background: linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%); }
        .card-bg-emerald { background: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 100%); }
        .card-bg-cyan { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); }

        .selection-card-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }

        /* Selected State */
        .selection-card-item.is-selected { border-color: rgba(79, 140, 255, 0.5); box-shadow: 0 4px 15px rgba(79, 140, 255, 0.15); }

        /* Card Label Wrapper */
        .card-label-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding: 12px;
            position: relative;
            z-index: 2;
            cursor: pointer;
            min-height: 48px;
        }

        .card-text-content { flex: 1; min-width: 0; }

       

        .card-description {
            font-size: 10px;
            color: var(--muted);
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-top: 2px;
        }

        /* Checkbox */
        .card-checkbox-input { position: absolute; opacity: 0; width: 0; height: 0; }

        .card-checkbox-label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s var(--ease-premium);
            background: rgba(255, 255, 255, 0.6);
            border: 1.5px solid rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(10px);
            flex-shrink: 0;
        }

        .card-checkbox-label i {
            font-size: 9px;
            color: white;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.2s var(--ease-premium);
        }

        .card-checkbox-input:checked + .card-checkbox-label {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(79, 140, 255, 0.3);
        }

        .card-checkbox-input:checked + .card-checkbox-label i { opacity: 1; transform: scale(1); }
        .card-checkbox-input:focus + .card-checkbox-label { box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.2); }
        /*module card*/ 

         /* Legacy styles (deprecated) */
        .checkbox-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .plain-checkbox { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid rgba(79, 140, 255, 0.12); border-radius: var(--radius-md); background: rgba(79, 140, 255, 0.04); color: var(--dark); font-size: 13px; font-weight: 700; }
        .plain-checkbox input { accent-color: var(--light-blue); }
        .client-reach-row { display: grid; grid-template-columns: minmax(190px, auto) 1fr; gap: 10px; align-items: center; }

        #clientReach { display: none; transition: all 0.3s var(--ease-premium); }
        #clientReach.visible { display: block; }

        /*module card contact us form*/
        .card-radio-input { position: absolute; opacity: 0; width: 0; height: 0; }

        .card-radio-label {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px; height: 20px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.25s var(--ease-premium);
            background: rgba(255, 255, 255, 0.6);
            border: 1.5px solid rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(10px);
            flex-shrink: 0;
        }

        .card-radio-label i {
            font-size: 9px;
            color: white;
            opacity: 0;
            transform: scale(0.5);
            transition: all 0.2s var(--ease-premium);
        }

        .card-radio-input:checked + .card-radio-label {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            border-color: transparent;
            box-shadow: 0 2px 8px rgba(79, 140, 255, 0.3);
        }

        .card-radio-input:checked + .card-radio-label i { opacity: 1; transform: scale(1); }
        .card-radio-input:focus + .card-radio-label { box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.2); }
        /*module card contact us form*/

        /*module card partnership type*/

        .card-bg-amber { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
        .card-bg-gold { background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%); }
        .card-bg-orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
        /*module card partnership type*/

        .gradient-text {
            font-weight: 700;
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

		.recaptcha-error {
			background: #fef2f2;
			border: 1px solid #fecaca;
			border-radius: 8px;
			padding: 12px 16px;
			color: #dc2626;
			font-size: 13px;
			margin-top: 12px;
			display: none;
		}
		.recaptcha-error.visible {
			display: block;
		}

		.recaptcha-wrap {
			width: 100%;
			margin-top: 18px;
			margin-bottom: 18px;
			padding: 14px 16px;
			min-height: 78px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: var(--white);
			border: 1.5px solid rgba(15, 23, 42, 0.1);
			border-radius: var(--radius-md);
			box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
			overflow: hidden;
		}

		.recaptcha-wrap .g-recaptcha {
			max-width: 100%;
			transform-origin: center;
		}

		@media (max-width: 380px) {
			.recaptcha-wrap .g-recaptcha {
				transform: scale(0.76);
			}
		}

	/*advanced features new contents 30-6-2026*/

/* ============================================= */
        /* IMPORTED HOME-DESIGN REPORTS/TEMPLATES        */
        /* ============================================= */
        .home-design-showcases,
        #section-reports,
        #section-templates {
            --white: #ffffff;
            --soft-gray: #f8fafc;
            --border-gray: #e5e7eb;
            --light-border: #f1f5f9;
            --primary: #6366f1;
            --primary-dark: #4338ca;
            --primary-light: #818cf8;
            --secondary: #ec4899;
            --accent: #8b5cf6;
            --emerald: #10b981;
            --amber: #f59e0b;
            --rose: #f43f5e;
            --cyan: #06b6d4;
            --dark: #1e293b;
            --text-main: #1e293b;
            --text-sec: #64748b;
            --text-light: #94a3b8;
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
            --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
            --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
            --shadow-xl: 0 20px 60px rgba(15, 23, 42, 0.15);
            background: var(--white);
            color: var(--text-main);
            font-family: "Poppins", -apple-system, sans-serif;
            line-height: 1.6;
        }

        .home-design-showcases h1,
        .home-design-showcases h2,
        .home-design-showcases h3,
        .home-design-showcases h4 {
            font-family: "Space Grotesk", sans-serif;
            line-height: 1.15;
        }

        .home-design-showcases button {
            font-family: inherit;
            cursor: pointer;
            border: none;
            background: var(--primary);
        }

        /* PAGE SECTION                                  */
        /* ============================================= */
        .page-section {
            width: 100%;
            min-height: calc(100svh - 58px);
            height: auto;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: clip;
        }

        .page-section+.page-section {
            border-top: 2px solid var(--border-gray);
        }

        /* ============================================= */
        /* SLIDE STAGE                                  */
        /* ============================================= */
        .slide-stage {
            flex: 1;
            position: relative;
            overflow: hidden;
            min-height: 400px;
        }

        #section-reports .slide-stage,
        #section-templates .slide-stage {
            display: grid;
            gap: 40px;
            overflow: visible;
            min-height: auto;
            padding: 0;
        }

        .slide {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            will-change: transform3d, opacity;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        #section-reports .slide,
        #section-templates .slide {
            position: relative;
            inset: auto;
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: none;
            width: 100%;
            margin: 0;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            padding: 0;
        }

        #section-reports .slide:nth-child(even),
        #section-templates .slide:nth-child(even) {
            direction: rtl;
        }

        #section-reports .slide .slide-left,
        #section-reports .slide .slide-right,
        #section-templates .slide .slide-left,
        #section-templates .slide .slide-right {
            direction: ltr;
        }

        @media (max-width: 900px) {

            #section-reports .slide,
            #section-templates .slide {
                grid-template-columns: 1fr;
                direction: ltr;
            }

            #section-reports .slide:nth-child(even),
            #section-templates .slide:nth-child(even) {
                direction: ltr;
            }
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* ============================================= */
        /* SLIDE LEFT (TEXT CONTENT)                    */
        /* ============================================= */
        .slide-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px 48px;
            position: relative;
            z-index: 2;
            overflow: hidden;
            will-change: transform3d, opacity;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .slide-step-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 14px;
            border-radius: 100px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 20px;
            background: rgba(99, 102, 241, 0.06);
            color: var(--primary);
            border: 1px solid rgba(99, 102, 241, 0.12);
            width: fit-content;
        }

        .slide-step-badge.rose-accent {
            background: rgba(236, 72, 153, 0.06);
            color: var(--secondary);
            border-color: rgba(236, 72, 153, 0.12);
        }

        .slide-step-badge .material-symbols-outlined {
            font-size: 14px;
        }

        .slide-title {
            font-size: clamp(26px, 2.8vw, 40px);
            font-weight: 800;
            letter-spacing: -1px;
            margin-bottom: 14px;
            color: var(--text-main);
        }

        .slide-desc {
            font-size: 14px;
            color: var(--text-sec);
            line-height: 1.75;
            margin-bottom: 24px;
            max-width: 440px;
        }

        .slide-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 28px;
        }

        .slide-features li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 13px;
            color: var(--text-main);
            line-height: 1.5;
        }

        .slide-features li i {
            color: var(--emerald);
            font-size: 12px;
            margin-top: 3px;
            flex-shrink: 0;
        }

        .slide-features li i.rose-icon {
            color: var(--secondary);
        }

		.slide-features li .slide-feature-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-flex;
            flex-shrink: 0;
            margin-top: 4px;
            box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
        }

        .slide-features li .slide-feature-dot.blue {
            background: #3b82f6;
        }

        .slide-features li .slide-feature-dot.green {
            background: #10b981;
        }

        .slide-features li .slide-feature-dot.purple {
            background: #8b5cf6;
        }

        .slide-features li .slide-feature-dot.pink {
            background: #ec4899;
        }


        .slide-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: var(--radius-md);
            background: var(--primary);
            color: white;
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
            transition: all 0.3s var(--ease-out);
            width: fit-content;
        }

        #section-reports .slide-cta {
            background: var(--primary);
            color: #ffffff;

        }

        #section-reports .slide-cta:focus-visible {
            outline: 3px solid rgba(249, 115, 22, 0.26);
            outline-offset: 3px;
        }

        .slide-cta.rose-btn {
            background: linear-gradient(135deg,
                    var(--secondary),
                    var(--rose));
            box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3);
        }

        .slide-cta.rose-btn:hover {
            box-shadow: 0 8px 28px rgba(236, 72, 153, 0.4);
        }

        .slide-cta:hover {
            transform: translateY(-2px);

        }

        #section-reports .slide-cta:hover {
            box-shadow:
                0 14px 34px rgba(249, 115, 22, 0.34),
                0 8px 18px rgba(99, 102, 241, 0.24);
        }

        .slide-cta i {
            transition: transform 0.3s;
            font-size: 11px;
        }

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

        /* ============================================= */
        /* SLIDE RIGHT (SHOWCASE)                       */
        /* ============================================= */
        .slide-right {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 28px 24px 16px;
            will-change: transform3d, opacity;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .home-design-showcases img {
            display: block;
            max-width: 100%;
            height: auto;
            object-fit: contain;
        }

        .slide-right::before {
            content: "";
            position: absolute;
            left: 0;
            top: 10%;
            bottom: 10%;
            width: 1px;
            background: linear-gradient(to bottom,
                    transparent,
                    var(--border-gray),
                    transparent);
        }

        #section-reports .slide-nav,
        #section-templates .slide-nav {
            display: none;
        }

        /* ============================================= */
        /* SHOWCASE FRAME (shared)                      */
        /* ============================================= */
        .showcase {
            width: 100%;
            max-width: 620px;
            min-width: 0;
            background: var(--white);
            border: 1px solid var(--border-gray);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            overflow: visible;
            position: relative;
            will-change: transform3d, box-shadow;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transition:
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .showcase::after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 24px;
            background: linear-gradient(135deg,
                    rgba(6, 182, 212, 0.22),
                    rgba(59, 130, 246, 0.22),
                    rgba(14, 165, 233, 0.18));
            opacity: 0;
            transition: opacity 0.45s ease;
            z-index: -1;
            filter: blur(18px);
            pointer-events: none;
        }

        .showcase:hover {
            transform: translateY(-6px);
            box-shadow:
                0 25px 80px rgba(6, 182, 212, 0.20),
                0 18px 60px rgba(59, 130, 246, 0.18),
                0 10px 30px rgba(14, 165, 233, 0.12);
        }

        .showcase:hover::after {
            opacity: 1;
        }

        .showcase::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(99, 102, 241, 0.4),
                    transparent);
            z-index: 3;
        }

        .showcase-body,
        .slide-left,
        .slide-right,
        .showcase-toolbar,
        .showcase-toolbar-left,
        .showcase-toolbar-right,
        .s1-grid,
        .s2-grid,
        .s3-grid,
        .s6-grid,
        .te-grid,
        .tg-grid,
        .s2-entities,
        .s2-filters,
        .s3-opts,
        .s5-pivot-area,
        .s5-config,
        .te-palette,
        .te-props,
        .tg-tabs {
            min-width: 0;
        }

        .s2-rtable-wrap,
        .s3-twrap,
        .s4-twrap,
        .s5-ptwrap,
        .s6-card-body {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .s2-rtable,
        .s3-t,
        .s4-t,
        .s5-pt,
        .s6-mtable,
        .te-block-table {
            min-width: 100%;
        }

        .showcase-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 14px;
            border-bottom: 1px solid var(--border-gray);
            background: var(--white);
            position: relative;
            z-index: 5;
        }

        .showcase-toolbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .showcase-dots {
            display: flex;
            gap: 4px;
        }

        .showcase-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
        }

        .showcase-dot.r {
            background: #ff5f57;
        }

        .showcase-dot.y {
            background: #febc2e;
        }

        .showcase-dot.g {
            background: #28c840;
        }

        .showcase-toolbar-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--text-light);
        }

        .showcase-toolbar-right {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .showcase-tb-btn {
            padding: 3px 9px;
            border-radius: 5px;
            font-size: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 3px;
            border: 1px solid var(--border-gray);
            background: white;
            color: whitesmoke;
            white-space: nowrap;
        }

        .showcase-tb-btn .material-symbols-outlined {
            font-size: 11px;
        }

        .showcase-tb-btn.primary {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        }

        .showcase-tb-btn.primary.rose {
            background: var(--secondary);
            border-color: var(--secondary);
            box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
        }

        .showcase-body {
            position: relative;
            height: clamp(260px, 34vh, 380px);
            overflow: hidden;
            min-width: 0;
        }

		#section-templates .showcase {
            border-radius: 0;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 22px 70px rgba(15, 23, 42, 0.12);
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 45%, #f5f3ff 100%);
            overflow: hidden;
        }

        #section-templates .showcase::before,
        #section-templates .showcase::after {
            display: none;
        }

        #section-templates .showcase:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 32px 90px rgba(15, 23, 42, 0.16);
            border-color: rgba(99, 102, 241, 0.2);
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #f5f3ff 100%);
        }

        #section-templates .showcase-toolbar {
            padding: 12px 14px;
            background: rgba(255, 255, 255, 0.94);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        #section-templates .showcase-body {
            padding: 16px;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
        }

        #section-templates .td-premium-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid rgba(148, 163, 184, 0.16);
            border-radius: 18px;
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.05);
        }

        #section-templates .td-panel-card {
            padding: 10px;
        }

        #section-templates .td-panel-title {
            font-size: 9px;
            font-weight: 700;
            color: #0f172a;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 8px;
        }

        #section-templates .td-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            border-radius: 999px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            color: #475569;
            font-size: 8px;
            font-weight: 700;
            white-space: nowrap;
        }

        #section-templates .td-tool-row,
        #section-templates .td-label-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 6px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 8px;
            color: #475569;
        }

        #section-templates .td-tool-row:last-child,
        #section-templates .td-label-row:last-child {
            border-bottom: 0;
        }

        #section-templates .td-template-shell {
            display: grid;
            grid-template-columns: 132px 1fr;
            gap: 12px;
            height: 100%;
        }

        #section-templates .td-sidebar-stack {
            display: grid;
            gap: 8px;
        }

        #section-templates .td-doc-surface {
            position: relative;
            padding: 10px;
            border-radius: 20px;
            background: linear-gradient(135deg, #f8fbff 0%, #ffffff 100%);
            border: 1px solid rgba(59, 130, 246, 0.12);
            min-height: 100%;
            overflow: hidden;
        }

        #section-templates .td-doc-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            padding: 8px 10px;
            margin-bottom: 8px;
            border-radius: 12px;
            background: rgba(248, 250, 252, 0.95);
            border: 1px solid rgba(203, 213, 225, 0.6);
        }

        #section-templates .td-doc-page {
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            padding: 12px;
            min-height: 280px;
            overflow: hidden;
        }

        #section-templates .td-doc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 1px solid #e2e8f0;
        }

        #section-templates .td-logo-box {
            width: 38px;
            height: 38px;
            border-radius: 12px;
            display: grid;
            place-items: center;
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: white;
            font-weight: 800;
            font-size: 12px;
            box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
        }

        #section-templates .td-doc-title {
            font-size: 10px;
            font-weight: 700;
            color: #0f172a;
        }

        #section-templates .td-doc-subtitle {
            font-size: 8px;
            color: #64748b;
            margin-top: 2px;
        }

        #section-templates .td-status-pill {
            padding: 4px 8px;
            border-radius: 999px;
            background: rgba(16, 185, 129, 0.12);
            color: #047857;
            font-size: 8px;
            font-weight: 700;
        }

        #section-templates .td-doc-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 10px;
        }

        #section-templates .td-doc-card {
            border-radius: 14px;
            padding: 10px;
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            border: 1px solid rgba(226, 232, 240, 0.9);
            min-height: 130px;
        }

        #section-templates .td-field-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 8px;
            border-radius: 999px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 8px;
            font-weight: 700;
            margin: 4px 4px 4px 0;
        }

        #section-templates .td-field-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 8px;
        }

        #section-templates .td-doc-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #e2e8f0;
            font-size: 8px;
            color: #64748b;
        }

        #section-templates .td-ruler {
            position: absolute;
            background: repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.2) 0 4px, transparent 4px 10px);
            opacity: 0.7;
            pointer-events: none;
        }

        #section-templates .td-ruler.horizontal {
            left: 10px;
            right: 10px;
            top: 58px;
            height: 1px;
        }

        #section-templates .td-guide {
            position: absolute;
            border: 1px dashed rgba(37, 99, 235, 0.28);
            border-radius: 10px;
            pointer-events: none;
        }

        #section-templates .td-guide.vertical {
            left: 50%;
            top: 76px;
            bottom: 24px;
            width: 1px;
            border: 0;
            background: repeating-linear-gradient(180deg, rgba(37, 99, 235, 0.24) 0 4px, transparent 4px 8px);
        }

        #section-templates .td-guide.horizontal {
            left: 12px;
            right: 12px;
            top: 54%;
            height: 1px;
            border: 0;
            background: repeating-linear-gradient(90deg, rgba(129, 140, 248, 0.24) 0 4px, transparent 4px 8px);
        }

        #section-templates .td-qrcode,
        #section-templates .td-barcode,
        #section-templates .td-signature {
            border-radius: 12px;
            border: 1px solid rgba(226, 232, 240, 0.95);
            background: linear-gradient(135deg, #ffffff, #f8fafc);
        }

        #section-templates .td-qrcode {
            width: 56px;
            height: 56px;
            background-image: linear-gradient(90deg, #0f172a 0 2px, transparent 2px 6px), linear-gradient(0deg, #0f172a 0 2px, transparent 2px 6px);
            background-size: 6px 6px;
            margin: 6px 0 8px;
        }

        #section-templates .td-barcode {
            height: 26px;
            background-image: linear-gradient(90deg, #64748b 0 2px, transparent 2px 4px);
            background-size: 4px 100%;
        }

        #section-templates .td-signature {
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            font-size: 8px;
            font-weight: 700;
        }

        #section-templates .td-invoice-shell {
            display: grid;
            grid-template-columns: 0.9fr 1.1fr;
            gap: 12px;
            height: 100%;
        }

        #section-templates .td-invoice-left {
            padding: 12px;
            display: grid;
            gap: 8px;
        }

        #section-templates .td-invoice-preview {
            padding: 12px;
            display: grid;
            gap: 8px;
        }

        #section-templates .td-metric-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        #section-templates .td-metric {
            padding: 8px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 8px;
            color: #475569;
        }

        #section-templates .td-metric strong {
            display: block;
            margin-top: 2px;
            color: #0f172a;
            font-size: 10px;
        }

        #section-templates .td-preview-pill {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            width: fit-content;
            padding: 6px 9px;
            border-radius: 999px;
            background: rgba(59, 130, 246, 0.12);
            color: #2563eb;
            font-size: 8px;
            font-weight: 700;
        }

        #section-templates .td-invoice-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid #e2e8f0;
        }

        #section-templates .td-invoice-title {
            font-size: 10px;
            font-weight: 700;
            color: #0f172a;
        }

        #section-templates .td-invoice-meta {
            font-size: 8px;
            color: #64748b;
        }

        #section-templates .td-table-surface {
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            background: white;
        }

        #section-templates .td-table-row {
            display: grid;
            grid-template-columns: 1.1fr 0.5fr 0.5fr;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-bottom: 1px solid #f1f5f9;
            font-size: 8px;
            color: #475569;
        }

        #section-templates .td-table-row:last-child {
            border-bottom: 0;
        }

        #section-templates .td-table-row strong {
            color: #0f172a;
            font-size: 8px;
        }

        #section-templates .td-total-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 8px 0 2px;
            font-size: 8px;
            color: #475569;
        }

        #section-templates .td-id-shell {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            height: 100%;
        }

        #section-templates .td-id-front,
        #section-templates .td-id-back {
            padding: 12px;
            display: grid;
            gap: 10px;
        }

        #section-templates .td-id-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        #section-templates .td-id-top strong {
            font-size: 10px;
            color: #0f172a;
        }

        #section-templates .td-id-body {
            display: grid;
            grid-template-columns: 78px 1fr;
            gap: 10px;
            align-items: center;
        }

        #section-templates .td-photo-box {
            height: 92px;
            border-radius: 14px;
            background: linear-gradient(135deg, #eff6ff, #e0f2fe);
            border: 1px dashed rgba(59, 130, 246, 0.24);
            display: grid;
            place-items: center;
            color: #2563eb;
            font-size: 9px;
            font-weight: 700;
        }

        #section-templates .td-id-fields {
            display: grid;
            gap: 6px;
        }

        #section-templates .td-id-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            padding-top: 4px;
            border-top: 1px solid #e2e8f0;
            font-size: 8px;
            color: #64748b;
        }

        #section-templates .td-report-shell {
            display: grid;
            grid-template-columns: 96px 1fr;
            gap: 12px;
            height: 100%;
        }

        #section-templates .td-thumb-stack {
            display: grid;
            gap: 8px;
        }

        #section-templates .td-thumb {
            border-radius: 12px;
            padding: 8px;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            color: #64748b;
            font-size: 8px;
            font-weight: 700;
        }

        #section-templates .td-thumb.active {
            background: linear-gradient(135deg, #eff6ff, #ffffff);
            color: #2563eb;
            border-color: rgba(37, 99, 235, 0.24);
        }

        #section-templates .td-report-preview {
            border-radius: 16px;
            border: 1px solid rgba(226, 232, 240, 0.9);
            background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
            padding: 10px;
            display: grid;
            gap: 8px;
        }

        #section-templates .td-report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            padding-bottom: 6px;
            border-bottom: 1px solid #e2e8f0;
        }

        #section-templates .td-kpi-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }

        #section-templates .td-kpi-card {
            border-radius: 12px;
            padding: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 8px;
            color: #64748b;
        }

        #section-templates .td-kpi-card strong {
            display: block;
            margin-top: 2px;
            font-size: 11px;
            color: #0f172a;
        }

        #section-templates .td-chart-box {
            border-radius: 14px;
            padding: 10px;
            background: linear-gradient(135deg, #f8fbff, #ffffff);
            border: 1px solid #e2e8f0;
        }

        #section-templates .td-footer-actions {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        #section-templates .td-footer-actions span {
            padding: 4px 8px;
            border-radius: 999px;
            background: #eff6ff;
            color: #2563eb;
            font-size: 8px;
            font-weight: 700;
        }


        /* ============================================= */
        /* ANIMATED CURSOR                              */
        /* ============================================= */
        .anim-cursor {
            position: absolute;
            width: 22px;
            height: 22px;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
            will-change: transform, opacity;
            transform: translate3d(0, 0, 0);
            transform-origin: 7px 6px;
            filter: drop-shadow(0 10px 18px rgba(15, 23, 42, 0.18));
        }

        .anim-cursor::before {
            content: "";
            position: absolute;
            inset: -12px;
            border-radius: 999px;
            background: radial-gradient(circle,
                    rgba(99, 102, 241, 0.32) 0%,
                    rgba(56, 189, 248, 0.22) 44%,
                    rgba(99, 102, 241, 0));
            opacity: 0.9;
            transform: scale(0.9);
            animation: cursorGlow 1.2s ease-in-out infinite;
        }

        .anim-cursor::after {
            content: "";
            position: absolute;
            left: -10px;
            top: -10px;
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, #facc15, #fb7185);
            box-shadow:
                18px 2px 0 -3px rgba(56, 189, 248, 0.75),
                8px 21px 0 -4px rgba(16, 185, 129, 0.7);
            opacity: 0;
            animation: cursorSparkle 1.65s ease-in-out infinite;
        }

        .anim-cursor svg {
            width: 100%;
            height: 100%;
            filter:
                drop-shadow(0 2px 2px rgba(15, 23, 42, 0.18)) drop-shadow(0 6px 12px rgba(99, 102, 241, 0.2));
            animation: cursorFloat 1.6s ease-in-out infinite;
            position: relative;
            z-index: 1;
        }

        .cursor-trail {
            position: absolute;
            left: 6px;
            top: 5px;
            width: 7px;
            height: 7px;
            border-radius: 999px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.78), rgba(56, 189, 248, 0.7));
            filter: blur(0.2px);
            opacity: 0;
            transform: translate3d(-7px, -1px, 0) scale(0.8);
            animation: cursorTrail 0.92s ease-out infinite;
        }

        .cursor-trail:nth-child(1) {
            animation-delay: 0s;
        }

        .cursor-trail:nth-child(2) {
            animation-delay: 0.18s;
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.72), rgba(250, 204, 21, 0.7));
        }

        .cursor-trail:nth-child(3) {
            animation-delay: 0.34s;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.7), rgba(56, 189, 248, 0.64));
        }

        @keyframes cursorGlow {

            0%,
            100% {
                opacity: 0.45;
                transform: scale(0.8);
            }

            50% {
                opacity: 0.9;
                transform: scale(1.18);
            }
        }

        @keyframes cursorFloat {

            0%,
            100% {
                transform: translate3d(0, 0, 0) rotate(-2deg);
            }

            50% {
                transform: translate3d(1px, -2px, 0) rotate(3deg);
            }
        }

        @keyframes cursorTrail {
            0% {
                opacity: 0.75;
                transform: translate3d(-3px, 2px, 0) scale(0.75);
            }

            100% {
                opacity: 0;
                transform: translate3d(-22px, 16px, 0) scale(0.2);
            }
        }

        @keyframes cursorSparkle {

            0%,
            72%,
            100% {
                opacity: 0;
                transform: translate3d(0, 0, 0) scale(0.35) rotate(0deg);
            }

            36% {
                opacity: 0.85;
                transform: translate3d(2px, -2px, 0) scale(1) rotate(28deg);
            }
        }

        /* ============================================= */
        /* DRAG GHOST ELEMENT                           */
        /* ============================================= */
        .drag-ghost {
            position: absolute;
            padding: 4px 8px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.95);
            border: 1.5px solid var(--primary);
            box-shadow:
                0 8px 32px rgba(99, 102, 241, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.1);
            font-size: 7px;
            font-weight: 700;
            color: var(--text-main);
            display: flex;
            align-items: center;
            gap: 4px;
            z-index: 60;
            opacity: 0;
            pointer-events: none;
            will-change: transform3d, opacity;
            transform: translate3d(0, 0, 0) scale(0.9);
            white-space: nowrap;
        }

        .drag-ghost.rose {
            border-color: var(--secondary);
            box-shadow:
                0 8px 32px rgba(236, 72, 153, 0.25),
                0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .drag-ghost .material-symbols-outlined {
            font-size: 11px;
        }

        .drag-ghost.linking {
            border-style: dashed;
            background: rgba(255, 255, 255, 0.98);
            box-shadow:
                0 10px 34px rgba(99, 102, 241, 0.28),
                0 2px 10px rgba(15, 23, 42, 0.12);
        }

        .anim-click-ring {
            position: absolute;
            width: 28px;
            height: 28px;
            border: 2px solid var(--primary);
            border-radius: 999px;
            opacity: 0;
            pointer-events: none;
            z-index: 49;
            transform: translate3d(0, 0, 0) scale(0.4);
            box-shadow:
                0 0 0 6px rgba(99, 102, 241, 0.08),
                0 0 18px rgba(99, 102, 241, 0.22);
        }

        .anim-link-guide {
            position: absolute;
            width: 2px;
            height: 1px;
            background: linear-gradient(180deg, var(--primary), #38bdf8);
            border-radius: 999px;
            opacity: 0;
            pointer-events: none;
            z-index: 13;
            transform-origin: 0 0;
            box-shadow: 0 0 12px rgba(99, 102, 241, 0.35);
        }

        /* ============================================= */
        /* DROP ZONE HIGHLIGHT                          */
        /* ============================================= */
        .drop-highlight {
            position: absolute;
            border: 2px dashed var(--primary);
            border-radius: 7px;
            background: rgba(99, 102, 241, 0.04);
            opacity: 0;
            pointer-events: none;
            z-index: 15;
            transition: opacity 0.2s ease;
        }

        .drop-highlight.rose {
            border-color: var(--secondary);
            background: rgba(236, 72, 153, 0.04);
        }

        /* ============================================= */
        /* LINK DRAW ANIMATION                          */
        /* ============================================= */
        .anim-link {
            stroke-dasharray: 200;
            stroke-dashoffset: 200;
        }

        /* ============================================= */
        /* HIGHLIGHT PULSE                              */
        /* ============================================= */
        .highlight-pulse {
            position: absolute;
            border-radius: 5px;
            border: 2px solid var(--primary);
            background: rgba(99, 102, 241, 0.06);
            opacity: 0;
            pointer-events: none;
            z-index: 14;
        }

        .highlight-pulse.rose {
            border-color: var(--secondary);
            background: rgba(236, 72, 153, 0.06);
        }

        /* ============================================= */
        /* RB SLIDE 1: CREATE REPORTS                    */
        /* ============================================= */
        .s1-grid {
            display: grid;
            grid-template-columns: 110px 1fr;
            height: 100%;
        }

        .s1-entities {
            border-right: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 6px;
        }

        .s1-entity {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 6px;
            border-radius: 5px;
            margin-bottom: 2px;
            font-size: 8px;
            font-weight: 600;
            color: var(--text-main);
            transition: opacity 0.3s, background 0.3s;
        }

        .s1-entity.placed {
            opacity: 0.35;
        }

        .s1-entity.drag-highlight {
            background: rgba(99, 102, 241, 0.08);
            opacity: 1 !important;
        }

        .s1-entity-icon {
            width: 20px;
            height: 20px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s1-entity-icon .material-symbols-outlined {
            font-size: 11px;
        }

        .s1-canvas {
            position: relative;
            background: var(--soft-gray);
            overflow: hidden;
        }

        .s1-canvas-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(203, 213, 225, 0.3) 1px,
                    transparent 1px),
                linear-gradient(90deg,
                    rgba(203, 213, 225, 0.3) 1px,
                    transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
        }

        .s1-node {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid var(--border-gray);
            border-radius: 7px;
            box-shadow: var(--shadow-sm);
            z-index: 10;
            will-change: transform3d, opacity;
            transform: translate3d(0, 0, 0) scale(1);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .s1-node-inner {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 9px;
        }

        .s1-node-icon {
            width: 24px;
            height: 24px;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s1-node-icon .material-symbols-outlined {
            font-size: 13px;
        }

        .s1-node-label {
            font-size: 8px;
            font-weight: 700;
            color: var(--text-main);
        }

        .s1-node-type {
            font-size: 6px;
            font-weight: 700;
            text-transform: uppercase;
            color: var(--text-light);
            letter-spacing: 0.4px;
        }

        .s1-conn-dot {
            width: 7px;
            height: 7px;
            background: white;
            border: 2px solid var(--text-light);
            border-radius: 50%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 12;
        }

        .s1-conn-dot.in {
            left: -4px;
        }

        .s1-conn-dot.out {
            right: -4px;
        }

        .s1-lines {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
        }

        .s1-line {
            stroke: #94a3b8;
            stroke-width: 1.5;
            fill: none;
        }

        .s1-line.anim-link {
            stroke: var(--primary);
            stroke-width: 2.5;
            stroke-dasharray: 10 8;
            stroke-linecap: round;
            filter: drop-shadow(0 0 4px rgba(79, 140, 255, 0.35));
            animation: s1LinkFlow 3.2s linear infinite;
        }

        @keyframes s1LinkFlow {
            from {
                stroke-dashoffset: 0;
            }

            to {
                stroke-dashoffset: -36;
            }
        }

        .s1-line-label {
            font-size: 6px;
            font-weight: 700;
            fill: var(--text-sec);
        }

        .s1-line-label-bg {
            fill: white;
            stroke: var(--border-gray);
            stroke-width: 0.5;
            rx: 3;
            ry: 3;
        }

        .s1-gen-btn {
            position: absolute;
            bottom: 8px;
            right: 8px;
            padding: 5px 12px;
            border-radius: 6px;
            background: var(--primary);
            color: white;
            font-size: 8px;
            font-weight: 700;
            box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
            z-index: 20;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .s1-gen-btn .material-symbols-outlined {
            font-size: 11px;
        }

        /* ============================================= */
        /* RB SLIDE 2: CUSTOM FILTERS                    */
        /* ============================================= */
        .s2-grid {
            display: grid;
            grid-template-columns: 180px 1fr;
            height: 100%;
        }

        .s2-filters {
            border-right: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 8px;
        }

        .s2-filters-title {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-sec);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .s2-filters-title .material-symbols-outlined {
            font-size: 11px;
            color: var(--primary);
        }

        .s2-fgroup {
            margin-bottom: 10px;
        }

        .s2-flabel {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: var(--text-main);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .s2-flabel .material-symbols-outlined {
            font-size: 10px;
            color: var(--text-light);
        }

        .s2-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 3px;
        }

        .s2-chip {
            padding: 2px 7px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 600;
            border: 1px solid var(--border-gray);
            background: white;
            color: var(--text-sec);
            transition: all 0.25s;
        }

        .s2-chip.on {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .s2-chip.anim-toggle {
            transition: all 0.3s var(--ease-out);
        }

        .s2-input {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid var(--border-gray);
            border-radius: 4px;
            font-size: 8px;
            font-family: inherit;
            background: var(--soft-gray);
            outline: none;
            color: var(--text-main);
        }

        .s2-input.anim-typing {
            caret-color: var(--primary);
        }

        .s2-dates {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 3px;
        }

        .s2-apply {
            width: 100%;
            padding: 6px;
            border-radius: 5px;
            background: var(--primary);
            color: white;
            font-size: 8px;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
            margin-top: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
        }

        .s2-apply .material-symbols-outlined {
            font-size: 11px;
        }

        .s2-result {
            position: relative;
            background: var(--soft-gray);
            overflow: auto;
        }

        .s2-rtable-wrap {
            margin: 8px;
            background: white;
            border-radius: 5px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .s2-rtable {
            width: 100%;
            border-collapse: collapse;
            font-size: 8px;
        }

        .s2-rtable th {
            background: #f8fafc;
            color: var(--text-sec);
            font-weight: 700;
            text-align: left;
            padding: 6px 8px;
            border-bottom: 2px solid var(--border-gray);
            font-size: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .s2-rtable td {
            padding: 5px 8px;
            border-bottom: 1px solid var(--light-border);
            color: var(--text-main);
            font-weight: 500;
        }

        .s2-rtable tr.dimmed td {
            opacity: 0.12;
            transition: opacity 0.4s ease;
        }

        .s2-rtable tr.highlighted td {
            background: rgba(99, 102, 241, 0.03);
            transition: background 0.4s ease;
        }

        .s2-rtable tr.anim-row-in td {
            animation: rowSlideIn 0.4s var(--ease-out) both;
        }

        @keyframes rowSlideIn {
            from {
                opacity: 0;
                transform: translate3d(-8px, 0, 0);
            }

            to {
                opacity: 1;
                transform: translate3d(0, 0, 0);
            }
        }

        .s2-status {
            padding: 2px 6px;
            border-radius: 100px;
            font-size: 6px;
            font-weight: 700;
        }

        .s2-status.completed {
            background: rgba(16, 185, 129, 0.1);
            color: #10b981;
        }

        .s2-status.pending {
            background: rgba(245, 158, 11, 0.1);
            color: #f59e0b;
        }

        .s2-status.cancelled {
            background: rgba(244, 63, 94, 0.1);
            color: #f43f5e;
        }

        .s2-count {
            position: absolute;
            bottom: 8px;
            right: 8px;
            padding: 2px 8px;
            border-radius: 100px;
            background: white;
            border: 1px solid var(--border-gray);
            font-size: 7px;
            font-weight: 600;
            color: var(--text-sec);
            box-shadow: var(--shadow-sm);
            z-index: 5;
        }

        .s2-count span {
            color: var(--primary);
            font-weight: 700;
        }

        /* ============================================= */
        /* RB SLIDE 3: CUSTOMIZE                         */
        /* ============================================= */
        .s3-grid {
            display: grid;
            grid-template-columns: 1fr 180px;
            height: 100%;
        }

        .s3-table-area {
            position: relative;
            background: var(--soft-gray);
            overflow: auto;
        }

        .s3-twrap {
            margin: 8px;
            background: white;
            border-radius: 5px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .s3-t {
            width: 100%;
            border-collapse: collapse;
            font-size: 8px;
        }

        .s3-t th {
            background: #f8fafc;
            color: var(--text-sec);
            font-weight: 700;
            text-align: left;
            padding: 7px 8px;
            border-bottom: 2px solid var(--border-gray);
            font-size: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: background 0.2s;
            user-select: none;
            white-space: nowrap;
        }

        .s3-t th:hover {
            background: #f1f5f9;
        }

        .s3-t th.sorted {
            color: var(--primary);
            background: rgba(99, 102, 241, 0.04);
        }

        .s3-t th .sort-ic {
            margin-left: 2px;
            font-size: 9px;
            opacity: 0.3;
            transition: opacity 0.2s;
        }

        .s3-t th.sorted .sort-ic {
            opacity: 1;
            color: var(--primary);
        }

        .s3-t td {
            padding: 5px 8px;
            border-bottom: 1px solid var(--light-border);
            color: var(--text-main);
            font-weight: 500;
            white-space: nowrap;
        }

        .s3-t .grp-hdr td {
            background: rgba(99, 102, 241, 0.05);
            font-weight: 700;
            color: var(--primary);
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1.5px solid rgba(99, 102, 241, 0.15);
        }

        .s3-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            padding: 2px 8px;
            border-radius: 100px;
            background: var(--primary);
            color: white;
            font-size: 7px;
            font-weight: 700;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 3px;
            box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
        }

        .s3-badge .pulse {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #34d399;
            animation: pulseDot 1.5s ease-in-out infinite;
            will-change: opacity, transform;
        }

        @keyframes pulseDot {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.5;
                transform: scale(0.6);
            }
        }

        .s3-opts {
            border-left: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 8px;
        }

        .s3-opts-title {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-sec);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .s3-opts-title .material-symbols-outlined {
            font-size: 11px;
            color: var(--primary);
        }

        .s3-opt {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 7px 8px;
            border-radius: 7px;
            border: 1.5px solid var(--border-gray);
            margin-bottom: 4px;
            cursor: pointer;
            transition: all 0.25s;
        }

        .s3-opt:hover {
            border-color: rgba(99, 102, 241, 0.3);
        }

        .s3-opt.on {
            border-color: var(--primary);
            background: rgba(99, 102, 241, 0.04);
        }

        .s3-opt.on .s3-opt-ic {
            background: var(--primary);
        }

        .s3-opt-ic {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.25s;
        }

        .s3-opt-ic .material-symbols-outlined {
            font-size: 12px;
            color: var(--text-sec);
            transition: color 0.25s;
        }

        .s3-opt.on .s3-opt-ic .material-symbols-outlined {
            color: white;
        }

        .s3-opt-txt {
            flex: 1;
            min-width: 0;
        }

        .s3-opt-name {
            font-size: 8px;
            font-weight: 700;
            color: var(--text-main);
        }

        .s3-opt-desc {
            font-size: 6px;
            color: var(--text-sec);
        }

        .s3-opt-chk {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 7px;
            opacity: 0;
            transform: scale(0);
            transition: all 0.3s var(--ease-out);
        }

        .s3-opt.on .s3-opt-chk {
            opacity: 1;
            transform: scale(1);
        }

        /* ============================================= */
        /* RB SLIDE 4: GROUP WITH TOTALS                 */
        /* ============================================= */
        .s4-area {
            position: relative;
            background: var(--soft-gray);
            overflow: auto;
            height: 100%;
        }

        .s4-twrap {
            margin: 8px;
            background: white;
            border-radius: 5px;
            box-shadow: var(--shadow-sm);
            overflow: hidden;
        }

        .s4-t {
            width: 100%;
            border-collapse: collapse;
            font-size: 8px;
        }

        .s4-t th {
            background: #f8fafc;
            color: var(--text-sec);
            font-weight: 700;
            text-align: left;
            padding: 7px 8px;
            border-bottom: 2px solid var(--border-gray);
            font-size: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .s4-t th.num {
            text-align: right;
        }

        .s4-t td {
            padding: 5px 8px;
            border-bottom: 1px solid var(--light-border);
            color: var(--text-main);
            font-weight: 500;
        }

        .s4-t td.num {
            text-align: right;
            font-family: "Space Grotesk", monospace;
            font-weight: 600;
        }

        .s4-t .grp-h td {
            background: rgba(99, 102, 241, 0.06);
            font-weight: 700;
            color: var(--primary);
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1.5px solid rgba(99, 102, 241, 0.15);
        }

        .s4-t .sub-tot td {
            background: #f8fafc;
            font-weight: 700;
            font-size: 7px;
            border-top: 1.5px solid var(--border-gray);
            border-bottom: 1px dashed #cbd5e1;
        }

        .s4-t .sub-tot td.num {
            color: var(--primary);
        }

        .s4-t .grand-t td {
            background: var(--primary);
            color: white;
            font-weight: 800;
            font-size: 8px;
            padding: 8px 8px;
        }

        .s4-t .grand-t td.num {
            color: white;
        }

        /* Reference-style Reports Builder panels */
        #section-reports .showcase {
            width: min(100%, 720px);
            border-radius: 8px;
            border-color: rgba(148, 163, 184, 0.26);
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
        }

        #section-reports .showcase-body {
            background: #f8fafc;
        }

        #section-reports .showcase-body,
        #section-templates .showcase-body,
        #section-reports .rb-workspace,
        #section-templates .td-canvas,
        #section-reports .s1-canvas,
        #section-reports .s2-result,
        #section-templates .tg-card-preview,
        #section-templates .tg-grid {
            position: relative;
            overflow: hidden;
            isolation: isolate;
            border-radius: inherit;
        }

        #section-reports .showcase-body,
        #section-templates .showcase-body {
            min-height: 420px;
        }

        #section-reports .rb-workspace,
        #section-templates .td-canvas {
            border-radius: 0 0 8px 8px;
        }

        #section-reports .s1-canvas,
        #section-reports .s2-result,
        #section-templates .tg-card-preview {
            border-radius: 8px;
        }

        .slide-visual-sweep {
            position: absolute;
            inset: -20% auto -20% -45%;
            width: 55%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15), transparent);
            transform: skewX(-18deg) translateX(-135%);
            opacity: 0;
            pointer-events: none;
            mix-blend-mode: screen;
            z-index: 6;
        }

        .slide-visual-cursor {
            position: absolute;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(79, 140, 255, 0.18);
            color: var(--primary);
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16);
            pointer-events: none;
            z-index: 7;
            opacity: 0;
            transition: opacity 0.25s ease;
            animation: slideVisualCursorMove 5.5s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        #section-templates .tg-card-preview .slide-visual-cursor-gallery {
            width: 24px;
            height: 24px;
            color: var(--secondary);
            box-shadow: 0 10px 20px rgba(236, 72, 153, 0.14);
            animation: slideVisualCursorGalleryMove 5.2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
        }

        #section-templates .tg-card-preview .slide-visual-cursor-gallery i {
            font-size: 11px;
        }

        #section-templates .tg-card-preview .slide-visual-cursor-gallery::after {
            display: none;
        }

        #section-templates .tg-card-preview .slide-visual-sweep {
            inset: -18% auto -18% -30%;
            width: 70%;
        }

        .slide-visual-cursor::after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: inherit;
            border: 1px solid rgba(79, 140, 255, 0.16);
            animation: slideVisualCursorPulse 1.8s ease-in-out infinite;
        }

        #section-reports .showcase:hover .slide-visual-sweep,
        #section-templates .showcase:hover .slide-visual-sweep,
        #section-reports .rb-workspace:hover .slide-visual-sweep,
        #section-templates .td-canvas:hover .slide-visual-sweep,
        #section-templates .tg-card-preview:hover .slide-visual-sweep {
            opacity: 1;
            animation: slideVisualSweep 3s ease-in-out infinite;
        }

        #section-reports .showcase:hover .slide-visual-cursor,
        #section-templates .showcase:hover .slide-visual-cursor,
        #section-reports .rb-workspace:hover .slide-visual-cursor,
        #section-templates .td-canvas:hover .slide-visual-cursor,
        #section-reports .s1-canvas:hover .slide-visual-cursor,
        #section-reports .s2-result:hover .slide-visual-cursor,
        #section-templates .tg-card-preview:hover .slide-visual-cursor,
        #section-templates .tg-grid:hover .slide-visual-cursor {
            opacity: 1;
        }

        #section-reports .showcase:hover,
        #section-templates .showcase:hover,
        #section-reports .rb-workspace:hover,
        #section-templates .td-canvas:hover,
        #section-reports .s1-canvas:hover,
        #section-reports .s2-result:hover,
        #section-templates .tg-card-preview:hover {
            transform: translateY(-6px) scale(1.01);
            filter: saturate(1.04);
            box-shadow: 0 30px 84px rgba(79, 140, 255, 0.14);
        }

        #section-reports .s1-entity,
        #section-reports .rb-node,
        #section-reports .rb-ref-card,
        #section-reports .rb-ref-panel,
        #section-reports .rb-ref-main,
        #section-templates .tg-card,
        #section-templates .td-tool,
        #section-templates .tg-tab,
        #section-templates .tg-card-preview-inner,
        #section-reports .showcase-tb-btn,
        #section-templates .showcase-tb-btn {
            transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.35s ease, background 0.35s ease;
        }

        #section-reports .s1-entity:hover,
        #section-reports .rb-node:hover,
        #section-reports .rb-ref-card:hover,
        #section-reports .rb-ref-panel:hover,
        #section-reports .rb-ref-main:hover,
        #section-templates .tg-card:hover,
        #section-templates .td-tool:hover,
        #section-templates .tg-tab:hover,
        #section-templates .tg-card-preview-inner:hover,
        #section-reports .showcase-tb-btn:hover,
        #section-templates .showcase-tb-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12);
        }

        @keyframes slideVisualSweep {
            0% {
                transform: skewX(-18deg) translateX(-135%);
            }

            55% {
                transform: skewX(-18deg) translateX(285%);
            }

            100% {
                transform: skewX(-18deg) translateX(285%);
            }
        }

        @keyframes slideVisualCursorMove {

            0%,
            100% {
                transform: translate3d(18px, 20px, 0) scale(0.96);
            }

            25% {
                transform: translate3d(160px, 20px, 0) scale(1);
            }

            50% {
                transform: translate3d(135px, 92px, 0) scale(0.98);
            }

            75% {
                transform: translate3d(36px, 104px, 0) scale(1.02);
            }
        }

        @keyframes slideVisualCursorGalleryMove {

            0%,
            100% {
                transform: translate3d(12px, 12px, 0) scale(0.96);
            }

            25% {
                transform: translate3d(78px, 10px, 0) scale(1);
            }

            50% {
                transform: translate3d(62px, 34px, 0) scale(0.98);
            }

            75% {
                transform: translate3d(16px, 38px, 0) scale(1.02);
            }
        }

        @keyframes slideVisualCursorPulse {

            0%,
            100% {
                opacity: 0.4;
                transform: scale(0.92);
            }

            50% {
                opacity: 1;
                transform: scale(1.06);
            }
        }

        .rb-ref-field-grid {
            display: grid;
            grid-template-columns: 170px 1fr;
            height: 100%;
            min-width: 0;
        }

        .rb-ref-panel {
            background: #ffffff;
            border-right: 1px solid #e2e8f0;
            padding: 9px;
            overflow: auto;
        }

        .rb-ref-panel-title,
        .rb-ref-card-title {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 8px;
            color: #334155;
            font-size: 7px;
            font-weight: 800;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .rb-ref-panel-title .material-symbols-outlined,
        .rb-ref-card-title .material-symbols-outlined {
            color: var(--primary);
            font-size: 12px;
        }

        .rb-ref-control {
            margin-bottom: 10px;
        }

        .rb-ref-control label {
            display: block;
            margin-bottom: 4px;
            color: #475569;
            font-size: 7px;
            font-weight: 700;
        }

        .rb-ref-select,
        .rb-ref-input {
            width: 100%;
            height: 24px;
            border: 1px solid #dbe3ef;
            border-radius: 6px;
            background: #f8fafc;
            color: #334155;
            font-size: 8px;
            font-weight: 600;
            padding: 0 7px;
            outline: none;
        }

        .rb-ref-chip-row {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .rb-ref-chip {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 3px 7px;
            border-radius: 999px;
            border: 1px solid #dbeafe;
            background: #eff6ff;
            color: #2563eb;
            font-size: 7px;
            font-weight: 800;
        }

        .rb-ref-chip.on,
        .s2-chip.on.rb-ref-chip {
            border-color: #2563eb;
            background: #2563eb;
            color: #ffffff;
        }

        .rb-ref-main {
            min-width: 0;
            padding: 9px;
            overflow: auto;
        }

        .rb-ref-table-wrap {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
            overflow: auto;
        }

        .rb-ref-table {
            width: 100%;
            min-width: 470px;
            border-collapse: collapse;
            font-size: 8px;
        }

        .rb-ref-table th {
            padding: 7px 8px;
            background: #f8fafc;
            border-bottom: 1px solid #e2e8f0;
            color: #64748b;
            font-size: 6px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-align: left;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .rb-ref-table td {
            padding: 7px 8px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 600;
            white-space: nowrap;
        }

        .rb-ref-table .checkbox-cell {
            width: 42px;
            text-align: center;
        }

        .rb-ref-check {
            display: inline-flex;
            width: 13px;
            height: 13px;
            border: 1px solid #cbd5e1;
            border-radius: 4px;
            background: #ffffff;
            vertical-align: middle;
        }

        .rb-ref-check.on {
            border-color: #2563eb;
            background: #2563eb;
            box-shadow: inset 0 0 0 3px #ffffff;
        }

        .rb-ref-mode {
            display: inline-flex;
            align-items: center;
            padding: 2px 6px;
            border-radius: 999px;
            background: #eef2ff;
            color: #4f46e5;
            font-size: 6px;
            font-weight: 800;
        }

        .rb-ref-table tr.highlighted td {
            background: #eff6ff;
        }

        .rb-ref-table tr.dimmed td {
            opacity: 0.26;
        }

        .rb-ref-count {
            display: flex;
            justify-content: flex-end;
            margin-top: 7px;
            position: static;
            bottom: auto;
            right: auto;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #64748b;
            font-size: 7px;
            font-weight: 700;
        }

        .rb-ref-count span {
            color: #2563eb;
        }

        .rb-ref-group-layout {
            display: grid;
            grid-template-columns: 1fr 170px;
            height: 100%;
            min-width: 0;
        }

        .rb-ref-group-card {
            background: #ffffff;
            border-left: 1px solid #e2e8f0;
            padding: 9px;
            overflow: auto;
        }

        .rb-ref-level {
            display: grid;
            grid-template-columns: 18px 1fr auto;
            align-items: center;
            gap: 6px;
            padding: 7px;
            margin-bottom: 6px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: #f8fbff;
            color: #334155;
            font-size: 8px;
            font-weight: 800;
        }

        .rb-ref-level span:first-child {
            display: grid;
            place-items: center;
            width: 18px;
            height: 18px;
            border-radius: 5px;
            background: #2563eb;
            color: #ffffff;
            font-size: 8px;
        }

        .rb-ref-total-toggle {
            display: flex;
            align-items: center;
            gap: 7px;
            margin-top: 9px;
            padding: 7px;
            border-radius: 8px;
            background: #f8fafc;
            color: #334155;
            font-size: 8px;
            font-weight: 700;
        }

        .rb-ref-pivot-layout {
            display: grid;
            grid-template-columns: 140px 1fr;
            height: 100%;
            min-width: 0;
        }

        .rb-ref-fields-list {
            background: #ffffff;
            border-right: 1px solid #e2e8f0;
            padding: 9px;
            overflow: auto;
        }

        .rb-ref-field-pill {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 6px;
            padding: 6px 7px;
            border: 1px solid #e2e8f0;
            border-radius: 7px;
            background: #f8fafc;
            color: #334155;
            font-size: 8px;
            font-weight: 700;
        }

        .rb-ref-pivot-main {
            display: grid;
            grid-template-rows: auto 1fr;
            min-width: 0;
            overflow: hidden;
        }

        .rb-ref-drop-zones {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 6px;
            padding: 9px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
        }

        .rb-ref-zone {
            min-height: 46px;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            padding: 6px;
        }

        .rb-ref-zone-title {
            display: flex;
            align-items: center;
            gap: 4px;
            margin-bottom: 5px;
            color: #64748b;
            font-size: 6px;
            font-weight: 800;
            text-transform: uppercase;
        }

        .rb-ref-zone-title .material-symbols-outlined {
            font-size: 10px;
        }

        .rb-ref-zone-chip {
            display: inline-flex;
            padding: 2px 5px;
            border-radius: 999px;
            background: #2563eb;
            color: #ffffff;
            font-size: 6px;
            font-weight: 800;
        }

        /* ============================================= */
        /* TD SLIDE 1: TEMPLATE GALLERY                 */
        /* ============================================= */
        .tg-area {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--soft-gray);
        }

        .tg-tabs {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 8px 10px;
            border-bottom: 1px solid var(--border-gray);
            background: white;
            flex-shrink: 0;
        }

        .tg-tab {
            padding: 4px 10px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
            color: var(--text-sec);
            border: 1px solid var(--border-gray);
            background: white;
            transition: all 0.2s;
        }

        .tg-tab.active {
            background: var(--secondary);
            color: white;
            border-color: var(--secondary);
        }

        .tg-grid {
            flex: 1;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            padding: 10px;
            overflow: auto;
            align-content: start;
            align-items: stretch;
        }

        .tg-card {
            display: flex;
            flex-direction: column;
            background: white;
            border-radius: 8px;
            border: 1.5px solid var(--border-gray);
            overflow: hidden;
            transition: all 0.25s;
            cursor: pointer;
            min-height: 132px;
        }

        .tg-card:hover {
            border-color: rgba(236, 72, 153, 0.3);
            box-shadow: var(--shadow-md);
        }

        .tg-card.selected {
            border-color: var(--secondary);
            box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.15);
        }

        .tg-card-preview {
            height: 70px;
            flex: 1 1 auto;
            position: relative;
            overflow: hidden;
        }

        .tg-card-preview-inner {
            position: absolute;
            inset: 3px;
            border-radius: 4px;
            overflow: hidden;
        }

        .tg-mini-title {
            font-size: 6px;
            font-weight: 800;
            line-height: 1;
            color: var(--text-main);
            white-space: nowrap;
        }

        .tg-mini-sub {
            font-size: 5px;
            font-weight: 700;
            color: var(--text-light);
            white-space: nowrap;
        }

        .tg-mini-metric {
            font-size: 8px;
            font-weight: 800;
            line-height: 1;
            color: var(--text-main);
            white-space: nowrap;
        }

        .tg-mini-line {
            height: 2px;
            border-radius: 999px;
            background: #e2e8f0;
        }

        .tg-mini-icon {
            width: 14px;
            height: 14px;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            color: white;
        }

        .tg-mini-icon .material-symbols-outlined {
            font-size: 10px;
        }

        .tg-card-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
            padding: 6px 8px;
            min-height: 36px;
        }

        .tg-card-name {
            font-size: 8px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 2px;
            line-height: 1.2;
        }

        .tg-card-cat {
            font-size: 6px;
            color: var(--text-light);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            line-height: 1.2;
        }

        /* ============================================= */
        /* TD SLIDE 2: TEMPLATE EDITOR                  */
        /* ============================================= */
        .te-grid {
            display: grid;
            grid-template-columns: 100px 1fr 140px;
            height: 100%;
        }

        .te-palette {
            border-right: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 6px;
        }

        .te-palette-title {
            font-size: 6px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-sec);
            margin-bottom: 6px;
        }

        .te-comp {
            display: flex;
            align-items: center;
            gap: 5px;
            padding: 5px 6px;
            border-radius: 5px;
            border: 1px dashed var(--border-gray);
            margin-bottom: 3px;
            font-size: 7px;
            font-weight: 600;
            color: var(--text-main);
            cursor: grab;
            transition: all 0.2s;
        }

        .te-comp:hover {
            border-color: var(--secondary);
            background: rgba(236, 72, 153, 0.03);
        }

        .te-comp .material-symbols-outlined {
            font-size: 11px;
            color: var(--text-light);
        }

        .te-canvas {
            position: relative;
            background: var(--soft-gray);
            overflow: auto;
            padding: 10px;
        }

        .te-canvas-inner {
            background: white;
            border: 1px solid var(--border-gray);
            border-radius: 6px;
            box-shadow: var(--shadow-sm);
            min-height: 100%;
            overflow: hidden;
            position: relative;
        }

        .te-block {
            border: 1.5px solid transparent;
            border-radius: 4px;
            margin: 4px;
            position: relative;
            transition: border-color 0.2s;
        }

        .te-block:hover {
            border-color: rgba(236, 72, 153, 0.3);
        }

        .te-block.selected {
            border-color: var(--secondary);
            box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.1);
        }

        .te-block-header {
            height: 32px;
            background: linear-gradient(135deg,
                    var(--secondary),
                    var(--rose));
            display: flex;
            align-items: center;
            padding: 0 10px;
        }

        .te-block-header-text {
            font-size: 8px;
            font-weight: 700;
            color: white;
        }

        .te-block-table {
            margin: 4px;
            width: calc(100% - 8px);
            border-collapse: collapse;
            font-size: 6px;
        }

        .te-block-table th {
            background: #f8fafc;
            padding: 3px 5px;
            text-align: left;
            font-weight: 700;
            color: var(--text-sec);
            border-bottom: 1px solid var(--border-gray);
            text-transform: uppercase;
            font-size: 5px;
        }

        .te-block-table td {
            padding: 3px 5px;
            border-bottom: 1px solid var(--light-border);
            color: var(--text-main);
        }

        .te-block-footer {
            height: 20px;
            background: #f8fafc;
            border-top: 1px solid var(--light-border);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .te-block-footer-text {
            font-size: 6px;
            color: var(--text-light);
            font-weight: 600;
        }

        .te-block-chart {
            height: 50px;
            margin: 4px;
            background: linear-gradient(180deg,
                    rgba(236, 72, 153, 0.05),
                    rgba(236, 72, 153, 0.02));
            border-radius: 4px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 6px;
            padding: 0 10px 6px;
        }

        .te-bar {
            width: 14px;
            border-radius: 3px 3px 0 0;
            transform-origin: bottom center;
            transform: scaleY(0);
        }

        .te-props {
            border-left: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 8px;
        }

        .te-props-title {
            font-size: 6px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-sec);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .te-props-title .material-symbols-outlined {
            font-size: 10px;
            color: var(--secondary);
        }

        .te-prop {
            margin-bottom: 8px;
        }

        .te-prop-label {
            font-size: 6px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            color: var(--text-main);
            margin-bottom: 3px;
        }

        .te-prop-input {
            width: 100%;
            padding: 4px 6px;
            border: 1px solid var(--border-gray);
            border-radius: 4px;
            font-size: 7px;
            font-family: inherit;
            background: var(--soft-gray);
            outline: none;
            color: var(--text-main);
        }

        .te-color-row {
            display: flex;
            gap: 3px;
        }

        .te-color-swatch {
            width: 18px;
            height: 18px;
            border-radius: 4px;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.2s;
        }

        .te-color-swatch.active {
            border-color: var(--text-main);
            transform: scale(1.15);
        }

        /* ============================================= */
        /* TD SLIDE 3: PIVOT TABLES                     */
        /* ============================================= */
        .s5-area {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: var(--soft-gray);
        }

        .s5-config {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-bottom: 1px solid var(--border-gray);
            background: white;
            flex-wrap: wrap;
            flex-shrink: 0;
        }

        .s5-zone {
            display: flex;
            align-items: center;
            gap: 3px;
            padding: 3px 7px;
            border-radius: 5px;
            border: 1.5px dashed #cbd5e1;
            background: #fafbfc;
            min-height: 22px;
            transition: all 0.25s;
            position: relative;
        }

        .s5-zone.filled {
            border-style: solid;
            border-color: rgba(139, 92, 246, 0.3);
            background: rgba(139, 92, 246, 0.03);
        }

        .s5-zone-label {
            font-size: 6px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            color: var(--text-sec);
            margin-right: 3px;
        }

        .s5-chip {
            padding: 2px 6px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 600;
            background: var(--accent);
            color: white;
        }

        .s5-pivot-area {
            flex: 1;
            overflow: auto;
            padding: 8px;
        }

        .s5-ptwrap {
            background: white;
            border-radius: 5px;
            box-shadow: var(--shadow-sm);
            overflow: auto;
        }

        .s5-pt {
            border-collapse: collapse;
            font-size: 8px;
            min-width: 100%;
        }

        .s5-pt th {
            background: #f8fafc;
            color: var(--text-sec);
            font-weight: 700;
            padding: 6px 10px;
            border-bottom: 2px solid var(--border-gray);
            border-right: 1px solid var(--light-border);
            font-size: 6px;
            text-transform: uppercase;
            text-align: center;
            white-space: nowrap;
        }

        .s5-pt th.corner {
            background: var(--accent);
            color: white;
            text-align: left;
            border-right: 2px solid rgba(0, 0, 0, 0.1);
        }

        .s5-pt th.rhdr {
            text-align: left;
            background: #fafbfc;
        }

        .s5-pt td {
            padding: 5px 10px;
            border-bottom: 1px solid var(--light-border);
            border-right: 1px solid var(--light-border);
            color: var(--text-main);
            font-weight: 500;
            text-align: center;
            font-family: "Space Grotesk", monospace;
        }

        .s5-pt td.rlbl {
            text-align: left;
            font-weight: 700;
            background: #fafbfc;
            font-family: "Poppins", sans-serif;
        }

        .s5-pt td.tot {
            background: rgba(139, 92, 246, 0.05);
            font-weight: 700;
            color: var(--accent);
        }

        .s5-pt td.grand {
            background: var(--accent);
            color: white;
            font-weight: 800;
        }

        /* ============================================= */
        /* TD SLIDE 4: SAVE FOR LATER                   */
        /* ============================================= */
        .s6-grid {
            display: grid;
            grid-template-columns: 180px 1fr;
            height: 100%;
        }

        .s6-list {
            border-right: 1px solid var(--border-gray);
            background: white;
            overflow-y: auto;
            padding: 8px;
        }

        .s6-list-title {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-sec);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .s6-list-title .material-symbols-outlined {
            font-size: 11px;
            color: var(--secondary);
        }

        .s6-item {
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 6px 8px;
            border-radius: 7px;
            border: 1.5px solid var(--border-gray);
            margin-bottom: 4px;
            cursor: pointer;
            transition: all 0.25s;
        }

        .s6-item:hover {
            border-color: rgba(236, 72, 153, 0.3);
        }

        .s6-item.on {
            border-color: var(--secondary);
            background: rgba(236, 72, 153, 0.04);
        }

        .s6-item-ic {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            background: rgba(236, 72, 153, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .s6-item-ic .material-symbols-outlined {
            font-size: 13px;
            color: var(--secondary);
        }

        .s6-item-txt {
            flex: 1;
            min-width: 0;
        }

        .s6-item-name {
            font-size: 8px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .s6-item-meta {
            font-size: 6px;
            color: var(--text-sec);
            display: flex;
            align-items: center;
            gap: 3px;
        }

        /* ============================================= */
        /* SLIDE NAVIGATION DOTS                        */
        /* ============================================= */
        .slide-nav {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 16px 32px;
            flex-shrink: 0;
            position: relative;
            z-index: 10;
        }

        .slide-nav::before {
            content: "";
            position: absolute;
            top: 0;
            left: 32px;
            right: 32px;
            height: 1px;
            background: var(--light-border);
        }

        .slide-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--border-gray);
            cursor: pointer;
            transition: all 0.35s var(--ease-out);
            will-change: transform3d, background;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .slide-dot.active {
            background: var(--primary);
            width: 28px;
            border-radius: 100px;
        }

        .slide-dot.rose-active {
            background: var(--secondary);
            width: 28px;
            border-radius: 100px;
        }

        /* ============================================= */
        /* MOBILE RESPONSIVE                            */
        /* ============================================= */
        @media (max-width: 900px) {
            .slide {
                grid-template-columns: 1fr;
            }

            .slide-left {
                padding: 28px 20px 20px;
            }

            .slide-right {
                padding: 16px;
            }

            .slide-right::before {
                display: none;
            }

            .slide-desc {
                max-width: 100%;
            }

            .showcase {
                max-width: 100%;
            }

            .slide-nav {
                padding: 12px 20px;
            }

            .slide-nav::before {
                left: 20px;
                right: 20px;
            }

            .top-bar {
                padding: 12px 16px;
            }

            .s1-grid {
                grid-template-columns: 80px 1fr;
            }

            .s2-grid {
                grid-template-columns: 140px 1fr;
            }

            .s3-grid {
                grid-template-columns: 1fr 140px;
            }

            .s6-grid {
                grid-template-columns: 140px 1fr;
            }

            .te-grid {
                grid-template-columns: 70px 1fr 110px;
            }

        }

        @media (max-width: 600px) {
            .slide-left {
                padding: 20px 16px 16px;
            }

            .slide-right {
                padding: 12px;
            }

            .slide-title {
                font-size: 22px;
                letter-spacing: -0.5px;
            }

            .slide-desc {
                font-size: 13px;
                margin-bottom: 16px;
            }

            .slide-features {
                margin-bottom: 20px;
            }

            .slide-features li {
                font-size: 12px;
            }

            .slide-step-badge {
                font-size: 10px;
                padding: 4px 10px;
                margin-bottom: 14px;
            }

            .slide-cta {
                padding: 9px 18px;
                font-size: 12px;
            }

            .top-bar-page-title {
                display: none;
            }

            .top-bar-divider {
                display: none;
            }

            .s1-grid {
                grid-template-columns: 1fr;
            }

            .s1-entities {
                border-right: none;
                border-bottom: 1px solid var(--border-gray);
                max-height: 60px;
                display: flex;
                flex-wrap: wrap;
                gap: 4px;
                padding: 6px;
            }

            .s1-entity {
                margin-bottom: 0;
            }

            .s2-grid {
                grid-template-columns: 1fr;
            }

            .s2-filters {
                border-right: none;
                border-bottom: 1px solid var(--border-gray);
                max-height: 120px;
            }

            .s3-grid {
                grid-template-columns: 1fr;
            }

            .s3-opts {
                border-left: none;
                border-top: 1px solid var(--border-gray);
                max-height: 100px;
                display: flex;
                gap: 4px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 6px;
            }

            .s3-opt {
                min-width: 120px;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .s6-grid {
                grid-template-columns: 1fr;
            }

            .s6-list {
                border-right: none;
                border-bottom: 1px solid var(--border-gray);
                max-height: 80px;
                display: flex;
                gap: 4px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 6px;
            }

            .s6-item {
                min-width: 100px;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .te-grid {
                grid-template-columns: 1fr;
            }

            .te-palette {
                border-right: none;
                border-bottom: 1px solid var(--border-gray);
                max-height: 50px;
                display: flex;
                gap: 4px;
                overflow-x: auto;
                overflow-y: hidden;
                padding: 6px;
            }

            .te-comp {
                min-width: 80px;
                margin-bottom: 0;
                flex-shrink: 0;
            }

            .te-props {
                border-left: none;
                border-top: 1px solid var(--border-gray);
                max-height: 100px;
            }

            .showcase-body {
                height: 240px;
            }

            .tg-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
                padding: 6px;
            }
        }

        /* ============================================= */
        /* SLIDE STAGE HEIGHT STABILITY                  */
        /* ============================================= */
        @media (max-width: 900px) {
            .slide-stage {
                min-height: 600px;
            }
        }

        @media (max-width: 600px) {
            .slide-stage {
                min-height: 520px;
            }
        }

        /* ============================================= */
        /* RESPONSIVE POLISH OVERRIDES                  */
        /* ============================================= */
        @media (max-width: 1200px) {
            .slide-left {
                padding-inline: clamp(24px, 3vw, 40px);
            }

            .slide-right {
                padding-inline: clamp(16px, 2.5vw, 28px);
            }

            .showcase {
                max-width: min(620px, 100%);
            }
        }

        @media (max-width: 900px) {
            .page-section {
                min-height: auto;
                overflow: visible;
            }

            .slide-stage {
                flex: 0 0 auto;
                min-height: 680px;
            }

            .slide {
                align-content: start;
                grid-template-rows: auto auto;
            }

            .slide-left {
                justify-content: flex-start;
                min-width: 0;
                overflow: visible;
            }

            .slide-right {
                align-items: flex-start;
                min-width: 0;
                overflow: visible;
            }

            .showcase-toolbar {
                gap: 8px;
            }

            .showcase-toolbar-left,
            .showcase-toolbar-right {
                min-width: 0;
            }

            .showcase-toolbar-title {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .showcase-tb-btn {
                flex-shrink: 0;
            }

            .showcase-body {
                height: clamp(300px, 48vh, 420px);
            }

            .s2-rtable,
            .s3-table,
            .s4-t,
            .s5-pt {
                min-width: 520px;
            }
        }

        @media (max-width: 720px) {
            .top-bar {
                padding: 10px 14px;
            }

            .top-bar-logo {
                font-size: 16px;
                white-space: nowrap;
            }

            .top-bar-btn {
                padding: 7px 10px;
            }

            .slide-title {
                font-size: clamp(24px, 8vw, 32px);
            }

            .slide-desc {
                max-width: 60ch;
            }

            .slide-stage {
                min-height: 700px;
            }
        }

        @media (max-width: 600px) {
            .top-bar-right {
                gap: 6px;
            }

            .top-bar-btn {
                width: 34px;
                height: 34px;
                justify-content: center;
                padding: 0;
            }

            .top-bar-btn {
                font-size: 0;
            }

            .top-bar-btn .material-symbols-outlined {
                font-size: 18px;
            }

            .slide-stage {
                min-height: 650px;
            }

            .slide-left {
                padding: 18px 14px 12px;
            }

            .slide-right {
                padding: 10px 10px 12px;
            }

            .slide-features {
                gap: 7px;
            }

            .showcase {
                border-radius: 10px;
                box-shadow: var(--shadow-md);
            }

            .showcase::after {
                display: none;
            }

            .showcase-toolbar {
                min-height: 34px;
                padding: 6px 8px;
            }

            .showcase-toolbar-right {
                gap: 4px;
            }

            .showcase-tb-btn {
                min-height: 24px;
                padding: 4px 7px;
                max-width: 96px;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .showcase-body {
                height: clamp(300px, 58vh, 430px);
            }

            .slide-nav {
                padding: 10px 14px 14px;
            }

            .slide-nav::before {
                left: 14px;
                right: 14px;
            }

            .s1-canvas,
            .s2-result,
            .s3-table-area,
            .s4-area,
            .tg-area,
            .te-canvas,
            .s5-area {
                min-height: 0;
            }

            .s1-canvas {
                min-height: 240px;
                overflow: hidden;
            }

            .s1-lines {
                width: 100%;
                height: 100%;
            }

            #node-orders {
                top: 42px !important;
                left: 12px !important;
            }

            #node-customers {
                top: 42px !important;
                left: 40% !important;
            }

            #node-products {
                top: 42px !important;
                left: auto !important;
                right: 10px !important;
            }

            #node-payments {
                top: 160px !important;
                left: 40% !important;
            }

            .anim-cursor {
                width: 18px;
                height: 18px;
            }

            .drag-ghost {
                padding: 3px 7px;
                font-size: 7px;
                z-index: 70;
            }

            .anim-click-ring {
                width: 24px;
                height: 24px;
            }

            .highlight-pulse {
                border-width: 1.5px;
            }

            .s2-filters,
            .s3-opts,
            .s6-list,
            .te-palette,
            .te-props {
                scrollbar-width: thin;
            }

            .tg-card {
                min-height: 70px;
            }

            .te-canvas-inner,
            .s5-ptwrap,
            .s4-twrap,
            .s3-table-wrap,
            .s2-rtable-wrap {
                overflow: auto;
                -webkit-overflow-scrolling: touch;
            }
        }

        @media (max-width: 420px) {
            .slide-stage {
                min-height: 690px;
            }

            .slide-title {
                font-size: 22px;
            }

            .slide-desc {
                font-size: 12px;
                line-height: 1.6;
            }

            .slide-features li {
                font-size: 11px;
            }

            .showcase-body {
                height: 360px;
            }

            .tg-grid {
                grid-template-columns: 1fr;
            }

            .s2-dates {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 360px) {
            .slide-stage {
                min-height: 730px;
            }

            .slide-step-badge {
                white-space: normal;
                line-height: 1.25;
            }

            .showcase-toolbar-title {
                max-width: 120px;
            }
        }

        /* ============================================= */
        /* GPU ACCELERATION HELPERS                      */
        /* ============================================= */
        .showcase-body,
        .s1-canvas,
        .s2-result,
        .s3-table-area,
        .s4-area,
        .tg-area,
        .te-canvas,
        .s5-area,
        .tg-card,
        .s6-item,
        .s3-opt,
        .te-comp,
        .s5-zone {
            will-change: auto;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* ============================================= */
        /* REDUCED MOTION PREFERENCE                     */
        /* ============================================= */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
            }
        }
        /* Integrated AI imported showcase sections */
        .integrated-ai-showcase-section {
            position: relative;
            z-index: 2;
            padding: 110px 40px 40px;
            background:
                radial-gradient(circle at 18% 14%, rgba(99, 102, 241, 0.1), transparent 28%),
                radial-gradient(circle at 82% 46%, rgba(236, 72, 153, 0.08), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .integrated-ai-showcase-row {
            max-width: 1180px;
            margin: 0 auto 72px;
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
            gap: 64px;
            align-items: center;
        }

        .integrated-ai-showcase-row.reverse {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        }

        .integrated-ai-showcase-row.reverse .integrated-ai-showcase-copy {
            order: 2;
        }

        .integrated-ai-showcase-copy .ip-desc {
            margin-bottom: 26px;
        }

        .integrated-ai-showcase-tags,
        .integrated-ai-showcase-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .integrated-ai-showcase-tags span,
        .integrated-ai-showcase-highlights span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 15px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.84);
            border: 1px solid rgba(99, 102, 241, 0.13);
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
        }

        .integrated-ai-showcase-tags i {
            color: #6366f1;
            font-size: 10px;
        }

        .integrated-ai-showcase-visual {
            min-height: 380px;
            border: 1px solid rgba(99, 102, 241, 0.13);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.84);
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(18px);
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .integrated-ai-showcase-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.09), transparent 42%, rgba(236, 72, 153, 0.08));
            pointer-events: none;
        }

        .int-ai-chat,
        .int-ai-process,
        .int-ai-guide,
        .int-ai-flow,
        .int-ai-dashboard {
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .int-ai-chat {
            display: grid;
            gap: 14px;
        }

        .int-ai-chat-head,
        .int-ai-input,
        .int-ai-result,
        .int-ai-guide>div,
        .int-ai-stats div {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            border-radius: 17px;
            background: rgba(255, 255, 255, 0.75);
            border: 1px solid rgba(99, 102, 241, 0.12);
        }

        .int-ai-orb {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background: linear-gradient(135deg, #6366f1, #ec4899);
            box-shadow: 0 0 26px rgba(99, 102, 241, 0.32);
            flex-shrink: 0;
        }

        .int-ai-chat-head strong {
            display: block;
            font-size: 15px;
        }

        .int-ai-chat-head span,
        .int-ai-chat-head em,
        .int-ai-input span,
        .int-ai-result em {
            color: var(--muted);
            font-size: 11px;
            font-style: normal;
        }

        .int-ai-chat-head em {
            margin-left: auto;
            color: #7b61ff;
            font-weight: 800;
            text-transform: uppercase;
        }

        .int-ai-wave {
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 18px;
            background: rgba(99, 102, 241, 0.06);
        }

        .int-ai-wave i {
            width: 5px;
            height: 22px;
            border-radius: 999px;
            background: linear-gradient(180deg, #6366f1, #ec4899);
            animation: intAIWave 1.2s ease-in-out infinite;
        }

        .int-ai-wave i:nth-child(2) { animation-delay: .1s; }
        .int-ai-wave i:nth-child(3) { animation-delay: .2s; }
        .int-ai-wave i:nth-child(4) { animation-delay: .3s; }
        .int-ai-wave i:nth-child(5) { animation-delay: .4s; }

        .int-ai-bubble {
            max-width: 82%;
            padding: 13px 16px;
            border-radius: 18px;
            font-size: 13px;
            line-height: 1.6;
        }

        .int-ai-bubble.user {
            justify-self: end;
            color: white;
            background: linear-gradient(135deg, #4f8cff, #7b61ff);
            border-bottom-right-radius: 5px;
        }

        .int-ai-bubble.ai {
            justify-self: start;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(99, 102, 241, 0.12);
            border-bottom-left-radius: 5px;
        }

        .int-ai-input {
            justify-content: space-between;
        }

        .int-ai-input i {
            color: #6366f1;
        }

        .int-ai-process {
            display: grid;
            gap: 18px;
        }

        .int-ai-search {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-radius: 18px;
            background: #0f172a;
            color: white;
            font-weight: 700;
        }

        .int-ai-search i {
            color: #a855f7;
        }

        .int-ai-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .int-ai-steps span {
            flex: 1;
            min-width: 76px;
            text-align: center;
            padding: 8px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.08);
            color: var(--light-blue);
            font-size: 11px;
            font-weight: 800;
        }

        .int-ai-ring {
            width: 140px;
            height: 140px;
            margin: 4px auto;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: conic-gradient(#7b61ff 0 94%, rgba(99, 102, 241, 0.12) 94% 100%);
            color: white;
            box-shadow: 0 0 34px rgba(123, 97, 255, 0.24);
            position: relative;
        }

        .int-ai-ring::after {
            content: '';
            position: absolute;
            inset: 12px;
            border-radius: 50%;
            background: #0f172a;
        }

        .int-ai-ring b,
        .int-ai-ring small {
            position: relative;
            z-index: 1;
        }

        .int-ai-ring b {
            font-size: 30px;
            font-family: 'Space Grotesk';
        }

        .int-ai-ring small {
            color: rgba(255, 255, 255, 0.65);
            font-size: 11px;
        }

        .int-ai-result {
            justify-content: center;
        }

        .int-ai-result i {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(16, 185, 129, 0.1);
            color: var(--emerald);
        }

        .int-ai-guide {
            display: grid;
            gap: 12px;
        }

        .int-ai-guide .int-ai-question {
            background: #0f172a;
            color: white;
            font-weight: 800;
        }

        .int-ai-guide b {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #00c2ff, #4f8cff);
            color: white;
            flex-shrink: 0;
        }

        .int-ai-guide span {
            flex: 1;
            font-weight: 800;
            font-size: 13px;
        }

        .int-ai-guide em {
            color: var(--muted);
            font-size: 11px;
            font-style: normal;
        }

        .int-ai-flow {
            min-height: 320px;
            border-radius: 20px;
            background:
                linear-gradient(90deg, rgba(99, 102, 241, 0.06) 1px, transparent 1px),
                linear-gradient(rgba(99, 102, 241, 0.06) 1px, transparent 1px);
            background-size: 42px 42px;
        }

        .int-flow-node {
            position: absolute;
            left: var(--x);
            top: var(--y);
            padding: 12px 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(99, 102, 241, 0.14);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
            font-size: 12px;
            font-weight: 800;
            text-align: center;
            line-height: 1.25;
        }

        .int-flow-node.trigger { color: #f59e0b; }
        .int-flow-node.condition { color: #4f8cff; }
        .int-flow-node.action { color: #10b981; }

        .int-flow-line {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--w);
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #6366f1, #ec4899);
            transform: rotate(var(--r, 0deg));
            box-shadow: 0 0 14px rgba(99, 102, 241, 0.28);
        }

        .int-ai-dashboard {
            display: grid;
            gap: 18px;
        }

        .int-ai-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        .int-ai-stats div {
            flex-direction: column;
            align-items: flex-start;
        }

        .int-ai-stats b {
            font-size: 24px;
            font-family: 'Space Grotesk';
            color: #6366f1;
        }

        .int-ai-stats span {
            color: var(--muted);
            font-size: 11px;
        }

        .int-ai-stats em {
            color: var(--emerald);
            font-size: 11px;
            font-style: normal;
            font-weight: 800;
        }

        .int-ai-chart {
            min-height: 190px;
            padding: 18px;
            border-radius: 20px;
            background: #0f172a;
            color: white;
            display: flex;
            align-items: end;
            gap: 14px;
            position: relative;
        }

        .int-ai-chart strong {
            position: absolute;
            top: 16px;
            left: 18px;
            font-size: 13px;
        }

        .int-ai-chart strong em {
            margin-left: 8px;
            color: #ec4899;
            font-size: 9px;
            font-style: normal;
        }

        .int-ai-chart span {
            flex: 1;
            border-radius: 10px 10px 0 0;
            background: linear-gradient(180deg, #7b61ff, #00c2ff);
            min-height: 42px;
            box-shadow: 0 0 18px rgba(123, 97, 255, 0.22);
        }

        .int-ai-chart span:nth-child(2) { height: 74px; }
        .int-ai-chart span:nth-child(3) { height: 108px; }
        .int-ai-chart span:nth-child(4) { height: 92px; }
        .int-ai-chart span:nth-child(5) { height: 132px; }
        .int-ai-chart span:nth-child(6) { height: 116px; }

        .integrated-ai-showcase-highlights {
            max-width: 1080px;
            margin: 0 auto 40px;
            justify-content: center;
        }

        @keyframes intAIWave {
            0%, 100% { transform: scaleY(0.55); opacity: .55; }
            50% { transform: scaleY(1.45); opacity: 1; }
        }

        @media(max-width: 900px) {
            .integrated-ai-showcase-section {
                padding: 80px 18px 20px;
            }

            .integrated-ai-showcase-row,
            .integrated-ai-showcase-row.reverse {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-bottom: 56px;
            }

            .integrated-ai-showcase-row.reverse .integrated-ai-showcase-copy {
                order: 0;
            }

            .integrated-ai-showcase-visual {
                min-height: 320px;
                padding: 18px;
            }

            .int-ai-stats {
                grid-template-columns: 1fr;
            }

            .int-flow-line {
                display: none;
            }
        }

        /* AI Flow Builder showcase sections */
        .ai-flow-showcase-section {
            position: relative;
            z-index: 2;
            padding: 110px 40px 40px;
            background:
                radial-gradient(circle at 18% 14%, rgba(236, 72, 153, 0.1), transparent 28%),
                radial-gradient(circle at 82% 46%, rgba(123, 97, 255, 0.08), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #fff8fc 100%);
        }

        .ai-flow-showcase-row {
            max-width: 1180px;
            margin: 0 auto 72px;
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
            gap: 64px;
            align-items: center;
        }

        .ai-flow-showcase-row.reverse {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        }

        .ai-flow-showcase-row.reverse .ai-flow-showcase-copy {
            order: 2;
        }

        .ai-flow-showcase-copy .ip-desc {
            margin-bottom: 26px;
        }

        .ai-flow-showcase-tags,
        .ai-flow-showcase-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .ai-flow-showcase-tags span,
        .ai-flow-showcase-highlights span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 15px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(236, 72, 153, 0.13);
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
        }

        .ai-flow-showcase-tags i {
            color: #ec4899;
            font-size: 10px;
        }

        .ai-flow-showcase-visual {
            min-height: 380px;
            border: 1px solid rgba(236, 72, 153, 0.13);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.84);
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(18px);
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .ai-flow-showcase-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), transparent 42%, rgba(123, 97, 255, 0.08));
            pointer-events: none;
        }

        .flow-showcase-canvas,
        .flow-trigger-grid,
        .flow-approval,
        .flow-import,
        .flow-monitor,
        .flow-report,
		.flow-action-grid,
        .flow-source-panel,
        .flow-schedule-grid,
        .flow-approval-chain {
            width: 100%;
            position: relative;
            z-index: 1;
        }
        

        .flow-showcase-canvas {
            min-height: 320px;
            border-radius: 22px;
            background:
                linear-gradient(90deg, rgba(236, 72, 153, 0.06) 1px, transparent 1px),
                linear-gradient(rgba(236, 72, 153, 0.06) 1px, transparent 1px);
            background-size: 42px 42px;
            padding: 20px;
            display: grid;
            gap: 16px;
            align-content: center;
        }

        .flow-component-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .flow-module-card {
            padding: 12px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(236, 72, 153, 0.12);
            box-shadow: 0 12px 24px rgba(15, 23, 42, 0.06);
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: flex-start;
        }

        .flow-module-card.accent {
            background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(123, 97, 255, 0.1));
            border-color: rgba(236, 72, 153, 0.2);
        }

        .flow-module-card i {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            color: white;
        }

        .flow-module-card span {
            font-size: 11px;
            font-weight: 800;
            color: var(--primary);
        }

        .flow-connect-line {
            height: 2px;
            border-radius: 999px;
            background: linear-gradient(90deg, #ec4899, #7b61ff);
            opacity: 0.74;
        }

        .flow-node-pill {
            width: fit-content;
            padding: 8px 12px;
            border-radius: 999px;
            background: #0f172a;
            color: white;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .flow-action-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .flow-action-card,
        .flow-source-card,
        .flow-schedule-item,
        .flow-approval-step {
            padding: 14px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(236, 72, 153, 0.12);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .flow-action-card {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .flow-action-card i {
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            color: white;
            flex-shrink: 0;
        }

        .flow-action-card strong,
        .flow-source-card strong,
        .flow-schedule-item strong,
        .flow-approval-step strong {
            display: block;
            font-size: 13px;
            color: var(--primary);
            margin-bottom: 3px;
        }

        .flow-action-card span,
        .flow-source-card span,
        .flow-schedule-item span,
        .flow-approval-step span {
            font-size: 11px;
            color: var(--muted);
        }

        .flow-source-panel {
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 14px;
            align-items: center;
        }

        .flow-source-card {
            min-height: 140px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px;
        }

        .flow-source-list {
            display: grid;
            gap: 8px;
        }

        .flow-source-list div {
            padding: 10px 12px;
            border-radius: 12px;
            background: rgba(248, 250, 252, 0.95);
            border: 1px solid rgba(236, 72, 153, 0.08);
            color: var(--primary);
            font-size: 12px;
            font-weight: 700;
        }

        .flow-schedule-grid {
            display: grid;
            gap: 12px;
        }

        .flow-schedule-item {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .flow-schedule-item .flow-time-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            flex-shrink: 0;
            box-shadow: 0 0 14px rgba(236, 72, 153, 0.24);
        }

        .flow-approval-chain {
            display: grid;
            gap: 10px;
        }

        .flow-approval-step {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .flow-approval-step .step-badge {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            color: white;
            font-weight: 800;
            flex-shrink: 0;
        }

        .flow-approval-step.active {
            border-color: rgba(236, 72, 153, 0.24);
            box-shadow: 0 16px 36px rgba(236, 72, 153, 0.1);
        }

        .flow-card {
            position: absolute;
            left: var(--x);
            top: var(--y);
            padding: 13px 15px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(236, 72, 153, 0.14);
            box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
            font-size: 12px;
            font-weight: 800;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .flow-card.trigger { color: #22c55e; }
        .flow-card.condition { color: #4f8cff; }
        .flow-card.ai { color: #6366f1; }
        .flow-card.action { color: #f97316; }
        .flow-card.output { color: #ec4899; }

        .flow-wire {
            position: absolute;
            left: var(--x);
            top: var(--y);
            width: var(--w);
            height: 3px;
            border-radius: 999px;
            background: linear-gradient(90deg, #ec4899, #7b61ff);
            transform: rotate(var(--r, 0deg));
            box-shadow: 0 0 14px rgba(236, 72, 153, 0.28);
        }

        .flow-trigger-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .flow-trigger-grid div,
        .approval-row,
        .flow-monitor div {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(236, 72, 153, 0.12);
        }

        .flow-trigger-grid i {
            width: 40px;
            height: 40px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 14px;
            color: white;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            flex-shrink: 0;
        }

        .flow-trigger-grid strong,
        .approval-row span,
        .flow-monitor span {
            display: block;
            font-size: 13px;
            font-weight: 800;
        }

        .flow-trigger-grid span,
        .approval-row em {
            color: var(--muted);
            font-size: 11px;
            font-style: normal;
        }

        .flow-approval,
        .flow-monitor {
            display: grid;
            gap: 12px;
        }

        .approval-row b {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #ec4899, #7b61ff);
            color: white;
            flex-shrink: 0;
        }

        .approval-row span {
            flex: 1;
        }

        .approval-row.active {
            border-color: rgba(236, 72, 153, 0.28);
            box-shadow: 0 16px 36px rgba(236, 72, 153, 0.1);
        }

        .flow-import {
            display: grid;
            gap: 20px;
            text-align: center;
        }

        .import-file {
            padding: 22px;
            border-radius: 20px;
            background: #0f172a;
            color: white;
        }

        .import-file i {
            display: block;
            font-size: 34px;
            color: #ec4899;
            margin-bottom: 10px;
        }

        .import-file strong,
        .import-file span {
            display: block;
        }

        .import-file span,
        .import-status span {
            color: var(--muted);
            font-size: 12px;
        }

        .import-bars {
            display: grid;
            gap: 10px;
        }

        .import-bars span {
            height: 10px;
            width: var(--w);
            border-radius: 999px;
            background: linear-gradient(90deg, #ec4899, #7b61ff);
            box-shadow: 0 0 18px rgba(236, 72, 153, 0.18);
        }

        .import-status b {
            display: block;
            font: 800 38px 'Space Grotesk';
            color: #ec4899;
        }

        .flow-monitor strong {
            color: #ec4899;
            font-family: 'Space Grotesk';
        }

        .flow-monitor span {
            flex: 1;
        }

        .flow-monitor i {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.42);
        }

        .flow-monitor i.warn { background: #f59e0b; box-shadow: 0 0 14px rgba(245, 158, 11, 0.42); }
        .flow-monitor i.hot { background: #f43f5e; box-shadow: 0 0 14px rgba(244, 63, 94, 0.42); }

        .flow-report {
            display: grid;
            gap: 16px;
        }

        .report-preview {
            min-height: 230px;
            padding: 22px;
            border-radius: 22px;
            background: #0f172a;
            color: white;
        }

        .report-preview h4 {
            margin-bottom: 28px;
        }

        .report-preview span {
            display: block;
            height: 14px;
            margin-bottom: 14px;
            border-radius: 999px;
            background: linear-gradient(90deg, rgba(236, 72, 153, 0.9), rgba(123, 97, 255, 0.45));
        }

        .report-preview span:nth-child(3) { width: 78%; }
        .report-preview span:nth-child(4) { width: 58%; }

        .report-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .report-actions button {
            padding: 10px 18px;
            border-radius: 999px;
            background: rgba(236, 72, 153, 0.1);
            color: #ec4899;
            font-weight: 800;
            font-size: 12px;
        }

        .ai-flow-showcase-highlights {
            max-width: 1080px;
            margin: 0 auto 40px;
            justify-content: center;
        }

        @media(max-width: 900px) {
            .ai-flow-showcase-section {
                padding: 80px 18px 20px;
            }

            .ai-flow-showcase-row,
            .ai-flow-showcase-row.reverse {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-bottom: 56px;
            }

            .ai-flow-showcase-row.reverse .ai-flow-showcase-copy {
                order: 0;
            }

            .ai-flow-showcase-visual {
                min-height: 320px;
                padding: 18px;
            }

            .flow-trigger-grid {
                grid-template-columns: 1fr;
            }

            .flow-wire {
                display: none;
            }
        }

		 /* Configurable feature showcase sections */
        .config-showcase-section {
            padding: 56px 32px 44px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
            overflow: hidden;
        }

        .config-showcase-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(148, 163, 184, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
            background-size: 34px 34px;
            pointer-events: none;
        }

        .config-showcase-wrap {
            max-width: 1260px;
            margin: 0 auto;
            position: relative;
            z-index: 1;
            display: grid;
            gap: 34px;
        }

        .config-showcase-row {
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
            gap: 40px;
            align-items: center;
        }

        .config-showcase-row.reverse {
            grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        }

        .config-showcase-row.reverse .config-showcase-copy {
            order: 2;
        }

        .config-showcase-copy .ip-desc {
            margin-top: 16px;
        }

        .config-showcase-tags,
        .config-showcase-highlights {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 24px;
        }

        .config-showcase-tags span,
        .config-showcase-highlights span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 12px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.08);
            border: 1px solid rgba(79, 140, 255, 0.14);
            color: #334155;
            font-size: 12px;
            font-weight: 800;
        }

        .config-showcase-visual {
            position: relative;
            min-height: 380px;
            border-radius: 22px;
            background: rgba(255, 255, 255, 0.86);
            border: 1px solid rgba(148, 163, 184, 0.24);
            box-shadow: 0 30px 90px rgba(15, 23, 42, 0.14);
            padding: 18px;
            overflow: hidden;
        }

        .config-showcase-section .showcase {
            width: 100%;
            max-width: 100%;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 24px 70px rgba(15, 23, 42, 0.12);
        }


        .config-showcase-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(148, 163, 184, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.15) 1px, transparent 1px);
            background-size: 28px 28px;
            opacity: 0.75;
        }

        .config-showcase-board {
            position: relative;
            z-index: 1;
            height: auto;
            min-height: 420px;
            display: grid;
            grid-template-rows: auto 1fr;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: visible;
            box-shadow: 0 20px 54px rgba(15, 23, 42, 0.1);
        }

        .config-board-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 12px 14px;
            border-bottom: 1px solid #e2e8f0;
            background: #ffffff;
        }

        .config-board-title {
            font-size: 13px;
            font-weight: 900;
            color: #1e293b;
        }

        .config-board-action {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 10px;
            border-radius: 8px;
            color: #ffffff;
            font-size: 11px;
            font-weight: 800;
        }

        .config-board-body {
            display: grid;
            grid-template-columns: 150px minmax(0, 1fr);
            min-height: 0;
        }

        .config-list-panel {
            padding: 14px;
            border-right: 1px solid #e2e8f0;
            background: #f8fafc;
        }

        .config-list-panel div,
        .config-mini-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            border-radius: 9px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 11px;
            font-weight: 800;
            margin-bottom: 10px;
        }

        .config-main-panel {
            padding: 16px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
            display: flex;
            align-items: stretch;
            justify-content: center;
            overflow: visible;
            min-width: 0;
        }

        .config-main-panel>div {
            flex: 1;
            min-height: 0;
        }

        .config-main-panel img,
        .config-showcase-board img {
            display: block;
            width: 100%;
            height: auto;
            max-width: 100%;
            object-fit: contain;
            object-position: center;
            background: linear-gradient(135deg, #f8fbff, #ffffff);
        }

        .config-visual-shell {
            width: 100%;
            min-height: 280px;
            max-height: 360px;
            aspect-ratio: auto;
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.16);
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.10), rgba(20, 184, 166, 0.10));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
        }

        .config-visual-shell img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            object-position: center;
        }

        .config-visual-shell::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 28%, rgba(15, 23, 42, 0.03));
            pointer-events: none;
        }

        .config-visual-chip,
        .config-visual-pill,
        .config-visual-bars {
            position: absolute;
            display: flex;
            align-items: center;
            gap: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
            padding: 7px 10px;
            font-size: 10px;
            font-weight: 700;
            color: #0f172a;
            z-index: 2;
        }

        .config-visual-chip {
            top: 12px;
            left: 12px;
            color: var(--accent, #4f8cff);
        }

        .config-visual-chip .icon {
            width: 24px;
            height: 24px;
            display: grid;
            place-items: center;
            border-radius: 50%;
            background: var(--accent, #4f8cff);
            color: white;
        }

        .config-visual-pill {
            top: 12px;
            right: 12px;
            background: rgba(15, 23, 42, 0.82);
            color: white;
            backdrop-filter: blur(8px);
        }

        .config-visual-bars {
            left: 12px;
            bottom: 12px;
            padding: 8px 10px;
            border-radius: 12px;
        }

        .config-visual-bars span {
            width: 8px;
            border-radius: 999px;
            display: inline-block;
        }

        .config-visual-bars .bar-a {
            height: 20px;
            background: var(--accent, #4f8cff);
        }

        .config-visual-bars .bar-b {
            height: 30px;
            background: #14b8a6;
        }

        .config-visual-bars .bar-c {
            height: 44px;
            background: #7b61ff;
        }

        .config-visual-status {
            position: absolute;
            right: 12px;
            bottom: 12px;
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
            font-size: 10px;
            font-weight: 700;
            color: #0f172a;
            z-index: 2;
        }

        .config-visual-status .dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--accent, #4f8cff);
        }

        .config-panel-card {
            border: 1px solid #dbeafe;
            border-radius: 14px;
            padding: 12px;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
            margin-bottom: 10px;
        }

        .config-panel-card strong {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #1e293b;
            font-size: 13px;
            margin-bottom: 8px;
        }

        .config-panel-card p {
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
        }

        .config-status-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 12px;
        }

        .config-status-pill {
            padding: 10px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 11px;
            color: #64748b;
            font-weight: 800;
        }

        .config-status-pill b {
            display: block;
            color: #1e293b;
            font-size: 15px;
            margin-bottom: 3px;
        }

        @media (max-width: 900px) {
            .config-showcase-section {
                padding: 80px 20px;
            }

            .config-showcase-row,
            .config-showcase-row.reverse {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .config-showcase-row.reverse .config-showcase-copy {
                order: 0;
            }

            .config-showcase-copy {
                text-align: center;
            }

            .config-showcase-tags,
            .config-showcase-highlights {
                justify-content: center;
            }

            .config-showcase-visual {
                min-height: 0;
                padding: 14px;
            }

            .config-board-body {
                grid-template-columns: 1fr;
            }

            .config-list-panel {
                display: grid;
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 8px;
                border-right: 0;
                border-bottom: 1px solid #e2e8f0;
            }

            .config-list-panel div {
                margin-bottom: 0;
            }

            .config-status-strip {
                grid-template-columns: 1fr;
            }
        }

        /* ============================================= */
        /* CONFIG SHOWCASE SECTION FIXES                 */
        /* ============================================= */

        /* Ensure the showcase card container has proper sizing and overflow */
        .config-showcase-section .showcase {
            display: flex;
            flex-direction: column;
            height: 100%;
            background: #ffffff;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
        }

        .config-showcase-section .showcase-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-height: 420px;
            /* Increased min-height for better visibility */
            padding: 0;
            overflow: hidden;
            background: #f8fafc;
            border-radius: 0 0 22px 22px;
        }

        .config-showcase-board {
            display: flex;
            flex-direction: column;
            height: 100%;
            min-height: 380px;
            background: #ffffff;
            border-radius: 16px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
        }

        .config-board-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            flex-shrink: 0;
        }

        .config-board-title {
            font-size: 13px;
            font-weight: 700;
            color: #1e293b;
            letter-spacing: -0.2px;
        }

        .config-board-action {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 8px;
            background: var(--primary, #2563eb);
            color: #ffffff;
            font-size: 11px;
            font-weight: 700;
            cursor: default;
            transition: background 0.2s ease;
            border: none;
        }

        .config-board-body {
            display: grid;
            grid-template-columns: 150px 1fr;
            flex: 1;
            min-height: 0;
            overflow: hidden;
        }

        .config-list-panel {
            padding: 16px 12px;
            background: #f8fafc;
            border-right: 1px solid #e2e8f0;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .config-list-panel div {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            color: #334155;
            font-size: 12px;
            font-weight: 600;
            transition: all 0.2s ease;
            cursor: default;
        }

        .config-list-panel div:hover {
            border-color: var(--primary, #2563eb);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
        }

        .config-list-panel div i {
            color: var(--primary, #2563eb);
            font-size: 14px;
            width: 20px;
            text-align: center;
        }

        .config-main-panel {
            padding: 20px;
            background: #ffffff;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        /* Fix for the image container inside config-main-panel */
        .config-main-panel>div:first-child {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 200px;
            background: #f8fafc;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            padding: 12px;
            overflow: hidden;
            position: relative;
        }

        .config-main-panel img {
            display: block;
            width: 100%;
            height: auto;
            max-height: 280px;
            object-fit: contain;
            object-position: center;
            border-radius: 8px;
            transition: transform 0.3s ease;
        }

        .config-main-panel img:hover {
            transform: scale(1.02);
        }

        /* Status pills styling */
        .config-status-strip {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: auto;
            padding-top: 12px;
            border-top: 1px solid #f1f5f9;
        }

        .config-status-pill {
            padding: 10px 12px;
            border-radius: 10px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            font-size: 11px;
            color: #64748b;
            font-weight: 600;
            text-align: center;
            transition: all 0.2s ease;
            cursor: default;
        }

        .config-status-pill:hover {
            background: #f1f5f9;
            border-color: #cbd5e1;
        }

        .config-status-pill b {
            display: block;
            color: #1e293b;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 4px;
        }

        /* Panel cards inside config-main-panel */
        .config-panel-card {
            border: 1px solid #dbeafe;
            border-radius: 14px;
            padding: 14px 16px;
            background: linear-gradient(135deg, #ffffff, #f8fafc);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
            transition: all 0.25s ease;
            cursor: default;
        }

        .config-panel-card:hover {
            box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
            transform: translateY(-2px);
        }

        .config-panel-card strong {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #1e293b;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 6px;
        }

        .config-panel-card strong i {
            color: var(--primary, #2563eb);
            font-size: 14px;
        }

        .config-panel-card p {
            color: #64748b;
            font-size: 12px;
            line-height: 1.6;
            margin: 0;
        }

        
        @media (max-width: 600px) {
            .config-showcase-section .showcase-body {
                min-height: 340px;
            }

            .config-list-panel {
                grid-template-columns: 1fr 1fr;
                gap: 4px;
                padding: 8px;
            }

            .config-list-panel div {
                padding: 6px 8px;
                font-size: 10px;
            }

            .config-main-panel {
                padding: 12px;
            }

            .config-main-panel img {
                max-height: 160px;
            }

            .config-status-strip {
                grid-template-columns: 1fr;
                gap: 6px;
            }

            .config-panel-card {
                padding: 10px 12px;
            }

            .config-panel-card strong {
                font-size: 12px;
            }

            .config-panel-card p {
                font-size: 11px;
            }
        }

        /* Fix for the config-showcase-section container */
        .config-showcase-section .showcase {
            background: #ffffff;
            border-radius: 22px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08);
            border: 1px solid rgba(148, 163, 184, 0.16);
        }

        /* Ensure the toolbar buttons are nicely styled */
        .config-showcase-section .showcase-toolbar {
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
            padding: 12px 16px;
            flex-shrink: 0;
        }

        .config-showcase-section .showcase-tb-btn {
            padding: 6px 12px;
            border-radius: 6px;
            font-size: 10px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            border: 1px solid #e2e8f0;
            background: #ffffff;
            color: #334155;
            transition: all 0.2s ease;
            cursor: default;
        }

        .config-showcase-section .showcase-tb-btn:hover {
            background: #f8fafc;
            border-color: #cbd5e1;
        }

        .config-showcase-section .showcase-tb-btn.primary {
            background: var(--primary, #2563eb);
            color: #ffffff;
            border-color: var(--primary, #2563eb);
        }

        .config-showcase-section .showcase-tb-btn.primary:hover {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

        .config-showcase-section .showcase-toolbar-title {
            font-size: 11px;
            font-weight: 600;
            color: #1e293b;
        }

        /* API Integration imported showcase sections */
        .api-showcase-section {
            position: relative;
            z-index: 2;
            padding: 110px 40px 40px;
            background:
                radial-gradient(circle at 20% 10%, rgba(0, 194, 255, 0.08), transparent 28%),
                radial-gradient(circle at 80% 45%, rgba(123, 97, 255, 0.08), transparent 30%),
                linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
        }

        .api-showcase-row {
            max-width: 1180px;
            margin: 0 auto 72px;
            display: grid;
            grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
            gap: 64px;
            align-items: center;
        }

        .api-showcase-row.reverse {
            grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        }

        .api-showcase-row.reverse .api-showcase-copy {
            order: 2;
        }

        .api-showcase-copy .ip-desc {
            margin-bottom: 26px;
        }

        .api-showcase-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
        }

        .api-showcase-tags span,
        .api-showcase-highlights span {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 8px 15px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(79, 140, 255, 0.12);
            color: var(--muted);
            font-size: 12px;
            font-weight: 700;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
        }

        .api-showcase-tags i {
            color: var(--cyan);
            font-size: 10px;
        }

        .api-showcase-visual {
            min-height: 360px;
            border: 1px solid rgba(79, 140, 255, 0.12);
            border-radius: 30px;
            background: rgba(255, 255, 255, 0.82);
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
            backdrop-filter: blur(18px);
            padding: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .api-showcase-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(0, 194, 255, 0.08), transparent 42%, rgba(123, 97, 255, 0.08));
            pointer-events: none;
        }

        .api-showcase-endpoints,
        .api-showcase-console,
        .api-showcase-json,
        .api-showcase-events,
        .api-showcase-control {
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .api-showcase-endpoints {
            display: grid;
            gap: 12px;
        }

        .api-showcase-endpoints div,
        .api-showcase-events div,
        .api-showcase-control div {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 15px 16px;
            border-radius: 16px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(79, 140, 255, 0.1);
        }

        .api-showcase-endpoints b,
        .api-console-bar b {
            min-width: 54px;
            padding: 5px 10px;
            border-radius: 8px;
            text-align: center;
            background: rgba(16, 185, 129, 0.1);
            color: var(--emerald);
            font: 800 11px 'Space Grotesk', monospace;
        }

        .api-showcase-endpoints span,
        .api-console-bar span {
            flex: 1;
            color: var(--dark);
            font: 600 12px 'Space Grotesk', monospace;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .api-showcase-endpoints i,
        .api-showcase-control i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--emerald);
            box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
        }

        .api-console-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px;
            border-radius: 16px;
            background: rgba(240, 244, 255, 0.8);
            border: 1px solid rgba(79, 140, 255, 0.1);
            margin-bottom: 14px;
        }

        .api-console-bar em {
            padding: 7px 16px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--emerald), var(--cyan));
            color: white;
            font-size: 11px;
            font-style: normal;
            font-weight: 800;
        }

        .api-console-steps {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-bottom: 14px;
        }

        .api-console-steps span,
        .api-showcase-json em {
            padding: 5px 10px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.08);
            color: var(--light-blue);
            font-size: 11px;
            font-weight: 700;
            font-style: normal;
        }

        .api-showcase-console pre {
            min-height: 180px;
            padding: 18px;
            border-radius: 16px;
            background: #0f172a;
            color: #dbeafe;
            font: 500 13px/1.8 'Space Grotesk', monospace;
            overflow: auto;
        }

        .api-showcase-json {
            padding: 20px;
            border-radius: 18px;
            background: #0f172a;
            color: #dbeafe;
            font: 500 13px/2 'Space Grotesk', monospace;
        }

        .api-showcase-json span {
            color: #10b981;
        }

        .api-showcase-map {
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 90px 1fr;
            gap: 12px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .api-showcase-map>div:not(.api-map-lines) {
            display: grid;
            gap: 12px;
        }

        .api-showcase-map strong {
            color: var(--muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            text-align: center;
        }

        .api-showcase-map span {
            padding: 13px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(79, 140, 255, 0.12);
            font-size: 12px;
            font-weight: 700;
        }

        .api-map-lines {
            display: grid;
            gap: 27px;
            padding-top: 30px;
        }

        .api-map-lines i {
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--cyan), var(--electric-purple));
            box-shadow: 0 0 12px rgba(0, 194, 255, 0.25);
        }

        .api-showcase-events i {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(79, 140, 255, 0.1);
            color: var(--light-blue);
        }

        .api-showcase-events span,
        .api-showcase-control span {
            flex: 1;
            font-weight: 800;
            font-size: 13px;
        }

        .api-showcase-events small,
        .api-showcase-control b {
            color: var(--muted);
            font-size: 11px;
        }

        .api-showcase-control {
            display: grid;
            gap: 12px;
        }

        .api-showcase-control i.off {
            background: var(--muted);
            box-shadow: none;
            opacity: 0.4;
        }

        .api-showcase-control em {
            width: 42px;
            height: 24px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--cyan), var(--light-blue));
            position: relative;
        }

        .api-showcase-control em::after {
            content: '';
            position: absolute;
            top: 3px;
            right: 3px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: white;
        }

        .api-showcase-control em.off {
            background: rgba(100, 116, 139, 0.18);
        }

        .api-showcase-control em.off::after {
            left: 3px;
            right: auto;
        }

        .api-showcase-sync,
        .api-showcase-orbit {
            width: 100%;
            min-height: 300px;
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .api-sync-clock {
            width: 132px;
            height: 132px;
            border-radius: 50%;
            border: 2px solid rgba(79, 140, 255, 0.16);
            background: rgba(240, 244, 255, 0.7);
            position: relative;
            margin-bottom: 22px;
            box-shadow: inset 0 0 28px rgba(0, 194, 255, 0.08);
        }

        .api-sync-clock::after {
            content: '';
            position: absolute;
            inset: -18px;
            border-radius: 50%;
            border: 1px dashed rgba(0, 194, 255, 0.24);
            animation: apiOrbitSpin 18s linear infinite;
        }

        .api-sync-clock i,
        .api-sync-clock b,
        .api-sync-clock em {
            position: absolute;
            left: 50%;
            bottom: 50%;
            transform-origin: bottom;
            border-radius: 3px;
            display: block;
        }

        .api-sync-clock i {
            width: 3px;
            height: 34px;
            margin-left: -1.5px;
            background: var(--dark);
            animation: apiOrbitSpin 12s linear infinite;
        }

        .api-sync-clock b {
            width: 2px;
            height: 44px;
            margin-left: -1px;
            background: var(--cyan);
            animation: apiOrbitSpin 5s linear infinite;
        }

        .api-sync-clock em {
            width: 8px;
            height: 8px;
            margin-left: -4px;
            margin-bottom: -4px;
            border-radius: 50%;
            background: var(--cyan);
            box-shadow: 0 0 16px rgba(0, 194, 255, 0.55);
        }

        .api-showcase-sync h3 {
            font-size: 18px;
            margin-bottom: 4px;
        }

        .api-showcase-sync p {
            color: var(--muted);
            font-size: 13px;
            margin-bottom: 18px;
        }

        .api-sync-flow {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--cyan);
        }

        .api-sync-flow span {
            width: 32px;
            height: 9px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--cyan), var(--electric-purple));
        }

        .api-sync-flow i {
            animation: apiOrbitSpin 2s linear infinite;
        }

        .api-showcase-orbit {
            min-height: 360px;
        }

        .api-orbit-core {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--cyan), var(--light-blue));
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 0 46px rgba(0, 194, 255, 0.35);
            position: relative;
        }

        .api-orbit-core::after {
            content: '';
            position: absolute;
            width: 245px;
            height: 245px;
            border-radius: 50%;
            border: 1px dashed rgba(79, 140, 255, 0.18);
            animation: apiOrbitSpin 28s linear infinite;
        }

        .api-showcase-orbit span {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 42px;
            height: 42px;
            margin: -21px;
            border-radius: 14px;
            background: rgba(255, 255, 255, 0.88);
            border: 1px solid rgba(79, 140, 255, 0.14);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light-blue);
            font-size: 18px;
            transform: rotate(var(--a)) translateX(124px) rotate(calc(-1 * var(--a)));
            box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
        }

        @keyframes apiOrbitSpin {
            to {
                transform: rotate(360deg);
            }
        }

        .api-showcase-highlights {
            max-width: 1080px;
            margin: 0 auto 40px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 12px;
        }

        @media(max-width: 900px) {
            .api-showcase-section {
                padding: 80px 18px 20px;
            }

            .api-showcase-row,
            .api-showcase-row.reverse {
                grid-template-columns: 1fr;
                gap: 30px;
                margin-bottom: 56px;
            }

            .api-showcase-row.reverse .api-showcase-copy {
                order: 0;
            }

            .api-showcase-visual {
                min-height: 300px;
                padding: 18px;
            }

            .api-showcase-map {
                grid-template-columns: 1fr;
            }

            .api-map-lines {
                display: none;
            }
        }

/*advanced features new contents 30-6-2026*/

/*2-7-2026*/

/* ============================================= */
        /* Split-feature + Reports Designer feature CSS  */
        /* (copied from home copy.html to support f3-f7) */
        /* ============================================= */
        .split-feature {
            padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px);
            position: relative;
            overflow: hidden;
        }

        .split-feature.bg-light {
            background: var(--soft-gray);
        }

        .split-feature.bg-white {
            background: var(--white);
        }

        .split-feature-inner {
            max-width: 1280px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            gap: clamp(32px, 5vw, 70px);
            align-items: center;
        }

        .split-feature.reverse .split-feature-inner {
            grid-template-columns: 1.15fr 1fr;
        }

        .split-feature-text {
            position: relative;
            z-index: 2;
        }

        .split-feature-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 18px;
            background: rgba(17, 115, 212, 0.06);
            color: var(--artify-blue);
            border: 1px solid rgba(17, 115, 212, 0.12);
        }

        .split-feature-title {
            font-size: clamp(26px, 3.5vw, 44px);
            font-weight: 800;
            letter-spacing: -1.2px;
            margin-bottom: 16px;
            line-height: 1.15;
        }

        .split-feature-desc {
            font-size: clamp(13px, 1.4vw, 16px);
            color: var(--muted);
            line-height: 1.75;
            margin-bottom: 24px;
        }

        .split-feature-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 28px;
        }

        .split-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: clamp(12px, 1.2vw, 14px);
            color: var(--dark);
            line-height: 1.5;
        }

        .split-feature-list li i {
            color: var(--emerald);
            font-size: 13px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .split-feature-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius-md);
            background: var(--artify-blue);
            color: white;
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 4px 20px rgba(17, 115, 212, 0.3);
            transition: all 0.3s var(--ease-premium);
        }

        .split-feature-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(17, 115, 212, 0.4);
        }

        .split-feature-cta i {
            transition: transform 0.3s;
        }

        .split-feature-cta:hover i {
            transform: translateX(4px);
        }

        .split-feature-showcase {
            position: relative;
            width: 100%;
            min-width: 0;
        }

        /* ============================================= */
        /* FEATURE 1: CREATE YOUR OWN REPORTS           */
        /* ============================================= */
        .f1-canvas {
            height: clamp(320px, 40vw, 480px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
            padding: 20px;
        }

        .f1-canvas-grid {
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(209, 213, 219, 0.3) 1px,
                    transparent 1px),
                linear-gradient(90deg,
                    rgba(209, 213, 219, 0.3) 1px,
                    transparent 1px);
            background-size: 22px 22px;
            pointer-events: none;
        }

        .f1-blank-state {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            opacity: 0;
        }

        .f1-blank-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
        }

        .f1-blank-icon .material-symbols-outlined {
            font-size: 28px;
            color: #94a3b8;
        }

        .f1-blank-text {
            font-size: 11px;
            color: #94a3b8;
            font-weight: 500;
        }

        .f1-blank-sub {
            font-size: 9px;
            color: #cbd5e1;
            margin-top: 2px;
        }

        .f1-entity-panel {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 140px;
            background: white;
            border-right: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            z-index: 20;
            opacity: 0;
            transform: translateX(-100%);
        }

        .f1-panel-header {
            padding: 8px 10px;
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            border-bottom: 1px solid #f1f5f9;
            background: #fafbfc;
        }

        .f1-entity-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 7px 10px;
            margin: 2px 6px;
            border-radius: 6px;
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
            cursor: default;
            opacity: 0;
            transform: translateX(-8px);
            transition: background 0.2s;
        }

        .f1-entity-item:hover {
            background: #f1f5f9;
        }

        .f1-entity-item .material-symbols-outlined {
            font-size: 14px;
            color: var(--artify-blue);
        }

        .f1-node {
            position: absolute;
            background: white;
            border: 1.5px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
            padding: 10px 14px;
            opacity: 0;
            transform: scale(0.5);
            z-index: 10;
            min-width: 120px;
        }

        .f1-node.placed {
            opacity: 1;
            transform: scale(1);
        }

        .f1-node-title {
            font-size: 10px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .f1-node-title .material-symbols-outlined {
            font-size: 14px;
            color: var(--artify-blue);
        }

        .f1-node-fields {
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .f1-node-field {
            font-size: 8px;
            color: #64748b;
            padding: 2px 6px;
            background: #f8fafc;
            border-radius: 3px;
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
            transform: translateX(-5px);
        }

        .f1-node-field.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .f1-node-field i {
            font-size: 7px;
            color: var(--emerald);
        }

        .f1-cursor {
            position: absolute;
            width: 16px;
            height: 16px;
            pointer-events: none;
            z-index: 50;
            opacity: 0;
        }

        .f1-cursor svg {
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
        }

        .f1-conn-line {
            stroke: var(--artify-blue);
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            opacity: 0;
        }

        /* ============================================= */
        /* FEATURE 2: CUSTOM FILTERS                    */
        /* ============================================= */
        .f2-body {
            height: clamp(320px, 40vw, 480px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
        }

        .f2-table-area {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 200px;
            overflow: auto;
            padding: 12px;
        }

        .f2-table-wrapper {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            min-width: 500px;
        }

        .f2-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
        }

        .f2-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            text-align: left;
            padding: 8px 12px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            position: relative;
        }

        .f2-table th .filter-icon {
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 10px;
            color: #cbd5e1;
            cursor: pointer;
            transition: color 0.2s;
        }

        .f2-table th .filter-icon.active {
            color: var(--artify-blue);
        }

        .f2-table td {
            padding: 7px 12px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
            white-space: nowrap;
        }

        .f2-table tbody tr {
            transition: opacity 0.3s, background 0.2s;
        }

        .f2-table tbody tr:hover {
            background: #f8fafc;
        }

        .f2-table tbody tr.dimmed {
            opacity: 0.15;
        }

        .f2-filter-panel {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 200px;
            background: white;
            border-right: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            z-index: 15;
            opacity: 0;
            transform: translateX(-100%);
        }

        .f2-filter-header {
            padding: 10px 12px;
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            border-bottom: 1px solid #f1f5f9;
            background: #fafbfc;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .f2-filter-header .material-symbols-outlined {
            font-size: 14px;
            color: var(--artify-blue);
        }

        .f2-filters-list {
            flex: 1;
            overflow-y: auto;
            padding: 8px;
        }

        .f2-filter-item {
            margin-bottom: 10px;
            opacity: 0;
            transform: translateX(-10px);
        }

        .f2-filter-label {
            font-size: 8px;
            font-weight: 700;
            color: #475569;
            margin-bottom: 4px;
            display: block;
        }

        .f2-filter-input {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 5px;
            font-size: 8px;
            font-family: inherit;
            background: #f8fafc;
            outline: none;
            color: var(--dark);
            transition: border-color 0.2s;
        }

        .f2-filter-input:focus {
            border-color: var(--artify-blue);
        }

        .f2-filter-select {
            width: 100%;
            padding: 5px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 5px;
            font-size: 8px;
            font-family: inherit;
            background: #f8fafc;
            outline: none;
            color: var(--dark);
            appearance: none;
        }

        .f2-filter-apply {
            margin: 0 8px 8px;
            padding: 6px 0;
            border-radius: 6px;
            background: var(--artify-blue);
            color: white;
            font-size: 8px;
            font-weight: 700;
            text-align: center;
            opacity: 0;
            cursor: default;
        }

        .f2-active-badge {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 7px;
            border-radius: 100px;
            background: rgba(17, 115, 212, 0.1);
            color: var(--artify-blue);
            font-size: 7px;
            font-weight: 700;
            position: absolute;
            right: 6px;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
        }

        /* ============================================= */
        /* FEATURE 3: CUSTOMIZE PER YOUR NEEDS          */
        /* ============================================= */
        .f3-body {
            height: clamp(380px, 46vw, 540px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
            display: flex;
            flex-direction: column;
        }

        .f3-table-wrapper {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            flex: 1;
            margin: 12px;
            display: flex;
            flex-direction: column;
        }

        .f3-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
        }

        .f3-table thead {
            position: relative;
        }

        .f3-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            text-align: left;
            padding: 10px 14px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            position: relative;
            cursor: default;
            transition: background 0.3s;
        }

        .f3-table th.highlight {
            background: rgba(17, 115, 212, 0.08);
            color: var(--artify-blue);
        }

        .f3-table th .sort-icon {
            margin-left: 4px;
            font-size: 8px;
            opacity: 0;
            color: var(--artify-blue);
        }

        .f3-table th .sort-icon.visible {
            opacity: 1;
        }

        .f3-table th .drag-handle {
            position: absolute;
            left: 2px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 8px;
            color: #cbd5e1;
            opacity: 0;
            cursor: grab;
        }

        .f3-table th:hover .drag-handle {
            opacity: 1;
        }

        .f3-table td {
            padding: 8px 14px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
            white-space: nowrap;
            transition: all 0.4s;
        }

        .f3-group-row td {
            background: #f1f5f9;
            font-weight: 700;
            color: var(--dark);
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 6px 14px;
            border-bottom: 1px solid #e2e8f0;
        }

        .f3-table tbody tr {
            transition: opacity 0.3s;
        }

        .f3-table tbody tr:hover {
            background: #fafbfc;
        }

        .f3-rename-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.95);
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 12px;
            opacity: 0;
            visibility: hidden;
        }

        .f3-rename-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .f3-rename-label {
            font-size: 9px;
            color: var(--muted);
            font-weight: 600;
        }

        .f3-rename-input {
            padding: 8px 14px;
            border: 2px solid var(--artify-blue);
            border-radius: 8px;
            font-size: 12px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
            color: var(--dark);
            outline: none;
            width: 200px;
            text-align: center;
            box-shadow: 0 4px 16px rgba(17, 115, 212, 0.15);
        }

        /* ============================================= */
        /* FEATURE 4: GROUP DATA WITH TOTALS            */
        /* ============================================= */
        .f4-body {
            height: clamp(340px, 42vw, 500px);
            position: relative;
            overflow: auto;
            background: #f8fafc;
            padding: 12px;
        }

        .f4-table-wrapper {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            min-width: 550px;
        }

        .f4-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
        }

        .f4-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            text-align: left;
            padding: 10px 14px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .f4-table td {
            padding: 8px 14px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
            white-space: nowrap;
        }

        .f4-group-header td {
            background: #eef2ff;
            font-weight: 800;
            color: var(--artify-blue);
            font-size: 9px;
            letter-spacing: 0.3px;
            padding: 8px 14px;
            border-bottom: 1px solid #c7d2fe;
        }

        .f4-group-header td .material-symbols-outlined {
            font-size: 12px;
            vertical-align: middle;
            margin-right: 4px;
        }

        .f4-subtotal td {
            background: #f0fdf4;
            font-weight: 700;
            color: #15803d;
            font-size: 8px;
            border-bottom: 2px solid #bbf7d0;
            padding: 7px 14px;
        }

        .f4-grand-total td {
            background: #1e293b;
            font-weight: 800;
            color: white;
            font-size: 9px;
            padding: 10px 14px;
            letter-spacing: 0.3px;
        }

        .f4-table tbody tr {
            opacity: 0;
            transform: translateY(6px);
        }

        .f4-table tbody tr.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============================================= */
        /* FEATURE 5: CREATE PIVOTS ON THE FLY          */
        /* ============================================= */
        .f5-body {
            height: clamp(340px, 42vw, 500px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
            display: grid;
            grid-template-columns: 160px 1fr;
        }

        .f5-config-panel {
            background: white;
            border-right: 1px solid #e2e8f0;
            padding: 12px 10px;
            display: flex;
            flex-direction: column;
            gap: 14px;
            opacity: 0;
            transform: translateX(-100%);
        }

        .f5-config-group {
            opacity: 0;
            transform: translateX(-10px);
        }

        .f5-config-label {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            margin-bottom: 5px;
            display: block;
        }

        .f5-config-tag {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 8px;
            font-weight: 600;
            margin: 2px;
            color: white;
            opacity: 0;
            transform: scale(0.7);
        }

        .f5-config-tag.rows {
            background: var(--artify-blue);
        }

        .f5-config-tag.cols {
            background: var(--emerald);
        }

        .f5-config-tag.values {
            background: var(--amber);
        }

        .f5-pivot-area {
            overflow: auto;
            padding: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .f5-pivot-table {
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
            overflow: hidden;
            border-collapse: collapse;
            font-size: 8px;
            opacity: 0;
            transform: scale(0.9);
        }

        .f5-pivot-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            padding: 8px 12px;
            border: 1px solid #e2e8f0;
            white-space: nowrap;
            font-size: 8px;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .f5-pivot-table th.col-header {
            background: #ecfdf5;
            color: #065f46;
        }

        .f5-pivot-table th.corner {
            background: #f1f5f9;
            color: #94a3b8;
            font-size: 7px;
        }

        .f5-pivot-table td {
            padding: 7px 12px;
            border: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
            white-space: nowrap;
            text-align: right;
        }

        .f5-pivot-table td.row-label {
            text-align: left;
            font-weight: 700;
            background: #f8fafc;
            color: #475569;
        }

        .f5-pivot-table td.total-cell {
            background: #eef2ff;
            font-weight: 800;
            color: var(--artify-blue);
            border-top: 2px solid #c7d2fe;
        }

        .f5-pivot-table td.grand-cell {
            background: #1e293b;
            font-weight: 800;
            color: white;
        }

        /* ============================================= */
        /* FEATURE 6: SAVE FOR LATER USE                */
        /* ============================================= */
        .f6-body {
            height: clamp(320px, 40vw, 480px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
            padding: 16px;
        }

        .f6-saved-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            max-width: 520px;
            margin: 0 auto;
        }

        .f6-saved-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
            opacity: 0;
            transform: translateY(12px);
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .f6-saved-item:hover {
            border-color: rgba(17, 115, 212, 0.2);
            box-shadow: 0 4px 12px rgba(17, 115, 212, 0.08);
        }

        .f6-saved-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .f6-saved-icon .material-symbols-outlined {
            font-size: 18px;
            color: white;
        }

        .f6-saved-info {
            flex: 1;
            min-width: 0;
        }

        .f6-saved-name {
            font-size: 11px;
            font-weight: 700;
            color: var(--dark);
            margin-bottom: 2px;
        }

        .f6-saved-meta {
            font-size: 8px;
            color: var(--muted);
            display: flex;
            gap: 10px;
        }

        .f6-saved-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            opacity: 0;
        }

        .f6-saved-actions .material-symbols-outlined {
            font-size: 16px;
            color: #94a3b8;
            padding: 4px;
            border-radius: 4px;
            cursor: default;
            transition: color 0.2s, background 0.2s;
        }

        .f6-saved-actions .material-symbols-outlined:hover {
            color: var(--artify-blue);
            background: rgba(17, 115, 212, 0.06);
        }

        .f6-save-toast {
            position: absolute;
            bottom: 16px;
            right: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 16px;
            background: #1e293b;
            color: white;
            border-radius: 8px;
            font-size: 9px;
            font-weight: 600;
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transform: translateY(10px);
            z-index: 30;
        }

        .f6-save-toast .material-symbols-outlined {
            font-size: 16px;
            color: var(--emerald);
        }

        /* ============================================= */
        /* FEATURE 7: PROVIDE ACCESS WITH ROLES         */
        /* ============================================= */
        .f7-body {
            height: clamp(320px, 40vw, 480px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .f7-users-panel {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            border-right: 1px solid #e2e8f0;
            background: white;
        }

        .f7-panel-title {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            margin-bottom: 6px;
            padding: 0 4px;
        }

        .f7-user-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1.5px solid transparent;
            opacity: 0;
            transform: translateX(-10px);
            transition: all 0.2s;
        }

        .f7-user-item:hover {
            background: #f8fafc;
        }

        .f7-user-item.selected {
            background: rgba(17, 115, 212, 0.04);
            border-color: rgba(17, 115, 212, 0.15);
        }

        .f7-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            font-weight: 700;
            color: white;
            flex-shrink: 0;
        }

        .f7-user-name {
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
        }

        .f7-user-role {
            font-size: 7px;
            color: var(--muted);
        }

        .f7-roles-panel {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow-y: auto;
        }

        .f7-role-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 12px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            opacity: 0;
            transform: translateX(10px);
            transition: all 0.2s;
        }

        .f7-role-card:hover {
            border-color: rgba(17, 115, 212, 0.2);
        }

        .f7-role-card.assigned {
            border-color: rgba(17, 115, 212, 0.3);
            background: rgba(17, 115, 212, 0.02);
        }

        .f7-role-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .f7-role-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .f7-role-icon .material-symbols-outlined {
            font-size: 14px;
            color: white;
        }

        .f7-role-name {
            font-size: 9px;
            font-weight: 700;
            color: var(--dark);
        }

        .f7-role-desc {
            font-size: 7px;
            color: var(--muted);
        }

        .f7-toggle {
            width: 32px;
            height: 18px;
            border-radius: 100px;
            background: #e2e8f0;
            position: relative;
            transition: background 0.3s;
            cursor: default;
            flex-shrink: 0;
        }

        .f7-toggle::after {
            content: "";
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: white;
            top: 2px;
            left: 2px;
            transition: transform 0.3s;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        }

        .f7-toggle.active {
            background: var(--artify-blue);
        }

        .f7-toggle.active::after {
            transform: translateX(14px);
        }

        .f7-perm-label {
            font-size: 7px;
            font-weight: 600;
            color: var(--emerald);
            opacity: 0;
        }

        /* ============================================= */
        /* RESPONSIVE                                   */
        /* ============================================= */
        @media (max-width: 1024px) {
            .split-feature-inner {
                grid-template-columns: 1fr;
            }

            .split-feature.reverse .split-feature-inner {
                grid-template-columns: 1fr;
            }

            .nav-center {
                display: none;
            }

            .f2-body {
                grid-template-columns: 1fr;
            }

            .f2-filter-panel {
                width: 100%;
                height: auto;
                max-height: 150px;
                position: relative;
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
            }

            .f2-table-area {
                left: 0;
            }

            .f5-body {
                grid-template-columns: 1fr;
            }

            .f5-config-panel {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
                flex-direction: row;
                flex-wrap: wrap;
                padding: 8px;
                gap: 8px;
            }

            .f7-body {
                grid-template-columns: 1fr;
            }

            .f7-users-panel {
                border-right: none;
                border-bottom: 1px solid #e2e8f0;
                max-height: 150px;
                overflow-y: auto;
            }

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

        @media (max-width: 640px) {
            .navbar {
                padding: 12px 16px;
            }

            .hero-section {
                padding: 100px 16px 60px;
            }

            .split-feature {
                padding: 40px 16px;
            }

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

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

        /* =======================================================
   REPORTS DESIGNER SHOWCASE FIX
   FEATURE 3 - FEATURE 7
=======================================================*/

        /* Main showcase container */
        .split-feature-showcase {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            min-height: 560px;
            overflow: visible;
        }

        /* Card */
        .showcase-card,
        .split-feature-showcase .showcase {
            width: min(100%, 860px);
            max-width: 860px;
            margin: auto;
            overflow: hidden;
            border-radius: 22px;
            background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow:
                0 16px 54px rgba(15, 23, 42, 0.08),
                0 34px 90px rgba(15, 23, 42, 0.08);
            position: relative;
            transform: translateY(0);
            transition: transform 0.45s cubic-bezier(.22, 1, .36, 1), box-shadow 0.45s ease, border-color 0.35s ease;
            min-height: 500px;
        }


        .showcase-card:hover,
        .split-feature-showcase .showcase:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 28px 80px rgba(79, 140, 255, 0.16), 0 20px 50px rgba(15, 23, 42, 0.1);
            border-color: rgba(79, 140, 255, 0.2);
        }

        .showcase-card::after,
        .split-feature-showcase .showcase::after {
            content: "";
            position: absolute;
            inset: -18%;
            background: radial-gradient(circle at top left, rgba(79, 140, 255, 0.16), transparent 34%), radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.14), transparent 36%);
            pointer-events: none;
            z-index: 0;
            opacity: 0.9;
        }

        .showcase-card>*,
        .split-feature-showcase .showcase>* {
            position: relative;
            z-index: 1;
        }

        .showcase-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(17, 115, 212, 0.3),
                    transparent);
            z-index: 2;
        }

        /* Toolbar */
        .showcase-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            min-height: 44px;
            padding: 10px 16px;
            border-bottom: 1px solid #e2e8f0;
            background: var(--white);
            position: relative;
            z-index: 10;
        }

        .showcase-toolbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toolbar-dots {
            display: flex;
            gap: 4px;
        }

        .toolbar-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
        }

        .toolbar-dot.red {
            background: #ff5f57;
        }

        .toolbar-dot.yellow {
            background: #febc2e;
        }

        .toolbar-dot.green {
            background: #28c840;
        }

        .toolbar-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--muted);
            white-space: nowrap;
        }

        .showcase-toolbar-right {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .toolbar-btn {
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 3px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: white;
            color: var(--dark);
            white-space: nowrap;
            opacity: 1;
            transform: none;
        }

        .toolbar-btn .material-symbols-outlined {
            font-size: 12px;
        }

        .toolbar-btn.primary {
            background: var(--artify-blue);
            color: white;
            border-color: var(--artify-blue);
            box-shadow: 0 2px 8px rgba(17, 115, 212, 0.3);
        }

        /* Content */
        .showcase-card>*:last-child {
            position: relative;
            width: 100%;
            overflow: hidden;
        }

        /* Scale every visual uniformly */
        .f3-canvas,
        .f4-canvas,
        .f5-canvas,
        .f6-canvas,
        .f7-canvas {
            width: 100%;
            min-height: 500px;
            position: relative;
            overflow: hidden;
            transform-origin: center center;
        }

        /* Floating panels */
        .f3-panel,
        .f4-panel,
        .f5-panel,
        .f6-panel,
        .f7-panel {
            box-shadow:
                0 14px 45px rgba(15, 23, 42, 0.08);
        }

        /* Tables */
        .f3-table,
        .f4-table,
        .f5-table,
        .f6-table,
        .f7-table {
            width: 100%;
            border-collapse: collapse;
        }

        /* Graphs */
        .f3-chart,
        .f4-chart,
        .f5-chart,
        .f6-chart,
        .f7-chart {
            width: 100%;
            height: 100%;
        }

        /* Dashboard widgets */
        .f3-widget,
        .f4-widget,
        .f5-widget,
        .f6-widget,
        .f7-widget {
            transform: scale(1);
            transform-origin: center;
        }

        /* Prevent clipping */
        .f3-canvas *,
        .f4-canvas *,
        .f5-canvas *,
        .f6-canvas *,
        .f7-canvas * {
            max-width: 100%;
            box-sizing: border-box;
        }

        /* Smooth scaling */
        .f3-canvas,
        .f4-canvas,
        .f5-canvas,
        .f6-canvas,
        .f7-canvas,
        .showcase-card {
            transition: all .45s cubic-bezier(.22, 1, .36, 1);
        }

        /* Large desktop */
        @media (min-width: 1400px) {

            .showcase-card {
                max-width: 820px;
            }

            .f3-canvas,
            .f4-canvas,
            .f5-canvas,
            .f6-canvas,
            .f7-canvas {
                min-height: 560px;
            }
        }

        /* Laptop */
        @media (max-width: 1200px) {

            .showcase-card {
                max-width: 680px;
            }

            .f3-canvas,
            .f4-canvas,
            .f5-canvas,
            .f6-canvas,
            .f7-canvas {
                min-height: 460px;
            }
        }

        /* Tablet */
        @media (max-width: 992px) {

            .split-feature-showcase {
                margin-top: 40px;
                min-height: auto;
            }

            .showcase-card {
                max-width: 100%;
            }

            .f3-canvas,
            .f4-canvas,
            .f5-canvas,
            .f6-canvas,
            .f7-canvas {
                min-height: 400px;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {

            .showcase-card {
                border-radius: 14px;
            }

            .showcase-toolbar {
                padding: 8px 12px;
            }

            .toolbar-title {
                font-size: 9px;
            }

            .toolbar-btn {
                font-size: 7px;
                padding: 3px 6px;
            }

            .f3-canvas,
            .f4-canvas,
            .f5-canvas,
            .f6-canvas,
            .f7-canvas {
                min-height: 320px;
            }
        }

        /* ======================================================
           REPORTS DESIGNER PREVIEW FIX
           FEATURE 3 - FEATURE 7
        =====================================================*/
        #feature3 .toolbar-btn,
        #feature4 .toolbar-btn,
        #feature5 .toolbar-btn,
        #feature6 .toolbar-btn,
        #feature7 .toolbar-btn {
            opacity: 1;
            transform: none;
        }

        #feature4 .f4-table tbody tr {
            opacity: 1;
            transform: none;
        }

        #feature5 .f5-config-panel,
        #feature5 .f5-config-group,
        #feature5 .f5-config-tag,
        #feature5 .f5-pivot-table {
            opacity: 1;
            transform: none;
            visibility: visible;
        }

        #feature6 .f6-saved-item,
        #feature6 .f6-saved-actions {
            opacity: 1;
            transform: none;
            visibility: visible;
        }

        #feature7 .f7-user-item,
        #feature7 .f7-role-card,
        #feature7 .f7-perm-label {
            opacity: 1;
            transform: none;
            visibility: visible;
        }

        /* ============================================= */
        /* SPLIT FEATURE - BASE STYLES                  */
        /* ============================================= */
        .split-feature {
            padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px);
            position: relative;
            overflow: hidden;
        }

        .split-feature.bg-light {
            background: var(--soft-gray);
        }

        .split-feature.bg-white {
            background: var(--white);
        }

        .split-feature-inner {
            max-width: 1280px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            gap: clamp(32px, 5vw, 70px);
            align-items: center;
        }

        .split-feature.reverse .split-feature-inner {
            grid-template-columns: 1.15fr 1fr;
        }

        .split-feature-text {
            position: relative;
            z-index: 2;
        }

        .split-feature-badge {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px;
            border-radius: 100px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 18px;
            background: rgba(17, 115, 212, 0.06);
            color: var(--artify-blue);
            border: 1px solid rgba(17, 115, 212, 0.12);
        }

        .split-feature-badge i {
            font-size: 12px;
        }

        .split-feature-title {
            font-size: clamp(26px, 3.5vw, 44px);
            font-weight: 800;
            letter-spacing: -1.2px;
            margin-bottom: 16px;
            line-height: 1.15;
        }

        .split-feature-desc {
            font-size: clamp(13px, 1.4vw, 16px);
            color: var(--muted);
            line-height: 1.75;
            margin-bottom: 24px;
        }

        .split-feature-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-bottom: 28px;
        }

        .split-feature-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: clamp(12px, 1.2vw, 14px);
            color: var(--dark);
            line-height: 1.5;
        }

        .split-feature-list li i {
            color: var(--emerald);
            font-size: 13px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .split-feature-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 12px 24px;
            border-radius: var(--radius-md);
            background: var(--artify-blue);
            color: white;
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 4px 20px rgba(17, 115, 212, 0.3);
            transition: all 0.3s var(--ease-premium);
        }

        .split-feature-cta:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 30px rgba(17, 115, 212, 0.4);
        }

        .split-feature-cta i {
            transition: transform 0.3s;
        }

        .split-feature-cta:hover i {
            transform: translateX(4px);
        }

        .split-feature-showcase {
            position: relative;
            width: 100%;
            min-width: 0;
        }

        /* ============================================= */
        /* SHOWCASE CARD                                */
        /* ============================================= */
        .showcase-card {
            background: var(--white);
            border: 1px solid rgba(0, 0, 0, 0.06);
            border-radius: 14px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02), 0 20px 60px rgba(0, 0, 0, 0.07);
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .showcase-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(17, 115, 212, 0.3), transparent);
            z-index: 2;
        }

        .showcase-toolbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 6px;
            padding: 7px 12px;
            border-bottom: 1px solid #e2e8f0;
            background: var(--white);
            position: relative;
            z-index: 10;
        }

        .showcase-toolbar-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .toolbar-dots {
            display: flex;
            gap: 4px;
        }

        .toolbar-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
        }

        .toolbar-dot.red {
            background: #ff5f57;
        }

        .toolbar-dot.yellow {
            background: #febc2e;
        }

        .toolbar-dot.green {
            background: #28c840;
        }

        .toolbar-title {
            font-size: 10px;
            font-weight: 600;
            color: var(--muted);
            white-space: nowrap;
        }

        .showcase-toolbar-right {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .toolbar-btn {
            padding: 3px 8px;
            border-radius: 5px;
            font-size: 8px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 3px;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: white;
            color: var(--dark);
            white-space: nowrap;
            opacity: 1;
            transform: none;
        }

        .toolbar-btn.primary {
            background: var(--artify-blue);
            color: white;
            border-color: var(--artify-blue);
            box-shadow: 0 2px 8px rgba(17, 115, 212, 0.3);
        }

        .sc-body {
            height: clamp(320px, 40vw, 460px);
            position: relative;
            overflow: hidden;
            background: #f8fafc;
        }

        /* ============================================= */
        /* FEATURE 1: GENERAL LEDGER                    */
        /* ============================================= */
        .f1-sidebar {
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 130px;
            background: white;
            border-right: 1px solid #e2e8f0;
            z-index: 15;
        }

        .f1-sidebar-header {
            padding: 8px 10px;
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            border-bottom: 1px solid #f1f5f9;
            background: #fafbfc;
        }

        .f1-sidebar-item {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            margin: 2px 4px;
            border-radius: 5px;
            font-size: 8px;
            font-weight: 600;
            color: var(--dark);
            cursor: default;
            transition: background 0.2s;
        }

        .f1-sidebar-item:hover {
            background: #f1f5f9;
        }

        .f1-sidebar-item.active {
            background: rgba(17, 115, 212, 0.08);
            color: var(--artify-blue);
        }

        .f1-sidebar-item .material-symbols-outlined {
            font-size: 13px;
            color: var(--artify-blue);
        }

        .f1-main {
            position: absolute;
            left: 130px;
            top: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
            padding: 12px;
        }

        .f1-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
        }

        .f1-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            text-align: left;
            padding: 7px 10px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
        }

        .f1-table td {
            padding: 6px 10px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
            white-space: nowrap;
        }

        .f1-table .account-code {
            color: var(--artify-blue);
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
        }

        .f1-table .amount {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            text-align: right;
        }

        .f1-table .amount.debit {
            color: #059669;
        }

        .f1-table .amount.credit {
            color: #dc2626;
        }

        .f1-table tr.sub-total td {
            background: #f0fdf4;
            font-weight: 800;
            color: #15803d;
            border-bottom: 2px solid #bbf7d0;
            font-size: 8px;
        }

        .f1-pulse-dot {
            width: 7px;
            height: 7px;
            background: var(--emerald);
            border-radius: 50%;
            display: inline-block;
            animation: pulseDot 1.8s infinite;
            margin-left: 6px;
            vertical-align: middle;
        }

        @keyframes pulseDot {
            0% {
                opacity: 0.4;
                transform: scale(0.8);
            }

            50% {
                opacity: 1;
                transform: scale(1.2);
            }

            100% {
                opacity: 0.4;
                transform: scale(0.8);
            }
        }

        .f1-journal-overlay {
            position: absolute;
            bottom: 0;
            left: 130px;
            right: 0;
            background: linear-gradient(to top, white 70%, transparent);
            padding: 16px 16px 12px;
            z-index: 20;
        }

        .f1-journal-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        .f1-journal-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 8px;
            font-weight: 700;
        }

        .f1-journal-tag.jv {
            background: rgba(17, 115, 212, 0.1);
            color: var(--artify-blue);
        }

        .f1-journal-tag.dr {
            background: rgba(5, 150, 105, 0.1);
            color: #059669;
        }

        .f1-journal-tag.cr {
            background: rgba(220, 38, 38, 0.1);
            color: #dc2626;
        }

        .f1-journal-amount {
            font-size: 9px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
        }

        .f1-journal-status {
            margin-left: auto;
            font-size: 8px;
            font-weight: 600;
            color: var(--emerald);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* ============================================= */
        /* FEATURE 2: AR/AP MANAGEMENT                  */
        /* ============================================= */
        .f2-tabs {
            display: flex;
            gap: 0;
            border-bottom: 1px solid #e2e8f0;
            background: white;
            padding: 0 12px;
            position: relative;
            z-index: 5;
        }

        .f2-tab {
            padding: 8px 14px;
            font-size: 9px;
            font-weight: 600;
            color: var(--muted);
            border-bottom: 2px solid transparent;
            cursor: default;
            transition: all 0.2s;
        }

        .f2-tab.active {
            color: var(--artify-blue);
            border-bottom-color: var(--artify-blue);
        }

        .f2-content {
            position: absolute;
            top: 32px;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: auto;
            padding: 12px;
        }

        .f2-invoice-card {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 14px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            margin-bottom: 8px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        .f2-invoice-card:hover {
            border-color: rgba(17, 115, 212, 0.2);
            box-shadow: 0 2px 10px rgba(17, 115, 212, 0.06);
        }

        .f2-inv-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .f2-inv-icon .material-symbols-outlined {
            font-size: 18px;
            color: white;
        }

        .f2-inv-info {
            flex: 1;
            min-width: 0;
        }

        .f2-inv-name {
            font-size: 10px;
            font-weight: 700;
            color: var(--dark);
        }

        .f2-inv-meta {
            font-size: 8px;
            color: var(--muted);
            margin-top: 2px;
            display: flex;
            gap: 8px;
        }

        .f2-inv-right {
            text-align: right;
        }

        .f2-inv-amount {
            font-size: 12px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: var(--dark);
        }

        .f2-inv-status {
            display: inline-flex;
            align-items: center;
            gap: 3px;
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
            margin-top: 3px;
        }

        .f2-inv-status.due {
            background: #fef3c7;
            color: #d97706;
        }

        .f2-inv-status.paid {
            background: #d1fae5;
            color: #059669;
        }

        .f2-inv-status.overdue {
            background: #fee2e2;
            color: #dc2626;
        }

        .f2-inv-progress {
            width: 100%;
            height: 4px;
            background: #e2e8f0;
            border-radius: 10px;
            margin-top: 5px;
            overflow: hidden;
        }

        .f2-inv-progress-fill {
            height: 100%;
            border-radius: 10px;
            transition: width 0.6s var(--ease-premium);
        }

        .f2-summary-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 16px;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .f2-summary-label {
            font-size: 8px;
            color: var(--muted);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .f2-summary-value {
            font-size: 14px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: var(--dark);
        }

        /* ============================================= */
        /* FEATURE 3: CASH & BANK ENTRIES               */
        /* ============================================= */
        .f3-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
        }

        .f3-cash-panel {
            padding: 12px;
            border-right: 1px solid #e2e8f0;
            overflow: auto;
        }

        .f3-bank-panel {
            padding: 12px;
            overflow: auto;
            background: white;
        }

        .f3-panel-label {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .f3-panel-label .material-symbols-outlined {
            font-size: 13px;
            color: var(--artify-blue);
        }

        .f3-balance-card {
            background: linear-gradient(135deg, var(--artify-blue), #1e40af);
            border-radius: 10px;
            padding: 14px;
            margin-bottom: 10px;
            color: white;
        }

        .f3-balance-label {
            font-size: 8px;
            font-weight: 600;
            opacity: 0.7;
            margin-bottom: 4px;
        }

        .f3-balance-amount {
            font-size: 22px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            letter-spacing: -0.5px;
        }

        .f3-balance-change {
            font-size: 8px;
            font-weight: 600;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .f3-tx-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .f3-tx-icon {
            width: 26px;
            height: 26px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .f3-tx-icon .material-symbols-outlined {
            font-size: 14px;
            color: white;
        }

        .f3-tx-icon.in {
            background: #d1fae5;
            color: #059669;
        }

        .f3-tx-icon.in .material-symbols-outlined {
            color: #059669;
        }

        .f3-tx-icon.out {
            background: #fee2e2;
            color: #dc2626;
        }

        .f3-tx-icon.out .material-symbols-outlined {
            color: #dc2626;
        }

        .f3-tx-info {
            flex: 1;
            min-width: 0;
        }

        .f3-tx-name {
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
        }

        .f3-tx-time {
            font-size: 7px;
            color: var(--muted);
        }

        .f3-tx-amount {
            font-size: 10px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
        }

        .f3-tx-amount.pos {
            color: #059669;
        }

        .f3-tx-amount.neg {
            color: #dc2626;
        }

        .f3-sync-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 3px 8px;
            background: #d1fae5;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
            color: #059669;
            z-index: 10;
        }

        .f3-sync-badge .material-symbols-outlined {
            font-size: 10px;
        }

        /* ============================================= */
        /* FEATURE 4: JOURNAL VOUCHERS                  */
        /* ============================================= */
        .f4-layout {
            display: grid;
            grid-template-columns: 1fr 160px;
            height: 100%;
        }

        .f4-form-area {
            padding: 14px;
            overflow: auto;
        }

        .f4-form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .f4-jv-id {
            font-size: 11px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: var(--dark);
        }

        .f4-jv-badge {
            padding: 2px 10px;
            border-radius: 100px;
            font-size: 8px;
            font-weight: 700;
            background: #fef3c7;
            color: #d97706;
        }

        .f4-form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-bottom: 12px;
        }

        .f4-field-label {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--muted);
            margin-bottom: 3px;
            display: block;
        }

        .f4-field-input {
            width: 100%;
            padding: 6px 10px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 9px;
            font-family: inherit;
            background: white;
            outline: none;
            color: var(--dark);
        }

        .f4-entries-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
            margin-bottom: 12px;
        }

        .f4-entries-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            padding: 6px 8px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: left;
        }

        .f4-entries-table td {
            padding: 5px 8px;
            border-bottom: 1px solid #f1f5f9;
        }

        .f4-entries-table .dr-text {
            color: #059669;
            font-weight: 700;
        }

        .f4-entries-table .cr-text {
            color: #dc2626;
            font-weight: 700;
        }

        .f4-entries-table .line-total {
            text-align: right;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .f4-entries-table tfoot td {
            padding: 6px 8px;
            font-weight: 800;
            font-size: 9px;
            border-top: 2px solid #e2e8f0;
            background: #f8fafc;
        }

        .f4-entries-table tfoot .balanced {
            color: #059669;
        }

        .f4-flow-panel {
            padding: 12px;
            border-left: 1px solid #e2e8f0;
            background: white;
            display: flex;
            flex-direction: column;
            gap: 0;
            align-items: center;
            justify-content: center;
        }

        .f4-flow-node {
            width: 100%;
            padding: 8px;
            border-radius: 8px;
            text-align: center;
            font-size: 8px;
            font-weight: 700;
            margin-bottom: 2px;
            transition: all 0.3s;
        }

        .f4-flow-node.done {
            background: #d1fae5;
            color: #059669;
        }

        .f4-flow-node.active {
            background: var(--artify-blue);
            color: white;
            box-shadow: 0 2px 10px rgba(17, 115, 212, 0.3);
        }

        .f4-flow-node.pending {
            background: #f1f5f9;
            color: #94a3b8;
        }

        .f4-flow-arrow {
            font-size: 10px;
            color: #cbd5e1;
            margin: 2px 0;
        }

        /* ============================================= */
        /* FEATURE 5: PETTY CASH MANAGEMENT             */
        /* ============================================= */
        .f5-layout {
            display: grid;
            grid-template-columns: 1fr 180px;
            height: 100%;
        }

        .f5-register {
            padding: 12px;
            overflow: auto;
        }

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

        .f5-register-title {
            font-size: 11px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
        }

        .f5-float-badge {
            padding: 2px 10px;
            border-radius: 100px;
            font-size: 8px;
            font-weight: 700;
            background: rgba(17, 115, 212, 0.1);
            color: var(--artify-blue);
        }

        .f5-tx-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 10px;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.2s;
        }

        .f5-tx-item:hover {
            background: #fafbfc;
        }

        .f5-tx-num {
            font-size: 8px;
            font-weight: 700;
            color: var(--muted);
            width: 20px;
        }

        .f5-tx-desc {
            flex: 1;
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
        }

        .f5-tx-amount {
            font-size: 10px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
            color: #dc2626;
        }

        .f5-tx-receipt {
            color: var(--artify-blue);
            font-size: 11px;
            opacity: 0.6;
        }

        .f5-category-panel {
            padding: 12px;
            border-left: 1px solid #e2e8f0;
            background: white;
        }

        .f5-cat-label {
            font-size: 7px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            margin-bottom: 8px;
        }

        .f5-cat-item {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 8px;
        }

        .f5-cat-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .f5-cat-name {
            font-size: 8px;
            font-weight: 600;
            color: var(--dark);
            flex: 1;
        }

        .f5-cat-amount {
            font-size: 8px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
            color: var(--muted);
        }

        .f5-remaining {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 180px;
            padding: 10px 16px;
            background: white;
            border-top: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10;
        }

        .f5-remaining-label {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--muted);
        }

        .f5-remaining-amount {
            font-size: 16px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: var(--dark);
        }

        .f5-remaining-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 180px;
            height: 4px;
            background: #e2e8f0;
            z-index: 11;
            overflow: hidden;
        }

        .f5-remaining-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--artify-blue), var(--electric-purple));
            border-radius: 10px;
            transform-origin: left;
            transform: scaleX(0);
        }

        /* ============================================= */
        /* FEATURE 6: DEBIT & CREDIT NOTES              */
        /* ============================================= */
        .f6-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
        }

        .f6-note-panel {
            padding: 14px;
            border-right: 1px solid #e2e8f0;
            overflow: auto;
        }

        .f6-recon-panel {
            padding: 14px;
            overflow: auto;
            background: white;
        }

        .f6-note-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }

        .f6-note-id {
            font-size: 11px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
        }

        .f6-note-badge {
            padding: 2px 10px;
            border-radius: 100px;
            font-size: 8px;
            font-weight: 700;
            background: #d1fae5;
            color: #059669;
        }

        .f6-detail-row {
            display: flex;
            justify-content: space-between;
            padding: 6px 0;
            border-bottom: 1px solid #f1f5f9;
            font-size: 9px;
        }

        .f6-detail-label {
            color: var(--muted);
            font-weight: 500;
        }

        .f6-detail-value {
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
        }

        .f6-adjustment {
            margin: 12px 0;
            padding: 10px;
            background: #fef3c7;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .f6-adj-label {
            font-size: 8px;
            font-weight: 700;
            color: #92400e;
        }

        .f6-adj-amount {
            font-size: 16px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: #92400e;
        }

        .f6-flow-inline {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 10px;
        }

        .f6-flow-step {
            padding: 3px 10px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
        }

        .f6-flow-step.done {
            background: #d1fae5;
            color: #059669;
        }

        .f6-flow-step.current {
            background: var(--artify-blue);
            color: white;
        }

        .f6-flow-step.next {
            background: #f1f5f9;
            color: #94a3b8;
        }

        .f6-flow-arrow {
            color: #cbd5e1;
            font-size: 8px;
        }

        .f6-recon-title {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            margin-bottom: 8px;
        }

        .f6-recon-row {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            background: #f8fafc;
            border-radius: 8px;
            margin-bottom: 6px;
            border: 1px solid #e2e8f0;
        }

        .f6-recon-icon {
            width: 24px;
            height: 24px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .f6-recon-icon .material-symbols-outlined {
            font-size: 14px;
            color: white;
        }

        .f6-recon-info {
            flex: 1;
        }

        .f6-recon-name {
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
        }

        .f6-recon-sub {
            font-size: 7px;
            color: var(--muted);
        }

        .f6-recon-status {
            font-size: 8px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 3px;
        }

        .f6-recon-status.matched {
            color: #059669;
        }

        .f6-recon-status.pending {
            color: #d97706;
        }

        /* ============================================= */
        /* FEATURE 7: BANK RECONCILIATION               */
        /* ============================================= */
        .f7-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
            gap: 0;
        }

        .f7-bank-col {
            padding: 12px;
            border-right: 1px solid #e2e8f0;
            overflow: auto;
        }

        .f7-ledger-col {
            padding: 12px;
            overflow: auto;
            background: white;
        }

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

        .f7-col-title {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .f7-col-title .material-symbols-outlined {
            font-size: 13px;
        }

        .f7-col-count {
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
        }

        .f7-tx-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 7px 8px;
            border-bottom: 1px solid #f1f5f9;
            border-radius: 6px;
            margin-bottom: 2px;
            font-size: 9px;
            transition: all 0.3s;
        }

        .f7-tx-item.matched {
            background: rgba(16, 185, 129, 0.04);
            border-color: rgba(16, 185, 129, 0.15);
        }

        .f7-tx-item.unmatched {
            background: rgba(244, 63, 94, 0.04);
            border-color: rgba(244, 63, 94, 0.15);
        }

        .f7-tx-check {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 10px;
        }

        .f7-tx-check.matched {
            background: #d1fae5;
            color: #059669;
        }

        .f7-tx-check.unmatched {
            background: #fee2e2;
            color: #dc2626;
        }

        .f7-tx-desc {
            flex: 1;
            font-weight: 500;
            color: #334155;
        }

        .f7-tx-amt {
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
            white-space: nowrap;
        }

        .f7-tx-amt.pos {
            color: #059669;
        }

        .f7-tx-amt.neg {
            color: #dc2626;
        }

        .f7-connect-line {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 2px;
            background: var(--artify-blue);
            opacity: 0;
            z-index: 5;
            border-radius: 2px;
        }

        .f7-progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 10px 16px;
            background: white;
            border-top: 1px solid #e2e8f0;
            z-index: 10;
        }

        .f7-progress-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 6px;
        }

        .f7-progress-label {
            font-size: 8px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--muted);
        }

        .f7-progress-pct {
            font-size: 9px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            color: var(--artify-blue);
        }

        .f7-progress-track {
            height: 6px;
            background: #e2e8f0;
            border-radius: 10px;
            overflow: hidden;
        }

        .f7-progress-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--artify-blue), var(--electric-purple));
            border-radius: 10px;
            transform-origin: left;
            transform: scaleX(0);
        }

        /* ============================================= */
        /* FEATURE 8: FINANCIAL STATEMENTS              */
        /* ============================================= */
        .f8-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            height: 100%;
        }

        .f8-table-col {
            padding: 12px;
            border-right: 1px solid #e2e8f0;
            overflow: auto;
        }

        .f8-chart-col {
            padding: 12px;
            overflow: auto;
            background: white;
            display: flex;
            flex-direction: column;
        }

        .f8-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 9px;
        }

        .f8-table th {
            background: #f8fafc;
            color: #475569;
            font-weight: 700;
            padding: 6px 8px;
            border-bottom: 2px solid #e2e8f0;
            font-size: 7px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-align: left;
        }

        .f8-table td {
            padding: 5px 8px;
            border-bottom: 1px solid #f1f5f9;
            color: #334155;
            font-weight: 500;
        }

        .f8-table .line-label {
            font-weight: 600;
        }

        .f8-table .line-amt {
            text-align: right;
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
        }

        .f8-table tr.total-line td {
            background: #eef2ff;
            font-weight: 800;
            color: var(--artify-blue);
            border-top: 2px solid #c7d2fe;
            font-size: 9px;
        }

        .f8-table tr.net-line td {
            background: #1e293b;
            font-weight: 800;
            color: white;
            font-size: 10px;
            border-top: 2px solid #334155;
        }

        .f8-table .trend-up {
            color: #059669;
            font-size: 8px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 2px;
        }

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

        .f8-chart-title {
            font-size: 9px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--muted);
        }

        .f8-chart-period {
            padding: 2px 8px;
            border-radius: 100px;
            font-size: 7px;
            font-weight: 700;
            background: rgba(17, 115, 212, 0.1);
            color: var(--artify-blue);
        }

        .f8-bars {
            display: flex;
            align-items: flex-end;
            gap: 10px;
            flex: 1;
            padding-top: 10px;
        }

        .f8-bar-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            height: 100%;
            justify-content: flex-end;
        }

        .f8-bar {
            width: 100%;
            border-radius: 4px 4px 0 0;
            min-height: 0;
            transition: height 0.6s var(--ease-premium);
        }

        .f8-bar.revenue {
            background: linear-gradient(180deg, var(--artify-blue), #1e40af);
        }

        .f8-bar.cogs {
            background: linear-gradient(180deg, var(--rose), #be123c);
        }

        .f8-bar.profit {
            background: linear-gradient(180deg, var(--emerald), #065f46);
        }

        .f8-bar-label {
            font-size: 7px;
            font-weight: 600;
            color: var(--muted);
            text-align: center;
            white-space: nowrap;
        }

        .f8-kpi-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
            margin-top: auto;
            padding-top: 10px;
        }

        .f8-kpi {
            padding: 8px 10px;
            background: #f8fafc;
            border-radius: 8px;
        }

        .f8-kpi-label {
            font-size: 7px;
            font-weight: 600;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .f8-kpi-value {
            font-size: 14px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
            margin-top: 2px;
        }

        /* ============================================= */
        /* FEATURE 9: BUDGETING & FORECASTING           */
        /* ============================================= */
        .f9-layout {
            padding: 12px;
            overflow: auto;
            height: 100%;
        }

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

        .f9-title {
            font-size: 11px;
            font-weight: 800;
            font-family: "Space Grotesk", sans-serif;
        }

        .f9-period-tabs {
            display: flex;
            gap: 2px;
            background: #f1f5f9;
            border-radius: 6px;
            padding: 2px;
        }

        .f9-period-tab {
            padding: 3px 10px;
            border-radius: 4px;
            font-size: 7px;
            font-weight: 700;
            color: var(--muted);
            cursor: default;
            transition: all 0.2s;
        }

        .f9-period-tab.active {
            background: white;
            color: var(--dark);
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        .f9-budget-row {
            display: grid;
            grid-template-columns: 80px 1fr 100px 40px;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f1f5f9;
        }

        .f9-cat-name {
            font-size: 9px;
            font-weight: 600;
            color: var(--dark);
        }

        .f9-bar-track {
            height: 10px;
            background: #e2e8f0;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
        }

        .f9-bar-plan {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border: 1.5px dashed #cbd5e1;
            border-radius: 10px;
            box-sizing: border-box;
        }

        .f9-bar-actual {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border-radius: 10px;
            transform-origin: left;
            transform: scaleX(0);
            transition: transform 1s var(--ease-premium);
        }

        .f9-bar-actual.under {
            background: linear-gradient(90deg, var(--artify-blue), #60a5fa);
        }

        .f9-bar-actual.over {
            background: linear-gradient(90deg, var(--rose), #fb923c);
        }

        .f9-values {
            font-size: 8px;
            font-weight: 600;
            color: var(--muted);
            font-family: "Space Grotesk", sans-serif;
            white-space: nowrap;
        }

        .f9-variance {
            font-size: 9px;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
            text-align: right;
        }

        .f9-variance.pos {
            color: #059669;
        }

        .f9-variance.neg {
            color: #dc2626;
        }

        .f9-spark-area {
            height: 50px;
            margin-top: 12px;
            background: #f8fafc;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }

        .f9-spark-line {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
        }

        .f9-legend {
            display: flex;
            gap: 14px;
            margin-top: 8px;
        }

        .f9-legend-item {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 7px;
            font-weight: 600;
            color: var(--muted);
        }

        .f9-legend-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        /* ============================================= */
        /* RESPONSIVE                                   */
        /* ============================================= */
        @media (max-width: 1024px) {

            .split-feature-inner,
            .split-feature.reverse .split-feature-inner {
                grid-template-columns: 1fr;
            }

            .f3-layout,
            .f4-layout,
            .f5-layout,
            .f6-layout,
            .f7-layout,
            .f8-layout {
                grid-template-columns: 1fr;
            }

            .f3-bank-panel,
            .f4-flow-panel,
            .f5-category-panel,
            .f6-recon-panel,
            .f7-ledger-col,
            .f8-chart-col {
                border-left: none;
                border-top: 1px solid #e2e8f0;
            }

            .f5-remaining,
            .f5-remaining-bar {
                right: 0;
            }
        }

        @media (max-width: 640px) {
            .f9-budget-row {
                grid-template-columns: 60px 1fr 70px 30px;
                gap: 6px;
            }
        }

		/* ============================================= */
/* FEATURE 5: ADD IMAGES - PREMIUM STYLES       */
/* ============================================= */

/* ---- Section Background ---- */
#feature5-images {
    padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 40px);
    position: relative;
    overflow: hidden;
    background: var(--soft-gray);
}

#feature5-images::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(79, 140, 255, 0.05), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

#feature5-images::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(123, 97, 255, 0.04), transparent 70%);
    pointer-events: none;
    border-radius: 50%;
}

/* ---- Inner Layout ---- */
.split-feature-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: clamp(32px, 5vw, 70px);
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Alternate the text and showcase card for every `.reverse` feature row. */
.split-feature.reverse .split-feature-text {
    order: 2;
}

.split-feature.reverse .split-feature-showcase {
    order: 1;
}

/* ---- Left Text Content ---- */
.split-feature-text {
    position: relative;
    z-index: 2;
}

.split-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
    background: rgba(79, 140, 255, 0.08);
    color: var(--light-blue);
    border: 1px solid rgba(79, 140, 255, 0.12);
}

.split-feature-badge i {
    font-size: 10px;
}

.split-feature-title {
    font-size: clamp(26px, 3.5vw, 44px);
    font-weight: 800;
    letter-spacing: -1.2px;
    margin-bottom: 16px;
    line-height: 1.15;
}

.gradient-text {
    background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.split-feature-desc {
    font-size: clamp(13px, 1.4vw, 16px);
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 24px;
}

.split-feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.split-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(12px, 1.2vw, 14px);
    color: var(--dark);
    line-height: 1.5;
}

.split-feature-list li i {
    color: var(--emerald);
    font-size: 13px;
    margin-top: 2px;
    flex-shrink: 0;
}

.customization-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 28px;
}

.customization-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.customization-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.customization-header i {
    color: var(--light-blue);
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.customization-item:hover .customization-header i {
    color: var(--electric-purple);
}

.customization-header h3 {
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 600;
    color: var(--dark);
    margin: 0;
}

.customization-item p {
    font-size: clamp(12px, 1.1vw, 14px);
    color: var(--dark);
    line-height: 1.6;
    margin: 0;
    padding-left: 36px;
}

.try-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
    color: white;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(79, 140, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.try-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(79, 140, 255, 0.4);
}

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

.try-btn:hover i {
    transform: translateX(4px);
}

/* ---- Showcase Card ---- */
.split-feature-showcase {
    position: relative;
    width: 100%;
    min-width: 0;
}

.showcase-card {
    background: linear-gradient(145deg, #ffffff, #f8fafc);
    border-radius: 24px;
    border: 1px solid rgba(79, 140, 255, 0.08);
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(79, 140, 255, 0.04);
    overflow: hidden;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.12), 0 12px 32px rgba(79, 140, 255, 0.06);
}

/* ---- Gallery Toolbar ---- */
.gallery-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    position: relative;
    z-index: 10;
}

.gallery-toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.window-controls {
    display: flex;
    gap: 4px;
}

.window-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

.window-dot.red { background: #ff5f57; }
.window-dot.yellow { background: #febc2e; }
.window-dot.green { background: #28c840; }

.gallery-title {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.3px;
}

.gallery-toolbar-right {
    display: flex;
    align-items: center;
    gap: 5px;
}

.toolbar-btn-light {
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(79, 140, 255, 0.06);
    color: var(--light-blue);
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.25s ease;
}

.toolbar-btn-light:hover {
    background: rgba(79, 140, 255, 0.12);
}

.toolbar-btn-primary {
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
    color: white;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(79, 140, 255, 0.25);
    cursor: pointer;
    transition: all 0.25s ease;
}

.toolbar-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(79, 140, 255, 0.35);
}

.toolbar-btn-light i,
.toolbar-btn-primary i {
    font-size: 8px;
}

/* ---- Gallery Content ---- */
.gallery-content {
    padding: 24px 20px 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    position: relative;
}

/* ---- Employee Grid ---- */
.employee-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 680px;
    margin: 0 auto;
}

/* ---- Employee Card ---- */
.employee-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: default;
    position: relative;
}

/* Hover States */
.employee-card[data-hover-color="blue"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
    border-color: rgba(79, 140, 255, 0.2);
}

.employee-card[data-hover-color="green"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
    border-color: rgba(16, 185, 129, 0.2);
}

.employee-card[data-hover-color="pink"]:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.12);
    border-color: rgba(236, 72, 153, 0.2);
}

/* ---- Employee Image ---- */
.employee-image-wrapper {
    position: relative;
    padding-top: 85%;
    overflow: hidden;
}

.gradient-blue {
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}

.gradient-green {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);
}

.gradient-pink {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
}

.employee-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.employee-card:hover .employee-image {
    transform: scale(1.05);
}

/* ---- Employee Overlay ---- */
.employee-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px 14px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 60%);
}

.employee-name-overlay {
    color: white;
    font-weight: 700;
    font-size: 14px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    display: block;
}

/* ---- Status Badges ---- */
.status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.status-active {
    background: rgba(16, 185, 129, 0.92);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.status-leave {
    background: rgba(245, 158, 11, 0.92);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

/* ---- Employee Info ---- */
.employee-info {
    padding: 12px 14px 14px;
}

.employee-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.employee-role {
    font-size: 11px;
    color: var(--muted);
    font-weight: 500;
}

.employee-id {
    font-size: 10px;
    color: var(--muted);
    font-weight: 600;
}

.employee-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.tag {
    font-size: 8px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.tag-gray {
    background: var(--soft-gray);
    color: var(--muted);
}

.tag-blue {
    background: rgba(79, 140, 255, 0.08);
    color: var(--light-blue);
}

.tag-green {
    background: rgba(16, 185, 129, 0.08);
    color: var(--emerald);
}

.tag-pink {
    background: rgba(236, 72, 153, 0.08);
    color: #ec4899;
}

/* ---- Employee Strip ---- */
.employee-strip {
    margin-top: 16px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.strip-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    cursor: default;
}

.strip-item:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

.strip-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(123, 97, 255, 0.15);
    flex-shrink: 0;
}

.strip-item:nth-child(2) .strip-avatar {
    border-color: rgba(244, 63, 94, 0.15);
}

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

.strip-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
}

.strip-role {
    font-size: 9px;
    color: var(--muted);
}

.strip-status {
    font-size: 8px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
}

.strip-status.status-active {
    background: rgba(16, 185, 129, 0.08);
    color: var(--emerald);
}

/* ---- Gallery Status Bar ---- */
.gallery-status-bar {
    margin-top: 16px;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.status-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.green {
    background: var(--emerald);
}

.status-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
}

.status-divider {
    width: 1px;
    height: 16px;
    background: rgba(15, 23, 42, 0.06);
}

.status-meta {
    font-size: 10px;
    color: var(--muted);
}

.status-meta i {
    margin-right: 4px;
    font-size: 8px;
}

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

.status-pill {
    font-size: 9px;
    padding: 2px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.status-pill i {
    margin-right: 3px;
    font-size: 8px;
}

.status-pill.print {
    color: var(--muted);
    background: rgba(79, 140, 255, 0.06);
}

.status-pill.preview {
    color: var(--emerald);
    background: rgba(16, 185, 129, 0.06);
}

/* ---- Floating Decorations ---- */
.floating-deco {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    border: 1px solid rgba(79, 140, 255, 0.06);
}

.floating-deco i {
    font-size: 14px;
}

.deco-plus {
    top: 20%;
    right: -8px;
    width: 40px;
    height: 40px;
    color: var(--light-blue);
    background: linear-gradient(135deg, rgba(79, 140, 255, 0.06), rgba(123, 97, 255, 0.03));
}

.deco-check {
    bottom: 15%;
    left: -6px;
    width: 32px;
    height: 32px;
    color: var(--emerald);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), rgba(0, 194, 255, 0.03));
}

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

@media (max-width: 1024px) {
    .split-feature-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* On smaller screens, keep the readable text-then-card sequence. */
    .split-feature.reverse .split-feature-text {
        order: 1;
    }

    .split-feature.reverse .split-feature-showcase {
        order: 2;
    }
   
    .employee-grid {
        grid-template-columns: repeat(3, 1fr);
        max-width: 100%;
    }
   
    .employee-strip {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
   
    .gallery-status-bar {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
   
    .deco-plus,
    .deco-check {
        display: none;
    }
}

@media (max-width: 768px) {
    .employee-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
   
    .gallery-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 14px;
    }
   
    .gallery-content {
        padding: 16px 12px;
    }
   
    .gallery-title {
        font-size: 9px;
    }
   
    .status-left {
        flex-wrap: wrap;
        gap: 6px;
    }
   
    .status-divider {
        display: none;
    }
}

@media (max-width: 480px) {
    .employee-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
   
    .employee-name-overlay {
        font-size: 12px;
    }
   
    .employee-role {
        font-size: 10px;
    }
   
    .gallery-toolbar-right .toolbar-btn-light,
    .gallery-toolbar-right .toolbar-btn-primary {
        font-size: 7px;
        padding: 3px 8px;
    }
   
    .status-meta {
        font-size: 9px;
    }
   
    .status-right {
        flex-wrap: wrap;
    }
}

@media (max-width: 380px) {
    .employee-grid {
        grid-template-columns: 1fr;
        max-width: 280px;
        margin: 0 auto;
    }
   
    .employee-strip {
        max-width: 280px;
        margin: 12px auto 0;
    }
   
    .gallery-status-bar {
        max-width: 280px;
        margin: 12px auto 0;
    }
}

/*2-7-2026*/

        /* Help Builder Premium Hero */
        /* .hero-helpbuilder-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #eef8fc 50%, #e0f2fe 100%);
        } */
        .helpbuilder-glow {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 600px 400px at 15% 20%, rgba(14, 165, 233, 0.08), transparent 50%),
                radial-gradient(ellipse 400px 300px at 80% 80%, rgba(3, 105, 161, 0.06), transparent 50%);
        }
        .helpbuilder-mockup {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(14, 165, 233, 0.2);
            border-radius: 12px;
            box-shadow: 0 30px 70px rgba(14, 165, 233, 0.12);
            overflow: hidden;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 440px;
            animation: helpbuilderFloat 6s ease-in-out infinite;
            transition: all 0.5s var(--ease-premium);
        }
        .helpbuilder-mockup:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 90px rgba(14, 165, 233, 0.2);
        }
        @keyframes helpbuilderFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .hb-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #e0f2fe;
            background: #f8fafc;
        }
        .hb-title { font-size: 14px; font-weight: 800; color: #0369a1; }
        .hb-subtitle { font-size: 11px; color: #64748b; }
        .hb-ai-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #0284c7;
            background: rgba(14, 165, 233, 0.1);
            padding: 6px 12px;
            border-radius: 20px;
            animation: hbPulseGlow 2s infinite;
        }
        @keyframes hbPulseGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.2); }
            50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
        }
        .hb-search {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 20px;
            background: #fff;
            border-bottom: 1px solid #f1f5f9;
        }
        .hb-search i { color: #64748b; font-size: 13px; }
        .hb-search input { width: 100%; border: none; outline: none; font-size: 12px; color: #0f172a; font-family: inherit; }
        .hb-content {
            padding: 20px;
            flex-grow: 1;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .hb-topic {
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            background: #f8fafc;
            transition: all 0.3s;
        }
        .hb-topic.active {
            border-color: #0ea5e9;
            background: rgba(14, 165, 233, 0.02);
        }
        .hb-topic-header {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }
        .hb-topic-header i { color: #0ea5e9; }
        .hb-topic-body { font-size: 11px; color: #475569; line-height: 1.5; }
        .hb-ai-gen {
            margin-top: 12px;
            border-left: 3px solid #0ea5e9;
            padding-left: 10px;
            background: rgba(14, 165, 233, 0.05);
            padding-block: 8px;
            border-radius: 0 6px 6px 0;
        }
        .hb-ai-header { font-size: 10px; font-weight: 700; color: #0284c7; display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
        .hb-ai-gen code { background: #e0f2fe; padding: 2px 6px; border-radius: 4px; font-family: monospace; font-size: 10px; color: #0369a1; }
        .hb-footer {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 20px;
            border-top: 1px solid #f1f5f9;
            background: #f8fafc;
        }
        .hb-btn {
            font-size: 11px;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: 6px;
            color: #475569;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            transition: all 0.2s;
        }
        .hb-btn.primary {
            background: #0ea5e9;
            color: white;
            border: none;
        }
        .hb-btn.primary:hover { background: #0284c7; }

        /* Modules Builder Premium Hero */
        /* .hero-modulesbuilder-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #edfcf9 50%, #ccfbf1 100%);
        } */
        .modulesbuilder-mesh {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 600px 400px at 25% 30%, rgba(20, 184, 166, 0.08), transparent 50%),
                radial-gradient(ellipse 400px 300px at 75% 70%, rgba(13, 148, 136, 0.06), transparent 50%);
        }
        .modulesbuilder-mockup {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(20, 184, 166, 0.2);
            border-radius: 12px;
            box-shadow: 0 30px 70px rgba(20, 184, 166, 0.12);
            overflow: hidden;
            padding: 0;
            display: grid;
            grid-template-columns: 180px 1fr;
            min-height: 440px;
            animation: modulesbuilderFloat 6s ease-in-out infinite;
            transition: all 0.5s var(--ease-premium);
        }
        .modulesbuilder-mockup:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 90px rgba(20, 184, 166, 0.2);
        }
        @keyframes modulesbuilderFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .mb-header {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #ccfbf1;
            background: #f8fafc;
        }
        .mb-title { font-size: 14px; font-weight: 800; color: #0d9488; }
        .mb-subtitle { font-size: 11px; color: #64748b; }
        .mb-controls .mb-badge-live {
            font-size: 10px;
            font-weight: 700;
            color: #0d9488;
            background: rgba(20, 184, 166, 0.1);
            padding: 4px 10px;
            border-radius: 100px;
        }
        .mb-sidebar {
            background: #f8fafc;
            border-right: 1px solid #e2e8f0;
            padding: 16px;
        }
        .mb-section-title { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; }
        .mb-drag-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #334155;
            margin-bottom: 8px;
            cursor: grab;
            transition: all 0.2s;
        }
        .mb-drag-item:hover { border-color: #14b8a6; background: rgba(20, 184, 166, 0.02); }
        .mb-canvas {
            padding: 20px;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }
        .mb-form-field {
            position: relative;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 12px;
            background: #ffffff;
        }
        .mb-form-field.active { border-color: #14b8a6; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.08); }
        .mb-label { font-size: 11px; font-weight: 700; color: #475569; margin-bottom: 6px; }
        .mb-form-field input, .mb-form-field select {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 12px;
            background: #f8fafc;
            color: #0f172a;
        }
        .mb-field-actions {
            position: absolute;
            top: 10px;
            right: 10px;
            display: flex;
            gap: 6px;
            opacity: 0.7;
        }
        .mb-field-actions i { font-size: 10px; color: #64748b; cursor: pointer; }
        .mb-canvas-dropzone {
            border: 2px dashed #cbd5e1;
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #64748b;
            background: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .mb-footer {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            padding: 12px 20px;
            border-top: 1px solid #e2e8f0;
            background: #f8fafc;
        }
        .mb-btn {
            font-size: 11px;
            font-weight: 700;
            padding: 8px 14px;
            border-radius: 6px;
            color: #475569;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .mb-btn.primary {
            background: #14b8a6;
            color: white;
            border: none;
        }
        .mb-btn.primary:hover { background: #0d9488; }

        /* Approval Hierarchies Premium Hero */
        /* .hero-approvalhierarchies-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #f3effc 50%, #f3e8ff 100%);
        } */
        .approval-mesh {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 600px 400px at 30% 25%, rgba(168, 85, 247, 0.08), transparent 50%),
                radial-gradient(ellipse 400px 300px at 70% 75%, rgba(147, 51, 234, 0.06), transparent 50%);
        }
        .approvalhierarchies-mockup {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(168, 85, 247, 0.2);
            border-radius: 12px;
            box-shadow: 0 30px 70px rgba(168, 85, 247, 0.12);
            overflow: hidden;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 440px;
            animation: approvalFloat 6s ease-in-out infinite;
            transition: all 0.5s var(--ease-premium);
        }
        .approvalhierarchies-mockup:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 90px rgba(168, 85, 247, 0.2);
        }
        @keyframes approvalFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .ah-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #f3e8ff;
            background: #f8fafc;
        }
        .ah-title { font-size: 14px; font-weight: 800; color: #7c3aed; }
        .ah-subtitle { font-size: 11px; color: #64748b; }
        .ah-status {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            color: #7c3aed;
        }
        .ah-canvas {
            padding: 24px;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            overflow-y: auto;
            flex-grow: 1;
        }
        .ah-node {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 16px;
            border-radius: 8px;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            width: 240px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
            position: relative;
            z-index: 2;
        }
        .ah-node.trigger { border-left: 4px solid #22c55e; }
        .ah-node.condition { border-left: 4px solid #a855f7; }
        .ah-node.step { border-left: 4px solid #3b82f6; }
        .ah-node.step.auto { border-left: 4px solid #e2e8f0; background: #f8fafc; }
        .node-icon {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            background: #f1f5f9;
            color: #475569;
        }
        .ah-node.trigger .node-icon { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
        .ah-node.condition .node-icon { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
        .ah-node.step .node-icon { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
        .node-info { display: flex; flex-direction: column; }
        .node-info strong { font-size: 11px; color: #0f172a; }
        .node-info span { font-size: 10px; color: #64748b; margin-top: 2px; }
        .ah-connector {
            width: 2px;
            height: 24px;
            background: #cbd5e1;
            position: relative;
            z-index: 1;
        }
        .ah-branch-container {
            display: flex;
            gap: 40px;
            position: relative;
            margin-top: 0;
            padding-top: 16px;
        }
        .ah-branch-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 120px;
            right: 120px;
            height: 2px;
            background: #cbd5e1;
        }
        .ah-branch-container::after {
            content: "";
            position: absolute;
            top: -16px;
            left: 50%;
            width: 2px;
            height: 16px;
            background: #cbd5e1;
            transform: translateX(-50%);
        }
        .ah-branch {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .ah-branch::before {
            content: "";
            position: absolute;
            top: -16px;
            left: 50%;
            width: 2px;
            height: 16px;
            background: #cbd5e1;
            transform: translateX(-50%);
        }

        /* Completely Configurable Premium Hero */
        /* .hero-configurable-premium {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            padding: 120px 40px;
            background: linear-gradient(135deg, #f8fafc 0%, #eff4fc 50%, #dbeafe 100%);
        } */
        .configurable-glow {
            position: absolute;
            inset: 0;
            background: 
                radial-gradient(ellipse 600px 400px at 20% 20%, rgba(37, 99, 235, 0.08), transparent 50%),
                radial-gradient(ellipse 400px 300px at 80% 80%, rgba(29, 78, 216, 0.06), transparent 50%);
        }
        .configurable-mockup {
            position: relative;
            background: #ffffff;
            border: 1px solid rgba(37, 99, 235, 0.2);
            border-radius: 12px;
            box-shadow: 0 30px 70px rgba(37, 99, 235, 0.12);
            overflow: hidden;
            padding: 0;
            display: flex;
            flex-direction: column;
            min-height: 440px;
            animation: configurableFloat 6s ease-in-out infinite;
            transition: all 0.5s var(--ease-premium);
        }
        .configurable-mockup:hover {
            transform: translateY(-8px);
            box-shadow: 0 40px 90px rgba(37, 99, 235, 0.2);
        }
        @keyframes configurableFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .conf-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid #dbeafe;
            background: #f8fafc;
        }
        .conf-title { font-size: 14px; font-weight: 800; color: #1d4ed8; }
        .conf-subtitle { font-size: 11px; color: #64748b; }
        .conf-btn-save {
            font-size: 11px;
            font-weight: 700;
            color: #ffffff;
            background: #2563eb;
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
        }
        .conf-workspace {
            display: grid;
            grid-template-columns: 180px 1fr;
            flex-grow: 1;
            background: #ffffff;
        }
        .conf-panel {
            padding: 16px;
        }
        .conf-panel.left {
            background: #f8fafc;
            border-right: 1px solid #e2e8f0;
        }
        .panel-section-title { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; margin-bottom: 12px; letter-spacing: 0.5px; }
        .conf-toggle-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 11px;
            color: #475569;
            margin-bottom: 6px;
        }
        .conf-toggle-item.active { border-color: #3b82f6; color: #2563eb; font-weight: 600; }
        .conf-toggle-item i { cursor: pointer; }
        .conf-toggle-item.active i { color: #2563eb; }
        .conf-panel.center {
            padding: 20px;
        }
        .conf-mock-form {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .form-row {
            display: flex;
            gap: 12px;
        }
        .mock-field {
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .mock-field.full { width: 100%; }
        .mock-label { font-size: 10px; font-weight: 700; color: #64748b; margin-bottom: 4px; }
        .mock-input {
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            font-size: 11px;
            background: #f8fafc;
            color: #0f172a;
        }
        .mock-input.active {
            background: rgba(34, 197, 94, 0.1);
            color: #22c55e;
            font-weight: 700;
            width: fit-content;
            padding: 2px 8px;
            border-color: #22c55e;
        }

		 /* Premium feature hero visuals */
        .hero-feature-card {
            position: relative;
            height: 100%;
            min-height: 100%;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94));
            border: 1px solid rgba(148, 163, 184, 0.18);
            border-radius: 28px;
            padding: clamp(18px, 2.4vw, 24px);
            box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08), 0 8px 24px rgba(15, 23, 42, 0.03);
            overflow: hidden;
        }

        .hero-feature-card::before {
            content: "";
            position: absolute;
            inset: -28% 54% auto auto;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.16), transparent 68%);
            filter: blur(6px);
            pointer-events: none;
        }

        .hero-feature-card::after {
            content: "";
            position: absolute;
            inset: auto auto -18% -8%;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(20, 184, 166, 0.14), transparent 70%);
            pointer-events: none;
        }

        .hero-feature-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 16px;
            position: relative;
            z-index: 2;
        }

        .hero-feature-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 10px;
            border-radius: 999px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: #475569;
            background: rgba(248, 250, 252, 0.9);
            border: 1px solid rgba(148, 163, 184, 0.18);
        }

        .hero-feature-visual-grid {
            display: grid;
            grid-template-columns: 0.92fr 1.08fr;
            gap: 14px;
            min-height: 0;
            position: relative;
            z-index: 2;
        }

        .hero-feature-side {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .hero-feature-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            background: rgba(248, 250, 252, 0.94);
            border: 1px solid rgba(226, 232, 240, 0.9);
            color: #0f172a;
            font-size: 12px;
            font-weight: 600;
        }

        .hero-feature-list-item .mini-icon {
            width: 30px;
            height: 30px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: rgba(79, 140, 255, 0.1);
            color: #2563eb;
            flex-shrink: 0;
        }

        .hero-feature-main {
            position: relative;
            background: linear-gradient(145deg, #f8fbff, #f8fafc);
            border: 1px solid rgba(226, 232, 240, 0.9);
            border-radius: 20px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .hero-feature-main-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        .hero-feature-main-top .feature-main-title {
            font-size: 13px;
            font-weight: 800;
            color: #0f172a;
        }

        .hero-feature-main-top .feature-main-subtitle {
            font-size: 11px;
            color: #64748b;
            margin-top: 2px;
        }

        .hero-feature-article-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            flex: 1;
        }

        .hero-feature-card-block {
            padding: 10px;
            border-radius: 14px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            background: white;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .hero-feature-card-block .block-title {
            font-size: 12px;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 6px;
        }

        .hero-feature-card-block .block-meta {
            font-size: 10px;
            color: #64748b;
        }

        .hero-feature-progress {
            height: 6px;
            border-radius: 999px;
            background: #eff2f7;
            overflow: hidden;
            margin-top: 8px;
        }

        .hero-feature-progress span {
            display: block;
            height: 100%;
            border-radius: inherit;
        }

        .hero-feature-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 14px;
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(20, 184, 166, 0.08));
            border: 1px solid rgba(14, 165, 233, 0.16);
        }

        .hero-feature-float {
            position: absolute;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(226, 232, 240, 0.9);
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
            font-size: 10px;
            font-weight: 700;
            color: #334155;
            white-space: nowrap;
        }

        .hero-feature-float i {
            color: #2563eb;
        }

        .hero-feature-canvas {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            min-height: 240px;
        }

        .hero-feature-node {
            position: absolute;
            width: 76px;
            height: 76px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
            font-size: 20px;
        }

        .hero-feature-node-label {
            position: absolute;
            bottom: -26px;
            font-size: 10px;
            font-weight: 700;
            color: #475569;
            text-transform: uppercase;
            letter-spacing: 0.14em;
        }

        .hero-feature-center {
            width: 118px;
            height: 118px;
            border-radius: 30px;
            background: linear-gradient(135deg, #2563eb, #14b8a6);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            box-shadow: 0 18px 42px rgba(37, 99, 235, 0.25);
            position: relative;
            z-index: 1;
            font-size: 36px;
        }

        .hero-feature-center::before,
        .hero-feature-center::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            border: 1px dashed rgba(255, 255, 255, 0.4);
        }

        .hero-feature-center::before {
            inset: -24px;
        }

        .hero-feature-center::after {
            inset: -44px;
        }

        .hero-feature-flow {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .hero-feature-flow::before,
        .hero-feature-flow::after {
            content: "";
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, rgba(37, 99, 235, 0.2), rgba(20, 184, 166, 0.25));
            border-radius: 999px;
        }

        .hero-feature-flow::before {
            top: 46%;
            left: 24%;
            width: 52%;
        }

        .hero-feature-flow::after {
            top: 54%;
            left: 24%;
            width: 46%;
            transform: rotate(8deg);
        }

        @media (max-width: 900px) {
            .hero-feature-visual-grid {
                grid-template-columns: 1fr;
            }
        }

        /* Fix for Help Builder Hero */
        .hero-helpbuilder-premium {
            min-height: auto !important;
            padding: 120px 40px 80px !important;
            position: relative;
            overflow: hidden;
        }

        .hero-helpbuilder-premium>div {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: clamp(30px, 5vw, 56px);
            align-items: center;
            position: relative;
            z-index: 2;
            padding: 0 !important;
        }

        .hero-helpbuilder-premium .ip-title {
            font-size: clamp(32px, 4vw, 52px);
        }

        .hero-helpbuilder-premium .ip-desc {
            font-size: clamp(14px, 1.2vw, 18px);
            margin-bottom: 24px;
            color: #64748b;
            max-width: 600px;
        }

        .hero-helpbuilder-premium .hero-showcase {
            height: auto !important;
            min-height: 380px;
            max-height: 520px;
            width: 100%;
        }

        .hero-helpbuilder-premium .showcase-card-premium {
            height: 100% !important;
            max-height: 520px;
            padding: clamp(16px, 3vw, 28px) !important;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .hero-helpbuilder-premium .showcase-card-premium>div:last-child {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
        }

        .hero-helpbuilder-premium .showcase-card-premium .articles-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            flex: 1;
        }

        /* Shared premium hero layout for module, approval and configurable pages */
        .hero-modulesbuilder-premium,
        .hero-approvalhierarchies-premium,
        .hero-configurable-premium {
            min-height: auto !important;
            padding: 120px 40px 80px !important;
            position: relative;
            overflow: hidden;
        }

        .hero-modulesbuilder-premium>div,
        .hero-approvalhierarchies-premium>div,
        .hero-configurable-premium>div {
            max-width: 1440px;
            width: 100%;
            margin: 0 auto;
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(30px, 5vw, 56px);
            align-items: center;
            position: relative;
            z-index: 2;
            padding: 0 !important;
        }

        .hero-modulesbuilder-premium .ip-title,
        .hero-approvalhierarchies-premium .ip-title,
        .hero-configurable-premium .ip-title {
            font-size: clamp(32px, 4vw, 52px);
        }

        .hero-modulesbuilder-premium .ip-desc,
        .hero-approvalhierarchies-premium .ip-desc,
        .hero-configurable-premium .ip-desc {
            font-size: clamp(14px, 1.2vw, 18px);
            margin-bottom: 24px;
            color: #64748b;
            max-width: 600px;
        }

        .hero-modulesbuilder-premium .hero-showcase,
        .hero-approvalhierarchies-premium .hero-showcase,
        .hero-configurable-premium .hero-showcase {
            height: auto !important;
            min-height: 380px;
            max-height: 520px;
            width: 100%;
        }

        .showcase-card-premium {
            height: 100% !important;
            max-height: 520px;
            padding: clamp(16px, 3vw, 28px) !important;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .showcase-card-premium>div:last-child {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 10px;
            overflow: hidden;
        }

        .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div .count {
            font-size: 10px;
            color: #64748b;
        }

        .hero-helpbuilder-premium .search-bar {
            position: relative;
            margin-bottom: 12px;
        }

        .hero-helpbuilder-premium .search-bar input {
            width: 100%;
            padding: 10px 12px 10px 36px;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            font-size: 12px;
            outline: none;
            background: #f8fafc;
        }

        .hero-helpbuilder-premium .search-bar i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #0ea5e9;
            font-size: 12px;
        }

        .hero-helpbuilder-premium .ai-helper-bar {
            margin-top: auto;
            background: linear-gradient(135deg, #0ea5e9, #00c2ff);
            border-radius: 12px;
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 8px 20px rgba(0, 194, 255, 0.2);
            flex-shrink: 0;
        }

        .hero-helpbuilder-premium .ai-helper-bar i {
            color: #fff;
            font-size: 16px;
        }

        .hero-helpbuilder-premium .ai-helper-bar .ai-text {
            font-size: 11px;
            font-weight: 700;
            color: #fff;
        }

        .hero-helpbuilder-premium .ai-helper-bar .ai-sub {
            font-size: 10px;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Tablet */
        @media (max-width: 1024px) {
            .hero-helpbuilder-premium {
                padding: 100px 32px 60px !important;
            }

            .hero-helpbuilder-premium>div {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .hero-helpbuilder-premium .ip-desc {
                max-width: 100%;
            }

            .hero-helpbuilder-premium .hero-showcase {
                max-height: 420px;
                min-height: 320px;
            }

            .hero-helpbuilder-premium .showcase-card-premium {
                max-height: 420px;
            }
        }

        /* Mobile */
        @media (max-width: 768px) {
            .hero-helpbuilder-premium {
                padding: 80px 20px 40px !important;
            }

            .hero-helpbuilder-premium>div {
                gap: 30px;
            }

            .hero-helpbuilder-premium .ip-title {
                font-size: clamp(28px, 6vw, 38px);
            }

            .hero-helpbuilder-premium .hero-showcase {
                max-height: 380px;
                min-height: 280px;
            }

            .hero-helpbuilder-premium .showcase-card-premium {
                max-height: 380px;
                padding: 16px !important;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid {
                gap: 8px;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div {
                padding: 8px 10px;
                min-height: 50px;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div .icon-text {
                font-size: 11px;
            }

            .hero-helpbuilder-premium .search-bar input {
                padding: 8px 10px 8px 32px;
                font-size: 11px;
            }

            .hero-helpbuilder-premium .search-bar i {
                font-size: 11px;
                left: 10px;
            }
        }

        /* Small Mobile */
        @media (max-width: 480px) {
            .hero-helpbuilder-premium {
                padding: 70px 16px 30px !important;
            }

            .hero-helpbuilder-premium .hero-showcase {
                max-height: 340px;
                min-height: 240px;
            }

            .hero-helpbuilder-premium .showcase-card-premium {
                max-height: 340px;
                padding: 12px !important;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div {
                padding: 6px 8px;
                min-height: 44px;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div .icon-text {
                font-size: 10px;
            }

            .hero-helpbuilder-premium .showcase-card-premium .articles-grid>div .count {
                font-size: 9px;
            }

            .hero-helpbuilder-premium .ai-helper-bar {
                padding: 8px 12px;
            }

            .hero-helpbuilder-premium .ai-helper-bar i {
                font-size: 14px;
            }

            .hero-helpbuilder-premium .ai-helper-bar .ai-text {
                font-size: 10px;
            }

            .hero-helpbuilder-premium .ai-helper-bar .ai-sub {
                font-size: 9px;
            }
        }

		 
            .artify-signup-section {
                width: 100%;
                min-height: 100vh;
                overflow: hidden;
                position: relative;
                display: block;
                background: var(--bg, #f8faff);
            }

            .artify-signup-section .m-sec {
                position: relative;
                width: 100%;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 0;
                overflow: hidden;
                background: var(--bg, #f8faff);
            }

            .artify-signup-section .noise {
                position: absolute;
                inset: 0;
                pointer-events: none;
                opacity: 0.018;
                mix-blend-mode: multiply;
                background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
                background-size: 150px;
            }

            .artify-signup-section #auroraC,
            .artify-signup-section #netC,
            .artify-signup-section #sparkC {
                position: absolute;
                inset: 0;
                pointer-events: none;
            }

            .artify-signup-section .cursor-field {
                position: fixed;
                width: 280px;
                height: 280px;
                border-radius: 50%;
                border: 1px solid rgba(37, 99, 235, 0.08);
                pointer-events: none;
                z-index: 9998;
                transform: translate(-50%, -50%);
                transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.3s;
                opacity: 0;
                background: radial-gradient(circle, rgba(37, 99, 235, 0.02), transparent 70%);
            }

            .artify-signup-section .cursor-field.hover {
                width: 90px;
                height: 90px;
                border-color: rgba(37, 99, 235, 0.2);
                background: radial-gradient(circle, rgba(37, 99, 235, 0.04), transparent 70%);
            }

            .artify-signup-section .cursor-field::after {
                content: '';
                position: absolute;
                inset: 8px;
                border-radius: 50%;
                border: 1px solid rgba(37, 99, 235, 0.04);
            }

            .artify-signup-section .m-grid {
                position: relative;
                z-index: 5;
                display: grid;
                grid-template-columns: 0.92fr 1.08fr;
                gap: 4rem;
                align-items: center;
                max-width: 1280px;
                width: 100%;
                padding: 5rem 2rem;
                margin: 0 auto;
            }

            .artify-signup-section .m-left {
                position: relative;
                z-index: 1;
                isolation: isolate;
                display: flex;
                flex-direction: column;
                gap: 1.6rem;
                max-width: 500px;
                padding: 1.5rem 0.5rem 1.5rem 0;
            }

            .artify-signup-section .m-left::before,
            .artify-signup-section .m-left::after {
                content: '';
                position: absolute;
                pointer-events: none;
            }

            .artify-signup-section .m-left::before {
                inset: -2.5rem auto auto -3rem;
                width: 500px;
                height: 500px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(37,99,235,0.12), rgba(124,58,237,0.08) 38%, rgba(255,255,255,0) 68%);
                filter: blur(24px);
                z-index: -1;
            }

            .artify-signup-section .m-left::after {
                right: -2rem;
                top: 4rem;
                width: 230px;
                height: 1px;
                background: linear-gradient(90deg, rgba(37,99,235,0), rgba(37,99,235,0.38), rgba(124,58,237,0));
            }

            .artify-signup-section .m-label {
                display: inline-flex;
                align-items: center;
                gap: 0.6rem;
                font-size: 0.62rem;
                font-weight: 600;
                color: #2563eb;
                text-transform: uppercase;
                letter-spacing: 2px;
                /* opacity: 0; */
                /* transform: translateY(10px) rotateX(15deg); */
            }

            .artify-signup-section .m-label-line {
                width: 2rem;
                height: 1.5px;
                background: #2563eb;
                /* transform: scaleX(0); */
                transform-origin: left;
                border-radius: 1px;
            }

            .artify-signup-section .m-head {
                overflow: hidden;
                max-width: 560px;
            }

            .artify-signup-section .m-head h1 {
                font-family: 'Space Grotesk', sans-serif;
                font-size: clamp(2.9rem, 4.8vw, 4.6rem);
                font-weight: 700;
                line-height: 0.96;
                letter-spacing: -0.06em;
                max-width: 560px;
                color: #0c1a33;
                word-break: normal;
                overflow-wrap: normal;
            }

            .artify-signup-section .m-head .word {
                display: inline-block;
                white-space: nowrap;
            }

            .artify-signup-section .m-head .word.ac .ch {
                background: linear-gradient(90deg, #2563eb, #7c3aed);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .artify-signup-section .m-head .ch {
                display: inline-block;
                /* opacity: 0; */
                /* transform: translateY(100%) rotateX(-40deg); */
                transform-origin: bottom center;
            }

            .artify-signup-section .m-desc {
                font-size: 0.98rem;
                color: #4a6080;
                line-height: 1.8;
                max-width: 380px;
                /* opacity: 0; */
                /* transform: translateY(15px); */
                margin-top: 0.1rem;
            }

            .artify-signup-section .m-features {
                list-style: none;
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                margin: 0.15rem 0 0;
                max-width: 380px;
                padding: 0;
            }

            .artify-signup-section .m-feature-item {
                position: relative;
                display: flex;
                align-items: center;
                gap: 0.7rem;
                padding: 0.68rem 0.9rem 0.68rem 0.9rem;
                border-radius: 16px;
                background: rgba(255, 255, 255, 0.6);
                border: 1px solid rgba(37, 99, 235, 0.08);
                box-shadow: 0 14px 32px -24px rgba(37,99,235,0.3);
                color: #4a6080;
                font-size: 0.9rem;
                line-height: 1.5;
                /* opacity: 0; */
                /* transform: translateY(15px); */
                backdrop-filter: blur(10px);
                -webkit-backdrop-filter: blur(10px);
            }

            .artify-signup-section .m-feature-item::before {
                content: '';
                position: absolute;
                inset: 0;
                border-radius: inherit;
                background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(124,58,237,0.02));
                z-index: 0;
            }

            .artify-signup-section .m-feature-item span {
                position: relative;
                z-index: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 1.4rem;
                height: 1.4rem;
                border-radius: 50%;
                background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.1));
                color: #2563eb;
                font-size: 0.85rem;
                box-shadow: inset 0 0 0 1px rgba(37,99,235,0.08);
            }

            .artify-signup-section .m-feature-item em {
                position: relative;
                z-index: 1;
                display: block;
                font-style: normal;
            }

            .artify-signup-section .m-bottom-note {
                font-size: 0.79rem;
                color: #8fa3be;
                letter-spacing: 0.02em;
                /* opacity: 0; */
                /* transform: translateY(16px); */
                max-width: 420px;
            }

            .artify-signup-section .m-left-visual {
                position: absolute;
                inset: -2.6rem -3.4rem -2.4rem -3rem;
                pointer-events: none;
                z-index: 0;
                overflow: hidden;
            }

            .artify-signup-section .m-label,
            .artify-signup-section .m-head,
            .artify-signup-section .m-desc,
            .artify-signup-section .m-features,
            .artify-signup-section .m-bottom-note {
                position: relative;
                z-index: 1;
            }

            .artify-signup-section .m-glow-orb {
                position: absolute;
                border-radius: 50%;
                filter: blur(18px);
                opacity: 0.8;
                /* animation: artifySignupOrbFloat 15s ease-in-out infinite alternate; */
            }

            .artify-signup-section .orb-one { width: 280px; height: 280px; right: 8%; top: 5%; background: radial-gradient(circle, rgba(125,211,252,0.34), rgba(125,211,252,0.08) 40%, transparent 72%); }
            .artify-signup-section .orb-two { width: 230px; height: 230px; left: 4%; top: 10%; background: radial-gradient(circle, rgba(59,130,246,0.22), rgba(59,130,246,0.05) 42%, transparent 72%); animation-delay: 1.5s; }
            .artify-signup-section .orb-three { width: 260px; height: 260px; right: 10%; bottom: 4%; background: radial-gradient(circle, rgba(168,85,247,0.2), rgba(168,85,247,0.05) 42%, transparent 72%); animation-delay: 3s; }
            .artify-signup-section .orb-four { width: 180px; height: 180px; left: 20%; bottom: 18%; background: radial-gradient(circle, rgba(34,211,238,0.22), rgba(34,211,238,0.05) 42%, transparent 72%); animation-delay: 2s; }

            .artify-signup-section .m-orbit-line {
                position: absolute;
                height: 1px;
                border-radius: 999px;
                background: linear-gradient(90deg, transparent, rgba(37,99,235,0.35), rgba(124,58,237,0.35), transparent);
                box-shadow: 0 0 20px rgba(59,130,246,0.18);
                opacity: 0.75;
                /* animation: artifySignupTravelLine 16s ease-in-out infinite; */
            }

            .artify-signup-section .orbit-one { width: 230px; left: 10%; top: 24%; transform: rotate(18deg); }
            .artify-signup-section .orbit-two { width: 260px; right: 8%; top: 46%; transform: rotate(-18deg); animation-delay: 2.5s; }

            .artify-signup-section .m-particle {
                position: absolute;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(125,211,252,0.9));
                box-shadow: 0 0 16px rgba(125,211,252,0.6);
                opacity: 0.8;
                /* animation: artifySignupParticleDrift 14s ease-in-out infinite; */
            }

            .artify-signup-section .p1 { left: 18%; top: 16%; animation-delay: 0.2s; }
            .artify-signup-section .p2 { left: 58%; top: 10%; animation-delay: 2.1s; }
            .artify-signup-section .p3 { left: 72%; top: 34%; animation-delay: 3.3s; }
            .artify-signup-section .p4 { left: 16%; top: 58%; animation-delay: 5.1s; }
            .artify-signup-section .p5 { left: 70%; top: 64%; animation-delay: 4.3s; }
            .artify-signup-section .p6 { left: 46%; top: 74%; animation-delay: 1.4s; }

            /*
            @keyframes artifySignupOrbFloat {
                0% { transform: translate3d(-8px, 0, 0) scale(1); }
                50% { transform: translate3d(10px, -15px, 0) scale(1.05); }
                100% { transform: translate3d(-6px, 14px, 0) scale(0.98); }
            }

            @keyframes artifySignupTravelLine {
                0% { transform: translate3d(0,0,0) scaleX(0.85); opacity: 0.2; }
                25% { transform: translate3d(12px,-12px,0) scaleX(1); opacity: 0.6; }
                50% { transform: translate3d(-10px,12px,0) scaleX(1.05); opacity: 0.8; }
                100% { transform: translate3d(8px,-8px,0) scaleX(0.9); opacity: 0.2; }
            }

            @keyframes artifySignupParticleDrift {
                0% { transform: translateY(0) scale(0.7); opacity: 0; }
                15% { opacity: 0.9; }
                50% { transform: translateY(-18px) scale(1); opacity: 1; }
                100% { transform: translateY(18px) scale(0.7); opacity: 0; }
            }
            */

            .artify-signup-section .m-card-outer {
                display: flex;
                justify-content: center;
                /* opacity: 0; */
                /* transform: perspective(800px) rotateY(-8deg) translateX(40px); */
                will-change: transform;
            }

            .artify-signup-section .m-card {
                width: 100%;
                max-width: 720px;
                background: rgba(255,255,255,0.7);
                backdrop-filter: blur(24px) saturate(140%);
                -webkit-backdrop-filter: blur(24px) saturate(140%);
                border: 1px solid rgba(0,60,140,0.06);
                border-radius: 22px;
                padding: 2.2rem 2rem 2.4rem;
                position: relative;
                overflow: hidden;
                box-shadow: 0 24px 64px -16px rgba(0,60,140,0.08), 0 4px 16px -4px rgba(0,60,140,0.03);
                /* transition: box-shadow 0.4s; */
                will-change: transform;
                transform-style: preserve-3d;
            }

            .artify-signup-section .card-spotlight {
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                border-radius: 22px;
                opacity: 0;
                /* transition: opacity 0.4s; */
            }

            /* .artify-signup-section .m-card:hover .card-spotlight { opacity: 1; } */

            .artify-signup-section .border-beam {
                position: absolute;
                inset: -1.5px;
                z-index: 0;
                pointer-events: none;
                border-radius: 22px;
                overflow: hidden;
            }

            .artify-signup-section .border-beam::before {
                content: '';
                position: absolute;
                width: 60px;
                height: 60px;
                background: radial-gradient(circle, rgba(37,99,235,0.6) 0%, rgba(124,58,237,0.3) 40%, transparent 70%);
                border-radius: 50%;
                /* animation: artifySignupBeamOrbit 5s linear infinite; */
                filter: blur(2px);
            }

            /*
            @keyframes artifySignupBeamOrbit {
                0% { top: -30px; left: 15%; opacity: 0; }
                5% { opacity: 1; }
                25% { top: 50%; left: calc(100% + 20px); opacity: 1; }
                50% { top: calc(100% + 20px); left: 75%; opacity: 1; }
                75% { top: 50%; left: -30px; opacity: 1; }
                95% { opacity: 1; }
                100% { top: -30px; left: 15%; opacity: 0; }
            }
            */

            .artify-signup-section .glass-sweep {
                position: absolute;
                inset: 0;
                z-index: 2;
                pointer-events: none;
                border-radius: 22px;
                overflow: hidden;
            }

            .artify-signup-section .glass-sweep::before {
                content: '';
                position: absolute;
                top: -100%;
                left: -30%;
                width: 40%;
                height: 300%;
                background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.06) 45%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.06) 55%, transparent 60%);
                transform: rotate(15deg);
                /* animation: artifySignupSweepAcross 6s ease-in-out infinite; */
                animation-delay: 2s;
            }

            /*
            @keyframes artifySignupSweepAcross {
                0% { left: -50%; opacity: 0; }
                5% { opacity: 1; }
                45% { left: 110%; opacity: 1; }
                50% { opacity: 0; }
                100% { opacity: 0; }
            }
            */

            .artify-signup-section .m-card::before,
            .artify-signup-section .m-card::after {
                content: '';
                position: absolute;
                width: 12px;
                height: 12px;
                border-color: rgba(37,99,235,0.1);
                border-style: solid;
                /* transition: border-color 0.3s; */
                pointer-events: none;
                z-index: 3;
            }

            .artify-signup-section .m-card::before { top: 12px; left: 12px; border-width: 1px 0 0 1px; border-radius: 2px 0 0 0; }
            .artify-signup-section .m-card::after { bottom: 12px; right: 12px; border-width: 0 1px 1px 0; border-radius: 0 0 2px 0; }
            /*
            .artify-signup-section .m-card:hover::before,
            .artify-signup-section .m-card:hover::after { border-color: rgba(37,99,235,0.25); }
            */

            .artify-signup-section .m-card h2 {
                font-family: 'Space Grotesk', sans-serif;
                font-size: 1.3rem;
                font-weight: 600;
                margin-bottom: 0.15rem;
                position: relative;
                z-index: 4;
                color: #0c1a33;
            }

            .artify-signup-section .m-card-sub {
                font-size: 0.8rem;
                color: #8fa3be;
                margin-bottom: 1.6rem;
                position: relative;
                z-index: 4;
            }

            .artify-signup-section .m-form-grid { display: grid; gap: 0.9rem; }
            .artify-signup-section .m-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
            .artify-signup-section .m-f { position: relative; margin-bottom: 0; z-index: 4; /* opacity: 0; */ /* transform: translateX(-15px) rotateY(10deg); */ }
            .artify-signup-section input:focus, .artify-signup-section select:focus, .artify-signup-section button:focus { outline: none; box-shadow: none; }
            .artify-signup-section .m-f.full { grid-column: 1 / -1; }
            .artify-signup-section .m-f-in {
                position: relative;
                padding: 1.3rem 0.85rem 0.55rem 2rem;
                border-radius: 13px;
                border: 1.5px solid rgba(0,60,140,0.06);
                background: rgba(255,255,255,0.5);
                transition: all 0.3s ease;
                overflow: hidden;
            }
            .artify-signup-section .m-f-in:focus-within { border-color: #2563eb; background: rgba(255,255,255,0.8); box-shadow: 0 0 0 3px rgba(37,99,235,0.06); }
            .artify-signup-section .m-f-ic { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); color: #8fa3be; font-size: 0.8rem; pointer-events: none; transition: all 0.3s; z-index: 2; }
            .artify-signup-section .m-f-in:focus-within .m-f-ic { color: #2563eb; top: 0.9rem; transform: none; font-size: 0.65rem; }
            .artify-signup-section .m-f-label {
                position: absolute;
                left: 2rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 0.85rem;
                color: #8fa3be;
                pointer-events: none;
                transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
                z-index: 2;
                transform-origin: left center;
            }
            .artify-signup-section .m-f-in:focus-within .m-f-label,
            .artify-signup-section .m-f-in.has-val .m-f-label {
                top: 0.65rem;
                transform: none;
                font-size: 0.58rem;
                font-weight: 600;
                color: #2563eb;
                letter-spacing: 0.5px;
                text-transform: uppercase;
            }
            .artify-signup-section .m-f input,
            .artify-signup-section .m-f select {
                width: 100%;
                border: none;
                background: transparent;
                font-size: 0.85rem;
                font-family: 'Inter', sans-serif;
                color: #0c1a33;
                outline: none;
                position: relative;
                z-index: 2;
            }
            .artify-signup-section .m-f input::selection,
            .artify-signup-section .m-f select::selection,
            .artify-signup-section .m-f textarea::selection { background: transparent; color: #0c1a33; }
            .artify-signup-section .m-f input { caret-color: #2563eb; }
            .artify-signup-section .m-f input[type=password] { padding-right: 2rem; }
            .artify-signup-section .m-f select { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
            .artify-signup-section #teamI,
            .artify-signup-section #trainingTime {
                position: relative;
                display: block;
                inline-size: 100%;
                block-size: auto;
                min-height: 0;
                opacity: 1;
                pointer-events: auto;
                z-index: 3;
                cursor: pointer;
                appearance: auto;
                -webkit-appearance: auto;
                -moz-appearance: auto;
                padding: 0.76rem 2rem 0.76rem 1rem;
                border: 1px solid transparent;
                border-radius: 13px;
                background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,250,255,0.88));
                color: #0c1a33;
                font: 600 0.72rem 'Inter', sans-serif;
                line-height: 1.2;
                box-shadow: 0 8px 20px rgba(15,23,42,0.04), inset 0 1px 0 rgba(255,255,255,0.85);
                transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
            }
            .artify-signup-section #teamI:hover,
            .artify-signup-section #trainingTime:hover { background: linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,248,255,0.92)); box-shadow: 0 12px 26px rgba(15,23,42,0.06), 0 0 0 3px rgba(37,99,235,0.04); }
            .artify-signup-section #teamI:focus,
            .artify-signup-section #teamI:focus-visible,
            .artify-signup-section #trainingTime:focus,
            .artify-signup-section #trainingTime:focus-visible { outline: none; border-color: transparent; box-shadow: 0 0 0 3px rgba(37,99,235,0.08), 0 12px 28px rgba(37,99,235,0.08); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(246,249,255,0.95)); }
            .artify-signup-section #mf9 { position: relative; overflow: visible; padding-top: 1.1rem; }
            .artify-signup-section .team-inline-label { display: block; position: static; margin: 0 0 0.35rem 0; font-size: 0.58rem; font-weight: 600; color: #2563eb; letter-spacing: 0.5px; text-transform: uppercase; }
            .artify-signup-section .training-select-wrap { position: relative; width: 100%; }
            .artify-signup-section .m-f select option { color: #0c1a33; background: #fff; }
            .artify-signup-section .m-f input::placeholder { color: transparent; }
            .artify-signup-section .password-toggle { position: absolute; right: 0.7rem; top: 50%; z-index: 3; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #8fa3be; cursor: pointer; transform: translateY(-50%); transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
            .artify-signup-section .password-toggle svg { width: 0.86rem; height: 0.86rem; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s ease, transform 0.2s ease; }
            .artify-signup-section .password-toggle:hover, .artify-signup-section .password-toggle:focus-visible { color: #7c3aed; background: rgba(124,58,237,0.08); transform: translateY(-50%) scale(1.08); }
            .artify-signup-section .m-pass-actions { display: flex; justify-content: flex-end; margin-top: 0.45rem; position: relative; z-index: 4; }
            .artify-signup-section .m-gen-pass { border: none; background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(124,58,237,0.08)); color: #2563eb; padding: 0.45rem 0.7rem; border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: all 0.25s ease; }
            .artify-signup-section .m-gen-pass:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(37,99,235,0.25); }
            .artify-signup-section .focus-ripple { position: absolute; border-radius: 50%; border: 1.5px solid rgba(37,99,235,0.25); pointer-events: none; z-index: 1; /* animation: artifySignupRippleOut 0.7s ease-out forwards; */ }
            /* @keyframes artifySignupRippleOut { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; margin-top: -100px; margin-left: -100px; } } */
            .artify-signup-section .m-f-glow { position: absolute; top: -1px; left: -1px; width: 24px; height: 24px; border-radius: 13px 0 0 0; background: radial-gradient(circle at top left, rgba(37,99,235,0.08), transparent 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
            .artify-signup-section .m-f-in:focus-within .m-f-glow { opacity: 1; }
            .artify-signup-section .website-field-error { display: none; margin: 0.35rem 0.2rem 0; color: #dc2626; font-size: 0.68rem; line-height: 1.35; }
            .artify-signup-section .website-field-error.visible { display: block; }
            .artify-signup-section .m-f.has-error .m-f-in { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.08); }
            .artify-signup-section .m-str { display: flex; gap: 0.25rem; margin-top: 0.3rem; position: relative; z-index: 4; }
            .artify-signup-section .m-str-b { height: 2.5px; flex: 1; border-radius: 2px; background: rgba(37,99,235,0.05); overflow: hidden; }
            .artify-signup-section .m-str-b::after { content: ''; display: block; height: 100%; width: 100%; border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease, background 0.4s; }
            .artify-signup-section .m-str-b.l1::after { transform: scaleX(1); background: #ef4444; }
            .artify-signup-section .m-str-b.l2::after { transform: scaleX(1); background: #f59e0b; }
            .artify-signup-section .m-str-b.l3::after { transform: scaleX(1); background: #2563eb; }
            .artify-signup-section .m-str-b.l4::after { transform: scaleX(1); background: #059669; box-shadow: 0 0 6px rgba(5,150,105,0.2); }
            .artify-signup-section .m-str-t { font-size: 0.58rem; color: #8fa3be; margin-top: 0.15rem; height: 0.7em; transition: color 0.3s; position: relative; z-index: 4; }
            .artify-signup-section .m-str-t.c1 { color: #ef4444; }
            .artify-signup-section .m-str-t.c2 { color: #f59e0b; }
            .artify-signup-section .m-str-t.c3 { color: #2563eb; }
            .artify-signup-section .m-str-t.c4 { color: #059669; }
            .artify-signup-section .training-schedule { grid-column: 1 / -1; margin-top: 0.25rem; padding: 0.75rem; border: 1px solid rgba(0,60,140,0.06); border-radius: 13px; background: rgba(255,255,255,0.42); }
            .artify-signup-section .training-schedule-title { font-family: 'Space Grotesk', sans-serif; font-size: 0.78rem; font-weight: 700; color: #0c1a33; margin-bottom: 0.55rem; }
            .artify-signup-section .training-schedule-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem; }
            .artify-signup-section .training-schedule-label { display: block; margin-bottom: 0.25rem; font-size: 0.58rem; font-weight: 700; color: #8fa3be; text-transform: uppercase; letter-spacing: 0.06em; }
            .artify-signup-section .training-schedule-input { width: 100%; padding: 0.62rem 0.7rem; border: 1px solid rgba(0,60,140,0.06); border-radius: 13px; background: rgba(255,255,255,0.76); color: #0c1a33; font: 600 0.72rem 'Inter', sans-serif; outline: none; }
            .artify-signup-section .training-schedule-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.06); }
            .artify-signup-section .training-schedule-note { margin-top: 0.45rem; font-size: 0.58rem; color: #8fa3be; }
            .artify-signup-section .m-btn { width: 100%; padding: 0.8rem; margin-top: 0.5rem; border: 1.5px solid transparent; border-radius: 0; background: linear-gradient(135deg, #ff6b6b, #f43f79, #7dd3fc); color: #ffffff; font-size: 0.85rem; font-weight: 700; font-family: 'Inter', sans-serif; cursor: pointer; position: relative; overflow: hidden; z-index: 4; transition: all 0.3s ease; /* opacity: 0; */ /* transform: translateY(10px) scale(0.95); */ box-shadow: 0 18px 36px rgba(244,63,121,0.28); }
            .artify-signup-section .m-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.28), transparent); transition: left 0.55s ease; }
            .artify-signup-section .m-btn:hover { border-color: transparent; color: #ffffff; background: linear-gradient(135deg, #ff6b6b, #f43f79, #7dd3fc); transform: translateY(-2px); box-shadow: 0 22px 42px rgba(244,63,121,0.34); }
            .artify-signup-section .m-btn:hover::before { left: 100%; }
            .artify-signup-section .m-btn:active { transform: scale(0.99) translateY(0); }
            .artify-signup-section .m-btn span { position: relative; z-index: 1; transition: transform 0.3s; }
            .artify-signup-section .m-btn:hover span { transform: none; }
            .artify-signup-section .m-btn .btn-arrow { display: inline-block; opacity: 1; transform: none; transition: none; margin-left: 0.3rem; }
            .artify-signup-section .m-btn:hover .btn-arrow { opacity: 1; transform: none; }
            .artify-signup-section .m-btn .btn-glow { position: absolute; inset: -4px; border-radius: 0; background: linear-gradient(135deg, rgba(255,107,107,0.28), rgba(244,63,121,0.2), rgba(125,211,252,0.28)); filter: blur(10px); opacity: 0.8; z-index: -1; transition: none; }
            .artify-signup-section .m-btn:hover .btn-glow { opacity: 1; }
            .artify-signup-section .btn-particles { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; border-radius: 13px; }
            .artify-signup-section .btn-particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: rgba(255,255,255,0.8); pointer-events: none; }
            .artify-signup-section .m-rip { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.25); transform: scale(0); /* animation: artifySignupMRip 0.6s ease-out; */ pointer-events: none; z-index: 1; }
            /* @keyframes artifySignupMRip { to { transform: scale(4); opacity: 0; } } */
            .artify-signup-section .m-div { display: flex; align-items: center; gap: 0.6rem; margin: 1.2rem 0 0.9rem; position: relative; z-index: 4; /* opacity: 0; */ /* transform: scaleX(0.8); */ }
            .artify-signup-section .m-div::before,
            .artify-signup-section .m-div::after { content: ''; flex: 1; height: 1px; background: rgba(0,60,140,0.06); }
            .artify-signup-section .m-div span { font-size: 0.55rem; color: #8fa3be; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
            .artify-signup-section .m-socs { display: flex; gap: 0.5rem; position: relative; z-index: 4; /* opacity: 0; */ /* transform: translateY(8px); */ }
            .artify-signup-section .m-soc { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem; border-radius: 13px; border: 1.5px solid rgba(0,60,140,0.06); background: rgba(255,255,255,0.7); font-size: 0.75rem; font-weight: 500; color: #4a6080; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
            .artify-signup-section .m-soc:hover { border-color: rgba(0,60,140,0.14); transform: translateY(-2px); box-shadow: 0 8px 24px -6px rgba(0,60,140,0.1); }
            .artify-signup-section .m-soc:active { transform: scale(0.97); }
            .artify-signup-section .m-soc svg { transition: transform 0.3s ease; }
            .artify-signup-section .m-soc:hover svg { transform: scale(1.12); }
            .artify-signup-section .m-captcha { grid-column: 1 / -1; margin-top: 0.25rem; padding: 0.75rem; border: 1px solid rgba(0,60,140,0.06); border-radius: 13px; background: rgba(255,255,255,0.45); position: relative; z-index: 4; }
            .artify-signup-section .m-captcha-title { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8fa3be; margin-bottom: 0.45rem; }
            .artify-signup-section .captcha-fallback { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 0.8rem; border-radius: 12px; border: 1px solid rgba(0,60,140,0.06); background: rgba(255,255,255,0.72); color: #0c1a33; font-size: 0.75rem; font-weight: 600; }
            .artify-signup-section .captcha-fallback input { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #2563eb; }
            .artify-signup-section .captcha-note { margin-top: 0.4rem; font-size: 0.58rem; line-height: 1.5; color: #8fa3be; }
            .artify-signup-section .captcha-note strong { color: #2563eb; }
            .artify-signup-section .m-captcha .g-recaptcha { transform-origin: left top; margin-top: 0.55rem; min-height: 78px; }
            .artify-signup-section .m-consent { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.15rem 0 0; margin-top: 0.15rem; font-size: 0.68rem; line-height: 1.5; color: #4a6080; position: relative; z-index: 4; }
            .artify-signup-section .m-consent input { width: 16px; height: 16px; margin-top: 0.1rem; flex-shrink: 0; accent-color: #2563eb; cursor: pointer; }
            .artify-signup-section .m-consent a { color: #2563eb; text-decoration: none; transition: color 0.2s; }
            .artify-signup-section .m-consent a:hover { color: #7c3aed; }
            .artify-signup-section .m-terms { font-size: 0.58rem; color: #8fa3be; text-align: center; margin-top: 1.2rem; position: relative; z-index: 4; /* opacity: 0; */ }
            .artify-signup-section .m-terms a { color: #2563eb; text-decoration: none; transition: color 0.2s; }
            .artify-signup-section .m-terms a:hover { color: #7c3aed; }
            .artify-signup-section .m-orbs { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
            .artify-signup-section .m-orb { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.5); box-shadow: inset 0 -4px 12px rgba(255,255,255,0.3), inset 0 4px 12px rgba(0,60,140,0.04), 0 8px 32px -8px rgba(0,60,140,0.08); opacity: 0; will-change: transform; }
            .artify-signup-section .m-orb::before { content: ''; position: absolute; top: 12%; left: 18%; width: 35%; height: 25%; background: radial-gradient(ellipse, rgba(255,255,255,0.6), transparent); border-radius: 50%; transform: rotate(-20deg); pointer-events: none; }
            .artify-signup-section .m-orb::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; background: conic-gradient(from 180deg, transparent, rgba(255,255,255,0.15) 20%, transparent 40%); pointer-events: none; }
            .artify-signup-section .orb1 { width: 52px; height: 52px; top: 10%; right: 12%; background: rgba(37,99,235,0.08); }
            .artify-signup-section .orb2 { width: 38px; height: 38px; top: 22%; right: 4%; background: rgba(124,58,237,0.08); }
            .artify-signup-section .orb3 { width: 44px; height: 44px; bottom: 28%; left: 0%; background: rgba(8,145,178,0.08); }
            .artify-signup-section .orb4 { width: 32px; height: 32px; bottom: 14%; right: 8%; background: rgba(245,158,11,0.08); }
            .artify-signup-section .orb-ic { font-size: 0.7rem; opacity: 0.5; position: relative; z-index: 1; }
            .artify-signup-section #sparkC { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
            .artify-signup-section .m-ok { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; position: relative; z-index: 4; }
            .artify-signup-section .m-ok.active { display: flex; }
            .artify-signup-section .m-ok-ring { width: 64px; height: 64px; border-radius: 50%; position: relative; margin-bottom: 1.2rem; border: 1.5px solid rgba(0,60,140,0.06); display: flex; align-items: center; justify-content: center; }
            .artify-signup-section .m-ok-ring svg { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); transform: rotate(-90deg); }
            .artify-signup-section .m-ok-ring .ob { fill: none; stroke: rgba(37,99,235,0.05); stroke-width: 1.5; }
            .artify-signup-section .m-ok-ring .of { fill: none; stroke: url(#okG); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; }
            .artify-signup-section .m-ok-ring .oi { font-size: 1.3rem; opacity: 0; color: #059669; }
            .artify-signup-section .m-ok h3 { font-family: 'Space Grotesk', sans-serif; font-size: 1.2rem; font-weight: 600; margin-bottom: 0.25rem; color: #0c1a33; }
            .artify-signup-section .m-ok p { color: #8fa3be; font-size: 0.82rem; max-width: 240px; line-height: 1.6; }
            .artify-signup-section .celeb-ring { position: absolute; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; border: 1px solid rgba(37,99,235,0.1); top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0); }
            .artify-signup-section .celeb-particle { position: absolute; border-radius: 50%; pointer-events: none; }
            .artify-signup-section .cft { position: absolute; pointer-events: none; z-index: 100; border-radius: 1px; }

            @media (max-width: 900px) {
                .artify-signup-section .m-grid { grid-template-columns: 1fr; gap: 3rem; max-width: 560px; padding: 5rem 1.5rem; }
                .artify-signup-section .m-orb { display: none; }
                .artify-signup-section .m-left { text-align: center; align-items: center; max-width: 100%; padding: 0; }
                .artify-signup-section .m-left::before, .artify-signup-section .m-left::after { display: none; }
                .artify-signup-section .m-head h1 { max-width: 520px; }
                .artify-signup-section .m-left-visual { display: none; }
                .artify-signup-section .m-features { max-width: 100%; align-items: center; }
                .artify-signup-section .m-feature-item { width: 100%; max-width: 480px; justify-content: flex-start; text-align: left; }
            }

            @media (max-width: 500px) {
                .artify-signup-section .m-grid { padding: 4rem 1rem; }
                .artify-signup-section .m-card { padding: 1.6rem 1.2rem; }
                .artify-signup-section .custom-select-trigger { min-height: 2.45rem; padding: 0.68rem 0.85rem 0.68rem 1.9rem; }
                .artify-signup-section .custom-select-menu { max-height: 220px; }
                .artify-signup-section .m-socs { flex-direction: column; }
                .artify-signup-section .m-feature-item { padding: 0.65rem 0.8rem; }
                .artify-signup-section .m-head h1 { font-size: clamp(2.2rem, 9vw, 3rem); line-height: 1.02; }
            }

            @media (prefers-reduced-motion: reduce) {
                .artify-signup-section *, .artify-signup-section *::before, .artify-signup-section *::after {
                    animation-duration: 0.01ms !important;
                    animation-iteration-count: 1 !important;
                    transition-duration: 0.01ms !important;
                }
            }
        
		
		/* ============================================= */
		/* TRAINING SCHEDULE PICKER - COLOURFUL VERSION */
		/* ============================================= */
		/* TRAINING SCHEDULE PICKER - COMPACT VERSION    */
		/* ============================================= */
		.training-schedule-container {
			display: none;
			grid-column: 1 / -1;
			position: relative;
			width: 100%;
			margin-top: 8px;
			padding: 12px;
			max-height: none;
			overflow: visible;
			background: rgba(255, 255, 255, 0.72);
			border: 1px solid rgba(79, 140, 255, 0.15);
			border-radius: 16px;
			backdrop-filter: blur(16px);
			-webkit-backdrop-filter: blur(16px);
			/* animation: scheduleSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1); */
			box-shadow: 0 8px 24px rgba(79, 140, 255, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.65);
		}

		.training-schedule-container.active {
			display: grid;
		}

		#formV,
		.m-card {
			overflow: visible;
		}

		#formV {
			position: relative;
		}

		/*
		@keyframes scheduleSlideIn {
			from { opacity: 0; transform: translateY(-10px) scale(0.985); }
			to { opacity: 1; transform: translateY(0) scale(1); }
		}
		*/

		.training-schedule-inner {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
			margin-bottom: 8px;
		}

		.training-calendar-section,
		.training-time-section {
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.calendar-header,
		.time-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 2px;
		}

		.calendar-header h3,
		.time-header h3 {
			font-family: 'Space Grotesk', sans-serif;
			font-size: 0.84rem;
			font-weight: 700;
			margin: 0;
		}

		.calendar-header h3 {
			background: linear-gradient(135deg, #1e293b, #4f8cff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.time-header h3 {
			background: linear-gradient(135deg, #1e293b, #7b61ff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
		}

		.calendar-nav {
			display: flex;
			gap: 4px;
		}

		.cal-nav-btn {
			width: 24px;
			height: 24px;
			border: none;
			background: linear-gradient(135deg, rgba(79, 140, 255, 0.08), rgba(123, 97, 255, 0.06));
			border-radius: 8px;
			color: #4f8cff;
			font-weight: 700;
			font-size: 0.85rem;
			cursor: pointer;
			transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.cal-nav-btn:hover {
			background: linear-gradient(135deg, #4f8cff, #7b61ff);
			color: white;
			transform: translateY(-1px) scale(1.03);
			box-shadow: 0 4px 10px rgba(79, 140, 255, 0.18);
		}

		.cal-nav-btn:active {
			transform: scale(0.94);
		}

		.calendar-weekdays {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 2px;
			text-align: center;
			font-size: 0.48rem;
			font-weight: 700;
			color: #94a3b8;
			letter-spacing: 0.08em;
			text-transform: uppercase;
			padding: 0 1px;
		}

		.calendar-grid {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			gap: 2px;
		}

		.calendar-grid div {
			aspect-ratio: 1;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 8px;
			font-size: 0.68rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
			position: relative;
			color: #1e293b;
			min-height: 26px;
		}

		.calendar-grid div.disabled {
			color: #cbd5e1;
			cursor: not-allowed;
			opacity: 0.5;
		}

		.calendar-grid div.today {
			border: 1.5px solid #4f8cff;
			font-weight: 700;
			background: rgba(79, 140, 255, 0.04);
		}

		.calendar-grid div.today::after {
			content: '';
			position: absolute;
			bottom: 2px;
			left: 50%;
			transform: translateX(-50%);
			width: 3px;
			height: 3px;
			border-radius: 50%;
			background: #4f8cff;
		}

		.calendar-grid div:not(.disabled):hover {
			background: rgba(79, 140, 255, 0.08);
			transform: translateY(-1px) scale(1.02);
			box-shadow: 0 3px 10px rgba(79, 140, 255, 0.1);
		}

		.calendar-grid div.selected {
			background: linear-gradient(135deg, #4f8cff, #7b61ff, #00c2ff);
			color: white;
			font-weight: 700;
			box-shadow: 0 4px 14px rgba(79, 140, 255, 0.26);
			animation: selectPulse 0.35s cubic-bezier(0.22, 1, 0.36, 1);
			transform: scale(1.03);
		}

		.calendar-grid div.selected::after {
			content: '\2713';
			position: absolute;
			top: -5px;
			right: -3px;
			font-size: 0.42rem;
			background: #22c55e;
			color: white;
			border-radius: 50%;
			width: 12px;
			height: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: 0 2px 6px rgba(34, 197, 94, 0.3);
		}

		/*
		@keyframes selectPulse {
			0% { transform: scale(0.9); }
			50% { transform: scale(1.06); }
			100% { transform: scale(1.03); }
		}
		*/

		.time-input-wrapper {
			display: flex;
			gap: 6px;
			align-items: center;
			background: rgba(255, 255, 255, 0.6);
			border: 1px solid rgba(79, 140, 255, 0.12);
			border-radius: 10px;
			padding: 3px 8px 3px 10px;
		}

		.time-input-wrapper:focus-within {
			border-color: #4f8cff;
			box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.08);
			background: white;
		}

		.time-input-wrapper input[type="number"] {
			width: 36px;
			border: none;
			background: transparent;
			font-size: 0.85rem;
			font-weight: 700;
			color: #1e293b;
			outline: none;
			font-family: 'Inter', sans-serif;
			padding: 3px 0;
		}

		.time-input-wrapper input[type="number"]::-webkit-inner-spin-button,
		.time-input-wrapper input[type="number"]::-webkit-outer-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		.time-input-wrapper input[type="number"] {
			-moz-appearance: textfield;
		}

		.time-input-wrapper .time-colon {
			font-size: 0.95rem;
			font-weight: 700;
			color: #94a3b8;
		}

		.time-input-wrapper .ampm-toggle {
			display: flex;
			gap: 3px;
			margin-left: 2px;
		}

		.time-input-wrapper .ampm-btn {
			padding: 3px 7px;
			border: 1px solid rgba(79, 140, 255, 0.12);
			border-radius: 7px;
			background: transparent;
			font-size: 0.5rem;
			font-weight: 700;
			color: #94a3b8;
			cursor: pointer;
			transition: all 0.25s ease;
			font-family: 'Inter', sans-serif;
			text-transform: uppercase;
			letter-spacing: 0.04em;
		}

		.time-input-wrapper .ampm-btn:hover {
			border-color: rgba(79, 140, 255, 0.3);
			color: #4f8cff;
		}

		.time-input-wrapper .ampm-btn.active {
			background: linear-gradient(135deg, #4f8cff, #7b61ff);
			color: white;
			border-color: transparent;
			box-shadow: 0 3px 10px rgba(79, 140, 255, 0.18);
		}

		.time-slots-label {
			font-size: 0.48rem;
			font-weight: 700;
			color: #94a3b8;
			text-transform: uppercase;
			letter-spacing: 0.08em;
			margin-top: 2px;
		}

		.time-slots {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 6px;
		}

		.time-slot {
			padding: 7px 8px;
			border: 1px solid rgba(79, 140, 255, 0.12);
			background: rgba(255, 255, 255, 0.6);
			border-radius: 9px;
			font-size: 0.62rem;
			font-weight: 600;
			color: #1e293b;
			cursor: pointer;
			transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
			position: relative;
			overflow: hidden;
			font-family: 'Inter', sans-serif;
			text-align: center;
		}

		.time-slot:hover {
			border-color: rgba(79, 140, 255, 0.3);
			transform: translateY(-1px) scale(1.01);
			box-shadow: 0 3px 10px rgba(79, 140, 255, 0.08);
		}

		.time-slot.selected {
			background: linear-gradient(135deg, #4f8cff, #7b61ff, #00c2ff);
			color: white;
			border-color: transparent;
			font-weight: 700;
			box-shadow: 0 4px 14px rgba(79, 140, 255, 0.22);
			transform: scale(1.02);
		}

		.training-confirmation {
			padding: 8px 10px;
			background: linear-gradient(135deg, rgba(79, 140, 255, 0.06), rgba(123, 97, 255, 0.04), rgba(0, 194, 255, 0.04));
			border: 1px solid rgba(79, 140, 255, 0.12);
			border-radius: 10px;
			text-align: center;
			font-size: 0.68rem;
			font-weight: 600;
			color: #1e293b;
			min-height: 34px;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
		}

		.training-confirmation .confirmed-icon {
			display: inline-block;
			color: #22c55e;
			font-size: 0.95rem;
		}

		.training-confirmation .date-highlight {
			background: linear-gradient(135deg, #4f8cff, #7b61ff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			font-weight: 800;
		}

		.training-confirmation .time-highlight {
			background: linear-gradient(135deg, #00c2ff, #4f8cff);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			font-weight: 800;
		}

		@media (max-width: 768px) {
			.training-schedule-container {
				padding: 10px;
			}
			.training-schedule-inner {
				grid-template-columns: 1fr;
				gap: 10px;
			}
			.time-slots {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}

		@media (max-width: 480px) {
			.training-schedule-container {
				padding: 8px;
				border-radius: 14px;
			}
			.calendar-header h3,
			.time-header h3 {
				font-size: 0.78rem;
			}
			.time-slots {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
			.time-input-wrapper input[type="number"] {
				width: 32px;
				font-size: 0.78rem;
			}
			.time-input-wrapper .ampm-btn {
				padding: 2px 6px;
				font-size: 0.46rem;
			}
		}

		/* new design calendar */

		  .signup-section {
            position: relative;
            overflow: hidden;
            padding: 80px 28px;        
            border-radius: 36px;
            background: linear-gradient(180deg, #f8fbff 0%, #f4f6fb 55%, #eef2ff 100%);
            border: 1px solid rgba(15, 23, 42, 0.08);
            isolation: isolate;
            display: block;
            width: auto;
            max-width: 100%;
        }

        .signup-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 14% 24%, rgba(79, 140, 255, 0.14) 0%, transparent 22%),
                radial-gradient(circle at 88% 16%, rgba(123, 97, 255, 0.1) 0%, transparent 20%);
            pointer-events: none;
            z-index: 0;
        }

        .signup-section::after {
            content: '';
            position: absolute;
            right: -30px;
            top: 30px;
            width: 220px;
            height: 220px;
            background: rgba(79, 140, 255, 0.08);
            border-radius: 50%;
            filter: blur(24px);
            pointer-events: none;
            z-index: 0;
        }

        .signup-grid {
            background-image: linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
            background-size: 94px 94px;
        }

        .signup-shell {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1.05fr 0.95fr;
            gap: 48px;
            align-items: center;
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .signup-copy {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding-right: 10px;
            color: #111827;
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.9s ease, transform 0.9s ease;
        }

        .signup-section.is-visible .signup-copy {
            opacity: 1;
            transform: translateX(0);
        }

        .signup-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(79, 140, 255, 0.14);
            color: #2362ff;
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            font-weight: 700;
            margin-bottom: 18px;
            border: 1px solid rgba(79, 140, 255, 0.2);
            backdrop-filter: blur(8px);
            align-self: flex-start;
        }

        .signup-badge i {
            color: #2362ff;
        }

        .signup-pill-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 24px;
        }

        .signup-pill {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: #eef2ff;
            color: #1e40af;
            border-radius: 999px;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 700;
        }

        .signup-pill-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #2362ff;
            display: inline-block;
        }

        .signup-stats-row {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 8px;
        }

        .signup-stat {
            padding: 18px 22px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
            text-align: center;
        }

        .signup-stat-value {
            font-size: 26px;
            font-weight: 700;
            color: #111827;
            line-height: 1;
        }

        .signup-stat-label {
            margin-top: 8px;
            color: #64748b;
            font-size: 13px;
        }

        .signup-copy h2 {
            font-size: clamp(34px, 4vw, 52px);
            line-height: 1.05;
            font-weight: 700;
            margin: 0 0 18px;
            color: #111827;
        }

        .signup-gradient-text {
            background: linear-gradient(135deg, #2362ff 0%, #7b61ff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .signup-copy p {
            color: #475569;
            font-size: 17px;
            line-height: 1.75;
            margin: 0 0 32px;
            max-width: 720px;
        }

        .signup-feature-list {
            display: grid;
            gap: 16px;
        }

        .signup-feature-item {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px 22px;
            border-radius: 18px;
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
        }

        .signup-feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(79, 140, 255, 0.14);
            color: #2362ff;
            flex-shrink: 0;
        }

        .signup-feature-title {
            font-size: 15px;
            font-weight: 700;
            color: #111827;
            margin-bottom: 2px;
        }

        .signup-feature-subtitle {
            font-size: 13px;
            color: #64748b;
            line-height: 1.5;
        }

        .signup-form-wrap {
            position: relative;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.9s ease 0.15s, transform 0.9s ease 0.15s;
        }

        .signup-section.is-visible .signup-form-wrap {
            opacity: 1;
            transform: translateY(0);
        }

        .form-card {
            background: #ffffff;
            border: 1px solid rgba(15, 23, 42, 0.08);
            border-radius: 32px;
            padding: 38px;
            box-shadow: 0 28px 68px rgba(15, 23, 42, 0.12);
            position: relative;
            overflow: hidden;
        }

        .form-card::before {
            content: '';
            position: absolute;
            inset: -1px;
            border-radius: inherit;
            padding: 1px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.18), rgba(123, 97, 255, 0.12));
            pointer-events: none;
        }

        .form-card::after {
            content: '';
            position: absolute;
            right: -60px;
            top: -40px;
            width: 180px;
            height: 180px;
            background: rgba(79, 140, 255, 0.08);
            border-radius: 50%;
            filter: blur(28px);
            pointer-events: none;
        }

        .signup-card-header {
            text-align: center;
            margin-bottom: 24px;
        }

        .signup-card-header h3 {
            margin: 0 0 6px;
            color: #111827;
            font-size: 26px;
            font-weight: 700;
        }

        .signup-card-header p {
            margin: 0;
            color: #64748b;
            font-size: 15px;
        }

        .signup-form-grid {
            display: grid;
            gap: 8px;
        }

        .signup-form-grid {
            display: grid;
            gap: 8px;
        }

        .signup-form-grid.two-col {
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .signup-input-group {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
        }

        .signup-input-with-icon {
            position: relative;
            width: 100%;
        }

        .signup-input-group i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 14px;
            z-index: 1;
        }

        .signup-input-with-icon .signup-input {
            padding-left: 44px;
        }

        .signup-input {
            width: 100%;
            background: #f8fafc;
            border: 1px solid rgba(15, 23, 42, 0.12);
            color: #111827;
            border-radius: 18px;
            padding: 16px 18px 16px 44px;
            font-size: 15px;
            transition: all 0.25s ease;
            min-height: 52px;
        }

        .signup-input:focus {
            background: #ffffff;
            border-color: rgba(79, 140, 255, 0.5);
            box-shadow: 0 0 0 3px rgba(79, 140, 255, 0.12);
            outline: none;
        }

        .signup-input::placeholder {
            color: #94a3b8;
        }

        .signup-input select {
            appearance: none;
            background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%), linear-gradient(135deg, #94a3b8 50%, transparent 50%);
            background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 12px) calc(1em + 2px);
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }

        .signup-password-toggle {
            position: relative;
            right: 0;
            top: 0;
            margin-left: 0;
            background: #eef2ff;
            border: 1px solid rgba(79, 140, 255, 0.2);
            border-radius: 16px;
            color: #64748b;
            cursor: pointer;
            padding: 14px 16px;
            transition: all 0.25s ease;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 52px;
            min-width: 52px;
        }

        .signup-password-toggle:hover {
            color: #0f172a;
            background: #ffffff;
            box-shadow: 0 6px 18px rgba(79, 140, 255, 0.14);
        }

        .signup-password-actions {
            display: flex;
            justify-content: flex-end;
            margin-top: 8px;
            gap: 12px;
        }

        .signup-password-generate {
            border: none;
            background: transparent;
            color: #2362ff;
            font-weight: 700;
            cursor: pointer;
            padding: 0;
            font-size: 14px;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .signup-password-generate:hover {
            color: #1d4ed8;
            transform: translateY(-1px);
            text-decoration: underline;
        }

        .form-card {
            animation: formPulse 12s ease-in-out infinite;
        }

        @keyframes formPulse {
            0%, 100% {
                box-shadow: 0 28px 68px rgba(15, 23, 42, 0.12);
                transform: translateY(0);
            }
            50% {
                box-shadow: 0 36px 84px rgba(15, 23, 42, 0.16);
                transform: translateY(-1px);
            }
        }

        .signup-feature-item {
            transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
        }

        .signup-feature-item:hover {
            transform: translateY(-4px);
            background: #f8fbff;
            box-shadow: 0 18px 38px rgba(15, 23, 42, 0.08);
        }

        .signup-submit {
            will-change: transform, box-shadow;
        }

        .signup-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 16px 36px rgba(35, 98, 255, 0.18);
        }

        .signup-submit .btn-arrow {
            display: inline-block;
            margin-left: 8px;
            transition: transform 0.3s ease;
        }

        .signup-submit:hover .btn-arrow {
            transform: translateX(4px);
        }

        .signup-divider {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 22px 0 14px;
            color: #94a3b8;
            font-size: 13px;
        }

        .signup-divider::before,
        .signup-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: rgba(15, 23, 42, 0.08);
        }

        .signup-socs {
            display: flex;
            gap: 12px;
            margin-bottom: 18px;
        }

        .signup-soc {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 14px 16px;
            border-radius: 16px;
            border: 1px solid rgba(15, 23, 42, 0.08);
            background: #ffffff;
            font-size: 13px;
            font-weight: 700;
            color: #111827;
            cursor: pointer;
            transition: all 0.25s ease;
        }

        .signup-soc:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
        }

        .signup-soc svg {
            width: 12px;
            height: 12px;
        }

        .signup-terms {
            margin-top: 0;
            font-size: 13px;
            color: #64748b;
            line-height: 1.7;
        }

        .signup-terms a {
            color: #2362ff;
            text-decoration: none;
        }

        .signup-terms a:hover {
            text-decoration: underline;
        }

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

        .signup-feature-item,
        .signup-input-group,
        .signup-submit,
        .signup-card-header {
            animation: fadeInUp 0.8s ease both;
        }

        .signup-feature-item:nth-child(1) { animation-delay: 0.15s; }
        .signup-feature-item:nth-child(2) { animation-delay: 0.2s; }
        .signup-feature-item:nth-child(3) { animation-delay: 0.25s; }
        .signup-input-group { animation-delay: 0.3s; }
        .signup-submit { animation-delay: 0.35s; }

        .signup-input-group {
            position: relative;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 12px;
        }

        .signup-input-group i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            font-size: 14px;
            z-index: 1;
        }

        .strength-row {
            display: flex;
            gap: 8px;
            margin: 8px 0 0;
        }

        .strength-bar {
            flex: 1;
            height: 5px;
            border-radius: 999px;
            background: #e2e8f0;
            transition: all 0.3s ease;
        }

        .signup-strength-text {
            display: block;
            margin-top: 8px;
            font-size: 12px;
            color: #64748b;
            min-height: 12px;
        }

        .signup-submit {
            width: 100%;
            border: none;
            border-radius: 16px;
            padding: 14px 16px;
            color: #ffffff;
            font-weight: 700;
            cursor: pointer;
            background: linear-gradient(135deg, #2362ff, #7b61ff);
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-top: 6px;
        }

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

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

        .signup-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 14px 32px rgba(35, 98, 255, 0.2);
        }

        .signup-submit.is-success {
            background: linear-gradient(135deg, #16a34a, #22c55e);
        }

        .signup-submit:disabled {
            opacity: 0.75;
            cursor: not-allowed;
        }

        .signup-consent {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #64748b;
            font-size: 13px;
            line-height: 1.7;
            margin-top: 10px;
        }

        .signup-consent a {
            color: #2362ff;
            text-decoration: none;
        }

        .signup-consent a:hover {
            text-decoration: underline;
        }

        .signup-footnote {
            text-align: center;
            margin-top: 16px;
            color: #64748b;
            font-size: 13px;
        }

        .signup-footnote a {
            color: #2362ff;
            text-decoration: none;
        }

        .signup-message {
            display: block;
            min-height: 18px;
            margin-top: 10px;
            font-size: 13px;
            color: #16a34a;
        }

        .signup-section .signup-copy,
        .signup-section .signup-form-wrap {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .signup-section.is-visible .signup-copy {
            opacity: 1;
            transform: translateX(0);
        }

        .signup-section.is-visible .signup-form-wrap {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 900px) {
            .signup-shell {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .signup-section {
                padding: 56px 16px;
                margin: 50px 12px 0;
            }

            .form-card {
                padding: 14px;
            }
        }

        @media (max-width: 600px) {
            .signup-form-grid.two-col {
                grid-template-columns: 1fr;
            }

            .avatar-upload {
                width: 84px;
                height: 84px;
            }
        }
    /* ===== NEW SIGNUP SECTION ===== */
    .m-sec{
        position:relative;
        width:100%;
        min-height:100vh;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        padding:0;
        overflow:hidden;
        background:linear-gradient(135deg, #f8faff 0%, #f5f8ff 100%);
        margin:24px 0 0;
        border-radius:32px;
        border:1px solid rgba(37,99,235,0.08);
    }
    .m-grid{
        position:relative;
        z-index:5;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5rem;
        align-items:center;
        max-width:1280px;
        width:100%;
        padding:5rem 2rem;
    }
    .m-left{display:flex;flex-direction:column;gap:1.6rem}
    .m-label{display:inline-flex;align-items:center;gap:0.6rem;font-size:0.62rem;font-weight:600;color:#2563eb;text-transform:uppercase;letter-spacing:2px}
    .m-label-line{width:2rem;height:1.5px;background:#2563eb;border-radius:1px}
    .m-head h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:700;line-height:1.1;letter-spacing:-0.04em;color:#0c1a33}
    .m-head .ch{display:inline-block}
    .m-head .ch.ac{background:linear-gradient(90deg,#2563eb,#7c3aed);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
    .m-desc{font-size:0.95rem;color:#4a6080;line-height:1.75;max-width:380px}
    .m-pills{display:flex;gap:0.4rem;flex-wrap:wrap}
    .m-pill{display:inline-flex;align-items:center;gap:0.35rem;padding:0.32rem 0.7rem;border-radius:6px;background:rgba(255,255,255,0.7);border:1px solid rgba(0,60,140,0.06);font-size:0.68rem;color:#4a6080;backdrop-filter:blur(4px)}
    .m-pill-d{width:4px;height:4px;border-radius:50%;background:#2563eb}
    .m-stats{display:flex;gap:2rem}
    .m-stat-v{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;letter-spacing:-0.02em;color:#0c1a33}
    .m-stat-v span{color:#2563eb}
    .m-stat-l{font-size:0.6rem;color:#8fa3be;margin-top:0.05rem;letter-spacing:0.5px;text-transform:uppercase}
    .m-card-outer{display:flex;justify-content:center}
    .m-card{width:100%;max-width:620px;background:rgba(255,255,255,0.7);backdrop-filter:blur(24px) saturate(140%);border:1px solid rgba(0,60,140,0.06);border-radius:22px;padding:2.2rem 2rem 2.4rem;position:relative;overflow:hidden;box-shadow:0 24px 64px -16px rgba(0,60,140,0.08),0 4px 16px -4px rgba(0,60,140,0.03)}
    .m-card h2{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:600;margin-bottom:0.15rem;color:#0c1a33}
    .m-card-sub{font-size:0.8rem;color:#8fa3be;margin-bottom:1.6rem}
    .m-form-grid{display:grid;gap:0.9rem}
    .m-form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
    .m-f{position:relative;margin-bottom:0}
    .m-f.full{grid-column:1 / -1}
    .m-f-in{position:relative;padding:1.3rem 0.85rem 0.55rem 2rem;border-radius:13px;border:1.5px solid rgba(0,60,140,0.06);background:rgba(255,255,255,0.5);transition:all 0.3s ease;overflow:hidden}
    .m-f-in:focus-within{border-color:#2563eb;background:rgba(255,255,255,0.8);box-shadow:0 0 0 3px rgba(37,99,235,0.06)}
    .m-f-ic{position:absolute;left:0.7rem;top:50%;transform:translateY(-50%);color:#8fa3be;font-size:0.8rem;pointer-events:none}
    .m-f-label{position:absolute;left:2rem;top:50%;transform:translateY(-50%);font-size:0.85rem;color:#8fa3be;pointer-events:none;transition:all 0.3s}
    .m-f-in:focus-within .m-f-label,.m-f-in.has-val .m-f-label{top:0.65rem;transform:none;font-size:0.58rem;font-weight:600;color:#2563eb;letter-spacing:0.5px;text-transform:uppercase}
    .m-f input,.m-f select{width:100%;border:none;background:transparent;font-size:0.85rem;font-family:'Inter',sans-serif;color:#0c1a33;outline:none;position:relative;z-index:2}
    .m-f input::placeholder{color:transparent}
    .m-f select{appearance:none;cursor:pointer;padding-right:1rem}
    .m-f select option{color:#0c1a33;background:#fff}
    .m-select-arrow{position:absolute;right:0.85rem;top:50%;transform:translateY(-50%);color:#8fa3be;font-size:0.9rem;pointer-events:none;z-index:2}
    #fi9.m-f-in{padding-top:1.3rem;padding-bottom:0.55rem}
    #fi9 .m-f-label{top:0.65rem;transform:none;font-size:0.58rem;font-weight:600;color:#2563eb;letter-spacing:0.5px;text-transform:uppercase}
    #teamI{padding-top:0.1rem;min-height:0;line-height:1.2}
    .m-pass-actions{display:flex;justify-content:flex-end;margin-top:0.45rem}
    .m-gen-pass{border:none;background:linear-gradient(135deg,rgba(37,99,235,0.1),rgba(124,58,237,0.08));color:#2563eb;padding:0.45rem 0.7rem;border-radius:999px;font-size:0.62rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;transition:all 0.25s ease}
    .m-gen-pass:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(37,99,235,0.25)}
    .m-str{display:flex;gap:0.25rem;margin-top:0.3rem}
    .m-str-b{height:2.5px;flex:1;border-radius:2px;background:rgba(37,99,235,0.05)}
    .m-btn{width:100%;padding:0.8rem;margin-top:0.5rem;border:1.5px solid transparent;border-radius:0;background:transparent;background-image:linear-gradient(transparent,transparent),linear-gradient(135deg,#ff6b6b,#f43f79,#7dd3fc);background-origin:border-box;background-clip:padding-box,border-box;color:#ff6b6b;font-size:0.85rem;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);box-shadow:0 0 0 0 rgba(255,107,107,0.1)}
    .m-btn:hover{border-color:transparent;color:#fff;background:linear-gradient(135deg,#ff6b6b 0%,#f43f79 48%,#7dd3fc 100%);background-size:200% 200%;transform:translateY(-3px) scale(1.02);box-shadow:0 8px 30px rgba(79,140,255,0.4)}
    .m-btn:active{transform:scale(0.97) translateY(0)}
    .m-btn span{position:relative;z-index:1;transition:transform 0.3s}
    .m-btn:hover span{transform:translateX(4px)}
    .m-btn .btn-arrow{display:inline-block;opacity:0;transform:translateX(-8px);transition:all 0.3s ease;margin-left:0.3rem}
    .m-btn:hover .btn-arrow{opacity:1;transform:translateX(0)}
    .m-div{display:flex;align-items:center;gap:0.6rem;margin:1.2rem 0 0.9rem}
    .m-div::before,.m-div::after{content:'';flex:1;height:1px;background:rgba(0,60,140,0.06)}
    .m-div span{font-size:0.55rem;color:#8fa3be;text-transform:uppercase;letter-spacing:2px;font-weight:500}
    .m-socs{display:flex;gap:0.5rem}
    .m-soc{flex:1;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.6rem;border-radius:13px;border:1.5px solid rgba(0,60,140,0.06);background:rgba(255,255,255,0.7);font-size:0.75rem;font-weight:500;color:#4a6080;cursor:pointer;transition:all 0.3s ease}
    .m-soc:hover{border-color:rgba(0,60,140,0.14);transform:translateY(-2px)}
    .m-terms{font-size:0.58rem;color:#8fa3be;text-align:center;margin-top:1.2rem}
    .m-terms a{color:#2563eb;text-decoration:none}
    .m-terms a:hover{color:#7c3aed}
    @media(max-width:500px){.m-grid{padding:4rem 1rem}.m-card{padding:1.6rem 1.2rem}.m-socs{flex-direction:column}.m-stats{flex-wrap:wrap;gap:1rem}.m-form-row{grid-template-columns:1fr}}
   

		/* new design calendar */

		/* ============================================= */
        /* PRICING PAGE                                 */
        /* ============================================= */
        .pricing-section {
            padding: 140px 40px 100px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #f5f8fc 0%, #f0f5ff 25%, #ffffff 60%, #faf8ff 100%);
            border-top: 1px solid rgba(79, 140, 255, 0.05);
        }

        .pricing-section::before {
            content: '';
            position: absolute;
            top: -40%;
            left: -10%;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.15), transparent 65%);
            border-radius: 50%;
            filter: blur(40px);
            animation: float 12s ease-in-out infinite;
            z-index: 0;
        }

        .pricing-section::after {
            content: '';
            position: absolute;
            bottom: -25%;
            right: -5%;
            width: 680px;
            height: 600px;
            background: radial-gradient(circle, rgba(123, 97, 255, 0.12), transparent 70%);
            border-radius: 50%;
            filter: blur(40px);
            animation: float 15s ease-in-out infinite reverse;
            z-index: 0;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            25% {
                transform: translateY(-40px) rotate(1deg);
            }

            50% {
                transform: translateY(0px) rotate(0deg);
            }

            75% {
                transform: translateY(-30px) rotate(-1deg);
            }
        }

        @keyframes slideInCard {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.92);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0px);
            }
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }

            100% {
                background-position: 1000px 0;
            }
        }

        @keyframes gradientShift {

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

            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes glow {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(79, 140, 255, 0.4), 0 10px 40px rgba(79, 140, 255, 0.1);
            }

            50% {
                box-shadow: 0 0 40px rgba(79, 140, 255, 0.6), 0 15px 60px rgba(79, 140, 255, 0.2);
            }
        }

        .pricing-header {
            text-align: center;
            margin-bottom: 90px;
            position: relative;
            z-index: 2;
            max-width: 920px;
            margin-left: auto;
            margin-right: auto;
        }

        .pricing-header .section-title {
            font-size: clamp(42px, 5vw, 60px);
            font-weight: 900;
            letter-spacing: -1.2px;
            margin-bottom: 20px;
            line-height: 1.08;
            background: linear-gradient(135deg, var(--dark) 0%, var(--light-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .pricing-header .section-subtitle {
            font-size: 18px;
            color: var(--muted);
            max-width: 680px;
            margin: 0 auto;
            line-height: 1.8;
            animation: fadeInUp 0.8s ease-out 0.2s both;
            font-weight: 400;
        }

        /* UPDATED: Taller two-column pricing cards with a connected/attached look. */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            max-width: 1420px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* NEW: Two-plan pricing layout for Free + Custom. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            grid-template-columns: repeat(2, minmax(280px, 430px));
            justify-content: center;
            max-width: 980px;
            gap: 28px;
        }

        .pricing-grid .pricing-card {
            animation-name: slideInCard, floatCard;
            animation-duration: 0.7s, 3s;
            animation-timing-function: ease-out, ease-in-out;
            animation-fill-mode: both, forwards;
            animation-iteration-count: 1, infinite;
        }

        .pricing-grid .pricing-card:nth-child(1) {
            animation-delay: 0.15s, 0.15s;
        }

        .pricing-grid .pricing-card:nth-child(2) {
            animation-delay: 0.25s, 0.25s;
        }

        .pricing-grid .pricing-card:nth-child(3) {
            animation-delay: 0.35s, 0.35s;
        }

        .pricing-grid .pricing-card:nth-child(4) {
            animation-delay: 0.45s, 0.45s;
        }

        /* UPDATED: Increase card height and remove the visual gap between the two plans. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            gap: 0;
            align-items: stretch;
            max-width: 980px;
        }

        /* UPDATED: Square, fully attached pricing cards. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            gap: 0;
        }

        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card {
            min-height: 760px;
            height: 100%;
            border-radius: 0;
        }

        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:first-child,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:last-child {
            border-radius: 0;
        }

        /* UPDATED: Blue outline appears on hover and selection. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:hover,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            border: 2px solid #2563eb;
            box-shadow: 0 18px 45px rgba(37, 99, 235, 0.18);
        }

        /* UPDATED: Keep the selected card clearly highlighted while the cards remain attached. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            position: relative;
            z-index: 3;
            transform: translateY(-8px);
            border-radius: 0;
            border-color: #2563eb;
            box-shadow: 0 22px 55px rgba(37, 99, 235, 0.20);
        }

        /* UPDATED: Restore comfortable mobile corners when the cards stack. */
        @media (max-width: 700px) {
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
                gap: 18px;
            }

            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card,
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:first-child,
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:last-child {
                min-height: 700px;
                border-radius: 0;
            }

            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
                transform: translateY(-4px);
                border-radius: 0;
            }
        }


        /* UPDATED: Pricing cards must stay perfectly square in every state. */
        .pricing-grid .pricing-card,
        .pricing-grid .pricing-card:hover,
        .pricing-grid .pricing-card:focus,
        .pricing-grid .pricing-card:focus-visible,
        .pricing-grid .pricing-card.is-selected,
        .pricing-grid .pricing-card.is-selected:hover,
        .pricing-grid .pricing-card.is-selected:focus,
        .pricing-grid .pricing-card.is-selected:focus-visible {
            border-radius: 0 !important;
        }

        /* UPDATED: Blue selection/hover border follows the exact square card shape. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:hover,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            border: 2px solid #2563eb !important;
            border-radius: 0 !important;
        }

        /* UPDATED: Disable any rounded pseudo-element used for the selected outline. */
        .pricing-grid .pricing-card::before,
        .pricing-grid .pricing-card::after {
            border-radius: 0 !important;
        }


        /* UPDATED: Premium Netflix-inspired selected pricing state.
           The card stays square; only the selection treatment becomes richer. */
        .pricing-grid .pricing-card {
            position: relative;
            overflow: hidden;
            transition:
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease,
                background 0.25s ease;
        }

        .pricing-grid .pricing-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #38bdf8, #6366f1);
            opacity: 0;
            transform: scaleX(0.25);
            transform-origin: center;
            transition: opacity 0.25s ease, transform 0.3s ease;
            z-index: 5;
            pointer-events: none;
            border-radius: 0 !important;
        }

        .pricing-grid .pricing-card:hover {
            border-color: #60a5fa !important;
            box-shadow:
                0 12px 35px rgba(37, 99, 235, 0.14),
                inset 0 0 0 1px rgba(96, 165, 250, 0.15);
        }

        .pricing-grid .pricing-card:hover::before {
            opacity: 0.75;
            transform: scaleX(1);
        }

        .pricing-grid .pricing-card.is-selected {
            border: 2px solid #2563eb !important;
            border-radius: 0 !important;
            background:
                linear-gradient(180deg, rgba(37, 99, 235, 0.055), rgba(255,255,255,0.98) 30%);
            box-shadow:
                0 20px 50px rgba(37, 99, 235, 0.22),
                0 0 0 1px rgba(96, 165, 250, 0.18),
                inset 0 0 35px rgba(37, 99, 235, 0.035);
            transform: translateY(-6px);
        }

        .pricing-grid .pricing-card.is-selected::before {
            opacity: 1;
            transform: scaleX(1);
        }

        /* UPDATED: Premium selected-plan badge. */
        .pricing-grid .pricing-card.is-selected::after {
            content: '✓ SELECTED';
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 8;
            padding: 7px 11px;
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1;
            border-radius: 3px !important;
            box-shadow: 0 7px 18px rgba(37, 99, 235, 0.28);
        }

        /* UPDATED: Make the selected plan's main content feel elevated. */
        .pricing-grid .pricing-card.is-selected .pricing-card-title,
        .pricing-grid .pricing-card.is-selected h3 {
            color: #1d4ed8;
        }

        .pricing-grid .pricing-card.is-selected .btn-primary {
            box-shadow:
                0 10px 24px rgba(37, 99, 235, 0.25),
                0 0 0 2px rgba(96, 165, 250, 0.12);
        }

        /* UPDATED: Keep the Netflix-style treatment square on mobile too. */
        @media (max-width: 700px) {
            .pricing-grid .pricing-card.is-selected {
                transform: translateY(-4px);
                border-radius: 0 !important;
            }

            .pricing-grid .pricing-card.is-selected::after {
                top: 14px;
                right: 14px;
            }
        }

        .pricing-card {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(20px);
            border: 1.5px solid rgba(79, 140, 255, 0.12);
            border-radius: var(--radius-xl);
            padding: 44px 36px;
            position: relative;
            overflow: visible;
            transition: all 0.4s var(--ease-premium);
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .pricing-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-xl);
            background: radial-gradient(circle at 50% 0%, rgba(79, 140, 255, 0.08), transparent 60%);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .pricing-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-xl);
            padding: 1.5px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0), rgba(79, 140, 255, 0.4), rgba(79, 140, 255, 0));
            -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;
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

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

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

        .pricing-card .mouse-glow {
            position: absolute;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.35), transparent 65%);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
            filter: blur(20px);
        }

        .pricing-card:hover {
            transform: translateY(-14px) scale(1.02);
            box-shadow:
                0 0 0 1.5px rgba(79, 140, 255, 0.5),
                0 0 60px rgba(79, 140, 255, 0.25),
                0 25px 80px rgba(79, 140, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.4);
            background: rgba(255, 255, 255, 0.85);
        }

        .pricing-card:hover .mouse-glow {
            opacity: 1;
        }

        /* UPDATED: Zoho-style plan selection and a polished selected-card state. */
        .pricing-selection-indicator {
            position: absolute;
            top: 18px;
            right: 18px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 9px 5px 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            transition: all .3s var(--ease-premium);
            z-index: 4;
        }

        .pricing-selection-dot {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1.5px solid rgba(79, 140, 255, 0.28);
            background: #fff;
            color: transparent;
            transition: all .3s var(--ease-premium);
        }

        .pricing-selection-dot i { font-size: 10px; }

        .pricing-card:hover {
            transform: translateY(-8px);
            border-color: rgba(79, 140, 255, 0.35);
            box-shadow: 0 18px 50px rgba(79, 140, 255, 0.14), inset 0 1px 0 rgba(255,255,255,.9);
        }

        .pricing-card.selected {
            border: 2px solid rgba(79, 140, 255, 0.72);
            background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
            box-shadow: 0 0 0 4px rgba(79,140,255,.10), 0 24px 70px rgba(79,140,255,.20), inset 0 1px 0 rgba(255,255,255,.95);
        }

        .pricing-card.selected::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius-xl);
            padding: 2px;
            background: linear-gradient(135deg, rgba(79,140,255,.8), rgba(0,194,255,.45), rgba(123,97,255,.65));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: .85;
        }

        .pricing-card.selected .pricing-selection-indicator {
            color: var(--light-blue);
            background: linear-gradient(135deg, rgba(239,246,255,.98), rgba(255,255,255,.98));
            border-color: rgba(79,140,255,.22);
        }

        .pricing-card.selected .pricing-selection-dot {
            background: linear-gradient(135deg, #4f8cff, #00c2ff);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 5px 14px rgba(79,140,255,.30);
        }

        .pricing-card.selected .pricing-selection-label { color: #2563eb; }

        .pricing-card:not(.selected) .pricing-selection-label { opacity: .78; }

        .pricing-card:focus-visible {
            outline: 3px solid rgba(79,140,255,.25);
            outline-offset: 4px;
        }

        .pricing-card.featured {
            border: 2px solid rgba(79, 140, 255, 0.3);
            box-shadow:
                0 0 0 1px rgba(79, 140, 255, 0.25),
                0 0 50px rgba(79, 140, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 0 60px rgba(79, 140, 255, 0.08);
            transform: scale(1.05);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(79, 140, 255, 0.04));
        }

        .pricing-card.featured::before {
            opacity: 0.7;
        }

        .pricing-card.featured .pricing-cta {
            position: relative;
            overflow: hidden;
        }

        .pricing-card.featured .pricing-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.6s ease;
            pointer-events: none;
        }

        .pricing-card.featured .pricing-cta:hover::before {
            left: 100%;
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-16px);
            box-shadow:
                0 0 0 2px rgba(79, 140, 255, 0.4),
                0 0 80px rgba(79, 140, 255, 0.3),
                0 30px 100px rgba(79, 140, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            border-color: rgba(79, 140, 255, 0.5);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(79, 140, 255, 0.06));
        }

        .pricing-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 6px 12px;
            border-radius: 100px;
            background: rgba(79, 140, 255, 0.08);
            border: 1px solid rgba(79, 140, 255, 0.15);
            font-size: 12px;
            color: var(--light-blue);
            font-weight: 600;
            margin-bottom: 8px;
            width: fit-content;
        }

        .pricing-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .pricing-desc {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .pricing-price {
            display: flex;
            align-items: baseline;
            gap: 2px;
            margin-bottom: 8px;
        }

        .pricing-amount {
            font-family: 'Space Grotesk';
            font-size: 44px;
            font-weight: 800;
            color: var(--dark);
        }

        .pricing-period {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
        }

        .pricing-subtitle {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 28px;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        .pricing-features {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 32px;
            flex: 1;
        }

        .pricing-feature {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 12px;
            color: var(--dark);
            line-height: 1.5;
        }

        .pricing-feature i {
            color: var(--emerald);
            font-size: 13px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .pricing-cta {
            width: 100%;
            padding: 15px 24px;
            border-radius: var(--radius-md);
            background: var(--white);
            border: 1.5px solid rgba(15, 23, 42, 0.14);
            color: var(--dark);
            font-size: 13px;
            font-weight: 700;
            transition: all 0.35s var(--ease-premium);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
        }

        .pricing-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4), transparent 70%);
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .pricing-cta:hover::before {
            animation: shimmer 0.6s ease-in-out;
        }

        .pricing-cta::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .pricing-cta:active::after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            to {
                width: 400px;
                height: 400px;
                opacity: 0;
            }
        }

        .pricing-cta:hover {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            background-size: 200% 200%;
            animation: gradientShift 2s ease infinite;
            color: white;
            border-color: transparent;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 12px 40px rgba(79, 140, 255, 0.35), 0 0 30px rgba(79, 140, 255, 0.15);
        }

        .pricing-cta:active {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 0 8px 24px rgba(79, 140, 255, 0.25);
        }

        .pricing-card.featured .pricing-cta {
            background: var(--white);
            color: var(--dark);
            border: 1.5px solid rgba(15, 23, 42, 0.14);
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
        }

        .pricing-card.featured .pricing-cta:hover {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            background-size: 200% 200%;
            animation: gradientShift 2s ease infinite;
            color: white;
            border-color: transparent;
            box-shadow: 0 14px 48px rgba(79, 140, 255, 0.4), 0 0 40px rgba(79, 140, 255, 0.2);
            transform: translateY(-4px) scale(1.04);
        }
        @media (max-width: 1024px) {
            .pricing-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card.featured:hover {
                transform: translateY(-8px);
            }

            .pricing-testimonials-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .pricing-section::before,
            .pricing-section::after {
                width: 400px;
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .pricing-section {
                padding: 80px 20px 60px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card {
                padding: 32px 24px;
            }

            .pricing-card.featured {
                transform: scale(1);
                border: 1.5px solid rgba(15, 23, 42, 0.08);
                box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            }

            .pricing-testimonials-grid {
                grid-template-columns: 1fr;
            }

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

            .pricing-cta-banner {
                flex-direction: column;
                text-align: center;
            }

            .pricing-section::before,
            .pricing-section::after {
                width: 300px;
                height: 300px;
            }
        }

        .pricing-comparison-section,
        .pricing-testimonials,
        .pricing-faq-section,
        .pricing-cta-banner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px 80px;
        }

        .pricing-comparison-grid {
            display: grid;
            /* NEW: Feature + Free + Custom. */
            grid-template-columns: 1.6fr repeat(2, minmax(160px, 1fr));
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(79, 140, 255, 0.12);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 20px 70px rgba(79, 140, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            animation: slideInCard 0.8s ease-out 0.3s both;
        }

        .pricing-comparison-grid div {
            padding: 15px 14px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            font-size: 12px;
            color: var(--dark);
        }

        .pricing-comparison-grid div.compare-header {
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.08), rgba(99, 102, 241, 0.04));
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--light-blue);
        }

        .pricing-comparison-grid div.compare-feature {
            background: rgba(248, 250, 252, 0.9);
            font-weight: 600;
            color: var(--dark);
        }

        .pricing-comparison-grid div.compare-value {
            color: var(--muted);
        }

        .pricing-comparison-grid div:last-child {
            border-bottom: none;
        }

        .pricing-testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(280px, 1fr));
            gap: 18px;
            animation: fadeIn 0.8s ease-out 0.4s both;
        }

        .pricing-testimonial-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(79, 140, 255, 0.14);
            border-radius: var(--radius-lg);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.4s var(--ease-premium);
            animation: slideInCard 0.7s ease-out both;
        }

        .pricing-testimonial-card:nth-child(1) {
            animation-delay: 0.3s;
        }

        .pricing-testimonial-card:nth-child(2) {
            animation-delay: 0.4s;
        }

        .pricing-testimonial-card:nth-child(3) {
            animation-delay: 0.5s;
        }

        .pricing-testimonial-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 16px 48px rgba(79, 140, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.25);
            background: rgba(255, 255, 255, 0.8);
        }

        .testimonial-text {
            color: var(--muted);
            line-height: 1.8;
            flex: 1;
        }

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

        .testimonial-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(79, 140, 255, 0.12);
            color: var(--light-blue);
            font-weight: 700;
        }

        .pricing-faq-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(300px, 1fr));
            gap: 18px;
            animation: fadeIn 0.8s ease-out 0.5s both;
        }

        .pricing-faq-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(79, 140, 255, 0.14);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.4s var(--ease-premium);
            animation: slideInCard 0.7s ease-out both;
        }

        .pricing-faq-card:nth-child(1) {
            animation-delay: 0.4s;
        }

        .pricing-faq-card:nth-child(2) {
            animation-delay: 0.5s;
        }

        .pricing-faq-card:nth-child(3) {
            animation-delay: 0.6s;
        }

        .pricing-faq-card:nth-child(4) {
            animation-delay: 0.7s;
        }

        .pricing-faq-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(79, 140, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.25);
            background: rgba(255, 255, 255, 0.8);
        }

        .pricing-faq-card h4 {
            font-size: 18px;
            margin-bottom: 14px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }

        .pricing-faq-card h4::before {
            content: '>';
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            transform: scale(0.8);
        }

        .pricing-faq-card:hover h4::before {
            opacity: 1;
            transform: scale(1);
        }

        .pricing-faq-card p {
            color: var(--muted);
            line-height: 1.7;
            font-size: 12px;
        }

        .pricing-cta-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.1), rgba(99, 102, 241, 0.08));
            backdrop-filter: blur(20px);
            border-radius: var(--radius-lg);
            padding: 56px 48px;
            box-shadow: 0 24px 100px rgba(79, 140, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1.5px solid rgba(79, 140, 255, 0.15);
            position: relative;
            overflow: hidden;
            animation: slideInCard 0.8s ease-out 0.6s both;
        }

        .pricing-cta-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(79, 140, 255, 0.12), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(123, 97, 255, 0.08), transparent 50%);
            animation: shift 10s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes shift {

            0%,
            100% {
                transform: translateX(-60px) translateY(0px);
            }

            50% {
                transform: translateX(60px) translateY(-20px);
            }
        }

        .pricing-cta-banner>* {
            position: relative;
            z-index: 1;
        }

        .pricing-cta-banner h2 {
            margin: 0;
            font-size: clamp(28px, 3vw, 42px);
            line-height: 1.05;
            background: linear-gradient(135deg, var(--dark) 0%, var(--light-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pricing-cta-banner p {
            margin: 16px 0 0;
            color: var(--muted);
            max-width: 540px;
            line-height: 1.75;
        }

        #selectedPlanContainer {
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.04), rgba(99, 102, 241, 0.02));
            border: 1.5px solid rgba(79, 140, 255, 0.15);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 20px;
            animation: slideInCard 0.5s ease-out;
        }

        #selectedPlanInput {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(79, 140, 255, 0.2);
            font-weight: 600;
            color: var(--light-blue);
        }

        #selectedPlanInput::placeholder {
            color: var(--muted);
        }

        .form-hint {
            display: block;
            font-size: 12px;
            color: var(--light-blue);
            margin-top: 8px;
            font-style: italic;
            opacity: 0.9;
        }

        @media (max-width: 1440px) {
            .pricing-section {
                padding: 120px 40px 100px;
            }

            .pricing-grid {
                gap: 24px;
            }
        }
        @media (max-width: 1024px) {
            .pricing-section {
                padding: 100px 32px 80px;
            }

            .pricing-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 22px;
            }

            .pricing-card {
                padding: 36px 28px;
            }

            .pricing-card.featured {
                transform: scale(1.03);
            }

            .pricing-comparison-grid {
                /* NEW: Feature + Free + Custom on tablet. */
                grid-template-columns: 1.6fr repeat(2, minmax(120px, 1fr));
            }

            .pricing-testimonials-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }

            .pricing-faq-grid {
                grid-template-columns: 1fr 1fr;
                gap: 22px;
            }

            .pricing-cta-banner {
                flex-direction: column;
                text-align: center;
                gap: 18px;
            }

            .pricing-header {
                margin-bottom: 70px;
            }

            .pricing-header .section-title {
                font-size: clamp(36px, 4.5vw, 48px);
            }
        }

        @media (max-width: 768px) {
            .pricing-section {
                padding: 80px 20px 60px;
            }

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

            .pricing-header .section-title {
                font-size: clamp(28px, 4vw, 38px);
                margin-bottom: 8px;
            }

            .pricing-header .section-subtitle {
                font-size: 13px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-grid .pricing-card {
                animation-play-state: running !important;
            }

            .pricing-card {
                padding: 28px 20px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card:hover {
                transform: translateY(-10px) scale(1.01);
            }

            .pricing-card.featured:hover {
                transform: translateY(-12px) scale(1.02);
            }

            .pricing-name {
                font-size: 17px;
            }

            .pricing-amount {
                font-size: 36px;
            }

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

            .pricing-comparison-grid div {
                padding: 16px 12px;
            }

            .pricing-testimonials-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-faq-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-cta-banner {
                padding: 36px 20px;
            }

            .pricing-cta-banner h2 {
                font-size: clamp(20px, 5vw, 28px);
            }

            .pricing-cta-banner p {
                font-size: 12px;
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .pricing-section {
                padding: 60px 16px 50px;
            }

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

            .pricing-header .section-title {
                font-size: clamp(24px, 3.5vw, 32px);
                margin-bottom: 12px;
            }

            .pricing-header .section-subtitle {
                font-size: 12px;
                line-height: 1.6;
            }

            .pricing-card {
                padding: 24px 16px;
            }

            .pricing-price {
                margin-bottom: 12px;
            }

            .pricing-amount {
                font-size: 28px;
            }

            .pricing-period {
                font-size: 12px;
            }

            .pricing-features {
                gap: 10px;
                margin-bottom: 20px;
            }

            .pricing-feature {
                font-size: 13px;
                gap: 8px;
            }

            .pricing-feature i {
                font-size: 12px;
            }

            .pricing-cta {
                padding: 12px 16px;
                font-size: 12px;
            }

            .pricing-badge {
                font-size: 11px;
                padding: 6px 10px;
            }
        }

		




        /* ============================================= */
        /* PRICING PAGE                                 */
        /* ============================================= */
        .pricing-section {
            padding: 140px 40px 100px;
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #f5f8fc 0%, #f0f5ff 25%, #ffffff 60%, #faf8ff 100%);
            border-top: 1px solid rgba(79, 140, 255, 0.05);
        }

        .pricing-section::before {
            content: '';
            position: absolute;
            top: -40%;
            left: -10%;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.15), transparent 65%);
            border-radius: 50%;
            filter: blur(40px);
            animation: float 12s ease-in-out infinite;
            z-index: 0;
        }

        .pricing-section::after {
            content: '';
            position: absolute;
            bottom: -25%;
            right: -5%;
            width: 680px;
            height: 600px;
            background: radial-gradient(circle, rgba(123, 97, 255, 0.12), transparent 70%);
            border-radius: 50%;
            filter: blur(40px);
            animation: float 15s ease-in-out infinite reverse;
            z-index: 0;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0px) rotate(0deg);
            }

            25% {
                transform: translateY(-40px) rotate(1deg);
            }

            50% {
                transform: translateY(0px) rotate(0deg);
            }

            75% {
                transform: translateY(-30px) rotate(-1deg);
            }
        }

        @keyframes slideInCard {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.92);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0px);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
                filter: blur(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0px);
            }
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0px);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }

            100% {
                background-position: 1000px 0;
            }
        }

        @keyframes gradientShift {

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

            50% {
                background-position: 100% 50%;
            }
        }

        @keyframes glow {

            0%,
            100% {
                box-shadow: 0 0 20px rgba(79, 140, 255, 0.4), 0 10px 40px rgba(79, 140, 255, 0.1);
            }

            50% {
                box-shadow: 0 0 40px rgba(79, 140, 255, 0.6), 0 15px 60px rgba(79, 140, 255, 0.2);
            }
        }

        .pricing-header {
            text-align: center;
            margin-bottom: 90px;
            position: relative;
            z-index: 2;
            max-width: 920px;
            margin-left: auto;
            margin-right: auto;
        }

        .pricing-header .section-title {
            font-size: clamp(42px, 5vw, 60px);
            font-weight: 900;
            letter-spacing: -1.2px;
            margin-bottom: 20px;
            line-height: 1.08;
            background: linear-gradient(135deg, var(--dark) 0%, var(--light-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            animation: fadeInUp 0.8s ease-out 0.1s both;
        }

        .pricing-header .section-subtitle {
            font-size: 18px;
            color: var(--muted);
            max-width: 680px;
            margin: 0 auto;
            line-height: 1.8;
            animation: fadeInUp 0.8s ease-out 0.2s both;
            font-weight: 400;
        }

        /* UPDATED: Taller two-column pricing cards with a connected/attached look. */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px;
            max-width: 1420px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        /* NEW: Two-plan pricing layout for Free + Custom. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            grid-template-columns: repeat(2, minmax(280px, 430px));
            justify-content: center;
            max-width: 980px;
            gap: 28px;
        }

        .pricing-grid .pricing-card {
            animation-name: slideInCard, floatCard;
            animation-duration: 0.7s, 3s;
            animation-timing-function: ease-out, ease-in-out;
            animation-fill-mode: both, forwards;
            animation-iteration-count: 1, infinite;
        }

        .pricing-grid .pricing-card:nth-child(1) {
            animation-delay: 0.15s, 0.15s;
        }

        .pricing-grid .pricing-card:nth-child(2) {
            animation-delay: 0.25s, 0.25s;
        }

        .pricing-grid .pricing-card:nth-child(3) {
            animation-delay: 0.35s, 0.35s;
        }

        .pricing-grid .pricing-card:nth-child(4) {
            animation-delay: 0.45s, 0.45s;
        }

        /* UPDATED: Increase card height and remove the visual gap between the two plans. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            gap: 0;
            align-items: stretch;
            max-width: 980px;
        }

        /* UPDATED: Square, fully attached pricing cards. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
            gap: 0;
        }

        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card {
            min-height: 760px;
            height: 100%;
            border-radius: 0;
        }

        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:first-child,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:last-child {
            border-radius: 0;
        }

        /* UPDATED: Blue outline appears on hover and selection. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:hover,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            border: 2px solid #2563eb;
            box-shadow: 0 18px 45px rgba(37, 99, 235, 0.18);
        }

        /* UPDATED: Keep the selected card clearly highlighted while the cards remain attached. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            position: relative;
            z-index: 3;
            transform: translateY(-8px);
            border-radius: 0;
            border-color: #2563eb;
            box-shadow: 0 22px 55px rgba(37, 99, 235, 0.20);
        }

        /* UPDATED: Restore comfortable mobile corners when the cards stack. */
        @media (max-width: 700px) {
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) {
                gap: 18px;
            }

            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card,
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:first-child,
            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:last-child {
                min-height: 700px;
                border-radius: 0;
            }

            .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
                transform: translateY(-4px);
                border-radius: 0;
            }
        }


        /* UPDATED: Pricing cards must stay perfectly square in every state. */
        .pricing-grid .pricing-card,
        .pricing-grid .pricing-card:hover,
        .pricing-grid .pricing-card:focus,
        .pricing-grid .pricing-card:focus-visible,
        .pricing-grid .pricing-card.is-selected,
        .pricing-grid .pricing-card.is-selected:hover,
        .pricing-grid .pricing-card.is-selected:focus,
        .pricing-grid .pricing-card.is-selected:focus-visible {
            border-radius: 0 !important;
        }

        /* UPDATED: Blue selection/hover border follows the exact square card shape. */
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card:hover,
        .pricing-grid:has(.pricing-card:nth-child(2):last-child) .pricing-card.is-selected {
            border: 2px solid #2563eb !important;
            border-radius: 0 !important;
        }

        /* UPDATED: Disable any rounded pseudo-element used for the selected outline. */
        .pricing-grid .pricing-card::before,
        .pricing-grid .pricing-card::after {
            border-radius: 0 !important;
        }


        /* UPDATED: Premium Netflix-inspired selected pricing state.
           The card stays square; only the selection treatment becomes richer. */
        .pricing-grid .pricing-card {
            position: relative;
            overflow: hidden;
            transition:
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                transform 0.25s ease,
                background 0.25s ease;
        }

        .pricing-grid .pricing-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #2563eb, #38bdf8, #6366f1);
            opacity: 0;
            transform: scaleX(0.25);
            transform-origin: center;
            transition: opacity 0.25s ease, transform 0.3s ease;
            z-index: 5;
            pointer-events: none;
            border-radius: 0 !important;
        }

        .pricing-grid .pricing-card:hover {
            border-color: #60a5fa !important;
            box-shadow:
                0 12px 35px rgba(37, 99, 235, 0.14),
                inset 0 0 0 1px rgba(96, 165, 250, 0.15);
        }

        .pricing-grid .pricing-card:hover::before {
            opacity: 0.75;
            transform: scaleX(1);
        }

        .pricing-grid .pricing-card.is-selected {
            border: 2px solid #2563eb !important;
            border-radius: 0 !important;
            background:
                linear-gradient(180deg, rgba(37, 99, 235, 0.055), rgba(255,255,255,0.98) 30%);
            box-shadow:
                0 20px 50px rgba(37, 99, 235, 0.22),
                0 0 0 1px rgba(96, 165, 250, 0.18),
                inset 0 0 35px rgba(37, 99, 235, 0.035);
            transform: translateY(-6px);
        }

        .pricing-grid .pricing-card.is-selected::before {
            opacity: 1;
            transform: scaleX(1);
        }

        /* UPDATED: Premium selected-plan badge. */
        .pricing-grid .pricing-card.is-selected::after {
            content: '✓ SELECTED';
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 8;
            padding: 7px 11px;
            background: linear-gradient(135deg, #2563eb, #4f46e5);
            color: #fff;
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 0.08em;
            line-height: 1;
            border-radius: 3px !important;
            box-shadow: 0 7px 18px rgba(37, 99, 235, 0.28);
        }

        /* UPDATED: Make the selected plan's main content feel elevated. */
        .pricing-grid .pricing-card.is-selected .pricing-card-title,
        .pricing-grid .pricing-card.is-selected h3 {
            color: #1d4ed8;
        }

        .pricing-grid .pricing-card.is-selected .btn-primary {
            box-shadow:
                0 10px 24px rgba(37, 99, 235, 0.25),
                0 0 0 2px rgba(96, 165, 250, 0.12);
        }

        /* UPDATED: Keep the Netflix-style treatment square on mobile too. */
        @media (max-width: 700px) {
            .pricing-grid .pricing-card.is-selected {
                transform: translateY(-4px);
                border-radius: 0 !important;
            }

            .pricing-grid .pricing-card.is-selected::after {
                top: 14px;
                right: 14px;
            }
        }

        .pricing-card {
            background: rgba(255, 255, 255, 0.78);
            backdrop-filter: blur(20px);
            border: 1.5px solid rgba(79, 140, 255, 0.12);
            border-radius: var(--radius-xl);
            padding: 44px 36px;
            position: relative;
            overflow: visible;
            transition: all 0.4s var(--ease-premium);
            display: flex;
            flex-direction: column;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .pricing-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-xl);
            background: radial-gradient(circle at 50% 0%, rgba(79, 140, 255, 0.08), transparent 60%);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .pricing-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: var(--radius-xl);
            padding: 1.5px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0), rgba(79, 140, 255, 0.4), rgba(79, 140, 255, 0));
            -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;
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

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

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

        .pricing-card .mouse-glow {
            position: absolute;
            width: 220px;
            height: 220px;
            background: radial-gradient(circle, rgba(79, 140, 255, 0.35), transparent 65%);
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1;
            filter: blur(20px);
        }

        .pricing-card:hover {
            transform: translateY(-14px) scale(1.02);
            box-shadow:
                0 0 0 1.5px rgba(79, 140, 255, 0.5),
                0 0 60px rgba(79, 140, 255, 0.25),
                0 25px 80px rgba(79, 140, 255, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.4);
            background: rgba(255, 255, 255, 0.85);
        }

        .pricing-card:hover .mouse-glow {
            opacity: 1;
        }

        /* UPDATED: Zoho-style plan selection and a polished selected-card state. */
        .pricing-selection-indicator {
            position: absolute;
            top: 18px;
            right: 18px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 5px 9px 5px 5px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid rgba(15, 23, 42, 0.08);
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
            color: var(--muted);
            font-size: 10px;
            font-weight: 700;
            transition: all .3s var(--ease-premium);
            z-index: 4;
        }

        .pricing-selection-dot {
            width: 22px;
            height: 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1.5px solid rgba(79, 140, 255, 0.28);
            background: #fff;
            color: transparent;
            transition: all .3s var(--ease-premium);
        }

        .pricing-selection-dot i { font-size: 10px; }

        .pricing-card:hover {
            transform: translateY(-8px);
            border-color: rgba(79, 140, 255, 0.35);
            box-shadow: 0 18px 50px rgba(79, 140, 255, 0.14), inset 0 1px 0 rgba(255,255,255,.9);
        }

        .pricing-card.selected {
            border: 2px solid rgba(79, 140, 255, 0.72);
            background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(239,246,255,.92));
            box-shadow: 0 0 0 4px rgba(79,140,255,.10), 0 24px 70px rgba(79,140,255,.20), inset 0 1px 0 rgba(255,255,255,.95);
        }

        .pricing-card.selected::after {
            content: '';
            position: absolute;
            inset: -2px;
            border-radius: var(--radius-xl);
            padding: 2px;
            background: linear-gradient(135deg, rgba(79,140,255,.8), rgba(0,194,255,.45), rgba(123,97,255,.65));
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            pointer-events: none;
            opacity: .85;
        }

        .pricing-card.selected .pricing-selection-indicator {
            color: var(--light-blue);
            background: linear-gradient(135deg, rgba(239,246,255,.98), rgba(255,255,255,.98));
            border-color: rgba(79,140,255,.22);
        }

        .pricing-card.selected .pricing-selection-dot {
            background: linear-gradient(135deg, #4f8cff, #00c2ff);
            border-color: transparent;
            color: #fff;
            box-shadow: 0 5px 14px rgba(79,140,255,.30);
        }

        .pricing-card.selected .pricing-selection-label { color: #2563eb; }

        .pricing-card:not(.selected) .pricing-selection-label { opacity: .78; }

        .pricing-card:focus-visible {
            outline: 3px solid rgba(79,140,255,.25);
            outline-offset: 4px;
        }

        .pricing-card.featured {
            border: 2px solid rgba(79, 140, 255, 0.3);
            box-shadow:
                0 0 0 1px rgba(79, 140, 255, 0.25),
                0 0 50px rgba(79, 140, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.95),
                inset 0 0 60px rgba(79, 140, 255, 0.08);
            transform: scale(1.05);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(79, 140, 255, 0.04));
        }

        .pricing-card.featured::before {
            opacity: 0.7;
        }

        .pricing-card.featured .pricing-cta {
            position: relative;
            overflow: hidden;
        }

        .pricing-card.featured .pricing-cta::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: left 0.6s ease;
            pointer-events: none;
        }

        .pricing-card.featured .pricing-cta:hover::before {
            left: 100%;
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-16px);
            box-shadow:
                0 0 0 2px rgba(79, 140, 255, 0.4),
                0 0 80px rgba(79, 140, 255, 0.3),
                0 30px 100px rgba(79, 140, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.95);
            border-color: rgba(79, 140, 255, 0.5);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(79, 140, 255, 0.06));
        }

        .pricing-badge {
            display: inline-flex;
            align-items: center;
            gap: 2px;
            padding: 6px 12px;
            border-radius: 100px;
            background: rgba(79, 140, 255, 0.08);
            border: 1px solid rgba(79, 140, 255, 0.15);
            font-size: 12px;
            color: var(--light-blue);
            font-weight: 600;
            margin-bottom: 8px;
            width: fit-content;
        }

        .pricing-name {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--dark);
        }

        .pricing-desc {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 24px;
            line-height: 1.5;
        }

        .pricing-price {
            display: flex;
            align-items: baseline;
            gap: 2px;
            margin-bottom: 8px;
        }

        .pricing-amount {
            font-family: 'Space Grotesk';
            font-size: 44px;
            font-weight: 800;
            color: var(--dark);
        }

        .pricing-period {
            font-size: 12px;
            color: var(--muted);
            font-weight: 500;
        }

        .pricing-subtitle {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 28px;
            padding-bottom: 28px;
            border-bottom: 1px solid rgba(15, 23, 42, 0.06);
        }

        .pricing-features {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-bottom: 32px;
            flex: 1;
        }

        .pricing-feature {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            font-size: 12px;
            color: var(--dark);
            line-height: 1.5;
        }

        .pricing-feature i {
            color: var(--emerald);
            font-size: 13px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .pricing-cta {
            width: 100%;
            padding: 15px 24px;
            border-radius: var(--radius-md);
            background: var(--white);
            border: 1.5px solid rgba(15, 23, 42, 0.14);
            color: var(--dark);
            font-size: 13px;
            font-weight: 700;
            transition: all 0.35s var(--ease-premium);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
        }

        .pricing-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.4), transparent 70%);
            transform: rotate(45deg);
            opacity: 0;
            transition: opacity 0.4s;
            pointer-events: none;
        }

        .pricing-cta:hover::before {
            animation: shimmer 0.6s ease-in-out;
        }

        .pricing-cta::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        .pricing-cta:active::after {
            animation: ripple 0.6s ease-out;
        }

        @keyframes ripple {
            to {
                width: 400px;
                height: 400px;
                opacity: 0;
            }
        }

        .pricing-cta:hover {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            background-size: 200% 200%;
            animation: gradientShift 2s ease infinite;
            color: white;
            border-color: transparent;
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 12px 40px rgba(79, 140, 255, 0.35), 0 0 30px rgba(79, 140, 255, 0.15);
        }

        .pricing-cta:active {
            transform: translateY(-1px) scale(1.01);
            box-shadow: 0 8px 24px rgba(79, 140, 255, 0.25);
        }

        .pricing-card.featured .pricing-cta {
            background: var(--white);
            color: var(--dark);
            border: 1.5px solid rgba(15, 23, 42, 0.14);
            box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
        }

        .pricing-card.featured .pricing-cta:hover {
            background: linear-gradient(135deg, var(--light-blue), var(--electric-purple));
            background-size: 200% 200%;
            animation: gradientShift 2s ease infinite;
            color: white;
            border-color: transparent;
            box-shadow: 0 14px 48px rgba(79, 140, 255, 0.4), 0 0 40px rgba(79, 140, 255, 0.2);
            transform: translateY(-4px) scale(1.04);
        }
        @media (max-width: 1024px) {
            .pricing-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card.featured:hover {
                transform: translateY(-8px);
            }

            .pricing-testimonials-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .pricing-section::before,
            .pricing-section::after {
                width: 400px;
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .pricing-section {
                padding: 80px 20px 60px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-card {
                padding: 32px 24px;
            }

            .pricing-card.featured {
                transform: scale(1);
                border: 1.5px solid rgba(15, 23, 42, 0.08);
                box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
            }

            .pricing-testimonials-grid {
                grid-template-columns: 1fr;
            }

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

            .pricing-cta-banner {
                flex-direction: column;
                text-align: center;
            }

            .pricing-section::before,
            .pricing-section::after {
                width: 300px;
                height: 300px;
            }
        }

        .pricing-comparison-section,
        .pricing-testimonials,
        .pricing-faq-section,
        .pricing-cta-banner {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px 80px;
        }

        .pricing-comparison-grid {
            display: grid;
            /* NEW: Feature + Free + Custom. */
            grid-template-columns: 1.6fr repeat(2, minmax(160px, 1fr));
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(79, 140, 255, 0.12);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: 0 20px 70px rgba(79, 140, 255, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            animation: slideInCard 0.8s ease-out 0.3s both;
        }

        .pricing-comparison-grid div {
            padding: 15px 14px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            font-size: 12px;
            color: var(--dark);
        }

        .pricing-comparison-grid div.compare-header {
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.08), rgba(99, 102, 241, 0.04));
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: var(--light-blue);
        }

        .pricing-comparison-grid div.compare-feature {
            background: rgba(248, 250, 252, 0.9);
            font-weight: 600;
            color: var(--dark);
        }

        .pricing-comparison-grid div.compare-value {
            color: var(--muted);
        }

        .pricing-comparison-grid div:last-child {
            border-bottom: none;
        }

        .pricing-testimonials-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(280px, 1fr));
            gap: 18px;
            animation: fadeIn 0.8s ease-out 0.4s both;
        }

        .pricing-testimonial-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(79, 140, 255, 0.14);
            border-radius: var(--radius-lg);
            padding: 32px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.4s var(--ease-premium);
            animation: slideInCard 0.7s ease-out both;
        }

        .pricing-testimonial-card:nth-child(1) {
            animation-delay: 0.3s;
        }

        .pricing-testimonial-card:nth-child(2) {
            animation-delay: 0.4s;
        }

        .pricing-testimonial-card:nth-child(3) {
            animation-delay: 0.5s;
        }

        .pricing-testimonial-card:hover {
            transform: translateY(-8px) scale(1.01);
            box-shadow: 0 16px 48px rgba(79, 140, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.25);
            background: rgba(255, 255, 255, 0.8);
        }

        .testimonial-text {
            color: var(--muted);
            line-height: 1.8;
            flex: 1;
        }

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

        .testimonial-avatar {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: rgba(79, 140, 255, 0.12);
            color: var(--light-blue);
            font-weight: 700;
        }

        .pricing-faq-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(300px, 1fr));
            gap: 18px;
            animation: fadeIn 0.8s ease-out 0.5s both;
        }

        .pricing-faq-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(79, 140, 255, 0.14);
            border-radius: var(--radius-lg);
            padding: 32px;
            box-shadow: 0 8px 32px rgba(79, 140, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            transition: all 0.4s var(--ease-premium);
            animation: slideInCard 0.7s ease-out both;
        }

        .pricing-faq-card:nth-child(1) {
            animation-delay: 0.4s;
        }

        .pricing-faq-card:nth-child(2) {
            animation-delay: 0.5s;
        }

        .pricing-faq-card:nth-child(3) {
            animation-delay: 0.6s;
        }

        .pricing-faq-card:nth-child(4) {
            animation-delay: 0.7s;
        }

        .pricing-faq-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(79, 140, 255, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.9);
            border-color: rgba(79, 140, 255, 0.25);
            background: rgba(255, 255, 255, 0.8);
        }

        .pricing-faq-card h4 {
            font-size: 18px;
            margin-bottom: 14px;
            color: var(--dark);
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
        }

        .pricing-faq-card h4::before {
            content: '>';
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            transform: scale(0.8);
        }

        .pricing-faq-card:hover h4::before {
            opacity: 1;
            transform: scale(1);
        }

        .pricing-faq-card p {
            color: var(--muted);
            line-height: 1.7;
            font-size: 12px;
        }

        .pricing-cta-banner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.1), rgba(99, 102, 241, 0.08));
            backdrop-filter: blur(20px);
            border-radius: var(--radius-lg);
            padding: 56px 48px;
            box-shadow: 0 24px 100px rgba(79, 140, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
            border: 1.5px solid rgba(79, 140, 255, 0.15);
            position: relative;
            overflow: hidden;
            animation: slideInCard 0.8s ease-out 0.6s both;
        }

        .pricing-cta-banner::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 50%, rgba(79, 140, 255, 0.12), transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(123, 97, 255, 0.08), transparent 50%);
            animation: shift 10s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes shift {

            0%,
            100% {
                transform: translateX(-60px) translateY(0px);
            }

            50% {
                transform: translateX(60px) translateY(-20px);
            }
        }

        .pricing-cta-banner>* {
            position: relative;
            z-index: 1;
        }

        .pricing-cta-banner h2 {
            margin: 0;
            font-size: clamp(28px, 3vw, 42px);
            line-height: 1.05;
            background: linear-gradient(135deg, var(--dark) 0%, var(--light-blue) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .pricing-cta-banner p {
            margin: 16px 0 0;
            color: var(--muted);
            max-width: 540px;
            line-height: 1.75;
        }

        #selectedPlanContainer {
            background: linear-gradient(135deg, rgba(79, 140, 255, 0.04), rgba(99, 102, 241, 0.02));
            border: 1.5px solid rgba(79, 140, 255, 0.15);
            border-radius: var(--radius-md);
            padding: 16px;
            margin-bottom: 20px;
            animation: slideInCard 0.5s ease-out;
        }

        #selectedPlanInput {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(79, 140, 255, 0.2);
            font-weight: 600;
            color: var(--light-blue);
        }

        #selectedPlanInput::placeholder {
            color: var(--muted);
        }

        .form-hint {
            display: block;
            font-size: 12px;
            color: var(--light-blue);
            margin-top: 8px;
            font-style: italic;
            opacity: 0.9;
        }

        @media (max-width: 1440px) {
            .pricing-section {
                padding: 120px 40px 100px;
            }

            .pricing-grid {
                gap: 24px;
            }
        }
        @media (max-width: 1024px) {
            .pricing-section {
                padding: 100px 32px 80px;
            }

            .pricing-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 22px;
            }

            .pricing-card {
                padding: 36px 28px;
            }

            .pricing-card.featured {
                transform: scale(1.03);
            }

            .pricing-comparison-grid {
                /* NEW: Feature + Free + Custom on tablet. */
                grid-template-columns: 1.6fr repeat(2, minmax(120px, 1fr));
            }

            .pricing-testimonials-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }

            .pricing-faq-grid {
                grid-template-columns: 1fr 1fr;
                gap: 22px;
            }

            .pricing-cta-banner {
                flex-direction: column;
                text-align: center;
                gap: 18px;
            }

            .pricing-header {
                margin-bottom: 70px;
            }

            .pricing-header .section-title {
                font-size: clamp(36px, 4.5vw, 48px);
            }
        }

        @media (max-width: 768px) {
            .pricing-section {
                padding: 80px 20px 60px;
            }

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

            .pricing-header .section-title {
                font-size: clamp(28px, 4vw, 38px);
                margin-bottom: 8px;
            }

            .pricing-header .section-subtitle {
                font-size: 13px;
            }

            .pricing-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-grid .pricing-card {
                animation-play-state: running !important;
            }

            .pricing-card {
                padding: 28px 20px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .pricing-card:hover {
                transform: translateY(-10px) scale(1.01);
            }

            .pricing-card.featured:hover {
                transform: translateY(-12px) scale(1.02);
            }

            .pricing-name {
                font-size: 17px;
            }

            .pricing-amount {
                font-size: 36px;
            }

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

            .pricing-comparison-grid div {
                padding: 16px 12px;
            }

            .pricing-testimonials-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-faq-grid {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            .pricing-cta-banner {
                padding: 36px 20px;
            }

            .pricing-cta-banner h2 {
                font-size: clamp(20px, 5vw, 28px);
            }

            .pricing-cta-banner p {
                font-size: 12px;
                max-width: 100%;
            }
        }

        @media (max-width: 480px) {
            .pricing-section {
                padding: 60px 16px 50px;
            }

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

            .pricing-header .section-title {
                font-size: clamp(24px, 3.5vw, 32px);
                margin-bottom: 12px;
            }

            .pricing-header .section-subtitle {
                font-size: 12px;
                line-height: 1.6;
            }

            .pricing-card {
                padding: 24px 16px;
            }

            .pricing-price {
                margin-bottom: 12px;
            }

            .pricing-amount {
                font-size: 28px;
            }

            .pricing-period {
                font-size: 12px;
            }

            .pricing-features {
                gap: 10px;
                margin-bottom: 20px;
            }

            .pricing-feature {
                font-size: 13px;
                gap: 8px;
            }

            .pricing-feature i {
                font-size: 12px;
            }

            .pricing-cta {
                padding: 12px 16px;
                font-size: 12px;
            }

            .pricing-badge {
                font-size: 11px;
                padding: 6px 10px;
            }
        }

		/* =========================================================
           HOME HERO — STATIC ARTIFY360 AI VISUAL
           Replaces the dashboard mockup with a large image-like
           intelligence composition while keeping the existing
           Artify360 light/glass visual language.
        ========================================================= */
        .hero-ai-visual-wrap {
            position: relative;
            width: 100%;
            max-width: 1120px;
            margin: 6px auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1400px;
        }

        .hero-ai-visual {
            position: relative;
            width: min(100%, 1080px);
            height: clamp(390px, 43vw, 560px);
            overflow: hidden;
            border-radius: 34px;
            border: 1px solid rgba(79, 140, 255, 0.16);
            background:
                radial-gradient(circle at 50% 48%, rgba(123, 97, 255, 0.16), transparent 22%),
                radial-gradient(circle at 24% 30%, rgba(0, 194, 255, 0.10), transparent 28%),
                radial-gradient(circle at 78% 70%, rgba(79, 140, 255, 0.12), transparent 30%),
                linear-gradient(145deg, #ffffff 0%, #f8faff 48%, #f4f7ff 100%);
            box-shadow:
                0 36px 100px rgba(79, 140, 255, 0.13),
                inset 0 1px 0 rgba(255,255,255,0.95);
            isolation: isolate;
        }

        .hero-ai-visual::before {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 26px;
            border: 1px solid rgba(79, 140, 255, 0.08);
            pointer-events: none;
        }

        .hero-ai-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(90deg, transparent 0 49.8%, rgba(79,140,255,0.035) 50%, transparent 50.2%),
                linear-gradient(0deg, transparent 0 49.8%, rgba(123,97,255,0.035) 50%, transparent 50.2%);
            background-size: 72px 72px;
            mask-image: radial-gradient(circle at center, black 0 46%, transparent 78%);
            pointer-events: none;
            z-index: 0;
        }

        .ai-visual-aura {
            position: absolute;
            width: 62%;
            aspect-ratio: 1;
            left: 19%;
            top: 13%;
            border-radius: 50%;
            background:
                radial-gradient(circle, rgba(123,97,255,0.18), rgba(79,140,255,0.08) 34%, transparent 68%);
            filter: blur(30px);
            z-index: 0;
        }

        .ai-visual-grid {
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 12% 18%, rgba(0,194,255,0.28) 0 1px, transparent 2px),
                radial-gradient(circle at 84% 22%, rgba(123,97,255,0.22) 0 1px, transparent 2px),
                radial-gradient(circle at 17% 78%, rgba(79,140,255,0.24) 0 1px, transparent 2px),
                radial-gradient(circle at 90% 82%, rgba(0,194,255,0.22) 0 1px, transparent 2px);
            background-size: 180px 180px, 210px 210px, 190px 190px, 230px 230px;
            opacity: .8;
            pointer-events: none;
        }

        .ai-visual-topline {
            position: absolute;
            top: 24px;
            left: 28px;
            right: 28px;
            display: flex;
            align-items: center;
            gap: 9px;
            font: 700 11px/1 'Space Grotesk', sans-serif;
            letter-spacing: .14em;
            color: #334155;
            z-index: 8;
        }

        .ai-live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #10b981;
            box-shadow: 0 0 0 6px rgba(16,185,129,.10);
        }

        .ai-topline-status {
            margin-left: auto;
            font-size: 9px;
            letter-spacing: .12em;
            color: #94a3b8;
        }

        .ai-core {
            position: absolute;
            left: 50%;
            top: 50%;
            width: clamp(138px, 15vw, 188px);
            aspect-ratio: 1;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 7px;
            text-align: center;
            background:
                radial-gradient(circle at 35% 30%, #ffffff 0%, #f7f9ff 42%, #edf2ff 100%);
            border: 1px solid rgba(79,140,255,.18);
            box-shadow:
                0 26px 70px rgba(79,140,255,.17),
                inset 0 0 0 8px rgba(255,255,255,.56),
                0 0 80px rgba(123,97,255,.10);
            z-index: 6;
        }

        .ai-core-icon {
            width: 48px;
            height: 48px;
            display: grid;
            place-items: center;
            border-radius: 16px;
            color: #ffffff;
            font-size: 19px;
            background: linear-gradient(135deg, #4f8cff, #7b61ff, #00c2ff);
            box-shadow: 0 12px 30px rgba(79,140,255,.24);
        }

        .ai-core > span {
            font: 900 24px/1 'Poppins', sans-serif;
            letter-spacing: -.04em;
            background: linear-gradient(135deg, #4f8cff, #7b61ff, #00aee8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ai-core small {
            font: 700 7px/1.3 'Inter', sans-serif;
            letter-spacing: .16em;
            color: #94a3b8;
        }

        .ai-core-glow {
            position: absolute;
            inset: -20px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(79,140,255,.13), transparent 65%);
            filter: blur(12px);
            z-index: -1;
        }

        .ai-core-orbit {
            position: absolute;
            left: 50%;
            top: 50%;
            border-radius: 50%;
            border: 1px solid rgba(79,140,255,.15);
            transform: translate(-50%, -50%) rotate(-10deg);
            z-index: 2;
            pointer-events: none;
        }

        .orbit-one {
            width: 46%;
            height: 54%;
        }

        .orbit-two {
            width: 68%;
            height: 72%;
            border-color: rgba(123,97,255,.11);
            transform: translate(-50%, -50%) rotate(38deg);
        }

        .ai-node {
            position: absolute;
            width: clamp(148px, 17vw, 210px);
            min-height: 72px;
            padding: 13px 15px;
            display: grid;
            grid-template-columns: 34px 1fr;
            column-gap: 10px;
            align-items: center;
            border-radius: 18px;
            background: rgba(255,255,255,.78);
            border: 1px solid rgba(79,140,255,.12);
            box-shadow:
                0 18px 45px rgba(15,23,42,.07),
                inset 0 1px 0 rgba(255,255,255,.95);
            backdrop-filter: blur(18px);
            z-index: 7;
        }

        .ai-node i {
            grid-row: span 2;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            border-radius: 11px;
            color: #4f8cff;
            background: rgba(79,140,255,.08);
            font-size: 13px;
        }

        .ai-node strong {
            font: 800 12px/1.1 'Space Grotesk', sans-serif;
            color: #0f172a;
        }

        .ai-node span {
            font: 500 9px/1.35 'Inter', sans-serif;
            color: #64748b;
            margin-top: 2px;
        }

        .ai-node-1 { left: 7%; top: 25%; }
        .ai-node-2 { right: 7%; top: 25%; }
        .ai-node-3 { left: 9%; bottom: 19%; }
        .ai-node-4 { right: 9%; bottom: 19%; }

        .ai-node-2 i { color: #7b61ff; background: rgba(123,97,255,.09); }
        .ai-node-3 i { color: #00aee8; background: rgba(0,194,255,.09); }
        .ai-node-4 i { color: #10b981; background: rgba(16,185,129,.09); }

        .ai-connection {
            position: absolute;
            height: 1px;
            transform-origin: left center;
            background: linear-gradient(90deg, rgba(79,140,255,.04), rgba(79,140,255,.30), rgba(123,97,255,.08));
            z-index: 3;
            pointer-events: none;
        }

        .connection-1 { width: 25%; left: 25%; top: 36%; transform: rotate(8deg); }
        .connection-2 { width: 25%; right: 25%; top: 36%; transform: rotate(172deg); }
        .connection-3 { width: 24%; left: 26%; top: 66%; transform: rotate(-12deg); }
        .connection-4 { width: 24%; right: 26%; top: 66%; transform: rotate(192deg); }

        .ai-data-pill {
            position: absolute;
            padding: 8px 12px;
            border-radius: 999px;
            background: rgba(255,255,255,.72);
            border: 1px solid rgba(79,140,255,.11);
            box-shadow: 0 12px 28px rgba(15,23,42,.05);
            backdrop-filter: blur(12px);
            font: 700 9px/1 'Inter', sans-serif;
            color: #64748b;
            z-index: 8;
            white-space: nowrap;
        }

        .ai-data-pill i {
            margin-right: 5px;
            color: #4f8cff;
        }

        .pill-1 { left: 18%; top: 11%; }
        .pill-2 { right: 17%; top: 11%; }
        .pill-3 { left: 50%; bottom: 7%; transform: translateX(-50%); }

        .ai-bottom-copy {
            position: absolute;
            left: 50%;
            bottom: 24px;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            align-items: center;
            white-space: nowrap;
            z-index: 8;
            font: 500 10px/1 'Inter', sans-serif;
            color: #94a3b8;
        }

        .ai-bottom-copy strong {
            color: #475569;
            font-weight: 800;
        }

        @media (max-width: 760px) {
            .hero-ai-visual-wrap {
                margin-top: 10px;
            }

            .hero-ai-visual {
                height: 440px;
                border-radius: 26px;
            }

            .ai-visual-topline {
                left: 18px;
                right: 18px;
                top: 18px;
                font-size: 9px;
            }

            .ai-topline-status {
                font-size: 7px;
            }

            .ai-node {
                width: 138px;
                min-height: 62px;
                padding: 10px;
                grid-template-columns: 28px 1fr;
                column-gap: 7px;
            }

            .ai-node i {
                width: 28px;
                height: 28px;
                border-radius: 9px;
                font-size: 11px;
            }

            .ai-node strong {
                font-size: 10px;
            }

            .ai-node span {
                font-size: 8px;
            }

            .ai-node-1 { left: 3%; top: 23%; }
            .ai-node-2 { right: 3%; top: 23%; }
            .ai-node-3 { left: 3%; bottom: 17%; }
            .ai-node-4 { right: 3%; bottom: 17%; }

            .ai-data-pill {
                font-size: 7.5px;
                padding: 7px 9px;
            }

            .pill-1 { left: 5%; top: 12%; }
            .pill-2 { right: 5%; top: 12%; }
            .pill-3 { bottom: 7%; }

            .ai-bottom-copy {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .hero-ai-visual {
                height: 390px;
                border-radius: 22px;
            }

            .ai-node {
                width: 116px;
                min-height: 54px;
                padding: 8px;
            }

            .ai-node i {
                width: 24px;
                height: 24px;
                font-size: 9px;
            }

            .ai-node strong {
                font-size: 8.5px;
            }

            .ai-node span {
                font-size: 6.8px;
            }

            .ai-node-1,
            .ai-node-2 {
                top: 25%;
            }

            .ai-node-3,
            .ai-node-4 {
                bottom: 20%;
            }

            .ai-core {
                width: 122px;
            }

            .ai-core-icon {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }

            .ai-core > span {
                font-size: 20px;
            }

            .ai-core small {
                font-size: 6px;
            }

            .pill-1,
            .pill-2 {
                top: 13%;
            }
        }


        /* =========================================================
           PREMIUM ARTIFY360 AI HERO — CINEMATIC INTELLIGENCE SCENE
        ========================================================= */
        .hero-ai-visual-wrap {
            position: relative;
            width: 100%;
            max-width: 1140px;
            margin: 4px auto 0;
            display: flex;
            justify-content: center;
            align-items: center;
            perspective: 1600px;
        }

        .premium-ai-scene {
            width: min(100%, 1100px);
            height: clamp(420px, 44vw, 570px);
            position: relative;
            overflow: hidden;
            border-radius: 36px;
            isolation: isolate;
            background:
                radial-gradient(circle at 50% 50%, rgba(123,97,255,.12), transparent 22%),
                radial-gradient(circle at 20% 28%, rgba(0,194,255,.10), transparent 27%),
                radial-gradient(circle at 82% 72%, rgba(79,140,255,.10), transparent 30%),
                linear-gradient(145deg,#ffffff 0%,#fafbff 45%,#f4f7ff 100%);
            border: 1px solid rgba(79,140,255,.14);
            box-shadow:
                0 42px 110px rgba(54,88,180,.12),
                inset 0 1px 0 rgba(255,255,255,.96);
        }

        .premium-ai-scene::before {
            content:"";
            position:absolute;
            inset:10px;
            border:1px solid rgba(79,140,255,.06);
            border-radius:28px;
            pointer-events:none;
            z-index:10;
        }

        .premium-ai-scene::after {
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(115deg,transparent 20%,rgba(255,255,255,.46) 49%,transparent 64%);
            transform:translateX(-110%);
            /* animation: premiumLightSweep 8s ease-in-out infinite; */
            pointer-events:none;
            z-index:11;
        }

        @keyframes premiumLightSweep {
            0%,55% { transform:translateX(-110%); opacity:0; }
            63% { opacity:.55; }
            78%,100% { transform:translateX(110%); opacity:0; }
        }

        .premium-ai-atmosphere {
            position:absolute;
            width:72%;
            height:90%;
            left:14%;
            top:5%;
            border-radius:50%;
            background:
                radial-gradient(ellipse,rgba(123,97,255,.13),rgba(79,140,255,.06) 38%,transparent 69%);
            filter:blur(35px);
            z-index:0;
        }

        .premium-ai-grid {
            position:absolute;
            inset:0;
            opacity:.52;
            background-image:
                linear-gradient(rgba(79,140,255,.035) 1px,transparent 1px),
                linear-gradient(90deg,rgba(79,140,255,.035) 1px,transparent 1px);
            background-size:56px 56px;
            mask-image:radial-gradient(circle at center,black 0 42%,transparent 78%);
            z-index:0;
        }

        .premium-ai-particles {
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 9% 20%,rgba(0,194,255,.35) 0 1px,transparent 2px),
                radial-gradient(circle at 18% 72%,rgba(123,97,255,.25) 0 1px,transparent 2px),
                radial-gradient(circle at 34% 15%,rgba(79,140,255,.30) 0 1px,transparent 2px),
                radial-gradient(circle at 67% 17%,rgba(0,194,255,.25) 0 1px,transparent 2px),
                radial-gradient(circle at 89% 31%,rgba(123,97,255,.28) 0 1px,transparent 2px),
                radial-gradient(circle at 92% 75%,rgba(79,140,255,.32) 0 1px,transparent 2px),
                radial-gradient(circle at 76% 90%,rgba(0,194,255,.22) 0 1px,transparent 2px),
                radial-gradient(circle at 26% 91%,rgba(123,97,255,.20) 0 1px,transparent 2px);
            z-index:1;
        }

        .premium-ai-label {
            position:absolute;
            left:28px;
            top:25px;
            display:flex;
            align-items:center;
            gap:9px;
            font:800 10px/1 'Space Grotesk',sans-serif;
            letter-spacing:.16em;
            color:#475569;
            z-index:12;
        }

        .premium-ai-status {
            width:7px;
            height:7px;
            border-radius:50%;
            background:#10b981;
            box-shadow:0 0 0 6px rgba(16,185,129,.09);
        }

        .premium-ai-label-line {
            width:38px;
            height:1px;
            background:linear-gradient(90deg,rgba(79,140,255,.35),transparent);
            margin-left:4px;
        }

        .premium-ai-label::after {
            content:"";
            color:#94a3b8;
            font-size:8px;
            letter-spacing:.11em;
        }

        .ai-neural-field {
            position:absolute;
            width:70%;
            height:78%;
            left:15%;
            top:11%;
            z-index:2;
        }

        .neural-ring {
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);
            border:1px solid rgba(79,140,255,.14);
            border-radius:50%;
            pointer-events:none;
        }

        .neural-ring-1 {
            width:38%;
            height:54%;
            transform:translate(-50%,-50%) rotate(25deg);
        }

        .neural-ring-2 {
            width:58%;
            height:76%;
            border-color:rgba(123,97,255,.11);
            transform:translate(-50%,-50%) rotate(-35deg);
        }

        .neural-ring-3 {
            width:82%;
            height:96%;
            border-color:rgba(0,194,255,.08);
            transform:translate(-50%,-50%) rotate(62deg);
        }

        .neural-dot {
            position:absolute;
            width:5px;
            height:5px;
            border-radius:50%;
            background:#ffffff;
            border:1px solid rgba(79,140,255,.35);
            box-shadow:0 0 16px rgba(79,140,255,.35);
        }

        .nd-1{left:13%;top:28%}.nd-2{left:25%;top:12%}.nd-3{left:77%;top:25%}.nd-4{right:9%;top:54%}
        .nd-5{right:22%;bottom:12%}.nd-6{left:26%;bottom:13%}.nd-7{left:8%;bottom:44%}.nd-8{left:51%;top:3%}

        .neural-line {
            position:absolute;
            height:1px;
            transform-origin:left center;
            background:linear-gradient(90deg,transparent,rgba(79,140,255,.22),transparent);
            opacity:.8;
        }

        .nl-1{width:30%;left:14%;top:29%;transform:rotate(-23deg)}
        .nl-2{width:34%;left:25%;top:14%;transform:rotate(29deg)}
        .nl-3{width:28%;left:58%;top:27%;transform:rotate(-8deg)}
        .nl-4{width:31%;left:53%;top:72%;transform:rotate(-31deg)}
        .nl-5{width:29%;left:16%;top:64%;transform:rotate(18deg)}
        .nl-6{width:24%;left:60%;top:51%;transform:rotate(29deg)}

        .premium-ai-core {
            position:absolute;
            left:50%;
            top:50%;
            width:clamp(150px,16vw,198px);
            aspect-ratio:1;
            transform:translate(-50%,-50%);
            border-radius:50%;
            display:flex;
            flex-direction:column;
            align-items:center;
            justify-content:center;
            gap:7px;
            background:
                radial-gradient(circle at 32% 25%,#ffffff 0%,#f8faff 42%,#edf2ff 100%);
            border:1px solid rgba(79,140,255,.22);
            box-shadow:
                0 30px 85px rgba(79,140,255,.17),
                inset 0 0 0 9px rgba(255,255,255,.55),
                inset 0 0 45px rgba(123,97,255,.08);
            z-index:7;
        }

        .core-halo {
            position:absolute;
            inset:-35px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(79,140,255,.14),rgba(123,97,255,.06) 42%,transparent 68%);
            filter:blur(15px);
            z-index:-2;
        }

        .core-inner-ring {
            position:absolute;
            inset:14px;
            border-radius:50%;
            border:1px solid rgba(79,140,255,.12);
            border-top-color:rgba(123,97,255,.36);
            /* animation: coreSpin 14s linear infinite; */
        }

        @keyframes coreSpin {
            to { transform:rotate(360deg); }
        }

        .core-symbol {
            width:68px;
            height:68px;
            display:grid;
            place-items:center;
            position:relative;
            border-radius:50%;
            background:transparent;
            border:0;
            box-shadow:none;
            color:#4f8cff;
            font-size:30px;
            filter:drop-shadow(0 10px 22px rgba(79,140,255,.18));
        }

        /* No square logo tile — the AI mark floats cleanly inside the core */
        .core-symbol::before {
            content:"";
            position:absolute;
            inset:7px;
            border-radius:50%;
            background:radial-gradient(circle,rgba(255,255,255,.96) 0 34%,rgba(123,97,255,.08) 56%,transparent 74%);
            box-shadow:0 0 34px rgba(79,140,255,.16);
            z-index:-1;
        }

        .core-symbol i {
            display:block;
            background:linear-gradient(135deg,#4f8cff 5%,#7b61ff 52%,#00c2ff 100%);
            -webkit-background-clip:text;
            background-clip:text;
            -webkit-text-fill-color:transparent;
            filter:drop-shadow(0 7px 16px rgba(79,140,255,.22));
        }

        .core-ai {
            font:900 25px/1 'Poppins',sans-serif;
            letter-spacing:-.05em;
            background:linear-gradient(135deg,#4f8cff,#7b61ff,#00aee8);
            -webkit-background-clip:text;
            -webkit-text-fill-color:transparent;
        }

        .core-caption {
            font:700 7px/1 'Inter',sans-serif;
            letter-spacing:.16em;
            color:#94a3b8;
        }

        /* Definition-led intelligence layer, matching the home-page visual. */
        .premium-ai-core {
            width: clamp(210px, 22vw, 282px);
            gap: 5px;
            padding: 26px 22px 20px;
        }

        .core-symbol {
            width: 42px;
            height: 42px;
            font-size: 25px;
        }

        .core-symbol::before { inset: 2px; }

        .core-word {
            margin-top: 3px;
            font: 700 clamp(30px, 3.25vw, 42px)/.9 Georgia, 'Times New Roman', serif;
            letter-spacing: -.05em;
            color: #16235c;
        }

        .core-pronunciation {
            font: 500 clamp(13px, 1.25vw, 17px)/1 Georgia, 'Times New Roman', serif;
            color: #22306d;
        }

        .core-verb {
            font: italic 500 15px/1 Georgia, 'Times New Roman', serif;
            color: #27326e;
        }

        .core-definition-divider {
            width: 32px;
            height: 1px;
            margin: 3px 0 5px;
            background: #b9c5e6;
        }

        .core-definition {
            max-width: 215px;
            font: 500 clamp(11px, 1.15vw, 15px)/1.23 Georgia, 'Times New Roman', serif;
            color: #15225c;
        }

        .premium-ai-node {
            position:absolute;
            width:clamp(158px,17vw,215px);
            min-height:68px;
            padding:12px 14px;
            display:flex;
            align-items:center;
            gap:10px;
            border-radius:19px;
            background:rgba(255,255,255,.74);
            border:1px solid rgba(79,140,255,.12);
            box-shadow:
                0 20px 48px rgba(15,23,42,.065),
                inset 0 1px 0 rgba(255,255,255,.96);
            backdrop-filter:blur(18px);
            z-index:8;
        }

        .premium-node-icon {
            flex:0 0 34px;
            width:34px;
            height:34px;
            display:grid;
            place-items:center;
            border-radius:11px;
            color:#4f8cff;
            background:rgba(79,140,255,.08);
            font-size:12px;
        }

        .premium-node-copy {
            display:flex;
            flex-direction:column;
            gap:4px;
        }

        .premium-node-copy strong {
            font:800 12px/1 'Space Grotesk',sans-serif;
            color:#0f172a;
        }

        .premium-node-copy span {
            font:500 9px/1.3 'Inter',sans-serif;
            color:#64748b;
        }

        .node-insights{left:6%;top:25%}
        .node-automation{right:6%;top:25%}
        .node-prediction{left:8%;bottom:19%}
        .node-decisions{right:8%;bottom:19%}

        .node-automation .premium-node-icon{color:#7b61ff;background:rgba(123,97,255,.09)}
        .node-prediction .premium-node-icon{color:#00aee8;background:rgba(0,194,255,.09)}
        .node-decisions .premium-node-icon{color:#10b981;background:rgba(16,185,129,.09)}

        .premium-module {
            position:absolute;
            width: clamp(150px, 16vw, 194px);
            min-height: 60px;
            padding: 10px 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-radius: 16px;
            background:rgba(255,255,255,.64);
            border:1px solid rgba(79,140,255,.09);
            box-shadow:0 16px 34px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.95);
            backdrop-filter:blur(10px);
            z-index:6;
        }

        .premium-module i {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            flex: 0 0 32px;
            margin: 0;
            border-radius: 10px;
            color: #ffffff;
            background: linear-gradient(135deg, #118cff, #2868ed);
            font-size: 13px;
        }

        .premium-module span { display:flex; flex-direction:column; gap:3px; }
        .premium-module strong { font:800 11px/1 'Space Grotesk',sans-serif; color:#0f172a; }
        .premium-module small { font:500 8px/1.2 'Inter',sans-serif; color:#64748b; }

        .module-hr{left:15%;top:10%}
        .module-payroll{right:15%;top:8%}
        .module-finance{left:2%;top:50%}
        .module-crm{right:2%;top:50%}
        .module-sales{left:25%;bottom:7%}
        .module-inventory{right:25%;bottom:7%}
        .module-payroll i,.module-inventory i { background:linear-gradient(135deg,#7c24f4,#ad27ed) }
        .module-finance i { background:linear-gradient(135deg,#00b864,#00d08a) }
        .module-crm i { background:linear-gradient(135deg,#ff9b16,#ff651e) }
        .module-sales i { background:linear-gradient(135deg,#14b9ff,#2563eb) }

        .premium-data-chip {
            position:absolute;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.68);
            border:1px solid rgba(79,140,255,.10);
            box-shadow:0 12px 28px rgba(15,23,42,.04);
            backdrop-filter:blur(12px);
            color:#64748b;
            font:700 8px/1 'Inter',sans-serif;
            z-index:9;
        }

        .premium-data-chip,
        .premium-ai-footer { display:none; }

        .premium-data-chip i {
            color:#4f8cff;
            margin-right:5px;
        }

        .chip-one{left:17%;top:15%}
        .chip-two{right:17%;top:15%}

        .premium-ai-footer {
            position:absolute;
            left:50%;
            bottom:22px;
            transform:translateX(-50%);
            display:flex;
            align-items:center;
            gap:7px;
            white-space:nowrap;
            font:600 8px/1 'Inter',sans-serif;
            letter-spacing:.12em;
            color:#a0aec0;
            z-index:12;
        }

        .premium-ai-footer b {
            color:#475569;
            font-weight:800;
        }

        @media (max-width:760px) {
            .premium-ai-scene {
                height:430px;
                border-radius:27px;
            }

            .premium-ai-label {
                left:18px;
                top:18px;
                font-size:8px;
            }

            .premium-ai-label-line {
                width:20px;
            }

            .premium-ai-node {
                width:137px;
                min-height:58px;
                padding:9px 10px;
                gap:7px;
            }

            .premium-node-icon {
                width:28px;
                height:28px;
                flex-basis:28px;
                border-radius:9px;
                font-size:10px;
            }

            .premium-node-copy strong {font-size:9.5px}
            .premium-node-copy span {font-size:7.5px}

            .node-insights{left:2%;top:24%}
            .node-automation{right:2%;top:24%}
            .node-prediction{left:2%;bottom:18%}
            .node-decisions{right:2%;bottom:18%}

            .premium-module {
                font-size:6px;
                padding:6px 7px;
            }

            .module-hr{left:19%;top:10%}
            .module-payroll{right:19%;top:10%}
            .module-finance{left:1%;top:52%}
            .module-crm{right:1%;top:52%}
            .module-sales{left:19%;bottom:10%}
            .module-inventory{right:19%;bottom:10%}

            .chip-one{left:8%;top:16%}
            .chip-two{right:8%;top:16%}

            .premium-data-chip {
                font-size:6.5px;
                padding:7px 8px;
            }

            .premium-ai-footer {
                display:none;
            }
        }

        @media (max-width:480px) {
            .premium-ai-scene {
                height:390px;
                border-radius:23px;
            }

            .premium-ai-node {
                width:112px;
                min-height:50px;
                padding:7px;
            }

            .premium-node-icon {
                width:23px;
                height:23px;
                flex-basis:23px;
                font-size:8px;
            }

            .premium-node-copy strong {font-size:8px}
            .premium-node-copy span {font-size:6.3px}

            .node-insights,.node-automation{top:27%}
            .node-prediction,.node-decisions{bottom:21%}

            .premium-ai-core {
                width:118px;
            }

            .core-symbol {
                width:52px;
                height:52px;
                border-radius:50%;
                font-size:23px;
            }

            .core-ai {font-size:19px}
            .core-caption {font-size:5.5px}

            .premium-module {
                font-size:5.2px;
                padding:5px 6px;
            }

            .module-hr,.module-sales{left:16%}
            .module-payroll,.module-inventory{right:16%}

			 .chip-one,.chip-two {
                font-size:5.8px;
                padding:6px 7px;
            }
        }

           /*css inside script moved to here for new AI(not working inside script)*/
			
		   /* =========================================================
				HERO AI VISUAL — PREMIUM OUTER HOVER GLOW + RESPONSIVE
				========================================================= */
				.hero-ai-visual-wrap {
					position: relative;
					width: min(100%, 1180px);
					max-width: 1180px;
					margin: 4px auto 0;
					padding: 26px;
					display: flex;
					justify-content: center;
					align-items: center;
					perspective: 1600px;
					isolation: isolate;
				}

				/* Large gradient aura stays OUTSIDE the visual */
				.hero-ai-visual-wrap::before {
					content: "";
					position: absolute;
					inset: 2px;
					border-radius: 52px;
					background:
						radial-gradient(circle at 20% 25%, rgba(0,194,255,.34), transparent 30%),
						radial-gradient(circle at 80% 25%, rgba(123,97,255,.34), transparent 31%),
						radial-gradient(circle at 50% 88%, rgba(79,140,255,.30), transparent 38%);
					filter: blur(34px);
					opacity: 0;
					transform: scale(.94);
					transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .55s ease;
					z-index: -2;
					pointer-events: none;
				}

				.hero-ai-visual-wrap::after {
					content: "";
					position: absolute;
					inset: 8px;
					border-radius: 48px;
					background: linear-gradient(135deg, rgba(79,140,255,.22), rgba(123,97,255,.18), rgba(0,194,255,.18));
					filter: blur(22px);
					opacity: 0;
					transform: scale(.97);
					transition: opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1);
					z-index: -1;
					pointer-events: none;
				}

				.hero-ai-visual-wrap:hover::before {
					opacity: 1;
					transform: scale(1.025);
					filter: blur(38px);
				}

				.hero-ai-visual-wrap:hover::after {
					opacity: .9;
					transform: scale(1.01);
				}

				.hero-ai-visual.premium-ai-scene {
					position: relative;
					z-index: 2;
					width: 100%;
					max-width: 1100px;
					height: clamp(400px, 43vw, 570px);
					min-height: 400px;
					margin: 0;
					overflow: hidden;
					border-radius: 36px;
					transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease, border-color .55s ease;
				}

				.hero-ai-visual-wrap:hover .hero-ai-visual.premium-ai-scene {
					transform: translateY(-4px) scale(1.008);
					border-color: rgba(79,140,255,.30);
					box-shadow:
						0 48px 120px rgba(54,88,180,.17),
						0 0 0 1px rgba(123,97,255,.08),
						inset 0 1px 0 rgba(255,255,255,.98);
				}

				/* Keep the entire hero comfortably inside the viewport */
				#page-home .hero {
					width: 100%;
					min-height: auto;
					padding: 76px 28px 52px;
					overflow: hidden;
				}

				#page-home .hero-content {
					width: 100%;
					max-width: 1180px;
					gap: 34px;
				}

				#page-home .hero-left {
					width: min(100%, 900px);
					max-width: 900px;
				}

				#page-home .hero-title {
					width: 100%;
					max-width: 900px;
				}

				#page-home .hero-subtitle {
					width: min(100%, 900px);
				}

				@media (max-width: 1024px) {
					#page-home .hero {
						padding: 72px 20px 44px;
					}

					#page-home .hero-content {
						gap: 28px;
					}

					.hero-ai-visual-wrap {
						width: 100%;
						max-width: 960px;
						padding: 20px;
					}

					.hero-ai-visual.premium-ai-scene {
						width: 100%;
						height: clamp(390px, 53vw, 500px);
						min-height: 390px;
						border-radius: 30px;
					}
				}

				@media (max-width: 760px) {
					#page-home .hero {
						padding: 70px 12px 34px;
					}

					#page-home .hero-content {
						gap: 20px;
					}

					#page-home .hero-left {
						margin-top: 12px !important;
					}

					#page-home .hero-title {
						font-size: clamp(27px, 7.8vw, 38px);
						line-height: 1.08;
						letter-spacing: -.035em;
						padding: 0 4px;
					}

					#page-home .hero-subtitle {
						font-size: .78rem;
						line-height: 1.65;
						padding: 0 8px;
					}

					.hero-ai-visual-wrap {
						width: 100%;
						padding: 14px;
						margin-top: 0;
					}

					.hero-ai-visual-wrap::before {
						border-radius: 38px;
					}

					.hero-ai-visual-wrap::after {
						border-radius: 34px;
					}

					.hero-ai-visual.premium-ai-scene {
						height: 430px;
						min-height: 430px;
						width: 100%;
						border-radius: 27px;
					}
				}

				@media (max-width: 480px) {
					#page-home .hero {
						padding: 64px 8px 28px;
					}

					#page-home .hero-title {
						font-size: clamp(25px, 8vw, 32px);
					}

					#page-home .hero-subtitle {
						font-size: .74rem;
						line-height: 1.6;
						padding: 0 6px;
					}

					.hero-ai-visual-wrap {
						padding: 10px;
					}

					.hero-ai-visual.premium-ai-scene {
						height: 390px;
						min-height: 390px;
						border-radius: 23px;
					}

					/* Slightly pull the outer aura inward on very small screens */
					.hero-ai-visual-wrap::before {
						inset: 0;
						filter: blur(28px);
					}

					.hero-ai-visual-wrap:hover::before {
						filter: blur(30px);
					}
				}

				@media (hover: none), (pointer: coarse) {
					/* Touch devices get a subtle permanent aura instead of hover-only feedback */
					.hero-ai-visual-wrap::before {
						opacity: .38;
						transform: scale(.98);
					}

					.hero-ai-visual-wrap::after {
						opacity: .22;
					}
				}
	

				/* =========================================================
				PREMIUM AI DASHBOARD — BEAUTIFUL MODULE LOGOS
				========================================================= */
				.hero-ai-visual.premium-ai-scene .premium-module {
					display:flex;
					align-items:center;
					gap:7px;
					min-height:34px;
					padding:5px 11px 5px 6px;
					border-radius:14px;
					background:rgba(255,255,255,.82);
					border:1px solid rgba(148,163,184,.18);
					box-shadow:
						0 12px 28px rgba(15,23,42,.075),
						inset 0 1px 0 rgba(255,255,255,.98);
					backdrop-filter:blur(16px) saturate(150%);
					-webkit-backdrop-filter:blur(16px) saturate(150%);
					color:#475569;
					letter-spacing:.075em;
					transition:transform .4s cubic-bezier(.22,1,.36,1),
							box-shadow .4s ease,
							border-color .4s ease,
							background .4s ease;
				}

				.hero-ai-visual.premium-ai-scene .premium-module span {
					display:flex;
					align-items:center;
					gap:6px;
					white-space:nowrap;
				}

				.hero-ai-visual.premium-ai-scene .premium-module i {
					width:25px;
					height:25px;
					flex:0 0 25px;
					display:grid;
					place-items:center;
					margin:0;
					border-radius:8px;
					font-size:10px;
					color:#fff;
					background:linear-gradient(135deg,#4f8cff,#7b61ff);
					box-shadow:0 5px 14px rgba(79,140,255,.24);
				}

				/* Distinct premium identity for each business module */
				.hero-ai-visual.premium-ai-scene .module-hr i {
					background:linear-gradient(135deg,#4f8cff,#22c1ff);
					box-shadow:0 5px 14px rgba(34,193,255,.25);
				}
				.hero-ai-visual.premium-ai-scene .module-payroll i {
					background:linear-gradient(135deg,#7b61ff,#a855f7);
					box-shadow:0 5px 14px rgba(123,97,255,.25);
				}
				.hero-ai-visual.premium-ai-scene .module-finance i {
					background:linear-gradient(135deg,#10b981,#22c55e);
					box-shadow:0 5px 14px rgba(16,185,129,.25);
				}
				.hero-ai-visual.premium-ai-scene .module-crm i {
					background:linear-gradient(135deg,#f59e0b,#fb7185);
					box-shadow:0 5px 14px rgba(245,158,11,.23);
				}
				.hero-ai-visual.premium-ai-scene .module-sales i {
					background:linear-gradient(135deg,#06b6d4,#3b82f6);
					box-shadow:0 5px 14px rgba(6,182,212,.23);
				}
				.hero-ai-visual.premium-ai-scene .module-inventory i {
					background:linear-gradient(135deg,#6366f1,#8b5cf6);
					box-shadow:0 5px 14px rgba(99,102,241,.23);
				}

				.hero-ai-visual.premium-ai-scene .premium-module:hover {
					transform:translateY(-4px) scale(1.035);
					background:rgba(255,255,255,.96);
					border-color:rgba(79,140,255,.25);
					box-shadow:
						0 18px 38px rgba(15,23,42,.11),
						0 0 24px rgba(79,140,255,.08),
						inset 0 1px 0 rgba(255,255,255,1);
				}

				@media (max-width:760px) {
					.hero-ai-visual.premium-ai-scene .premium-module {
						min-height:30px;
						padding:4px 8px 4px 5px;
						gap:5px;
						border-radius:11px;
						font-size:6.5px;
					}
					.hero-ai-visual.premium-ai-scene .premium-module i {
						width:22px;
						height:22px;
						flex-basis:22px;
						border-radius:7px;
						font-size:8px;
					}
				}

				@media (max-width:480px) {
					.hero-ai-visual.premium-ai-scene .premium-module {
						min-height:27px;
						padding:3px 6px 3px 4px;
						gap:4px;
						border-radius:9px;
						font-size:5.2px;
					}
					.hero-ai-visual.premium-ai-scene .premium-module i {
						width:19px;
						height:19px;
						flex-basis:19px;
						border-radius:6px;
						font-size:7px;
					}
				}


                /* Keep the definition and module cards legible in the reference layout. */
                .hero-ai-visual.premium-ai-scene .premium-module { width:clamp(150px,16vw,194px); min-height:60px; padding:10px 12px; gap:10px; }
                .hero-ai-visual.premium-ai-scene .premium-module span { align-items:flex-start; flex-direction:column; gap:3px; white-space:normal; }
                .hero-ai-visual.premium-ai-scene .premium-module i { width:32px; height:32px; flex-basis:32px; border-radius:10px; font-size:13px; }
                .hero-ai-visual.premium-ai-scene .premium-module strong { font-size:11px; }
                .hero-ai-visual.premium-ai-scene .premium-module small { font-size:8px; }
                @media (max-width:760px) {
                    .premium-ai-core { width:190px; padding:19px 15px 14px; }
                    .core-symbol { width:34px; height:34px; font-size:20px; }
                    .core-word { font-size:29px; } .core-pronunciation { font-size:12px; } .core-verb { font-size:12px; }
                    .core-definition { font-size:10px; max-width:160px; }
                    .hero-ai-visual.premium-ai-scene .premium-module { width:126px; min-height:50px; padding:7px 8px; gap:7px; }
                    .hero-ai-visual.premium-ai-scene .premium-module i { width:26px; height:26px; flex-basis:26px; font-size:10px; }
                    .hero-ai-visual.premium-ai-scene .premium-module strong { font-size:9px; }
                    .hero-ai-visual.premium-ai-scene .premium-module small { font-size:6.7px; }
                }
                @media (max-width:480px) {
                    .premium-ai-core { width:152px; padding:12px 10px 10px; gap:3px; }
                    .core-symbol { width:27px; height:27px; font-size:16px; }
                    .core-word { font-size:23px; } .core-pronunciation { font-size:10px; } .core-verb { font-size:10px; }
                    .core-definition-divider { margin:1px 0 3px; } .core-definition { font-size:8px; max-width:130px; }
                    .hero-ai-visual.premium-ai-scene .premium-module { width:104px; min-height:42px; padding:5px 6px; gap:5px; }
                    .hero-ai-visual.premium-ai-scene .premium-module i { width:21px; height:21px; flex-basis:21px; font-size:8px; }
                    .hero-ai-visual.premium-ai-scene .premium-module strong { font-size:7.4px; }
                    .hero-ai-visual.premium-ai-scene .premium-module small { font-size:5.5px; }
                }

                /* Prevent the intelligence visual from inheriting a narrow parent on phones. */
                @media (max-width:760px) {
                    #page-home .hero-right.hero-ai-visual-wrap {
                        width: calc(100vw - 24px);
                        max-width: calc(100vw - 24px);
                        min-width: 0;
                        padding: 8px;
                    }

                    #page-home .hero-ai-visual.premium-ai-scene {
                        width: 100%;
                        max-width: none;
                        min-width: 0;
                    }
                }

                @media (max-width:480px) {
                    #page-home .hero-right.hero-ai-visual-wrap {
                        width: calc(100vw - 16px);
                        max-width: calc(100vw - 16px);
                        padding: 6px;
                    }
                }

						/* FINAL HERO LOGO CLEANUP — remove all square AI logo treatments */
						.hero-ai-visual .core-symbol,
						.hero-ai-visual .core-symbol:hover {
							border-radius:50% !important;
							background:transparent !important;
							border:0 !important;
							box-shadow:none !important;
						}

						.hero-ai-visual .premium-node-icon {
							border-radius:50% !important;
						}

						@media (max-width:760px) {
							.hero-ai-visual .core-symbol {
								width:52px !important;
								height:52px !important;
								font-size:23px !important;
							}
						}

						@media (max-width:480px) {
							.hero-ai-visual .core-symbol {
								width:48px !important;
								height:48px !important;
								font-size:21px !important;
							}
						}



						/* Premium floating AI mark — no square / tile */
						.core-symbol {
							width: 78px;
							height: 78px;
							border-radius: 50%;
							background: transparent !important;
							border: 0 !important;
							box-shadow: none !important;
							filter: drop-shadow(0 12px 24px rgba(79,140,255,.16));
							overflow: visible;
						}

						.core-symbol::before {
							inset: 4px !important;
							border-radius: 50%;
							background: radial-gradient(circle, rgba(255,255,255,.98) 0 30%, rgba(123,97,255,.07) 48%, transparent 72%) !important;
							box-shadow: 0 0 38px rgba(79,140,255,.13) !important;
						}

						.artify-ai-mark {
							width: 100%;
							height: 100%;
							display: block;
							overflow: visible;
						}

						.ai-mark-glow {
							fill: url(#artifyAiGradient);
							opacity: .16;
							filter: blur(7px);
						}

						.ai-mark-main {
							fill: url(#artifyAiGradient);
							filter: drop-shadow(0 5px 10px rgba(79,140,255,.22));
						}

						.ai-mark-spark {
							fill: url(#artifyAiGlow);
							filter: drop-shadow(0 3px 8px rgba(79,140,255,.22));
						}

						.ai-mark-dot {
							fill: #00b8f0;
							filter: drop-shadow(0 2px 6px rgba(0,194,255,.38));
						}

						.ai-mark-orbit {
							fill: none;
							stroke: url(#artifyAiGradient);
							stroke-width: 1.6;
							stroke-linecap: round;
							opacity: .48;
							stroke-dasharray: 3 5;
						}

						.core-symbol:hover .artify-ai-mark {
							transform: scale(1.06) rotate(3deg);
							transition: transform .45s cubic-bezier(.22,1,.36,1);
						}

						@media (max-width: 480px) {
							.core-symbol {
								width: 64px;
								height: 64px;
							}
						}

				/* FINAL — STANDARD AI ICON (NO CUSTOM MARK / NO SQUARE) */
				.hero-ai-visual .core-symbol {
					width: 72px !important;
					height: 72px !important;
					display: grid !important;
					place-items: center !important;
					border-radius: 50% !important;
					background: transparent !important;
					border: 0 !important;
					box-shadow: none !important;
				}

				.hero-ai-visual .core-symbol::before {
					inset: 3px !important;
					background: radial-gradient(circle, rgba(255,255,255,.98) 0 30%, rgba(123,97,255,.10) 52%, transparent 73%) !important;
					box-shadow: 0 0 38px rgba(79,140,255,.20) !important;
				}

				.hero-ai-visual .artify-standard-ai-icon {
					position: relative;
					z-index: 2;
					display: inline-block;
					font-size: 42px !important;
					line-height: 1 !important;
					background: linear-gradient(135deg, #4f8cff 0%, #7b61ff 52%, #00c2ff 100%);
					-webkit-background-clip: text;
					background-clip: text;
					-webkit-text-fill-color: transparent;
					filter: drop-shadow(0 8px 18px rgba(79,140,255,.24));
					transition: transform .35s ease, filter .35s ease;
				}

				.hero-ai-visual .core-symbol:hover .artify-standard-ai-icon {
					transform: scale(1.08);
					filter: drop-shadow(0 10px 22px rgba(79,140,255,.32));
				}

				@media (max-width:760px) {
					.hero-ai-visual .core-symbol { width: 56px !important; height: 56px !important; }
					.hero-ai-visual .artify-standard-ai-icon { font-size: 32px !important; }
				}

				@media (max-width:480px) {
					.hero-ai-visual .core-symbol { width: 50px !important; height: 50px !important; }
					.hero-ai-visual .artify-standard-ai-icon { font-size: 28px !important; }
				}	
                /* Final sizing for the Artify definition core. */
                .hero-ai-visual.premium-ai-scene .premium-ai-core {
                    width: clamp(255px, 27vw, 325px);
                    padding: 22px 24px 20px;
                    gap: 5px;
                }
                .hero-ai-visual.premium-ai-scene .core-artify-logo {
                    display: block;
                    width: 200px;
                    height: 70px;
                    object-fit: cover;
                    object-position: center;
                    margin: 0 0 2px;
                    mix-blend-mode: multiply;
                }
                .hero-ai-visual.premium-ai-scene .core-definition {
                    max-width: 250px;
                    font: 500 clamp(12px, 1.1vw, 15px)/1.35 'Inter', sans-serif;
                    letter-spacing: -.01em;
					color: #64748b;
                }
                @media (max-width:760px) {
                    .hero-ai-visual.premium-ai-scene .premium-ai-core { width:205px; padding:17px 16px 15px; gap:3px; }
                    .hero-ai-visual.premium-ai-scene .core-artify-logo { width:150px; height:50px; }
                    .hero-ai-visual.premium-ai-scene .core-definition { max-width:168px; font-size:10px; }
                }
                @media (max-width:480px) {
                    .hero-ai-visual.premium-ai-scene .premium-ai-core { width:162px; padding:12px 10px 10px; gap:2px; }
                    .hero-ai-visual.premium-ai-scene .core-artify-logo { width:105px; height:36px; }
                    .hero-ai-visual.premium-ai-scene .core-definition { max-width:132px; font-size:7.5px; }
                }

		   /*css inside script moved to here for new AI(not working inside script)*/


        /* Mobile AI graphic: keep the central message readable instead of
           placing all ten floating cards into a 360px-wide viewport. */
        @media (max-width: 760px) {
            #page-home .hero-right.hero-ai-visual-wrap {
                width: 100%;
                max-width: 100%;
                min-width: 0;
                padding: 10px;
                box-sizing: border-box;
            }

            #page-home .hero-ai-visual.premium-ai-scene {
                width: 100%;
                max-width: none;
                min-width: 0;
                height: clamp(410px, 118vw, 460px);
                min-height: 410px;
                border-radius: 24px;
                box-sizing: border-box;
            }

            /* Keep the complete intelligence map visible on mobile. */
            #page-home .premium-module {
                display: flex !important;
            }

            #page-home .premium-ai-node {
                width: clamp(112px, 35vw, 148px);
                min-height: 52px;
                padding: 8px 9px;
                gap: 7px;
                border-radius: 14px;
                box-sizing: border-box;
            }

            #page-home .premium-node-icon {
                width: 27px;
                height: 27px;
                flex-basis: 27px;
                border-radius: 9px;
                font-size: 10px;
            }

            #page-home .premium-node-copy strong { font-size: 10px; }
            #page-home .premium-node-copy span { font-size: 7.5px; }
            #page-home .node-insights { left: 4%; top: 23%; }
            #page-home .node-automation { right: 4%; top: 23%; }
            #page-home .node-prediction { left: 4%; bottom: 16%; }
            #page-home .node-decisions { right: 4%; bottom: 16%; }

            #page-home .premium-ai-core {
                width: clamp(170px, 51vw, 220px);
                padding: 16px 13px 14px;
            }

            #page-home .core-artify-logo { width: 145px; height: 50px; }
            #page-home .core-definition { max-width: 170px; font-size: 10px; }
        }

        /* Samsung Galaxy S24 / 360px portrait tuning. */
        @media (max-width: 360px) {
            #page-home .hero { padding-inline: 8px; }
            #page-home .hero-right.hero-ai-visual-wrap { padding: 6px; }
            #page-home .hero-ai-visual.premium-ai-scene {
                height: 400px;
                min-height: 400px;
                border-radius: 20px;
            }

            #page-home .premium-ai-label { left: 16px; top: 18px; font-size: 8px; }
            #page-home .premium-ai-label-line { width: 20px; }
            #page-home .premium-ai-node { width: 108px; min-height: 48px; padding: 7px; }
            #page-home .premium-node-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
            #page-home .premium-node-copy strong { font-size: 8.5px; }
            #page-home .premium-node-copy span { font-size: 6.5px; }

            /* Six business-module cards: two compact rows around the core. */
            #page-home .premium-module {
                display: flex !important;
                width: 104px;
                min-height: 42px;
                padding: 5px 6px;
                gap: 5px;
                border-radius: 10px;
            }
            #page-home .premium-module i { width: 21px; height: 21px; flex-basis: 21px; font-size: 8px; }
            #page-home .premium-module strong { font-size: 7.4px; }
            #page-home .premium-module small { font-size: 5.5px; }
            #page-home .module-hr { left: 16%; top: 10%; }
            #page-home .module-payroll { right: 16%; top: 10%; }
            #page-home .module-finance { left: 2%; top: 50%; }
            #page-home .module-crm { right: 2%; top: 50%; }
            #page-home .module-sales { left: 16%; bottom: 7%; }
            #page-home .module-inventory { right: 16%; bottom: 7%; }
            #page-home .node-prediction { bottom: 21%; }
            #page-home .node-decisions { bottom: 21%; }
            #page-home .premium-ai-core { width: 154px; padding: 12px 9px 10px; }
            #page-home .core-artify-logo { width: 108px; height: 38px; }
            #page-home .core-definition { max-width: 132px; font-size: 8px; }
        }

        /* All ten cards remain visible, with separate lanes around the core. */
        @media (min-width: 481px) and (max-width: 760px) {
            #page-home .premium-ai-core {
                width: clamp(170px, 39vw, 190px);
                padding: 16px 12px 14px;
            }

            #page-home .premium-module {
                display: flex !important;
                width: clamp(106px, 25vw, 118px);
                min-height: 46px;
                padding: 6px 7px;
                gap: 6px;
            }

            #page-home .premium-module i { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
            #page-home .premium-module strong { font-size: 8.5px; }
            #page-home .premium-module small { font-size: 6.2px; }
        }

        @media (max-width: 480px) {
            #page-home .hero-ai-visual.premium-ai-scene {
                height: clamp(430px, 110vw, 460px);
                min-height: 430px;
            }

            #page-home .premium-ai-core {
                width: min(128px, 35vw);
                padding: 10px 7px 9px;
                gap: 2px;
            }

            #page-home .core-artify-logo { width: 90px; height: 32px; }
            #page-home .core-definition { max-width: 112px; font-size: 7.2px; line-height: 1.25; }
            #page-home .core-definition-divider { width: 22px; margin: 1px 0 2px; }

            #page-home .premium-module {
                display: flex !important;
                width: 96px;
                min-height: 40px;
                padding: 4px 5px;
                gap: 4px;
                border-radius: 9px;
            }

            #page-home .premium-module i { width: 20px; height: 20px; flex-basis: 20px; border-radius: 6px; font-size: 7px; }
            #page-home .premium-module strong { font-size: 7px; }
            #page-home .premium-module small { font-size: 5.1px; }
            #page-home .module-hr { left: 16%; top: 10%; }
            #page-home .module-payroll { right: 16%; top: 10%; }
            #page-home .module-finance { left: 2%; top: 50%; }
            #page-home .module-crm { right: 2%; top: 50%; }
            #page-home .module-sales { left: 16%; bottom: 7%; }
            #page-home .module-inventory { right: 16%; bottom: 7%; }

            #page-home .premium-ai-node { width: 108px; min-height: 48px; padding: 7px; }
            #page-home .premium-node-icon { width: 24px; height: 24px; flex-basis: 24px; font-size: 9px; }
            #page-home .premium-node-copy strong { font-size: 8.5px; }
            #page-home .premium-node-copy span { font-size: 6.5px; }
            #page-home .node-insights { left: 4%; top: 22%; }
            #page-home .node-automation { right: 4%; top: 22%; }
            #page-home .node-prediction { left: 4%; top: 66%; bottom: auto; }
            #page-home .node-decisions { right: 4%; top: 66%; bottom: auto; }
        }

        /* Text wordmark for the AI core: uses the same display font as headings. */
        #page-home .core-artify-word {
            display: block;
            margin: 2px 0 4px;
            padding-bottom: .08em;
            font-family: 'Space Grotesk', sans-serif;
            font-size: clamp(34px, 4.2vw, 52px);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -.07em;
            background: linear-gradient(135deg, #1173d4 0%, #4f8cff 48%, #7b61ff 100%);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }

        #page-home .core-pronunciation,
        #page-home .core-verb {
            font-family: 'Inter', -apple-system, sans-serif;
            color: #334a84;
            text-align: center;
        }

        #page-home .core-pronunciation {
            font-size: clamp(11px, 1.2vw, 16px);
            font-weight: 500;
            line-height: 1;
        }

        #page-home .core-verb {
            font-size: clamp(11px, 1.2vw, 16px);
            font-style: italic;
            font-weight: 600;
            line-height: 1;
        }

        @media (max-width: 760px) {
            #page-home .core-artify-word {
                margin: 1px 0 3px;
                font-size: clamp(28px, 7vw, 38px);
            }
        }

        @media (max-width: 480px) {
            #page-home .core-artify-word {
                margin: 0 0 2px;
                font-size: clamp(21px, 7.5vw, 28px);
                line-height: 1.05;
            }

            #page-home .core-pronunciation,
            #page-home .core-verb {
                font-size: 6.5px;
                line-height: .95;
            }
        }

		 /* ============================================= */
        /* PREMIUM WEBSITE VISITOR ANALYTICS             */
        /* ============================================= */
        .visitor-analytics-section {
            position: relative;
            padding: 110px 24px;
            background: #fbfcff;
            overflow: hidden;
            isolation: isolate;
        }
        .visitor-analytics-section::before,
        .visitor-analytics-section::after {
            content: '';
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: -1;
        }
        .visitor-analytics-section::before {
            width: 620px; height: 620px; left: -300px; top: -260px;
            background: radial-gradient(circle, rgba(79,140,255,.14), transparent 68%);
            filter: blur(8px);
        }
        .visitor-analytics-section::after {
            width: 560px; height: 560px; right: -260px; bottom: -300px;
            background: radial-gradient(circle, rgba(123,97,255,.12), transparent 68%);
            filter: blur(8px);
        }
        .visitor-analytics-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; }
        .visitor-analytics-header { max-width: 760px; margin: 0 auto 46px; text-align: center; }
        .visitor-analytics-label {
            display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px;
            border-radius: 999px; background: rgba(255,255,255,.82);
            border: 1px solid rgba(79,140,255,.14); box-shadow: 0 10px 30px rgba(15,23,42,.06);
            color: #1173d4; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
            margin-bottom: 18px; backdrop-filter: blur(16px);
        }
        .visitor-analytics-label .live-dot {
            width: 8px; height: 8px; border-radius: 50%; background: #10b981;
            box-shadow: 0 0 0 5px rgba(16,185,129,.09), 0 0 18px rgba(16,185,129,.35);
            animation: visitorLivePulse 1.8s ease-in-out infinite;
        }
        @keyframes visitorLivePulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.25);opacity:.7} }
        .visitor-analytics-title { font-size: clamp(34px,4.4vw,52px); font-weight: 800; letter-spacing: -2.3px; color: #0f172a; margin-bottom: 15px; }
        .visitor-analytics-subtitle { color: #64748b; font-size: 14px; line-height: 1.8; max-width: 650px; margin: 0 auto; }
        .visitor-analytics-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
        .visitor-stat-card {
            position: relative; min-height: 275px; padding: 30px;
            border: 1px solid rgba(148,163,184,.20); border-radius: 28px;
            background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(248,250,255,.82));
            box-shadow: 0 24px 70px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.95);
            backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
            overflow: hidden; transition: transform .45s var(--ease-premium), box-shadow .45s var(--ease-premium), border-color .35s ease;
        }
        .visitor-stat-card:hover { transform: translateY(-8px); border-color: rgba(79,140,255,.28); box-shadow: 0 35px 90px rgba(15,23,42,.12), 0 0 0 1px rgba(79,140,255,.05); }
        .visitor-stat-card::before {
            content:''; position:absolute; width:280px; height:280px; right:-145px; top:-145px; border-radius:50%;
            background: radial-gradient(circle, var(--card-glow,rgba(79,140,255,.15)), transparent 68%); filter:blur(5px); pointer-events:none;
        }
        .visitor-stat-card::after {
            content:''; position:absolute; left:28px; right:28px; top:0; height:1px;
            background: linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent); pointer-events:none;
        }
        .visitor-stat-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:32px; position:relative; z-index:2; }
        .visitor-stat-heading { display:flex; align-items:center; gap:13px; }
        .visitor-stat-icon {
            width:50px; height:50px; border-radius:16px; display:grid; place-items:center; flex:0 0 auto;
            color:#1173d4; background:linear-gradient(145deg,rgba(79,140,255,.15),rgba(123,97,255,.09));
            border:1px solid rgba(79,140,255,.15); box-shadow:inset 0 1px 0 #fff, 0 10px 24px rgba(79,140,255,.08); font-size:17px;
        }
        .visitor-stat-name { font-size:13px; font-weight:800; color:#0f172a; margin-bottom:3px; }
        .visitor-stat-caption { color:#64748b; font-size:10px; font-weight:600; }
        .visitor-live-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.14); color:#059669; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
        .visitor-live-badge span { width:5px;height:5px;border-radius:50%;background:currentColor;animation:visitorLivePulse 1.5s ease-in-out infinite; }
        .visitor-number-row { display:flex; align-items:flex-end; gap:11px; position:relative; z-index:2; }
        .visitor-number {
            font-family:'Space Grotesk',sans-serif; font-size:clamp(58px,7vw,82px); line-height:.9; font-weight:800; letter-spacing:-4px;
            background:linear-gradient(135deg,#1173d4 0%,#4f8cff 48%,#7b61ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
            text-shadow:0 12px 30px rgba(79,140,255,.08);
        }
        .visitor-number-unit { color:#94a3b8; font-size:12px; font-weight:700; padding-bottom:7px; }
        .visitor-stat-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:30px; padding-top:17px; border-top:1px solid rgba(15,23,42,.06); color:#94a3b8; font-size:10px; font-weight:600; position:relative; z-index:2; }
        .visitor-updated { display:inline-flex; align-items:center; gap:7px; }
        .visitor-updated i { color:#10b981; font-size:9px; }
        .visitor-refresh { border:1px solid rgba(79,140,255,.13); background:rgba(79,140,255,.055); color:#4f8cff; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; transition:all .35s ease; }
        .visitor-refresh:hover { transform:rotate(180deg) scale(1.05); background:rgba(79,140,255,.11); box-shadow:0 8px 22px rgba(79,140,255,.12); }
        .visitor-refresh.is-loading i { animation:visitorSpin .7s linear infinite; }
        @keyframes visitorSpin { to{transform:rotate(360deg)} }
        .app-usage-card{margin-top:22px;display:flex;align-items:center;gap:18px;padding:20px 24px;border:1px solid rgba(111,120,150,.14);border-radius:22px;background:rgba(255,255,255,.78);box-shadow:0 14px 40px rgba(35,42,70,.06);backdrop-filter:blur(18px)}.app-usage-icon{width:48px;height:48px;flex:0 0 48px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(45,170,225,.13),rgba(103,88,168,.13));color:#6758a8;font-size:20px}.app-usage-copy{flex:1;min-width:0}.app-usage-value{font-family:'Space Grotesk',sans-serif;font-size:30px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(135deg,#1173d4,#6758a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.app-usage-users{display:flex;gap:16px;flex-wrap:wrap;color:#64748b;font-size:11px;font-weight:600}.app-usage-users b{color:#0f172a;font-weight:800}@media(max-width:640px){.app-usage-card{flex-wrap:wrap;padding:18px}.app-usage-value{margin-left:66px;font-size:27px}.app-usage-users{width:100%;margin-left:66px}}
        .app-usage-card{display:block;min-height:0;padding:22px 24px}.app-usage-header{display:flex;align-items:center;gap:18px}.app-usage-metrics{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:20px}.app-usage-metric{min-width:0;padding:14px 10px;border:1px solid rgba(111,120,150,.14);border-radius:14px;background:rgba(248,250,255,.72);display:flex;flex-direction:column;gap:7px}.app-usage-metric-title{color:#64748b;font-size:10px;font-weight:700;white-space:normal;line-height:1.35}.app-usage-metric-title i{color:#6758a8;margin-right:4px}.app-usage-metric strong{font-family:'Space Grotesk',sans-serif;font-size:22px;line-height:1;font-weight:800;color:#1173d4}.app-usage-metric small{color:#94a3b8;font-size:10px;font-weight:600}.app-usage-metric.is-loading .app-usage-metric-title,.app-usage-metric.is-loading small{color:transparent;background:linear-gradient(90deg,#e8edf5 25%,#f7f9fc 50%,#e8edf5 75%);background-size:200% 100%;border-radius:5px;animation:activityCardShimmer 1.4s ease-in-out infinite}.app-usage-metric.is-loading .app-usage-metric-title{width:82%;height:14px}.app-usage-metric.is-loading .app-usage-metric-title i{display:none}.app-usage-metric.is-loading strong{width:58%;height:24px;color:transparent;background:linear-gradient(90deg,#e8edf5 25%,#f7f9fc 50%,#e8edf5 75%);background-size:200% 100%;border-radius:6px;animation:activityCardShimmer 1.4s ease-in-out infinite}.app-usage-metric.is-loading small{width:46%;height:11px}@keyframes activityCardShimmer{to{background-position:-200% 0}}@media(max-width:1200px){.app-usage-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}}@media(max-width:700px){.app-usage-card{padding:20px 18px}.app-usage-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.app-usage-metric{padding:14px 12px}.app-usage-metric strong{font-size:22px}}@media(max-width:400px){.app-usage-metrics{grid-template-columns:1fr}}
        /* Four visible App Usage cards: 4 columns on desktop, 2 on tablet, and 1 on narrow phones. */
        .app-usage-metrics { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
        @media (max-width:900px) {
            .app-usage-metrics { grid-template-columns:repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width:480px) {
            .app-usage-card { padding:18px 14px; border-radius:18px; }
            .app-usage-header { align-items:flex-start; gap:12px; }
            .app-usage-icon { width:42px; height:42px; flex-basis:42px; border-radius:13px; font-size:17px; }
            .app-usage-metrics { grid-template-columns:1fr; margin-top:16px; }
            .app-usage-metric { padding:14px; }
        }
        .visitor-analytics-note { margin:20px auto 0; max-width:760px; text-align:center; color:#a1adbd; font-size:10px; line-height:1.65; }
        @media(max-width:700px){
            .visitor-analytics-section{padding:78px 18px}
            .visitor-analytics-header{margin-bottom:34px}
            .visitor-analytics-title{letter-spacing:-1.5px}
            .visitor-analytics-grid{grid-template-columns:1fr;gap:16px}
            .visitor-stat-card{min-height:235px;padding:24px;border-radius:22px}
            .visitor-stat-top{margin-bottom:28px}
            .visitor-number{font-size:58px;letter-spacing:-3px}
        }
        @media(max-width:420px){
            .visitor-stat-top{align-items:flex-start}.visitor-live-badge{padding:5px 8px}.visitor-stat-caption{max-width:160px}.visitor-number{font-size:52px}
        }

    

/* =========================================================
   ARTIFY360 — FULL-PAGE SIGNUP / ONBOARDING EXPERIENCE
   No popup. Left visual + right-side form on the actual page.
   ========================================================= */
#artifyOnboardingOverlay{
  position:fixed; inset:0; z-index:999999; display:none;
  width:100%; height:100dvh; overflow:hidden;
  background:#f7faff;
}
#artifyOnboardingOverlay.active{display:block}
#artifyOnboardingOverlay *{box-sizing:border-box}
.ao-page{
  min-height:100dvh;width:100%;display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr);
  background:linear-gradient(135deg,#f8fbff 0%,#fff 52%,#f7f8ff 100%);
}
.ao-visual{
  position:relative;min-width:0;overflow:hidden;padding:clamp(34px,4.5vw,68px);
  display:flex;align-items:flex-start;isolation:isolate;
  background:
    radial-gradient(circle at 22% 30%,rgba(37,99,235,.13),transparent 30%),
    radial-gradient(circle at 78% 75%,rgba(124,58,237,.11),transparent 30%),
    linear-gradient(145deg,#f4f8ff,#fff 58%,#f8f7ff);
}
.ao-visual:before{
  content:"";position:absolute;width:620px;height:620px;left:2%;top:8%;border-radius:50%;
  background:radial-gradient(circle,rgba(79,140,255,.14),transparent 68%);
  filter:blur(5px);animation:aoPulse 7s ease-in-out infinite;z-index:-1;
}
.ao-visual:after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px);
  background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);
  pointer-events:none;
}
.ao-visual-content{position:relative;z-index:6;max-width:650px;width:100%}
.ao-brand{display:flex;align-items:center;margin-bottom:clamp(34px,6vh,64px)}
.ao-brand img{height:36px;width:auto;max-width:190px;object-fit:contain}
.ao-visual-kicker{
  display:inline-flex;align-items:center;gap:9px;padding:8px 13px;border:1px solid rgba(37,99,235,.13);
  border-radius:999px;background:rgba(255,255,255,.76);box-shadow:0 10px 30px rgba(37,99,235,.07);
  color:#2563eb;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(12px)
}
.ao-visual-kicker span{width:7px;height:7px;border-radius:50%;background:#2563eb;box-shadow:0 0 0 5px rgba(37,99,235,.10);animation:aoBlink 2s infinite}
.ao-visual h1{margin:20px 0 15px;color:#0f172a;font-size:clamp(38px,4.7vw,66px);line-height:1.02;letter-spacing:-3px;max-width:620px}
.ao-visual h1 span{background:linear-gradient(110deg,#2563eb,#6366f1 48%,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.ao-visual-desc{margin:0;color:#64748b;font-size:clamp(13px,1.1vw,16px);line-height:1.7;max-width:550px}
.ao-benefits{display:flex;flex-wrap:wrap;gap:9px;margin-top:23px}
.ao-benefit{display:flex;align-items:center;gap:8px;padding:8px 11px;border-radius:11px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.72);color:#334155;font-size:10px;font-weight:700;box-shadow:0 8px 25px rgba(15,23,42,.04)}
.ao-benefit i{color:#2563eb}

/* Premium animated dashboard — centered, fully visible, no clipping */
.ao-dashboard{
  display:none !important;
  position:absolute;z-index:3;right:6%;bottom:5%;width:min(66%,590px);height:300px;
  border:1px solid rgba(148,163,184,.28);border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(247,250,255,.78));
  box-shadow:0 35px 90px rgba(37,99,235,.12),0 18px 45px rgba(15,23,42,.08);
  backdrop-filter:blur(20px);transform:perspective(1200px) rotateY(-7deg) rotateX(3deg);
  animation:aoDashboardFloat 6s ease-in-out infinite;overflow:hidden;
}
.ao-dashboard:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.72) 50%,transparent 70%);
  transform:translateX(-120%);animation:aoShine 5.5s ease-in-out infinite;
}
.ao-dash-top{height:48px;border-bottom:1px solid #e9eef6;display:flex;align-items:center;padding:0 16px;gap:7px;background:rgba(255,255,255,.62)}
.ao-dot{width:7px;height:7px;border-radius:50%;background:#cbd5e1}
.ao-dash-title{margin-left:8px;font-size:10px;font-weight:800;color:#64748b}
.ao-dash-body{padding:17px;display:grid;grid-template-columns:1.25fr .75fr;gap:12px}
.ao-chart{height:150px;border-radius:15px;background:linear-gradient(180deg,#f8fbff,#fff);border:1px solid #edf1f7;position:relative;overflow:hidden}
.ao-chart:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(96,165,250,.06),transparent);transform:translateX(-100%);animation:aoChartSweep 4s ease-in-out infinite}
.ao-chart svg{width:100%;height:100%}
.ao-mini{display:grid;gap:10px}
.ao-mini-card{border:1px solid #edf1f7;border-radius:13px;padding:12px;background:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(15,23,42,.035)}
.ao-mini-card b{display:block;color:#0f172a;font-size:17px}.ao-mini-card small{color:#94a3b8;font-size:9px}
.ao-float{
  position:absolute;z-index:7;padding:10px 13px;border:1px solid rgba(255,255,255,.9);border-radius:14px;
  background:rgba(255,255,255,.86);box-shadow:0 18px 45px rgba(15,23,42,.10);backdrop-filter:blur(15px);
  display:flex;align-items:center;gap:9px;color:#334155;font-size:10px;font-weight:800;animation:aoFloat 5s ease-in-out infinite
}
.ao-float i{font-size:13px;color:#2563eb}.ao-f1{left:8%;bottom:12%}.ao-f2{right:10%;top:38%;animation-delay:1.3s}.ao-f3{left:52%;top:16%;animation-delay:2.1s}
.ao-particle{position:absolute;width:5px;height:5px;border-radius:50%;background:#60a5fa;opacity:.35;animation:aoParticle 7s linear infinite}
.ao-p1{left:12%;top:23%}.ao-p2{left:68%;top:18%;animation-delay:1s}.ao-p3{left:36%;top:73%;animation-delay:2s}.ao-p4{left:78%;top:62%;animation-delay:3s}.ao-p5{left:22%;top:58%;animation-delay:4s}

/* Right side: compact form, never stretched edge-to-edge */
.ao-form-side{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:clamp(24px,4vw,56px);background:rgba(255,255,255,.92);
  border-left:1px solid rgba(226,232,240,.8);overflow:auto;
}
.ao-form-wrap{
  width:min(410px,100%);
  padding:10px 0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.ao-form-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:25px}
.ao-form-head .ao-mobile-brand{display:none}
.ao-progress{display:flex;gap:6px;align-items:center}
.ao-progress span{width:34px;height:4px;border-radius:10px;background:#e2e8f0;transition:.35s}
.ao-progress span.active{background:linear-gradient(90deg,#2563eb,#7c3aed)}
.ao-step{display:none}.ao-step.active{display:block;animation:aoStepIn .42s cubic-bezier(.22,1,.36,1)}
.ao-step h2{margin:0 0 8px;color:#0f172a;font-size:clamp(27px,2.6vw,35px);line-height:1.08;letter-spacing:-1.4px}
.ao-subtitle{margin:0 0 22px;color:#64748b;font-size:12px;line-height:1.65}
.ao-kicker{margin-bottom:8px;color:#2563eb;font-size:9px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.ao-emoji{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:24px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);box-shadow:0 12px 30px rgba(37,99,235,.10);animation:aoEmoji 3.5s ease-in-out infinite}
.ao-field{margin-bottom:13px}.ao-field label{display:block;margin-bottom:6px;color:#334155;font-size:11px;font-weight:750}
.ao-field input,.ao-field select{
  width:100%;height:46px;padding:0 13px;border:1px solid #dbe3ef;border-radius:11px;outline:none;
  background:#f8fafc;color:#0f172a;font:inherit;font-size:12px;transition:.25s
}
.ao-field input:hover,.ao-field select:hover{border-color:#b9cdf4;background:#fff}
.ao-field input:focus,.ao-field select:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.08),0 8px 22px rgba(37,99,235,.06);transform:translateY(-1px)}
.ao-password-wrap{position:relative}.ao-password-wrap input{padding-right:44px}
.ao-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:31px;height:31px;border:0;background:transparent;color:#64748b;cursor:pointer}
.ao-username-message{min-height:17px;margin-top:5px;font-size:10px;font-weight:650}.ao-username-message.exists{color:#f59e0b}.ao-username-message.available{color:#059669}.ao-username-message.error{color:#dc2626}
.ao-password-meter{height:3px;width:0;margin-top:7px;border-radius:20px;background:#e2e8f0;transition:.25s}.ao-password-meter.weak{width:25%;background:#ef4444}.ao-password-meter.fair{width:50%;background:#f59e0b}.ao-password-meter.good{width:75%;background:#3b82f6}.ao-password-meter.strong{width:100%;background:#10b981}
.ao-actions{display:flex;gap:8px;margin-top:20px}.ao-btn,.ao-back{min-height:44px;border-radius:11px;font:inherit;font-size:12px;font-weight:750;cursor:pointer;transition:.25s}
.ao-btn{flex:1;border:0;color:#fff;background:linear-gradient(110deg,#2563eb,#6366f1,#7c3aed);background-size:220% 100%;box-shadow:0 12px 26px rgba(37,99,235,.20)}
.ao-btn:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 16px 32px rgba(37,99,235,.27)}
.ao-back{padding:0 17px;border:1px solid #dbe3ef;background:#fff;color:#64748b}.ao-back:hover{color:#2563eb;border-color:#93c5fd}
.ao-error{display:none;margin-top:6px;color:#dc2626;font-size:10px;font-weight:650}.ao-error.active{display:block}
.ao-success{display:none;text-align:center}.ao-success.active{display:block;animation:aoStepIn .45s ease}
.ao-success-icon{width:70px;height:70px;margin:0 auto 20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:29px;background:linear-gradient(135deg,#10b981,#2563eb);box-shadow:0 18px 45px rgba(16,185,129,.2)}
.ao-success h2{margin-bottom:8px}.ao-success p{margin:0;color:#64748b;font-size:13px;line-height:1.65}

/* Step 3 — Company name and Phone number full width */
#artifyOnboardingOverlay #aoStep3 .ao-field:nth-of-type(2),
#artifyOnboardingOverlay #aoStep3 .ao-field:nth-of-type(3){
  display:block;
  width:100%;
  margin-right:0;
}

@keyframes aoStepIn{from{opacity:0;transform:translateX(25px)}to{opacity:1;transform:translateX(0)}}
@keyframes aoEmoji{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes aoDashboardFloat{0%,100%{transform:perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(0)}50%{transform:perspective(1200px) rotateY(-7deg) rotateX(3deg) translateY(-9px)}}
@keyframes aoPulse{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.1);opacity:1}}
@keyframes aoBlink{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes aoParticle{0%{transform:translateY(15px);opacity:0}30%{opacity:.4}70%{opacity:.3}100%{transform:translateY(-80px);opacity:0}}
@keyframes aoShine{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes aoChartSweep{0%,55%{transform:translateX(-100%)}80%,100%{transform:translateX(100%)}}

@media(max-width:1100px){
  .ao-page{grid-template-columns:minmax(0,1fr) minmax(400px,.72fr)}
  .ao-dashboard{width:72%;right:3%;bottom:5%}
}
@media(max-width:950px){
  .ao-page{grid-template-columns:1fr}
  .ao-visual{display:none}
  .ao-form-side{border-left:0;padding:30px 22px}
  .ao-form-wrap{width:min(430px,100%)}
  .ao-form-head .ao-mobile-brand{display:block}
  .ao-mobile-brand img{height:30px;width:auto}
  .ao-form-head{margin-bottom:25px;justify-content:space-between}
}
@media(max-width:560px){
  .ao-form-side{padding:18px 14px}
  .ao-form-wrap{padding:22px 18px;border-radius:20px}
  .ao-step h2{font-size:28px}.ao-subtitle{font-size:12px;margin-bottom:20px}
  .ao-actions{margin-top:18px}.ao-progress span{width:28px}
  .ao-field input,.ao-field select{height:45px}
  .ao-back{padding:0 13px}
  #artifyOnboardingOverlay #aoStep3 .ao-field:nth-of-type(2),
  #artifyOnboardingOverlay #aoStep3 .ao-field:nth-of-type(3){
    display:block;
    width:100%;
    margin-right:0;
  }
}


    #websiteSignupToastContainer { position: fixed; top: 24px; right: 24px; z-index: 10000; width: min(390px, calc(100vw - 32px)); }
    .website-signup-toast { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; padding: 13px 15px; border-radius: 8px; background: #fff; border: 1px solid #fecaca; box-shadow: 0 10px 28px rgba(15,23,42,.16); color: #b91c1c; font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s; }
    .website-signup-toast.show { opacity: 1; transform: translateY(0); }

@keyframes websiteSignupSpin { to { transform: rotate(360deg); } }

				.split-feature {
					padding: 60px 0;
					position: relative;
					overflow: hidden;
				}
				.split-feature-inner {
					display: flex;
					align-items: center;
					gap: 60px;
					max-width: 1200px;
					margin: 0 auto;
					padding: 0 20px;
				}
				.split-feature-text {
					flex: 1;
					min-width: 0;
				}
				.split-feature-showcase {
					flex: 1.2;
					min-width: 0;
				}
				.showcase {
					background: #ffffff;
					border-radius: 16px;
					box-shadow: 0 20px 60px rgba(0,0,0,0.06);
					border: 1px solid #eef2f6;
					overflow: hidden;
				}
				.showcase-toolbar {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 12px 20px;
					background: #fafbfc;
					border-bottom: 1px solid #eef2f6;
				}
				.showcase-toolbar-left {
					display: flex;
					align-items: center;
					gap: 12px;
				}
				.showcase-dots {
					display: flex;
					gap: 6px;
				}
				.showcase-dot {
					width: 10px;
					height: 10px;
					border-radius: 50%;
				}
				.showcase-dot.r { background: #ff5f56; }
				.showcase-dot.y { background: #ffbd2e; }
				.showcase-dot.g { background: #27c93f; }
				.showcase-toolbar-title {
					font-size: 12px;
					color: #6b7a8f;
					font-weight: 500;
				}
				.showcase-toolbar-right {
					display: flex;
					gap: 8px;
				}
				.showcase-tb-btn {
					display: flex;
					align-items: center;
					gap: 4px;
					padding: 4px 12px;
					border-radius: 6px;
					border: 1px solid #e2e8f0;
					background: #fff;
					font-size: 11px;
					color: #475569;
					cursor: pointer;
					transition: all 0.2s;
				}
				.showcase-tb-btn.primary {
					background: #4f8cff;
					color: #fff;
					border-color: #4f8cff;
				}
				.showcase-tb-btn .material-symbols-outlined {
					font-size: 14px;
				}
				.showcase-body {
					padding: 8px;
					background: #fafbfc;
				}
				.showcase-body svg {
					display: block;
					width: 100%;
					height: auto;
				}

				/* The shared reverse rules order the showcase before the text. */
				.split-feature.reverse .split-feature-inner {
					flex-direction: row;
				}

				/* Background variations */
				.split-feature.bg-light {
					background: #f8fafc;
				}
				.split-feature.bg-white {
					background: #ffffff;
				}

				/* Responsive */
				@media (max-width: 1024px) {
					.split-feature-inner {
						flex-direction: column !important;
						gap: 30px;
					}
					.split-feature.reverse .split-feature-inner {
						flex-direction: column !important;
					}
					.split-feature-text {
						order: 1 !important;
					}
					.split-feature-showcase {
						order: 2 !important;
						width: 100%;
					}
					.split-feature {
						padding: 40px 0;
					}
				}
				@media (max-width: 768px) {
					.split-feature-inner {
						padding: 0 16px;
						gap: 20px;
					}
					.split-feature {
						padding: 30px 0;
					}
					.showcase-toolbar {
						flex-wrap: wrap;
						gap: 8px;
					}
					.showcase-toolbar-right {
						flex-wrap: wrap;
					}
					.showcase-tb-btn span.material-symbols-outlined {
						display: none;
					}
				}
				@media (max-width: 480px) {
					.split-feature-inner {
						padding: 0 12px;
						gap: 16px;
					}
					.showcase-toolbar {
						padding: 8px 12px;
					}
					.showcase-toolbar-title {
						font-size: 10px;
					}
					.showcase-tb-btn {
						font-size: 10px;
						padding: 2px 8px;
					}
				}