/* =========================================================
   GHANIA GAWAI
   Homepage
   ========================================================= */


/* =========================================================
   01. HERO
   ========================================================= */

.home-hero {
  position: relative;

  min-height: 660px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f8fcff 0%,
      #eef8ff 48%,
      #ecfbf7 100%
    );
}

.home-hero::before {
  content: "";

  position: absolute;

  top: -260px;
  right: -140px;

  width: 580px;
  height: 580px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(20, 146, 222, 0.13),
      rgba(20, 146, 222, 0)
    );

  pointer-events: none;
}

.home-hero::after {
  content: "";

  position: absolute;

  bottom: -230px;
  left: -210px;

  width: 440px;
  height: 440px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(73, 207, 182, 0.13),
      rgba(73, 207, 182, 0)
    );

  pointer-events: none;
}

.home-hero__container {
  position: relative;

  z-index: 2;

  padding-top: 64px;
  padding-bottom: 64px;

  display: grid;

  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(400px, 0.92fr);

  align-items: center;

  gap: 64px;
}


/* =========================================================
   02. HERO CONTENT
   ========================================================= */

.home-hero__content {
  width: 100%;

  max-width: 660px;
}

.home-hero__eyebrow {
  margin-bottom: 18px;

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color: var(--color-primary);

  font-size: 12px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}

.home-hero__eyebrow::before {
  content: "";

  width: 26px;
  height: 2px;

  flex-shrink: 0;

  background:
    var(--color-primary);

  border-radius:
    var(--radius-full);
}

.home-hero__title {
  max-width: 640px;

  margin-bottom: 22px;

  font-size:
    clamp(
      48px,
      5.3vw,
      72px
    );

  font-weight: 800;

  line-height: 0.99;

  letter-spacing: -0.052em;
}

.home-hero__title-highlight {
  position: relative;

  display: inline;

  color:
    var(--color-primary);
}

.home-hero__description {
  max-width: 570px;

  margin-bottom: 28px;

  color:
    var(--color-muted);

  font-size: 17px;

  line-height: 1.72;
}

.home-hero__actions {
  margin-bottom: 30px;

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 10px;
}


/* =========================================================
   03. HERO HIGHLIGHTS
   ========================================================= */

.home-hero__highlights {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap:
    10px
    20px;
}

.home-hero-highlight {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    var(--color-text);

  font-size: 12px;
  font-weight: 600;
}

.home-hero-highlight__icon {
  width: 29px;
  height: 29px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    rgba(255, 255, 255, 0.78);

  border:
    1px solid
    rgba(20, 146, 222, 0.14);

  border-radius: 9px;
}

.home-hero-highlight__icon svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   04. HERO VISUAL
   ========================================================= */

.home-hero__visual {
  position: relative;

  width: 100%;

  min-height: 480px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.home-hero__visual-card {
  position: relative;

  z-index: 2;

  width: min(100%, 430px);

  overflow: hidden;

  background:
    var(--color-white);

  border:
    1px solid
    rgba(255, 255, 255, 0.82);

  border-radius: 32px;

  box-shadow:
    0 30px 72px
    rgba(32, 83, 116, 0.14);
}

.home-hero__visual-card img {
  width: 100%;
  height: 480px;

  display: block;

  object-fit: cover;
}

.home-hero__visual::before {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--color-primary),
      var(--color-secondary)
    );

  opacity: 0.11;

  transform:
    translate(
      52px,
      18px
    );

  pointer-events: none;
}


/* =========================================================
   05. HERO FLOATING CARDS
   ========================================================= */

