[hidden]{display:none!important}
/* EchoSafe website — gedeelde stijl */
:root {
  --echosafe-middernachtblauw: #1F0330;
  --echosafe-blauw: #4E86F5;
  --echosafe-paars: #8C48F9;
  --echosafe-zwart: #000000;
  --echosafe-nevelgrijs: #F2F2F0;
  --echosafe-wit: #FFFFFF;
  --echosafe-font: "Aptos", "Calibri", "Segoe UI", sans-serif;
  --echosafe-gradient: linear-gradient(90deg, var(--echosafe-blauw), var(--echosafe-paars));
  --wit-zacht: rgba(255, 255, 255, 0.82);
  --lijn-donker: rgba(255, 255, 255, 0.14);
  --lijn-licht: rgba(0, 0, 0, 0.12);
  --breedte: 74rem;
  --rand: clamp(1.25rem, 5vw, 3rem);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --header-h: 5.25rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
html, body { height: auto; }
body {
  margin: 0; font-family: var(--echosafe-font); font-size: 1.0625rem; line-height: 1.6;
  color: var(--echosafe-zwart); background: var(--echosafe-wit);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, video, svg { max-width: 100%; display: block; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--echosafe-blauw); outline-offset: 3px; border-radius: 6px; }
.wrap { width: 100%; max-width: var(--breedte); margin: 0 auto; padding: 0 max(var(--rand), env(safe-area-inset-left, 0px)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--echosafe-wit); color: var(--echosafe-zwart); padding: .75rem 1rem; font-weight: 700; }
.skip:focus { top: 1rem; }
.donker { background: var(--echosafe-middernachtblauw); color: var(--echosafe-wit); }
.grijs { background: var(--echosafe-nevelgrijs); }
.label { display: inline-block; font-weight: 700; font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 1rem; }
.label::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; margin-right: .6rem; vertical-align: middle; background: var(--echosafe-gradient); }

/* ---------- Knoppen ---------- */
.knop {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .85rem 1.6rem; border-radius: 999px;
  font: 700 1.0625rem/1 var(--echosafe-font); text-decoration: none; cursor: pointer;
  border: 2px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  touch-action: manipulation;
}
.knop:active { transform: scale(.97); }
.knop-primair { color: var(--echosafe-middernachtblauw); background: linear-gradient(var(--echosafe-wit), var(--echosafe-wit)) padding-box, var(--echosafe-gradient) border-box; }
.knop-licht { color: var(--echosafe-wit); border-color: rgba(255,255,255,.4); background: transparent; }
.knop-donker { color: var(--echosafe-wit); background: linear-gradient(var(--echosafe-middernachtblauw), var(--echosafe-middernachtblauw)) padding-box, var(--echosafe-gradient) border-box; }
.knop-uit { color: var(--echosafe-zwart); background: var(--echosafe-nevelgrijs); cursor: not-allowed; opacity: .9; }
.knop-uit .badge { background: var(--echosafe-wit); }
.badge { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 999px; background: var(--echosafe-nevelgrijs); color: var(--echosafe-zwart); line-height: 1; }
@media (hover: hover) {
  .knop-primair:hover, .knop-donker:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -10px rgba(140, 72, 249, .55); }
  .knop-licht:hover { border-color: var(--echosafe-wit); transform: translateY(-2px); }
}

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 50; background: var(--echosafe-middernachtblauw); padding-top: env(safe-area-inset-top, 0px); transition: box-shadow .3s ease; }
.header.gescrold { box-shadow: 0 1px 0 var(--lijn-donker); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 1rem; }
.header-logo { display: block; }
.header-logo img { height: 4.5rem; width: auto; }
.nav { display: flex; align-items: center; gap: 2rem; }
.nav-lijst { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav-lijst a { position: relative; color: var(--wit-zacht); text-decoration: none; font-weight: 500; padding: .5rem 0; }
.nav-lijst a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--echosafe-gradient); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-lijst a:hover, .nav-lijst a[aria-current="page"] { color: var(--echosafe-wit); }
.nav-lijst a:hover::after, .nav-lijst a[aria-current="page"]::after { transform: scaleX(1); }
.nav .knop { min-height: 2.75rem; padding: .6rem 1.2rem; font-size: 1rem; }
.menu-knop { display: none; min-height: 2.75rem; align-items: center; background: none; border: 1px solid rgba(255,255,255,.4); color: var(--echosafe-wit); border-radius: 999px; padding: .55rem 1.1rem; font: 700 1rem var(--echosafe-font); cursor: pointer; }
@media (max-width: 960px) {
  .menu-knop { display: inline-flex; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding: 1rem var(--rand) 1.75rem; background: var(--echosafe-middernachtblauw); border-top: 1px solid var(--lijn-donker); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s var(--ease), visibility 0s .25s; }
  .nav.open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s var(--ease); }
  .nav-lijst { flex-direction: column; gap: 0; }
  .nav-lijst a { display: block; padding: .85rem 0; font-size: 1.1875rem; border-bottom: 1px solid var(--lijn-donker); }
  .nav-lijst a::after { display: none; }
}

