/* =========================================================
   BOSSPAY PREMIUM WEBSITE CSS
   Theme: Deep Navy Blue + Gold + White
   Brand: Bosspay
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:90px;
}

body{
    font-family:"Poppins",Arial,Helvetica,sans-serif;
    background:#f5f8fc;
    color:#172b4d;
    line-height:1.75;
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

::selection{
    background:#f2ad00;
    color:#ffffff;
}


/* =========================================================
   VARIABLES
========================================================= */

:root{

    --navy:#071f49;
    --navy-dark:#04152f;
    --navy-light:#0d3975;

    --blue:#1456a0;

    --gold:#e6a400;
    --gold-light:#ffd86a;
    --gold-dark:#b87900;

    --white:#ffffff;

    --text:#172b4d;
    --muted:#65748b;

    --bg:#f5f8fc;
    --card:#ffffff;

    --border:#e4eaf2;

    --shadow:
        0 12px 35px rgba(7,31,73,.08);

    --shadow-hover:
        0 18px 45px rgba(7,31,73,.15);

}


/* =========================================================
   SITE WRAPPER
========================================================= */

.site-wrapper{
    width:100%;
    min-height:100vh;
}


/* =========================================================
   HEADER
   IMPORTANT: LOCKED / STICKY
========================================================= */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:99999;

    background:
        linear-gradient(
            135deg,
            #04152f 0%,
            #071f49 55%,
            #0d3975 100%
        );

    border-bottom:1px solid rgba(255,216,106,.25);

    box-shadow:
        0 5px 25px rgba(0,0,0,.20);

    isolation:isolate;
}


/* Header inner */

.header-inner{
    width:100%;
    max-width:1200px;
    min-height:76px;

    margin:auto;
    padding:10px 24px;

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


/* =========================================================
   BRAND
========================================================= */

.brand{
    display:flex;
    align-items:center;
    gap:12px;

    min-width:0;

    transition:
        transform .25s ease;
}

.brand:hover{
    transform:translateY(-1px);
}


.brand-logo{
    width:50px;
    height:50px;

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

    background:#ffffff;

    border-radius:14px;

    padding:4px;

    overflow:hidden;

    box-shadow:
        0 5px 18px rgba(0,0,0,.20);

    border:2px solid rgba(255,216,106,.65);
}


.brand-logo img{
    width:100%;
    height:100%;

    object-fit:contain;

    border-radius:10px;
}


.brand-name{
    font-size:24px;
    font-weight:800;

    letter-spacing:-.5px;

    color:#ffffff;

    white-space:nowrap;
}


.brand-name::first-letter{
    color:#ffffff;
}


/* =========================================================
   MENU BUTTON
========================================================= */

.menu-button{
    width:46px;
    height:46px;

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

    border-radius:12px;

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

    display:flex;

    flex-direction:column;

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

    gap:5px;

    cursor:pointer;

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

.menu-button:hover{
    background:rgba(255,255,255,.15);

    border-color:
        rgba(255,216,106,.55);
}

.menu-button:active{
    transform:scale(.96);
}


.menu-button span{
    width:22px;
    height:2px;

    border-radius:10px;

    background:#ffffff;

    transition:
        transform .3s ease,
        opacity .3s ease;
}


/* Animated hamburger */

.menu-button.active span:nth-child(1){
    transform:
        translateY(7px)
        rotate(45deg);
}

.menu-button.active span:nth-child(2){
    opacity:0;
}

.menu-button.active span:nth-child(3){
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* =========================================================
   SLIDE MENU
========================================================= */

.menu{
    position:fixed;

    top:76px;
    right:0;

    width:330px;
    max-width:90vw;

    height:
        calc(100vh - 76px);

    padding:20px 15px 30px;

    overflow-y:auto;

    background:
        linear-gradient(
            180deg,
            #061a3b 0%,
            #071f49 60%,
            #04152f 100%
        );

    border-left:
        1px solid rgba(255,216,106,.22);

    box-shadow:
        -15px 0 45px rgba(0,0,0,.22);

    transform:
        translateX(105%);

    opacity:0;
    visibility:hidden;

    transition:
        transform .32s ease,
        opacity .32s ease,
        visibility .32s ease;

    z-index:99998;
}


/* Open menu */

.menu.show{
    transform:translateX(0);

    opacity:1;

    visibility:visible;
}


/* Menu scrollbar */

.menu::-webkit-scrollbar{
    width:5px;
}

.menu::-webkit-scrollbar-track{
    background:rgba(255,255,255,.04);
}

.menu::-webkit-scrollbar-thumb{
    background:#d89a00;
    border-radius:20px;
}


/* Menu links */

.menu a{
    display:block;

    padding:13px 16px;

    margin-bottom:7px;

    border-radius:10px;

    color:#eef4ff;

    font-size:14px;

    font-weight:600;

    border:1px solid transparent;

    transition:
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        padding-left .25s ease;
}


.menu a:hover{
    color:#ffffff;

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

    border-color:
        rgba(255,216,106,.22);

    padding-left:21px;
}


/* Active link */

.menu a.active{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #b87900,
            #f0b900,
            #d78b00
        );

    border-color:
        rgba(255,255,255,.20);

    box-shadow:
        0 6px 18px rgba(230,164,0,.22);
}


/* =========================================================
   BODY TOP SPACE
========================================================= */

body{
    padding-top:76px;
}


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

.hero{
    position:relative;

    width:100%;

    padding:
        70px 20px
        75px;

    text-align:center;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,216,106,.17),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #04152f 0%,
            #071f49 52%,
            #0c3975 100%
        );

    color:#ffffff;

    border-bottom:
        4px solid #e6a400;
}


