/*
Theme Name: Lifestyle Tracker Website
Theme URI: https://lifestyletracker.nl
Author: Ycore B.V.
Author URI: https://ycore.nl
Description: Officiële marketingwebsite voor Lifestyle Tracker, een product van Ycore B.V. Homepage, Over, Support en Contact. Alle teksten zijn te bewerken via Aanpassen (Customizer) en de paginabewerker. Losse installatie, gescheiden van de Lifestyle Tracker plugin zelf.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: lifestyletracker
License: Proprietary
*/

/* =========================================================
   DESIGN TOKENS — Lifestyle Tracker huisstijl
   Pink #FF2D7A · Light Pink #FF6BAA · Purple #7B3CF0 · Navy #0D1230
   ========================================================= */
:root{
  --lt-pink: #FF2D7A;
  --lt-pink-light: #FF6BAA;
  --lt-purple: #7B3CF0;
  --lt-navy: #0D1230;
  --lt-navy-soft: #171B45;
  --lt-navy-softer: #23285c;

  --lt-bg: #FFFFFF;
  --lt-bg-tint: #FBF7FD;
  --lt-bg-tint-2: #F5EFFC;
  --lt-line: #ECE3F7;

  --lt-ink: var(--lt-navy);
  --lt-ink-soft: #4B4E72;
  --lt-ink-muted: #7A7D9E;
  --lt-white: #ffffff;

  --lt-gradient: linear-gradient(135deg, var(--lt-pink) 0%, var(--lt-purple) 100%);
  --lt-gradient-soft: linear-gradient(135deg, rgba(255,45,122,0.10) 0%, rgba(123,60,240,0.10) 100%);
  --lt-gradient-navy: linear-gradient(160deg, #171B45 0%, #0D1230 65%, #1c1146 100%);

  --lt-shadow-sm: 0 2px 10px rgba(13,18,48,0.06);
  --lt-shadow-md: 0 12px 32px rgba(13,18,48,0.10);
  --lt-shadow-lg: 0 24px 60px rgba(13,18,48,0.16);
  --lt-shadow-pink: 0 16px 40px rgba(255,45,122,0.28);

  --lt-radius-sm: 12px;
  --lt-radius-md: 20px;
  --lt-radius-lg: 28px;
  --lt-radius-pill: 999px;

  --lt-font-display: 'Poppins', 'Poppins Fallback', -apple-system, sans-serif;
  --lt-font-body: 'Poppins', 'Poppins Fallback', -apple-system, sans-serif;

  --lt-container: 1180px;
  --lt-header-h: 116px;
  --lt-header-h-scrolled: 92px;
  --lt-logo-h: 78px;
  --lt-logo-h-scrolled: 60px;
}

/* =========================================================
   RESET / BASE
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body{
  margin: 0;
  font-family: var(--lt-font-body);
  color: var(--lt-ink);
  background: var(--lt-bg);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; height: auto; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; font-size: inherit; }

h1,h2,h3,h4{
  font-family: var(--lt-font-display);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  color: var(--lt-navy);
}
h1{ font-size: clamp(2.4rem, 4.4vw, 3.7rem); }
h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; }

.container{
  max-width: var(--lt-container);
  margin: 0 auto;
  padding: 0 28px;
}

.lt-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--lt-font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lt-eyebrow span{ color: var(--lt-purple); }
.lt-eyebrow span.is-pink{ color: var(--lt-pink); }
.lt-eyebrow::before{
  content: "";
  width: 22px; height: 2px;
  background: var(--lt-gradient);
  border-radius: 2px;
  display: inline-block;
}

.lt-lead{
  font-size: 1.15rem;
  color: var(--lt-ink-soft);
  max-width: 640px;
}

/* Buttons */
.lt-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--lt-font-display);
  font-weight: 700;
  font-size: 0.98rem;
  padding: 15px 28px;
  border-radius: var(--lt-radius-pill);
  border: 2px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
  white-space: nowrap;
}
.lt-btn-primary{
  background: var(--lt-gradient);
  color: #fff;
  box-shadow: var(--lt-shadow-pink);
}
.lt-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 20px 46px rgba(255,45,122,0.36); }
.lt-btn-ghost{
  background: transparent;
  color: var(--lt-navy);
  border-color: var(--lt-line);
}
.lt-btn-ghost:hover{ border-color: var(--lt-purple); color: var(--lt-purple); transform: translateY(-2px); }
.lt-btn-on-dark{
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.lt-btn-on-dark:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); transform: translateY(-2px); }
.lt-btn-sm{ padding: 10px 20px; font-size: 0.88rem; }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--lt-purple);
  outline-offset: 3px;
  border-radius: 6px;
}

