/* Gaming fonts (optioneel). Als je dit niet wilt, haal deze @import weg. */
@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;800&family=Inter:wght@400;600;700&display=swap");

:root{
  --bg:#070a10;
  --panel:#0b1220;
  --panel2:#08101e;
  --text:#e8f0ff;
  --muted:#9fb2d6;

  --accent:#3aa0ff;
  --accent2:#00d2ff;

  --border:rgba(255,255,255,.08);
  --shadow:0 12px 40px rgba(0,0,0,.55);

  --glow: 0 0 22px rgba(58,160,255,.35), 0 0 50px rgba(0,210,255,.14);
}

*{box-sizing:border-box}
html,body{height:100%}
body.wekkz{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(58,160,255,.18), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(0,210,255,.12), transparent 55%),
    var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent2)}
.wrap{max-width:1150px; margin:0 auto; padding:0 18px}

.skip{position:absolute; left:-999px; top:10px; background:var(--panel); color:var(--text); padding:10px 12px; border-radius:10px; border:1px solid var(--border);}
.skip:focus{left:18px; z-index:9999}

.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(7,10,16,.70);
  border-bottom:1px solid var(--border);
}

.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px;}
.brand{display:flex; flex-direction:column; gap:2px}
.brand .logo{
  font-family: Oxanium, Inter, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.14em;
  font-size:20px;
  text-transform:uppercase;
  background: linear-gradient(90deg, #eaf4ff 0%, #9ad3ff 35%, #37a0ff 70%, #00d2ff 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  text-shadow: var(--glow);
}
.brand .tag{
  font-size:12px;
  color:var(--muted);
  letter-spacing:.14em;
  text-transform:uppercase
}

.top-actions{display:flex; align-items:center; gap:10px}

/* NAV */
.nav{padding:8px 0 14px}
.nav ul{list-style:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap}
.nav a{
  display:inline-block;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid transparent;
  color:var(--text);
  background:transparent;
}
.nav a:hover{
  border-color:var(--border);
  background:rgba(255,255,255,.04);
  box-shadow: 0 0 0 1px rgba(58,160,255,.12), 0 10px 28px rgba(0,0,0,.35);
}

/* Hamburger */
.burger{
  display:none;
  width:44px; height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  cursor:pointer;
}
.burger span{
  display:block;
  height:2px;
  margin:7px 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: var(--glow);
}

/* HERO */
.hero{position:relative; min-height: 340px; border-bottom:1px solid var(--border); overflow:hidden;}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform: scale(1.02); filter:saturate(1.1) contrast(1.08);}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,10,16,.90) 0%, rgba(7,10,16,.55) 55%, rgba(7,10,16,.82) 100%),
    radial-gradient(700px 260px at 20% 40%, rgba(58,160,255,.25), transparent 60%);
}
.hero-inner{position:relative; padding:44px 0; display:flex; align-items:flex-end; min-height:340px;}
.hero-text{
  max-width: 580px;
  padding:18px;
  border:1px solid var(--border);
  background: rgba(11,18,32,.58);
  border-radius:18px;
  box-shadow: var(--shadow);
}
.hero-text h1{
  margin:0 0 6px;
  font-family: Oxanium, Inter, system-ui, sans-serif;
  font-size:44px;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow: var(--glow);
}
.hero-text p{margin:0 0 10px; color:var(--muted)}

/* LAYOUT */
.layout{display:grid; grid-template-columns: 1fr 320px; gap:22px; padding:26px 0 34px;}
.content{
  border:1px solid var(--border);
  background: rgba(11,18,32,.35);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:18px;
}
.sidebar{
  border:1px solid var(--border);
  background: rgba(11,18,32,.25);
  border-radius:18px;
  box-shadow: var(--shadow);
  padding:14px;
}

/* MODULE CHROME */
.mod{margin-bottom:14px}
.mod-title{
  margin:0 0 10px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.mod-card{
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,.03);
}
.mod-glow{
  border:1px solid rgba(58,160,255,.22);
  border-radius:16px;
  padding:12px;
  background: linear-gradient(180deg, rgba(58,160,255,.10), rgba(255,255,255,.02));
  box-shadow: 0 0 0 1px rgba(0,210,255,.08), var(--shadow);
}

/* Social module (gebruik dit voor je socials module: style="social") */
.mod-social{
  border:1px solid rgba(58,160,255,.22);
  border-radius:16px;
  padding:12px;
  background: rgba(8,16,30,.55);
  box-shadow: 0 0 0 1px rgba(0,210,255,.08), var(--shadow);
}
.mod-social .mod-body a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  margin:8px 0;
  border-radius:14px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.mod-social .mod-body a:hover{
  border-color: rgba(58,160,255,.35);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}
.mod-social .mod-body a::after{
  content:"↗";
  color: var(--muted);
}

/* FOOTER */
.site-footer{border-top:1px solid var(--border); background: rgba(7,10,16,.75);}
.footer-inner{padding:18px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.copyright{color:var(--muted); font-size:13px}

/* MOBILE */
@media (max-width: 980px){
  .layout{grid-template-columns:1fr}
  .hero-text h1{font-size:34px}

  .burger{display:inline-block}

  /* menu inklappen */
  .nav{padding:0 0 12px}
  body[data-mobile-nav="closed"] .nav{display:none;}
  body[data-mobile-nav="open"] .nav{
    display:block;
    padding:10px 0 14px;
    border-top:1px solid var(--border);
    background: rgba(7,10,16,.72);
  }
  .nav ul{flex-direction:column}
  .nav a{width:100%}
}