/* ==========================================================================
   FunnelExpert Landing Page — landing.css
   Self-contained, mobile-first, production-quality
   ========================================================================== */

/* ---------- Google Inter ---------- */
/* Loaded via <link> in HTML — no @import needed */

/* ==========================================================================
   1. Custom Properties (all --lp- prefixed)
   ========================================================================== */
:root {
  /* Core palette */
  --lp-dark: #0A394E;
  --lp-accent: #5C7A7A;
  --lp-muted: #7D9DA8;
  --lp-muted-text: #90B0BA; /* 5.5:1 on dark — AA for normal text */
  --lp-surface: #FCFCFC;
  --lp-highlight: #EE9232;

  /* CTA orange — Apple-clean, no heavy gradients */
  --lp-cta: #ea580c;
  --lp-cta-end: #c2410c;
  --lp-cta-gradient: linear-gradient(135deg, #ea580c, #c2410c);
  --lp-cta-shadow: 0 2px 12px rgba(234, 88, 12, 0.25);
  --lp-cta-hover-gradient: linear-gradient(135deg, #c2410c, #9a3412);
  --lp-cta-active-gradient: linear-gradient(135deg, #9a3412, #7c2d12);

  /* Dark gradients */
  --lp-dark-gradient: linear-gradient(168deg, #124E6C 0%, #0A394E 40%, #061F2E 100%);
  --lp-dark-footer: #061F2E;

  /* Hover states */
  --lp-dark-hover: #0C4862;
  --lp-dark-active: #072D3E;

  /* Typography — Apple-style contrast */
  --lp-body-color: #1d1d1f;
  --lp-text-secondary: #6e6e73;
  --lp-heading-color: #1d1d1f;

  /* Surfaces — Apple greys */
  --lp-surface-alt: #f5f5f7;
  --lp-border: #d2d2d7;

  /* Shadows — ultra subtle, Apple-style */
  --lp-shadow-1: 0 1px 3px rgba(10, 57, 78, 0.04);
  --lp-shadow-2: 0 2px 8px rgba(10, 57, 78, 0.06);
  --lp-shadow-3: 0 4px 16px rgba(10, 57, 78, 0.08);

  /* Radii — larger, Apple-style */
  --lp-radius-sm: 8px;
  --lp-radius-md: 14px;
  --lp-radius-lg: 20px;
  --lp-radius-pill: 980px;

  /* Layout */
  --lp-container-max: 1440px;
  --lp-nav-height: 52px;

  /* Transitions — Apple-style, slow and buttery */
  --lp-transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  --lp-transition-fast: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */
.lp-page,
.lp-page *,
.lp-page *::before,
.lp-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.lp-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--lp-body-color);
  background: var(--lp-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  .lp-page { scroll-behavior: auto; }
}

.lp-page img {
  max-width: 100%;
  height: auto;
  display: block;
}

.lp-page a {
  color: inherit;
  text-decoration: none;
}

/* Buttons override inherited color */
.lp-page a.lp-btn-primary,
.lp-page a.lp-btn-secondary,
.lp-page a.lp-btn-secondary-light,
.lp-page a.lp-btn-ghost {
  color: #fff;
}

.lp-page ul,
.lp-page ol {
  list-style: none;
}

/* ==========================================================================
   3. Layout Utilities
   ========================================================================== */
.lp-container {
  max-width: var(--lp-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
}

.lp-section {
  padding: 64px 0;
  scroll-margin-top: var(--lp-nav-height);
}

@media (min-width: 768px) {
  .lp-section {
    padding: 110px 0;
  }
}

.lp-section-heading {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: var(--lp-heading-color);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.lp-section-heading.light {
  color: var(--lp-surface);
}

.lp-section-sub {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--lp-text-secondary);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
  line-height: 1.6;
}

.lp-section-sub.light {
  color: var(--lp-muted);
}

/* ==========================================================================
   4. Buttons
   ========================================================================== */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1;
  border: none;
  border-radius: var(--lp-radius-pill);
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  min-height: 44px;
  padding: 12px 24px;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.lp-btn:focus-visible {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
}

/* Primary CTA */
.lp-btn-primary {
  background: var(--lp-cta-gradient);
  color: #fff;
  box-shadow: var(--lp-cta-shadow);
}

.lp-btn-primary:hover {
  background: var(--lp-cta-hover-gradient);
  box-shadow: 0 4px 20px rgba(234, 88, 12, 0.3);
  transform: scale(1.03);
}

.lp-btn-primary:active {
  background: var(--lp-cta-active-gradient);
  transform: scale(0.97);
  box-shadow: 0 1px 4px rgba(234, 88, 12, 0.15);
}

/* Secondary — solid on dark, clean contrast */
.lp-btn-secondary {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.lp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.65);
  transform: scale(1.03);
}

.lp-btn-secondary:active {
  background: rgba(255, 255, 255, 0.12);
  transform: scale(0.97);
}

/* Secondary on light background */
.lp-btn-secondary-light {
  background: var(--lp-dark);
  color: #fff;
}

.lp-btn-secondary-light:hover {
  background: var(--lp-dark-hover);
  transform: scale(1.03);
}

.lp-btn-secondary-light:active {
  background: var(--lp-dark-active);
  transform: scale(0.97);
}

/* Ghost (for nav on dark) */
.lp-btn-ghost {
  background: transparent;
  color: var(--lp-surface);
  border: 1.5px solid rgba(252, 252, 252, 0.5);
}

.lp-btn-ghost:hover {
  background: rgba(252, 252, 252, 0.15);
  border-color: rgba(252, 252, 252, 0.7);
}

/* Large button variant */
.lp-btn-lg {
  font-size: 1.0625rem;
  padding: 16px 32px;
  min-height: 50px;
}

/* ==========================================================================
   5. Navigation — .lp-nav
   ========================================================================== */
.lp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--lp-nav-height);
  background: transparent;
  transition: background 0.3s ease-out, box-shadow 0.3s ease-out;
}

.lp-nav.scrolled {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(10, 57, 78, 0.06);
}

.lp-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--lp-container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Logo */
.lp-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  transition: color 0.3s ease-out;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.lp-logo-bg,
.lp-logo-letter {
  transition: fill 0.3s ease-out;
}

/* On dark hero: white text, white box, dark letter */
.lp-logo { color: #fff !important; }
.lp-logo-bg { fill: #FCFCFC; }
.lp-logo-letter { fill: #0A394E; }

/* On scrolled (light nav): dark box, white letter */
.lp-nav.scrolled .lp-logo {
  color: var(--lp-dark) !important;
}

.lp-nav.scrolled .lp-logo-bg { fill: #0A394E; }
.lp-nav.scrolled .lp-logo-letter { fill: #FCFCFC; }

.lp-logo img {
  height: 32px;
  width: auto;
}

/* Desktop links */
.lp-nav-links {
  display: none;
  align-items: center;
  gap: 32px;
}

.lp-nav-links a {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(252, 252, 252, 0.95);
  transition: color 0.2s ease-out;
  position: relative;
  padding: 4px 0;
}

.lp-nav-links a:hover {
  color: #fff;
}

.lp-nav.scrolled .lp-nav-links a {
  color: var(--lp-body-color);
}

.lp-nav.scrolled .lp-nav-links a:hover {
  color: var(--lp-dark);
}

.lp-nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--lp-cta);
  transition: width 0.25s ease-out;
}

.lp-nav-links a:hover::after,
.lp-nav-links a.active::after {
  width: 100%;
}

.lp-nav-links a.active {
  color: #fff;
}

.lp-nav.scrolled .lp-nav-links a.active {
  color: var(--lp-dark);
}

/* Nav CTA */
.lp-nav-cta-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .lp-nav-links {
    display: flex;
  }

  .lp-nav-cta-desktop {
    display: inline-flex;
  }
}

/* Hamburger */
.lp-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}

.lp-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--lp-surface);
  border-radius: 2px;
  transition: var(--lp-transition);
}

.lp-nav.scrolled .lp-hamburger span {
  background: var(--lp-dark);
}

.lp-hamburger span.open:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.lp-hamburger span.open:nth-child(2) {
  opacity: 0;
}

.lp-hamburger span.open:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1024px) {
  .lp-hamburger {
    display: none;
  }
}

