/* ============================================================
   LidFlow.ai — REFINEMENT v3 PASS
   Pre-launch polish · spacing fixes · mobile audit · trust signals
   Additive overrides — niets aan structuur gewijzigd.
   ============================================================ */

/* ----------------------------------------------------------
   DEEL 1 — HERO EYEBROW (neutral grey, pre-launch honest)
   ---------------------------------------------------------- */
.hero-eyebrow.v3-pilot-eyebrow {
  color: #5a6b64 !important;
}
.hero-eyebrow.v3-pilot-eyebrow .pulse-dot {
  background: #52c491;
}

/* ----------------------------------------------------------
   DEEL 1A — HERO MINI-TILES: airspace + repositioning
   Minimum 24px tussen tile en alle hoofdelementen.
   ---------------------------------------------------------- */
.scene .mini-tile {
  box-shadow:
    0 4px 14px rgba(12, 28, 23, 0.06),
    0 1px 3px rgba(12, 28, 23, 0.04) !important;
}

/* Reposition each mini-tile to negative space (override inline style) */
.scene .mini-tile-bpm,
.scene .mini-tile[style*="top: -56px"][style*="left: 4%"] {
  top: -88px !important;
  left: 0% !important;
}
.scene .mini-tile:not([class*="-bpm"]):not([class*="-pwr"]):not([class*="-kcal"])[style*="top: -56px"][style*="right: 6%"] {
  /* REPS tile: pushed higher, moved away from WhatsApp bubble */
  top: -88px !important;
  right: auto !important;
  left: 32% !important;
}
.scene .mini-tile-pwr,
.scene .mini-tile[style*="bottom: -56px"][style*="left: 18%"] {
  bottom: -88px !important;
  left: 4% !important;
}
.scene .mini-tile-kcal,
.scene .mini-tile[style*="bottom: -56px"][style*="right: 22%"] {
  bottom: -88px !important;
  right: 6% !important;
}

/* ----------------------------------------------------------
   DEEL 1B — PWR amber glow softened by 40%
   ---------------------------------------------------------- */
.mini-tile-pwr {
  box-shadow:
    0 3px 10px rgba(217, 119, 6, 0.10),
    0 0 0 3px rgba(245, 158, 11, 0.05) !important;
}
.mini-tile-pwr::after {
  box-shadow: 0 1px 4px rgba(217, 119, 6, 0.2) !important;
}

/* ----------------------------------------------------------
   DEEL 1C — Dashboard WhatsApp bubble: move OUT of KPI zone
   ---------------------------------------------------------- */
.scene .float-whatsapp {
  top: -68px !important;
  right: -8px !important;
  z-index: 6;
}

/* ----------------------------------------------------------
   DEEL 1D — Achievement badges: symmetric layout
   ---------------------------------------------------------- */
.hero .badge-1 { top: 14% !important; left: 16% !important; right: auto !important; bottom: auto !important; }
.hero .badge-2 { top: 14% !important; right: 16% !important; left: auto !important; bottom: auto !important; }
.hero .badge-3 { top: auto !important; bottom: 18% !important; left: 6% !important; right: auto !important; }
.hero .badge-4 { top: auto !important; bottom: 18% !important; right: 6% !important; left: auto !important; }

/* Smaller, quieter badges */
.hero .badge {
  font-size: 9.5px !important;
  padding: 9px 13px !important;
  letter-spacing: 0.13em !important;
}

/* Hide outer badges on narrower viewports to prevent crowd */
@media (max-width: 1280px) {
  .hero .badge-2, .hero .badge-4 { display: none !important; }
}

/* ----------------------------------------------------------
   DEEL 3 — "PERSOONLIJK BEREIKBAAR" trust card
   (replaces fake Google reviews badge — sits above marquee)
   ---------------------------------------------------------- */
.v3-trust-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 auto 16px;
  box-shadow: 0 4px 14px rgba(12, 28, 23, 0.05);
}
.v3-trust-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 1.5px solid var(--green-light);
  background: var(--green-soft);
}
.v3-trust-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.v3-trust-text {
  display: flex; flex-direction: column;
  gap: 2px;
  text-align: left;
}
.v3-trust-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.v3-trust-sub {
  font-size: 11px;
  color: #5a6b64;
  line-height: 1.3;
}

/* Marquee logos: quieter mono grey color */
.hero .marquee-logo {
  color: rgba(90, 107, 100, 0.55) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
}
.hero .trust-label {
  text-align: center;
}

/* ----------------------------------------------------------
   DEEL 5 — MOBILE-FIRST AUDIT (≤768px)
   ---------------------------------------------------------- */
