/* =========================================================
   ROOT
========================================================= */

:root {

    --primary: #635BFF;
    --primary-dark: #5148E5;
    --purple: #9B51E0;
    --orange: #FF8A3D;
    --green: #16A765;
    --blue: #3B82F6;
    --red: #EF4444;

    --dark: #15152B;
    --text: #66687A;
    --muted: #999BAB;

    --bg: #F7F8FC;
    --white: #FFFFFF;

    --border: #E8E9F0;

}


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

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        "Inter",
        sans-serif;

    color: var(--text);

    background: var(--white);

}

a {
    text-decoration: none;
}


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

.navbar-custom {

    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    height: 76px;

    display: flex;

    align-items: center;

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

    backdrop-filter:
        blur(18px);

    border-bottom:
        1px solid rgba(230,231,238,.8);

}


.nav-container {

    width: 100%;

    max-width: 1180px;

    margin: auto;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.brand {

    display: flex;

    align-items: center;

    gap: 10px;

    color: var(--dark);

    font-size: 18px;

    font-weight: 900;

}


.brand-icon {

    width: 40px;
    height: 40px;

    display: flex;

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

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    border-radius: 12px;

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

}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

}


.nav-links a {

    color: #77798B;

    font-size: 11px;

    font-weight: 700;

    transition: .2s;

}


.nav-links a:hover,
.nav-links a.active {

    color: var(--primary);

}


.nav-actions {

    display: flex;

    align-items: center;

    gap: 8px;

}


.login-btn {

    padding:
        10px 17px;

    color: var(--primary);

    background: white;

    border:
        1px solid #DEDDFB;

    border-radius: 9px;

    font-size: 10px;

    font-weight: 800;

}


.signup-btn {

    padding:
        11px 18px;

    color: white;

    background: var(--primary);

    border-radius: 9px;

    font-size: 10px;

    font-weight: 800;

}


.signup-btn:hover {

    color: white;

    background: var(--primary-dark);

}


.mobile-menu {

    display: none;

    width: 38px;
    height: 38px;

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

    color: var(--dark);

    background: #F5F5FA;

    border: none;

    border-radius: 10px;

}


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

.hero {

    position: relative;

    overflow: hidden;

    padding:
        135px 20px 75px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(155,81,224,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 10% 90%,
            rgba(99,91,255,.12),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #FBFAFF,
            #FFFFFF
        );

}


.hero-container {

    max-width: 1180px;

    margin: auto;

    text-align: center;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    padding:
        7px 12px;

    margin-bottom: 18px;

    color: var(--primary);

    background: #F0EFFF;

    border:
        1px solid #E2E0FF;

    border-radius: 30px;

    font-size: 8px;

    font-weight: 900;

}


.hero h1 {

    margin: 0;

    color: var(--dark);

    font-size:
        clamp(
            38px,
            6vw,
            58px
        );

    line-height: 1.05;

    letter-spacing: -2px;

    font-weight: 900;

}


.hero h1 span {

    color: var(--primary);

}


.hero p {

    max-width: 600px;

    margin:
        18px auto 0;

    font-size: 12px;

    line-height: 1.8;

}


/* =========================================================
   MAIN CONTACT AREA
========================================================= */

.contact-section {

    padding:
        70px 20px 90px;

    background: var(--bg);

}


.contact-container {

    max-width: 1180px;

    margin: auto;

}


.contact-grid {

    display: grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap: 25px;

    align-items: stretch;

}


/* =========================================================
   CONTACT INFORMATION
========================================================= */

.contact-info {

    padding: 35px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #5B55E9,
            #9852D8
        );

    border-radius: 24px;

    box-shadow:
        0 20px 50px
        rgba(82,72,200,.16);

}


.contact-info h2 {

    margin: 0;

    font-size: 27px;

    font-weight: 900;

}


.contact-info > p {

    margin:
        13px 0 30px;

    color:
        rgba(255,255,255,.78);

    font-size: 10px;

    line-height: 1.8;

}


.contact-item {

    display: flex;

    align-items: flex-start;

    gap: 13px;

    margin-bottom: 20px;

}


.contact-item-icon {

    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    color: white;

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

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 10px;

}


.contact-item strong {

    display: block;

    color: white;

    font-size: 9px;

    font-weight: 900;

}


