/* ============================================================
   ONLINE JULEKALENDERE – LANDING PAGE
   Minimalistisk, levende, professionel med et strejf af jul
   ============================================================ */

:root {
  --bg:        #faf7f1;
  --bg-soft:   #f3eee4;
  --ink:       #16241d;
  --ink-soft:  #3d4c44;
  --muted:     #606c68;
  --pine:      #1d4d3b;
  --pine-deep: #12362a;
  --red:       #b22a2f;
  --red-soft:  #f7e6e4;
  --gold:      #c09a4a;                       /* streger, kanter, pynt */
  --gold-tekst: #7f6732;                      /* naar guld skal LAESES: 5,4:1 paa hvid */
  --gold-soft: #f5ecd9;
  --card:      #ffffff;
  --line:      #e6dfd2;
  --shadow-sm: 0 2px 10px rgba(22, 36, 29, 0.06);
  --shadow-md: 0 14px 40px rgba(22, 36, 29, 0.10);
  --shadow-lg: 0 30px 80px rgba(22, 36, 29, 0.16);
  /* ── TYPESKALA ──
     Otte trin med hvert sit job. Før stod der 34 forskellige størrelser i
     filen – 9px, 9.5px, 10.5px, 11px, 11.5px … De lå så tæt, at forskellen
     ikke blev læst som hierarki, kun som støj. Brug altid et trin herfra.
     Ornamenter, logoet og teksten inde i mockup'en skalerer for sig. */
  --tekst-mikro: 11px;                        /* kickers, mærkater, det med småt */
  --tekst-lille: 12.5px;                      /* noter, metatekst */
  --tekst-brod:  14.5px;                      /* brødtekst */
  --tekst-stor:  17px;                        /* manchet under overskrifter */
  --tekst-h3:    20px;                        /* små overskrifter */
  --tekst-h2:    clamp(23px, 2.2vw, 27px);    /* kortoverskrifter */
  --tekst-h1:    clamp(30px, 4.2vw, 46px);    /* sektionsoverskrifter og store tal */
  --tekst-hero:  clamp(40px, 5.6vw, 68px);    /* hero */

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Sora", "Segoe UI", sans-serif;

  /* ── AFSTANDE ──
     Hver afstand paa siden er et af disse ti trin. Foer var der 42 – og naar
     to afstande er 18px og 20px, er forskellen ikke et valg, den er stoej.
     Trappen vokser ca. 1,5x pr. trin, saa to ting enten hoerer synligt sammen
     eller staar synligt hver for sig. Der er ikke noget "naesten det samme". */
  --rum-1:    4px;
  --rum-2:    8px;
  --rum-3:   12px;
  --rum-4:   16px;
  --rum-5:   24px;
  --rum-6:   32px;
  --rum-7:   48px;
  --rum-8:   64px;
  --rum-9:   96px;
  --rum-10: 160px;

  /* ── HJOERNER ──
     Mikro er til ting under ca. 20px, hvor 8px ville goere dem til pastiller. */
  --hj-mikro:   4px;
  --hj-lille:   8px;
  --hj:        16px;
  --hj-stor:   22px;
  --hj-pille: 999px;

  /* ── SKYGGER ──
     shadow-sm/md/lg loefter kort fra baggrunden. loeft-* er knappens egen
     farve, der glimter under den. skygge-moerk-* hoerer til den moerke
     gennemgang, hvor en graa skygge ikke kan ses. */
  --loeft-roed:       0 10px 26px rgba(178, 42, 47, 0.28);
  --loeft-roed-hoej:  0 16px 34px rgba(178, 42, 47, 0.38);
  --loeft-groen:      0 10px 26px rgba(29, 77, 59, 0.28);
  --loeft-groen-hoej: 0 16px 34px rgba(29, 77, 59, 0.38);
  --skygge-moerk-sm:  0 4px 10px rgba(0, 0, 0, 0.30);
  --skygge-moerk-md:  0 10px 30px rgba(0, 0, 0, 0.32);
  --skygge-moerk-lg:  0 40px 100px rgba(0, 0, 0, 0.45);
  --relief:           inset 0 -3px 7px rgba(0, 0, 0, 0.12), 0 5px 12px rgba(0, 0, 0, 0.24);
  --ring-lys:         0 0 0 4px rgba(255, 255, 255, 0.14);
  --ring-groen:       0 0 0 4px rgba(29, 77, 59, 0.10);
  --ring-valgt:       0 0 0 2px rgba(29, 77, 59, 0.18);

  /* ── LÅGEN ──
     En laage er et hul i fladen med et blad foran. Skyggen indad i hullet
     er det, der gor at det ligner en fordybning og ikke en firkant i en
     anden farve. Skyggen langs haengselsiden gor bladet tykt. */
  --laage-hul:        inset 0 3px 9px rgba(0, 0, 0, .55), inset 0 -2px 5px rgba(255, 255, 255, .06);
  --laage-blad:       0 2px 6px rgba(0, 0, 0, .28);
  --laage-blad-paa:   6px 6px 18px rgba(0, 0, 0, .34);
  --laage-blad-aaben: 14px 10px 26px rgba(0, 0, 0, .4);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;        /* dokumentets grundstørrelse – ikke et trin i skalaen */
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold-soft); color: var(--ink); }

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── TYPOGRAFI ─────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-2);
  font-size: var(--tekst-lille);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--rum-4);
}
.kicker::before {
  content: "";
  width: 22px; height: 1.5px;
  background: var(--red);
  opacity: 0.6;
}

.section-title { font-size: var(--tekst-h1); margin-bottom: var(--rum-4); }
.section-lead  { color: var(--ink-soft); max-width: 620px; font-size: var(--tekst-stor); }

.wrap { width: min(1160px, 92vw); margin: 0 auto; }

