/* NandoGaming — Styles (v2) */
:root{
  --bg:#09070A;
  --bg-dark:#070508;
  --card:#141017;
  --text:#F7F7F7;
  --muted:#C6C6C8;
  --accent:#FF1E2D;
  --accent-2:#A50812;
  --chip:#221924;
  --border:rgba(255,255,255,0.08);
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top:62px;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(255,30,45,0.15), transparent 60%),
    linear-gradient(160deg, #1a0e13, #0d090c 60%);
  background-color:var(--bg);
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1100px, 90%); margin-inline:auto}

.accent{color:var(--accent)}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg,rgba(9,7,10,0.96),rgba(9,7,10,0.85));
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 0;
}
.brand{display:flex; align-items:center; gap:10px}
.brand-logo{width:40px; height:40px; object-fit:contain}
.brand-name{font-weight:700; letter-spacing:.2px}

.main-nav ul{display:flex; gap:20px; align-items:center; list-style:none; margin:0; padding:0}
.main-nav a{opacity:.9}
.main-nav a:hover{opacity:1}
.btn.btn-small{padding:8px 12px; font-size:.9rem}

.nav-toggle{display:none; background:transparent; border:0; width:38px; height:38px; cursor:pointer}
.nav-toggle .bar{display:block; height:2px; background:var(--text); margin:7px 4px}

/* Hero */
.hero{
  position:relative;
  padding: 70px 0 40px;
  background:
    linear-gradient(120deg, rgba(255,30,45,.28), rgba(255,30,45,0) 40%),
    radial-gradient(1000px 600px at 10% -10%, rgba(255,30,45,0.14), transparent 60%);
}
.hero-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center;
}
.hero h1{font-size:clamp(28px, 6vw, 44px); line-height:1.1; margin:0 0 12px}
.lead{font-size:1.1rem; color:var(--muted); margin:0 0 16px}
.hero-ctas{display:flex; gap:12px; margin:22px 0}

.badges{display:flex; gap:8px; list-style:none; padding:0; margin:16px 0 0}
.badges li{background:var(--chip); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-size:.85rem; color:#eee}

.hero-art{position:relative}
.hero-art .glow{
  position:absolute; inset:auto 0 20% 0; height:40%; filter:blur(50px);
  background: radial-gradient(closest-side, rgba(255,30,45,.5), rgba(255,30,45,0));
  z-index:-1;
}
.hero-art img{
  width:100%; max-width:420px; margin-inline:auto;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.55));
}

/* Partner single logo */
.logo-prev img { 
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

#partners .card {
  display: flex;
  flex-direction: column;
  align-items: center;     /* horizontaal centreren */
  justify-content: center; /* verticaal centreren */
  text-align: center;
  padding: 20px;
}

.partner-logo {
  max-height: 170px;   /* groter dan 140px */
  width: auto;
  margin-bottom: 16px;
  object-fit: contain;
  display: block;
}

/* TikTok Subs lijst */
.subs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subs-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 12px;
}
.subs-list .sub-pfp {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}
.subs-list .sub-name {
  font-weight: 600;
  color: var(--text);
}

.checklist li::before {
  content: "\\2713"; /* Unicode voor ✓ */
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: white;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  font-size: .8rem;
}

/* Sections */
.section{padding:60px 0}
.section-dark{background:linear-gradient(160deg, #0b090c, #0a070a)}
.section-head{margin-bottom:20px}
.section-head h2{margin:0 0 6px; font-size:clamp(24px, 5vw, 34px)}
.section-head p{color:var(--muted); margin:0}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start}
.info-card{background:var(--card); border:1px solid var(--border); padding:20px; border-radius:18px; box-shadow:var(--shadow)}
.info-card h3{margin-top:0}
.facts{display:grid; gap:12px}
.fact{background:rgba(255,255,255,0.03); border:1px solid var(--border); padding:12px 14px; border-radius:12px}
.kicker{display:block; font-size:.75rem; letter-spacing:.3px; color:var(--muted)}

.checklist{list-style:none; padding:0; margin:12px 0 0}
.checklist li{position:relative; padding-left:28px; margin:10px 0}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:0; background:linear-gradient(90deg,var(--accent),var(--accent-2)); 
  color:white; width:20px; height:20px; display:grid; place-items:center; border-radius:6px; font-size:.8rem;
}

