/* ============================================================
   EVENT MANAGEMENT — pagina-eigen composities
   De gedeelde EMS-composities (kruimelpad, hero-frame, cijferbalk,
   split-rijen, card-stack, donkere banden, features, demo, FAQ,
   oplossingen-switcher) staan in pages/ems-gedeeld.css en worden
   dáárvóór geladen. Hier staat alleen wat uniek is aan deze pagina:
   de sterretjes bij de hero-kop, het winstgevende-offerte-blok en
   de marge-knop.
   ============================================================ */

/* ---- Hero: 3 sterretjes rechtsboven de kop (bron visuals/kleine-sterren.png) ---- */
.em-hero-kop { position: relative; display: inline-block; }
.em-hero-sterren { position: absolute; top: -0.35em; right: -2.6rem; width: 2rem; height: auto; pointer-events: none; }
@media (max-width: 620px) { .em-hero-sterren { width: 1.4rem; right: -1.4rem; top: -0.2em; } }

/* ============================================================
   Winstgevende offerte — de gebouwde laptop
   De schermafdruk is het enige beeld; het deksel, de voet, de glans en het
   margepaneel zijn CSS, net als de telefoon (`vf-telefoon`) op de homepage.
   Zo schaalt hij mee, blijft de tekst scherp en kan de berekening écht lopen.
   ============================================================ */
.em-winst { overflow: clip; }

.em-winst-rij {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

/* Het toneel loopt links de container uit tot de vensterrand: daardoor oogt de
   laptop groter dan de pagina zonder dat de tekst ernaast inschuift. */
.em-winst-toneel {
  position: relative;
  /* nooit verder dan de goot: zo oogt hij groter dan de kolom, maar staat
     hij nooit tegen de vensterrand geplakt */
  margin-left: calc(-1 * min(clamp(1rem, 6vw, 6rem), max(0rem, (100vw - var(--container)) / 2 - 1.5rem)));
  padding: clamp(2rem, 4vw, 3.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

/* Twee trage lichtvlekken achter het scherm: avondzon links, lavendel rechts. */
.em-winst-radiant { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.em-winst-radiant::before,
.em-winst-radiant::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px);
  animation: emDrijf 22s ease-in-out infinite alternate;
}
.em-winst-radiant::before {
  width: 34rem; height: 22rem; left: 4%; top: 6%;
  background: radial-gradient(circle, rgba(255,153,102,.45), transparent 70%);
}
.em-winst-radiant::after {
  width: 26rem; height: 18rem; right: 2%; bottom: 4%;
  background: radial-gradient(circle, rgba(192,199,250,.5), transparent 70%);
  animation-delay: -11s;
}
@keyframes emDrijf { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(2.5rem,-1.5rem,0) scale(1.08); } }

/* ---- De laptop ---- */
.em-laptop {
  position: relative; z-index: 1;
  transform-style: preserve-3d;
  transform:
    perspective(1900px)
    rotateX(var(--kantel-x, 7deg))
    rotateY(var(--kantel-y, -5deg))
    rotateZ(var(--kantel-z, 0.6deg));
  transition: transform 900ms var(--ease);
  will-change: transform;
}
/* Rechtop zodra hij in beeld staat: de kanteling is het binnenkomen, niet de eindstand. */
.reveal-armed .em-winst-toneel[data-reveal].in .em-laptop {
  --kantel-x: 2deg; --kantel-y: -1.5deg; --kantel-z: 0deg;
}

.em-laptop-deksel {
  border-radius: clamp(0.75rem, 1.4vw, 1.15rem);
  padding: clamp(0.5rem, 0.9vw, 0.8rem);
  background: linear-gradient(160deg, #2B2B33 0%, #16161B 46%, #101014 100%);
  box-shadow:
    0 2px 0 rgba(244,244,245,0.14) inset,
    0 40px 80px -30px rgba(23,23,29,0.55),
    0 90px 120px -60px rgba(23,23,29,0.5);
}
.em-laptop-scherm {
  position: relative; overflow: hidden;
  border-radius: clamp(0.4rem, 0.7vw, 0.6rem);
  background: var(--c-surface);
  aspect-ratio: 1800 / 1000;
}
.em-laptop-scherm img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* De glans veegt elke 9 seconden één keer over het glas. */
.em-laptop-glans {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 34%, rgba(255,255,255,0.42) 46%, rgba(255,255,255,0.06) 56%, transparent 62%);
  transform: translateX(-120%);
  animation: emGlans 9s var(--ease) infinite;
}
@keyframes emGlans { 0%, 62% { transform: translateX(-120%); } 92%, 100% { transform: translateX(120%); } }

/* De voet: iets breder dan het deksel, met de uitsparing voor de vingers. */
.em-laptop-voet {
  position: relative;
  width: 108%; margin-left: -4%;
  height: clamp(0.7rem, 1.15vw, 1rem);
  border-radius: 0 0 clamp(0.5rem, 0.9vw, 0.8rem) clamp(0.5rem, 0.9vw, 0.8rem);
  background: linear-gradient(180deg, #3A3A44 0%, #1C1C22 62%, #101014 100%);
  box-shadow: 0 22px 34px -18px rgba(23,23,29,0.6);
}
.em-laptop-voet span {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 14%; height: 42%;
  border-radius: 0 0 var(--r-pill) var(--r-pill);
  background: rgba(23,23,29,0.75);
}

/* ---- Het margepaneel, over de onderrand van het scherm heen ---- */
.em-marge {
  position: absolute; z-index: 2;
  right: -1rem; bottom: clamp(0.5rem, 2vw, 2rem);
  width: min(23rem, 62%);
  margin: 0; padding: clamp(1rem, 1.6vw, 1.35rem) clamp(1.1rem, 1.8vw, 1.5rem);
  border-radius: var(--r-card);
  background: var(--c-surface);
  box-shadow: var(--shadow-pop);
}
.em-marge figcaption {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  font-weight: 500; color: var(--c-ink-soft); margin-bottom: var(--sp-3);
}
.em-marge-balk {
  height: 8px; border-radius: var(--r-pill); overflow: hidden;
  background: var(--c-surface-soft); margin-bottom: var(--sp-4);
}
.em-marge-balk i {
  display: block; height: 100%; width: var(--vul, 74%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-orange-deep), var(--c-orange));
  transform-origin: left; transform: scaleX(0);
  transition: transform 1.4s var(--ease);
}
.em-marge.is-aan .em-marge-balk i { transform: scaleX(1); }
.em-marge-cijfers { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-4); }
.em-marge-cijfers p { margin: 0; display: grid; gap: 2px; }
.em-marge-cijfers b {
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: var(--fs-kaartkop);
}
.em-marge-pct b { color: var(--c-orange-deep); }
.em-marge-bedrag { text-align: right; }
.em-marge-cijfers span { font-size: var(--fs-small); color: var(--c-ink-soft); line-height: 1.3; }