.contact-item span {

    display: block;

    margin-top: 4px;

    color:
        rgba(255,255,255,.72);

    font-size: 8px;

    line-height: 1.5;

}


.contact-socials {

    display: flex;

    gap: 8px;

    margin-top: 30px;

}


.contact-socials a {

    width: 34px;
    height: 34px;

    display: flex;

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

    color: white;

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

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 9px;

    font-size: 12px;

    transition: .2s;

}


.contact-socials a:hover {

    background: white;

    color: var(--primary);

    transform:
        translateY(-2px);

}


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

.contact-form {

    padding: 35px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 24px;

    box-shadow:
        0 15px 45px
        rgba(30,30,70,.05);

}


.form-heading {

    margin-bottom: 25px;

}


.form-heading h2 {

    margin: 0;

    color: var(--dark);

    font-size: 23px;

    font-weight: 900;

}


.form-heading p {

    margin-top: 7px;

    font-size: 9px;

}


.form-label {

    color: var(--dark);

    font-size: 8px;

    font-weight: 800;

}


.form-control,
.form-select {

    min-height: 45px;

    padding:
        10px 12px;

    color: var(--dark);

    background: #FAFAFC;

    border:
        1px solid #E6E7EF;

    border-radius: 9px;

    font-size: 9px;

}


.form-control:focus,
.form-select:focus {

    color: var(--dark);

    background: white;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(99,91,255,.09);

}


textarea.form-control {

    min-height: 125px;

    resize: vertical;

}


.send-btn {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    margin-top: 5px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--purple)
        );

    border: none;

    border-radius: 10px;

    font-size: 9px;

    font-weight: 900;

    box-shadow:
        0 10px 20px
        rgba(99,91,255,.18);

}


.send-btn:hover {

    background:
        linear-gradient(
            135deg,
            var(--primary-dark),
            #8545C4
        );

}


/* =========================================================
   ALERTS
========================================================= */

.custom-alert {

    margin-bottom: 20px;

    padding:
        12px 14px;

    border-radius: 10px;

    font-size: 8px;

    font-weight: 700;

}


.alert-success-custom {

    color: #137848;

    background: #EAF9F1;

    border:
        1px solid #C9EFD9;

}


.alert-error-custom {

    color: #B42318;

    background: #FFF0EE;

    border:
        1px solid #FFD6D1;

}


/* =========================================================
   SUPPORT OPTIONS
========================================================= */

.support-section {

    padding:
        90px 20px;

    background: white;

}


.section-container {

    max-width: 1180px;

    margin: auto;

}


.section-heading {

    max-width: 650px;

    margin:
        0 auto 45px;

    text-align: center;

}


.section-label {

    display: inline-block;

    margin-bottom: 9px;

    color: var(--primary);

    font-size: 8px;

    font-weight: 900;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.section-heading h2 {

    margin: 0;

    color: var(--dark);

    font-size: 34px;

    font-weight: 900;

    letter-spacing: -1px;

}


.section-heading p {

    margin:
        12px auto 0;

    max-width: 580px;

    font-size: 10px;

    line-height: 1.8;

}


.support-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 16px;

}


.support-card {

    padding: 27px 23px;

    background: white;

    border:
        1px solid var(--border);

    border-radius: 18px;

    transition: .25s;

}


.support-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 18px 40px
        rgba(40,40,80,.07);

}


.support-icon {

    width: 45px;
    height: 45px;

    display: flex;

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

    margin-bottom: 17px;

    color: var(--primary);

    background: #F0EFFF;

    border-radius: 12px;

    font-size: 19px;

}


.support-card:nth-child(2)
.support-icon {

    color: var(--orange);

    background: #FFF2E8;

}


.support-card:nth-child(3)
.support-icon {

    color: var(--green);

    background: #EAF9F1;

}


.support-card h3 {

    margin: 0;

    color: var(--dark);

    font-size: 12px;

    font-weight: 900;

}


.support-card p {

    margin:
        8px 0 15px;

    font-size: 8px;

    line-height: 1.7;

}


.support-card a {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: var(--primary);

    font-size: 8px;

    font-weight: 900;

}


/* =========================================================
   FAQ
========================================================= */

.faq-section {

    padding:
        80px 20px;

    background: var(--bg);

}


.faq-container {

    max-width: 850px;

    margin: auto;

}


.accordion-item {

    margin-bottom: 9px;

    overflow: hidden;

    background: white;

    border:
        1px solid var(--border) !important;

    border-radius: 12px !important;

}