/* Nav actions */
.lp-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language toggle — pill style */
.lp-lang-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--lp-radius-pill);
  padding: 2px;
  gap: 1px;
}

.lp-lang-btn {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  border-radius: var(--lp-radius-pill);
  padding: 5px 10px;
  cursor: pointer;
  transition: var(--lp-transition-fast);
  line-height: 1;
}

.lp-lang-btn.active {
  background: rgba(255, 255, 255, 0.95);
  color: var(--lp-dark);
}

.lp-lang-btn:not(.active):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.lp-nav.scrolled .lp-lang-toggle {
  background: rgba(10, 57, 78, 0.05);
}

.lp-nav.scrolled .lp-lang-btn {
  color: var(--lp-text-secondary);
}

.lp-nav.scrolled .lp-lang-btn.active {
  background: var(--lp-dark);
  color: #fff;
}

.lp-nav.scrolled .lp-lang-btn:not(.active):hover {
  color: var(--lp-dark);
  background: rgba(10, 57, 78, 0.08);
}

/* Mobile menu */
.lp-nav-links.open {
  position: fixed;
  top: var(--lp-nav-height);
  left: 0;
  right: 0;
  background: #fff;
  box-shadow: var(--lp-shadow-3);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
}

.lp-nav-links.open a {
  display: block;
  padding: 12px 16px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--lp-dark);
  border-radius: var(--lp-radius-sm);
  transition: background 0.2s ease-out;
  min-height: 44px;
}

.lp-nav-links.open a:hover {
  background: var(--lp-surface-alt);
}

.lp-nav-cta {
  display: block;
  text-align: center;
}

.lp-nav-links.open .lp-nav-cta {
  margin-top: 8px;
}

@media (min-width: 1024px) {
  .lp-nav-cta {
    display: none;
  }
}

