/**
 * Modern Landing Page Styles
 * Flashy, animated, commercial design for MyCompanyDesk
 */

/* Prevent horizontal overflow on mobile. Use `clip`, not `hidden`:
   `overflow-x: hidden` on html/body silently disables `position: sticky`
   for every descendant (it establishes a scroll container). `clip` clips
   the same way but does not, so sticky elements (e.g. the maker previews)
   keep working. */
html,
body {
  overflow-x: clip;
}

/* Animation tokens used by shared/css/mobile-nav.d484ad.css for drawer transitions.
   In the web app these come from apps/web/assets/css/main.css; the landing
   site must define them independently. */
:root {
  --anim-duration-micro: 0.1s;
  --anim-duration-fast: 0.18s;
  --anim-duration-standard: 0.28s;
  --anim-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Comparison table - allow horizontal scroll inside its wrapper */
.landing-comparison-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.landing-comparison-wrap {
  max-width: 1000px;
  margin: 0 auto;
}

.landing-comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.landing-comparison-table th,
.landing-comparison-table td {
  padding: 14px 18px;
  text-align: center;
  border-bottom: 1px solid var(--landing-border);
  color: var(--landing-text-secondary);
}

.landing-comparison-table th {
  font-weight: 700;
  color: var(--landing-text);
  font-size: 0.95rem;
  padding-bottom: 18px;
}

.landing-comparison-feature-col {
  text-align: left !important;
  font-weight: 500;
}

.landing-comparison-highlight {
  background: color-mix(in srgb, var(--landing-accent) 6%, transparent);
  font-weight: 600;
}

.landing-comparison-value-good {
  color: var(--landing-accent-2);
  font-weight: 700;
}

.landing-comparison-value-partial {
  color: var(--landing-accent-3);
}

.landing-comparison-value-bad {
  color: var(--landing-text-faint);
}

.landing-comparison-footnote {
  text-align: center;
  font-size: 0.8rem;
  color: var(--landing-text-faint);
  margin-top: 16px;
}

/* Shared "this is general information, not tax advice" block. Sits at the foot
   of every guide page and next to the calculators, so a reader never takes a
   number off this site as a ruling. */
.landing-legal-disclaimer {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 48px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--landing-text-faint);
}

/* Quantified savings summary (sits above the comparison table) */
.landing-savings {
  max-width: 900px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: stretch;
}

.landing-savings-col {
  background: var(--landing-bg-card);
  border: 1px solid var(--landing-border);
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--landing-shadow-card);
}

.landing-savings-col-mcd {
  border-color: var(--landing-border-accent);
  background: color-mix(in srgb, var(--landing-accent) 5%, var(--landing-bg-card));
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.landing-savings-label {
  margin: 0 0 14px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--landing-text-muted);
}

.landing-savings-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.landing-savings-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--landing-text-secondary);
}

.landing-savings-list li > span:last-child {
  font-weight: 600;
  color: var(--landing-text);
  white-space: nowrap;
}

.landing-savings-list .landing-savings-extra {
  font-weight: 500 !important;
  color: var(--landing-text-faint) !important;
  font-style: italic;
}

.landing-savings-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--landing-border);
  font-weight: 700;
  color: var(--landing-text);
}

.landing-savings-total-value {
  font-size: 1.3rem;
}

.landing-savings-per {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--landing-text-muted);
  margin-left: 2px;
}

.landing-savings-plan-name {
  margin: 2px 0 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--landing-text);
}

.landing-savings-mcd-value {
  margin: 4px 0;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--landing-accent-2);
}

.landing-savings-stack-sub {
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--landing-text-muted);
}

/* Integration data-flow (one concrete path, not an assertion) */
.landing-flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
}

.landing-flow-step {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--landing-border);
  border-radius: 18px;
  background: var(--landing-bg-card);
  box-shadow: var(--landing-shadow-card);
}

.landing-flow-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--landing-accent) 12%, transparent);
  color: var(--landing-accent);
}

.landing-flow-icon i {
  width: 22px;
  height: 22px;
}

.landing-flow-step-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--landing-text);
}

.landing-flow-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-accent-2);
}

.landing-flow-arrow i {
  width: 24px;
  height: 24px;
}

.landing-flow-note {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--landing-text-muted);
}

/* Trust / continuity cards (your data is yours) */
.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
}

.landing-trust-card {
  padding: 24px;
  border: 1px solid var(--landing-border);
  border-radius: 18px;
  background: var(--landing-bg-card);
  box-shadow: var(--landing-shadow-card);
}

.landing-trust-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--landing-accent) 12%, transparent);
  color: var(--landing-accent);
}

.landing-trust-card-icon i {
  width: 22px;
  height: 22px;
}

.landing-trust-card-title {
  margin: 0 0 6px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--landing-text);
}

.landing-trust-card-text {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--landing-text-muted);
}

.landing-trust-card-text a {
  color: var(--landing-accent);
  font-weight: 600;
  text-decoration: none;
}

.landing-trust-card-text a:hover {
  text-decoration: underline;
}

/* --- Het verhaal (founder story page) --- */
.verhaal-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

.verhaal-hero-copy {
  flex: 1;
  min-width: 0;
}

.verhaal-hero-title {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--landing-text);
  margin: 16px 0;
}

.verhaal-hero-lede {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--landing-text-muted);
  margin: 0;
  max-width: 34ch;
}

.verhaal-hero-figure {
  flex-shrink: 0;
  width: 300px;
  margin: 0;
  text-align: center;
}

.verhaal-hero-photo {
  width: 300px;
  height: 375px;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--landing-border);
  box-shadow: var(--landing-shadow-card);
}

.verhaal-hero-caption {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--landing-text-muted);
}

.verhaal-prose {
  max-width: 680px;
  margin: 0 auto;
}

.verhaal-prose p {
  font-size: 1.075rem;
  line-height: 1.8;
  color: var(--landing-text);
  margin: 0 0 24px;
}

.verhaal-prose h2 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--landing-text);
  margin: 44px 0 16px;
}

.verhaal-quote {
  margin: 40px 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--landing-accent);
  font-size: 1.5rem;
  line-height: 1.45;
  font-weight: 700;
  color: var(--landing-text);
}

.verhaal-figure {
  margin: 32px 0;
}

.verhaal-figure img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--landing-border);
  box-shadow: var(--landing-shadow-card);
}

.verhaal-figure figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--landing-text-muted);
  text-align: center;
}

.verhaal-sign {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--landing-border);
}

.verhaal-sign-name {
  font-weight: 700;
  color: var(--landing-text);
}

.verhaal-sign-role {
  font-size: 0.95rem;
  color: var(--landing-text-muted);
}

@media (max-width: 820px) {
  .verhaal-hero-inner {
    flex-direction: column-reverse;
    text-align: center;
    gap: 28px;
  }

  .verhaal-hero-lede {
    max-width: none;
  }

  .verhaal-hero-figure {
    width: 220px;
  }

  .verhaal-hero-photo {
    width: 220px;
    height: 275px;
  }
}

@media (max-width: 880px) {
  .landing-flow {
    flex-direction: column;
    align-items: stretch;
    max-width: 460px;
  }

  .landing-flow-arrow {
    transform: rotate(90deg);
    padding: 2px 0;
  }
}

.landing-savings-mcd-note {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--landing-text-muted);
}

.landing-savings-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--landing-text-faint);
}

.landing-savings-headline {
  max-width: 900px;
  margin: 0 auto 36px;
  padding: 22px 28px;
  text-align: center;
  border: 1px solid var(--landing-border-accent);
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--landing-accent-2) 12%, transparent),
    color-mix(in srgb, var(--landing-accent) 10%, transparent)
  );
}

.landing-savings-headline strong {
  display: block;
  margin-bottom: 4px;
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--landing-text);
}

/* The calculator swaps prompt and result with the [hidden] attribute. Without
   this, `display: block` above beats the UA [hidden] rule and BOTH lines show,
   so the page claims a saving before the visitor has ticked anything. */
.landing-savings-headline strong[hidden] {
  display: none;
}

.landing-savings-headline > span {
  font-size: 0.95rem;
  color: var(--landing-text-muted);
}

.landing-savings-amount {
  color: var(--landing-accent-2);
}

/* Interactive calculator controls */
.landing-savings-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}

.landing-savings-tool input[type="checkbox"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--landing-accent);
  cursor: pointer;
}

.landing-savings-tool-name {
  flex: 1 1 auto;
}

.landing-savings-tool-price {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 600;
  color: var(--landing-text);
  white-space: nowrap;
}

/* The amount is the visitor's own number, so it is a real input, not a label. */
.landing-savings-tool-input {
  width: 4.4rem;
  padding: 5px 7px;
  border: 1px solid var(--landing-border);
  border-radius: 8px;
  background: var(--landing-bg-card);
  color: var(--landing-text);
  font: inherit;
  font-weight: 600;
  text-align: right;
  cursor: text;
}

.landing-savings-tool-input:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 1px;
}

.landing-savings-tool input[type="checkbox"]:not(:checked) ~ .landing-savings-tool-name {
  color: var(--landing-text-faint);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--landing-text-faint) 60%, transparent);
}

.landing-savings-tool input[type="checkbox"]:not(:checked) ~ .landing-savings-tool-price {
  color: var(--landing-text-faint);
}

.landing-savings-tool
  input[type="checkbox"]:not(:checked)
  ~ .landing-savings-tool-price
  .landing-savings-tool-input {
  color: var(--landing-text-faint);
  background: transparent;
}

/* Sources live in a details block so the widget stays calm but the numbers
   stay checkable: every default price links to the provider's own page. */
.landing-savings-sources {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--landing-text-muted);
  text-align: left;
}

.landing-savings-sources summary {
  cursor: pointer;
  font-weight: 600;
  text-align: center;
}

.landing-savings-sources p {
  margin: 8px 0 0;
  line-height: 1.6;
}

.landing-savings-sources a {
  color: var(--landing-accent-2);
  text-decoration: underline;
}

.landing-savings-plan {
  display: inline-flex;
  gap: 4px;
  margin: 2px auto 12px;
  padding: 4px;
  border: 1px solid var(--landing-border);
  border-radius: 12px;
  background: var(--landing-bg-subtle);
}

.landing-savings-plan-btn {
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--landing-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--landing-transition);
}

.landing-savings-plan-btn.active {
  background: var(--landing-bg-card);
  color: var(--landing-text);
  box-shadow: var(--landing-shadow-card);
}

