/*
 * Het België van Morgen — landingspagina
 * Alle regels zijn gescoped onder .hbvm zodat er niets van het thema
 * van allezaken.be (header, footer, menu) wordt overschreven.
 */

.hbvm{
  --navy:#0B1E3C;
  --navy-deep:#071429;
  --paper:#F7F6F1;
  --paper-dim:#EFECE3;
  --ink:#14161A;
  --slate:#5B6472;
  --yellow:#FFD100;
  --red:#C8102E;
  --black:#0B0B0C;
  --line:#E1DED3;
  --line-dark:rgba(255,255,255,.14);
  --max:1180px;

  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

.hbvm *{box-sizing:border-box; margin:0; padding:0;}

@media (prefers-reduced-motion: reduce){
  .hbvm *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

.hbvm a{color:inherit; text-decoration:none;}
.hbvm a:hover{text-decoration:none;}
.hbvm img{max-width:100%; display:block;}
.hbvm ul{list-style:none;}

.hbvm .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
@media (max-width:640px){.hbvm .wrap{padding:0 20px;}}

/* Anker-offset, voor het geval het thema een sticky header heeft */
.hbvm section[id]{scroll-margin-top:120px;}

/* ---- Belgische spine: het signatuurelement ---- */
.hbvm .spine{
  display:inline-flex; flex-direction:column; width:4px; height:26px; border-radius:2px; overflow:hidden;
  margin-right:14px; flex:0 0 auto;
}
.hbvm .spine span{flex:1;}
.hbvm .spine .b{background:var(--black);}
.hbvm .spine .y{background:var(--yellow);}
.hbvm .spine .r{background:var(--red);}
.hbvm .spine.horizontal{flex-direction:row; width:56px; height:4px;}

.hbvm .eyebrow{
  display:flex; align-items:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--slate); margin-bottom:18px;
}
.hbvm .eyebrow.on-dark{color:rgba(255,255,255,.65);}

.hbvm h1,
.hbvm h2,
.hbvm h3{font-family:'Fraunces',serif; font-weight:450; letter-spacing:-.01em; text-transform:none;}

.hbvm .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 24px; border-radius:2px; font-weight:600; font-size:14px;
  border:1px solid transparent; cursor:pointer; transition:all .15s;
  font-family:'Inter',system-ui,sans-serif; line-height:1.2; text-transform:none;
}
.hbvm .btn-primary{background:var(--yellow); color:var(--navy-deep);}
.hbvm .btn-primary:hover, .hbvm .btn-primary:focus-visible{background:#fff; color:var(--navy-deep);}
.hbvm .btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.hbvm .btn-ghost:hover, .hbvm .btn-ghost:focus-visible{border-color:#fff; color:#fff;}
.hbvm a:focus-visible, .hbvm button:focus-visible{outline:2px solid var(--yellow); outline-offset:2px;}

/* ---- HERO ---- */
.hbvm .hero{
  background:
    radial-gradient(ellipse 900px 500px at 82% -10%, rgba(255,209,0,.10), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff;
  padding:96px 0 88px;
  position:relative; overflow:hidden;
}
.hbvm .hero::after{
  content:""; position:absolute; right:-6%; top:12%; width:520px; height:520px;
  border:1px solid rgba(255,255,255,.06); border-radius:50%;
}
.hbvm .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:end;}
@media (max-width:900px){.hbvm .hero-grid{grid-template-columns:1fr; gap:40px;}}
.hbvm .hero h1{
  font-size:clamp(40px,6vw,74px); line-height:.98; color:#fff; max-width:14ch;
}
.hbvm .hero h1 em{font-style:italic; color:var(--yellow); font-weight:450;}
.hbvm .hero .sub{
  font-family:'Fraunces',serif; font-style:italic; font-weight:400;
  font-size:clamp(20px,2.4vw,28px); color:rgba(255,255,255,.82); margin-top:22px; max-width:26ch;
}
.hbvm .hero-cta{display:flex; gap:14px; margin-top:36px; flex-wrap:wrap;}
.hbvm .hero-side p{color:rgba(255,255,255,.68); font-size:16px; max-width:38ch; margin-bottom:24px;}
.hbvm .hero-side .central-q{
  border-left:3px solid var(--yellow); padding-left:20px;
  font-family:'Fraunces',serif; font-size:19px; line-height:1.4; color:#fff;
}

/* ---- WAAROM DEZE SPECIAL + KPI ---- */
.hbvm .why{padding:88px 0 96px; background:var(--paper);}
.hbvm .why-top{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; margin-bottom:56px;}
@media (max-width:800px){.hbvm .why-top{grid-template-columns:1fr;}}
.hbvm .why h2{font-size:clamp(28px,3.6vw,40px);}
.hbvm .why-copy p{font-size:17px; color:#2b2e33; max-width:52ch;}
.hbvm .kpi-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:760px){.hbvm .kpi-grid{grid-template-columns:repeat(2,1fr);}}
.hbvm .kpi{background:var(--paper); padding:28px 22px;}
.hbvm .kpi .num{font-family:'IBM Plex Mono',monospace; font-size:clamp(28px,3.4vw,38px); font-weight:500; color:var(--navy);}
.hbvm .kpi .label{font-size:13px; color:var(--slate); margin-top:8px; line-height:1.35;}
.hbvm .kpi .src{font-size:11px; color:#9a9587; margin-top:10px; font-family:'IBM Plex Mono',monospace;}

/* ---- CENTRALE VRAAG ---- */
.hbvm .central-band{background:var(--black); color:#fff; padding:80px 0; position:relative;}
.hbvm .central-band .wrap{display:flex; align-items:center; gap:28px;}
.hbvm .central-band h2{font-size:clamp(26px,4.2vw,46px); line-height:1.15; max-width:20ch; font-weight:450; color:#fff;}
.hbvm .central-band h2 span{color:var(--yellow);}

/* ---- PARTIJSECTIES ---- */
.hbvm .section{padding:96px 0;}
.hbvm .section-head{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:44px; gap:24px; flex-wrap:wrap;}
.hbvm .section-head h2{font-size:clamp(28px,3.4vw,38px);}
.hbvm .section-head p{color:var(--slate); font-size:15px; max-width:40ch;}

.hbvm .card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media (max-width:900px){.hbvm .card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.hbvm .card-grid{grid-template-columns:1fr;}}

.hbvm .party-card{
  background:#fff; border:1px solid var(--line); padding:28px 24px; position:relative;
  display:flex; flex-direction:column; gap:14px; transition:border-color .15s, transform .15s;
}
.hbvm .party-card:hover{border-color:var(--navy); transform:translateY(-2px);}
.hbvm .logo-badge{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:600; font-size:16px; color:#fff; flex:0 0 auto;
}
.hbvm .logo-badge.len3{font-size:13px; letter-spacing:-.01em;}
.hbvm .logo-badge.len4{font-size:11px; letter-spacing:-.02em;}
.hbvm .regional .logo-badge.len3{font-size:11px;}
.hbvm .card-top{display:flex; align-items:center; gap:14px;}
.hbvm .party-name{font-family:'Fraunces',serif; font-size:19px; font-weight:600;}
.hbvm .party-region{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--slate);}
.hbvm .party-pos{font-size:14px; color:#2b2e33; border-top:1px solid var(--line); padding-top:14px;}
.hbvm .party-priorities{list-style:none; display:flex; flex-direction:column; gap:6px;}
.hbvm .party-priorities li{font-size:13px; color:#3a3e45; padding-left:14px; position:relative;}
.hbvm .party-priorities li::before{content:"—"; position:absolute; left:0; color:var(--red);}
.hbvm .card-link{font-size:13px; font-weight:600; color:var(--navy); margin-top:auto; padding-top:6px;}
.hbvm .card-link::after{content:" →";}

.hbvm .regional .card-grid{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.hbvm .regional .card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.hbvm .regional .card-grid{grid-template-columns:1fr;}}
.hbvm .regional .party-card{padding:22px 20px; gap:10px;}
.hbvm .regional .logo-badge{width:42px; height:42px; font-size:13px;}
.hbvm .regional .party-name{font-size:16px;}

.hbvm .movements-strip{display:flex; flex-wrap:wrap; gap:12px;}
.hbvm .movement-chip{
  border:1px solid var(--line); background:#fff; padding:14px 18px; font-size:13px;
  display:flex; align-items:center; gap:10px; flex:1 1 220px;
}
.hbvm .movement-chip .dot{width:8px; height:8px; border-radius:50%; background:var(--slate); flex:0 0 auto;}
.hbvm .movement-chip b{font-family:'Fraunces',serif; font-weight:600; font-size:14px;}
.hbvm .movement-note{margin-top:20px; font-size:13px; color:var(--slate); max-width:60ch;}

.hbvm .bg-dim{background:var(--paper-dim);}

/* ---- THEMA'S ---- */
.hbvm .theme-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line);}
@media (max-width:900px){.hbvm .theme-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hbvm .theme-grid{grid-template-columns:1fr;}}
.hbvm .theme-card{background:#fff; padding:26px 22px; min-height:170px; display:flex; flex-direction:column; gap:10px;}
.hbvm .theme-card .idx{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--red); letter-spacing:.08em;}
.hbvm .theme-card h3{font-size:17px; font-weight:600; line-height:1.25;}
.hbvm .theme-card p{font-size:13px; color:var(--slate); line-height:1.4;}

/* ---- WAAROM DEZE SPECIAL (donkere band) ---- */
.hbvm .whyspecial{background:linear-gradient(180deg,var(--navy-deep),var(--navy)); color:#fff; padding:100px 0;}
.hbvm .whyspecial .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; align-items:center;}
@media (max-width:860px){.hbvm .whyspecial .wrap{grid-template-columns:1fr;}}
.hbvm .whyspecial h2{font-size:clamp(28px,3.6vw,42px); max-width:14ch; color:#fff;}
.hbvm .whyspecial p{color:rgba(255,255,255,.75); font-size:16px; max-width:56ch; margin-bottom:16px;}

/* ---- TV-FORMULE ---- */
.hbvm .formule{padding:96px 0;}
.hbvm .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:12px;}
@media (max-width:900px){.hbvm .steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.hbvm .steps{grid-template-columns:1fr;}}
.hbvm .step{border-top:3px solid var(--navy); padding-top:16px;}
.hbvm .step .t{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--red); margin-bottom:10px;}
.hbvm .step h3{font-size:16px; font-weight:600; margin-bottom:8px;}
.hbvm .step p{font-size:13.5px; color:var(--slate); line-height:1.5;}

/* ---- AFSLUITING ---- */
.hbvm .closing{background:var(--black); color:#fff; padding:120px 0 100px; text-align:center; position:relative;}
.hbvm .closing .spine.horizontal{margin:0 auto 30px;}
.hbvm .closing h2{font-size:clamp(30px,5vw,56px); line-height:1.15; max-width:18ch; margin:0 auto 36px; color:#fff;}
.hbvm .closing h2 em{font-style:italic; color:var(--yellow);}
.hbvm .closing-cta{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.hbvm .closing p.note{margin-top:28px; color:rgba(255,255,255,.5); font-size:13px;}

.hbvm ::selection{background:var(--yellow); color:var(--black);}