/* ── SIDENS RYTME ──
   Foer: 96 px over og under hver af de syv sektioner = 1.344 px luft, ca.
   halvanden skaerm brugt paa ingenting. Maalt paa en 1440x900-skaerm var
   forsiden 8,6 skaerme lang.

   64 px er stadig rigeligt til at adskille to sektioner - men det svarer
   til en halv skaerm sparet, uden at noget bliver klemt. Overgangen til
   den moerkegroenne demo-sektion beholder den store luft, for der skifter
   baggrunden og saa skal der mere til. */
section { padding: var(--rum-8) 0; position: relative; }
.demo-section, .hero { padding: var(--rum-9) 0; }

/* ── SCROLL REVEAL ─────────────────────────────────────── */
/* Indholdet er synligt. Punktum. Indtoningen laegges kun paa, hvis
   JavaScript naar at saette .animeret paa <html> - altsaa hvis den ogsaa
   kan naa at tage den af igen. Foer stod 39 af 51 elementer usynlige,
   hvis observeren ikke fyrede. */
.reveal { opacity: 1; transform: none; }
.animeret .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s cubic-bezier(0.2, 0.65, 0.25, 1),
              transform 0.75s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.animeret .reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.001s !important; }
}

/* ── NAV ───────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease;
  padding: var(--rum-5) 0;
}
.nav.scrolled {
  background: rgba(250, 247, 241, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
  padding: var(--rum-3) 0;
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rum-5);
}
.logo {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 620;
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--rum-1);
}
.logo em { font-style: normal; color: var(--red); }
.logo .logo-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  align-self: flex-start;
  margin-top: var(--rum-2);
  animation: dotPulse 3.2s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.65; }
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--rum-6);
  list-style: none;
}
.nav-links a {
  text-decoration: none;
  font-size: var(--tekst-brod);
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  transition: color 0.25s ease;
}
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--ink);
}

/* ── KNAPPER ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--rum-3);
  padding: var(--rum-4) var(--rum-6);
  border-radius: var(--hj-pille);
  font-family: var(--font-body);
  font-size: var(--tekst-brod);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.25s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.25s ease, background 0.25s ease;
  will-change: transform;
}
.btn-primary {
  background: var(--pine);
  color: #fdfcf9;
  box-shadow: var(--loeft-groen);
}
.btn-primary:hover {
  background: var(--pine-deep);
  transform: translateY(-2px);
  box-shadow: var(--loeft-groen-hoej);
}
.btn-primary .arr { transition: transform 0.25s ease; }
.btn-primary:hover .arr { transform: translateX(4px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn-ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn-red {
  background: var(--red);
  color: #fff;
  box-shadow: var(--loeft-roed);
}
.btn-red:hover { transform: translateY(-2px); box-shadow: var(--loeft-roed-hoej); }

/* Grangrøn knap – bruges hvor vejen videre er "byg den selv". */
.btn-green {
  background: linear-gradient(135deg, #2a7a5a, var(--pine));
  color: #fff;
  box-shadow: var(--loeft-groen);
}
.btn-green:hover { transform: translateY(-2px); box-shadow: var(--loeft-groen-hoej); }

/* Grøn vej videre under den levende demo */
.demo-byg { margin-top: var(--rum-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--rum-2); }
.demo-byg span { font-size: var(--tekst-lille); color: rgba(242, 239, 230, 0.62); }
.demo-byg .btn-green { box-shadow: var(--skygge-moerk-md); }

/* Markedspriserne er ikke laengere en sektion for sig med sin egen store
   overskrift - de hoerer til under pakkerne som sammenligningsgrundlag.
   Én ting mindre at scrolle forbi. */
.marked-blok {
  margin: var(--rum-7) auto var(--rum-5); max-width: 820px; text-align: center;
  padding-top: var(--rum-6); border-top: 1px solid var(--line);
}
.marked-blok h3 { font-size: var(--tekst-h2); margin-bottom: var(--rum-3); }
.marked-blok p { color: var(--ink-soft); font-size: var(--tekst-brod); max-width: 640px; margin: 0 auto; }

/* Pakkekortenes "det får I" / "I sørger selv for" */
.pk-hoved {
  margin: var(--rum-5) 0 var(--rum-2); font-size: var(--tekst-mikro); font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--pine);
}
.price-highlight .pk-hoved { color: #e8c47a; }
.pk-selv { opacity: 0.78; }

/* ── HERO ──────────────────────────────────────────────── */
.hero {
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: var(--rum-10) 0 var(--rum-9);
  position: relative;
  overflow: hidden;
}
.hero-bg-glow {
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
}
.hero-glow-1 { background: radial-gradient(circle, #efe3c8 0%, transparent 65%); top: -320px; right: -220px; }
.hero-glow-2 { background: radial-gradient(circle, #dfe9e2 0%, transparent 65%); bottom: -420px; left: -320px; }

.hero-snow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-flake {
  position: absolute;
  top: -12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #e8e2d3);
  opacity: 0;
  animation: heroFall linear infinite;
}
@keyframes heroFall {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  8%   { opacity: 0.7; }
  92%  { opacity: 0.5; }
  100% { transform: translateY(105vh) translateX(40px); opacity: 0; }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--rum-8);
  align-items: center;
  position: relative;
}

.hero h1 {
  font-size: var(--tekst-hero);
  margin-bottom: var(--rum-5);
}
.hero h1 .accent {
  color: var(--red);
  position: relative;
  white-space: nowrap;
}
.hero h1 .accent svg {
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%;
  height: 12px;
  overflow: visible;
}
.hero h1 .accent svg path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: drawLine 1.1s 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.hero-lead {
  font-size: var(--tekst-stor);
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: var(--rum-6);
}
.hero-ctas { display: flex; gap: var(--rum-4); flex-wrap: wrap; margin-bottom: var(--rum-7); }

.hero-stats {
  display: flex;
  gap: var(--rum-6);
  flex-wrap: wrap;
}
.hero-stat .num {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  color: var(--pine);
  display: block;
  line-height: 1.1;
}
.hero-stat .lbl { font-size: var(--tekst-lille); color: var(--muted); max-width: 150px; display: block; margin-top: var(--rum-1); }
.hero-stats-note { font-size: var(--tekst-mikro); color: var(--muted); margin-top: var(--rum-4); }
.hero-stats-note a { color: var(--muted); }

/* Hero-visual: stiliseret kalender-kort */
.hero-visual { position: relative; }
.hero-card {
  background: linear-gradient(160deg, #7a1e22 0%, #a02226 55%, #7a1e22 100%);
  border-radius: var(--hj-stor);
  padding: var(--rum-7) var(--rum-6) var(--rum-7);
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transform: rotate(1.5deg);
  transition: transform 0.5s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.hero-card:hover { transform: rotate(0.4deg) translateY(-6px); }
.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255, 235, 200, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(0, 0, 0, 0.25) 0%, transparent 55%);
  pointer-events: none;
}
.hero-card-kicker {
  font-size: var(--tekst-mikro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f3d9a4;
  margin-bottom: var(--rum-2);
}
.hero-card-titel {
  color: #fdf6ea;
  font-size: 26px;
  margin-bottom: var(--rum-5);
}
.hero-baubles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rum-4);
}
.hero-bauble {
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 620;
  font-size: var(--tekst-h3);
  color: #7a1e22;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #f1e7d2 55%, #d9c9a6 100%);
  box-shadow: var(--relief);
  position: relative;
  animation: baubleFloat 5.2s ease-in-out infinite;
  cursor: default;
  transition: transform 0.3s ease;
}
.hero-bauble:hover { transform: scale(1.12) rotate(-4deg); }
.hero-bauble::before {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: var(--hj-mikro);
  background: #caa54e;
}
.hero-bauble:nth-child(2n) { animation-delay: -1.4s; }
.hero-bauble:nth-child(3n) { animation-delay: -2.6s; }
.hero-bauble:nth-child(5n) { animation-delay: -3.5s; }
.hero-bauble.gold {
  background: radial-gradient(circle at 32% 28%, #ffe9b0 0%, #d9b25e 55%, #a87e2d 100%);
  color: #fff;
}
@keyframes baubleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.hero-card-chip {
  position: absolute;
  background: var(--card);
  border-radius: var(--hj);
  box-shadow: var(--shadow-md);
  padding: var(--rum-4) var(--rum-5);
  font-size: var(--tekst-lille);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--rum-3);
  animation: chipFloat 6s ease-in-out infinite;
}
.hero-chip-1 { top: -18px; left: 8px; color: var(--pine); }
.hero-chip-2 { bottom: -16px; right: 8px; color: var(--red); animation-delay: -3s; }
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.chip-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: dotPulse 2.4s ease-in-out infinite;
}
.hero-card-chip { z-index: 5; }

/* ── FLYDENDE "BOOK EN SNAK" ───────────────────────────── */
.book-fab {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 250;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  font-size: var(--tekst-lille);
  font-weight: 700;
  padding: var(--rum-3) var(--rum-5);
  border-radius: var(--hj-pille);
  box-shadow: var(--loeft-roed-hoej);
  transition: transform 0.25s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.book-fab { display: inline-flex; align-items: center; gap: var(--rum-2); }
.book-fab:hover { transform: translateY(-3px) scale(1.03); color: #fff; }
@media (max-width: 720px) { .book-fab { right: 12px; bottom: 12px; font-size: var(--tekst-lille); padding: var(--rum-3) var(--rum-4); } }

.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: var(--tekst-lille);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rum-2);
  text-decoration: none;
}
.scroll-hint .line {
  width: 1.5px; height: 34px;
  background: linear-gradient(var(--muted), transparent);
  animation: hintDrop 1.8s ease-in-out infinite;
}
@keyframes hintDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ── DEMO ──────────────────────────────────────────────── */
.demo-section { background: var(--pine-deep); color: #f2efe6; }
.demo-section .kicker { color: var(--gold-tekst); }
.demo-section .kicker::before { background: var(--gold); }
.demo-section .section-lead { color: #c4d2c9; }

.demo-frame-wrap {
  margin-top: var(--rum-7);
  position: relative;
}
/* I to-spalte-visningen sætter griddet selv afstanden – ekstra margen her
   ville skubbe demoen ned, så de to spalter ikke stod i flugt. */
@media (min-width: 1000px) { .demo-split .demo-frame-wrap { margin-top: 0; } }
@media (min-width: 1000px) { .demo-split { margin-top: var(--rum-7); } }
.demo-browser {
  background: #0d271e;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--hj);
  overflow: hidden;
  box-shadow: var(--skygge-moerk-lg);
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.demo-browser-bar {
  display: flex;
  align-items: center;
  gap: var(--rum-2);
  padding: var(--rum-3) var(--rum-4);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.demo-browser-bar .dot { width: 11px; height: 11px; border-radius: 50%; }
.dot-r { background: #e0655f; }
.dot-y { background: #e5c04b; }
.dot-g { background: #6cbf72; }
.demo-url {
  margin-left: var(--rum-4);
  background: rgba(255,255,255,0.07);
  border-radius: var(--hj-lille);
  font-size: var(--tekst-lille);
  color: #9fb5a9;
  padding: var(--rum-1) var(--rum-4);
  flex: 1;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-iframe {
  width: 100%;
  height: min(74vh, 760px);
  border: none;
  display: block;
  background: #123227;
}
.demo-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rum-4);
  flex-wrap: wrap;
  margin-top: var(--rum-5);
  font-size: var(--tekst-lille);
  color: #a9bcb0;
}
.demo-note a { color: #f2efe6; font-weight: 600; }

/* ── FAKTA / HVORFOR ───────────────────────────────────── */
.facts-grid {
  display: grid;
  /* Fire paa én raekke, saa hele afsnittet kan ses uden at scrolle.
     Det kraever korte kort: 13-17 ord, ikke 46. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rum-4);
  margin-top: var(--rum-5);
}
.fact-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  padding: var(--rum-6) var(--rum-6);
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}
.fact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.fact-card p { font-size: var(--tekst-lille); line-height: 1.5; }
.fact-card h3 { font-size: var(--tekst-brod); }
.fact-num {
  font-family: var(--font-display);
  font-size: var(--tekst-h1);
  font-weight: 600;
  color: var(--red);
  line-height: 1;
  margin-bottom: var(--rum-3);
  display: block;
}
.fact-card h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-3); }
.fact-card p { font-size: var(--tekst-brod); color: var(--ink-soft); }
.fact-src {
  display: inline-block;
  margin-top: var(--rum-4);
  font-size: var(--tekst-lille);
  color: var(--muted);
}
.fact-src a { color: var(--muted); }
.fact-src a:hover { color: var(--ink); }

.facts-case {
  margin-top: var(--rum-5);
  background: var(--gold-soft);
  border-radius: var(--hj-stor);
  padding: var(--rum-6) var(--rum-7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--rum-5);
  align-items: center;
}
.facts-case .qmark {
  font-family: var(--font-display);
  font-size: 84px;
  line-height: 0.8;
  color: var(--gold);
}
.facts-case blockquote { font-size: var(--tekst-stor); color: var(--ink); max-width: 760px; }
.facts-case cite { display: block; margin-top: var(--rum-3); font-size: var(--tekst-lille); color: var(--muted); font-style: normal; }
.facts-case cite a { color: var(--muted); }

/* ── FEATURES ──────────────────────────────────────────── */
.features-section { background: var(--bg-soft); }
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rum-4);
  margin-top: var(--rum-6);
}
.feature-card {
  background: var(--card);
  border-radius: var(--hj-stor);
  /* Ni kort med 32 px luft hele vejen rundt er 288 px alene paa marginer.
     24 px laeser lige saa roligt og sparer en tredjedel af hoejden. */
  padding: var(--rum-5);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease;
}
.feature-card::after {
  content: "";
  position: absolute;
  left: 28px; right: 28px; top: 0;
  height: 3px;
  border-radius: 0 0 var(--hj-mikro) var(--hj-mikro);
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.65, 0.25, 1);
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.feature-card:hover::after { transform: scaleX(1); }
/* Ikonet staar nu VED SIDEN AF overskriften i stedet for over den. Det
   sparer en linje pr. kort - ni linjer i alt - og laeser bedre: man ser
   ikonet og hvad det handler om i ét blik. */
.feature-card h3 { display: flex; align-items: center; gap: var(--rum-3); }
.feature-icon {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: var(--hj-lille);
  background: var(--red-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--red);
}
.feature-icon svg { width: 20px; height: 20px; display: block; }
.feature-card:nth-child(3n) .feature-icon { color: #9a7736; }
.feature-card:nth-child(3n+2) .feature-icon { color: #2e6a52; }
.feature-card:nth-child(3n) .feature-icon { background: var(--gold-soft); }
.feature-card:nth-child(3n+2) .feature-icon { background: #e4ede7; }
.feature-card h3 { font-size: var(--tekst-stor); margin-bottom: var(--rum-2); }
.feature-card p { font-size: var(--tekst-brod); color: var(--ink-soft); }

.features-footnote {
  margin-top: var(--rum-6);
  font-size: var(--tekst-lille);
  color: var(--muted);
  max-width: 640px;
}

/* ── PRIS / MARKED ─────────────────────────────────────── */
.price-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rum-5);
  margin-top: var(--rum-7);
}
/* Pakkekortene var saa store, at de to tilsammen fyldte tre
   skaermbilleder. Man kan ikke sammenligne to ting, man ikke kan se
   samtidig. Tekst og luft er skruet ned – indholdet er det samme. */
.price-card li { font-size: var(--tekst-lille); line-height: 1.5; padding: var(--rum-2) 0; }
.price-card > p { font-size: var(--tekst-lille); }
.price-card .price-amount { font-size: var(--tekst-stor); }
.price-card .pk-hoved { font-size: var(--tekst-mikro); margin-top: var(--rum-4); }
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  padding: var(--rum-6) var(--rum-6);
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.price-tier {
  font-size: var(--tekst-lille);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--rum-4);
}
.price-amount {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: var(--rum-2);
}
.price-amount span { font-size: 15px; font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.price-card > p { font-size: var(--tekst-brod); color: var(--ink-soft); margin-bottom: var(--rum-4); }
/* Elleve punkter under hinanden er en hoej smal soejle. I to spalter
   fylder de det halve og bliver ikke sværere at læse - man scanner dem
   alligevel, man laeser dem ikke. */
.price-card ul { list-style: none; margin-top: auto; }
@media (min-width: 860px) {
  .price-card ul { columns: 2; column-gap: var(--rum-5); }
  .price-card li { break-inside: avoid; }
  .price-card ul.pk-selv { columns: 1; }
}
.price-card li {
  font-size: var(--tekst-lille);
  color: var(--ink-soft);
  padding: var(--rum-2) 0 var(--rum-2) var(--rum-5);
  position: relative;
  border-top: 1px dashed var(--line);
}
.price-card li::before {
  content: "→";
  position: absolute;
  left: 2px;
  color: var(--gold);
  font-weight: 700;
}
.price-highlight {
  background: var(--pine-deep);
  color: #f2efe6;
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.price-highlight .price-tier { color: var(--gold-tekst); }
.price-highlight > p, .price-highlight li { color: #c4d2c9; }
.price-highlight li { border-color: rgba(255,255,255,0.12); }
.price-badge {
  position: absolute;
  top: -13px; right: 26px;
  background: var(--red);
  color: #fff;
  font-size: var(--tekst-mikro);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--rum-2) var(--rum-4);
  border-radius: var(--hj-pille);
}
.price-src { margin-top: var(--rum-5); font-size: var(--tekst-lille); color: var(--muted); max-width: 720px; }
.price-src a { color: var(--muted); }

.price-cta-band {
  margin-top: var(--rum-7);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  padding: var(--rum-6) var(--rum-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rum-5);
  flex-wrap: wrap;
}
.price-cta-band h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-1); }
.price-cta-band p { font-size: var(--tekst-brod); color: var(--ink-soft); }

/* ── HIGH-END DESIGNVÆLGER ─────────────────────────────── */
.design-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rum-4);
  margin-top: var(--rum-6);
}
.design-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease;
  position: relative;
}
.design-card:not(.soon):hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.design-thumb {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.design-thumb-baubles { display: flex; gap: var(--rum-3); }
.design-thumb-baubles span {
  width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff 0%, #f1e7d2 55%, #d9c9a6 100%);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 620; font-size: var(--tekst-stor); color: #7a1e22;
  box-shadow: var(--relief);
}
.design-thumb-baubles span:last-child {
  background: radial-gradient(circle at 32% 28%, #ffe9b0 0%, #d9b25e 55%, #a87e2d 100%);
  color: #fff;
}
.design-body { padding: var(--rum-4) var(--rum-5) var(--rum-5); }
.design-body h4 { font-family: var(--font-display); font-size: var(--tekst-stor); font-weight: 560; margin-bottom: var(--rum-1); }
.design-body p { font-size: var(--tekst-lille); color: var(--ink-soft); margin-bottom: var(--rum-3); }
.design-card.soon { opacity: 0.75; }
.design-card.soon .design-thumb { filter: grayscale(0.5); }
.soon-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: var(--tekst-mikro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ink); color: #fff;
  padding: var(--rum-1) var(--rum-3); border-radius: var(--hj-pille);
}
.live-badge {
  position: absolute; top: 12px; right: 12px;
  font-size: var(--tekst-mikro); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--pine); color: #fff;
  padding: var(--rum-1) var(--rum-3); border-radius: var(--hj-pille);
  display: flex; align-items: center; gap: var(--rum-2);
}
.live-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #8fe3b0; animation: dotPulse 2s ease-in-out infinite; }
@media (max-width: 720px) { .design-row { grid-template-columns: 1fr; } }

/* ── PROCES-TEASER ─────────────────────────────────────── */
.steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--rum-5);
  margin-top: var(--rum-7);
  counter-reset: step;
}
.step-card {
  position: relative;
  padding: var(--rum-6) var(--rum-5) var(--rum-5);
  border-radius: var(--hj-stor);
  background: var(--card);
  border: 1px solid var(--line);
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease;
}
.step-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step-card::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--tekst-brod);
  font-weight: 600;
  color: var(--red);
  display: inline-flex;
  width: 38px; height: 38px;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--red-soft);
  background: var(--red-soft);
  border-radius: 50%;
  margin-bottom: var(--rum-4);
}
.step-card h3 { font-size: var(--tekst-stor); margin-bottom: var(--rum-2); }
.step-card p { font-size: var(--tekst-lille); color: var(--ink-soft); }