@media (max-width: 920px) {
  .em-winst-rij { grid-template-columns: 1fr; }
  .em-winst-toneel { margin-left: 0; }
  .em-marge { position: static; width: auto; margin-top: var(--sp-5); box-shadow: var(--shadow-card); }
}

@media (prefers-reduced-motion: reduce) {
  .em-laptop { transition: none; --kantel-x: 0deg; --kantel-y: 0deg; --kantel-z: 0deg; }
  .em-laptop-glans { animation: none; opacity: 0; }
  .em-winst-radiant::before, .em-winst-radiant::after { animation: none; }
  .em-marge-balk i { transition: none; transform: scaleX(1); }
}


/* ---- De offerte die het meest oplevert ---- */
.em-oplevert { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5.5rem); align-items: center; }
@media (max-width: 920px) { .em-oplevert { grid-template-columns: 1fr; } }
.em-oplevert-visual { background: var(--c-surface-soft); border-radius: var(--r-media); padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow-tile); text-align: center; }
.em-oplevert-visual .marge { margin: 0 auto var(--sp-5); }
.em-oplevert-visual .em-visual-cap { font-size: var(--fs-small); color: var(--c-ink-soft); margin: 0; max-width: 26rem; margin-inline: auto; }
.em-oplevert-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.em-oplevert-lijst li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; }
.em-oplevert-lijst .em-o-num { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--c-orange); width: 2.2rem; }
.em-oplevert-lijst h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-lead); margin: 0 0 var(--sp-1); }
.em-oplevert-lijst p { font-size: var(--fs-body); color: var(--c-ink-soft); margin: 0; }

/* De marge-knop stond hier; hij staat nu in pages/ems-gedeeld.css omdat
   /event-management-software hem ook gebruikt (BOUWGIDS §2 wet 5). */