.home-hero-float {
  position: absolute;

  z-index: 4;

  padding:
    12px
    15px;

  display: flex;

  align-items: center;

  gap: 9px;

  background:
    rgba(255, 255, 255, 0.94);

  border:
    1px solid
    rgba(226, 232, 240, 0.92);

  border-radius: 15px;

  box-shadow:
    0 16px 36px
    rgba(15, 23, 42, 0.09);

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.home-hero-float--top {
  top: 58px;
  left: -18px;
}

.home-hero-float--bottom {
  right: -18px;
  bottom: 62px;
}

.home-hero-float__icon {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 11px;
}

.home-hero-float__icon svg {
  width: 17px;
  height: 17px;
}

.home-hero-float__label {
  display: block;

  margin-bottom: 1px;

  color:
    var(--color-muted);

  font-size: 9px;
  font-weight: 600;

  line-height: 1.3;

  letter-spacing: 0.05em;

  text-transform: uppercase;
}

.home-hero-float__value {
  display: block;

  color:
    var(--color-dark);

  font-size: 12px;
  font-weight: 800;

  line-height: 1.35;
}


/* =========================================================
   06. HERO IMAGE ERROR STATE
   ========================================================= */

.home-hero__visual.is-image-missing {
  min-height: 0;
}

.home-hero__visual.is-image-missing
.home-hero__visual-card,
.home-hero__visual.is-image-missing
.home-hero-float,
.home-hero__visual.is-image-missing::before {
  display: none;
}


/* =========================================================
   07. DEVICE SEARCH
   ========================================================= */

.home-device-search {
  position: relative;

  z-index: 5;

  margin-top: -42px;
}

.home-device-search__box {
  padding: 26px;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-xl);

  box-shadow:
    0 18px 48px
    rgba(15, 23, 42, 0.08);
}

.home-device-search__layout {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.72fr)
    minmax(340px, 1.28fr);

  align-items: center;

  gap: 30px;
}

.home-device-search__content {
  min-width: 0;
}

.home-device-search__eyebrow {
  margin-bottom: 7px;

  color:
    var(--color-primary);

  font-size: 10px;
  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.09em;

  text-transform: uppercase;
}

.home-device-search__title {
  margin-bottom: 6px;

  font-size: 22px;
}

.home-device-search__description {
  margin: 0;

  color:
    var(--color-muted);

  font-size: 12px;

  line-height: 1.6;
}


/* =========================================================
   08. DEVICE SEARCH INPUT
   ========================================================= */

.device-search {
  position: relative;

  min-width: 0;
}

.device-search__input-wrap {
  position: relative;

  width: 100%;
}

.device-search__icon {
  position: absolute;

  top: 50%;
  left: 16px;

  width: 18px;
  height: 18px;

  display: grid;

  place-items: center;

  color:
    var(--color-muted);

  transform:
    translateY(-50%);

  pointer-events: none;
}

.device-search__icon svg {
  width: 100%;
  height: 100%;
}

.device-search__input {
  width: 100%;
  height: 54px;

  padding:
    0
    48px
    0
    45px;

  color:
    var(--color-dark);

  background:
    var(--color-background);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  outline: none;

  font-size: 13px;

  transition:
    border-color
    var(--transition-base),
    box-shadow
    var(--transition-base),
    background-color
    var(--transition-base);
}

.device-search__input::placeholder {
  color:
    var(--color-placeholder);
}

.device-search__input:hover {
  border-color:
    var(--color-border-dark);
}

.device-search__input:focus {
  background:
    var(--color-white);

  border-color:
    var(--color-primary);

  box-shadow:
    0 0 0 4px
    rgba(20, 146, 222, 0.09);
}

.device-search__clear {
  position: absolute;

  top: 50%;
  right: 12px;

  width: 30px;
  height: 30px;

  display: none;

  place-items: center;

  color:
    var(--color-muted);

  border-radius: 8px;

  transform:
    translateY(-50%);

  transition:
    color
    var(--transition-fast),
    background-color
    var(--transition-fast);
}

.device-search__clear.is-visible {
  display: grid;
}

.device-search__clear:hover {
  color:
    var(--color-dark);

  background:
    var(--color-background-soft);
}


/* =========================================================
   09. SEARCH DROPDOWN
   ========================================================= */

.device-search-results {
  position: absolute;

  top:
    calc(100% + 8px);

  right: 0;
  left: 0;

  z-index: 30;

  max-height: 340px;

  padding: 7px;

  overflow-y: auto;

  display: none;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-lg);
}

.device-search-results.is-open {
  display: block;
}

.device-search-result {
  width: 100%;

  padding: 10px;

  display: flex;

  align-items: center;

  gap: 12px;

  border-radius:
    var(--radius-md);

  transition:
    background-color
    var(--transition-fast);
}

