
:root{
  --purple:#4c148c;
  --purple-2:#6f2dbd;
  --pink:#e52d86;
  --green:#21a84b;
  --lime:#8bdc43;
  --yellow:#f5c24a;
  --navy:#091a43;
  --ink:#111a36;
  --muted:#697084;
  --line:#dfe4ee;
  --paper:#fff;
  --soft:#f7f7fb;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.45}
a{color:inherit}
img{max-width:100%;display:block}
button,input{font:inherit}
.shell{width:min(1450px,calc(100% - 40px));margin:auto}

.topbar{background:linear-gradient(90deg,#401082,#28105f);color:#fff;font-size:12px}
.topbar-inner{height:30px;display:flex;align-items:center;justify-content:space-between}
.topbar b{display:inline-grid;place-items:center;width:28px;height:22px;border-radius:6px;background:#35bd61;margin-right:8px}

.header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(16px);border-bottom:1px solid #e8ebf1}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:260px}
.logo-ball{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#a970ef,#5a1ba9 65%,#2f0a70);color:#fff;font-size:26px;font-weight:950;border:4px solid rgba(255,255,255,.35);box-shadow:0 5px 12px rgba(76,20,140,.3)}
.logo-copy strong{display:block;font-size:25px;line-height:1}.logo-copy strong span{color:#31a84e}.logo-copy small{display:block;margin-top:4px;font-size:11px}
.menu{display:flex;gap:37px}.menu a{text-decoration:none;font-size:14px;font-weight:800;position:relative}
.menu a.active{color:#20a348}.menu a.active::after{content:"";position:absolute;left:0;right:0;bottom:-16px;height:3px;background:#20a348}
.search{display:flex;width:285px;border:1px solid #d7dce5;border-radius:9px;overflow:hidden;background:#fff}
.search input{border:0;outline:0;flex:1;padding:12px 14px;font-size:12px}.search button{width:48px;border:0;background:linear-gradient(180deg,#eb3b91,#c9196d);color:#fff;font-size:23px}

.hero{background:radial-gradient(circle at 48% 45%,rgba(107,230,169,.18),transparent 30%),linear-gradient(90deg,#f5fff9,#e7fff4 56%,#f2fff8);padding:24px 0 16px;border-bottom:1px solid #e1eee7}
.hero-grid{display:grid;grid-template-columns:.95fr 1.15fr .95fr;gap:28px;align-items:center}
.hero-copy h1{font-size:43px;line-height:1.07;margin:0 0 15px;letter-spacing:-.03em}.hero-copy h1 span{color:#24a548}
.hero-copy p{font-size:15px;max-width:430px}
.hero-actions{display:flex;gap:14px;margin-top:20px}.hero-actions a{padding:13px 20px;border-radius:8px;text-decoration:none;font-weight:850;font-size:13px}
.primary-btn{background:linear-gradient(90deg,#ec3c8f,#d81a73);color:#fff}.secondary-btn{background:#fff;border:1px solid #cfd6df}
.hero-art img{width:100%;max-height:260px;object-fit:contain}
.why-card{position:relative;padding:24px 28px;border-radius:18px;background:#fff;box-shadow:0 10px 28px rgba(30,47,76,.14);min-height:205px}
.why-card h2{font-size:19px;color:#3d176f;margin:0 0 18px}.why-card ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:12px}.why-card li::before{content:"✓";display:inline-grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#4dbf68;color:#fff;margin-right:9px;font-size:11px}.why-card img{position:absolute;right:18px;bottom:15px;width:135px;opacity:.95}

.content{display:grid;grid-template-columns:1fr 290px;gap:12px;padding:10px 0 16px}
.main-column{display:grid;gap:10px}
.top-sites{background:linear-gradient(180deg,#0d1d4a,#08153b);border-radius:13px;padding:12px 12px 8px;color:#fff}
.section-title{display:flex;align-items:center;gap:9px}.section-title h2{font-size:16px;margin:0}.section-title.light{padding:0 8px 10px}
.site-carousel{position:relative}.site-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.site-card{position:relative;min-height:158px;padding:12px 10px 10px;border:1px solid #5b59a5;border-radius:10px;background:linear-gradient(180deg,#16305c,#0b1c42);text-align:center}
.site-card .rank{position:absolute;left:8px;top:8px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#eef2f5;color:#17213e;font-weight:900;font-size:12px;border:2px solid #b9c0ca}
.site-name{height:42px;display:grid;place-items:center;font-weight:950;font-size:17px}.site-name.green{color:#4fd56d}.site-name.red{color:#f04050}.site-name.lime{color:#91df49}
.stars{font-size:12px;color:#ffc72e;margin:8px 0}.stars b{color:#fff;margin-left:5px}.bonus{display:block;color:#a9ff57;font-size:12px;margin:8px 0}
.site-card a{display:flex;justify-content:center;gap:18px;padding:8px;border-radius:6px;text-decoration:none;background:linear-gradient(180deg,#54c66e,#229840);font-weight:850;font-size:11px}.site-card a.pink{background:linear-gradient(180deg,#ef458f,#d52273)}.site-card a.purple{background:linear-gradient(180deg,#7e47d9,#5820b0)}
.round-arrow{position:absolute;z-index:2;top:55%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:#36bfa7;color:#fff;font-size:28px}.round-arrow.left{left:-20px}.round-arrow.right{right:-20px}
.all-sites{display:block;text-align:center;margin-top:8px;font-size:11px;text-decoration:none}

.dashboard-row{display:grid;grid-template-columns:1.1fr .82fr .92fr;gap:10px}
.stats-card,.variants-card,.safe-card{border:1px solid #d8dce8;border-radius:12px;background:#fff;padding:13px}
.card-title{display:flex;align-items:center;gap:8px}.card-title h3{font-size:15px;margin:0}.stats-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;margin-top:10px}
.stat-list{display:grid;gap:10px}.stat-list strong{display:block;color:#5723b2;font-size:20px}.stat-list span{font-size:10px}
.line-chart{position:relative;height:140px;background:linear-gradient(#fff,#fbf8ff);border-left:1px solid #eee;border-bottom:1px solid #eee;padding:5px}
.chart-grid{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 24%,#ece8f5 25%,transparent 26%,transparent 49%,#ece8f5 50%,transparent 51%,transparent 74%,#ece8f5 75%,transparent 76%)}
.line-chart svg{position:relative;width:100%;height:112px}.chart-days{display:flex;justify-content:space-between;font-size:9px;color:#687084}
.variants-card{background:linear-gradient(135deg,#fff,#f5edff);border-color:#d2b8f5}.variant-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.variant-grid div{display:grid;grid-template-columns:34px 1fr;column-gap:8px}.variant-grid b,.variant-grid small{grid-column:2}.variant-grid b{font-size:11px}.variant-grid small{font-size:9px;color:#6e6a7d}
.mini-ball{grid-row:1/3;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:11px}.purple-ball{background:#e1d1ff;color:#5723b2}.orange-ball{background:#ffe2c4;color:#d56a00}.green-ball{background:#d9f4c8;color:#3a7e17}.pink-ball{background:#ffd6e8;color:#aa2760}
.variants-card>a,.safe-card>a{display:block;text-align:center;border-top:1px solid #e6dff1;padding-top:9px;text-decoration:none;font-size:10px;color:#6025b8;font-weight:850}
.safe-card{background:linear-gradient(135deg,#f3fff5,#e3fae8);border-color:#cce8d3}.green-title h3{color:#19823c}.safe-layout{display:grid;grid-template-columns:1fr 100px;align-items:center}.safe-layout ul{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px;font-size:10px}.safe-layout li::before{content:"✓";display:inline-grid;place-items:center;width:17px;height:17px;background:#28ae54;color:#fff;border-radius:50%;margin-right:8px}.safe-layout img{width:90px}

.bonus-strip{display:grid;grid-template-columns:80px 1fr auto 1.4fr;align-items:center;gap:16px;padding:8px 18px;border:1px solid #f0dba4;border-radius:10px;background:linear-gradient(90deg,#fff4d4,#fffaf0)}
.bonus-strip img{width:70px}.bonus-strip h3{font-size:15px;margin:0}.bonus-strip p{font-size:10px;margin:2px 0}.bonus-strip>a{padding:11px 20px;background:#f6cc50;border-radius:8px;text-decoration:none;font-weight:850;font-size:11px}.benefits{display:flex;justify-content:flex-end;gap:18px;font-size:9px}

.side-column{display:grid;gap:10px;align-content:start}
.news-card{border:1px solid #edd397;border-radius:12px;background:#fff7e8;padding:12px}.section-title.dark h2{color:#5a3a00}
.news-card article{display:grid;grid-template-columns:70px 1fr 16px;gap:8px;align-items:center;padding:8px;border-radius:8px;background:#fff;margin-top:8px}.news-card article img{width:70px;height:52px;object-fit:cover;border-radius:6px}.news-card b{font-size:10px}.news-card p{font-size:9px;color:#73778a;margin:3px 0}.news-link{display:block;text-align:center;padding-top:10px;text-decoration:none;font-size:10px;font-weight:850}
.newsletter{padding:15px;border-radius:12px;background:linear-gradient(135deg,#7e46d2,#9c6be2);color:#fff}.newsletter-title{display:flex;gap:9px}.newsletter h3{font-size:15px;margin:0}.newsletter p{font-size:10px;margin:2px 0 12px}.newsletter form{display:flex;background:#fff;border-radius:8px;overflow:hidden}.newsletter input{border:0;outline:0;flex:1;padding:11px;font-size:10px}.newsletter button{width:48px;border:0;background:#6a26c8;color:#fff;font-size:18px}.newsletter label{display:block;font-size:9px;margin-top:8px}

.footer{background:#15132c;color:#fff;padding:35px 0}.footer-inner{display:grid;grid-template-columns:1.4fr .8fr 1fr 1fr;gap:35px}.footer-logo{min-width:0}.footer p,.footer a{font-size:11px;color:#c8c6d7}.footer a{display:block;text-decoration:none;margin:6px 0}.footer h4{margin:0 0 10px}

@media(max-width:1200px){
  .menu{gap:18px}
  .site-grid{grid-template-columns:repeat(3,1fr)}
  .dashboard-row{grid-template-columns:1fr 1fr}.safe-card{grid-column:1/-1}
  .content{grid-template-columns:1fr}.side-column{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .menu{display:none}.search{width:220px}
  .hero-grid{grid-template-columns:1fr 1fr}.why-card{grid-column:1/-1}.why-card img{width:100px}
  .dashboard-row{grid-template-columns:1fr}.safe-card{grid-column:auto}
  .bonus-strip{grid-template-columns:65px 1fr}.bonus-strip>a,.benefits{grid-column:2}
}
@media(max-width:650px){
  .shell{width:min(100% - 22px,1450px)}
  .topbar-inner span:last-child,.search{display:none}
  .logo{min-width:0}.hero-grid{grid-template-columns:1fr}.hero-art{order:-1}
  .hero-copy h1{font-size:36px}.site-grid{grid-template-columns:1fr}
  .round-arrow{display:none}.dashboard-row,.side-column{grid-template-columns:1fr}
  .stats-layout{grid-template-columns:1fr}.bonus-strip{grid-template-columns:1fr}.bonus-strip>a,.benefits{grid-column:auto}
  .benefits{flex-direction:column;gap:4px}.footer-inner{grid-template-columns:1fr}
}

/* ===== BINGO PARADIJS: LEESBAARHEID, DOORLINKBLOK EN RESPONSIVE ===== */
small,
.topbar,
.logo-copy small,
.why-card ul,
.site-card a,
.all-sites,
.stat-list span,
.chart-days,
.variant-grid small,
.variants-card>a,
.safe-card>a,
.safe-layout ul,
.bonus-strip p,
.bonus-strip>a,
.benefits,
.news-card b,
.news-card p,
.news-link,
.newsletter p,
.newsletter input,
.newsletter label,
.footer p,
.footer a{
  font-size:max(12px,.75rem);
  line-height:1.45;
}

.mobile-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid #d7dce5;
  border-radius:10px;
  background:#fff;
  color:var(--purple);
  font-size:22px;
  cursor:pointer;
}

.news-card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.paradijs-network{
  margin:34px auto 42px;
  padding:38px 34px;
  border:1px solid rgba(76,20,140,.16);
  border-radius:24px;
  background:
    radial-gradient(circle at 10% 12%,rgba(111,45,189,.13),transparent 30%),
    radial-gradient(circle at 90% 16%,rgba(33,168,75,.12),transparent 32%),
    linear-gradient(135deg,#ffffff,#f8f5ff 62%,#f2fff5);
  box-shadow:0 18px 45px rgba(76,20,140,.08);
}

.paradijs-network__head{
  max-width:760px;
  margin:0 auto 26px;
  text-align:center;
}

.paradijs-network__eyebrow{
  display:inline-flex;
  padding:7px 14px;
  border-radius:999px;
  background:#eee4ff;
  color:var(--purple);
  font-size:13px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.paradijs-network__head h2{
  margin:13px 0 8px;
  color:var(--ink);
  font-size:clamp(28px,4vw,42px);
  line-height:1.08;
}

.paradijs-network__head p{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.55;
}

.paradijs-network__links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.paradijs-network__links a{
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 15px;
  border:1px solid #e2dbea;
  border-radius:14px;
  background:#fff;
  color:var(--ink);
  text-decoration:none;
  font-size:13px;
  font-weight:800;
  box-shadow:0 7px 16px rgba(76,20,140,.045);
  transition:.2s ease;
}

.paradijs-network__links a span{
  flex:0 0 auto;
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#eee4ff;
  color:var(--purple);
  font-size:16px;
}

.paradijs-network__links a:nth-child(3n+2) span{
  background:#e6f7ea;
  color:var(--green);
}

.paradijs-network__links a:nth-child(3n) span{
  background:#ffe7f2;
  color:var(--pink);
}

.paradijs-network__links a:hover{
  transform:translateY(-2px);
  border-color:#bda0de;
  box-shadow:0 12px 22px rgba(76,20,140,.1);
}

@media(max-width:1100px){
  .paradijs-network__links{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:900px){
  .mobile-menu-toggle{
    display:grid;
    place-items:center;
    margin-left:auto;
  }

  .nav{
    position:relative;
  }

  .menu{
    position:absolute;
    top:68px;
    left:0;
    right:0;
    display:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    padding:12px;
    border:1px solid #e2e5ec;
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 35px rgba(17,26,54,.15);
  }

  .menu.is-open{
    display:grid;
  }

  .menu a{
    padding:10px;
    border-radius:9px;
    background:#f7f3fb;
    text-align:center;
  }

  .menu a.active::after{
    display:none;
  }
}

@media(max-width:650px){
  .shell{
    width:calc(100% - 18px);
  }

  .nav{
    height:68px;
    gap:10px;
  }

  .logo-ball{
    width:43px;
    height:43px;
    font-size:22px;
  }

  .logo-copy strong{
    font-size:20px;
  }

  .logo-copy small{
    display:none;
  }

  .menu{
    top:60px;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .hero{
    padding:18px 0 16px;
  }

  .hero-grid{
    gap:14px;
  }

  .hero-art img{
    max-height:205px;
  }

  .hero-copy h1{
    font-size:34px;
    text-align:center;
  }

  .hero-copy p{
    font-size:15px;
    text-align:center;
    margin-inline:auto;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-actions a{
    padding:12px 8px;
    text-align:center;
  }

  .why-card{
    min-height:0;
    padding:18px;
  }

  .why-card ul{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    padding-right:0;
  }

  .why-card li{
    padding:9px;
    border-radius:10px;
    background:#f7f8fb;
  }

  .why-card img{
    display:none;
  }

  .site-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }

  .site-card{
    min-height:168px;
    padding:12px 8px 9px;
  }

  .site-name{
    font-size:15px;
  }

  .stars{
    font-size:11px;
  }

  .dashboard-row{
    gap:8px;
  }

  .stats-layout{
    grid-template-columns:.8fr 1.2fr;
  }

  .stat-list{
    gap:7px;
  }

  .stat-list strong{
    font-size:17px;
  }

  .line-chart{
    height:128px;
  }

  .variant-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 8px;
  }

  .safe-layout{
    grid-template-columns:1fr 80px;
  }

  .bonus-strip{
    grid-template-columns:58px minmax(0,1fr);
    gap:10px;
    padding:12px;
  }

  .bonus-strip img{
    width:54px;
  }

  .bonus-strip>a{
    grid-column:1/-1;
    text-align:center;
  }

  .benefits{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .benefits span{
    padding:7px;
    border-radius:8px;
    background:#fff9e9;
    text-align:center;
  }

  .side-column{
    grid-template-columns:1fr;
  }

  .news-card article{
    grid-template-columns:64px 1fr 16px;
  }

  .newsletter form{
    min-width:0;
  }

  .paradijs-network{
    margin:24px auto 30px;
    padding:24px 12px;
    border-radius:18px;
  }

  .paradijs-network__head{
    margin-bottom:18px;
  }

  .paradijs-network__head h2{
    font-size:28px;
  }

  .paradijs-network__head p{
    font-size:14px;
  }

  .paradijs-network__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }

  .paradijs-network__links a{
    min-width:0;
    min-height:44px;
    padding:8px 9px;
    gap:6px;
    border-radius:11px;
    font-size:10.5px;
    line-height:1.2;
  }

  .paradijs-network__links a span{
    width:23px;
    height:23px;
    font-size:13px;
  }

  .footer{
    padding:28px 0;
  }

  .footer-inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 14px;
  }

  .footer-inner>div:first-child{
    grid-column:1/-1;
  }

  .footer-inner>div:last-child{
    grid-column:1/-1;
  }
}

@media(max-width:390px){
  .site-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .site-card{
    min-height:160px;
  }

  .site-card a{
    font-size:10px;
  }

  .paradijs-network__links{
    gap:6px;
  }

  .paradijs-network__links a{
    font-size:10px;
    padding:7px;
  }
}