.center-cta { text-align: center; margin-top: var(--rum-7); }

/* ── KONTAKT ───────────────────────────────────────────── */
.contact-section { background: var(--bg-soft); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--rum-8);
  align-items: start;
}
.contact-info h2 { font-size: var(--tekst-h1); margin-bottom: var(--rum-4); }
.contact-info p { color: var(--ink-soft); max-width: 440px; margin-bottom: var(--rum-5); }
.contact-points { list-style: none; }
.contact-points li {
  padding: var(--rum-3) 0 var(--rum-3) var(--rum-6);
  position: relative;
  font-size: var(--tekst-brod);
  color: var(--ink-soft);
  border-bottom: 1px dashed var(--line);
}
.contact-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--pine);
  font-weight: 700;
}

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  padding: var(--rum-7) var(--rum-6);
  box-shadow: var(--shadow-sm);
}
.contact-form .field { display: block; margin-bottom: var(--rum-4); }
.contact-form .field span {
  display: block;
  font-size: var(--tekst-lille);
  font-weight: 600;
  margin-bottom: var(--rum-2);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: var(--rum-3) var(--rum-4);
  border-radius: var(--hj-lille);
  border: 1.5px solid var(--line);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--tekst-brod);
  color: var(--ink);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: var(--ring-groen);
}
.contact-form button { width: 100%; justify-content: center; }
.form-success {
  display: none;
  text-align: center;
  padding: var(--rum-6) var(--rum-3) var(--rum-3);
}
.form-success .big { margin-bottom: var(--rum-3); color: var(--pine); }
.form-success .big svg { width: 54px; height: 54px; }
.form-success h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-2); }
.form-success p { font-size: var(--tekst-brod); color: var(--ink-soft); }
.contact-form.sent form { display: none; }
.contact-form.sent .form-success { display: block; animation: successPop 0.5s cubic-bezier(0.2, 0.65, 0.25, 1); }
@keyframes successPop {
  from { opacity: 0; transform: scale(0.92) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── FOOTER ────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: #b9c4bd;
  padding: var(--rum-8) 0 var(--rum-7);
  font-size: var(--tekst-brod);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--rum-7);
  margin-bottom: var(--rum-7);
}
.footer .logo { color: #f2efe6; margin-bottom: var(--rum-4); }
.footer p { max-width: 340px; font-size: var(--tekst-lille); }
.footer h4 {
  color: #f2efe6;
  font-size: var(--tekst-lille);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--rum-4);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: var(--rum-2); }