/* ---------- Reveal-animaties ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.zichtbaar { opacity: 1; transform: none; }

/* ---------- Secties ---------- */
.sectie { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.sectie-kop { font-size: clamp(2rem, 4.4vw, 3.5rem); max-width: 18ch; }
.intro-tekst { margin-top: 1.25rem; font-size: 1.1875rem; max-width: 38rem; }
.donker .intro-tekst { color: var(--wit-zacht); }

/* ---------- Hero ---------- */
.hero { overflow: hidden; }
.hero > .wrap { display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 2.5rem; padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); letter-spacing: -0.035em; max-width: 14ch; }
.hero h1 .woord { display: inline-block; }
.js .hero h1 .woord { opacity: 0; transform: translateY(.45em); animation: woord .9s var(--ease) forwards; animation-delay: calc(.08s * var(--i) + .1s); }
@keyframes woord { to { opacity: 1; transform: none; } }
.hero-tekst { margin-top: 1.5rem; font-size: clamp(1.125rem, 1.5vw, 1.25rem); color: var(--wit-zacht); max-width: 35rem; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* Echo-demo */
.echo { position: relative; width: 100%; max-width: 36rem; justify-self: center; touch-action: manipulation; }
.echo svg { width: 100%; height: auto; overflow: visible; }
.echo .ring { fill: none; stroke: url(#echoGradient); transform-box: view-box; transform-origin: 200px 200px; animation: adem 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.echo .golf { fill: none; stroke: url(#echoGradient); stroke-width: 2; opacity: 0; transform-box: view-box; transform-origin: 200px 200px; }
.echo .straal { stroke: var(--echosafe-wit); stroke-width: 1.5; stroke-dasharray: 4 6; opacity: 0; transition: opacity .4s ease; }
.echo .node-stip { fill: rgba(255,255,255,.28); transition: fill .4s ease; }
.echo .node-halo { fill: none; stroke: var(--echosafe-wit); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .4s ease; }
.echo .node-naam { fill: var(--echosafe-wit); font: 700 14px var(--echosafe-font); }
.echo .node-status { fill: var(--wit-zacht); font: 400 12px var(--echosafe-font); opacity: 0; transition: opacity .4s ease; }
.echo .node.bereikt .node-stip { fill: var(--echosafe-wit); }
.echo .node.bereikt .node-halo { opacity: 1; animation: halo 1.6s ease-out infinite; }
.echo .node.bereikt .node-status, .echo .node.bereikt .straal { opacity: .9; }
@keyframes halo { 0% { transform: scale(.8); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.echo-knop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8rem; height: 8rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--echosafe-wit); color: var(--echosafe-middernachtblauw);
  font: 700 1.0625rem/1.15 var(--echosafe-font); padding: 0 .75rem;
  box-shadow: 0 0 0 8px rgba(255,255,255,.12), 0 0 0 16px rgba(255,255,255,.05);
  transition: box-shadow .3s ease, transform .2s var(--ease);
  touch-action: manipulation;
}
.js .echo:not(.actief) .echo-knop { animation: roep 2.8s ease-in-out 2s infinite; }
@keyframes roep { 0%, 100% { box-shadow: 0 0 0 8px rgba(255,255,255,.12), 0 0 0 16px rgba(255,255,255,.05); } 50% { box-shadow: 0 0 0 12px rgba(255,255,255,.18), 0 0 0 26px rgba(255,255,255,.06); } }
.echo-knop:active { transform: translate(-50%, -50%) scale(.95); }
.echo-knop small { display: block; font-size: .75rem; font-weight: 500; margin-top: .25rem; opacity: .75; }
.echo-status { display: flex; justify-content: center; align-items: center; gap: .6rem; min-height: 2.25rem; margin-top: .25rem; text-align: center; font-size: .9375rem; color: var(--wit-zacht); }
.echo-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .85rem; border-radius: 999px; border: 1px solid var(--lijn-donker); color: var(--echosafe-wit); font-weight: 700; font-size: .875rem; }
.rec { width: .6rem; height: .6rem; border-radius: 50%; background: var(--echosafe-wit); animation: knipper 1s steps(2, start) infinite; }
@keyframes knipper { to { visibility: hidden; } }
.echo.actief .golf { animation: golf 2.4s cubic-bezier(.2,.6,.3,1) forwards; }
.echo.actief .golf:nth-of-type(2) { animation-delay: .35s; }
.echo.actief .golf:nth-of-type(3) { animation-delay: .7s; }
.echo.intro .golf { animation: golf 2.6s cubic-bezier(.2,.6,.3,1) .9s forwards; }
@keyframes golf { 0% { transform: scale(.2); opacity: .95; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- Video ---------- */
.video { padding-bottom: clamp(4rem, 9vw, 7rem); }
.video-kop { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.75rem; border-top: 1px solid var(--lijn-donker); padding-top: clamp(2.5rem, 6vw, 4rem); }
.video h2 { font-size: clamp(1.75rem, 3.4vw, 2.75rem); }
.video-kop p { color: var(--wit-zacht); max-width: 28rem; }
.video-kader { position: relative; border-radius: 1.25rem; padding: 2px; background: var(--echosafe-gradient); }
.video-kader video { width: 100%; aspect-ratio: 16 / 9; border-radius: calc(1.25rem - 2px); background: var(--echosafe-middernachtblauw); object-fit: cover; }
.video-start {
  position: absolute; inset: 2px; border: 0; border-radius: calc(1.25rem - 2px); cursor: pointer;
  background: rgba(31, 3, 48, .35); display: grid; place-items: center; transition: background .3s ease, opacity .4s ease;
}
.video-start span { position: relative; width: clamp(4.5rem, 10vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; background: var(--echosafe-wit); display: grid; place-items: center; transition: transform .3s var(--ease); }
.video-start span::before, .video-start span::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--echosafe-wit); animation: halo 2.2s ease-out infinite; }
.video-start span::after { animation-delay: 1.1s; }
.video-start svg { width: 34%; margin-left: 8%; fill: var(--echosafe-middernachtblauw); }
@media (hover: hover) { .video-start:hover span { transform: scale(1.08); } }
.video-kader.speelt .video-start { opacity: 0; pointer-events: none; }

/* ---------- Verhaal ---------- */
.verhaal .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.verhaal-statement { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.035em; max-width: 9ch; }
.momenten { list-style: none; margin: 0 0 2rem; padding: 0; }
.momenten li { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.25; padding: .95rem 0; border-bottom: 1px solid var(--lijn-licht); }
.momenten li:first-child { border-top: 1px solid var(--lijn-licht); }
.verhaal p + p { margin-top: 1rem; }
.verhaal .kern { font-weight: 700; font-size: 1.1875rem; }

/* ---------- Onze droom ---------- */
.droom-tekst { font-size: clamp(2rem, 5vw, 4.25rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; max-width: 20ch; margin-top: .5rem; }
.droom-tekst .w { color: rgba(255,255,255,.2); transition: color .35s ease; }
.droom-tekst .w.aan { color: var(--echosafe-wit); }
.droom-onder { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); margin-top: clamp(3rem, 6vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--lijn-donker); }
.droom-onder p { color: var(--wit-zacht); font-size: 1.1875rem; }
.droom-onder p strong { color: var(--echosafe-wit); }

/* ---------- Stappen (scroll-tijdlijn) ---------- */
.stappen-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 6vw, 5rem); }
.stappen-kop { position: sticky; top: calc(var(--header-h) + 3rem); align-self: start; }
.tijdlijn { position: relative; }
.stappen-lijst { list-style: none; margin: 0; padding: 0; }
.tijdlijn::before, .tijdlijn-vul { content: ""; position: absolute; left: 1.5rem; top: 1.5rem; height: var(--lijn, calc(100% - 3rem)); width: 2px; background: rgba(0,0,0,.12); transform: translateX(-50%); }
.tijdlijn-vul { background: var(--echosafe-gradient); background: linear-gradient(180deg, var(--echosafe-blauw), var(--echosafe-paars)); transform-origin: top; transform: translateX(-50%) scaleY(var(--p, 0)); }
.stap { position: relative; padding: 0 0 3.5rem 4.75rem; min-height: 3rem; }
.stap:last-child { padding-bottom: 0; }
.stap-nr {
  position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 1.25rem; color: var(--echosafe-zwart); background: var(--echosafe-wit); border: 2px solid rgba(0,0,0,.15);
  transition: background .4s ease, color .4s ease, border-color .4s ease, transform .4s var(--ease);
}
.stap.actief .stap-nr { color: var(--echosafe-wit); border-color: transparent; background: linear-gradient(var(--echosafe-middernachtblauw), var(--echosafe-middernachtblauw)) padding-box, var(--echosafe-gradient) border-box; transform: scale(1.08); }
.stap h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); margin: .55rem 0 .6rem; }
.stap p { max-width: 32rem; }
.stap .vast { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; padding: .45rem .9rem; border-radius: 999px; background: var(--echosafe-middernachtblauw); color: var(--echosafe-wit); font-weight: 700; font-size: .9375rem; }

