:root{
  --bg:#05070d;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --line:rgba(255,255,255,.15);
  --shadow:0 20px 60px rgba(0,0,0,.55);
  --radius:20px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--text);
  background:
    radial-gradient(1100px 750px at 18% 10%, rgba(255,255,255,.09), transparent 55%),
    radial-gradient(900px 650px at 78% 26%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(900px 650px at 40% 92%, rgba(255,255,255,.06), transparent 55%),
    var(--bg);
  overflow:hidden;
}

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  opacity:.62;
  pointer-events:none;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.04));
}

.grain{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.06;
  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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

.centerBlock{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  padding:30px 44px 34px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(0,0,0,.36);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:var(--shadow);
  min-width:min(640px, calc(100vw - 28px));
}

.logoCenter{
  width: 240px;
  height: auto;
  max-width: 56vw;
  margin: 0 auto 12px;
  display:block;

  /* Schaduw/halo zodat de zwarte 'J' zichtbaar blijft */
  filter:
    drop-shadow(0 10px 22px rgba(0,0,0,.55))
    drop-shadow(0 0 18px rgba(255,255,255,.35))
    drop-shadow(0 0 2px rgba(255,255,255,.20));
}

.centerTitle{
  font-size:28px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin:0 0 14px;
  font-weight: 650;
}

.centerMail{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--mono);
  font-size:18px;
  margin:0 0 12px;
  color:rgba(255,255,255,.92);
}

.icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
}

.emailLink{
  color:inherit;
  text-decoration:none;
  border-bottom:1px dashed rgba(255,255,255,.25);
  padding-bottom:2px;
}
.emailLink:hover{
  border-bottom-color: rgba(255,255,255,.45);
}

.centerSlogan{
  font-size:14px;
  color:var(--muted);
  letter-spacing:.04em;
  margin:0 0 14px;
}

.actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-bottom:12px;
  flex-wrap: wrap;
}

button, .buttonLink{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-size:13px;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

button:hover, .buttonLink:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.28);
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
}

.liIcon{
  color: rgba(255,255,255,.82);
  display:inline-flex;
}

.subText{
  margin: 0 0 16px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  letter-spacing: .02em;
}

.footerLine{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  color:rgba(255,255,255,.65);
  font-size:12px;
}
.footerLine .dot{opacity:.7}

@media (max-width:520px){
  .centerBlock{padding:26px 18px 28px}
  .logoCenter{width: 200px}
  .centerTitle{font-size:22px}
  .centerMail{font-size:15px; flex-wrap:wrap}
}