/* ==========================================================================
   6. Hero — .lp-hero
   ========================================================================== */
.lp-hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-dark-gradient);
  padding-top: var(--lp-nav-height);
  position: relative;
  overflow: hidden;
}

/* Ambient animation — floating gradient orbs */
.lp-hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  opacity: 0.55;
}

.lp-hero-ambient::before,
.lp-hero-ambient::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

/* Orb 1: warm orange, top-right */
.lp-hero-ambient::before {
  width: 700px;
  height: 700px;
  top: -20%;
  right: -15%;
  background: radial-gradient(circle, rgba(234,88,12,0.55) 0%, rgba(238,146,50,0.2) 40%, transparent 65%);
  animation: lp-float-1 28s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Orb 2: cool teal, bottom-left */
.lp-hero-ambient::after {
  width: 650px;
  height: 650px;
  bottom: -15%;
  left: -10%;
  background: radial-gradient(circle, rgba(67,142,138,0.5) 0%, rgba(18,78,108,0.2) 40%, transparent 65%);
  animation: lp-float-2 32s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes lp-float-1 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  20%  { transform: translate(60px, -40px) scale(1.12); opacity: 0.85; }
  40%  { transform: translate(-30px, 50px) scale(0.9); opacity: 1; }
  60%  { transform: translate(80px, 20px) scale(1.08); opacity: 0.9; }
  80%  { transform: translate(-20px, -30px) scale(0.95); opacity: 1; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

@keyframes lp-float-2 {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  25%  { transform: translate(-50px, 40px) scale(1.1); opacity: 0.9; }
  50%  { transform: translate(40px, -30px) scale(0.88); opacity: 1; }
  75%  { transform: translate(-30px, -50px) scale(1.06); opacity: 0.85; }
  100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* Subtle pattern overlay */
.lp-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(92, 122, 122, 0.15) 0%, transparent 60%),
              radial-gradient(ellipse at 70% 80%, rgba(18, 78, 108, 0.2) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.lp-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 960px;
  padding: 48px 24px;
}

.lp-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(252, 252, 252, 0.12);
  border: 1px solid rgba(252, 252, 252, 0.25);
  border-radius: 100px;
  padding: 10px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.lp-hero-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2D7A5E;
  animation: lp-pulse 2s ease-in-out infinite;
}

@keyframes lp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.lp-hero h1 {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--lp-surface);
  line-height: 1.08;
  margin-bottom: 20px;
  letter-spacing: -0.035em;
}

.lp-hero h1 span {
  background: linear-gradient(135deg, var(--lp-cta), var(--lp-highlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lp-hero-sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--lp-muted);
  line-height: 1.6;
  margin-bottom: 36px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.lp-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

@media (min-width: 480px) {
  .lp-hero-cta {
    flex-direction: row;
    justify-content: center;
  }
}

.lp-hero-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(252, 252, 252, 0.2);
}

.lp-hero-trust span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--lp-muted-text);
}

/* ==========================================================================
   7. Social Proof — .lp-proof
   ========================================================================== */
.lp-proof {
  background: var(--lp-surface-alt);
  border-top: 1px solid var(--lp-border);
  padding: 40px 0;
  position: relative;
  z-index: 2;
}

.lp-proof-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  text-align: center;
  align-items: center;
}

@media (min-width: 768px) {
  .lp-proof-layout {
    grid-template-columns: 1fr 2fr 1fr;
    gap: 32px;
  }
}

.lp-proof-item {
  padding: 12px 24px;
}

@media (min-width: 768px) {
  .lp-proof-item:not(:last-child) {
    border-right: 1px solid var(--lp-border);
  }
}

.lp-proof-item strong {
  display: block;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--lp-dark);
  line-height: 1.2;
}

.lp-proof-item span {
  font-size: 0.9375rem;
  color: var(--lp-text-secondary);
  margin-top: 4px;
}

