/* ============ MATCHES ============ */
.matches-bg{background:linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%)}
.match-tabs{
  display:inline-flex;gap:6px;padding:6px;
  background:rgba(245,241,234,.06);border:1px solid var(--line);
  border-radius:999px;margin-bottom:40px;
}
.match-tab{
  background:transparent;border:none;color:rgba(245,241,234,.6);
  padding:10px 18px;border-radius:999px;
  font-weight:700;font-size:13px;letter-spacing:.04em;
  transition:all .2s;
}
.match-tab.active{background:var(--oranje);color:var(--ink)}
.match-tab:not(.active):hover{color:var(--cream)}
.match-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
.match-grid[hidden]{display:none}
@media (max-width:780px){ .match-grid{grid-template-columns:1fr} }
.match-card{
  background:var(--ink);padding:32px 28px;
  display:flex;flex-direction:column;gap:20px;
  transition:background .25s;position:relative;
  min-height:200px;
}
.match-card:hover{background:var(--ink-2)}
.match-card.featured{background:linear-gradient(135deg, rgba(255,106,31,.15), rgba(255,106,31,.02))}
.match-card.featured::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--oranje);
}
.match-top{display:flex;justify-content:space-between;align-items:center;gap:16px}
.match-date{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.15em;color:rgba(245,241,234,.55);text-transform:uppercase}
.match-time{font-family:"Anton",sans-serif;font-size:22px;color:var(--cream);letter-spacing:.04em}
.match-card.featured .match-time{color:var(--oranje)}
.match-teams{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.team{display:flex;align-items:center;gap:12px;font-family:"Anton",sans-serif;font-size:clamp(26px,3vw,36px);text-transform:uppercase;letter-spacing:.02em}
.flag{width:36px;height:24px;border-radius:3px;flex-shrink:0;overflow:hidden;position:relative;display:inline-block}
.match-vs{font-family:"JetBrains Mono",monospace;font-size:13px;color:rgba(245,241,234,.5);font-weight:500}
.match-tag{
  align-self:flex-start;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line);border-radius:4px;
  color:rgba(245,241,234,.65);
}
.match-card.featured .match-tag{background:var(--oranje);color:var(--ink);border-color:var(--oranje);font-weight:700}
.match-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.match-meta{font-size:13px;color:rgba(245,241,234,.5)}
.match-meta .open{color:var(--oranje);font-weight:600}

/* ============ EXPERIENCE ============ */
.exp-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
@media (max-width:980px){ .exp-grid{grid-template-columns:1fr;gap:40px} }
.exp-photo{
  position:relative;aspect-ratio:4/5;
  border:1px solid var(--line);overflow:hidden;
  background:var(--ink-2);
}
.exp-photo .placeholder{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(255,106,31,.08) 0 14px, transparent 14px 28px),
    var(--ink-2);
}
.exp-photo .ph-label{
  position:absolute;top:18px;left:18px;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(245,241,234,.6);
  background:var(--ink);padding:5px 9px;border:1px solid var(--line);
}
.exp-photo .ph-big{
  position:absolute;left:0;right:0;bottom:0;
  padding:24px;
  font-family:"Anton",sans-serif;
  font-size:clamp(34px,5vw,72px);
  line-height:.9;text-transform:uppercase;
  color:var(--cream);
}
.exp-photo .ph-big span{color:var(--oranje)}
.exp-list{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)}
.exp-item{
  padding:28px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:60px 1fr;gap:24px;
  align-items:baseline;
}
.exp-item .num{
  font-family:"JetBrains Mono",monospace;
  font-size:14px;color:var(--oranje);letter-spacing:.1em;
}
.exp-item h3{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(26px,2.8vw,34px);margin:0 0 8px;letter-spacing:.02em;
}
.exp-item p{margin:0;color:rgba(245,241,234,.7);font-size:15px;text-wrap:pretty}

/* ============ STATS BAND ============ */
.stats{
  background:var(--oranje);color:var(--ink);
  padding:60px 0;border-bottom:1px solid rgba(14,17,22,.15);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:780px){ .stats-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px} }
