:root {
            --blue: #1769ff;
            --blue-dark: #0755df;
            --cyan: #18a9df;
            --green: #35c982;
            --purple: #7854ff;
            --text: #101936;
            --muted: #65708a;
            --border: rgba(24, 52, 105, .11);
            --shadow: 0 25px 80px rgba(27, 76, 180, .13);
            --soft-shadow: 0 15px 45px rgba(27, 76, 180, .10);
        }
        .navbar-hero-sec-dizi {
            width: 100%;
            height: 88px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 3.5vw;
            position: relative;
            z-index: 100;
            background: rgba(255, 255, 255, .84);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(0, 0, 0, .025);

            transition: .3s ease;
        }

        .navbar-hero-sec-dizi.scrolled-hero-sec-dizi {
            height: 72px;
            box-shadow: 0 10px 35px rgba(0, 0, 0, .06);
        }

        .logo-hero-sec-dizi {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            font-size: 27px;
           /* letter-spacing: -1.5px;*/
        }

        .logo-mark-hero-sec-dizi {
            width: 43px;
            height: 43px;

            border-radius: 12px;

            display: flex;
            align-items: center;
            justify-content: center;

            background:
                linear-gradient(135deg,
                    #4bc9a1 0%,
                    #2386e9 48%,
                    #155be8 100%);

            color: white;

            font-size: 25px;
            font-weight: 900;

            box-shadow:
                0 8px 25px rgba(31, 117, 232, .28);

            transform: rotate(-1deg);
        }

        .logo-text-hero-sec-dizi {
            line-height: .85;
        }

        .logo-text-hero-sec-dizi small {
            display: block;
            font-size: 8px;
           /* letter-spacing: 1.3px;*/
            font-weight: 600;
            margin-top: 6px;
            color: #222;
        }

        .nav-links-hero-sec-dizi {
            display: flex;
            align-items: center;
            gap: 42px;
            margin-left: 60px;
        }

        .nav-links-hero-sec-dizi a {
            position: relative;

            font-size: 15px;
            font-weight: 500;

            color: #182038;

            transition: .25s ease;
        }

        .nav-links-hero-sec-dizi a:hover {
            color: var(--blue);
        }

        .nav-links-hero-sec-dizi a::after {
            content: "";

            position: absolute;

            width: 0;
            height: 2px;

            left: 0;
            bottom: -8px;

            border-radius: 10px;

            background:
                linear-gradient(90deg,
                    var(--blue),
                    var(--green));

            transition: .3s ease;
        }

        .nav-links-hero-sec-dizi a:hover::after {
            width: 100%;
        }

        .dropdown-hero-sec-dizi {
            display: inline-flex;
            align-items: center;
            gap: 7px;
        }

        .arrow-hero-sec-dizi {
            font-size: 12px;
            transition: .3s ease;
        }

        .dropdown-hero-sec-dizi:hover .arrow-hero-sec-dizi {
            transform: rotate(180deg);
        }

        .nav-cta-hero-sec-dizi {
            border: none;

            padding: 14px 27px;

            border-radius: 14px;

            color: white;

            font-size: 15px;
            font-weight: 600;

            cursor: pointer;

            background:
                linear-gradient(105deg,
                    #145eff,
                    #2486ee 55%,
                    #27c681);

            box-shadow:
                0 12px 30px rgba(27, 106, 235, .23);

            transition: .3s ease;
        }

        .nav-cta-hero-sec-dizi:hover {
            transform: translateY(-3px);

            box-shadow:
                0 18px 40px rgba(27, 106, 235, .30);
        }

        .mobile-menu-hero-sec-dizi {
            display: none;

            border: none;
            background: none;

            font-size: 28px;

            cursor: pointer;
        }


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

        .hero-hero-sec-dizi {
            min-height: calc(100vh - 88px);
            position: relative;
            padding: 0px 5.5vw 50px;
            display: grid;
            grid-template-columns:
                minmax(400px, .82fr) minmax(600px, 1.18fr);
            gap: 30px;
            align-items: center;
            overflow: hidden;
            background:
                radial-gradient(circle at 75% 45%,
                    rgba(65, 144, 255, .09),
                    transparent 30%),
                radial-gradient(circle at 90% 20%,
                    rgba(64, 211, 162, .07),
                    transparent 25%),
                #ffffff;
        }

        .hero-hero-sec-dizi::before {
            content: "";
            position: absolute;
            width: 500px;
            height: 500px;
            left: 50%;
            top: 25%;
            background-image:
                linear-gradient(rgba(36, 111, 255, .05) 1px,
                    transparent 1px),
                linear-gradient(90deg,
                    rgba(36, 111, 255, .05) 1px,
                    transparent 1px);
            background-size: 32px 32px;
            mask-image:
                radial-gradient(circle,
                    black,
                    transparent 72%);

            pointer-events: none;
        }

        .hero-glow-hero-sec-dizi {
            position: absolute;
            width: 550px;
            height: 550px;
            border-radius: 50%;
            right: 8%;
            top: 20%;
            background:
                radial-gradient(circle,
                    rgba(31, 105, 255, .14),
                    transparent 67%);
            filter: blur(10px);
            animation: glowPulse-hero-sec-dizi 5s ease-in-out infinite;
        }

        @keyframes glowPulse-hero-sec-dizi {

            0%,
            100% {
                transform: scale(.95);
                opacity: .6;
            }

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


        /* =========================================================
           HERO CONTENT
        ========================================================= */

        .hero-content-hero-sec-dizi {
            position: relative;
            z-index: 5;

            max-width: 650px;

            animation: heroIn-hero-sec-dizi .9s ease both;
        }

        @keyframes heroIn-hero-sec-dizi {

            from {
                opacity: 0;
                transform: translateY(30px);
            }

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

        .hero-badge-hero-sec-dizi {
            width: fit-content;

            display: flex;
            align-items: center;
            gap: 10px;

            padding:10px;

            border-radius: 100px;

            border: 1px solid rgba(25, 111, 255, .38);

            background:
                linear-gradient(100deg,
                    rgba(34, 117, 255, .04),
                    rgba(46, 200, 139, .05));

            color: #1767e9;

            font-size: 10px;
            font-weight: 600;

            margin-bottom: 28px;

            box-shadow:
                inset 0 0 20px rgba(28, 108, 255, .03);
                    word-spacing: 4px;
       
        }

        .sparkle-hero-sec-dizi {
            animation:
                sparkleRotate-hero-sec-dizi 2.5s linear infinite;
        }

        @keyframes sparkleRotate-hero-sec-dizi {

            0% {
                transform: rotate(0deg) scale(1);
            }

            50% {
                transform: rotate(180deg) scale(1.2);
            }

            100% {
                transform: rotate(360deg) scale(1);
            }
        }

        .hero-title-hero-sec-dizi {
            font-size: clamp(58px, 3.2vw, 88px);
            line-height: .99;
           /* letter-spacing: -5px;*/
            font-weight: 750;
            margin-bottom: 30px;
        }

        .hero-title-hero-sec-dizi span {
            display: block;
        }

        .gradient-text-hero-sec-dizi {
            background:
                linear-gradient(105deg,
                    #1767ff 10%,
                    #168bdb 52%,
                    #31bf89 95%);

            -webkit-background-clip: text;
            background-clip: text;

            color: transparent;

            background-size: 200% auto;

            animation:
                gradientMove-hero-sec-dizi 5s ease infinite;
        }

        @keyframes gradientMove-hero-sec-dizi {

            0%,
            100% {
                background-position: 0% center;
            }

            50% {
                background-position: 100% center;
            }
        }

        .hero-description-hero-sec-dizi {
            max-width: 600px;

            font-size: 18px;
            line-height: 1.75;

            color: #64748b;

            margin-bottom: 32px;
        }

        .hero-buttons-hero-sec-dizi {
            display: flex;
            gap: 18px;

            margin-bottom: 34px;
        }

        .primary-btn-hero-sec-dizi,
        .secondary-btn-hero-sec-dizi {
            height: 40px;
            padding: 0 28px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 650;
            cursor: pointer;
            transition: .35s ease;
        }

        .primary-btn-hero-sec-dizi {
            border: none;

            color: white;

            background:
                linear-gradient(105deg,
                    #1559ff,
                    #1b82e8,
                    #28c684);

            box-shadow:
                0 15px 35px rgba(28, 108, 241, .22);

            background-size: 180% auto;
        }

        .primary-btn-hero-sec-dizi:hover {
            transform: translateY(-4px) scale(1.02);

            background-position: right center;

            box-shadow:
                0 20px 45px rgba(28, 108, 241, .30);
        }

        .secondary-btn-hero-sec-dizi {
            color: #165fe7;

            border: 1px solid #4c85ff;

            background: white;
        }

        .secondary-btn-hero-sec-dizi:hover {
            background: #f5f8ff;
            transform: translateY(-4px);
        }

        .hero-benefits-hero-sec-dizi {
            display: flex;
            gap: 30px;

            color: #53607b;

            font-size: 13px;
        }

        .benefit-hero-sec-dizi {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .benefit-icon-hero-sec-dizi {
            width: 33px;
            height: 33px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            background: #f1f6ff;

            color: var(--blue);
        }


        /* =========================================================
           PRODUCT VISUAL
        ========================================================= */

        .hero-visual-hero-sec-dizi {
            position: relative;

            min-height: 650px;

            display: flex;
            align-items: center;
            justify-content: center;

            perspective: 1600px;

            animation:
                visualIn-hero-sec-dizi 1s .15s ease both;
        }

        @keyframes visualIn-hero-sec-dizi {

            from {
                opacity: 0;
                transform: translateX(60px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .orb-hero-sec-dizi {
            position: absolute;

            width: 480px;
            height: 480px;

            border-radius: 50%;

            background:
                radial-gradient(circle at 30% 25%,
                    rgba(79, 182, 255, .32),
                    rgba(35, 108, 255, .13) 40%,
                    transparent 70%);

            filter: blur(3px);

            animation:
                orbFloat-hero-sec-dizi 8s ease-in-out infinite;
        }

        @keyframes orbFloat-hero-sec-dizi {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
            }

            50% {
                transform: translate(10px, -18px) scale(1.06);
            }
        }

        .ring-hero-sec-dizi {
            position: absolute;

            border-radius: 50%;

            border: 1px solid rgba(38, 118, 255, .18);
        }

        .ring-one-hero-sec-dizi {
            width: 620px;
            height: 430px;

            transform: rotate(-14deg);

            animation: ringRotate-hero-sec-dizi 15s linear infinite;
        }

        .ring-two-hero-sec-dizi {
            width: 570px;
            height: 380px;

            transform: rotate(25deg);

            border-color:
                rgba(48, 201, 140, .18);

            animation:
                ringRotateReverse-hero-sec-dizi 18s linear infinite;
        }

        @keyframes ringRotate-hero-sec-dizi {

            from {
                transform: rotate(-14deg);
            }

            to {
                transform: rotate(346deg);
            }
        }

        @keyframes ringRotateReverse-hero-sec-dizi {

            from {
                transform: rotate(25deg);
            }

            to {
                transform: rotate(-335deg);
            }
        }


        /* =========================================================
           DASHBOARD
        ========================================================= */

        .dashboard-hero-sec-dizi {
            width: min(760px, 90%);

            position: relative;

            z-index: 5;

            background:
                rgba(255, 255, 255, .90);

            border:
                1px solid rgba(50, 93, 170, .13);

            border-radius: 20px;

            box-shadow:
                0 35px 90px rgba(29, 79, 169, .17);

            backdrop-filter: blur(18px);

            overflow: hidden;

            transform:
                rotateY(-7deg) rotateX(3deg) rotateZ(-1deg);

            animation:
                dashboardFloat-hero-sec-dizi 6s ease-in-out infinite;

            transition: .5s ease;
        }

        .dashboard-hero-sec-dizi:hover {
            transform:
                rotateY(-2deg) rotateX(1deg) rotateZ(0deg) scale(1.015);

            box-shadow:
                0 45px 110px rgba(29, 79, 169, .23);
        }

        @keyframes dashboardFloat-hero-sec-dizi {

            0%,
            100% {
                transform:
                    rotateY(-7deg) rotateX(3deg) rotateZ(-1deg) translateY(0);
            }

            50% {
                transform:
                    rotateY(-7deg) rotateX(3deg) rotateZ(-1deg) translateY(-14px);
            }
        }

        .dashboard-top-hero-sec-dizi {
            height: 56px;

            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: 0 18px;

            border-bottom:
                1px solid rgba(30, 60, 100, .08);
        }

        .dashboard-brand-hero-sec-dizi {
            display: flex;
            align-items: center;
            gap: 10px;

            font-weight: 700;
        }

        .mini-logo-hero-sec-dizi {
            width: 30px;
            height: 30px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
           background: linear-gradient(140deg, #f8f9fa, #e9ecef);
            color: white;
            font-weight: 800;
        }

        .export-btn-hero-sec-dizi {
            padding: 7px 15px;
            border-radius: 8px;
            background: white;
            border: 1px solid #d7e2f4;
            color: #1965e9;
            font-size: 13px;
        }
        .order-tabs-hero-sec-dizi {
            display: flex;
            flex-wrap: wrap;
            padding: 15px 20px;
            gap: 8px;
            border-bottom:1px solid rgba(20, 50, 100, .06);
        }
        .order-tab-hero-sec-dizi {
            padding: 13px 18px;
            border-radius: 9px;
            font-size: 13px;
            color: #69738b;
            transition: .3s ease;
        }
        .order-tab-hero-sec-dizi.active-hero-sec-dizi {
            background:
                linear-gradient(135deg,
                    #285bff,
                    #6373ff);

            color: white;

            box-shadow:
                0 8px 22px rgba(60, 91, 255, .25);

            transform: translateY(-2px);
        }

        .orders-table-hero-sec-dizi {
            padding: 10px 20px 25px;
        }

        .table-row-hero-sec-dizi {
            display: grid;

            grid-template-columns:
                1.2fr 1.1fr .5fr .8fr .8fr .8fr;

            align-items: center;

            min-height: 45px;

            border-bottom:
                1px solid #edf1f7;

            font-size: 10px;

            color: #58627a;
        }

        .table-row-hero-sec-dizi.header-hero-sec-dizi {
            font-weight: 600;
            color: #788298;
        }

        .status-hero-sec-dizi {
            width: fit-content;

            padding: 5px 9px;

            border-radius: 6px;

            font-size: 9px;

            background: #e9f9f0;

            color: #21a66d;
        }

        .status-hero-sec-dizi.blue-hero-sec-dizi {
            background: #edf3ff;
            color: #1768ed;
        }

        .status-hero-sec-dizi.orange-hero-sec-dizi {
            background: #fff3df;
            color: #ef8b14;
        }


        /* =========================================================
           FLOATING AI CARD
        ========================================================= */

        .ai-card-hero-sec-dizi {
            position: absolute;

            top: 35px;
            right: -20px;

            z-index: 10;

            width: 220px;

            padding: 20px;

            background:
                rgba(255, 255, 255, .94);

            border:
                1px solid rgba(50, 90, 150, .10);

            border-radius: 17px;

            box-shadow:
                0 22px 55px rgba(30, 70, 150, .15);

            animation:
                cardFloat-hero-sec-dizi 5s ease-in-out infinite;
        }

        @keyframes cardFloat-hero-sec-dizi {

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

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

        .ai-top-hero-sec-dizi {
            display: flex;
            align-items: center;

            gap: 12px;

            margin-bottom: 12px;
        }

        .ai-icon-hero-sec-dizi {
            width: 38px;
            height: 38px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            color: white;

            font-size: 19px;

            background:
                linear-gradient(135deg,
                    #6954ff,
                    #227eff);

            box-shadow:
                0 7px 20px rgba(83, 82, 255, .27);

            animation:
                aiPulse-hero-sec-dizi 2.2s infinite;
        }

        @keyframes aiPulse-hero-sec-dizi {

            0%,
            100% {
                box-shadow:
                    0 0 0 0 rgba(73, 102, 255, .30);
            }

            50% {
                box-shadow:
                    0 0 0 12px rgba(73, 102, 255, 0);
            }
        }

        .ai-title-hero-sec-dizi {
            font-size: 14px;
            font-weight: 700;
        }

        .ai-text-hero-sec-dizi {
            font-size: 13px;
            line-height: 1.6;

            color: #68738b;

            transition: opacity .3s ease;
        }


        /* =========================================================
           ANALYTICS
        ========================================================= */

        .analytics-card-hero-sec-dizi {
            position: absolute;

            right: -25px;
            bottom: 20px;

            z-index: 12;

            width: 250px;

            padding: 20px;

            border-radius: 18px;

            background:
                rgba(255, 255, 255, .96);

            border:
                1px solid rgba(30, 70, 130, .10);

            box-shadow:
                0 25px 65px rgba(29, 79, 169, .17);

            animation:
                analyticsFloat-hero-sec-dizi 6s ease-in-out infinite;
        }

        @keyframes analyticsFloat-hero-sec-dizi {

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

            50% {
                transform: translateY(10px);
            }
        }

        .analytics-title-hero-sec-dizi {
            font-size: 16px;
            font-weight: 650;

            margin-bottom: 18px;
        }

        .analytics-stats-hero-sec-dizi {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 10px;
        }

        .metric-hero-sec-dizi {
            padding: 12px;

            border-radius: 12px;

            background: #fafcff;

            border: 1px solid #edf2fa;
        }

        .metric-label-hero-sec-dizi {
            font-size: 9px;

            color: #737d91;

            margin-bottom: 6px;
        }

        .metric-value-hero-sec-dizi {
            font-size: 17px;

            font-weight: 700;

            color: #151d35;
        }

        .metric-growth-hero-sec-dizi {
            font-size: 9px;

            color: #18b96e;

            margin-top: 3px;
        }

        .graph-hero-sec-dizi {
            height: 70px;

            margin-top: 20px;

            position: relative;

            overflow: hidden;
        }

        .graph-hero-sec-dizi svg {
            width: 100%;
            height: 100%;

            overflow: visible;
        }

        .graph-line-hero-sec-dizi {
            fill: none;

            stroke: url(#graphGradient);

            stroke-width: 3;

            stroke-linecap: round;

            stroke-dasharray: 300;

            stroke-dashoffset: 300;

            animation:
                drawGraph-hero-sec-dizi 3s ease forwards infinite alternate;
        }

        @keyframes drawGraph-hero-sec-dizi {

            to {
                stroke-dashoffset: 0;
            }
        }


        /* =========================================================
           PRODUCT CARD
        ========================================================= */

        .product-card-hero-sec-dizi {
            position: absolute;

            left: 35px;
            bottom: 8px;

            z-index: 15;

            width: 205px;

            padding: 10px;

            border-radius: 17px;

            background: rgba(255, 255, 255, .96);

            box-shadow:
                0 25px 55px rgba(30, 75, 160, .17);

            animation:
                productFloat-hero-sec-dizi 4.5s ease-in-out infinite;
        }

        @keyframes productFloat-hero-sec-dizi {

            0%,
            100% {
                transform: translateY(0) rotate(-1deg);
            }

            50% {
                transform: translateY(-14px) rotate(1deg);
            }
        }

        .product-image-hero-sec-dizi {
            width: 100%;
            height: 180px;

            border-radius: 12px;

            background:
                linear-gradient(135deg,
                    #d8f0b2,
                    #c2e88d);

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 75px;

            overflow: hidden;
        }

        .product-person-hero-sec-dizi {
            filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .15));
        }

        .product-name-hero-sec-dizi {
            margin-top: 11px;

            font-size: 12px;
            font-weight: 700;
        }

        .product-meta-hero-sec-dizi {
            font-size: 10px;

            color: #737c90;

            margin-top: 4px;
        }

        .product-bottom-hero-sec-dizi {
            display: flex;
            justify-content: space-between;
            align-items: center;

            margin-top: 10px;
        }

        .price-hero-sec-dizi {
            font-size: 15px;
            font-weight: 800;
        }

        .stock-hero-sec-dizi {
            font-size: 9px;

            padding: 4px 7px;

            border-radius: 7px;

            background: #eaf9f0;

            color: #17a966;
        }


        /* =========================================================
           STATS
        ========================================================= */

     .stats-wrapper-hero-sec-dizi {
    position: relative;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 86%;
    z-index: 20;
    top: -30px;
    
}

        .stats-hero-sec-dizi {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            background: rgba(255, 255, 255, .94);
            border: 1px solid rgba(40, 70, 120, .09);
            border-radius: 20px 20px 0 0;
            box-shadow:0 -5px 35px rgba(30, 70, 140, .08);
            backdrop-filter: blur(15px);
            overflow: hidden;
        }

        .stat-hero-sec-dizi {
            position: relative;

            min-height: 105px;

            display: flex;
            align-items: center;

            gap: 15px;

            padding: 18px 22px;
        }

        .stat-hero-sec-dizi:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 24px
            width: 1px;
            height: 55px;
            background: #7655ed;
        }

        .stat-icon-hero-sec-dizi {
            width: 47px;
            height: 47px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 19px;

            background:
                linear-gradient(135deg,
                    #edf4ff,
                    #f2f7ff);

            color: var(--blue);
        }

        .stat-hero-sec-dizi:nth-child(2)
        .stat-icon-hero-sec-dizi {
            color: #1db875;
        }

        .stat-hero-sec-dizi:nth-child(3)
        .stat-icon-hero-sec-dizi {
            color: #7655ed;
        }

        .stat-hero-sec-dizi:nth-child(4)
        .stat-icon-hero-sec-dizi {
            color: #18a871;
        }

        .stat-hero-sec-dizi:nth-child(5)
        .stat-icon-hero-sec-dizi {
            color: #1b67e9;
        }

        .stat-number-hero-sec-dizi {
            font-size: 23px;
            font-weight: 750;

           /* letter-spacing: -.5px;*/
        }

        .stat-label-hero-sec-dizi {
            font-size: 13px;

            color: #66718a;

            margin-top: 5px;
        }


        /* =========================================================
           TRUST
        ========================================================= */

        .trust-hero-sec-dizi {
            position: absolute;

            bottom: -64px;

            left: 50%;

            transform: translateX(-50%);

            text-align: center;

            white-space: nowrap;

            color: #28324d;

            font-size: 13px;
        }

        .stars-hero-sec-dizi {
            margin-top: 8px;

            color: #f4a500;

          /*  letter-spacing: 3px;*/

            font-size: 17px;
        }

        .rating-hero-sec-dizi {
            color: #65708a;

          /*  letter-spacing: 0;*/

            margin-left: 7px;

            font-size: 13px;
        }


        /* =========================================================
           PARTICLES
        ========================================================= */

        .particle-hero-sec-dizi {
            position: absolute;

            width: 5px;
            height: 5px;

            border-radius: 50%;

            background: #3b89ff;

            opacity: .35;

            animation:
                particleMove-hero-sec-dizi 7s linear infinite;
        }

        @keyframes particleMove-hero-sec-dizi {

            0% {
                transform:
                    translateY(0) translateX(0);

                opacity: 0;
            }

            20% {
                opacity: .7;
            }

            80% {
                opacity: .5;
            }

            100% {
                transform:
                    translateY(-180px) translateX(60px);

                opacity: 0;
            }
        }


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

        @media (max-width: 1250px) {

            .hero-hero-sec-dizi {
                grid-template-columns:
                    minmax(350px, .8fr) minmax(500px, 1.2fr);
                padding-left: 4vw;
                padding-right: 4vw;
            }
            .nav-links-hero-sec-dizi {
                gap: 25px;
                margin-left: 20px;
            }

            .stats-wrapper-hero-sec-dizi {
                width: 92%;
            }

            .hero-title-hero-sec-dizi {
                font-size: 65px;
            }
        }


        @media (max-width: 1000px) {

            .navbar-hero-sec-dizi {
                height: 76px;
            }

            .nav-links-hero-sec-dizi {
                display: none;
            }

            .mobile-menu-hero-sec-dizi {
                display: block;
            }

            .nav-cta-hero-sec-dizi {
                margin-left: auto;
                margin-right: 18px;
            }

            .hero-hero-sec-dizi {
                grid-template-columns: 1fr;
                padding-top: 65px;
                padding-bottom: 260px;
                text-align: center;
            }

            .hero-content-hero-sec-dizi {
                margin: auto;
            }

            .hero-badge-hero-sec-dizi {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-description-hero-sec-dizi {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-buttons-hero-sec-dizi {
                justify-content: center;
            }

            .hero-benefits-hero-sec-dizi {
                justify-content: center;
            }

            .hero-visual-hero-sec-dizi {
                min-height: 600px;
            }

            .stats-wrapper-hero-sec-dizi {
                bottom: 20px;
            }
        }


        @media (max-width: 700px) {

            .logo-text-hero-sec-dizi {
                font-size: 22px;
            }

            .nav-cta-hero-sec-dizi {
                display: none;
            }

            .hero-hero-sec-dizi {
                padding:22px 18px 120px;
            }
            .hero-title-hero-sec-dizi {
                font-size: 51px;
               /* letter-spacing: -3px;*/
            }

            .hero-description-hero-sec-dizi {
                font-size: 16px;
            }

            .hero-buttons-hero-sec-dizi {
                flex-direction: column;

                align-items: center;
            }

            .primary-btn-hero-sec-dizi,
            .secondary-btn-hero-sec-dizi {
                width: 250px;
            }

            .hero-benefits-hero-sec-dizi {
                flex-wrap: wrap;
                gap: 12px;
            }

            .hero-visual-hero-sec-dizi {
                min-height: 470px;
            }

            .dashboard-hero-sec-dizi {
                width: 95%;
                transform: none !important;
            }

            .ai-card-hero-sec-dizi {
                right: -4px;
                top: 0;

                width: 165px;
            }
            .analytics-card-hero-sec-dizi {
                right: -5px;
                bottom: -60px;
                width: 190px;
            }
            .product-card-hero-sec-dizi {
                left: -2px;
                bottom: -60px;
                width: 155px;
            }

            .product-image-hero-sec-dizi {
                height: 130px;
            }

            .stats-wrapper-hero-sec-dizi {
                width: 94%;

                bottom: 30px;
            }

            .stats-hero-sec-dizi {
                grid-template-columns:
                    repeat(2, 1fr);

                border-radius: 18px;
            }

            .stat-hero-sec-dizi {
                min-height: 85px;

                padding: 13px;
            }

            .stat-hero-sec-dizi:not(:last-child)::after {
                display: none;
            }

            .stat-icon-hero-sec-dizi {
                width: 38px;
                height: 38px;
            }

            .stat-number-hero-sec-dizi {
                font-size: 18px;
            }

            .stat-label-hero-sec-dizi {
                font-size: 9px;
            }

            .trust-hero-sec-dizi {
                bottom: -60px;
                font-size: 10px;
            }
        }


        @media (max-width: 450px) {

            .hero-title-hero-sec-dizi {
                font-size: 43px;
            }

            .hero-visual-hero-sec-dizi {
                min-height: 400px;
            }

            .ai-card-hero-sec-dizi {
                width: 145px;
                padding: 12px;
            }

            .analytics-card-hero-sec-dizi {
                width: 165px;
                padding: 13px;
            }

            .product-card-hero-sec-dizi {
                width: 135px;
            }

            .product-image-hero-sec-dizi {
                height: 110px;
            }

            .stats-hero-sec-dizi {
                grid-template-columns: 1fr 1fr;
            }
        }
        /*customization section start*/
         .hero-customization-dizi {
            position: relative;
            min-height: 100vh;
            padding: 0px 5vw 80px;
            overflow: hidden;
            background:
                radial-gradient(circle at 75% 35%, rgba(57, 126, 255, .13), transparent 30%),
                radial-gradient(circle at 85% 90%, rgba(79, 202, 145, .12), transparent 30%),
                linear-gradient(135deg, #ffffff 0%, #fbfcff 65%, #f3f8ff 100%);
        }

        .hero-customization-dizi::before {
            content: "";
            position: absolute;
            width: 700px;
            height: 700px;
            right: -300px;
            bottom: -350px;
            border-radius: 50%;
            border: 1px solid rgba(24, 119, 255, .12);
            box-shadow:
                0 0 0 60px rgba(24, 119, 255, .025),
                0 0 0 120px rgba(24, 119, 255, .018);
            pointer-events: none;
        }

        .grid-bg-customization-dizi {
            position: absolute;
            inset: 0;
            opacity: .28;
            background-image:
                linear-gradient(rgba(16, 24, 40, .035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(16, 24, 40, .035) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
        }

        /* =========================
        MAIN LAYOUT
        ========================= */

        .customization-container-dizi {
            position: relative;
            z-index: 2;
            max-width: 1450px;
            margin: auto;
            display: grid;
            grid-template-columns: 34% 66%;
            align-items: center;
            gap: 20px;
        }

        /* =========================
        LEFT CONTENT
        ========================= */

        .left-content-customization-dizi {
            padding: 20px 10px;
        }

        .eyebrow-customization-dizi {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            padding: 8px 10px;
            border-radius: 100px;
            background: rgba(255, 255, 255, .8);
            border: 1px solid rgba(22, 119, 255, .18);
            box-shadow: 0 8px 30px rgba(20, 60, 120, .06);
            color: #1769e0;
            font-size: 10px;
            font-weight: 700;
            /*letter-spacing: .08em;*/
            text-transform: uppercase;
            margin-bottom: 28px;
        }

        .eyebrow-dot-customization-dizi {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: linear-gradient(135deg, #1677ff, #54c88a);
            box-shadow: 0 0 12px rgba(22, 119, 255, .5);
        }

       .left-content-customization-dizi h2 {
            font-size: clamp(30px, 5vw, 45px);
            line-height: .98;
           /* letter-spacing: -0.01em;*/
            font-weight: 700;
            margin-bottom: 28px;
        }

       .left-content-customization-dizi h1 span {
            display: block;
        }

        .gradient-text-customization-dizi {
            background: linear-gradient(100deg, #1677ff, #278be9 45%, #52c88b);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .description-customization-dizi {
            max-width: 500px;
            color: #64748b;
            font-size: 18px;
            line-height: 1.65;
            margin-bottom: 32px;
        }

        /* =========================
        PROCESS CARDS
        ========================= */

        .process-grid-customization-dizi {
            display: grid;
            grid-template-columns: repeat(2, 200px);
            gap: 12px;
        }

        .process-card-customization-dizi {
            position: relative;
            min-height: 76px;
            padding: 13px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .9);
            border: 1px solid #edf0f4;
            box-shadow: 0 12px 30px rgba(31, 57, 89, .07);
            display: flex;
            align-items: center;
            gap: 11px;
            cursor: pointer;
            transition: .35s ease;
        }

        .process-card-customization-dizi:hover,
        .process-card-customization-dizi.active {
            transform: translateY(-5px);
            border-color: rgba(22, 119, 255, .25);
            box-shadow: 0 18px 40px rgba(22, 119, 255, .12);
        }

        .process-icon-customization-dizi {
            width: 37px;
            height: 37px;
            flex-shrink: 0;
            border-radius: 11px;
            display: grid;
            place-items: center;
            font-size: 17px;
            color: white;
        }

        .p1-customization-dizi {
            background: linear-gradient(135deg, #7b61ff, #a678ff);
        }

        .p2-customization-dizi {
            background: linear-gradient(135deg, #4fc98c, #78d99e);
        }

        .p3-customization-dizi {
            background: linear-gradient(135deg, #ff9b40, #ffc064);
        }

        .p4-customization-dizi {
            background: linear-gradient(135deg, #ef72a7, #f48bbd);
        }

        .process-card-customization-dizi strong {
            display: block;
            font-size: 13px;
            margin-bottom: 4px;
        }

        .process-card-customization-dizi small {
            font-size: 12px;
            color: #64748b;
        }

        /* =========================
        RIGHT VISUAL
        ========================= */

        .visual-area-customization-dizi {
            position: relative;
            min-height: 720px;
            perspective: 1600px;
        }

        .store-window-customization-dizi {
            position: absolute;
            width: 77%;
            right: 0;
            top: 90px;
            border-radius: 18px;
            overflow: hidden;
            background: white;
            border: 1px solid rgba(18, 33, 58, .08);
            box-shadow:
                0 40px 90px rgba(29, 58, 96, .15),
                0 10px 30px rgba(29, 58, 96, .08);
            transform: rotate(-1.2deg);
            transform: perspective(1600px) rotateY(342deg) rotateX(0deg);
            /*animation: floatStoreCustomizationDizi 6s ease-in-out infinite;*/
        }

        @keyframes floatStoreCustomizationDizi {
            0%, 100% {
                transform: rotate(-1.2deg) translateY(0);
            }

            50% {
                transform: rotate(-.4deg) translateY(-10px);
            }
        }

        .store-top-customization-dizi {
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(90deg, #245be9, #3e8be8, #55bf85);
            color: white;
            font-size: 10px;
            font-weight: 600;
           /* letter-spacing: .05em;*/
        }

        .store-nav-customization-dizi {
            height: 72px;
            display: flex;
            align-items: center;
            padding: 0 28px;
            border-bottom: 1px solid #f0f1f3;
            gap: 35px;
        }

        .dizi-logo-customization-dizi {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 23px;
            font-weight: 700;
           /* letter-spacing: -1px;*/
        }

        .logo-mark-customization-dizi {
            width: 32px;
            height: 32px;
            border-radius: 9px 14px 14px 9px;
            /*background: linear-gradient(145deg, #56ca8e, #1778ed);*/
            position: relative;
            overflow: hidden;
        }

        .logo-mark-customization-dizi::after {
            content: "";
            position: absolute;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 0 12px 12px 0;
            left: 8px;
            top: 7px;
            opacity: .9;
        }

        .nav-links-customization-dizi {
            display: flex;
            gap: 28px;
            margin-left: auto;
            font-size: 13px;
            color: #333b49;
        }

        .nav-icons-customization-dizi {
            display: flex;
            gap: 15px;
            font-size: 17px;
        }

        .store-hero-customization-dizi {
            height: 350px;
            position: relative;
            overflow: hidden;
            background:
                linear-gradient(90deg, rgba(249, 236, 222, .95), rgba(247, 232, 216, .55)),
                linear-gradient(120deg, #f6ddc5, #efe3d6);
        }

        .store-hero-customization-dizi::after {
            content: "";
            position: absolute;
            width: 260px;
            height: 100%;
            right: 50px;
            top: 0;
            background:
                radial-gradient(circle at 45% 40%, #d9b69c 0 22%, transparent 23%),
                radial-gradient(circle at 52% 58%, #c99d7f 0 30%, transparent 31%);
            opacity: .55;
            filter: blur(3px);
        }

        .hero-copy-customization-dizi {
            position: absolute;
            left: 55px;
            top: 80px;
            z-index: 2;
        }

        .hero-copy-customization-dizi small {
            font-size: 10px;
           /* letter-spacing: .3em;*/
            font-weight: 700;
        }

        .hero-copy-customization-dizi h2 {
            font-size: 45px;
            line-height: 1;
            font-weight: 400;
            margin: 17px 0;
        }

        .shop-button-customization-dizi {
            display: inline-block;
            padding: 12px 22px;
            border-radius: 4px;
            background: #080808;
            color: white;
            font-size: 10px;
            font-weight: 700;
        }

        /* =========================
        CUSTOMIZATION PANEL
        ========================= */

        .customizer-customization-dizi {
            position: absolute;
            left: 0;
            top: 55px;
            width: 310px;
            max-height: 590px;
            overflow: hidden;
            border-radius: 20px;
            background: rgba(255, 255, 255, .94);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(15, 40, 70, .08);
            box-shadow: 0 35px 80px rgba(26, 50, 78, .18);
            z-index: 10;
            /*animation: customizerFloatCustomizationDizi 5s ease-in-out infinite;*/
            transform: perspective(1600px) rotateY(12deg) rotateX(1deg);
        }

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

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

        .customizer-header-customization-dizi {
            height: 60px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            gap: 12px;
            border-bottom: 1px solid #edf0f3;
        }

        .mini-logo-customization-dizi {
            width: 27px;
            height: 27px;
            border-radius: 8px;
            /*background: linear-gradient(145deg, #55c88b, #1678ee);*/
            display:flex;
        }

        .customizer-header-customization-dizi strong {
            font-size: 14px;
        }

        .customizer-body-customization-dizi {
            padding: 16px;
        }

        .panel-section-customization-dizi {
            padding: 16px;
            margin-bottom: 13px;
            border: 1px solid #edf0f4;
            border-radius: 13px;
            background: #fff;
        }

        .panel-title-customization-dizi {
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .category-row-customization-dizi {
            padding: 10px;
            border-radius: 8px;
            background: #f0f6ff;
            border-left: 3px solid #4c8cff;
            font-size: 13px;
            margin-bottom: 7px;
        }

        .sub-row-customization-dizi {
            font-size: 10px;
            color: #677385;
            padding: 6px 10px;
        }

        .products-customization-dizi {
            display: flex;
            gap: 8px;
        }

        .product-customization-dizi {
            width: 52px;
            height: 60px;
            border-radius: 8px;
            overflow: hidden;
            background: linear-gradient(135deg, #f0dfd3, #ead8c8);
            position: relative;
        }

        .product-customization-dizi:nth-child(2) {
            background: linear-gradient(135deg, #f1d7db, #dcb7bf);
        }

        .product-customization-dizi:nth-child(3) {
            background: linear-gradient(135deg, #d9dced, #9ea9d4);
        }

        .product-customization-dizi:nth-child(4) {
            background: linear-gradient(135deg, #e5cba4, #d9a967);
        }

        .product-customization-dizi::after {
            content: "";
            position: absolute;
            width: 20px;
            height: 38px;
            left: 16px;
            bottom: 0;
            background: rgba(255, 255, 255, .65);
            border-radius: 50% 50% 4px 4px;
        }

        .variation-row-customization-dizi {
            display: flex;
            gap: 6px;
        }

        .variant-customization-dizi {
            padding: 6px 10px;
            border: 1px solid #e4e7ec;
            border-radius: 6px;
            font-size: 10px;
            cursor: pointer;
        }

        .variant-customization-dizi.active {
            color: #1677ff;
            border-color: #8db7ff;
            background: #f1f6ff;
        }

        .colors-customization-dizi {
            display: flex;
            gap: 10px;
            margin-top: 10px;
        }

        .color-customization-dizi {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 0 0 1px #ddd;
        }

        .color-customization-dizi:nth-child(1) {
            background: #f29b9b;
        }

        .color-customization-dizi:nth-child(2) {
            background: #368b98;
        }

        .color-customization-dizi:nth-child(3) {
            background: #1677ff;
        }

        .color-customization-dizi:nth-child(4) {
            background: #111;
        }

        /* =========================
        CONNECTION LINES
        ========================= */

        .connection-customization-dizi {
            position: absolute;
            z-index: 20;
            width: 90px;
            height: 90px;
            pointer-events: none;
        }

        .connection-customization-dizi::before {
            content: "";
            position: absolute;
            inset: 0;
            border-top: 1.5px dashed #5493ff;
            border-radius: 50%;
            transform: rotate(20deg);
            animation: dashMoveCustomizationDizi 2s linear infinite;
        }

        .connection-customization-dizi.one {
            left: 285px;
            top: 135px;
        }

        .connection-customization-dizi.two {
            left: 285px;
            top: 285px;
        }

        .connection-customization-dizi.three {
            left: 285px;
            top: 440px;
            transform: rotate(8deg);
        }

        .connection-customization-dizi.four {
            left: 285px;
            top: 580px;
        }

        @keyframes dashMoveCustomizationDizi {
            to {
                stroke-dashoffset: -20px;
            }
        }

        .node-customization-dizi {
            position: absolute;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid #4d91ff;
            box-shadow: 0 0 15px rgba(77, 145, 255, .7);
            z-index: 30;
        }

        .node-customization-dizi.n1 {
            left: 305px;
            top: 146px;
        }

        .node-customization-dizi.n2 {
            left: 305px;
            top: 297px;
            border-color: #4bc798;
        }

        .node-customization-dizi.n3 {
            left: 305px;
            top: 450px;
            border-color: #ff9d42;
        }

        .node-customization-dizi.n4 {
            left: 305px;
            top: 592px;
            border-color: #e878ad;
        }

       

        .benefits-customization-dizi {
            display: flex;
            justify-content: space-around;
            padding: 22px 30px;
            border-top: 1px solid #eee;
        }

        .benefit-customization-dizi {
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 10px;
        }

        .benefit-icon-customization-dizi {
            font-size: 20px;
        }

        .benefit-customization-dizi strong {
            display: block;
            font-size: 13px;
        }

        .benefit-customization-dizi small {
            color: #777;
        }

   

        .live-card-customization-dizi {
            position: absolute;
            z-index: 30;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            min-width: 570px;
            padding: 17px 28px;
            border-radius: 100px;
            background: rgba(255, 255, 255, .95);
            border: 1px solid rgba(25, 50, 80, .07);
            box-shadow: 0 20px 50px rgba(20, 40, 70, .13);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 13px;
            font-size: 16px;
            backdrop-filter: blur(15px);
            animation: statusFloatCustomizationDizi 4s ease-in-out infinite;
        }

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

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

        .status-icon-customization-dizi {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #4fc486;
            color: white;
            display: grid;
            place-items: center;
            font-weight: bold;
            box-shadow: 0 8px 20px rgba(79, 196, 134, .3);
        }

        .live-card-customization-dizi strong {
            color: #1677ff;
        }

       

        .live-label-customization-dizi {
            position: absolute;
            right: 3%;
            top: 18%;
            padding: 10px 15px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 12px 35px rgba(20, 50, 80, .12);
            font-size: 13px;
            opacity: 0;
            transform: translateY(10px);
            transition: .4s;
            z-index: 40;
        }

        .live-label-customization-dizi.show {
            opacity: 1;
            transform: translateY(0);
        }

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

        @media(max-width:1100px) {

            .customization-container-dizi {
                grid-template-columns: 1fr;
            }

            .left-content-customization-dizi {
                text-align: center;
            }

            .description-customization-dizi {
                margin-left: auto;
                margin-right: auto;
            }

            .process-grid-customization-dizi {
                margin: auto;
            }

            .visual-area-customization-dizi {
                min-height: 700px;
                transform: scale(.9);
                transform-origin: top center;
            }
        }

        @media(max-width:700px) {

            .hero-customization-dizi {
                padding: 22px 20px;
            }

            h1 {
                font-size: 45px;
               /* letter-spacing: -2px;*/
            }

            .description-customization-dizi {
                font-size: 16px;
            }

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

            .visual-area-customization-dizi {
                min-height: 540px;
                transform: scale(.65);
                width: 153%;
                margin-left: -26%;
            }

            .customizer-customization-dizi {
                left: 0;
                width: 230px;
            }

            .store-window-customization-dizi {
                right: -50px;
            }

            .live-card-customization-dizi {
                min-width: 90%;
                font-size: 12px;
            }
        }
        /*customization sec end*/
        .new-dizi-header-product-column-title {
    font-size: 18px;
    font-weight: 700;
    color: #202124;
    padding: 0 0 14px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
}
 .growth-section {
      min-height: calc(100vh - 94px);
      padding: 65px 5% 80px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(
          circle at 50% 42%,
          rgba(35,116,255,0.055),
          transparent 36%
        ),
        #ffffff;
    }
    .background-dots {
      position: absolute;
      width: 140px;
      height: 170px;
      background-image: radial-gradient(
        #c9d9ff 1.7px,
        transparent 1.7px
      );
      background-size: 18px 18px;
      opacity: 0.65;
      pointer-events: none;
    }

    .dots-left {
      left: -15px;
      top: 150px;
    }

    .dots-right {
      right: 10px;
      top: 70px;
    }

    .dots-bottom {
      right: 30px;
      bottom: -20px;
      opacity: 0.45;
    }


    /* Curved lines */

    .curve {
      position: absolute;
      width: 420px;
      height: 420px;
      border-radius: 50%;
      border: 1px solid rgba(57,123,255,0.12);
      pointer-events: none;
    }

    .curve::before,
    .curve::after {
      content: "";
      position: absolute;
      inset: 30px;
      border: 1px solid rgba(57,123,255,0.08);
      border-radius: inherit;
    }

    .curve::after {
      inset: 60px;
    }

    .curve-left {
      left: -300px;
      top: -180px;
    }

    .curve-right {
      right: -300px;
      bottom: -260px;
    }


    /* Floating particles */

    .particle {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2c7cff;
      opacity: 0.45;
      animation: floating 4s ease-in-out infinite;
    }

    .particle-1 {
      left: 14%;
      top: 24%;
    }

    .particle-2 {
      right: 15%;
      top: 28%;
      animation-delay: 1s;
    }

    .particle-3 {
      left: 20%;
      bottom: 16%;
      animation-delay: 2s;
    }

    .particle-4 {
      right: 22%;
      bottom: 18%;
      animation-delay: 1.5s;
    }

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

      50% {
        transform: translateY(-14px);
      }
    }
    .section-heading {
      text-align: center;
      max-width: 1000px;
      margin: 0 auto 58px;
      position: relative;
      z-index: 5;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 16px;
      border: 1px solid rgba(31,112,255,0.18);
      border-radius: 30px;
      font-size: 13px;
      font-weight: 600;
      color: #1c6ff5;
      background: rgba(239,246,255,0.7);
      margin-bottom: 20px;
    }
    .eyebrow-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #18b879;
      box-shadow: 0 0 12px rgba(24,184,121,0.7);
    }
    .section-heading h1 {
      font-size: clamp(30px,3.2vw,45px);
      line-height: 1.08;
      font-weight: 700;
     /* letter-spacing: -2.5px;*/
      color: #212529;
    }
    .gradient-text {
      background: linear-gradient(
        90deg,
        #1769ff,
        #217df1,
        #13a9b0,
        #1ebc7a
      );
      background-size: 250% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: gradientMove 5s linear infinite;
    }
    @keyframes gradientMove {
      0% {
        background-position: 0% center;
      }

      100% {
        background-position: 250% center;
      }
    }
    .section-heading p {
      margin-top: 18px;
      font-size: 18px;
      color: #64748b;
      line-height: 1.6;
    }
    .stats-container {
      width: min(1280px, 100%);
      margin: auto;
      position: relative;
      z-index: 5;
    }
    .stats-top {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
      margin-bottom: 28px;
    }
    .stats-bottom {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }
    .stat-card {
      position: relative;
      min-height: 325px;
      padding: 34px 28px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(37,73,135,0.10);
      border-radius: 24px;
      box-shadow: 0 15px 45px rgba(30,71,135,0.08);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      transform-style: preserve-3d;
      opacity: 0;
      transform: translateY(40px);
      transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.2,.8,.2,1),
        box-shadow .35s ease,
        border-color .35s ease;
    }
    .stat-card.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .stat-card::before {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      border-radius: 50%;
      background: radial-gradient(
        circle,
        rgba(32,120,255,0.08),
        transparent 70%
      );
      top: -80px;
      right: -70px;
      transition: 0.5s ease;
    }
    .stat-card:hover {
      transform:
        translateY(-10px)
        perspective(900px)
        rotateX(2deg)
        rotateY(-2deg);
         color: #fff !important;
      border: none;
       background: linear-gradient(135deg, #1767ff, #44c98b);
      border-color: transparent;
      box-shadow:
        0 30px 80px rgba(101,67,229,0.35);
    }
    .stat-card:hover::before {
      transform: scale(1.5);
       background:
        radial-gradient(
          circle,
          rgba(255,255,255,0.17),
          transparent 70%
        );
    }
    .stat-card:hover .stat-description {
  color: #fff;
}

.stat-card:hover .number,
.stat-card:hover .number.purple,
.stat-card:hover .number.green,
.stat-card:hover .number.orange {
  color: #fff;
}

.stat-card:hover .icon-circle {
  background: #fff;
  color: #1767ff;
}
    .featured {
      color: white;
      border: none;
       background: linear-gradient(135deg, #1767ff, #44c98b);
      box-shadow:
        0 25px 60px rgba(102,73,229,0.25);
    }
    .featured::before {
      width: 300px;
      height: 300px;
      background:
        radial-gradient(
          circle,
          rgba(255,255,255,0.17),
          transparent 70%
        );
    }
    .featured:hover {
      border-color: transparent;
      box-shadow:
        0 30px 80px rgba(101,67,229,0.35);
    }
    .icon-circle {
      width: 82px;
      height: 82px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24px;
      background: #eef5ff;
      color: #1769f5;
      box-shadow:
        inset 0 0 0 1px rgba(34,109,240,0.04);

      transition: 0.4s ease;
    }
    .stat-card:hover .icon-circle {
      transform: translateY(-5px) scale(1.08) rotate(4deg);
    }
    .icon-circle svg {
      width: 36px;
      height: 36px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .icon-purple {
      background: #f2eaff;
      color: #773ee9;
    }
    .icon-green {
      background: #e8f8f1;
      color: #13a579;
    }
    .icon-orange {
      background: #fff5df;
      color: #ee9700;
    }
    .icon-blue {
      background: #eaf3ff;
      color: #1769f5;
    }
    .featured .icon-circle {
      background: rgba(255,255,255,0.18);
      color: white;
      backdrop-filter: blur(5px);
    }
    .number {
      font-size: clamp(30px,3.2vw,45px);
      line-height: 1;
      font-weight: 700;
     /* letter-spacing: -2px;*/
      color: #1768e8;
      margin-bottom: 20px;
    }
    .featured .number {
      color: white;
    }
    .number.purple {
      color: #7139df;
    }
    .number.green {
      color: #079e73;
    }
    .number.orange {
      color: #ec9700;
    }

    .card-line {
      width: 42px;
      height: 3px;
      border-radius: 10px;
      background: currentColor;
      margin: -8px auto 18px;
      opacity: .8;
    }
    .stat-description {
      max-width: 280px;
      font-size: 16px;
      line-height: 1.55;
      color: #64748b;
    }
    .featured .stat-description {
      color: rgba(255,255,255,0.92);
    }
    .shine {
      position: absolute;
      width: 80px;
      height: 150%;
      top: -25%;
      left: -150px;

      background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
      );
      transform: rotate(18deg);
      pointer-events: none;
    }
    .stat-card:hover .shine {
      animation: shine 1.2s ease;
    }
    @keyframes shine {
      from {
        left: -150px;
      }
      to {
        left: 120%;
      }
    }
    @media(max-width: 1100px) {
      .stats-top {
        grid-template-columns: repeat(3,1fr);
      }
      .stats-bottom {
        grid-template-columns: repeat(2,1fr);
      }
      .stat-card {
        min-height: 290px;
      }
    }
    @media(max-width: 800px) {
      .growth-section {
        padding: 22px 20px 22px;
      }
      .section-heading {
        margin-bottom: 40px;
      }
      .section-heading h1 {
       /* letter-spacing: -1.5px;*/
      }
      .stats-top {
        grid-template-columns: 1fr;
      }
      .stats-bottom {
        grid-template-columns: 1fr;
      }
      .stat-card {
        min-height: 280px;
      }
      .background-dots {
        opacity: .3;
      }
    }

    @media(max-width: 450px) {
      .section-heading h1 {
        font-size: 30px;
      }
      .section-heading p {
        font-size: 15px;
      }
      .number {
        font-size: 30px;
      }
      .stat-card {
        border-radius: 20px;
      }
    }
          
   .qpe-trust {
        width: 100%;
        padding: 22px 20px 22px;
        background:
          radial-gradient(700px 420px at 8% 0%, rgba(68, 201, 139, 0.10), transparent 60%),
          radial-gradient(760px 460px at 96% 10%, rgba(23, 103, 255, 0.10), transparent 60%),
          linear-gradient(180deg, var(--cream-2) 0%, var(--cream) 100%);
        position: relative;
        overflow: hidden;
        color: var(--ink);
      }

      /* decorative dotted grid + blob, echoing reference art */
      .qpe-trust .deco-dots {
        position: absolute;
        top: 36px;
        left: 28px;
        width: 150px;
        height: 110px;
        background-image: radial-gradient(circle, rgba(11, 42, 92, 0.16) 1.6px, transparent 1.6px);
        background-size: 16px 16px;
        opacity: .55;
        pointer-events: none;
      }

      .qpe-trust .deco-blob {
        position: absolute;
        top: -120px;
        right: -140px;
        width: 420px;
        height: 420px;
        background: linear-gradient(135deg, rgba(23, 103, 255, 0.16), rgba(68, 201, 139, 0.10));
        border-radius: 44% 56% 62% 38% / 46% 40% 60% 54%;
        filter: blur(2px);
        pointer-events: none;
      }

      .qpe-trust .deco-swirl {
        position: absolute;
        top: 60px;
        right: 60px;
        width: 70px;
        height: 70px;
        opacity: .5;
        pointer-events: none;
      }

      .qpe-trust .deco-heart {
        position: absolute;
        top: 150px;
        left: 15%;
        width: 46px;
        opacity: .65;
        pointer-events: none;
      }

      .qpe-trust .deco-sparkle {
        position: absolute;
        top: 150px;
        right: 16%;
        width: 60px;
        opacity: .8;
        pointer-events: none;
      }

      .qpe-trust .wrap {
        max-width: 1180px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
      }

      /* ---- Header ---- */
      .qpe-trust .badge {
        display: flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        margin: 0 auto 28px;
        padding: 9px 20px 9px 16px;
        border-radius: 999px;
      }

      .qpe-trust .badge svg {
        flex: none;
      }

      .qpe-trust h2 {
        text-align: center;
        font-weight: 600;
        font-size: clamp(30px, 3.2vw, 45px);
        line-height: 1.08;
        /*letter-spacing: -0.01em;*/
        margin: 0 0 18px;
        color: #212529;
      }

      .qpe-trust h2 .grad {
        background: linear-gradient(135deg, #1767ff 0%, #44c98b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }

      .qpe-trust .subhead {
        text-align: center;
        max-width: 560px;
        margin: 0 auto 48px;
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink-soft);
      }

      .qpe-trust .subhead b {
        color: #1767FF;
        font-weight: 700;
      }

      /* ---- Carousel card ---- */
      .qpe-trust .stage {
        position: relative;
        background: #FFFFFF;
        border: 1px solid #D1D5DB;
        border-radius: 12px;
        box-shadow: 0 24px 60px -20px rgba(11, 42, 92, 0.16), 0 2px 8px rgba(11, 42, 92, 0.04);
        padding: 44px 30px 34px;
      }

      .qpe-trust .quote-mark {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        margin: 0 auto 18px;
        background: linear-gradient(135deg, #1767ff, #44c98b);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 22px -6px rgba(23, 103, 255, 0.55);
      }

      .qpe-trust .quote-mark svg {
        width: 22px;
        height: 22px;
      }

      .qpe-trust .tagline {
        text-align: center;
        font-style: italic;
        font-weight: 500;
        font-size: 19px;
        color: #0B2A5C;;
        margin: 0 0 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
      }

      .qpe-trust .tagline .spark {
        font-size: 14px;
        color: #44C98B;
        opacity: .7;
      }

      .qpe-trust .carousel {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
      }

      .qpe-trust .nav-btn {
        flex: none;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        border: 1px solid #D1D5DB;
        background: #FFFFFF;
        box-shadow: 0 8px 18px rgba(11, 42, 92, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0E4FD1;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
        z-index: 5;
      }

      .qpe-trust .nav-btn:hover {
        background: linear-gradient(135deg, #1767ff, #44c98b);
        color: #FFFFFF;
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -6px rgba(23, 103, 255, 0.45);
      }

      .qpe-trust .nav-btn svg {
        width: 18px;
        height: 18px;
      }

      .qpe-trust .track-mask {
        flex: 1;
        overflow: hidden;
        padding: 14px 0;
      }

      .qpe-trust .track {
        display: flex;
        align-items: center;
        transition: transform .5s cubic-bezier(.65, 0, .35, 1);
        will-change: transform;
      }

      .qpe-trust .logo-card {
        flex: none;
        width: 118px;
        height: 118px;
        margin: 0 9px;
        background: #FFFFFF;
        border: 1px solid #D1D5DB;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        box-shadow: 0 2px 6px rgba(11, 42, 92, 0.04);
        transition: transform .5s cubic-bezier(.65, 0, .35, 1), box-shadow .35s ease, border-color .35s ease, opacity .35s ease;
        opacity: .55;
      }

      .qpe-trust .logo-card img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        filter: grayscale(45%);
        transition: filter .35s ease;
      }

      .qpe-trust .logo-card.is-active {
        width: 158px;
        height: 158px;
        opacity: 1;
        border-color: #44C98B;
        box-shadow: 0 22px 40px -14px rgba(23, 103, 255, 0.35);
        transform: translateY(-6px);
      }

      .qpe-trust .logo-card.is-active img {
        filter: grayscale(0%);
      }

      .qpe-trust .logo-card.is-adjacent {
        opacity: .8;
      }

      .qpe-trust .dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 30px;
      }

      .qpe-trust .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #D9D5EE;
        border: none;
        cursor: pointer;
        padding: 0;
        transition: all .25s ease;
      }

      .qpe-trust .dot.is-active {
        width: 22px;
        border-radius: 5px;
        background: linear-gradient(135deg, #1767ff, #44c98b);
      }

      /* ---- Stat bar ---- */
      .qpe-trust .stats {
        margin: 44px auto 0;
        max-width: 1080px;
        background: #FFFFFF;
        border: 1px solid #D1D5DB;
        border-radius: 22px;
        box-shadow: 0 14px 34px -18px rgba(11, 42, 92, 0.14);
        padding: 26px 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      .qpe-trust .stat {
        display: flex;
        align-items: center;
        gap: 13px;
        padding: 6px 18px;
        border-right: 1px solid #D1D5DB;
      }

      .qpe-trust .stat:last-child {
        border-right: none;
      }

      .qpe-trust .stat-icon {
        flex: none;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .qpe-trust .stat-icon svg {
        width: 20px;
        height: 20px;
      }

      .qpe-trust .stat-icon.i-indigo {
        background: #EDEBFB;
        color: #1767FF;
      }

      .qpe-trust .stat-icon.i-green {
        background: #E7F6EC;
        color: var(--green);
      }

      .qpe-trust .stat-icon.i-violet {
        background: #F1E9FC;
        color: var(--violet-500);
      }

      .qpe-trust .stat-icon.i-gold {
        background: #FBF1DC;
        color: var(--gold);
      }

      .qpe-trust .stat-value {
        
        font-weight: 700;
        font-size: 19px;
        color: #0B2A5C;;
        line-height: 1.1;
      }

      .qpe-trust .stat-label {
        font-size: 12.5px;
        color: var(--ink-soft);
        margin-top: 2px;
      }

      /* ---- Bottom tagline ---- */
      .qpe-trust .footline {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        margin-top: 38px;
        font-size: 17px;
        color: var(--ink-soft);
        text-align: center;
        flex-wrap: wrap;
      }

      .qpe-trust .footline svg {
        width: 26px;
        height: 26px;
        color: #44C98B;
      }

      .qpe-trust .footline .em {
        font-style: italic;
        font-weight: 500;
        color: #1767FF;
        position: relative;
      }

      .qpe-trust .footline .em::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -3px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(135deg, #1767ff, #44c98b);
      }

      /* ---- Responsive ---- */
      @media (max-width:900px) {
        .qpe-trust {
          padding: 22px 16px 22px;
        }

        .qpe-trust .stage {
          padding: 18px 14px 20px;
          border-radius: 22px;
        }

        .qpe-trust .logo-card {
          width: 84px;
          height: 84px;
          margin: 0 6px;
          padding: 14px;
        }

        .qpe-trust .logo-card.is-active {
          width: 118px;
          height: 118px;
        }

        .qpe-trust .nav-btn {
          width: 38px;
          height: 38px;
        }

        .qpe-trust .stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 18px 0;
        }

        .qpe-trust .stat {
          border-right: none;
          padding: 6px 10px;
        }

        .qpe-trust .stat:nth-child(odd) {
          border-right: 1px solid #D1D5DB;
        }

        .qpe-trust .stat:nth-child(1),
        .qpe-trust .stat:nth-child(2) {
          border-bottom: 1px solid #D1D5DB;
          padding-bottom: 18px;
        }

        .qpe-trust .deco-blob {
          width: 280px;
          height: 280px;
          top: -90px;
          right: -100px;
        }
      }

      @media (max-width:560px) {
        .qpe-trust h2 {
          font-size: 30px;
        }

        .qpe-trust .subhead {
          font-size: 15px;
          margin-bottom: 36px;
        }

        .qpe-trust .tagline {
          font-size: 16px;
          margin-bottom: 24px;
        }

        .qpe-trust .logo-card {
          width: 64px;
          height: 64px;
          margin: 0 4px;
          padding: 10px;
          border-radius: 12px;
        }

        .qpe-trust .logo-card.is-active {
          width: 92px;
          height: 92px;
        }

        .qpe-trust .nav-btn {
          width: 34px;
          height: 34px;
        }

        .qpe-trust .nav-btn svg {
          width: 15px;
          height: 15px;
        }

        .qpe-trust .stats {
          padding: 20px 14px;
        }

        .qpe-trust .stat-value {
          font-size: 16px;
        }

        .qpe-trust .stat-label {
          font-size: 13px;
        }

        .qpe-trust .stat-icon {
          width: 36px;
          height: 36px;
        }

        .qpe-trust .footline {
          font-size: 14px;
        }
      }
.owl-new-class {
        width: 100%;
        padding: 22px 20px 22px;
        background:
          radial-gradient(720px 440px at 4% 0%, rgba(23, 103, 255, 0.08), transparent 60%),
          radial-gradient(760px 460px at 98% 12%, rgba(68, 201, 139, 0.10), transparent 60%),
          linear-gradient(180deg, #F1F6FB 0%, #FBF9F4 100%);
        position: relative;
        overflow: hidden;
        color: #000000;
      }
      .owl-new-class .deco-dots {
        position: absolute;
        top: 40px;
        right: 32px;
        width: 140px;
        height: 100px;
        background-image: radial-gradient(circle, rgba(11, 42, 92, 0.14) 1.6px, transparent 1.6px);
        background-size: 15px 15px;
        opacity: .55;
        pointer-events: none;
      }
      .owl-new-class .deco-blob {
        position: absolute;
        top: -140px;
        left: -160px;
        width: 440px;
        height: 440px;
        background: linear-gradient(135deg, rgba(23, 103, 255, 0.14), rgba(68, 201, 139, 0.10));
        border-radius: 42% 58% 60% 40% / 48% 42% 58% 52%;
        filter: blur(2px);
        pointer-events: none;
      }
      /* ---- Header ---- */
      .owl-new-class .flex.flex-col.items-center {
        position: relative;
        z-index: 2;
      }
      .owl-new-class .eyebrow {
        display: flex;
        align-items: center;
        gap: 8px;
        width: max-content;
        margin: 0 auto 22px;
        padding: 9px 20px 9px 16px;
        border-radius: 999px;
        background: #FFFFFF;
        border: 1px solid #E4E9F5;
        box-shadow: 0 6px 18px rgba(11, 42, 92, 0.06);
        font-weight: 700;
        font-size: 12.5px;
       /* letter-spacing: .09em;*/
        text-transform: uppercase;
        color: #0E4FD1;
      }
      .owl-new-class .eyebrow svg {
        flex: none;
      }
      .owl-new-class h2 {
        font-weight: 600 !important;
        color: #0B2A5C;
       /* letter-spacing: -0.01em;*/
      }
      .owl-new-class h2 .grad-word {
        background: linear-gradient(135deg, #1767ff 0%, #44c98b 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .owl-new-class .subhead {
        text-align: center;
        max-width: 520px;
        margin: 0 auto 0;
        font-size: 16px;
        line-height: 1.6;
        color: #64748b;
      }
      /* ---- Swiper shell ---- */
      .owl-new-class .container {
        position: relative;
        z-index: 2;
        max-width: 1200px;
        margin: 0 auto;
        padding-top: 52px;
      }
      .testimonial-swiper {
        padding: 14px 4px 56px;
      }
      .testimonial-swiper .swiper-wrapper {
        align-items: stretch;
      }
      .testimonial-swiper .swiper-slide {
        height: auto;
        display: flex;
      }
      /* ---- Card ---- */
      .testimonial-card {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        background: #FFFFFF;
        border: 1px solid #E4E9F5;
        border-radius: 12px;
        padding: 34px 30px 28px;
        box-shadow: 0 18px 44px -22px rgba(11, 42, 92, 0.16), 0 2px 8px rgba(11, 42, 92, 0.03);
        overflow: hidden;
        transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
      }
      .testimonial-card:hover {
        transform: translateY(-6px);
        border-color: #C9D8FA;
        box-shadow: 0 28px 60px -20px rgba(11, 42, 92, 0.22), 0 4px 12px rgba(11, 42, 92, 0.05);
      }
      .testimonial-card::before {
        content: "\201C";
        position: absolute;
        top: -18px;
        right: 18px;
        font-size: 130px;
        line-height: 1;
        color: rgba(23, 103, 255, 0.07);
        pointer-events: none;
        z-index: 0;
      }
      .testimonial-card>* {
        position: relative;
        z-index: 1;
      }
      .testimonial-card .brand-logo {
        height: 32px;
        display: flex;
        align-items: center;
        margin-bottom: 14px;
      }
      .testimonial-card .brand-logo img {
        max-height: 100%;
        max-width: 128px;
        object-fit: contain;
      }
      .testimonial-card h3::before {
        content: "\2605 \2605 \2605 \2605 \2605";
        display: block;
        color: #FFD700;
        font-size: 13px;
      /*  letter-spacing: 3px;*/
        margin-bottom: 12px;
      }
      .testimonial-card h3 {
        font-style: italic;
        font-weight: 500;
        font-size: 20px;
        line-height: 1.32;
        color: #0E4FD1;
        margin: 0 0 12px;
      }
      .testimonial-card p {
        flex: 1;
        font-size: 14.5px;
        line-height: 1.72;
        color: #6B7280;
        margin: 0 0 22px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 6;
        line-clamp: 6;
        overflow: hidden;
      }
      .testimonial-card .user {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        display: flex;
        align-items: center;
        gap: 13px;
      }
      .testimonial-card .user-img {
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        padding: 2px;
        background: linear-gradient(135deg, #1767ff, #44c98b);
      }
      .testimonial-card .user-img img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
        background: #FFFFFF;
        border: 2px solid #FFFFFF;
      }
      .testimonial-card .user strong {
        display: block;
        font-weight: 700;
        font-size: 14px;
        color: #0E4FD1;
      }
      .testimonial-card .user span {
        display: block;
        font-size: 12.5px;
        color: #6B7280;
        margin-top: 1px;
      }
      .testimonial-swiper .swiper-pagination {
       position: unset !important;
        bottom: 0 !important;
      }
      .testimonial-swiper .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        background: #D6DEF2;
        opacity: 1;
        transition: all .25s ease;
      }
      .testimonial-swiper .swiper-pagination-bullet-active {
        width: 22px;
        border-radius: 5px;
        background: linear-gradient(90deg, #1767ff, #44c98b);
      }
      .owl-new-class .swiper-nav-btn {
        position: absolute;
        top: 42%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: #FFFFFF;
        border: 1px solid #E4E9F5;
        box-shadow: 0 10px 22px rgba(11, 42, 92, 0.10);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #0E4FD1;
        z-index: 10;
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
      }
      .owl-new-class .swiper-nav-btn:hover {
        background: linear-gradient(135deg, #1767ff, #44c98b);
        color: #FFFFFF;
        box-shadow: 0 14px 26px -6px rgba(23, 103, 255, 0.45);
      }
      .owl-new-class .swiper-nav-btn svg {
        width: 18px;
        height: 18px;
      }
      .owl-new-class .nav-prev {
        left: -8px;
      }
      .owl-new-class .nav-next {
        right: -8px;
      }
      .owl-new-class .swiper-nav-btn.swiper-button-disabled {
        opacity: .35;
        cursor: default;
      }
      /* ---- Responsive ---- */
      @media (max-width: 1280px) {
        .owl-new-class .nav-prev {
          left: 4px;
        }
        .owl-new-class .nav-next {
          right: 4px;
        }
      }
      @media (max-width: 900px) {
        .owl-new-class {
          padding: 68px 16px 60px;
        }
        .owl-new-class .container {
          padding-top: 40px;
        }
        .testimonial-card {
          padding: 28px 22px 24px;
        }
        .owl-new-class .swiper-nav-btn {
          display: none;
        }
      }
      @media (max-width: 560px) {
        .owl-new-class .subhead {
          font-size: 14.5px;
        }
        .testimonial-card h3 {
          font-size: 18px;
        }
        .testimonial-card p {
          font-size: 14px;
          -webkit-line-clamp: 5;
        }
      }
      .hero {
    max-width: 1380px;
    margin: auto;
    min-height: 510px;
    padding: 72px 4.5% 30px;
    display: grid;
    grid-template-columns: .92fr 1.08fr;
    gap: 55px;
    align-items: center;
}
.hero-copy {
    animation: heroIn .9s ease forwards;
}
@keyframes heroIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hero h2 {
    font-size: clamp(30px,5vw,45px);
    line-height: 1.02;
    /*letter-spacing: -3.5px;*/
    font-weight: 700;
    max-width: 700px;
}
.gradient-text {
    background: linear-gradient(
        90deg,
        #1764ed,
        #287df2,
        #23b78d
    );
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: gradientMove 5s linear infinite;
}
@keyframes gradientMove {
    to {
        background-position: 200% center;
    }
}
.hero h2::after {
    content: "";
    display: block;
    width: 58px;
    height: 4px;
    margin-top: 20px;
    border-radius: 20px;
    background: linear-gradient(90deg,#2563eb,#32c58a);
}
.hero-description {
    max-width: 570px;
    margin-top: 25px;
    font-size: 18px;
    line-height: 1.65;
    color: #64748b;
}
.primary-btn {
    margin-top: 30px;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 9px 25px;
    border-radius: 15px;
    border: none;
    cursor: pointer;
    color: white;
    background: linear-gradient(100deg,#1764ed,#25ba89);
    font-size: 15px;
    transition: .35s;
}
.primary-btn span {
    font-size: 20px;
    transition: .3s;
}
.primary-btn:hover {
    background: linear-gradient(100deg,#1764ed,#25ba89);
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(37,99,235,.22);
}
.primary-btn:hover span {
    transform: translateX(5px);
}
.visual-area {
    height: 430px;
    position: relative;
    perspective: 1200px;
}

.visual-glow {
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    right: 50px;
    top: -25px;
    background:
        radial-gradient(circle,
        rgba(57,126,255,.15),
        rgba(60,204,154,.06) 48%,
        transparent 70%);
    animation: breathe 5s ease-in-out infinite;
}
@keyframes breathe {
    0%,100% {
        transform: scale(.95);
        opacity: .7;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}
.store-window {
    position: absolute;
    width: 78%;
    right: 3%;
    top: 40px;
    background: rgba(255,255,255,.94);
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(15,23,42,.13),
        0 5px 20px rgba(37,99,235,.08);
    border: 1px solid rgba(148,163,184,.2);
    transform: rotateY(-5deg) rotateX(2deg);
    transition: transform .5s ease;
    z-index: 4;
}
.visual-area:hover .store-window {
    transform: rotateY(-2deg) rotateX(1deg) translateY(-5px);
}
.window-top {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 15px;
    background: #fafafa;
    border-bottom: 1px solid #edf0f4;
}
.storedot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.storedot:nth-child(1) {
    background: #ff6258;
}
.storedot:nth-child(2) {
    background: #ffbd2e;
}
.storedot:nth-child(3) {
    background: #28c840;
}
.store-content {
    display: grid;
    grid-template-columns: 55px 1fr;
    min-height: 270px;
}
.store-sidebar {
    background: #101827;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding-top: 20px;
}
.side-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: #aebbd0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: .3s;
}
.side-icon.active,
.side-icon:hover {
    background: #2463ee;
    color: white;
    transform: scale(1.1);
}
.store-main {
    background: #fff;
    padding: 20px;
}
.store-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 15px;
}
.store-brand {
    font-weight: 800;
    font-size: 15px;
}
.store-links {
    display: flex;
    gap: 18px;
    color: #677084;
}
.store-banner {
    height: 175px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(
            90deg,
            rgba(240,230,214,.9),
            rgba(228,224,214,.35)
        );
}
.store-banner::before {
    content: "";
    position: absolute;
    right: 5%;
    bottom: -30px;
    width: 190px;
    height: 230px;
    border-radius: 100px 100px 0 0;
    background:
        linear-gradient(
            135deg,
            #d3b493,
            #f0ddd1
        );
}
.banner-copy {
    position: absolute;
    left: 30px;
    top: 38px;
    z-index: 2;
}
.banner-copy small {
   /* letter-spacing: 2px;*/
    font-size: 8px;
}
.banner-copy h3 {
    margin-top: 10px;
    font-family: Georgia,serif;
    font-size: 27px;
    line-height: 1.05;
}
.banner-copy button {
    margin-top: 13px;
    border: none;
    background: #111;
    color: white;
    padding: 8px 13px;
    border-radius: 5px;
    font-size: 9px;
}
.float-card {
    position: absolute;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(148,163,184,.2);
    border-radius: 17px;
    padding: 18px;
    box-shadow: 0 20px 45px rgba(15,23,42,.12);
    backdrop-filter: blur(15px);
    z-index: 7;
}
.revenue-card {
    right: -3%;
    top: 10px;
    width: 180px;
    animation: floatOne 4s ease-in-out infinite;
}
.order-card {
    right: 2%;
    bottom: 20px;
    width: 190px;
    animation: floatTwo 4.5s ease-in-out infinite;
}
.performance-card {
    left: 3%;
    bottom: 5px;
    width: 115px;
    text-align: center;
    animation: floatThree 4.2s ease-in-out infinite;
}
@keyframes floatOne {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes floatTwo {
    0%,100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}
@keyframes floatThree {
    0%,100% {
        transform: translateY(0) rotate(-2deg);
    }
    50% {
        transform: translateY(-9px) rotate(2deg);
    }
}
.card-label {
    font-size: 10px;
    color: #6b7280;
}
.card-number {
    margin-top: 7px;
    font-size: 20px;
    font-weight: 700;
}
.card-growth {
    margin-top: 6px;
    color: #16a36b;
    font-size: 13px;
    font-weight: 600;
}
.graph {
    margin-top: 12px;
    height: 40px;
    position: relative;
    overflow: hidden;
}
.graph svg {
    width: 100%;
    height: 100%;
}
.performance-circle {
    width: 58px;
    height: 58px;
    margin: auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #1764ed;
    background:
        radial-gradient(circle,#fff 58%,transparent 60%),
        conic-gradient(#1764ed 85%,#e6efff 0);
}
.benefits {
    max-width: 1380px;
    margin: 0 auto;
    padding: 10px 1.5% 10px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
}
.benefit-card {
    position: relative;
    min-height: 370px;
    padding: 30px;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(100,116,139,.18);
    border-radius: 19px;
    box-shadow: 0 15px 45px rgba(15,23,42,.045);
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}
.benefit-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.benefit-card:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 25px 55px rgba(15,23,42,.10);
    border-color: rgba(37,99,235,.28);
}
.benefit-card::before {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: -110px;
    right: -80px;
    background: var(--card-color);
    opacity: .06;
    transition: .4s;
}
.benefit-card:hover::before {
    transform: scale(2);
}
.card-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 25px;
    margin-bottom: 22px;
    background: var(--card-bg);
    color: var(--card-color);
}
.benefit-card h3 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    color: #334155;
}
.percentage {
    margin: 7px 0 17px;
    font-size: 43px;
    line-height: 1;
    font-weight: 600;
    color: var(--card-color);
   /* letter-spacing: -2px;*/
}
.benefit-card p {
    color: #64748b;
    font-size: 15px;
    line-height: 1.6;
}
.divider {
    height: 1px;
    background: #dfe4eb;
    margin: 23px 0;
}
.feature {
    display: flex;
    gap: 9px;
    font-size: 15px;
    line-height: 1.5;
    color: #64748b;
}
.check {
    color: var(--card-color);
    font-weight: 800;
}

/* Card themes */
.enterprise {
    --card-color:#2563eb;
    --card-bg:#eef4ff;
}
.nocode {
    --card-color:#16a36b;
    --card-bg:#eafaf3;
}
.proplus {
    --card-color:#7045e8;
    --card-bg:#f2edff;
}
.retail {
    --card-color:#f59e0b;
    --card-bg:#fff6df;
}


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

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

    .hero h2 {
        margin: auto;
    }

    .hero h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .visual-area {
        max-width: 800px;
        width: 100%;
        margin: auto;
    }
    .benefits {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:700px) {
    .hero {
        padding-top: 45px;
    }
    .hero h2 {
        font-size: 30px;
       /* letter-spacing: -2.5px;*/
    }
    .hero-description {
        font-size: 16px;
    }
    .visual-area {
        height: 360px;
        transform: scale(.85);
        transform-origin: top center;
        margin-bottom: -50px;
    }
    .store-window {
        width: 90%;
        right: 5%;
    }
    .revenue-card {
        right: 0;
        top:-50px;
    }
    .performance-card {
        left: 0;
       bottom:-20px;
    }
    .order-card {
        right: 0;
       bottom:-20px;
    }
    .benefits {
        grid-template-columns: 1fr;
        padding: 22px 3.2vw 22px;
    }
    .benefit-card {
        min-height: auto;
    }
}
.brands-section {
    position: relative;
    width: 100%;
    padding: 95px 0 100px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(99, 102, 241, 0.07),
            transparent 35%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 100%
        );
}
.brands-container {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
}
.brands-header {
    max-width: 760px;
    margin: 0 auto 55px;
    text-align: center;
}
.brands-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 800;
   /* letter-spacing: 2px;*/
    color: #6366f1;
}
.brands-eyebrow::before,
.brands-eyebrow::after {
    content: "";
    width: 24px;
    height: 1px;
    background: #818cf8;
}
.brands-header h2 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 45px);
    line-height: 1.08;
   /* letter-spacing: -1.8px;*/
    font-weight: 800;
    color: #212529;
}
.brands-header h2 span {
    display: block;
    background: linear-gradient(100deg, #2463f0, #1f7de9, #25c88c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.brands-header p {
    max-width: 600px;
    margin: 18px auto 0;
    font-size: 18px;
    line-height: 1.7;
    color: #64748b;
}
.brands-marquee {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

/* Left / right fade */
.brands-marquee::before,
.brands-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /*width: 130px;*/
    z-index: 5;
    pointer-events: none;
}
.brands-marquee::before {
    left: 0;
    background: linear-gradient(
        90deg,
        #f8fafc,
        rgba(248, 250, 252, 0)
    );
}
.brands-marquee::after {
    right: 0;
    background: linear-gradient(
        270deg,
        #f8fafc,
        rgba(248, 250, 252, 0)
    );
}
.brands-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 18px;
    animation: brandsScrollLeft 35s linear infinite;
    will-change: transform;
}
.brands-track-reverse {
    animation-name: brandsScrollRight;
    animation-duration: 38s;
}
.brand-item {
    width: 180px;
    height: 92px;
    flex: 0 0 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px 24px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    box-shadow:0 8px 25px rgba(15, 23, 42, 0.035);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
    backdrop-filter: blur(10px);
}
.brand-item img {
    display: block;
    width: auto;
    height: auto;
    max-width: 125px;
    max-height: 48px;
    object-fit: contain;
   /* filter:
        grayscale(100%)
        opacity(0.62);*/
    transition:
        filter 0.3s ease,
        transform 0.3s ease;
}
.brand-item:hover {
    transform: translateY(-4px);
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.08);
}
.brand-item:hover img {
    filter:
        grayscale(0%)
        opacity(1);
    transform: scale(1.06);
}
@keyframes brandsScrollLeft {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
@keyframes brandsScrollRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0);
    }
}
@media (max-width: 900px) {
    .brands-section {
        padding: 75px 0 80px;
    }
    .brands-container {
        width: min(100% - 30px, 760px);
    }
    .brands-header {
        margin-bottom: 40px;
    }
    .brand-item {
        width: 160px;
        height: 82px;
        flex-basis: 160px;
        padding: 15px 20px;
    }
    .brand-item img {
        max-width: 110px;
        max-height: 42px;
    }
    .brands-track {
        gap: 14px;
        animation-duration: 30s;
    }
    .brands-track-reverse {
        animation-duration: 33s;
    }
}
@media (max-width: 600px) {
    .brands-section {
        padding: 60px 0 65px;
    }
    .brands-container {
        width: 100%;
    }
    .brands-header {
        padding: 0 20px;
        margin-bottom: 32px;
    }
    .brands-eyebrow {
        font-size: 10px;
       /* letter-spacing: 1.5px;*/
    }
    .brands-eyebrow::before,
    .brands-eyebrow::after {
        width: 17px;
    }
    .brands-header h2 {
        font-size: 31px;
       /* letter-spacing: -1px;*/
    }
    .brands-header p {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.65;
    }
    .brands-marquee {
        gap: 12px;
    }
    .brand-item {
        width: 135px;
        height: 70px;
        flex-basis: 135px;
        padding: 12px 15px;
        border-radius: 13px;
    }
    .brand-item img {
        max-width: 95px;
        max-height: 35px;
    }
    .brands-track {
        gap: 10px;
        animation-duration: 26s;
    }
    .brands-track-reverse {
        animation-duration: 29s;
    }
    .brands-marquee::before,
    .brands-marquee::after {
        width: 65px;
    }
}
@media (max-width: 380px) {
    .brands-header h2 {
        font-size: 27px;
    }
    .brands-header p {
        font-size: 12px;
    }
    .brand-item {
        width: 120px;
        height: 64px;
        flex-basis: 120px;
        padding: 10px;
    }
    .brand-item img {
        max-width: 85px;
        max-height: 32px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .brands-track {
        animation: none;
    }
    .brand-item,
    .brand-item img {
        transition: none;
    }
}

.integration-section {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 20%,
            rgba(99, 102, 241, 0.09),
            transparent 30%),
        radial-gradient(circle at 85% 80%,
            rgba(124, 58, 237, 0.08),
            transparent 30%),
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fafc 100%);
}
.integration-container {
    width: min(1180px, 100%);
    margin: 0 auto;
}
.integration-header {
    max-width: 720px;
    margin: 0 auto 55px;
    text-align: center;
}
.integration-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 800;
    /*letter-spacing: 2px;*/
    color: #1f7de9;
}
.integration-eyebrow::before,
.integration-eyebrow::after {
    content: "";
    width: 25px;
    height: 1px;
    background: #1f7de9;
}

.integration-header h2 {
    margin: 0;
    font-size: clamp(30px, 3.2vw, 45px);
    line-height: 1.08;
   /* letter-spacing: -1.8px;*/
    font-weight: 800;
    color: #212529;
}
.integration-header h2 span {
    display: block;
    background: linear-gradient(100deg, #2463f0, #1f7de9, #25c88c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.integration-header p {
    max-width: 600px;
    margin: 18px auto 0;
    font-size: 18px;
    line-height: 1.7;
    color: #64748b;
}
.integration-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.integration-card {
    position: relative;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 20px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
    backdrop-filter: blur(12px);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}
.integration-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 20%;
    width: 60%;
    height: 2px;
    background: linear-gradient(100deg, #2463f0, #1f7de9, #25c88c);
    opacity: 0;
    transition: opacity 0.3s ease;
}
/* Glow */
.integration-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    top: -70px;
    right: -60px;
    border-radius: 50%;
    background: rgba(99, 102, 241, 0.06);
    filter: blur(8px);
    transition: transform 0.4s ease;
}
.integration-card:hover {
    transform: translateY(-7px);
    border-color: rgba(99, 102, 241, 0.22);
    box-shadow:0 20px 45px rgba(15, 23, 42, 0.09);
}
.integration-card:hover::before {
    opacity: 1;
}
.integration-card:hover::after {
    transform: scale(1.6);
}
.integration-logo {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.integration-logo img {
    display: block;
    max-width: 145px;
    max-height: 55px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.68;
    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}
.integration-card:hover .integration-logo img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}
.integration-info {
    position: relative;
    z-index: 2;
    text-align: center;
}
.integration-info h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 750;
    color: #212529;
}
.integration-info span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
}
.integration-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 45px;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    text-align: center;
}
.integration-line {
    width: 55px;
    height: 1px;
    background: #e2e8f0;
}
@media (max-width: 900px) {
    .integration-section {
        padding: 75px 18px;
    }
    .integration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .integration-card {
        min-height: 155px;
    }
    .integration-logo img {
        max-width: 130px;
        max-height: 48px;
    }
}
@media (max-width: 600px) {
    .integration-section {
        padding: 22px 20px 22px;
    }
    .integration-header {
        margin-bottom: 35px;
    }
    .integration-eyebrow {
        font-size: 9px;
       /* letter-spacing: 1.5px;*/
    }
    .integration-eyebrow::before,
    .integration-eyebrow::after {
        width: 17px;
    }
    .integration-header h2 {
        font-size: 31px;
      /*  letter-spacing: -1px;*/
    }
    .integration-header p {
        margin-top: 14px;
        font-size: 13px;
        line-height: 1.65;
    }
    .integration-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .integration-card {
        min-height: 140px;
        padding: 18px 10px;
        border-radius: 16px;
    }
    .integration-logo {
        height: 50px;
        margin-bottom: 11px;
    }
    .integration-logo img {
        max-width: 105px;
        max-height: 40px;
    }
    .integration-info h3 {
        font-size: 13px;
    }
    .integration-info span {
        font-size: 10px;
    }
    .integration-bottom {
        gap: 10px;
        margin-top: 30px;
        font-size: 10px;
    }
    .integration-line {
        width: 25px;
    }
}
@media (max-width: 380px) {
    .integration-header h2 {
        font-size: 30px;
    }
    .integration-grid {
        gap: 8px;
    }
    .integration-card {
        min-height: 125px;

        padding: 15px 7px;
    }
    .integration-logo {
        height: 42px;
    }
    .integration-logo img {
        max-width: 90px;
        max-height: 34px;
    }
    .integration-info h3 {
        font-size: 12px;
    }
    .integration-info span {
        font-size: 9px;
    }
}
    .themes-section {
      position: relative;
      overflow: hidden;
      padding: 178px 24px 55px;
      isolation: isolate;
    }
    .themes-section::before {
      content: "";
      position: absolute;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      background:radial-gradient( circle,rgba(37, 169, 216, 0.11), transparent 68%);
      left: -240px;
      top: 80px;
      z-index: -1;
    }
    .themes-section::after {
      content: "";
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(121, 92, 246, 0.09), transparent 68%);
      right: -260px;
      top: 20px;
      z-index: -1;
    }
    .container {
      width: min(1380px, 100%);
      margin: 0 auto;
    }
    .intro {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 65px;
      align-items: end;
    }
    .intro-left {
      opacity: 0;
      transform: translateY(25px);
      animation: fadeUp 0.8s ease forwards;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 17px;
      border-radius: 999px;
      color: #1769ff;
      background: rgba(23, 105, 255, 0.07);
      border: 1px solid rgba(23, 105, 255, 0.12);
      font-size: 13px;
      font-weight: 800;
      /* letter-spacing: 0.05em; */
      margin-bottom: 20px;
    }

    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background:linear-gradient(135deg,#1769ff,#32b76a );
      box-shadow: 0 0 0 5px rgba(23, 105, 255, 0.08);
    }
    .title {
      max-width: 720px;
      font-size: clamp(30px, 3.2vw, 45px);
      line-height: 0.96;
      
      font-weight: 800;
    }
    .title-gradient {
      display: inline-block;
      background:linear-gradient(90deg, #1769ff, #32b768 );
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation:gradientMove 6s ease infinite;
    }

    .intro-right {
      opacity: 0;
      transform: translateX(30px);
      animation: slideRight 0.9s 0.15s ease forwards;
    }
    .intro-right p {
      max-width: 560px;
      color: #64748b;
      font-size: 18px;
      line-height: 1.8;
    }
    .highlight {
      color: #1769ff;
      font-weight: 700;
    }
    .themebenefits {
      margin-top: 30px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }

    .themebenefit {
      display: flex;
      gap: 11px;
      align-items: flex-start;
      padding: 14px;
      border-radius: 16px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(55,81,130,0.08);
      box-shadow: 0 10px 25px rgba(47,75,128,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .themebenefit:hover {
      transform: translateY(-4px);
      box-shadow:
        0 18px 35px rgba(47,75,128,0.10);
    }
    .themebenefit-icon {
      width: 40px;
      height: 40px;
      flex: 0 0 40px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      font-size: 18px;
      color: #1769ff;
      background:linear-gradient(145deg, #edf5ff, #f8fbff );
    }

    .themebenefit:nth-child(2) .themebenefit-icon {
      color: var(--green);
      background:
        linear-gradient(
          145deg,
          #eafaf0,
          #f8fffa
        );
    }

    .themebenefit:nth-child(3) .themebenefit-icon {
      color: var(--purple);
      background:linear-gradient(145deg, #f1edff,#faf9ff);
    }
    .themebenefit strong {
      display: block;
      font-size: 13px;
      margin-bottom: 3px;
    }
    .themebenefit span {
      color: #7a879d;
      font-size: 12px;
      line-height: 1.4;
    }
    .showcase-wrap {
      position: relative;
      margin-top: 48px;
      padding: 22px 0 16px;
      opacity: 0;
      transform: translateY(25px);
      animation:fadeUp 0.9s 0.3s ease forwards;
    }
    .showcase {
      position: relative;
      display: flex;
      align-items: center;
      gap: 18px;
      height: 390px;
      overflow: hidden;
      padding: 25px 72px;
      border-radius: 32px;
      background:linear-gradient(120deg, rgba(246,249,255,0.93), rgba(238,243,255,0.82));
      border: 1px solid rgba(45,75,134,0.08);
      box-shadow:var(--shadow);
      backdrop-filter: blur(16px);
    }
    .showcase::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(  circle at 70% 20%,  rgba(255,255,255,0.85), transparent 32%);
    }
    .theme-card {
      position: relative;
      height: 275px;
      min-width: 455px;
      border-radius: 22px;
      overflow: hidden;
      flex: 0 0 auto;
      background: #fff;
      border: 1px solid rgba(58,78,126,0.09);
      box-shadow:0 20px 40px rgba(37,66,120,0.12);
      transition: transform 0.45s cubic-bezier(.22,1,.36,1),box-shadow 0.45s ease;
    }

    .theme-card:hover {
      transform: translateY(-11px)scale(1.015);
      box-shadow: 0 28px 55px rgba(37,66,120,0.18);
    }
    .theme-card.mobile {
      min-width: 220px;
      width: 220px;
    }
    .theme-preview {
      width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    transition: transform 0.7s ease;
    }
    .theme-card:hover .theme-preview {
      transform: scale(1.035);
    }
    .theme-overlay {
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: 15px;
      padding: 12px 15px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
      background: rgba(10, 22, 43, 0.72);
      backdrop-filter: blur(14px);
    }
    .theme-name {
      font-size: 15px;
      font-weight: 800;
    }
    .theme-type {
      margin-top: 2px;
      font-size: 13px;
      opacity: 0.76;
    }
    .theme-view {
    display:none;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      color: #182039;
      background: #fff;
      /*display: grid;*/
      place-items: center;
      transition: transform 0.25s ease;
    }
    .theme-view:hover {
      transform: scale(1.12);
    }
    .carousel-btn {
      position: absolute;
      top: 50%;
      width: 53px;
      height: 53px;
      border: 0;
      border-radius: 50%;
      transform: translateY(-50%);
      display: grid;
      place-items: center;
      color: #fff;
      cursor: pointer;
      font-size: 22px;
      background:linear-gradient( 135deg, #1769ff,  #32b768);
      box-shadow: 0 15px 30px rgba(23,105,255,0.23);
      z-index: 10;
      transition:transform 0.25s ease, box-shadow 0.25s ease;
    }
    .carousel-btn:hover {
      transform:translateY(-50%)scale(1.08);
      box-shadow:0 20px 40px rgba(23,105,255,0.30);
    }
    .carousel-btn.prev {
      left: 17px;
    }
    .carousel-btn.next {
      right: 17px;
      background:linear-gradient(135deg,#1769ff,#32b768 );
    }
    .showcase-bottom {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 23px;
      gap: 22px;
      z-index: 5;
    }
    .explore-btn {
      border: 0;
      padding: 9px 27px;
      border-radius: 10px;
      color: #fff;
      background:linear-gradient(90deg,#122139,#1a3152);
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      box-shadow:0 14px 30px rgba(13,27,53,0.18);
      transition:transform 0.25s ease,box-shadow 0.25s ease;
    }
    .explore-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 19px 38px rgba(13,27,53,0.24);
    }
    .themedots {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .themedot {
      width: 8px;
      height: 8px;
      border: 0;
      border-radius: 50%;
      background: #c9d3e7;
      cursor: pointer;
      transition:width 0.3s ease,background 0.3s ease;
    }

    .themedot.active {
      width: 24px;
      border-radius: 999px;
      background:linear-gradient(90deg, #1769ff,#32b768);
    }

    .highlights {
      margin-top: 42px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 22px;
    }

    .highlight-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 20px;
      border-radius: 18px;
      background:rgba(255,255,255,0.70);
      border: 1px solid rgba(42,71,125,0.08);
      box-shadow:0 10px 30px rgba(50,77,130,0.05);
    }
    .highlight-icon {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #edf5ff;
      color: #1769ff;
      font-size: 18px;
    }
    .highlight:nth-child(2) .highlight-icon {
      color: #32b768;
      background: #ecfaf1;
    }
    .highlight:nth-child(3) .highlight-icon {
      color: #32b768;
      background: #f1edff;
    }
    .highlight-card strong {
      display: block;
      font-size: 15px;
      margin-bottom: 3px;
    }

    .highlight-card span {
      color: #7b889c;
      font-size: 13px;
    }
    
    @media (max-width: 1000px) {
      .intro {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .intro-right p {
        max-width: 750px;
      }
      .themebenefits {
        grid-template-columns: 1fr;
      }
      .showcase {
        padding: 25px 60px;
      }
      .theme-card {
        min-width: 400px;
      }
      .highlights {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 700px) {
      .themes-section {
        padding: 22px 0 22px;
      }
      .title {
        font-size: 30px;
      }
      .intro-right p {
        font-size: 15px;
      }
      .showcase-wrap {
        margin-top:0;
      }
      .showcase {
        height: 320px;
        padding: 20px 55px;
        border-radius: 25px;
      }
      .theme-card {
        height: 225px;
        min-width: 320px;
      }
      .theme-card.mobile {
        min-width: 180px;
        width: 180px;
      }
      .carousel-btn {
        width: 43px;
        height: 43px;
      }
      .carousel-btn.prev {
        left: 9px;
      }
      .carousel-btn.next {
        right: 9px;
      }
      .showcase-bottom {
        flex-wrap: wrap;
      }
      .spark-1 {
        left: 15%;
      }
    }
    @keyframes fadeUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    @keyframes slideRight {
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes gradientMove {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }
    @keyframes sparkle {
      0%, 100% {
        opacity: 0.25;
        transform: scale(0.8) rotate(0deg);
      }

      50% {
        opacity: 1;
        transform: scale(1.3) rotate(45deg);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }
    .customization-wrap {
        position: relative;
        z-index: 1;
      }

      /* ---------- Top grid ---------- */
      .hero-grid {
        display: grid;
        grid-template-columns: minmax(280px, 460px) 1fr;
        gap: 40px;
        align-items: center;
        position: relative;
        min-height: 100vh;
        padding: 22px 3.2vw 22px;
        overflow: hidden;
        background:
          radial-gradient(circle at 75% 35%, rgba(57, 126, 255, .13), transparent 30%),
          radial-gradient(circle at 85% 90%, rgba(79, 202, 145, .12), transparent 30%),
          linear-gradient(135deg, #ffffff 0%, #fbfcff 65%, #f3f8ff 100%);
      }

      /* ---------- Ambient decorative background ---------- */
      .hero-grid::before {
        content: "";
        position: absolute;
        width: 760px;
        height: 760px;
        right: -320px;
        bottom: -360px;
        border-radius: 50%;
        border: 1px solid rgba(47, 107, 255, .12);
        box-shadow:
          0 0 0 60px rgba(47, 107, 255, .025),
          0 0 0 120px rgba(47, 107, 255, .018);
        pointer-events: none;
        z-index: 0;
      }

      .hero-grid::after {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .28;
        background-image:
          linear-gradient(rgba(16, 24, 40, .035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(16, 24, 40, .035) 1px, transparent 1px);
        background-size: 40px 40px;
        -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
        mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
        pointer-events: none;
        z-index: 0;
      }


      .icon.purple {
        background: #efeaff;
        ;
        color: #7c5cfc;
      }

      .icon.green {
        background: #e6f8ee;
        color: #1fae74;
      }

      .icon.orange {
        background: #fdeee0;
        color: #f2994a;
      }

      .icon.pink {
        background: #fdeaf0;
        color: #ee5586;
      }

      /* ---------- Right: dashboard + storefront ---------- */
      .stage-scale {
        width: 100%;
        overflow: hidden;
        position: relative;
      }

      /* soft ambient glow behind the whole stage */
      .stage-scale::before {
        content: "";
        position: absolute;
        top: 10%;
        left: 10%;
        width: 60%;
        height: 70%;
        /* background:
          radial-gradient(circle, rgba(47, 107, 255, .16), transparent 60%),
          radial-gradient(circle at 70% 80%, rgba(23, 165, 137, .14), transparent 55%);
        filter: blur(50px); */
        z-index: 0;
        pointer-events: none;
      }

      .pstage {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: flex-start;
        gap: 0;
        width: 940px;
        /* fixed design width — always laid out like desktop */
        transform-origin: top left;
      }

      .panel-dash {
        position: relative;
        z-index: 3;
        width: 300px;
        flex: 0 0 auto;
        background: white;
        border: 1px solid rgba(18, 33, 58, .08);
        border-radius: 18px;
        padding: 18px;
        display: flex;
        gap: 14px;
        margin-top: 10px;
        animation: floatDashCustomization 5s ease-in-out infinite;
      }

      @keyframes floatDashCustomization {

        0%,
        100% {
          transform: perspective(1600px) rotateY(12deg) rotateX(0deg) translateY(0);
        }

        50% {
          transform: perspective(1600px) rotateY(12deg) rotateX(0deg) translateY(-9px);
        }
      }

      .rail {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        padding-top: 2px;
      }

      .rail .brand {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        color: #2f6bff;
        ;
        font-size: 1.1rem;
        margin-bottom: 6px;
      }

      .rail .brand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      .rail .r-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9aa1b5;
        transition: background .3s ease, color .3s ease;
      }

      .rail .r-icon svg {
        width: 16px;
        height: 16px;
      }

      .rail .r-icon.active {
        background: linear-gradient(135deg, #2f6bff, #1fae74);
        color: #fff;
        box-shadow: 0 8px 18px -6px rgba(47, 107, 255, .6);
      }

      .dash-main {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .dash-title {
        font-weight: 700;
        font-size: .98rem;
        margin: 2px 0 2px;
        color: #14162b;
      }

      .dash-card {
        border: 1px solid #e6e8f2;
        border-radius: 12px;
        padding: 12px;
        position: relative;
        background: #fff;
        transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      }

      .dash-card:hover {
        transform: translateX(2px);
        box-shadow: 0 14px 30px -18px rgba(20, 22, 43, .35);
        border-color: rgba(47, 107, 255, .2);
      }

      .dash-card h4 {
        margin: 0 0 8px;
        font-size: .78rem;
        text-transform: none;
        color: #8990a3;
        font-weight: 600;
      }

      .cat-row {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: .85rem;
        padding: 5px 8px;
        border-radius: 8px;
      }

      .cat-row.selected {
        background: linear-gradient(135deg, #eef2ff, #e4ecff);
        border: 1px solid #c9d6ff;
        font-weight: 700;
        color: #14162b;
        ;
      }

      .cat-sub {
        font-size: .8rem;
        color: #6a7186;
        padding: 3px 0 3px 22px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .cat-add {
        font-size: .8rem;
        color: #2f6bff;
        ;
        font-weight: 600;
        padding: 4px 0 0 4px;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .swatch-row {
        display: flex;
        gap: 8px;
        margin-bottom: 8px;
        flex-wrap: wrap;
      }

      .swatch {
        width: 44px;
        height: 44px;
        border-radius: 8px;
        flex: 0 0 auto;
        overflow: hidden;
        box-shadow: 0 6px 14px -8px rgba(20, 22, 43, .35);
        transition: transform .25s ease;
      }

      .swatch:hover {
        transform: translateY(-3px) scale(1.05);
      }

      .swatch img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        position: relative;
      }

      .add-link {
        font-size: .8rem;
        color: #2f6bff;
        ;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .pill-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }

      .pill {
        width: 30px;
        height: 26px;
        border: 1px solid #e6e8f2;
        border-radius: 7px;
        font-size: .72rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6a7186;
        font-weight: 600;
        transition: all .2s ease;
      }

      .pill.on {
        background: linear-gradient(135deg, #2f6bff, #1fae74);
        border-color: #2f6bff;
        color: #fff;
        box-shadow: 0 6px 14px -6px rgba(47, 107, 255, .6);
      }

      .dot-row {
        display: flex;
        gap: 8px;
        margin-bottom: 6px;
      }

      .dot {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        box-shadow: 0 4px 10px -4px rgba(20, 22, 43, .4);
        border: 2px solid #fff;
        outline: 1px solid rgba(0, 0, 0, .06);
      }

      .coll-item {
        font-size: .85rem;
        color: #14162b;
        ;
        padding: 4px 0;
      }

      /* connector dots on the dashboard edge — glowing pulse */
      .conn-dot {
        position: absolute;
        right: -7px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
        z-index: 2;
      }

      .conn-dot::after {
        content: "";
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        background: inherit;
        opacity: .55;
        animation: pingDotCustomization 2.2s cubic-bezier(0, 0, .2, 1) infinite;
      }

      @keyframes pingDotCustomization {
        0% {
          transform: scale(1);
          opacity: .55;
        }

        75%,
        100% {
          transform: scale(2.4);
          opacity: 0;
        }
      }

      /* Storefront panel */
      .panel-store {
        position: relative;
        z-index: 2;
        flex: 1;
        min-width: 680px;
        margin-left: -40px;
        background: rgba(255, 255, 255, .9);
        border: 1px solid #edf0f4;
        box-shadow: 0 12px 30px rgba(31, 57, 89, .07);
        border-radius: 18px;
        /* box-shadow: var(--shadow-lg); */
        overflow: hidden;
        animation: floatStoreCustomization 6s ease-in-out infinite;
        margin-top: 35px;
      }

      @keyframes floatStoreCustomization {

        0%,
        100% {
          transform: perspective(1600px) rotateY(342deg) rotateX(0deg) translateY(0);
        }

        50% {
          transform: perspective(1600px) rotateY(342deg) rotateX(0deg) translateY(-11px);
        }
      }

      .store-topbar {
        background: linear-gradient(90deg, #679349, #679349);
        color: #fff;
        text-align: center;
        font-size: .7rem;
        letter-spacing: .08em;
        padding: 7px 10px;
        font-weight: 600;
        background-size: 200% 100%;
        
      }

      @keyframes shimmerTopbarCustomization {
        0% {
          background-position: 0% 50%;
        }

        100% {
          background-position: 200% 50%;
        }
      }

      .store-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 26px;
        border-bottom: 1px solid #e6e8f2;
        flex-wrap: wrap;
        gap: 10px;
      }

      .store-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        font-weight: 800;
        font-size: 1.1rem;
      }

      .store-logo .mark {
        color: #679349;
        font-size: 2rem;
         background:transparent !important;
      }

      .store-logo .sub {
        display: block;
        font-size: .55rem;
        letter-spacing: .15em;
        font-weight: 700;
        color: #9aa1b5;
        margin-top: -2px;
      }

      .store-links {
        display: flex;
        gap: 22px;
        font-size: .85rem;
        color: #3a3f52;
        font-weight: 500;
        flex-wrap: wrap;
      }

      .store-icons {
        display: flex;
        gap: 16px;
        color: #3a3f52;
      }

      .store-icons svg {
        width: 17px;
        height: 17px;
      }

      .store-hero {
        display: grid;
        grid-template-columns: 1fr 1.15fr;
        gap: 0;
      }

      .store-hero-copy {
        padding: 34px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .eyebrow {
        font-size: .68rem;
        letter-spacing: .14em;
        font-weight: 700;
        color: #8990a3;
        margin-bottom: 10px;
      }

      .store-hero-copy h2 {
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(1.7rem, 2.6vw, 2.3rem);
        line-height: 1.08;
        margin: 0 0 14px;
        font-weight: 400;
      }
      .store-hero-copy p {
        color: #6a7186;
        font-size: .85rem;
        line-height: 1.55;
        max-width: 280px;
        margin: 0 0 18px;
      }
      .shop-btn {
        background: #679349;
        color: #fff;
        border: none;
        padding: 11px 22px;
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .05em;
        border-radius: 3px;
        width: max-content;
        box-shadow: 0 10px 24px -10px rgba(20, 22, 43, .5);
        transition: transform .25s ease, box-shadow .25s ease;
      }
      .shop-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 28px -10px rgba(20, 22, 43, .55);
      }
      .store-hero-img {
        position: relative;
        /*background: linear-gradient(135deg, #e7cfa8, #d9b98f 45%, #cfa877);*/
        min-height: 260px;
        overflow: hidden;
      }
      
      .store-hero-img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        position: relative;
      }
      /*
      .store-hero-img::before,
      .store-hero-img::after {
        content: "";
        position: absolute;
        bottom: 0;
        width: 38%;
        height: 92%;
        border-radius: 120px 120px 0 0;
      }
      .store-hero-img::before {
        left: 18%;
        background: linear-gradient(160deg, #7f9fd6, #5f7fc4);
      }
      .store-hero-img::after {
        left: 50%;
        background: linear-gradient(160deg, #f4ede2, #e7dcc9);
      }*/
      .store-perks {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 14px;
        padding: 20px 24px;
        border-top: 1px solid #e6e8f2;
        border-bottom: 1px solid #e6e8f2;
      }
      .perk {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: .75rem;
      }
      .perk svg {
        width: 22px;
        height: 22px;
        color: #3a3f52;
        flex: 0 0 auto;
      }
      .perk strong {
        display: block;
        font-size: .8rem;
      }
      .perk span.sub {
        color: #8990a3;
      }
      .store-cats-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 26px 4px;
      }
      .store-cats-head h3 {
        font-weight: 400;
        font-size: 1.2rem;
        margin: 0;
      }
      .store-cats {
        display: flex;
        gap: 22px;
        padding: 14px 26px 26px;
        overflow-x: auto;
      }
      .cat-item {
        text-align: center;
        flex: 0 0 auto;
      }
      .cat-circle {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        margin: 0 auto 8px;
        display: flex;
        gap: 8px;
        border-radius: 8px;
        overflow: hidden;
        background: linear-gradient(135deg, #f0dfd3, #ead8c8);
        position: relative;
        box-shadow: 0 8px 18px -10px rgba(20, 22, 43, .4);
        transition: transform .25s ease;
      }
      .cat-item:hover .cat-circle {
        transform: translateY(-4px) scale(1.04);
      }
      .cat-circle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        position: relative;
      }
      .cat-item p {
        margin: 0;
        font-size: .72rem;
        color: #4a4f61;
        font-weight: 500;
      }
      .cat-arrow {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid #e6e8f2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 9px;
        flex: 0 0 auto;
        align-self: center;
        transition: transform .25s ease, box-shadow .25s ease;
      }
      .cat-arrow:hover {
        transform: translateX(3px);
        box-shadow: 0 8px 18px -10px rgba(20, 22, 43, .4);
      }
      /* connector lines (desktop only, decorative) */
      .connectors {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 4;
      }
      /* ---------- Bottom banner ---------- */
      .banner {
        max-width: 640px;
        margin: 44px auto 0;
        background: #ffffff;
        border-radius: 999px;
        box-shadow: 0 40px 90px -20px rgba(29, 58, 96, .28), 0 10px 30px -10px rgba(29, 58, 96, .12);
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 14px 26px;
        font-size: .95rem;
        backdrop-filter: blur(15px);
        animation: floatBannerCustomization 4s ease-in-out infinite;
      }

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

      .banner .tick {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1fae74, #4fc486);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        box-shadow: 0 8px 20px -6px rgba(31, 174, 116, .55);
      }

      .banner .tick svg {
        width: 16px;
        height: 16px;
      }

      .banner strong {
        color: #2f6bff;
        font-weight: 700;
      }

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

      @media (max-width: 640px) {
        .feature-grid {
          grid-template-columns: 1fr 1fr;
          max-width: 100%;
        }

        .banner {
          border-radius: 20px;
          text-align: left;
          margin: -24px 3.2vw 22px;
        }
      }

      @media (prefers-reduced-motion: reduce) {

        .panel-dash,
        .panel-store,
        .banner,
        .store-topbar,
        .conn-dot::after {
          animation: none !important;
        }
      }
       .store-window img {
                width: 100%;
                height: 100%;
                object-fit: contain;
                display: block;
                position: relative;
            }