/* Video preview — overlaps upward into hero */
.lp-proof-video {
  order: -1;
  opacity: 0;
  transform: translateY(60px) scale(0.95);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-proof-video.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* When JS scroll-driven takes over, disable CSS transition to avoid fighting */
.lp-proof-video.scroll-driven {
  transition: none;
}

@media (min-width: 768px) {
  .lp-proof-video {
    order: 0;
  }
}

.lp-proof-video-frame {
  position: relative;
  border-radius: 16px;
  border: 2.5px solid rgba(10, 57, 78, 0.7);
  box-shadow:
    0 12px 50px rgba(10, 57, 78, 0.25),
    0 4px 16px rgba(10, 57, 78, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  background: var(--lp-dark);
  animation: lp-video-breathe 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@media (min-width: 768px) {
  .lp-proof-video-frame {
    margin-top: -200px;
  }
}

.lp-proof-video-frame:hover {
  animation-play-state: paused;
  box-shadow:
    0 20px 70px rgba(10, 57, 78, 0.3),
    0 8px 24px rgba(10, 57, 78, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 40px rgba(234, 88, 12, 0.08);
  transform: translateY(-3px) scale(1.008);
}

/* Subtle breathing pulse — barely perceptible */
@keyframes lp-video-breathe {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 12px 50px rgba(10, 57, 78, 0.25),
      0 4px 16px rgba(10, 57, 78, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    transform: scale(1.006);
    box-shadow:
      0 16px 60px rgba(10, 57, 78, 0.28),
      0 6px 20px rgba(10, 57, 78, 0.14),
      0 0 0 1px rgba(255, 255, 255, 0.1),
      0 0 30px rgba(234, 88, 12, 0.05);
  }
}

/* Video embed + poster */
.lp-proof-video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.lp-proof-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lp-proof-video-poster {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Play button overlay */
.lp-proof-play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(10, 57, 78, 0.5);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border: none;
  cursor: pointer;
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-proof-play:hover {
  background: rgba(10, 57, 78, 0.38);
}

/* Animated play icon with pulse ring */
.lp-proof-play-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--lp-cta-gradient);
  box-shadow: 0 4px 24px rgba(234, 88, 12, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  transition: all 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-proof-play-icon svg {
  margin-left: 3px; /* optical center for play triangle */
}

/* Pulsing ring animation */
.lp-pulse-ring::before,
.lp-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(234, 88, 12, 0.4);
  animation: lp-ring-pulse 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.lp-pulse-ring::after {
  animation-delay: 1.25s;
}

@keyframes lp-ring-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.lp-proof-play:hover .lp-proof-play-icon {
  transform: scale(1.12);
  box-shadow: 0 8px 32px rgba(234, 88, 12, 0.55);
}

/* CTA text + arrow row */
.lp-proof-play-cta {
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Bouncing arrow */
.lp-proof-play-arrow {
  animation: lp-arrow-bounce 1.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes lp-arrow-bounce {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (min-width: 481px) {
  .lp-proof-play-cta { font-size: 1.125rem; }
  .lp-proof-play-icon { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-pulse-ring::before,
  .lp-pulse-ring::after,
  .lp-proof-play-arrow {
    animation: none;
  }

  .lp-proof-video-frame {
    animation: none;
  }

  .lp-proof-video {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   8. Industries — .lp-industries
   ========================================================================== */
.lp-industries {
  background: #fff;
}

.lp-industries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .lp-industries-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lp-industries-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-industry-card {
  background: #fff;
  border-radius: var(--lp-radius-lg);
  padding: 32px 24px;
  box-shadow: var(--lp-shadow-1);
  border: 1px solid var(--lp-border);
  transition: var(--lp-transition);
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

/* Subtle background image on industry cards */
.lp-industry-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.4s ease-out;
  z-index: 0;
}

.lp-industry-card:hover::before {
  opacity: 0.06;
}

/* Set per-card images via inline style or these classes */
.lp-industry-card[data-bg]::before {
  background-image: var(--card-bg);
  opacity: 0.04;
}

.lp-industry-card[data-bg]:hover::before {
  opacity: 0.08;
}

/* Ensure card content stays above background */
.lp-industry-card > * {
  position: relative;
  z-index: 1;
}

.lp-industry-card:hover {
  transform: translateY(-3px) scale(1.015);
  box-shadow: 0 8px 30px rgba(10, 57, 78, 0.08);
  border-color: transparent;
}

.lp-industry-soon {
  opacity: 0.7;
}

.lp-industry-soon:hover {
  opacity: 1;
}

.lp-industry-icon {
  width: 72px;
  height: 72px;
  border-radius: var(--lp-radius-md);
  background: var(--lp-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.lp-industry-tag {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  letter-spacing: 0.3px;
}

.lp-tag-live {
  background: rgba(45, 122, 94, 0.12);
  color: #2D7A5E;
}

.lp-tag-soon {
  background: rgba(196, 122, 26, 0.12);
  color: #C47A1A;
}

.lp-industry-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lp-dark);
  margin-bottom: 8px;
}

.lp-industry-card p {
  font-size: 0.9375rem;
  color: var(--lp-text-secondary);
  line-height: 1.6;
}

.lp-industry-pain {
  color: var(--lp-dark);
  font-weight: 500;
  font-style: italic;
  margin-bottom: 12px;
}

.lp-industry-solution {
  margin-bottom: 16px;
}

.lp-industry-cta {
  margin-top: auto;
  align-self: center;
  font-size: 0.875rem;
  padding: 10px 24px;
}

.lp-industry-coming {
  margin-top: auto;
  align-self: center;
  display: inline-block;
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-text-secondary);
  background: var(--lp-surface-alt);
  border: 1px solid var(--lp-border);
  border-radius: var(--lp-radius-md);
  cursor: default;
}

/* ==========================================================================
   9. Features — .lp-features
   ========================================================================== */
.lp-features {
  background: var(--lp-dark-gradient);
}

.lp-features .lp-section-heading {
  color: var(--lp-surface);
}

.lp-features .lp-section-sub {
  color: var(--lp-muted-text);
}

.lp-features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 768px) {
  .lp-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .lp-features-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.lp-feature-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--lp-radius-lg);
  padding: 32px;
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--lp-transition);
}

.lp-feature-card:hover {
  transform: translateY(-3px) scale(1.015);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.lp-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--lp-radius-md);
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--lp-surface);
  font-size: 1.75rem;
}

.lp-feature-icon svg {
  width: 28px;
  height: 28px;
}

/* Override dark SVG strokes/fills on dark feature cards */
.lp-feature-icon svg [stroke="#0A394E"] { stroke: #FCFCFC; }
.lp-feature-icon svg [fill="#0A394E"] { fill: #FCFCFC; }

.lp-feature-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}

.lp-feature-card p {
  font-size: 0.9375rem;
  color: var(--lp-muted-text);
  line-height: 1.6;
}

/* ==========================================================================
   9. How It Works — .lp-how
   ========================================================================== */
.lp-how {
  background: var(--lp-dark-gradient);
  padding: 80px 0;
}

@media (min-width: 768px) {
  .lp-how {
    padding: 120px 0;
  }
}

.lp-how .lp-section-heading {
  color: var(--lp-surface);
}

.lp-how .lp-section-sub {
  color: var(--lp-muted-text);
}

.lp-step h3 {
  color: #fff !important;
}

.lp-step p {
  color: var(--lp-muted-text) !important;
}

.lp-how-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}

@media (min-width: 768px) {
  .lp-how-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.lp-step {
  text-align: center;
  position: relative;
}

/* Connecting dashed line between steps — desktop only */
@media (min-width: 768px) {
  .lp-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(50% + 36px);
    width: calc(100% - 72px);
    height: 0;
    border-top: 2px dashed rgba(255, 255, 255, 0.2);
    z-index: 0;
  }
}

.lp-step-num {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 auto 20px;
  position: relative;
  z-index: 1;
}

.lp-step h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lp-dark);
  margin-bottom: 8px;
}

.lp-step p {
  font-size: 0.9375rem;
  color: var(--lp-text-secondary);
  line-height: 1.6;
  max-width: 340px;
  margin: 0 auto;
}

/* ==========================================================================
   10. Pricing — .lp-pricing
   ========================================================================== */
.lp-pricing {
  background: #fff;
}

/* Monthly / Yearly toggle */
.lp-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.lp-pricing-toggle span {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--lp-text-secondary);
  cursor: pointer;
  transition: color 0.2s ease-out;
}

.lp-pricing-toggle span.active {
  color: var(--lp-dark);
  font-weight: 600;
}

.lp-toggle {
  width: 48px;
  height: 26px;
  background: var(--lp-border);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease-out;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.lp-toggle-dot {
  display: block;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s ease-out;
  box-shadow: 0 1px 3px rgba(10, 57, 78, 0.15);
}

.lp-toggle-dot.on {
  transform: translateX(22px);
}

.lp-save-badge {
  font-size: 0.875rem;
  font-weight: 600;
  color: #2D7A5E;
  background: #EEFAF4;
  padding: 4px 10px;
  border-radius: 100px;
}

/* Pricing grid */
.lp-pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 768px) {
  .lp-pricing-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}

.lp-price-card {
  background: var(--lp-surface);
  border-radius: var(--lp-radius-lg);
  border: 1px solid var(--lp-border);
  padding: 32px;
  text-align: center;
  transition: var(--lp-transition);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 768px) {
  .lp-price-card {
    border-radius: 0;
  }

  .lp-price-card:first-child {
    border-radius: var(--lp-radius-lg) 0 0 var(--lp-radius-lg);
  }

  .lp-price-card:last-child {
    border-radius: 0 var(--lp-radius-lg) var(--lp-radius-lg) 0;
  }
}

/* Highlighted Pro card */
.lp-price-featured {
  border: 2px solid var(--lp-cta);
  box-shadow: var(--lp-shadow-2);
  z-index: 1;
}

@media (min-width: 768px) {
  .lp-price-featured {
    border-radius: var(--lp-radius-lg);
    transform: scale(1.05);
    padding: 40px 32px;
  }
}

.lp-price-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--lp-cta-gradient);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 100px;
  white-space: nowrap;
  box-shadow: var(--lp-cta-shadow);
}

