/*
 * Plejeplan.pro — forsidens 3D-univers.
 *
 * Ligger oven på home-theme.css og ændrer hverken indhold eller struktur.
 * Verdenen er mørk (marineblå rum med lysende glas), mens produktets egne
 * skærme (heroens kort og eksempelkortet) forbliver lyse, så de læses som
 * det oplyste i rummet.
 *
 * Lag 1: farver og glas (virker uden JavaScript og uden WebGL)
 * Lag 2: DOM-3D (tilt, ord, mærker, reveal), styret af klasser fra home-3d.js
 * Lag 3: WebGL-lærredet, der ligger bag alt
 */

:root {
  --w0: #040a18;
  --w1: #081226;
  --ink: #eaf2ff;
  --mute: rgba(206, 222, 247, .76);
  --line: rgba(147, 197, 253, .17);
  --sky: #a8d5ff;
  --teal: #5ec8bd;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --glas: linear-gradient(160deg, rgba(26, 56, 104, .58), rgba(8, 20, 42, .66));
  --glas-kant: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 0 0 1px rgba(147, 197, 253, .05);
  --dyb: 0 34px 60px -34px rgba(0, 0, 0, .8);
}

/* ───────────── Lag 1: det mørke glasunivers ───────────── */

html { background: var(--w0); }

body {
  background: var(--w0);
  color: var(--ink);
}

/* Fast nebula, så siden også er smuk, før (eller uden) WebGL. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 760px at 86% -8%, rgba(46, 117, 182, .32), transparent 62%),
    radial-gradient(900px 700px at -6% 42%, rgba(13, 110, 110, .2), transparent 62%),
    radial-gradient(800px 600px at 60% 108%, rgba(124, 58, 237, .16), transparent 62%),
    linear-gradient(180deg, var(--w1), var(--w0) 62%);
}

/* Vignet over lærredet, under indholdet. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(2, 6, 16, .55) 100%);
}

body > section,
body > footer,
body > script + section { position: relative; z-index: 1; }

nav {
  background: rgba(6, 14, 32, .68);
  border-bottom-color: rgba(147, 197, 253, .15);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

/* Fælles: overskrifter og brødtekst */
.praktik-sektor h2,
.features h2,
.demo h2,
.trust h2,
.tools-section h2,
.pricing-cta h2 {
  color: var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  font-weight: 850;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-shadow: 0 0 46px rgba(94, 200, 189, .22);
}

.praktik-sektor .sub,
.features .sub,
.demo > .sub,
.trust > .trust-inner > .sub,
.tools-section .sub,
.pricing-cta .sub { color: var(--mute); font-size: 1rem; max-width: 62ch; margin-left: auto; margin-right: auto; }

.demo-eyebrow { color: var(--sky); }

/* Sektionerne bliver til luft i rummet */
.quick-find,
.praktik-sektor,
.features,
.trust,
.tools-section,
.pricing-cta {
  background: transparent !important;
  border-color: transparent;
  padding-top: clamp(64px, 9vw, 120px);
  padding-bottom: clamp(64px, 9vw, 120px);
}

.quick-find { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }

/* Hurtig-valg */
.quick-find .pv-label { color: var(--ink); font-size: 1.1rem; }
.quick-find .pv-chip {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(147, 197, 253, .24);
  color: #dbeafe;
  backdrop-filter: blur(6px);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .35s var(--ease);
}
.quick-find .pv-chip:hover {
  background: rgba(94, 200, 189, .16);
  border-color: rgba(94, 200, 189, .7);
  box-shadow: 0 10px 28px -8px rgba(45, 212, 191, .45);
  transform: translateY(-3px) translateZ(0);
}
.quick-find .pv-more { color: var(--sky); border-color: rgba(168, 213, 255, .5); background: transparent; }
.quick-find .pv-more:hover { background: rgba(168, 213, 255, .12); }
.quick-find .pv-note { color: var(--mute); }