@media (max-width: 768px) {

  body { overflow-x: hidden; }

  /* ===== HERO ===== */
  .hero { padding: 80px 20px 40px !important; }
  .cursor-orb { display: none !important; }

  /* Hide all achievement badges + stopwatch on mobile */
  .hero .badge,
  .hero .badge-1, .hero .badge-2, .hero .badge-3, .hero .badge-4,
  .stopwatch { display: none !important; }

  /* Hero photo: dim more to not compete with content */
  .hero-photo { width: 100%; opacity: 0.7; }
  .hero-photo img { opacity: 0.10; }

  /* Headline scale */
  .hero .headline {
    font-size: clamp(32px, 9.5vw, 40px) !important;
    line-height: 1.02 !important;
  }
  .hero .word-swap { font-size: 16px !important; }
  .hero .sub-headline { font-size: 15px !important; line-height: 1.55 !important; }

  /* Trust card stack first, marquee underneath */
  .hero .trust { margin-top: 32px !important; }
  .v3-trust-card {
    display: flex;
    width: 100%;
    max-width: 320px;
    margin: 0 auto 16px;
  }

  /* CTAs stack full-width */
  .hero .cta-row {
    flex-direction: column !important;
    width: 100%;
    gap: 10px !important;
  }
  .hero .cta-row .btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 14px 20px !important;
    min-height: 48px;
  }
  /* Hide secondary CTA on mobile — keep focus on Plan demo */
  .hero .cta-row .btn-secondary { display: none !important; }

  /* Service chips: 2x2 grid */
  .hero .chip-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px !important;
    width: 100%;
    margin-top: 24px !important;
  }
  .hero .chip {
    width: 100%;
    justify-content: center;
    font-size: 10.5px !important;
    padding: 7px 10px !important;
  }

  /* Scene: schaal naar 90% */
  .scene { transform: scale(0.9); transform-origin: top center; margin-top: 16px; }

  /* Mini tiles on mobile: only BPM + KCAL */
  .scene .mini-tile-bpm { display: flex !important; top: -52px !important; left: 0 !important; padding: 8px 12px !important; }
  .scene .mini-tile-kcal { display: flex !important; bottom: -52px !important; right: 0 !important; padding: 8px 12px !important; }
  .scene .mini-tile:not(.mini-tile-bpm):not(.mini-tile-kcal) { display: none !important; }
  .scene .mini-tile { font-size: 12px !important; min-width: 0 !important; }
  .scene .mini-tile-value { font-size: 13px !important; }

  /* WhatsApp bubble smaller, doesn't overlap stats */
  .scene .float-whatsapp {
    width: 200px !important;
    padding: 10px 12px !important;
    top: -56px !important;
    right: -4px !important;
  }
  .scene .float-whatsapp .wa-msg { font-size: 11px !important; }
  .scene .float-stat-value { font-size: 32px !important; }
  .scene .float-stat { padding: 12px 16px !important; }

  /* 3D equipment: only kettlebell + boxing-glove (plate), smaller + lower opacity */
  .equipment.kettlebell { display: block !important; width: 78px !important; height: 78px !important; opacity: 0.5 !important; }
  .equipment.plate { display: block !important; width: 90px !important; height: 90px !important; opacity: 0.5 !important; }
  .equipment.dumbbell { display: none !important; }

  /* Desktop ticker hidden — mobile-ticker shows instead */
  .ticker { display: none !important; }
  .ticker-mobile { display: flex !important; }

  /* ===== PILLARS ===== */
  .pillar-zone { padding: 64px 20px !important; }
  .pillar-zone .container,
  .zone-b .container {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  /* Text always above visual on mobile */
  .pillar-zone .p-text { order: 0; }
  .pillar-zone .p-visual { order: 1; }
  .p-headline { font-size: clamp(26px, 7.5vw, 32px) !important; }
  .p-sub { font-size: 15px !important; }
  .browser-3d, .ai-panel-3d, .ai-panel-tilt {
    transform: rotateY(-3deg) rotateX(2deg) !important;
  }

  /* ===== SCENARIOS ===== */
  /* (mostly handled in scenarios.css; tighten further) */
  .lf-scenarios { padding: 64px 20px 40px !important; }
  .lf-h2 { font-size: clamp(24px, 7.5vw, 28px) !important; }
  .lf-body { font-size: 15px !important; }
  .lf-stat-row { gap: 8px !important; }
  .lf-stat { padding: 10px 12px !important; }
  .lf-stat-val { font-size: 18px !important; }
  .lf-stat-lbl { font-size: 8.5px !important; }
  .lf-chat-3d, .lf-browser-3d, .lf-reminders-3d {
    transform: rotateY(-3deg) rotateX(2deg) !important;
    max-width: 100% !important;
  }
  .lf-scene-photo { display: none !important; }
  .lf-disclaimer {
    border-radius: 0 !important;
    border-left: 3px solid var(--amber) !important;
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 16px 20px !important;
  }
  .lf-scenario.s02 {
    margin-left: -20px !important;
    margin-right: -20px !important;
    padding: 48px 20px !important;
    border-radius: 0 !important;
  }

  /* ===== FOUNDER CARD ===== */
  .founder { padding: 64px 20px !important; }
  .founder-container {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    max-width: 100% !important;
  }
  .founder-portrait {
    max-width: 280px !important;
    margin: 0 auto !important;
    aspect-ratio: 1 / 1.1 !important;
  }
  .founder-story { text-align: left; }
  .founder-h2 { font-size: clamp(26px, 8vw, 32px) !important; }
  .founder-body { font-size: 15px !important; }
  .founder-trust-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .founder-pill { width: 100%; justify-content: flex-start; }

  /* ===== TRUST PROMISES ===== */
  .trust-promises { padding: 40px 20px !important; }
  .trust-promises-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px !important;
  }
  .trust-promise .ttl { font-size: 13.5px !important; }
  .trust-promise .sub { font-size: 11.5px !important; max-width: 100%; }

  /* ===== MID-CTA ===== */
  .cta-mid { padding: 64px 20px !important; min-height: auto !important; }
  .cta-mid-inner {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 0 !important;
  }
  .cta-mid h2 { font-size: clamp(30px, 8vw, 40px) !important; }
  .cta-mid .sub { font-size: 15px !important; }
  .dark-pill-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .dual-cta {
    flex-direction: column !important;
    width: 100%;
  }
  .dual-cta > * { width: 100%; justify-content: center; min-height: 48px; }
  .pilot-card { transform: none !important; max-width: 100% !important; padding: 24px !important; }
  .pilot-counter { font-size: 64px !important; }

  /* ===== FINAL-CTA ===== */
  .cta-final { padding: 64px 20px !important; min-height: auto !important; }
  .cta-final h2 { font-size: clamp(34px, 9vw, 44px) !important; }
  .cta-final .sub { font-size: 15px !important; }
  .btn-magnetic { font-size: 16px !important; padding: 14px 28px !important; width: 100%; max-width: 320px; justify-content: center; }
  .wa-bubble {
    position: static !important;
    margin: 24px auto 0 !important;
    display: inline-flex;
    transform: none !important;
  }

  /* ===== FOOTER ===== */
  .site-footer { padding: 56px 20px 24px !important; }
  .footer-inner { padding: 0 !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .f-brand { grid-column: auto !important; }
  .f-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* ===== UNIVERSAL ===== */
  button, a, .btn, .nav-cta, .nav-link {
    min-height: 44px;
  }
  button:active, .btn:active, a[role="button"]:active {
    transform: scale(0.98);
    transition: transform 0.08s;
  }
  /* Margins between sections */
  section + section,
  section + footer { margin-top: 0 !important; }

  /* Modal: better fit on small screens */
  .lf-modal { padding: 12px !important; }
  .lf-modal-card { padding: 24px !important; border-radius: 16px !important; }
  .lf-cal-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
  .lf-cal-day { padding: 10px 6px !important; }
  .lf-cal-day .n { font-size: 18px !important; }
  .lf-cal-times { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
}

/* ----------------------------------------------------------
   DEEL 5J — Mobile mini-ticker (replaces sticky desktop ticker)
   Use existing .ticker-mobile from hero.css, restyle as full-width bar
   ---------------------------------------------------------- */
@media (max-width: 768px) {
  .ticker-mobile {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 24px -20px 0;
    padding: 10px 16px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    width: calc(100% + 40px);
  }
  .ticker-mobile-track {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    display: block;
    height: 16px;
  }
  .ticker-mobile-track span {
    display: inline-block;
    padding-right: 32px;
    animation: tickerSlide 24s linear infinite;
  }
  @keyframes tickerSlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
}

/* ----------------------------------------------------------
   DEEL 7 — Reduced motion respects all v3 additions
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ticker-mobile-track span { animation: none !important; }
}

/* ----------------------------------------------------------
   DEEL 8 (v3.1) — Nav sticky-on-scroll w/ glass shrink
   ---------------------------------------------------------- */
.nav-wrap {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 24px !important;
  transition: padding 0.3s cubic-bezier(0.16,1,0.3,1),
              background 0.3s,
              backdrop-filter 0.3s,
              box-shadow 0.3s;
}
.nav-wrap.v3-scrolled {
  padding: 10px 24px !important;
  background: rgba(250, 251, 249, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 rgba(226, 235, 230, 0.6),
              0 8px 24px rgba(12, 28, 23, 0.05);
}
.nav-wrap.v3-scrolled .nav {
  transform: scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.nav-wrap.v3-scrolled .nav-cta {
  box-shadow: 0 4px 16px rgba(82, 196, 145, 0.18);
}
.hero { padding-top: 96px !important; }
@media (max-width: 768px) {
  .nav-wrap { padding: 12px 16px !important; }
  .nav-wrap.v3-scrolled { padding: 8px 16px !important; }
  .hero { padding-top: 72px !important; }
}