/* De brede vlakken die de pagina ritme geven: cijfers, koppelingen,
   garantie, slot-CTA en de aanmeldbalk. */

@layer components {
  /* Cijferrij ------------------------------------------------------ */
  .stats {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    text-align: center;
  }

  .stats__figure {
    display: block;
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .stats__label {
    display: block;
    margin-block-start: var(--space-2xs);
    color: var(--color-muted);
    font-size: var(--step--1);
  }

  .section--dark .stats__figure {
    background: linear-gradient(92deg, #c4b5fd 0%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .section--dark .stats__label {
    color: rgb(255 255 255 / 0.65);
  }

  .stats > * + * {
    position: relative;
  }

  /* Koppelingen ---------------------------------------------------- */
  /* De rij op de homepage is een doorlopende band; zie marquee.css. */

  /* Garantie ------------------------------------------------------- */
  .guarantee {
    display: grid;
    gap: var(--space-m);
    padding: var(--space-xl);
    border-radius: var(--radius);
    background: var(--gradient-dark);
    color: #ffffff;
  }

  .guarantee h2 {
    font-size: var(--step-3);
    font-weight: 800;
  }

  .guarantee em {
    color: #22d3ee;
    font-style: normal;
  }

  .guarantee p {
    color: rgb(255 255 255 / 0.7);
  }

  .guarantee__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  /* Slot-CTA ------------------------------------------------------- */
  .cta-band {
    display: grid;
    gap: var(--space-l);
    align-items: center;
    padding: var(--space-xl);
    border-radius: var(--radius);
    background: var(--gradient-brand);
    color: #ffffff;
  }

  .cta-band h2 {
    font-size: var(--step-3);
    font-weight: 800;
  }

  .cta-band p {
    color: rgb(255 255 255 / 0.85);
  }

  .cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }

  .cta-band__note {
    flex-basis: 100%;
    font-size: var(--step--1);
    opacity: 0.8;
  }

  @media (min-width: 56rem) {
    .cta-band {
      grid-template-columns: 1.1fr 1fr;
      gap: var(--space-2xl);
    }
  }

  /* Aanmeldbalk onderaan het scherm -------------------------------- */
  .signup-bar {
    position: sticky;
    bottom: 0;
    z-index: 15;
    padding-block: var(--space-xs);
    background: var(--color-ink);
    color: #ffffff;
  }

  .signup-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
  }

  .signup-bar p {
    margin: 0;
    font-size: var(--step--1);
    font-weight: 500;
  }

  .signup-bar__close {
    padding: 0.2rem 0.5rem;
    border: 0;
    background: transparent;
    color: rgb(255 255 255 / 0.6);
    font: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .signup-bar__close:hover {
    color: #ffffff;
  }
}