:root{
  --orange:#ff9900;

  --text:#0f172a;
  --muted:#616b79;
  --line:rgba(15,23,42,.10);

  --bg:#f6f8fb;

  --radius:22px;
  --shadow:0 18px 60px rgba(15,23,42,.12);
  --shadowSoft:0 30px 90px rgba(15,23,42,.10);

  --max:1120px;

  --lift:110px;
  --overlap:140px;

  --layerPadTop:36px;
  --layerPadBottom:74px;
  --betweenLayers:58px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background:#fff;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
.container{width:min(var(--max), 100% - 2rem); margin-inline:auto}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(10px);
  background: rgba(246,248,251,.78);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}
.brand{
  display:flex; align-items:center; gap:.8rem;
  font-size:1.15rem;
  font-weight:1000;
  letter-spacing:.2px;
}
.brand a {
  display:flex; align-items:center; gap:.8rem;
}
.brand .dot{
  width:12px; height:12px; border-radius:50%;
  background: var(--orange);
  box-shadow: 0 0 0 6px rgba(255,153,0,.18);
}
.brand .logo{
  width:36px; height:36px; object-fit:contain;
}

nav{
  display:flex; 
  gap:.8rem; 
  align-items:center;
  color: var(--muted);
  font-weight:800;
  font-size:.95rem;
}
nav a{padding:.35rem .55rem; border-radius:10px}
nav a:hover{background: rgba(15,23,42,.06); color:var(--text)}

.cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(255,153,0,.55);
  background: var(--orange);
  color:#fff;
  font-weight:700;
  box-shadow: 0 10px 24px rgba(255,153,0,.18);
  transition: transform .15s ease, filter .15s ease;
  white-space:nowrap;
  cursor:pointer;
}
.cta:hover{transform: translateY(-1px); filter:saturate(1.06)}

.ghost{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.72rem 1.05rem;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.85);
  font-weight:1000;
  white-space:nowrap;
  cursor:pointer;
}
.ghost:hover{background:#fff}

.cta-green{
  background:#22c55e;
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 10px 24px rgba(34,197,94,.18);
}
.cta-green:hover{transform: translateY(-1px); filter:saturate(1.06)}

.menu-btn{
  display:none;
  border:1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.85);
  color: var(--text);
  padding:.6rem .75rem;
  border-radius:12px;
  font-weight:1000;
  cursor:pointer;
}

/* Full mobile menu (overlay) */
.mnav-backdrop{
  position:fixed; inset:0;
  background: rgba(15,23,42,.55);
  display:none;
  z-index: 90;
}
.mnav-panel{
  position:fixed;
  top:0; right:0;
  height:100dvh;
  width:min(420px, 92vw);
  background: rgba(255,255,255,.96);
  border-left:1px solid rgba(15,23,42,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  transform: translateX(104%);
  transition: transform .28s ease;
  z-index: 91;
  display:flex;
  flex-direction:column;
  padding: 1rem;
  backdrop-filter: blur(10px);
}
body.menu-open{overflow:hidden}
body.menu-open .mnav-backdrop{display:block}
body.menu-open .mnav-panel{transform: translateX(0)}

.mnav-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.8rem;
  padding-bottom:.9rem;
  border-bottom:1px solid rgba(15,23,42,.10);
}
.mnav-title{
  display:flex; align-items:center; gap:.7rem;
  font-weight:1000;
}
.mnav-title .dot{
  width:10px; height:10px; border-radius:50%;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(255,153,0,.16);
}
.mnav-title .logo{
  width:32px; height:32px; object-fit:contain;
}
.mnav-close{
  border:1px solid rgba(15,23,42,.14);
  background:#fff;
  border-radius: 12px;
  padding:.55rem .7rem;
  font-weight:1000;
  cursor:pointer;
}
.mnav-list{
  margin-top:1rem;
  display:grid;
  gap:.55rem;
}
.mnav-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem .9rem;
  border-radius: 14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:900;
  color: var(--text);
  transition: transform .12s ease, border-color .12s ease;
}
.mnav-link:hover{
  transform: translateY(-1px);
  border-color: rgba(255,153,0,.35);
}
.mnav-footer{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid rgba(15,23,42,.10);
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
}

