/* ─────────────────────────────────────────────────────────────────
   landing-mega.css — Phase 1 wow-effekter
   Parallax depth, scroll-progress, aurora, grain, magnetic CTAs,
   tilt-cards, counter-prep. Vanilla CSS, ingen frameworks.
   ─────────────────────────────────────────────────────────────────*/

/* ━━━ 1. SCROLL-PROGRESS BAR (top of viewport) ━━━ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.05);
}
.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #0071e3 0%, #2997ff 50%, #5ac8fa 100%);
  box-shadow: 0 0 16px rgba(0, 113, 227, 0.7);
  transition: width 0.08s linear;
  will-change: width;
}

/* ━━━ 2. AURORA SPOTLIGHT GRADIENT (hero ambient — Safari-safe) ━━━ */
.hero-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 40% at 25% 30%, rgba(0, 113, 227, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 75% 70%, rgba(90, 200, 250, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(0, 113, 227, 0.08) 0%, transparent 80%);
  /* Fjernet mix-blend-mode:screen — Safari rendering-bug på fixed/absolute */
  animation: auroraDrift 20s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes auroraDrift {
  0%   { opacity: 0.85; transform: translate(0, 0) scale(1); }
  50%  { opacity: 1;    transform: translate(2%, -1%) scale(1.05); }
  100% { opacity: 0.9;  transform: translate(-2%, 1%) scale(1.02); }
}

/* ━━━ 3. GRAIN/FILM TEXTURE (subtle premium feel — Safari-safe) ━━━ */
.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /* Fjernet mix-blend-mode:overlay — Safari renderer det inkonsistent */
}

/* ━━━ 4. MULTI-LAYER PARALLAX (set via JS data-parallax + CSS var) ━━━ */
/* NOTE: hero-img er ekskluderet — den har allerede sin egen scroll-pin
   logic der fighter med transform. Parallax kun på elementer udenfor hero. */
[data-parallax]:not(.hero-img) {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}
[data-parallax-scale] {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(var(--parallax-scale, 1));
  will-change: transform;
}

/* ━━━ 5. MAGNETIC CTAS (smooth attraction) ━━━ */
.magnetic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
  will-change: transform;
}
.magnetic-glow {
  position: relative;
  isolation: isolate;
}
.magnetic-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #0071e3, #2997ff, #5ac8fa);
  z-index: -1;
  filter: blur(12px);
  opacity: 0.5;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.magnetic-glow:hover::before {
  opacity: 0.9;
  filter: blur(18px);
}

/* ━━━ 6. TILT-ON-HOVER CARDS ━━━ */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
  will-change: transform;
}
.tilt-card:hover {
  transform: perspective(1200px) rotateX(-4deg) rotateY(4deg) scale(1.02) translateZ(0);
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(0, 113, 227, 0.1);
}
.tilt-card > * {
  transform: translateZ(0);
}

/* ━━━ 7. LIVE STATS COUNTERS (with shimmer) ━━━ */
.live-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 980px;
  margin: 0 auto;
  padding: 80px 24px;
  position: relative;
  z-index: 5;
}
.live-stat {
  text-align: center;
  position: relative;
}
.live-stat-number {
  font-size: clamp(48px, 7vw, 80px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0071e3 0%, #5ac8fa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.live-stat-label {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.live-stat-pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  margin-left: 8px;
  vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(52, 199, 89, 0.6);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.3); }
}
@media (max-width: 767px) {
  .live-stats { grid-template-columns: 1fr; gap: 48px; padding: 56px 24px; }
}

/* ━━━ 8. SECTION TRANSITIONS (smooth fade-up) ━━━ */
/* FAILSAFE: default = visible. Animation er kun ENHANCEMENT — hvis JS fejler
   eller IntersectionObserver ikke trigger, forbliver indhold synligt. JS sætter
   .js-reveal-active på <body> NÅR observer er klar, derefter aktiveres skjul. */
.reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
body.js-reveal-active .reveal-on-scroll:not(.is-visible) {
  opacity: 0;
  transform: translateY(40px);
}
body.js-reveal-active .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-on-scroll[data-reveal-delay="100"] { transition-delay: 0.1s; }
.reveal-on-scroll[data-reveal-delay="200"] { transition-delay: 0.2s; }
.reveal-on-scroll[data-reveal-delay="300"] { transition-delay: 0.3s; }
.reveal-on-scroll[data-reveal-delay="400"] { transition-delay: 0.4s; }

/* ━━━ 9. SHIMMER LOAD (skeleton for images) ━━━ */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.15) 50%, transparent 65%);
  animation: shimmerSlide 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHASE 2 — AMBIENT LAYER (parallax + 3D throughout entire page)
   Inspireret af: Apple, Stripe, Linear, Vercel, 14islands, Refokus
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ 11. MESH GRADIENT BACKDROP (Vercel-style — Safari-safe) ━━━ */
.mesh-gradient {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 12% 8%, rgba(0, 113, 227, 0.14), transparent 65%),
    radial-gradient(ellipse 700px 900px at 92% 42%, rgba(90, 200, 250, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 48% 92%, rgba(41, 151, 255, 0.08), transparent 65%);
  /* Fjernet filter:blur — gradients er allerede soft, blur giver Safari rendering-bugs */
  animation: meshDrift 35s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg);     opacity: 0.85; }
  33%  { transform: translate(-3%, 2%) scale(1.04) rotate(2deg); opacity: 1; }
  66%  { transform: translate(2%, -2%) scale(1.02) rotate(-1deg); opacity: 0.92; }
  100% { transform: translate(-2%, 1%) scale(1.05) rotate(1deg); opacity: 0.95; }
}

