/* ============================================================
   ITmarkt — design system & dynamische achtergrond
   macOS / iOS "liquid glass" stijl
   ============================================================ */

:root {
  /* Basis — macOS blauw, één samenhangende tint */
  --bg-base: #03102e;
  --ink: #eef4ff;
  --ink-dim: rgba(225, 235, 255, 0.66);
  --ink-faint: rgba(225, 235, 255, 0.40);

  /* Wallpaper-blauwen (zelfde familie) */
  --c-1: #0a4bd0;  /* royal blue   */
  --c-2: #2f6dff;  /* bright blue  */
  --c-3: #5aa9ff;  /* light blue   */
  --c-4: #173a8f;  /* deep blue    */
  --c-5: #0c2a66;  /* navy mid     */
  --accent: #3b82f6;

  /* Glass */
  --glass-bg: rgba(255, 255, 255, 0.07);
  --glass-bg-strong: rgba(255, 255, 255, 0.11);
  --glass-stroke: rgba(255, 255, 255, 0.16);
  --glass-stroke-bright: rgba(255, 255, 255, 0.34);
  --glass-shadow: 0 18px 50px -18px rgba(3, 5, 20, 0.75);

  --radius: 26px;
  --radius-sm: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --font: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
          "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg-base);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ------------------------------------------------------------
   DYNAMISCHE ACHTERGROND
   Vaste laag met drijvende, vervaagde aurora-blobs + grain
   ------------------------------------------------------------ */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* Diepe blauwe basis, lichter naar het midden — als de macOS-wallpaper */
  background:
    radial-gradient(140% 120% at 50% 8%, #1554b8 0%, #0c357f 32%, #061f52 62%, var(--bg-base) 100%);
}

.bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.6;
  mix-blend-mode: screen;
  will-change: transform;
}

/* Vloeiende blauwe lichtbanen — allemaal dezelfde familie */
.bg__blob--1 {
  width: 78vw; height: 50vw;
  left: -16vw; top: -18vw;
  background: radial-gradient(circle at 40% 40%, var(--c-2), transparent 64%);
  animation: drift1 30s var(--ease) infinite alternate;
}
.bg__blob--2 {
  width: 64vw; height: 46vw;
  right: -14vw; top: -10vw;
  background: radial-gradient(circle at 50% 50%, var(--c-1), transparent 64%);
  animation: drift2 34s var(--ease) infinite alternate;
}
.bg__blob--3 {
  width: 84vw; height: 54vw;
  left: 4vw; bottom: -28vw;
  background: radial-gradient(circle at 50% 50%, var(--c-3), transparent 66%);
  opacity: 0.5;
  animation: drift3 32s var(--ease) infinite alternate;
}
.bg__blob--4 {
  width: 58vw; height: 44vw;
  right: -10vw; bottom: -20vw;
  background: radial-gradient(circle at 50% 50%, var(--c-4), transparent 62%);
  animation: drift4 38s var(--ease) infinite alternate;
}
.bg__blob--5 {
  width: 40vw; height: 30vw;
  left: 34vw; top: 26vh;
  background: radial-gradient(circle at 50% 50%, var(--c-3), transparent 64%);
  opacity: 0.28;
  animation: drift5 42s var(--ease) infinite alternate;
}

/* Het hele veld 'ademt' subtiel + reageert op de muis (via --mx/--my) */
.bg__field {
  position: absolute;
  inset: -10%;
  transform: translate3d(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px), 0);
  transition: transform 0.6s var(--ease);
}

