:root{
  --kn-green:#097678;  /* primær */
  --kn-green-2:#289A9B;/* sekundær */
  --kn-orange:#E35900; /* accent */
  --kn-bg:#f7faf9;     /* lys baggrund */
  --kn-ink:#1f2d2e;    /* primær tekst */
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--kn-ink);background:var(--kn-bg)}
a{color:var(--kn-green);text-decoration:none}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Navbar */
.nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid #e7efee}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--kn-green)}
.brand .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--kn-green),var(--kn-green-2));display:grid;place-items:center;color:#fff;box-shadow:var(--shadow)}
.nav-links{display:flex;gap:18px;align-items:center}
.nav-cta{background:var(--kn-orange);color:#fff;padding:10px 14px;border-radius:12px;font-weight:600;box-shadow:0 6px 16px rgba(227,89,0,.25)}
.burger{display:none;background:none;border:0;font-size:20px}

@media (max-width:860px){
  .nav-links{display:none}
  .burger{display:block;color:var(--kn-green)}
  .mobile{display:none;flex-direction:column;gap:12px;padding:12px 0}
  .mobile a{padding:10px 12px;border-radius:10px;background:#f1f6f5}
  .mobile.open{display:flex}
}

/* Hero */
.hero{padding:64px 0;background:linear-gradient(180deg,#fff,rgba(40,154,155,.07))}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.kicker{color:var(--kn-green-2);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}
h1{font-size:clamp(28px,4vw,44px);line-height:1.08;margin:.25em 0 .4em}
.lead{font-size:1.15rem;color:#3a4a4b;margin:0 0 22px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:14px;font-weight:600}
.btn-primary{background:var(--kn-green);color:#fff;box-shadow:0 10px 24px rgba(9,118,120,.25)}
.btn-secondary{background:#fff;border:1px solid #dbe7e6;color:var(--kn-green)}
.hero-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;display:grid;gap:14px}
.hero-stat{display:flex;align-items:center;gap:14px}
.stat-circle{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;color:#fff}
.s1{background:linear-gradient(135deg,var(--kn-green),#0b8a8c)}
.s2{background:linear-gradient(135deg,var(--kn-orange),#ff7a2a)}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
}

/* Sections */
.section{padding:56px 0}
.section h2{font-size:clamp(22px,2.6vw,32px);margin:0 0 10px}
.sub{color:#4a5a5b;margin:0 0 28px}

/* Cards (projekt/feature look ala app) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.card{background:#fff;border:1px solid #e7efee;border-radius:16px;box-shadow:var(--shadow);padding:18px;display:flex;flex-direction:column;gap:12px}
.card .icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--kn-green-2),var(--kn-green))}
.badge{display:inline-block;background:#eef6f6;color:var(--kn-green);padding:6px 10px;border-radius:10px;font-size:.85rem;font-weight:600}

/* Footer */
.footer {
  padding:28px 0
  border-top:1px solid #e7efee:
  color:#456;
}

/* Standard: skjul mobile menu */
.nav .mobile {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}

/* Når open-klassen sættes på .mobile */
.nav .mobile.open {
  display: flex;
}

/* Desktop vs mobil */
@media (max-width: 900px) {
  .nav .nav-links { display: none; }
  .burger { display: block; }
}
@media (min-width: 901px) {
  .burger { display: none; }
}

/* Generel header / nav styling */
.nav {
  background: #fff;
  border-bottom: 1px solid #e7efee;
  padding: 10px 0; /* giver lidt lodret luft */
}

.nav .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Brand/logo + tekst */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.brand img {
  display: block;
}

/* Links på desktop */
.nav-links a {
  margin-left: 20px;
  text-decoration: none;
  font-weight: 500;
  color: #333;
}

.nav-links a.nav-cta {
  background: var(--kn-orange, #e35900);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
}

/* Burger icon */
.burger {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
}

/* Mobil-menu */
.nav .mobile {
  display: none;
  flex-direction: column;
  gap: 14px;
  padding: 16px 20px; /* mere luft omkring links */
  background: #fff;
  border-top: 1px solid #e7efee;
}

.nav .mobile a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
}

/* Når den åbner */
.nav .mobile.open {
  display: flex;
}

/* Responsiv: skjul/vis */
@media (max-width: 900px) {
  .nav .nav-links { display: none; }
  .burger { display: block; }
}
@media (min-width: 901px) {
  .burger { display: none; }
}

/* ============== Page layout (fælles) ============== */
.page {
  padding: 28px 0;
}
.page .page-header {
  margin-bottom: 18px;
}
.page h1 {
  margin: 0 0 8px 0;
}
.page .sub {
  color: #4a5857;
  font-size: 1rem;
  margin: 0;
}

/* Containere */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px; /* giver luft i siderne på alle skærme */
}

/* Flash-beskeder */
.alert {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 14px 0 18px 0;
  border: 1px solid transparent;
}
.alert-success {
  background: #ecfdf5;
  border-color: #c6f6d5;
  color: #065f46;
}
.alert-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #7f1d1d;
}

/* Formular inputs (fælles) */
.form-field {
  padding: 12px 14px;
  border: 1px solid #dbe7e6;
  border-radius: 10px;
  width: 100%;
  font: inherit;
}
.form-field:focus {
  outline: none;
  border-color: #289A9B;
  box-shadow: 0 0 0 3px rgba(40,154,155,.12);
}

/* Header- og mobilmenu-forbedringer */
.nav { background: #fff; border-bottom: 1px solid #e7efee; padding: 10px 0; }
.nav .container { display:flex; justify-content:space-between; align-items:center; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.nav-links a { margin-left:20px; text-decoration:none; font-weight:500; color:#333; }
.nav-links a.nav-cta { background: var(--kn-orange, #e35900); color:#fff; padding:8px 14px; border-radius:8px; }
.burger { background:none; border:none; font-size:1.5rem; cursor:pointer; }

.nav .mobile { display:none; flex-direction:column; gap:14px; padding:16px 20px; background:#fff; border-top:1px solid #e7efee; }
.nav .mobile a { text-decoration:none; color:#333; font-weight:500; }
.nav .mobile.open { display:flex; }

@media (max-width: 900px) { .nav .nav-links{display:none;} .burger{display:block;} }
@media (min-width: 901px) { .burger{display:none;} }

/* Aktivt menulink */
.nav a.active { color: var(--kn-orange, #e35900); font-weight:600; }