/* ==========================================================================
   Adlure — designsystem for hele sitet

   Samme farver, skrifttype og billeder som adlure.dk. Én container-bredde,
   én skala for afstande og overskrifter, og komponenter der er tegnet til
   Adlure i stedet for arvet fra et Shopify-tema.

   Sikkerhed: al styling ligger i denne fil. Der er ingen inline-styles i
   HTML'en, så Content-Security-Policy'en kan nøjes med style-src 'self'.
   ========================================================================== */

@font-face {
  font-family: Assistant;
  src: url("../fonts/assistant-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Assistant;
  src: url("../fonts/assistant-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #0fa0e2;
  --blue-hover: #0b8fcb;
  --blue-dark: #0b7eaf;
  --blue-light: #2eb3ef;
  --blue-tint: #eaf6fd;
  --green: #28a745;
  --red: #dc3545;

  --ink: #121212;
  --ink-soft: #2b3036;
  --muted: #5b6169;
  --faint: #8a9098;
  --line: #e5e8ec;
  --line-soft: #eff1f4;

  --bg: #ffffff;
  --bg-soft: #f6f8fa;
  --dark: #0d1319;
  --footer: #0f0f0f;

  --r: 14px;
  --r-lg: 20px;
  --r-xl: 26px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 28px rgba(16, 24, 40, 0.06);
  --shadow-lg: 0 2px 6px rgba(16, 24, 40, 0.04), 0 28px 64px rgba(16, 24, 40, 0.1);

  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 40px);
  --hdr-h: 76px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Grundlag ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* Øverst er lærredet hvidt som siden, nederst sort som footeren. Scroller man
     forbi bunden (gummibåndet på Mac), ser man derfor footerens farve fortsætte
     i stedet for en hvid flade. */
  background: linear-gradient(to bottom, var(--bg) 0 50%, var(--footer) 50% 100%);
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  /* Footeren skubbes altid ned i bunden, så korte sider ikke efterlader et hul */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  font-family: Assistant, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.menu-open,
html:has(dialog[open]) { overflow: hidden; }

img, video { display: block; max-width: 100%; height: auto; }

/* Elementer der glider ind fra siden må aldrig give vandret scroll. clip laver
   ikke en scroll-container, så position: sticky virker stadig indeni. */
main { flex: 1 0 auto; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

/* <em> farver en del af en overskrift — det er ikke betoning */
em { font-style: normal; color: var(--blue); }

.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.i--fyld { fill: currentColor; stroke: none; }

svg.ikoner { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
}

.skip:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--smal { max-width: calc(880px + var(--gutter) * 2); }

/* ---------- Typografi ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}

.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.h2 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.h2--mindre { font-size: clamp(1.75rem, 3vw, 2.45rem); }

.lead {
  max-width: 36em;
  font-size: clamp(1.02rem, 1.3vw, 1.125rem);
  line-height: 1.65;
  color: var(--muted);
}

.midt { text-align: center; }
.midt .lead { margin-inline: auto; }

/* ---------- Knapper ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              color 0.2s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}

.btn .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.btn:hover .i { transform: translateX(3px); }
.btn--up:hover .i { transform: translate(2px, -2px); }

.btn--primary {
  background: var(--blue);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 8px 22px rgba(15, 160, 226, 0.3);
}

.btn--primary:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 14px 30px rgba(15, 160, 226, 0.38);
}

.btn--glass {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.btn--glass:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.36); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a2f35; }

.btn--ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: #cfd5db; background: var(--bg-soft); }
.btn--tilbage:hover .i { transform: translateX(-3px); }

.btn--lg { height: 56px; padding: 0 26px; font-size: 16px; }
.btn--sm { height: 42px; padding: 0 17px; border-radius: 999px; font-size: 14.5px; }
.btn--sm .i { width: 16px; height: 16px; }
.btn--fuld { width: 100%; }

.btn:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; transform: none; }
.btn:disabled .i { transform: none; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s;
}

.link-arrow .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.link-arrow:hover { color: var(--blue); }
.link-arrow:hover .i { transform: translateX(4px); }

.tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--blue-tint);
  color: var(--blue-dark);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.tag--graa { background: var(--bg-soft); color: var(--muted); }

/* ==========================================================================
   Header
   ========================================================================== */

.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  transition: background-color 0.3s, box-shadow 0.3s;
}

.hdr.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 rgba(16, 24, 40, 0.08);
}

/* Tre spalter: logo, menu, knapper. Menuen står i den midterste spalte og er
   derfor centreret på headeren. Spalterne kan ikke blive smallere end deres
   indhold, så elementerne skubber til hinanden i stedet for at overlappe. */
.hdr__in {
  /* Headeren får lidt mere bredde end sidens indhold, så der er plads nok til,
     at menuen kan stå præcis i midten med knapperne i højre side. */
  --wrap: 1460px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: var(--hdr-h);
  transition: height 0.3s var(--ease);
}

.hdr__logo img { width: auto; height: 52px; transition: height 0.3s var(--ease); }

.hdr__nav {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 2px;
}

.hdr__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 15.5px;
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

.hdr__link:hover,
.dd.is-open > .hdr__link { background: var(--bg-soft); color: var(--ink); }

.hdr__link[aria-current="page"],
.hdr__link.is-active { color: var(--ink); }

.hdr__link[aria-current="page"]::after,
.hdr__link.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--blue);
  transform: translateX(-50%);
}

.hdr__chev { width: 16px; height: 16px; transition: transform 0.25s var(--ease); }
.dd.is-open .hdr__chev { transform: rotate(180deg); }

.hdr__end { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 12px; }

/* Gratis designudkast ved siden af Book demo. Skjules, når menulinjen bliver
   for trang — knappen findes også i mobilmenuen. */
.hdr__udkast { padding: 0 15px; border-color: rgba(15, 160, 226, 0.5); font-size: 14px; color: var(--blue-dark); }
.hdr__udkast:hover { border-color: var(--blue); background: var(--blue-tint); color: var(--blue-dark); }

.lang {
  display: flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lang a { padding: 5px 10px; border-radius: 999px; color: var(--faint); transition: color 0.2s; }
.lang a:hover { color: var(--ink); }
.lang a[aria-current] { background: var(--ink); color: #fff; }

.hdr__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0 11px;
}

.hdr__burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}

.hdr__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.hdr__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (min-width: 1024px) {
  .hdr.is-scrolled .hdr__in { height: 64px; }
  .hdr.is-scrolled .hdr__logo img { height: 44px; }
}

/* ---------- Løsninger-dropdown ---------- */

.dd { position: relative; }

.dd__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 660px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s var(--ease), transform 0.25s var(--ease), visibility 0.2s;
}

/* Usynlig bro, så musen ikke "falder ud" på vej ned til panelet */
.dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }

.dd.is-open .dd__panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.dd__item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: start;
  padding: 12px;
  border-radius: 13px;
  transition: background-color 0.2s;
}

.dd__item:hover,
.dd__item:focus-visible,
.dd__item[aria-current="page"] { background: var(--bg-soft); }

.dd__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--blue-tint);
  color: var(--blue);
  transition: background-color 0.2s, color 0.2s;
}

.dd__item:hover .dd__ico,
.dd__item[aria-current="page"] .dd__ico { background: var(--blue); color: #fff; }

.dd__title { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.dd__desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.dd__go { width: 15px; height: 15px; transition: transform 0.25s var(--ease); }
.dd__item:hover .dd__go { transform: translateX(3px); }

.dd__item--all { background: var(--bg-soft); }
.dd__item--all .dd__ico { background: var(--ink); color: #fff; }
.dd__item--all:hover { background: var(--blue-tint); }

/* ---------- Mobilmenu ---------- */

.mnav {
  position: fixed;
  inset: var(--hdr-h) 0 0;
  z-index: 49;
  overflow-y: auto;
  padding: 16px var(--gutter) 32px;
  background: #fff;
  border-top: 1px solid var(--line-soft);
  animation: mnavIn 0.45s var(--ease) both;
}

/* Menuen rulles ned fra headeren, og punkterne kommer ind ét ad gangen */
@keyframes mnavIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mnavPunkt { from { opacity: 0; transform: translateY(14px); } }
@keyframes mnavUd { to { opacity: 0; transform: translateY(-10px); } }

.mnav__label,
.mnav__services li,
.mnav__links li,
.mnav__foot { animation: mnavPunkt 0.5s var(--ease) both; }

.mnav__label:first-child { animation-delay: 0.08s; }
.mnav__services li:nth-child(1) { animation-delay: 0.12s; }
.mnav__services li:nth-child(2) { animation-delay: 0.16s; }
.mnav__services li:nth-child(3) { animation-delay: 0.2s; }
.mnav__services li:nth-child(4) { animation-delay: 0.24s; }
.mnav__services li:nth-child(5) { animation-delay: 0.28s; }
.mnav__services li:nth-child(6) { animation-delay: 0.32s; }
.mnav__services + .mnav__label { animation-delay: 0.32s; }
.mnav__links li:nth-child(1), .mnav__links li:nth-child(2) { animation-delay: 0.36s; }
.mnav__links li:nth-child(3), .mnav__links li:nth-child(4) { animation-delay: 0.4s; }
.mnav__links li:nth-child(5), .mnav__links li:nth-child(6) { animation-delay: 0.44s; }
.mnav__foot { animation-delay: 0.5s; }

/* Når menuen lukker, glider den op og forsvinder, før den skjules */
.mnav.is-lukker { animation: mnavUd 0.25s var(--ease) both; }

.mnav__label {
  margin: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.mnav__services a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  font-size: 17px;
  font-weight: 700;
}

.mnav__services a[aria-current="page"] .dd__ico { background: var(--blue); color: #fff; }

.mnav__links { display: grid; grid-template-columns: 1fr 1fr; }
.mnav__links a { display: block; padding: 10px 0; font-size: 17px; }
.mnav__links a[aria-current="page"] { color: var(--blue); font-weight: 700; }

.mnav__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.mnav__knapper { display: grid; gap: 10px; }

/* ==========================================================================
   Forsidens hero
   ========================================================================== */

.hero,
.phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--dark);
  color: #fff;
}

.hero { padding-block: clamp(64px, 8.5vw, 116px) clamp(72px, 9vw, 124px); }

.hero__bg,
.phero__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-color: var(--dark);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero__bg { background-image: url("../img/hero-bg-desktop.jpg"); }

/* Overlejringen: tungest til venstre hvor teksten står */
.hero::before,
.phero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(100deg, rgba(9, 13, 18, 0.95) 0%, rgba(9, 13, 18, 0.87) 38%, rgba(9, 13, 18, 0.66) 72%, rgba(9, 13, 18, 0.6) 100%),
    linear-gradient(180deg, rgba(9, 13, 18, 0.55) 0%, rgba(9, 13, 18, 0) 28%, rgba(9, 13, 18, 0) 62%, rgba(9, 13, 18, 0.75) 100%);
}

/* Blødt blåt skær bag overskriften */
.hero::after,
.phero::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -35%;
  left: -10%;
  width: min(1000px, 120vw);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, rgba(15, 160, 226, 0.26) 0%, rgba(15, 160, 226, 0.08) 40%, rgba(15, 160, 226, 0) 66%);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 7px 15px 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.pill__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue-light);
}

.pill__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--blue-light);
  animation: ping 2.2s var(--ease) infinite;
}

@keyframes ping { 70%, 100% { transform: scale(2.8); opacity: 0; } }

.hero h1 {
  margin-bottom: 22px;
  font-size: clamp(2.5rem, 5.4vw, 4.4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.hero h1 em,
.phero h1 em { display: block; color: var(--blue-light); }

.hero__lead {
  max-width: 31em;
  margin-bottom: 36px;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
}

.hero__cta,
.phero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
}

.hero__trust li { display: flex; align-items: center; gap: 8px; }
.hero__trust .i { width: 16px; height: 16px; stroke-width: 2.4; color: var(--blue-light); }

/* ---------- Kæden: fem løsninger der hænger sammen ---------- */

.flow {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.035));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.flow__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px; }

.flow__head h2 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.flow__dots { display: flex; gap: 5px; }

.flow__dots i {
  width: 6px;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.2);
  transition: width 0.4s var(--ease), background-color 0.4s;
}

.flow__dots i.is-active { width: 18px; background: var(--blue-light); }

.flow__list { position: relative; display: grid; gap: 2px; }

.flow__list::before {
  content: "";
  position: absolute;
  left: 37px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: linear-gradient(180deg, rgba(46, 179, 239, 0) 0%, rgba(46, 179, 239, 0.4) 14%, rgba(46, 179, 239, 0.4) 86%, rgba(46, 179, 239, 0) 100%);
}

.flow__link {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid transparent;
  border-radius: 17px;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.flow__link::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--blue-light);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}

.flow__step.is-active .flow__link::after { opacity: 0.8; animation: flowFill 3.2s linear forwards; }
.flow.is-paused .flow__link::after { animation-play-state: paused; }

@keyframes flowFill { to { transform: scaleX(1); } }

