@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800;900&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --bg:#F6F4EF;
  --surface:#FFFFFF;
  --surface-2:#EFEBE2;
  --ink:#14181F;
  --ink-muted:#5B6472;
  --accent:#1E4FA3;
  --accent-strong:#163B7D;
  --accent-2:#D98A2B;
  --line:rgba(20,24,31,0.14);
  --line-strong:rgba(20,24,31,0.28);
  --on-accent:#F6F4EF;
  --on-accent-2:#191307;
  --radius:14px;
  --radius-sm:8px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10131A;
    --surface:#181C25;
    --surface-2:#1F2430;
    --ink:#ECEEF2;
    --ink-muted:#9AA3B2;
    --accent:#4C86E0;
    --accent-strong:#7FAAEE;
    --accent-2:#E7A94C;
    --line:rgba(255,255,255,0.14);
    --line-strong:rgba(255,255,255,0.28);
    --on-accent:#0E1420;
  }
}
:root[data-theme="dark"]{
  --bg:#10131A;
  --surface:#181C25;
  --surface-2:#1F2430;
  --ink:#ECEEF2;
  --ink-muted:#9AA3B2;
  --accent:#4C86E0;
  --accent-strong:#7FAAEE;
  --accent-2:#E7A94C;
  --line:rgba(255,255,255,0.14);
  --line-strong:rgba(255,255,255,0.28);
  --on-accent:#0E1420;
}

*{box-sizing:border-box;}
html{background:var(--bg);}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Public Sans', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
h1,h2,h3{
  font-family:'Archivo', system-ui, sans-serif;
  text-wrap:balance;
  margin:0;
  letter-spacing:-0.01em;
}
p{margin:0;}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono', ui-monospace, monospace;}
.wrap{max-width:1160px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.headerbar{display:flex; align-items:center; justify-content:space-between; padding:18px 0; gap:16px;}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Archivo', sans-serif; font-weight:800; font-size:1.28rem; letter-spacing:-0.02em;
  text-decoration:none; color:var(--ink);
}
.logo .dot{width:11px; height:11px; background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);}
nav.primary{display:flex; align-items:center; gap:20px;}
nav.primary a{text-decoration:none; font-weight:600; font-size:0.94rem; color:var(--ink-muted); transition:color .15s ease;}
nav.primary a:hover, nav.primary a:focus-visible{color:var(--ink);}
.navlinks{display:flex; gap:28px;}
@media (max-width:820px){ .navlinks{display:none;} }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Public Sans', sans-serif; font-weight:700; font-size:0.92rem;
  padding:11px 20px; border:1.5px solid var(--ink); background:var(--ink); color:var(--bg);
  text-decoration:none; cursor:pointer; border-radius:var(--radius-sm);
  transition:transform .15s cubic-bezier(.2,.8,.3,1.2), background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 10px 20px -12px color-mix(in srgb, var(--ink) 45%, transparent);}
.btn:active{transform:translateY(0); box-shadow:none;}
.btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px;}
.btn-accent{background:var(--accent-2); border-color:var(--accent-2); color:var(--on-accent-2);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong);}

.navtools{display:flex; align-items:center; gap:14px;}
.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; flex:none; padding:0; border-radius:var(--radius-sm);
}
.theme-toggle:hover{border-color:var(--accent-2);}
.theme-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.theme-toggle{position:relative; overflow:hidden;}
.theme-toggle svg{
  width:17px; height:17px; position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(0deg) scale(1);
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  opacity:1;
}
.theme-toggle .i-moon{opacity:0; transform:translate(-50%,-50%) rotate(-70deg) scale(.4);}
:root[data-theme="dark"] .theme-toggle .i-sun{opacity:0; transform:translate(-50%,-50%) rotate(70deg) scale(.4);}
:root[data-theme="dark"] .theme-toggle .i-moon{opacity:1; transform:translate(-50%,-50%) rotate(0deg) scale(1);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{opacity:0; transform:translate(-50%,-50%) rotate(70deg) scale(.4);}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{opacity:1; transform:translate(-50%,-50%) rotate(0deg) scale(1);}
}

.admin-link{
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; font-weight:600; letter-spacing:0.04em;
  color:var(--ink-muted); text-decoration:none; display:inline-flex; align-items:center; gap:6px; padding:9px 4px;
}
.admin-link:hover, .admin-link:focus-visible{color:var(--ink);}
.admin-link .lamp{width:6px; height:6px; background:var(--accent-2); flex:none;}
@media (max-width:820px){ .admin-link span.lbl{display:none;} }

