/* Reset & base */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  color: #2d3748;
  background-color: #f7fafc;
}

/* Colors */
.primary-blue { color: #2563eb; }
.secondary-gray { color: #718096; }
.dark-gray { color: #1a202c; }

.container {
  max-width: 960px;
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Header & Nav */
header, footer {
  background-color: #1a202c;
  color: white;
}
nav { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding-top: 1rem; 
  padding-bottom: 1rem;
}
.nav-logo { font-weight: bold; font-size: 1.25rem; text-decoration: none; color: white;}
.nav-links a {
  color: #e2e8f0;
  text-decoration: none;
  margin-left: 1.5rem;
}
.nav-links a:hover { color: #2563eb; }

/* Typography */
h1, h2, h3 { color: #1a202c; line-height: 1.2; }
p { margin-bottom: 1rem; }
a {
  color: #2563eb;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* Buttons */
.btn {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: .75rem 1.25rem;
  border-radius: .375rem;
  font-weight: bold;
}
.btn:hover { background-color: #1d4ed8; }

/* Landing page */
.hero {
  background-color: #f7fafc;
  padding-top: 4rem;
  padding-bottom: 3rem;
}
.hero h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); margin-bottom: .75rem; }
.subtitle { max-width: 60ch; margin-bottom: 2rem; }

.features {
  background-color: white;
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.feature-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}
.card h3 { margin-bottom: .5rem; }
.card p { color: #718096; }

/* Services page */
.services {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.service-group { margin-bottom: 3rem; }
.service-list li {
  list-style-type: none;
  padding-left: .75rem;
}
.service-list li::before {
  content: "✓";
  color: #2563eb;
}

/* Contact page */
.contact {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.form-group { margin-bottom: 1.25rem; }
label { display: block; font-weight: bold; margin-bottom: .5rem; }
input, textarea, select {
  width: 100%;
  padding: .75rem;
  border-radius: .375rem;
  border-color: #cbd5e0;
}
textarea { min-height: 120px; resize: vertical; }

/* Footer */
footer { text-align: center; padding-top: 2rem; padding-bottom: 2rem; }
footer p { color: #a0aec0; font-size: .875rem; }

@media (max-width: 640px) {
  nav { flex-direction: column; gap: .75rem; }
}