/* CLND landingspagina — layout, componenten en beweging.
 * Kleuren uit tokens.css. Verhoog ?v= in index.html bij elke wijziging (30 dagen cache). */

@keyframes clndFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-16px)} }
@keyframes clndFloatSlow { 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(-4deg)} }

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-neutral-50);
  color: var(--color-neutral-800);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
a { color: var(--color-primary-700); text-decoration: none; }
a:hover { color: var(--color-primary-800); }
h1, h2, h3, p, span, div { overflow-wrap: break-word; }
img { max-width: 100%; }

/* ── Banden: achtergrond over de volle breedte, inhoud in de container ── */
.band { width: 100%; position: relative; }
.container { max-width: 1200px; margin: 0 auto; padding-inline: 48px; position: relative; }

.band--hero {
  background: linear-gradient(160deg, #34A853 0%, #237A38 60%, #1B5E20 100%);
  padding-bottom: 90px;
  overflow: hidden;
}
.hero__inner { z-index: 5; }
.bubbles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.hero__nav { display: flex; align-items: center; justify-content: space-between; padding: 24px 0; position: relative; z-index: 10; }
.hero__content { text-align: center; padding-top: 48px; position: relative; z-index: 5; }

.hero__title {
  font-size: clamp(1.9rem, 7.5vw, 60px); line-height: 1.12; font-weight: 800; color: #fff;
  margin: 0 auto 22px; letter-spacing: -1.5px; max-width: 820px;
}

/* Wisselwoord in een badge; breedte wordt door JS op het langste woord gezet */
.rotator {
  display: inline-block; position: relative; vertical-align: bottom;
  height: 1.2em; overflow: hidden; white-space: nowrap;
  background: rgba(255,255,255,.18); border-radius: 16px; padding: 0 .3em;
}
.rotator__word {
  display: block; line-height: 1.2em; text-align: center;
  transition: transform .45s cubic-bezier(.6,-0.3,.3,1.4), opacity .35s;
}
.rotator.is-out .rotator__word { transform: translateY(-110%); opacity: 0; }
.rotator.is-in .rotator__word { transform: translateY(110%); opacity: 0; transition: none; }

.clnd-phones { display: flex; justify-content: center; gap: 28px; margin-top: -70px; position: relative; z-index: 8; }
/* Kantelen: --rx/--ry worden door site.js op .clnd-phones gezet */
.clnd-phones { perspective: 1200px; }
.phone {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .15s ease-out;
}
.clnd-phones.is-resting .phone { transition: transform .5s ease-out; }
.clnd-phone-side { transform: translateY(28px) scale(0.9) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); opacity: 0.96; }
.phone__float { animation: clndFloat 6s ease-in-out infinite; }

.trust { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; padding-top: 56px; padding-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--color-neutral-700); }