.mobile-toggle{
  display:none;
  width:38px; height:38px; align-items:center; justify-content:center;
  border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; border-radius:var(--radius-sm);
}
@media (max-width:820px){ .mobile-toggle{display:inline-flex;} }
.mobile-nav{
  display:none; flex-direction:column; gap:2px;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:14px 28px; text-decoration:none; color:var(--ink); font-weight:600; border-top:1px solid var(--line);}

/* ---------- route rail: een echte, smalle rijbaan i.p.v. een kale lijn ---------- */
.railed{position:relative; margin-left:2px;}
.tick{position:absolute; left:-5px; width:9px; height:1px; background:var(--line-strong);}

.rail-road{
  position:absolute; left:-11px; top:0; bottom:0; width:6px;
  background:color-mix(in srgb, var(--ink) 84%, transparent);
  border-radius:3px; overflow:hidden;
}
.rail-road::after{
  content:""; position:absolute; left:50%; top:-24px; width:2px; height:calc(100% + 48px);
  transform:translateX(-50%);
  background-image:repeating-linear-gradient(to bottom, var(--accent-2) 0 9px, transparent 9px 20px);
  animation:railLine .9s linear infinite;
}
@media (max-width:900px){ .rail-road{display:none;} }
@keyframes railLine{ from{ background-position-y:0; } to{ background-position-y:29px; } }
@media (prefers-reduced-motion:reduce){ .rail-road::after{animation:none;} }

.rail-runner{
  position:absolute; left:-31px; top:0; width:42px;
  animation:railRun 7s linear infinite;
  filter:drop-shadow(0 3px 5px color-mix(in srgb, var(--ink) 45%, transparent));
}
@media (max-width:900px){ .rail-runner{display:none;} }
.rail-taxi-svg{width:100%; height:auto; display:block; animation:railBounce .3s ease-in-out infinite alternate;}
.rt-body{fill:var(--surface); stroke:var(--ink); stroke-width:7;}
.rt-glass{fill:none; stroke:var(--ink); stroke-width:7; stroke-linejoin:round;}
.rt-lamp-box{fill:var(--surface); stroke:var(--ink); stroke-width:5;}
.rt-lamp-dot{fill:var(--accent-2);}
.rt-badge{fill:var(--accent);}
.rt-tire{fill:var(--ink);}
.rt-hub{fill:var(--surface);}
.rt-spoke{fill:var(--accent-2);}
.rt-wheel{animation:rtSpin .45s linear infinite; transform-box:fill-box; transform-origin:center;}
@keyframes rtSpin{ to{ transform:rotate(360deg); } }
@keyframes railRun{
  0%{ top:-4%; opacity:0; }
  5%{ opacity:1; }
  93%{ opacity:1; }
  100%{ top:100%; opacity:0; }
}
@keyframes railBounce{ from{ transform:translateY(0); } to{ transform:translateY(-1px); } }
@media (prefers-reduced-motion:reduce){
  .rail-runner{animation:none; top:8%; opacity:1;}
  .rail-taxi-svg{animation:none;}
  .rt-wheel{animation:none;}
}

/* ---------- scroll-reveal (progressive enhancement, zie js/main.js) ---------- */
.js-reveal .reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.js-reveal .reveal.in-view{opacity:1; transform:translateY(0);}

