/* Reset */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #1d1d1f;
  background: #ffffff;
  line-height: 1.6;
}

/* Layout */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }

/* Navbar */
.navbar { background: #fff; border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 100; }
.nav-content { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; }
.logo { font-size:1.6rem; font-weight:700; color:#007bff; }
.nav-links { list-style:none; display:flex; gap:1.25rem; align-items:center; }
.nav-links a { text-decoration:none; color:#333; transition:color .2s; }
.nav-links a:hover { color:#007bff; }

/* Buttons */
.btn-primary, .btn-secondary {
  display:inline-block; padding:.7rem 1.4rem; border-radius:28px; font-weight:600; text-decoration:none;
}
.btn-primary { background:#007bff; color:#fff; }
.btn-primary:hover { background:#005fcc; }
.btn-secondary { background:#fff; color:#007bff; border:2px solid #007bff; }
.btn-secondary:hover { background:#f3f7ff; }

/* Hero */
.hero { background: linear-gradient(135deg,#007bff 0%, #00b8ff 100%); color:#fff; padding:5.5rem 1rem; text-align:center; }
.hero h2 { font-size:2.4rem; margin-bottom:.75rem; }
.hero p { max-width:760px; margin:0 auto 1.5rem; font-size:1.05rem; opacity:.95; }
.hero-ctas { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.hero-svg { margin: 2rem auto 1.5rem; display: block; max-width: 800px; height: auto; }


/* Illustration */
.illustration { padding:3.5rem 1rem; background:#f7fbff; text-align:center; }
.illustration h3 { font-size:1.9rem; margin-bottom:1rem; }
.illustration-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); margin-top:1.25rem; }
.illustration-card { background:#fff; border-radius:12px; padding:1.5rem; box-shadow:0 2px 10px rgba(0,0,0,0.05); text-align:left; }
.icon { width:50px; height:50px; border-radius:50%; margin-bottom:.75rem; }
.icon.dev { background:linear-gradient(135deg,#007bff,#00b8ff); }
.icon.citizen { background:linear-gradient(135deg,#ff9a00,#ff6600); }

/* Features */
.features { padding:3.25rem 1rem; text-align:center; }
.features h3 { font-size:1.8rem; margin-bottom:1rem; }
.feature-grid { display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top:1rem; }
.feature-card { background:#fafafa; padding:1.25rem; border-radius:10px; box-shadow:0 2px 8px rgba(18,24,33,0.04); transition:transform .2s; }
.feature-card:hover { transform:translateY(-5px); }

/* Workflow */
.workflow { background:#fff; padding:3rem 1rem; text-align:center; }
.workflow h3 { font-size:1.75rem; margin-bottom:1rem; }
.steps { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin-top:1rem; }
.step { flex:1 1 260px; background:#f7fbff; padding:1.2rem; border-radius:10px; box-shadow:0 2px 10px rgba(12,18,28,0.04); text-align:left; }
.step-number { display:inline-block; width:36px; height:36px; border-radius:50%; background:#007bff; color:#fff; line-height:36px; text-align:center; font-weight:700; margin-bottom:.5rem; }

/* Footer */
.footer { background:#0f1720; color:#fff; padding:3rem 1rem; text-align:center; }
.footer h4 { font-size:1.5rem; margin-bottom:.5rem; }
.footer p { max-width:720px; margin:0 auto 1.25rem; opacity:.9; }
.footer-text { margin-top:1rem; color:#97a0aa; font-size:.9rem; }

@media (max-width:880px){
  .hero h2 { font-size:1.9rem; }
  .nav-links { display:none; }
}