.accordion-button {

    padding:
        16px;

    color: var(--dark);

    background: white;

    box-shadow: none !important;

    font-size: 9px;

    font-weight: 900;

}


.accordion-button:not(.collapsed) {

    color: var(--primary);

    background: #FAFAFF;

}


.accordion-body {

    padding:
        0 16px 16px;

    color: var(--text);

    font-size: 8px;

    line-height: 1.8;

}


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

.cta {

    padding:
        70px 20px;

}


.cta-box {

    position: relative;

    max-width: 1100px;

    margin: auto;

    padding:
        60px 30px;

    overflow: hidden;

    color: white;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #5B55E9,
            #9852D8
        );

    border-radius: 27px;

}


.cta-box h2 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-size: 31px;

    font-weight: 900;

}


.cta-box p {

    position: relative;

    z-index: 2;

    max-width: 560px;

    margin:
        13px auto 23px;

    color:
        rgba(255,255,255,.8);

    font-size: 9px;

    line-height: 1.7;

}


.cta-buttons {

    position: relative;

    z-index: 2;

    display: flex;

    justify-content: center;

    gap: 8px;

}


.cta-primary {

    padding:
        12px 19px;

    color: var(--primary);

    background: white;

    border-radius: 9px;

    font-size: 8px;

    font-weight: 900;

}


.cta-secondary {

    padding:
        11px 19px;

    color: white;

    border:
        1px solid
        rgba(255,255,255,.4);

    border-radius: 9px;

    font-size: 8px;

    font-weight: 900;

}


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

footer {

            background: #111124;

            color: #9699ae;

            padding: 70px 0 25px;

        }

        footer h5 {

            color: white;

            font-weight: 800;

            margin-bottom: 18px;

        }

        footer a {

            display: block;

            color: #9699ae;

            font-size: 13px;

            margin-bottom: 11px;

        }

        footer a:hover {

            color: white;

        }

        .footer-brand {

            color: white;

            font-size: 23px;

            font-weight: 900;

            margin-bottom: 15px;

        }

        .footer-social {

            display: flex;

            gap: 8px;

            margin-top: 20px;

        }

        .footer-social a {

            width: 38px;
            height: 38px;

            display: flex;

            align-items: center;

            justify-content: center;

            border-radius: 10px;

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

            color: white;

        }

        .footer-bottom {

            margin-top: 50px;

            padding-top: 20px;

            border-top:
                1px solid rgba(255,255,255,.08);

            font-size: 12px;

        }


/* =========================================================
   MOBILE BOTTOM NAV
========================================================= */

.mobile-bottom-nav {

    display: none;

}


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

@media(max-width: 900px) {

    .nav-links {

        display: none;

    }


    .nav-actions {

        display: none;

    }


    .mobile-menu {

        display: flex;

    }


    .contact-grid {

        grid-template-columns: 1fr;

    }


    .support-grid {

        grid-template-columns:
            1fr;

    }


    .footer-grid {

        grid-template-columns:
            repeat(2,1fr);

    }

}