/* ---------- hero ---------- */
.hero{padding:76px 0 88px; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr; gap:44px;} }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'IBM Plex Mono', monospace; font-size:0.76rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent-strong); margin-bottom:22px;
}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--accent);}
.hero h1{font-size:clamp(2.3rem, 4.6vw, 3.6rem); font-weight:800; line-height:1.04; margin-bottom:22px;}
.hero h1 em{font-style:normal; color:var(--accent-strong); display:inline-block; perspective:400px;}
.flip-char{
  display:inline-block; transform-origin:50% 100%;
  animation:flipIn .55s cubic-bezier(.2,.9,.3,1) both;
  animation-delay:calc(var(--i, 0) * 45ms + .1s);
}
.flip-char.is-space{width:0.32em;}
@keyframes flipIn{
  0%{ transform:rotateX(80deg) translateY(6px); opacity:0; }
  60%{ opacity:1; }
  100%{ transform:rotateX(0deg) translateY(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .flip-char{animation:none; opacity:1; transform:none;}
}
.hero .lede{font-size:1.13rem; line-height:1.6; color:var(--ink-muted); max-width:46ch; margin-bottom:34px;}
.hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:38px;}
.hero-facts{display:flex; flex-wrap:wrap; gap:10px;}
.fact{
  display:inline-flex; align-items:center; gap:7px; font-size:0.82rem; font-weight:600; color:var(--ink-muted);
  padding:8px 12px 8px 10px; border:1px solid var(--line-strong); background:var(--surface); border-radius:999px;
}
.fact .sw{width:6px; height:6px; background:var(--accent-2); border-radius:50%; flex:none;}

.hero-visual{
  position:relative; aspect-ratio:4/3.1; overflow:hidden; border-radius:var(--radius);
  background:linear-gradient(155deg, var(--accent) 0%, var(--accent-strong) 100%);
  padding:26px; display:flex; flex-direction:column; justify-content:space-between;
  perspective:700px;
}
.hero-visual .plate{
  position:relative; z-index:3;
  align-self:flex-start; display:flex; align-items:center; gap:8px;
  background:var(--on-accent); color:var(--accent-strong);
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.78rem; letter-spacing:0.06em;
  padding:8px 12px; border-radius:4px;
}
.hero-visual .plate .lamp{width:8px; height:8px; border-radius:50%; background:var(--accent-2);}

.road-plane{
  position:absolute; left:-20%; right:-20%; bottom:0; height:62%;
  background-image:repeating-linear-gradient(
    to top,
    color-mix(in srgb, var(--on-accent) 55%, transparent) 0 3%,
    transparent 3% 11%
  );
  background-size:100% 220px;
  transform:rotateX(58deg) translateZ(0);
  transform-origin:bottom;
  opacity:.45;
  animation:roadRun 2.6s linear infinite;
}
@keyframes roadRun{ from{ background-position-y:0; } to{ background-position-y:220px; } }

.car-scene{
  position:relative; z-index:2; flex:1; display:flex; align-items:center; justify-content:center; min-height:0;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--tiltx, 0) * 1deg)) rotateX(calc(var(--tilty, 0) * -1deg));
  transition:transform .25s ease-out;
  animation:carBob 4.5s ease-in-out infinite;
}
.car-scene svg{width:88%; height:auto; pointer-events:none;}
@keyframes carBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.car-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .6s ease;
}
.car-scene.is-3d .car-canvas{opacity:1;}
.car-scene.is-3d #carSvgFallback{opacity:0; transition:opacity .3s ease;}
.car-scene.is-3d{animation:none; transform:none;}

