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

:root {
  /* Basis */
  --bg-base: #070713;
  --ink: #f3f5ff;
  --ink-dim: rgba(233, 238, 255, 0.62);
  --ink-faint: rgba(233, 238, 255, 0.38);

  /* Aurora kleuren */
  --c-blue:   #2e6bff;
  --c-teal:   #00d4c8;
  --c-pink:   #ff4d9d;
  --c-violet: #8b5cf6;
  --c-amber:  #ffb86b;

  /* 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;
  background:
    radial-gradient(120% 120% at 50% -10%, #141433 0%, #0a0a1c 45%, var(--bg-base) 100%);
}

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

.bg__blob--1 {
  width: 58vw; height: 58vw;
  left: -12vw; top: -14vw;
  background: radial-gradient(circle at 30% 30%, var(--c-blue), transparent 65%);
  animation: drift1 26s var(--ease) infinite alternate;
}
.bg__blob--2 {
  width: 50vw; height: 50vw;
  right: -10vw; top: -8vw;
  background: radial-gradient(circle at 50% 50%, var(--c-violet), transparent 64%);
  animation: drift2 32s var(--ease) infinite alternate;
}
.bg__blob--3 {
  width: 62vw; height: 62vw;
  left: 8vw; bottom: -26vw;
  background: radial-gradient(circle at 50% 50%, var(--c-pink), transparent 66%);
  animation: drift3 30s var(--ease) infinite alternate;
  opacity: 0.5;
}
.bg__blob--4 {
  width: 46vw; height: 46vw;
  right: -6vw; bottom: -18vw;
  background: radial-gradient(circle at 50% 50%, var(--c-teal), transparent 64%);
  animation: drift4 36s var(--ease) infinite alternate;
}
.bg__blob--5 {
  width: 34vw; height: 34vw;
  left: 38vw; top: 30vh;
  background: radial-gradient(circle at 50% 50%, var(--c-amber), transparent 62%);
  animation: drift5 40s var(--ease) infinite alternate;
  opacity: 0.32;
}

/* 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-blue), var(--c-violet) 55%, var(--c-pink));
  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-blue), var(--c-violet));
  box-shadow: 0 12px 30px -10px rgba(80, 90, 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; }
}