/*
 * Plejeplan.pro — forsidelag i det eksisterende designsystem.
 * Bruger sidens marineblå, blå, teal og lilla i stedet for at indføre et nyt
 * lyst univers. Resten af sitets komponenter og funktioner ændres ikke.
 */

:root {
  --home-navy: #1f3864;
  --home-navy-deep: #142747;
  --home-blue: #2e75b6;
  --home-teal: #0d6e6e;
  --home-purple: #7c3aed;
}

html { scroll-behavior: smooth; }

nav {
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 8px 28px rgba(15, 30, 58, .13);
}

.nav-link {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-weight: 650;
}

.nav-link:focus-visible,
.btn-hero:focus-visible,
.pv-chip:focus-visible,
.pv-more:focus-visible {
  outline: 3px solid #fbbf24;
  outline-offset: 3px;
}

.nav-cta {
  background: linear-gradient(135deg, #6d28d9, var(--home-purple));
  box-shadow: 0 8px 22px rgba(76, 29, 149, .28);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: min(78svh, 760px);
  padding: clamp(64px, 7vw, 98px) 24px 44px;
  background:
    radial-gradient(circle at 79% 18%, rgba(124, 58, 237, .25), transparent 30%),
    radial-gradient(circle at 16% 78%, rgba(13, 110, 110, .22), transparent 34%),
    linear-gradient(135deg, var(--home-navy-deep) 0%, var(--home-navy) 48%, #294f87 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .15;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}

.hero-clinical-flow {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-inner,
.stats { position: relative; z-index: 2; }

.hero-inner {
  max-width: 1120px;
  gap: clamp(40px, 6vw, 72px);
}

.hero-copy { text-shadow: 0 2px 18px rgba(8, 20, 42, .14); }

.hero-kicker {
  color: #dbeafe;
  background: rgba(15, 33, 63, .43);
  border-color: rgba(147, 197, 253, .3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.45rem, 5vw, 4.45rem);
  line-height: 1;
  letter-spacing: -.052em;
}

.hero h1 span { color: #a8d5ff; }

.hero-copy > p {
  max-width: 580px;
  color: rgba(255,255,255,.86);
  font-size: clamp(1rem, 1.45vw, 1.14rem);
  line-height: 1.67;
}

.hero-actions { gap: 12px; margin-bottom: 23px; }

.btn-hero {
  min-height: 50px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(5, 15, 34, .2);
  transition: transform .24s ease, box-shadow .24s ease, background .24s ease;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(5, 15, 34, .27);
}

.btn-hero-secondary {
  background: rgba(15, 33, 63, .28);
  border-color: rgba(255,255,255,.44);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.hero-proof { color: rgba(255,255,255,.76); font-weight: 620; }

.hero-preview {
  padding: 18px;
  border-radius: 22px;
  border-color: rgba(255,255,255,.72);
  background: rgba(255,255,255,.96);
  box-shadow:
    0 30px 72px rgba(7, 18, 40, .35),
    0 0 0 1px rgba(46, 117, 182, .08);
  transform: perspective(900px) rotateY(-2deg) rotateX(1deg);
}

.preview-choice { border-color: #9bc3e7; background: #edf6ff; }
.preview-flow span { border: 1px solid rgba(46, 117, 182, .08); }
.preview-result { border-left-color: var(--home-teal); }

.stats {
  max-width: 940px;
  margin-top: clamp(42px, 6vw, 62px);
  padding: 10px;
  gap: 3px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: rgba(12, 29, 58, .26);
  backdrop-filter: blur(12px);
}

.stat { flex: 1 1 160px; }
.stat-num { color: #a8d5ff; }
.stat-label { color: rgba(255,255,255,.73); }

.quick-find .pv-chip,
.sektor-card,
.feat-card,
.tool-card,
.tier-card,
.trust-card,
.seo-card,
.demo-step {
  border-color: rgba(31, 56, 100, .14);
}

.quick-find .pv-chip:hover,
.sektor-card:hover,
.tool-card:hover,
.seo-card:hover { border-color: rgba(46, 117, 182, .48); }

.praktik-sektor,
.features,
.demo,
.trust,
.tools-section,
.pricing-cta,
.cats,
.seo-guides { scroll-margin-top: 76px; }

@media (max-width: 820px) {
  .hero { min-height: auto; padding-top: 60px; }
  .hero h1 { max-width: 15ch; margin-inline: auto; }
  .hero-preview { transform: none; }
}

@media (max-width: 520px) {
  .hero { padding: 44px 16px 30px; }
  .hero h1 { font-size: clamp(2.15rem, 11.5vw, 3.1rem); }
  .hero-preview { padding: 13px; border-radius: 17px; }
  .stats { margin-top: 32px; padding: 6px; }
  .stat { flex-basis: 44%; }
  .stat:nth-child(2) { border-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-hero,
  .pv-chip,
  .sektor-card,
  .tool-card,
  .seo-card { transition: none !important; }
}