@layer components {

  .filler-cta {
    container-type: inline-size;
    container-name: filler-cta;
    position: relative;
    min-height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-block: var(--space-3xl);
  }

  .filler-cta__bg  { position: absolute; inset: 0; z-index: 0; }

  .filler-cta__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .filler-cta__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      135deg,
      oklch(0.08 0.005 18 / 0.64) 0%,
      oklch(0.12 0.01 91 / 0.48) 100%
    );
  }

  .filler-cta__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 72rem;
  }

  .filler-cta__title {
    font-size: var(--text-3xl);
    font-weight: var(--weight-semibold);
    color: var(--always-light);
    line-height: 1.15;
    margin-bottom: var(--space-m);
    letter-spacing: -0.01em;
  }

  .filler-cta__subtitle {
    font-size: var(--text-l);
    color: var(--always-light);
    opacity: 0.85;
    line-height: 1.5;
    margin-bottom: var(--space-xl);
    max-width: 54rem;
    margin-inline: auto;
  }

  .filler-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-m);
    flex-wrap: wrap;
  }

  .filler-cta__btn--outline {
    background: transparent;
    border-color: var(--always-light);
    color: var(--always-light);
  }

  .filler-cta__btn--outline:hover {
    background: var(--always-light);
    color: var(--text-body);
    border-color: var(--always-light);
  }

  .filler-cta__btn .icon { width: 1.6rem; height: 1.6rem; }

  @container filler-cta (max-width: 640px) {
    .filler-cta__title    { font-size: var(--text-2xl); }
    .filler-cta__subtitle { font-size: var(--text-m); }
    .filler-cta__actions  { flex-direction: column; gap: var(--space-s); }
    .filler-cta__btn      { width: 100%; }
  }
}