/* ============================================================
   altilia.nl — basislaag "Rendementmakers" (brochure-huisstijl)
   Eén lichte wereld, bewust: crème canvas, sage-panelen, inkt-koppen.
   ============================================================ */
:root{
  /* canvas & vlakken */
  --canvas:#F7F6F1; --paper:#FFFFFF; --veld:#E9F0E6; --veld-2:#DFEEDD; --veld-3:#D0E3CC;
  /* merk */
  --sage:#A2C7A1; --actie:#6FA071; --actie-hover:#5F8A5E;
  /* vlakken met witte tekst: dieper sage, 4,8:1 met wit (WCAG AA); --actie blijft voor accenten */
  --actie-vlak:#507D53; --actie-vlak-hover:#436B46; --sage-diep:#4C6F4C; --sage-zacht:#F2F7F0;
  --blauw:#3A64A8; --blauw-diep:#21468B; --blauw-zacht:#EEF3FA;
  --vlag-rood:#AE1C28; --vlag-blauw:#21468B;
  /* tekst */
  --inkt:#191C18; --tekst:#33322C; --tekst-2:#5F5D54; --muted:#7E7C71; --muted-2:#A9A69A;
  /* lijnen */
  --lijn:#E5E3D8; --lijn-2:#D8D5C6; --lijn-sage:#C9DCCB;
  /* energie-datapalet (alleen in meerreeksen-grafieken) */
  --zon:#C88104; --net:#2E6BC6; --batterij:#1E9E6E; --huis:#C2542A;
  /* vorm */
  --r-paneel:32px; --r-kaart:20px; --r-klein:12px; --r-pill:999px;
  --schaduw-kaart:0 0 0 1px var(--lijn); --schaduw-kaart-hover:0 0 0 1px var(--lijn-2),0 10px 24px -12px rgba(62,99,65,.22);
  /* typografie */
  --font:'Poppins',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:'Caveat','Segoe Script','Bradley Hand',cursive;
  --fs-h1:clamp(2.25rem,5.4vw,4.4rem); --fs-h2:clamp(1.75rem,3.3vw,2.75rem); --fs-h3:clamp(1.2rem,1.7vw,1.5rem);
  --fs-lead:clamp(1.05rem,1.35vw,1.25rem); --fs-body:1rem; --fs-sm:.9rem; --fs-xs:.78rem;
  /* maten */
  --max:1200px; --gutter:clamp(16px,4vw,40px); --sectie:clamp(4rem,8vw,7.5rem);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:.6s;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--canvas);color:var(--tekst);font-family:var(--font);font-size:var(--fs-body);line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
strong,b{font-weight:600;color:var(--inkt)}
::selection{background:var(--veld-3);color:var(--inkt)}
:focus-visible{outline:2px solid var(--blauw);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--paper);padding:.5rem 1rem;border-radius:var(--r-pill);box-shadow:var(--schaduw-kaart);z-index:100}
.skip:focus{left:16px}

/* ---------- typografie ---------- */
h1,h2,h3,h4{margin:0;color:var(--inkt);font-weight:700;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2);line-height:1.12} h3{font-size:var(--fs-h3);letter-spacing:-.01em;line-height:1.25} h4{font-size:1.05rem;letter-spacing:0}
p{margin:0}
.lead{font-size:var(--fs-lead);line-height:1.6;color:var(--tekst-2);max-width:62ch;font-weight:300}
.lead.strak{font-weight:400}
.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sage-diep);line-height:1;margin-bottom:.9rem}
.hand{font-family:var(--hand);font-weight:600;color:var(--actie);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}
.klein{font-size:var(--fs-sm);color:var(--muted)}
.kop{max-width:64ch}
.kop h1,.kop h2{max-width:22ch}
.kop .eyebrow{margin-bottom:1rem}
.kop .lead{margin-top:1.1rem}
.kop.midden{margin-inline:auto;text-align:center}
.kop.midden .lead{margin-inline:auto}