.lp-price-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--lp-dark);
  margin-bottom: 8px;
}

.lp-price-amount {
  margin-bottom: 16px;
}

.lp-price-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--lp-dark);
  line-height: 1.2;
}

.lp-price-period {
  font-size: 1rem;
  font-weight: 400;
  color: var(--lp-text-secondary);
}

.lp-price-features {
  text-align: left;
  margin-bottom: 28px;
  width: 100%;
}

.lp-price-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 0.9375rem;
  color: var(--lp-body-color);
  line-height: 1.5;
}

.lp-price-features li svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.lp-price-cta {
  width: 100%;
  margin-top: auto;
}

.lp-vat-note {
  text-align: center;
  font-size: 0.875rem;
  color: var(--lp-text-secondary);
  margin-top: 24px;
}

/* ==========================================================================
   11. Testimonial — .lp-testimonial
   ========================================================================== */
.lp-testimonial {
  background: var(--lp-surface-alt);
  position: relative;
  overflow: hidden;
}

/* Background image layer */
.lp-testimonial-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.06;
  z-index: 0;
}

.lp-testimonial > .lp-container {
  position: relative;
  z-index: 1;
}

.lp-testimonial-card {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.lp-quote-icon {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 0.3;
}

.lp-testimonial-card blockquote {
  font-size: clamp(1.125rem, 2.5vw, 1.375rem);
  color: var(--lp-body-color);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.lp-testimonial-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.lp-testimonial-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp-dark);
  border: 2px solid var(--lp-border);
  color: #fff;
  font-weight: 600;
  font-size: 1.125rem;
}

