/* =========================================
   WINPAY WEBSITE - MAIN CSS
   Theme: Blue + Cyan
========================================= */

*{
    box-sizing:border-box;
}

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

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f8fc;
    color:#263b52;
    line-height:1.7;
}

/* =========================================
   HEADER
========================================= */

.header{
    position:sticky;
    top:0;
    z-index:9999;
    background:#ffffff;
    border-bottom:1px solid #dce7f2;
    box-shadow:0 2px 12px rgba(20,55,90,.06);
}

.header-inner{
    max-width:1250px;
    margin:auto;
    height:75px;
    padding:0 20px;

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

/* LOGO */

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

    text-decoration:none;

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

    color:#203d78;
}

.logo img{
    width:50px;
    height:50px;

    object-fit:contain;

    border-radius:10px;
    display:block;

    background:#ffffff;
}

/* NAVIGATION */

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

nav a{
    position:relative;

    text-decoration:none;

    color:#405775;

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

    padding:8px 0;

    transition:.25s ease;
}

nav a::after{
    content:"";

    position:absolute;
    left:0;
    bottom:0;

    width:0;
    height:2px;

    background:linear-gradient(
        90deg,
        #263f83,
        #20a9df
    );

    transition:.25s ease;
}

nav a:hover{
    color:#168fd0;
}

nav a:hover::after{
    width:100%;
}

/* MOBILE MENU BUTTON */

.menu-btn{
    display:none;

    width:44px;
    height:44px;

    border:1px solid #d7e4ef;
    border-radius:10px;

    background:#ffffff;

    color:#203d78;

    font-size:25px;

    cursor:pointer;

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

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

.hero{
    position:relative;

    padding:65px 20px 75px;

    text-align:center;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 50% 25%,
            #1e4380 0%,
            #0c2148 35%,
            #07152d 65%,
            #030b19 100%
        );

    border-bottom:4px solid #20a9df;

    overflow:hidden;
}

.hero::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:50%;
    top:-300px;

    transform:translateX(-50%);

    border-radius:50%;

    border:1px solid rgba(32,169,223,.20);

    box-shadow:
        0 0 80px rgba(32,169,223,.10);

    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;

    max-width:950px;
    margin:auto;
}

/* WINPAY HERO LOGO */

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

    object-fit:contain;

    display:block;

    margin:0 auto 22px;

    padding:8px;

    background:#ffffff;

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

    border-radius:24px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.30),
        0 0 30px rgba(32,169,223,.20);
}

/* HERO TITLE */

.hero h1{
    font-size:48px;

    line-height:1.2;

    margin:10px 0 20px;

    font-weight:800;

    background:
        linear-gradient(
            90deg,
            #ffffff 0%,
            #d9f5ff 45%,
            #24b6ea 100%
        );

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

    color:transparent;
}

.hero p{
    max-width:820px;

    margin:0 auto 30px;

    font-size:18px;

    color:#d8e8f7;
}

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

.hero-buttons{
    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;
}

.primary-btn,
.secondary-btn{
    display:inline-block;

    padding:15px 27px;

    border-radius:10px;

    text-decoration:none;

    font-weight:700;

    transition:.25s ease;
}

.primary-btn{
    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #263f83,
            #149fd8
        );

    box-shadow:
        0 8px 20px rgba(20,159,216,.25);
}

.primary-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 25px rgba(20,159,216,.35);
}

.secondary-btn{
    color:#ffffff;

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

    border:1px solid rgba(70,190,235,.65);
}

.secondary-btn:hover{
    background:#159ed7;

    border-color:#159ed7;
}

/* =========================================
   MAIN CONTAINER
========================================= */

.container{
    max-width:1250px;

    margin:auto;

    padding:38px 18px;
}

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

.card{
    background:#ffffff;

    border:1px solid #dce7f1;

    border-radius:18px;

    padding:32px;

    margin-bottom:28px;

    box-shadow:
        0 4px 16px rgba(25,65,100,.06);
}

.card h2{
    font-size:30px;

    color:#1d376c;

    margin:0 0 22px;

    padding-bottom:13px;

    border-bottom:2px solid #edf3f8;
}

