/* ===== Root variables ===== */
:root {
  --bg: #0a192f;            /* diepe donkerblauwe achtergrond */
  --bg-alt: #112240;        /* lichtere variant */
  --primary: #3b82f6;       /* blauw voor knoppen/links */
  --primary-dark: #2563eb;
  --text: #dbeafe;          /* lichtblauw voor tekst */
  --muted: #94a3b8;         /* grijzig voor subtiele tekst */
  --card-bg: #1e293b;       /* kaarten achtergrond */
  --border: #334155;
  --accent: #38bdf8;        /* cyaan accenten */
  --danger: #f43f5e;        /* rood accent voor hover */
  --radius: 12px;
  --shadow: 0 6px 16px rgba(0,0,0,0.4);
  --transition: all .3s ease;
  font-size: 16px;
}

/* ===== Reset ===== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--primary); transition: var(--transition); }
a:hover { color: var(--accent); }
img { max-width:100%; }

/* ===== Fireflies ===== */
.firefly {
  position:absolute;
  width:8px; height:8px;
  background:#fff;
  border-radius:50%;
  opacity:0.7;
  animation: flicker 4s infinite alternate, move 12s infinite linear;
}
@keyframes flicker { from{opacity:.3;} to{opacity:1;} }
@keyframes move { from{transform:translate(0,0);} to{transform:translate(20px,-30px);} }

/* ===== Wrapper ===== */
.wrap {
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

/* ===== Header ===== */
header {
  background: var(--bg-alt);
  padding:12px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  position:sticky; top:0; z-index:100;
  margin: 20px auto 0 auto;
  max-width: 1200px;
}
.header-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
}
.brand img { height:48px; }
.site-title { font-size:1.4rem; font-weight:bold; color:var(--primary); }
nav a {
  margin-left:18px;
  font-weight:500;
  color:var(--text);
  position:relative;
}
nav a::after {
  content:"";
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--primary);
  transition:var(--transition);
}
nav a:hover::after, nav a.active::after { width:100%; }
nav a.active { color: var(--accent); }

/* ===== Sections ===== */
section {
  margin:40px 0;
  padding:30px;
  border-radius:var(--radius);
  background:var(--bg-alt);
  box-shadow: var(--shadow);
  animation: fadeUp .8s ease both;
}
@keyframes fadeUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:none;} }
h1,h2,h3 { margin-bottom:12px; color:var(--accent); }

/* ===== Hero ===== */
.hero {
  text-align:center;
  background:linear-gradient(135deg, var(--bg-alt), #0f1f3a);
  padding:60px 20px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero h1 { font-size:2.2rem; color:#fff; }
.hero p { max-width:700px; margin:0 auto 20px auto; color:var(--muted); }

/* ===== Buttons ===== */
.btn, .btn-ghost {
  padding:10px 18px;
  border-radius: var(--radius);
  border:none;
  cursor:pointer;
  transition: var(--transition);
  font-weight:600;
  display: inline-block;
  text-align: center;
}
.btn {
  background: var(--primary);
  color:#fff;
  box-shadow:0 4px 12px rgba(59,130,246,0.4);
}
.btn:hover { background: var(--primary-dark); transform:translateY(-2px); color: #fff; }
.twitch-btn { background-color: #9146FF; }
.youtube-btn { background-color: #FF0000; }

.btn-ghost {
  background:transparent;
  color:var(--primary);
  border:1px solid var(--primary);
}
.btn-ghost:hover { background:var(--primary-dark); color:#fff; }

/* ===== Cards ===== */
.card-container {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding:20px;
  box-shadow: var(--shadow);
  transition: var(--transition);
}
.card:hover { transform:translateY(-6px); box-shadow:0 8px 20px rgba(0,0,0,0.5); }

/* Video cards */
.video-card iframe {
  width:100%;
  height:180px;
  border:none;
  border-radius: var(--radius);
  margin-bottom:12px;
}

/* ===== Footer ===== */
footer {
  margin:60px 0 20px 0;
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
}