.band--features { background: #F3F7F2; padding: 48px 0 56px; margin-top: 48px; }
/* ── Functiekaarten met mini-demo ── */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature {
  border-radius: 24px; padding: 22px 26px 26px; border: 1.5px solid transparent;
  position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s;
}
.feature.is-active { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 18px 40px rgba(27,94,32,.15); }
.feature h3 { font-size: 20px; font-weight: 800; margin: 0 0 6px; color: var(--color-neutral-800); }
.feature p { font-size: 14px; line-height: 1.45; margin: 0; font-weight: 500; }
.feature__demo { height: 96px; margin-bottom: 16px; border-radius: 12px; position: relative; overflow: hidden; background: rgba(255,255,255,.6); }

.feature--fair { grid-column: span 2; background: linear-gradient(135deg, #34A853, #237A38); color: #fff; }
.feature--fair h3 { color: #fff; font-size: 24px; }
.feature--fair p { opacity: .92; font-size: 15px; }
.feature--fair .feature__demo { background: rgba(255,255,255,.12); }
.feature--control { background: #F6EEFA; border-color: #E5D0F0; } .feature--control p { color: #6A1B9A; }
.feature--strikes { background: #FFF3E0; border-color: #FCE0BE; } .feature--strikes p { color: #B36A00; }
.feature--penalty { background: #FFEBEE; border-color: #F8CDCE; } .feature--penalty p { color: #C0322E; }
.feature--medals { background: #FFF8E1; border-color: #F5E4B0; } .feature--medals p { color: #B38600; }

/* Eerlijke verdeling: taken schuiven door (left wordt door site.js gezet) */
.demo-fair__av {
  position: absolute; top: 12px; width: 30px; height: 30px; border-radius: 50%;
  background: #E8F5E9; color: #237A38; font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.demo-fair__task {
  position: absolute; top: 56px; padding: 4px 8px; border-radius: 8px; background: #fff;
  color: var(--color-neutral-800); font-size: 11px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.08);
  transition: left .8s cubic-bezier(.5,-0.4,.3,1.4);
}
.demo-fair__task:nth-of-type(4) { left: 8%; } .demo-fair__task:nth-of-type(5) { left: 38%; } .demo-fair__task:nth-of-type(6) { left: 68%; }

/* Controlemodus: vinkje kleurt groen */
.demo-check__row {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 150px; height: 34px; border-radius: 10px; background: #fff; color: #237A38;
  font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.demo-check__row b { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #34A853; transition: background .3s; }
.demo-check__row b { background: #34A853; }
.js-motion .feature:not(.is-active) .demo-check__row b { background: transparent; }

/* Streepjes: veren één voor één op */
.demo-tally { display: flex; gap: 6px; align-items: flex-end; justify-content: center; padding-bottom: 22px; }
.demo-tally i, .demo-penalty__tally i {
  width: 5px; height: 44px; border-radius: 3px; background: var(--color-error);
  transform-origin: bottom; transition: transform .35s cubic-bezier(.3,1.6,.5,1);
}
.js-motion .feature:not(.is-active) .demo-tally i,
.js-motion .feature:not(.is-active) .demo-penalty__tally i { transform: scaleY(0); }
.demo-tally i:nth-child(2), .demo-penalty__tally i:nth-child(2) { transition-delay: .08s; }
.demo-tally i:nth-child(3), .demo-penalty__tally i:nth-child(3) { transition-delay: .16s; }
.demo-tally i:nth-child(4) { transition-delay: .24s; }

/* Straffenmodus: na de streepjes schuift de straftaak binnen */
.demo-penalty { display: flex; align-items: center; justify-content: center; gap: 16px; }
.demo-penalty__tally { display: flex; gap: 6px; align-items: flex-end; height: 44px; }
.demo-penalty__chip {
  padding: 6px 12px; border-radius: 10px; background: #C0322E; color: #fff; font-size: 12px; font-weight: 800;
  transition: opacity .3s .35s, transform .4s .35s cubic-bezier(.3,1.6,.5,1);
}
.js-motion .feature:not(.is-active) .demo-penalty__chip { opacity: 0; transform: translateX(16px); }

/* Medailles: ploft naar binnen */
.demo-medal span {
  position: absolute; left: 50%; top: 50%; font-size: 46px;
  transform: translate(-50%,-50%) scale(1.1); transition: transform .5s cubic-bezier(.3,1.8,.5,1);
}
.js-motion .feature:not(.is-active) .demo-medal span { transform: translate(-50%,-50%) scale(.6) rotate(-20deg); }

.band--steps { background: #fff; padding: 56px 0; border-top: 1px solid var(--color-neutral-200); }

/* ── Zo werkt het: lijn tekent zich van stap naar stap ── */
.steps { position: relative; display: flex; gap: 16px; justify-content: center; }
.step { flex: 1; min-width: 180px; text-align: center; padding: 24px; position: relative; }
.step__icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: #E8F5E9;
  display: flex; align-items: center; justify-content: center; font-size: 28px; position: relative; z-index: 1;
}
.step__icon--go { background: var(--color-primary-500); }
.step__title { font-weight: 800; font-size: 17px; color: var(--color-neutral-800); margin-bottom: 6px; }
.step__text { font-size: 14px; color: var(--color-neutral-600); line-height: 1.5; }
.steps__line {
  position: absolute; left: 12.5%; width: 75%; top: 51px; height: 2px; border-radius: 2px;
  background: #C8E6C9; transform-origin: left center;
}
.js-motion .steps__line { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); }
.js-motion .steps.is-drawn .steps__line { transform: none; }

/* ── Download-oproep: groen met bellen, zoals de hero ── */
.band--cta { padding: 72px 0; background: linear-gradient(160deg, #34A853 0%, #237A38 60%, #1B5E20 100%); overflow: hidden; color: #fff; }
.cta { text-align: center; z-index: 1; }
.cta h2 { font-size: clamp(1.6rem, 6vw, 40px); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.8px; }
.cta p { font-size: 18px; color: rgba(255,255,255,.9); margin: 0 0 30px; }

.store-badges { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.store-badge { display: flex; }
.store-badge img { height: 54px; display: block; }
.store-badge--soon { cursor: default; }
.band--footer { background: #212120; color: var(--color-neutral-200); padding: 44px 0; }

/* ── Zacht in beeld komen (alleen als JS draait en beweging mag) ── */
.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .7s cubic-bezier(0.22,1,0.36,1), translate .7s cubic-bezier(0.22,1,0.36,1);
}
.js-motion [data-reveal].is-visible { opacity: 1; translate: 0 0; }
/* Elementen die zelf ook een transform-overgang hebben: die hier opnieuw noemen,
   anders wint de reveal-transition en springt de kanteling/hover-lift. */
.js-motion .phone[data-reveal] {
  transition: opacity .7s cubic-bezier(0.22,1,0.36,1), translate .7s cubic-bezier(0.22,1,0.36,1), transform .15s ease-out;
}
.js-motion .clnd-phones.is-resting .phone[data-reveal] {
  transition: opacity .7s cubic-bezier(0.22,1,0.36,1), translate .7s cubic-bezier(0.22,1,0.36,1), transform .5s ease-out;
}
.js-motion .feature[data-reveal] {
  transition: opacity .7s cubic-bezier(0.22,1,0.36,1), translate .7s cubic-bezier(0.22,1,0.36,1), transform .25s, box-shadow .25s;
}
.clnd-phone-side.is-visible { opacity: 0.96; }

/* ── Tablet: drie telefoons en vier stappen passen niet naast elkaar ── */
@media (min-width: 641px) and (max-width: 1020px) {
  .clnd-phone-side { display: none !important; }
  .steps { flex-wrap: wrap; }
  .step { flex: 1 1 calc(50% - 8px); min-width: 0; }
  .steps__line { display: none; }
}

/* ── Mobiel ── */
@media (max-width: 640px) {
  .container { padding-inline: 20px; }
  .clnd-phones { gap: 0; }
  .clnd-phone-side { display: none !important; }
  .bento { grid-template-columns: 1fr; }
  .feature--fair { grid-column: auto; }
  .steps { flex-direction: column; gap: 0; }
  .step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; text-align: left; padding: 16px 0; align-items: center; }
  .step__icon { margin: 0; }
  .steps__line { left: 27px; width: 2px; top: 44px; height: calc(100% - 88px); transform-origin: center top; }
  .js-motion .steps__line { transform: scaleY(0); }
}

/* ── Minder beweging: alles stil en zichtbaar ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}