.stat-num{
  font-family:"Anton",sans-serif;
  font-size:clamp(56px,8vw,112px);line-height:.9;
  letter-spacing:.01em;
}
.stat-label{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  margin-top:8px;font-weight:600;
}

/* ============ LOCATION ============ */
.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
@media (max-width:880px){ .loc-grid{grid-template-columns:1fr;gap:36px} }
.loc-card{
  border:1px solid var(--line);padding:36px 32px;
  background:rgba(245,241,234,.03);
}
.loc-card h3{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:32px;margin:0 0 8px;letter-spacing:.02em;
}
.loc-row{
  display:grid;grid-template-columns:110px 1fr;gap:16px;
  padding:18px 0;border-top:1px solid var(--line);
  align-items:baseline;
}
.loc-row:first-of-type{border-top:none}
.loc-row .k{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(245,241,234,.55);
}
.loc-row .v{font-size:16px;color:var(--cream)}
.loc-map{
  position:relative;aspect-ratio:1/1;min-height:340px;
  border:1px solid var(--line);overflow:hidden;
  background:var(--ink-2);
}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.4) contrast(1.05) brightness(.85)}
.loc-pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
  z-index:2;pointer-events:none;
}
.loc-pin .dot{
  width:18px;height:18px;border-radius:50%;
  background:var(--oranje);box-shadow:0 0 0 6px rgba(255,106,31,.3),0 4px 16px rgba(0,0,0,.4);
  margin:0 auto;
}
.loc-pin .label{
  margin-top:8px;
  background:var(--ink);color:var(--cream);
  padding:6px 10px;border:1px solid var(--oranje);
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.15em;
  text-transform:uppercase;white-space:nowrap;
}

/* ============ FAQ ============ */
.faq-list{max-width:880px;margin:0 auto}
.faq-item{
  border-top:1px solid var(--line);
  padding:0;
}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:28px 0;cursor:pointer;
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(20px,2.4vw,28px);letter-spacing:.02em;
  list-style:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q .plus{
  flex-shrink:0;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-family:"Manrope",sans-serif;font-weight:400;
  transition:transform .25s,background .2s,border-color .2s;
}
.faq-item[open] .plus{transform:rotate(45deg);background:var(--oranje);color:var(--ink);border-color:var(--oranje)}
.faq-a{padding:0 60px 28px 0;color:rgba(245,241,234,.75);font-size:16px;text-wrap:pretty}