/* ━━━ 12. FLOATING DEPTH ORBS (parallax through entire page) ━━━ */
.depth-orbs {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.depth-orb {
  position: absolute;
  border-radius: 50%;
  -webkit-filter: blur(70px);
  filter: blur(70px);
  opacity: 0.35;
  will-change: transform;
  pointer-events: none;
}
.depth-orb-1 { top: 8%;  left: -5%;  width: 360px; height: 360px; background: #0071e3; }
.depth-orb-2 { top: 35%; right: -8%; width: 460px; height: 460px; background: #5ac8fa; }
.depth-orb-3 { top: 60%; left: 25%;  width: 520px; height: 520px; background: #2997ff; opacity: 0.25; }
.depth-orb-4 { top: 88%; right: 10%; width: 400px; height: 400px; background: #0071e3; opacity: 0.22; }
.depth-orb-5 { top: 110%; left: -3%; width: 440px; height: 440px; background: #5ac8fa; opacity: 0.3; }
@media (max-width: 767px) {
  .depth-orb { -webkit-filter: blur(50px); filter: blur(50px); opacity: 0.2; }
  .depth-orb-1, .depth-orb-2, .depth-orb-3, .depth-orb-4, .depth-orb-5 { width: 240px; height: 240px; }
}

/* ━━━ 13. SPOTLIGHT FOLLOWER (cursor-driven section illumination) ━━━ */
.spotlight-section {
  position: relative;
  isolation: isolate;
  --mouse-x: 50%;
  --mouse-y: 50%;
}
.spotlight-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 500px at var(--mouse-x) var(--mouse-y),
              rgba(0, 113, 227, 0.18) 0%,
              rgba(0, 113, 227, 0.05) 30%,
              transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
  /* mix-blend-mode fjernet — Safari render det inkonsistent på sticky/abs */
}
.spotlight-section:hover::before { opacity: 1; }

/* ━━━ 14. GLASS MORPHISM CARDS (Linear-style) ━━━ */
.glass-card {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 8px 32px -4px rgba(0, 0, 0, 0.08),
    0 24px 64px -8px rgba(0, 113, 227, 0.06);
  border-radius: 20px;
}
.glass-card-dark {
  background: rgba(15, 20, 30, 0.6);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 24px 64px -12px rgba(0, 0, 0, 0.4);
}

/* ━━━ 15. SCROLL-DRIVEN 3D ROTATE (on data-rotate-on-scroll) ━━━ */
[data-rotate-on-scroll] {
  transform: perspective(1500px) rotateY(var(--scroll-rotate, 0deg)) rotateX(var(--scroll-tilt, 0deg));
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ━━━ 16. STAGGERED REVEAL (parent triggers children with delay) ━━━ */
.stagger-parent .stagger-child {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.stagger-parent.is-visible .stagger-child {
  opacity: 1;
  transform: translateY(0);
}
.stagger-parent.is-visible .stagger-child:nth-child(1) { transition-delay: 0.0s; }
.stagger-parent.is-visible .stagger-child:nth-child(2) { transition-delay: 0.1s; }
.stagger-parent.is-visible .stagger-child:nth-child(3) { transition-delay: 0.2s; }
.stagger-parent.is-visible .stagger-child:nth-child(4) { transition-delay: 0.3s; }
.stagger-parent.is-visible .stagger-child:nth-child(5) { transition-delay: 0.4s; }
.stagger-parent.is-visible .stagger-child:nth-child(6) { transition-delay: 0.5s; }

/* ━━━ 17. SECTION GRADIENT TRANSITIONS (soft fades between sections) ━━━ */
.section-fade-top {
  position: relative;
}
.section-fade-top::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}
.section-fade-bottom::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ━━━ 18. SMOOTH ANCHOR SCROLL (native, lightweight) ━━━ */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* ━━━ 19. BIG TYPE PARALLAX SHIFT (text moves at different speed) ━━━ */
[data-parallax-text] {
  transform: translate3d(0, calc(var(--parallax-y, 0px) * 0.5), 0);
  will-change: transform;
}

/* ━━━ 20. HOVER LIFT (subtle but premium) ━━━ */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

/* ━━━ 21. LIVE-STATS REDESIGN (transparent over mesh, less padding) ━━━ */
.live-stats {
  background: transparent !important;
  padding: 56px 24px !important;
  position: relative;
  z-index: 5;
}
.live-stat-number {
  text-shadow: 0 4px 24px rgba(0, 113, 227, 0.15);
}

/* ━━━ 22. SECTION BG STAYS TRANSPARENT (let mesh shine through) ━━━ */
.features-section,
.showcase-section,
.pricing-section,
.trust-section {
  background: transparent !important;
}
/* Hero behold sin egen mørke baggrund — mesh shines BAGOM */
.hero-scroll-outer { background: transparent !important; }
body { background: #fafafa; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHASE 3 — MEGA HERO "Living Showroom" + parallax everywhere
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ MEGA HERO ROOT ━━━ */
.mega-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center top, #1a1f2e 0%, #0a0d14 70%, #050608 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}

/* ━━━ MEGA HERO LAYER 1: Showroom backdrop (parallax slow — Safari-safe) ━━━ */
.mega-hero-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
  -webkit-filter: brightness(0.6);
  filter: brightness(0.6);
  will-change: transform;
}
.mega-hero-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(5, 6, 8, 0.85) 90%);
}

/* ━━━ MEGA HERO LAYER 2: Hero accent orbs (specific to hero, separate from page-wide depth orbs) ━━━ */
.hero-accent-orb {
  position: absolute;
  border-radius: 50%;
  -webkit-filter: blur(80px);
  filter: blur(80px);
  pointer-events: none;
  z-index: 2;
  will-change: transform, opacity;
}
.hero-accent-orb-1 { top: 20%; left: 15%;  width: 280px; height: 280px; background: #0071e3; opacity: 0.4; }
.hero-accent-orb-2 { top: 50%; right: 20%; width: 360px; height: 360px; background: #5ac8fa; opacity: 0.3; }
.hero-accent-orb-3 { bottom: 15%; left: 45%; width: 320px; height: 320px; background: #2997ff; opacity: 0.25; }

/* ━━━ MEGA HERO LAYER 3: Hero car (centerpiece, parallax fast) ━━━ */
.mega-hero-car-wrap {
  position: absolute;
  inset: 8% 5% 12% 5%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  perspective: 2000px;
}
.mega-hero-car {
  width: 100%;
  max-width: 1400px;
  height: 100%;
  object-fit: contain;
  border-radius: 24px;
  box-shadow:
    0 40px 80px -20px rgba(0, 113, 227, 0.4),
    0 80px 160px -40px rgba(0, 0, 0, 0.6);
  transform: perspective(2000px) rotateX(2deg) rotateY(-3deg);
  will-change: transform;
}

/* ━━━ MEGA HERO LAYER 4: Floating glass UI cards ━━━ */
.hero-floater {
  position: absolute;
  z-index: 5;
  background: rgba(20, 25, 40, 0.7);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px 22px;
  color: #fff;
  font-family: 'Inter', -apple-system, sans-serif;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 48px -12px rgba(0, 0, 0, 0.6),
    0 8px 16px -4px rgba(0, 113, 227, 0.2);
  will-change: transform;
  animation: floaterDrift 8s ease-in-out infinite;
}
.hero-floater-stat {
  top: 12%;
  right: 8%;
  text-align: center;
  animation-delay: 0s;
}
.hero-floater-receipt {
  bottom: 18%;
  left: 6%;
  width: 280px;
  animation-delay: -2s;
}
.hero-floater-rating {
  top: 28%;
  left: 8%;
  width: 260px;
  animation-delay: -4s;
}
@keyframes floaterDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(-0.5deg); }
}
.hero-floater-number {
  display: block;
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #5ac8fa, #0071e3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
}
.hero-floater-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.hero-floater-receipt h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}
.hero-floater-receipt ul { list-style: none; padding: 0; margin: 0; }
.hero-floater-receipt li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hero-floater-receipt li:last-child { border: 0; }
.hero-floater-receipt li span {
  font-weight: 600;
  color: #5ac8fa;
  font-variant-numeric: tabular-nums;
}
.hero-floater-rating {
  font-size: 13px;
  line-height: 1.5;
}
.hero-floater-rating .stars {
  font-size: 14px;
  color: #ffbe0b;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.hero-floater-rating p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.92);
  font-style: italic;
}
.hero-floater-rating small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* ━━━ MEGA HERO LAYER 5: Foreground content (text + CTAs) ━━━ */
.mega-hero-content {
  position: relative;
  z-index: 6;
  text-align: center;
  max-width: 980px;
  padding: 120px 24px 60px;
  pointer-events: auto;
}
.mega-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 113, 227, 0.12);
  border: 1px solid rgba(0, 113, 227, 0.3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5ac8fa;
  margin-bottom: 28px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.mega-hero-eyebrow .pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  box-shadow: 0 0 12px rgba(52, 199, 89, 0.7);
  animation: pulse 1.8s ease-in-out infinite;
}
.mega-hero-title {
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0 0 24px;
  text-shadow: 0 4px 32px rgba(0, 113, 227, 0.25);
}
.mega-hero-title .gradient-text {
  /* Linear-style shimmer på text — animeret gradient via background-clip */
  background: linear-gradient(110deg, #5ac8fa 30%, #fff 50%, #0071e3 70%);
  background-size: 200% 100%;
  background-position: 100% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: titleShimmer 4s ease-in-out infinite;
}
@keyframes titleShimmer {
  0%, 100% { background-position: 100% 0%; }
  50%      { background-position: 0% 0%; }
}

/* Polestar-style mouse-tilt — JS sætter transform direkte (Safari-safe) */
.mega-hero-car-wrap .mega-hero-car {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  /* Default tilt — JS overskriver ved mousemove */
  -webkit-transform: perspective(2000px) rotateX(2deg) rotateY(-3deg);
  transform: perspective(2000px) rotateX(2deg) rotateY(-3deg);
}
.mega-hero-sub {
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 620px;
  margin: 0 auto 40px;
  font-weight: 400;
}
.mega-hero-cta-row {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}
.mega-hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 38px;
  background: linear-gradient(135deg, #0071e3, #2997ff);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0, 113, 227, 0.5),
    0 16px 48px -8px rgba(0, 113, 227, 0.3);
  position: relative;
  overflow: hidden;
}
.mega-hero-cta-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.mega-hero-cta-primary:hover::before { transform: translateX(100%); }
.mega-hero-cta-secondary {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mega-hero-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ━━━ MEGA HERO LAYER 6: Scroll cue ━━━ */
.mega-hero-scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  animation: scrollCueBounce 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scrollCueBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.55; }
  50%      { transform: translateX(-50%) translateY(8px); opacity: 1; }
}

/* ━━━ MOBILE adaptations for mega hero ━━━ */
@media (max-width: 767px) {
  .mega-hero { min-height: 100vh; }
  .mega-hero-content { padding: 100px 20px 40px; }
  .mega-hero-title { font-size: clamp(40px, 9vw, 56px); }
  .mega-hero-car-wrap { inset: 60% 5% 18% 5%; }
  .hero-floater-stat { top: 10%; right: 4%; padding: 12px 16px; }
  .hero-floater-stat .hero-floater-number { font-size: 28px; }
  .hero-floater-receipt,
  .hero-floater-rating { display: none; }
  .hero-accent-orb { filter: blur(80px); }
}

/* ━━━ PARALLAX EVERYWHERE — apply data-parallax to ANY image ━━━ */
.hscroll-slide img[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.05);
}

/* Hide old hero (replaced by mega-hero) */
.hero-scroll-outer { display: none !important; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PHASE 4 — Interactive drop-zone + 3D card stack everywhere
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ━━━ INTERACTIVE DROP-ZONE (replaces static AI-Kvittering floater) ━━━ */
.hero-dropzone {
  position: absolute;
  bottom: 14%;
  left: 6%;
  width: 320px;
  z-index: 6;
  background: rgba(20, 25, 40, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  border: 2px dashed rgba(0, 113, 227, 0.5);
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, background;
  animation: floaterDrift 8s ease-in-out infinite;
}
.hero-dropzone:hover,
.hero-dropzone.is-dragover {
  border-color: rgba(0, 113, 227, 1);
  background: rgba(0, 113, 227, 0.15);
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 24px 48px -12px rgba(0, 113, 227, 0.5),
    0 0 0 6px rgba(0, 113, 227, 0.1);
}
.hero-dropzone-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0071e3, #2997ff);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.4);
  transition: transform 0.4s ease;
}
.hero-dropzone:hover .hero-dropzone-icon { transform: scale(1.1) rotate(-4deg); }
.hero-dropzone-title {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.hero-dropzone-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 16px;
}
.hero-dropzone-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #34c759;
  padding: 4px 10px;
  background: rgba(52, 199, 89, 0.1);
  border-radius: 100px;
}
.hero-dropzone-pulse::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  animation: pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(52, 199, 89, 0.7);
}
.hero-dropzone-input { display: none; }

/* PROCESSING STATE — efter drop, vis animeret AI-flow */
.hero-dropzone.is-processing {
  border-style: solid;
  border-color: rgba(0, 113, 227, 0.6);
  cursor: progress;
}
.hero-dropzone.is-processing .hero-dropzone-default { display: none; }
.hero-dropzone-processing {
  display: none;
  text-align: left;
}
.hero-dropzone.is-processing .hero-dropzone-processing { display: block; }
.processing-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s ease;
}
.processing-step .step-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 10px;
}
.processing-step.active {
  color: #5ac8fa;
}
.processing-step.active .step-icon {
  background: #5ac8fa;
  border-color: #5ac8fa;
  color: #0a0d14;
  animation: pulse 1s ease-in-out infinite;
}
.processing-step.done {
  color: #34c759;
}
.processing-step.done .step-icon {
  background: #34c759;
  border-color: #34c759;
  color: #0a0d14;
}
.processing-step .step-time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

