/* ===================== NETLIFY - MAIN.CSS (UPDATED - FULL FILE) ===================== */

body {
  opacity: 0;
}

/* --------------------- Navbar Scroll Styles --------------------- */
.navbar {
  transition: transform 0.3s ease-in-out;
  z-index: 1000;
}

.navbar--bg {
  transition: opacity 0.3s ease-in-out;
  will-change: background-color, border-bottom-color;
}

/* --------------------- Navbar Dropdown Styles --------------------- */
.navbar--dropdown {
  position: relative;
}

.navbar--dropdown-trigger {
  cursor: pointer;
}

@media (min-width: 992px) {
  .navbar--dropdown-trigger {
    will-change: color;
  }

  .navlink .dropdown--line {
    will-change: width;
  }

  .dropdown--line {
    will-change: width;
  }
}

.navbar--dropdown-list {
  overflow: auto;
  will-change: height;
}

.btn.is--nav {
  will-change: background-color, color;
}

/* --------------------- Navbar Solution Items Hover (Desktop) --------------------- */
@media (min-width: 992px) {
  .navbar--solution-item {
    cursor: pointer;
    will-change: opacity;
  }

  .solution--svg-item {
    will-change: opacity, transform;
  }

  .navbar--solution-item .paragraph-small-130 {
    will-change: opacity, transform;
  }
}

/* --------------------- Resource Links Hover (Desktop) --------------------- */
@media (min-width: 992px) {
  .resource--link {
    cursor: pointer;
    will-change: opacity;
  }

  .resource--link-svg {
    will-change: opacity, transform;
  }
}

/* --------------------- Mobile Navbar Dropdown Styles --------------------- */
@media (max-width: 991px) {
  .navbar--dropdown-trigger {
    cursor: pointer;
  }

  .navbar--dropdown-list {
    will-change: transform;
  }

  .navbar--dropdown-bg {
    will-change: opacity;
  }

  .navbar--goback {
    cursor: pointer;
  }
}

/* --------------------- Mobile Hamburger Menu Styles --------------------- */
@media (max-width: 991px) {
  .menu--trigger {
    cursor: pointer;
  }

  .menu--open,
  .menu--close {
    will-change: opacity;
  }

  .navbar-menu--inner {
    will-change: transform;
  }

  [animate="navbar"] {
    will-change: opacity, transform;
  }
}

/* --------------------- Eyebrow Animation Styles --------------------- */
[animation="eyebrow"] {
  position: relative;
  overflow: hidden;
  display: inline-block;
  white-space: nowrap;
}

[animation="eyebrow"] .char {
  display: inline-block;
  letter-spacing: 0.05em;
  will-change: transform, opacity;
}

[animation="eyebrow"] .space {
  display: inline-block;
  white-space: pre;
}

/* --------------------- ✅ HERO IMAGE SWITCH STYLES (SMOOTH) --------------------- */
.section.is--home-hero {
  position: relative;
}

/* Base: all hero imgs are hidden by default */
.section.is--home-hero img.absolute--img[image] {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 450ms ease;
  will-change: opacity;
}

/* Active */
.section.is--home-hero img.absolute--img.is-active {
  opacity: 1;
}

