/* ==========================================================================
   KOBIL — Homepage: closing CTA
   Figma: D-Homepage → 6019:111836 (image rect 6019:111838, 1440x811),
   mobile inside 6160:81441.

   Replaces `pre-footer-cta` on the homepage only — that partial stays for
   the resources pages, which still use it as a shared section.
   ========================================================================== */

.sec-cta-home {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--w811);
  background-image: url(/assets/cta-home/bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.sec-cta-home__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--w48);
  padding: 0 var(--w24);
  text-align: center;
}

.sec-cta-home__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--w12);
  font-weight: 600;
  line-height: var(--w18);
  letter-spacing: 2.04px;
  text-transform: uppercase;
  color: #f9fafd;
}

.sec-cta-home__title {
  margin-top: var(--w14);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--w64);
  line-height: 1.2;
  color: var(--white);
}

.sec-cta-home__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--w20);
}

.sec-cta-home__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w24);
  border-radius: var(--w32);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.sec-cta-home__btn img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.sec-cta-home__btn:hover img {
  transform: translateX(3px);
}

.sec-cta-home__btn--primary {
  background: var(--btn-blue);
  color: var(--white);
}

.sec-cta-home__btn--primary:hover {
  background: #1046cf;
}

.sec-cta-home__btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.sec-cta-home__btn--ghost:hover {
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 768px) {
  /* Figma's phone frame (inside 6160:81442, 393x572): content TOP-aligned,
     text block starting 79px down — not vertically centred like desktop. */
  .sec-cta-home {
    min-height: var(--m572);
    align-items: flex-start;
    background-image: url(/assets/cta-home/bg-mobile.webp);
  }

  .sec-cta-home__content {
    gap: var(--m32);
    padding-top: var(--m79);
  }

  .sec-cta-home__title {
    font-size: var(--m36);
  }

  /* Figma's phone frame (inside 6160:81441): 40px small buttons, and the
     ghost one is NAVY-on-light, not white — the phone crop of the artwork is
     bright where the buttons sit. */
  .sec-cta-home__btn {
    height: var(--m40);
    padding: var(--m4) var(--m16);
    font-size: var(--m14);
  }

  .sec-cta-home__btn--ghost {
    border-color: var(--navy);
    color: var(--navy);
  }

  .sec-cta-home__btn--ghost img {
    filter: brightness(0) saturate(100%) invert(11%) sepia(31%) saturate(2622%) hue-rotate(199deg) brightness(95%) contrast(95%);
  }

  .sec-cta-home__btn--ghost:hover {
    border-color: var(--navy);
    background: rgba(17, 36, 74, 0.08);
  }
}