/* ===============================
   Global
================================= */

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Work Sans',sans-serif;
    color:#fff;
    background:
    radial-gradient(circle at top left,#16213e 0%,#0d1117 45%,#05070c 100%);
    overflow-x:hidden;
}

/* ===============================
   Membership Section
================================= */

.membership-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:40px 0;
    overflow:hidden;
}

/* ===============================
   Background Glow
================================= */

.glow{
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    filter:blur(30px);
    pointer-events:none;
    z-index:0;
}

.glow{
    top:-180px;
    left:-180px;
    background:
    radial-gradient(circle,
    rgba(37,99,235,.22),
    transparent 70%);
}

.glow2{
    top:auto;
    left:auto;
    right:-180px;
    bottom:-180px;
    background:
    radial-gradient(circle,
    rgba(124,58,237,.20),
    transparent 70%);
}

/* ===============================
   Heading
================================= */

.title{
    text-align:center;
    font-size:42px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:40px;
    position:relative;
    z-index:2;
}

.title span{
    color:#60a5fa;
}

/* ===============================
   Cards
================================= */

.member-card{

    position:relative;
    z-index:2;

    border-radius:25px;
    padding:28px;

    min-height:300px;

    overflow:hidden;

    color:#fff;

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

    backdrop-filter:blur(10px);

    transition:.35s ease;
}

.member-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    radial-gradient(circle at top right,
    rgba(255,255,255,.08),
    transparent 40%);

}

.member-card:hover{

    transform:translateY(-10px);

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

}

.card1{

    background:
    linear-gradient(
    135deg,
    #111827,
    #1e293b,
    #0f172a);

}

.card2{

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #4f46e5,
    #06b6d4);

}

/* ===============================
   Badge
================================= */

.badge-icon{

    position:absolute;

    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border-radius:50%;

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

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

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

    backdrop-filter:blur(10px);

}

/* ===============================
   Logo
================================= */

.logo{

    width:60px;
    height:60px;

    border-radius:18px;

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

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

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

    backdrop-filter:blur(10px);

    font-size:24px;

    margin-bottom:18px;

}

/* ===============================
   Text
================================= */

.member-card h2{

    font-size:26px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:12px;

}

.price{

    font-size:46px;

    font-weight:800;

    margin-bottom:15px;

    text-shadow:
    0 0 20px rgba(255,255,255,.2);

}

.brand{

    font-size:28px;

    font-weight:800;

    letter-spacing:3px;

}

.startup{

    font-size:16px;

    font-weight:600;

    line-height:1.6;

}

.startup small{

    display:block;

    font-size:14px;

    color:#eef2ff;

}

.number{

    margin-top:20px;

    font-size:13px;

    letter-spacing:1px;

    color:rgba(255,255,255,.85);

}

/* ===============================
   Button
================================= */

.join-btn{

    display:inline-block;

    text-decoration:none;

    color:#fff;

    background:
    linear-gradient(135deg,#2563eb,#7c3aed);

    padding:13px 30px;

    border-radius:50px;

    font-size:15px;

    font-weight:700;

    transition:.3s;

    box-shadow:
    0 12px 25px rgba(37,99,235,.35);

}

.join-btn:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:
    0 18px 35px rgba(124,58,237,.45);

}

/* ===============================
   Responsive
================================= */

@media(max-width:991px){

.membership-section{

    padding:60px 0;

}

.title{

    font-size:34px;

}

.member-card{

    min-height:auto;

}

}

@media(max-width:768px){

.title{

    font-size:28px;

}

.member-card{

    padding:25px;

}

.join-btn{

    width:100%;
    text-align:center;

}

}

@media(max-width:576px){

.membership-section{

    padding:50px 0;

}

.title{

    font-size:24px;

}

.member-card h2{

    font-size:22px;

}

.price{

    font-size:38px;

}

.brand{

    font-size:24px;

}

.logo{

    width:55px;
    height:55px;
    font-size:22px;

}

}