:root{
  --bg: #0f1b14;           /* dyb skovgrøn baggrund som nævnt i tidligere projekt */
  --surface: #14231a;
  --text: #e7efe9;
  --muted: #a7b6ac;
  --accent: #5fd39f;
  --border: #284133;
  --maxw: 1100px;
}

*{box-sizing:border-box}

html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
  color:var(--text);
  background:var(--bg);
}

.container{
  max-width:var(--maxw);
  padding:0 1rem;
  margin:0 auto;
}

.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:10;
}

.site-header .brand{
  text-decoration:none; color:var(--text);
  display:flex; flex-direction:column;
}
.brand-title{ font-size:1.25rem; font-weight:700; }
.brand-subtitle{ font-size:.8rem; color:var(--muted); margin-top:-.2rem; }

.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 1rem;
}

nav .nav{
  list-style:none; margin:0; padding:0; display:flex; gap:.75rem;
}
nav a{
  display:block; padding:.5rem .75rem;
  color:var(--text); text-decoration:none; border:1px solid transparent; border-radius:.5rem;
}
nav a[aria-current="page"]{ border-color:var(--accent); }
nav a:hover{ background:rgba(255,255,255,.06); }

.nav-toggle{
  display:none;
  background:transparent; color:var(--text); border:1px solid var(--border);
  padding:.4rem .6rem; border-radius:.5rem;
}

@media (max-width: 760px){
  .nav-toggle{ display:inline-block; }
  nav .nav{ display:none; flex-direction:column; gap:0; margin-top:.5rem; }
  nav .nav.open{ display:flex; }
  nav a{ padding:.7rem 0; }
}

main{
  padding:2rem 0;
}

.hero{
  padding:4rem 0;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  border-bottom:1px solid var(--border);
}
.hero h1{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin:.2rem 0 0; }
.hero p.lead{ color:var(--muted); max-width:60ch; }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:1rem;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:1rem;
}
.col-12{ grid-column: span 12; }
.col-6{ grid-column: span 6; }
.col-4{ grid-column: span 4; }

@media (max-width: 900px){
  .col-6{ grid-column: span 12; }
  .col-4{ grid-column: span 6; }
}

.site-footer{
  background:var(--surface);
  border-top:1px solid var(--border);
  padding:1.2rem 0 2.5rem;
  color:var(--muted);
}

.small{ font-size:.9rem; color:var(--muted); }

button, .btn{
  background:var(--accent);
  color:#042814;
  border:none;
  padding:.6rem .9rem;
  border-radius:.6rem;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{ filter:brightness(1.03); }
a.btn{ text-decoration:none; display:inline-block; }