.lp-testimonial-author strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lp-heading-color);
}

.lp-testimonial-author span {
  font-size: 0.875rem;
  color: var(--lp-text-secondary);
}

.lp-testimonial-link {
  font-size: 0.9375rem;
  color: var(--lp-cta);
  transition: color 0.2s ease-out;
  font-weight: 500;
}

.lp-testimonial-link:hover {
  color: var(--lp-cta-end);
}

/* ==========================================================================
   12. FAQ — .lp-faq
   ========================================================================== */
.lp-faq {
  background: #fff;
}

.lp-faq-list {
  max-width: 960px;
  margin: 0 auto;
}

.lp-faq-item {
  border-bottom: 1px solid var(--lp-border);
}

.lp-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lp-dark);
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease-out;
  min-height: 44px;
  line-height: 1.4;
}

.lp-faq-question:hover {
  color: var(--lp-cta);
}

.lp-faq-question:focus-visible {
  outline: 2px solid var(--lp-cta);
  outline-offset: 2px;
  border-radius: var(--lp-radius-sm);
}

.lp-faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--lp-text-secondary);
  transition: transform 0.3s ease-out;
}

.lp-faq-item.open .lp-faq-chevron {
  transform: rotate(180deg);
}

/* FAQ animation handled by Alpine x-collapse plugin */

.lp-faq-answer p {
  padding-bottom: 20px;
  font-size: 0.9375rem;
  color: var(--lp-text-secondary);
  line-height: 1.7;
}

/* ==========================================================================
   13. Final CTA — .lp-final-cta
   ========================================================================== */
.lp-final-cta {
  background: var(--lp-dark-gradient);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Background image layer */
.lp-final-cta-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.1;
  z-index: 0;
}

.lp-final-cta-content {
  position: relative;
  z-index: 1;
}

.lp-final-cta-content h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--lp-surface);
  margin-bottom: 16px;
  line-height: 1.2;
}

.lp-final-cta-content p {
  font-size: clamp(1rem, 2vw, 1.125rem);
  color: var(--lp-muted);
  max-width: 700px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

.lp-final-note {
  display: block;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--lp-muted-text);
}

/* ==========================================================================
   14. Footer — .lp-footer
   ========================================================================== */
.lp-footer {
  background: var(--lp-dark-footer);
  color: var(--lp-muted);
  padding: 56px 0 32px;
}

.lp-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

@media (min-width: 768px) {
  .lp-footer-grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: 32px;
  }
}

@media (min-width: 1024px) {
  .lp-footer-grid {
    grid-template-columns: 2.5fr 1fr 1fr 1fr 1.5fr;
    gap: 28px;
  }
}

.lp-footer-col h4 {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-surface);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.lp-footer-col a {
  display: block;
  font-size: 0.875rem;
  color: var(--lp-muted-text);
  padding: 6px 0;
  transition: color 0.2s ease-out;
  min-height: 44px;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.lp-footer-col a:hover {
  color: var(--lp-surface);
}

.lp-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--lp-surface);
}

.lp-footer-tagline {
  font-size: 0.875rem;
  color: var(--lp-muted-text);
  line-height: 1.5;
}

/* Desktop: keep accessible touch targets */
@media (min-width: 1024px) {
  .lp-footer-col a {
    min-height: 44px;
    padding: 10px 0;
  }
}

.lp-footer-company {
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(252, 252, 252, 0.95);
  margin-top: 8px;
}

.lp-footer-bottom {
  border-top: 1px solid rgba(252, 252, 252, 0.15);
  padding-top: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.lp-footer-bottom p {
  font-size: 0.875rem;
  color: var(--lp-muted-text);
}

.lp-footer-made {
  font-size: 0.875rem;
  color: rgba(252, 252, 252, 0.95);
}

.lp-footer-made a {
  color: #fff;
  text-decoration: underline;
  transition: color 0.2s ease-out;
}

.lp-footer-made a:hover {
  color: var(--lp-surface);
}

/* Legal page content */
.lp-legal {
  max-width: 960px;
  margin: 0 auto;
  padding: 120px 24px 64px;
}

.lp-legal h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--lp-dark);
  margin-bottom: 8px;
}

.lp-legal .lp-legal-updated {
  font-size: 0.875rem;
  color: var(--lp-text-secondary);
  margin-bottom: 40px;
}