/* DONE STATE — efter processing færdig */
.hero-dropzone.is-done {
  border-color: #34c759;
  background: rgba(52, 199, 89, 0.08);
}
.hero-dropzone.is-done .hero-dropzone-default,
.hero-dropzone.is-done .hero-dropzone-processing { display: none; }
.hero-dropzone-done {
  display: none;
  text-align: center;
}
.hero-dropzone.is-done .hero-dropzone-done { display: block; }
.hero-dropzone-done h4 {
  margin: 8px 0 4px;
  color: #fff;
  font-size: 15px;
}
.hero-dropzone-done p {
  margin: 0 0 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}
.hero-dropzone-done a {
  display: inline-block;
  padding: 8px 16px;
  background: linear-gradient(135deg, #0071e3, #2997ff);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 767px) {
  .hero-dropzone { display: none; } /* Hide on mobile — too cramped */
}

/* ━━━ SHOWROOMS — 3D PERSPECTIVE CAROUSEL (Phase 4 enhancement) ━━━ */
.hscroll-section {
  perspective: 1500px;
}
.hscroll-track {
  transform-style: preserve-3d;
}
.hscroll-slide {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.3);
}
.hscroll-slide:hover {
  transform: perspective(1500px) rotateY(-6deg) rotateX(2deg) scale(1.05) translateZ(40px);
  box-shadow: 0 40px 80px -20px rgba(0, 113, 227, 0.4),
              0 0 0 1px rgba(0, 113, 227, 0.2);
  z-index: 10;
}
.hscroll-slide img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.hscroll-slide:hover img {
  transform: scale(1.1);
}
.hscroll-label {
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* ━━━ FEATURE CARDS — enhanced 3D depth (additive til Phase 1 tilt) ━━━ */
.feature-card {
  position: relative;
  isolation: isolate;
}
.feature-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(0, 113, 227, 0.4), rgba(90, 200, 250, 0.4), transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
  filter: blur(8px);
}
.feature-card:hover::before { opacity: 0.8; }