.headlight-glow{
  position:absolute; left:14%; top:52%; width:46%; height:70%;
  background:radial-gradient(ellipse at center, color-mix(in srgb, var(--on-accent) 38%, transparent) 0%, transparent 68%);
  filter:blur(2px);
  animation:glowPulse 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes glowPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.hero-visual .caption{position:relative; z-index:3; color:color-mix(in srgb, var(--on-accent) 78%, transparent); font-size:0.8rem; line-height:1.5; max-width:34ch;}
.hero-visual .caption b{color:var(--on-accent); font-weight:700;}

@media (prefers-reduced-motion:reduce){
  .road-plane, .car-scene, .headlight-glow{animation:none;}
  .car-scene{transform:none;}
}

/* ---------- section shell ---------- */
section{padding:78px 0;}
.section-head{max-width:56ch; margin-bottom:44px; padding-left:30px; position:relative;}
@media (max-width:900px){ .section-head{padding-left:0; border-top:1px dashed var(--line-strong); padding-top:22px;} }
.section-head .eyebrow{margin-bottom:14px;}
.section-head h2{font-size:clamp(1.6rem, 2.6vw, 2.1rem); font-weight:800; line-height:1.14; margin-bottom:14px;}
.section-head p{color:var(--ink-muted); font-size:1.02rem; line-height:1.6;}

/* ---------- bestemmingsbord (LED-strip, altijd donker) ---------- */
.destboard{
  background:#0B0D12; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  overflow:hidden; white-space:nowrap; padding:11px 0;
}
.destboard-track{display:inline-block; animation:destScroll 28s linear infinite;}
.destboard-track span{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:0.82rem; letter-spacing:0.16em;
  color:#F2A63C; text-shadow:0 0 8px rgba(242,166,60,.5);
  padding:0 28px; position:relative;
}
.destboard-track span::after{content:"\2022"; position:absolute; right:-2px; color:color-mix(in srgb, #F2A63C 40%, transparent);}
.destboard:hover .destboard-track{animation-play-state:paused;}
@keyframes destScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .destboard-track{animation:none;} }

/* ---------- diensten ---------- */
#diensten{background:var(--surface-2); border-bottom:1px solid var(--line);}
.cards-wrap{padding-left:30px;}
@media (max-width:900px){ .cards-wrap{padding-left:0;} }

.slider{overflow:hidden;}
.slider-track{
  display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:1px;
  background:var(--line-strong); border:1px solid var(--line-strong);
  scroll-snap-type:x mandatory; overflow-x:auto; scrollbar-width:none;
  transition:transform .5s cubic-bezier(.16,.84,.44,1);
}
.slider-track::-webkit-scrollbar{display:none;}
@media (min-width:761px){
  .slider-track{grid-auto-columns:calc((100% - 2px) / 3);}
}
.card{
  background:var(--surface); padding:30px 26px; display:flex; flex-direction:column; gap:14px;
  scroll-snap-align:start; position:relative; overflow:hidden; border-radius:var(--radius);
  transform:perspective(700px) rotateX(calc(var(--ry,0) * 1deg)) rotateY(calc(var(--rx,0) * 1deg));
  transition:transform .35s ease-out, box-shadow .35s ease-out;
}
.card-icon{width:34px; height:34px; color:var(--accent-2); margin-bottom:2px;}
.card-icon svg{width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;}
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%);
}
.card:hover{box-shadow:0 18px 34px -18px color-mix(in srgb, var(--ink) 45%, transparent);}
.card:hover::before{opacity:1;}
.card .tag{font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.1em; color:var(--accent-strong); text-transform:uppercase;}
.card h3{font-size:1.14rem; font-weight:700;}
@media (prefers-reduced-motion:reduce){ .card{transform:none !important; transition:none;} }

.slider-controls{display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-left:0;}
.slider-dots{display:flex; gap:8px;}
.slider-dots button{
  width:8px; height:8px; padding:0; border:1px solid var(--line-strong); background:var(--surface); cursor:pointer; border-radius:50%;
}
.slider-dots button.active{background:var(--accent-2); border-color:var(--accent-2);}
.slider-btns{display:flex; gap:8px;}
.slider-btn{
  width:38px; height:38px; border:1.5px solid var(--line-strong); background:var(--surface); color:var(--ink);
  cursor:pointer; font-family:'IBM Plex Mono', monospace; font-size:1rem; border-radius:var(--radius-sm);
}
.slider-btn:hover{border-color:var(--accent-2); color:var(--accent-2);}
@media (min-width:761px){ .slider-controls{display:none;} }
.card p{color:var(--ink-muted); font-size:0.95rem; line-height:1.58;}

/* ---------- chauffeur ---------- */
#chauffeur .inner{padding-left:30px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:54px;}
@media (max-width:900px){ #chauffeur .inner{grid-template-columns:1fr; padding-left:0;} }
#chauffeur .section-head{padding-left:0; border:none; padding-top:0; margin-bottom:26px;}
.benefits{list-style:none; margin:0 0 32px; padding:0; display:flex; flex-direction:column; gap:16px;}
.benefits li{display:flex; gap:14px; font-size:0.98rem; line-height:1.5; color:var(--ink);}
.benefits li .num{font-family:'IBM Plex Mono', monospace; font-size:0.78rem; font-weight:600; color:var(--accent-strong); padding-top:2px; flex:none; width:22px;}
.benefits b{display:block; font-weight:700; margin-bottom:2px;}
.benefits span{color:var(--ink-muted);}

.sidecard{background:var(--accent); color:var(--on-accent); padding:34px 30px; display:flex; flex-direction:column; gap:16px; align-self:start; border-radius:var(--radius);}
.sidecard h3{color:var(--on-accent); font-size:1.2rem; font-weight:800;}
.sidecard p{color:color-mix(in srgb, var(--on-accent) 78%, transparent); font-size:0.93rem; line-height:1.6;}
.sidecard form{background:transparent; border:none; padding:0; gap:12px; margin-top:4px;}
.sidecard label{color:color-mix(in srgb, var(--on-accent) 82%, transparent);}
.sidecard input, .sidecard textarea{background:color-mix(in srgb, var(--on-accent) 12%, transparent); border-color:color-mix(in srgb, var(--on-accent) 30%, transparent); color:var(--on-accent);}
.sidecard .btn-accent{align-self:flex-start; margin-top:6px;}
.sidecard .form-note{color:color-mix(in srgb, var(--on-accent) 60%, transparent);}

/* ---------- contact ---------- */
#contact{border-top:1px solid var(--line);}
.contact-grid{padding-left:30px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px;}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; padding-left:0;} }
#contact .section-head{padding-left:0; border:none; padding-top:0; margin-bottom:28px;}
.contact-info{display:flex; flex-direction:column; gap:22px;}
.contact-info a.email{
  font-family:'Archivo', sans-serif; font-weight:700; font-size:1.2rem; text-decoration:none; color:var(--ink);
  border-bottom:2px solid var(--accent); display:inline-block; width:fit-content;
}
.contact-info .note{color:var(--ink-muted); font-size:0.92rem; line-height:1.6; max-width:36ch;}