@media (max-width: 640px) {
  .landing-savings {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-savings-vs {
    padding: 2px 0;
  }

  .landing-savings-headline strong {
    font-size: 1.4rem;
  }
}

/* ============================================
 * FOUC (Flash of Untranslated Content) PREVENTION
 * Hide translatable content until i18n is applied.
 * The i18n-ready class is added by landing-i18n.js.
 * CSS-only fallback: if JS never adds the class, the
 * fouc-reveal animation guarantees visibility after 1.5s.
 * ============================================ */
html:not(.i18n-ready) [data-i18n],
html:not(.i18n-ready) [data-i18n-placeholder] {
  opacity: 0;
  animation: fouc-reveal 0.01s 1.5s forwards;
}
@keyframes fouc-reveal {
  to {
    opacity: 1;
  }
}
html.i18n-ready [data-i18n],
html.i18n-ready [data-i18n-placeholder] {
  opacity: 1;
  animation: none;
}

/* ============================================
 * PAGE ENTRANCE ANIMATION
 * A short fade-in on page load smooths the transition
 * between landing pages by masking the brief moment when
 * scripts initialise translations and scroll animations.
 * ============================================ */
@keyframes page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.app-landing {
  animation: page-enter 0.2s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .app-landing {
    animation: none;
  }
}

/* ============================================
 * CSS CUSTOM PROPERTIES FOR LANDING
 * ============================================ */
:root {
  /* Shared */
  --landing-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --landing-nav-height: 76px;
  --landing-nav-float-y: 12px;
  --landing-nav-float-x: 16px;

  /* Accent colors - Pro violet primary (matches in-app Pro tier accent
     #7c3aed / --color-purple), teal-green secondary. The landing is
     Pro-forward (60-day Pro trial, the EUR25 stack comparison), so the
     hero/primary accent leads on the Pro violet.
     Starter (teal) stays reserved for explicit Starter/tier contexts. */
  --landing-accent: #7c3aed;
  --landing-accent-2: #059669;
  --landing-accent-3: #f59e0b;

  /* Gradients (decorative, used in hero etc.) */
  --landing-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --landing-gradient-2: linear-gradient(135deg, var(--landing-accent) 0%, #0ea5e9 100%);
  --landing-gradient-3: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --landing-gradient-4: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);

  /* Light theme (default) */
  --landing-gradient-hero: linear-gradient(
    160deg,
    #f8fafc 0%,
    #eef2ff 40%,
    #f0fdf4 70%,
    #f8fafc 100%
  );
  --landing-glow: 0 0 60px rgba(37, 99, 235, 0.12);
  --landing-glow-purple: 0 0 60px rgba(5, 150, 105, 0.1);

  /* Theme-aware surface colors */
  --landing-bg-deep: #f4f8fd;
  --landing-bg-section: #ffffff;
  --landing-bg-section-alt: #f3f8ff;
  --landing-bg-card: rgba(255, 255, 255, 0.94);
  --landing-bg-card-hover: rgba(255, 255, 255, 1);
  --landing-bg-subtle: rgba(0, 0, 0, 0.02);
  --landing-bg-subtle-hover: rgba(0, 0, 0, 0.04);

  /* Text */
  --landing-text: #0f172a;
  --landing-text-secondary: #1e293b;
  --landing-text-muted: #64748b;
  --landing-text-faint: #94a3b8;

  /* Borders */
  --landing-border: rgba(15, 23, 42, 0.08);
  --landing-border-hover: rgba(15, 23, 42, 0.14);
  --landing-border-accent: rgba(124, 58, 237, 0.25);

  /* Shadows */
  --landing-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --landing-shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04);
  --landing-shadow-hero-img: 0 32px 64px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --landing-shadow-footer: 0 -8px 30px rgba(0, 0, 0, 0.04);

  /* Nav */
  --landing-nav-bg: rgba(255, 255, 255, 0.86);
  --landing-nav-bg-scrolled: rgba(255, 255, 255, 0.95);
  --landing-nav-border: rgba(15, 23, 42, 0.08);
  --landing-nav-link-color: #334155;
  --landing-nav-link-hover-bg: rgba(0, 0, 0, 0.04);

  /* Stats section gradient */
  --landing-stats-gradient: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #0ea5e9 100%);

  /* CTA */
  --landing-cta-gradient: linear-gradient(180deg, #ffffff 0%, #eef2ff 100%);

  /* Footer */
  --landing-footer-bg: #f3f7fc;
  --landing-footer-border: rgba(15, 23, 42, 0.08);
  --landing-footer-text: #475569;
  --landing-footer-text-faint: #64748b;
  --landing-footer-heading: #0f172a;

  /* Cookie banner */
  --landing-cookie-bg: linear-gradient(
    180deg,
    rgba(15, 23, 42, 0.95) 0%,
    rgba(15, 23, 42, 0.98) 100%
  );
  --landing-cookie-border: rgba(255, 255, 255, 0.1);
  --landing-cookie-text: rgba(255, 255, 255, 0.85);
  --landing-cookie-btn-secondary-bg: rgba(255, 255, 255, 0.1);
  --landing-cookie-btn-secondary-text: rgba(255, 255, 255, 0.9);
  --landing-cookie-btn-secondary-border: rgba(255, 255, 255, 0.2);

  /* Button (Pro violet, leads the brand feel) */
  --landing-btn-primary-gradient: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  --landing-btn-primary-text: #ffffff;
  --landing-btn-primary-shadow: 0 4px 14px rgba(124, 58, 237, 0.25);
  --landing-btn-primary-shadow-hover: 0 8px 24px rgba(124, 58, 237, 0.35);
  --landing-btn-secondary-bg: transparent;
  --landing-btn-secondary-text: #1e293b;
  --landing-btn-secondary-border: rgba(0, 0, 0, 0.12);
  --landing-btn-secondary-hover-bg: rgba(0, 0, 0, 0.04);
  --landing-btn-secondary-hover-border: rgba(0, 0, 0, 0.2);

  /* Feature icon backgrounds (these accent-colored icons work in both themes) */
  --landing-feature-icon-blue-bg: linear-gradient(
    135deg,
    rgba(37, 99, 235, 0.12) 0%,
    rgba(37, 99, 235, 0.04) 100%
  );
  --landing-feature-icon-blue-color: #2563eb;
  /* Starter tier accent — sRGB equivalent of the in-app Starter teal (--tier-starter, oklch 0.55 0.13 195) */
  --landing-feature-icon-teal-bg: linear-gradient(
    135deg,
    rgba(0, 136, 137, 0.12) 0%,
    rgba(0, 136, 137, 0.04) 100%
  );
  --landing-feature-icon-teal-color: #008889;
  --landing-feature-icon-green-bg: linear-gradient(
    135deg,
    rgba(5, 150, 105, 0.12) 0%,
    rgba(5, 150, 105, 0.04) 100%
  );
  --landing-feature-icon-green-color: #059669;
  --landing-feature-icon-purple-bg: linear-gradient(
    135deg,
    rgba(124, 58, 237, 0.12) 0%,
    rgba(124, 58, 237, 0.04) 100%
  );
  --landing-feature-icon-purple-color: #7c3aed;
  --landing-feature-icon-orange-bg: linear-gradient(
    135deg,
    rgba(245, 158, 11, 0.12) 0%,
    rgba(245, 158, 11, 0.04) 100%
  );
  --landing-feature-icon-orange-color: #d97706;
  --landing-feature-icon-pink-bg: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.12) 0%,
    rgba(236, 72, 153, 0.04) 100%
  );
  --landing-feature-icon-pink-color: #db2777;

  /* Particle & decorative */
  --landing-particle-color: rgba(124, 58, 237, 0.3);
  --landing-hero-glow-1: radial-gradient(ellipse, rgba(124, 58, 237, 0.07) 0%, transparent 70%);
  --landing-hero-glow-2: radial-gradient(ellipse, rgba(5, 150, 105, 0.05) 0%, transparent 60%);

  /* Showcase */
  --landing-showcase-bg: linear-gradient(180deg, #eef2ff 0%, #f8fafc 100%);

  /* Testimonials */
  --landing-testimonials-bg: #f8fafc;

  /* Section badge — Pro violet to match the hero/primary brand accent */
  --landing-section-badge-bg: rgba(124, 58, 237, 0.08);
  --landing-section-badge-border: rgba(124, 58, 237, 0.2);
  --landing-section-badge-color: #7c3aed;

  /* Title gradient for hero text (Pro violet into teal-green) */
  --landing-title-gradient: linear-gradient(135deg, #7c3aed 0%, #059669 70%, #0ea5e9 100%);

  /* Language selector */
  --landing-lang-bg: rgba(15, 23, 42, 0.03);
  --landing-lang-border: rgba(15, 23, 42, 0.1);
  --landing-lang-text: #334155;
  --landing-selector-focus-ring: rgba(124, 58, 237, 0.2);
  --landing-lang-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* Nav links pill bg */
  --landing-nav-pill-bg: rgba(0, 0, 0, 0.02);
  --landing-nav-pill-border: rgba(0, 0, 0, 0.05);
  --landing-nav-active-bg: rgba(124, 58, 237, 0.08);
  --landing-nav-active-color: #7c3aed;

  /* Screenshot card */
  --landing-screenshot-border: rgba(0, 0, 0, 0.06);

  /* Hero badge */
  --landing-hero-badge-bg: rgba(124, 58, 237, 0.06);
  --landing-hero-badge-border: rgba(124, 58, 237, 0.16);

  /* CTA glow */
  --landing-cta-glow: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.05) 0%,
    transparent 60%
  );

  /* Legal + FAQ readability */
  --landing-meta-text: #64748b;
  --landing-contact-text: #334155;
  --landing-faq-item-bg: rgba(255, 255, 255, 0.72);
  --landing-faq-item-border: rgba(15, 23, 42, 0.11);
  --landing-faq-item-border-hover: rgba(37, 99, 235, 0.3);
  --landing-faq-question-text: #0f172a;
  --landing-faq-answer-text: #334155;
}

/* ============================================
 * DARK THEME OVERRIDES
 * ============================================ */
