/* Homepage atelier layer.
   All selectors stay behind .home-atelier so the wider site is unchanged. */

.home-atelier {
  --mut2: #7e8da3;
  --home-panel: rgba(8, 13, 27, .88);
  --home-panel-quiet: rgba(10, 16, 31, .7);
  --home-border: rgba(174, 185, 255, .17);
  --home-border-strong: rgba(174, 185, 255, .3);
  --home-radius: 28px;
  --home-shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

.home-atelier .v2main {
  /* 1240 werd 1180 op 10-09-2026. De startpagina was de enige pagina op 1240,
     de andere 647 staan op 1180 uit .v2main in v2.css. Nagemeten op 1269 px
     breed: daardoor begon de startpagina op x=39 en elke andere pagina op
     x=69, en dat is precies het soort verschil dat Gianluca bedoelt met "niet
     ineens veel marge zijkant, gewoon alles uniform". Een pagina die 30 px per
     kant afwijkt van de rest valt op zodra je doorklikt. */
  max-width: 1180px;
}

/* De nav houdt zijn eigen achtergrond uit v2.css. Hier stond een vaste
   donkere balk overheen; die is weg, want punt 3 vraagt om de lichte nav
   van de oude site en die hoort in de gedeelde laag thuis, niet hier. */

.home-atelier .v2sec {
  padding-top: clamp(92px, 10vw, 132px);
}

.home-atelier .v2sec-head {
  margin-bottom: clamp(30px, 4vw, 46px);
}

/* Hero: the current proposition stays intact, with a real-life counterpart. */
.home-atelier .hero {
  padding: clamp(56px, 8vh, 92px) 0 clamp(62px, 8vh, 96px);
}

.home-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .78fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.home-hero-copy {
  min-width: 0;
}

.home-atelier .hero-meta {
  margin-bottom: clamp(28px, 4vh, 44px);
}

.home-atelier .hero-sub {
  max-width: 59ch;
}

/* De intro schildert bij de eerste CSS-opmaak. Dezelfde korte entree blijft,
   maar wacht niet op de gedeelde JavaScript-metingen onder de vouw. Alleen
   deze herotekst verandert; alle scrolgestuurde onthullingen blijven gelijk. */
.home-atelier .hero .hero-sub.rv {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js:not(.v2-failopen) .home-atelier .hero .hero-sub.rv {
  animation: homeIntroIn 280ms var(--ease) both;
}

@keyframes homeIntroIn {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* De meetregel is de volgende zichtbare herotekst. Hij houdt de bestaande
   820 ms en 12 px beweging, maar begint tegelijk met de CSS-opmaak in plaats
   van pas na het gedeelde script onderaan de lange pagina. */
.home-atelier .hero .dim.rv {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js:not(.v2-failopen) .home-atelier .hero .dim.rv {
  animation: homeHeroDimIn 820ms var(--ease) both;
}

@keyframes homeHeroDimIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.js:not(.v2-failopen) .home-atelier .hero :is(.hero-sub, .dim).rv {
    animation: none;
  }
}

.home-atelier .hero .v2h1 {
  font-size: clamp(50px, 5.2vw, 74px);
}

/* GEEN min-height MEER, gemeten 09-09-2026 op 1024 en op 1920 breed.

   min-height samen met aspect-ratio rekent de BREEDTE terug uit de hoogte, en
   dat is precies andersom dan een raster wil. Bij 1024 is de fotokolom
   378,9 px, maar 520 px hoog gedeeld door 4/5 gaf een figuur van 416 px: hij
   stak 37 px buiten zijn kolom en 13 px buiten het scherm, verborgen door
   overflow-x op body. Bij 1440 en 1920 is de kolom 467 px en bond de regel
   niet, dus het gebeurde alleen in de band tussen ongeveer 981 en 1150 px.

   Zonder de ondergrens volgt de hoogte gewoon de breedte: 379 bij 474 op
   1024, en 467 bij 584 op 1440 en breder, precies zoals het al was. De
   ondergrens beschermde dus niets en brak iets. */
.home-hero-photo {
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--home-border-strong);
  border-radius: var(--home-radius);
  background: var(--home-panel);
  box-shadow: var(--home-shadow);
}

.home-hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% center;
  filter: saturate(.8) contrast(1.04) brightness(.82);
}

/* The old homepage used clear rounded islands. These keep that rhythm. */
.home-frontstrip .vdr,
.home-ai-index,
.home-story-grid,
.home-faq-list {
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  background-color: var(--home-panel-quiet);
  box-shadow: var(--home-shadow);
}

.home-frontstrip .vdr {
  padding: clamp(18px, 3vw, 34px);
  overflow: hidden;
}

.home-frontstrip .vdr-bar {
  border-radius: 16px 16px 0 0;
}

.home-service-grid,
.home-free-grid,
.home-case-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  border-top: 0;
}