/* ━━━ PRICING CARDS — 3D tilt on hover ━━━ */
.price-card {
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s ease;
  will-change: transform;
}
.price-card:hover {
  transform: perspective(1500px) translateY(-8px) rotateX(-2deg) scale(1.02);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(0, 113, 227, 0.15);
}

/* ━━━ SHOWCASE-IMAGES — parallax depth ━━━ */
.showcase-section img,
.compare-section img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.showcase-section img:hover,
.compare-section img:hover {
  transform: scale(1.03);
}

/* ━━━ TRUST LOGOS — subtle floating animation ━━━ */
.trust-section {
  position: relative;
}
.trust-section .logo-row > * {
  transition: transform 0.4s ease, opacity 0.4s ease;
  will-change: transform;
}
.trust-section .logo-row > *:hover {
  transform: translateY(-4px) scale(1.08);
  opacity: 1 !important;
}

/* ━━━ CTA SECTION — dramatic gradient + mesh ━━━ */
.cta-section {
  position: relative;
  overflow: hidden;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 800px 600px at 25% 30%, rgba(0, 113, 227, 0.4), transparent 60%),
    radial-gradient(ellipse 600px 700px at 75% 70%, rgba(90, 200, 250, 0.3), transparent 60%);
  filter: blur(80px);
  animation: meshDrift 25s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}
