/* ==========================================================
   AIKCU — HERO FINAL DESKTOP v1

   Fixes v1 integration:
   - desktop asset becomes a true full-bleed Hero background;
   - no separate rectangular scene block;
   - mobile uses only the useful lower part of the vertical asset;
   - all text/buttons/header remain live HTML/CSS;
   - other accepted sections remain untouched.
   ========================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
}

.hero::before,
.hero::after,
.hero__background::before,
.hero__background::after {
  display: none !important;
}

/* Old Hero helper layers are not needed with one complete scene. */
.hero__atmosphere,
.hero__plane {
  display: none !important;
}

.hero__background {
  z-index: 0 !important;
  background: none !important;
  overflow: hidden !important;
}

.hero__background img {
  display: block !important;
  max-width: none !important;
  filter: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.hero__inner {
  position: relative;
  z-index: 3;
}

.hero__content {
  position: relative;
  z-index: 4;
}

/* ----------------------------------------------------------
   Desktop >= 1081
   One continuous full-width scene.
   ---------------------------------------------------------- */

@media (min-width: 1081px) {
  .hero {
    min-height: 41rem !important;
    padding-bottom: 0 !important;
  }

  .hero__inner {
    min-height: 41rem !important;
    padding-top: 4.7rem !important;
    padding-bottom: .6rem !important;
  }

  .hero__background {
    position: absolute !important;
    top: 0 !important;
    right: max(0rem, calc((100vw - 120rem) / 2)) !important;
    left: auto !important;
    bottom: auto !important;
    width: min(100vw, 120rem) !important;
    height: auto !important;
    aspect-ratio: 1920 / 700 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero__background img {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  .ecosystem-step {
    margin-top: -3.6rem !important;
  }
}

/* ----------------------------------------------------------
   Tablet 761–1080
   Same full-bleed idea, slightly more right-biased crop.
   ---------------------------------------------------------- */

@media (max-width: 1080px) and (min-width: 761px) {
  .hero {
    min-height: 39rem !important;
    padding-bottom: 0 !important;
  }

  .hero__inner {
    min-height: 39rem !important;
    padding-top: 4.8rem !important;
    padding-bottom: .6rem !important;
  }

  .hero__background {
    position: absolute !important;
    top: 2.5rem !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: auto !important;
    aspect-ratio: 1920 / 700 !important;
    transform: none !important;
    overflow: visible !important;
  }

  .hero__background img {
    position: absolute !important;
    inset: 0 !important;
    left: 0 !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }

  .ecosystem-step {
    margin-top: -1.8rem !important;
  }
}

/* ----------------------------------------------------------
   Mobile <= 760
   Live copy first, compact scene second.
   We crop away most of the tall empty sky from the vertical asset.
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  .hero {
    min-height: 49rem !important;
    padding-bottom: 0 !important;
  }

  .hero__inner {
    min-height: 29.5rem !important;
    padding-top: 6.55rem !important;
    padding-bottom: 0 !important;
    align-items: flex-start !important;
  }

  .hero__background {
    position: absolute !important;
    top: 30.25rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 100% !important;
    height: 18.75rem !important;

    overflow: hidden !important;
    transform: none !important;
  }

  .hero__background img {
    width: 100% !important;
    height: 100% !important;

    /*
      Vertical asset: show the lower workstation/city portion,
      not the large empty sky.
    */
    object-fit: cover !important;
    object-position: center 78% !important;

    transform: none !important;
  }

  .ecosystem-step {
    margin-top: -1.2rem !important;
  }

  .development-step {
    margin-top: 2rem !important;
  }
}