.home-service-grid .krow,
.home-free-grid .krow {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
  min-height: 216px;
  padding: 28px;
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background-color: var(--home-panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
  transition: border-color 240ms ease, transform 240ms ease, background-color 240ms ease;
}

.home-service-grid .krow::before,
.home-free-grid .krow::before,
.home-case-grid .krow::before {
  display: none;
}

.home-service-grid .krow:hover,
.home-free-grid .krow:hover {
  padding: 28px;
  border-color: var(--home-border-strong);
  background-color: rgba(13, 21, 40, .94);
  transform: translateY(-4px);
}

.home-service-grid .krow-i,
.home-free-grid .krow-i {
  grid-column: 1;
  grid-row: 1;
}

.home-service-grid .krow-flip,
.home-free-grid .krow-flip {
  grid-column: 2;
  grid-row: 1;
}

.home-service-grid .krow-d,
.home-free-grid .krow-d {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 18px;
  font-size: .97rem;
  line-height: 1.65;
}

.home-service-grid .krow-flip > span,
.home-free-grid .krow-flip > span,
.home-case-grid .krow-flip > span {
  transform: none;
  transition: none;
}

.home-service-grid .krow-t + .krow-t,
.home-free-grid .krow-t + .krow-t,
.home-case-grid .krow-t + .krow-t {
  display: none;
}

.home-service-grid .krow .ann,
.home-free-grid .krow .ann {
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin-top: 26px;
}

.home-figure-grid {
  gap: 16px;
}

.home-figure-grid .fig {
  padding: 26px;
  border-color: var(--home-border);
  border-radius: 24px;
  background-color: var(--home-panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .14);
  overflow: hidden;
}

.home-figure-grid .fig::before,
.home-figure-grid .fig::after {
  display: none;
}

.home-figure-grid .tk {
  border-radius: 14px;
}

.home-tool-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  border: 0;
  background: transparent;
}

.home-tool-grid .lab-tool {
  min-height: 240px;
  padding: 28px;
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background-color: var(--home-panel);
  box-shadow: 0 18px 46px rgba(0, 0, 0, .14);
  transition: border-color 240ms ease, transform 240ms ease, background-color 240ms ease;
}

.home-tool-grid .lab-tool:hover {
  border-color: var(--home-border-strong);
  background-color: rgba(13, 21, 40, .94);
  transform: translateY(-4px);
}

.home-software-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(280px, .68fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  margin-top: 40px;
  padding: clamp(22px, 4vw, 46px);
  border: 1px solid var(--home-border);
  border-radius: var(--home-radius);
  background-color: var(--home-panel-quiet);
  overflow: hidden;
}

.home-atelier .home-software-stage .term {
  margin-top: 0;
}

.home-mac-visual {
  margin: 0;
}

.home-mac-visual img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.82) brightness(.86);
}

.home-atelier > .stats,
.home-atelier .v2main > .stats,
.home-ai-index .stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  border: 0;
}

.home-atelier .stat {
  min-height: 154px;
  padding: 24px;
  border: 1px solid var(--home-border);
  border-radius: 22px;
  background-color: var(--home-panel);
}

.home-ai-index {
  position: relative;
  margin-top: clamp(92px, 10vw, 132px);
  padding: clamp(30px, 5vw, 64px);
  overflow: hidden;
}

.home-ai-index .v2sec-head,
.home-ai-index > p,
.home-ai-index .stats {
  position: relative;
  z-index: 1;
}

.home-ai-index .stats {
  max-width: 880px;
  margin-top: 34px;
}

.home-ai-preview {
  position: relative;
  z-index: 1;
  margin: 34px 0 0;
  overflow: hidden;
  border: 1px solid var(--home-border-strong);
  border-radius: 20px;
  background-color: #050914;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}

.home-ai-preview img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(.9) contrast(1.05);
}

.home-case-grid .krow {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  min-height: 234px;
  padding: 28px 88px 28px 28px;
  border: 1px solid var(--home-border);
  border-radius: 24px;
  background-color: var(--home-panel);
  transition: border-color 240ms ease, transform 240ms ease, background-color 240ms ease;
}

.home-case-grid .krow:hover {
  padding: 28px 88px 28px 28px;
  border-color: var(--home-border-strong);
  background-color: rgba(13, 21, 40, .94);
  transform: translateY(-4px);
}

.home-case-grid .home-case-logo {
  position: absolute;
  top: 24px;
  right: 24px;
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 13px;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .28));
}

.home-case-grid .krow-i {
  grid-column: 1;
  grid-row: 1;
}

.home-case-grid .krow-flip {
  grid-column: 2;
  grid-row: 1;
}

.home-case-grid .krow-d {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 20px;
  font-size: .97rem;
  line-height: 1.65;
}

.home-case-grid .krow .ann {
  display: block;
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  margin-top: 24px;
}

/* Long-form content now has a visual counterpart and a calm disclosure. */
.home-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: clamp(32px, 6vw, 76px);
  align-items: start;
  padding: clamp(28px, 5vw, 58px);
  overflow: clip;
}

.home-story-copy > p:first-child {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
}

.home-story-more {
  margin: 26px 0;
  border-top: 1px solid var(--home-border);
  border-bottom: 1px solid var(--home-border);
}

