:root{

--primary:#2db8ff;
--secondary:#0c6eff;

--glass:rgba(255,255,255,.14);
--border:rgba(255,255,255,.22);

--text:#fff;
--text2:rgba(255,255,255,.72);

}

body{

margin:0;
font-family:Inter,sans-serif;

background:
linear-gradient(135deg,#061320,#0d1d2e,#081420);

color:white;

}

.why-us{

padding:90px 22px;
position:relative;
overflow:hidden;

}

.why-us::before{

content:"";

position:absolute;

width:350px;
height:350px;

background:#21b6ff;

filter:blur(150px);

opacity:.18;

top:-120px;
left:-120px;

}

.why-us::after{

content:"";

position:absolute;

width:300px;
height:300px;

background:#006eff;

filter:blur(160px);

bottom:-100px;
right:-100px;

opacity:.18;

}

.why-header{

position:relative;

z-index:2;

max-width:760px;

margin:auto;

text-align:center;

}

.why-badge{

display:inline-flex;

padding:8px 18px;

border-radius:100px;

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

backdrop-filter:blur(18px);

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

font-size:.8rem;

letter-spacing:2px;

margin-bottom:22px;

}

.why-header h2{

font-size:2.2rem;

line-height:1.1;

margin:0;

font-weight:800;

}

.why-header span{

background:linear-gradient(90deg,#48d2ff,#2db8ff,#6de3ff);

-webkit-background-clip:text;

color:transparent;

}

.why-header p{

margin-top:20px;

color:var(--text2);

font-size:1rem;

line-height:1.8;

}

.why-grid{

margin-top:70px;

display:grid;

grid-template-columns:1fr;

gap:22px;

position:relative;

z-index:2;

}

.why-card{

background:var(--glass);

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

backdrop-filter:blur(22px);

border-radius:28px;

padding:35px;

transition:.45s;

overflow:hidden;

position:relative;

box-shadow:

0 15px 40px rgba(0,0,0,.25),

inset 0 1px rgba(255,255,255,.08);

}

.why-card::before{

content:"";

position:absolute;

width:180px;
height:180px;

background:linear-gradient(#48d2ff,#2db8ff);

border-radius:50%;

filter:blur(90px);

opacity:0;

transition:.5s;

top:-80px;
right:-80px;

}

.why-card:hover{

transform:translateY(-10px);

border-color:rgba(90,210,255,.55);

}

.why-card:hover::before{

opacity:.45;

}

.icon{

width:70px;
height:70px;

display:grid;
place-items:center;

font-size:32px;

border-radius:20px;

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

margin-bottom:25px;

backdrop-filter:blur(20px);

}

.why-card h3{

margin:0 0 12px;

font-size:1.3rem;

}

.why-card p{

margin:0;

line-height:1.7;

color:var(--text2);

}

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s cubic-bezier(.22,1,.36,1);

}

.reveal.active{

opacity:1;

transform:none;

}

@media(min-width:700px){

.why-grid{

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

}

.why-header h2{

font-size:3rem;

}

}

@media(min-width:1100px){

.why-grid{

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

}

.why-header h2{

font-size:3.6rem;

}

}