:root {
  --primary:#1A1F2E;
  --primary-faint:#2D2F3D;
  --secondary:#00A3FF;
}

*{margin:0;padding:0;box-sizing:border-box;font-family:Segoe UI,sans-serif}

body{background:var(--primary);color:#fff}

.navbar{display:flex;justify-content:space-between;align-items:center;padding:20px 8%;background:var(--primary-faint)}
.logo img{height:48px}
nav a{color:#ccc;margin-left:20px;text-decoration:none}
nav a:hover,nav a.active{color:var(--secondary)}

.hero{text-align:center;padding:110px 10%;background:linear-gradient(135deg,var(--primary),var(--primary-faint))}
.hero h1{font-size:3rem}
.hero p{margin:20px 0;font-size:1.2rem;color:var(--secondary)}

.store-buttons{display:flex;justify-content:center;gap:20px;margin-top:30px}
.btn{padding:14px 30px;border-radius:30px;text-decoration:none;font-weight:bold;display:flex;align-items:center;gap:8px}
.apple{background:#fff;color:#000}
.google{background:var(--secondary);color:#fff}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px;padding:80px 10%}
.stat-card{background:var(--primary-faint);padding:40px;border-radius:20px;text-align:center}
.stat-card h2{font-size:3rem;color:var(--secondary)}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:25px;padding:60px 10%}
.feature-card{background:var(--primary-faint);padding:30px;border-radius:18px;text-align:center;transition:.3s}
.feature-card i{font-size:40px;color:var(--secondary)}
.feature-card:hover{transform:translateY(-8px)}

footer{text-align:center;padding:40px;background:#0f1220}
footer img{height:40px;margin-bottom:10px}

.fade-in{animation:fadeIn 1s ease forwards}
.fade-in-delay{animation:fadeIn 1.4s ease forwards}
.fade-in-delay-2{animation:fadeIn 1.8s ease forwards}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:none}
}