/* =====================================================
   SubPay Premium Design
   Part 1 — Base + Header + Hero
===================================================== */

:root{

    --bg:#050b18;
    --bg-soft:#0b1628;

    --primary:#4f8cff;
    --primary-light:#00d4ff;

    --text:#ffffff;
    --muted:#9aa8bd;

    --card:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);

    --radius:24px;

}


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Inter',Arial,sans-serif;

    background:
    radial-gradient(circle at 10% 10%,rgba(79,140,255,.25),transparent 35%),
    radial-gradient(circle at 90% 80%,rgba(0,212,255,.18),transparent 35%),
    linear-gradient(
        180deg,
        var(--bg),
        var(--bg-soft)
    );

    color:var(--text);

    min-height:100vh;

    overflow-x:hidden;

}



body:before{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:#2563eb;

    opacity:.12;

    filter:blur(120px);

    top:-150px;

    left:-150px;

    z-index:-1;

}



body:after{

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:#00d4ff;

    opacity:.10;

    filter:blur(120px);

    right:-150px;

    bottom:-150px;

    z-index:-1;

}



.container{

    width:min(1200px,92%);

    margin:auto;

}


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


header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:min(1200px,92%);

    padding:16px 26px;

    display:flex;

    align-items:center;

    justify-content:space-between;

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

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

    backdrop-filter:blur(20px);

    border-radius:20px;

    z-index:1000;

}


.logo a{

    font-size:30px;

    font-weight:800;

    text-decoration:none;

    color:white;

}


.logo span{

    color:var(--primary);

}



.desktop-menu{

    display:flex;

    gap:30px;

}


.desktop-menu a{

    color:white;

    text-decoration:none;

    font-size:15px;

    opacity:.85;

    transition:.3s;

}


.desktop-menu a:hover{

    color:var(--primary-light);

}



.header-buttons{

    display:flex;

    gap:15px;

    align-items:center;

}



.login{

    color:white;

    text-decoration:none;

}



.catalog-btn{

    padding:12px 22px;

    background:
    linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    border-radius:14px;

    color:white;

    text-decoration:none;

    font-weight:700;

}


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


.hero{

    padding-top:180px;

    padding-bottom:120px;

}



.hero-grid{

    display:grid;

    grid-template-columns:1fr 480px;

    align-items:center;

    gap:70px;

}



.badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(79,140,255,.15);

    border:1px solid rgba(79,140,255,.3);

    margin-bottom:30px;

    font-size:14px;

}



.hero h1{

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    letter-spacing:-2px;

    margin-bottom:25px;

}



.hero p{

    color:var(--muted);

    font-size:20px;

    line-height:1.8;

    max-width:600px;

}



.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:40px;

}



.btn{

    padding:17px 35px;

    border-radius:15px;

    text-decoration:none;

    color:white;

    font-weight:700;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    box-shadow:

    0 20px 40px rgba(79,140,255,.3);

}



.btn-outline{

    padding:17px 35px;

    border-radius:15px;

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

    color:white;

    text-decoration:none;

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

}



/* =====================================================
   FLOATING CARDS
===================================================== */


.hero-products{

    position:relative;

    height:500px;

}



.floating-card{

    position:absolute;

    width:330px;

    padding:30px;

    border-radius:26px;

    background:

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

    border:

    1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.4);

    animation:float 5s infinite ease-in-out;

}



.floating-card .icon{

    font-size:45px;

    margin-bottom:15px;

}


.floating-card h3{

    font-size:28px;

    margin-bottom:10px;

}


.floating-card p{

    font-size:16px;

}



.floating-card strong{

    display:block;

    margin-top:20px;

    font-size:24px;

    color:#75b8ff;

}



.card-one{

    top:20px;

    left:20px;

}



.card-two{

    top:180px;

    right:0;

    animation-delay:1s;

}



.card-three{

    bottom:20px;

    left:60px;

    animation-delay:2s;

}



@keyframes float{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

}

/* =====================================================
   PRODUCTS SECTION
===================================================== */

.section{

    padding:100px 0;

}


.section-title{

    text-align:center;

    font-size:48px;

    font-weight:800;

    margin-bottom:20px;

    letter-spacing:-1px;

}


.section-description{

    max-width:700px;

    margin:0 auto 60px;

    text-align:center;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;

}



/* PRODUCTS GRID */

.products-grid{

    display:grid;

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

    gap:25px;

}



.product-card{

    padding:32px;

    border-radius:26px;

    background:

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

    position:relative;

    overflow:hidden;

}



.product-card:before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-80px;

    top:-80px;

    background:var(--primary);

    opacity:.15;

    filter:blur(60px);

    border-radius:50%;

}



.product-card:hover{

    transform:translateY(-12px);

    border-color:rgba(79,140,255,.6);

    box-shadow:

    0 30px 60px rgba(0,0,0,.35);

}



.product-icon{

    font-size:50px;

    margin-bottom:25px;

}