.device-search-result:hover {
  background:
    var(--color-background);
}

.device-search-result__icon {
  width: 42px;
  height: 42px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 11px;
}

.device-search-result__icon svg {
  width: 19px;
  height: 19px;
}

.device-search-result__content {
  min-width: 0;

  flex: 1;
}

.device-search-result__brand {
  margin-bottom: 1px;

  color:
    var(--color-muted);

  font-size: 10px;
}

.device-search-result__model {
  overflow: hidden;

  color:
    var(--color-dark);

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;

  text-overflow: ellipsis;
}

.device-search-result__model strong {
  color:
    var(--color-primary);
}

.device-search-result__action {
  flex-shrink: 0;

  color:
    var(--color-primary);

  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   10. BRANDS
   ========================================================= */

.home-brands {
  padding-top: 112px;
}

.brand-grid {
  display: grid;

  grid-template-columns:
    repeat(
      6,
      minmax(0, 1fr)
    );

  gap: 12px;
}

.brand-card {
  min-width: 0;
  min-height: 124px;

  padding: 18px;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 10px;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  transition:
    transform
    var(--transition-base),
    border-color
    var(--transition-base),
    box-shadow
    var(--transition-base);
}

.brand-card:hover {
  border-color:
    rgba(20, 146, 222, 0.25);

  box-shadow:
    var(--shadow-md);

  transform:
    translateY(-3px);
}

.brand-card__logo {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;
}

.brand-card__logo img {
  width: auto;
  height: auto;

  max-width: 40px;
  max-height: 40px;

  object-fit: contain;
}

.brand-card__name {
  color:
    var(--color-dark);

  font-size: 12px;
  font-weight: 700;

  text-align: center;
}


/* =========================================================
   11. HOW IT WORKS
   ========================================================= */

.home-process {
  overflow: hidden;

  background:
    var(--color-background);
}

.home-process__grid {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.home-process__grid::before {
  content: "";

  position: absolute;

  top: 34px;
  right: 7%;
  left: 7%;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(20, 146, 222, 0),
      rgba(20, 146, 222, 0.22),
      rgba(20, 146, 222, 0)
    );

  pointer-events: none;
}

.process-card {
  position: relative;

  z-index: 2;

  min-width: 0;

  padding: 20px;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-xs);
}

.process-card__top {
  margin-bottom: 19px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}

.process-card__icon {
  width: 48px;
  height: 48px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 14px;
}

.process-card__icon svg {
  width: 21px;
  height: 21px;
}

.process-card__number {
  color:
    var(--color-border-dark);

  font-size: 21px;
  font-weight: 800;
}

.process-card__title {
  margin-bottom: 7px;

  font-size: 16px;
}

.process-card__description {
  margin: 0;

  color:
    var(--color-muted);

  font-size: 12px;

  line-height: 1.65;
}

.home-process__footer {
  margin-top: 32px;

  text-align: center;
}


/* =========================================================
   12. WHY GHANIA
   ========================================================= */

.home-why__layout {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.82fr)
    minmax(0, 1.18fr);

  align-items: center;

  gap: 64px;
}

.home-why__content {
  max-width: 470px;
}

.home-why__content
.section-description {
  margin-bottom: 26px;
}

.home-why__grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.why-card {
  min-width: 0;

  padding: 23px;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-xs);

  transition:
    transform
    var(--transition-base),
    box-shadow
    var(--transition-base),
    border-color
    var(--transition-base);
}

.why-card:hover {
  border-color:
    rgba(20, 146, 222, 0.22);

  box-shadow:
    var(--shadow-md);

  transform:
    translateY(-3px);
}

.why-card__icon {
  width: 44px;
  height: 44px;

  margin-bottom: 17px;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 13px;
}

.why-card__icon svg {
  width: 20px;
  height: 20px;
}

.why-card__title {
  margin-bottom: 7px;

  font-size: 16px;
}

.why-card__description {
  margin: 0;

  color:
    var(--color-muted);

  font-size: 12px;

  line-height: 1.65;
}


/* =========================================================
   13. FEATURED DEVICES
   ========================================================= */

.home-featured-devices {
  background:
    var(--color-background);
}

.featured-device-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 14px;
}

