/* ═══════════════════════════════════════════════════════════════
   GoRental360 — Site Styles
   Matchende dashboard-systemets design-DNA: navy + grøn + cremegrå
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Sidebar / mørke områder (præcis som dashboardet) */
  --navy-900:    #0f172a;
  --navy-800:    #1e293b;
  --navy-700:    #334155;
  --navy-600:    #475569;
  --navy-500:    #64748b;
  --navy-400:    #94a3b8;
  --navy-300:    #cbd5e1;
  --navy-200:    #e2e8f0;
  --navy-100:    #f1f5f9;
  --navy-50:     #f8fafc;

  /* Aliasser */
  --bg:          #f8fafc;       /* Lyse sektioner */
  --bg-soft:     #f1f5f9;       /* Subtile lyse sektioner */
  --paper:       #ffffff;       /* Kort, knapper */
  --ink:         #0f172a;       /* Tekstoverskrifter / sidebar */
  --ink-soft:    #1e293b;       /* Sidebar items */
  --text:        #1e293b;       /* Body tekst */
  --text-soft:   #475569;       /* Sekundær tekst */
  --text-mute:   #64748b;       /* Mute tekst (labels) */
  --text-faint:  #94a3b8;       /* Helt subtle */
  --rule:        #e2e8f0;       /* Rammer */
  --rule-soft:   #f1f5f9;       /* Subtile dividers */

  /* Brand-grøn (præcis som "+ Ny lejeaftale" knappen) */
  --green:       #16a34a;
  --green-dark:  #15803d;
  --green-light: #22c55e;
  --green-50:    #f0fdf4;
  --green-100:   #dcfce7;
  --green-glow:  rgba(22,163,74,.15);

  /* Statusfarver fra systemet */
  --amber:       #eab308;       /* Aktive service */
  --amber-bg:    #fef9c3;
  --orange:      #f97316;       /* Faktura badge */
  --orange-bg:   #ffedd5;
  --purple:      #8b5cf6;       /* Langtidsleje */
  --purple-bg:   #ede9fe;
  --blue:        #3b82f6;       /* Chart 2025 */
  --blue-bg:     #dbeafe;
  --red:         #dc2626;
  --red-bg:      #fee2e2;

  /* Type — Geist hele vejen, samme som dashboard */
  --font-body:    'Geist', system-ui, -apple-system, sans-serif;
  --font-display: 'Geist', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, monospace;

  /* Skala */
  --container: 1240px;
  --gap-sm: 12px;
  --gap-md: 24px;
  --gap-lg: 40px;
  --gap-xl: 80px;
  --gap-xxl: 100px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows (præcis som dashboardet's cards) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04);
  --shadow:    0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, .08), 0 4px 6px -4px rgba(15, 23, 42, .04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, .1), 0 8px 10px -6px rgba(15, 23, 42, .04);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*::selection { background: var(--green); color: #fff; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION (matcher dashboardets header-stil)
   ═══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  transition: padding .25s;
}
.nav.nav-scrolled {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.nav.nav-scrolled .nav-inner { padding: 10px 24px; }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.logo-mark {
  display: inline-grid;
  place-items: center;
  width: 32px; height: 32px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 7px;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.logo-text { display: inline-flex; align-items: baseline; }
.brand-360 { color: var(--green); font-weight: 800; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}
.nav-links a:not(.btn) {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-soft);
  transition: color .15s;
  position: relative;
  padding: 4px 0;
}
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav-links a.active {
  color: var(--ink);
  font-weight: 600;
}
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -16px; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2px;
  background: var(--green);
  border-radius: 2px;
}
.nav-link-quiet { color: var(--text-mute) !important; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.nav-toggle span {
  width: 18px; height: 1.5px;
  background: var(--ink);
  transition: transform .25s ease, opacity .15s ease;
  transform-origin: center;
}
/* v319.34: Animér til X når menu er åben */
body.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}
body.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}
body.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS (matcher dashboardet's grønne CTA-knap)
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 8px; }
.btn-lg { padding: 12px 22px; font-size: 15px; }
.btn-xl { padding: 16px 28px; font-size: 16px; }

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--green-dark) inset;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -4px var(--green-glow);
}

.btn-secondary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  border-color: var(--navy-300);
  background: var(--bg-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: transparent;
}
.btn-ghost:hover {
  background: var(--bg-soft);
}

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