.flow__ico {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #1a222b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), color 0.35s, transform 0.35s var(--ease);
}

.flow__name { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; }
.flow__desc { display: block; margin-top: 1px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.6); }

.flow__go {
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.55);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}

.flow__step.is-active .flow__link,
.flow__link:focus-visible { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.13); }

.flow__step.is-active .flow__ico {
  background: var(--blue);
  box-shadow: 0 8px 24px rgba(15, 160, 226, 0.45);
  color: #fff;
  transform: scale(1.04);
}

.flow__step.is-active .flow__go { opacity: 1; transform: none; }

/* ==========================================================================
   Undersidernes hero
   ========================================================================== */

.phero { padding-block: clamp(56px, 7.5vw, 104px) clamp(64px, 8vw, 112px); }

.phero--chatbot .phero__bg { background-image: url("../img/hero-chatbot.jpg"); }
.phero--reception .phero__bg { background-image: url("../img/hero-receptionist.jpg"); }
.phero--software .phero__bg { background-image: url("../img/hero-software.jpg"); background-position: 78% center; }
.phero--ads .phero__bg { background-image: url("../img/hero-ads.jpg"); }
.phero--web .phero__bg { background-image: url("../img/hero-webdesign.jpg"); }
.phero--kontakt .phero__bg { background-image: url("../img/hero-kontakt.jpg"); }
.phero--support .phero__bg { background-image: url("../img/hero-support.jpg"); }
.phero--roi .phero__bg { background-image: url("../img/hero-roi.jpg"); }
.phero--demo .phero__bg { background-image: url("../img/hero-book-demo.jpg"); }
.phero--tilbud .phero__bg { background-image: url("../img/hero-tilbud.jpg"); }
.phero--om .phero__bg { background-image: url("../img/hero-bg-desktop.jpg"); }

.phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.phero__grid--solo { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

.phero h1 {
  margin-bottom: 20px;
  font-size: clamp(2.3rem, 4.8vw, 3.9rem);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.phero__lead {
  max-width: 34em;
  margin-bottom: 32px;
  font-size: clamp(1.03rem, 1.35vw, 1.17rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.74);
}

.phero__lead:last-child { margin-bottom: 0; }

.ppoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 40px;
}

.ppoint {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.ppoint__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
}

.ppoint__ico .i { width: 18px; height: 18px; }
.ppoint strong { display: block; font-size: 15px; line-height: 1.3; }
.ppoint small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.64); }

/* Ved siden af en formular står punkterne under hinanden */
.ppoints--stak { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 36px; }
.ppoints--stak .ppoint { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }

.pcard {
  position: relative;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pcard__titel { margin-bottom: 6px; font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.2; letter-spacing: -0.015em; }
.pcard__tekst { margin-bottom: 20px; font-size: 15px; color: var(--muted); }

/* ==========================================================================
   Logo-bånd
   ========================================================================== */

.logos { padding-block: 34px; border-bottom: 1px solid var(--line-soft); }
.logos__in { display: flex; align-items: center; gap: 40px; }

.logos__label {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; align-items: center; gap: 80px; padding-right: 80px; }

.marquee img {
  width: auto;
  height: 28px;
  filter: grayscale(1);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}

.marquee img:hover { filter: none; opacity: 1; }
.marquee .logo-meta { height: 64px; margin-block: -18px; }
.marquee .logo-hubspot { height: 30px; }
.marquee .logo-gemini { height: 26px; }

@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================================
   Sektioner
   ========================================================================== */

.sec { padding-block: clamp(76px, 9vw, 124px); }
.sec--soft { background: var(--bg-soft); }
.sec--tight { padding-block: clamp(40px, 5vw, 64px); }
.sec--top0 { padding-top: 0; }

.sec__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}

.sec__head--split { align-items: end; margin-bottom: 48px; }
.sec__head--split .lead { max-width: 34em; }

.sec__head--midt {
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

.sec__head--midt .lead { margin-top: 16px; margin-inline: auto; }

/* ---------- Faner og løsningspaneler ---------- */

.tabs {
  position: relative;
  display: flex;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  margin-bottom: 24px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.3s var(--ease), background-color 0.3s;
}

.tab .i { width: 17px; height: 17px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--blue); color: #fff; }

.tabs__ind {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 6px 16px rgba(15, 160, 226, 0.35);
  transition: transform 0.45s var(--ease), width 0.45s var(--ease);
}

.tabs.has-ind .tab[aria-selected="true"] { background: transparent; }

.panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: 14px clamp(24px, 5vw, 64px) 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow);
}

.panel.is-entering .panel__media { animation: mediaIn 0.6s var(--ease); }
.panel.is-entering .panel__body > * { animation: bodyIn 0.6s var(--ease) backwards; }
.panel.is-entering .panel__body > :nth-child(2) { animation-delay: 0.04s; }
.panel.is-entering .panel__body > :nth-child(3) { animation-delay: 0.08s; }
.panel.is-entering .panel__body > :nth-child(4) { animation-delay: 0.12s; }
.panel.is-entering .panel__body > :nth-child(5) { animation-delay: 0.16s; }

@keyframes mediaIn { from { opacity: 0; transform: scale(0.98); } }
@keyframes bodyIn { from { opacity: 0; transform: translateY(10px); } }

.panel__media {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 18px;
  background: var(--dark);
}

.panel__media img,
.panel__media video { width: 100%; height: 100%; object-fit: cover; }

.panel__body { padding-block: 20px; }

