:root {
  color-scheme: dark;
  --ink:#06100d;
  --ink-soft:#0c1a16;
  --paper:#f2f4ec;
  --paper-warm:#e8ecdf;
  --mint:#52ddb0;
  --mint-bright:#75f2c5;
  --lime:#c6f13c;
  --text:#f7faf5;
  --muted:#a9b8b2;
  --line:rgba(255,255,255,.11);
  --shadow:0 32px 90px rgba(0,0,0,.36);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--ink);
  color:var(--text);
  scroll-behavior:smooth;
}

* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--ink); }
/* De decoratieve cirkels (.route-orbit) en telefoonmockups (.phone-back/.phone-front) steken
   met opzet deels buiten hun eigen container -- zonder overflow-x hier op zowel html als body
   (verschillende mobiele browsers scrollen op het ene of het andere element) kon de pagina op
   mobiel zijwaarts geschoven/gesleept worden tot voorbij die bleed. */
html,body { overflow-x:hidden; max-width:100vw; }
img { display:block; max-width:100%; }
a { color:inherit; }
button { font:inherit; }
.skip-link { position:fixed; z-index:99; top:10px; left:10px; padding:10px 14px; color:var(--ink); background:var(--mint); border-radius:12px; transform:translateY(-150%); }
.skip-link:focus { transform:none; }

