/* === Theme variables (light default) === */
:root{
  --bg: #ffffff;
  --text: #0f172a;          /* slate-900 */
  --muted: #475569;         /* slate-600 */
  --border: #e5e7eb;        /* gray-200 */
  --card: #ffffff;
  --link: #0f172a;
  --link-hover: #0f172a;
  --btn-bg: #0f172a;
  --btn-text: #ffffff;
  --nav-chip-bg: #ffffff;
}

/* === Dark mode overrides (automatic) === */
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --text: #e5e7eb;
    --muted: #a8b3cf;
    --border: #1f2937;
    --card: #0f172a;
    --link: #e5e7eb;
    --link-hover: #ffffff;
    --btn-bg: #1f2937;
    --btn-text: #ffffff;
    --nav-chip-bg: #0f172a;
  }
}

html,body{
  margin:0; padding:0;
  font-family: Inter, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

.container{ max-width:960px; margin:0 auto; padding:24px }

.header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
}

.nav a{
  margin-right:12px;
  color: var(--link);
  text-decoration:none;
  border:1px solid var(--border);
  background: var(--nav-chip-bg);
  padding:6px 10px;
  border-radius:8px;
}
.nav a:hover{
  color: var(--link-hover);
  border-color: var(--link-hover);
}

.hero{ padding:32px 0 }
.credibility{
  color: var(--muted);
  font-size:0.95rem;
  margin-top:6px;
}

.about{ margin:16px 0 8px; padding:12px 14px; border:1px dashed var(--border); border-radius:8px; background: var(--card) }
.about h3{ margin:0 0 8px 0 }
.services-list{ margin-top:12px }

/* Contact form */
.contact-form{ max-width:560px; margin:16px 0; display:grid; gap:12px }
.contact-form label{ display:grid; gap:6px; font-weight:600; color:var(--link) }
.contact-form input,.contact-form textarea{
  padding:10px; border:1px solid var(--border);
  border-radius:8px; font-size:1rem; color:var(--text); background:var(--card);
}
.contact-form input:focus,.contact-form textarea:focus{
  outline:none; border-color: var(--link);
}
.contact-form button{
  padding:10px 14px; border-radius:8px;
  border:1px solid var(--btn-bg);
  background: var(--btn-bg); color: var(--btn-text);
  cursor:pointer;
}
.contact-form button:hover{ opacity:.92 }
.form-note{ font-size:.9rem; color: var(--muted); margin:6px 0 0 }

/* Footer */
.footer{
  border-top:1px solid var(--border);
  margin-top:32px; padding:18px 0; background: var(--card);
}
.footer-inner{
  max-width:980px; margin:0 auto; display:flex; gap:16px;
  justify-content:space-between; align-items:flex-start; padding:0 24px;
}
.footer a{ color: var(--link); text-decoration:none }
.footer a:hover{ text-decoration:underline }
.footer-nav{ display:flex; gap:12px; flex-wrap:wrap }
.social{ margin-top:6px; color: var(--muted); font-size:.95rem }
.social a{ color: var(--link); text-decoration:none }
.social a:hover{ text-decoration:underline }

@media (max-width:640px){
  .footer-inner{ flex-direction:column; gap:10px }
}