:root {
  --black: #000000;           /* CMYK 0 0 0 100 */
  --blue-308c: #005779;       /* Pantone 308 C */
  --light-310c: #9fcee4;      /* Pantone 310 C */
  --grey-7543c: #b0b9c1;      /* Pantone 7543 C */
  --text: var(--black);
  --bg: #ffffff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container { max-width: 1100px; margin: 0 auto; padding: 0 1.2rem; }

.site-header {
  border-bottom: 6px solid var(--blue-308c);
  background: linear-gradient(180deg, var(--grey-7543c) 0%, #ffffff 100%);
}
.header-wrap { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { display: flex; align-items: center; gap: 1rem; text-decoration: none; color: inherit; }
.logo { width: 250px; height: auto; }
.brand-title { font-weight: 800; letter-spacing: 0.2px; }
.brand-tagline { font-weight: 300; color: var(--blue-308c); font-size: 0.9rem; }

.main-nav a { color: var(--blue-308c); text-decoration: none; font-weight: 600; margin-left: 1rem; }
.main-nav a:hover { text-decoration: underline; }

.hero { background: linear-gradient(135deg, var(--light-310c), #ffffff); padding: 4rem 0; }
.hero h1 { font-size: 2rem; margin: 0 0 0.5rem; }
.hero p { max-width: 60ch; }

.btn { display: inline-block; padding: 0.7rem 1.1rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
.btn-primary { background: var(--blue-308c); color: white; }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: var(--grey-7543c); color: var(--black); }

.features { padding: 3rem 0; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.card { border: 1px solid var(--grey-7543c); border-radius: 8px; padding: 1rem; background: #fff; }

.contact { background: #fff; padding: 3rem 0; border-top: 6px solid var(--blue-308c); }
.contact-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { margin-bottom: 0.35rem; }

.contact-form label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.contact-form input, .contact-form textarea {
  width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--grey-7543c); border-radius: 6px; font: inherit; margin-top: 0.3rem;
}
.contact-form button { margin-top: 0.8rem; }

.site-footer { background: var(--black); color: white; }
.footer-wrap { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }

/* Responsivitet */
@media (max-width: 800px) {
  .grid-3 { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
  .brand-tagline { display: none; }
}