[data-theme="dark"] {
  --landing-accent: #a78bfa;
  --landing-accent-2: #34d399;
  --landing-accent-3: #fbbf24;

  --landing-gradient-hero: linear-gradient(
    160deg,
    #0a0f1e 0%,
    #111936 40%,
    #0d1526 70%,
    #0a0f1e 100%
  );
  --landing-glow: 0 0 60px rgba(96, 165, 250, 0.2);
  --landing-glow-purple: 0 0 60px rgba(52, 211, 153, 0.15);

  --landing-bg-deep: #080d1a;
  --landing-bg-section: #0a0f1e;
  --landing-bg-section-alt: #0f1629;
  --landing-bg-card: rgba(15, 22, 41, 0.8);
  --landing-bg-card-hover: rgba(22, 32, 56, 0.9);
  --landing-bg-subtle: rgba(255, 255, 255, 0.03);
  --landing-bg-subtle-hover: rgba(255, 255, 255, 0.06);

  --landing-text: #f1f5f9;
  --landing-text-secondary: #e2e8f0;
  --landing-text-muted: #94a3b8;
  --landing-text-faint: #64748b;

  --landing-border: rgba(255, 255, 255, 0.06);
  --landing-border-hover: rgba(255, 255, 255, 0.12);
  --landing-border-accent: rgba(167, 139, 250, 0.25);

  --landing-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --landing-shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.08);
  --landing-shadow-hero-img: 0 32px 64px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --landing-shadow-footer: 0 -8px 30px rgba(0, 0, 0, 0.3);

  --landing-nav-bg: rgba(10, 15, 30, 0.8);
  --landing-nav-bg-scrolled: rgba(10, 15, 30, 0.92);
  --landing-nav-border: rgba(255, 255, 255, 0.06);
  --landing-nav-link-color: rgba(255, 255, 255, 0.65);
  --landing-nav-link-hover-bg: rgba(255, 255, 255, 0.06);

  --landing-stats-gradient: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #0c4a6e 100%);
  --landing-cta-gradient: linear-gradient(180deg, #0a0f1e 0%, #111936 100%);

  --landing-footer-bg: #080d1a;
  --landing-footer-border: rgba(255, 255, 255, 0.06);
  --landing-footer-text: rgba(255, 255, 255, 0.55);
  --landing-footer-text-faint: rgba(255, 255, 255, 0.4);
  --landing-footer-heading: #f1f5f9;

  --landing-cookie-bg: linear-gradient(
    180deg,
    rgba(10, 15, 30, 0.95) 0%,
    rgba(8, 13, 26, 0.98) 100%
  );
  --landing-cookie-border: rgba(255, 255, 255, 0.08);
  --landing-cookie-text: rgba(255, 255, 255, 0.85);
  --landing-cookie-btn-secondary-bg: rgba(255, 255, 255, 0.08);
  --landing-cookie-btn-secondary-text: rgba(255, 255, 255, 0.9);
  --landing-cookie-btn-secondary-border: rgba(255, 255, 255, 0.15);

  --landing-btn-primary-gradient: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
  --landing-btn-primary-text: #ffffff;
  --landing-btn-primary-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
  --landing-btn-primary-shadow-hover: 0 8px 24px rgba(124, 58, 237, 0.45);
  --landing-btn-secondary-bg: transparent;
  --landing-btn-secondary-text: #f1f5f9;
  --landing-btn-secondary-border: rgba(255, 255, 255, 0.15);
  --landing-btn-secondary-hover-bg: rgba(255, 255, 255, 0.06);
  --landing-btn-secondary-hover-border: rgba(255, 255, 255, 0.3);

  --landing-feature-icon-blue-bg: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.15) 0%,
    rgba(96, 165, 250, 0.05) 100%
  );
  --landing-feature-icon-blue-color: #60a5fa;
  /* Starter tier accent, dark — sRGB equivalent of the in-app dark Starter teal (oklch 0.72 0.13 195) */
  --landing-feature-icon-teal-bg: linear-gradient(
    135deg,
    rgba(0, 189, 190, 0.15) 0%,
    rgba(0, 189, 190, 0.05) 100%
  );
  --landing-feature-icon-teal-color: #00bdbe;
  --landing-feature-icon-green-bg: linear-gradient(
    135deg,
    rgba(52, 211, 153, 0.15) 0%,
    rgba(52, 211, 153, 0.05) 100%
  );
  --landing-feature-icon-green-color: #34d399;
  --landing-feature-icon-purple-bg: linear-gradient(
    135deg,
    rgba(167, 139, 250, 0.15) 0%,
    rgba(167, 139, 250, 0.05) 100%
  );
  --landing-feature-icon-purple-color: #a78bfa;
  --landing-feature-icon-orange-bg: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.15) 0%,
    rgba(251, 191, 36, 0.05) 100%
  );
  --landing-feature-icon-orange-color: #fbbf24;
  --landing-feature-icon-pink-bg: linear-gradient(
    135deg,
    rgba(244, 114, 182, 0.15) 0%,
    rgba(244, 114, 182, 0.05) 100%
  );
  --landing-feature-icon-pink-color: #f472b6;

  --landing-particle-color: rgba(167, 139, 250, 0.4);
  --landing-hero-glow-1: radial-gradient(ellipse, rgba(167, 139, 250, 0.1) 0%, transparent 70%);
  --landing-hero-glow-2: radial-gradient(ellipse, rgba(52, 211, 153, 0.06) 0%, transparent 60%);

  --landing-showcase-bg: linear-gradient(180deg, #111936 0%, #0a0f1e 100%);
  --landing-testimonials-bg: #0a0f1e;

  --landing-section-badge-bg: rgba(167, 139, 250, 0.12);
  --landing-section-badge-border: rgba(167, 139, 250, 0.28);
  --landing-section-badge-color: #a78bfa;

  --landing-title-gradient: linear-gradient(135deg, #a78bfa 0%, #34d399 70%, #60a5fa 100%);

  --landing-lang-bg: rgba(255, 255, 255, 0.05);
  --landing-lang-border: rgba(255, 255, 255, 0.1);
  --landing-lang-text: #f1f5f9;
  --landing-selector-focus-ring: rgba(167, 139, 250, 0.3);
  --landing-lang-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  --landing-nav-pill-bg: rgba(255, 255, 255, 0.03);
  --landing-nav-pill-border: rgba(255, 255, 255, 0.06);
  --landing-nav-active-bg: rgba(167, 139, 250, 0.12);
  --landing-nav-active-color: #a78bfa;

  --landing-screenshot-border: rgba(255, 255, 255, 0.06);

  --landing-hero-badge-bg: rgba(167, 139, 250, 0.12);
  --landing-hero-badge-border: rgba(167, 139, 250, 0.22);

  --landing-cta-glow: radial-gradient(
    ellipse at center,
    rgba(167, 139, 250, 0.07) 0%,
    transparent 60%
  );

  --landing-meta-text: rgba(255, 255, 255, 0.6);
  --landing-contact-text: rgba(255, 255, 255, 0.85);
  --landing-faq-item-bg: rgba(255, 255, 255, 0.03);
  --landing-faq-item-border: rgba(255, 255, 255, 0.08);
  --landing-faq-item-border-hover: rgba(96, 165, 250, 0.35);
  --landing-faq-question-text: #ffffff;
  --landing-faq-answer-text: rgba(255, 255, 255, 0.7);
}

.landing-meta-text {
  color: var(--landing-meta-text);
}

.landing-contact-copy {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  color: var(--landing-contact-text);
  line-height: 1.8;
}

/* ============================================
 * KEYFRAME ANIMATIONS
 * ============================================ */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px color-mix(in srgb, var(--landing-accent) 38%, transparent);
  }
  50% {
    box-shadow: 0 0 40px color-mix(in srgb, var(--landing-accent) 62%, transparent);
  }
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes bounce-subtle {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes ledger-drift {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes coin-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  40% {
    transform: translateY(-5px) scale(1.05);
  }
  70% {
    transform: translateY(0) scale(0.97);
  }
}

@keyframes growth-rise {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

@keyframes bell-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(8deg);
  }
  40% {
    transform: rotate(-8deg);
  }
  60% {
    transform: rotate(6deg);
  }
  80% {
    transform: rotate(-3deg);
  }
}

@keyframes orbit-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes icon-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.85;
  }
}

/* ============================================
 * MODERN NAVIGATION BAR
 * ============================================ */
.landing-nav {
  position: fixed;
  top: var(--landing-nav-float-y);
  left: var(--landing-nav-float-x);
  right: var(--landing-nav-float-x);
  height: var(--landing-nav-height);
  background: var(--landing-nav-bg);
  backdrop-filter: blur(24px) saturate(1.8);
  -webkit-backdrop-filter: blur(24px) saturate(1.8);
  border: 1px solid var(--landing-nav-border);
  border-radius: 16px;
  z-index: 1000;
  transition:
    top 0.35s var(--landing-transition),
    left 0.35s var(--landing-transition),
    right 0.35s var(--landing-transition),
    background 0.35s var(--landing-transition),
    border-radius 0.35s var(--landing-transition),
    border-color 0.35s var(--landing-transition),
    box-shadow 0.35s var(--landing-transition);
}

.landing-nav.scrolled {
  top: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  background: var(--landing-nav-bg-scrolled);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.04);
  border-color: transparent;
  border-bottom: 1px solid var(--landing-nav-border);
}

.landing-nav-inner {
  max-width: 1480px;
  margin: 0 auto;
  height: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(20px, 2.4vw, 40px);
  padding: 0 clamp(20px, 2.5vw, 36px);
}

.landing-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.landing-nav-logo {
  height: 36px;
  width: auto;
  transition: transform 0.3s ease;
}

.landing-nav-logo:hover {
  transform: scale(1.05);
}

.landing-nav-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--landing-text) 0%, var(--landing-accent) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: auto;
  max-width: min(900px, 100%);
  gap: 2px;
  flex-wrap: nowrap;
  padding: 0;
  border-radius: 0;
  border: none;
  background: none;
  overflow: visible;
}

.landing-nav-link {
  padding: 8px 14px;
  color: var(--landing-nav-link-color);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  border-radius: 999px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
  position: relative;
  line-height: 1.2;
  white-space: nowrap;
}

.landing-nav-link:hover {
  color: var(--landing-text);
  background: var(--landing-nav-link-hover-bg);
}

.landing-nav-link.active {
  color: var(--landing-nav-active-color);
  background: var(--landing-nav-active-bg);
  font-weight: 600;
}

.landing-nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.landing-nav-cta .landing-btn {
  padding: 9px 20px;
  font-size: 13.5px;
  border-radius: 999px;
}

.landing-nav-cta .landing-btn-secondary {
  border-width: 1.5px;
}

@media (max-width: 1200px) {
  .landing-nav-inner {
    padding: 0 18px;
    column-gap: 12px;
  }

  .landing-nav-title {
    font-size: 17px;
  }

  .landing-nav-link {
    padding: 7px 10px;
    font-size: 13px;
  }

  .landing-nav-links {
    max-width: min(680px, 100%);
  }

  .landing-nav-cta {
    gap: 8px;
  }

  .landing-nav-cta .landing-btn {
    padding: 8px 16px;
    font-size: 13px;
  }
}

