/* FitHala modular hero layouts — v2.4.3 */
.hero {
  overflow: hidden;
}

.hero .hero-grid,
.hero .hero-copy,
.hero .hero-visual {
  position: relative;
}

/* --------------------------------------------------------------------------
   Shared media fallbacks
   -------------------------------------------------------------------------- */
.hero-media-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(183, 255, 60, .18), transparent 20%),
    linear-gradient(145deg, #0d1915, #050908 72%);
}

.hero-media-placeholder::before,
.hero-media-placeholder::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(183, 255, 60, .12);
  border-radius: 50%;
}

.hero-media-placeholder::before {
  width: 62%;
  aspect-ratio: 1;
  box-shadow: inset 0 0 70px rgba(183, 255, 60, .035);
}

.hero-media-placeholder::after {
  width: 42%;
  aspect-ratio: 1;
  border-style: dashed;
  animation: heroPlaceholderSpin 24s linear infinite;
}

.hero-media-placeholder-split {
  width: 100%;
  height: 100%;
  align-content: center;
  gap: 7px;
  color: var(--lime);
}

.hero-media-placeholder-split span {
  position: relative;
  z-index: 1;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.8rem, 8vw, 7rem);
  font-weight: 800;
  letter-spacing: -.08em;
  text-shadow: 0 0 40px rgba(183, 255, 60, .2);
}

.hero-media-placeholder-split small {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, .45);
  font-family: "Space Grotesk", sans-serif;
  font-size: .62rem;
  letter-spacing: .28em;
}

@keyframes heroPlaceholderSpin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Style 1 — split image
   The uploaded image is the only artwork source. Legacy hard-coded backgrounds
   are deliberately disabled here as an additional compatibility safeguard.
   -------------------------------------------------------------------------- */
.hero--split .athlete-frame {
  background-color: #060b09;
  background-image: none !important;
}

.hero--split .athlete-frame > img {
  position: relative;
  z-index: 0;
  display: block !important;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
  visibility: visible !important;
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(.94) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Style 2 — contained performance banner
   The entire hero section follows the same 1180px content width as the rest
   of the home page. The selected image remains the visual background.
   -------------------------------------------------------------------------- */
.hero--background {
  position: relative;
  isolation: isolate;
  display: block;
  width: min(1180px, calc(100% - 40px));
  max-width: 1180px;
  min-height: 650px;
  margin: 96px auto 36px;
  padding: 58px 0 42px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .085);
  border-radius: 32px;
  background: #030604;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .34),
    inset 0 1px rgba(255, 255, 255, .045);
}

.hero--background .hero-background-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.hero--background .hero-background-media > img,
.hero--background .hero-background-media > .hero-media-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

.hero--background .hero-background-media > img {
  object-fit: cover;
  object-position: center 28%;
  filter: saturate(.92) contrast(1.08) brightness(.78);
  transform: scale(1.015);
  animation: heroBackgroundDrift 24s ease-in-out infinite alternate;
}

@keyframes heroBackgroundDrift {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.045) translate3d(-.3%, -.15%, 0); }
}

.hero--background::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mask-image: none;
}

html[dir="rtl"] .hero--background::before {
  background:
    linear-gradient(90deg, rgba(2, 6, 4, .05) 0%, rgba(2, 6, 4, .12) 34%, rgba(2, 6, 4, .72) 68%, rgba(2, 6, 4, .95) 100%),
    linear-gradient(180deg, rgba(2, 6, 4, .32), rgba(2, 6, 4, .05) 36%, rgba(2, 6, 4, .54) 100%),
    radial-gradient(circle at 26% 45%, rgba(183, 255, 60, .1), transparent 28%);
}

html[dir="ltr"] .hero--background::before {
  background:
    linear-gradient(270deg, rgba(2, 6, 4, .05) 0%, rgba(2, 6, 4, .12) 34%, rgba(2, 6, 4, .72) 68%, rgba(2, 6, 4, .95) 100%),
    linear-gradient(180deg, rgba(2, 6, 4, .32), rgba(2, 6, 4, .05) 36%, rgba(2, 6, 4, .54) 100%),
    radial-gradient(circle at 74% 45%, rgba(183, 255, 60, .1), transparent 28%);
}

.hero--background::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  inset-inline-start: 38px;
  width: 170px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--lime) 35%, var(--lime));
  box-shadow: 0 0 24px rgba(183, 255, 60, .48);
  pointer-events: none;
}

.hero--background .hero-orb {
  z-index: 2;
  width: 480px;
  height: 480px;
  inset-inline-start: auto;
  inset-inline-end: -180px;
  top: -110px;
  opacity: .24;
  mix-blend-mode: screen;
}

