:root{
  --accent:#0b5cff;
  --muted:#475569;
  --bg:#ffffff;
  --gap:1.25rem;
  --max-width:1100px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:#0f1724;
  line-height:1.5;
  padding:1rem;
  display:flex;
  justify-content:center;
}
header, main, footer{width:100%;max-width:var(--max-width)}

header{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  margin-bottom:var(--gap);
  align-items:flex-start;
}

.topmenu{list-style:none;padding:0;margin:0;display:flex;gap:1rem}
.topmenu a{text-decoration:none;color:var(--muted);font-weight:700;padding:.25rem .5rem;border-radius:8px}
.topmenu a:hover, .topmenu a:focus{color:var(--accent);background:#f1f7ff}

/* Skip link for keyboard users */
.skip-link{position:absolute;left:0;top:0;transform:translateY(-120%);background:#072f5f;color:white;padding:.5rem .75rem;border-radius:0 0 6px 6px}
.skip-link:focus{transform:translateY(0);outline:none}

.hero{background:linear-gradient(180deg,#f8fbff 0%, #ffffff 100%);padding:1.25rem;border-radius:12px;border:1px solid #e6eefc;margin-bottom:var(--gap)}

.services{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  margin:var(--gap) 0;
}
.services article{
  padding:1rem;
  border-radius:10px;
  background:var(--surface, #fff);
  border:1px solid var(--card-border, #eee);
}

aside.cta{
  background:#eef6ff;
  padding:1rem;
  border-radius:10px;
  margin-top:var(--gap);
}

/* Responsive */
@media (max-width:900px){
  .services{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  header{align-items:flex-start}
  .topmenu{flex-direction:column;gap:.4rem}
  .services{grid-template-columns:1fr}
}

/* Buttons and utilities */
button, a.button{appearance:none;border:0;background:var(--accent);color:white;padding:.6rem .9rem;border-radius:8px;font-weight:700;text-decoration:none}
button:hover,a.button:hover{filter:brightness(.98)}

/* Form helpers */
form{display:flex;flex-direction:column;gap:.6rem}
label{font-weight:600;font-size:.95rem}
input,textarea,select{padding:.5rem;border-radius:8px;border:1px solid #e6eefc}

/* Small screens: reduce padding */
@media (max-width:420px){body{padding:.6rem}}