/* Pagina's Websites en Systemen & AI: bovenaan de uitleg van het product naast twee voorbeeldsites op een telefoon die meedraait bij het
   scrollen, daarna een klein portfolio met drie sites op een laptop waarvan het scherm openklapt (cases.js).
   De sites in de schermen scrollen vanzelf (.autoscroll). */

/* ---------- Bovenaan: uitleg + twee telefoons ---------- */
.voorbeelden--top { padding-top: clamp(124px, 13vw, 170px); }
.voorbeelden__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.voorbeelden__tekst p { font-size: 1.1rem; line-height: 1.6; color: rgba(243, 240, 232, .86); max-width: 50ch; margin-top: 18px; }
.voorbeelden__tekst strong { color: var(--paper); }
.voorbeelden__acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.voorbeelden__tekst .voorbeelden__klein { font-size: 15px; margin-top: 16px; color: rgba(243, 240, 232, .7); }
.voorbeelden__klein a { color: var(--paper); }
.voorbeelden__toestellen { display: flex; justify-content: center; align-items: center; gap: clamp(12px, 3vw, 40px); }
.voorbeelden__toestel { perspective: 1400px; }
.voorbeelden__toestel--rechts { margin-top: clamp(40px, 8vw, 110px); }

.voorbeelden__toestel .phone {
  --ry: -14deg; --rx: 6deg; --rz: -2deg; --s: .96;
  width: clamp(180px, 19vw, 260px);
  transform: rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--s));
  transform-style: preserve-3d; will-change: transform;
}
.voorbeelden__toestel--rechts .phone { --ry: 14deg; --rz: 2deg; }

/* 3D-telefoons (pagina Websites, bovenaan; lagen en knopjes komen uit cases.js). Voorkant op z = 0, daarachter 28 dunne lagen
   (samen ruim 25 px) die de metalen zijkant vormen; de knopjes zitten halverwege de dikte en steken net buiten de rand. */
