/* Ubuntu Consult: site.css (gedeeld door alle pagina's)
   Tailwind komt voorlopig via CDN (zie src/partials/layout.html); hier staat enkel eigen CSS. */

/* ── Mesh gradient ─────────────────────────────── */
.hero-mesh { background-color:#0D1340; position:relative; overflow:hidden; }
.hero-mesh::before {
  content:''; position:absolute; inset:-60% -40%;
  background:
    radial-gradient(circle at 14% 22%, rgba(30,39,97,0.92)  0%, transparent 52%),
    radial-gradient(circle at 80% 12%, rgba(67,42,155,0.65)  0%, transparent 58%),
    radial-gradient(circle at 44% 82%, rgba(13,74,122,0.60)  0%, transparent 62%),
    radial-gradient(circle at 91% 72%, rgba(88,28,135,0.45)  0%, transparent 48%),
    radial-gradient(circle at  7% 62%, rgba(24,50,110,0.68)  0%, transparent 52%),
    radial-gradient(circle at 58% 42%, rgba(18,46,100,0.48)  0%, transparent 44%),
    radial-gradient(circle at 33% 10%, rgba(50,30,130,0.42)  0%, transparent 50%),
    radial-gradient(circle at 95% 38%, rgba(201,151,43,0.12) 0%, transparent 38%);
  background-blend-mode:screen;
  animation:meshDrift 22s ease-in-out infinite;
}
@keyframes meshDrift {
  0%,100%{ transform:translate(0%,0%) scale(1); }
  25%     { transform:translate(-2.5%,3.5%) scale(1.025); }
  50%     { transform:translate(3%,-2%) scale(0.985); }
  75%     { transform:translate(-1.5%,-3%) scale(1.015); }
}

/* ── Nav backdrop ──────────────────────────────── */
.nav-scrolled {
  background:rgba(13,19,64,0.96);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(202,220,252,0.08);
}

/* ── Reveals ───────────────────────────────────── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── Helpers ───────────────────────────────────── */
.section-label { font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:#C9972B; font-weight:600; }
.gold-bar::before { content:''; display:block; width:40px; height:3px; background:#C9972B; margin-bottom:1rem; }
.card-lift { transition:transform .22s ease, box-shadow .22s ease; }
.card-lift:hover { transform:translateY(-4px); box-shadow:0 16px 40px rgba(13,19,64,0.16); }
.bridge-line { background:linear-gradient(90deg,transparent 0%,#C9972B 50%,transparent 100%); }

/* ── Taalkiezer ────────────────────────────────── */
.lang-btn { color:#8A93A6; transition:color .2s; }
a.lang-btn:hover { color:#fff; }
.lang-btn.active { color:#CADCFC; font-weight:600; }
.lang-btn-off { color:#5B6472; cursor:not-allowed; opacity:.6; }

input:focus, textarea:focus, select:focus { outline:none; box-shadow:0 0 0 2px #C9972B; }
::-webkit-scrollbar{ width:6px; }
::-webkit-scrollbar-track{ background:#0D1340; }
::-webkit-scrollbar-thumb{ background:#263272; border-radius:3px; }

/* ── LinkedIn banner background (Over ons) ─────── */
.linkedin-banner-bg {
  background-image: url('/assets/images/linkedin-banner.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}
.linkedin-banner-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(13,19,64,0.55) 0%, rgba(13,19,64,0.82) 100%);
}