@media(max-width: 600px) {

    body {

        padding-bottom: 66px;

    }


    .navbar-custom {

        height: 64px;

    }


    .nav-container {

        padding:
            0 16px;

    }


    .brand {

        font-size: 14px;

    }


    .brand-icon {

        width: 34px;
        height: 34px;

        border-radius: 10px;

    }


    .hero {

        padding:
            105px 16px 55px;

    }


    .hero h1 {

        font-size: 39px;

        letter-spacing: -1.7px;

    }


    .hero p {

        font-size: 10px;

    }


    .contact-section {

        padding:
            45px 15px 60px;

    }


    .contact-info,
    .contact-form {

        padding: 25px 20px;

        border-radius: 19px;

    }


    .contact-info h2 {

        font-size: 23px;

    }


    .contact-item {

        margin-bottom: 17px;

    }


    .support-section,
    .faq-section {

        padding:
            60px 15px;

    }


    .section-heading {

        margin-bottom: 30px;

    }


    .section-heading h2 {

        font-size: 27px;

    }


    .cta {

        padding:
            45px 15px;

    }


    .cta-box {

        padding:
            45px 18px;

        border-radius: 21px;

    }


    .cta-box h2 {

        font-size: 25px;

    }


    .cta-buttons {

        display: grid;

        grid-template-columns: 1fr;

    }


    .cta-primary,
    .cta-secondary {

        width: 100%;

        display: block;

    }


    .footer {

        padding-bottom: 35px;

    }


    .footer-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .footer-grid > div:first-child {

        grid-column:
            1 / -1;

    }


    .footer-bottom {

        flex-direction: column;

        align-items: flex-start;

        gap: 6px;

    }


    .mobile-bottom-nav {

        position: fixed;

        left: 0;
        right: 0;
        bottom: 0;

        z-index: 2000;

        height: 66px;

        display: flex;

        align-items: center;

        justify-content: space-around;

        background: white;

        border-top:
            1px solid var(--border);

        box-shadow:
            0 -8px 25px
            rgba(0,0,0,.06);

    }


    .mobile-bottom-nav a {

        min-width: 52px;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 4px;

        color: #999BA9;

        font-size: 6px;

        font-weight: 700;

    }


    .mobile-bottom-nav i {

        font-size: 17px;

    }


    .mobile-bottom-nav a.active {

        color: var(--primary);

    }

}


        /* =====================================================
           MOBILE APP DESIGN
        ===================================================== */

        @media(max-width: 767px) {

            body {

                background: #f7f7fc;

                padding-bottom: 70px;

            }


            /* Hide desktop navbar links */

            .navbar {

                padding: 10px 0;

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

            }

            .navbar-brand {

                font-size: 17px;

            }

            .brand-icon {

                width: 37px;
                height: 37px;

                border-radius: 11px;

            }

            .navbar .nav-button {

                display: none;

            }

            .navbar-toggler {

                border: none;

                box-shadow: none !important;

                font-size: 20px;

            }


            /* HERO */

            .hero {

                min-height: auto;

                padding:
                    105px
                    15px
                    40px;

                background:

                    radial-gradient(
                        circle at 0% 0%,
                        rgba(99,91,255,.16),
                        transparent 45%
                    ),

                    #f7f7fc;

            }

            .hero-badge {

                font-size: 10px;

                padding: 7px 12px;

                margin-bottom: 15px;

            }

            .hero h1 {

                font-size: 39px;

                line-height: 1.08;

                letter-spacing: -1.8px;

            }

            .hero-text {

                font-size: 13px;

                line-height: 1.7;

                margin-top: 17px;

            }

            .hero-buttons {

                margin-top: 20px;

                display: grid;

                grid-template-columns: 1fr 1fr;

            }

            .btn-main,
            .btn-light-custom {

                padding: 12px 10px;

                text-align: center;

                font-size: 12px;

            }

            .hero-stats {

                gap: 18px;

                margin-top: 25px;

            }

            .stat h4 {

                font-size: 17px;

            }

            .stat small {

                font-size: 9px;

            }


            /* APP PHONE */

            .hero-app-area {

                min-height: 570px;

                margin-top: 25px;

            }

            .phone {

                width: 270px;

                height: 550px;

                border-width: 7px;

                border-radius: 38px;

            }

            .float-card {

                padding: 9px 11px;

                border-radius: 12px;

            }

            .float-card i {

                width: 30px;
                height: 30px;

                font-size: 14px;

            }

            .float-card strong {

                font-size: 9px;

            }

            .float-card small {

                font-size: 7px;

            }

            .float-one {

                left: -4px;

                top: 70px;

            }

            .float-two {

                right: -4px;

                bottom: 80px;

            }


            /* SECTIONS */

            section {

                padding: 65px 15px;

            }

            .section-title {

                margin-bottom: 35px;

            }

            .section-label {

                font-size: 9px;

                padding: 6px 10px;

            }

            .section-title h2 {

                font-size: 29px;

                line-height: 1.15;

                letter-spacing: -.8px;

            }

            .section-title p {

                font-size: 12px;

                line-height: 1.7;

            }


            /* FEATURES */

            .feature-card {

                padding: 22px;

                border-radius: 20px;

            }

            .feature-icon {

                width: 48px;
                height: 48px;

                font-size: 20px;

                border-radius: 14px;

                margin-bottom: 16px;

            }

            .feature-card h5 {

                font-size: 15px;

            }

            .feature-card p {

                font-size: 11px;

            }


            /* EXPERIENCE */

            .experience-card {

                padding: 30px 22px;

                border-radius: 25px;

            }

            .experience-card h2 {

                font-size: 30px;

            }

            .experience-card p {

                font-size: 12px;

            }

            .check-list li {

                font-size: 11px;

            }


            /* SELLER */

            .seller-card {

                padding: 25px 20px;

                border-radius: 20px;

            }

            .seller-card h3 {

                font-size: 23px;

            }


            /* PROCESS */

            .process-card {

                padding: 15px 8px;

            }

            .process-number {

                width: 48px;
                height: 48px;

                border-radius: 15px;

                font-size: 16px;

            }

            .process-card h5 {

                font-size: 14px;

            }

            .process-card p {

                font-size: 10px;

            }


            /* CTA */

            .cta-section {

                padding:
                    60px
                    15px;

            }

            .cta {

                padding: 50px 20px;

                border-radius: 25px;

            }

            .cta h2 {

                font-size: 31px;

                line-height: 1.15;

            }

            .cta p {

                font-size: 12px;

            }


            /* FOOTER */

            footer {

                padding:
                    50px 20px
                    90px;

            }

            footer p {

                font-size: 12px;

                line-height: 1.8;

            }


            /* MOBILE BOTTOM NAV */

            .mobile-bottom-nav {

                position: fixed;

                display: flex;

                align-items: center;

                justify-content: space-around;

                left: 0;
                right: 0;
                bottom: 0;

                height: 67px;

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

                backdrop-filter: blur(15px);

                border-top:
                    1px solid #e8e8ef;

                z-index: 10000;

                box-shadow:
                    0 -8px 30px rgba(30,30,60,.08);

            }

            .mobile-bottom-nav a {

                min-width: 60px;

                text-align: center;

                color: #9295a5;

                font-size: 9px;

                font-weight: 600;

            }

            .mobile-bottom-nav i {

                display: block;

                font-size: 19px;

                margin-bottom: 3px;

            }

            .mobile-bottom-nav a.active {

                color: var(--primary);

            }

            .mobile-bottom-nav .center-button {

                width: 48px;
                height: 48px;

                display: flex;

                align-items: center;

                justify-content: center;

                margin-top: -25px;

                border-radius: 16px;

                color: white;

                background:
                    linear-gradient(
                        135deg,
                        #635bff,
                        #9b51e0
                    );

                border:
                    5px solid #f7f7fc;

                box-shadow:
                    0 8px 20px rgba(99,91,255,.35);

            }

            .mobile-bottom-nav .center-button i {

                margin: 0;

                font-size: 20px;

            }

        }


        /* =====================================================
           SMALL PHONES
        ===================================================== */

        @media(max-width: 380px) {

            .hero h1 {

                font-size: 35px;

            }

            .phone {

                width: 250px;

                height: 520px;

            }

            .hero-app-area {

                min-height: 540px;

            }

        }