.btn-outline-light {
  background: transparent;
  color: var(--paper);
  border-color: rgba(255,255,255,.25);
}
.btn-outline-light:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  padding: 64px 0 80px;
  background: var(--bg);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15,23,42,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,23,42,.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 70%);
}
.hero-glow {
  position: absolute;
  top: -100px; right: -200px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  filter: blur(40px);
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 60px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 8px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-soft);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}
.badge-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px var(--green-glow);
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 3px rgba(22,163,74,.2); }
  50%     { box-shadow: 0 0 0 6px rgba(22,163,74,.05); }
}

.hero-title {
  font-weight: 700;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 22px;
}
.hero-title .accent {
  color: var(--green);
}

.hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 540px;
  margin-bottom: 32px;
}
.hero-lede strong { color: var(--ink); font-weight: 600; }

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.hero-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 13.5px;
  color: var(--text-mute);
}
.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.check {
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  background: var(--green-100);
  color: var(--green);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
}

/* Hero visual — overlapping cards (clean, like dashboard cards) */
.hero-visual {
  position: relative;
  height: 560px;
}
.hero-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hero-card img { width: 100%; display: block; }
.hero-card-1 {
  /* Dashboard — forrest, stort */
  width: 95%;
  top: 30px; right: 0;
  z-index: 2;
  transform: rotate(-1deg);
  transition: transform .4s ease;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, .25),
              0 15px 30px -10px rgba(15, 23, 42, .15);
}
.hero-card-1:hover { transform: rotate(0deg) scale(1.01); }
.hero-card-2 {
  /* CGR widget — bagved, mindre */
  width: 55%;
  top: 0; right: 30%;
  z-index: 1;
  transform: rotate(3deg);
  transition: transform .4s ease;
  opacity: .92;
}
.hero-card-2:hover { transform: rotate(1deg); z-index: 3; opacity: 1; }

.hc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  background: var(--bg);
}
.hc-header.dark {
  background: var(--ink);
  color: var(--navy-300);
  border-color: var(--navy-700);
}
.hc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-faint);
}
.hc-dot.green { background: var(--green); }

.hero-floating {
  position: absolute;
  top: 35%; right: -30px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transform: translateY(-50%);
}
.floating-stat {
  background: var(--paper);
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: floatStat 4s ease-in-out infinite;
}
.floating-stat:nth-child(2) { animation-delay: -2s; }
@keyframes floatStat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
.stat-num {
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.stat-num .green { color: var(--green); }
.stat-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-top: 6px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   PROOF / TRUST BAR (sidebar-stil, navy)
   ═══════════════════════════════════════════════════════════════ */
.proof {
  background: var(--ink);
  color: var(--paper);
  padding: 28px 0;
}
.proof-eyebrow {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy-400);
  margin-bottom: 16px;
  font-weight: 600;
}
.proof-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 28px;
  font-size: 14px;
}
.proof-stat strong {
  font-weight: 700;
  color: var(--green);
  font-size: 17px;
  margin-right: 6px;
  font-feature-settings: "tnum";
}
.proof-divider {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--navy-600);
}
.proof-tagline {
  text-align: center;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--navy-300);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.proof-tagline strong {
  color: var(--green);
  font-weight: 700;
  font-style: normal;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SECTION STYLING
   ═══════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 700;
  color: var(--text-mute);
  margin-bottom: 14px;
}
.eyebrow-green { color: var(--green); }

.section-title {
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-title .soft {
  color: var(--text-mute);
  font-weight: 500;
}
.section-title .accent {
  color: var(--green);
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--text-soft);
}

.section-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-soft);
  max-width: 580px;
}
.section-lede strong { color: var(--ink); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   PROBLEM SECTION (mørk navy som sidebar)
   ═══════════════════════════════════════════════════════════════ */
.problem {
  padding: var(--gap-xxl) 0;
  background: var(--ink);
  color: var(--paper);
}
.problem .eyebrow { color: var(--navy-400); }
.problem .section-title { color: var(--paper); }
.problem .section-title em { color: var(--navy-300); }

.prob-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 64px;
  align-items: start;
}
.prob-text .section-lede {
  color: var(--navy-300);
  margin-top: 12px;
}
.strike {
  position: relative;
  color: var(--navy-400);
}
.strike::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 56%;
  height: 2.5px;
  background: var(--green);
  transform: rotate(-1deg);
}

.prob-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prob-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--navy-700);
}
.prob-item:last-child { border-bottom: none; }
.prob-num {
  font-weight: 700;
  font-size: 28px;
  color: var(--green);
  line-height: 1;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}
