body{
font-family:Inter;
margin:0;
background:#f8fafc;
color:#0f172a;
}

/* NAV */
.nav{
display:flex;
justify-content:space-between;
padding:20px 8%;
background:white;
box-shadow:0 5px 20px rgba(0,0,0,.05);
}

.logo{
display:flex;
align-items:center;
font-weight:800;
font-size:24px;
}

.logo-box{
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
padding:6px 10px;
border-radius:8px;
margin-right:8px;
}

.logo-text span{
color:#2563eb;
}

/* BUTTONS */
.btn-primary{
background:linear-gradient(135deg,#2563eb,#7c3aed);
color:white;
border:none;
padding:14px 24px;
border-radius:10px;
cursor:pointer;
}

.btn-outline{
border:1px solid #ccc;
background:white;
padding:14px 24px;
border-radius:10px;
}

/* HERO */
.hero{
display:flex;
justify-content:space-between;
align-items:center;
padding:90px 8%;
background:linear-gradient(120deg,#eef2ff,#fff);
flex-wrap:wrap;
}

.hero h1{
font-size:54px;
line-height:1.1;
}

.hero-buttons{
margin:25px 0;
}

.stats{
display:flex;
gap:30px;
margin-top:20px;
}

.stats div{
background:white;
padding:12px 18px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* ACTIVITY PANEL */
.activity-panel{
background:white;
padding:35px;
border-radius:20px;
box-shadow:0 40px 120px rgba(0,0,0,.15);
animation:float 6s infinite ease-in-out;
}

.activity{
padding:14px;
margin:10px 0;
border-radius:10px;
color:white;
font-weight:600;
}

.success{background:#22c55e;}
.blue{background:#2563eb;}
.purple{background:#7c3aed;}
.orange{background:#f97316;}

@keyframes float{
50%{transform:translateY(-10px);}
}

/* SECTIONS */
section{
padding:70px 8%;
text-align:center;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:40px;
}

.card{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
}

/* DARK */
.dark{
background:#0B1F3A;
color:white;
}

/* STEPS */
.steps{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.steps div{
background:white;
padding:20px 35px;
border-radius:10px;
box-shadow:0 10px 20px rgba(0,0,0,.08);
}

/* TRUST */
.trust-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
margin-top:20px;
}

/* CTA */
.cta{
background:#020617;
color:white;
}

/* FOOTER */
footer{
background:#020617;
color:white;
padding:60px 8%;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
}

.social span{
display:inline-block;
margin-right:10px;
background:#111827;
padding:8px 12px;
border-radius:6px;
}

.copy{
text-align:center;
margin-top:40px;
}

/* MOBILE */
@media(max-width:900px){
.hero{
flex-direction:column;
text-align:center;
}
.hero h1{
font-size:38px;
}
}