:root{
  --bg:#000; --overlay:rgba(0,0,0,.65);
  --panel:rgba(15,22,38,.94); --border:#1f2a37;
  --text:#fff; --muted:#9ca3af;
  --accent:#facc15; --accent2:#7dd3fc;
  --radius:16px; --shadow:0 14px 40px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);background:#000}

/* Background image from /images/streanbananan.png (existing on your server) */
body{
  background:#000 url("images/streanbananan.png") no-repeat center center fixed;
  background-size:cover;
}

.page-overlay{min-height:100vh;background:var(--overlay);display:flex;flex-direction:column;gap:18px;padding:28px 16px 24px}
.container{max-width:1080px;margin:0 auto;width:100%}
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

/* Header / brand */
.brand{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--accent);font-size:28px;margin:0 0 8px}
.brand-logo{height:28px;width:auto;display:inline-block}
.lead{color:var(--muted);text-align:center;margin:0 auto 14px;max-width:70ch}

/* Tools grid */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.tool-tile{display:block;text-decoration:none;color:inherit;border:1px solid var(--border);border-radius:12px;background:#0f1626;transition:transform .06s ease, background .2s ease;overflow:hidden}
.tool-tile:hover{transform:translateY(-1px);background:#18243c}
.tile-img{width:100%;height:140px;object-fit:cover;border-bottom:1px solid var(--border);display:block;background:#0b0f14}
.tile-header{padding:10px 12px 4px;color:var(--accent2);font-weight:600}
.tile-desc{padding:0 12px 12px;color:var(--muted);font-size:14px}

/* Docs */
.docs-title{margin:0 0 10px;color:var(--accent);text-align:center}
.docs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.doc-item{background:#0f1626;border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.doc-item h3{margin:0 0 6px;color:var(--accent2)}
.doc-item ol{margin:0 0 6px 18px}
.muted{color:var(--muted)}

/* Footer */
.footer-box{text-align:center}
.footer-line{color:var(--muted);font-size:13px}

/* --- TOEGEVOEGDE STIJLEN VOOR FOOTER & LEGALE PAGINA'S --- */

/* Stijlen voor de links in de footer */
.footer-links a, .footer-links a:visited { /* <-- :visited hier toegevoegd */
  color: var(--accent);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-links a:hover {
  color: var(--accent2);     /* Lichtblauwe kleur bij hover */
}

/* Stijlen voor de content op de 'Terms' en 'Privacy' pagina's */
.legal-content h2 {
  color: var(--accent);
  margin-top: 24px;
  margin-bottom: 10px;
}

.legal-content h3 {
  color: var(--accent2);
  margin-top: 18px;
  margin-bottom: 8px;
}

.legal-content p, .legal-content li {
  color: var(--muted);
  line-height: 1.6;
}

.legal-content ul, .legal-content ol {
  padding-left: 20px;
}

/* Stijl voor de 'Back to Tools' link op de legale pagina's */
.back-link {
  display: block;
  text-align: center;
  margin-top: 20px;
  color: var(--accent);      /* Gebruikt je bestaande gele accentkleur */
  text-decoration: none;     /* Verwijdert de onderstreping */
  transition: color .2s ease;
}

.back-link:hover {
    color: var(--accent2);     /* Lichtblauwe kleur bij hover */
}

.social-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* ruimte tussen knoppen */
  margin-top: 10px;
}

.discord-button {
  background-color: #5865F2;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.discord-button:hover {
  background-color: #4752C4;
  transform: translateY(-2px);
}

.discord-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

/* Zorg dat de Ko-fi widget inline in de flex-container staat */
.kofi-inline {
  display: inline-flex !important;
  align-items: center;
}