/* =======================================================
   SibirBank
   Author: eshka6
   ======================================================= */

:root{

    --background:#08090D;
    --background2:#11141B;

    --surface:#151922;
    --surface2:#1B202B;

    --border:rgba(255,255,255,.08);

    --primary:#33d17a;
    --primaryHover:#41e48b;

    --text:#ffffff;
    --text2:#b7becb;

    --danger:#ff5c5c;

    --shadow:0 20px 60px rgba(0,0,0,.45);

    --radius:22px;

}

*{

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

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

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

    overflow-x:hidden;

}

/* ===========================
        BACKGROUND
=========================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-1;

}

.background::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:#00ff8855;

    filter:blur(170px);

    left:-220px;
    top:-250px;

}

.background::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    border-radius:50%;

    background:#0066ff33;

    filter:blur(180px);

    right:-200px;
    bottom:-250px;

}

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

header{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px 60px;

}

.logo h1{

    font-size:34px;

    color:var(--primary);

    font-weight:700;

}

.logo span{

    color:var(--text2);

    font-size:14px;

}

nav button{

    cursor:pointer;

    border:none;

    border-radius:14px;

    padding:14px 28px;

    background:var(--primary);

    color:#fff;

    font-weight:600;

    transition:.25s;

}

nav button:hover{

    background:var(--primaryHover);

    transform:translateY(-2px);

}

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

.hero{

    width:100%;

    max-width:1450px;

    margin:auto;

    padding:80px 60px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

}

.heroLeft{

    flex:1;

}

.heroLeft h2{

    font-size:64px;

    line-height:1.1;

    margin-bottom:30px;

}

.heroLeft p{

    color:var(--text2);

    font-size:19px;

    line-height:1.8;

    max-width:600px;

}

.startButton{

    margin-top:40px;

    padding:18px 42px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    background:linear-gradient(90deg,#33d17a,#1db954);

    color:white;

    font-size:18px;

    font-weight:700;

    transition:.25s;

}

.startButton:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 40px rgba(51,209,122,.25);

}

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

.heroRight{

    display:flex;

    justify-content:center;

    align-items:center;

}

.bankCard{

    width:470px;

    height:280px;

    border-radius:28px;

    padding:30px;

    position:relative;

    background:

    linear-gradient(
    140deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.02));

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

    backdrop-filter:blur(20px);

    box-shadow:var(--shadow);

    transition:.35s;

}

.bankCard:hover{

    transform:
    rotateY(8deg)
    rotateX(5deg)
    translateY(-6px);

}

.cardTop{

    display:flex;

    justify-content:space-between;

    color:white;

    font-size:18px;

    font-weight:600;

}

.chip{

    margin-top:30px;

    width:70px;

    height:50px;

    border-radius:12px;

    background:linear-gradient(#ffe88f,#d7a200);

}

.cardNumber{

    margin-top:45px;

    font-size:28px;

    letter-spacing:5px;

}

.cardBottom{

    margin-top:42px;

    display:flex;

    justify-content:space-between;

}

.cardBottom small{

    color:#bbb;

}

.cardBottom p{

    margin-top:5px;

    font-weight:700;

}

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

.features{

    width:100%;

    max-width:1450px;

    margin:70px auto;

    display:grid;

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

    gap:30px;

    padding:0 60px;

}

.feature{

    padding:35px;

    border-radius:24px;

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

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

    backdrop-filter:blur(16px);

    transition:.3s;

}

.feature:hover{

    transform:translateY(-6px);

    border-color:rgba(51,209,122,.5);

}

.feature h3{

    margin-bottom:18px;

    font-size:25px;

}

.feature p{

    color:var(--text2);

    line-height:1.8;

}

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

footer{

    margin-top:120px;

    padding:35px;

    text-align:center;

    color:var(--text2);

}

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

@media(max-width:1100px){

.hero{

    flex-direction:column;

    text-align:center;

}

.heroLeft p{

    margin:auto;

}

.features{

    grid-template-columns:1fr;

}

}

@media(max-width:700px){

header{

    padding:20px;

}

.hero{

    padding:40px 20px;

}

.heroLeft h2{

    font-size:42px;

}

.bankCard{

    width:100%;

    height:auto;

    min-height:260px;

}

.features{

    padding:20px;

}

}