.cta-section > * { position: relative; z-index: 1; }

/* ━━━ REDUCED MOTION FALLBACK ━━━ */
@media (prefers-reduced-motion: reduce) {
  [data-parallax],
  [data-parallax-scale],
  [data-parallax-text],
  [data-rotate-on-scroll],
  .magnetic,
  .tilt-card,
  .hero-aurora,
  .mesh-gradient,
  .depth-orb,
  .reveal-on-scroll,
  .stagger-parent .stagger-child {
    transform: none !important;
    transition: opacity 0.3s !important;
    animation: none !important;
  }
  .reveal-on-scroll,
  .stagger-parent .stagger-child {
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-progress-bar { transition: none !important; }
  .spotlight-section::before { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   PERF — Pause hero-only animations når hero er ude af viewport.
   JS toggler body.hero-out-of-view via IntersectionObserver.
   Sparer GPU på 8+ infinite animations når brugeren er længere nede.
   ─────────────────────────────────────────────────────────────────*/
body.hero-out-of-view .hero-aurora,
body.hero-out-of-view .hero-floater,
body.hero-out-of-view .hero-dropzone,
body.hero-out-of-view .hero-dropzone-pulse::before,
body.hero-out-of-view .mega-hero-eyebrow .pulse-dot,
body.hero-out-of-view .mega-hero-title .gradient-text,
body.hero-out-of-view .mega-hero-scroll-cue,
body.hero-out-of-view .shimmer::after {
  animation-play-state: paused;
}