/* =========================================================
   HEADER
   ========================================================= */
.lt-header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 999;
  height: var(--lt-header-h);
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0);
  transition: background .3s ease, box-shadow .3s ease, height .3s ease;
}
.lt-header.is-scrolled{
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: var(--lt-shadow-sm);
  height: var(--lt-header-h-scrolled);
}
.lt-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
/* Het bijgesneden wordmerk vult de opgegeven hoogte volledig, dus deze
   hoogte is ook echt wat je op het scherm ziet. Bij het scrollen krimpt
   het logo mee met de header. */
.lt-logo img{ height: var(--lt-logo-h); width: auto; max-width: 100%; object-fit: contain; transition: height .3s ease; }
.lt-header.is-scrolled .lt-logo img{ height: var(--lt-logo-h-scrolled); }
/* Een zelf geüpload logo (Aanpassen → Site-identiteit) heeft geen bekende
   witruimte, dus dat houdt de oude, bescheiden maat. */
.lt-logo-custom img{ height: 48px; }
.lt-header.is-scrolled .lt-logo-custom img{ height: 40px; }
/* Mag krimpen als de knop en het hamburgermenu ernaast anders geen ruimte
   houden; zonder min-width:0 loopt een flex-item over zijn buurman heen. */
.lt-logo{ display: flex; align-items: center; min-width: 0; flex: 0 1 auto; }

.lt-nav{ display: flex; align-items: center; gap: 6px; }
.lt-nav a{
  font-weight: 600;
  font-size: 0.96rem;
  padding: 10px 16px;
  border-radius: var(--lt-radius-pill);
  color: var(--lt-navy);
  transition: background .2s ease, color .2s ease;
}
.lt-nav a:hover, .lt-nav a.is-active{ background: var(--lt-bg-tint-2); color: var(--lt-purple); }

.lt-header-actions{ display: flex; align-items: center; gap: 10px; }

.lt-burger{
  display: none;
  width: 44px; height: 44px;
  border: none; background: var(--lt-bg-tint-2);
  border-radius: var(--lt-radius-pill);
  align-items: center; justify-content: center;
  position: relative;
}
.lt-burger span, .lt-burger span::before, .lt-burger span::after{
  content: ""; display: block; width: 18px; height: 2px; background: var(--lt-navy); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.lt-burger span::before{ position: absolute; transform: translateY(-6px); }
.lt-burger span::after{ position: absolute; transform: translateY(6px); }
.lt-burger.is-open span{ background: transparent; }
.lt-burger.is-open span::before{ transform: rotate(45deg); }
.lt-burger.is-open span::after{ transform: rotate(-45deg); }

.lt-mobile-nav{
  display: none;
  position: fixed;
  top: 76px; left: 16px; right: 16px;
  background: #fff;
  border-radius: var(--lt-radius-md);
  box-shadow: var(--lt-shadow-lg);
  padding: 14px;
  z-index: 998;
}
.lt-mobile-nav.is-open{ display: block; }
.lt-mobile-nav a{
  display: block;
  padding: 14px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--lt-line);
  color: var(--lt-navy);
}
.lt-mobile-nav a:last-child{ border-bottom: none; }
.lt-mobile-nav .lt-btn{ width: 100%; margin-top: 10px; }

/* =========================================================
   HERO
   ========================================================= */