.prob-item h3 {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-bottom: 6px;
}
.prob-item p {
  font-size: 14.5px;
  color: var(--navy-300);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   STATS SECTION (matcher dashboardets stat-kort)
   ═══════════════════════════════════════════════════════════════ */
.stats-section {
  padding: var(--gap-xxl) 0 60px;
  background: var(--bg);
}
.stats-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.stats-header .section-lede {
  margin: 0 auto;
}
.stat-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.stat-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-color, var(--green));
}
.stat-card[data-color="green"]  { --accent-color: var(--green); }
.stat-card[data-color="amber"]  { --accent-color: var(--amber); }
.stat-card[data-color="purple"] { --accent-color: var(--purple); }
.stat-card[data-color="blue"]   { --accent-color: var(--blue); }

.stat-card-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-bottom: 10px;
}
.stat-card-num {
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}
.stat-card-num small {
  font-size: 14px;
  color: var(--text-mute);
  font-weight: 500;
  margin-left: 4px;
}
.stat-card-sub {
  font-size: 12.5px;
  color: var(--text-mute);
}
.stat-card-icon {
  position: absolute;
  top: 18px; right: 18px;
  font-size: 20px;
  opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════
   USE-CASES (hvem systemet er for)
   ═══════════════════════════════════════════════════════════════ */
.usecases-section {
  padding: var(--gap-xxl) 0 60px;
  background: var(--bg);
}
.usecase-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.usecase-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 26px 22px;
  position: relative;
  overflow: hidden;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.usecase-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-color, var(--green));
}
.usecase-card[data-color="green"]  { --accent-color: var(--green); }
.usecase-card[data-color="amber"]  { --accent-color: var(--amber); }
.usecase-card[data-color="purple"] { --accent-color: var(--purple); }
.usecase-card[data-color="blue"]   { --accent-color: var(--blue); }
.usecase-card:hover {
  border-color: var(--accent-color, var(--green));
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.usecase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--green-100, #dcfce7);
  color: var(--green, #16a34a);
  margin-bottom: 14px;
}
.usecase-icon svg {
  display: block;
}
.usecase-card h3 {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.2;
}
.usecase-card > p {
  font-size: 13.5px;
  color: var(--text-soft);
  line-height: 1.55;
  margin-bottom: 14px;
}
.usecase-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px dashed var(--rule);
  padding-top: 12px;
  margin-top: auto;
}
.usecase-card li {
  position: relative;
  padding: 4px 0 4px 18px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}
.usecase-card li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 4px;
  color: var(--accent-color, var(--green));
  font-weight: 800;
  font-size: 11px;
}

.usecase-foot {
  text-align: center;
  font-size: 13.5px;
  color: var(--text-mute);
  padding: 14px 24px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  display: inline-block;
  margin: 0 auto;
  width: auto;
  max-width: 100%;
}
.usecase-foot strong {
  color: var(--ink);
  font-weight: 700;
}
.usecases-section .container {
  text-align: center;
}
.usecases-section .stats-header,
.usecases-section .usecase-cards {
  text-align: left;
}
.usecases-section .stats-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

/* ═══════════════════════════════════════════════════════════════
   BENTO / FEATURES (lyse cards som dashboardet)
   ═══════════════════════════════════════════════════════════════ */
.solution {
  padding: 60px 0 var(--gap-xxl);
  background: var(--bg);
}
.sol-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 56px;
}
.sol-header .section-lede {
  margin: 0 auto;
}

/* ─── SEO HERO SHOWCASE ─── */
.sol-hero {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  align-items: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-radius: var(--r-lg);
  padding: 48px;
  margin-bottom: 40px;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 30px rgba(15,23,42,.15);
}
.sol-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(22,163,74,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.sol-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,23,42,.2);
}
.sol-hero-content {
  position: relative;
  z-index: 1;
}
.sol-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  background: rgba(22,163,74,.2);
  color: #4ade80;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 16px;
}
.sol-hero-title {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.sol-hero-text {
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
}
.sol-hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #4ade80;
  font-size: 14px;
  font-weight: 600;
  transition: gap .2s;
}
.sol-hero:hover .sol-hero-link { gap: 10px; }
.sol-hero-visual {
  position: relative;
  z-index: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.sol-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── 7-FEATURE GRID ─── */
.sol-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.sol-feature {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  box-shadow: var(--shadow-sm);
  min-height: 200px;
}
.sol-feature:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.sol-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--green-100, #dcfce7);
  color: var(--green, #16a34a);
  margin-bottom: 16px;
}
.sol-feature-icon svg {
  display: block;
}
.sol-feature h3 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.25;
}
.sol-feature p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.55;
  margin: 0;
}

