/* ========= Core / Theme ========= */
:root{
  --brand:#3b82f6;
  --brand-2:#a855f7;
  --accent:#22c55e;
}
*{box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#f8fafc;
  color:#0f172a;
  margin:0;
}

/* Branding */
.navbar-brand{font-weight:800; letter-spacing:0.2px}
.brand-accent{color:var(--brand)}

/* ========= Hero ========= */
.hero-section{
  background: radial-gradient(1200px 400px at 0% 0%, rgba(59,130,246,.15), transparent 60%),
              radial-gradient(1000px 400px at 100% 10%, rgba(168,85,247,.12), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
}
.hero-bg{position:absolute; inset:0; opacity:.35; filter: blur(40px); pointer-events:none}
.hero-card{border:1px solid #eef2ff}
.hero-image{object-fit:cover; width:100%; height:auto}

/* Decoratieve shapes */
.shape{
  position:absolute; filter:blur(30px); z-index:0; opacity:.45; pointer-events:none
}
.shape-1{width:200px;height:200px; background:conic-gradient(from 0deg,var(--brand),var(--brand-2)); border-radius:50%; right:-60px; top:-60px}
.shape-2{width:260px;height:260px; background:conic-gradient(from 0deg,#f59e0b,#f43f5e); border-radius:50%; left:-80px; bottom:-80px}

/* ========= Sections ========= */
.section-title{font-weight:800}
.bg-gradient-subtle{
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
}

/* Cards / stats */
.stat-card{border:1px solid #e2e8f0}
.card .badge{font-weight:600}

/* ========= Projecten ========= */
.project-thumb{aspect-ratio: 16/9; object-fit: cover}
.card:hover{transform: translateY(-4px); transition: .2s ease; box-shadow: 0 12px 24px rgba(2,6,23,.08)}

/* CTA / Buttons */
.btn-primary{
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  border:0;
}
.btn-primary:hover{filter:brightness(.95)}

/* ========= Marquee chips ========= */
.marquee-mask {
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
  overflow: hidden;
}
.marquee { display:flex; gap:.75rem; white-space:nowrap; will-change: transform; animation: scroll 22s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes scroll { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.chip {
  border:1px solid #e2e8f0; background:#fff; border-radius:999px; padding:.45rem .8rem; font-size:.9rem;
  display:inline-flex; align-items:center; gap:.4rem;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}

/* ========= Connect (glow + animatie) ========= */
.cta-glow {
  position: relative;
  background: radial-gradient(1200px 400px at 0% 0%, rgba(59,130,246,.08), transparent 60%),
              radial-gradient(1000px 400px at 100% 10%, rgba(168,85,247,.08), transparent 60%),
              linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid rgba(99,102,241,.15);
  overflow: hidden;
}
.cta-glow:before, .cta-glow:after {
  content:"";
  position:absolute; border-radius:50%;
  filter: blur(40px); opacity:.4; pointer-events:none;
  animation: float 8s ease-in-out infinite;
}
.cta-glow:before { width:260px; height:260px; background:conic-gradient(from 0deg,#3b82f6,#a855f7); left:-80px; top:-80px; }
.cta-glow:after  { width:220px; height:220px; background:conic-gradient(from 0deg,#22c55e,#f59e0b); right:-60px; bottom:-60px; animation-delay: -3s; }
@keyframes float {
  0%,100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(12px) translateX(6px) rotate(8deg); }
}

/* Mail-animatie */
.mail-scene { position: relative; min-height: 280px; }
.mail-ship {
  width: 220px; max-width: 55vw;
  animation: bob 3.8s ease-in-out infinite;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
}
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }
.spark {
  position:absolute; width:10px; height:10px; border-radius:50%;
  background: #3b82f6; opacity:.9;
  animation: rise 2.6s ease-in-out infinite;
}
.spark.s2 { left: 18%; animation-delay: .4s; background:#a855f7 }
.spark.s3 { left: 72%; animation-delay: .9s; background:#22c55e }
.spark.s4 { left: 50%; animation-delay: 1.4s; background:#f59e0b }
@keyframes rise {
  0%   { bottom:0; transform: translateX(0) scale(.6); opacity:.0}
  20%  { opacity:.6}
  50%  { transform: translateX(-8px) scale(1)}
  100% { bottom: 85%; transform: translateX(8px) scale(.75); opacity:0 }
}

/* Utils */
.fw-extrabold{font-weight:800}