form{display:flex; flex-direction:column; gap:16px; background:var(--surface); border:1px solid var(--line-strong); padding:30px; border-radius:var(--radius);}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:520px){ .row2{grid-template-columns:1fr;} }
label{display:flex; flex-direction:column; gap:7px; font-size:0.82rem; font-weight:600; color:var(--ink-muted);}
input, select, textarea{
  font-family:'Public Sans', sans-serif; font-size:0.95rem; color:var(--ink); background:var(--surface-2);
  border:1.5px solid var(--line-strong); padding:11px 12px; outline:none; transition:border-color .15s ease; border-radius:var(--radius-sm);
}
input:focus-visible, select:focus-visible, textarea:focus-visible{border-color:var(--accent-2);}
textarea{resize:vertical; min-height:110px; font-family:'Public Sans', sans-serif;}
form .btn{margin-top:4px; align-self:flex-start;}
.form-note{font-size:0.8rem; color:var(--ink-muted); margin-top:-4px;}
.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
.form-success, .form-error{
  display:none; border:1.5px solid var(--accent-2); background:color-mix(in srgb, var(--accent-2) 12%, var(--surface));
  padding:16px 18px; font-size:0.92rem; font-weight:600; align-items:center; gap:10px; border-radius:var(--radius-sm);
}
.form-error{border-color:#C0392B; background:color-mix(in srgb, #C0392B 10%, var(--surface));}
.form-success.show, .form-error.show{display:flex;}
.form-success .sw{width:8px; height:8px; background:var(--accent-2); flex:none;}
.form-error .sw{width:8px; height:8px; background:#C0392B; flex:none;}

/* ---------- footer ---------- */
footer{padding:40px 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
footer .logo{font-size:1.05rem;}
footer .meta{display:flex; gap:22px; flex-wrap:wrap; font-size:0.85rem; color:var(--ink-muted);}
footer a{text-decoration:none; color:var(--ink-muted);}
footer a:hover{color:var(--ink);}

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

/* ---------- grain (subtiele textuur, geen platte vlakken) ---------- */
.grain{
  position:fixed; inset:0; z-index:998; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor (alleen fijne pointer, geen reduced-motion) ---------- */
.cursor-ring, .cursor-dot{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0;
}
.cursor-dot{width:6px; height:6px; background:var(--accent-2);}
.cursor-ring{
  width:34px; height:34px; border:1.5px solid var(--ink);
  transition:width .25s cubic-bezier(.2,.9,.3,1), height .25s cubic-bezier(.2,.9,.3,1), border-color .25s ease, opacity .3s ease;
}
html.has-custom-cursor .cursor-ring, html.has-custom-cursor .cursor-dot{opacity:.6;}
html.has-custom-cursor .cursor-ring.is-hover{width:56px; height:56px; border-color:var(--accent); opacity:.9;}
html.has-custom-cursor, html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor input,
html.has-custom-cursor textarea, html.has-custom-cursor select, html.has-custom-cursor .card{cursor:none;}
@media (pointer:coarse){ .cursor-ring, .cursor-dot{display:none;} }