* { box-sizing: border-box; }

/* Mobiele breedtebeveiliging */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

body,
main,
section,
header,
footer,
div,
figure,
blockquote,
p,
a {
  min-width: 0;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

p,
blockquote,
a,
span {
  overflow-wrap: anywhere;
}


:root {
  --bg: #0e0f11;
  --text: #f7f7f2;
  --muted: #a7abb2;
  --green: #29df4d;
  --border: rgba(255,255,255,.09);
}

html { min-height: 100%; background: var(--bg); }

body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 10%, rgba(41,223,77,.16), transparent 24rem),
    linear-gradient(180deg, #171b1c 0%, #0e0f11 54%, #0a0b0d 100%);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.page-shell {
  width: min(100% - 32px, 820px);
  min-height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px 0 28px;
}

.hero { text-align: center; }

.brand {
  position: relative;
  display: inline-grid;
  place-items: center;
  margin-bottom: 28px;
}

.brand::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(41,223,77,.22);
  filter: blur(44px);
}

.logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(196px, 50vw);
  height: auto;
}

h1 {
  margin: 0;
  font-size: clamp(2.35rem, 7vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -.045em;
  font-weight: 760;
}

h1 span { color: var(--green); }

.intro {
  width: min(690px, 100%);
  margin: 30px auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.5vw, 1.18rem);
  line-height: 1.62;
}

.status-demo {
  width: min(460px, 92%);
  margin: 0 auto 34px;
  display: grid;
  grid-template-columns: 10px 1fr 10px;
  gap: 12px;
  align-items: center;
}

/* Deze twee horen bij .status-demo (staat sinds de "minimal launch
   version" niet meer in de pagina). Ze zijn er bewust aan gekoppeld:
   de app gebruikt dezelfde klassenamen in de telefoon hieronder. */
.status-demo .status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 20px rgba(41,223,77,.9);
}

.status-demo .status-dot.end { opacity: .45; }

.status-demo .status-line {
  height: 1px;
  background: linear-gradient(90deg, rgba(41,223,77,.42), rgba(255,255,255,.22), rgba(41,223,77,.16));
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 32px;
  margin: 0 auto;
}

.feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d8dade;
  font-size: .95rem;
}

.feature svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: var(--green);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(41,223,77,.18));
}

.cta {
  display: inline-flex;
  min-height: 58px;
  padding: 0 25px;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  background: #fff;
  color: #111315;
  text-decoration: none;
  font-size: 1.06rem;
  font-weight: 750;
  box-shadow: 0 14px 40px rgba(0,0,0,.3);
  transition: transform .2s ease, box-shadow .2s ease;
}

.cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
}

.cta:focus-visible {
  outline: 3px solid rgba(41,223,77,.75);
  outline-offset: 4px;
}

.cta.wobble { animation: wobble .62s ease; }

footer {
  margin-top: 44px;
  text-align: center;
  color: #5d626a;
  font-size: .72rem;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-1.2deg) scale(1.015); }
  40% { transform: rotate(1.1deg) scale(1.015); }
  60% { transform: rotate(-.7deg) scale(1.01); }
  80% { transform: rotate(.4deg) scale(1.005); }
}


.product-block {
  margin-top: 44px;
  padding: 34px 0 38px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.signup {
  margin-top: 32px;
}

@media (max-width: 560px) {
  .page-shell {
    width: min(100% - 24px, 820px);
    justify-content: flex-start;
  }

  .page-shell {
    padding-top: 34px;
  }

  .product-block {
    margin-top: 34px;
    padding: 28px 0 32px;
  }

  .features {
    gap: 16px 22px;
  }

  .signup {
    margin-top: 28px;
  }


  .brand { margin-bottom: 16px; }

  .brand::before {
    width: 110px;
    height: 110px;
  }

  .logo { width: min(154px, 48vw); }

  h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
    line-height: 1.1;
  }

  .intro {
    margin-top: 18px;
    font-size: .99rem;
  }

  .status-demo { margin-top: 22px; }

  .features {
    gap: 13px 20px;
    margin-bottom: 24px;
  }

  .feature { font-size: .9rem; }

  .cta { width: 100%; }

  footer {
    margin-top: 28px;
    padding-bottom: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
  }
}


/* Minimal launch version */
.product-block,
.status-demo,
.features {
  display: none !important;
}

.signup {
  margin-top: 36px;
}

footer {
  margin-top: 52px;
}

.credits {
  font-size: .68rem;
  color: #555a61;
}