@media (min-width: 1025px) and (max-width: 1320px) {
  .landing-nav-inner {
    column-gap: clamp(10px, 1.4vw, 20px);
  }

  .landing-nav-links {
    gap: 1px;
  }

  .landing-nav-link {
    padding-inline: 10px;
    font-size: 13px;
  }

  .landing-nav-cta {
    gap: 8px;
  }
}

/* ============================================
 * LANGUAGE SELECTOR
 * ============================================ */
.language-selector {
  display: flex;
  align-items: center;
  /* Reserve space to prevent layout shift when JS populates the select */
  min-width: 90px;
  min-height: 38px;
}

.language-select {
  background: var(--landing-lang-bg);
  border: 1px solid var(--landing-lang-border);
  color: var(--landing-lang-text);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s ease;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--landing-lang-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

.language-select:hover {
  background-color: var(--landing-nav-link-hover-bg);
  border-color: var(--landing-border-hover);
}

.language-select:focus {
  outline: none;
  border-color: var(--landing-accent);
  box-shadow: 0 0 0 3px var(--landing-selector-focus-ring);
}

.language-select option {
  background: var(--landing-bg-section);
  color: var(--landing-text);
  padding: 8px;
}

/* ─── Flag-based language dropdown ─── */

.language-selector-wrapper {
  position: relative;
  display: inline-block;
}

.language-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  background-image: none;
  padding-right: 12px;
}

.language-flag {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.language-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--landing-bg-section, #fff);
  border: 1px solid var(--landing-lang-border, #e2e8f0);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 140px;
  max-height: 320px;
  overflow-y: auto;
}

.language-dropdown.open {
  display: block;
}

/* Footer dropdown opens upward to avoid clipping at page bottom */
.landing-footer .language-dropdown {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 4px;
}

.language-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: var(--landing-text, inherit);
}

.language-option:hover {
  background: var(--landing-nav-link-hover-bg, #f1f5f9);
}

/* Mobile language selector */
.nav-mobile-drawer .language-selector {
  padding: 12px 0;
  width: 100%;
  min-width: 0;
}

.nav-mobile-drawer .language-select {
  width: 100%;
  padding: 14px 44px 14px 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
  background-position: right 14px center;
}

.nav-mobile-theme-item .theme-selector {
  width: 100%;
  min-width: 0;
  padding: 12px 0;
}

.nav-mobile-theme-item .theme-selector-group {
  width: 100%;
  justify-content: space-between;
  border-radius: 12px;
  padding: 4px;
}

.nav-mobile-theme-item .theme-select-btn {
  flex: 1;
  justify-content: center;
  min-height: 40px;
  font-size: 13px;
}

/* Keep landing mobile drawer aligned with landing nav height + floating offset */
.landing-nav ~ .nav-mobile-overlay,
.landing-nav ~ .nav-mobile-drawer {
  top: calc(var(--landing-nav-height) + var(--landing-nav-float-y));
}

.landing-nav.scrolled ~ .nav-mobile-overlay,
.landing-nav.scrolled ~ .nav-mobile-drawer {
  top: var(--landing-nav-height);
}

.landing-nav ~ .nav-mobile-drawer {
  height: calc(100dvh - var(--landing-nav-height) - var(--landing-nav-float-y));
}

.landing-nav.scrolled ~ .nav-mobile-drawer {
  height: calc(100dvh - var(--landing-nav-height));
}

@supports not (height: 100dvh) {
  .landing-nav ~ .nav-mobile-drawer {
    height: calc(100vh - var(--landing-nav-height) - var(--landing-nav-float-y));
  }
  .landing-nav.scrolled ~ .nav-mobile-drawer {
    height: calc(100vh - var(--landing-nav-height));
  }
}

.landing-nav ~ .nav-mobile-drawer .nav-mobile-drawer-content {
  min-height: 0;
}

.landing-nav ~ .nav-mobile-drawer .nav-mobile-footer {
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

/* ============================================
 * MODERN BUTTONS
 * ============================================ */
.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  transition: all 0.3s var(--landing-transition);
  cursor: pointer;
  border: none;
  position: relative;
  overflow: hidden;
}

.landing-btn-primary {
  background: var(--landing-btn-primary-gradient);
  color: var(--landing-btn-primary-text);
  box-shadow: var(--landing-btn-primary-shadow);
}

.landing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--landing-btn-primary-shadow-hover);
}

.landing-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.landing-btn-primary:hover::before {
  transform: translateX(100%);
}

.landing-btn-secondary {
  background: var(--landing-btn-secondary-bg);
  color: var(--landing-btn-secondary-text);
  border: 2px solid var(--landing-btn-secondary-border);
}

.landing-btn-secondary:hover {
  background: var(--landing-btn-secondary-hover-bg);
  border-color: var(--landing-btn-secondary-hover-border);
  transform: translateY(-2px);
}

.landing-btn-large {
  padding: 16px 40px;
  font-size: 17px;
}

.landing-btn-icon {
  font-size: 1.2em;
}

/* ============================================
 * HERO SECTION
 * ============================================ */
.landing-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 24px 80px;
  background: var(--landing-gradient-hero);
  overflow: hidden;
}

.landing-hero::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -25%;
  width: 80%;
  height: 150%;
  background: var(--landing-hero-glow-1);
  animation: rotate-slow 60s linear infinite;
}

.landing-hero::after {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 60%;
  height: 100%;
  background: var(--landing-hero-glow-2);
  animation: rotate-slow 80s linear infinite reverse;
}

.landing-hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.landing-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--landing-particle-color);
  border-radius: 50%;
  animation: particle-float 15s linear infinite;
}

.landing-particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
  animation-duration: 20s;
}
.landing-particle:nth-child(2) {
  left: 20%;
  animation-delay: 2s;
  animation-duration: 18s;
}
.landing-particle:nth-child(3) {
  left: 30%;
  animation-delay: 4s;
  animation-duration: 22s;
}
.landing-particle:nth-child(4) {
  left: 40%;
  animation-delay: 1s;
  animation-duration: 17s;
}
.landing-particle:nth-child(5) {
  left: 50%;
  animation-delay: 3s;
  animation-duration: 21s;
}
.landing-particle:nth-child(6) {
  left: 60%;
  animation-delay: 5s;
  animation-duration: 19s;
}
.landing-particle:nth-child(7) {
  left: 70%;
  animation-delay: 2.5s;
  animation-duration: 23s;
}
.landing-particle:nth-child(8) {
  left: 80%;
  animation-delay: 0.5s;
  animation-duration: 16s;
}
.landing-particle:nth-child(9) {
  left: 90%;
  animation-delay: 3.5s;
  animation-duration: 20s;
}
.landing-particle:nth-child(10) {
  left: 15%;
  animation-delay: 4.5s;
  animation-duration: 18s;
}

/* The visual column is deliberately the wider one. An even 1fr/1fr split gave the
   screenshot ~660px, which renders the app at 0.38 scale — small enough that the
   interface turns to grey texture and the amounts stop being readable. The copy
   column needs far less room now that the hero holds four things instead of ten. */
.landing-hero-inner {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.landing-hero-content {
  text-align: center;
  animation: slide-in-left 1s var(--landing-transition);
}

.landing-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--landing-hero-badge-bg);
  border: 1px solid var(--landing-hero-badge-border);
  border-radius: 50px;
  color: var(--landing-accent);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}

.landing-hero-badge-dot {
  width: 8px;
  height: 8px;
  background: var(--landing-accent);
  border-radius: 50%;
  animation: pulse-glow 2s ease-in-out infinite;
}

.landing-hero-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 24px;
  color: var(--landing-text);
  min-height: 2.3em;
}

.landing-hero-title-gradient {
  background: var(--landing-title-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s ease infinite;
}

.landing-hero-subtitle {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
  color: var(--landing-text-secondary);
  margin: 0 auto 40px;
  max-width: 540px;
  min-height: 4.8em;
}

.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
}

/* The copy column is left-aligned (it sits beside the screenshot, not above it),
   so its subtitle, buttons and fine print must be too. The base rules centre all
   three, which left the old hero with a left-aligned H1 over centred body copy.

   The two CTAs used to be forced to 360px each and stacked, because the old
   labels ("Gratis starten, geen creditcard" / "Probeer de interactieve demo")
   could not fit side by side. The new labels are half the length and the copy
   column is wider, so they sit on one row and the stacking rule is gone. */
/* Other pages have a full-width, centred hero; the home hero is two columns, so
   its copy reads as a left-hand column beside the screenshot. Centred text in a
   left-hand column is what made the subtitle look adrift under a left H1. */
.page-home .landing-hero-content {
  text-align: left;
}

.page-home .landing-hero-subtitle {
  margin: 0 0 32px;
  max-width: 34rem;
  /* Was min-height: 4.8em, reserving space for a 42-word paragraph that no
     longer exists — it left a dead gap under the two-line subtitle. */
  min-height: 0;
}

.page-home .landing-hero-actions {
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 0;
}

.page-home .landing-hero-content .landing-cta-subtext {
  text-align: left;
  margin-top: 16px;
}

/* The .landing-hero-stat* rules (three icon+label tiles) were removed with the
   hero redesign — the tiles moved out of the hero and no page uses those classes
   anymore. */

/* Hero visual / screenshot */
.landing-hero-visual {
  position: relative;
  animation: slide-in-right 1s var(--landing-transition);
}

/* Browser frame. Thin on purpose: it exists to say "this is real, running
   software", and every pixel it spends is a pixel taken from the interface. */
.landing-hero-frame {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--landing-surface, #fff);
  border: 1px solid var(--landing-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--landing-shadow-hero-img);
}

.landing-hero-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--landing-surface-muted, rgba(0, 0, 0, 0.035));
  border-bottom: 1px solid var(--landing-border, rgba(0, 0, 0, 0.08));
}

.landing-hero-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--landing-border-strong, rgba(0, 0, 0, 0.16));
  flex: none;
}