/* ─── OLD BENTO STYLES (behold for kompatibilitet — bruges ikke længere på forsiden) ─── */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}

.bento-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.bento-card:hover {
  border-color: var(--navy-300);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.bento-card h3 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.2;
}
.bento-card p {
  font-size: 14px;
  color: var(--text-soft);
  line-height: 1.5;
}
.bento-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--green-100, #dcfce7);
  color: var(--green, #16a34a);
  margin-bottom: 14px;
}
.bento-icon svg {
  display: block;
}

.bento-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 12px;
  background: var(--green-100);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  align-self: flex-start;
}
.bento-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s;
}
.bento-card:hover .bento-link { gap: 10px; }

/* Bento positions */
.bento-hero {
  grid-column: span 2;
  grid-row: span 2;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 28px;
}
.bento-hero h3 {
  color: var(--paper);
  font-size: 24px;
  margin-bottom: 10px;
}
.bento-hero p {
  color: var(--navy-300);
  font-size: 14.5px;
}
.bento-hero:hover { transform: translateY(-2px); }

.bento-img {
  grid-column: span 2;
}
.bento-img-tall {
  grid-row: span 2;
}
.bento-img-wrap {
  margin-top: 16px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  flex: 1;
  display: flex;
  align-items: flex-start;
}
.bento-img-wrap img {
  width: 100%;
  height: auto;
}
.bento-hero .bento-img-wrap {
  background: var(--navy-800);
  border-color: var(--navy-700);
  margin-top: 16px;
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SEO DEEP DIVE (mørk navy)
   ═══════════════════════════════════════════════════════════════ */
.seo-deepdive {
  padding: var(--gap-xxl) 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.seo-deepdive::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 700px; height: 700px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}
.seo-deepdive .container { position: relative; z-index: 1; }
.seo-deepdive .section-title { color: var(--paper); }
.seo-deepdive .section-lede { color: var(--navy-300); }
.seo-deepdive .section-lede em { color: var(--green); font-style: italic; }
.seo-deepdive .eyebrow { color: var(--green); }

.dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.feat-list {
  list-style: none;
  margin: 28px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feat-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 14.5px;
  color: var(--navy-300);
  line-height: 1.55;
}
.feat-list li strong { color: var(--paper); }
.feat-icon {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  background: var(--green);
  color: var(--ink);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
}

/* Code card */
.dd-visual { position: relative; }
.code-card {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.code-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0a0f1a;
  border-bottom: 1px solid var(--navy-700);
}
.code-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.code-dot.red    { background: #FF5F57; }
.code-dot.yellow { background: #FEBC2E; }
.code-dot.green  { background: #28C940; }
.code-filename {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-400);
}
.code-block {
  padding: 20px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--navy-100);
  overflow-x: auto;
}
.code-block .cmt { color: var(--navy-500); font-style: italic; }
.code-block .tag { color: #FF6B9D; }
.code-block .atr { color: #FFD93D; }
.code-block .str { color: var(--green-light); }
.code-card-footer {
  padding: 10px 16px;
  background: #0a0f1a;
  border-top: 1px solid var(--navy-700);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-400);
}
.code-result { color: var(--green-light); }

/* ═══════════════════════════════════════════════════════════════
   COMPARISON TABLE (matcher dashboard-stil med rene cards)
   ═══════════════════════════════════════════════════════════════ */
.compare {
  padding: var(--gap-xxl) 0;
  background: var(--bg);
}
.cmp-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px;
}
.cmp-table {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cmp-col { display: flex; flex-direction: column; }
.cmp-col-feature .cmp-cell {
  font-weight: 500;
  color: var(--text);
  background: var(--bg-soft);
  text-align: left;
  justify-content: flex-start;
}
.cmp-col-us { background: var(--ink); color: var(--paper); }
.cmp-col-us .cmp-cell-header { background: var(--ink); }
.cmp-col-us .cmp-cell { color: var(--navy-100); border-color: var(--navy-700); }
.cmp-col-us .cmp-yes { color: var(--green); font-weight: 700; }
.cmp-col-us .cmp-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--green);
}

.cmp-cell-header {
  padding: 22px 16px 16px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  min-height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cmp-cell-header strong {
  font-size: 16px;
  font-weight: 700;
  display: block;
  letter-spacing: -0.01em;
}
.cmp-cell-header small {
  font-size: 11.5px;
  color: var(--navy-400);
  font-weight: 400;
  margin-top: 4px;
}
.cmp-tagline {
  margin-top: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--green);
  background: var(--green-100);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.cmp-col-us .cmp-tagline { background: rgba(22,163,74,.2); }

.cmp-cell {
  padding: 14px 16px;
  font-size: 13.5px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.4;
}
.cmp-cell small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--navy-400);
  margin-top: 3px;
  font-style: italic;
}
.cmp-col-us .cmp-cell small { color: rgba(255,255,255,.5); }
.cmp-cell:last-child { border-bottom: none; }
.cmp-no { color: var(--red); }
.cmp-partial { color: var(--amber); }
.cmp-yes { color: var(--green); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   FEATURE-TABEL (v319.34) — rad-baseret med kategori-sektioner
   ═══════════════════════════════════════════════════════════════ */
.cmp-feature-table {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.cmp-feat {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  min-width: 920px;
}
.cmp-feat thead th {
  background: var(--bg-soft);
  padding: 18px 12px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  letter-spacing: -0.01em;
}
.cmp-feat thead th small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--navy-400);
  margin-top: 3px;
  font-style: italic;
}
.cmp-feat-col-feature {
  text-align: left !important;
  width: 28%;
  min-width: 240px;
  padding-left: 18px !important;
}
.cmp-feat-col-us {
  background: var(--ink) !important;
  color: var(--paper) !important;
  position: relative;
}
.cmp-feat-col-us strong {
  font-size: 14px;
  font-weight: 700;
  display: block;
  color: var(--paper);
}
.cmp-feat-tag {
  display: inline-block;
  margin-top: 5px;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--green);
  background: rgba(22,163,74,.2);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.cmp-feat tbody td {
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
  line-height: 1.4;
  font-size: 13px;
}
.cmp-feat tbody td:first-child {
  text-align: left;
  font-weight: 500;
  color: var(--text);
  padding-left: 18px;
}
.cmp-feat tbody td small {
  display: block;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--navy-400);
  margin-top: 2px;
  font-style: italic;
}
.cmp-feat-us {
  background: rgba(15, 23, 42, 0.97) !important;
  color: var(--paper) !important;
  font-weight: 600;
  border-left: 1px solid var(--navy-700);
  border-right: 1px solid var(--navy-700);
}
.cmp-feat-us strong {
  color: var(--green);
  font-size: 14px;
}
.cmp-feat-us small { color: rgba(255,255,255,.5) !important; }
.cmp-feat-us.cmp-yes { color: var(--green) !important; }
.cmp-feat tbody tr:hover td:not(.cmp-feat-us):not([colspan]) {
  background: var(--bg-soft);
}
/* Sektion-rækker */
.cmp-feat-section td {
  background: linear-gradient(to right, var(--bg-soft), #fff) !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--text) !important;
  text-align: left !important;
  padding: 16px 18px 10px !important;
  border-top: 2px solid var(--rule);
  letter-spacing: -0.01em;
}
.cmp-feat-section + tr td {
  padding-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBIL-VENLIG SAMMENLIGNINGSTABEL (v319.34)
   På mobil omdannes tabellen til en stak hvor hver feature er ét kort,
   og konkurrenterne vises som rækker indenfor kortet.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .cmp-feature-table {
    border: none;
    background: transparent;
    box-shadow: none;
    overflow-x: visible;
    border-radius: 0;
  }
  .cmp-feat {
    display: block;
    min-width: 0;
    width: 100%;
  }
  .cmp-feat thead {
    display: none;  /* Header skjules — vi viser leverandørnavne i hver celle */
  }
  .cmp-feat tbody {
    display: block;
  }
  .cmp-feat tbody tr {
    display: block;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
  }
  .cmp-feat tbody tr td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 16px;
    text-align: right;
    border-bottom: 1px solid var(--rule);
    line-height: 1.4;
    font-size: 13px;
    gap: 12px;
  }
  .cmp-feat tbody tr td:last-child {
    border-bottom: none;
  }
  .cmp-feat tbody tr td:first-child {
    /* Feature-navnet bliver til kortets header */
    background: var(--bg-soft);
    font-size: 14px;
    font-weight: 700;
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
    color: var(--text);
    display: block;
  }
  /* Vis konkurrent-navnet før hver værdi via data-label */
  .cmp-feat tbody tr td:not(:first-child)::before {
    content: attr(data-label);
    font-weight: 500;
    font-size: 12.5px;
    color: var(--text-soft);
    text-align: left;
    flex: 1;
    min-width: 0;
  }
  .cmp-feat tbody tr td small {
    display: inline;
    font-size: 11px;
    margin-top: 0;
    margin-left: 4px;
  }
  /* GoRental3 6 0 markeres med subtil grøn baggrund i mobil-cards */
  .cmp-feat tbody tr td.cmp-feat-us {
    background: rgba(22,163,74,.06) !important;
    color: var(--text) !important;
    font-weight: 600;
    border-left: 3px solid var(--green);
  }
  .cmp-feat tbody tr td.cmp-feat-us::before {
    color: var(--green) !important;
    font-weight: 700;
  }
  .cmp-feat tbody tr td.cmp-feat-us strong {
    color: var(--green);
  }
  .cmp-feat tbody tr td.cmp-feat-us small {
    color: var(--text-soft) !important;
  }
  /* Sektion-overskrifter bliver til store dividers mellem kort-grupper */
  .cmp-feat tbody tr.cmp-feat-section {
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    margin: 24px 0 8px;
  }
  .cmp-feat tbody tr.cmp-feat-section td {
    background: transparent !important;
    border: none !important;
    padding: 0 4px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    display: block !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MARKEDSOVERSIGT (med konkurrenters navne)
   ═══════════════════════════════════════════════════════════════ */
.cmp-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}
.cmp-header .section-lede {
  margin: 16px auto 0;
}

.market-table-wrap {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}

.market-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}
.market-table thead {
  background: var(--bg-soft);
  border-bottom: 1px solid var(--rule);
}
.market-table th {
  text-align: left;
  padding: 16px 18px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
}
.market-table td {
  padding: 18px 18px;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
}
.market-table tr:last-child td { border-bottom: none; }

