/* ================= WHY SECTION PREMIUM ================= */

#why{
padding:100px 0;
background:linear-gradient(180deg,#f7f9fc,#ffffff);
position:relative;
overflow:hidden;
}

/* layout */

.split{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:60px;
align-items:start;
}

/* ================= LEFT POINTS ================= */

.points{
display:grid;
gap:18px;
}

/* card */

.point{
display:flex;
gap:16px;
padding:20px;

border-radius:20px;
background:rgba(255,255,255,.85);
backdrop-filter:blur(12px);

border:1px solid rgba(23,35,66,.08);

box-shadow:
0 10px 30px rgba(0,0,0,.05),
0 2px 6px rgba(0,0,0,.04);

transition:all .35s ease;
position:relative;
overflow:hidden;
}

/* hover effect */

.point:hover{
transform:translateY(-6px);
box-shadow:
0 25px 60px rgba(0,0,0,.08);
}

/* icon */

.point .picon{

width:50px;
height:50px;

border-radius:16px;

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

background:linear-gradient(135deg,#fe5862,#ff7a84);

color:white;
font-size:18px;

flex-shrink:0;

box-shadow:0 8px 18px rgba(254,88,98,.35);
}

/* text */

.point h4{
margin:0 0 6px;
font-size:18px;
font-weight:700;
color:#172342;
}

.point p{
margin:0;
font-size:14px;
line-height:1.6;
color:#6b7280;
}

/* ================= STATS ================= */

.stats{

display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;

position:sticky;
top:120px;
}

/* stat card */

.stat{

border-radius:20px;
padding:22px 18px;

background:linear-gradient(180deg,#172342,#1f2f5d);

color:white;

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

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

position:relative;
overflow:hidden;

transition:.35s;
}

/* hover */

.stat:hover{
transform:translateY(-5px);
}

/* glow decoration */

.stat::after{

content:"";

position:absolute;
right:-40px;
bottom:-40px;

width:160px;
height:160px;

background:radial-gradient(circle at center,
rgba(254,88,98,.35),
transparent 65%);

}

/* number */

.stat .num{
font-size:32px;
font-weight:900;
letter-spacing:-.02em;
}

/* label */

.stat .label{
font-size:13px;
margin-top:8px;
color:rgba(255,255,255,.8);
font-weight:600;
line-height:1.4;
}

/* ================= REVEAL ================= */

.reveal{
/*opacity:0;*/
transform:translateY(60px);
transition:all .8s cubic-bezier(.22,1,.36,1);
}

.reveal.in{
opacity:1;
transform:translateY(0);
}

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

@media (max-width:1024px){

.split{
grid-template-columns:1fr;
gap:40px;
}

.stats{
position:relative;
top:auto;
}

}

@media (max-width:768px){

.stats{
grid-template-columns:1fr;
}

.point{
flex-direction:column;
}

.point .picon{
width:42px;
height:42px;
}

}