.hero--background .hero-grid {
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  width: calc(100% - 96px);
  max-width: none;
  min-height: 520px;
  margin: 0 auto;
}

.hero--background .hero-copy {
  width: min(620px, 59%);
  max-width: none;
  justify-self: start;
  padding: 34px 36px 31px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 25px;
  background:
    linear-gradient(135deg, rgba(3, 9, 6, .88), rgba(3, 9, 6, .52)),
    radial-gradient(circle at 10% 0%, rgba(183, 255, 60, .07), transparent 35%);
  box-shadow:
    0 24px 65px rgba(0, 0, 0, .31),
    inset 0 1px rgba(255, 255, 255, .055);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-align: start;
}

.hero--background .hero-copy::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: 28px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--lime) 22%, var(--lime) 76%, transparent);
  box-shadow: 0 0 22px rgba(183, 255, 60, .42);
}

.hero--background .hero-copy::after {
  content: "FIT / AI / 24.7";
  position: absolute;
  top: 18px;
  inset-inline-end: 20px;
  color: rgba(255, 255, 255, .16);
  font-family: "Space Grotesk", sans-serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .16em;
  pointer-events: none;
}

.hero--background .eyebrow {
  margin-bottom: 18px;
  border-color: rgba(183, 255, 60, .28);
  background: rgba(183, 255, 60, .065);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
  backdrop-filter: none;
}

.hero--background .hero-copy h1 {
  max-width: 570px;
  margin: 18px 0 19px;
  color: #fff;
  font-size: clamp(3rem, 4.7vw, 4.7rem);
  line-height: 1.01;
  letter-spacing: -.06em;
  text-wrap: balance;
  text-shadow: 0 12px 36px rgba(0, 0, 0, .55);
}

.hero--background .hero-copy h1 .accent {
  position: relative;
  display: inline-block;
  color: var(--lime);
  text-shadow: 0 0 30px rgba(183, 255, 60, .2), 0 12px 36px rgba(0, 0, 0, .58);
}

.hero--background .hero-copy h1 .accent::after {
  content: "";
  position: absolute;
  inset-inline: 2%;
  bottom: -.09em;
  height: .07em;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--lime) 18%, var(--lime) 82%, transparent);
  box-shadow: 0 0 16px rgba(183, 255, 60, .42);
}

.hero--background .hero-copy > p {
  max-width: 540px;
  margin: 0 0 24px;
  padding-inline-start: 15px;
  color: rgba(237, 246, 241, .82);
  font-size: .98rem;
  line-height: 1.95;
  border-inline-start: 1px solid rgba(255, 255, 255, .16);
  text-shadow: 0 4px 16px rgba(0, 0, 0, .48);
}

.hero--background .hero-actions {
  justify-content: flex-start;
  gap: 10px;
}

.hero--background .hero-actions .btn {
  min-height: 51px;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25);
}

.hero--background .hero-signup {
  box-shadow: 0 13px 38px rgba(183, 255, 60, .18) !important;
}

.hero--background .hero-login {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .055);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hero--background .hero-demo-link {
  color: rgba(255, 255, 255, .65);
}

.hero--background .hero-signals {
  margin-top: 23px;
  padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

.hero--background .hero-signals span {
  min-height: 32px;
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .025);
  backdrop-filter: none;
}

.hero--background .hero-proof {
  max-width: 540px;
  margin-top: 17px;
  padding-top: 15px;
  border-top-color: rgba(255, 255, 255, .09);
}

.hero--background .hero-visual {
  display: none !important;
}

.hero--background .scroll-cue {
  z-index: 6;
}

.hero-background-interface {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  margin: auto;
  pointer-events: none;
}

.hero-background-status {
  position: absolute;
  top: 27px;
  inset-inline-end: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, .58);
  font-family: "Space Grotesk", sans-serif;
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .16em;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 10px;
  background: rgba(3, 8, 5, .34);
  backdrop-filter: blur(9px);
}

.hero-background-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}

.hero-background-index {
  position: absolute;
  top: 44%;
  inset-inline-end: 34px;
  display: grid;
  justify-items: end;
  transform: translateY(-50%);
  font-family: "Space Grotesk", sans-serif;
}

.hero-background-index small {
  color: var(--lime);
  font-size: .55rem;
  letter-spacing: .25em;
}

.hero-background-index strong {
  color: rgba(255, 255, 255, .15);
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  line-height: .86;
  letter-spacing: -.09em;
}

.hero-background-index span {
  margin-top: 7px;
  color: rgba(255, 255, 255, .36);
  font-size: .49rem;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}

