/* Homepage v3 (hb-hp-*), 5-11-2026 opnieuw ontworpen. */
/* ==========================================================================
   HomeBattery.com — Homepage (hb-hp-*)
   Assumes :root token layer already present sitewide (Fase 1).
   Assumes header (hb-head-*) and footer (hb-foot-*) CSS already present.
   ========================================================================== */

.hb-hp-page,
.hb-hp-page *{ box-sizing:border-box; }

.hb-hp-page{
  font-family:var(--hb-font,"Poppins",system-ui,sans-serif);
  color:var(--hb-grijs,#454645);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.hb-hp-page :where(h1,h2,h3,h4,p,ul,ol,figure){ margin-block:0; }
.hb-hp-page :where(h1,h2,h3){
  font-family:inherit;
  color:var(--hb-zwart,#1F2024);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
}

/* Type scale */
.hb-hp-h1{ font-size:clamp(2.4rem,1.5rem + 3.4vw,3.75rem); line-height:1.08; letter-spacing:-.02em; }
.hb-hp-h2{ font-size:clamp(1.6rem,1.25rem + 1.4vw,2.25rem); }
.hb-hp-h3{ font-size:1.02rem; font-weight:600; line-height:1.4; }
.hb-hp-lead{ font-size:clamp(1.05rem,1rem + .4vw,1.2rem); line-height:1.6; color:var(--hb-grijs,#454645); }
.hb-hp-body{ font-size:.98rem; line-height:1.7; color:var(--hb-grijs,#454645); }
.hb-hp-meta{ font-size:.82rem; color:var(--hb-grijs-licht,#6B6D6B); }

/* A quiet section marker — sentence case, rule instead of a pill, used sparingly */
.hb-hp-kicker{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; font-weight:600; color:var(--hb-groen-donker,#2F7432);
}
.hb-hp-kicker::before{
  content:""; width:18px; height:2px; border-radius:2px;
  background:var(--hb-groen,#67BF61); display:inline-block; flex-shrink:0;
}

/* Layout */
.hb-hp-sec{ padding-block:clamp(56px,7vw,96px); }
.hb-hp-sec--frost{ background:var(--hb-frost,#F7F8F7); }
.hb-hp-sec--mist{ background:var(--hb-mist,#EDF8ED); }
/* Inhoud is altijd een tikje smaller dan de header (logo links, knop rechts): extra inset, op mobiel kleiner */
.hb-hp-wrap{
  width:100%; max-width:var(--hb-max,1200px); margin-inline:auto;
  padding-inline:calc(var(--hb-pad,clamp(20px,5vw,48px)) + clamp(4px,1vw,12px));
}
.hb-hp-wrap--narrow{ max-width:640px; text-align:center; margin-inline:auto; }

.hb-hp-kop{ display:flex; flex-direction:column; gap:12px; max-width:720px; margin-bottom:clamp(28px,3.5vw,48px); }
.hb-hp-kop .hb-hp-body{ font-size:1.02rem; }
.hb-hp-kop--between{ flex-direction:row; align-items:flex-end; justify-content:space-between; max-width:none; flex-wrap:wrap; gap:16px; }
.hb-hp-kop-text{ display:flex; flex-direction:column; gap:12px; max-width:780px; }

.hb-hp-link{
  font-weight:600; font-size:.9rem; color:var(--hb-zwart,#1F2024); text-decoration:underline;
  text-decoration-color:transparent; text-underline-offset:3px; width:fit-content;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.hb-hp-link:hover{ color:var(--hb-groen-donker,#2F7432); text-decoration-color:currentColor; }

/* Buttons */
.hb-hp-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.hb-hp-btns--mid{ justify-content:center; }
.hb-hp-btn{
  font-family:inherit; font-weight:600; font-size:.95rem; padding:.85rem 1.6rem;
  border-radius:var(--hb-radius-sm,10px); border:2px solid transparent; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; line-height:1.2;
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.hb-hp-btn--primary{ background:var(--hb-groen,#67BF61); color:#fff; border-color:var(--hb-groen,#67BF61); box-shadow:0 1px 2px rgba(31,32,36,.08); }
.hb-hp-btn--primary:hover{ background:var(--hb-groen-donker,#2F7432); border-color:var(--hb-groen-donker,#2F7432); transform:translateY(-2px); box-shadow:0 12px 22px -10px rgba(62,140,57,.5); }
.hb-hp-btn--outline{ background:transparent; color:var(--hb-zwart,#1F2024); border-color:var(--hb-lijn,#E6E8E6); }
.hb-hp-btn--outline:hover{ border-color:var(--hb-zwart,#1F2024); background:var(--hb-frost,#F7F8F7); }
.hb-hp-btn--dark{ background:var(--hb-zwart,#1F2024); color:#fff; border-color:var(--hb-zwart,#1F2024); }
.hb-hp-btn--dark:hover{ background:#000; transform:translateY(-2px); }

/* Checklist with a drawn checkmark (no glyphs, no extra SVG) */
.hb-hp-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.hb-hp-list-item{ position:relative; padding-left:27px; font-size:.94rem; color:var(--hb-grijs,#454645); }
.hb-hp-list-item::before{ content:""; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%; background:var(--hb-mist,#EDF8ED); }
.hb-hp-list-item::after{ content:""; position:absolute; left:4.5px; top:6px; width:8px; height:5px; border-left:2px solid var(--hb-groen-donker,#2F7432); border-bottom:2px solid var(--hb-groen-donker,#2F7432); transform:rotate(-45deg); }

/* ---------------------------------------------------------------------- */
/* HERO                                                                   */
/* ---------------------------------------------------------------------- */
.hb-hp-hero{ padding-block:clamp(32px,5vw,64px) clamp(28px,4vw,44px); background:linear-gradient(180deg,var(--hb-mist,#EDF8ED) 0,#fff 78%); }
.hb-hp-hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; column-gap:clamp(32px,5vw,64px); align-items:center; }
.hb-hp-hero-content{ display:flex; flex-direction:column; gap:20px; max-width:580px; }
.hb-hp-hero-ctas{ margin-top:4px; }
.hb-hp-hero-media{ position:relative; }
.hb-hp-hero-img{
  width:100%; aspect-ratio:4/3; border-radius:24px;
  background-size:cover; background-position:center; background-color:var(--hb-lijn,#E6E8E6);
  box-shadow:0 30px 60px -30px rgba(31,32,36,.45);
}
.hb-hp-hero-card{
  position:static; width:100%; margin-top:16px; background:#fff; border-radius:18px; padding:18px 22px 16px;
  box-shadow:0 12px 30px -18px rgba(31,32,36,.3); border:1px solid var(--hb-lijn,#E6E8E6); display:flex; flex-direction:column; gap:12px;
}
.hb-hp-hero-card .hb-hp-calc-bar-label{ width:112px; white-space:nowrap; }
.hb-hp-hero-card .hb-hp-calc-bar-value{ width:48px; }

/* Keuzehulp onder de hero */
.hb-hp-intent{ margin-top:clamp(28px,4vw,44px); }
.hb-hp-intent-label{ font-weight:700; color:var(--hb-zwart,#1F2024); font-size:.95rem; margin-bottom:12px; }
.hb-hp-intent-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.hb-hp-intent-card{
  display:flex; flex-direction:column; gap:4px; padding:18px 20px; background:#fff; border:1px solid var(--hb-lijn,#E6E8E6); border-radius:16px;
  text-decoration:none; position:relative; transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.hb-hp-intent-card::after{ content:"→"; position:absolute; right:18px; top:18px; color:var(--hb-groen-donker,#2F7432); font-weight:700; transition:transform .15s ease; }
.hb-hp-intent-card:hover{ border-color:var(--hb-groen,#67BF61); box-shadow:0 16px 30px -18px rgba(62,140,57,.5); transform:translateY(-3px); }
.hb-hp-intent-card:hover::after{ transform:translateX(3px); }
.hb-hp-intent-t{ font-weight:700; color:var(--hb-zwart,#1F2024); font-size:1rem; line-height:1.3; padding-right:22px; }
.hb-hp-intent-d{ font-size:.85rem; color:var(--hb-grijs,#454645); line-height:1.45; }

/* Feitenstrook (echte aantallen) */
.hb-hp-facts{ border-block:1px solid var(--hb-lijn,#E6E8E6); background:#fff; }
.hb-hp-facts-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px 24px; padding-block:22px; }
.hb-hp-fact{ display:flex; align-items:baseline; gap:10px; margin:0; font-size:.9rem; color:var(--hb-grijs,#454645); line-height:1.3; }
.hb-hp-fact strong{ font-size:1.7rem; font-weight:700; color:var(--hb-groen-donker,#2F7432); letter-spacing:-.02em; }

/* ---------------------------------------------------------------------- */
/* WHY US: vier kaarten met icoonvlak                                     */
/* ---------------------------------------------------------------------- */
.hb-hp-why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--hb-gap,24px); }
.hb-hp-why-item{
  display:flex; flex-direction:column; gap:10px; padding:clamp(20px,2.2vw,26px);
  background:var(--hb-frost,#F7F8F7); border:1px solid transparent; border-radius:var(--hb-radius,16px);
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.hb-hp-why-item:hover{ background:#fff; border-color:var(--hb-lijn,#E6E8E6); box-shadow:var(--hb-schaduw-lg,0 16px 40px -20px rgba(31,32,36,.30)); transform:translateY(-3px); }
.hb-hp-why-icon{
  width:48px; height:48px; border-radius:14px; margin-bottom:6px; position:relative;
  background:var(--hb-mist,#EDF8ED);
}
.hb-hp-why-icon::after{
  content:""; position:absolute; inset:12px; background-color:var(--hb-groen-donker,#2F7432);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-image:var(--ic); mask-image:var(--ic);
}
.hb-hp-why-icon--shield{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 20 5v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5l8-3z'/%3E%3C/svg%3E"); }
.hb-hp-why-icon--clock{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 2a8 8 0 110 16 8 8 0 010-16z'/%3E%3Crect x='11' y='6' width='2' height='7' rx='1'/%3E%3Crect x='12' y='11' width='6' height='2' rx='1' transform='rotate(45 12 11)'/%3E%3C/svg%3E"); }
.hb-hp-why-icon--pin{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C7.6 2 4 5.6 4 10c0 6 8 12 8 12s8-6 8-12c0-4.4-3.6-8-8-8z'/%3E%3C/svg%3E"); }
.hb-hp-why-icon--target{ --ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 3a7 7 0 110 14 7 7 0 010-14z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.hb-hp-why-title{ font-weight:700; color:var(--hb-zwart,#1F2024); font-size:1.05rem; line-height:1.3; }
.hb-hp-why-item .hb-hp-body{ font-size:.93rem; line-height:1.6; }

/* ---------------------------------------------------------------------- */
/* CAPACITY QUICK-SELECT: zeven tegels                                    */
/* ---------------------------------------------------------------------- */
.hb-hp-cap-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:12px; }
.hb-hp-cap-chip{
  display:flex; align-items:baseline; justify-content:center; gap:4px; padding:1.15rem .5rem;
  border-radius:var(--hb-radius,16px); background:var(--hb-wit,#fff);
  border:1px solid var(--hb-lijn,#E6E8E6); color:var(--hb-zwart,#1F2024); text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.hb-hp-cap-chip-n{ font-weight:700; font-size:1.5rem; line-height:1; letter-spacing:-.01em; }
.hb-hp-cap-chip-unit{ font-size:.8rem; font-weight:500; color:var(--hb-grijs-licht,#6B6D6B); transition:color .2s ease; }
.hb-hp-cap-chip:hover{ border-color:var(--hb-groen,#67BF61); background:var(--hb-groen,#67BF61); color:#fff; transform:translateY(-3px); box-shadow:0 14px 24px -14px rgba(62,140,57,.55); }
.hb-hp-cap-chip:hover .hb-hp-cap-chip-unit{ color:rgba(255,255,255,.85); }
.hb-hp-cap-more{ margin-top:22px; }

/* ---------------------------------------------------------------------- */
/* CALCULATOR SPLIT                                                       */
/* ---------------------------------------------------------------------- */
.hb-hp-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); align-items:center; }
.hb-hp-split-text{ display:flex; flex-direction:column; gap:18px; }
.hb-hp-split-text .hb-hp-btns{ margin-top:8px; }

.hb-hp-calc-card{
  background:var(--hb-wit,#fff); border:1px solid var(--hb-lijn,#E6E8E6); border-radius:20px;
  padding:clamp(24px,3vw,36px); box-shadow:0 24px 50px -28px rgba(31,32,36,.35);
  display:flex; flex-direction:column; gap:24px; position:relative; overflow:hidden;
}
.hb-hp-calc-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--hb-groen,#67BF61),var(--hb-groen-licht,#7FCC79)); }
.hb-hp-calc-title{ font-weight:700; color:var(--hb-zwart,#1F2024); font-size:1rem; }
.hb-hp-calc-bars{ display:flex; flex-direction:column; gap:14px; }
.hb-hp-calc-bar-row{ display:flex; align-items:center; gap:12px; }
.hb-hp-calc-bar-label{ width:120px; flex-shrink:0; font-size:.82rem; color:var(--hb-grijs-licht,#6B6D6B); }
.hb-hp-calc-bar-track{ flex:1; height:12px; border-radius:var(--hb-radius-pill,999px); background:var(--hb-frost,#F7F8F7); overflow:hidden; }
.hb-hp-calc-bar-fill{ height:100%; border-radius:inherit; display:block; }
.hb-hp-calc-bar-fill--full{ width:100%; background:#D5D8D5; }
.hb-hp-calc-bar-fill--reduced{ width:46%; background:var(--hb-groen,#67BF61); }
.hb-hp-calc-bar-value{ width:56px; text-align:right; flex-shrink:0; font-weight:700; font-size:.92rem; color:var(--hb-zwart,#1F2024); }
.hb-hp-calc-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.hb-hp-result-row{ display:flex; flex-direction:column-reverse; gap:2px; padding:14px 14px; background:var(--hb-mist,#EDF8ED); border-radius:12px; }
.hb-hp-result-l{ font-size:.74rem; line-height:1.3; color:var(--hb-grijs,#454645); }
.hb-hp-result-v{ font-weight:700; color:var(--hb-groen-donker,#2F7432); font-size:1.3rem; line-height:1.2; }
.hb-hp-calc-note{ font-size:.76rem; color:var(--hb-grijs-licht,#6B6D6B); }

/* ---------------------------------------------------------------------- */
/* VIDEO: poster met afspeelknop, YouTube laadt pas na een klik           */
/* ---------------------------------------------------------------------- */
.hb-hp-split--video{ grid-template-columns:.8fr 1.2fr; }
.hb-hp-video-col{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.hb-hp-video{
  position:relative; aspect-ratio:16/9; width:100%; border-radius:20px; overflow:hidden; background:var(--hb-zwart,#1F2024);
  box-shadow:0 24px 50px -28px rgba(31,32,36,.5);
}
.hb-hp-video-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:#fff; text-decoration:none;
  background:var(--hb-zwart,#1F2024);
  transition:transform .4s ease;
}
.hb-hp-video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hb-hp-video-play::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(31,32,36,.1),rgba(31,32,36,.5)); }
.hb-hp-video-btn,.hb-hp-video-label{ position:relative; }
.hb-hp-video-btn{
  width:76px; height:76px; border-radius:50%; background:var(--hb-groen,#67BF61); position:relative;
  box-shadow:0 0 0 10px rgba(255,255,255,.22),0 12px 28px -8px rgba(0,0,0,.5);
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
}
.hb-hp-video-btn::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-35%,-50%); border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #fff; }
.hb-hp-video-label{ font-weight:600; font-size:.9rem; letter-spacing:.01em; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.hb-hp-video-play:hover .hb-hp-video-btn{ transform:scale(1.08); background:var(--hb-groen-donker,#2F7432); box-shadow:0 0 0 14px rgba(255,255,255,.25),0 12px 28px -8px rgba(0,0,0,.5); }
.hb-hp-video-play:focus-visible{ outline:3px solid #fff; outline-offset:-6px; }
.hb-hp-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.hb-hp-video.is-playing .hb-hp-video-play{ display:none; }
.hb-hp-video-alt{ font-size:.85rem; }

/* ---------------------------------------------------------------------- */
/* NEWS CARDS                                                             */
/* ---------------------------------------------------------------------- */
.hb-hp-news-list{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hb-gap,24px); list-style:none; margin:0; padding:0; }
.hb-hp-news-card{
  display:flex; flex-direction:column; border-radius:var(--hb-radius,16px); overflow:hidden; list-style:none; position:relative;
  background:var(--hb-wit,#fff); border:1px solid var(--hb-lijn,#E6E8E6);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hb-hp-news-card:hover{ box-shadow:var(--hb-schaduw-lg,0 16px 40px -20px rgba(31,32,36,.30)); transform:translateY(-4px); border-color:var(--hb-groen,#67BF61); }
.hb-hp-news-img{ margin:0; aspect-ratio:16/10; overflow:hidden; display:block; background:var(--hb-mist,#EDF8ED); flex-shrink:0; }
.hb-hp-news-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hb-hp-news-card:hover .hb-hp-news-img img{ transform:scale(1.04); }
.hb-hp-news-body{ display:flex; flex-direction:column; gap:10px; padding:20px 22px 22px; flex:1; }
.hb-hp-news-meta{ display:flex; align-items:center; gap:10px; font-size:.78rem; color:var(--hb-grijs-licht,#6B6D6B); }
.hb-hp-news-tag{ font-weight:700; color:var(--hb-groen-donker,#2F7432); background:var(--hb-mist,#EDF8ED); padding:.15rem .65rem; border-radius:999px; }
.hb-hp-news-title{ font-weight:700; font-size:1.02rem; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.hb-hp-news-title a{ color:var(--hb-zwart,#1F2024); text-decoration:none; }
.hb-hp-news-title a::after{ content:""; position:absolute; inset:0; }
.hb-hp-news-title a:focus-visible{ outline:none; }
.hb-hp-news-card:focus-within{ outline:3px solid var(--hb-groen,#67BF61); outline-offset:2px; }
.hb-hp-news-more{ margin-top:auto; padding-top:4px; font-weight:600; font-size:.88rem; color:var(--hb-groen-donker,#2F7432); }
.hb-hp-news-more::after{ content:"→"; margin-left:6px; display:inline-block; transition:transform .15s ease; }
.hb-hp-news-card:hover .hb-hp-news-more::after{ transform:translateX(3px); }

/* ---------------------------------------------------------------------- */
/* FAQ + Newsletter                                                       */
/* ---------------------------------------------------------------------- */
.hb-hp-faq-wrap{ display:grid; grid-template-columns:1.4fr .9fr; gap:clamp(28px,4vw,64px); align-items:start; }
.hb-hp-faq-main{ display:flex; flex-direction:column; }
.hb-hp-faq-list{ display:flex; flex-direction:column; }
.hb-hp-faq-item{ padding-block:22px; border-top:1px solid var(--hb-lijn,#E6E8E6); }
.hb-hp-faq-list .hb-hp-faq-item:first-child{ border-top:0; padding-top:0; }
.hb-hp-faq-list .hb-hp-faq-item:last-child{ border-bottom:1px solid var(--hb-lijn,#E6E8E6); }
.hb-hp-faq-q{ font-weight:700; color:var(--hb-zwart,#1F2024); font-size:1.02rem; margin-bottom:6px; line-height:1.4; }
.hb-hp-faq-a{ font-size:.94rem; color:var(--hb-grijs,#454645); line-height:1.65; max-width:620px; }

.hb-hp-newsletter-card{
  background:var(--hb-mist,#EDF8ED); border:1px solid rgba(62,140,57,.18);
  border-radius:20px; padding:clamp(24px,3vw,34px); display:flex; flex-direction:column; gap:12px;
  position:sticky; top:110px;
}
.hb-hp-newsletter-card .hb-hp-h3{ font-size:1.3rem; }
.hb-hp-newsletter-card :where(.gform_wrapper, .gform_wrapper.gravity-theme){ font-family:inherit; margin:0; }
.hb-hp-newsletter-card .gfield{ margin-bottom:14px; }
.hb-hp-newsletter-card .gfield_label{ font-size:.82rem; font-weight:600; color:var(--hb-zwart,#1F2024); margin-bottom:5px; display:block; }
.hb-hp-newsletter-card input[type="text"],
.hb-hp-newsletter-card input[type="email"]{
  width:100%; padding:.8rem .95rem; border:1px solid var(--hb-lijn,#E6E8E6); border-radius:var(--hb-radius-sm,10px);
  font-family:inherit; font-size:.94rem; background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.hb-hp-newsletter-card input[type="text"]:focus,
.hb-hp-newsletter-card input[type="email"]:focus{ outline:none; border-color:var(--hb-groen,#67BF61); box-shadow:0 0 0 3px rgba(103,191,97,.25); }
.hb-hp-newsletter-card .gfield_consent_label{ font-size:.78rem; color:var(--hb-grijs,#454645); }
.hb-hp-newsletter-card .gform_footer,
.hb-hp-newsletter-card .gform_page_footer{ margin:2px 0 0; padding:0; }
.hb-hp-newsletter-card .gform_button{
  width:100%; background:var(--hb-groen-donker,#2F7432); color:#fff; border:0; border-radius:var(--hb-radius-sm,10px);
  padding:.9rem 1.4rem; font-family:inherit; font-weight:600; font-size:.95rem; cursor:pointer;
  transition:background-color .15s ease,transform .15s ease;
}
.hb-hp-newsletter-card .gform_button:hover{ background:var(--hb-zwart,#1F2024); transform:translateY(-1px); }
.hb-hp-newsletter-card .validation_error,
.hb-hp-newsletter-card .gfield_validation_message{ font-size:.78rem; color:#B3261E; }

/* ---------------------------------------------------------------------- */
/* BOTTOM CTA                                                             */
/* ---------------------------------------------------------------------- */
.hb-hp-cta{
  background:
    radial-gradient(900px 340px at 85% -20%, rgba(255,255,255,.16), transparent 60%),
    radial-gradient(700px 300px at 0% 120%, rgba(0,0,0,.18), transparent 60%),
    var(--hb-groen-donker,#2F7432);
  padding-block:clamp(60px,8vw,104px); text-align:center;
}
.hb-hp-cta .hb-hp-wrap--narrow{ max-width:680px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.hb-hp-cta .hb-hp-btns{ margin-top:14px; }
.hb-hp-cta .hb-hp-h2{ color:#fff; font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem); }
.hb-hp-cta .hb-hp-lead{ color:rgba(255,255,255,.88); }
.hb-hp-cta .hb-hp-btn{ padding:1rem 1.9rem; }
.hb-hp-cta .hb-hp-btn--primary{ background:#fff; color:var(--hb-groen-donker,#2F7432); border-color:#fff; }
.hb-hp-cta .hb-hp-btn--primary:hover{ background:var(--hb-mist,#EDF8ED); border-color:var(--hb-mist,#EDF8ED); box-shadow:0 12px 22px -10px rgba(0,0,0,.35); }
.hb-hp-btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.hb-hp-btn--ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

@media (prefers-reduced-motion:reduce){
  .hb-hp-page *{ transition:none !important; }
  .hb-hp-page *:hover{ transform:none !important; }
}

/* ---------------------------------------------------------------------- */
/* RESPONSIVE                                                             */
/* ---------------------------------------------------------------------- */
@media(max-width:1100px){
  .hb-hp-cap-row{ grid-template-columns:repeat(4,1fr); }
  .hb-hp-facts-row{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:1024px){
  .hb-hp-hero-inner{ grid-template-columns:1fr; row-gap:32px; }
  .hb-hp-intent-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-hp-why-grid{ grid-template-columns:repeat(2,1fr); }
  .hb-hp-split,
  .hb-hp-split--video{ grid-template-columns:1fr; }
  .hb-hp-faq-wrap{ grid-template-columns:1fr; }
  .hb-hp-newsletter-card{ position:static; }
}
@media(max-width:860px){
  .hb-hp-news-list{ grid-template-columns:1fr; }
  .hb-hp-kop--between{ flex-direction:column; align-items:flex-start; }
  .hb-hp-calc-bar-label{ width:96px; }
}
@media(max-width:600px){
  .hb-hp-sec{ padding-block:48px; }
  .hb-hp-why-grid{ grid-template-columns:1fr; gap:12px; }
  .hb-hp-why-item{ display:grid; grid-template-columns:48px 1fr; column-gap:16px; row-gap:2px; align-items:start; }
  .hb-hp-why-icon{ grid-row:1 / span 2; margin:0; }
  .hb-hp-cap-row{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .hb-hp-cap-chip{ padding:.9rem .25rem; flex-direction:column; align-items:center; gap:2px; }
  .hb-hp-cap-chip-n{ font-size:1.25rem; }
  .hb-hp-calc-results{ grid-template-columns:1fr; }
  .hb-hp-result-row{ flex-direction:row-reverse; justify-content:space-between; align-items:baseline; }
  .hb-hp-result-v{ font-size:1.15rem; }
  .hb-hp-calc-bar-row{ flex-wrap:wrap; row-gap:4px; }
  .hb-hp-calc-bar-label{ width:calc(100% - 64px); }
  .hb-hp-calc-bar-value{ order:2; margin-left:auto; }
  .hb-hp-calc-bar-track{ order:3; flex-basis:100%; }
  .hb-hp-btns .hb-hp-btn{ width:100%; }
  .hb-hp-video{ border-radius:16px; }
  .hb-hp-video-btn{ width:64px; height:64px; }
  .hb-hp-news-card{ display:grid; grid-template-columns:116px 1fr; }
  .hb-hp-news-img{ aspect-ratio:auto; height:100%; min-height:140px; }
  .hb-hp-news-body{ padding:14px 16px; gap:6px; }
  .hb-hp-news-title{ font-size:.95rem; -webkit-line-clamp:5; }
  .hb-hp-news-more{ display:none; }
  .hb-hp-news-meta{ flex-wrap:wrap; gap:6px 10px; }
}


/* ---------------------------------------------------------------------- */
/* Homepage v3: populaire vragen, rekenhulp, type-vergelijking, donker blok, merken */
/* ---------------------------------------------------------------------- */
.hb-hp-q-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hb-gap,24px); list-style:none; margin:0; padding:0; }
.hb-hp-q-card{
  position:relative; display:flex; flex-direction:column; border-radius:var(--hb-radius,16px); overflow:hidden; background:#fff;
  border:1px solid var(--hb-lijn,#E6E8E6); transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.hb-hp-q-card:hover{ box-shadow:var(--hb-schaduw-lg,0 16px 40px -20px rgba(31,32,36,.30)); transform:translateY(-4px); border-color:var(--hb-groen,#67BF61); }
.hb-hp-q-img{ margin:0; aspect-ratio:16/9; overflow:hidden; background:var(--hb-mist,#EDF8ED); }
.hb-hp-q-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.hb-hp-q-card:hover .hb-hp-q-img img{ transform:scale(1.04); }
.hb-hp-q-body{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:18px 20px 22px; flex:1; }
.hb-hp-q-tag{ font-size:.76rem; font-weight:700; color:var(--hb-groen-donker,#2F7432); background:var(--hb-mist,#EDF8ED); padding:.15rem .7rem; border-radius:999px; }
.hb-hp-q-title{ font-size:1.05rem; font-weight:700; line-height:1.35; margin:0; }
.hb-hp-q-title a{ color:var(--hb-zwart,#1F2024); text-decoration:none; }
.hb-hp-q-title a::after{ content:""; position:absolute; inset:0; }
.hb-hp-q-card:focus-within{ outline:3px solid var(--hb-groen,#67BF61); outline-offset:2px; }
.hb-hp-q-title a:focus-visible{ outline:none; }

.hb-hp-size{ background:#fff; border:1px solid var(--hb-lijn,#E6E8E6); border-radius:20px; padding:clamp(22px,3vw,34px); box-shadow:0 24px 50px -28px rgba(31,32,36,.3); }
.hb-hp-size-label{ font-weight:700; color:var(--hb-zwart,#1F2024); margin-bottom:16px; }
.hb-hp-size .hb-hp-cap-row{ grid-template-columns:repeat(4,1fr); }

.hb-hp-types{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--hb-gap,24px); }
.hb-hp-type{ display:flex; flex-direction:column; gap:16px; padding:clamp(22px,2.6vw,30px); border:1px solid var(--hb-lijn,#E6E8E6); border-radius:var(--hb-radius,16px); background:#fff; position:relative; overflow:hidden; }
.hb-hp-type::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--hb-groen,#67BF61); }
.hb-hp-type:nth-child(2)::before{ background:var(--hb-oranje,#ECAA15); }
.hb-hp-type:nth-child(3)::before{ background:var(--hb-blauw,#0170B9); }
.hb-hp-type-t{ font-size:1.2rem; font-weight:700; margin:0; }
.hb-hp-type-best{ margin:0; font-size:.9rem; padding:12px 14px; background:var(--hb-frost,#F7F8F7); border-radius:12px; line-height:1.5; }
.hb-hp-type-best strong{ display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em; color:var(--hb-grijs-licht,#6B6D6B); margin-bottom:2px; }
.hb-hp-type-link{ margin-top:auto; }
.hb-hp-type-link::after{ content:" →"; }

.hb-hp-sec--dark{ background:var(--hb-zwart,#1F2024); }
.hb-hp-sec--dark :where(.hb-hp-h2,.hb-hp-why-title){ color:#fff; }
.hb-hp-sec--dark .hb-hp-body{ color:rgba(255,255,255,.78); }
.hb-hp-sec--dark .hb-hp-kicker{ color:var(--hb-groen,#67BF61); }
.hb-hp-sec--dark .hb-hp-why-item{ background:rgba(255,255,255,.06); }
.hb-hp-sec--dark .hb-hp-why-item:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.18); box-shadow:none; }
.hb-hp-sec--dark .hb-hp-why-icon{ background:rgba(103,191,97,.16); }
.hb-hp-sec--dark .hb-hp-why-icon::after{ background-color:var(--hb-groen,#67BF61); }
.hb-hp-sec--dark .hb-hp-link{ color:#fff; text-decoration-color:rgba(255,255,255,.4); }
.hb-hp-sec--dark .hb-hp-link:hover{ color:var(--hb-groen,#67BF61); }
.hb-hp-trust-links{ display:flex; flex-wrap:wrap; gap:12px 28px; margin:clamp(24px,3vw,36px) 0 0; }

.hb-hp-brands{ display:flex; flex-wrap:wrap; gap:10px; }
.hb-hp-brand{
  padding:.65rem 1.15rem; border-radius:999px; background:#fff; border:1px solid var(--hb-lijn,#E6E8E6); color:var(--hb-zwart,#1F2024);
  font-weight:600; font-size:.92rem; text-decoration:none; transition:border-color .2s ease,background-color .2s ease,color .2s ease,transform .2s ease;
}
.hb-hp-brand:hover{ background:var(--hb-groen-donker,#2F7432); border-color:var(--hb-groen-donker,#2F7432); color:#fff; transform:translateY(-2px); }

@media(max-width:600px){
  .hb-hp-hero-img{ aspect-ratio:16/10; }
  .hb-hp-intent-grid{ grid-template-columns:1fr; gap:10px; }
  .hb-hp-q-grid{ grid-template-columns:1fr; gap:14px; }
  .hb-hp-q-card{ display:grid; grid-template-columns:110px 1fr; }
  .hb-hp-q-img{ aspect-ratio:auto; height:100%; min-height:110px; }
  .hb-hp-q-body{ padding:14px 16px; gap:6px; }
  .hb-hp-q-title{ font-size:.95rem; }
  .hb-hp-facts-row{ gap:10px 14px; }
  .hb-hp-fact{ flex-direction:column; gap:0; }
  .hb-hp-fact strong{ font-size:1.4rem; }
}

/* Tablet: staat bewust onderaan, zodat het de basisregels hierboven overschrijft */
@media(max-width:1024px){
  .hb-hp-q-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hb-hp-types{ grid-template-columns:1fr; }
  .hb-hp-size .hb-hp-cap-row{ grid-template-columns:repeat(4,1fr); }
}
@media(max-width:600px){
  .hb-hp-q-grid{ grid-template-columns:1fr; }
}

/* ---------- Uitlijning (5-11-2026): gelijke blokken netjes naast elkaar, tekst gecentreerd ---------- */
.hb-hp-facts-row{ align-items:stretch; }
.hb-hp-fact{ justify-content:center; align-items:center; text-align:left; }
.hb-hp-size .hb-hp-cap-row{ grid-template-columns:repeat(12,minmax(0,1fr)); }
.hb-hp-size .hb-hp-cap-chip{ grid-column:span 3; }
.hb-hp-size .hb-hp-cap-chip:nth-child(n+5){ grid-column:span 4; }
.hb-hp-type .hb-hp-list{ flex:1; }
.hb-hp-brands{ display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:12px; }
.hb-hp-brand{ text-align:center; display:flex; align-items:center; justify-content:center; }
@media (max-width:640px){
  .hb-hp-fact{ align-items:center; text-align:center; }
  .hb-hp-brands{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
}
.hb-hp-fact{ flex-direction:column; gap:2px; text-align:center; }
.hb-hp-fact strong{ font-size:1.8rem; line-height:1.1; }
.hb-hp-list-item::before{ top:4px; } .hb-hp-list-item::after{ top:8px; }
.hb-hp-fact{ justify-content:flex-start; }