/* HERO */
.hero{
  position:relative;
  min-height:70vh;
  padding: clamp(2.2rem, 4vw, 4rem) 0;
  overflow:hidden;
  background:#0b1220;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,18,32,.84) 0%, rgba(11,18,32,.55) 56%, rgba(11,18,32,.18) 100%),
    url("https://images.unsplash.com/photo-1459865264687-595d652de67e?auto=format&fit=crop&w=2600&q=80")
    center/cover no-repeat;
  opacity:.95;
  z-index:0;
  filter: saturate(1.02) contrast(1.06) brightness(.9);
}
.hero-inner{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.2rem, 3vw, 2rem);
  align-items:center;
  padding-bottom:4rem;
}
.hero h1{
  margin:0 0 .85rem;
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#fff;
  padding-bottom: .4rem;
}
.hero h1 span{color: var(--orange)}
.hero p{
  margin:0 0 1.15rem;
  color: rgba(255,255,255,.88);
  max-width:62ch;
  font-size:1.06rem;
  line-height:1.55;
  padding-bottom: 1.5rem;
}
.hero-actions{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}
.hero-actions .ghost{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.26);
  color:#fff;
}
.hero-actions .ghost:hover{background: rgba(255,255,255,.20)}

.hero-card{
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.55);
  border-radius: var(--radius);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  overflow:hidden;
}
.hero-card-inner{padding:1.05rem 1.05rem 1rem}
.card-title{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:1000;
  margin-bottom:.75rem;
}
.pill{
  display:inline-flex; align-items:center;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,153,0,.14);
  border:1px solid rgba(255,153,0,.35);
  color:#7a3d00;
  font-weight:1000;
  font-size:.85rem;
  white-space:nowrap;
}

.match{
  padding:.9rem;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  display:grid;
  gap:.25rem;
}
.teams{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  font-weight:900;
}
.team{
  display:flex; align-items:center; gap:.7rem; flex:1;
}
.team img{
  width:32px; height:32px; object-fit:contain;
  border-radius:6px;
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
  background:#fff;
}
.meta{color: var(--muted); font-weight:800; font-size:.95rem}
.hero-card-actions{margin-top:.9rem; display:flex; gap:.7rem; flex-wrap:wrap;}

/* STACK + LAYERS */
.stack{position:relative; padding:0;}
.layer{position:relative; overflow:hidden;}
.layer.first{margin-top: calc(var(--lift) * -1);}
.layer + .layer{margin-top: calc(var(--overlap) * -1);}

.layer-inner{
  padding:
    calc(var(--layerPadTop) + var(--betweenLayers))
    clamp(1.2rem, 2vw, 1.7rem)
    calc(var(--layerPadBottom) + var(--betweenLayers));
}
.layer-tail{height: calc(var(--betweenLayers) + 16px);}

.layer.sponsors .layer-inner{padding:0;}

.layer.news{
  z-index:10;
  background:
    radial-gradient(900px 300px at 15% 10%, rgba(255,153,0,.10), transparent 60%),
    radial-gradient(900px 320px at 85% 10%, rgba(56,189,248,.14), transparent 60%),
    linear-gradient(180deg, #eef6ff 0%, #ffffff 60%);
}
.layer.sponsors{
  z-index:20;
  background:
    linear-gradient(90deg, rgba(11,18,32,.84) 0%, rgba(11,18,32,.55) 56%, rgba(11,18,32,.18) 100%),
    linear-gradient(180deg, rgba(11,18,32,.18) 0%, rgba(11,18,32,.62) 70%, rgba(246,248,251,1) 100%);
  padding-block:28px;
}
.layer.signup{
  z-index:30;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(34,197,94,.16), transparent 70%),
    radial-gradient(900px 260px at 80% 0%, rgba(255,153,0,.10), transparent 70%),
    linear-gradient(270deg, #ecfff5 0%, #ffffff 65%);
}

/* headings */
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom:1.1rem;
}
.section-head h2{
  margin:0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing:-0.01em;
}
.section-head h2 span{color: var(--orange)}
.section-head p{margin:.25rem 0 0; color: var(--muted); max-width:70ch; line-height:1.45}

.grid h3{margin:0 0 .85rem; font-size:1.25rem; letter-spacing:-0.01em;}
.grid ul{
  margin:0;
  padding-left:1.2rem;
  color:#0f172a;
  line-height:1.55;
  list-style-type: disc;
}
.grid ul li{margin-bottom:.45rem; font-weight:500;}

.grid{display:grid; grid-template-columns: repeat(12, 1fr); gap:1rem}
.col-7{grid-column: span 7}
.col-5{grid-column: span 5}

.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(6px);
}
.card-pad{padding:1.05rem}