.landing-hero-frame-url {
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--landing-surface, #fff);
  border: 1px solid var(--landing-border, rgba(0, 0, 0, 0.07));
  color: var(--landing-text-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.landing-hero-screenshot {
  display: block;
  width: 100%;
  height: auto;
}

/* The old rules floated the screenshot up and down forever (animation: float 6s
   infinite) and scaled it on hover. Decoration that moves is the opposite of the
   calm we are after, and a perpetually animating LCP element is not free. */

@media (max-width: 768px) {
  /* A browser bar wrapped around a phone screenshot is nonsense — drop it and let
     the shot be the app. */
  .landing-hero-frame-bar {
    display: none;
  }

  /* The phone shot is 390x844: shown whole it is ~740px tall and shoves the
     buttons off the screen. Crop to its top, which is where the money is (the
     openstaand / te laat totals and the first invoices). */
  .landing-hero-screenshot {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top center;
  }
}

/* Quiet strip under the hero — proof, not decoration. */
.landing-trust-strip {
  padding: 0 24px 16px;
}

.landing-trust-strip .landing-trust-badges {
  margin-top: 0;
}

/* ---- Demo video ("watch it happen") --------------------------------------
   Reuses the hero browser-frame language, but centered as full-width media
   rather than a side column. Click-to-play (see js/demo-video.js): the poster
   shows until the visitor opts in, so no video bytes load on page view. */
.landing-demo-frame {
  margin: 0 auto;
  max-width: 940px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--landing-surface, #fff);
  border: 1px solid var(--landing-border, rgba(0, 0, 0, 0.08));
  box-shadow: var(--landing-shadow-hero-img);
}

.landing-demo-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 14px;
  background: var(--landing-surface-muted, rgba(0, 0, 0, 0.035));
  border-bottom: 1px solid var(--landing-border, rgba(0, 0, 0, 0.08));
}

.landing-demo-frame-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--landing-border-strong, rgba(0, 0, 0, 0.16));
  flex: none;
}

.landing-demo-frame-url {
  margin-left: 10px;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--landing-surface, #fff);
  border: 1px solid var(--landing-border, rgba(0, 0, 0, 0.07));
  color: var(--landing-text-muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

.landing-demo-media {
  position: relative;
  background: #000;
  aspect-ratio: 1728 / 1080; /* desktop clip */
}

.landing-demo-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-demo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

/* A soft scrim so the button reads on both light and dark posters. */
.landing-demo-play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.2));
}

.landing-demo-play-ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  padding-left: 4px; /* optically center the play triangle */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--landing-accent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease;
}

.landing-demo-play:hover .landing-demo-play-ring,
.landing-demo-play:focus-visible .landing-demo-play-ring {
  transform: scale(1.06);
}

.landing-demo-media.is-playing .landing-demo-play {
  display: none;
}

.landing-demo-aside {
  margin-top: 20px;
  text-align: center;
}

.landing-demo-tryit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--landing-accent);
  font-weight: 600;
  text-decoration: none;
}

.landing-demo-tryit:hover {
  text-decoration: underline;
}

.landing-demo-tryit .landing-btn-icon {
  display: inline-flex;
  transition: transform 0.2s ease;
}

.landing-demo-tryit:hover .landing-btn-icon {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  /* A browser bar around a phone recording is nonsense — drop it (mirrors the
     hero). The mobile clip is a portrait 1170x2532 phone capture. */
  .landing-demo-frame-bar {
    display: none;
  }

  .landing-demo-frame {
    max-width: 340px;
  }

  .landing-demo-media {
    aspect-ratio: 1170 / 2532;
  }

  .landing-demo-video {
    object-fit: contain;
  }

  .landing-demo-play-ring {
    width: 64px;
    height: 64px;
  }
}

.landing-hero-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: var(--landing-hero-glow-1);
  pointer-events: none;
  z-index: -1;
}

/* ============================================
 * FEATURE SECTIONS
 * ============================================ */
.landing-section {
  padding: 120px 24px;
  position: relative;
}

.landing-section-dark {
  background: var(--landing-bg-section);
}

.landing-section-gradient {
  background: var(--landing-cta-gradient);
}

.landing-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.landing-section-header {
  text-align: center;
  margin-bottom: 64px;
  animation: slide-up 0.8s var(--landing-transition);
}

.landing-section-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--landing-section-badge-bg);
  border: 1px solid var(--landing-section-badge-border);
  border-radius: 20px;
  color: var(--landing-section-badge-color);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 16px;
}

.landing-section-title {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  color: var(--landing-text);
  margin-bottom: 16px;
}

.landing-section-subtitle {
  font-size: 18px;
  color: var(--landing-text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Feature Grid */
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 24px;
}

/* Home "Bestier je hele zaak" grid: 8 feature cards in a clean, uniform
   grid. Every card is the same width and shares the centered-tile style;
   the old asymmetric flagship spans were read as a mistake, not design.
   8 cards divide evenly: 4-up on wide screens (two rows of four), 2-up on
   tablets (four rows of two), single column on phones. De-genericised
   through icons, spacing and copy, not through mismatched widths. The
   --featured class is now a no-op here so all cards render identically. */
.landing-features-grid--feature {
  grid-template-columns: 1fr;
  max-width: 1240px;
  margin: 0 auto;
}

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

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

/* Why MyCompanyDesk Grid - 5 cards: 3 top, 2 bottom centered */
.landing-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-why-grid .landing-feature-card:nth-child(4),
.landing-why-grid .landing-feature-card:nth-child(5) {
  grid-column: auto;
}

/* Center the bottom row of 2 cards */
.landing-why-grid::after {
  content: "";
  display: none;
}

@media (min-width: 769px) {
  .landing-why-grid {
    grid-template-columns: repeat(6, 1fr);
  }
  .landing-why-grid .landing-feature-card:nth-child(1) {
    grid-column: 1 / 3;
  }
  .landing-why-grid .landing-feature-card:nth-child(2) {
    grid-column: 3 / 5;
  }
  .landing-why-grid .landing-feature-card:nth-child(3) {
    grid-column: 5 / 7;
  }
  .landing-why-grid .landing-feature-card:nth-child(4) {
    grid-column: 2 / 4;
  }
  .landing-why-grid .landing-feature-card:nth-child(5) {
    grid-column: 4 / 6;
  }
}

.landing-feature-card {
  position: relative;
  padding: 32px;
  text-align: center;
  background: var(--landing-bg-card);
  border: 1px solid var(--landing-border);
  border-radius: 20px;
  transition: all 0.4s var(--landing-transition);
  overflow: hidden;
}

.landing-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--landing-accent), var(--landing-accent-2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.landing-feature-card:hover {
  background: var(--landing-bg-card-hover);
  border-color: var(--landing-border-accent);
  transform: translateY(-8px);
  box-shadow: var(--landing-shadow-card-hover);
}

.landing-feature-card:hover::before {
  opacity: 1;
}

.landing-feature-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  margin: 0 auto 20px;
  font-size: 28px;
}

.landing-icon,
.landing-inline-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  stroke: currentColor;
}

.landing-inline-icon {
  vertical-align: -0.125em;
}

.landing-feature-icon .landing-icon {
  width: 34px;
  height: 34px;
}

.landing-stat-value .landing-icon {
  width: clamp(34px, 5vw, 54px);
  height: clamp(34px, 5vw, 54px);
}

.landing-hero-badge .landing-inline-icon,
.landing-section-badge .landing-inline-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

/* All perpetual icon motion animations disabled — icons stay static. */
[class*="landing-motion-"] {
  animation: none;
}

.landing-feature-icon-blue {
  background: var(--landing-feature-icon-blue-bg);
  color: var(--landing-feature-icon-blue-color);
}

.landing-feature-icon-teal {
  background: var(--landing-feature-icon-teal-bg);
  color: var(--landing-feature-icon-teal-color);
}

.landing-feature-icon-purple {
  background: var(--landing-feature-icon-purple-bg);
  color: var(--landing-feature-icon-purple-color);
}

.landing-feature-icon-orange {
  background: var(--landing-feature-icon-orange-bg);
  color: var(--landing-feature-icon-orange-color);
}

.landing-feature-icon-green {
  background: var(--landing-feature-icon-green-bg);
  color: var(--landing-feature-icon-green-color);
}

.landing-feature-icon-pink {
  background: var(--landing-feature-icon-pink-bg);
  color: var(--landing-feature-icon-pink-color);
}

.landing-feature-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--landing-text);
  margin-bottom: 12px;
}

.landing-feature-description {
  font-size: 15px;
  color: var(--landing-text-muted);
  line-height: 1.7;
}

/* Subtle "learn more" docs link inside a feature card. Quiet by default,
 * uses the landing accent token so it reads correctly in both themes, and
 * nudges its arrow forward on hover. Not a button. */
.landing-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--landing-accent);
  text-decoration: none;
  transition:
    gap 0.2s var(--landing-transition),
    opacity 0.2s ease;
}

.landing-feature-link svg {
  transition: transform 0.2s var(--landing-transition);
}

.landing-feature-link:hover {
  text-decoration: underline;
}

.landing-feature-link:hover svg {
  transform: translateX(3px);
}

/* ============================================
 * SCREENSHOT SHOWCASE
 * ============================================ */
.landing-showcase {
  padding: 120px 24px;
  background: var(--landing-showcase-bg);
  overflow: hidden;
}

.landing-showcase-inner {
  max-width: 1400px;
  margin: 0 auto;
}

.landing-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 40px;
  align-items: center;
}

.landing-showcase-content {
  animation: slide-in-left 0.8s var(--landing-transition);
}

.landing-showcase-visual {
  position: relative;
  min-width: 0;
  animation: slide-in-right 0.8s var(--landing-transition);
}

.landing-showcase-image {
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--landing-shadow-hero-img);
  transition: transform 0.4s ease;
}

.landing-showcase-image:hover {
  transform: scale(1.03) rotate(-1deg);
}

/* App-download "device wave": a row of phone mock-ups of the app. On wide,
   hover-capable screens it's an expanding accordion — collapsed panels show a
   slim phone edge, the selected/hovered phone widens to the full device. On
   touch / narrow screens it becomes a swipeable scroll-snap carousel of full
   phones. CSS-only selection via hidden radios; each screenshot sits in a dark
   device frame so it reads as a real phone rather than a clipped UI strip. */
.app-hwave {
  --hwave-h: clamp(28rem, 52vw, 35rem);
  --phone-w: calc(var(--hwave-h) * 0.5); /* portrait device aspect incl. frame */
  display: flex;
  gap: 0.55rem;
  width: 100%;
  min-width: 0;
  height: var(--hwave-h);
}
.app-hwave__panel {
  position: relative;
  flex: 1 1 0; /* collapsed phones share the leftover width so the row fills its column */
  min-width: 2.5rem;
  height: 100%;
  overflow: hidden;
  border-radius: 1.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* clip from the right so the left phone edge shows */
  transition:
    flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1),
    flex-basis 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Auto-advance progress: a thin accent bar across the top of the active phone,
   filled over the dwell time by js/app-hwave.js (sets --p 0->1 and toggles the
   is-filling class for visibility). Hidden by default and on collapsed phones. */