/* Decorative circles */

.hero::before{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-220px;
    left:-160px;

    border-radius:50%;

    border:
        1px solid rgba(255,216,106,.16);

    pointer-events:none;
}


.hero::after{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-250px;
    bottom:-300px;

    border-radius:50%;

    border:
        1px solid rgba(255,216,106,.13);

    pointer-events:none;
}


/* Hero logo */

.hero-logo{
    position:relative;

    width:210px;
    height:210px;

    margin:0 auto 25px;

    padding:10px;

    border-radius:30px;

    background:#ffffff;

    border:
        3px solid rgba(255,216,106,.80);

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

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

    z-index:1;
}


.hero-logo img{
    width:100%;
    height:100%;

    object-fit:contain;

    border-radius:20px;
}


/* Hero heading */

.hero h1{
    position:relative;

    z-index:1;

    margin-bottom:15px;

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

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1.5px;

    color:#ffffff;
}


.hero h1::after{
    content:"";

    display:block;

    width:90px;
    height:4px;

    margin:17px auto 0;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #b87900,
            #ffd86a,
            #b87900
        );
}


.hero > p{
    position:relative;

    z-index:1;

    max-width:850px;

    margin:20px auto 28px;

    color:#e5edfa;

    font-size:16px;

    line-height:1.8;
}


/* =========================================================
   REFER BOX
========================================================= */

.refer-box{
    position:relative;

    z-index:2;

    width:100%;
    max-width:480px;

    margin:25px auto;

    padding:17px;

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

    border:
        1px solid rgba(255,216,106,.35);

    border-radius:16px;

    backdrop-filter:
        blur(8px);

    box-shadow:
        0 10px 30px rgba(0,0,0,.15);
}


.refer-label{
    display:block;

    margin-bottom:9px;

    color:#ffd86a;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.8px;
}


.refer-code{
    min-height:48px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:7px 7px 7px 15px;

    background:#ffffff;

    border-radius:11px;

    color:#0a2f75;

    font-size:16px;

    font-weight:800;

    letter-spacing:1px;
}


/* Copy button */

.copy-btn{
    border:0;

    padding:10px 18px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            #b87900,
            #f1b900
        );

    color:#ffffff;

    font-family:inherit;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

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


.copy-btn:hover{
    transform:translateY(-1px);

    box-shadow:
        0 5px 15px rgba(230,164,0,.30);
}


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

.hero-buttons{
    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;
}


.btn{
    display:inline-flex;

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

    min-height:48px;

    padding:12px 22px;

    border-radius:10px;

    font-size:14px;

    font-weight:700;

    border:1px solid transparent;

    cursor:pointer;

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


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


/* Primary */

.btn-primary{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #b87900,
            #f2b900,
            #d98c00
        );

    box-shadow:
        0 8px 22px rgba(0,0,0,.20);
}


.btn-primary:hover{
    box-shadow:
        0 12px 28px rgba(230,164,0,.30);
}


/* Outline */