.device-card {
  min-width: 0;

  overflow: hidden;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  transition:
    transform
    var(--transition-base),
    box-shadow
    var(--transition-base),
    border-color
    var(--transition-base);
}

.device-card:hover {
  border-color:
    rgba(20, 146, 222, 0.24);

  box-shadow:
    var(--shadow-md);

  transform:
    translateY(-3px);
}

.device-card__visual {
  position: relative;

  aspect-ratio:
    1 / 0.78;

  display: grid;

  place-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      #f8fafc,
      #edf7fc
    );
}

.device-card__visual img {
  width: 68%;
  height: 76%;

  object-fit: contain;
}

.device-card__visual
> span[aria-hidden="true"] {
  display: block;
}

.device-card__visual
> span[aria-hidden="true"]
svg {
  width: 100%;
  height: auto;
}

.device-card__badge {
  position: absolute;

  top: 10px;
  left: 10px;

  z-index: 2;
}

.device-card__body {
  padding: 16px;
}

.device-card__brand {
  margin-bottom: 3px;

  color:
    var(--color-muted);

  font-size: 10px;
  font-weight: 600;
}

.device-card__name {
  margin-bottom: 10px;

  font-size: 15px;
}

.device-card__storage {
  margin-bottom: 15px;

  display: flex;

  flex-wrap: wrap;

  gap: 5px;
}

.device-card__storage-item {
  padding:
    4px
    7px;

  color:
    var(--color-text);

  background:
    var(--color-background);

  border-radius: 7px;

  font-size: 9px;
  font-weight: 700;
}

.device-card__action {
  width: 100%;
}

.featured-device-footer {
  margin-top: 32px;

  text-align: center;
}


/* =========================================================
   14. PROCESS NOTICE
   ========================================================= */

.home-process-notice__box {
  position: relative;

  padding: 44px;

  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(280px, 0.88fr);

  align-items: center;

  gap: 46px;

  color:
    rgba(255, 255, 255, 0.78);

  background:
    linear-gradient(
      135deg,
      #102a43,
      #123c58
    );

  border-radius:
    var(--radius-2xl);
}

.home-process-notice__box::after {
  content: "";

  position: absolute;

  right: -170px;
  bottom: -230px;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(73, 207, 182, 0.25),
      rgba(73, 207, 182, 0)
    );

  pointer-events: none;
}

.home-process-notice__content {
  position: relative;

  z-index: 2;
}

.home-process-notice__eyebrow {
  margin-bottom: 10px;

  color:
    var(--color-secondary);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.1em;

  text-transform: uppercase;
}

.home-process-notice__title {
  max-width: 610px;

  margin-bottom: 14px;

  color:
    var(--color-white);

  font-size: 32px;

  line-height: 1.15;
}

.home-process-notice__description {
  max-width: 620px;

  margin-bottom: 22px;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 14px;

  line-height: 1.75;
}

.home-process-notice__list {
  position: relative;

  z-index: 2;

  padding: 21px;

  background:
    rgba(255, 255, 255, 0.07);

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius:
    var(--radius-lg);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.home-process-notice__list ul {
  padding: 0;
  margin: 0;

  display: flex;

  flex-direction: column;

  gap: 11px;

  list-style: none;
}

.home-process-notice__list li {
  display: flex;

  align-items: center;

  gap: 9px;

  color:
    rgba(255, 255, 255, 0.82);

  font-size: 12px;
}

.home-process-notice__list
li::before {
  content: "✓";

  width: 21px;
  height: 21px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-secondary);

  background:
    rgba(73, 207, 182, 0.12);

  border-radius: 50%;

  font-size: 10px;
  font-weight: 800;
}


/* =========================================================
   15. TESTIMONIALS
   ========================================================= */

.home-testimonials {
  overflow: hidden;
}

.testimonial-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;
}

.testimonial-card {
  min-width: 0;

  padding: 23px;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-xs);
}

.testimonial-card__rating {
  margin-bottom: 16px;

  display: flex;

  gap: 3px;

  color: #f59e0b;
}

.testimonial-card__quote {
  margin-bottom: 21px;

  color:
    var(--color-text);

  font-size: 13px;

  line-height: 1.75;
}