.app-hwave__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--landing-accent, #2563eb);
  transform: scaleX(var(--p, 0));
  transform-origin: left center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4;
  pointer-events: none;
}
.app-hwave__panel.is-active .app-hwave__progress.is-filling {
  opacity: 1;
}
.app-hwave__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The device: a dark bezel + rounded screen + soft shadow around the shot. */
.app-hwave__media {
  position: relative;
  flex: 0 0 var(--phone-w);
  width: var(--phone-w);
  height: 100%;
  border-radius: 1.7rem;
  background: #0b1020;
  padding: 0.4rem;
  box-shadow:
    0 18px 42px rgba(8, 13, 26, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.app-hwave__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-radius: 1.35rem;
  display: block;
}
/* phone notch */
.app-hwave__media::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 0.55rem;
  background: #0b1020;
  border-radius: 0 0 0.7rem 0.7rem;
  z-index: 2;
}
/* scrim so the caption stays legible over the screenshot */
.app-hwave__scrim {
  position: absolute;
  inset: 0;
  border-radius: 1.35rem;
  background: linear-gradient(
    to top,
    rgba(8, 13, 26, 0.88) 2%,
    rgba(8, 13, 26, 0.18) 24%,
    transparent 44%
  );
  pointer-events: none;
}
/* Gentle dim on inactive phones (was a heavy 0.55 overlay that read as murk). */
.app-hwave__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1.35rem;
  background: rgba(11, 17, 36, 0.32);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.app-hwave__panel:has(.app-hwave__radio:checked) .app-hwave__media::after {
  opacity: 0;
}
.app-hwave__tab {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 0.25rem;
  color: #fff;
  transition: opacity 0.3s ease;
}
.app-hwave__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  flex-shrink: 0;
}
.app-hwave__icon svg {
  width: 1.05rem;
  height: 1.05rem;
}
.app-hwave__name {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(8, 13, 26, 0.6);
}
.app-hwave__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 1.15rem;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
  pointer-events: none;
}
.app-hwave__caption-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.app-hwave__caption-text {
  font-size: 0.875rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.86);
}
/* Active (selected) panel — sized to exactly the device width so the phone
   fills it with no empty bands. */
.app-hwave__panel:has(.app-hwave__radio:checked) {
  flex: 0 0 var(--phone-w);
}
.app-hwave__panel:has(.app-hwave__radio:checked) .app-hwave__tab {
  opacity: 0;
}
.app-hwave__panel:has(.app-hwave__radio:checked) .app-hwave__caption {
  opacity: 1;
  transform: none;
}
.app-hwave__panel:has(.app-hwave__radio:focus-visible) {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
}
/* Hover wave on pointer devices overrides the checked selection while hovering */
/* Hover must NOT resize a panel. A hover-driven width change reflows the row
   under the cursor, which drops the :hover, collapses the panel, and oscillates
   ("the screenshot keeps going wider and thinner"). Expansion is therefore
   click-only via the radios (stable: the choice persists regardless of where
   the cursor is). Hover just lightens the dim on a collapsed phone as an
   affordance that it's clickable. */
@media (hover: hover) and (min-width: 769px) {
  .app-hwave__panel:not(:has(.app-hwave__radio:checked)):hover .app-hwave__media::after {
    opacity: 0.14;
  }
}
/* Touch / narrow: a swipeable carousel of whole framed phones — no slivers. */
@media (max-width: 768px) {
  .app-hwave {
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0.85rem;
    /* Break out of the section's 24px side padding so the carousel can use the
       full viewport width; re-inset with padding so the first phone isn't flush
       to the screen edge. */
    margin-inline: -24px;
    padding: 0 24px 0.75rem;
    scroll-padding-inline: 24px;
  }
  /* Carousel: every phone is the same width (incl. the checked one, which
     otherwise keeps its desktop --phone-w and renders small). vw is predictable;
     % resolved against an odd container width. */
  .app-hwave__panel,
  .app-hwave__panel:has(.app-hwave__radio:checked) {
    flex: 0 0 82vw;
    height: min(165vw, 36rem);
    scroll-snap-align: center;
    justify-content: center;
  }
  .app-hwave__media {
    flex: 1 1 auto;
    width: 100%;
  }
  .app-hwave__tab {
    display: none;
  }
  .app-hwave__caption {
    opacity: 1;
    transform: none;
  }
  .app-hwave__media::after {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .app-hwave__panel,
  .app-hwave__tab,
  .app-hwave__caption,
  .app-hwave__media::after {
    transition: none;
  }
}

/* Demo video section */
.landing-demo {
  padding: 80px 24px 96px;
  background: var(--landing-bg-section);
  position: relative;
  overflow: hidden;
}

.landing-demo-inner {
  max-width: 1060px;
  margin: 0 auto;
}

.landing-demo-header {
  text-align: center;
  margin-bottom: 48px;
  animation: slide-up 0.8s var(--landing-transition);
}

.landing-demo-video-wrap {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--landing-shadow-hero-img);
  animation: slide-up 0.8s var(--landing-transition);
}

.landing-demo-cta {
  text-align: center;
  margin-top: 40px;
}

.landing-demo-cta .landing-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
  padding: 16px 36px;
}

.landing-demo-cta-sub {
  margin-top: 14px;
  color: var(--landing-text-muted);
  font-size: 0.95rem;
}

.landing-demo-video {
  width: 100%;
  display: block;
  border-radius: 16px;
}

.landing-showcase-title {
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--landing-text);
  margin-bottom: 20px;
}

.landing-showcase-text {
  font-size: 17px;
  color: var(--landing-text-muted);
  line-height: 1.8;
  margin-bottom: 32px;
}

.landing-showcase-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-showcase-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 16px;
  color: var(--landing-text-secondary);
  border-bottom: 1px solid var(--landing-border);
}

.landing-showcase-list li:last-child {
  border-bottom: none;
}

.landing-showcase-check {
  width: 24px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--landing-accent) 0%,
    color-mix(in srgb, var(--landing-accent) 52%, var(--landing-accent-2) 48%) 100%
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--landing-btn-primary-text);
  font-size: 14px;
  flex-shrink: 0;
}

.landing-showcase-check .landing-icon {
  width: 16px;
  height: 16px;
}

/* ============================================
 * SCREENSHOT GRID
 * ============================================ */
.landing-screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.landing-screenshot-card {
  margin: 0;
  padding: 14px;
  background: var(--landing-bg-card);
  border: 1px solid var(--landing-border);
  border-radius: 16px;
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.landing-screenshot-card:hover {
  transform: translateY(-6px);
  border-color: var(--landing-border-accent);
  box-shadow: var(--landing-shadow-card-hover);
}

.landing-screenshot-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--landing-screenshot-border);
  display: block;
}

.landing-screenshot-caption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--landing-text-secondary);
}

/* ============================================
 * LIVE PORTAL FRAME (examples page)
 * Wraps the portal.mycompanydesk.nl iframe in a faux-browser chrome so
 * visitors immediately read it as "a real customer site, embedded". The
 * iframe itself is height-locked so it doesn't stretch the page; readers
 * scroll inside the frame to explore.
 * ============================================ */
.landing-portal-frame {
  margin: 32px auto 0;
  max-width: 1080px;
  background: var(--landing-bg-card);
  border: 1px solid var(--landing-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--landing-shadow-card-hover);
}
.landing-portal-frame-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--landing-bg-card) 80%, transparent);
  border-bottom: 1px solid var(--landing-border);
}
.landing-portal-frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--landing-border);
}
.landing-portal-frame-dot:nth-child(1) {
  background: #ef4444;
}
.landing-portal-frame-dot:nth-child(2) {
  background: #f59e0b;
}
.landing-portal-frame-dot:nth-child(3) {
  background: #10b981;
}
.landing-portal-frame-url {
  margin-left: 12px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--landing-text-secondary);
}
.landing-portal-frame-iframe {
  display: block;
  width: 100%;
  height: 720px;
  border: 0;
  background: var(--landing-bg-section);
}
@media (max-width: 768px) {
  .landing-portal-frame-iframe {
    height: 560px;
  }
  .landing-portal-frame-url {
    display: none;
  }
}
.landing-portal-frame-cta {
  margin-top: 24px;
  text-align: center;
}

/* ============================================
 * STATISTICS SECTION
 * ============================================ */
.landing-stats-section {
  padding: 100px 24px;
  background: var(--landing-stats-gradient);
  position: relative;
  overflow: hidden;
}

.landing-stats-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.5;
}

.landing-stats-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1;
}

.landing-stat-item {
  text-align: center;
  animation: scale-in 0.6s var(--landing-transition);
}

.landing-stat-value {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 8px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.landing-stat-label {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* ============================================
 * FEATURE INDEX
 * Dense, grouped inventory of every shipped feature, named with the term
 * people (and language models) actually search for. The tile grid above
 * sells eight things well; this names all of them.
 * ============================================ */
.landing-feature-index {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  /* 200px keeps all five groups on one row at desktop; the longest labels
     already wrapped to two lines at wider column widths, so nothing regresses. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px 32px;
}

.landing-feature-index-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--landing-text);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--landing-border);
}

.landing-feature-index-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.landing-feature-index-list li {
  font-size: 15px;
  line-height: 1.4;
  color: var(--landing-text-muted);
}

.landing-feature-index-list a {
  color: var(--landing-text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--landing-border-accent);
  transition: color 0.2s var(--landing-transition);
}

.landing-feature-index-list a:hover,
.landing-feature-index-list a:focus-visible {
  color: var(--landing-accent);
}

/* ============================================
 * TESTIMONIALS / SOCIAL PROOF
 * ============================================ */
.landing-testimonials {
  padding: 120px 24px;
  background: var(--landing-testimonials-bg);
}

.landing-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-testimonial-card {
  padding: 32px;
  background: var(--landing-bg-card);
  border: 1px solid var(--landing-border);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.landing-testimonial-card:hover {
  background: var(--landing-bg-card-hover);
  transform: translateY(-4px);
}

.landing-testimonial-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  color: var(--landing-accent-3);
  font-size: 18px;
}

.landing-testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--landing-text-secondary);
  margin-bottom: 24px;
  font-style: italic;
}

.landing-testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.landing-testimonial-avatar {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--landing-accent) 0%, var(--landing-accent-2) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.landing-testimonial-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--landing-text);
}

.landing-testimonial-role {
  font-size: 13px;
  color: var(--landing-text-faint);
}

/* ============================================
 * CTA SECTION
 * ============================================ */
.landing-cta {
  padding: 120px 24px;
  background: var(--landing-cta-gradient);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.landing-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: var(--landing-cta-glow);
}

.landing-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.landing-cta-title {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  color: var(--landing-text);
  margin-bottom: 20px;
}

.landing-cta-subtitle {
  font-size: 18px;
  color: var(--landing-text-muted);
  margin-bottom: 40px;
  line-height: 1.7;
}