.footer a { color: #b9c4bd; text-decoration: none; transition: color 0.25s ease; }
.footer a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: var(--rum-5);
  display: flex;
  justify-content: space-between;
  gap: var(--rum-4);
  flex-wrap: wrap;
  font-size: var(--tekst-lille);
  color: #8b978f;
}

/* ── UNDERSIDE-HERO ────────────────────────────────────── */
.subpage-hero {
  padding: var(--rum-10) 0 var(--rum-8);
  position: relative;
  overflow: hidden;
}
.subpage-hero h1 { font-size: var(--tekst-hero); margin-bottom: var(--rum-4); max-width: 780px; }
.subpage-hero .section-lead { font-size: var(--tekst-stor); }

/* Integrations-metoder */
.method-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rum-5);
  margin-top: var(--rum-6);
}
.method-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--hj-stor);
  padding: var(--rum-6) var(--rum-6);
  transition: transform 0.35s cubic-bezier(0.2, 0.65, 0.25, 1), box-shadow 0.35s ease;
  display: flex;
  flex-direction: column;
}
.method-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.method-tag {
  align-self: flex-start;
  font-size: var(--tekst-mikro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--rum-1) var(--rum-3);
  border-radius: var(--hj-pille);
  background: var(--red-soft);
  color: var(--red);
  margin-bottom: var(--rum-4);
}
.method-card:nth-child(2) .method-tag { background: #e4ede7; color: var(--pine); }
.method-card:nth-child(3) .method-tag { background: var(--gold-soft); color: var(--gold-tekst); }
.method-card h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-3); }
.method-card > p { font-size: var(--tekst-brod); color: var(--ink-soft); margin-bottom: var(--rum-4); }
.method-meta {
  margin-top: auto;
  padding-top: var(--rum-4);
  border-top: 1px dashed var(--line);
  font-size: var(--tekst-lille);
  color: var(--muted);
}
.method-meta strong { color: var(--ink); }

