/* Growgency — homepage-specifieke CSS (NL/DE/EN delen dit ene bestand).
   Laadt na site.css: overschrijft alleen de secties die op de homepage
   een andere padding/opzet hebben dan hun standalone paginavariant. */

.journey{position:relative;padding:88px 0 80px;background:linear-gradient(180deg,var(--navy-deep) 0%,#060B1C 100%);overflow:hidden}
.journey-head{text-align:center;max-width:740px;margin:0 auto 54px}
.software{position:relative;background:linear-gradient(180deg,#060B1C,var(--navy-deep));padding:84px 0;overflow:hidden}
.cases{background:var(--cream);color:var(--ink);padding:84px 0}
.cc-tag{font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);white-space:nowrap;max-width:100%;overflow:hidden}

/* --- Groeipad sectie --- */
.growth-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center}
.growth-phases{display:flex;flex-direction:column;gap:14px}
.gphase{padding:20px 22px;border-radius:16px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03);cursor:pointer;transition:border-color .3s,background .3s,transform .3s}
.gphase:hover,.gphase.active{border-color:rgba(111,227,180,.4);background:rgba(111,227,180,.06);transform:translateX(6px)}
.gphase.expansion:hover,.gphase.expansion.active{border-color:rgba(255,196,110,.45);background:rgba(255,196,110,.06)}
.gphase-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint);background:rgba(111,227,180,.12);border:1px solid rgba(111,227,180,.3);border-radius:999px;padding:4px 12px;margin-bottom:10px}
.gphase h3{margin:0 0 6px;font-size:17px;color:#fff}
.gphase p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.55)}
.growth-legend{display:flex;gap:22px;justify-content:center;margin-top:14px;font-size:12px;color:rgba(255,255,255,.55)}
.growth-legend i{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle;margin-right:7px}
@media(max-width:900px){.growth-grid{grid-template-columns:1fr;gap:36px}}

/* --- Logorij in de hero ---------------------------------------------------
   De losse logosectie is vervallen. De merken staan nu klein en gedempt
   onder de knoppen. Ze lichten om de beurt even op: genoeg om het oog te
   pakken, te weinig om met de kop te concurreren.
   De dempingsgraad zit in --dim en niet hard in de keyframes, want op mobiel
   staan de logo's over de foto's en moeten ze een stap lichter. Zou de
   keyframe zijn eigen waarde meebrengen, dan won die van elke media query. */
.hero-logos{display:flex;flex-wrap:wrap;align-items:center;gap:13px clamp(16px,1.5vw,24px);margin-top:40px}
.hero-logos span{--dim:.3;font-family:'Sora',sans-serif;font-weight:700;font-size:clamp(11.5px,.92vw,13px);
  line-height:1;color:rgba(255,255,255,var(--dim));white-space:nowrap;
  animation:hero-logo-glow 12s ease-in-out infinite}
.hero-logos .it{font-style:italic}
.hero-logos .sp{letter-spacing:.1em;font-size:clamp(10px,.8vw,11.5px)}
.hero-logos span:nth-child(2){animation-delay:-10.5s}
.hero-logos span:nth-child(3){animation-delay:-9s}
.hero-logos span:nth-child(4){animation-delay:-7.5s}
.hero-logos span:nth-child(5){animation-delay:-6s}
.hero-logos span:nth-child(6){animation-delay:-4.5s}
.hero-logos span:nth-child(7){animation-delay:-3s}
.hero-logos span:nth-child(8){animation-delay:-1.5s}
@keyframes hero-logo-glow{
  0%,9%,100%{color:rgba(255,255,255,var(--dim))}
  4%{color:rgba(255,255,255,.85)}
}

/* --- Fotohero: drie kolommen die verticaal scrollen ---------------------
   De tegellijst staat twee keer in de HTML, dus translateY(-50%) valt
   naadloos terug op het beginpunt. Elke kolom een eigen duur en een
   omgekeerde middenkolom: speels zonder onrustig te worden.
   prefers-reduced-motion is al afgedekt door de blanket-regel in site.css. */
/* De hero eindigde op precies var(--navy-deep), en daar begint .journey ook
   mee. Twee secties in exact dezelfde kleur lopen als één vlak door. De hero
   is nu een lichter indigo paneel met een zachte mintgloed achter de foto's;
   de donkere secties eronder zetten zich daar zichtbaar tegen af. */
