/* ==========================================
   CAPITAL PAISA DIGITAL
   Global Layout System
========================================== */

/* ---------- Container ---------- */

.cp-container{
    width:min(100% - 48px, var(--container));
    margin-inline:auto;
}

/* ---------- Sections ---------- */

.cp-section{
    position:relative;
    padding:120px 0;
}

.cp-section-sm{
    padding:80px 0;
}

.cp-section-lg{
    padding:160px 0;
}

/* ---------- Grid ---------- */

.cp-grid{
    display:grid;
    gap:32px;
}

.cp-grid-2{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.cp-grid-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.cp-grid-4{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

/* ---------- Flex ---------- */

.cp-flex{
    display:flex;
}

.cp-items-center{
    align-items:center;
}

.cp-justify-between{
    justify-content:space-between;
}

.cp-justify-center{
    justify-content:center;
}

.cp-flex-wrap{
    flex-wrap:wrap;
}

.cp-gap-12{gap:12px;}
.cp-gap-16{gap:16px;}
.cp-gap-20{gap:20px;}
.cp-gap-24{gap:24px;}
.cp-gap-32{gap:32px;}
.cp-gap-40{gap:40px;}
.cp-gap-60{gap:60px;}

/* ---------- Buttons ---------- */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:16px 32px;

    border-radius:999px;

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

    transition:var(--transition);

    position:relative;
    overflow:hidden;
}

.btn-primary{

    color:#fff;

    background:var(--gradient-primary);

    box-shadow:
        0 12px 40px rgba(79,124,255,.35);
}

.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:
        0 20px 55px rgba(79,124,255,.45);
}

.btn-secondary{

    color:#fff;

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

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

    backdrop-filter:blur(var(--blur));
    -webkit-backdrop-filter:blur(var(--blur));
}

.btn-secondary:hover{

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

    transform:translateY(-3px);
}

/* ---------- Glass Card ---------- */

.glass-card{

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

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

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);

    border-radius:28px;

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

    position:relative;

    overflow:hidden;
}

.glass-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.15),
            transparent 45%
        );

    pointer-events:none;
}

/* ---------- Titles ---------- */

.section-title{

    font-size:52px;

    font-weight:800;

    line-height:1.08;

    color:var(--white);
}

.section-subtitle{

    margin-top:18px;

    max-width:650px;

    font-size:18px;

    color:var(--muted);
}

/* ---------- Badge ---------- */

.badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

    border-radius:999px;

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

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

    backdrop-filter:blur(24px);

    color:#fff;

    font-size:14px;

    font-weight:600;
}

/* ---------- Text Utilities ---------- */

.text-center{
    text-align:center;
}

.text-white{
    color:#fff;
}

.text-muted{
    color:var(--muted);
}

/* ---------- Spacing ---------- */

.mt-20{margin-top:20px;}
.mt-30{margin-top:30px;}
.mt-40{margin-top:40px;}
.mt-60{margin-top:60px;}

.mb-20{margin-bottom:20px;}
.mb-40{margin-bottom:40px;}
.mb-60{margin-bottom:60px;}

/* ---------- Radius ---------- */

.radius{
    border-radius:var(--radius);
}

.radius-lg{
    border-radius:var(--radius-lg);
}

.radius-xl{
    border-radius:var(--radius-xl);
}

/* ---------- Shadows ---------- */

.shadow{
    box-shadow:var(--shadow-soft);
}

.shadow-lg{
    box-shadow:var(--shadow-lg);
}

/* ---------- Responsive ---------- */

@media (max-width:1024px){

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

        grid-template-columns:1fr;
    }

    .cp-section{

        padding:90px 0;
    }

    .section-title{

        font-size:42px;
    }

}

@media (max-width:768px){

    .cp-container{

        width:min(100% - 32px, var(--container));
    }

    .section-title{

        font-size:34px;
    }

    .section-subtitle{

        font-size:16px;
    }

    .btn{

        width:100%;
    }

}