.site-header {
  position:absolute;
  z-index:20;
  top:0;
  left:50%;
  width:min(1180px,calc(100% - 40px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 0;
  border-bottom:1px solid var(--line);
}
.brand { display:inline-flex; align-items:center; gap:11px; text-decoration:none; font-weight:850; font-size:20px; letter-spacing:-.015em; }
.brand img { width:42px; height:42px; border-radius:13px; box-shadow:0 8px 24px rgba(82,221,176,.17); }
.site-header nav { display:flex; align-items:center; gap:26px; }
.site-header nav>a:not(.nav-start), .nav-install { color:#c1cec9; text-decoration:none; font-size:14px; font-weight:700; background:none; border:0; padding:8px 0; cursor:pointer; }
.site-header nav>a:not(.nav-start):hover, .nav-install:hover { color:#fff; }
.language-toggle { min-width:45px; height:34px; padding:0 11px; color:var(--mint); border:1px solid rgba(82,221,176,.3); border-radius:999px; background:rgba(82,221,176,.07); font-size:12px; font-weight:900; letter-spacing:.08em; cursor:pointer; }
.language-toggle:hover { color:var(--ink); background:var(--mint); }
.nav-start { padding:11px 18px; border-radius:999px; color:var(--ink); background:var(--mint); text-decoration:none; font-size:14px; font-weight:850; }

.hero {
  position:relative;
  min-height:920px;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(420px,.98fr);
  align-items:center;
  gap:70px;
  padding:140px max(40px,calc((100vw - 1180px)/2)) 92px;
  background:
    radial-gradient(circle at 12% 54%,rgba(82,221,176,.12),transparent 28%),
    radial-gradient(circle at 87% 14%,rgba(198,241,60,.09),transparent 27%),
    linear-gradient(145deg,#06100d 0%,#081712 60%,#06100d 100%);
}
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,black,transparent 80%); }
.hero-copy { position:relative; z-index:2; max-width:680px; }
.eyebrow { display:flex; align-items:center; gap:11px; margin:0 0 27px; color:var(--mint); text-transform:uppercase; letter-spacing:.13em; font-size:14px; line-height:1.4; font-weight:900; }
.eyebrow span { width:28px; height:2px; background:currentColor; }
.hero h1 { max-width:790px; margin:0; font-size:clamp(57px,6vw,91px); line-height:.99; letter-spacing:-.035em; font-weight:830; text-wrap:balance; }
.hero h1 em { color:var(--mint); font-family:Georgia,"Times New Roman",serif; font-weight:400; }
.hero-lead { max-width:610px; margin:32px 0 0; color:#b8c7c1; font-size:20px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:38px; }
.button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:0 23px; border:1px solid transparent; border-radius:16px; text-decoration:none; font-weight:850; cursor:pointer; transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:var(--ink); background:var(--mint); box-shadow:0 14px 38px rgba(82,221,176,.15); }
.button-primary:hover { background:var(--mint-bright); }
.button-secondary { color:#fff; background:rgba(255,255,255,.045); border-color:rgba(255,255,255,.16); }
.button-secondary:hover { background:rgba(255,255,255,.09); }
.hero-notes { display:flex; flex-wrap:wrap; gap:9px 22px; padding:0; margin:25px 0 0; color:#879891; list-style:none; font-size:13px; }
.hero-notes li::before { content:"✓"; margin-right:7px; color:var(--mint); font-weight:900; }

/* Platform-toggle: html.platform-ios / html.platform-other wordt vóór de eerste render gezet
   (zie inline script bovenaan index.html), zodat er geen flits van de verkeerde variant is.
   Er is geen App Store-versie, dus data-non-ios-only-elementen (Play Store-badges,
   downloadknoppen) zijn bedoeld voor "niet aantoonbaar iPhone" -- Android én desktop.
   Per tag-naam een eigen display-waarde (i.p.v. één generieke regel) zodat dit nooit de
   inline-flex van .button/.google-play-badge overschrijft met een blokweergave. */
[data-ios-only], [data-non-ios-only] { display:none; }
html.platform-ios a[data-ios-only],
html.platform-ios button[data-ios-only] { display:inline-flex; }
html.platform-other a[data-non-ios-only],
html.platform-other button[data-non-ios-only] { display:inline-flex; }
html.platform-ios div[data-ios-only] { display:block; }
html.platform-other div[data-non-ios-only] { display:block; }

.google-play-badge { align-self:flex-start; align-items:center; }
.google-play-badge img { display:block; height:60px; width:auto; }
.footer-play-badge { grid-column:1/-1; justify-self:center; margin:4px 0; }

.hero-visual { position:relative; align-self:end; height:730px; }
.phone { overflow:hidden; position:relative; padding:9px; border:1px solid rgba(255,255,255,.23); border-radius:44px; background:#060b09; box-shadow:var(--shadow); }
.phone img { width:100%; height:100%; object-fit:cover; border-radius:36px; }
.phone-speaker { position:absolute; z-index:2; left:50%; top:15px; width:76px; height:19px; border-radius:999px; transform:translateX(-50%); background:#07100d; }
.phone-hero { position:absolute; z-index:4; width:350px; height:730px; left:50%; bottom:-128px; transform:translateX(-46%) rotate(2.2deg); }
.route-orbit { position:absolute; border:1px solid rgba(82,221,176,.23); border-radius:50%; }
.route-orbit-one { width:620px; height:620px; left:50%; bottom:-115px; transform:translateX(-50%); }
.route-orbit-two { width:440px; height:440px; left:50%; bottom:-20px; transform:translateX(-50%); }
.floating-card { position:absolute; z-index:8; display:flex; align-items:center; gap:12px; padding:14px 17px; border:1px solid rgba(255,255,255,.14); border-radius:17px; background:rgba(14,31,25,.88); box-shadow:0 18px 45px rgba(0,0,0,.3); backdrop-filter:blur(18px); }
.floating-card-top { top:148px; right:-24px; }
.floating-card-bottom { bottom:136px; left:-36px; flex-direction:column; align-items:flex-start; gap:2px; }
.floating-card strong { font-size:14px; }
.floating-card small,.floating-card span { color:#9fb0a9; font-size:12px; }
.floating-card-bottom strong { color:var(--lime); font-size:25px; }
.status-dot { flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 6px rgba(82,221,176,.13); }

.proof-strip { position:relative; z-index:5; display:grid; grid-template-columns:repeat(4,1fr); max-width:1180px; margin:0 auto; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.proof-strip p { display:flex; flex-direction:column; gap:5px; margin:0; padding:28px 30px; border-right:1px solid var(--line); }
.proof-strip p:first-child { padding-left:0; }
.proof-strip p:last-child { border-right:0; }
.proof-strip strong { font-size:14px; }
.proof-strip span { color:#82928c; font-size:12px; }

.section-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.story { display:grid; grid-template-columns:300px 1fr; gap:120px; padding-top:150px; padding-bottom:150px; }
.story-label span { display:inline-block; padding:8px 11px; color:var(--mint); border:1px solid rgba(82,221,176,.24); border-radius:9px; text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:900; }
.story-label p { width:180px; margin:20px 0 0; color:#71827b; line-height:1.6; font-size:13px; }
.story-copy { max-width:760px; }
.story-copy h2 { margin:0 0 40px; font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:clamp(38px,4.3vw,63px); line-height:1.11; letter-spacing:-.045em; }
.story-copy>p { color:#aebdb7; font-size:18px; line-height:1.85; }
.story-copy strong { color:#fff; }
.founder-signoff { display:flex; align-items:center; gap:15px; margin-top:36px; padding-top:30px; border-top:1px solid var(--line); }
.founder-mark { display:grid; place-items:center; width:48px; height:48px; color:var(--ink); background:var(--mint); border-radius:50%; font-family:Georgia,serif; font-size:25px; font-style:italic; }
.founder-signoff p { display:flex; flex-direction:column; gap:4px; margin:0; }
.founder-signoff small { color:#7e8f88; }

.features { padding-top:130px; padding-bottom:150px; }
.section-heading { display:grid; grid-template-columns:1fr 1.1fr; column-gap:80px; align-items:end; margin-bottom:60px; }
.section-heading .eyebrow { grid-column:1/-1; }
.section-heading h2 { margin:0; font-size:clamp(43px,5vw,70px); line-height:1; letter-spacing:-.06em; }
.section-heading>p:last-child { max-width:460px; margin:0 0 6px; color:#97a7a1; line-height:1.7; font-size:17px; }
.feature-grid { display:grid; grid-template-columns:1.16fr .84fr; gap:16px; }
.feature-card { position:relative; min-height:330px; overflow:hidden; padding:32px; border:1px solid var(--line); border-radius:28px; background:#0a1713; }
.feature-card h3 { max-width:430px; margin:58px 0 12px; font-size:30px; letter-spacing:-.04em; }
.feature-card p { max-width:490px; margin:0; color:#94a59e; line-height:1.65; }
.feature-number { color:#708079; font-size:12px; font-weight:900; letter-spacing:.14em; }
.feature-icon { display:grid; place-items:center; width:58px; height:58px; margin-top:50px; color:var(--ink); background:var(--mint); border-radius:18px; font-size:30px; font-weight:900; }
.feature-card:not(.feature-card-large) h3 { margin-top:23px; }
.feature-card-large { min-height:460px; display:grid; grid-template-columns:.9fr 1.1fr; }
.feature-card-accent { background:var(--mint); }
.feature-card-accent .feature-number,.feature-card-accent p { color:#285f4d; }
.feature-card-accent h3 { color:var(--ink); }
.feature-card-accent .feature-icon { color:var(--mint); background:var(--ink); }
.feature-card-wide { min-height:250px; grid-column:1/-1; display:grid; grid-template-columns:1.3fr .7fr; gap:50px; align-items:center; }
.feature-card-wide h3 { margin-top:22px!important; }
.mini-map { position:relative; min-height:360px; margin:-8px -12px -38px 20px; overflow:hidden; border-radius:26px; background:#dfe5d8; }
.mini-road { position:absolute; width:14px; height:130%; border-left:3px solid rgba(7,17,14,.14); border-right:3px solid rgba(7,17,14,.14); background:#f5f6f0; transform-origin:center; }
.road-a { left:38%; top:-20%; transform:rotate(28deg); }
.road-b { left:64%; top:-10%; transform:rotate(-24deg); }
.road-c { left:15%; top:16%; height:110%; transform:rotate(68deg); }
.route-line { position:absolute; left:8%; top:64%; width:88%; height:16px; border-radius:99px; background:var(--mint); transform:rotate(-27deg); box-shadow:0 0 0 5px var(--ink); }
.route-pin { position:absolute; right:16%; top:25%; display:grid; place-items:center; width:43px; height:43px; border-radius:50% 50% 50% 6px; color:var(--ink); background:var(--lime); transform:rotate(-45deg); box-shadow:0 10px 20px rgba(7,17,14,.2); }
.improvement-meter { display:flex; align-items:flex-end; justify-content:center; gap:11px; height:120px; padding:18px; border-radius:22px; background:rgba(255,255,255,.035); }
.improvement-meter span { width:24px; height:35%; border-radius:7px 7px 3px 3px; background:rgba(82,221,176,.3); }
.improvement-meter span:nth-child(2) { height:48%; }
.improvement-meter span:nth-child(3) { height:64%; }
.improvement-meter span:nth-child(4) { height:78%; }
.improvement-meter span:nth-child(5) { height:100%; background:var(--mint); }

.experience { min-height:850px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:110px; padding-top:130px; padding-bottom:150px; }
.experience-phones { position:relative; height:690px; }
.experience-phones::before { content:""; position:absolute; width:500px; height:500px; left:10px; top:90px; border-radius:50%; background:rgba(82,221,176,.08); filter:blur(1px); }
.phone-back,.phone-front { position:absolute; width:290px; height:630px; }
.phone-back { left:0; bottom:0; transform:rotate(-8deg); opacity:.6; }
.phone-front { right:20px; top:0; z-index:2; transform:rotate(6deg); }
.experience-copy h2 { margin:0 0 22px; font-size:clamp(48px,5vw,72px); letter-spacing:-.065em; }
.experience-copy>p { margin:0; color:#9aaba4; font-size:17px; line-height:1.75; }
.install-steps { padding:0; margin:38px 0; list-style:none; }
.install-steps li { display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line); }
.install-steps li:last-child { border-bottom:1px solid var(--line); }
.install-steps li>span { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; color:var(--ink); background:var(--mint); border-radius:50%; font-size:13px; font-weight:900; }
.install-steps p { display:flex; flex-direction:column; gap:4px; margin:0; }
.install-steps small { color:#7d8e87; }
.light-button { width:auto; }

.test-app { padding-bottom:110px; }
.test-app-inner { display:grid; grid-template-columns:1.35fr .65fr; gap:100px; align-items:end; padding:70px; color:var(--ink); border-radius:38px; background:var(--mint); box-shadow:0 40px 100px rgba(0,0,0,.22); }
.eyebrow-dark { color:#1d5542; }
.test-app h2 { margin:0 0 22px; font-size:clamp(46px,5vw,73px); line-height:.99; letter-spacing:-.065em; }
.test-app p:not(.eyebrow) { max-width:700px; margin:0; color:#2c6451; font-size:17px; line-height:1.72; }
.test-actions { display:flex; flex-direction:column; gap:12px; }
.button-dark { color:#fff; background:var(--ink); }
.button-ghost { color:var(--ink); background:rgba(255,255,255,.2); border-color:rgba(7,17,14,.25); }
.test-actions small { margin-top:8px; color:#34715d; line-height:1.5; }

footer { width:min(1180px,calc(100% - 40px)); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:45px 0 34px; border-top:1px solid var(--line); }
.footer-brand { align-self:start; }
footer>p { justify-self:end; margin:10px 0 0; color:#84958e; font-size:13px; }
footer nav { display:flex; gap:23px; }
footer nav a, .footer-link { color:#b5c3bd; text-decoration:none; font-size:13px; }
.footer-link { padding:0; border:0; background:none; cursor:pointer; }
.footer-link:hover { color:#fff; }
.footer-credits { justify-self:end; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.footer-credits small { color:#64746e; font-size:11px; }
.footer-credits a { color:var(--mint); font-size:12px; font-weight:750; text-underline-offset:3px; }

.install-dialog { position:fixed; width:min(520px,calc(100% - 28px)); padding:30px; color:var(--text); border:1px solid rgba(255,255,255,.15); border-radius:28px; background:#0d1c17; box-shadow:0 34px 120px rgba(0,0,0,.65); }
.install-dialog::backdrop { background:rgba(2,8,6,.78); backdrop-filter:blur(8px); }
.install-dialog[open] { display:grid; grid-template-columns:auto 1fr; gap:20px; }
.dialog-icon { display:grid; place-items:center; width:52px; height:52px; color:var(--ink); background:var(--mint); border-radius:16px; font-size:27px; }
.dialog-kicker { margin:2px 0 6px; color:var(--mint); text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:900; }
.install-dialog h2 { margin:0 40px 20px 0; font-size:30px; line-height:1.05; letter-spacing:-.045em; }
.dialog-close { position:absolute; right:18px; top:18px; width:36px; height:36px; color:#9cafa7; border:1px solid var(--line); border-radius:50%; background:transparent; cursor:pointer; font-size:22px; }
.dialog-steps { padding:0; margin:0; list-style:none; }
.dialog-steps li { display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line); }
.dialog-steps li>span { display:grid; place-items:center; flex:0 0 auto; width:27px; height:27px; color:var(--ink); background:var(--mint); border-radius:50%; font-size:11px; font-weight:900; }
.dialog-steps p,.dialog-copy { margin:2px 0 0; color:#a9bbb4; line-height:1.55; }
.dialog-start { width:100%; margin-top:18px; }

.analytics-consent { position:fixed; z-index:1000; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); width:min(760px,calc(100% - 28px)); transform:translateX(-50%); display:grid; grid-template-columns:1fr auto; gap:22px; align-items:center; padding:20px 22px; border:1px solid rgba(117,242,197,.24); border-radius:22px; background:rgba(12,26,22,.97); box-shadow:0 22px 70px rgba(0,0,0,.48); backdrop-filter:blur(18px); }
.analytics-consent[hidden] { display:none; }
.analytics-consent-copy strong { display:block; color:#fff; font-size:16px; }
.analytics-consent-copy p { max-width:520px; margin:6px 0 5px; color:#b8c7c1; font-size:12.5px; line-height:1.5; }
.analytics-consent-copy a { color:var(--mint); font-size:11.5px; text-underline-offset:3px; }
.analytics-consent-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.analytics-consent-actions button { min-height:42px; padding:0 15px; border-radius:13px; border:1px solid rgba(255,255,255,.16); color:#fff; background:rgba(255,255,255,.055); font-size:12px; font-weight:800; cursor:pointer; }
.analytics-consent-actions .analytics-consent-accept { color:var(--ink); border-color:var(--mint); background:var(--mint); }

@media (max-width:1000px) {
  .site-header nav>a:not(.nav-start),.nav-install { display:none; }
  .hero { min-height:auto; grid-template-columns:1fr; padding-top:150px; }
  .hero-copy { max-width:780px; }
  .hero-visual { width:min(600px,100%); justify-self:center; height:640px; }
  .phone-hero { width:320px; height:665px; bottom:-105px; }
  .proof-strip { width:calc(100% - 40px); grid-template-columns:1fr 1fr; }
  .proof-strip p:nth-child(2) { border-right:0; }
  .proof-strip p:first-child { padding-left:30px; }
  .proof-strip p:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .story { grid-template-columns:1fr; gap:50px; }
  .story-label p { width:auto; }
  .section-heading { grid-template-columns:1fr; gap:24px; }
  .feature-card-large { grid-template-columns:1fr; }
  .mini-map { min-height:250px; margin:35px 0 -20px; }
  .experience { grid-template-columns:1fr; gap:45px; }
  .experience-phones { width:min(580px,100%); justify-self:center; order:2; }
  .test-app-inner { grid-template-columns:1fr; gap:45px; }
}

@media (max-width:700px) {
  .site-header { width:calc(100% - 28px); }
  .site-header nav { gap:8px; }
  .language-toggle { min-width:42px; padding:0 9px; }
  .nav-start { padding:10px 14px; }
  .hero { padding:128px 20px 68px; gap:30px; }
  .hero h1 { font-size:clamp(48px,15vw,68px); line-height:1.02; letter-spacing:-.025em; }
  .eyebrow { font-size:13px; letter-spacing:.11em; }
  .hero-lead { font-size:17px; }
  .hero-actions { flex-direction:column; }
  .hero-actions .button { width:100%; }
  .hero-visual { height:530px; }
  .phone-hero { width:258px; height:540px; bottom:-56px; }
  .floating-card-top { top:90px; right:0; }
  .floating-card-bottom { left:0; bottom:100px; }
  .route-orbit-one { width:480px; height:480px; }
  .route-orbit-two { width:330px; height:330px; }
  .proof-strip { width:calc(100% - 28px); }
  .proof-strip p { padding:21px 16px!important; }
  .section-shell { width:calc(100% - 28px); }
  .story,.features,.experience { padding-top:90px; padding-bottom:95px; }
  .story-copy h2 { font-size:39px; }
  .story-copy>p { font-size:16px; }
  .feature-grid { grid-template-columns:1fr; }
  .feature-card,.feature-card-wide { min-height:0; grid-column:auto; display:block; padding:25px; border-radius:23px; }
  .feature-card h3 { margin-top:35px; font-size:27px; }
  .feature-card:not(.feature-card-large) h3 { margin-top:20px; }
  .feature-card-wide .improvement-meter { margin-top:28px; }
  .section-heading h2 { font-size:44px; }
  .experience-phones { height:530px; }
  .phone-back,.phone-front { width:230px; height:500px; }
  .phone-front { right:0; }
  .test-app { padding-bottom:70px; }
  .test-app-inner { padding:35px 24px; border-radius:28px; }
  .test-app h2 { font-size:43px; }
  footer { grid-template-columns:1fr; }
  footer>p,.footer-credits { justify-self:start; }
  .footer-credits { align-items:flex-start; }
  footer nav { flex-wrap:wrap; }
  .install-dialog { padding:24px 20px; }
  .install-dialog[open] { grid-template-columns:1fr; }
  .dialog-icon { width:44px; height:44px; }
  .analytics-consent { grid-template-columns:1fr; gap:14px; padding:18px; }
  .analytics-consent-actions { justify-content:stretch; }
  .analytics-consent-actions button { flex:1 1 145px; }
}

@media (prefers-reduced-motion:reduce) {
  :root { scroll-behavior:auto; }
  * { transition:none!important; }
}