/* ==========================================================
   KARE Core - Why Us Component
   Production Optimized
========================================================== */

.why-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    background:
        radial-gradient(circle at top left,rgba(10,132,255,.10),transparent 34%),
        radial-gradient(circle at bottom right,rgba(37,211,102,.10),transparent 32%),
        linear-gradient(180deg,#f8fbff 0%,#eef5fb 100%);
}

.why-section::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
        linear-gradient(rgba(11,31,51,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(11,31,51,.045) 1px,transparent 1px);
    background-size:42px 42px;
    opacity:.55;
    pointer-events:none;
}

.why-section .container{
    position:relative;
    z-index:1;
}

.why-title{
    max-width:760px;
    margin:0 auto 46px;
    text-align:center;
}

.why-title span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:14px;
    padding:8px 16px;
    border:1px solid rgba(10,132,255,.18);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#0a84ff;
    font-size:13px;
    font-weight:800;
    letter-spacing:.08em;
}

.why-title h2{
    margin:0;
    color:#0b1f33;
    font-size:clamp(30px,4vw,48px);
    line-height:1.12;
    font-weight:900;
    letter-spacing:-.04em;
}

.why-title h2 em{
    color:#0a84ff;
    font-style:normal;
}

.why-title p{
    max-width:650px;
    margin:18px auto 0;
    color:#5d6b7a;
    font-size:17px;
    line-height:1.75;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:24px;
}

.why-card{
    position:relative;
    min-height:255px;
    padding:30px;
    overflow:hidden;
    border:1px solid rgba(11,31,51,.08);
    border-radius:28px;
    background:rgba(255,255,255,.86);
    box-shadow:0 20px 55px rgba(11,31,51,.08);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

.why-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,rgba(10,132,255,.13),transparent 38%),
        radial-gradient(circle at bottom left,rgba(37,211,102,.10),transparent 34%);
    opacity:0;
    transition:opacity .22s ease;
    pointer-events:none;
}

.why-card:hover{
    transform:translateY(-6px);
    border-color:rgba(10,132,255,.22);
    box-shadow:0 28px 70px rgba(11,31,51,.13);
}

.why-card:hover::before{
    opacity:1;
}

.why-card-top{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:24px;
}

.why-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    border-radius:18px;
    background:linear-gradient(135deg,#0a84ff,#25d366);
    color:#fff;
    font-size:24px;
    font-weight:900;
    box-shadow:0 14px 30px rgba(10,132,255,.24);
}

.why-number{
    color:rgba(11,31,51,.12);
    font-size:42px;
    line-height:1;
    font-weight:900;
    letter-spacing:-.06em;
}

.why-card h3{
    position:relative;
    z-index:1;
    margin:0 0 12px;
    color:#0b1f33;
    font-size:21px;
    line-height:1.25;
    font-weight:900;
    letter-spacing:-.02em;
}

.why-card p{
    position:relative;
    z-index:1;
    margin:0;
    color:#5d6b7a;
    font-size:15.5px;
    line-height:1.75;
}

.why-arrow{
    position:absolute;
    right:24px;
    bottom:22px;
    z-index:1;
    color:#0a84ff;
    font-size:26px;
    font-weight:900;
    transform:translateX(0);
    transition:transform .22s ease;
}

.why-card:hover .why-arrow{
    transform:translateX(5px);
}

/* Responsive */
@media (max-width:991px){
    .why-section{
        padding:72px 0;
    }

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

@media (max-width:640px){
    .why-section{
        padding:58px 0;
    }

    .why-title{
        margin-bottom:30px;
        text-align:left;
    }

    .why-title span{
        font-size:12px;
    }

    .why-title p{
        font-size:15.5px;
    }

    .why-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .why-card{
        min-height:auto;
        padding:24px;
        border-radius:24px;
    }

    .why-icon{
        width:48px;
        height:48px;
        border-radius:16px;
    }

    .why-number{
        font-size:36px;
    }

    .why-card h3{
        font-size:20px;
    }
}