*{

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

}

body{

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        to right,
        var(--bg),
        var(--bg-secondary)
    );

    color:var(--text);

    overflow-x:hidden;

}

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

.container{

    width:92%;

    max-width:1400px;

    margin:auto;

}

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

.section{

    padding:70px 0;

}

/* =========================
   FLEX
========================= */

.flex{

    display:flex;

}

.flex-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

/* =========================
   GRID
========================= */

.grid{

    display:grid;

    gap:24px;

}

.grid-2{

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

}

.grid-3{

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

}

.grid-4{

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

}

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

.card{

    background:
    var(--glass);

    backdrop-filter:blur(12px);

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

    border-radius:
    var(--radius-lg);

    padding:28px;

    transition:
    var(--transition);

}

.card:hover{

    transform:
    translateY(-5px);

    box-shadow:
    var(--shadow-md);

}

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

.btn{

    border:none;

    cursor:pointer;

    transition:
    var(--transition);

    font-weight:600;

    border-radius:
    var(--radius-md);

}

.btn:hover{

    transform:
    translateY(-2px);

}

.btn-primary{

    background:
    var(--primary-gradient);

    color:white;

}

.btn-secondary{

    background:
    rgba(255,255,255,0.08);

    color:white;

}

/* =========================
   TITLES
========================= */

.section-title{

    font-size:var(--h2);

    margin-bottom:18px;

}

.section-subtitle{

    color:var(--muted);

    line-height:1.8;

}

/* =========================
   GLASS
========================= */

.glass{

    background:
    var(--glass);

    backdrop-filter:blur(12px);

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

}

/* =========================
   TEXT
========================= */

.text-muted{

    color:var(--muted);

}

/* =========================
   SPACING
========================= */

.mt-1{margin-top:10px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:30px;}
.mt-4{margin-top:40px;}

.mb-1{margin-bottom:10px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:30px;}
.mb-4{margin-bottom:40px;}

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

@media(max-width:992px){

    .grid-4{

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

    }

    .grid-3{

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

    }

}

@media(max-width:768px){

    .section{

        padding:50px 0;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .section-title{

        font-size:24px;

    }

}