body{margin:0;font-family:Arial,sans-serif;background:#f4f7fb;color:#222}
.hero{background:linear-gradient(135deg,#0055aa,#00a0ff);color:#fff;padding:30px}
nav{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:bold;font-size:28px}
.btn,.cta{background:#ff7a00;color:#fff;padding:12px 24px;border-radius:30px;text-decoration:none}
.hero-content{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;max-width:1200px;margin:60px auto}
.phone{width:260px;height:520px;background:#111;border-radius:40px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.35);animation:float 4s ease-in-out infinite}
.screen{background:linear-gradient(#0b84ff,#0f4b91);height:100%;border-radius:28px;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff}
section{padding:70px 20px;max-width:1200px;margin:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.card{background:#fff;padding:25px;border-radius:15px;box-shadow:0 5px 15px rgba(0,0,0,.08)}
.blue{background:#0055aa;color:#fff;max-width:none}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;list-style:none;padding:0;max-width:1200px;margin:auto}
.features li{background:rgba(255,255,255,.12);padding:18px;border-radius:10px}
.stats{display:flex;justify-content:center;gap:60px;text-align:center}
.count{display:block;font-size:54px;color:#0055aa;font-weight:bold}
footer{background:#222;color:#ddd;text-align:center;padding:40px}
footer a{color:#fff}
@keyframes float{50%{transform:translateY(-12px)}}
@media(max-width:800px){.hero-content{grid-template-columns:1fr}.phone{margin:auto}.stats{flex-direction:column;gap:20px}}