.btn-outline{
    color:#ffffff;

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

    border-color:
        rgba(255,216,106,.55);
}


.btn-outline:hover{
    background:
        rgba(255,216,106,.13);

    border-color:#ffd86a;
}


/* Download */

.btn-download{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #124b91,
            #0d3975
        );

    border-color:
        rgba(255,255,255,.15);
}


.btn-download:hover{
    box-shadow:
        0 10px 25px rgba(7,31,73,.35);
}


/* =========================================================
   MAIN CONTENT
========================================================= */

.content{
    width:100%;

    max-width:1120px;

    margin:0 auto;

    padding:
        35px 18px
        60px;
}


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

.card{
    background:
        #ffffff;

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

    border-radius:18px;

    padding:
        30px;

    margin-bottom:25px;

    box-shadow:
        var(--shadow);

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


.card:hover{
    box-shadow:
        var(--shadow-hover);
}


.card h2{
    position:relative;

    margin-bottom:17px;

    padding-bottom:12px;

    color:var(--navy);

    font-size:
        clamp(23px,4vw,31px);

    line-height:1.35;

    font-weight:800;
}


.card h2::after{
    content:"";

    display:block;

    width:65px;
    height:3px;

    margin-top:10px;

    border-radius:10px;

    background:
        linear-gradient(
            90deg,
            #b87900,
            #f4c337
        );
}


.card h3{
    margin-top:23px;
    margin-bottom:9px;

    color:#0b3672;

    font-size:20px;

    font-weight:700;
}


.card p{
    margin-bottom:15px;

    color:#53657c;

    font-size:15px;
}


.card p:last-child{
    margin-bottom:0;
}


/* =========================================================
   LISTS
========================================================= */

.card ul,
.card ol{
    margin:
        15px 0
        15px 23px;

    color:#52657e;
}


.card li{
    margin-bottom:9px;

    padding-left:4px;
}


.card li::marker{
    color:#d69200;
    font-weight:700;
}


/* =========================================================
   INFO BOX
========================================================= */

.info-box{
    margin-top:20px;

    padding:17px 19px;

    border-left:
        4px solid #e0a000;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fffdf8
        );

    color:#5a4b2a;

    font-size:14px;
}


.info-box strong{
    color:#9b6800;
}


/* =========================================================
   TABLE
========================================================= */