@keyframes drift1 { to { transform: translate3d(14vw, 10vh, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-12vw, 12vh, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(10vw, -8vh, 0) scale(1.18); } }
@keyframes drift4 { to { transform: translate3d(-14vw, -10vh, 0) scale(1.12); } }
@keyframes drift5 { to { transform: translate3d(-8vw, 6vh, 0) scale(1.25); } }

/* Korrel / grain overlay voor die premium 'frosted' look */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Lichte vignettering voor diepte */
.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 100% at 50% 30%, transparent 55%, rgba(3, 4, 14, 0.55) 100%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   GLASS primitives
   ------------------------------------------------------------ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  backdrop-filter: blur(26px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  border-radius: var(--radius);
  box-shadow:
    var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* ------------------------------------------------------------
   Header / merk
   ------------------------------------------------------------ */
.site-head {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 40px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 17px;
}
.brand__mark {
  width: 28px; height: 28px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--c-3), var(--c-2) 55%, var(--c-1));
  box-shadow: 0 4px 14px -2px rgba(46, 107, 255, 0.6);
  font-size: 15px;
}
.brand b { font-weight: 800; }
.brand span { color: var(--ink-dim); font-weight: 600; }

.nav-pill {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.nav-pill a {
  padding: 7px 15px;
  border-radius: 999px;
  color: var(--ink-dim);
  transition: 0.25s var(--ease);
}
.nav-pill a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.1); }

/* ------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.btn--primary {
  color: #fff;
  background: linear-gradient(135deg, var(--c-2), var(--c-1));
  box-shadow: 0 12px 30px -10px rgba(46, 107, 255, 0.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(80, 90, 255, 0.85); }
.btn--ghost { color: var(--ink); border-color: var(--glass-stroke); background: var(--glass-bg); }
.btn--ghost:hover { background: var(--glass-bg-strong); transform: translateY(-2px); }

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .bg__blob, .bg__field, .lane, .tile, .bob { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------
   macOS-stijl menubalk (bovenaan, frosted glass)
   ------------------------------------------------------------ */
.menubar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  font-size: 13px;
  color: #eef4ff;
  background: rgba(8, 14, 30, 0.55);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.menubar__group { display: flex; align-items: center; gap: 1px; }
.menubar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: -0.01em;
  padding: 5px 10px;
  border-radius: 7px;
}
.menubar__brand:hover { background: rgba(255, 255, 255, 0.12); }
.menubar__logo {
  width: 17px; height: 17px;
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 10px; color: #fff;
  background: linear-gradient(135deg, var(--c-3), var(--c-2) 55%, var(--c-1));
}
.menu { position: relative; }
.menu__btn, .menu__link {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 5px 11px;
  border-radius: 7px;
  transition: background 0.18s var(--ease);
}
.menu__btn:hover, .menu__link:hover, .menu--open .menu__btn { background: rgba(255, 255, 255, 0.14); }
.menu__drop {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 232px;
  display: none;
  flex-direction: column;
  gap: 1px;
  padding: 6px;
  border-radius: 13px;
  background: rgba(18, 26, 44, 0.82);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  backdrop-filter: blur(26px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 52px -18px rgba(0, 0, 0, 0.65);
}
.menu--open .menu__drop { display: flex; }
.menu__drop a {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.menu__drop a:hover { background: linear-gradient(135deg, var(--c-2), var(--c-1)); color: #fff; }
.menubar__right { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); }
.menubar__clock { font-weight: 600; color: #eef4ff; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .menubar { font-size: 12px; }
  .menu__link, .menu__btn { padding: 5px 8px; }
}

/* ------------------------------------------------------------
   Cookie-/privacymelding
   ------------------------------------------------------------ */
.cookiebar {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 3vh, 26px);
  transform: translateX(-50%);
  z-index: 300;
  width: min(720px, calc(100% - 32px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px 14px 20px;
  border-radius: 16px;
  background: rgba(12, 18, 36, 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-stroke);
  box-shadow: 0 22px 50px -18px rgba(0, 0, 0, 0.65);
}
.cookiebar__txt { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }
.cookiebar__txt a { color: #9cc8ff; text-decoration: underline; }
.cookiebar__btn {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--c-2), var(--c-1));
  box-shadow: 0 10px 24px -10px rgba(46, 107, 255, 0.7);
  transition: transform 0.2s var(--ease);
}
.cookiebar__btn:hover { transform: translateY(-2px); }
@media (max-width: 560px) {
  .cookiebar { flex-direction: column; align-items: stretch; text-align: center; gap: 10px; }
}