.lp-legal h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--lp-dark);
  margin-top: 40px;
  margin-bottom: 16px;
}

.lp-legal h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--lp-dark);
  margin-top: 24px;
  margin-bottom: 12px;
}

.lp-legal p,
.lp-legal li {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--lp-body-color);
  margin-bottom: 12px;
}

.lp-legal ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 16px;
}

.lp-legal a {
  color: var(--lp-cta);
  text-decoration: underline;
}

.lp-legal a:hover {
  color: var(--lp-cta-end);
}

.lp-legal strong {
  font-weight: 600;
  color: var(--lp-dark);
}

/* ==========================================================================
   15. Animations
   ========================================================================== */

/* Fade in on scroll */
.lp-fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children animation */
.lp-stagger > .lp-fade-in:nth-child(1) { transition-delay: 0s; }
.lp-stagger > .lp-fade-in:nth-child(2) { transition-delay: 0.1s; }
.lp-stagger > .lp-fade-in:nth-child(3) { transition-delay: 0.2s; }
.lp-stagger > .lp-fade-in:nth-child(4) { transition-delay: 0.15s; }
.lp-stagger > .lp-fade-in:nth-child(5) { transition-delay: 0.2s; }
.lp-stagger > .lp-fade-in:nth-child(6) { transition-delay: 0.25s; }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .lp-fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .lp-hero-badge-dot {
    animation: none;
  }

  .lp-btn:hover,
  .lp-feature-card:hover,
  .lp-price-featured {
    transform: none;
  }
}

/* ==========================================================================
   9b. Toolkit (What's Inside) — .lp-toolkit
   ========================================================================== */
.lp-toolkit {
  background: var(--lp-surface-alt);
}

.lp-toolkit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .lp-toolkit-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .lp-toolkit-grid {
    grid-template-columns: repeat(8, 1fr);
    gap: 16px;
    max-width: 1100px;
  }
}

.lp-toolkit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px;
  border-radius: var(--lp-radius-lg);
  background: #fff;
  border: 1px solid var(--lp-border);
  transition: var(--lp-transition);
  text-align: center;
}

.lp-toolkit-item:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 6px 20px rgba(10, 57, 78, 0.06);
  border-color: transparent;
}

.lp-toolkit-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--lp-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--lp-dark);
}

.lp-toolkit-item span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lp-heading-color);
  letter-spacing: -0.01em;
}

/* ==========================================================================
   10a. Stoerer Banner — .lp-stoerer
   ========================================================================== */
.lp-stoerer {
  background: var(--lp-dark-gradient);
  padding: 40px 0;
  text-align: center;
}

.lp-stoerer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .lp-stoerer-inner {
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }
}

.lp-stoerer-text {
  font-family: inherit;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin: 0;
}

/* ==========================================================================
   10b. Comparison Table — .lp-compare
   ========================================================================== */
.lp-compare {
  background: var(--lp-surface-alt);
}

.lp-compare-table-wrap {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: var(--lp-radius-lg);
  background: #fff;
  border: 1px solid var(--lp-border);
}

.lp-compare-table-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.85));
  pointer-events: none;
  border-radius: 0 var(--lp-radius-lg) var(--lp-radius-lg) 0;
}

.lp-compare-table {
  width: 100%;
  min-width: 580px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.lp-compare-table thead th {
  padding: 12px 14px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--lp-text-secondary);
  text-align: center;
  border-bottom: 1px solid var(--lp-border);
  white-space: nowrap;
}

.lp-compare-table thead th:first-child {
  text-align: left;
}

.lp-compare-table thead th.lp-compare-highlight {
  color: var(--lp-dark);
  font-size: 0.9375rem;
  position: relative;
}

.lp-compare-table tbody td {
  padding: 10px 14px;
  text-align: center;
  color: var(--lp-text-secondary);
  border-bottom: 1px solid var(--lp-surface-alt);
  font-size: 0.8125rem;
}

.lp-compare-table tbody tr:last-child td {
  border-bottom: none;
}

.lp-compare-table tbody tr:hover {
  background: var(--lp-surface-alt);
}

.lp-compare-feature {
  text-align: left !important;
  font-weight: 500;
  color: var(--lp-heading-color) !important;
}

.lp-compare-table td.lp-compare-highlight {
  background: rgba(234, 88, 12, 0.03);
  color: var(--lp-heading-color);
  font-weight: 600;
}

.lp-compare-table thead th.lp-compare-highlight::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--lp-cta-gradient);
  border-radius: 3px 3px 0 0;
}

.lp-compare-table td svg {
  display: inline-block;
  vertical-align: middle;
}

/* Desktop: reset comparison table scroll hints */
@media (min-width: 768px) {
  .lp-compare-table-wrap { position: static; }
  .lp-compare-table-wrap::after { display: none; }
  .lp-compare-table { min-width: 0; }
  .lp-compare-table thead th { padding: 16px 20px; font-size: 0.875rem; }
  .lp-compare-table tbody td { padding: 14px 20px; font-size: 0.875rem; }
}

/* ==========================================================================
   15b. Why Free? — .lp-why-free
   ========================================================================== */
