/* ===== MotoExperience — shared base (Clean & Confident, merkblauw) ===== */
:root{
  --accent:#447B9D;
  --accent-deep:#2f5a74;
  --accent-soft:#eaf1f6;
  --ink:oklch(0.18 0.01 60);
  --muted:oklch(0.52 0.01 60);
  --line:oklch(0.9 0.005 60);
  --bg:oklch(0.99 0.004 80);
  --card:#fff;
  --disp:"Space Grotesk",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}


/* nav */
nav{position:sticky;top:0;z-index:50;background:oklch(0.99 0.004 80 / .82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{font-family:var(--disp);font-weight:700;font-size:22px;letter-spacing:-.01em;display:flex;align-items:center;gap:11px}
.logo .mark{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;color:#fff;font-size:17px;font-weight:700;transform:rotate(-8deg)}
.logo b{font-weight:700}.logo span{color:var(--muted);font-weight:500}
.navlinks{display:flex;gap:32px;font-weight:500;font-size:15px}
.navlinks a{white-space:nowrap;position:relative;padding:6px 0;color:var(--muted);transition:color .2s}
.navlinks a:hover,.navlinks a.active{color:var(--ink)}
.navlinks a.active::after{content:"";position:absolute;left:0;bottom:-2px;width:18px;height:2px;background:var(--accent)}
.btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:12px 22px;border-radius:100px;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap;cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 8px 24px -10px var(--accent)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:none}
.btn-ghost:hover{border-color:var(--ink)}
.btn-light{background:var(--accent);color:#fff}
.btn-light:hover{transform:translateY(-2px)}
.btn .arr{transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

.kicker{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:18px;white-space:nowrap}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* footer */
footer{padding:64px 0 36px}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-top .logo{margin-bottom:16px}
.foot-col h5{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;font-weight:600}
.foot-col a{display:block;color:var(--muted);font-size:15px;padding:5px 0;transition:color .2s}
.foot-col a:hover{color:var(--accent-deep)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:13.5px;color:var(--muted);flex-wrap:wrap;gap:12px}
.foot-intro{font-size:15px;color:var(--muted);max-width:280px;text-wrap:pretty}
@media(max-width:900px){
  .foot-top{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
}