*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#0f172a;background:#f8fafc;line-height:1.55}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}

.nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 0;position:sticky;top:0;z-index:10}
.nav .container{display:flex;justify-content:space-between;align-items:center}
.brand{font-weight:800;font-size:20px;display:flex;align-items:center;gap:8px}
.logo{display:inline-flex;width:32px;height:32px;border-radius:8px;background:#16a34a;color:#fff;align-items:center;justify-content:center;font-weight:800}
.nav-links a{margin-left:18px;color:#475569;font-weight:600}
.nav-links a:hover{color:#16a34a}

.hero{background:linear-gradient(135deg,#0f172a,#1e293b);color:#fff;padding:90px 0 80px;text-align:center}
.hero h1{font-size:42px;line-height:1.15;margin-bottom:18px;font-weight:800}
.hero p{font-size:18px;max-width:680px;margin:0 auto 28px;color:#cbd5e1}
.btns{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;border-radius:12px;font-weight:700;font-size:16px;transition:transform .15s ease, box-shadow .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.btn-android{background:#16a34a;color:#fff}
.btn-ios{background:#fff;color:#0f172a}

.features{padding:70px 0;background:#fff}
.features h2{text-align:center;font-size:28px;margin-bottom:36px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:14px;padding:24px;text-align:center}
.card .ic{font-size:34px;margin-bottom:10px}
.card h3{margin-bottom:6px;font-size:18px}
.card p{color:#475569;font-size:15px}

.download{padding:70px 0;text-align:center;background:#f8fafc}
.download h2{font-size:26px;margin-bottom:10px}
.download p{color:#475569;margin-bottom:22px}
.download .hint{margin-top:18px;font-size:14px;color:#64748b}

.foot{padding:24px 0;background:#0f172a;color:#94a3b8;text-align:center;font-size:14px}

@media(max-width:640px){
  .hero{padding:60px 0 50px}
  .hero h1{font-size:30px}
  .hero p{font-size:16px}
}