.card p,
.card li{
    font-size:17px;

    color:#405a73;
}

/* =========================================
   TABLE OF CONTENT
========================================= */

.toc{
    display:grid;

    grid-template-columns:1fr 1fr;

    column-gap:40px;
}

.toc a{
    position:relative;

    text-decoration:none;

    color:#315776;

    font-size:16px;

    padding:8px 0 8px 18px;

    border-bottom:1px solid #edf2f6;

    transition:.25s ease;
}

.toc a::before{
    content:"›";

    position:absolute;

    left:0;

    color:#159ed7;

    font-weight:bold;
}

.toc a:hover{
    color:#149ed8;

    padding-left:23px;
}

/* =========================================
   INVITE CODE
========================================= */

.invite-box{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:20px 25px;

    border:1px dashed #159ed8;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #f5fbff,
            #eef8fd
        );
}

.invite-box span{
    display:block;

    font-size:12px;

    color:#67819b;

    font-weight:bold;

    margin-bottom:4px;
}

.invite-box strong{
    display:block;

    font-size:28px;

    letter-spacing:3px;

    color:#203f83;
}

.invite-box button{
    border:0;

    background:
        linear-gradient(
            135deg,
            #263f83,
            #159ed7
        );

    color:#ffffff;

    padding:12px 22px;

    border-radius:9px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s ease;
}

.invite-box button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 7px 18px rgba(21,158,215,.25);
}

.small-note{
    font-size:14px!important;

    color:#70859a!important;
}

/* =========================================
   DOWNLOAD BUTTON
========================================= */

.download-btn{
    display:block;

    max-width:400px;

    margin:25px auto;

    padding:16px;

    text-align:center;

    text-decoration:none;

    color:#ffffff;

    font-weight:bold;

    font-size:18px;

    border-radius:12px;

    background:
        linear-gradient(
            100deg,
            #263f83,
            #159ed7
        );

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

    transition:.25s ease;
}

.download-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 12px 25px rgba(0,130,240,.32);
}

/* =========================================
   APP INFORMATION
========================================= */

.app-info{
    display:grid;

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

    gap:15px;

    margin-top:25px;
}

.app-info div{
    padding:18px;

    background:#f7fafc;

    border:1px solid #e0e8ef;

    border-radius:12px;

    text-align:center;

    transition:.25s ease;
}

.app-info div:hover{
    transform:translateY(-3px);

    border-color:#b9dff0;
}

.app-info span{
    display:block;

    font-size:11px;

    color:#73879b;

    margin-bottom:4px;
}

.app-info strong{
    font-size:16px;

    color:#203b73;
}

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

.features{
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:20px;
}

.feature{
    padding:25px;

    border:1px solid #dce5ee;

    border-radius:15px;

    background:#ffffff;

    transition:.25s ease;
}

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

    border-color:#a9d9ee;

    box-shadow:
        0 8px 22px rgba(30,80,120,.08);
}

.feature-icon{
    font-size:30px;
}

.feature h3{
    color:#168fc9;

    margin:8px 0;
}

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

table{
    width:100%;

    border-collapse:collapse;
}

th,
td{
    border:1px solid #dce5ee;

    padding:15px;

    text-align:left;
}

th{
    background:
        linear-gradient(
            90deg,
            #f2f7fb,
            #eef7fc
        );

    color:#203d78;
}

/* =========================================
   SCREENSHOTS
========================================= */

.screenshots{
    display:grid;

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

    gap:20px;
}

.screenshots div{
    border:1px solid #dce5ee;

    border-radius:14px;

    overflow:hidden;

    text-align:center;

    background:#ffffff;
}

.screenshots img{
    width:100%;

    height:400px;

    object-fit:contain;

    background:#ffffff;

    display:block;
}

.screenshots p{
    font-weight:bold;

    font-size:15px;

    color:#29466c;
}

/* =========================================
   NOTICE
========================================= */

.notice,
.warning{
    padding:20px;

    border-radius:12px;

    background:#f2f8ff;

    border-left:5px solid #159ed7;
}

