/* V3: de hero als twee kolommen op een breed scherm. Tekst links, de machine
   rechts, gekanteld in Y in plaats van X zodat hij als een zwevend paneel naast
   de kop staat en niet als een tafel eronder. Op smalle schermen blijft de
   opbouw van V2 (gestapeld) staan. */
@media (min-width: 1100px) {
  .hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
          align-items: center; column-gap: 28px; max-width: 1280px; margin: 0 auto;
          padding: 64px 40px 110px; }
  .hero .omhulsel { padding: 0; }
  .hero .omhulsel > * { max-width: 560px; }
  .hero h1 .kopregel { max-width: none; }
  .machine__houder { margin: 0; padding: 0; max-width: none; perspective: 1600px; }
  .machine { transform: rotateY(var(--ry, -9deg)) rotateX(var(--rx, 3deg))
                        translateY(calc(var(--sc,0) * -0.04px));
             transform-origin: 30% 50%;
             transition: transform 260ms cubic-bezier(.16,1,.3,1);
             box-shadow: -30px 50px 110px rgba(0,0,0,.6), 0 0 0 1px rgba(45,212,191,.06) inset; }
  .machine__houder:hover .machine { transition-duration: 120ms; }
}
/* smal scherm: ruimte onder het paneel zodat de voorgrond de legenda niet raakt */
@media (max-width: 780px) {
  .hero { padding-bottom: 128px; }
}

/* de losse kaarsenstrook onder het paneel is weg (Cailean 3/9): de markt zit nu in de achtergrond */
.laag--voor { display: none !important; }
@media (min-width: 1100px) { .hero { padding-bottom: 72px; } }
@media (max-width: 780px) { .hero { padding-bottom: 56px; } }
#portfolios { padding-top: 96px; }


/* ------------------------------------------ twee panelen onder elkaar
   (Cailean 5/9: All-Weather en Alpha Compounder allebei in de hero) */
.machine--tweede { margin-top: 18px; }
.heroOpbouw .boek__doek { min-height: 250px; }
@media (max-width: 780px) { .heroOpbouw .boek__doek { min-height: 200px; } }

/* ------------------------------------------- portefeuillekaarten met cijfers
   In plaats van de opbouw-animatie nog een keer: de cijfers zelf. */
.cijferkaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 20px; }
@media (max-width: 860px) { .cijferkaarten { grid-template-columns: minmax(0,1fr); } }
.cijferkaart { display: flex; flex-direction: column; text-decoration: none; color: inherit;
               border: 1px solid var(--rand); border-radius: 18px; padding: 22px 22px 20px; background: var(--opp);
               transition: transform var(--basis) var(--ease), border-color var(--basis) var(--ease); }
.cijferkaart:hover { transform: translateY(-4px); border-color: var(--rand-licht); transition-duration: var(--snel); }
.cijferkaart__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cijferkaart__kop h3 { font-family: var(--display); font-size: 21px; font-weight: 700; }
.cijferkaart__kop span { font-family: var(--mono); font-size: 11px; color: var(--dof); }
.cijferkaart__groot { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.cijferkaart__groot b { font-family: var(--display); font-size: 44px; font-weight: 800; letter-spacing: -.03em;
                        line-height: 1; font-variant-numeric: tabular-nums; }
.cijferkaart__groot span { font-family: var(--mono); font-size: 11px; color: var(--dof); }
.cijferkaart .op { color: var(--op); } .cijferkaart .neer { color: var(--neer); }
.cijferkaart__spark { height: 84px; margin-top: 14px; }
.cijferkaart__spark canvas { width: 100%; height: 100%; display: block; }
.cijferkaart__cijfers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 16px;
                        padding-top: 14px; border-top: 1px solid var(--rand); }
@media (max-width: 520px) { .cijferkaart__cijfers { grid-template-columns: repeat(3, 1fr); } }
.cijferkaart__cijfers span { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
                             text-transform: uppercase; color: rgba(131,168,160,.75); }
.cijferkaart__cijfers b { display: block; margin-top: 4px; font-family: var(--mono); font-size: 15px;
                          font-weight: 700; font-variant-numeric: tabular-nums; color: #cfe3de; }
.cijferkaart__tekst { margin-top: 16px; font-size: 14px; color: var(--dof); }
.cijferkaart__paper { margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; color: var(--accent); }
.cijferkaart__paper span { display: inline-block; transition: transform var(--snel) var(--ease); }
.cijferkaart:hover .cijferkaart__paper span { transform: translateX(3px); }

/* de twee maandblokken naast elkaar, even breed */
.bewijs--gelijk { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px) { .bewijs--gelijk { grid-template-columns: minmax(0,1fr); } }
/* in de hero staan twee lijsten boven elkaar, dus de regels iets strakker */
.heroOpbouw .regel { padding: 3px 0; max-height: 40px; }
.heroOpbouw .regel s { font-size: 9.5px; }