.legal-links {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.legal-links a {
  color: #4f545b;
  font-size: .64rem;
  text-decoration: none;
}

.legal-links a:hover {
  color: #777d85;
}

.legal-page {
  width: min(100% - 32px, 720px);
  margin: 0 auto;
  padding: 56px 0 48px;
}

.legal-page .back {
  display: inline-block;
  margin-bottom: 30px;
  color: var(--green);
  text-decoration: none;
  font-size: .9rem;
}

.legal-page h1 {
  font-size: clamp(2rem, 7vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin-bottom: 26px;
}

.legal-page h2 {
  margin: 30px 0 10px;
  font-size: 1.05rem;
}

.legal-page p {
  color: var(--muted);
  line-height: 1.65;
  font-size: .98rem;
}

.legal-page .tiny-note {
  margin-top: 36px;
  color: #5d626a;
  font-size: .76rem;
}

@media (max-width: 560px) {
  .signup {
    margin-top: 30px;
  }

  footer {
    margin-top: 42px;
  }
}


.maker-quote {
  margin: 38px auto 0;
  text-align: center;
}

/* Alleen het portret: het LinkedIn-logo in de proof-regel is óók een
   img binnen deze figure, maar geen directe kindregel. */
.maker-quote > img {
  width: 62px;
  height: 62px;
  display: block;
  margin: 0 auto 16px;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 10px 28px rgba(0,0,0,.28),
    0 0 0 5px rgba(255,255,255,.025);
}

.maker-quote blockquote {
  margin: 0;
  color: #d9dbde;
  font-size: 1rem;
  line-height: 1.45;
  
}

.maker-quote figcaption {
  margin-top: 7px;
  color: #737880;
  font-size: .78rem;
}

@media (max-width: 560px) {
  .maker-quote {
    margin-top: 34px;
  }

  .maker-quote > img {
    width: 58px;
    height: 58px;
  }
}


.store-coming {
  width: fit-content;
  margin-top: 9px;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  background: rgba(255,255,255,.035);
  color: #e2e4e7;
  font-size: .74rem;
  font-weight: 650;
  letter-spacing: -.01em;
}

/* Het actieblok: op mobiel staat dit ná de telefoon, op desktop onder
   de tekstkolom. De ademruimte zit hier, zodat de regel hieronder niet
   aan de intro plakt. */
.copy-actions { margin-top: 34px; }
.copy-actions .signup { margin-top: 22px; }

/* Wat het kost om mee te doen: niets om te installeren, één code. */
.signup-lead {
  width: min(540px, 100%);
  margin: 0 auto;
  color: var(--muted);
  font-size: .93rem;
  line-height: 1.5;
}

/* Tweede pad onder de knop: eerst rondkijken in de demo. */
.demo-note {
  width: min(540px, 100%);
  margin: 14px auto 0;
  color: #747981;
  font-size: .9rem;
}
.demo-note a {
  color: #c9ccd1;
  text-decoration-color: rgba(201, 204, 209, .45);
  text-underline-offset: 3px;
}
.demo-note a:hover { color: #fff; }

/* Social proof bij de maker: de handtekening onder de pagina. Woordmerk,
   haarlijn en het grote getal vormen samen met het ene onderschrift één
   link naar de post; bewust geen knopvorm. De vorm vertelt het verhaal,
   de tekst blijft één regel. */
.li-link {
  display: inline-block;
  margin-top: 46px;
  color: inherit;
  text-decoration: none;
}
.li-blok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
/* Woordmerk op 24px (≈88px breed): onmiskenbaar de afzender, maar het
   getal rechts van de haarlijn blijft de hoofdrol. */
.li-logo {
  height: 24px;
  width: auto;
  opacity: .9;
  transition: opacity .2s ease;
}
.li-streep {
  width: 1px;
  height: 46px;
  background: rgba(255,255,255,.16);
}
.li-cijfers { text-align: left; }
.li-getal {
  display: block;
  font-size: 2.2rem;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.05;
  color: var(--text);
}
.li-getal-label {
  display: block;
  margin-top: 2px;
  font-size: .85rem;
  color: #737880;
}
.li-caption {
  display: block;
  margin-top: 16px;
  font-size: .88rem;
  color: #9aa0a8;
  text-decoration: underline;
  text-decoration-color: rgba(154,160,168,.35);
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.li-link:hover .li-logo { opacity: 1; }
.li-link:hover .li-caption { color: #c9ccd1; text-decoration-color: rgba(201,204,209,.6); }
.li-link:focus-visible {
  outline: 3px solid rgba(41,223,77,.75);
  outline-offset: 6px;
  border-radius: 8px;
}

/* Slotregel: alleen de ambitie, als stille badge boven de footer. */
.ambition { margin: 40px 0 0; }

@media (max-width: 560px) {
  .store-coming {
    margin-top: 8px;
  }
  .li-link { margin-top: 40px; }
  .li-getal { font-size: 2rem; }
  .li-streep { height: 42px; }
  .ambition { margin-top: 34px; }
}

footer{display:flex;justify-content:center;align-items:center;gap:.35rem;flex-wrap:wrap;white-space:normal;max-width:100%}
footer a{display:inline}


/* Definitieve uitlijning */
.maker-quote blockquote {
  font-style: normal;
}

.site-footer {
  margin-top: 52px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: baseline;
  gap: .38rem;
  flex-wrap: nowrap;
  white-space: nowrap;
  color: #555a61;
  font-size: .68rem;
  line-height: 1;
}

.site-footer a {
  display: inline;
  color: #4f545b;
  font-size: inherit;
  line-height: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  color: #777d85;
}

@media (max-width: 560px) {
  .site-footer {
    margin-top: 42px;
    gap: .28rem;
    font-size: clamp(.54rem, 2.35vw, .64rem);
  }
}


/* ============================================================
   Hero-upgrade: autootje op de lijn, iPhone-demo, twee kolommen
   ============================================================ */

/* Lijn met het hobbelende groene autootje, zoals in de app zelf.
   Het autootje rijdt rustig heen en terug over de lijn. */
.drive-track{
  position:relative; height:4px; border-radius:999px;
  background:rgba(255,255,255,.09);
  width:min(430px,100%); margin:34px auto 6px;
}
.drive-track i{
  position:absolute; left:0; top:0; height:100%; width:100%; border-radius:999px;
  background:linear-gradient(90deg, rgba(41,223,77,.30), rgba(41,223,77,.05) 65%, transparent);
  opacity:.5;
}
/* Met beweging aan loopt het balkje solide vol tot waar het autootje is,
   precies zoals het rode balkje in de app wanneer de auto onderweg is.
   Zelfde tijden als driveAlong, anders lopen ze uit de pas. */
@media (prefers-reduced-motion: no-preference){
  .drive-track i{
    width:6%;
    opacity:1;
    background:linear-gradient(90deg, rgba(41,223,77,.5), var(--green));
    animation:fillAlong 9s ease-in-out infinite;
  }
}
@keyframes fillAlong{
  0%,8%{ width:6%; } 46%,58%{ width:94%; } 96%,100%{ width:6%; }
}
.drive-car{
  position:absolute; left:6%; top:-24px; transform:translateX(-50%);
  color:var(--green); filter:drop-shadow(0 0 9px rgba(41,223,77,.7));
}
@media (prefers-reduced-motion: no-preference){
  .drive-car{ animation:driveAlong 9s ease-in-out infinite, driveHop 1.3s ease-in-out infinite; }
}
@keyframes driveAlong{
  0%,8%{ left:6%; } 46%,58%{ left:94%; } 96%,100%{ left:6%; }
}
@keyframes driveHop{
  0%,100%{ margin-top:0; } 22%{ margin-top:-2.4px; } 48%{ margin-top:.8px; } 74%{ margin-top:-1.6px; }
}

/* Twee kolommen op ruime schermen: tekst links uitgelijnd, telefoon rechts */
@media (min-width: 960px){
  .page-shell{ width:min(100% - 48px, 1060px); }
  /* Twee kolommen met drie vakken: de tekst en de knoppen staan onder
     elkaar links, de telefoon staat rechts naast allebei. Op mobiel
     bestaat dit raster niet en volgt de pagina gewoon de HTML-volgorde:
     kop en tekst, dan de telefoon, dan pas de knop. */
  .hero-grid{
    display:grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
    grid-template-areas:
      "tekst  telefoon"
      "acties telefoon";
    grid-template-rows: min-content 1fr;
    gap:0 48px; align-items:start; text-align:left;
  }
  .hero-grid .copy{ grid-area:tekst; text-align:left; }
  .hero-grid .copy-actions{ grid-area:acties; }
  .hero-grid .brand{ margin-left:0; }
  .hero-grid .intro{ margin-left:0; }
  .hero-grid .drive-track{ margin-left:0; }
  .hero-grid .signup{ text-align:left; }
  .hero-grid .signup-lead{ margin-left:0; text-align:left; }
  .hero-grid .demo-note{ margin-left:0; text-align:left; }
  /* De telefoon begint op de lijn van de kop, niet bij het logo: zo houdt
     het woordmerk bovenin lucht. 59px logohoogte + 28px marge eronder. */
  .hero-grid .phone-wrap{ grid-area:telefoon; margin-top:87px; }
  /* in twee kolommen mag de kop iets rustiger, anders duwt hij
     de rest van de tekst te ver naar beneden */
  .hero-grid h1{ font-size:clamp(2.6rem, 3.6vw, 3.5rem); }

  /* onderkant volgt dezelfde linkerlijn als de tekstkolom.
     .hero staat gecentreerd, dus die zetten we hier om; alles
     binnen de twee kolommen was al links uitgelijnd. */
  .hero{ text-align:left; }
  .maker-quote{ text-align:left; }
  .maker-quote > img{ margin-left:0; }
  /* de handtekening volgt dezelfde linkerlijn als de tekstkolom */
  .maker-quote .li-blok{ justify-content:flex-start; }
  .site-footer{ justify-content:flex-start; }

  /* Het logobestand heeft links 10,3% loze ruimte door de gloed om de
     groene cirkel. Die gloed telt niet mee als rand, dus schuiven we
     het logo precies dat stuk op: de harde cirkel valt dan samen met
     de linkerlijn van de kop. */
  .hero-grid .brand{ transform:translateX(-10.3%); }
}

/* ============================================================
   De telefoon: een echt appscherm op schaal.

   Het schermpje is op ware grootte gebouwd — 375x812, precies de
   maten waarop OmBeurt op een iPhone draait — en daarna geschaald
   naar de breedte van de telefoon. Alle waarden hieronder komen
   uit app/style.css (versie 2.6.2), zodat typografie, kaarten,
   het weekrooster en de donuts kloppen met het echte product.
   Verandert de app, dan is dit blok één op één bij te werken.

   De telefoon zelf blijft bewust abstract: een dunne rand, geen
   notch en geen knopjes. De aandacht hoort bij de interface.
   ============================================================ */
.phone-wrap{ display:flex; justify-content:center; margin:44px 0 8px; }
@media (min-width:960px){ .phone-wrap{ margin:0; } }
.phone{
  position:relative; flex:none; width:322px; padding:11px;
  background:#101214; border:1px solid #23272b; border-radius:40px;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 70px rgba(41,223,77,.07);
}
.mini-app{
  position:relative; width:300px; height:650px;
  border-radius:31px; overflow:hidden; background:#0e0f11;
}
/* 300 / 375 = 0,8 — de schaalfactor van het hele scherm. */
.mini-screen{
  position:absolute; top:0; left:0; width:375px; height:812px;
  transform:scale(.8); transform-origin:0 0;
  overflow:hidden; isolation:isolate;
  background:radial-gradient(1100px 520px at 50% -160px, #1e2126 0%, #0e0f11 62%);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  font-size:16px; line-height:1.45; color:#f5f6f7; text-align:left;

  /* tokens uit app/style.css */
  --bg:#0e0f11; --card:#191b1e; --card2:#232528; --cell:#131518; --card3:#2b2e33;
  --line:rgba(255,255,255,0.08); --text:#f5f6f7; --text-inv:#101113;
  --dim:#9ba1a8; --dim2:#6b7178;
  --green:#32d74b; --green-soft:rgba(50,215,75,0.12); --green-text:#8bf0a3;
  --red:#ff453a; --red-soft:rgba(255,69,58,0.14); --red-text:#ff9a91;
  --r:24px; --r-m:16px; --r-s:12px;
  --shadow:0 10px 30px rgba(0,0,0,0.35);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
}
/* de site zet globale regels op p/span/svg; binnen het scherm gelden
   de appwaarden */
.mini-screen p{ margin:0; }
.mini-screen p, .mini-screen span, .mini-screen b, .mini-screen em, .mini-screen strong{ overflow-wrap:normal; }
.mini-screen .icon{ display:inline-flex; vertical-align:middle; flex-shrink:0; }
.mini-screen .icon svg{ display:block; }

/* ---- ambient: de levende gloed die met de status meekleurt ---- */
.ms-glow{
  position:absolute; top:-190px; left:50%; transform:translateX(-50%);
  width:640px; height:560px; pointer-events:none; z-index:0;
}
.ms-glow::before, .ms-glow i, .ms-glow em{
  content:''; position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(closest-side, var(--ms-ambient, transparent), transparent 70%);
  opacity:.42; transition:background .8s ease;
}
.ms-glow i{ inset:14% 10% 12% 16%; opacity:.34; }
.ms-glow em{ inset:20% 16% 18% 12%; opacity:.30; }
@media (prefers-reduced-motion: no-preference){
  .ms-glow::before{ animation:msBlobA 21s ease-in-out infinite; }
  .ms-glow i{ animation:msBlobB 29s ease-in-out infinite; }
  .ms-glow em{ animation:msBlobC 24s ease-in-out infinite; }
}
@keyframes msBlobA{
  0%,100%{ transform:translate(0,0) scale(1); }
  33%{ transform:translate(-52px,24px) scale(1.12); }
  66%{ transform:translate(38px,-16px) scale(.94); }
}
@keyframes msBlobB{
  0%,100%{ transform:translate(0,0) scale(1); }
  25%{ transform:translate(44px,18px) scale(.9); }
  60%{ transform:translate(-30px,34px) scale(1.16); }
}
@keyframes msBlobC{
  0%,100%{ transform:translate(0,0) scale(1); }
  40%{ transform:translate(-24px,-26px) scale(1.1); }
  75%{ transform:translate(30px,12px) scale(.92); }
}

/* ---- de pagina (schuift zacht op bij het openen van de inzichten) ---- */
.ms-page{
  position:absolute; top:0; left:0; width:375px; z-index:1;
  transition:transform .9s var(--ease-out);
}
.ms-frame{ padding:0 20px 48px; }

/* ---- header + begroeting ---- */
.mini-screen .top{
  display:grid; grid-template-columns:40px minmax(0,1fr) 40px;
  align-items:center; gap:12px; padding:16px 2px 14px;
}
.mini-screen .top-spacer{ width:40px; height:40px; }
.mini-screen .brand-logo{
  justify-self:center; display:block; height:34px; width:auto; max-width:none;
}
.mini-screen .iconbtn{
  width:40px; height:40px; border-radius:50%;
  background:var(--card); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
/* De status wint typografisch van de begroeting (2.6.2). */
.mini-screen .greet{
  padding:12px 4px 10px; font-size:22px; font-weight:700; letter-spacing:-0.4px;
  text-align:center; color:rgba(245,246,247,.92);
}
.mini-screen .greet-name{
  display:inline-flex; align-items:center; gap:8px;
  font-size:inherit; font-weight:inherit; letter-spacing:inherit;
}
.mini-screen .greet-name b{ color:var(--green-text); font-weight:700; }
.mini-screen .greet-name .icon{ color:var(--green-text); transform:translateY(1px); }

/* ---- statuskaart ---- */
.mini-screen .status-card{
  position:relative; isolation:isolate;
  min-height:180px; padding:16px 20px 26px; margin-bottom:16px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.mini-screen .status-card::before{
  content:''; position:absolute; inset:-20% -10%; z-index:-1;
  pointer-events:none; opacity:.5;
  background:radial-gradient(closest-side at 50% 34%, var(--status-glow, transparent), transparent 68%);
  transition:opacity .55s ease;
}
.mini-screen .status-card.available{ --status-glow:rgba(50,215,75,.40); }
.mini-screen .status-card.underway{ --status-glow:rgba(255,69,58,.45); }
.mini-screen .status-content{
  position:relative; z-index:1; width:100%;
  display:flex; flex-direction:column; align-items:center;
}
.mini-screen .status-dot{ width:17px; height:17px; border-radius:50%; flex-shrink:0; margin-bottom:14px; }
.mini-screen .status-dot.green{ background:var(--green); box-shadow:0 0 0 5px rgba(50,215,75,.075), 0 0 18px rgba(50,215,75,.85); }
.mini-screen .status-dot.red{ background:var(--red); box-shadow:0 0 0 5px rgba(255,69,58,.075), 0 0 18px rgba(255,69,58,.85); }
.mini-screen .status-line{
  margin:2px 0 0; max-width:390px;
  font-size:28px; line-height:1.22; font-weight:750; letter-spacing:-0.6px; color:var(--text);
  /* donkere halo: de tekst komt los van de gloed erachter */
  text-shadow:0 1px 16px rgba(8,9,11,.6), 0 0 3px rgba(8,9,11,.35);
}
.mini-screen .status-until{
  margin:14px 0 0; max-width:390px;
  font-size:15px; line-height:1.2; font-weight:500; letter-spacing:-0.2px;
  color:var(--red-text); font-variant-numeric:tabular-nums;
  text-shadow:0 1px 10px rgba(8,9,11,.5);
}
.mini-screen .status-progress{
  position:relative; width:min(280px, 72%); height:5px; border-radius:999px;
  background:rgba(255,255,255,0.09); margin:26px auto 6px;
}
.mini-screen .status-progress i{
  display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg, rgba(255,69,58,.55), var(--red));
  transition:width 1.2s var(--ease-out);
}
.mini-screen .car-marker{
  position:absolute; left:0; top:-27px; transform:translateX(-50%);
  color:var(--red); pointer-events:none;
  transition:left 1.2s var(--ease-out);
  filter:drop-shadow(0 0 6px rgba(255,69,58,.5));
}
.mini-screen .status-progress.idle{ margin-top:26px; }
.mini-screen .status-progress.idle .car-marker{
  left:4%; color:var(--green);
  filter:drop-shadow(0 0 8px rgba(50,215,75,.45));
}
.mini-screen .status-note{
  margin:17px 0 0; padding:9px 13px; border-radius:999px;
  background:rgba(255,69,58,.11); border:1px solid rgba(255,69,58,.20);
  color:var(--red-text); font-size:13px; font-weight:500;
}
.mini-screen .status-note b{ color:var(--text); font-weight:650; }
/* hobbelweggetje van het autootje */
@media (prefers-reduced-motion: no-preference){
  .mini-screen .car-marker{ animation:msRattle 1.9s ease-in-out infinite; }
  .mini-screen .status-card.status-change .status-content{ animation:msStatusReveal .42s var(--ease-out) both; }
}
@keyframes msRattle{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(0deg); }
  9%{ transform:translateX(-50%) translateY(-1.4px) rotate(-1.6deg); }
  16%{ transform:translateX(-50%) translateY(.4px) rotate(1deg); }
  27%{ transform:translateX(-50%) translateY(-.7px) rotate(.6deg); }
  38%{ transform:translateX(-50%) translateY(-1.8px) rotate(-1deg); }
  47%{ transform:translateX(-50%) translateY(.3px) rotate(1.8deg); }
  61%{ transform:translateX(-50%) translateY(-1px) rotate(-.5deg); }
  72%{ transform:translateX(-50%) translateY(-.2px) rotate(1.2deg); }
  84%{ transform:translateX(-50%) translateY(-1.5px) rotate(-1.4deg); }
  93%{ transform:translateX(-50%) translateY(.2px) rotate(.4deg); }
}
@keyframes msStatusReveal{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---- knoppen en tegels ---- */
.mini-screen .btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-width:0; padding:17px; border-radius:var(--r-m);
  font-size:17px; font-weight:600; letter-spacing:-0.2px; white-space:nowrap;
  transition:transform .12s ease, opacity .25s ease;
}
.mini-screen .btn-primary{ background:var(--text); color:var(--text-inv); }
.mini-screen .btn-secondary{ background:var(--card); color:var(--text); border:1px solid var(--line); }
.mini-screen .btn.saving{ opacity:0.4; }
.mini-screen .btn-row{ display:flex; gap:10px; margin-top:20px; }
.mini-screen .btn-row .btn{ flex:1 1 0; min-width:0; }
.mini-screen .btn-reserve{ padding:15px 19px 13px; margin-bottom:12px; flex-direction:column; gap:3px; }
.mini-screen .btn-reserve-main{ display:flex; align-items:center; gap:9px; font-size:17px; font-weight:650; }
.mini-screen .btn-reserve-sub{ font-size:12px; font-weight:500; color:rgba(16,17,19,.55); }
@media (prefers-reduced-motion: no-preference){
  .mini-screen .btn-reserve{ animation:msInvite 4.5s ease-in-out infinite; }
}
@keyframes msInvite{
  0%,100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,246,247,0); }
  6%{ transform:scale(1.015); box-shadow:0 0 24px 0 rgba(245,246,247,0.10); }
  12%{ transform:scale(1); box-shadow:0 0 0 0 rgba(245,246,247,0); }
}
.mini-screen .tilegrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.mini-screen .tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-m);
  padding:16px 8px 14px; display:flex; flex-direction:column; align-items:center; gap:8px;
  color:var(--text); box-shadow:var(--shadow);
}
.mini-screen .tile .icon{ color:var(--dim); }
.mini-screen .tile span{ font-size:13px; font-weight:600; }
/* de aanraking van de "gebruiker" */
.mini-screen .ms-druk{ transform:scale(.975); }
.mini-screen .btn.ms-druk{ transform:scale(.98); }

/* ---- inzichten: deurkaart, kaarten, donut ---- */
.mini-screen .ins-kaart{
  width:100%; display:flex; align-items:center; gap:13px; text-align:left;
  background:linear-gradient(180deg,#1b1d21 0%,#17191c 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.10);
  border-radius:var(--r); padding:15px 16px; margin:12px 0 4px;
  transition:transform .12s ease;
}
.mini-screen .ins-ikoon{
  width:38px; height:38px; border-radius:50%; flex:none;
  background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
.mini-screen .ins-tekst{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.mini-screen .ins-titel{ font-size:16px; font-weight:650; letter-spacing:-0.2px; color:var(--text); }
.mini-screen .ins-teaser{ font-size:13px; color:var(--dim); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.mini-screen .ins-kaart.open .ins-teaser{ display:none; }
.mini-screen .ins-chev{
  width:27px; height:27px; border-radius:50%; background:var(--card2);
  border:1px solid var(--line); display:inline-flex; align-items:center;
  justify-content:center; color:var(--dim); flex:none;
  transition:transform .32s var(--ease-out);
}
.mini-screen .ins-chev .icon{ transform:rotate(90deg); }
.mini-screen .ins-kaart.open .ins-chev{ transform:rotate(180deg); }
.mini-screen .ins-klap{ display:grid; grid-template-rows:0fr; }
.mini-screen .ins-klap.open{ grid-template-rows:1fr; }
.mini-screen .ins-binnen{ overflow:hidden; min-height:0; }
.mini-screen .ins-binnen .section-head{ margin-top:10px; }
@media (prefers-reduced-motion: no-preference){
  .mini-screen .ins-klap{ transition:grid-template-rows .5s var(--ease-out); }
  .mini-screen .ins-klap.onthul .ins-binnen > *{ animation:msInsIn .5s var(--ease-out) both; }
  .mini-screen .ins-klap.onthul .ins-binnen > *:nth-child(2){ animation-delay:.07s; }
  .mini-screen .ins-klap.onthul .ins-binnen > *:nth-child(3){ animation-delay:.14s; }
}
@keyframes msInsIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.mini-screen .section-head{ display:flex; align-items:center; gap:14px; margin:34px 2px 16px; }
.mini-screen .section-head::before, .mini-screen .section-head::after{
  content:''; flex:1; height:1px; background:var(--line);
}
.mini-screen .section-head span{
  font-size:13px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.8px; white-space:nowrap;
}
.mini-screen .card{
  background:linear-gradient(180deg, #1d2024 0%, #17191c 100%);
  border:1px solid var(--line); border-top-color:rgba(255,255,255,0.12);
  border-radius:var(--r); padding:22px;
  box-shadow:var(--shadow); margin-bottom:14px;
}
.mini-screen .card-icon{
  width:40px; height:40px; margin:0 auto 12px;
  border-radius:var(--r-s); background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--dim);
}
.mini-screen .card-title{
  font-size:13px; font-weight:600; color:var(--dim);
  text-transform:uppercase; letter-spacing:0.6px; margin:0 0 16px; text-align:center;
}
.mini-screen .hero-card{ text-align:center; padding:26px 22px 22px; }
.mini-screen .donut-wrap{ position:relative; width:150px; margin:6px auto 14px; }
.mini-screen .donut{ display:block; width:150px; height:150px; max-width:none; }
.mini-screen .donut circle{ transition:stroke-dasharray 1.1s var(--ease-out); }
.mini-screen .hero-card .donut-wrap{ width:170px; }
.mini-screen .hero-card .donut{ width:170px; height:170px; }
.mini-screen .donut-center{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
}
.mini-screen .donut-center b{ font-size:26px; font-weight:700; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.mini-screen .donut-center span{ font-size:12px; color:var(--dim); margin-top:-2px; }
.mini-screen .hero-card .donut-center b{ font-size:29px; letter-spacing:-0.8px; }
.mini-screen .donut-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; }
.mini-screen .donut-key{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--dim); }
.mini-screen .donut-key i{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.mini-screen .donut-key b{ color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---- het agenda-sheet ---- */
.ms-sheet{
  position:absolute; inset:0; z-index:20; background:var(--bg);
  overflow:hidden; opacity:0; transform:translateY(24px);
  pointer-events:none; visibility:hidden;
  transition:opacity .3s ease, transform .38s var(--ease-out), visibility 0s .4s;
}
.ms-sheet.open{ opacity:1; transform:none; visibility:visible; transition:opacity .26s ease, transform .34s var(--ease-out), visibility 0s; }
.ms-sheet-inner{ padding:22px 20px 40px; transition:transform .8s var(--ease-out); }
.mini-screen .sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:30px; padding-top:8px;
}
.mini-screen .sheet-title{
  font-size:26px; font-weight:700; letter-spacing:-0.5px; margin:0;
  display:flex; align-items:center; gap:11px;
}
.mini-screen .sheet-icon{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:var(--green-soft); border:1px solid transparent;
  display:flex; align-items:center; justify-content:center; color:var(--green-text);
}
.mini-screen .reserve-week-nav{
  display:grid; grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center; gap:10px; margin-bottom:10px;
}
.mini-screen .reserve-week-nav strong{
  text-align:center; font-size:15px; font-weight:700; font-variant-numeric:tabular-nums;
}
.mini-screen .navbtn{
  width:38px; height:38px; border-radius:50%; justify-self:center;
  background:var(--card2); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--text);
}
.mini-screen .reserve-week-grid{
  padding:11px; border-radius:var(--r-m);
  background:#141619; border:1px solid var(--line);
}
.mini-screen .week-head{ display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:8px; }
.mini-screen .week-head span{
  font-size:11px; font-weight:600; color:var(--dim2);
  text-transform:uppercase; letter-spacing:0.6px; text-align:center;
}
.mini-screen .week-rows{ display:flex; flex-direction:column; gap:8px; }
.mini-screen .wrow{ display:grid; grid-template-columns:64px repeat(3,minmax(0,1fr)); gap:9px; align-items:center; }
.mini-screen .wday{ font-size:15px; font-weight:650; color:var(--dim); line-height:1.15; }
.mini-screen .wday em{ font-style:normal; display:block; font-size:11px; color:var(--dim2); font-weight:500; }
.mini-screen .wrow.today .wday{ color:var(--text); }
.mini-screen .wcell{
  height:44px; border-radius:var(--r-s);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; position:relative;
  background:var(--cell); border:1px solid rgba(255,255,255,0.04);
  overflow:hidden; white-space:nowrap;
}
.mini-screen .wcell b{
  font-weight:600; font-style:normal; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; padding:0 3px;
}
.mini-screen .wcell.free::after{
  content:'+'; color:var(--green); font-size:20px; font-weight:500; line-height:1;
  transform:translateY(-1px);
}
.mini-screen .wcell.busy{ background:var(--red-soft); border-color:rgba(255,69,58,0.3); color:var(--red-text); padding:0 4px; }
.mini-screen .wcell.mine{ background:var(--green-soft); border-color:rgba(50,215,75,0.35); color:var(--green-text); padding:0 4px; }
.mini-screen .wcell.past{ opacity:0.3; }
.mini-screen .wcell.picked{
  background:var(--green-soft); border-color:rgba(50,215,75,.5); color:var(--green-text);
  box-shadow:0 0 18px rgba(50,215,75,.12) inset;
}
@media (prefers-reduced-motion: no-preference){
  .mini-screen .wcell.picked{ animation:msPop 0.18s ease-out; }
}
@keyframes msPop{ 0%{ transform:scale(0.88); } 100%{ transform:scale(1); } }
.mini-screen .reserve-section-label{
  margin:20px 0 10px; color:var(--dim); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.75px; text-align:center;
}
.mini-screen .reserve-section-label span{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--dim2); }
.mini-screen .time-card{
  display:grid; grid-template-columns:1fr; gap:10px;
  margin-top:10px; padding:12px;
  border-radius:var(--r-m); background:#15171a; border:1px solid var(--line);
  transition:opacity .5s ease;
}
.mini-screen .time-card label{
  min-width:0; display:grid; grid-template-columns:46px minmax(0,1fr);
  align-items:center; gap:10px;
}
.mini-screen .time-card label span{ color:var(--dim); font-size:12px; font-weight:700; padding-left:4px; }
.mini-screen .time-card i{
  display:block; padding:12px 10px; border-radius:var(--r-s);
  background:var(--card2); color:var(--text); font-style:normal;
  font-size:17px; text-align:center; font-variant-numeric:tabular-nums;
  transition:color .35s ease;
}
.mini-screen .time-card.off{ opacity:.4; }
.mini-screen .time-card.off i{ color:var(--dim2); }
.mini-screen .reserve-hint{
  margin:9px 2px 0; color:var(--dim2); font-size:12px; line-height:1.4;
  min-height:17px; text-align:center; transition:opacity .3s ease;
}

/* ---- viermoment en toast ---- */
.ms-celebrate{
  position:absolute; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center; pointer-events:none;
}
.ms-celebrate.show{ display:flex; }
.ms-celebrate .ring{
  width:110px; height:110px; border-radius:50%;
  background:linear-gradient(180deg, #232528, #17191c);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 18px 50px rgba(0,0,0,0.5), 0 0 40px rgba(50,215,75,0.18);
  display:flex; align-items:center; justify-content:center;
  animation:msCelebIn 0.9s cubic-bezier(0.22,1,0.36,1) both;
}
.ms-celebrate svg path{
  stroke:#32d74b; stroke-dasharray:32; stroke-dashoffset:32;
  animation:msDraw 0.5s 0.15s ease-out forwards;
}
@keyframes msCelebIn{
  0%{ opacity:0; transform:scale(0.7); }
  18%{ opacity:1; transform:scale(1.04); }
  28%{ transform:scale(1); }
  78%{ opacity:1; transform:scale(1); }
  100%{ opacity:0; transform:scale(0.96); }
}
@keyframes msDraw{ to{ stroke-dashoffset:0; } }
.ms-toast{
  position:absolute; bottom:24px; left:50%; z-index:35;
  transform:translateX(-50%) translateY(8px);
  background:#2b2e33; border:1px solid rgba(255,255,255,0.08);
  color:#f5f6f7; padding:13px 22px; border-radius:999px;
  font-size:14.5px; font-weight:600; white-space:nowrap;
  opacity:0; transition:opacity 0.22s ease, transform 0.22s ease; pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,0.35);
}
.ms-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- de "vinger": laat zien dat iemand de app echt bedient ---- */
.ms-finger{
  position:absolute; left:0; top:0; z-index:40; width:0; height:0;
  opacity:0; pointer-events:none;
  transition:transform .52s cubic-bezier(.4,.02,.2,1), opacity .3s ease;
}
.ms-finger-dot, .ms-finger-ring{
  position:absolute; left:-21px; top:-21px; width:42px; height:42px;
  border-radius:50%; display:block;
}
/* Grijstinten, geen wit: de vinger komt ook op de witte Agenda- en
   Reserveren-knop nog uit de achtergrond. */
.ms-finger-dot{
  background:radial-gradient(circle at 34% 30%, rgba(228,232,237,.44), rgba(150,157,165,.32) 62%, rgba(116,123,132,.28));
  border:1.5px solid rgba(163,171,180,.75);
  box-shadow:0 8px 20px rgba(0,0,0,.35), inset 0 0 12px rgba(255,255,255,.10);
}
.ms-finger-ring{ border:1.5px solid rgba(163,171,180,.85); opacity:0; }
@media (prefers-reduced-motion: no-preference){
  .ms-finger.tik .ms-finger-dot{ animation:msTikDot .36s ease-out; }
  .ms-finger.tik .ms-finger-ring{ animation:msTikRing .55s ease-out; }
}
@keyframes msTikDot{ 0%{ transform:scale(1); } 35%{ transform:scale(.76); } 100%{ transform:scale(1); } }
@keyframes msTikRing{ 0%{ transform:scale(.6); opacity:.5; } 100%{ transform:scale(2.1); opacity:0; } }

/* Smalle telefoons (iPhone SE en kleiner): dezelfde telefoon, één maat
   kleiner. 266 / 375 = 0,7093 — het scherm blijft dus exact hetzelfde
   scherm, alleen verder uitgeschaald. */
@media (max-width:360px){
  .phone{ width:286px; padding:10px; border-radius:36px; }
  .mini-app{ width:266px; height:576px; border-radius:28px; }
  .mini-screen{ transform:scale(.7093); }
}

/* Verminderde beweging: geen enkele overgang binnen het scherm.
   De pagina toont dan het stilstaande hoofdscherm (zie script.js). */
@media (prefers-reduced-motion: reduce){
  .mini-screen, .mini-screen *, .ms-sheet, .ms-page, .ms-finger{ transition:none !important; }
}

/* knop-polish: zachte groene gloed en lift op hover */
.cta{ transition:transform .15s ease, box-shadow .25s ease; box-shadow:0 14px 40px rgba(0,0,0,.4), 0 0 34px rgba(41,223,77,.14); }
.cta:hover{ transform:translateY(-2px); box-shadow:0 18px 46px rgba(0,0,0,.45), 0 0 46px rgba(41,223,77,.26); }
.cta:active{ transform:translateY(0) scale(.98); }