.landing-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* A CTA that follows a card grid needs the same lead-in as one that follows
   a subtitle (.landing-cta-subtitle carries margin-bottom: 40px); the grid has
   no bottom margin, so the button would otherwise sit flush against the cards. */
.landing-trust-grid + .landing-cta-buttons {
  margin-top: 40px;
}

/* ============================================
 * SEO SIBLING CLUSTERS
 *
 * Small "related pages" cross-link block dropped just above the closing
 * CTA on pSEO pages that belong to a topic cluster (starter guides, tool
 * comparisons, etc). Same look as the /voor-* profession pages'
 * .vakmens-siblings block (see css/vakmens.6d64dd.css), rebuilt on the tokens
 * already loaded on every landing page (--landing-accent / --landing-border
 * / --landing-text) instead of the vak-specific --vk-accent, since these
 * pages don't load vakmens.css. Injected by
 * scripts/inject-starter-siblings.mjs and
 * scripts/inject-comparison-siblings.mjs — idempotent, safe to re-run.
 * ============================================ */
.seo-siblings {
  padding: 3rem 24px 4rem;
}
.seo-siblings-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.seo-siblings h2 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  letter-spacing: -0.015em;
  color: var(--landing-text);
  margin: 0 0 1.25rem;
}
.seo-sibling-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.seo-sibling-links a {
  display: inline-block;
  padding: 0.5rem 0.875rem;
  border: 1px solid var(--landing-border);
  border-radius: 999px;
  font-size: 0.9375rem;
  color: var(--landing-text);
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}
.seo-sibling-links a:hover {
  border-color: var(--landing-accent);
  color: var(--landing-accent);
  background: color-mix(in srgb, var(--landing-accent) 8%, transparent);
}

/* ============================================
 * FOOTER
 * ============================================ */
.landing-footer {
  padding: 80px 24px 40px;
  background: var(--landing-footer-bg);
  border-top: 1px solid var(--landing-footer-border);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--landing-footer-border) 30%, transparent);
}

.landing-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.landing-footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

/* Site-wide footer: brand + 6 link columns so every page links out to the
   whole SEO/guide/tool set (deep pages stay reachable, no orphans). The old
   single "Product" column had grown to ~19 links and towered over the others;
   it's now split into Gratis tools / Contracten / Product for balance. Tighter
   column-gap here (vs the base 48px) keeps six columns readable at 1200px.
   Single-class selector (same specificity as the base + responsive rules) so
   the tablet/mobile breakpoints below still collapse it to 2 then 1 column. */
.landing-footer-grid--wide {
  grid-template-columns: 1.4fr repeat(6, 1fr);
  gap: 40px 28px;
}

.landing-footer-brand p {
  font-size: 15px;
  color: var(--landing-footer-text);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Dogfood tile ── "Built with MyCompanyDesk" showcase on home,
   linking to portal.mycompanydesk.nl. The big proof point: this whole
   site, including the page you're reading, is generated with the same
   builder we sell. Scoped with `.landing-dogfood-*` (not
   `.landing-showcase-*`) so the screenshot SHOWCASE section above isn't
   silently restyled by cascade order. */
.landing-dogfood {
  padding: 6rem 1.5rem 0;
}
.landing-dogfood-inner {
  max-width: 1200px;
  margin: 0 auto;
}
/* The tile is intentionally a dark accent block in BOTH themes — same
   visual treatment as `.landing-cta`. Background + border are hardcoded
   dark values rather than theme tokens so the card doesn't flip light. */
.landing-dogfood-card {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 3rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at top right, rgba(0, 212, 255, 0.18), transparent 55%),
    linear-gradient(135deg, #0a1024 0%, #112042 55%, #143a6b 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  overflow: hidden;
  position: relative;
}
@media (max-width: 800px) {
  .landing-dogfood-card {
    padding: 2rem;
    gap: 2rem;
  }
}
.landing-dogfood-copy {
  max-width: 46rem;
}
.landing-dogfood-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--landing-accent, #00d4ff);
  margin-bottom: 0.75rem;
}
.landing-dogfood-title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 1rem;
  color: #fff;
}
.landing-dogfood-body {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 1.5rem;
  max-width: 36rem;
}
.landing-dogfood-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--landing-accent, #00d4ff);
  color: #0a1024;
  font-weight: 700;
  text-decoration: none;
  transition:
    transform 150ms ease,
    box-shadow 200ms ease;
}
.landing-dogfood-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -12px rgba(0, 212, 255, 0.55);
}
.landing-dogfood-cta-arrow {
  font-weight: 700;
  transition: transform 150ms ease;
}
.landing-dogfood-cta:hover .landing-dogfood-cta-arrow {
  transform: translateX(2px);
}
.landing-dogfood-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 24rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.landing-dogfood-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.landing-dogfood-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.landing-dogfood-frame-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}
.landing-dogfood-frame-url {
  margin-left: 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
}
/* The iframe carries the live portal — sandboxed so it can't navigate the
   parent or escape the box. CSP on portal.mycompanydesk.nl allows framing
   from custom-domain hosts (apps/web/server/middleware/02.security-headers.ts). */
.landing-dogfood-frame-iframe {
  flex: 1;
  width: 100%;
  border: 0;
  background: rgba(255, 255, 255, 0.02);
  color-scheme: light;
}
@media (max-width: 800px) {
  .landing-dogfood-frame-url {
    display: none;
  }
}
.landing-dogfood-frame-glow {
  position: absolute;
  inset: auto -20% -40% auto;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.35), transparent 60%);
  pointer-events: none;
}

/* Dogfood badge: links to portal.mycompanydesk.nl (Sil's own site,
   generated entirely with the MCD builder). Acts as social proof + live
   product demo. Injected via JS so the copy lives in one place. */
.landing-footer-showcase {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--landing-footer-border);
  color: var(--landing-footer-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    color 150ms ease,
    transform 150ms ease;
}
.landing-footer-showcase:hover {
  border-color: var(--landing-accent);
  color: var(--landing-footer-heading);
  transform: translateY(-1px);
}
.landing-footer-showcase-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--landing-accent, #00d4ff);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.18);
}

.landing-footer-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--landing-footer-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 20px;
}

.landing-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.landing-footer-links li {
  margin-bottom: 12px;
}

.landing-footer-links a {
  color: var(--landing-footer-text);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.landing-footer-links a:hover {
  color: var(--landing-accent);
}

.landing-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 32px;
  border-top: 1px solid var(--landing-footer-border);
}

.landing-footer-copyright {
  font-size: 14px;
  color: var(--landing-footer-text-faint);
}

.landing-footer-legal {
  display: flex;
  align-items: center;
  gap: 24px;
}

.landing-footer-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.theme-selector {
  display: flex;
  align-items: center;
  min-width: min(196px, 100%);
}

.theme-selector-group {
  display: inline-flex;
  align-items: center;
  background: var(--landing-lang-bg);
  border: 1px solid var(--landing-lang-border);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}

.theme-select-btn {
  border: none;
  background: transparent;
  color: var(--landing-lang-text);
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}

.theme-select-btn i {
  width: 14px;
  height: 14px;
}

.theme-select-btn:hover {
  background: var(--landing-nav-link-hover-bg);
}

.theme-select-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--landing-selector-focus-ring);
}

.theme-select-btn.is-active {
  background: color-mix(in srgb, var(--landing-accent) 18%, transparent);
  color: var(--landing-text);
}

.theme-select-label {
  white-space: nowrap;
}

.landing-footer-legal a {
  font-size: 14px;
  color: var(--landing-footer-text-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}

.landing-footer-legal a:hover {
  color: var(--landing-accent);
}

/* Footer selectors */
.landing-footer-controls .language-selector {
  min-width: 90px;
}

.landing-footer-controls .language-select,
.landing-footer-controls .theme-selector-group {
  background: var(--landing-lang-bg);
  border: 1px solid var(--landing-lang-border);
  font-size: 13px;
}

/* ============================================
 * RESPONSIVE DESIGN
 * ============================================ */
@media (max-width: 1024px) {
  .landing-nav-links {
    display: none;
  }

  .landing-nav-cta {
    display: none;
  }

  .landing-nav .nav-mobile-toggle {
    display: flex;
    flex-shrink: 0;
  }

  .landing-nav ~ .nav-mobile-drawer {
    display: flex;
    width: min(360px, 85vw);
  }

  .landing-hero-inner {
    grid-template-columns: 1fr;
    gap: 60px;
    text-align: center;
  }

  .landing-hero-content {
    order: 1;
  }

  .landing-hero-visual {
    order: 2;
  }

  .landing-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
    min-height: 0;
  }

  .landing-hero-title {
    min-height: 0;
  }

  /* Single column: the copy sits ABOVE the screenshot rather than beside it, so
     it is centred again. Undoes the left-alignment the two-column hero needs. */
  .page-home .landing-hero-content {
    text-align: center;
  }

  .page-home .landing-hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

  .page-home .landing-hero-actions {
    justify-content: center;
  }

  .page-home .landing-hero-content .landing-cta-subtext {
    text-align: center;
  }

  .landing-hero-actions {
    justify-content: center;
  }

  .landing-showcase-grid {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }

  .landing-showcase-list li {
    justify-content: center;
  }

  .landing-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .landing-footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  :root {
    --landing-nav-float-y: 8px;
    --landing-nav-float-x: 10px;
  }

  .landing-nav {
    border-radius: 14px;
  }

  .landing-nav-inner {
    gap: 10px;
    padding: 0 16px;
  }

  /* Hide desktop nav links and CTA on mobile — use the drawer instead */
  .landing-nav-links,
  .landing-nav-cta {
    display: none !important;
  }

  .landing-nav-title {
    font-size: 17px;
  }

  /* Prevent sidebar from overscrolling past its bounds */
  .nav-mobile-drawer {
    overscroll-behavior: contain;
  }

  .nav-mobile-drawer-content {
    overscroll-behavior: contain;
  }

  .landing-hero {
    padding: 100px 16px 60px;
    min-height: auto;
  }

  /* The three badges are ~379px of text, so they can never share a phone row:
     left to wrap they break 2 + 1 and the last one reads as an orphan. Stack
     them into a deliberate centred list instead. */
  .landing-trust-badges {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .landing-section {
    padding: 80px 16px;
  }

  .landing-features-grid {
    grid-template-columns: 1fr;
  }

  .landing-why-grid {
    grid-template-columns: 1fr;
  }

  .landing-showcase-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-stats-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .landing-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .landing-footer {
    padding: 56px 16px 28px;
  }

  .landing-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .landing-footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .landing-footer-bottom {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    align-items: center;
  }

  .landing-footer-legal {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
  }

  .landing-btn-large {
    padding: 14px 28px;
    font-size: 15px;
  }

  .landing-screenshot-image {
    aspect-ratio: auto;
    max-height: 70vh;
    object-fit: contain;
  }
}

@media (max-width: 480px) {
  .landing-hero-title {
    font-size: 28px;
  }

  .landing-hero-subtitle {
    font-size: 16px;
  }

  .landing-hero-actions {
    flex-direction: column;
  }

  .landing-btn {
    width: 100%;
  }

  .landing-feature-card {
    padding: 24px;
  }

  .landing-cta-buttons {
    flex-direction: column;
  }
}

/* ============================================
 * SCROLL ANIMATIONS (using Intersection Observer)
 * Progressive enhancement: elements are visible by default
 * and animate in when JS is available
 * ============================================ */
.landing-animate {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

/* When JS is ready, hide elements initially */
.js-ready .landing-animate {
  opacity: 0;
  transform: translateY(30px);
}

.js-ready .landing-animate.visible,
.landing-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

.landing-animate-delay-1 {
  transition-delay: 0.1s;
}
.landing-animate-delay-2 {
  transition-delay: 0.2s;
}
.landing-animate-delay-3 {
  transition-delay: 0.3s;
}
.landing-animate-delay-4 {
  transition-delay: 0.4s;
}
.landing-animate-delay-5 {
  transition-delay: 0.5s;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .landing-animate,
  .js-ready .landing-animate {
    transition: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================
 * COOKIE CONSENT BANNER
 * ============================================ */
body.has-cookie-banner .landing-footer {
  padding-bottom: 120px;
}

.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: var(--landing-cookie-bg);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-top: 1px solid var(--landing-cookie-border);
  box-shadow: var(--landing-shadow-footer);
  transform: translateY(100%);
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.cookie-consent-banner.cookie-consent-visible {
  transform: translateY(0);
  opacity: 1;
}

.cookie-consent-banner.cookie-consent-hiding {
  transform: translateY(100%);
  opacity: 0;
}

.cookie-consent-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 280px;
}

.cookie-consent-text p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--landing-cookie-text);
}

.cookie-consent-link {
  color: var(--landing-accent);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.cookie-consent-link:hover {
  color: var(--landing-text);
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}

.cookie-consent-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

.cookie-consent-btn-primary {
  background: var(--landing-btn-primary-gradient);
  color: var(--landing-btn-primary-text);
  box-shadow: var(--landing-btn-primary-shadow);
}

.cookie-consent-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--landing-btn-primary-shadow-hover);
}