/* Kolonne-bredder */
.market-table .mt-system { width: 18%; min-width: 140px; }
.market-table .mt-target { width: 16%; }
.market-table .mt-pros { width: 26%; }
.market-table .mt-cons { width: 26%; }
.market-table .mt-price { width: 14%; min-width: 120px; }

/* GoRental360-rækken: fremhævet */
.mt-row-us {
  background: linear-gradient(to right, rgba(22,163,74,.06), rgba(22,163,74,.02));
  position: relative;
}
.mt-row-us td {
  border-bottom-color: rgba(22,163,74,.2) !important;
  border-top: 2px solid var(--green);
}
.mt-row-us td:first-child {
  border-left: 3px solid var(--green);
}

/* System-cellen */
.market-table td.mt-system strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.mt-row-us td.mt-system strong {
  color: var(--green);
}
.mt-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--green-100);
  color: var(--green-dark);
}
.mt-pill-grey {
  background: var(--bg-soft);
  color: var(--text-mute);
}

/* Pros / cons */
.market-table .mt-pros { color: var(--text); }
.market-table .mt-cons { color: var(--text-soft); font-style: italic; }
.mt-row-us .mt-cons { color: var(--text-mute); }

/* Pris-cellen */
.market-table td.mt-price strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.market-table td.mt-price span {
  display: block;
  font-size: 11.5px;
  color: var(--text-mute);
  margin-top: 3px;
}
.mt-row-us td.mt-price strong {
  color: var(--green);
  font-size: 17px;
}

