/* ==================================================
           GLOBAL
        ================================================== */

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family:
                Inter,
                system-ui,
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                sans-serif;

            color: #172033;
            background: #ffffff;
        }

        a {
            text-decoration: none;
        }


        /* ==================================================
           NAVBAR
        ================================================== */

        .navbar {
            padding: 13px 0;

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

            backdrop-filter: blur(16px);

            -webkit-backdrop-filter: blur(16px);

            border-bottom:
                1px solid #eef0f5;

            box-shadow:
                0 4px 18px rgba(23,32,51,.04);
        }

        .navbar-brand {
            font-size: 27px;

            font-weight: 800;

            letter-spacing: -1.1px;

            color: #172033;

            white-space: nowrap;
        }

        .navbar-brand span {
            color: #4f46e5;
        }

        .brand-icon {
            width: 38px;
            height: 38px;

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

            border-radius: 11px;

            overflow: hidden;

            background: #ffffff;

            box-shadow:
                0 6px 16px rgba(79,70,229,.16);
        }

        .brand-icon img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain;
        }

        .navbar-nav {
            gap: 3px;
        }

        .nav-link {
            position: relative;

            color: #667085;

            font-weight: 550;

            font-size: 15px;

            margin-left: 0;

            padding:
                9px 12px !important;

            border-radius: 9px;

            transition:
                color .2s ease,
                background-color .2s ease;
        }

        .nav-link::after {
            content: "";

            position: absolute;

            left: 12px;
            right: 12px;
            bottom: 3px;

            height: 2px;

            border-radius: 2px;

            background: #4f46e5;

            transform:
                scaleX(0);

            transform-origin: center;

            transition:
                transform .2s ease;
        }

        .nav-link:hover {
            color: #4f46e5;

            background:
                #f5f7ff;
        }

        .nav-link:hover::after {
            transform:
                scaleX(1);
        }

        .navbar-actions {
            margin-left: 14px;

            padding-left: 16px;

            border-left:
                1px solid #e9ebf2;
        }

        .btn-login {
            padding:
                9px
                18px;

            border-radius: 10px;

            font-weight: 650;

            font-size: 14px;

            white-space: nowrap;
        }

        .btn-navbar-register {
            box-shadow:
                0 6px 14px rgba(79,70,229,.18);
        }

        .navbar-toggler {
            border: 0;

            padding: 7px 9px;

            border-radius: 9px;
        }

        .navbar-toggler:focus {
            box-shadow:
                0 0 0 3px rgba(79,70,229,.12);
        }

        /* =====================================================
         * NAVBAR DROPDOWN
         * ===================================================== */

        .navbar-dropdown {
            min-width: 235px;

            margin-top: 10px;

            padding: 8px;

            border:
                1px solid #edf0f6;

            border-radius: 14px;

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

            box-shadow:
                0 18px 45px rgba(23,32,51,.12);

            animation:
                navbarDropdownIn .16s ease-out;
        }

        .navbar-dropdown .dropdown-item {
            display: flex;

            align-items: center;

            padding:
                10px 12px;

            border-radius: 9px;

            color: #475467;

            font-size: 14px;

            font-weight: 550;

            transition:
                color .18s ease,
                background-color .18s ease,
                transform .18s ease;
        }

        .navbar-dropdown .dropdown-item i {
            width: 18px;

            color: #6366f1;

            font-size: 15px;
        }

        .navbar-dropdown .dropdown-item:hover,
        .navbar-dropdown .dropdown-item:focus {
            color: #4f46e5;

            background:
                #f5f7ff;

            transform:
                translateX(2px);
        }

        .navbar-dropdown .dropdown-divider {
            margin:
                6px 4px;

            border-color:
                #eef0f5;
        }

        .navbar .dropdown-toggle::after {
            margin-left: 7px;

            vertical-align:
                .18em;

            border-top-width:
                .34em;

            border-right-width:
                .34em;

            border-left-width:
                .34em;
        }

        /* Explicit submenu indicator */
        .navbar .dropdown-toggle::after {
            display: none;
        }

        .nav-dropdown-icon {
            margin-left: 7px;

            font-size: 10px;

            line-height: 1;

            color: #98a2b3;

            transition:
                transform .2s ease,
                color .2s ease;
        }

        .navbar .dropdown-toggle:hover .nav-dropdown-icon,
        .navbar .dropdown-toggle.show .nav-dropdown-icon {
            color: #4f46e5;
        }

        .navbar .dropdown-toggle.show .nav-dropdown-icon {
            transform:
                rotate(180deg);
        }

        @keyframes navbarDropdownIn {

            from {
                opacity: 0;

                transform:
                    translateY(-5px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }

        }


        @media (max-width: 991.98px) {

            .navbar {
                padding: 11px 0;
            }

            .navbar-collapse {
                margin-top: 12px;

                padding:
                    10px 0 4px;

                border-top:
                    1px solid #eef0f5;
            }

            .navbar-nav {
                gap: 2px;
            }

            .nav-link {
                padding:
                    10px 12px !important;
            }

            .nav-link::after {
                display: none;
            }

            .navbar-dropdown {
                margin:
                    2px 0 6px;

                padding:
                    6px;

                border:
                    0;

                border-radius: 10px;

                box-shadow:
                    inset 0 0 0 1px #eef0f5;

                animation: none;
            }

            .navbar-dropdown .dropdown-item {
                padding:
                    10px 12px;
            }

            .nav-dropdown-icon {
                margin-left: auto;

                font-size: 11px;
            }

            .navbar-actions {
                margin:
                    10px 0 0;

                padding:
                    12px 0 0;

                border-left: 0;

                border-top:
                    1px solid #eef0f5;
            }

        }


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

        .hero {
            position: relative;

            overflow: hidden;

            padding:
                105px
                0
                90px;

            background:
                linear-gradient(
                    135deg,
                    #f8faff 0%,
                    #eef2ff 100%
                );
        }

        .hero::before {
            content: "";

            position: absolute;

            width: 500px;
            height: 500px;

            border-radius: 50%;

            background:
                rgba(79,70,229,.07);

            top: -230px;
            right: -120px;
        }

        .hero::after {
            content: "";

            position: absolute;

            width: 250px;
            height: 250px;

            border-radius: 50%;

            background:
                rgba(124,58,237,.05);

            bottom: -130px;
            left: -80px;
        }

        .hero .container {
            position: relative;

            z-index: 2;
        }

        .hero-badge {
            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding:
                8px
                14px;

            border-radius: 50px;

            background: #e9e7ff;

            color: #4f46e5;

            font-size: 13px;

            font-weight: 700;
        }

        .hero-title {
            margin-top: 20px;

            font-size:
                clamp(
                    42px,
                    5.5vw,
                    67px
                );

            line-height: 1.05;

            font-weight: 800;

            letter-spacing: -3px;
        }

        .hero-title span {
            color: #4f46e5;
        }

        .hero-text {
            max-width: 590px;

            color: #667085;

            font-size: 18px;

            line-height: 1.75;
        }

        .hero-btn {
            padding:
                13px
                23px;

            border-radius: 11px;

            font-weight: 600;
        }


        /* ==================================================
           EXAM PREVIEW
        ================================================== */

        .preview-wrapper {
            position: relative;

            padding: 15px;
        }

        .exam-card {
            background: #ffffff;

            border:
                1px solid #edf0f5;

            border-radius: 22px;

            padding: 25px;

            box-shadow:
                0 30px 70px
                rgba(31,41,55,.13);
        }

        .exam-header {
            display: flex;

            align-items: center;

            justify-content:
                space-between;

            gap: 15px;

            margin-bottom: 20px;
        }

        .exam-title {
            font-size: 18px;

            font-weight: 700;
        }

        .exam-subtitle {
            margin-top: 3px;

            color: #98a2b3;

            font-size: 12px;
        }

        .timer-box {
            white-space: nowrap;

            padding:
                8px
                11px;

            border-radius: 9px;

            background: #fff1f2;

            color: #e11d48;

            font-size: 13px;

            font-weight: 700;
        }

        .progress-label {
            display: flex;

            justify-content:
                space-between;

            color: #667085;

            font-size: 12px;

            margin-bottom: 7px;
        }

        .progress {
            height: 7px;

            background: #edf0f5;

            border-radius: 20px;
        }

        .progress-bar {
            border-radius: 20px;

            background:
                linear-gradient(
                    90deg,
                    #4f46e5,
                    #7c3aed
                );
        }

        .question-card {
            margin-top: 22px;

            padding: 18px;

            border-radius: 14px;

            background: #f8fafc;
        }

        .question-number {
            color: #98a2b3;

            font-size: 11px;

            font-weight: 700;

            letter-spacing: .5px;
        }

        .question {
            margin-top: 7px;

            font-size: 15px;

            font-weight: 600;

            line-height: 1.5;
        }

        .answer {
            margin-top: 9px;

            padding:
                10px
                13px;

            border:
                1px solid #e5e7eb;

            border-radius: 9px;

            background: #ffffff;

            color: #475467;

            font-size: 13px;
        }

        .answer.active {
            border-color: #6366f1;

            background: #eef2ff;

            color: #4338ca;

            font-weight: 600;
        }

        .preview-floating {
            position: absolute;

            padding:
                13px
                17px;

            border-radius: 13px;

            background: #ffffff;

            box-shadow:
                0 15px 35px
                rgba(31,41,55,.12);

            font-size: 13px;

            font-weight: 600;

            z-index: 3;
        }

        .floating-score {
            left: -15px;
            bottom: 25px;
        }

        .floating-user {
            right: -10px;
            top: 20px;
        }


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

        .stats {
            position: relative;

            z-index: 5;

            margin-top: -35px;
        }

        .stats-card {
            padding:
                25px
                15px;

            border:
                1px solid #eef0f5;

            border-radius: 18px;

            background: #ffffff;

            box-shadow:
                0 15px 40px
                rgba(31,41,55,.08);
        }

        .stat-number {
            color: #4f46e5;

            font-size: 30px;

            font-weight: 800;
        }

        .stat-label {
            color: #667085;

            font-size: 14px;
        }


        /* ==================================================
           GENERAL SECTION
        ================================================== */

        .section {
            padding:
                100px
                0;
        }

        .section-badge {
            color: #4f46e5;

            font-size: 13px;

            font-weight: 700;

            letter-spacing: 1px;
        }

        .section-title {
            margin-top: 8px;

            font-size: 42px;

            font-weight: 800;

            letter-spacing: -1.5px;

            line-height: 1.15;
        }

        .section-description {
            color: #667085;

            line-height: 1.75;
        }


        /* ==================================================
           FEATURES
        ================================================== */

        .feature-card {
            height: 100%;

            padding: 30px;

            border:
                1px solid #edf0f5;

            border-radius: 18px;

            background: #ffffff;

            transition:
                transform .25s ease,
                box-shadow .25s ease;
        }

        .feature-card:hover {
            transform:
                translateY(-7px);

            box-shadow:
                0 20px 45px
                rgba(31,41,55,.08);
        }

        .feature-icon {
            display: flex;

            align-items: center;

            justify-content: center;

            width: 56px;
            height: 56px;

            margin-bottom: 20px;

            border-radius: 15px;

            background: #eef2ff;

            color: #4f46e5;

            font-size: 24px;
        }

        .feature-card h5 {
            font-weight: 700;
        }

        .feature-card p {
            color: #667085;

            line-height: 1.7;
        }


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

        .step-card {
            height: 100%;

            padding: 20px;

            text-align: center;
        }

        .step-number {
            display: flex;

            align-items: center;

            justify-content: center;

            width: 58px;
            height: 58px;

            margin:
                0
                auto
                20px;

            border-radius: 50%;

            background: #4f46e5;

            color: #ffffff;

            font-size: 17px;

            font-weight: 800;
        }

        .step-card h5 {
            font-weight: 700;
        }

        .step-card p {
            color: #667085;

            font-size: 14px;

            line-height: 1.65;
        }


        /* ==================================================
           ABOUT
        ================================================== */

        .result-preview {
            padding: 15px;

            border-radius: 24px;

            background: #f8faff;
        }

        .result-card {
            padding: 28px;

            border-radius: 20px;

            background: #ffffff;

            box-shadow:
                0 15px 40px
                rgba(31,41,55,.07);
        }

        .score {
            color: #4f46e5;

            font-size: 58px;

            line-height: 1;

            font-weight: 800;
        }


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

        .cta {
            position: relative;

            overflow: hidden;

            padding:
                75px
                30px;

            border-radius: 28px;

            background:
                linear-gradient(
                    135deg,
                    #4338ca,
                    #6d28d9
                );

            color: #ffffff;
        }

        .cta::after {
            content: "";

            position: absolute;

            width: 330px;
            height: 330px;

            border-radius: 50%;

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

            top: -140px;
            right: -90px;
        }

        .cta-content {
            position: relative;

            z-index: 2;
        }

        .cta h2 {
            font-size: 40px;

            font-weight: 800;

            letter-spacing: -1px;
        }

        .cta p {
            color: #ddd6fe;
        }

        .cta .btn {
            padding:
                13px
                25px;

            border-radius: 10px;

            font-weight: 700;
        }


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

        footer {
            padding:
                60px
                0
                25px;

            background: #101828;

            color: #98a2b3;
        }

        .footer-brand {
            color: #ffffff;

            font-size: 27px;

            font-weight: 800;
        }

        .footer-brand span {
            color: #818cf8;
        }

        footer a {
            color: #98a2b3;

            transition: .2s;
        }

        footer a:hover {
            color: #ffffff;
        }



        /* ==================================================
           PRODUCT OVERVIEW
        ================================================== */

        .product-section {
            background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
        }

        .product-story-card,
        .product-benefit-card {
            border: 1px solid #e8ebf2;
            border-radius: 26px;
            background: #ffffff;
            box-shadow: 0 16px 45px rgba(31,41,55,.06);
        }

        .product-story-card {
            position: relative;
            overflow: hidden;
            padding: 42px;
        }

        .product-story-card::after {
            content: '';
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(99,102,241,.07);
            right: -90px;
            bottom: -100px;
        }

        .product-story-icon {
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 22px;
            border-radius: 16px;
            background: #eef2ff;
            color: #4f46e5;
            font-size: 25px;
        }

        .product-eyebrow {
            color: #4f46e5;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1px;
        }

        .product-story-card h3 {
            position: relative;
            z-index: 1;
            margin: 8px 0 18px;
            font-size: 32px;
            font-weight: 800;
            letter-spacing: -1px;
        }

        .product-story-card p {
            position: relative;
            z-index: 1;
            color: #667085;
            line-height: 1.8;
        }

        .product-benefit-card {
            padding: 25px 28px;
        }

        .product-benefit-item {
            display: flex;
            gap: 15px;
            padding: 17px 0;
            margin-bottom: 0;
            border-bottom: 1px solid #edf0f5;
        }

        .product-benefit-item:last-child { border-bottom: 0; }

        .product-benefit-icon {
            flex: 0 0 44px;
            width: 44px;
            height: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: #f5f3ff;
            color: #4f46e5;
        }

        .product-benefit-item strong,
        .product-benefit-item span { display: block; }
        .product-benefit-item strong { color: #172033; margin-bottom: 3px; }
        .product-benefit-item span { color: #667085; font-size: 14px; line-height: 1.55; }

        .product-flow {
            overflow: hidden;
            border: 1px solid #e8ebf2;
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 12px 35px rgba(31,41,55,.05);
        }

        .product-flow-item {
            min-height: 145px;
            padding: 26px 18px;
            border-right: 1px solid #edf0f5;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .product-flow-item:last-child { border-right: 0; }
        .product-flow-item span { color: #a5b4fc; font-size: 13px; font-weight: 800; }
        .product-flow-item strong { margin-top: 5px; color: #172033; font-size: 17px; }
        .product-flow-item small { margin-top: 5px; color: #667085; line-height: 1.5; }

        @media (max-width: 991px) {
            .product-flow-item:nth-child(2) { border-right: 0; }
            .product-flow-item { border-bottom: 1px solid #edf0f5; }
            .product-flow-item:nth-child(3), .product-flow-item:nth-child(4) { border-bottom: 0; }
        }

        @media (max-width: 575px) {
            .product-story-card { padding: 28px 22px; }
            .product-story-card h3 { font-size: 27px; }
            .product-benefit-card { padding: 18px 20px; }
        }


        /* ==================================================
           DEVELOPER / ABOUT THE DEVELOPER
        ================================================== */

        .developer-section {
            background: #ffffff;
        }

        .developer-card {
            position: relative;
            overflow: hidden;
            padding: 42px;
            border: 1px solid #e8ebf2;
            border-radius: 28px;
            background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
            box-shadow: 0 18px 55px rgba(31,41,55,.07);
        }

        .developer-card::after {
            content: '';
            position: absolute;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(99,102,241,.07);
            right: -100px;
            top: -110px;
        }

        .developer-photo-wrap {
            position: relative;
            z-index: 1;
            width: 220px;
            height: 220px;
            margin: 0 auto;
            padding: 7px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 18px 45px rgba(31,41,55,.14);
        }

        .developer-photo {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            object-position: center top;
            border-radius: 50%;
        }

        .developer-role {
            color: #4f46e5;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: .02em;
        }

        .developer-name {
            margin-top: 7px;
            font-size: 30px;
            font-weight: 800;
            line-height: 1.2;
            color: #172033;
        }

        .developer-bio {
            color: #667085;
            line-height: 1.8;
        }

        .developer-info-card {
            height: 100%;
            padding: 20px;
            border: 1px solid #edf0f5;
            border-radius: 16px;
            background: rgba(255,255,255,.85);
        }

        .developer-info-card i {
            color: #4f46e5;
            font-size: 20px;
        }

        .developer-info-card .label {
            margin-top: 8px;
            color: #98a2b3;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .developer-info-card .value {
            margin-top: 4px;
            color: #172033;
            font-weight: 600;
            line-height: 1.6;
        }

        .education-list {
            position: relative;
            margin-top: 12px;
            padding-left: 24px;
            border-left: 2px solid #e5e7eb;
        }

        .education-item {
            position: relative;
            padding: 0 0 18px 12px;
        }

        .education-item:last-child {
            padding-bottom: 0;
        }

        .education-item::before {
            content: '';
            position: absolute;
            left: -31px;
            top: 5px;
            width: 12px;
            height: 12px;
            border: 3px solid #ffffff;
            border-radius: 50%;
            background: #6366f1;
            box-shadow: 0 0 0 1px #c7d2fe;
        }

        .education-year {
            color: #4f46e5;
            font-size: 12px;
            font-weight: 800;
        }

        .education-school {
            margin-top: 2px;
            color: #172033;
            font-weight: 600;
            line-height: 1.5;
        }

        .developer-social {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 18px;
            padding: 10px 16px;
            border-radius: 10px;
            background: #1877f2;
            color: #ffffff !important;
            font-weight: 700;
            text-decoration: none;
            transition: .2s ease;
        }

        .developer-social:hover {
            color: #ffffff !important;
            transform: translateY(-2px);
            box-shadow: 0 10px 22px rgba(24,119,242,.22);
        }

        @media (max-width: 767px) {
            .developer-card {
                padding: 26px 20px;
                border-radius: 22px;
            }

            .developer-photo-wrap {
                width: 180px;
                height: 180px;
            }

            .developer-name {
                font-size: 25px;
            }
        }

        /* ==================================================
           PACKAGES
        ================================================== */

        .package-section {
            background: #f8faff;
        }

        .package-card {
            height: 100%;
            padding: 38px;
            border: 1px solid #e5e7eb;
            border-radius: 24px;
            background: #ffffff;
            box-shadow: 0 12px 35px rgba(31,41,55,.06);
            transition: transform .25s ease, box-shadow .25s ease;
        }

        .package-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 22px 50px rgba(31,41,55,.10);
        }

        .package-card.popular {
            border: 2px solid #4f46e5;
            box-shadow: 0 18px 50px rgba(79,70,229,.12);
        }

        .package-badge {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 50px;
            background: #f3f4f6;
            color: #172033;
            font-size: 12px;
            font-weight: 700;
        }

        .package-badge.popular {
            background: #4f46e5;
            color: #ffffff;
        }

        .package-name {
            margin-top: 22px;
            font-size: 28px;
            font-weight: 700;
        }

        .package-price {
            margin-top: 20px;
            color: #4f46e5;
            font-size: 44px;
            line-height: 1;
            font-weight: 800;
        }

        .package-price span {
            color: #667085;
            font-size: 15px;
            font-weight: 500;
        }

        .package-description {
            min-height: 48px;
            margin-top: 20px;
            color: #667085;
            line-height: 1.65;
        }

        .package-divider {
            margin: 25px 0;
            border-color: #e5e7eb;
        }

        .package-feature {
            display: flex;
            gap: 10px;
            margin-bottom: 16px;
            color: #172033;
        }

        .package-feature i {
            color: #10b981;
            margin-top: 3px;
        }

        .package-feature.disabled {
            color: #98a2b3;
        }

        .package-feature.disabled i {
            color: #cbd5e1;
        }

        .package-btn {
            margin-top: 18px;
            padding: 12px 20px;
            border-radius: 12px;
            font-weight: 700;
        }

        /* ==================================================
           PACKAGE CAROUSEL
        ================================================== */

        .package-carousel {
            position: relative;
            padding: 0 54px;
        }

        .packages-wrapper {
            display: flex;
            gap: 24px;
            overflow-x: auto;
            overflow-y: hidden;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding: 10px 4px 24px;
        }

        .packages-wrapper::-webkit-scrollbar {
            display: none;
        }

        .package-slide {
            flex: 0 0 calc((100% - 48px) / 3);
            min-width: 0;
            scroll-snap-align: start;
        }

        .package-slide .package-card {
            height: 100%;
            min-height: 510px;
        }

        .package-duration {
            margin-top: 10px;
            color: #667085;
            font-size: 13px;
            font-weight: 600;
        }

        .package-popular-label {
            color: #4f46e5;
            font-size: 11px;
            font-weight: 800;
            white-space: nowrap;
        }

        .package-nav {
            position: absolute;
            top: 50%;
            z-index: 5;
            width: 46px;
            height: 46px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            border-radius: 50%;
            background: #ffffff;
            color: #4f46e5;
            box-shadow: 0 10px 28px rgba(31,41,55,.12);
            transform: translateY(-50%);
            transition: .2s ease;
        }

        .package-nav:hover:not(:disabled) {
            background: #4f46e5;
            color: #ffffff;
            transform: translateY(-50%) scale(1.05);
        }

        .package-nav:disabled {
            opacity: .35;
            cursor: not-allowed;
            box-shadow: none;
        }

        .package-nav-prev { left: 0; }
        .package-nav-next { right: 0; }

        .package-carousel-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            margin-top: 6px;
        }

        .package-carousel-hint {
            color: #98a2b3;
            font-size: 12px;
        }

        .package-dots {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .package-dot {
            width: 7px;
            height: 7px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: #d0d5dd;
            transition: .2s ease;
        }

        .package-dot.active {
            width: 22px;
            border-radius: 10px;
            background: #4f46e5;
        }

        @media (max-width: 991px) {
            .package-slide {
                flex-basis: calc((100% - 24px) / 2);
            }
        }

        @media (max-width: 575px) {
            .package-carousel {
                padding: 0 8px;
            }

            .packages-wrapper {
                gap: 16px;
                padding-left: 0;
                padding-right: 0;
            }

            .package-slide {
                flex-basis: 100%;
            }

            .package-slide .package-card {
                min-height: 0;
                padding: 30px 24px;
            }

            .package-nav {
                width: 40px;
                height: 40px;
            }

            .package-nav-prev { left: -4px; }
            .package-nav-next { right: -4px; }

            .package-carousel-footer {
                flex-direction: column;
                gap: 8px;
            }
        }


        /* ==================================================
           CONTACT FORM
        ================================================== */

        .contact-card {
            padding: 35px;
            border: 1px solid #edf0f5;
            border-radius: 22px;
            background: #ffffff;
            box-shadow: 0 18px 45px rgba(31,41,55,.07);
        }

        .contact-card .form-control {
            border-color: #e5e7eb;
            border-radius: 11px;
            padding: 12px 14px;
        }

        .contact-card .form-control:focus {
            border-color: #6366f1;
            box-shadow: 0 0 0 .2rem rgba(79,70,229,.10);
        }

        .contact-card textarea.form-control {
            resize: vertical;
            min-height: 150px;
        }

        @media (max-width: 575px) {
            .contact-card {
                padding: 22px;
            }
        }


        /* ==================================================
           WHATSAPP FLOATING BUTTON
        ================================================== */

        .whatsapp-float {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 1050;
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #25D366;
            color: #ffffff;
            font-size: 29px;
            box-shadow: 0 10px 30px rgba(16,185,129,.28);
            transition: transform .2s ease, box-shadow .2s ease;
        }

        .whatsapp-float:hover {
            color: #ffffff;
            transform: translateY(-4px) scale(1.04);
            box-shadow: 0 15px 35px rgba(16,185,129,.36);
        }

        .whatsapp-float-label {
            position: absolute;
            right: 68px;
            white-space: nowrap;
            padding: 8px 12px;
            border-radius: 8px;
            background: #101828;
            color: #ffffff;
            font-size: 12px;
            font-weight: 600;
            opacity: 0;
            pointer-events: none;
            transform: translateX(5px);
            transition: .2s ease;
        }

        .whatsapp-float:hover .whatsapp-float-label {
            opacity: 1;
            transform: translateX(0);
        }

        @media (max-width: 575px) {
            .whatsapp-float {
                right: 16px;
                bottom: 16px;
                width: 54px;
                height: 54px;
                font-size: 27px;
            }

            .whatsapp-float-label {
                display: none;
            }
        }


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

        @media (max-width: 991px) {

            .hero {
                padding:
                    80px
                    0
                    70px;

                text-align: center;
            }

            .hero-text {
                margin:
                    0
                    auto;
            }

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

            .preview-wrapper {
                margin-top: 65px;
            }

            .floating-score {
                left: 0;
            }

            .floating-user {
                right: 0;
            }

        }


        @media (max-width: 575px) {

            .hero-title {
                letter-spacing: -2px;
            }

            .hero-text {
                font-size: 16px;
            }

            .section {
                padding:
                    75px
                    0;
            }

            .section-title {
                font-size: 34px;
            }

            .preview-floating {
                display: none;
            }

            .stats {
                margin-top: 20px;
            }

            .stat-number {
                font-size: 23px;
            }

            .stat-label {
                font-size: 12px;
            }

            .cta {
                padding:
                    55px
                    20px;
            }

            .cta h2 {
                font-size: 31px;
            }

        }