.product-card h3{

    font-size:26px;

    margin-bottom:15px;

}



.product-card p{

    color:var(--muted);

    line-height:1.7;

    min-height:75px;

}



.price{

    margin-top:25px;

    margin-bottom:25px;

    font-size:26px;

    font-weight:800;

    color:#72b7ff;

}



.product-button{

    display:inline-block;

    padding:13px 25px;

    border-radius:14px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    text-decoration:none;

    color:white;

    font-weight:600;

}



/* =====================================================
   ADVANTAGES
===================================================== */


.advantages-grid{

    display:grid;

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

    gap:30px;

}



.advantage{

    text-align:center;

    padding:40px 30px;

    border-radius:25px;

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

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

    transition:.3s;

}



.advantage:hover{

    transform:translateY(-10px);

}



.advantage span{

    display:block;

    font-size:50px;

    margin-bottom:20px;

}



.advantage h3{

    font-size:25px;

    margin-bottom:15px;

}



.advantage p{

    color:var(--muted);

    line-height:1.7;

}




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


.steps{

    display:grid;

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

    gap:30px;

}



.step{

    text-align:center;

    padding:40px 30px;

    background:

    rgba(255,255,255,.05);

    border:

    1px solid var(--border);

    border-radius:25px;

}



.step strong{

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    width:70px;

    height:70px;

    border-radius:50%;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    font-size:30px;

    margin-bottom:25px;

}



.step h3{

    font-size:24px;

    margin-bottom:15px;

}



.step p{

    color:var(--muted);

    line-height:1.7;

}




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


.faq{

    padding-bottom:120px;

}



.faq-item{

    max-width:850px;

    margin:0 auto 20px;

    padding:30px;

    background:

    rgba(255,255,255,.05);

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

    border-radius:22px;

}



.faq-item h3{

    font-size:22px;

    margin-bottom:12px;

}



.faq-item p{

    color:var(--muted);

    line-height:1.8;

}





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


footer{

    border-top:

    1px solid rgba(255,255,255,.1);

    padding:70px 0 30px;

}



.footer-grid{

    display:grid;

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

    gap:40px;

}



.footer-logo{

    font-size:32px;

    font-weight:800;

    margin-bottom:20px;

}



.footer-logo span{

    color:var(--primary);

}



.footer-text{

    color:var(--muted);

    line-height:1.8;

}



.footer-title{

    font-size:20px;

    margin-bottom:20px;

}



.footer-links{

    display:flex;

    flex-direction:column;

    gap:12px;

}



.footer-links a{

    color:var(--muted);

    text-decoration:none;

    transition:.3s;

}



.footer-links a:hover{

    color:white;

}



.copyright{

    text-align:center;

    color:var(--muted);

    margin-top:50px;

    padding-top:25px;

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

}

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

.burger{

    display:none;

    width:42px;

    height:42px;

    background:none;

    border:none;

    cursor:pointer;

}


.burger span{

    display:block;

    width:28px;

    height:3px;

    margin:6px auto;

    background:white;

    border-radius:20px;

}


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


@media(max-width:1200px){


    .products-grid{

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

    }


    .hero-grid{

        grid-template-columns:1fr 420px;

        gap:40px;

    }


    .hero h1{

        font-size:54px;

    }


}



@media(max-width:980px){


    header{

        top:15px;

        padding:14px 20px;

    }


    .desktop-menu,
    .header-buttons{

        display:none;

    }


    .burger{

        display:block;

    }



    .hero{

        padding-top:140px;

    }



    .hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }


    .hero p{

        margin:auto;

    }


    .hero-buttons{

        justify-content:center;

    }


    .hero-products{

        margin-top:50px;

        height:430px;

    }



    .floating-card{

        width:280px;

        padding:25px;

    }


    .card-one{

        left:0;

    }


    .card-two{

        right:0;

    }


    .card-three{

        left:30px;

    }



    .advantages-grid{

        grid-template-columns:1fr;

    }


    .steps{

        grid-template-columns:1fr;

    }


    .footer-grid{

        grid-template-columns:1fr 1fr;

    }


}




@media(max-width:600px){


    .container{

        width:90%;

    }



    .hero h1{

        font-size:40px;

        letter-spacing:-1px;

    }



    .hero p{

        font-size:17px;

    }



    .hero-buttons{

        flex-direction:column;

    }



    .btn,
    .btn-outline{

        width:100%;

        text-align:center;

    }



    .hero-products{

        height:390px;

    }



    .floating-card{

        width:250px;

        padding:22px;

    }



    .floating-card h3{

        font-size:22px;

    }



    .floating-card strong{

        font-size:20px;

    }



    .products-grid{

        grid-template-columns:1fr;

    }



    .section{

        padding:70px 0;

    }



    .section-title{

        font-size:34px;

    }



    .section-description{

        font-size:16px;

    }



    .footer-grid{

        grid-template-columns:1fr;

    }



}