/* Konklusion-boks */
.market-conclusion {
  display: flex;
  gap: 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-lg);
  padding: 22px 26px;
  margin-bottom: 16px;
  align-items: flex-start;
}
.mc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--green-100, #dcfce7);
  color: var(--green, #16a34a);
  flex-shrink: 0;
}
.mc-icon svg {
  display: block;
}
.market-conclusion p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--navy-200);
  margin: 0;
}
.market-conclusion p strong {
  color: var(--paper);
  font-weight: 700;
}
.market-conclusion p em {
  color: var(--green-light);
  font-style: italic;
  font-weight: 500;
}

/* Disclaimer */
.market-disclaimer {
  text-align: center;
  font-size: 12px;
  color: var(--text-mute);
  font-style: italic;
  line-height: 1.55;
  padding: 8px 16px;
  margin: 0 auto;
  max-width: 720px;
}
.market-disclaimer a {
  color: var(--green);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 2px;
}

/* Responsive: market-table mobil */
@media (max-width: 900px) {
  .market-table-wrap {
    overflow-x: auto;
  }
  .market-table {
    min-width: 760px;
  }
}
@media (max-width: 640px) {
  .market-conclusion {
    flex-direction: column;
    gap: 10px;
    padding: 20px;
  }
  .market-conclusion p { font-size: 13.5px; }
  .market-disclaimer { font-size: 11.5px; }
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE
   ═══════════════════════════════════════════════════════════════ */
.quote {
  padding: var(--gap-xxl) 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.quote-body {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.quote-body p {
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.qmark {
  color: var(--green);
  font-weight: 700;
}
.quote-attr {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  padding: 10px 18px;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.quote-attr div { text-align: left; }
.quote-attr strong {
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  display: block;
}
.quote-attr span {
  font-size: 12.5px;
  color: var(--text-mute);
}
.quote-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--green);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   PRICING TEASER
   ═══════════════════════════════════════════════════════════════ */
.price-teaser {
  padding: var(--gap-xxl) 0;
  background: var(--bg);
}
.pt-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: 48px;
  position: relative;
  overflow: hidden;
}
.pt-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--green-glow) 0%, transparent 70%);
  filter: blur(60px);
}
.pt-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.pt-card .eyebrow { color: var(--green); }
.pt-title {
  font-weight: 700;
  font-size: clamp(28px, 3.8vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.pt-title strong { color: var(--green); }
.pt-soft { color: var(--navy-300); font-weight: 500; }
.pt-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--navy-300);
  margin-bottom: 24px;
  max-width: 480px;
}
.pt-desc strong { color: var(--paper); font-weight: 600; }
.pt-desc em { color: var(--green); font-style: italic; }
.pt-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pt-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.pt-stat {
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.pt-stat-num {
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--green);
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.pt-stat-num small {
  font-size: 12px;
  font-weight: 500;
  color: var(--navy-400);
  margin-left: 4px;
}
.pt-stat-lbl {
  font-size: 11.5px;
  color: var(--navy-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════════════════ */
.faq {
  padding: var(--gap-xxl) 0;
  background: var(--paper);
}
.faq-header {
  text-align: center;
  margin-bottom: 48px;
}
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 20px 0;
}
.faq-item summary {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  position: relative;
  padding-right: 36px;
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 0;
  font-size: 22px;
  font-weight: 300;
  color: var(--green);
  transition: transform .25s;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--green-100);
  border-radius: 50%;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--green); }