.lp-why-free {
  background: var(--lp-dark-gradient);
}

.lp-why-free .lp-section-heading {
  color: var(--lp-surface);
}

.lp-why-free .lp-section-sub {
  color: var(--lp-muted-text);
}

.lp-why-free-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 40px;
}

@media (min-width: 768px) {
  .lp-why-free-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.lp-why-free-card {
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--lp-radius-lg);
  padding: 32px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: var(--lp-transition);
}

.lp-why-free-card:hover {
  transform: translateY(-3px) scale(1.015);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.lp-why-free-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

/* Override dark SVG strokes on Why-Free cards */
.lp-why-free-icon svg [stroke="#0A394E"] { stroke: #FCFCFC; }

.lp-why-free-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.3;
}

.lp-why-free-card p {
  font-size: 0.9375rem;
  color: var(--lp-muted-text);
  line-height: 1.6;
}

.lp-why-free-promise {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  color: #3DD68C;
  background: rgba(61, 214, 140, 0.1);
  border: 1px solid rgba(61, 214, 140, 0.2);
  border-radius: var(--lp-radius-md);
  padding: 16px 24px;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  line-height: 1.5;
}

.lp-why-free-promise svg [stroke="#2D7A5E"] { stroke: #3DD68C; }

.lp-why-free-promise svg {
  flex-shrink: 0;
}

/* ==========================================================================
   16. x-cloak (prevent Alpine FOUC)
   ========================================================================== */
[x-cloak] {
  display: none !important;
}

/* Page transitions — smooth language switch with blue overlay */
.lp-page {
  animation: lp-page-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.lp-page.lp-page-exit {
  animation: lp-page-exit 0.4s cubic-bezier(0.4, 0, 1, 1) both;
  pointer-events: none;
}

@keyframes lp-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lp-page-exit {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Blue overlay that covers during transition */
.lp-page::after {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--lp-dark);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 1, 1);
}

.lp-page.lp-page-exit::after {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lp-page,
  .lp-page.lp-page-exit {
    animation: none;
  }
}

/* ==========================================================================
   17. Mobile Menu Backdrop
   ========================================================================== */
.lp-mobile-backdrop {
  position: fixed;
  inset: 0;
  top: var(--lp-nav-height);
  background: rgba(10, 57, 78, 0.4);
  z-index: 998;
}

/* ==========================================================================
   18. Utility Classes
   ========================================================================== */
.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.lp-text-center {
  text-align: center;
}

.lp-mt-0 { margin-top: 0; }
.lp-mb-0 { margin-bottom: 0; }

/* ==========================================================================
   19. Scroll Progress Bar
   ========================================================================== */
.lp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--lp-cta-gradient);
  z-index: 1001;
  transition: none;
  will-change: width;
}

/* ==========================================================================
   20. Scrollytelling — Counter Animation
   ========================================================================== */
.lp-counter[data-target] {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   21. Scrollytelling — Stagger Reveal
   ========================================================================== */
.lp-stagger-grid > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-stagger-grid > *.visible {
  opacity: 1;
  transform: translateY(0);
}

.lp-stagger-grid > *:nth-child(1) { transition-delay: 0s; }
.lp-stagger-grid > *:nth-child(2) { transition-delay: 0.12s; }
.lp-stagger-grid > *:nth-child(3) { transition-delay: 0.24s; }
.lp-stagger-grid > *:nth-child(4) { transition-delay: 0.36s; }
.lp-stagger-grid > *:nth-child(5) { transition-delay: 0.48s; }
.lp-stagger-grid > *:nth-child(6) { transition-delay: 0.60s; }
.lp-stagger-grid > *:nth-child(7) { transition-delay: 0.72s; }
.lp-stagger-grid > *:nth-child(8) { transition-delay: 0.84s; }

/* ==========================================================================
   22. Scrollytelling — Hero Parallax
   ========================================================================== */
.lp-parallax-layer {
  will-change: transform;
}

/* ==========================================================================
   23. Scrollytelling — Step Progression
   ========================================================================== */
.lp-step-line {
  position: absolute;
  top: 28px;
  left: calc(50% + 36px);
  width: calc(100% - 72px);
  height: 2px;
  background: var(--lp-border);
  z-index: 0;
  overflow: hidden;
}

.lp-step-line-fill {
  height: 100%;
  width: 0%;
  background: var(--lp-cta);
  transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.lp-step-line-fill.filled {
  width: 100%;
}

/* ==========================================================================
   24. Scrollytelling — Pricing Scale-In
   ========================================================================== */
.lp-pricing-grid.lp-scale-in > * {
  opacity: 0;
  transform: scale(0.9) translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.lp-pricing-grid.lp-scale-in > *.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.lp-pricing-grid.lp-scale-in > *:nth-child(1) { transition-delay: 0s; }
.lp-pricing-grid.lp-scale-in > *:nth-child(2) { transition-delay: 0.15s; }
.lp-pricing-grid.lp-scale-in > *:nth-child(3) { transition-delay: 0.3s; }