/* =====================================================
   ANIMATION
===================================================== */


.hero-content,
.hero-products,
.product-card,
.advantage,
.step,
.faq-item{


    animation:fadeUp .8s ease forwards;


}



@keyframes fadeUp{


    from{

        opacity:0;

        transform:translateY(40px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }


}



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


::selection{

    background:#4f8cff;

    color:white;

}



/* =====================================================
   SMOOTH BUTTON EFFECT
===================================================== */


.btn,
.catalog-btn,
.product-button{


    position:relative;

    overflow:hidden;

}



.btn:after,
.catalog-btn:after,
.product-button:after{


    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.4),
        transparent
    );


    transition:.6s;

}



.btn:hover:after,
.catalog-btn:hover:after,
.product-button:hover:after{


    left:100%;


}

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


.mobile-menu{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:100vh;

    background:#050b18;

    display:flex;

    align-items:center;

    justify-content:center;

    transform:translateY(-120%);

    transition:.45s;

    z-index:999;

}



.mobile-menu.active{

    transform:translateY(0);

}



.mobile-menu-content{

    display:flex;

    flex-direction:column;

    gap:28px;

    text-align:center;

}



.mobile-menu-content a{

    color:white;

    text-decoration:none;

    font-size:28px;

    font-weight:700;

}



.mobile-menu-content a:hover{

    color:#4f8cff;

}



.mobile-divider{

    width:200px;

    height:1px;

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

    margin:10px auto;

}

/* =====================================
   FOOTER MOBILE FIX
===================================== */

@media(max-width:600px){

.footer-logo{

    font-size:28px;

}


footer{

    padding:50px 0 25px;

}

}


/* ===================================
   CATALOG PAGE
=================================== */


.catalog-hero{

    padding-top:180px;

    padding-bottom:80px;

    text-align:center;

}


.catalog-hero h1{

    font-size:60px;

    font-weight:800;

    margin-bottom:20px;

}


.catalog-hero p{

    color:var(--muted);

    font-size:20px;

}



.category-buttons{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-bottom:50px;

}


.category{

    padding:14px 25px;

    border-radius:50px;

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

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

    color:white;

    cursor:pointer;

}


.category.active{

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

}

/* =====================================
   PRODUCT PAGE
===================================== */


.product-page{

    padding-top:170px;

    padding-bottom:100px;

}



.product-layout{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:70px;

    align-items:center;

}



.product-preview{

    height:350px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

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

    border:

    1px solid var(--border);

    border-radius:30px;

    backdrop-filter:blur(20px);

}



.big-icon{

    font-size:130px;

}



.product-info h1{

    font-size:55px;

    margin-bottom:25px;

}



.product-description{

    color:var(--muted);

    font-size:20px;

    line-height:1.8;

    margin-bottom:35px;

}



.subscription-box{

    background:

    rgba(255,255,255,.05);

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

    padding:30px;

    border-radius:25px;

    margin-bottom:30px;

}



.subscription-box h3{

    margin-bottom:20px;

}



.tariff{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    margin-bottom:12px;

    background:

    rgba(255,255,255,.05);

    border-radius:15px;

    cursor:pointer;

}



.tariff strong{

    color:#72b7ff;

}



.buy-button{

    display:inline-block;

    padding:18px 40px;

    border-radius:16px;

    background:

    linear-gradient(
        90deg,
        var(--primary),
        var(--primary-light)
    );

    color:white;

    text-decoration:none;

    font-weight:700;

}




@media(max-width:900px){

.product-layout{

    grid-template-columns:1fr;

}

.product-info h1{

    font-size:40px;

}

}

/* =====================================
   CHECKOUT
===================================== */


.checkout-page{

padding-top:170px;

padding-bottom:100px;

}



.checkout-layout{

display:grid;

grid-template-columns:1fr 400px;

gap:50px;

}



.checkout-form,
.order-summary{

background:

rgba(255,255,255,.05);

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

border-radius:28px;

padding:40px;

backdrop-filter:blur(20px);

}



.checkout-form h1{

font-size:42px;

margin-bottom:35px;

}



.checkout-form label{

display:block;

margin-bottom:10px;

margin-top:20px;

}



.checkout-form input{

width:100%;

padding:17px;

border-radius:14px;

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

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

color:white;

font-size:16px;

}



.pay-button{

margin-top:35px;

width:100%;

padding:18px;

border:none;

border-radius:15px;

background:

linear-gradient(
90deg,
var(--primary),
var(--primary-light)
);

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

}



.order-product{

display:flex;

gap:20px;

align-items:center;

margin:30px 0;

}



.order-icon{

font-size:45px;

}



.order-price{

font-size:32px;

font-weight:800;

color:#72b7ff;

margin-bottom:35px;

}



.payment-item{

padding:18px;

background:

rgba(255,255,255,.05);

border-radius:15px;

margin-top:15px;

}



@media(max-width:900px){


.checkout-layout{

grid-template-columns:1fr;

}


}