/* News list */
.news-list{display:grid; gap:.75rem}
.news-item{
  padding: .9rem .95rem;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.08);
  background:#fff;
  transition: transform .12s ease, border-color .12s ease;
  cursor:pointer;
}
.news-item:hover{transform: translateY(-1px); border-color: rgba(255,153,0,.35)}
.news-top{display:flex; justify-content:space-between; gap:1rem; align-items:baseline}
.news-title{font-weight:1000}
.news-date{color: var(--muted); font-weight:900; font-size:.92rem; white-space:nowrap}
.news-snippet{margin:.45rem 0 0; color: rgba(15,23,42,.78); line-height:1.45}

/* schedule */
.schedule{display:grid; gap:.75rem}
.schedule .match{background: rgba(246,248,251,.55)}

/* Sponsors */
.sponsors-wrap{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.sponsors-wrap .layer-tail{margin-bottom: calc(var(--betweenLayers) + 26px);}

.sponsors-top{
  width:min(var(--max), 100% - 2rem);
  margin-inline:auto;
  padding: calc(var(--layerPadTop) + var(--betweenLayers)) clamp(1.2rem, 2vw, 1.7rem) 1rem;
  padding-bottom:42px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  color:#fff;
}
.sponsors-top p, .sponsors-top .note{color:#fff;}
.sponsors-top .note{
  font-size:1.15rem;
  color: var(--orange);
  font-weight:900;
}

.marquee{
  overflow:hidden;
  border-top:1px solid rgba(94, 94, 94, 0.2);
  border-bottom:1px solid rgba(94, 94, 94, 0.2);
  background: rgba(200, 200, 200, 0.06);
  mask-image: linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%);
  margin-bottom:18px;
}
.marquee-inner{
  display:flex;
  gap:.9rem;
  align-items:center;
  width:max-content;
  animation: marqueeScroll 22s linear infinite;
  padding: 1rem 1.2rem;
}
.marquee:hover .marquee-inner{animation-play-state: paused}
@keyframes marqueeScroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.sponsor-chip{
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  white-space:nowrap;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease;
  background:#fff;
  box-shadow: 0 6px 18px rgba(15,23,42,.12);
  padding: 1.5rem .75rem;
  border-radius:25px;
  border:1px solid rgba(15,23,42,.10);
  width:360px;
  font-weight:600;
}
.sponsor-chip:hover{transform: translateY(-2px); border-color: rgba(255,153,0,.35);}
.sponsor-logo{
  height:120px;
  max-width:200px;
  max-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sponsor-logo img{max-width:100%; max-height:100%; object-fit:contain;}
.sponsor-name{font-size:1rem; color: var(--text);}
.sponsor-price{margin-top:.25rem; font-size:1.1rem; color: var(--orange); font-weight:600;}

/* Reveal */
.reveal{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s ease;
  will-change: opacity, transform;
}
.reveal.show{opacity:1; transform: translateY(0);}
.reveal[data-delay="1"]{transition-delay: .06s}
.reveal[data-delay="2"]{transition-delay: .12s}
.reveal[data-delay="3"]{transition-delay: .18s}
.reveal[data-delay="4"]{transition-delay: .24s}

/* =========================
   Inner pages (programma/uitslagen/standen/etc)
   ========================= */
.page{
  background: var(--bg);
}

.page-hero{
  position: relative;
  padding: 2.25rem 0 1.35rem;
  background:
    radial-gradient(900px 280px at 15% 10%, rgba(255,153,0,.10), transparent 60%),
    radial-gradient(900px 280px at 85% 10%, rgba(56,189,248,.14), transparent 60%),
    linear-gradient(180deg, #eef6ff 0%, #ffffff 70%);
  border-bottom: 1px solid var(--line);
}

.page-hero-inner{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem;
}

.page-hero h1{
  margin: .35rem 0 .45rem;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: -0.02em;
}

.page-hero p{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
  line-height: 1.5;
}

.page-hero-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  align-items:center;
}

.crumbs{
  font-weight: 900;
  color: rgba(15,23,42,.62);
  font-size: .92rem;
  display:flex;
  gap:.45rem;
  align-items:center;
}
.crumbs a{color: inherit;}
.crumbs a:hover{color: var(--text);}

.page-body{
  padding: 1.4rem 0 3.2rem;
}

/* Tables */
.table-wrap{
  overflow:auto;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}

.table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px; /* voorkomt dat 'Wedstrijd' kolommen te krap worden */
}

.table thead th{
  position: sticky;
  top: 0;
  background: rgba(246,248,251,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(15,23,42,.10);
  color: rgba(15,23,42,.75);
  font-weight: 1000;
  font-size: .92rem;
  text-align: left;
  padding: .85rem .9rem;
  white-space: nowrap;
}

.table tbody td{
  padding: .85rem .9rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  vertical-align: middle;
  font-weight: 600;
}

.table tbody tr:hover td{
  background: rgba(255,153,0,.06);
}

.table .text-center{ text-align:center; }
.table .empty{
  text-align:center;
  color: rgba(15,23,42,.62);
  font-weight: 900;
  padding: 1.25rem .9rem;
}

/* Mobile: hero stack + table */
@media (max-width: 900px){
  .page-hero-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .table{
    min-width: 720px;
  }
}

/* Helpers for moved inline styles */
.mt-1{margin-top:1rem;}
.mt-09{margin-top:.9rem;}
.inline-block{display:inline-block;}
.fw-700{font-weight:700;}
.cta-big{font-size:1.15rem;}
.ml-1{margin-left:1rem;}
.small-muted{font-weight:500; font-size:.8rem; color: var(--muted);}
.grid-gap-wide{gap:1.2rem;}
.mb-14{margin-bottom:1.4rem;}
.section-head-tight{margin-bottom:.6rem;}
.section-head .h2-sm{font-size:1.4rem;}
.note span.orange{color: var(--orange);}

/* Footer */
footer{
  border-top: 1px solid var(--line);
  padding: 1.5rem 0;
  color: var(--muted);
  background: rgba(255,255,255,.55);
}
.footer-grid{
  display:flex; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; align-items:center;
}
.fine{font-weight:900}
.links{display:flex; gap:1rem; flex-wrap:wrap}
.links a:hover{color: var(--text)}

/* Responsive */
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr}
  .col-7,.col-5{grid-column: span 12}
}
@media (max-width: 720px){
  nav{display:none}
  .menu-btn{display:inline-flex}
  .topbar-inner .cta{display:none}
  .mnav-footer .cta{flex:1}
  .hero{min-height:76vh}
  .hero h1{padding: 1rem 0; font-size:clamp(1.8rem, 6vw, 2.8rem);}
  .hero p{margin-bottom:1rem; font-size:1rem; padding-bottom: 0.5rem;}
  .hero .pill {font-size: 0.8rem; padding: .2rem .5rem;}
  .hero-inner{gap: clamp(2rem, 4vw, 4rem); padding-bottom:5rem;}
  .hero .hero-card-inner {padding: .9rem .9rem .8rem;}
  .hero .hero-card-inner .card-title {margin-bottom: .6rem; font-size: .95rem;}
  .hero .match { width:100%; overflow-x: auto; }
  .hero .match .teams { font-size: 1rem; gap: 0.8rem; }
  .hero .match .team { gap: .4rem; }
  .hero .match .team img { width: 24px; height: 24px; }
  .hero .match .meta { font-size: 0.95rem; font-weight:700; padding-top: 0.5rem; line-height: 1.5;}
  .grid{ padding-bottom:3rem; }
  .marquee{ padding-bottom:3rem; }
  .marquee .sponsor-chip{width:260px; gap:.4rem; padding:1rem .5rem;}
  .marquee .sponsor-chip .sponsor-logo{height:75px;}
  .marquee .sponsor-chip .sponsor-name{font-size: 1rem;}
  .marquee .sponsor-chip .sponsor-price{font-size: .9rem;}
  .schedule .match { width:100%; overflow-x: auto; }
  .schedule .match .teams { font-size: .9rem; gap: 0.8rem; }
  .schedule .match .team { gap: .4rem; }
  .schedule .match .team img { width: 24px; height: 24px; }
  .schedule .match .meta { font-size: .9rem; font-weight:700; padding-top: 0.5rem; line-height: 1.5;}
  .news-top {flex-direction:column; align-items:flex-start; gap:.5rem;}
  .section-head {flex-direction:column; align-items:flex-start;}
  .hero .hero-inner,
  .layer .layer-inner,
  .layer .sponsors-top {padding-left:clamp(0.6rem, 2vw, 1.2rem); padding-right:clamp(0.6rem, 2vw, 1.2rem);}
  .layer.signup .mb-14{ padding-bottom:1.5rem; }
  .layer.signup .layer-inner .note { font-weight:700; }
  .layer.signup .layer-inner .cta {width:100%; justify-content:center;}
  .layer.signup .layer-inner .small-muted {display:block; text-align:center; margin-top:.6rem; margin-left:0;}
  .footer-grid .links {justify-content:center; width:100%}
  .footer-grid .fine {width:100%; text-align:center;}
  :root{
    --lift:88px;
    --overlap:120px;
    --betweenLayers:22px;
  }
}