/* AI Growth Engine (/growth-engine/). Bouwt op home.css en producten.css; alleen wat daar nog niet bestaat. */

/* Lijsten met vinkjes of streepjes in kaarten */
.ge-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ge-list { display: grid; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.ge-list li { position: relative; padding-left: 28px; color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.ge-list li::before { position: absolute; top: .28em; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; content: ""; }
.ge-list.is-not li::before { background: #8f8895 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.ge-two .inst-card h3 { margin-bottom: 14px; }
.ge-two .inst-card .ge-list-intro { margin-bottom: 12px; }

/* Over Desmond */
.ge-about { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 900px; }
.ge-about img { display: block; width: 100%; height: auto; border: 1px solid #d5c1cc; border-radius: 24px; }
.ge-about h2 { margin-bottom: 18px; }
.ge-about p { max-width: 620px; margin: 0 0 14px; color: var(--text-2); font-size: 1rem; line-height: 1.7; }
.ge-about p:last-child { margin-bottom: 0; }

/* Gegevens van het gesprek bij de afsluitende oproep */
.ge-call { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 30px; padding: 0; list-style: none; }
.ge-call li { padding: 8px 14px; border: 1px solid var(--glass-line); border-radius: 999px; background: rgba(255, 255, 255, .62); color: var(--text); font-size: .86rem; font-weight: 500; }
.prod-cta .wrap > .ge-booking { max-width: 980px; margin-top: 4px; overflow: hidden; border: 1px solid var(--glass-line); border-radius: 22px; background: #fff; box-shadow: var(--glass-shadow); }
.js .inst-page .ge-booking[data-anim] { filter: none; }
.ge-booking iframe { display: block; width: 100%; height: 720px; border: 0; }
.ge-cta-mail { margin: 26px 0 0 !important; font-size: .92rem !important; }
.ge-cta-mail a { color: var(--accent); font-weight: 600; }

@media (max-width: 900px) {
  .ge-two { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ge-about { grid-template-columns: 1fr; gap: 24px; }
  .ge-about img { width: 120px; border-radius: 20px; }
  .ge-call { justify-content: flex-start; }
  .ge-booking iframe { height: 820px; }
}

/* Koppen zonder inleiding; ruimte en breedte komen uit de huisstijlregels in home.css */
.ge-page .inst-head { grid-template-columns: 1fr; }
.ge-page .inst-subhead { grid-template-columns: 1fr; }
.ge-page .home-hero .lead { max-width: 600px; }
.ge-list li { font-size: .92rem; color: var(--text); }

/* Verloop in de kop beweegt langzaam */
.ge-grad { background-size: 220% 100%; animation: ge-sheen 9s ease-in-out infinite alternate; }
@keyframes ge-sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* Vier stappen onder de hero, met een lijn waar een punt overheen loopt */
.ge-kort { margin-top: -8px; }
.ge-track { position: relative; height: 1px; margin: 0 6% 22px; overflow: hidden; background: linear-gradient(90deg, rgba(157, 61, 109, .08), rgba(157, 61, 109, .32), rgba(157, 61, 109, .08)); }
.ge-track i { position: absolute; top: 0; left: -80px; width: 80px; height: 1px; background: linear-gradient(90deg, transparent, #d84d91, #ff8b67, transparent); animation: ge-run 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes ge-run { 0% { left: -80px; } 70%, 100% { left: 100%; } }
.ge-kort .inst-kort-q { margin-bottom: 6px !important; }

/* Voorbeeld als tijdlijn */
.ge-timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 34px 0 0; list-style: none; }
.ge-timeline::before { position: absolute; top: 5px; right: 0; left: 0; height: 1px; background: linear-gradient(90deg, rgba(240, 169, 199, .7), rgba(255, 139, 103, .55)); content: ""; transform-origin: left center; }
.ge-timeline li { position: relative; }
.ge-timeline li::before { position: absolute; top: -34px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--inst-pink); box-shadow: 0 0 0 4px rgba(240, 169, 199, .14); content: ""; }
.ge-timeline li:last-child::before { background: linear-gradient(135deg, #d84d91, #ff8b67); box-shadow: 0 0 0 5px rgba(255, 139, 103, .2); }
.ge-timeline small { display: block; margin-bottom: 10px; color: var(--inst-pink); font: 500 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.ge-timeline h3 { margin: 0 0 8px; color: #f5f5f4; }
.ge-timeline p { margin: 0; color: #b9bcc2; font-size: .92rem; line-height: 1.6; }
.ge-example-note { position: relative; margin: 28px 0 0 !important; padding-top: 0; }

/* Animaties bij binnenkomst (alleen met JavaScript) */
.js .inst-page .ge-timeline[data-anim] { filter: none; transform: none; }
.js .ge-timeline[data-anim]::before { transform: scaleX(0); transition: transform 1.8s var(--ease) .15s; }
.js .ge-timeline[data-anim].is-in::before { transform: scaleX(1); }
.js .ge-timeline[data-anim] li { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 380ms + 200ms); }
.js .ge-timeline[data-anim].is-in li { opacity: 1; transform: none; }
.js .inst-page [data-anim] .ge-list li { opacity: 0; transform: translateX(-8px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .inst-page [data-anim].is-in .ge-list li { opacity: 1; transform: none; }
.js .inst-page [data-anim] .ge-list li:nth-child(1) { transition-delay: .25s; }
.js .inst-page [data-anim] .ge-list li:nth-child(2) { transition-delay: .35s; }
.js .inst-page [data-anim] .ge-list li:nth-child(3) { transition-delay: .45s; }
.js .inst-page [data-anim] .ge-list li:nth-child(4) { transition-delay: .55s; }
.js .inst-page [data-anim] .ge-list li:nth-child(5) { transition-delay: .65s; }
.js .inst-page .ge-about[data-anim] img { transform: scale(.94); transition: transform 1s var(--ease) .1s; }
.js .inst-page .ge-about[data-anim].is-in img { transform: none; }

@media (max-width: 900px) {
  .ge-track { display: none; }
  .ge-timeline { grid-template-columns: 1fr; gap: 26px; padding: 0 0 0 30px; }
  .ge-timeline::before { top: 6px; right: auto; bottom: 6px; left: 5px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(240, 169, 199, .7), rgba(255, 139, 103, .55)); transform-origin: center top; }
  .ge-timeline li::before { top: 4px; left: -30px; }
  .js .ge-timeline[data-anim]::before { transform: scaleY(0); }
  .js .ge-timeline[data-anim].is-in::before { transform: scaleY(1); }
}
@media (max-width: 760px) {
}
@media (prefers-reduced-motion: reduce) {
  .ge-grad, .ge-track i { animation: none; }
  .js .ge-timeline[data-anim]::before, .js .ge-timeline[data-anim] li, .js .inst-page [data-anim] .ge-list li, .js .inst-page .ge-about[data-anim] img { opacity: 1; transform: none; transition: none; }
}