.voorbeelden--top .voorbeelden__toestel .phone--3d { --ry: -18deg; }
.voorbeelden--top .voorbeelden__toestel--rechts .phone--3d { --ry: 18deg; }
.phone--3d .phone__view { position: relative; z-index: 1; transform: translateZ(.6px); }
.phone--3d .phone__eiland { transform: translateX(-50%) translateZ(1.2px); }
.phone__dikte { position: absolute; inset: 0; border-radius: inherit; transform-style: preserve-3d; pointer-events: none; }
.phone__dikte i {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(90deg, #6f757e 0%, #d9dde2 7%, #9ea4ac 22%, #c3c8ce 50%, #9ea4ac 78%, #d9dde2 93%, #6f757e 100%);
  transform: translateZ(calc(var(--z) * -1px));
}
.phone__dikte i:last-of-type { background: linear-gradient(145deg, #c9cdd3, #8e949c); box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .75); } /* achterkant */
.phone__knop { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #7c828b, #dfe2e6 50%, #7c828b); transform: translateZ(-12.5px); }
.phone__knop--aan { right: -3px; top: 27%; height: 11%; }
.phone__knop--volume1 { left: -3px; top: 21%; height: 7%; }
.phone__knop--volume2 { left: -3px; top: 30%; height: 7%; }
/* glans over het glas: schuift mee als de telefoon draait (--glans uit cases.js) */
.phone__glans {
  position: absolute; z-index: 3; inset: 9px; border-radius: 34px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .2) 46%, rgba(255, 255, 255, .04) 52%, rgba(255, 255, 255, 0) 62%) var(--glans, 50%) 0 / 260% 100% no-repeat;
  transform: translateZ(1.6px);
}

/* Inladen (pagina Websites, bovenaan): na de tekst komen de telefoons een voor een omhoog en draaien ze zacht in hun stand.
   De animatie zit op de houder, zodat het kantelen bij het scrollen (cases.js, op .phone) er los van blijft werken.
   Wacht op is-ready (lettertype geladen, script.js), net als de intro op de homepage; zonder script blijven ze gewoon staan. */
html:not(.no-js) .voorbeelden--top .voorbeelden__toestel { opacity: 0; }
html.is-ready .voorbeelden--top .voorbeelden__toestel { animation: telefoonIn 1.3s var(--ease-out) .35s forwards; }
html.is-ready .voorbeelden--top .voorbeelden__toestel--rechts { --in-r: 4deg; animation-delay: .55s; }
@keyframes telefoonIn {
  from { opacity: 0; transform: translateY(120px) rotate(var(--in-r, -4deg)) scale(.9); }
  30% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* Zilveren toestel met eiland, zoals een iPhone */
.phone--zilver {
  position: relative; padding: 9px; border-radius: 42px;
  background: linear-gradient(145deg, #f6f7f9 0%, #c7cbd2 38%, #eef0f3 58%, #b4b9c1 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 50px 90px -30px rgba(0, 0, 0, .7), 0 20px 40px -20px rgba(31, 77, 255, .35);
}
.phone--zilver .phone__view { border-radius: 34px; aspect-ratio: 9 / 19.5; background: var(--white); box-shadow: 0 0 0 2px #0c0f1d; }
.phone__eiland { position: absolute; z-index: 2; top: 20px; left: 50%; width: 30%; height: 20px; transform: translateX(-50%); border-radius: 12px; background: #0c0f1d; }

/* ---------- Voorbeelden: drie laptops ---------- */
.werkjes__lijst { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: end; }
.werkje { display: grid; gap: 16px; justify-items: center; text-align: center; }
.werkje__wat { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.werkjes__noot { margin-top: clamp(24px, 3vw, 36px); text-align: center; font-size: 14px; color: var(--muted); }
.werkjes__noot + .werkjes__meer { margin-top: 14px; }
.werkjes__meer { margin-top: clamp(32px, 4vw, 52px); text-align: center; }

.laptop { display: block; width: 100%; padding-inline: 6%; perspective: 1400px; }
.laptop__scherm {
  --open: 0deg;
  position: relative; display: block; padding: 3.4% 3.4% 4.4%;
  border-radius: 14px 14px 4px 4px;
  background: #0c0f1d;
  box-shadow: inset 0 0 0 2px #2b3042, 0 40px 70px -30px rgba(12, 15, 29, .55), 0 18px 40px -24px rgba(31, 77, 255, .35);
  transform: rotateX(var(--open)); transform-origin: 50% 100%; will-change: transform;
}
.laptop__scherm::before { content: ""; position: absolute; top: 1.4%; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #2b3042; transform: translateX(-50%); }
.laptop__view { display: block; aspect-ratio: 16 / 10; overflow: hidden; container-type: size; background: var(--white); border-radius: 3px; }
.laptop__view img { display: block; width: 100%; height: auto; max-width: none; }
.laptop__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.laptop__voet {
  position: relative; display: block; height: clamp(9px, 1vw, 14px); margin-inline: -7%;
  border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px;
  background: linear-gradient(#f1f2f5, #c3c7ce 55%, #8f949c);
  box-shadow: 0 22px 30px -14px rgba(12, 15, 29, .45);
}
.laptop__voet::before { content: ""; position: absolute; top: 0; left: 50%; width: 16%; height: 42%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #aeb3bb; }
.autoscroll--case { animation-duration: 30s; }

/* ---------- Systemen & AI: groot scherm, telefoon en functies ---------- */
.os-top { padding-top: clamp(124px, 13vw, 170px); }
.os-top__kop { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.os-top__tekst p { font-size: 1.1rem; line-height: 1.6; color: rgba(243, 240, 232, .86); max-width: 52ch; }
.os-top__tekst p + p { margin-top: 14px; }
.os-top__tekst strong { color: var(--paper); }
.os-top__noot { margin-top: 22px; text-align: center; font-size: 14px; color: rgba(243, 240, 232, .62); }

.monitor { display: block; max-width: 1080px; margin: clamp(44px, 6vw, 80px) auto 0; perspective: 1800px; }
.monitor__scherm {
  --kantel: 0deg;
  display: block; padding: 1.1%; border-radius: 18px; background: #0c0f1d;
  box-shadow: inset 0 0 0 2px #2b3042, 0 60px 120px -40px rgba(0, 0, 0, .8), 0 30px 90px -40px rgba(31, 77, 255, .55);
  transform: rotateX(var(--kantel)); transform-origin: 50% 100%; will-change: transform;
}
.monitor__view { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 7px; background: var(--white); }
.monitor__view video, .os-tel .phone__view video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.monitor__nek { display: block; width: 13%; height: clamp(26px, 5vw, 64px); margin: 0 auto; background: linear-gradient(90deg, #8f949c, #e6e8ec 45%, #b4b9c1); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.monitor__voet { display: block; width: 30%; height: clamp(7px, .8vw, 11px); margin: 0 auto; border-radius: 6px 6px 3px 3px; background: linear-gradient(#f1f2f5, #aeb3bb); box-shadow: 0 22px 34px -12px rgba(0, 0, 0, .7); }

.os-tel__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.os-tel .voorbeelden__toestel .phone { width: clamp(220px, 24vw, 300px); }
.os-tel__tekst p { font-size: 1.15rem; line-height: 1.6; color: var(--muted); max-width: 46ch; margin-top: 18px; }

.functies__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.functie { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--white); box-shadow: 0 1px 0 rgba(12, 15, 29, .06), 0 18px 40px -26px rgba(12, 15, 29, .35); }
.functie img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; border-bottom: 1px solid rgba(12, 15, 29, .08); }
.functie__tekst { padding: 18px 20px 22px; }
.functie h3 { font-family: var(--f-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1.15; }
.functie p { margin-top: 6px; color: var(--ink-2); font-size: 15.5px; line-height: 1.5; }

@media (max-width: 960px) {
  .os-top__kop, .os-tel__grid { grid-template-columns: 1fr; }
  .functies__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .voorbeelden__grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .werkjes__lijst { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; row-gap: 40px; }
}
@media (max-width: 560px) {
  /* Op de telefoon: één rij om doorheen te vegen */
  .functies__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 4px 16px 18px; scrollbar-width: none; }
  .functies__grid::-webkit-scrollbar { display: none; }
  .functie { scroll-snap-align: center; }
  .os-tel .voorbeelden__toestel .phone { width: 62vw; }
  .voorbeelden__toestel .phone { width: 42vw; }
}
@media (prefers-reduced-motion: reduce) {
  .voorbeelden__toestel .phone, .laptop__scherm, .monitor__scherm { transform: none; }
}