.hero-background-rail {
  position: absolute;
  z-index: 5;
  inset-inline-end: 24px;
  bottom: 22px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  width: min(550px, 47%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(255, 255, 255, .09);
  box-shadow: 0 15px 42px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}

.hero-background-rail > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 45px;
  padding: 9px 12px;
  background: rgba(3, 8, 5, .62);
}

.hero-background-rail small {
  color: var(--lime);
  font-family: "Space Grotesk", sans-serif;
  font-size: .53rem;
}

.hero-background-rail b {
  color: rgba(255, 255, 255, .63);
  font-family: "Space Grotesk", sans-serif;
  font-size: .53rem;
  letter-spacing: .07em;
}

.hero--background.hero-no-media .hero-background-media {
  background:
    radial-gradient(circle at 28% 38%, rgba(183, 255, 60, .2), transparent 20%),
    radial-gradient(circle at 70% 58%, rgba(61, 129, 96, .22), transparent 28%),
    linear-gradient(135deg, #0b1713, #030605 72%);
}

@media (max-width: 1080px) {
  .hero--background {
    min-height: 620px;
  }

  .hero--background .hero-grid {
    width: calc(100% - 64px);
  }

  .hero--background .hero-copy {
    width: min(610px, 67%);
  }

  .hero-background-index {
    opacity: .55;
  }

  .hero-background-rail {
    display: none;
  }
}

@media (max-width: 780px) {
  .hero--background {
    width: calc(100% - 24px);
    max-width: none;
    min-height: auto;
    margin: calc(84px + env(safe-area-inset-top)) auto 24px;
    padding: 28px 0 30px;
    border-radius: 25px;
  }

  .hero--background .hero-background-media {
    inset: 0;
  }

  .hero--background .hero-background-media > img {
    object-position: center 24%;
    filter: saturate(.88) contrast(1.08) brightness(.68);
  }

  html[dir="rtl"] .hero--background::before,
  html[dir="ltr"] .hero--background::before,
  .hero--background::before {
    background:
      linear-gradient(180deg, rgba(2, 5, 3, .3) 0%, rgba(2, 5, 3, .22) 26%, rgba(2, 5, 3, .72) 61%, rgba(2, 5, 3, .94) 100%),
      linear-gradient(90deg, rgba(2, 5, 3, .35), rgba(2, 5, 3, .55));
  }

  .hero--background::after {
    inset-inline-start: 24px;
    width: 110px;
  }

  .hero--background .hero-grid {
    width: calc(100% - 28px);
    min-height: 0;
    align-items: center;
  }

  .hero--background .hero-copy {
    width: 100%;
    padding: 27px 22px 24px;
    border-radius: 20px;
    background: linear-gradient(155deg, rgba(3, 9, 6, .89), rgba(3, 9, 6, .58));
    text-align: start;
  }

  .hero--background .hero-copy::before {
    top: 24px;
    bottom: 24px;
    width: 2px;
  }

  .hero--background .hero-copy::after {
    top: 15px;
    inset-inline-end: 16px;
  }

  .hero--background .eyebrow {
    margin-bottom: 15px;
  }

  .hero--background .hero-copy h1 {
    max-width: 600px;
    margin-bottom: 17px;
    font-size: clamp(2.75rem, 12vw, 4.15rem);
    line-height: 1;
  }

  .hero--background .hero-copy > p {
    max-width: 570px;
    color: rgba(239, 247, 243, .84);
    font-size: .9rem;
  }

  .hero--background .hero-actions,
  .hero--background .hero-proof {
    justify-content: flex-start;
  }

  .hero--background .hero-actions {
    width: min(100%, 520px);
  }

  .hero-background-interface,
  .hero-background-rail {
    display: none;
  }

  .hero--split .hero-media-placeholder-split {
    min-height: 420px;
  }
}

@media (max-width: 480px) {
  .hero--background {
    width: calc(100% - 18px);
    margin-top: calc(80px + env(safe-area-inset-top));
    padding: 20px 0 22px;
    border-radius: 21px;
  }

  .hero--background .hero-grid {
    width: calc(100% - 18px);
  }

  .hero--background .hero-copy {
    padding: 25px 16px 21px;
    border-radius: 17px;
  }

  .hero--background .hero-copy h1 {
    font-size: clamp(2.55rem, 12.8vw, 3.75rem);
  }

  .hero--background .hero-copy > p {
    padding-inline-start: 11px;
    line-height: 1.82;
  }

  .hero--background .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero--background .hero-actions .btn {
    width: 100%;
  }

  .hero--background .hero-signals {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }

  .hero--background .hero-signals span {
    min-width: 0;
    padding-inline: 4px;
  }

  .hero--background .hero-proof {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero--background .hero-background-media > img,
  .hero-media-placeholder::after {
    animation: none;
  }
}