/* =====================================================
   DESKTOP NAVIGATION BUTTONS
===================================================== */

.desktop-nav-actions {

    display: flex;

    align-items: center;

    gap: 10px;

}


/* LOGIN */

.login-nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    padding: 11px 17px;

    border-radius: 12px;

    background: #ffffff;

    border: 1px solid #e5e5ef;

    color: #14142b;

    font-size: 13px;

    font-weight: 800;

    transition: all .3s ease;

}


.login-nav-btn:hover {

    color: #635bff;

    border-color: #635bff;

    background: #f8f7ff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(99,91,255,.10);

}


/* GET STARTED */

.register-nav-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 12px;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #635bff,
            #7c4dff
        );

    font-size: 13px;

    font-weight: 800;

    box-shadow:
        0 8px 20px rgba(99,91,255,.20);

    transition: all .3s ease;

}


.register-nav-btn:hover {

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(99,91,255,.30);

}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width: 991px) {

    .desktop-nav-actions {

        flex-direction: column;

        align-items: stretch;

        margin-top: 15px;

        padding-top: 15px;

        border-top: 1px solid #eeeeF4;

    }


    .login-nav-btn,
    .register-nav-btn {

        width: 100%;

        text-align: center;

    }

}


/* =====================================================
   PHONE APP MODE
===================================================== */

@media(max-width: 767px) {

    .desktop-nav-actions {

        /* display: none; */

        flex-direction: column;

        align-items: stretch;

        margin-top: 15px;

        padding-top: 15px;

        border-top: 1px solid #eeeeF4;

    }

}