.code-peek {
  background: #14231c;
  color: #cfe3d6;
  border-radius: var(--hj);
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: var(--tekst-lille);
  padding: var(--rum-4) var(--rum-5);
  overflow-x: auto;
  line-height: 1.7;
  margin: var(--rum-4) 0 var(--rum-1);
  white-space: pre;
}
.code-peek .c1 { color: #7fa88f; }
.code-peek .c2 { color: #e8c47a; }

/* Timeline */
.timeline { margin-top: var(--rum-7); position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 25px;
  top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--gold), var(--pine));
  opacity: 0.35;
}
.tl-item {
  position: relative;
  padding: 0 0 var(--rum-7) var(--rum-8);
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: 12px; top: 2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tekst-lille);
  font-weight: 700;
  color: var(--pine);
  box-shadow: 0 0 0 6px var(--bg);
}
.tl-item h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-2); }
.tl-item p { color: var(--ink-soft); font-size: var(--tekst-brod); max-width: 640px; }
.tl-item .tl-tag {
  display: inline-block;
  font-size: var(--tekst-mikro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--rum-2);
}

/* FAQ */
.faq-list { margin-top: var(--rum-7); max-width: 780px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--hj);
  background: var(--card);
  margin-bottom: var(--rum-3);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--rum-5) var(--rum-5);
  font-weight: 600;
  font-size: var(--tekst-brod);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--rum-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--font-display);
  font-size: var(--tekst-h3);
  color: var(--red);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-body {
  padding: 0 var(--rum-5) var(--rum-5);
  font-size: var(--tekst-brod);
  color: var(--ink-soft);
  max-width: 660px;
}