.lt-hero{
  position: relative;
  padding: calc(var(--lt-header-h) + 76px) 0 100px;
  overflow: hidden;
  background: var(--lt-bg-tint);
}
.lt-hero::before{
  content: "";
  position: absolute;
  top: -220px; right: -200px;
  width: 640px; height: 640px;
  background: var(--lt-gradient);
  opacity: 0.16;
  filter: blur(10px);
  border-radius: 44% 56% 60% 40% / 45% 40% 60% 55%;
}
.lt-hero .container{
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.lt-hero h1{ margin-bottom: 22px; }
.lt-hero h1 .lt-accent{
  background: var(--lt-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lt-hero-ctas{ display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.lt-hero-meta{
  margin-top: 30px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  color: var(--lt-ink-muted);
  font-size: 0.92rem;
  font-weight: 600;
}
.lt-hero-meta span{ display: inline-flex; align-items: center; gap: 8px; }
.lt-hero-meta span::before{
  content: "✓";
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--lt-gradient); color: #fff; font-size: 0.7rem;
}

/* Signature hero visual: floating tracker card */
.lt-hero-visual{ position: relative; display: flex; justify-content: center; }
.lt-tracker-card{
  position: relative;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: var(--lt-radius-lg);
  box-shadow: var(--lt-shadow-lg);
  padding: 30px 26px 26px;
  transform: rotate(2.5deg);
  animation: lt-float 6s ease-in-out infinite;
}
.lt-tracker-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--lt-radius-lg);
  padding: 1.5px;
  background: var(--lt-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.5;
  pointer-events: none;
}
.lt-tracker-card-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.lt-tracker-card-head strong{ font-family: var(--lt-font-display); font-size: 0.98rem; }
.lt-tracker-badge{
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 5px 11px; border-radius: var(--lt-radius-pill);
  background: var(--lt-gradient-soft); color: var(--lt-purple);
}
.lt-tracker-row{
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--lt-line);
}
.lt-tracker-row:last-child{ border-bottom: none; }
.lt-tracker-row img{ width: 30px; height: 30px; flex-shrink: 0; }
.lt-tracker-row-body{ flex: 1; min-width: 0; }
.lt-tracker-row-body .label{ font-size: 0.86rem; font-weight: 600; color: var(--lt-ink-soft); display: flex; justify-content: space-between; margin-bottom: 6px; }
.lt-tracker-row-body .label b{ color: var(--lt-navy); font-weight: 700; }
.lt-bar{ height: 7px; border-radius: 8px; background: var(--lt-bg-tint-2); overflow: hidden; }
.lt-bar i{ display: block; height: 100%; border-radius: 8px; background: var(--lt-gradient); }

.lt-float-chip{
  position: absolute;
  background: #fff;
  border-radius: var(--lt-radius-md);
  box-shadow: var(--lt-shadow-md);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 0.86rem;
  animation: lt-float 7s ease-in-out infinite;
}
.lt-float-chip.chip-1{ top: -6%; left: -8%; animation-delay: .4s; }
.lt-float-chip.chip-2{ bottom: 4%; right: -10%; animation-delay: 1.2s; }
.lt-float-chip .dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--lt-gradient); }