/* ---------- Manieren ---------- */
.manieren { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 3.5rem; }
.manier { position: relative; display: flex; flex-direction: column; padding: 2rem; border-radius: 1.25rem; background: var(--echosafe-nevelgrijs); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
@media (hover: hover) { .manier:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -28px rgba(31,3,48,.45); } }
.manier-icoon { width: 5rem; height: 5rem; margin-bottom: 2rem; }
.manier h3 { font-size: 1.625rem; margin-bottom: .75rem; }
.manier .badge { position: absolute; top: 1.5rem; right: 1.5rem; background: var(--echosafe-middernachtblauw); color: var(--echosafe-wit); }
.manier .binnenkort { margin-top: auto; padding-top: 1.25rem; font-size: .9375rem; font-weight: 700; }
.icoon-lijn { fill: none; stroke: var(--echosafe-middernachtblauw); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.icoon-accent { fill: none; stroke: url(#iconGradient); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.icoon-vlak { fill: var(--echosafe-middernachtblauw); }
.js .teken { stroke-dasharray: var(--l, 200); stroke-dashoffset: var(--l, 200); transition: stroke-dashoffset 1.4s var(--ease) .2s; }
.js .zichtbaar .teken { stroke-dashoffset: 0; }
.manier .golfje { transform-box: fill-box; transform-origin: left center; animation: spreek 1.6s ease-in-out infinite; }
.manier .golfje:nth-of-type(2) { animation-delay: .2s; }
.manier .golfje:nth-of-type(3) { animation-delay: .4s; }
@keyframes spreek { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.manier .tik { transform-box: fill-box; transform-origin: center; animation: tik 2.4s ease-out infinite; }
@keyframes tik { 0% { transform: scale(.4); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Wat EchoSafe doorgeeft ---------- */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 3.5rem; }
.info-kaart { border: 1px solid var(--lijn-donker); border-radius: 1.25rem; padding: 1.75rem; overflow: hidden; }
.info-beeld { height: 11rem; margin: -1.75rem -1.75rem 1.75rem; border-bottom: 1px solid var(--lijn-donker); position: relative; display: grid; place-items: center; overflow: hidden; }
.info-kaart h3 { font-size: 1.5rem; margin-bottom: .6rem; }
.info-kaart p { color: var(--wit-zacht); }
/* locatie */
.kaart-raster { position: absolute; inset: 0; background-image: linear-gradient(var(--lijn-donker) 1px, transparent 1px), linear-gradient(90deg, var(--lijn-donker) 1px, transparent 1px); background-size: 28px 28px; background-position: center; }
.loc-punt { position: relative; width: 1rem; height: 1rem; border-radius: 50%; background: var(--echosafe-wit); }
.loc-punt::before, .loc-punt::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 2px solid var(--echosafe-blauw); opacity: 0; }
.speel .loc-punt::before { animation: pulsring 2.4s ease-out infinite; }
.speel .loc-punt::after { animation: pulsring 2.4s ease-out 1.2s infinite; border-color: var(--echosafe-paars); }
@keyframes pulsring { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(3.6); opacity: 0; } }
.loc-route { position: absolute; inset: 0; width: 100%; height: 100%; }
.loc-route path { fill: none; stroke: var(--echosafe-wit); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; opacity: .55; }
/* opname */
.golfvorm { display: flex; align-items: center; gap: 5px; height: 5rem; }
.golfvorm i { display: block; width: 6px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--echosafe-blauw), var(--echosafe-paars)); transform: scaleY(.15); }
.speel .golfvorm i { animation: balk 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes balk { 0% { transform: scaleY(.15); } 100% { transform: scaleY(var(--h, .8)); } }
.opname-label { position: absolute; top: 1rem; left: 1.25rem; display: flex; align-items: center; gap: .45rem; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
/* signaal */
.signaal { position: relative; width: 82%; display: flex; justify-content: space-between; align-items: center; }
.signaal-lijn { position: absolute; left: 1.5rem; right: 1.5rem; top: 50%; height: 2px; background: var(--lijn-donker); }
.signaal-puls { position: absolute; top: 50%; left: 1.5rem; width: .75rem; height: .75rem; margin-top: -.375rem; border-radius: 50%; background: var(--echosafe-wit); box-shadow: 0 0 0 4px rgba(78,134,245,.35); opacity: 0; }
.speel .signaal-puls { animation: reis 2s var(--ease) infinite; }
@keyframes reis { 0% { left: 1.5rem; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 2.25rem); opacity: 0; } }
.signaal-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: .5rem; font-size: .8125rem; font-weight: 700; }
.signaal-node b { width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--echosafe-wit); display: grid; place-items: center; background: var(--echosafe-middernachtblauw); }
.signaal-node:last-child b { background: var(--echosafe-wit); }
.speel .signaal-node:last-child b { animation: ontvang 2s ease-out infinite; }
@keyframes ontvang { 0%, 80% { box-shadow: 0 0 0 0 rgba(255,255,255,.5); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }

/* ---------- Voor wie ---------- */
.tabs-scroll { margin: 2.5rem calc(-1 * var(--rand)) 0; padding: 0 var(--rand); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tabs { position: relative; display: inline-flex; gap: .5rem; padding: .35rem; border-radius: 999px; background: var(--echosafe-nevelgrijs); }
.tab-indicator { position: absolute; top: .35rem; bottom: .35rem; left: 0; width: 0; border-radius: 999px; background: linear-gradient(var(--echosafe-middernachtblauw), var(--echosafe-middernachtblauw)) padding-box, var(--echosafe-gradient) border-box; border: 2px solid transparent; transition: transform .45s var(--ease), width .45s var(--ease); }
.tab { position: relative; z-index: 1; scroll-snap-align: center; white-space: nowrap; min-height: 2.75rem; font: 700 1rem var(--echosafe-font); color: var(--echosafe-zwart); background: transparent; border: 0; border-radius: 999px; padding: .7rem 1.25rem; cursor: pointer; transition: color .3s ease; touch-action: manipulation; }
.tab[aria-selected="true"] { color: var(--echosafe-wit); }
.panelen { position: relative; margin-top: 3rem; }
.paneel { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.paneel[hidden] { display: none; }
.paneel.in { animation: paneelIn .55s var(--ease); }
@keyframes paneelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.paneel h3 { font-size: clamp(1.875rem, 3.6vw, 3rem); max-width: 16ch; margin-bottom: 1rem; }
.paneel p { font-size: 1.1875rem; max-width: 34rem; }
.paneel .knop { margin-top: 1.75rem; }
.paneel-lijst { list-style: none; margin: 0; padding: 0; }
.paneel-lijst li { padding: 1rem 0 1rem 1.75rem; border-bottom: 1px solid var(--lijn-licht); position: relative; }
.paneel-lijst li::before { content: ""; position: absolute; left: 0; top: 1.55rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--echosafe-gradient); }
.contactblok { padding: 2rem; border-radius: 1.25rem; background: var(--echosafe-middernachtblauw); color: var(--echosafe-wit); }
.contactblok p { font-size: 1rem; color: var(--wit-zacht); }
.contactblok a.mail { display: inline-block; margin-top: .5rem; font-size: clamp(1.375rem, 2.6vw, 1.875rem); font-weight: 700; color: var(--echosafe-wit); text-decoration: none; background: var(--echosafe-gradient) left bottom / 100% 2px no-repeat; padding-bottom: .2rem; word-break: break-word; }
.contactblok .knop { margin-top: 1.5rem; }
.mail-regel { margin-top: 1rem; font-size: 1rem; }
.mail-regel a { font-weight: 700; }

/* ---------- Privacy ---------- */
.privacy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.privacy-punten { display: grid; gap: 1rem; margin-top: 2rem; }
.privacy-punt { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding: 1.5rem; background: var(--echosafe-wit); border-radius: 1rem; }
.privacy-punt svg { width: 3rem; height: 3rem; }
.privacy-punt h3 { font-size: 1.25rem; margin-bottom: .35rem; }
.privacy-beeld { max-width: 26rem; justify-self: center; width: 100%; }
.privacy-beeld .slot-ring { fill: none; stroke: url(#iconGradient); transform-box: view-box; transform-origin: 150px 150px; }
.speel .privacy-beeld .slot-ring { animation: draai 24s linear infinite; }
.speel .privacy-beeld .slot-ring.r2 { animation-duration: 36s; animation-direction: reverse; }
@keyframes draai { to { transform: rotate(360deg); } }
.tekstlink { font-weight: 700; color: var(--echosafe-middernachtblauw); text-underline-offset: .2em; }
.donker .tekstlink { color: var(--echosafe-wit); }

/* ---------- Download ---------- */
.download { position: relative; overflow: hidden; text-align: center; }
.download .wrap { position: relative; z-index: 1; }
.download h2 { font-size: clamp(2.25rem, 5.4vw, 4.5rem); letter-spacing: -0.03em; max-width: 14ch; margin: 0 auto; }
.download p { color: var(--wit-zacht); font-size: 1.1875rem; max-width: 34rem; margin: 1.25rem auto 0; }
.download .hero-knoppen { justify-content: center; }
.download-ringen { position: absolute; left: 50%; top: 50%; width: min(64rem, 170vw); transform: translate(-50%, -50%); pointer-events: none; }
.download-ringen circle { fill: none; stroke: url(#ctaGradient); transform-box: view-box; transform-origin: 500px 500px; }
.speel .download-ringen circle { animation: ringuit 6s ease-out infinite; animation-delay: calc(var(--i) * -1.5s); }
@keyframes ringuit { 0% { transform: scale(.3); opacity: 0; } 20% { opacity: .6; } 100% { transform: scale(1.05); opacity: 0; } }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--lijn-donker); padding: 3.5rem 0 calc(2.5rem + env(safe-area-inset-bottom, 0px)); }
.footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
.footer-logo img { height: 5.5rem; width: auto; }
.footer h2 { font-size: 1.0625rem; margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li + li { margin-top: .35rem; }
.footer a { display: inline-block; padding: .2rem 0; color: var(--wit-zacht); text-decoration: none; }
.footer a:hover { color: var(--echosafe-wit); text-decoration: underline; }
.footer-onder { grid-column: 1 / -1; padding-top: 2rem; margin-top: 1rem; border-top: 1px solid var(--lijn-donker); color: var(--wit-zacht); font-size: .9375rem; }

/* ---------- Vragenpagina ---------- */
.vragen-hero { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 4.5rem); position: relative; overflow: hidden; }
.vragen-hero h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.035em; max-width: 14ch; }
.vragen-hero p { margin-top: 1.25rem; color: var(--wit-zacht); font-size: 1.1875rem; max-width: 36rem; }
.vragen-hero .wrap { position: relative; z-index: 1; }
.zoek { position: relative; margin-top: 2.25rem; max-width: 36rem; }
.zoek input { width: 100%; min-height: 3.5rem; padding: .9rem 1.25rem .9rem 3.25rem; border-radius: 999px; border: 2px solid transparent; font: 400 1.0625rem var(--echosafe-font); color: var(--echosafe-zwart); background: linear-gradient(var(--echosafe-wit), var(--echosafe-wit)) padding-box, var(--echosafe-gradient) border-box; -webkit-appearance: none; appearance: none; }
.zoek input::placeholder { color: rgba(0,0,0,.6); }
.zoek svg { position: absolute; left: 1.15rem; top: 50%; width: 1.35rem; height: 1.35rem; transform: translateY(-50%); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.filter { min-height: 2.75rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--echosafe-wit); font: 700 .9375rem var(--echosafe-font); cursor: pointer; transition: background .25s ease, color .25s ease; touch-action: manipulation; }
.filter[aria-pressed="true"] { background: var(--echosafe-wit); color: var(--echosafe-middernachtblauw); }
.vragen-layout { display: grid; grid-template-columns: 1fr 2.2fr; gap: clamp(2rem, 6vw, 5rem); }
.vragen-zij { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; }
.vragen-zij ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--lijn-licht); }
.vragen-zij a { display: block; padding: .55rem 0 .55rem 1.1rem; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; font-weight: 500; transition: border-color .3s ease; }
.vragen-zij a.actief { border-left-color: var(--echosafe-paars); font-weight: 700; }
.vraaggroep + .vraaggroep { margin-top: 4rem; }
.vraaggroep h2 { font-size: clamp(1.625rem, 3vw, 2.25rem); margin-bottom: 1.25rem; }
.vraag { border-bottom: 1px solid var(--lijn-licht); }
.vraaggroep .vraag:first-of-type { border-top: 1px solid var(--lijn-licht); }
.vraag-knop { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; background: none; border: 0; cursor: pointer; text-align: left; font: 700 1.1875rem/1.35 var(--echosafe-font); color: var(--echosafe-zwart); touch-action: manipulation; }
.plus { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--echosafe-nevelgrijs); transition: background .3s ease, transform .4s var(--ease); }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: .9rem; height: 2px; background: var(--echosafe-zwart); transform: translate(-50%, -50%); transition: transform .4s var(--ease), background .3s ease; }
.plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.vraag-knop[aria-expanded="true"] .plus { background: var(--echosafe-middernachtblauw); transform: rotate(180deg); }
.vraag-knop[aria-expanded="true"] .plus::before, .vraag-knop[aria-expanded="true"] .plus::after { background: var(--echosafe-wit); }
.vraag-knop[aria-expanded="true"] .plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.antwoord { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.antwoord > div { overflow: hidden; }
.antwoord.open { grid-template-rows: 1fr; }
.antwoord p { padding-bottom: 1.5rem; max-width: 44rem; }
.antwoord p + p { margin-top: -.75rem; }
.geen-resultaat { display: none; padding: 2rem; border-radius: 1rem; background: var(--echosafe-nevelgrijs); font-weight: 700; }
.geen-resultaat.toon { display: block; }
.vraag[hidden], .vraaggroep[hidden] { display: none; }
mark { background: none; color: inherit; box-shadow: inset 0 -.35em 0 rgba(78,134,245,.35); }

/* ---------- Responsief: tablet & mobiel ---------- */
@media (max-width: 1100px) {
  .info-grid, .manieren { grid-template-columns: 1fr 1fr; }
  .info-kaart:last-child, .manier:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hero > .wrap, .verhaal .wrap, .stappen-grid, .paneel, .privacy-grid, .droom-onder, .vragen-layout { grid-template-columns: 1fr; }
  .echo { max-width: 28rem; }
  .stappen-kop, .vragen-zij { position: static; }
  .vragen-zij { display: none; }
  .vragen-hero .download-ringen { display: none; }
  .footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer-merk { grid-column: 1 / -1; }
  .privacy-beeld { max-width: 16rem; order: -1; }
}
@media (max-width: 600px) {
  .info-grid, .manieren { grid-template-columns: 1fr; }
  .echo-knop { width: 6.5rem; height: 6.5rem; font-size: .9375rem; }
  .hero-knoppen .knop { width: 100%; }
  .stap { padding-left: 4rem; }
  .manier, .info-kaart { padding: 1.5rem; }
  .info-beeld { margin: -1.5rem -1.5rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .hero h1 .woord { opacity: 1; transform: none; }
  .js .teken { stroke-dashoffset: 0; }
  .droom-tekst .w { color: var(--echosafe-wit); }
  .golfvorm i { transform: scaleY(var(--h, .6)); }
}

/* ---------- De app: telefoonpreviews ---------- */
.app-sectie { overflow: hidden; }
.telefoons { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin-top: 4rem; perspective: 1400px; }
.tel-kaart { margin: 0; display: flex; flex-direction: column; align-items: center; }
.tel-midden { margin-top: -2rem; }
.tel {
  --tilt-x: 0deg; --tilt-y: 0deg;
  position: relative; width: 100%; max-width: 17.5rem; aspect-ratio: 9 / 19.5; container-type: inline-size;
  border-radius: 15% / 6.9%; padding: 3.2%; background: #000000;
  box-shadow: 0 0 0 1.5px rgba(255,255,255,.18), 0 40px 80px -30px rgba(0,0,0,.8), 0 0 70px -20px rgba(140,72,249,.45);
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .5s var(--ease);
}
.speel .tel { animation: zweef 6s ease-in-out infinite; }
.speel .tel-kaart:nth-child(2) .tel { animation-delay: -2s; }
.speel .tel-kaart:nth-child(3) .tel { animation-delay: -4s; }
@keyframes zweef { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.tel-scherm { position: relative; width: 100%; height: 100%; border-radius: 12cqw / 12cqw; overflow: hidden; display: flex; flex-direction: column; font-family: -apple-system, "Segoe UI", var(--echosafe-font); }
.tel-donker { background: radial-gradient(circle at 50% 30%, rgba(78,134,245,.22), transparent 55%), radial-gradient(circle at 80% 85%, rgba(140,72,249,.25), transparent 50%), #12021d; color: #FFFFFF; }
.tel-licht { background: #F2F2F0; color: #000000; }
.tel-status { display: flex; justify-content: space-between; align-items: center; padding: 5cqw 8cqw 0; font-size: 4.6cqw; font-weight: 600; height: 12cqw; }
.tel-iconen { display: flex; gap: 1.6cqw; align-items: center; }
.tel-iconen i { width: 5cqw; height: 3.4cqw; border-radius: 1cqw; background: currentColor; opacity: .9; }
.tel-iconen b { font-size: 3.4cqw; padding: .4cqw 1.4cqw; border-radius: 1.4cqw; background: currentColor; }
.tel-donker .tel-iconen b { color: #FFFFFF; } .tel-donker .tel-iconen b { -webkit-text-fill-color: #000000; }
.tel-licht .tel-iconen b { -webkit-text-fill-color: #FFFFFF; }
.tel-eiland { position: absolute; top: 3.2cqw; left: 50%; width: 30cqw; height: 8.5cqw; margin-left: -15cqw; border-radius: 99px; background: #000000; }

/* scherm 1 */
.app-home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10cqw; padding-bottom: 6cqw; }
.app-logo { width: 72cqw; height: auto; mix-blend-mode: lighten; }
.app-knoppen { display: flex; gap: 6cqw; }
.app-knop { width: 30cqw; aspect-ratio: 1; border-radius: 7cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; font-size: 4.6cqw; font-weight: 600; }
.app-knop svg { width: 11cqw; height: 11cqw; }
.app-alarm { background: rgba(229, 72, 77, .55); border: 1px solid rgba(255,140,140,.5); box-shadow: 0 0 9cqw rgba(229,72,77,.55); }
.speel .app-alarm { animation: alarmgloed 2.4s ease-in-out infinite; }
@keyframes alarmgloed { 50% { box-shadow: 0 0 15cqw rgba(229,72,77,.85); } }
.app-spraak { background: rgba(78,134,245,.28); border: 1px solid rgba(140,170,255,.35); }
.app-tabbar { display: flex; gap: 2cqw; margin: 0 auto 6cqw; padding: 1.8cqw; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.app-tabbar span { display: flex; flex-direction: column; align-items: center; gap: .8cqw; padding: 2cqw 6cqw; border-radius: 99px; font-size: 3.2cqw; color: rgba(255,255,255,.65); }
.app-tabbar span.actief { background: rgba(140,72,249,.45); color: #FFFFFF; }
.app-tabbar svg { width: 6cqw; height: 6cqw; }

/* scherm 2 */
.app-inst { flex: 1; padding: 2cqw 5cqw 0; overflow: hidden; }
.app-titel { text-align: center; font-weight: 700; font-size: 5.2cqw; margin-bottom: 4cqw; }
.app-segment { display: flex; padding: 1cqw; border-radius: 99px; background: rgba(255,255,255,.1); margin-bottom: 5cqw; }
.app-segment span { flex: 1; text-align: center; padding: 1.8cqw 0; font-size: 3.6cqw; border-radius: 99px; }
.app-segment .actief { background: #8C48F9; font-weight: 700; }
.app-groep { font-weight: 700; font-size: 4.2cqw; margin: 4cqw 0 2cqw 1cqw; }
.app-lijst { border-radius: 4.5cqw; background: rgba(255,255,255,.08); overflow: hidden; }
.app-rij { display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw 4cqw; font-size: 3.8cqw; }
.app-rij + .app-rij { border-top: 1px solid rgba(255,255,255,.08); }
.app-rij svg { flex: none; width: 6cqw; height: 6cqw; color: #4E86F5; }
.app-rij span { flex: 1; }
.app-rij small { display: block; font-size: 3.4cqw; opacity: .65; margin-top: .6cqw; }
.app-rij em { font-style: normal; font-size: 3.2cqw; opacity: .6; }
.app-rij i { font-style: normal; opacity: .5; }
.app-toggle { position: relative; width: 11cqw; height: 6.6cqw; border-radius: 99px; background: rgba(255,255,255,.25); }
.app-toggle::after { content: ""; position: absolute; top: .7cqw; left: .7cqw; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: #FFFFFF; transition: transform .4s var(--ease); }
.app-toggle.aan { background: #4E86F5; }
.app-toggle.aan::after { transform: translateX(4.4cqw); }
.speel .app-toggle.aan { animation: toggleaan 5s ease-in-out infinite; }

/* scherm 3 */
.app-melding { flex: 1; padding: 3cqw 5cqw; display: flex; flex-direction: column; gap: 3.5cqw; }
.melding-kop { display: flex; gap: 3cqw; align-items: center; }
.melding-kop img { width: 13cqw; height: 13cqw; object-fit: cover; border-radius: 3.5cqw; }
.melding-kop strong { display: block; font-size: 5cqw; }
.melding-kop span { font-size: 3.6cqw; opacity: .7; }
.melding-chips { display: flex; gap: 2cqw; }
.melding-chips span { display: inline-flex; align-items: center; gap: 1.4cqw; font-size: 3cqw; font-weight: 700; padding: 1cqw 2.4cqw; border-radius: 1.6cqw; background: #FFFFFF; }
.chip-rec { color: #C62828; border: 1px solid rgba(198,40,40,.35); }
.chip-rec i { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #C62828; }
.speel .chip-rec i { animation: knipper 1s steps(2, start) infinite; }
.chip-live { color: #1F0330; border: 1px solid rgba(31,3,48,.25); }
.melding-kaart { background: #FFFFFF; border-radius: 4.5cqw; padding: 3.5cqw; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.melding-label { font-size: 3.2cqw; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2.4cqw; padding-left: 2cqw; border-left: 1cqw solid #1F0330; }
.kaartje { position: relative; border-radius: 3cqw; overflow: hidden; aspect-ratio: 1 / 1; }
.kaartje svg { width: 100%; height: 100%; }
.kaart-pin { position: absolute; left: 52%; top: 50%; width: 4.4cqw; height: 4.4cqw; margin: -2.2cqw; border-radius: 50%; background: #1F0330; border: .9cqw solid #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.kaart-pin::before { content: ""; position: absolute; inset: -2cqw; border-radius: 50%; border: .6cqw solid #8C48F9; opacity: 0; }
.speel .kaart-pin::before { animation: pulsring 2.2s ease-out infinite; }
.melding-sub { display: flex; justify-content: space-between; font-size: 3.2cqw; opacity: .7; margin-top: 2.2cqw; }
.speler { display: flex; align-items: center; gap: 3cqw; }
.speel-knop { flex: none; width: 11cqw; height: 11cqw; border-radius: 50%; background: #1F0330; color: #FFFFFF; display: grid; place-items: center; }
.speel-knop svg { width: 5cqw; margin-left: .6cqw; }
.speler-golf { flex: 1; display: flex; align-items: center; gap: 1cqw; height: 9cqw; }
.speler-golf i { flex: 1; height: 100%; border-radius: 1cqw; background: rgba(31,3,48,.2); transform: scaleY(var(--h)); }
.speel .speler-golf i { animation: afspelen 4s linear infinite; }
.speel .speler-golf i { animation-delay: calc(var(--n) * .25s); }
@keyframes afspelen { 0%, 100% { background: rgba(31,3,48,.2); } 3%, 40% { background: #8C48F9; } 45% { background: rgba(31,3,48,.2); } }
@keyframes toggleaan { 0%, 15% { background: rgba(255,255,255,.25); } 25%, 100% { background: #4E86F5; } }

.tel-kaart figcaption { margin-top: 2rem; max-width: 17.5rem; text-align: center; color: var(--wit-zacht); font-size: 1rem; }
.tel-kaart figcaption strong { display: block; color: var(--echosafe-wit); font-size: 1.25rem; margin-bottom: .35rem; }
.tel-nr { display: inline-block; font-weight: 700; font-size: .875rem; letter-spacing: .08em; margin-bottom: .6rem; background: var(--echosafe-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tel-stippen { display: none; }

@media (max-width: 860px) {
  .telefoons { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 3rem calc(-1 * var(--rand)) 0; padding: 1.5rem var(--rand) 1rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .telefoons::-webkit-scrollbar { display: none; }
  .tel-kaart { flex: 0 0 min(72vw, 17rem); scroll-snap-align: center; }
  .tel-midden { margin-top: 0; }
  .tel-stippen { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; }
  .tel-stippen i { width: .5rem; height: .5rem; border-radius: 99px; background: rgba(255,255,255,.3); transition: width .3s var(--ease), background .3s ease; }
  .tel-stippen i.actief { width: 1.5rem; background: var(--echosafe-wit); }
}

/* ---------- Nazorg ---------- */
.noodblok-sectie { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
.noodblok {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2.5rem;
  padding: clamp(1.5rem, 3vw, 2rem); border-radius: 1.25rem; border: 2px solid transparent;
  background: linear-gradient(var(--echosafe-nevelgrijs), var(--echosafe-nevelgrijs)) padding-box, var(--echosafe-gradient) border-box;
}
.noodblok > div { flex: 1 1 18rem; min-width: 0; }
.noodblok h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: .5rem; }
.noodblok p + p { margin-top: .5rem; }
.noodnummer { font-size: clamp(3rem, 7vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-decoration: none; color: var(--echosafe-middernachtblauw); font-variant-numeric: tabular-nums; }
.hulp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.5rem); margin-top: 3.5rem; }
.hulp-kaart { display: flex; flex-direction: column; gap: .85rem; padding: 1.75rem; border-radius: 1.25rem; background: var(--echosafe-wit); min-width: 0; }
.hulp-kaart h3 { font-size: 1.375rem; }
.hulp-nummer { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.hulp-nummer a { font-size: 1.75rem; font-weight: 700; text-decoration: none; color: var(--echosafe-middernachtblauw); font-variant-numeric: tabular-nums; }
.hulp-nummer span { font-size: .9375rem; color: var(--echosafe-middernachtblauw); }
.hulp-tijden { font-size: .9375rem; color: var(--echosafe-middernachtblauw); }
.hulp-kaart .tekstlink { margin-top: auto; padding-top: .25rem; }
.hulp-check { margin-top: 1.5rem; font-size: .9375rem; color: var(--echosafe-middernachtblauw); }
@media (max-width: 1100px) { .hulp-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .hulp-grid { grid-template-columns: 1fr; } .hulp-kaart { padding: 1.5rem; } }

/* ---------- Artefact: laden, weergaven ---------- */
:root { color-scheme: light; }
.header { top: env(safe-area-inset-top, 0px); padding-top: 0; }
.laadt #inhoud, .laadt .footer { visibility: hidden; animation: toonAlsnog 0s 3s forwards; }
@keyframes toonAlsnog { to { visibility: visible; } }
.weergave[hidden] { display: none !important; }
.tel-kaart figcaption .cap { display: block; }

/* ---------- Bewerkmodus ---------- */
.editor { font-family: var(--echosafe-font); }
.editor-start {
  position: fixed; right: max(1rem, env(safe-area-inset-right, 0px)); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 80;
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .6rem 1.15rem; border-radius: 999px; cursor: pointer;
  font: 700 .9375rem var(--echosafe-font); color: var(--echosafe-wit); border: 2px solid transparent;
  background: linear-gradient(var(--echosafe-middernachtblauw), var(--echosafe-middernachtblauw)) padding-box, var(--echosafe-gradient) border-box;
  box-shadow: 0 10px 30px -12px rgba(31, 3, 48, .6);
}
.editor-start svg { width: 1rem; height: 1rem; }
.editor-balk {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80;
  width: min(48rem, calc(100% - 2rem)); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem;
  padding: .75rem .85rem .75rem 1.15rem; border-radius: 1.25rem; color: var(--echosafe-wit);
  background: linear-gradient(var(--echosafe-middernachtblauw), var(--echosafe-middernachtblauw)) padding-box, var(--echosafe-gradient) border-box;
  border: 2px solid transparent; box-shadow: 0 18px 50px -16px rgba(31, 3, 48, .7);
}
.editor-balk[hidden], .editor-start[hidden], .editor[hidden], .editor-link[hidden], .editor-melding[hidden] { display: none; }
.editor-info { flex: 1 1 12rem; min-width: 0; font-size: .9375rem; color: var(--wit-zacht); }
.editor-info b { color: var(--echosafe-wit); }
.editor-pagina { display: inline-flex; padding: .2rem; border-radius: 999px; background: rgba(255,255,255,.1); }
.editor-pagina button { min-height: 2.25rem; padding: .35rem .85rem; border: 0; border-radius: 999px; background: transparent; color: var(--wit-zacht); font: 700 .875rem var(--echosafe-font); cursor: pointer; }
.editor-pagina button[aria-pressed="true"] { background: var(--echosafe-wit); color: var(--echosafe-middernachtblauw); }
.editor-knoppen { display: inline-flex; gap: .5rem; margin-left: auto; }
.editor-knoppen button { min-height: 2.5rem; padding: .5rem 1.1rem; border-radius: 999px; font: 700 .9375rem var(--echosafe-font); cursor: pointer; }
#editor-annuleer { background: transparent; color: var(--echosafe-wit); border: 1px solid rgba(255,255,255,.4); }
#editor-opslaan { background: var(--echosafe-wit); color: var(--echosafe-middernachtblauw); border: 0; }
#editor-opslaan:disabled { opacity: .45; cursor: default; }
.editor-link { flex: 1 1 100%; display: flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 700; }
.editor-link input { flex: 1; min-width: 0; min-height: 2.25rem; padding: .35rem .75rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: var(--echosafe-wit); font: 400 .9375rem var(--echosafe-font); }
.editor-melding {
  position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 81;
  width: max-content; max-width: calc(100% - 2rem); padding: .65rem 1rem; border-radius: .85rem;
  background: var(--echosafe-wit); color: var(--echosafe-middernachtblauw); font: 700 .9375rem/1.35 var(--echosafe-font);
  box-shadow: 0 12px 34px -12px rgba(31, 3, 48, .55); border: 1px solid rgba(31,3,48,.12);
}
.bewerk .editor-melding { bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); }

.bewerk .reveal, .bewerk .hero h1 .woord { opacity: 1 !important; transform: none !important; }
.bewerk .droom-tekst { color: var(--echosafe-wit); }
.bewerk main, .bewerk .footer { padding-bottom: 0; }
.bewerk .footer { padding-bottom: 9rem; }
.bewerk [data-bewerkbaar] { outline: 1.5px dashed rgba(140, 72, 249, .55); outline-offset: 4px; border-radius: 4px; cursor: text; }
.bewerk [data-bewerkbaar]:hover { outline-color: var(--echosafe-paars); }
.bewerk [data-bewerkbaar]:focus { outline: 2px solid var(--echosafe-blauw); }
.bewerk [data-bewerkbaar][data-aangepast] { outline-style: solid; outline-color: var(--echosafe-paars); }
.bewerk .vragen-zij { display: none; }
.bewerk .vragen-layout { grid-template-columns: 1fr; }
@media (max-width: 600px) {
  .editor-balk { padding: .7rem; }
  .editor-knoppen { width: 100%; }
  .editor-knoppen button { flex: 1; }
}

/* Noodknop exact in het midden van de cirkels (het svg-vlak is vierkant: hoogte = breedte) */
.echo { container-type: inline-size; }
.echo-knop { top: 50cqw; }

/* App-previews: telefoons staan stil, naast elkaar op dezelfde hoogte */
.speel .tel, .tel { animation: none !important; translate: none; transform: none !important; }
.tel-midden { margin-top: 0; }