/* ===== Tokens ===== */
:root {
  --ink:#0d1b2e; --ink-2:#13253d; --bg:#f6f8fb; --paper:#fff;
  --text:#1c2b3a; --text-dim:#5b6b7d; --on-dark:#eef3f9; --on-dark-dim:#a8b8cc;
  --yellow:#ffd84d; --yellow-hover:#ffce1f; --green:#2f9e63; --green-text:#1f7a49;
  --line:#dbe3ec; --lane:#3e5c80;
  --font-head:"Instrument Sans", system-ui, sans-serif;
  --font-brand:"Fraunces", Georgia, "Times New Roman", serif;
  --font-body:system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius:12px; --shadow:0 8px 30px rgba(13,27,46,.10);
}
/* Lokale variable fonte til overskrifter og logo. */
@font-face {
  font-family:"Instrument Sans";
  src:url("../assets/fonts/instrument-sans.woff2") format("woff2");
  font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"Fraunces";
  src:url("../assets/fonts/fraunces.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
/* ===== Reset/base ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; }
[hidden] { display:none !important; }
html { scroll-behavior:smooth; scroll-padding-top:5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } }
body { font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
       color:var(--text); background:var(--bg); }
h1,h2,h3,h4 { font-family:var(--font-head); font-optical-sizing:auto;
  line-height:1.12; letter-spacing:-.01em; }
h1 { font-size:clamp(2.75rem,6.5vw,4.5rem); font-weight:650; line-height:1.08;
  letter-spacing:-.02em; text-wrap:balance; }
h2 { font-size:clamp(1.875rem,3.2vw,2.625rem); font-weight:600;
  letter-spacing:-.015em; text-wrap:balance; }
h3 { font-size:1.25rem; font-weight:600; }
h4 { font-size:1.125rem; font-weight:600; }
img,svg { max-width:100%; height:auto; }
.container { max-width:70rem; margin-inline:auto; padding-inline:1.25rem; }
.skip-link { position:absolute; left:-999px; top:0; background:var(--yellow);
  color:var(--ink); padding:.5rem 1rem; z-index:99; }
.skip-link:focus { left:0; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:.8125rem;
  font-weight:600; color:var(--yellow); font-family:var(--font-body); }
/* ===== Knapper ===== */
.btn { display:inline-block; padding:.8rem 1.5rem; border-radius:999px;
  font-weight:600; text-decoration:none; transition:background .15s, transform .15s; }
.btn--primary { background:var(--yellow); color:var(--ink); }
.btn--primary:hover { background:var(--yellow-hover); transform:translateY(-1px); }
.btn--ghost { color:var(--on-dark); border:1px solid var(--lane); }
.btn--ghost:hover { border-color:var(--on-dark-dim); }
.btn--small { padding:.5rem 1.1rem; font-size:.9375rem; }
/* ===== Nav ===== */
.site-head { position:sticky; top:0; z-index:50; background:rgba(13,27,46,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid rgba(62,92,128,.35); }
.nav { display:flex; align-items:center; gap:1.5rem; padding-block:.8rem; }
.brand { font-family:var(--font-brand); font-optical-sizing:auto; font-weight:640;
  font-size:1.375rem; color:var(--on-dark); text-decoration:none; }
.brand-dot { display:inline-block; width:.5em; height:.5em; margin-left:.12em;
  background:var(--yellow); border-radius:2px; }
.nav-links { display:flex; gap:1.4rem; list-style:none; padding:0; margin-left:auto; }
.nav-links a { color:var(--on-dark-dim); text-decoration:none; font-size:.9375rem; }
.nav-links a:hover { color:var(--on-dark); }
@media (max-width: 47rem) { .nav-links { display:none; } .nav { justify-content:space-between; flex-wrap:wrap; row-gap:.6rem; } }
/* ===== Hero ===== */
.hero { position:relative; overflow:hidden; background:var(--ink);
  color:var(--on-dark); padding-block:6rem 5rem; }
.hero .container { position:relative; z-index:1; display:flex;
  flex-direction:column; gap:1.25rem; }
/* Blød glow bag overskriften */
.hero::before { content:""; position:absolute; top:-14rem; left:-12rem;
  width:52rem; height:36rem; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,216,77,.14), transparent 72%); }
/* Diskrete post-it-former i hjørnerne */
.hero-decor, .decor-layer { position:absolute; inset:0; pointer-events:none; }
.decor { position:absolute; border-radius:8px; }
.decor--1 { width:22rem; height:22rem; top:-8rem; right:-6rem;
  background:var(--yellow); opacity:.06; transform:rotate(-8deg); }
.decor--2 { width:16rem; height:16rem; bottom:-7rem; left:-5rem;
  background:var(--paper); opacity:.05; transform:rotate(6deg); }
.decor--3 { width:11rem; height:11rem; bottom:2rem; right:22%;
  background:var(--yellow); opacity:.04; transform:rotate(13deg); }
.hero h1 { max-width:17ch; }
.hero-service { max-width:42rem; font-family:var(--font-head); font-size:clamp(1.25rem,2.4vw,1.5rem);
  font-weight:600; line-height:1.35; }
.hero-sub { max-width:44rem; color:var(--on-dark-dim); font-size:1.1875rem; }
.hero-cta { display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.5rem; }
/* ===== Sektioner ===== */
.section { padding-block:4.5rem; }
.section--alt { background:var(--paper); }
.section--dark { background:var(--ink); color:var(--on-dark); }
/* ===== Founding-vilkår ===== */
.founding { border-top:1px solid rgba(62,92,128,.35); padding-block:5rem; }
.founding-intro { max-width:46rem; color:var(--on-dark-dim); margin-bottom:2.5rem; }
.founding-cards { display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width: 56rem) { .founding-cards { grid-template-columns:repeat(2,1fr); } }
.fcard { background:var(--ink-2); border:1px solid var(--lane);
  border-radius:var(--radius); padding:2rem 2.25rem; }
.fcard-num { display:block; font-family:var(--font-head); font-optical-sizing:auto;
  font-weight:560; font-size:2.5rem; line-height:1; color:var(--yellow);
  margin-bottom:.9rem; }
.fcard h3 { color:var(--on-dark); font-size:1.375rem; margin-bottom:.5rem; }
.fcard p { color:var(--on-dark-dim); }
.founding-why { max-width:46rem; margin-top:2.75rem; padding-left:1.5rem;
  border-left:3px solid var(--yellow); }
.founding-why h3 { color:var(--on-dark); margin-bottom:.5rem; }
.founding-why p { color:var(--on-dark-dim); }
.founding-trust { margin-top:.9rem; color:var(--on-dark); font-weight:500; }
.founding-status { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap;
  margin:2.5rem 0 2rem; color:var(--on-dark-dim); font-size:.9375rem; }
.seats { display:inline-flex; gap:.35rem; }
.seat { width:.85rem; height:.85rem; border-radius:2px;
  border:1px solid var(--lane); transform:rotate(-4deg); }
.seat:nth-child(even) { transform:rotate(4deg); }
.seat--taken { background:var(--yellow); border-color:var(--yellow); }
.founding-cta { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.founding-note { color:var(--on-dark-dim); font-size:.9375rem; }
/* ===== Kort ===== */
.eyebrow--dark { color:#8a6a00; }
.section h2 { margin:.4rem 0 2rem; }
.cards { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.75rem; box-shadow:var(--shadow); }
.card--accent { border-top:4px solid var(--yellow); }
.card-icon { color:var(--ink); background:var(--bg); width:3rem; height:3rem;
  border-radius:10px; display:grid; place-items:center; margin-bottom:1rem; }
.card h3, .card h4 { margin-bottom:.5rem; }
.card p { color:var(--text-dim); font-size:.9875rem; }
.card-link { display:inline-block; margin-top:.9rem; font-weight:600;
  color:var(--text); text-decoration:none; border-bottom:2px solid var(--yellow); }
/* Lokkebidder i kontaktoplysningerne: usynlige for mennesker, men de
   står i kilden og ødelægger automatisk høst af adresse og nummer. */
.decoy { display:none; }
/* ===== Løsninger: faner ===== */
.tabs-head:not([hidden]) { display:block; margin-bottom:2rem; }
.tabs-lead { color:var(--text-dim); margin-bottom:1.1rem; }
.tablist { display:flex; flex-wrap:wrap; gap:.6rem; }
.tab { font:inherit; font-weight:600; color:var(--text-dim); background:var(--paper);
  border:1px solid var(--line); border-radius:999px; padding:.7rem 1.35rem;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.tab:hover { border-color:var(--lane); color:var(--text); }
.tab[aria-selected="true"] { background:var(--ink); border-color:var(--ink);
  color:var(--on-dark); }
.tab:focus-visible, .tabpanel:focus-visible { outline:3px solid #b98f00;
  outline-offset:3px; }
.tabpanel + .tabpanel { margin-top:2.75rem; }
.tabpanel h3 { font-size:clamp(1.375rem,2.2vw,1.625rem); margin-bottom:1.1rem;
  max-width:46rem; }
.panel-prose { max-width:46rem; display:grid; justify-items:start; gap:1rem; }
.panel-prose p { color:var(--text-dim); }
.tick-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem;
  color:var(--text-dim); }
.tick-list li { position:relative; padding-left:1.6rem; }
.tick-list li::before { content:""; position:absolute; left:0; top:.6em;
  width:.5rem; height:.5rem; border-radius:2px; background:var(--yellow); }
/* ===== Dokumentkontrol ===== */
.dk-grid { display:grid; gap:3rem; grid-template-columns:1fr; align-items:center; }
@media (min-width: 56rem) { .dk-grid { grid-template-columns:1.1fr .9fr; } }
.steps { list-style:none; counter-reset:trin; padding:0; margin-top:1.5rem;
  display:grid; gap:1.1rem; }
.step { counter-increment:trin; position:relative; padding-left:3.2rem; }
.step::before { content:counter(trin); position:absolute; left:0; top:0;
  width:2.25rem; height:2.25rem; border-radius:50%; background:var(--yellow);
  color:var(--ink); font-weight:700; display:grid; place-items:center; }
/* ===== Dokumentkontrol-diagram (statisk SVG) ===== */
.dk-flow { margin-top:3.5rem; overflow-x:auto; }
.dk-flow svg { display:block; min-width:34rem; }
.dkv-lane { stroke:var(--lane); stroke-width:2; fill:none; }
.dkv-lane--return { stroke-dasharray:6 6; opacity:.75; }
.dkv-arrow { fill:var(--lane); }
.dkv-station rect { fill:var(--ink); stroke:var(--yellow); stroke-width:2; }
.dkv-station text { fill:var(--on-dark); font:600 15px var(--font-body); }
.dkv-chip-body { fill:var(--bg); stroke:#9fb9d8; stroke-width:1.5; }
.dkv-chip-label { fill:var(--ink); font:600 12px var(--font-body); }
.dkv-chip--ok .dkv-chip-body { fill:var(--green); stroke:var(--green); }
.dkv-chip--ok .dkv-chip-label { fill:#fff; }
.dkv-chip--flagged .dkv-chip-body { stroke:#d0a900; stroke-width:2; }
.dkv-postit rect { fill:var(--yellow); stroke:#e0b83a; }
.dkv-postit text { fill:var(--ink); font:700 13px var(--font-body); }
.dkv-label { fill:var(--text-dim); font:500 14px var(--font-body); }
/* ===== Faktura-mockup ===== */
.invoice-demo { display:grid; place-items:center; min-width:0; }
.invoice { background:var(--paper); border:1px solid var(--line); border-radius:8px;
  box-shadow:var(--shadow); padding:1.75rem; width:min(24rem,100%);
  font-size:.9375rem; position:relative; }
.inv-head { display:flex; justify-content:space-between; border-bottom:2px solid var(--ink);
  padding-bottom:.6rem; margin-bottom:1rem; }
.inv-row { display:grid; grid-template-columns:6.25rem minmax(0,1fr); gap:1rem; padding:.55rem 0;
  border-bottom:1px solid var(--line); position:relative; }
.inv-row span:first-child { color:var(--text-dim); }
.inv-row span + span { text-align:right; overflow-wrap:anywhere; }
.inv-blank { min-height:1.6rem; border-bottom:2px dashed #d0a900; }
.inv-row--missing { background:#fff9e0; margin-inline:-.5rem; padding-inline:.5rem; }
.postit { position:absolute; right:.5rem; bottom:100%; z-index:1;
  width:min(12.5rem,calc(100% - 1rem)); margin:0; transform-origin:bottom left;
  background:var(--yellow); color:var(--ink); padding:.7rem .8rem;
  transform:rotate(-2.5deg); box-shadow:2px 4px 10px rgba(13,27,46,.25);
  font-size:.8125rem; line-height:1.35; }
.postit strong { display:block; margin-bottom:.15rem; }
.postit::before { content:""; position:absolute; top:-.5rem; left:38%;
  width:2.6rem; height:1rem; background:rgba(255,255,255,.55);
  transform:rotate(1.5deg); }
/* ===== Kom i gang ===== */
.steps--row { grid-template-columns:1fr; }
@media (min-width: 56rem) { .steps--row { grid-template-columns:repeat(3,1fr); gap:2rem; } }
/* ===== Reminder-CTA ===== */
/* ===== Om + kontakt ===== */
.om-narrow { max-width:46rem; }
.om-narrow p + p { margin-top:1rem; }
.kontakt { position:relative; overflow:hidden; background:var(--ink-2); }
.kontakt-inner { position:relative; text-align:center; max-width:40rem; }
.kontakt h2 { max-width:20ch; margin-inline:auto; }
.kontakt p { color:var(--on-dark-dim); }
.decor--4 { width:18rem; height:18rem; top:-6rem; left:-5rem;
  background:var(--yellow); opacity:.06; transform:rotate(10deg); }
.decor--5 { width:13rem; height:13rem; bottom:-5rem; right:-4rem;
  background:var(--yellow); opacity:.05; transform:rotate(-12deg); }
.decor--6 { width:9rem; height:9rem; top:18%; right:13%;
  background:var(--paper); opacity:.04; transform:rotate(6deg); }
.kontakt-actions { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  margin-top:1.75rem; }
.btn--outline { border:2px solid var(--ink); color:var(--ink); }
.btn--outline:hover { background:var(--ink); color:var(--on-dark); }
/* ===== Footer ===== */
.site-foot { background:var(--ink); color:var(--on-dark-dim); padding-block:1.75rem;
  border-top:1px solid rgba(62,92,128,.35);
  font-size:.9375rem; }
.foot-inner { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  align-items:center; }
.brand--foot { font-size:1.125rem; color:var(--on-dark); }
/* ===== Reveals (kun med JS og uden reduced-motion) ===== */
.js .reveal { opacity:0; transform:translateY(14px);
  transition:opacity .5s ease-out, transform .5s ease-out; }
.js .reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
}