/* Optional: reduce flicker on some browsers */
.section.is--home-hero img.absolute--img[image] {
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* --------------------- Hover Circle Styles --------------------- */
.trusted--logo-parent {
  position: relative;
  overflow: hidden;
}

.hover--circle {
  position: absolute;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  will-change: transform, opacity;
  top: 0;
  left: 0;
}

/* ✅ Layering fix so it looks like before */
.trusted--logo {
  position: relative;
  z-index: 2;
  display: block;
}

.trusted--logo-parent .hover--circle {
  z-index: 1;
}

.lines {
  position: relative;
  overflow: hidden;
}

.hover--circle.is--100 {
  transform: scale(1);
}

/* --------------------- ✅ Offer Slide Styles (DESKTOP - keep original display/position) --------------------- */
@media (min-width: 992px) {
  .offer--slide {
    cursor: pointer;
    transition: opacity 0.25s ease;
  }

  /* We only toggle opacity/visibility/pointer-events (keep layout intact) */
  .offer--slide-icon,
  .offer--slide-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .offer--slide.is-offer-active .offer--slide-icon,
  .offer--slide.is-offer-active .offer--slide-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .offer--slide-content-parent {
    z-index: 1;
  }

  .offer--slide.is-offer-active .offer--slide-content-parent {
    z-index: 5;
  }
}

/* --------------------- ✅ Offer Slider (MOBILE) - SECOND SWIPER --------------------- */
@media (max-width: 991px) {
  .offer-slider-btn {
    cursor: pointer;
  }

  .offer-slider-btn.swiper-button-disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .swiper.is--offer-mobile {
    transition: padding 0.5s ease-in-out;
    padding-left: 0;
    padding-right: 0;
  }

  .swiper.is--offer-mobile.is--first {
    padding-left: 0;
    padding-right: 0;
  }

  .swiper.is--offer-mobile.is--middle {
    padding-left: 10vw;
    padding-right: 10vw;
  }

  .swiper.is--offer-mobile.is--last {
    padding-left: 10vw;
    padding-right: 0;
  }

  .swiper.is--offer-mobile .swiper-slide {
    width: 78.66vw;
  }
}

/* --------------------- How It Works Scroll Animation Styles --------------------- */
@media (min-width: 992px) {
  .howitworks--content {
    will-change: opacity;
  }

  .howitworks--response {
    overflow: hidden;
    will-change: height;
  }

  .howitworks--line {
    will-change: width;
  }

  .howitworks--img {
    will-change: transform;
  }

  .howitworks--img--inner {
    will-change: transform, filter;
  }
}

@media (max-width: 991px) {
  .howitworks--content {
    opacity: 1 !important;
  }

  .howitworks--response {
    height: auto !important;
  }

  .howitworks--line {
    width: 100% !important;
  }

  .howitworks--img {
    transform: none !important;
  }

  .howitworks--img--inner {
    transform: none !important;
  }
}

/* --------------------- What Offers Hover Circle Styles --------------------- */
.relative.is--whatworks {
  position: relative;
  overflow: hidden;
}

.hover--circle.is--what {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity;
  transform: translate(-50%, -50%);
  top: 0;
  left: 0;
}

/* --------------------- Number Counter Animation Styles --------------------- */
.number--count {
  display: inline-flex;
}

.digit-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.digit {
  display: inline-block;
}

.digit-column {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.digit-item {
  display: block;
  line-height: 1;
}

/* --------------------- Footer Accordion (Mobile) --------------------- */
@media (max-width: 991px) {
  .footer--title-parent {
    cursor: pointer;
  }

  .footer--inner {
    overflow: hidden;
  }

  .footer-title-icon {
    transition: transform 0.3s ease;
    will-change: transform;
  }
}

/* --------------------- Button Hover Animation Styles --------------------- */
.btn {
  cursor: pointer;
}

.hover--close,
.hover--open {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  will-change: width;
}

/* --------------------- Button's scroll Hover Animation Styles --------------------- */
.hero--btn-wrapper .hover--open {
  overflow: hidden;
  position: relative;
}

.hero--btn-wrapper .hover--close-inner svg {
  display: block;
  will-change: transform;
}

/* --------------------- Smooth blur transition --------------------- */
.howitworks--img--inner {
  filter: blur(0rem);
  transition: filter 0.6s ease;
  will-change: filter;
}

/* --------------------- image relative --------------------- */
@media (min-width: 992px) {
  .section.is--image.is--relative {
    position: relative;
    top: auto;
  }
}

/* =========================================================
   ✅ iOS / Safari FIXES (Offer slider blur flash + number blink)
   - Stabilize compositing layers
   - Reduce sub-pixel jitter
========================================================= */

/* Stabilize slider layers on iOS Safari */
.swiper.is--offer-mobile,
.swiper.is--offer-mobile .swiper-wrapper,
.swiper.is--offer-mobile .swiper-slide,
.swiper.is--offer-mobile .mask--blur,
.swiper.is--offer-mobile .swiper-mobile-top,
.swiper.is--offer-mobile .swiper-mobile-bottom {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}

/* During swipe/transition: keep blur layer stable */
.swiper.is--offer-mobile.is--swiping .mask--blur {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Digits: avoid width changes + improve iOS text rendering */
.swiper.is--offer-mobile .heading-display--xxlarge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Prefer backdrop-filter when available (less “flashy” than filter: blur) */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .swiper.is--offer-mobile .mask--blur {
    /* keep your background color as-is from Webflow */
    filter: none !important;
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
  }
}