/* Clean Mobicom-inspired landing CSS (uses logoagil color palette) */
:root{
  --primary: #2563eb; /* blue from logoagil */
  --accent: #00a3ff;
  --bg: #f7fbff;
  --muted: #6b7280;
  --card: #ffffff;
  --text: #0b1220;
}

*{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{padding:20px 0}
.brand img{height:44px}
.brand-title{font-weight:700;margin-left:10px}
.site-nav a{color:var(--text);text-decoration:none;margin-left:18px}

/* Hero */
.hero{padding:72px 0;background:linear-gradient(135deg, rgba(37,99,235,0.06), rgba(0,163,255,0.02));}
.hero-grid{display:grid;grid-template-columns:1fr 420px;gap:36px;align-items:center}
.hero-title{font-size:40px;line-height:1.02;margin:0 0 14px;font-weight:800;color:var(--text)}
.hero-lead{color:var(--muted);max-width:56ch}
.hero-ctas{margin-top:18px}
.hero-ctas .btn{border-radius:30px;padding:12px 22px}
.app-badges{margin-top:18px;display:flex;gap:12px}

/* Phone mockup */
.hero-mockup{border-radius:20px;overflow:hidden;box-shadow:0 30px 60px rgba(14,30,70,0.08);background:#fff}
.hero-mockup img{display:block;width:100%}

/* Login card */
.login-card{background:var(--card);border-radius:14px;padding:16px;box-shadow:0 12px 30px rgba(14,30,70,0.06);max-width:360px;margin:18px auto}
.login-card h4{margin:0 0 8px}
.form-control{width:100%;padding:10px 12px;border-radius:10px;border:1px solid rgba(11,17,32,0.06);margin-bottom:10px}
.btn-primary{background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;border:0}
.btn-outline{border:1px solid rgba(11,17,32,0.06);background:transparent;color:var(--text)}

/* Features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding:56px 0}
.feature{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 8px 20px rgba(14,30,70,0.04);text-align:center}
.feature img{background:rgba(37,99,235,0.06);padding:10px;border-radius:10px}

/* Screenshots */
.screenshots{padding:36px 0}
.screenshots-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.screenshot{border-radius:10px;overflow:hidden}

/* CTA strip */
.cta-strip{display:flex;justify-content:space-between;align-items:center;padding:22px;border-radius:12px;background:linear-gradient(90deg,var(--primary),var(--accent));color:#fff;margin-top:28px}

/* Footer */
footer{padding:40px 0;text-align:center;color:var(--muted)}

@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-mockup{max-width:480px;margin:20px auto}
  .features{grid-template-columns:repeat(2,1fr)}
  .screenshots-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:600px){
  .hero-title{font-size:26px}
  .login-card{max-width:100%;padding:12px}
}