.panel__body h3 {
  margin-bottom: 16px;
  font-size: clamp(1.65rem, 2.6vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.panel__body > p:not(.eyebrow) { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 30px 0 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

.stats dd {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.stats dt {
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.stats--kort { margin-bottom: 0; }

.stjerne-note { margin-top: -18px; margin-bottom: 26px; font-size: 13px; color: var(--faint); }

/* ---------- Manuelt vs AI og andre sammenligninger ---------- */

.vs,
.calc {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.vs__copy .h2 { margin-bottom: 22px; }

.vs__q {
  max-width: 24em;
  margin-bottom: 14px;
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.checks { display: grid; gap: 14px; margin-top: 32px; }

.checks li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 13px;
  align-items: start;
  line-height: 1.5;
  color: var(--ink-soft);
}

.checks__ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: -1px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
}

.checks__ico .i { width: 14px; height: 14px; stroke-width: 2.6; }
.checks b { color: var(--ink); }

.checks--lys li { color: rgba(255, 255, 255, 0.8); }

/* Løfterne i to kolonner (Menneskerne bag) */
.checks--to { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }

/* ---------- Menneskerne bag Adlure ----------
   Kort med navn, rolle og en linje om, hvad personen laver. Initialer i stedet
   for billeder, indtil der er rigtige billeder af jer. */
.folk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.person {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.person__ini {
  flex: none;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
  font-size: 1.45rem;
  font-weight: 700;
}

.person__navn { margin-bottom: 2px; font-size: 1.25rem; }
.person__rolle { margin-bottom: 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue); }
.person__tekst { line-height: 1.6; color: var(--muted); }
.folk__link { margin-top: 28px; }
.checks--lys .checks__ico { background: rgba(46, 179, 239, 0.18); color: var(--blue-light); }

.cmp {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.cmp table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cmp th, .cmp td { padding: 17px 20px; text-align: center; }
.cmp tbody th { text-align: left; font-size: 15.5px; font-weight: 700; color: var(--ink-soft); }
.cmp tbody tr:not(:last-child) > * { border-bottom: 1px solid var(--line-soft); }

.cmp thead th {
  padding-block: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.cmp th:first-child { width: 52%; }
.cmp .cmp__ai { background: var(--blue-tint); }
.cmp tbody .cmp__ai { border-bottom-color: rgba(15, 160, 226, 0.12) !important; }
.cmp thead .cmp__ai { border-radius: 16px 16px 0 0; background: var(--blue); color: #fff; }

.cmp thead .cmp__ai img {
  display: inline-block;
  width: auto;
  height: 26px;
  margin: -8px 2px -8px -6px;
  vertical-align: middle;
}

.cmp tbody tr:last-child .cmp__ai { border-radius: 0 0 16px 16px; }

.yes, .no {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  vertical-align: middle;
}

.yes { background: #fff; color: var(--green); box-shadow: 0 2px 8px rgba(15, 160, 226, 0.15); }
.no { background: rgba(220, 53, 69, 0.08); color: var(--red); }
.yes .i, .no .i { width: 16px; height: 16px; stroke-width: 2.6; }

.js .cmp.reveal tbody tr { opacity: 0; transform: translateX(10px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .cmp.reveal.is-in tbody tr { opacity: 1; transform: none; }
.js .cmp.reveal.is-in tbody tr:nth-child(1) { transition-delay: 0.15s; }
.js .cmp.reveal.is-in tbody tr:nth-child(2) { transition-delay: 0.22s; }
.js .cmp.reveal.is-in tbody tr:nth-child(3) { transition-delay: 0.29s; }
.js .cmp.reveal.is-in tbody tr:nth-child(4) { transition-delay: 0.36s; }
.js .cmp.reveal.is-in tbody tr:nth-child(5) { transition-delay: 0.43s; }
.js .cmp.reveal.is-in tbody tr:nth-child(6) { transition-delay: 0.5s; }

/* ---------- Prisberegner og ROI-beregner ---------- */

.calc__note { margin-top: 32px; font-size: 14.5px; font-weight: 700; color: var(--faint); }

.calc__card {
  display: flex;
  flex-direction: column;
  min-height: 600px;
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.phero .calc__card { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); border: 0; min-height: 560px; }

.calc__top { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }

.calc__stepno {
  min-width: 78px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.calc__bar { flex: 1; height: 6px; overflow: hidden; border-radius: 99px; background: var(--line-soft); }

.calc__bar i {
  display: block;
  width: 16.66%;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  transition: width 0.6s var(--ease);
}

.calc__view { display: flex; flex: 1; flex-direction: column; }
.calc__view.is-entering { animation: bodyIn 0.45s var(--ease); }

.calc__view h3,
.calc__view .h3 {
  margin-bottom: 8px;
  font-size: clamp(1.45rem, 2.2vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.calc__view .tag { margin-bottom: 14px; }
.calc__sub { margin-bottom: 22px; line-height: 1.6; color: var(--muted); }

.opts { display: grid; gap: 10px; margin-bottom: 24px; }
[data-view="question"] .opts { margin-top: 14px; }

.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 11px 16px 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt:hover { border-color: #ccd4dc; background: var(--bg-soft); }
.opt:active { transform: scale(0.995); }

.opt__ico,
.opt__key {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

.opt__ico .i { width: 18px; height: 18px; }
.opt__key { font-size: 13px; font-weight: 700; }
.opt:hover .opt__ico, .opt:hover .opt__key { background: #fff; }

.opt__txt { flex: 1; font-size: 15.5px; font-weight: 700; line-height: 1.35; }

.opt__radio {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c9ced4;
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s;
}

.opt__radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.25s var(--ease);
}

.opt.is-checked { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(15, 160, 226, 0.12); }
.opt.is-checked .opt__ico, .opt.is-checked .opt__key { background: var(--blue); color: #fff; }
.opt.is-checked .opt__radio { border-color: var(--blue); background: var(--blue); }
.opt.is-checked .opt__radio::after { transform: scale(1); }
.opt:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }

.calc__nav { display: flex; gap: 10px; margin-top: auto; }
.calc__nav .btn { flex: 1; }
.calc__nav .btn--ghost { flex: 0 0 auto; }
.calc__nav--stack { flex-direction: column; }
.calc__nav--stack .btn { flex: none; }

.offer__price {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--bg-soft);
}

.offer__price div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
}

.offer__price div + div { border-top: 1px solid var(--line); }
.offer__price dt { font-size: 14.5px; color: var(--muted); }
.offer__price dd { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; text-align: right; }

.offer__saving {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(40, 167, 69, 0.08);
  color: #1d7a34;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
}

.offer__saving .i { width: 18px; height: 18px; margin-top: 1px; stroke-width: 2.2; }

.calc__loader {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-weight: 700;
  color: var(--muted);
}

.spinner {
  width: 38px;
  height: 38px;
  border: 3px solid var(--line-soft);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.roi-res {
  margin-bottom: 20px;
  padding: 28px 24px;
  border-radius: 20px;
  background: var(--dark);
  color: #fff;
  text-align: center;
}

.roi-res__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.roi-res__tal {
  display: block;
  margin: 12px 0 4px;
  font-size: clamp(2.3rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue-light);
}

.roi-res__sub { color: rgba(255, 255, 255, 0.66); }

.roi-res__anbefaling {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.roi-res__anbefaling strong { display: block; font-size: 1.05rem; }
.roi-res__anbefaling p { margin-top: 4px; color: rgba(255, 255, 255, 0.66); }

.rating { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.rating__stjerner { display: flex; gap: 2px; color: #f5b301; }
.rating__stjerner .i { width: 20px; height: 20px; }
.rating strong { font-size: 1.1rem; }

.drevet {
  margin-top: 26px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.drevet span { margin-left: 6px; letter-spacing: 0; text-transform: none; color: var(--ink-soft); }

/* ---------- Trin ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.step {
  padding: 26px 24px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s, opacity 0.8s var(--ease);
}

.step:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-lg); }
.step__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }

.step__ico,
.fcard__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue);
  transition: background-color 0.3s, color 0.3s;
}

.step__ico .i, .fcard__ico .i { width: 24px; height: 24px; }
.step:hover .step__ico, .fcard:hover .fcard__ico { background: var(--blue); color: #fff; }

.step__num { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; color: #b3b9c0; }
.step h3 { margin-bottom: 10px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.step p { font-size: 15px; line-height: 1.65; color: var(--muted); }

.sec--soft .step, .sec--soft .fcard { border-color: transparent; box-shadow: var(--shadow-sm); }

/* ---------- Kort ---------- */

.cards { display: grid; gap: 18px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.fcard {
  padding: 26px 24px 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s, opacity 0.8s var(--ease);
}

.fcard:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-lg); }
.fcard__ico { margin-bottom: 26px; }
.fcard h3 { margin-bottom: 10px; font-size: 1.2rem; line-height: 1.3; letter-spacing: -0.01em; }
.fcard p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- Redaktionel tekst ("Hvorfor vælge os?", historien) ---------- */

.intro {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.intro__head { position: sticky; top: 110px; }

/* Intro med video i stedet for overskrift til venstre (fx Motion Graphics på Vores tilbud) */
.intro__media {
  position: relative;
  align-self: start;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  background: var(--dark);
  box-shadow: var(--shadow);
}
.intro__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.intro__titel { margin-bottom: 22px; }
.intro__titel .h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.intro__body > .intro__titel + p { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.intro__head .h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); }

.intro__body > p { font-size: 1.0625rem; line-height: 1.78; color: var(--ink-soft); }
.intro__body > p + p { margin-top: 18px; }
.intro__body > p:first-child { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--ink); }
.intro__body > p.intro__slut { font-weight: 700; color: var(--ink); }

.ctabox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 36px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: var(--dark);
  color: #fff;
}

.ctabox h3 { margin-bottom: 6px; font-size: 1.3rem; line-height: 1.25; }
.ctabox p { color: rgba(255, 255, 255, 0.7); line-height: 1.6; }

/* ---------- Prisbånd ---------- */

.pricebar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow);
}

.pricebar + .sec__head,
.pricebar + .panel { margin-top: clamp(64px, 8vw, 104px); }

.pricebar__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue);
}

.pricebar__ico .i { width: 26px; height: 26px; }
.pricebar__tekst { flex: 1; }

.pricebar__label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.pricebar__vaerdi {
  display: block;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

/* ---------- Billede og tekst ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.split--omvendt .split__media { order: 2; }

.split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
}

.split__media--bred { aspect-ratio: 4 / 3; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__body .h2 { margin-bottom: 20px; }
.split__body > p:not(.eyebrow) { line-height: 1.78; color: var(--ink-soft); }
.split__body > p:not(.eyebrow) + p { margin-top: 16px; }
.split__body .btn { margin-top: 30px; }
.split__body .stats { margin-bottom: 0; }

/* ---------- Chat-demo ---------- */

.chatdemo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.phone {
  position: relative;
  width: min(380px, 100%);
  margin-inline: auto;
  padding: 12px;
  border-radius: 46px;
  background: var(--dark);
  box-shadow: 0 40px 90px rgba(13, 19, 25, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}

.phone__skaerm {
  display: flex;
  flex-direction: column;
  height: 560px;
  overflow: hidden;
  border-radius: 36px;
  background: #fff;
}

.phone__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.phone__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.phone__navn { display: block; font-size: 15px; font-weight: 700; line-height: 1.2; }

.phone__status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--green);
}

.phone__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  overflow-y: auto;
  background: var(--bg-soft);
}

.msg {
  max-width: 84%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.45;
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.js .chat .msg:not(.is-vist) { opacity: 0; transform: translateY(8px); }

.msg--user { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--blue); color: #fff; }
.msg--ai { align-self: flex-start; border: 1px solid var(--line); border-bottom-left-radius: 6px; background: #fff; }

.typing {
  display: flex;
  align-self: flex-start;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-bottom-left-radius: 6px;
  background: #fff;
}

.typing i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b9c0c8;
  animation: prik 1.2s infinite ease-in-out;
}

.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }

@keyframes prik { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-4px); opacity: 1; } }

.phone__input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  color: var(--faint);
}

.phone__input .i { width: 18px; height: 18px; color: var(--blue); }

/* ---------- Lyd-demo ---------- */

.lyd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.lydkort {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.lydkort__top { display: flex; align-items: center; gap: 14px; }

.lydkort__knap {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  box-shadow: 0 8px 20px rgba(15, 160, 226, 0.35);
  transition: transform 0.2s var(--ease), background-color 0.2s;
}

.lydkort__knap:hover { transform: scale(1.05); background: var(--blue-hover); }
.lydkort__knap .i { width: 20px; height: 20px; }
.lydkort__knap .i--pause { display: none; stroke-width: 3; }
.lydkort.is-spiller .lydkort__knap .i--play { display: none; }
.lydkort.is-spiller .lydkort__knap .i--pause { display: block; }

.lydkort h3 { font-size: 1.05rem; line-height: 1.3; }
.lydkort__tid { font-size: 13.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

.lydkort__bar { height: 4px; overflow: hidden; border-radius: 99px; background: var(--line-soft); }
.lydkort__bar i { display: block; width: 0; height: 100%; background: var(--blue); transition: width 0.2s linear; }

.lydkort--snart { opacity: 0.62; }
.lydkort--snart .lydkort__knap { background: var(--line); color: var(--faint); box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------- Før/efter ---------- */

.bf { max-width: 1000px; margin-inline: auto; }
.bf__top { display: flex; justify-content: center; margin-bottom: 22px; }

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}

.seg button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.2s, color 0.2s;
}

.seg button .i { width: 16px; height: 16px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.bf__frame {
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.bf__frame--mobil { max-width: 390px; border-radius: 34px; }

.bf__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-soft);
}

.bf__chrome i { width: 10px; height: 10px; border-radius: 50%; background: #dfe3e8; }

.bf__skaerm { position: relative; }

.bf__view {
  height: clamp(380px, 62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.bf__stage { position: relative; cursor: ew-resize; touch-action: pan-y; user-select: none; }
.bf__stage img { width: 100%; height: auto; pointer-events: none; -webkit-user-drag: none; }
.bf__efter { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }
.bf__efter img { height: 100%; object-fit: cover; object-position: top; }

.bf__linje {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
  transform: translateX(-1px);
  pointer-events: none;
}

.bf__greb {
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bf__greb .i { width: 18px; height: 18px; }

.bf__etiket {
  position: absolute;
  top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(13, 19, 25, 0.78);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: none;
}

.bf__etiket--foer { left: 14px; }
.bf__etiket--efter { right: 14px; }

.bf__range { display: block; width: min(420px, 100%); margin: 22px auto 0; accent-color: var(--blue); }

/* ---------- Formularer ---------- */

.formwrap { position: relative; }

.form__hp {
  position: absolute !important;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.field { position: relative; display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.field__opt { font-weight: 400; color: var(--faint); }
/* Et lille tip under et felt — fx et link til inspiration */
.field__tip { font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.field__tip a { font-weight: 700; color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field select { appearance: none; padding-right: 40px; }

/* iOS giver datofelter en indbygget minimumsbredde, så de stikker ud til højre
   for de andre felter. Uden browserens eget udseende følger feltet bredden. */
.field { min-width: 0; }

.field input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  min-width: 0;
  max-width: 100%;
  text-align: left;
}

.field input[type="date"]::-webkit-date-and-time-value { min-height: 1.5em; text-align: left; }

.field:has(select)::after {
  content: "";
  position: absolute;
  right: 17px;
  bottom: 19px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  pointer-events: none;
}

.field textarea { min-height: 96px; resize: vertical; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #cfd6dd; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(15, 160, 226, 0.15);
}

.field.is-fejl input,
.field.is-fejl select,
.field.is-fejl textarea { border-color: var(--red); box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.1); }

.form__send { width: 100%; }

.form__fejl {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(220, 53, 69, 0.08);
  color: #a61e2d;
  font-size: 14.5px;
  font-weight: 700;
}

.form__note { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--faint); }
.form__note a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }

.form__tak { padding: 28px 8px; text-align: center; }
.form__tak:focus { outline: none; }

.form__tak-ico {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(40, 167, 69, 0.12);
  color: var(--green);
}

.form__tak-ico .i { width: 26px; height: 26px; stroke-width: 2.4; }
.form__tak h3 { margin-bottom: 8px; font-size: 1.45rem; }
.form__tak p { margin-bottom: 22px; color: var(--muted); }

.drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 20px 16px;
  border: 1.5px dashed #c9d2da;
  border-radius: 14px;
  background: var(--bg-soft);
  text-align: center;
  transition: border-color 0.2s, background-color 0.2s;
}

.drop:hover, .drop.is-over { border-color: var(--blue); background: var(--blue-tint); }
.drop:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Filfeltet ligger usynligt hen over hele feltet, så både klik og træk virker
   uden ekstra JavaScript */
.drop input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }

.drop__ico { color: var(--blue); }
.drop__tekst { font-size: 14.5px; font-weight: 700; }
.drop__hint { font-size: 13px; color: var(--faint); }

.drop__valgt {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-size: 14.5px;
}

.drop__valgt span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.drop__valgt button { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--muted); }
.drop__valgt button:hover { background: var(--bg-soft); color: var(--red); }

/* ---------- Dialog ---------- */

.modal {
  width: min(640px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
}

.modal::backdrop {
  background: rgba(9, 13, 18, 0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.modal[open] { animation: modalIn 0.35s var(--ease); }

@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

.modal__box { position: relative; padding: clamp(24px, 4vw, 40px); }

.modal__luk {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-soft);
  transition: background-color 0.2s;
}

.modal__luk:hover { background: var(--line); }
.modal__titel { margin-bottom: 8px; padding-right: 44px; font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.02em; }
.modal__tekst { margin-bottom: 22px; color: var(--muted); }

/* ---------- Kontaktinfo ---------- */

.info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.infokort {
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
}

.sec--soft .infokort { border-color: transparent; box-shadow: var(--shadow-sm); }

.infokort h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 1.12rem; }
.infokort h3 .i { color: var(--blue); }
.infokort > p { font-size: 15px; line-height: 1.7; color: var(--muted); }
.infokort > p + p { margin-top: 12px; }

.aabning li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 15px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.aabning li:last-child { border-bottom: 0; }
.aabning li.is-today { font-weight: 700; color: var(--ink); }
.aabning li.is-today span:first-child::after { content: " •"; color: var(--blue); }
.aabning__pause { color: var(--faint); }

.infokort__mail { display: inline-flex; align-items: center; gap: 8px; font-size: 1.1rem; font-weight: 700; }
.infokort__mail:hover { color: var(--blue); }
.infokort .link-arrow { margin-top: 16px; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 44px; max-width: 880px; margin-inline: auto; }
.faq__gruppe h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.35rem; }
.faq__gruppe h2 .i { color: var(--blue); }

.faq__item {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow 0.25s, border-color 0.25s;
}

.faq__item + .faq__item { margin-top: 10px; }
.faq__item[open] { border-color: transparent; box-shadow: var(--shadow); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 1.03rem;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:focus-visible { border-radius: 16px; }

.faq__plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-soft);
  transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s;
}

.faq__plus .i { width: 16px; height: 16px; }
.faq__item[open] .faq__plus { background: var(--blue); color: #fff; transform: rotate(180deg); }
.faq__svar { padding: 0 20px 20px; line-height: 1.75; color: var(--muted); }

/* ---------- Pakker ---------- */

.pakker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }

.pakke {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px 26px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
}

.sec--soft .pakke { border-color: transparent; box-shadow: var(--shadow-sm); }
.pakke--anbefalet, .sec--soft .pakke--anbefalet { border: 2px solid var(--blue); box-shadow: 0 24px 60px rgba(15, 160, 226, 0.18); }

.pakke__badge {
  position: absolute;
  top: -13px;
  left: 24px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pakke__navn { margin-bottom: 12px; font-size: 1.2rem; line-height: 1.3; }

.pakker-head { margin: clamp(56px, 7vw, 88px) 0 40px; text-align: center; }
.pakker-head h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; }
.pakker-head p { max-width: 36em; margin: 10px auto 0; color: var(--muted); }

.phero .drevet { color: rgba(255, 255, 255, 0.5); }
.phero .drevet span { color: #fff; }

.pakke__pris {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pakke__pris strong { font-size: 2.05rem; line-height: 1; letter-spacing: -0.03em; }
.pakke__pris s { font-size: 1rem; color: var(--faint); }
.pakke .checks { flex: 1; gap: 10px; margin: 0 0 26px; }
.pakke .checks li { font-size: 15px; }
.pakke .btn { width: 100%; }

/* ---------- Cases ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.chip:hover { color: var(--ink); border-color: #cfd5db; }
.chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }

.chip__antal {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--bg-soft);
  font-size: 12.5px;
  color: var(--ink-soft);
}

.chip[aria-pressed="true"] .chip__antal { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Tre kort i bredden på desktop, to på tablet og ét på mobil */
.casegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }

.casekort {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #fff;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s;
}

.casekort:hover { transform: translateY(-4px); border-color: transparent; box-shadow: var(--shadow-lg); }

.casekort__visual {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background:
    radial-gradient(circle at 30% 20%, rgba(46, 179, 239, 0.4), transparent 60%),
    linear-gradient(135deg, #0d1319, #1a2735);
  color: #fff;
}

.casekort__visual .i { width: 40px; height: 40px; stroke-width: 1.4; transition: transform 0.5s var(--ease); }
.casekort:hover .casekort__visual .i { transform: scale(1.12); }

/* Har casen et kundelogo, står det i stedet for ikonet — med luft omkring,
   så det ikke rører kanten, uanset om kortet står på højkant eller på tværs. */
.casekort__visual--logo { padding: clamp(20px, 4vw, 30px); }

.casekort__visual--logo img {
  width: auto;
  max-width: min(100%, 230px);
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.5s var(--ease);
}

.casekort:hover .casekort__visual--logo img { transform: scale(1.06); }
.casekort__body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; }

/* Én case alene lægges ned på bredden og holdes smal. Så snart der er to
   eller flere, falder reglen væk af sig selv, og de står som kort i gitteret. */
@media (min-width: 700px) {
  .casekort:only-child { grid-column: 1 / -1; flex-direction: row; max-width: 760px; }
  .casekort:only-child .casekort__visual { flex: 0 0 37%; aspect-ratio: auto; min-height: 186px; }
  .casekort:only-child .casekort__visual--logo { padding: 22px; }
  .casekort:only-child .casekort__visual--logo img { max-width: min(100%, 180px); }
  .casekort:only-child .casekort__body { padding: 24px 26px; }
  .casekort:only-child h2 { font-size: 1.16rem; }
  .casekort:only-child p { font-size: 15px; }
}

.casekort__branche {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.casekort h2 { margin: 6px 0 10px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.012em; }
.casekort p { flex: 1; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.casekort__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }

/* Linket dækker hele kortet, så man kan klikke hvor som helst — men det er
   stadig ét rigtigt link, som tastatur og skærmlæser kan finde. */
.casekort__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue-dark);
}

.casekort__link .i { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 0.3s var(--ease); }
.casekort:hover .casekort__link .i { transform: translateX(3px); }
.casekort__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.casekort__link:focus-visible { outline: none; }
.casekort:has(.casekort__link:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }

.tom { padding: 44px 24px; border: 1px dashed var(--line); border-radius: var(--r-lg); text-align: center; color: var(--muted); }

/* ---------- Vores tilbud: vælg område ---------- */

.vaelger { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }

.vaelger__kort {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 26px 24px 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.25s;
}

.vaelger__kort:hover { transform: translateY(-6px); border-color: rgba(15, 160, 226, 0.35); box-shadow: var(--shadow-lg); }

.vaelger__ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: var(--blue-tint);
  color: var(--blue);
  transition: background-color 0.25s, color 0.25s, transform 0.35s var(--ease);
}

.vaelger__ico .i { width: 24px; height: 24px; }
.vaelger__kort:hover .vaelger__ico { background: var(--blue); color: #fff; transform: rotate(-6deg); }
.vaelger__txt { display: flex; flex: 1; flex-direction: column; }
.vaelger__navn { margin-bottom: 8px; font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.vaelger__tekst { flex: 1; margin-bottom: 22px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.vaelger__go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--blue-dark); }
.vaelger__go .i { width: 18px; height: 18px; transition: transform 0.25s var(--ease); }
.vaelger__kort:hover .vaelger__go .i { transform: translateX(4px); }
.vaelger__note { margin-top: 26px; text-align: center; font-size: 14.5px; color: var(--faint); }

/* Bjælken med det valgte område hænger lige under headeren, mens man læser */
.skift {
  position: sticky;
  top: var(--hdr-h);
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: skiftInd 0.5s var(--ease);
}

/* På desktop krymper headeren til 64 px, når man har scrollet */
@media (min-width: 1024px) {
  .skift { top: 64px; }
}

@keyframes skiftInd { from { opacity: 0; transform: translateY(-10px); } }

.skift__in { display: flex; align-items: center; gap: 18px; min-height: 66px; padding-block: 10px; }

.skift__label {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.skift__valg { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.skift__valg::-webkit-scrollbar { display: none; }

.skift__knap {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.skift__knap .i { width: 17px; height: 17px; }
.skift__knap:hover { border-color: #cfd5db; color: var(--ink); }
.skift__knap.is-valgt { border-color: var(--blue); background: var(--blue); color: #fff; }

.tilbud.is-valgt-ind { animation: bodyIn 0.6s var(--ease); }
.tilbud + .tilbud { border-top: 1px solid var(--line); }
[data-tilbud-titel]:focus { outline: none; }
.pakker-head__ekstra { margin-top: 14px; }
.pakker-head__ekstra .link-arrow { color: var(--blue-dark); }

/* ---------- Mock-up af en hjemmeside (designudkast) ---------- */

.webmock {
  position: relative;
  overflow: clip;  /* clip kan ikke rulles, heller ikke af fokus */
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  color: var(--ink);
}

.webmock__chrome { display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; background: #eef1f4; }
.webmock__chrome i { width: 10px; height: 10px; border-radius: 50%; background: #d5dae0; }
.webmock__chrome i:nth-child(1) { background: #ff7a72; }
.webmock__chrome i:nth-child(2) { background: #ffc94d; }
.webmock__chrome i:nth-child(3) { background: #4fd069; }
.webmock__url { flex: 0 1 55%; height: 18px; margin-left: 14px; border-radius: 99px; background: #fff; }

.webmock__side { padding: 20px 24px 24px; }
.webmock__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.wm-logo { width: 54px; height: 14px; border-radius: 4px; background: var(--ink); }
.wm-links { display: flex; gap: 10px; }
.wm-links i { width: 30px; height: 7px; border-radius: 4px; background: #d9dee4; }
.wm-knap { width: 58px; height: 20px; border-radius: 99px; background: var(--blue); }

.webmock__hero {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 24px 22px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 10%, rgba(46, 179, 239, 0.35), transparent 60%),
    linear-gradient(135deg, #0d1319, #1a2c3c);
}

.wm-linje { display: block; height: 14px; border-radius: 6px; background: #fff; transform-origin: left; }
.wm-linje--l { width: 78%; }
.wm-linje--m { width: 54%; background: var(--blue-light); }
.wm-linje--s { width: 66%; height: 8px; margin-top: 4px; opacity: 0.4; }
.wm-knapper { display: flex; gap: 8px; margin-top: 10px; }
.wm-knapper i { width: 78px; height: 24px; border-radius: 8px; background: var(--blue); }
.wm-knapper i + i { border: 1.5px solid rgba(255, 255, 255, 0.35); background: transparent; }

.webmock__kort { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.webmock__kort i { height: 66px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); }

.webmock__cursor { position: absolute; top: 58%; left: 36%; color: var(--ink); }
.webmock__cursor .i { width: 26px; height: 26px; fill: #fff; stroke-width: 1.6; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3)); }

/* Siden "tegner sig selv", og markøren flytter sig roligt rundt */
.wm-linje, .wm-knapper i, .wm-knap { animation: wmTegn 0.9s var(--ease) both; }
.webmock__kort i { animation: wmOp 0.8s var(--ease) both; }
.wm-knap { animation-delay: 0.2s; }
.wm-linje--l { animation-delay: 0.35s; }
.wm-linje--m { animation-delay: 0.5s; }
.wm-linje--s { animation-delay: 0.65s; }
.wm-knapper i { animation-delay: 0.8s; }
.wm-knapper i + i { animation-delay: 0.9s; }
.webmock__kort i:nth-child(1) { animation-delay: 1s; }
.webmock__kort i:nth-child(2) { animation-delay: 1.1s; }
.webmock__kort i:nth-child(3) { animation-delay: 1.2s; }
.webmock__cursor { animation: wmCursor 7s ease-in-out 1.6s infinite both; }

@keyframes wmTegn { from { opacity: 0; transform: scaleX(0.2); } }
@keyframes wmOp { from { opacity: 0; transform: translateY(12px); } }
@keyframes wmCursor {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(110px, -70px); }
  36% { transform: translate(110px, -70px) scale(0.85); }
  42% { transform: translate(110px, -70px); }
  70% { transform: translate(-40px, 40px); }
}

/* I en sektion venter animationen, til mock-up'en kommer i syne */
.js .reveal:not(.is-in) .webmock *,
.js .reveal:not(.is-in).webmock * { animation-play-state: paused; }

.udkastcta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(28px, 5vw, 60px);
  overflow: clip;  /* clip kan ikke rulles, heller ikke af fokus */
  border-radius: var(--r-xl);
  background: var(--dark);
  color: #fff;
}

.udkastcta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%;
  left: -15%;
  width: 80%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(15, 160, 226, 0.3) 0%, rgba(15, 160, 226, 0) 65%);
}

.udkastcta .eyebrow { color: var(--blue-light); }
.udkastcta h3 { margin-bottom: 14px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
.udkastcta h3 em { color: var(--blue-light); }
.udkastcta__tekst > p:not(.eyebrow) { max-width: 34em; margin-bottom: 26px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); }
.udkastcta__tekst > p.udkastcta__mere { margin: 18px 0 0; font-size: 15px; color: rgba(255, 255, 255, 0.6); }
.udkastcta__mere a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.udkastcta__mere a .i { width: 15px; height: 15px; }
.udkastcta__mere a:hover { color: var(--blue-light); }
.udkastcta .webmock { transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); }

.phero .webmock { transform: perspective(1400px) rotateY(-10deg) rotateX(4deg); }

/* ---------- Gratis designudkast: guiden ---------- */

.udkast {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.udkast__side { position: sticky; top: 110px; }
.udkast__side .h2 { margin-bottom: 8px; }
.udkast__trin { display: grid; gap: 4px; margin: 28px 0; }

.udkast__trin button {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: left;
  transition: background-color 0.2s, box-shadow 0.2s;
}

.udkast__trin button:hover { background: rgba(15, 160, 226, 0.06); }
.udkast:not(.is-trinvis) .udkast__trin button { pointer-events: none; }

.udkast__nr {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.udkast__nr .i { position: absolute; width: 16px; height: 16px; stroke-width: 2.6; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.3s var(--ease); }
.udkast__trin strong { display: block; font-size: 15.5px; line-height: 1.3; }
.udkast__trin small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--faint); }

.udkast__trin .is-aktiv { background: #fff; box-shadow: var(--shadow); }
.udkast__trin .is-aktiv .udkast__nr { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 4px rgba(15, 160, 226, 0.15); }

.udkast__trin .is-faerdig .udkast__nr,
.udkast.is-sendt .udkast__nr { border-color: var(--blue); background: var(--blue-tint); color: transparent; box-shadow: none; }

.udkast__trin .is-faerdig .udkast__nr .i,
.udkast.is-sendt .udkast__nr .i { opacity: 1; color: var(--blue); transform: none; }

.udkast.is-sendt .udkast__trin button { background: none; box-shadow: none; }

.udkast__tryg { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.udkast__tryg .i { width: 18px; height: 18px; margin-top: 1px; color: var(--blue); }
.udkast__tryg a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }

.udkast__kort {
  scroll-margin-top: 100px;
  padding: clamp(22px, 3.4vw, 40px);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.udkast__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.udkast__step.is-entering { animation: bodyIn 0.45s var(--ease); }
.udkast:not(.is-trinvis) .udkast__step + .udkast__step { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--line); }
.udkast:not(.is-trinvis) [data-naeste],
.udkast:not(.is-trinvis) .udkast__top { display: none; }

.udkast__step > legend { margin-bottom: 8px; padding: 0; }
.udkast__step .h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.2; letter-spacing: -0.018em; text-wrap: balance; }
.udkast__step .h3:focus { outline: none; }
.udkast__sub { margin-bottom: 24px; line-height: 1.6; color: var(--muted); }
.udkast .form__grid { gap: 14px; margin-bottom: 0; }
.udkast .field input::placeholder, .udkast .field textarea::placeholder { color: #a5abb2; }
.udkast .form__fejl { margin: 22px 0 0; }
.udkast .form__note { text-align: center; }

.udkast__nav { display: flex; gap: 10px; margin-top: 28px; }
.udkast__nav .btn { flex: 1; }
.udkast__nav .btn--tilbage { flex: 0 0 auto; }
.udkast__nav .form__send { width: auto; }

.udkast__grid-luft { margin-top: 22px; }
.udkast__label { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }
.udkast__side .lead { font-size: 1rem; }

.udkast__noscript { margin-bottom: 20px; padding: 12px 14px; border-radius: 12px; background: var(--blue-tint); font-size: 14.5px; }

/* Afkrydsning og valg som kort */
.valggruppe { min-width: 0; margin: 22px 0 0; padding: 0; border: 0; }
.valggruppe__titel { display: block; margin-bottom: 10px; padding: 0; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); }

.valg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.valg--chips { display: flex; flex-wrap: wrap; gap: 8px; }

.valg__kort {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 9px 14px 9px 10px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease);
}

.valg__kort input { position: absolute; opacity: 0; pointer-events: none; }
.valg__kort:hover { border-color: #ccd4dc; background: var(--bg-soft); }
.valg__kort:active { transform: scale(0.985); }

.valg__ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  transition: background-color 0.2s, color 0.2s;
}

.valg__ico .i { width: 17px; height: 17px; }
.valg__txt { flex: 1; }

.valg__tjek {
  display: grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1.5px solid #c9ced4;
  border-radius: 6px;
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}

.valg__tjek .i { width: 13px; height: 13px; stroke-width: 3; transform: scale(0); transition: transform 0.25s var(--ease); }
.valg__kort:has(input[type="radio"]) .valg__tjek { border-radius: 50%; }

.valg--chips .valg__kort { min-height: 42px; gap: 8px; padding: 0 14px 0 10px; border-radius: 999px; font-size: 14.5px; }
.valg--chips .valg__tjek { width: 18px; height: 18px; }

.valg__kort:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); box-shadow: 0 0 0 3px rgba(15, 160, 226, 0.12); }
.valg__kort:has(input:checked) .valg__ico { background: var(--blue); color: #fff; }
.valg__kort:has(input:checked) .valg__tjek { border-color: var(--blue); background: var(--blue); }
.valg__kort:has(input:checked) .valg__tjek .i { transform: none; }
.valg__kort:has(input:focus-visible),
.stil:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.valggruppe.is-fejl .valg__kort { border-color: rgba(220, 53, 69, 0.55); }

/* Stilvalg med små forhåndsvisninger */
.stilvalg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.stil {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.25s var(--ease);
}

.stil input { position: absolute; opacity: 0; pointer-events: none; }
.stil:hover { transform: translateY(-2px); border-color: #ccd4dc; }

.stil__mini {
  display: grid;
  align-content: start;
  gap: 5px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  padding: 10px;
  border-radius: 10px;
  background: var(--m-bg);
}

.stil__mini i { display: block; height: 8px; border-radius: 3px; background: var(--m-ink); }
.stil__mini i:nth-child(1) { width: 36%; height: 5px; opacity: 0.45; }
.stil__mini i:nth-child(2) { width: 82%; margin-top: 6px; }
.stil__mini i:nth-child(3) { width: 58%; }
.stil__mini i:nth-child(4) { width: 36%; height: 12px; margin-top: 6px; border-radius: var(--m-r); background: var(--m-accent); }
.stil__navn { padding-inline: 4px; font-size: 14px; font-weight: 700; line-height: 1.25; }

.stil__tjek {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.25s var(--ease);
}

.stil__tjek .i { width: 13px; height: 13px; stroke-width: 3; }
.stil:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(15, 160, 226, 0.14); }
.stil:has(input:checked) .stil__tjek { opacity: 1; transform: none; }

.stil--lys { --m-bg: #f4f6f8; --m-ink: #1c2530; --m-accent: #0fa0e2; --m-r: 3px; }
.stil--moerk { --m-bg: #0d1319; --m-ink: #e8eef4; --m-accent: #2eb3ef; --m-r: 3px; }
.stil--varm { --m-bg: #f4e9dc; --m-ink: #5a3b2a; --m-accent: #cf7a48; --m-r: 10px; }
.stil--klassisk { --m-bg: #fff; --m-ink: #1f2a44; --m-accent: #1f2a44; --m-r: 0; }
.stil--farverig { --m-bg: linear-gradient(135deg, #ffe07a, #ff7aa6); --m-ink: #2b1b4a; --m-accent: #6a4cff; --m-r: 10px; }
.stil--klassisk .stil__mini { box-shadow: inset 0 0 0 1px var(--line); }
.stil--overrask .stil__mini { place-items: center; align-content: center; background: linear-gradient(135deg, #eaf6fd, #f6f8fa); color: var(--blue); }
.stil--overrask .stil__mini .i { width: 30px; height: 30px; }

/* ---------- Lang tekst (privatlivspolitik) ---------- */

.prose { max-width: 760px; margin-inline: auto; line-height: 1.78; color: var(--ink-soft); }
.prose h2 { margin: 48px 0 12px; font-size: 1.45rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 26px 0 8px; font-size: 1.1rem; color: var(--ink); }
.prose p, .prose ul { margin-bottom: 14px; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose strong { color: var(--ink); }

/* ---------- Enkle sider (tak, 404) ---------- */

.enkel {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--hdr-h) - 140px);
  padding: 80px var(--gutter);
  background: var(--bg-soft);
}

.enkel__kort {
  max-width: 600px;
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.enkel__ico {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--blue-tint);
  color: var(--blue);
}

.enkel__ico .i { width: 28px; height: 28px; }
.enkel h1 { margin-bottom: 14px; font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.025em; }
.enkel p { color: var(--muted); line-height: 1.7; }
.enkel p + p { margin-top: 12px; }
.enkel__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ==========================================================================
   Case-sider

   En case er bygget af de dele, der allerede findes (.phero, .panel, .tabs,
   .steps, .checks) plus de tre ting herunder: fakta-linjen i heroen,
   nøgletallene, og mock-up'erne af det vi har bygget.

   Mock-up'erne er tegnet i HTML og CSS — ikke skærmbilleder. Derfor er der
   hverken billedfiler at hente eller ét eneste rigtigt kundeoplysning på
   siden, og de tilpasser sig skærmen som alt andet.
   ========================================================================== */

/* ---------- Fakta om opgaven, under heroens tekst ---------- */

.cmeta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 10px;
  margin: 38px 0 0;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cmeta dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.cmeta dd { margin: 7px 0 0; font-size: 15.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.92); }

/* ---------- Nøgletal ---------- */

.stats--kpi {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.stats--kpi > div {
  padding: 26px 24px 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.stats--kpi dd { color: var(--blue-dark); }
.stats--kpi dt { margin-top: 10px; color: var(--muted); letter-spacing: 0.06em; }

/* ---------- Før og efter, som to lister ---------- */

.kontrast { display: grid; gap: 16px; }

.kontrast__kort {
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.kontrast__kort--efter { border-color: rgba(15, 160, 226, 0.3); background: var(--blue-tint); box-shadow: none; }

.kontrast__h {
  margin-bottom: 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.kontrast__kort--efter .kontrast__h { color: var(--blue-dark); }
.kontrast ul { display: grid; gap: 11px; }

.kontrast li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

.kontrast li .i { width: 16px; height: 16px; margin-top: 4px; stroke-width: 2.6; }
.kontrast__kort--foer li .i { color: var(--red); }
.kontrast__kort--efter li .i { color: var(--blue); }

/* ---------- Citat fra kunden ---------- */

.citat { max-width: 860px; margin-inline: auto; text-align: center; }

/* Bedømmelsen står over citatet. Stjernerne er fyldte og i samme grønne
   farve, som Trustpilot bruger, så man genkender dem. */
.citat__stjerner { display: inline-flex; gap: 4px; margin-bottom: 22px; color: #00b67a; }
.citat__stjerner .i { width: 24px; height: 24px; fill: currentColor; stroke-width: 1.2; }

.citat blockquote {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.citat figcaption { margin-top: 22px; font-size: 15px; color: var(--muted); }
.citat figcaption b { display: block; color: var(--ink); }
.citat__note { display: block; margin-top: 6px; font-size: 13px; color: var(--faint); }

/* Står på sin egen linje under navnet og titlen */
.citat__kilde {
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 18px auto 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: border-color 0.2s, color 0.2s;
}

.citat__kilde:hover { border-color: #00b67a; color: var(--ink); }
.citat__kilde .i { width: 15px; height: 15px; stroke-width: 2.2; }

/* ---------- Tilbage til oversigten ---------- */

.tilbage { margin-top: 30px; text-align: center; }

.tilbage a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  transition: color 0.2s;
}

.tilbage a:hover { color: var(--blue-dark); }
.tilbage .i { width: 16px; height: 16px; stroke-width: 2.4; transition: transform 0.3s var(--ease); }
.tilbage a:hover .i { transform: translateX(-3px); }

/* ==========================================================================
   Mock-up'er: det vi har bygget, tegnet i kode

   Farverne herunder er køreskolens egne (vejskilte-blå og signalrød), så
   mock-up'en ligner det rigtige produkt og ikke Adlures eget design.
   ========================================================================== */

/* Køreskolens egen palet. Den skal stå ét sted, så telefonen og
   browservinduet aldrig kan komme til at vise hver sine farver. */
.mock,
.phone--ck {
  --ck-blaa: #0d4ea3;
  --ck-roed: #d2232a;
  --ck-grund: #f8f9fb;
  --ck-flade: #ffffff;
  --ck-blaek: #151a22;
  --ck-graa: #59657a;
  --ck-linje: #d9dee7;
}

.mock {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--ck-flade);
  box-shadow: 0 18px 44px rgba(16, 24, 40, 0.16);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ck-linje);
  background: #eef1f4;
}

.mock__prik { width: 9px; height: 9px; border-radius: 50%; background: #d5dae0; }
.mock__prik:nth-child(1) { background: #ff7a72; }
.mock__prik:nth-child(2) { background: #ffc94d; }
.mock__prik:nth-child(3) { background: #4fd069; }

.mock__adr {
  flex: 1;
  min-width: 0;
  height: 19px;
  margin-left: 10px;
  padding: 0 11px;
  border-radius: 999px;
  background: #fff;
  font-size: 11px;
  line-height: 19px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mock__note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--faint); text-align: center; }

/* ---------- Hjemmesiden ---------- */

.ckweb { padding: 14px 16px 18px; background: var(--ck-grund); }

.ckweb__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ck-linje);
}

.ckmaerke {
  flex: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ck-blaa);
}

.ckmaerke b { color: var(--ck-roed); }

/* Menustregerne skrumper, når der er trangt. Ellers skubbede de
   "Tilmeld dig"-knappen ud over kanten på en telefon. */
.ckweb__nav { display: flex; flex: 1; min-width: 0; gap: 12px; }
.ckweb__nav i { flex: 1 1 auto; min-width: 0; max-width: 34px; height: 6px; border-radius: 3px; background: var(--ck-linje); }
.ckweb__nav i:first-child { background: var(--ck-blaa); }

.ckweb__knap {
  flex: none;
  padding: 5px 11px;
  border-radius: 6px;
  background: var(--ck-roed);
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
}

.ckweb__hero {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  padding: 20px 18px;
  border-radius: 10px;
  background: linear-gradient(120deg, #151a22 0%, #1d2a3d 58%, #0d4ea3 160%);
}

.ckweb__eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8fb6ea; }
.ckweb__h1 { font-size: clamp(15px, 2.4vw, 19px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.ckweb__cta { display: flex; gap: 8px; margin-top: 4px; }
.ckweb__cta i { height: 21px; border-radius: 5px; }
.ckweb__cta i:first-child { width: 74px; background: var(--ck-roed); }
.ckweb__cta i:last-child { width: 58px; background: rgba(255, 255, 255, 0.16); }

.ckweb__pakker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.ckweb__pakke {
  position: relative;
  padding: 13px 11px 12px;
  border: 1px solid var(--ck-linje);
  border-radius: 9px;
  background: var(--ck-flade);
  text-align: center;
}

.ckweb__pakke span { display: block; font-size: 10px; line-height: 1.3; color: var(--ck-graa); }
.ckweb__pakke b { display: block; margin-top: 6px; font-size: 15px; letter-spacing: -0.02em; color: var(--ck-blaek); }

.ckweb__pakke--valgt { border-color: var(--ck-roed); box-shadow: 0 6px 18px rgba(210, 35, 42, 0.14); }
.ckweb__pakke--valgt b { color: var(--ck-roed); }

.ckweb__maerke {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ck-roed);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.ckweb__nedt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }

.ckweb__nedt i {
  padding: 9px 4px 7px;
  border-radius: 8px;
  background: var(--ck-blaek);
  text-align: center;
  font-style: normal;
}

.ckweb__nedt b { display: block; font-size: 15px; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.ckweb__nedt em { display: block; margin-top: 3px; font-size: 8.5px; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; color: #8b96a8; }

/* ---------- Min side på elevens telefon ---------- */

.phone--ck { width: min(300px, 100%); padding: 9px; border-radius: 38px; }
.phone--ck .phone__skaerm { height: 520px; border-radius: 30px; background: var(--ck-grund); }

.ckms { display: flex; flex-direction: column; }

.ckms__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 26px 16px 12px;
  border-bottom: 1px solid var(--ck-linje);
  background: #fff;
}

.ckms__top .ckmaerke { font-size: 12px; }
.ckms__navn { font-size: 11px; font-weight: 700; color: var(--ck-graa); }
.ckms__krop { flex: 1; padding: 14px; overflow: hidden; }

.ckms__naeste {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(130deg, #151a22, #1d2a3d);
  color: #fff;
}

.ckms__label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8fb6ea; }
.ckms__naeste b { display: block; margin-top: 6px; font-size: 14px; letter-spacing: -0.01em; }
.ckms__sted { display: block; margin-top: 3px; font-size: 11px; color: rgba(255, 255, 255, 0.68); }
.ckms__knapper { display: flex; gap: 7px; margin-top: 12px; }
.ckms__knapper i { height: 24px; border-radius: 6px; }
.ckms__knapper i:first-child { flex: 1; background: var(--ck-roed); }
.ckms__knapper i:last-child { width: 62px; background: rgba(255, 255, 255, 0.16); }

.ckms__h { display: block; margin: 16px 0 8px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

.ckms__liste { display: grid; gap: 7px; }

.ckms__liste li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--ck-linje);
  border-radius: 9px;
  background: #fff;
}

.ckms__prik { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ck-blaa); }
.ckms__prik--bane { background: #e0a020; }
.ckms__prik--proeve { background: var(--ck-roed); }
.ckms__liste b { flex: 1; font-size: 11.5px; color: var(--ck-blaek); }
.ckms__liste em { font-size: 10.5px; font-style: normal; color: var(--ck-graa); }

.ckms__tjek { display: grid; gap: 6px; }

.ckms__tjek li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--ck-graa);
}

/* Fluebenet er tegnet med en drejet kant — et data-billede ville blive
   afvist af Content-Security-Policy'en (img-src 'self'). */
.ckms__tjek i {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  border: 1.5px solid var(--ck-linje);
  border-radius: 4px;
  background: #fff;
}

.ckms__tjek .er-ok { color: var(--ck-blaek); }
.ckms__tjek .er-ok i { border-color: var(--ck-blaa); background: var(--ck-blaa); }

.ckms__tjek .er-ok i::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 4px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ---------- Admin-panelet ---------- */

.ckadm { display: grid; grid-template-columns: 96px minmax(0, 1fr); background: var(--ck-grund); }

.ckadm__side {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 14px 10px;
  background: var(--ck-blaek);
}

.ckadm__side .ckmaerke { margin-bottom: 6px; font-size: 11px; color: #fff; }
.ckadm__side i { height: 9px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.ckadm__side .er-valgt { background: var(--ck-blaa); }

.ckadm__ind { padding: 14px 16px 18px; }
.ckadm__h { display: block; font-size: 13px; font-weight: 700; letter-spacing: -0.01em; color: var(--ck-blaek); }
.ckadm__tal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 11px 0 12px; }

.ckadm__tal span {
  padding: 10px 9px 9px;
  border: 1px solid var(--ck-linje);
  border-radius: 8px;
  background: #fff;
  font-size: 9px;
  line-height: 1.3;
  color: var(--ck-graa);
}

.ckadm__tal b { display: block; margin-bottom: 3px; font-size: 16px; letter-spacing: -0.02em; color: var(--ck-blaa); }

.ckadm__graf {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 78px;
  padding: 11px;
  border: 1px solid var(--ck-linje);
  border-radius: 9px;
  background: #fff;
}

.ckadm__graf i { flex: 1; border-radius: 3px 3px 0 0; background: var(--ck-blaa); opacity: 0.85; }
.ckadm__graf i:nth-child(1) { height: 32%; }
.ckadm__graf i:nth-child(2) { height: 48%; }
.ckadm__graf i:nth-child(3) { height: 40%; }
.ckadm__graf i:nth-child(4) { height: 62%; }
.ckadm__graf i:nth-child(5) { height: 55%; }
.ckadm__graf i:nth-child(6) { height: 74%; }
.ckadm__graf i:nth-child(7) { height: 66%; }
.ckadm__graf i:nth-child(8) { height: 88%; }
.ckadm__graf i:nth-child(9) { height: 71%; }
.ckadm__graf i:nth-child(10) { height: 96%; }
.ckadm__graf i:nth-child(11) { height: 80%; background: var(--ck-roed); opacity: 1; }
.ckadm__graf i:nth-child(12) { height: 44%; background: var(--ck-linje); }

.ckadm__raekker { display: grid; gap: 6px; margin-top: 10px; }

.ckadm__raekker span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--ck-linje);
  border-radius: 8px;
  background: #fff;
  font-size: 9.5px;
  color: var(--ck-graa);
}

.ckadm__raekker i { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ck-blaa); opacity: 0.16; }
.ckadm__raekker b { flex: 1; font-size: 10.5px; color: var(--ck-blaek); }

.ckadm__maerke { padding: 2px 7px; font-style: normal; border-radius: 999px; background: rgba(13, 78, 163, 0.1); font-size: 8.5px; font-weight: 700; color: var(--ck-blaa); }
.ckadm__maerke--vent { background: rgba(210, 35, 42, 0.1); color: var(--ck-roed); }

/* ---------- Mock-up'en i et fane-panel ---------- */

.panel__media--mock {
  display: grid;
  aspect-ratio: auto;
  place-items: center;
  padding: clamp(20px, 3vw, 38px);
  background: radial-gradient(circle at 30% 15%, rgba(46, 179, 239, 0.34), transparent 62%), linear-gradient(140deg, #0d1319, #1b2836);
}

/* Søjlerne vokser op, når diagrammet kommer i syne */
.js .ckadm__graf i { transform-origin: bottom; animation: sojle 0.7s var(--ease) both; }
.js .ckadm__graf i:nth-child(2) { animation-delay: 0.05s; }
.js .ckadm__graf i:nth-child(3) { animation-delay: 0.1s; }
.js .ckadm__graf i:nth-child(4) { animation-delay: 0.15s; }
.js .ckadm__graf i:nth-child(5) { animation-delay: 0.2s; }
.js .ckadm__graf i:nth-child(6) { animation-delay: 0.25s; }
.js .ckadm__graf i:nth-child(7) { animation-delay: 0.3s; }
.js .ckadm__graf i:nth-child(8) { animation-delay: 0.35s; }
.js .ckadm__graf i:nth-child(9) { animation-delay: 0.4s; }
.js .ckadm__graf i:nth-child(10) { animation-delay: 0.45s; }
.js .ckadm__graf i:nth-child(11) { animation-delay: 0.5s; }
.js .ckadm__graf i:nth-child(12) { animation-delay: 0.55s; }

@keyframes sojle { from { transform: scaleY(0); } }

/* Står mock-up'en i en sektion, venter animationen til den er i syne */
.js .reveal:not(.is-in) .ckadm__graf i { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .js .ckadm__graf i { animation: none; }
}

/* ==========================================================================
   Adlure Analytics — demoen af kundedashboardet

   En tegning af den rigtige app i dens eget glas-look: bløde farveskyer bag
   frostede kort, appens egne farver og dens egen systemskrift, så det tydeligt
   ligner produktet og ikke resten af hjemmesiden.

   Alt er HTML og SVG. Søjler, ringe og målere er SVG-attributter (width,
   stroke-dasharray), så intet kræver inline-styles, og Content-Security-
   Policy'en kan blive, som den er. Tallene er opdigtede og står skrevet i
   markup'en — JavaScript skifter kun mellem dem.
   ========================================================================== */

.phero--analytics .phero__bg { background-image: url("../img/hero-roi.jpg"); background-position: 30% center; }

.ana {
  --a-blaa: #3498db;
  --a-groen: #3ad790;
  --a-roed: #f44c80;
  --a-himmel: #7fc4ea;
  --a-blaek: #212832;
  --a-blaek2: #5a6675;
  --a-blaek3: #7a8594;
  --a-linje: rgba(23, 34, 48, 0.08);
  --a-glas: rgba(255, 255, 255, 0.62);
  --a-kant: rgba(255, 255, 255, 0.8);
  --a-hoejlys: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --a-skygge: 0 1px 1px rgba(23, 34, 48, 0.03), 0 18px 40px -26px rgba(33, 60, 110, 0.32);
  --a-ease: cubic-bezier(0.22, 0.9, 0.28, 1);

  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--a-blaek);
  letter-spacing: -0.005em;
}

.ana__ramme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(14px, 2.2vw, 26px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 30px;
  /* Appens lærred: blå, grøn og pink skyer bag glasset */
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(52, 152, 219, 0.34), transparent 60%),
    radial-gradient(50% 55% at 100% 10%, rgba(58, 215, 144, 0.26), transparent 60%),
    radial-gradient(55% 60% at 85% 100%, rgba(244, 76, 128, 0.22), transparent 62%),
    radial-gradient(45% 50% at 10% 95%, rgba(90, 200, 250, 0.26), transparent 60%),
    linear-gradient(160deg, #f2f6fc 0%, #e7eef8 100%);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.05), 0 40px 90px -30px rgba(33, 60, 110, 0.35);
}

/* ---------- Toppen: mærke, menu og kunde ---------- */

.ana__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.ana__maerke { display: flex; align-items: center; gap: 10px; min-width: 0; }

.ana__logo {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(150deg, #45a6e6, #2b83bf);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 18px -8px rgba(52, 152, 219, 0.8);
}

.ana__logo img { width: 26px; height: auto; }
.ana__maerke-tekst { display: flex; flex-direction: column; line-height: 1.1; }
.ana__maerke-tekst strong { font-size: 14.5px; }
.ana__maerke-tekst small { font-size: 11.5px; color: var(--a-blaek3); }

.ana__menu {
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  border: 1px solid var(--a-kant);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--a-hoejlys), var(--a-skygge);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  scrollbar-width: none;
}

.ana__menu::-webkit-scrollbar { display: none; }

.ana__fane {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--a-blaek2);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.ana__fane .i { width: 16px; height: 16px; }
.ana__fane:hover { color: var(--a-blaek); }

.ana__fane[aria-selected="true"] {
  background: #fff;
  color: var(--a-blaa);
  box-shadow: 0 1px 2px rgba(23, 34, 48, 0.06), 0 6px 16px -8px rgba(33, 60, 110, 0.35);
}

.ana__kunde {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 9px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--a-kant);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
  font-size: 13px;
  font-weight: 600;
}

.ana__avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(52, 152, 219, 0.12);
  font-size: 11px;
  font-weight: 700;
  color: var(--a-blaa);
}

/* ---------- Periodevælgeren ---------- */

.ana__periode { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ana__periode[hidden] { display: none; }

.ana__periode-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--a-blaek3);
}

.ana__periode button {
  height: 34px;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--a-blaek2);
  background: rgba(52, 152, 219, 0.1);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}

.ana__periode button:hover { color: var(--a-blaek); }

.ana__periode button[aria-pressed="true"] {
  background: #fff;
  color: var(--a-blaek);
  box-shadow: 0 1px 2px rgba(23, 34, 48, 0.08), 0 6px 14px -8px rgba(33, 60, 110, 0.4);
}

/* ---------- Kortene ---------- */

.ana__panel.is-entering { animation: anaInd 0.45s var(--a-ease); }

/* På computer har alle fire sider samme højde som Overblik, så resten af
   siden ikke hopper op og ned, når man skifter fane. */
@media (min-width: 960px) {
  .ana__panel { min-height: 552px; }
}
@keyframes anaInd { from { opacity: 0; transform: translateY(8px); } }

.ana__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.ana__k12 { grid-column: span 12; }
.ana__k8 { grid-column: span 8; }
.ana__k7 { grid-column: span 7; }
.ana__k5 { grid-column: span 5; }
.ana__k4 { grid-column: span 4; }

.ana__kort {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--a-kant);
  border-radius: 22px;
  background: var(--a-glas);
  box-shadow: var(--a-hoejlys), var(--a-skygge);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
}

.ana__kort-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ana__kort-top .ana__pill { margin-left: auto; }

.ana__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: linear-gradient(150deg, #45a6e6, #2b83bf);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.ana__ikon .i { width: 15px; height: 15px; stroke-width: 2.2; }
.ana__korttitel { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.ana__indsigt {
  margin-top: 14px;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(23, 34, 48, 0.04);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--a-blaek2);
}

.ana__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(58, 215, 144, 0.34);
  border-radius: 999px;
  background: rgba(58, 215, 144, 0.14);
  font-size: 12px;
  font-weight: 600;
  color: #167c51;
  white-space: nowrap;
}

.ana__pill .i { width: 13px; height: 13px; stroke-width: 2.6; }
.ana__pill--lille { padding: 3px 10px; font-size: 11.5px; }

/* ---------- Konklusionen ---------- */

.ana__resume {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 16px;
  border-color: rgba(52, 152, 219, 0.28);
}

.ana__resume-ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(150deg, #45a6e6, #2b83bf);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px rgba(52, 152, 219, 0.9);
  transition: background 0.4s;
}

.ana__resume-ikon .i { width: 22px; height: 22px; }
.ana__resume[data-tilstand="ned"] .ana__resume-ikon { background: linear-gradient(150deg, #f77fa3, #e04b77); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px rgba(244, 76, 128, 0.9); }

.ana__resume-titel { margin: 0 0 6px; font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 700; letter-spacing: -0.02em; }
.ana__saetning { max-width: 46em; margin-bottom: 14px; font-size: 14px; line-height: 1.55; color: var(--a-blaek2); }
.ana__saetning b { color: var(--a-blaek); }

.ana__tal { display: flex; flex-wrap: wrap; gap: 8px 34px; }
.ana__tal > span { display: flex; flex-direction: column; }
.ana__tal b { font-size: clamp(1.25rem, 2.3vw, 1.6rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ana__tal small { font-size: 12.5px; color: var(--a-blaek3); }
.ana__pil { color: #167c51; }
.ana__resume[data-tilstand="ned"] .ana__pil { color: #d23a67; }

/* ---------- Grafen ---------- */

.ana__graf {
  display: block;
  width: 100%;
  height: clamp(150px, 20vw, 200px);
  overflow: visible;
  transition: clip-path 1.2s var(--a-ease) 0.2s;
}

.js .ana.reveal:not(.is-in) .ana__graf { clip-path: inset(0 100% 0 0); }
.ana__graf.is-tegner { animation: anaTegn 0.9s var(--a-ease); }
@keyframes anaTegn { from { clip-path: inset(0 100% 0 0); } }

.ana__stop1 { stop-color: rgba(52, 152, 219, 0.3); }
.ana__stop2 { stop-color: rgba(52, 152, 219, 0); }
.ana__gitter line { stroke: rgba(23, 34, 48, 0.07); stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.ana__linje { fill: none; stroke: var(--a-blaa); stroke-width: 2.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ana__foer { fill: none; stroke: #9aa7b6; stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }

.ana__akse { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--a-blaek3); }

.ana__forklaring { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: 12px; color: var(--a-blaek2); }
.ana__forklaring span { display: inline-flex; align-items: center; gap: 7px; }
.ana__streg { width: 16px; height: 0; border-top: 2.4px solid var(--a-blaa); border-radius: 2px; }
.ana__streg--foer { border-top: 1.6px dashed #9aa7b6; }

/* ---------- Ringe: kilder og enheder ---------- */

.ana__donut { position: relative; width: min(150px, 60%); margin: 4px auto 16px; }
.ana__donut-svg { display: block; width: 100%; height: auto; }
.ana__ring { fill: none; stroke: rgba(23, 34, 48, 0.06); stroke-width: 5; }
.ana__seg { fill: none; stroke-width: 5; transition: stroke-dasharray 0.8s var(--a-ease); }
.ana__seg--1 { stroke: var(--a-blaa); }
.ana__seg--2 { stroke: var(--a-groen); }
.ana__seg--3 { stroke: var(--a-roed); }
.ana__seg--4 { stroke: var(--a-himmel); }

.ana__donut-midte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

.ana__donut-midte b { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ana__donut-midte span { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--a-blaek3); }

.ana__liste { display: grid; gap: 8px; }

.ana__liste li {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  font-size: 13px;
}

.ana__liste .ana__navn { overflow: hidden; color: var(--a-blaek2); text-overflow: ellipsis; white-space: nowrap; }
.ana__liste b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ana__liste small { min-width: 32px; font-size: 12px; color: var(--a-blaek3); text-align: right; }
.ana__prik { width: 9px; height: 9px; border-radius: 3px; }
.ana__prik--1 { background: var(--a-blaa); }
.ana__prik--2 { background: var(--a-groen); }
.ana__prik--3 { background: var(--a-roed); }
.ana__prik--4 { background: var(--a-himmel); }

/* ---------- Søjler ---------- */

.ana__bar { display: block; width: 100%; height: 7px; overflow: visible; }
.ana__spor { fill: rgba(23, 34, 48, 0.07); }
.ana__fyld { fill: var(--a-blaa); transform-box: fill-box; transform-origin: left center; transition: transform 1s var(--a-ease) 0.25s; }
.ana__bar--groen .ana__fyld { fill: var(--a-groen); }
.js .ana.reveal:not(.is-in) .ana__fyld { transform: scaleX(0); }
.ana__panel.is-entering .ana__fyld { animation: anaVokse 0.8s var(--a-ease) 0.1s backwards; }
@keyframes anaVokse { from { transform: scaleX(0); } }

.ana__rang { display: grid; gap: 13px; }

.ana__rang li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  font-size: 13.5px;
}

.ana__rang .ana__navn { color: var(--a-blaek2); }
.ana__rang b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ana__rang .ana__bar { grid-column: 1 / -1; }

/* ---------- Kloden ---------- */

.ana__lande-krop { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: center; }
.ana__globus { display: block; width: 100%; max-width: 220px; margin-inline: auto; overflow: visible; }
.ana__kugle1 { stop-color: #cfeafc; }
.ana__kugle2 { stop-color: #62ade6; }
.ana__kugle3 { stop-color: #2a6eae; }
.ana__gitterprik { fill: rgba(255, 255, 255, 0.34); }
.ana__prikfelt { animation: anaDrej 6s linear infinite; }
@keyframes anaDrej { to { transform: translateX(7px); } }
.ana__meridian ellipse, .ana__meridian line { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 0.8; }
.ana__buer path { fill: none; stroke: var(--a-roed); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 4; opacity: 0.85; animation: anaBue 1.6s linear infinite; }
@keyframes anaBue { to { stroke-dashoffset: -16; } }
.ana__lande circle { fill: var(--a-groen); stroke: #fff; stroke-width: 1.6; animation: anaPuls 2.4s ease-in-out infinite; }
.ana__lande circle:nth-child(2) { animation-delay: 0.4s; }
.ana__lande circle:nth-child(3) { animation-delay: 0.8s; }
.ana__lande circle:nth-child(4) { animation-delay: 1.2s; }
.ana__lande .ana__server { fill: var(--a-roed); animation: none; }
@keyframes anaPuls { 50% { opacity: 0.55; } }

/* ---------- Hastighed ---------- */

.ana__maalere { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: center; }
.ana__maaler { display: flex; flex-direction: column; align-items: center; }
.ana__maaler svg { display: block; width: 100%; max-width: 128px; height: auto; }
.ana__maaler-spor { fill: none; stroke: rgba(23, 34, 48, 0.08); stroke-width: 9; stroke-linecap: round; }
.ana__maaler-fyld { fill: none; stroke: var(--a-groen); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray 0.8s var(--a-ease); }
.ana__maaler:first-child .ana__maaler-fyld { stroke: var(--a-blaa); }
.ana__maaler-tal { margin-top: -26px; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ana__maaler-tal small { margin-left: 1px; font-size: 11px; font-weight: 500; color: var(--a-blaek3); }
.ana__maaler-navn { margin-top: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.ana__maaler-sub { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: var(--a-blaek3); }

/* ---------- Sider ---------- */

.ana__sider { display: grid; gap: 4px; }

.ana__sider li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1.1fr) minmax(0, 1.4fr) 76px;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border-radius: 12px;
}

.ana__sider li:first-child { background: rgba(52, 152, 219, 0.07); }
.ana__nr { font-size: 12.5px; font-weight: 600; color: var(--a-blaek3); text-align: center; }
.ana__sider li:first-child .ana__nr { color: var(--a-blaa); }
.ana__side { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ana__side .ana__navn { font-size: 14px; font-weight: 600; }
.ana__sti { overflow: hidden; font-size: 12px; color: var(--a-blaek3); text-overflow: ellipsis; white-space: nowrap; }
.ana__side-tal { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.ana__side-tal b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ana__side-tal small { font-size: 11.5px; color: var(--a-blaek3); }

/* ---------- Under demoen ---------- */

.ana__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--faint);
  text-align: center;
}

.ana__note .i { flex: none; width: 16px; height: 16px; }

/* ---------- Forhåndsvisningen i hero og teasere ---------- */

.ana--mini .ana__ramme { display: grid; gap: 12px; padding: clamp(14px, 2vw, 20px); }
.ana--mini .ana__resume { grid-template-columns: auto minmax(0, 1fr); }
.ana--mini .ana__tal { gap: 6px 24px; }
.ana--mini .ana__graf { height: 120px; clip-path: none; }
.phero .ana--mini { transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }

/* Teaser på ydelsessiderne: forhåndsvisningen står frit i stedet for i en billedramme */
.split__media--ana { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }

/* ---------- "Bed os om noget" ---------- */

.ana--henv .ana__ramme { display: grid; gap: 12px; }

.ana__felt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--a-linje);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 13.5px;
  line-height: 1.45;
}

.ana__felt small { font-size: 11.5px; font-weight: 600; color: var(--a-blaek3); }

.ana__filer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }

.ana__fil {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(52, 152, 219, 0.1);
  font-size: 12.5px;
  font-weight: 600;
  color: #2b83bf;
}

.ana__fil .i { width: 14px; height: 14px; }

.ana__knap {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  background: linear-gradient(150deg, #45a6e6, #2b83bf);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}

.ana__henv { display: grid; gap: 8px; }

.ana__henv li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 12px;
  border: 1px solid var(--a-linje);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
}

.ana__henv li > span { display: flex; flex-direction: column; min-width: 0; }
.ana__henv b { font-size: 13.5px; font-weight: 600; }
.ana__henv li > span small { font-size: 11.5px; color: var(--a-blaek3); }

.ana__status { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.ana__status--modtaget { background: rgba(23, 34, 48, 0.06); color: var(--a-blaek2); }
.ana__status--gang { background: rgba(52, 152, 219, 0.12); color: #2b83bf; }
.ana__status--klaret { background: rgba(58, 215, 144, 0.16); color: #167c51; }

.ana__svar {
  grid-column: 1 / -1;
  padding: 9px 11px;
  border-left: 3px solid var(--a-groen);
  border-radius: 8px;
  background: rgba(58, 215, 144, 0.08);
  font-size: 13px;
  line-height: 1.45;
  color: var(--a-blaek2);
}

.ana__svar small { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: #167c51; }

/* Uden sløring (eller hvis den er slået fra) bliver glasset næsten massivt,
   så teksten altid kan læses */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ana__kort, .ana__menu { background: rgba(255, 255, 255, 0.92); }
}

@media (prefers-reduced-transparency: reduce) {
  .ana__kort, .ana__menu { background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ana__prikfelt, .ana__buer path, .ana__lande circle { animation: none; }
  .js .ana.reveal:not(.is-in) .ana__graf { clip-path: none; }
  .js .ana.reveal:not(.is-in) .ana__fyld { transform: none; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ftr {
  padding-top: clamp(64px, 8vw, 96px);
  background: var(--footer);
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
}

.ftr__grid { display: grid; grid-template-columns: 1.3fr 1.15fr 0.9fr 0.8fr 1.15fr; gap: 40px; }

.ftr__logo { display: inline-block; margin: -14px 0 10px -18px; }
.ftr__logo img { width: auto; height: 96px; }

.ftr__mail {
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  margin-bottom: 22px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.ftr__mail .i { width: 18px; height: 18px; color: var(--blue-light); }

.ftr__h {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

/* Fold-knapperne bruges kun på mobil (se Responsivt) */
.ftr__fold { display: none; }
@keyframes ftrAaben { from { opacity: 0; transform: translateY(-6px); } }

.ftr ul li + li { margin-top: 11px; }
.ftr ul a { transition: color 0.2s; }
.ftr a:not(.btn):hover { color: #fff; }

.hours li { display: flex; justify-content: space-between; gap: 16px; font-variant-numeric: tabular-nums; }
.hours li.is-today { color: #fff; font-weight: 700; }

.ftr__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 5px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.8);
}

.ftr__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.ftr__status.is-open i { background: #3ad07a; box-shadow: 0 0 0 3px rgba(58, 208, 122, 0.2); }

.ftr__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
}

/* ==========================================================================
   Animationer
   ========================================================================== */

.reveal { transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(20px); }
.reveal.uden-overgang { transition: none; }

.d1 { --d: 0.06s; }
.d2 { --d: 0.12s; }
.d3 { --d: 0.18s; }
.d4 { --d: 0.24s; }
.d5 { --d: 0.3s; }

/* Hero'en er det første man ser: den fader ind ved indlæsning uden at vente
   på JavaScript */
.hero .reveal,
.phero .reveal,
.js .hero .reveal:not(.is-in),
.js .phero .reveal:not(.is-in) {
  opacity: 1;
  transform: none;
  transition: none;
  animation: heroIn 0.9s var(--ease) var(--d, 0s) backwards;
}

@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } }

/* Kort med både reveal og hover-løft — hover skal ikke vente */
.step.reveal.is-in, .fcard.reveal.is-in, .casekort.reveal.is-in, .vaelger__kort.is-in { transition-delay: 0s; }

/* Billede og tekst glider ind fra hver sin side */
.js .sec .split__media.reveal:not(.is-in),
.js .sec .intro__head.reveal:not(.is-in),
.js .sec .vs__copy.reveal:not(.is-in),
.js .sec .calc__copy.reveal:not(.is-in),
.js .sec .udkast__side.reveal:not(.is-in) { transform: translateX(-36px); }

.js .sec .split--omvendt .split__media.reveal:not(.is-in),
.js .sec .split__body.reveal:not(.is-in),
.js .sec .cmp.reveal:not(.is-in),
.js .sec .udkastcta .reveal:not(.is-in) { transform: translateX(36px); }

/* Kort og paneler vokser en anelse op */
.js .sec .panel.reveal:not(.is-in),
.js .sec .bf.reveal:not(.is-in),
.js .sec .udkastcta.reveal:not(.is-in),
.js .sec .udkast__kort.reveal:not(.is-in),
.js .sec .pricebar.reveal:not(.is-in) { transform: translateY(28px) scale(0.97); }

/* Billeder zoomer roligt på plads */
.split__media img,
.panel__media img { transition: transform 1.6s var(--ease); }

.js .sec .split__media.reveal:not(.is-in) img,
.js .sec .panel.reveal:not(.is-in) .panel__media img { transform: scale(1.14); }

/* Stregen foran de små overskrifter tegnes ind */
.eyebrow::before { transform-origin: left; transition: transform 0.8s var(--ease) 0.3s; }
.js .sec .reveal:not(.is-in) .eyebrow::before,
.js .sec .reveal.eyebrow:not(.is-in)::before { transform: scaleX(0); }

/* Punktlister kommer ind én linje ad gangen */
.js .sec .reveal .checks li { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .sec .reveal:not(.is-in) .checks li { opacity: 0; transform: translateX(-12px); }
.js .sec .reveal.is-in .checks li:nth-child(1) { transition-delay: 0.15s; }
.js .sec .reveal.is-in .checks li:nth-child(2) { transition-delay: 0.22s; }
.js .sec .reveal.is-in .checks li:nth-child(3) { transition-delay: 0.29s; }
.js .sec .reveal.is-in .checks li:nth-child(4) { transition-delay: 0.36s; }
.js .sec .reveal.is-in .checks li:nth-child(5) { transition-delay: 0.43s; }
.js .sec .reveal.is-in .checks li:nth-child(6) { transition-delay: 0.5s; }

/* Pakkernes pris "lander" efter kortet */
.js .sec .pakke.reveal .pakke__pris strong { display: inline-block; transition: opacity 0.6s var(--ease) 0.25s, transform 0.6s var(--ease) 0.25s; }
.js .sec .pakke.reveal:not(.is-in) .pakke__pris strong { opacity: 0; transform: translateY(10px); }

/* Tællende tal hopper ikke i bredden */
.stats dd { font-variant-numeric: tabular-nums; }

/* Rul-styret dybde, hvor browseren understøtter det. Ellers står alt stille. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__bg,
    .phero__bg {
      animation: heroDybde linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }

    .split__media img,
    .panel__media img {
      animation: billedDybde linear both;
      animation-timeline: view();
    }

    .casekort__visual .i {
      animation: ikonSvaev linear both;
      animation-timeline: view();
    }
  }
}

/* Skaleringen er altid større end forskydningen, så der aldrig kommer en kant til syne */
@keyframes heroDybde { to { translate: 0 6%; scale: 1.14; } }
@keyframes billedDybde { from { translate: 0 -3%; scale: 1.08; } to { translate: 0 3%; scale: 1.08; } }
@keyframes ikonSvaev { from { translate: 0 14px; } to { translate: 0 -14px; } }

/* ==========================================================================
   Responsivt
   ========================================================================== */

/* Under 1340 px er der ikke plads til, at menuen kan stå præcis i midten med
   begge knapper. Så viker designudkast-knappen — den findes i mobilmenuen. */
@media (max-width: 1339px) {
  .hdr__udkast { display: none; }
}

@media (max-width: 1180px) {
  .ftr__grid { grid-template-columns: repeat(4, 1fr); }
  .ftr__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
  .ftr__logo { margin: -14px 0 -14px -18px; }
  .ftr__mail { margin: 0; }
  .ppoints:not(.ppoints--stak) { grid-template-columns: minmax(0, 1fr); }
  .ppoints:not(.ppoints--stak) .ppoint { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
}

@media (max-width: 1023px) {
  .hdr__nav, .hdr__end > .lang { display: none; }
  .hdr__burger { display: flex; }

  /* Uden menulinjen er der kun to ting tilbage i tre-spaltede gitter, og så
     faldt knapperne ned i den MIDTERSTE spalte — burgeren endte midt i
     headeren med logoet ude i venstre side. Nu peges de to på hver sin
     spalte: logoet i midten, knapperne yderst til højre. */
  .hdr__logo { grid-column: 2; justify-self: center; }
  .hdr__end { grid-column: 3; }

  .steps, .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lyd { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .cmeta, .stats--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 959px) {
  .hero__grid, .phero__grid, .vs, .calc, .panel, .intro, .split, .chatdemo { grid-template-columns: minmax(0, 1fr); }
  .hero__copy { max-width: 640px; }
  .flow { max-width: 560px; }

  .pcard--skjul-mobil { display: none; }
  .intro__head { position: static; }
  .split--omvendt .split__media { order: 0; }
  .split__media:not(.split__media--ana) { aspect-ratio: 4 / 3; }

  .panel { padding: 12px; }
  /* Et billede beskæres gerne til 4:3 — men en mock-up er tegnet i kode og
     har sin egen højde. Tvang man den ind i 4:3, blev bunden klippet af. */
  .panel__media:not(.panel__media--mock) { aspect-ratio: 4 / 3; }
  .panel__body { padding: 10px 14px 18px; }

  .sec__head--split { flex-direction: column; align-items: flex-start; gap: 18px; }
  .calc__card { min-height: 0; }
  .phero .calc__card { min-height: 0; }

  .info, .pakker, .cards--3 { grid-template-columns: minmax(0, 1fr); }
  .pakker { max-width: 520px; margin-inline: auto; gap: 26px; }
  .ctabox { flex-direction: column; align-items: flex-start; }

  .vaelger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vaelger__kort:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .udkast { grid-template-columns: minmax(0, 1fr); }
  .udkast__side { position: static; }
  .udkast__trin, .udkast__tryg { display: none; }
  .udkastcta { grid-template-columns: minmax(0, 1fr); }
  .udkastcta .webmock { max-width: 480px; transform: none; }

  /* Analytics-demoen: kortene under hinanden, menuen på sin egen linje */
  .ana__k8, .ana__k7, .ana__k5, .ana__k4 { grid-column: span 12; }
  .ana__top { grid-template-columns: minmax(0, 1fr) auto; }
  .ana__menu { grid-column: 1 / -1; grid-row: 2; justify-self: start; max-width: 100%; }
  .phero .ana--mini { max-width: 520px; transform: none; }
}

@media (max-width: 767px) {
  .hero__bg, .phero--om .phero__bg { background-image: url("../img/hero-bg-mobile.jpg"); }

  .logos__in { flex-direction: column; align-items: stretch; gap: 18px; }
  .logos__label { text-align: center; }
  .marquee__group { gap: 56px; padding-right: 56px; }

  .sec__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .sec__head--midt { align-items: center; }

  .tabs {
    width: auto;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .tab { border: 1px solid var(--line); background: #fff; }
  .tabs.has-ind .tab[aria-selected="true"] { border-color: transparent; }

  .cmp { padding: 6px; }
  .cmp th, .cmp td { padding: 14px 10px; }
  .cmp tbody th { padding-left: 12px; font-size: 14.5px; }
  .cmp thead .cmp__ai img { display: none; }

  .pricebar { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; }

  /* Kortrækkerne swipes i stedet for at stå under hinanden. Fire trin eller
     seks kort oven på hinanden gør en side meget lang på en telefon — her
     fylder de én kort-højde, og man trækker til siden i stedet.
     Kortene er bevidst smallere end skærmen, så kanten af det næste er synlig
     og man kan se, at der er mere. */
  .steps,
  .cards {
    grid-auto-flow: column;
    grid-auto-columns: min(78%, 300px);
    grid-template-columns: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 6px 10px;
    /* Kun vandret. Står overflow-x alene, gør browseren automatisk også
       boksen lodret scrollbar — og så "fangede" karrusellen fingeren, når
       man scrollede ned forbi den, og kørte kortene op i stedet for siden. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .steps::-webkit-scrollbar,
  .cards::-webkit-scrollbar { display: none; }

  .steps > li,
  .cards > li { scroll-snap-align: start; }

  /* Kortene i en karrusel toner bare frem. Normalt glider de 20 px op, men
     de kort, der endnu ligger skjult ude til højre, stod så 20 px for lavt
     og stak ud under boksen. */
  .js .steps > .reveal:not(.is-in),
  .js .cards > .reveal:not(.is-in) { transform: none; }

  .skift__label { display: none; }
  .skift__valg { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  /* Footeren på mobil: kompakt top og sammenfoldelige grupper */
  .ftr { padding-top: 44px; }
  .ftr__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ftr__brand { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 16px; padding-bottom: 26px; }
  .ftr__logo { margin: -12px 0 -12px -14px; }
  .ftr__logo img { height: 68px; }
  .ftr__mail { grid-column: 1 / -1; grid-row: 2; font-size: 16px; }

  .ftr__gruppe.is-foldbar { border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .is-foldbar .ftr__h { margin: 0; }
  .is-foldbar .ftr__h-tekst { display: none; }

  .is-foldbar .ftr__fold {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 58px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
  }

  .ftr__fold .i { width: 18px; height: 18px; transition: transform 0.3s var(--ease); }
  .ftr__fold[aria-expanded="true"] .i { transform: rotate(180deg); }
  .is-foldbar ul { padding-bottom: 22px; animation: ftrAaben 0.35s var(--ease); }
  .is-foldbar.is-lukket ul { display: none; }
  .is-foldbar .ftr__status { margin: -6px 0 16px; }

  .ftr__bottom { flex-direction: column; gap: 6px; margin-top: 0; }
}

@media (max-width: 599px) {
  :root { --hdr-h: 68px; }
  .hdr__logo img { height: 46px; }
  .hdr__cta { display: none; }

  .hero__cta, .phero__cta { flex-direction: column; }
  .hero__cta .btn, .phero__cta .btn { width: 100%; }
  .flow__desc { font-size: 13.5px; }
  .flow__link { gap: 14px; padding: 12px; }
  .flow__list::before { left: 33px; }

  .stats { gap: 12px; }
  .form__grid { grid-template-columns: minmax(0, 1fr); }

  .vaelger { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .folk,
  .checks--to { grid-template-columns: minmax(0, 1fr); }
  .vaelger__kort { flex-direction: row; align-items: center; gap: 16px; padding: 16px 18px; }
  .vaelger__ico { width: 46px; height: 46px; margin: 0; }
  .vaelger__navn { margin-bottom: 2px; font-size: 1.1rem; }
  .vaelger__tekst { margin: 0; font-size: 14px; }
  .vaelger__go { font-size: 0; }
  .valg, .stilvalg { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .valg:not(.valg--chips) { grid-template-columns: minmax(0, 1fr); }
  .udkast__nav .btn--tilbage { padding-inline: 14px; }
  .udkast__nav .btn--tilbage span { display: none; }

  .mnav__foot { flex-direction: column-reverse; align-items: stretch; }
  .mnav__foot .lang { align-self: center; }
  .phone__skaerm { height: 500px; }

  .cmeta { grid-template-columns: minmax(0, 1fr); }

  .ana__ramme { padding: 12px; border-radius: 22px; }
  .ana__kort { padding: 16px; border-radius: 18px; }
  /* Som appens bundlinje på telefonen: fire lige store knapper med ikonet
     over teksten, så alle fire kan ses uden at scrolle */
  .ana__menu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; border-radius: 20px; }
  .ana__fane { flex-direction: column; justify-content: center; gap: 3px; height: auto; padding: 8px 2px; border-radius: 15px; font-size: 11.5px; }
  .ana__fane .i { width: 18px; height: 18px; }
  .ana__periode-label { display: none; }
  .ana__periode button { flex: 1; padding: 0 6px; white-space: nowrap; }
  .ana__resume-ikon { width: 40px; height: 40px; border-radius: 12px; }
  .ana__kunde-navn { display: none; }
  .ana__kunde { padding-right: 5px; }
  .ana__resume { grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
  .ana__resume > .ana__pill { grid-column: 1 / -1; justify-self: start; }
  .ana__tal { gap: 8px 22px; }
  .ana__lande-krop { grid-template-columns: minmax(0, 1fr); }
  .ana__globus { max-width: 170px; }
  .ana__maaler-tal { margin-top: -21px; font-size: 1rem; }
  .ana__sider li { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 6px 10px; }
  .ana__sider .ana__bar { grid-column: 2 / -1; grid-row: 2; }
  .ckadm { grid-template-columns: 56px minmax(0, 1fr); }
  .ckadm__tal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  .marquee__track { animation: none; }
}