.warning{
    background:#fff8ed;

    border-left-color:#f09a28;
}

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

details{
    border:1px solid #dce5ee;

    border-radius:12px;

    margin:12px 0;

    padding:0 18px;

    background:#ffffff;
}

details[open]{
    border-color:#b7dcec;
}

summary{
    cursor:pointer;

    font-weight:bold;

    padding:17px 0;

    color:#203d78;
}

details p{
    padding-bottom:12px;
}

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

footer{
    background:
        linear-gradient(
            135deg,
            #071327,
            #020812
        );

    color:#9bb9d1;

    padding:50px 20px 25px;

    border-top:3px solid #159ed7;
}

.footer-inner{
    max-width:1000px;

    margin:auto;

    display:grid;

    grid-template-columns:
        1.3fr 1fr 1fr;

    gap:50px;
}

footer h3{
    color:#ffffff;

    margin-top:0;
}

footer a{
    display:block;

    color:#9bb9d1;

    text-decoration:none;

    margin:7px 0;

    transition:.2s ease;
}

footer a:hover{
    color:#32b8e8;

    padding-left:4px;
}

.copyright{
    max-width:1000px;

    margin:35px auto 0;

    padding-top:22px;

    border-top:1px solid #26333e;

    text-align:center;

    color:#8da8bd;
}

/* =========================================
   SELECTION
========================================= */

::selection{
    background:#159ed7;

    color:#ffffff;
}

/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
    width:9px;
}

::-webkit-scrollbar-track{
    background:#edf3f8;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            #263f83,
            #159ed7
        );

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#159ed7;
}

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

@media(max-width:760px){

    .header-inner{
        height:65px;

        padding:0 15px;
    }

    .logo{
        font-size:21px;

        gap:9px;
    }

    .logo img{
        width:42px;
        height:42px;

        border-radius:8px;
    }

    .menu-btn{
        display:flex;
    }

    nav{
        display:none;

        position:absolute;

        left:0;
        right:0;

        top:65px;

        background:#ffffff;

        padding:10px 20px;

        flex-direction:column;

        gap:0;

        border-bottom:1px solid #dce5ee;

        box-shadow:
            0 8px 18px rgba(20,50,80,.08);
    }

    nav.active{
        display:flex;
    }

    nav a{
        padding:12px 0;

        border-bottom:1px solid #edf2f6;
    }

    nav a:last-child{
        border-bottom:0;
    }

    nav a::after{
        display:none;
    }

    /* HERO */

    .hero{
        padding:45px 17px 55px;
    }

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

        padding:7px;

        border-radius:20px;

        margin-bottom:18px;
    }

    .hero h1{
        font-size:34px;

        line-height:1.25;
    }

    .hero p{
        font-size:16px;

        line-height:1.7;
    }

    .hero-buttons{
        flex-direction:column;

        align-items:stretch;

        max-width:360px;

        margin:auto;
    }

    .primary-btn,
    .secondary-btn{
        text-align:center;

        width:100%;
    }

    /* CONTAINER */

    .container{
        padding:25px 13px;
    }

    .card{
        padding:23px 17px;

        border-radius:15px;
    }

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

    .card p,
    .card li{
        font-size:16px;
    }

    /* TOC */

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

    /* INVITE */

    .invite-box{
        align-items:flex-start;

        flex-direction:column;
    }

    .invite-box strong{
        font-size:24px;

        word-break:break-word;
    }

    .invite-box button{
        width:100%;
    }

    /* GRIDS */

    .app-info,
    .features,
    .screenshots,
    .footer-inner{
        grid-template-columns:1fr;
    }

    /* SCREENSHOTS */

    .screenshots img{
        height:430px;
    }

    /* TABLE */

    table{
        display:block;

        overflow-x:auto;

        white-space:nowrap;
    }

    /* FOOTER */

    .footer-inner{
        gap:25px;
    }
}

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

@media(max-width:400px){

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

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

    .card{
        padding:20px 14px;
    }

    .invite-box{
        padding:18px;
    }

    .invite-box strong{
        font-size:21px;
    }
}