.faq-body {
  padding: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-soft);
  max-width: 640px;
}
.faq-body code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--bg-soft);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  color: var(--ink);
}
.faq-body strong { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════════════════════════════ */
.final-cta {
  padding: var(--gap-xxl) 0;
  background: var(--bg);
}
.fc-card {
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-xl);
  padding: 72px 40px;
  position: relative;
  overflow: hidden;
}
.fc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top left, var(--green-glow), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(59,130,246,.1), transparent 50%);
  pointer-events: none;
}
.fc-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.fc-card .accent { color: var(--green); }
.fc-desc {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-300);
  max-width: 540px;
  margin: 0 auto 32px;
}
.fc-cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.footer {
  background: var(--ink);
  color: var(--navy-300);
  padding: 64px 0 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 64px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--navy-700);
}
.footer-brand .nav-logo {
  color: var(--paper);
  margin-bottom: 14px;
}
.footer-brand .logo-mark {
  background: var(--paper);
  color: var(--ink);
}
.footer-brand p {
  font-size: 13.5px;
  color: var(--navy-400);
  line-height: 1.6;
  max-width: 360px;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col h4 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--green);
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  font-size: 13.5px;
  color: var(--navy-300);
  padding: 5px 0;
  transition: color .2s;
}
.footer-col a:hover { color: var(--paper); }