.testimonial-card__footer {
  display: flex;

  align-items: center;

  gap: 11px;
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;

  flex-shrink: 0;

  overflow: hidden;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 50%;

  font-size: 13px;
  font-weight: 800;
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.testimonial-card__name {
  display: block;

  color:
    var(--color-dark);

  font-size: 12px;
  font-weight: 700;
}

.testimonial-card__meta {
  display: block;

  color:
    var(--color-muted);

  font-size: 10px;
}


/* =========================================================
   16. FAQ PREVIEW
   ========================================================= */

.home-faq {
  background:
    var(--color-background);
}

.home-faq__layout {
  display: grid;

  grid-template-columns:
    minmax(260px, 0.67fr)
    minmax(0, 1.33fr);

  gap: 64px;
}

.home-faq__intro {
  position: sticky;

  top: 110px;

  align-self: start;
}

.home-faq__intro
.section-description {
  margin-bottom: 22px;
}

.faq-list {
  display: flex;

  flex-direction: column;

  gap: 9px;
}

.faq-item {
  overflow: hidden;

  background:
    var(--color-white);

  border:
    1px solid
    var(--color-border);

  border-radius:
    var(--radius-md);

  transition:
    border-color
    var(--transition-base),
    box-shadow
    var(--transition-base);
}

.faq-item.is-open {
  border-color:
    rgba(20, 146, 222, 0.25);

  box-shadow:
    var(--shadow-sm);
}

.faq-item__button {
  width: 100%;

  padding:
    17px
    18px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 18px;

  text-align: left;
}

.faq-item__question {
  color:
    var(--color-dark);

  font-size: 13px;
  font-weight: 700;

  line-height: 1.5;
}

.faq-item__icon {
  width: 27px;
  height: 27px;

  flex-shrink: 0;

  display: grid;

  place-items: center;

  color:
    var(--color-primary);

  background:
    var(--color-primary-soft);

  border-radius: 8px;

  transition:
    transform
    var(--transition-base);
}

.faq-item.is-open
.faq-item__icon {
  transform:
    rotate(45deg);
}

.faq-item__answer {
  max-height: 0;

  overflow: hidden;

  transition:
    max-height
    320ms ease;
}

.faq-item__answer-inner {
  padding:
    0
    18px
    18px;

  color:
    var(--color-muted);

  font-size: 12px;

  line-height: 1.7;
}


/* =========================================================
   17. FINAL CTA
   ========================================================= */

.home-final-cta {
  padding-bottom: 84px;
}

.home-final-cta__box {
  position: relative;

  min-height: 390px;

  padding: 50px;

  overflow: hidden;

  display: flex;

  align-items: center;

  background:
    linear-gradient(
      135deg,
      #e8f6fd,
      #eafaf7
    );

  border:
    1px solid
    rgba(20, 146, 222, 0.12);

  border-radius:
    var(--radius-2xl);
}

.home-final-cta__content {
  position: relative;

  z-index: 3;

  max-width: 560px;
}

.home-final-cta__title {
  margin-bottom: 15px;

  font-size: 38px;

  line-height: 1.15;
}

.home-final-cta__description {
  max-width: 510px;

  margin-bottom: 24px;

  color:
    var(--color-muted);

  font-size: 15px;

  line-height: 1.72;
}

.home-final-cta__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;
}

.home-final-cta__visual {
  position: absolute;

  top: 0;
  right: 0;

  width: 42%;
  height: 100%;
}

.home-final-cta__visual::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      90deg,
      #e9f7fb 0%,
      rgba(233, 247, 251, 0.3) 38%,
      rgba(233, 247, 251, 0) 100%
    );

  pointer-events: none;
}

.home-final-cta__visual img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
}


/* =========================================================
   18. FINAL CTA IMAGE ERROR
   ========================================================= */

.home-final-cta__visual.is-image-missing {
  display: none;
}

.home-final-cta__box:has(
  .home-final-cta__visual.is-image-missing
) {
  min-height: auto;
}


/* =========================================================
   19. SECTION FOOTERS
   ========================================================= */

.home-section-footer {
  margin-top: 30px;

  display: flex;

  align-items: center;
  justify-content: center;
}