/* ============ FINAL CTA ============ */
.final{
  background:var(--oranje);color:var(--ink);
  padding:120px 0 100px;
  position:relative;overflow:hidden;
  border-bottom:none;
}
.final::before{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(14,17,22,.12) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 70%, rgba(14,17,22,.10) 0 2px, transparent 2px);
  background-size:60px 60px, 80px 80px;
  opacity:.5;pointer-events:none;
}
.final-inner{position:relative;z-index:1;text-align:center}
.final h2{
  font-family:"Anton",sans-serif;text-transform:uppercase;
  font-size:clamp(60px,12vw,180px);line-height:.86;margin:0;
}
.final h2 .outline{-webkit-text-stroke:2px var(--ink);color:transparent}
.final p{max-width:560px;margin:32px auto 0;font-size:18px;color:rgba(14,17,22,.85);text-wrap:pretty}
.final .btn-primary{
  background:var(--ink);color:var(--oranje);
  margin-top:48px;font-size:18px;padding:22px 36px;
}
.final .btn-primary:hover{background:#000}
.final .btn-primary .arrow{background:var(--oranje);color:var(--ink)}

/* ============ FOOTER ============ */
.footer{background:var(--ink);padding:48px 0 32px;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer p{margin:0;font-size:13px;color:rgba(245,241,234,.5)}
.footer-links{display:flex;gap:24px;font-size:13px;color:rgba(245,241,234,.6)}
.footer-links a:hover{color:var(--cream)}

/* ============ MOBILE STICKY CTA ============ */
.mobile-cta{
  display:none;
  position:fixed;bottom:14px;left:14px;right:14px;z-index:60;
}
.mobile-cta a{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:var(--oranje);color:var(--ink);
  padding:16px 20px;border-radius:999px;
  font-weight:800;font-size:15px;letter-spacing:.02em;
  box-shadow:0 12px 32px rgba(0,0,0,.45),0 0 0 1px rgba(14,17,22,.2);
}
.mobile-cta a .arrow{
  width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--oranje);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
}
@media (max-width:780px){
  .mobile-cta{display:block}
  .footer{padding-bottom:96px}
}


/* =================================================================
   V2 — MORE ORANJE OVERRIDES
   These rules override the base styles for index-v2.html only.
   Loaded AFTER all base CSS so they cascade on top.
   ================================================================= */

:root{
  --oranje-deep:#E5500A;
  --warm-ink:#1A0F08;
  --warm-cream:#FFF7EC;
}

/* ===== Body + Hero now ORANJE ===== */
body{ background:var(--oranje); color:var(--warm-ink); }

/* Nav becomes solid oranje with dark CTA */
.nav{
  background:rgba(255,106,31,.95);
  border-bottom:2px solid var(--warm-ink);
}
.nav .brand-name{color:var(--warm-ink)}
.nav .brand-name span{color:var(--warm-cream)}
.nav-links a{color:rgba(26,15,8,.78)}
.nav-links a:hover{color:var(--warm-ink)}
.nav-cta{background:var(--warm-ink);color:var(--oranje)}
.nav-cta:hover{background:#000;color:#fff}

/* Hero on oranje */
.hero{border-bottom:3px solid var(--warm-ink)}
.hero-bg::before{
  background:radial-gradient(circle at 50% 30%, var(--oranje-2), transparent 55%);
  width:1400px;height:1400px;top:-400px;
}
.hero-logo-bg{
  opacity:.20;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 20px 60px rgba(26,15,8,.25));
}
.eyebrow{
  background:var(--warm-cream);
  color:var(--warm-ink);
  border:2px solid var(--warm-ink);
}
.eyebrow .dot{
  background:var(--warm-ink);
  box-shadow:0 0 0 4px rgba(26,15,8,.18);
}
h1.hero-title{color:var(--warm-ink)}
.hero-title .oranje{color:var(--warm-cream)}
.hero-title .outline{-webkit-text-stroke:2.5px var(--warm-ink);color:transparent}
.hero-sub{color:rgba(26,15,8,.84)}
.hero-sub b{color:var(--warm-ink);font-weight:800}
.hero-meta{border-top:2px solid var(--warm-ink)}
.meta-label{color:rgba(26,15,8,.65);font-weight:700}
.meta-value{color:var(--warm-ink)}
.meta-value .accent{color:var(--warm-cream)}

/* Buttons reverse colors on oranje hero */
.hero .btn-primary{
  background:var(--warm-ink);color:var(--oranje);
  box-shadow:0 6px 0 rgba(26,15,8,.25);
}
.hero .btn-primary:hover{background:#000;box-shadow:0 8px 0 rgba(26,15,8,.3)}
.hero .btn-primary .arrow{background:var(--oranje);color:var(--warm-ink)}
.hero .btn-ghost{
  color:var(--warm-ink);
  border:2px solid var(--warm-ink);
}
.hero .btn-ghost:hover{background:var(--warm-ink);color:var(--oranje)}

/* Ticker becomes dark band — visual contrast on oranje page */
.ticker{
  background:var(--warm-ink);
  border-top:2px solid var(--warm-ink);
  border-bottom:2px solid var(--warm-ink);
}
.ticker-track span{color:var(--oranje)}
.ticker-track .dot{color:var(--warm-cream)}

/* ===== Matches section — CREAM with oranje featured cards ===== */
.matches-bg{
  background:var(--warm-cream);
  color:var(--warm-ink);
}
.matches-bg .section-num{color:var(--oranje-deep);font-weight:700}
.matches-bg .section-title{color:var(--warm-ink)}
.matches-bg .section-title .oranje{color:var(--oranje)}
.matches-bg .section-lede{color:rgba(26,15,8,.7)}
.match-tabs{
  background:#fff;
  border:2px solid var(--warm-ink);
  box-shadow:0 6px 0 var(--warm-ink);
}
.match-tab{color:rgba(26,15,8,.65)}
.match-tab.active{background:var(--oranje);color:var(--warm-ink)}
.match-tab:not(.active):hover{color:var(--warm-ink)}
.match-grid{background:var(--warm-ink);border:2px solid var(--warm-ink)}
.match-card{background:#fff;color:var(--warm-ink)}
.match-card:hover{background:var(--cream-2,#FFE8CC)}
.match-card.featured{
  background:var(--oranje);
  color:var(--warm-ink);
  background-image:none;
}
.match-card.featured:hover{background:var(--oranje-2)}
.match-card.featured::before{background:var(--warm-ink);width:5px}
.match-date{color:rgba(26,15,8,.65)}
.match-card.featured .match-date{color:rgba(26,15,8,.85)}
.match-time{color:var(--warm-ink)}
.match-card.featured .match-time{color:var(--warm-ink)}
.team{color:var(--warm-ink)}
.match-vs{color:rgba(26,15,8,.6)}
.match-card.featured .match-vs{color:rgba(26,15,8,.78)}
.match-tag{
  border:1.5px solid var(--warm-ink);
  color:var(--warm-ink);font-weight:600;
}
.match-card.featured .match-tag{
  background:var(--warm-ink);color:var(--oranje);border-color:var(--warm-ink);
}
.match-meta{color:rgba(26,15,8,.6)}
.match-meta .open{color:var(--oranje-deep);font-weight:700}
.match-card.featured .match-meta{color:rgba(26,15,8,.8)}
.match-card.featured .match-meta .open{color:var(--warm-ink)}

/* ===== Ervaring (experience) — back to oranje with chunky blocks ===== */
.section#ervaring{
  background:var(--oranje);
  color:var(--warm-ink);
  border-bottom:3px solid var(--warm-ink);
}
#ervaring .section-num{color:var(--warm-ink);font-weight:700}
#ervaring .section-title{color:var(--warm-ink)}
#ervaring .section-title .oranje{color:var(--warm-cream)}
#ervaring .section-lede{color:rgba(26,15,8,.78)}
#ervaring .exp-photo{
  border:3px solid var(--warm-ink);
  box-shadow:10px 10px 0 var(--warm-ink);
  background:var(--warm-ink);
}
#ervaring .exp-list{border-top:2px solid var(--warm-ink)}
#ervaring .exp-item{border-bottom:2px solid var(--warm-ink)}
#ervaring .exp-item .num{color:var(--warm-ink);font-weight:700}
#ervaring .exp-item h3{color:var(--warm-ink)}
#ervaring .exp-item p{color:rgba(26,15,8,.78)}

/* ===== Team band — cream interlude ===== */
.team-band{
  background:var(--warm-cream);
  color:var(--warm-ink);
  border-bottom:3px solid var(--warm-ink);
}
.team-band::before{
  background-image:radial-gradient(circle at 1px 1px, rgba(229,80,10,.22) 1px, transparent 1.5px);
}
.team-band-eyebrow{color:var(--oranje-deep);font-weight:700}
.team-band-title{color:var(--warm-ink)}
.team-band-title .oranje{color:var(--oranje)}
.team-band-sub{color:rgba(26,15,8,.72)}

/* ===== Locatie — cream with chunky offset card ===== */
.section#locatie{background:var(--oranje);color:var(--warm-ink);border-bottom:3px solid var(--warm-ink)}
#locatie .section-num{color:var(--warm-ink);font-weight:700}
#locatie .section-title{color:var(--warm-ink)}
#locatie .section-title .oranje{color:var(--warm-cream)}
.loc-card{
  border:3px solid var(--warm-ink);
  background:var(--warm-cream);
  box-shadow:10px 10px 0 var(--warm-ink);
  padding:40px 36px;
}
.loc-card h3{color:var(--warm-ink)}
.loc-row{border-top:1.5px solid var(--warm-ink)}
.loc-row .k{color:var(--oranje-deep);font-weight:700}
.loc-row .v{color:var(--warm-ink)}
.loc-row .v a{color:var(--warm-ink)}
.sock{color:var(--warm-ink);border-bottom:2px solid var(--warm-ink)}
.sock:hover{color:var(--oranje-deep);border-color:var(--oranje-deep)}

/* ===== FAQ — cream ===== */
.section#faq{background:var(--warm-cream);color:var(--warm-ink);border-bottom:3px solid var(--warm-ink)}
#faq .section-num{color:var(--oranje-deep);font-weight:700}
#faq .section-title{color:var(--warm-ink)}
#faq .section-title .oranje{color:var(--oranje)}
.faq-item{border-top:2px solid var(--warm-ink)}
.faq-item:last-child{border-bottom:2px solid var(--warm-ink)}
.faq-q{color:var(--warm-ink)}
.faq-q .plus{
  width:40px;height:40px;
  border:2px solid var(--warm-ink);background:transparent;color:var(--warm-ink);
  font-size:20px;
}
.faq-item[open] .plus{background:var(--warm-ink);color:var(--oranje);border-color:var(--warm-ink)}
.faq-a{color:rgba(26,15,8,.78)}
.faq-a a{color:var(--oranje-deep) !important;font-weight:700}

/* ===== Final CTA — DARK contrast moment ===== */
.final{
  background:var(--warm-ink);
  color:var(--oranje);
}
.final::before{
  background:radial-gradient(ellipse at 50% 50%, rgba(255,106,31,.25), transparent 60%);
  background-image:radial-gradient(ellipse at 50% 50%, rgba(255,106,31,.25), transparent 60%);
}
.final h2{color:var(--oranje)}
.final h2 .outline{-webkit-text-stroke:2.5px var(--oranje);color:transparent}
.final p{color:rgba(255,247,236,.85)}
.final .btn-primary{
  background:var(--oranje);color:var(--warm-ink);
  box-shadow:0 8px 0 var(--oranje-deep);
}
.final .btn-primary:hover{background:var(--oranje-2);box-shadow:0 10px 0 var(--oranje-deep)}
.final .btn-primary .arrow{background:var(--warm-ink);color:var(--oranje)}

/* ===== Footer — deep oranje ===== */
.footer{
  background:var(--oranje-deep);
  color:var(--warm-cream);
  border-top:3px solid var(--warm-ink);
}
.footer p{color:rgba(255,247,236,.85)}
.footer .footer-logo{filter:none}     /* show original colored logo, no longer all-white */
.footer-name{color:var(--warm-cream)}
.footer-links a{color:var(--warm-cream);font-weight:700}
.footer-links a:hover{color:var(--warm-ink)}

/* Lucky brand logo (extra image next to "Supportershome van Oranje") */
.brand-logo-lucky{
  height:44px;width:auto;display:block;
  filter:drop-shadow(0 2px 4px rgba(26,15,8,.18));
}
@media (max-width:780px){ .brand-logo-lucky{height:32px} }
@media (max-width:520px){ .brand-logo-lucky{height:28px} }   /* stays visible, just smaller */

.footer-logo-lucky{
  height:56px;width:auto;
  filter:none !important;
  margin-left:8px;
  align-self:center;
}
@media (max-width:640px){ .footer-logo-lucky{height:44px} }

/* ===== Section dividers (full-bleed) get a stronger line ===== */
.section{border-bottom:3px solid var(--warm-ink)}

/* ===== Mobile CTA — dark on oranje ===== */
.mobile-cta a{
  background:var(--warm-ink);color:var(--oranje);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 0 2px var(--oranje);
}
.mobile-cta a .arrow{background:var(--oranje);color:var(--warm-ink)}