/* Glaskort */
.sektor-card,
.feat-card,
.tool-card,
.tier-card,
.trust-card {
  position: relative;
  background: var(--glas);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: var(--dyb), var(--glas-kant);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.sektor-card:hover,
.tool-card:hover,
.seo-card:hover { border-color: rgba(94, 200, 189, .55); box-shadow: var(--dyb), 0 0 0 1px rgba(94, 200, 189, .25), 0 24px 70px -20px rgba(45, 212, 191, .3); }

.sektor-name,
.tool-name,
.feat-title,
.tier-name,
.trust-card strong { color: var(--ink); }

.sektor-desc,
.tool-desc,
.feat-desc,
.trust-card p,
.tier-feats-list { color: var(--mute); }

.sektor-tags span {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(147, 197, 253, .2);
  color: #cfe3ff;
}

.sektor-icon { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5)); }

.tool-card { padding-top: 22px; }
.tools-note,
.pricing-cta-note { color: var(--mute); }
.tools-section .sub a[href="vagten.html"] { color: #fcd34d !important; }
.tools-section .sub a[href="borger.html"] { color: #c4b5fd !important; }
.pricing-cta-note a { color: var(--teal) !important; }

/* Eksempelkortet er en lys "skærm" i det mørke rum */
.demo-case {
  box-shadow:
    0 60px 120px -40px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 90px -20px rgba(94, 200, 189, .28);
}

/* Faglighed */
.trust-note {
  background: rgba(245, 158, 11, .1);
  color: #fcd9a0;
  border: 1px solid rgba(245, 158, 11, .4);
  border-radius: 12px;
  padding: 13px 16px;
}

/* Balancerede rækker i stedet for enlige kort: 2 x 2 og 3 x 3 */
@media (min-width: 720px) {
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
}
@media (min-width: 900px) {
  .tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; max-width: 1020px; }
}

/* Priser */
.tier-price { color: var(--teal); }
.tier-price span { color: var(--mute); }
.tier-feats-list li::before { color: var(--teal); }
.tier-card-pro {
  border-color: rgba(94, 200, 189, .65);
  box-shadow: var(--dyb), var(--glas-kant), 0 0 0 1px rgba(94, 200, 189, .22), 0 0 80px -18px rgba(45, 212, 191, .4);
}
.tier-btn-free { background: rgba(255, 255, 255, .1); color: var(--ink); }
.tier-btn-pro { background: #0d7373; color: #fff; box-shadow: 0 14px 34px -10px rgba(45, 212, 191, .55); }

footer {
  background: rgba(3, 8, 20, .82);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ───────────── Hero ───────────── */

.hero {
  --px: 0;
  --py: 0;
  min-height: min(calc(100svh - 62px), 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(4, 10, 24, .62) 0%, rgba(4, 10, 24, .22) 46%, transparent 72%);
}

/* Når WebGL kører, er heroens eget baggrundslag ikke længere nødvendigt. */
html.pp3d-on .hero { background: none; }
html.pp3d-on .hero-clinical-flow { display: none; }
html.pp3d-on .hero::after { opacity: .07; }

#pp3dScene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
html.pp3d-on #pp3dScene { opacity: 1; }

.hero-copy {
  transform: translate3d(calc(var(--px) * -10px), calc(var(--py) * -6px), 0);
  transition: transform .5s var(--ease);
}

.hero h1 {
  perspective: 900px;
  letter-spacing: -.04em;
  text-shadow: 0 0 60px rgba(46, 117, 182, .5), 0 4px 24px rgba(3, 9, 22, .5);
}
.hero h1 span { color: #b7dcff; text-shadow: 0 0 44px rgba(94, 200, 189, .55), 0 0 12px rgba(168, 213, 255, .35); }

.hero h1 .ord { font-style: normal; display: inline-block; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  html.pp3d .hero h1 .ord {
    animation: ordIn 1.1s var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 75ms + 150ms);
  }
  html.pp3d .hero-kicker { animation: heroOp .9s var(--ease) 0s backwards; }
  html.pp3d .hero-copy > p { animation: heroOp 1s var(--ease) .75s backwards; }
  html.pp3d .hero-actions { animation: heroOp 1s var(--ease) .9s backwards; }
  html.pp3d .hero-proof { animation: heroOp 1s var(--ease) 1.05s backwards; }
  html.pp3d .stats { animation: heroOp 1.1s var(--ease) 1.2s backwards; }
  html.pp3d .hero-preview {
    animation: kortInd 1.5s var(--ease) .35s backwards, kortFlyd 8s ease-in-out 1.9s infinite;
  }
}

@keyframes ordIn {
  from { opacity: 0; transform: perspective(700px) rotateX(-88deg) translateY(36px) translateZ(-140px); }
}
@keyframes heroOp {
  from { opacity: 0; translate: 0 28px; }
}
@keyframes kortInd {
  from { opacity: 0; translate: 90px 40px -420px; rotate: y -38deg; }
}
@keyframes kortFlyd {
  50% { translate: 0 -12px; }
}

.btn-hero {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s;
}
.btn-hero:not(.btn-hero-secondary) { background: linear-gradient(180deg, #ffffff, #dcecff); box-shadow: 0 16px 40px -10px rgba(120, 190, 255, .55), 0 0 0 1px rgba(255, 255, 255, .5); }
.btn-hero:hover { transform: translateY(-3px) scale(1.02); }
.btn-hero:active { transform: translateY(0) scale(.98); }

/* Heroens kort: lyst produktvindue, der svæver i rummet */
.hero-preview {
  position: relative;
  transform-style: preserve-3d;
}
.hero-preview::before {
  content: "";
  position: absolute;
  inset: -7%;
  z-index: -1;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(94, 200, 189, .5), rgba(46, 117, 182, .28) 55%, transparent 75%);
  filter: blur(26px);
  transform: translateZ(-80px);
  pointer-events: none;
}
.hero-preview .preview-top { transform: translateZ(14px); }
.hero-preview .preview-question { transform: translateZ(22px); }
.hero-preview .preview-flow { transform: translateZ(34px); }
.hero-preview .preview-stage { transform: translateZ(48px); }
.hero-preview .preview-replay { transform: translateZ(40px); }
.hero-preview .preview-choice,
.hero-preview .preview-detail,
.hero-preview .preview-result { box-shadow: 0 16px 26px -14px rgba(15, 45, 78, .45); }

.hero-orbit { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.hero-orbit-maerke {
  position: absolute;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 850;
  letter-spacing: .05em;
  color: #e8f4ff;
  background: rgba(10, 30, 64, .74);
  border: 1px solid rgba(168, 213, 255, .45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateZ(var(--z, 80px));
}
@media (prefers-reduced-motion: no-preference) {
  .hero-orbit-maerke { animation: maerkeFlyd var(--d, 7s) ease-in-out var(--p, 0s) infinite; }
}
@keyframes maerkeFlyd {
  50% { translate: 0 -14px; }
}

/* Tallene som ekstruderet 3D-skrift */
.stats { perspective: 900px; }
.stat-num {
  color: #d9ecff;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  letter-spacing: -.02em;
  text-shadow:
    0 1px 0 #8cc0ee, 0 2px 0 #79b0e2, 0 3px 0 #659fd3, 0 4px 0 #518cc0,
    0 5px 0 #3f79ab, 0 6px 0 #2f6595, 0 7px 6px rgba(0, 0, 0, .35),
    0 16px 28px rgba(46, 117, 182, .5);
  transform: perspective(600px) rotateX(-14deg);
  transform-origin: 50% 100%;
}
.stats {
  background: rgba(10, 24, 50, .42);
  border-color: rgba(147, 197, 253, .2);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ───────────── Lag 2: DOM-3D ───────────── */

/* Perspektiv til rækker af kort, så reveal får ægte dybde */
.sektor-grid,
.feat-grid,
.tools-grid,
.tier-grid,
.trust-grid,
.demo,
.pv-grid { perspective: 1400px; }

/* Tilt med glans */
.t3d {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  --tr-tilt: transform .6s var(--ease), box-shadow .3s, border-color .3s;
  transition: var(--tr-tilt);
  will-change: transform;
}
.t3d.is-tilt {
  --tz: 22px;
  --tr-tilt: transform .12s linear, box-shadow .3s, border-color .3s;
}
.t3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .24), transparent 46%);
  transition: opacity .3s;
}
.t3d.is-tilt::after { opacity: 1; }

.hero-preview.t3d {
  transform: perspective(1200px) rotateX(calc(4deg + var(--rx, 0deg))) rotateY(calc(-10deg + var(--ry, 0deg))) translateZ(var(--tz, 0px));
}
.hero-preview.t3d.is-tilt { --tz: 0px; }

.sektor-card.t3d .sektor-icon { transform: translateZ(46px); }
.sektor-card.t3d .sektor-name { transform: translateZ(30px); }
.sektor-card.t3d .sektor-tags { transform: translateZ(20px); }
.tool-card.t3d .tool-icon { transform: translateZ(42px); }
.tool-card.t3d .tool-name { transform: translateZ(26px); }
.feat-card.t3d .feat-icon { transform: translateZ(40px); }
.tier-card.t3d .tier-price { transform: translateZ(38px); }
.tier-card.t3d .tier-name { transform: translateZ(24px); }
.sektor-card.t3d .sektor-icon,
.tool-card.t3d .tool-icon,
.feat-card.t3d .feat-icon,
.tier-card.t3d .tier-price { display: block; }
.tool-card.t3d .tool-icon { display: flex; }

.sektor-card,
.tool-card { transition: transform .6s var(--ease), box-shadow .3s, border-color .3s; }

/* Reveal: elementerne kommer ud af dybden. translate/rotate lægges oven i tilt'ens transform. */
html.pp3d .r3d {
  --tr-reveal:
    opacity .9s var(--ease) calc(var(--i, 0) * 65ms),
    translate 1.1s var(--ease) calc(var(--i, 0) * 65ms),
    rotate 1.1s var(--ease) calc(var(--i, 0) * 65ms);
  transition: var(--tr-reveal);
}
html.pp3d .r3d.t3d { transition: var(--tr-reveal), var(--tr-tilt); }
html.pp3d .r3d:not(.is-in) {
  opacity: 0;
  translate: 0 56px -150px;
  rotate: x 20deg;
}
html.pp3d .pv-chip.r3d { --tr-reveal: opacity .7s var(--ease) calc(var(--i, 0) * 30ms), translate .8s var(--ease) calc(var(--i, 0) * 30ms), rotate .8s var(--ease) calc(var(--i, 0) * 30ms); }
html.pp3d .pv-chip.r3d:not(.is-in) { translate: 0 30px -90px; rotate: x 30deg; }

/* ───────────── Små skærme og ro ───────────── */

@media (max-width: 820px) {
  .hero { min-height: auto; }
  .hero::before { background: linear-gradient(180deg, rgba(4, 10, 24, .5), rgba(4, 10, 24, .2) 60%, transparent); }
  .hero-copy { transform: none; }
  .hero-preview.t3d { transform: perspective(1200px) rotateX(3deg) rotateY(-4deg); }
  .stat-num { transform: perspective(600px) rotateX(-10deg); }
}

@media (max-width: 520px) {
  .hero-orbit-maerke:nth-child(2),
  .hero-orbit-maerke:nth-child(4) { display: none; }
  .hero-orbit-maerke { padding: 6px 11px; font-size: .68rem; }
  .hero-orbit-maerke:nth-child(1) { right: 6px !important; }
  .praktik-sektor h2,
  .features h2,
  .demo h2,
  .trust h2,
  .tools-section h2,
  .pricing-cta h2 { font-size: clamp(1.5rem, 7vw, 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy,
  .t3d,
  .hero-preview,
  .hero-orbit-maerke { transition: none !important; animation: none !important; }
  .hero-preview.t3d { transform: none; }
  .stat-num { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .sektor-card, .feat-card, .tool-card, .tier-card, .trust-card, nav, footer, .stats {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: #0b1a36;
  }
}