/* Buttons */
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:white; font-weight:600; border:1px solid rgba(255,255,255,0.15);
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn-ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border);
}
.full{display:block; text-align:center; width:100%}

/* Chips & Filters */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px}
.chip{
  background:var(--chip); border:1px solid var(--border); color:#eee;
  border-radius:999px; padding:8px 12px; cursor:pointer
}
.chip.is-active{background:linear-gradient(90deg, var(--accent), var(--accent-2)); color:#fff}

/* Grids */
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:18px}
.card, .video, .stream{
  background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.video .thumb{aspect-ratio:16/9; background:#120d12; display:grid; place-items:center}
.video .meta{padding:12px 14px}
.video .tag{font-size:.75rem; padding:4px 8px; border-radius:999px; background:#23151a; border:1px solid var(--border); margin-right:8px}
.video h3{font-size:1rem; margin:8px 0 0}
.video a{display:block}
.video .thumb .placeholder{opacity:.8; color:var(--muted); font-size:.9rem}

.video .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stream .head{padding:14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between}
.stream .body{padding:14px}
.stream .platform{font-size:.8rem; opacity:.8}

.cards-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.card{padding:18px}
.card h3{margin:4px 0 12px}
.card-list{padding-left:18px; margin:0}
.card-list li{margin:8px 0}

.partner-wall{margin-top:22px}
.wall-title{color:var(--muted); margin-bottom:10px}
.wall-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.slot{background:#1a131b; border:1px dashed var(--border); border-radius:14px; aspect-ratio:3/2; display:grid; place-items:center; padding:10px}
.slot img{max-height:70%; opacity:.95}
.placeholder{color:#a09aa3; font-size:.9rem}

/* Contact */
.contact-form{background:var(--card); border:1px solid var(--border); padding:16px; border-radius:16px}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.contact-form input, .contact-form textarea {
  width:100%; background:#110d12; border:1px solid var(--border);
  border-radius:10px; color:var(--text); padding:10px 12px; font:inherit
}
.contact-form label{display:block; font-size:.9rem; margin:8px 0; color:#ddd}
.small{font-size:.9rem; color:var(--muted)}
.cta-center{display:flex; justify-content:center; margin-top:12px}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:var(--bg-dark); padding:24px 0}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:18px; align-items:start}
.footer-brand{display:flex; align-items:center; gap:10px}
.footer-brand img{width:28px; height:28px; object-fit:contain}
.footer-links{list-style:none; margin:0; padding:0}
.footer-links li{margin:6px 0}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--text)}

/* Back-to-top */
.back-to-top{
  position:fixed; right:18px; bottom:18px; width:44px; height:44px;
  display:grid; place-items:center; border-radius:12px; cursor:pointer;
  border:1px solid var(--border); background:rgba(26,19,27,.8); backdrop-filter:blur(6px);
  box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.back-to-top.show{opacity:1; pointer-events:auto}
.back-to-top:hover{transform:translateY(-2px)}
.back-to-top svg{width:22px; height:22px}

/* Utilities */
.section .code{background:#130f14; padding:2px 6px; border-radius:6px}

@media (max-width: 900px){
  .grid{grid-template-columns:1fr 1fr}
  .cards-3{grid-template-columns:1fr 1fr}
  .wall-grid{grid-template-columns:repeat(3,1fr)}
  .hero-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .contact-form .row{grid-template-columns:1fr}
}

@media (max-width: 700px){
  .grid{grid-template-columns:1fr}
  .cards-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .main-nav ul{display:none}
  .nav-toggle{display:block}
  .main-nav.open ul{display:flex; flex-direction:column; position:absolute; right:5%; top:56px; background:#0c0a0c; border:1px solid var(--border); border-radius:12px; padding:12px; width:min(260px, 90vw)}
}