/* Kontakt-kolonne: pænere layout */
.footer-col-contact address {
  font-style: normal;
  font-size: 13px;
  line-height: 1.6;
  color: var(--navy-300);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--navy-700);
}
.footer-col-contact address strong {
  color: var(--paper);
  font-weight: 600;
}
.footer-link-row {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 5px 0 !important;
}
.footer-link-row .footer-icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--green);
  flex-shrink: 0;
}
.footer-link-row em {
  font-style: italic;
  color: var(--navy-500);
  font-size: 12px;
  margin-left: 2px;
}
.footer-cgr {
  display: inline-block !important;
  margin-top: 12px;
  padding: 6px 12px !important;
  background: var(--navy-800);
  border: 1px solid var(--navy-700);
  border-radius: var(--r-pill);
  font-size: 12.5px !important;
  color: var(--green) !important;
  font-weight: 500;
  transition: background .2s, border-color .2s;
}
.footer-cgr:hover {
  background: var(--navy-700);
  border-color: var(--green);
  color: var(--green-light) !important;
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--navy-500);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .nav-links a:not(.btn-primary) { display: none; }
  
  /* v319.36: Hamburger og logo skal ALTID være øverst og klikbare */
  .nav-toggle { 
    display: flex !important; 
    cursor: pointer; 
    z-index: 220 !important; 
    position: relative !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
  }
  .nav-logo { 
    z-index: 220 !important; 
    position: relative !important;
    pointer-events: auto !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0,0,0,.1);
    padding: 8px 4px;
    margin: -8px -4px;
  }

  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { height: 400px; }

  .prob-grid { grid-template-columns: 1fr; gap: 40px; }

  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .usecase-cards { grid-template-columns: repeat(2, 1fr); }

  .bento {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .bento-hero, .bento-img, .bento-img-tall { grid-column: span 2; grid-row: auto; }

  /* Nye solution-klasser */
  .sol-hero {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 36px 28px;
  }
  .sol-hero-title { font-size: 24px; }
  .sol-features {
    grid-template-columns: repeat(2, 1fr);
  }

  .dd-grid { grid-template-columns: 1fr; gap: 40px; }
  .pt-grid { grid-template-columns: 1fr; gap: 32px; }

  .footer-top { grid-template-columns: 1fr; gap: 40px; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }

  .cmp-table { font-size: 12.5px; }

  /* ═══════════════════════════════════════════════════════════════
     v319.36 — MOBILE MENU (komplet rewrite, ren og simpel)
     ═══════════════════════════════════════════════════════════════ */
  
  /* Nav-container — sikrer at logo+hamburger altid er øverst */
  .nav { z-index: 200 !important; }
  .nav-inner { 
    position: relative; 
    z-index: 210;
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  
  /* Mobile menu — fuld skærm overlay */
  .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    padding: 80px 24px 32px !important;
    gap: 0 !important;
    margin: 0 !important;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1);
    z-index: 190 !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: -8px 0 32px rgba(0,0,0,.1);
  }
  .nav-links.open { 
    transform: translateX(0) !important;
  }
  
  /* Menu-links */
  .nav-links a:not(.btn) {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    text-align: left;
    padding: 18px 4px !important;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-decoration: none;
    transition: color .15s;
  }
  .nav-links a:not(.btn)::after {
    content: '›';
    color: #cbd5e1;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
  }
  .nav-links a:not(.btn).active {
    color: var(--green) !important;
    font-weight: 600 !important;
  }
  .nav-links a:not(.btn):active {
    background: rgba(0,0,0,.04);
  }
  
  /* Den grønne "Start gratis"-knap nederst */
  .nav-links .btn { 
    margin-top: 32px !important;
    width: 100%;
    padding: 16px 24px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
    text-align: center;
    justify-content: center;
  }
  
  body.nav-open { overflow: hidden; }
}

@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .hero { padding: 32px 0 56px; }
  .hero-visual { height: 340px; }
  .hero-floating { right: 0; }

  .problem, .solution, .seo-deepdive, .compare, .quote, .price-teaser, .faq, .final-cta, .stats-section {
    padding: 56px 0;
  }

  .stat-cards { grid-template-columns: 1fr; }
  .usecase-cards { grid-template-columns: 1fr; }

  .bento { grid-template-columns: 1fr; }
  .sol-features { grid-template-columns: 1fr; }
  .sol-hero { padding: 28px 20px; }
  .sol-hero-title { font-size: 22px; }
  .bento-hero, .bento-img, .bento-img-tall { grid-column: auto; }

  .pt-card { padding: 32px 24px; }
  .pt-stats { grid-template-columns: 1fr; }

  .fc-card { padding: 48px 24px; }

  .cmp-table { grid-template-columns: 1fr; }
  .cmp-col { border-bottom: 1px solid var(--rule); }
  .cmp-col:last-child { border-bottom: none; }
  .cmp-cell-header { min-height: auto; padding: 16px; }

  .footer-cols { grid-template-columns: 1fr; gap: 28px; }
}

/* Reveal animations */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.in-view { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}