.home-story-more summary {
  /* 4px was te weinig: de accentlijn van een open uitklapper staat op 0 en
     stond zo bijna op de tekst. Zelfde kantlijn als .mod-meer, 13-09-2026. */
  padding: 22px clamp(18px, 2.4vw, 28px);
  color: #eef1ff;
  cursor: pointer;
  font-weight: 700;
  line-height: 1.55;
}

.home-story-more summary::marker {
  color: var(--per2);
}

.home-story-more[open] summary {
  border-bottom: 1px solid var(--home-border);
}

.home-story-more p {
  padding-top: 22px;
  padding-inline: clamp(18px, 2.4vw, 28px);
}

.home-story-more p + p {
  padding-top: 14px;
}

.home-device-stage {
  --home-device-rotate: -8deg;
  --home-device-y: 20px;
  --home-device-scale: .96;
  position: sticky;
  top: 112px;
  min-height: 620px;
  margin: 0;
  display: grid;
  place-items: center;
}

.home-device {
  display: block;
  width: min(112%, 500px);
  height: auto;
  transform: translateY(var(--home-device-y)) rotate(var(--home-device-rotate)) scale(var(--home-device-scale));
  transform-origin: 50% 54%;
  filter: drop-shadow(0 34px 42px rgba(0, 0, 0, .36));
  will-change: transform;
}

/* De vorm van de veelgestelde vragen stond hier, en dus alleen op de
   startpagina. Gianluca op 09-09-2026: "de FAQ moet overal hetzelfde zijn als
   op de homepagina." Hij staat daarom nu in het gedeelde blad v2.css, onder
   DE VEELGESTELDE VRAGEN, op .tseo-faq-item EN op .home-faq-item tegelijk. De
   HTML van de startpagina verandert daardoor niet: dezelfde klassenamen,
   dezelfde waarden, alleen op een plek waar de rest van de site er ook bij
   kan. */

@media (max-width: 980px) {
  .home-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(300px, .74fr);
    gap: 34px;
  }

  /* Gemeten 09-09-2026 op 768 breed: de kolom is hier 300 px, maar
     min-height 460 px in combinatie met aspect-ratio 4/5 rekende de breedte
     terug naar 368 px. De figuur stak daardoor 68 px buiten zijn kolom en 44
     px buiten het scherm, en dat werd alleen verborgen door overflow-x op
     body. Dezelfde fout bleek daarna in de basisregel te zitten, en die is
     daar weggehaald; deze regel houdt hem hier dicht voor het geval er ooit
     weer een ondergrens boven komt te staan. */
  .home-hero-photo {
    min-height: 0;
    width: 100%;
  }

  .home-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-story-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .7fr);
    gap: 28px;
  }

  .home-device-stage {
    min-height: 560px;
  }
}

@media (max-width: 760px) {
  .home-atelier .v2main {
    padding-inline: 18px;
  }

  .home-hero-layout,
  .home-software-stage,
  .home-story-grid {
    grid-template-columns: 1fr;
  }

  .home-atelier .hero {
    padding-top: 48px;
  }

  .home-hero-photo {
    min-height: 0;
    max-height: 560px;
    aspect-ratio: 4 / 5;
  }

  .home-service-grid,
  .home-free-grid,
  .home-case-grid,
  .home-tool-grid,
  .home-atelier .v2main > .stats,
  .home-ai-index .stats {
    grid-template-columns: 1fr;
  }

  .home-service-grid .krow,
  .home-free-grid .krow,
  .home-case-grid .krow,
  .home-tool-grid .lab-tool {
    min-height: 0;
  }

  .home-figure-grid {
    grid-template-columns: 1fr;
  }

  .home-ai-index {
    margin-top: 92px;
  }

  .home-ai-preview {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--per2) rgba(255, 255, 255, .08);
    scrollbar-width: thin;
  }

  .home-ai-preview img {
    width: auto;
    min-width: 1000px;
    max-width: none;
  }

  .home-device-stage {
    position: relative;
    top: auto;
    min-height: 500px;
  }

  .home-device {
    width: min(90%, 360px);
  }
}

@media (max-width: 480px) {
  .home-hero-photo,
  .home-frontstrip .vdr,
  .home-ai-index,
  .home-story-grid,
  .home-faq-list {
    border-radius: 22px;
  }

  .home-service-grid .krow,
  .home-free-grid .krow,
  .home-case-grid .krow,
  .home-tool-grid .lab-tool,
  .home-figure-grid .fig,
  .home-atelier .stat {
    padding: 22px;
    border-radius: 20px;
  }

  .home-case-grid .krow,
  .home-case-grid .krow:hover {
    padding: 22px 74px 22px 22px;
  }

  .home-case-grid .home-case-logo {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }

  .home-software-stage {
    padding: 18px;
    border-radius: 22px;
  }

  .home-story-grid {
    padding: 24px 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-service-grid .krow,
  .home-free-grid .krow,
  .home-case-grid .krow,
  .home-tool-grid .lab-tool,
  .home-device {
    transition: none;
  }

  .home-device {
    transform: none;
  }
}

@media print {
  .home-device {
    transform: none;
  }
}