.table-wrap{
    width:100%;

    overflow-x:auto;

    margin-top:18px;

    border-radius:12px;

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


table{
    width:100%;

    min-width:620px;

    border-collapse:collapse;

    background:#ffffff;
}


thead{
    background:
        linear-gradient(
            135deg,
            #071f49,
            #0d3975
        );

    color:#ffffff;
}


th,
td{
    padding:14px 16px;

    text-align:left;

    border-bottom:
        1px solid #e9edf3;

    font-size:14px;
}


th{
    font-weight:700;

    white-space:nowrap;
}


td{
    color:#566980;
}


tbody tr:hover{
    background:#fafbfd;
}


tbody tr:last-child td{
    border-bottom:0;
}


/* =========================================================
   TAGS
========================================================= */

.tags{
    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:17px;
}


.tag{
    display:inline-flex;

    align-items:center;

    min-height:34px;

    padding:7px 13px;

    border-radius:30px;

    background:
        #eef4fb;

    border:
        1px solid #d9e5f3;

    color:#164a88;

    font-size:12px;

    font-weight:600;

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


.tag:hover{
    background:
        #e8a900;

    border-color:#e8a900;

    color:#ffffff;

    transform:translateY(-2px);
}


/* =========================================================
   SCREENSHOT SECTION
========================================================= */

.screenshot-grid{
    display:grid;

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

    gap:20px;

    margin-top:25px;
}


.screenshot-card{
    overflow:hidden;

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

    border-radius:15px;

    background:#ffffff;

    box-shadow:
        0 8px 25px rgba(7,31,73,.07);

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


.screenshot-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 15px 35px rgba(7,31,73,.13);
}


.screenshot-card img{
    width:100%;

    aspect-ratio:9 / 16;

    object-fit:cover;

    background:
        linear-gradient(
            135deg,
            #edf2f8,
            #ffffff
        );
}


.screenshot-card h3{
    margin:
        17px 17px 6px;

    font-size:17px;
}


.screenshot-card p{
    margin:
        0 17px 18px;

    font-size:13px;
}


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

.faq-item{
    margin-bottom:13px;

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

    border-radius:12px;

    overflow:hidden;

    background:#ffffff;
}


.faq-question{
    margin:0 !important;

    padding:
        16px 18px;

    color:#0b3672 !important;

    background:
        #f8fafc;

    font-size:16px !important;

    cursor:pointer;
}


.faq-question::after{
    display:none !important;
}


.faq-answer{
    padding:
        0 18px 17px;

    margin:0 !important;

    font-size:14px !important;
}


/* =========================================================
   PROS LIST
========================================================= */

.pros{
    list-style:none;

    margin-left:0 !important;
}


.pros li{
    position:relative;

    padding-left:29px;

    margin-bottom:10px;
}


.pros li::before{
    content:"✓";

    position:absolute;

    left:0;
    top:0;

    width:20px;
    height:20px;

    display:flex;

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

    border-radius:50%;

    background:#e8a900;

    color:#ffffff;

    font-size:12px;

    font-weight:800;
}


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

.footer{
    width:100%;

    padding:
        30px 18px;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            #04152f,
            #071f49,
            #0d3975
        );

    color:#bfcce0;

    border-top:
        3px solid #e3a300;

    font-size:13px;

    line-height:2;
}


.footer strong{
    color:#ffd45d;
}


.footer a{
    color:#e7b32a;

    font-weight:600;

    transition:
        color .2s ease;
}


.footer a:hover{
    color:#ffffff;
}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media(max-width:900px){

    .header-inner{
        padding:
            9px 18px;
    }


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


    .card{
        padding:25px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media(max-width:600px){

    html{
        scroll-padding-top:80px;
    }


    body{
        padding-top:68px;
    }


    /* Header */

    .header-inner{
        min-height:68px;

        padding:
            8px 13px;
    }


    .brand{
        gap:9px;
    }


    .brand-logo{
        width:43px;
        height:43px;

        border-radius:11px;
    }


    .brand-name{
        font-size:21px;
    }


    .menu-button{
        width:43px;
        height:43px;
    }


    /* Menu */

    .menu{
        top:68px;

        width:300px;
        max-width:88vw;

        height:
            calc(100vh - 68px);

        padding:
            15px 12px 25px;
    }


    .menu a{
        padding:
            12px 14px;

        font-size:13px;
    }


    /* Hero */

    .hero{
        padding:
            45px 15px
            50px;
    }


    .hero-logo{
        width:155px;
        height:155px;

        border-radius:23px;

        padding:8px;
    }


    .hero h1{
        font-size:37px;

        letter-spacing:-1px;
    }


    .hero > p{
        font-size:14px;

        line-height:1.75;
    }


    /* Refer */

    .refer-box{
        padding:13px;
    }


    .refer-code{
        font-size:14px;

        padding-left:12px;
    }


    .copy-btn{
        padding:
            9px 13px;

        font-size:12px;
    }


    /* Buttons */

    .hero-buttons{
        flex-direction:column;

        width:100%;
    }


    .btn{
        width:100%;

        max-width:340px;

        min-height:47px;

        font-size:13px;
    }


    /* Content */

    .content{
        padding:
            22px 12px
            40px;
    }


    .card{
        padding:
            21px 17px;

        border-radius:15px;

        margin-bottom:18px;
    }


    .card h2{
        font-size:22px;
    }


    .card h3{
        font-size:18px;
    }


    .card p{
        font-size:14px;

        line-height:1.8;
    }


    /* Screenshot */

    .screenshot-grid{
        grid-template-columns:1fr;

        gap:17px;
    }


    .screenshot-card img{
        aspect-ratio:
            9 / 14;
    }


    /* Table */

    .table-wrap{
        margin-left:-1px;

        width:
            calc(100% + 2px);
    }


    /* Footer */

    .footer{
        padding:
            25px 12px;

        font-size:12px;
    }

}


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

@media(max-width:380px){

    .brand-name{
        font-size:19px;
    }


    .hero h1{
        font-size:32px;
    }


    .hero-logo{
        width:135px;
        height:135px;
    }


    .card{
        padding:
            18px 14px;
    }


    .refer-code{
        font-size:12px;
    }

}


/* =========================================================
   REDUCE MOTION
========================================================= */

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

    html{
        scroll-behavior:auto;
    }


    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }

}