@keyframes lt-float{
  0%, 100%{ transform: translateY(0) rotate(2.5deg); }
  50%{ transform: translateY(-12px) rotate(1deg); }
}
.lt-float-chip.chip-1, .lt-float-chip.chip-2{ animation-name: lt-float-chip; }
@keyframes lt-float-chip{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* =========================================================
   FEATURE GRID
   ========================================================= */
.lt-section{ padding: 96px 0; }
.lt-section-tint{ background: var(--lt-bg-tint); }
.lt-section-navy{ background: var(--lt-gradient-navy); color: #fff; }
.lt-section-navy h2, .lt-section-navy h3{ color: #fff; }
.lt-section-navy .lt-lead{ color: rgba(255,255,255,0.72); }

.lt-section-head{ max-width: 680px; margin-bottom: 56px; }
.lt-section-head.is-center{ margin-left: auto; margin-right: auto; text-align: center; }
.lt-section-head.is-center .lt-eyebrow::before{ display: none; }

.lt-grid-5{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
.lt-feature-card{
  background: #fff;
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-md);
  padding: 28px 22px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.lt-feature-card:hover{ transform: translateY(-6px); box-shadow: var(--lt-shadow-md); border-color: transparent; }
.lt-feature-icon{
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--lt-gradient-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.lt-feature-icon img{ width: 30px; height: 30px; }
.lt-feature-card h3{ font-size: 1.05rem; margin-bottom: 8px; }
.lt-feature-card p{ font-size: 0.94rem; color: var(--lt-ink-soft); margin: 0; }

/* =========================================================
   WHY / POINTS (3-up)
   ========================================================= */
.lt-grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lt-point{
  padding: 32px 28px;
  border-radius: var(--lt-radius-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
}
.lt-point .lt-point-num{
  font-family: var(--lt-font-display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--lt-pink-light);
  margin-bottom: 14px;
  display: block;
}
.lt-point p{ color: rgba(255,255,255,0.72); margin: 0; }

/* =========================================================
   SPLIT (image/content) SECTIONS — used on Over-pagina
   ========================================================= */
.lt-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.lt-split.is-reverse .lt-split-media{ order: 2; }
.lt-split-media{
  background: var(--lt-gradient);
  border-radius: var(--lt-radius-lg);
  padding: 48px;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
}
.lt-split-media img{ max-width: 220px; filter: drop-shadow(0 20px 40px rgba(13,18,48,0.25)); }

/* =========================================================
   CTA BANNER
   ========================================================= */
.lt-cta-banner{
  border-radius: var(--lt-radius-lg);
  background: var(--lt-gradient);
  padding: 64px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.lt-cta-banner h2{ color: #fff; margin-bottom: 14px; }
.lt-cta-banner p{ color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto 30px; }
.lt-cta-banner .lt-btn-primary{ background: #fff; color: var(--lt-navy); box-shadow: 0 16px 40px rgba(0,0,0,0.18); }
.lt-cta-banner .lt-btn-primary:hover{ box-shadow: 0 20px 48px rgba(0,0,0,0.24); }

/* =========================================================
   GENERIC PAGE CONTENT (Over / Support / Contact via editor)
   ========================================================= */
.lt-page-hero{
  padding: calc(var(--lt-header-h) + 64px) 0 60px;
  background: var(--lt-bg-tint);
  text-align: center;
}
.lt-page-hero .lt-lead{ margin: 0 auto; text-align: center; }
.lt-entry-content{ padding: 76px 0; max-width: 780px; margin: 0 auto; }
.lt-entry-content h2{ margin-top: 1.3em; }
.lt-entry-content h2:first-child{ margin-top: 0; }
.lt-entry-content ul, .lt-entry-content ol{ margin: 0 0 1.2em; padding-left: 1.3em; list-style: revert; }
.lt-entry-content a{ color: var(--lt-purple); text-decoration: underline; text-decoration-color: var(--lt-pink-light); text-underline-offset: 3px; }
.lt-entry-content blockquote{
  border-left: 4px solid var(--lt-pink);
  margin: 1.6em 0; padding: 0.4em 0 0.4em 1.4em;
  font-style: italic; color: var(--lt-ink-soft);
}
.lt-entry-content img{ border-radius: var(--lt-radius-md); }
.lt-entry-content figure{ margin: 1.6em 0; }

/* FAQ accordion shortcode */
.lt-faq{ border: 1px solid var(--lt-line); border-radius: var(--lt-radius-sm); margin-bottom: 12px; overflow: hidden; }
.lt-faq-q{
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; background: #fff; border: none;
  padding: 18px 20px; font-family: var(--lt-font-display); font-weight: 700; font-size: 1rem; color: var(--lt-navy);
}
.lt-faq-q::after{
  content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--lt-purple);
  transition: transform .25s ease;
  flex-shrink: 0;
}
.lt-faq.is-open .lt-faq-q::after{ transform: rotate(45deg); }
.lt-faq-a{ max-height: 0; overflow: hidden; transition: max-height .3s ease; background: var(--lt-bg-tint); }
.lt-faq-a-inner{ padding: 2px 20px 18px; color: var(--lt-ink-soft); }
.lt-faq.is-open .lt-faq-a{ max-height: 600px; }

/* Contact */
.lt-contact-grid{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; }
.lt-contact-info-card{
  background: var(--lt-gradient-navy);
  color: #fff;
  border-radius: var(--lt-radius-lg);
  padding: 40px;
}
.lt-contact-info-card h3{ color: #fff; }
.lt-contact-info-card .lt-info-row{ display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; }
.lt-contact-info-card .lt-info-row .ico{
  width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.1rem;
}
.lt-contact-info-card a{ color: #fff; text-decoration: underline; text-decoration-color: var(--lt-pink-light); }
.lt-contact-info-card .login-box{
  margin-top: 30px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.16);
}

.lt-form{ display: grid; gap: 18px; }
.lt-form-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lt-form label{ font-weight: 700; font-size: 0.88rem; margin-bottom: 8px; display: block; }
.lt-form input, .lt-form textarea{
  width: 100%; padding: 14px 16px; border-radius: var(--lt-radius-sm);
  border: 1.5px solid var(--lt-line); background: var(--lt-bg-tint); color: var(--lt-navy);
  transition: border-color .2s ease, background .2s ease;
}
.lt-form input:focus, .lt-form textarea:focus{ border-color: var(--lt-purple); background: #fff; outline: none; }
.lt-form textarea{ min-height: 150px; resize: vertical; }
.lt-form .hp-field{ position: absolute; left: -9999px; opacity: 0; }
.lt-form-msg{ padding: 14px 18px; border-radius: var(--lt-radius-sm); font-weight: 600; margin-bottom: 8px; }
.lt-form-msg.is-success{ background: #E9FBF1; color: #17845a; }
.lt-form-msg.is-error{ background: #FDEDF1; color: var(--lt-pink); }

/* =========================================================
   FOOTER
   ========================================================= */
.lt-footer{
  background: var(--lt-navy);
  color: rgba(255,255,255,0.65);
  padding: 64px 0 28px;
}
.lt-footer-top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.lt-footer-brand img{ height: 34px; margin-bottom: 16px; }
.lt-footer-brand p{ max-width: 280px; font-size: 0.92rem; }
.lt-footer h4{ color: #fff; font-family: var(--lt-font-display); font-size: 0.92rem; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 18px; }
.lt-footer ul li{ margin-bottom: 10px; }
.lt-footer a{ font-size: 0.94rem; transition: color .2s ease; }
.lt-footer a:hover{ color: #fff; }
.lt-footer-bottom{
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 26px; font-size: 0.85rem;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px){
  /* Zonder hoofdmenu is er ruimte zat, maar op een telefoon mag het logo de
     Inloggen-knop niet wegdrukken; daarom hier al iets kleiner. */
  :root{ --lt-header-h: 100px; --lt-header-h-scrolled: 84px; --lt-logo-h: 62px; --lt-logo-h-scrolled: 52px; }
  .lt-nav{ display: none; }
  .lt-burger{ display: flex; }
  .lt-hero .container{ grid-template-columns: 1fr; }
  .lt-hero-visual{ order: -1; margin-bottom: 20px; }
  .lt-tracker-card{ max-width: 340px; }
  .lt-grid-5{ grid-template-columns: repeat(2, 1fr); }
  .lt-grid-3{ grid-template-columns: 1fr; }
  .lt-split{ grid-template-columns: 1fr; gap: 36px; }
  .lt-split.is-reverse .lt-split-media{ order: 0; }
  .lt-contact-grid{ grid-template-columns: 1fr; }
  .lt-footer-top{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  :root{ --lt-header-h: 82px; --lt-header-h-scrolled: 72px; --lt-logo-h: 40px; --lt-logo-h-scrolled: 36px; }
  .lt-header-actions{ gap: 8px; flex: 0 0 auto; }
  .lt-section{ padding: 64px 0; }
  .lt-cta-banner{ padding: 40px 24px; }
  .lt-grid-5{ grid-template-columns: 1fr 1fr; }
  .lt-form-row{ grid-template-columns: 1fr; }
  .lt-footer-top{ grid-template-columns: 1fr; }
  .container{ padding: 0 20px; }
  .lt-hero{ padding-top: calc(var(--lt-header-h) + 40px); }
}
/* Smalle telefoons: het logo, de Inloggen-knop en het hamburgermenu passen
   met z'n drieën niet meer naast elkaar. De knop verdwijnt uit de balk; in
   het uitklapmenu staat hij nog steeds bovenaan als "Inloggen bij de
   tracker". Zo blijft het logo leesbaar in plaats van dat alles krimpt. */
@media (max-width: 420px){
  .lt-header-actions .lt-btn{ display: none; }
}

/* Mobiele correcties voor de premium marketingsite */
@media (max-width: 680px){
  .premium-nav .nav{ height: 66px; }
  .premium-nav .logo{ width: 148px; max-height: 48px; object-fit: contain; }
  .premium-nav .mobile-toggle{ font-size: 22px; }

  .page-id-73 .dark-story{ padding: 64px 0; }
  .page-id-73 .dark-story .premium-heading{ margin-bottom: 34px; }
  .page-id-73 .dark-story .premium-heading h2{ font-size: clamp(34px, 9vw, 44px); }
  .page-id-73 .four-brands{
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
  }
  .page-id-73 .four-brands .fb{
    min-height: 190px;
    padding: 18px;
    border-radius: 22px;
  }
  .page-id-73 .four-brands .fb i{
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }
  .page-id-73 .four-brands .fb b{ font-size: 17px; }
  .page-id-73 .four-brands .fb small{ font-size: 12px; }
}

@media (max-width: 360px){
  .page-id-73 .four-brands{ grid-template-columns: 1fr; }
  .page-id-73 .four-brands .fb{ min-height: 165px; }
}

/* =========================================================
   DEMO
   ========================================================= */
.lt-demo-hero{ padding-bottom: 72px; }
.lt-demo-section{ overflow: hidden; }
.lt-demo-intro{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: 34px;
}
.lt-demo-intro > div:first-child{ max-width: 720px; }
.lt-demo-switch{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  background: var(--lt-bg-tint-2);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-pill);
  flex-shrink: 0;
}
.lt-demo-tab{
  border: 0;
  background: transparent;
  color: var(--lt-ink-soft);
  font-weight: 700;
  padding: 11px 18px;
  border-radius: var(--lt-radius-pill);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.lt-demo-tab.is-active{
  background: #fff;
  color: var(--lt-purple);
  box-shadow: var(--lt-shadow-sm);
}
.lt-product-demo .container{ max-width: 1040px; }
.lt-demo-stage{
  max-width: 820px;
  margin: 0 auto;
  background: var(--lt-gradient-soft);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-lg);
  padding: 22px;
}
.lt-demo-panel[hidden]{ display: none; }
.lt-device{
  background: #11152f;
  overflow: hidden;
  box-shadow: var(--lt-shadow-lg);
}
.lt-device video{
  display: block;
  width: 100%;
  height: auto;
  background: #0b0f28;
}
.lt-device-desktop{
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 10px;
}
.lt-device-desktop video{ border-radius: 14px; }
.lt-demo-coach-video{ max-width: 680px; }
.lt-device-mobile-wrap{
  display: grid;
  grid-template-columns: minmax(240px, 360px) 1fr;
  gap: 58px;
  align-items: center;
  justify-content: center;
  padding: 18px 42px;
}
.lt-device-mobile{
  border-radius: 38px;
  padding: 10px;
  max-width: 330px;
  justify-self: center;
}
.lt-device-mobile video{
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 30px;
}
.lt-demo-mobile-copy{ max-width: 430px; }
.lt-demo-kicker{
  display: inline-block;
  color: var(--lt-pink);
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lt-demo-mobile-copy p{ color: var(--lt-ink-soft); }
.lt-demo-coach-grid{
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 52px;
  align-items: center;
}
.lt-demo-coach-copy .lt-btn{ margin-top: 10px; }
.lt-demo-missing{
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  text-align: center;
  background: linear-gradient(145deg, var(--lt-navy-soft), var(--lt-navy));
}
.lt-device-mobile .lt-demo-missing{
  aspect-ratio: 9 / 16;
  min-height: 0;
  border-radius: 30px;
}
.lt-demo-missing strong{ font-size: 1.2rem; }
.lt-demo-missing span{ color: rgba(255,255,255,.68); font-size: .92rem; }

.lt-demo-teaser{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 42px;
  align-items: center;
  padding: 42px 46px;
  background: var(--lt-gradient-soft);
  border: 1px solid var(--lt-line);
  border-radius: var(--lt-radius-lg);
}
.lt-demo-teaser p:last-child{ margin-bottom: 0; }
.lt-demo-teaser-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 980px){
  .lt-demo-intro{ align-items: flex-start; flex-direction: column; }
  .lt-demo-coach-grid{ grid-template-columns: 1fr; }
  .lt-demo-mobile-wrap{ grid-template-columns: 1fr; gap: 34px; padding: 14px; }
  .lt-demo-mobile-copy{ text-align: center; margin: 0 auto; }
  .lt-demo-teaser{ grid-template-columns: 1fr; }
  .lt-demo-teaser-actions{ justify-content: flex-start; }
}
@media (max-width: 600px){
  .lt-demo-stage{ padding: 14px; }
  .lt-device-desktop{ padding: 6px; border-radius: 16px; }
  .lt-device-desktop video{ border-radius: 11px; }
  .lt-device-mobile{ max-width: 270px; }
  .lt-demo-switch{ width: 100%; }
  .lt-demo-tab{ flex: 1; }
  .lt-demo-teaser{ padding: 30px 24px; }
  .lt-demo-teaser-actions{ flex-direction: column; align-items: stretch; }
}