.ph-hero{position:relative;width:100%;height:100vh;min-height:620px;max-height:920px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 44%;grid-template-rows:100%;align-items:center;
  background:
    radial-gradient(760px 540px at 76% 26%,rgba(111,227,180,.14),transparent 64%),
    radial-gradient(900px 720px at 14% 74%,rgba(22,38,79,.9),transparent 70%),
    linear-gradient(165deg,#132648 0%,#0E1B38 48%,#111F3E 100%)}
/* Twee echte kolommen in plaats van een absoluut geplaatste wand: zo kan de
   tekst nooit over het beeld vallen, ongeacht schermbreedte of taallengte. */
.ph-hero__copy{grid-column:1;grid-row:1;position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 3vw 0 6vw}
/* Expliciet 100% en niet meer: gaf de wand een hoogte groter dan de rij, dan
   groeide de rij mee met de tegels en werd de tekst gecentreerd in een rij
   die honderden pixels onder de zichtbare hero doorliep. */
/* Een paar graden scheef. De schaal vangt op dat een gedraaide rechthoek zijn
   hoeken naar binnen trekt en er langs de randen anders driehoekjes
   achtergrond wegvallen. Maar schalen vanuit het midden duwt de wand ook
   zeventig pixels naar links, tot over de tekstkolom heen: bij de langere
   Duitse kop raakt de kop dan de foto's. Vandaar de translateX terug. */
.ph-hero__wall{grid-column:2;grid-row:1;position:relative;height:100%;align-self:center;
  transform:translateX(11.5%) rotate(-3deg) scale(1.14);
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-right:2vw;
  /* Kort aan de randen: door de schaal vallen de oude vervagingszones van
     14 en 86 procent deels buiten de hero, waardoor de onderste tegels juist
     op de snijlijn halfdoorzichtig stonden. */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 94%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 10%,#000 94%,transparent)}
.ph-col{overflow:hidden}
/* Bewust margin-bottom op de tegel in plaats van gap op de baan: met gap is de
   helft van de baan zes tegels plus vijfeneenhalve tussenruimte, waardoor
   translateY(-50%) net niet op een herhaling valt en er elke ronde een sprongetje
   zit. Met een marge per tegel klopt de helft precies.
   De acht foto's staan twee keer per kolom. Dat is geen sier: de baan moet
   minstens twee keer zo hoog zijn als de kolom, anders schuift bij -50% het
   einde van de baan in beeld en valt er een gat onderaan. */
.ph-track{display:flex;flex-direction:column;animation:ph-scroll linear infinite;will-change:transform}
.ph-col--a .ph-track{animation-duration:58s}
.ph-col--b .ph-track{animation-duration:78s;animation-direction:reverse;animation-delay:-39s}
.ph-col--c .ph-track{animation-duration:68s;animation-delay:-23s}
@keyframes ph-scroll{to{transform:translateY(-50%)}}
.ph-tile{flex:0 0 auto;aspect-ratio:1/1;margin-bottom:16px;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg,#2B3450,#1E2740);border:1px solid rgba(255,255,255,.07)}
.ph-tile img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.86) saturate(.95)}
/* Alleen nog een zachte overgang langs de linkerrand van de wand: de tekst
   heeft een eigen kolom en hoeft niet meer afgeschermd te worden.
   De band loopt aan bééde kanten uit naar transparant. Begon hij links met
   een dekkende navy, dan viel die precies over de lichtere radiale
   achtergrond en zag je op die grens een verticale lijn. */
.ph-hero__scrim{position:absolute;top:0;bottom:0;left:50%;width:16%;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,14,34,0) 0%,rgba(7,14,34,.55) 38%,rgba(7,14,34,0) 100%)}
.ph-hero__copy .eyebrow{margin-bottom:18px}
.ph-hero__copy h1{color:#fff;font-weight:800;font-size:clamp(40px,4.6vw,74px);
  line-height:1.04;letter-spacing:-.025em;margin:0;text-wrap:balance}
.ph-hero__copy h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:var(--mint)}
.ph-hero__copy p.lead{color:rgba(215,222,230,.85);font-size:clamp(16.5px,1.15vw,19px);
  line-height:1.55;margin:22px 0 0;max-width:480px}
.ph-hero__cta{display:flex;align-items:center;gap:16px;margin-top:34px;flex-wrap:wrap}
@media(max-width:980px){
  /* Smal scherm: geen twee kolommen meer, de wand zakt achter de tekst. */
  .ph-hero{display:block;height:auto;min-height:0;max-height:none;padding:120px 0 76px}
  .ph-hero__wall{position:absolute;inset:0;height:100%;width:100%;padding-right:0;opacity:.55;
    transform:rotate(-3deg) scale(1.22)}
  /* Zelfde dekking als voorheen, want de tekst staat hier over de foto's en
     moet leesbaar blijven. Wel in de herokleur in plaats van navy-deep: eindigde
     hij op navy-deep, dan liep de hero onderaan weer naadloos over in de
     donkere sectie eronder en was het kleurverschil op mobiel weg. */
  .ph-hero__scrim{inset:0;width:100%;
    background:linear-gradient(180deg,rgba(15,28,58,.82) 0%,rgba(15,28,58,.72) 55%,rgba(17,31,62,.97) 100%)}
  .ph-hero__copy{padding:0 7vw}
  .hero-logos span{--dim:.5}
  .hero-logos{gap:11px 20px;margin-top:34px}
}
@media(max-width:600px){
  .ph-hero__wall{grid-template-columns:repeat(2,1fr)}
}