.cookie-consent-btn-secondary {
  background: var(--landing-cookie-btn-secondary-bg);
  color: var(--landing-cookie-btn-secondary-text);
  border: 1px solid var(--landing-cookie-btn-secondary-border);
}

.cookie-consent-btn-secondary:hover {
  background: var(--landing-bg-subtle-hover);
  border-color: var(--landing-border-hover);
}

@media (max-width: 640px) {
  .cookie-consent-content {
    flex-direction: column;
    text-align: center;
  }

  .cookie-consent-text {
    min-width: 0;
  }

  .cookie-consent-actions {
    width: 100%;
    justify-content: center;
  }

  .cookie-consent-btn {
    flex: 1;
    max-width: 180px;
    padding: 10px 16px;
    font-size: 13px;
    white-space: normal;
  }
}

/* ============================================
 * PLANS PAGE
 * ============================================ */

/* Three plans: Gratis, Starter, Pro. This used to be overridden by an inline
   style on plans.html, which beat every media query below — so the cards could
   never collapse and a third card pushed the page into a horizontal scroll on
   a phone. The grid lives here now, where the breakpoints can actually reach
   it. */
.landing-plans-grid {
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
}

.landing-plan-card {
  display: flex;
  flex-direction: column;
  /* Override the .landing-feature-card overflow:hidden so the
     "Meest populair" badge (top: -14px) isn't clipped at the card's
     top edge. The base card's ::before gradient ribbon is height:2px
     at top:0, so it stays within bounds regardless. */
  overflow: visible;
}

/* Pro card highlight uses violet-500 to match the in-app Pro accent
   (SettingsBilling .plan-card--pro). Pinning to a literal hex instead
   of pulling --landing-accent (the brand blue) keeps the "premium
   tier" signal visually consistent across landing and app. */
.landing-plan-card--highlighted {
  border: 2px solid #a855f7;
  position: relative;
}

.landing-plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: #a855f7;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.landing-plan-price {
  margin-bottom: 4px;
}

.landing-plan-price-value {
  font-size: 2rem;
  font-weight: 700;
}

.landing-plan-price-period {
  opacity: 0.7;
}

.landing-plan-yearly {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0 0 12px 0;
}

.landing-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
  flex: 1;
}

.landing-plan-features li {
  padding: 6px 0;
  font-size: 0.95rem;
}

.landing-plan-features li span:first-child {
  margin-right: 8px;
}

.landing-plan-cta {
  display: block;
  text-align: center;
  margin-top: auto;
}

.landing-plans-vat-note {
  text-align: center;
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 32px 0 0;
  padding: 0 16px;
}

.landing-plans-guarantee {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.7;
  margin: 12px 0 0;
  padding: 0 16px;
}

.landing-plans-guarantee a {
  color: var(--landing-accent);
  text-decoration: none;
  font-weight: 500;
}

.landing-plans-guarantee a:hover {
  text-decoration: underline;
}

.landing-plans-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 12px;
  overflow: hidden;
  /* Four columns now (Gratis, Starter, Pro + the feature label), where this was
     built for three. At 0.95rem with 16px cell padding the table blew past its
     container on a 1440px desktop and pushed Pro into a horizontal scroll —
     i.e. the tier we most want people to read got clipped. Ease the type and
     the padding so all four fit, and cap the label column so it stops eating
     the width. table-layout:fixed keeps the three plan columns equal. */
  table-layout: fixed;
  font-size: 0.9rem;
}

/* The feature-label column is the greedy one — the plan columns only ever hold
   a tick, a dash or a short value. */
.landing-plans-table th:first-child,
.landing-plans-table td:first-child {
  width: 34%;
}

.landing-plans-table thead tr {
  background: rgba(108, 92, 231, 0.08);
}

.landing-plans-table th {
  text-align: center;
  padding: 14px 10px;
  font-weight: 600;
  border-bottom: 2px solid rgba(108, 92, 231, 0.15);
}

.landing-plans-table th:first-child {
  text-align: left;
}

.landing-plans-table td {
  padding: 10px 10px;
  border-bottom: 1px solid rgba(108, 92, 231, 0.07);
  text-align: center;
  /* Wrap, never clip. table-layout:fixed will happily cut a long cell off at
     the column edge — and two of these ARE long ("1 gebruiker, plus gratis
     boekhouder-toegang"). Let them run onto a second line instead of losing
     half the sentence. */
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

.landing-plans-table td:first-child {
  text-align: left;
}

.landing-plans-table .landing-plans-group td {
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
  border-bottom: 1px solid rgba(108, 92, 231, 0.1);
}

@media (max-width: 1024px) {
  .landing-plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .landing-plans-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
 * TRUST BADGES
 * ============================================ */
.landing-trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
}

.landing-trust-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.8125rem;
  color: var(--landing-text-muted);
  letter-spacing: 0.01em;
}

.landing-trust-badge-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* CTA sub-text (benefit line below CTA buttons) */
.landing-cta-subtext {
  font-size: 0.875rem;
  color: var(--landing-text-muted);
  margin-top: 12px;
  letter-spacing: 0.01em;
  text-align: center;
}

.landing-cta .landing-cta-subtext {
  text-align: center;
}

.landing-demo-link {
  display: block;
  text-align: center;
  margin-top: 8px;
  font-size: 0.875rem;
  color: var(--landing-text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.landing-demo-link:hover {
  color: var(--landing-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 768px) {
  .landing-trust-badges {
    justify-content: center;
    gap: 12px 20px;
  }

  .landing-cta-subtext {
    text-align: center;
  }
}

/* ============================================
 * SCREENSHOT LIGHTBOX (examples product screens)
 * ============================================ */
.landing-screenshot-image.is-zoomable,
.landing-screenshot-card:hover .landing-screenshot-image.is-zoomable {
  cursor: zoom-in;
}

body.landing-lightbox-open {
  overflow: hidden;
}

.landing-lightbox[hidden] {
  display: none;
}
.landing-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.landing-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 12, 20, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: zoom-out;
}
.landing-lightbox-figure {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 1200px;
  max-height: 88vh;
}
.landing-lightbox-img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.landing-lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
}
.landing-lightbox-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s var(--landing-transition);
}
.landing-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.landing-lightbox-close svg {
  width: 22px;
  height: 22px;
}

/* ============================================
 * EXAMPLES "product screens" grid — enlarged.
 * The 4-up minmax(280px) grid rendered each shot ~254px wide, too small to
 * read. Fewer, larger columns make the screens legible; click-to-expand
 * (data-lightbox) opens them full size.
 * ============================================ */
.landing-screenshot-grid {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
}
@media (max-width: 768px) {
  .landing-screenshot-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
 * FAQ ACCORDION (landing pages)
 * Shared component. The --landing-faq-* tokens already live in this file;
 * these selectors used to be an inline <style> in faq.html, which meant any
 * other landing page using this markup rendered it unstyled. Pair with
 * /js/faq-accordion.js (it mirrors <details>'s open state onto .open).
 *
 * Scoped to `details.faq-item` ON PURPOSE: the contract-tool pages
 * (/contract-maken-gratis + /contracts/*) already use `div.faq-item` for a
 * different, divider-style accordion styled by contract-tool.css. A bare
 * .faq-item here would repaint those as boxed cards in landing-theme colours.
 * ============================================ */
details.faq-item {
  background: var(--landing-faq-item-bg);
  border: 1px solid var(--landing-faq-item-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

details.faq-item:hover {
  border-color: var(--landing-faq-item-border-hover);
}

details.faq-item .faq-question {
  padding: 20px 24px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--landing-faq-question-text);
}

details.faq-item .faq-question::after {
  content: "+";
  font-size: 24px;
  color: var(--landing-accent);
  transition: transform 0.3s ease;
}

details.faq-item.open .faq-question::after {
  transform: rotate(45deg);
}

details.faq-item .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
}

details.faq-item.open .faq-answer {
  max-height: 500px;
  padding: 0 24px 20px;
}

details.faq-item .faq-answer p {
  color: var(--landing-faq-answer-text);
  line-height: 1.7;
  margin: 0;
}