/* ---------- lay-out ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--max));margin-inline:auto}
.sectie{padding-block:var(--sectie)}
.sectie.strak{padding-block:calc(var(--sectie)*.6)}
.paneel{background:var(--veld);border-radius:var(--r-paneel);padding:clamp(1.5rem,4vw,4rem)}
.paneel.wit{background:var(--paper);box-shadow:var(--schaduw-kaart)}
.paneel.blauw{background:var(--blauw-zacht)}
.grid{display:grid;gap:clamp(1rem,2.2vw,1.75rem)}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,5rem);align-items:center}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split{grid-template-columns:1fr}}
@media (max-width:560px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---------- kaarten & pills ---------- */
.kaart{background:var(--paper);border-radius:var(--r-kaart);box-shadow:var(--schaduw-kaart);padding:clamp(1.25rem,2.4vw,1.75rem);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
a.kaart:hover,.kaart.hover:hover{box-shadow:var(--schaduw-kaart-hover);transform:translateY(-2px)}
.pill{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-diep);background:var(--veld-2);border-radius:var(--r-pill);padding:.42rem .8rem;line-height:1}
.pill.wit{background:var(--paper);box-shadow:var(--schaduw-kaart)}
.pill.blauw{color:var(--blauw);background:var(--blauw-zacht)}
.pill.omlijnd{background:transparent;box-shadow:inset 0 0 0 1px var(--lijn-sage)}
.vlag{display:inline-block;width:28px;height:9px;border-radius:2px;overflow:hidden;background:linear-gradient(to bottom,var(--vlag-rood) 0 33.3%,#fff 33.3% 66.6%,var(--vlag-blauw) 66.6% 100%);box-shadow:0 0 0 1px var(--lijn)}

/* ---------- knoppen ---------- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;font-weight:600;font-size:.95rem;line-height:1;padding:.95rem 1.5rem;border-radius:var(--r-pill);transition:background .2s,color .2s,box-shadow .2s,transform .2s var(--ease);white-space:nowrap}
.knop svg{width:18px;height:18px}
.knop.primair{background:var(--actie-vlak);color:#fff}
.knop.primair:hover{background:var(--actie-vlak-hover)}
.knop.secundair{background:var(--paper);color:var(--inkt);box-shadow:var(--schaduw-kaart)}
.knop.secundair:hover{box-shadow:var(--schaduw-kaart-hover)}
.knop.ghost{padding-inline:.25rem;color:var(--sage-diep)}
.knop.ghost:hover{color:var(--inkt)}
.knop.inkt{background:var(--inkt);color:#fff}
.knop.inkt:hover{background:#2c302b}
.knop.groot{padding:1.1rem 1.8rem;font-size:1.02rem}
.knoppen{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}

/* ---------- iconen ---------- */
.ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icoon{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--veld);color:var(--sage-diep)}
.icoon.blauw{background:var(--blauw-zacht);color:var(--blauw)}

/* ---------- media ---------- */
.foto{border-radius:var(--r-kaart);overflow:hidden;background:var(--veld);position:relative}
.foto img,.foto video{width:100%;height:100%;object-fit:cover}
.foto.r-paneel{border-radius:var(--r-paneel)}
.bijschrift{font-size:var(--fs-sm);color:var(--muted);margin-top:.6rem}
.bijschrift .hand{font-size:1.25rem;color:var(--sage-diep)}

/* ---------- beweging ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{transform:translateY(22px);transition:transform var(--dur) var(--ease)}
.js .reveal.in{transform:none}
.js .reveal[data-d="1"]{transition-delay:.08s}.js .reveal[data-d="2"]{transition-delay:.16s}.js .reveal[data-d="3"]{transition-delay:.24s}.js .reveal[data-d="4"]{transition-delay:.32s}.js .reveal[data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{transform:none;transition:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}