/* CTA-band (genbrug på undersider) */
.cta-band {
  background: var(--pine-deep);
  border-radius: var(--hj-stor);
  color: #f2efe6;
  padding: var(--rum-8) var(--rum-7);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rum-6);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 154, 74, 0.28) 0%, transparent 65%);
  top: -180px; right: -120px;
}
.cta-band h2 { font-size: var(--tekst-h1); margin-bottom: var(--rum-2); }
.cta-band p { color: #c4d2c9; max-width: 480px; }

/* ── RESPONSIV ─────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--rum-7); }
  .hero { min-height: unset; padding-top: var(--rum-10); }
  .hero-visual { max-width: 520px; }
  .facts-grid, .features-grid, .price-cards, .method-cards { grid-template-columns: repeat(2, 1fr); }
  .steps-row { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--rum-7); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  section { padding: var(--rum-8) 0; }
  .nav-links {
    position: fixed;
    inset: 0;
    background: rgba(250, 247, 241, 0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    justify-content: center;
    gap: var(--rum-6);
    font-size: var(--tekst-h3);
    transform: translateY(-102%);
    transition: transform 0.45s cubic-bezier(0.2, 0.65, 0.25, 1);
    z-index: 190;
  }
  .nav-links.open { transform: none; }
  .nav-toggle { display: block; position: relative; z-index: 195; }
  .facts-grid, .features-grid, .price-cards, .steps-row, .method-cards { grid-template-columns: 1fr; }
  .facts-case { grid-template-columns: 1fr; padding: var(--rum-6) var(--rum-5); }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-card-chip { display: none; }
  .demo-iframe { height: 78vh; }
  .cta-band { padding: var(--rum-7) var(--rum-6); }
  .contact-form { padding: var(--rum-6) var(--rum-5); }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* ══ DESIGN-TEASER PÅ FORSIDEN ══ */
.designs-teaser {
  display: grid; gap: var(--rum-4); margin-top: var(--rum-6);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 900px) {
  .designs-teaser { grid-template-columns: repeat(3, 1fr) 1.5fr; align-items: stretch; }
}
@media (max-width: 640px) {
  .designs-teaser { grid-template-columns: repeat(3, 1fr); }
}
.dt-klar { background: linear-gradient(160deg, #7a1e22, #a02226); }
.dt-snart { background: linear-gradient(160deg, #142338, #1d3450); }
.dt-snart:last-of-type { background: linear-gradient(160deg, #1d4d3b, #2e6b52); }
.dt-kugler { display: flex; gap: var(--rum-1); margin-bottom: auto; margin-top: var(--rum-6); }
.dt-kugler span {
  width: 27px; height: 27px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff, #efe6d4);
  color: #7a1e22; font-size: var(--tekst-mikro); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--skygge-moerk-sm);
}
.dt-kugler .gold { background: radial-gradient(circle at 34% 30%, #f7e6b4, #d4af5c); color: #6b4a15; }
.dt-tekst { grid-column: 1 / -1; padding: var(--rum-2) var(--rum-1) 0; }
@media (min-width: 900px) { .dt-tekst { grid-column: auto; padding: 0 0 0 var(--rum-3); align-self: center; } }
.dt-tekst h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-3); }
.dt-tekst p { font-size: var(--tekst-brod); color: var(--ink-soft); line-height: 1.65; margin-bottom: var(--rum-4); }

/* ══ DEMO DELT I TO ══ */
/* Hoejre spalte finder sin egen hoejde. Foer blev den strakt til at matche
   den levende demo (777px), mens indholdet var 210px bredt - resultatet var
   et stort tomt roedt felt. Et kortere, fyldt panel ser bedre ud end et
   hoejt, tomt et. */
.demo-split { display: grid; gap: var(--rum-5); align-items: start; }
@media (min-width: 1000px) { .demo-split { grid-template-columns: 1.5fr 1fr; } }


/* Skiller to sammenslåede afsnit inde i samme sektion */
.sek-skel {
  border: none; border-top: 1px solid var(--line);
  margin: clamp(var(--rum-7), 7vw, var(--rum-8)) 0 clamp(var(--rum-6), 5vw, var(--rum-7));
}
.demo-section .sek-skel, section[id="spil"] .sek-skel { border-top-color: rgba(255,255,255,.14); }

/* Tegnede ikoner i knapper – emoji ser forskellige ud paa hver platform. */
.ik { display: inline-flex; vertical-align: -3px; margin-right: var(--rum-2); }
.ik svg { display: block; }

/* Kilden under hvert tal. Den skal kunne ses, men ikke konkurrere med
   selve paastanden – ellers laeser folk kilden i stedet for tallet. */
.fact-kilde {
  margin-top: var(--rum-3); font-size: var(--tekst-mikro); color: var(--muted);
  line-height: 1.5; border-top: 1px solid var(--line); padding-top: var(--rum-2);
}
.fact-kilde a { color: var(--pine); text-decoration: underline; text-underline-offset: 2px; }
.fact-kilde a:hover { color: var(--red); }

/* ══ DE TO PAKKER ══
   Stod foer som en inline-stil paa elementet, og en inline-stil slaar
   enhver medieregel. Paa en telefon betoed det to spalter i en bredde,
   der kun har plads til én - og hele siden kunne traekkes sidelaens. */
/* max-width uden margin-inline centrerer ikke - den klipper bare til
   hoejre. To kort paa 900 px i en spalte paa 1160 laa altsaa i venstre
   side med 260 px tomrum ved siden af, som om der manglede et tredje. */
.price-cards.to-pakker {
  grid-template-columns: repeat(2, 1fr);
  max-width: 900px; margin-inline: auto;
}
@media (max-width: 760px) { .price-cards.to-pakker { grid-template-columns: 1fr; } }

/* En fejl i en formular skal kunne ses. Roed 11px-tekst under et felt
   bliver overset af praecis dem, den er skrevet til. */
.kontakt-fejl {
  font-size: var(--tekst-brod); line-height: 1.5; color: #8c2026;
  background: #fdf2f2; border-left: 3px solid var(--red);
  padding: var(--rum-3) var(--rum-4); border-radius: var(--hj-mikro);
  margin: 0 0 var(--rum-4);
}

/* ══ NOGET AT RAMME MED EN TOMMELFINGER ══
   Menupunkterne var 18 px hoeje, og de smaa links 16-21 px. En finger er
   ca. 9 mm bred; alt under 44 px kraever, at man sigter. */
@media (max-width: 900px) {
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .dg-scene-fod a, .hero-stats-note a, .facts-case a { display: inline-block; padding: var(--rum-2) 0; min-height: 44px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }
}

/* ══ FUNKTIONSBÅNDET ═══════════════════════════════════════════════
   De ni funktioner laa som store kort i deres egen sektion: tre raekker,
   halvanden skaerm, og man skulle igennem dem for at naa prisen.

   Men de er ikke ni argumenter. De er ét: "det hele er med i begge
   pakker". Derfor et baand i stedet - det siger det samme paa én linje
   og lader bevaegelsen fortaelle, at der er flere end dem, man kan se.

   Listen staar TO gange i markuppen. Baandet flytter praecis halvdelen
   og hopper saa tilbage til nul - og fordi anden halvdel er identisk
   med foerste, kan man ikke se hoppet. Uden dubleringen ville der komme
   et tomt hul, hver gang den naaede enden. */
/* Baandet bryder ud af .wrap og loeber fra kant til kant. Inde i
   wrappen stoppede det ved 1160 px, og saa lignede bevaegelsen en
   liste, der blev klippet af - ikke noget der koerer forbi.

   50% - 50vw er afstanden fra wrappens kant til vinduets. Negativ
   margen i begge sider traekker den altsaa praecis ud til kanten,
   uanset hvor bred wrappen er. body har overflow-x: hidden, saa 100vw
   ikke laver en vandret rullebjaelke paa grund af scrollbarens bredde. */
.funk-baand {
  margin-top: var(--rum-6);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* Overskriften bliver staaende inde i spalten, hvor resten af teksten
   er - kun brikkerne loeber ud. */
.fb-mrk { margin-left: max(var(--rum-4), calc(50vw - min(1160px, 92vw) / 2)); }
.fb-mrk {
  font-size: var(--tekst-mikro); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--rum-3);
}
.fb-spor {
  display: flex; gap: var(--rum-3); width: max-content;
  animation: baandet 64s linear infinite;
}
/* Staar musen paa baandet, vil man laese - saa staar det stille. */
.funk-baand:hover .fb-spor { animation-play-state: paused; }
/* -33,333 % = praecis én af de tre lister. Var det -50 %, ville den
   hoppe halvanden liste og saa staar brikkerne forskudt ved hver runde. */
@keyframes baandet { to { transform: translateX(-33.3333%); } }

/* Kanterne toner ud, saa brikkerne glider ind og ud i stedet for at
   blive klippet af en lige kant. */
.funk-baand {
  overflow: hidden;
  /* Udtoningen sidder i selve kanten nu, hvor baandet er fuldbredde -
     saa brikkerne glider ud af billedet i stedet for at blive klippet. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.fb-liste {
  display: flex; gap: var(--rum-3); list-style: none; margin: 0; padding: 0;
}
.fb-liste li {
  display: flex; align-items: center; gap: var(--rum-3); white-space: nowrap;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--hj-pille); padding: var(--rum-3) var(--rum-5) var(--rum-3) var(--rum-3);
  font-size: var(--tekst-brod); font-weight: 500; color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.fb-ico {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: var(--hj-lille);
  display: grid; place-items: center; background: var(--red-soft); color: var(--red);
}
.fb-ico svg { width: 18px; height: 18px; display: block; }
.fb-liste li:nth-child(3n) .fb-ico { background: var(--gold-soft); color: #9a7736; }
.fb-liste li:nth-child(3n+2) .fb-ico { background: #e4ede7; color: #2e6a52; }

/* Bevaegelse man ikke har bedt om, er svaer at laese for nogen - og
   direkte ubehagelig for andre. Staar den stille, kan baandet rulles
   med fingeren eller musehjulet i stedet. */
@media (prefers-reduced-motion: reduce) {
  .fb-spor { animation: none; }
  .funk-baand { overflow-x: auto; }
}

/* ══ DESIGNKORT ══
   Et levende design i toppen, en hvid krop under. Bruges baade paa
   forsiden og paa designs-siden - derfor ligger den her og ikke i
   den ene af de to filer. */
.dg-grid { display: grid; gap: var(--rum-5); margin-top: var(--rum-7); align-items: start; }
@media (min-width: 900px) { .dg-grid { grid-template-columns: 1.35fr 1fr 1fr; } }
/* Forsiden viser to kort, ikke tre. */
@media (min-width: 900px) { .dg-grid.to-kort { grid-template-columns: 1fr 1fr; } }
/* Byg-siden er lys; scenen bag den skal ikke vaere moerkeroed. */
.dg-scene.lys { background: var(--bg); }

.dg-kort {
      background: var(--card); border: 1px solid var(--line); border-radius: var(--hj-stor);
      overflow: hidden; position: relative;
      transition: transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, border-color .3s;
    }
    .dg-kort:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #d8cdb8; }
    /* Maerkatet stod i venstre hjoerne - oven paa kalenderens EGEN
       overskrift ("Åbn dagens låge"). To overskrifter i samme hjoerne
       laeser man ingen af. Det er flyttet til hoejre, hvor baade
       kalenderen og byg-siden har luft. */
    .dg-maerkat {
      position: absolute; top: var(--rum-4); right: var(--rum-4); z-index: 3;
      font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      padding: var(--rum-2) var(--rum-3); border-radius: var(--hj-pille);
      background: var(--pine); color: #f2f5f3; box-shadow: var(--skygge-moerk-sm);
    }
    .dg-maerkat.snart { background: rgba(28,43,35,.62); backdrop-filter: blur(4px); }

    /* Levende mini-kalender */
    .dg-scene { position: relative; background: #7a1e22; aspect-ratio: 16 / 11; overflow: hidden; }
    .dg-ramme {
      position: absolute; inset: 0;
      /* Kalenderen tegnes i fuld størrelse og skaleres ned, så den ser
         rigtig ud i stedet for at blive presset sammen. */
      width: 1280px; height: 880px;
      transform: scale(var(--dg-skala, 0.42)); transform-origin: top left;
      border: 0;
    }
    .dg-scene-fod {
      position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
      display: flex; align-items: center; justify-content: space-between; gap: var(--rum-3);
      padding: var(--rum-3) var(--rum-4); font-size: var(--tekst-lille); color: rgba(255,255,255,.92);
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72));
      pointer-events: none;
    }
    /* Kalenderen fylder rammen praecis (880 af 880). Byg-siden er hoejere
       (1291 af 811), saa den bliver skaaret over - og et snit midt i et
       designkort ligner en fejl. En blød overgang gør snittet bevidst og
       antyder, at der er mere at rulle ned til. Saettes af landing.js,
       kun paa de rammer der faktisk er for hoeje. */
    .dg-scene.afskaaret::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 33%;
      background: linear-gradient(180deg, rgba(250,247,241,0) 0%, rgba(250,247,241,.86) 74%, var(--bg) 100%);
      pointer-events: none; z-index: 1;
    }
    .dg-scene-fod b { color: #fff; }
    .dg-scene-fod a { pointer-events: auto; color: #f3d9a4; font-weight: 600; text-decoration: none; }
    .dg-scene-fod a:hover { text-decoration: underline; }

    .dg-tom { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 11; }
    .dg-tom span { font-family: var(--font-display); font-size: var(--tekst-hero); font-weight: 620; color: rgba(255,255,255,.34); }

    /* Kroppen saetter sin EGEN tekstfarve. Kortet bruges baade paa den
       lyse designs-side og i den moerkegroenne demo-sektion paa forsiden,
       og dér arvede overskrifterne sektionens naesten-hvide farve - hvid
       tekst paa et hvidt kort. Et faelles kort maa ikke afhaenge af, hvor
       nogen laegger det. */
    .dg-krop { padding: var(--rum-5); color: var(--ink); }
    .dg-krop h2, .dg-krop h3 { font-size: var(--tekst-h3); margin-bottom: var(--rum-2); color: var(--ink); }
    .dg-krop p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; margin-bottom: var(--rum-4); }
    .dg-liste { list-style: none; margin: 0 0 var(--rum-5); padding: 0; }
    .dg-liste li { position: relative; padding-left: var(--rum-5); font-size: var(--tekst-brod); color: var(--ink-soft); margin-bottom: var(--rum-2); line-height: 1.55; }
    .dg-liste li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pine); font-weight: 700; }