@import url('/static/clean.css');
@import url('/static/flow.css');
@import url('/static/lime-balance-v1.css?v=20260912-2335');

.frm-hero,
.cas-page .product-hero {
  position: relative;
  isolation: isolate;
  min-height: 680px;
  overflow: hidden;
  background: linear-gradient(120deg, #06140f 0%, #09251a 56%, #123b26 100%);
}

.frm-hero::before,
.cas-page .product-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 8%;
  right: 2.5%;
  width: 54%;
  height: 78%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 32px 28px rgba(0, 0, 0, .62));
  animation: moduleHeroFloat 4.6s ease-in-out infinite alternate;
}

.frm-hero::before {
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  background-image: url('/static/hero-frm3-bmw.png');
  background-position: 68% center;
  background-size: cover;
  filter: none;
  animation: none;
}

.frm-hero::after {
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  border-radius: 0;
  background: linear-gradient(90deg, rgba(3, 16, 11, .97) 0%, rgba(3, 19, 13, .91) 34%, rgba(3, 25, 16, .58) 56%, rgba(3, 22, 15, .16) 79%, rgba(3, 22, 15, .08) 100%);
  filter: none;
  animation: none;
}

.cas-page .product-hero::before {
  background-image: url('/static/showcase-cas.png');
}

.frm-hero::after,
.cas-page .product-hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  right: 7%;
  top: 22%;
  width: 45%;
  height: 52%;
  border-radius: 50%;
  background: rgba(185, 255, 53, .17);
  filter: blur(55px);
  animation: moduleHeroGlow 3.8s ease-in-out infinite alternate;
}

.frm-hero > div:first-child,
.cas-page .product-hero > div:first-child {
  position: relative;
  z-index: 2;
  max-width: 590px;
  animation: moduleCopyReveal .7s cubic-bezier(.2, .75, .2, 1) both;
}

.frm-hero h1,
.cas-page .product-hero h1 {
  text-shadow: 0 5px 30px rgba(0, 0, 0, .4);
}

.frm-hero .button.ghost,
.cas-page .product-hero .button.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .72);
}

.frm-hero .hero-price {
  position: absolute;
  z-index: 3;
  right: 5vw;
  bottom: 34px;
  min-width: 230px;
  border-color: rgba(217, 255, 66, .38);
  background: rgba(3, 20, 13, .78);
  backdrop-filter: blur(13px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, .25);
}

.cas-page .visual-banner {
  display: none;
}

@keyframes moduleHeroFloat {
  from { transform: translate3d(0, 8px, 0) rotate(-.5deg); }
  to { transform: translate3d(0, -12px, 0) rotate(.6deg); }
}

@keyframes moduleHeroGlow {
  from { opacity: .42; transform: scale(.88); }
  to { opacity: .9; transform: scale(1.08); }
}

@keyframes moduleCopyReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .frm-hero,
  .cas-page .product-hero {
    min-height: 760px;
    align-content: start;
    padding-top: 64px;
    padding-bottom: 250px;
  }

  .frm-hero::before,
  .cas-page .product-hero::before {
    top: auto;
    right: -4%;
    bottom: 18px;
    width: 78%;
    height: 39%;
    opacity: .86;
  }

  .frm-hero::after,
  .cas-page .product-hero::after {
    top: auto;
    right: 5%;
    bottom: 35px;
    width: 70%;
    height: 32%;
  }

  .frm-hero .hero-price {
    right: auto;
    left: 7vw;
    bottom: 28px;
    min-width: 205px;
    padding: 18px 22px;
  }

  .frm-hero::before {
    inset: 0;
    width: auto;
    height: auto;
    background-position: 67% 62%;
    opacity: 1;
  }

  .frm-hero::after {
    inset: 0;
    width: auto;
    height: auto;
  }
}

@media (max-width: 600px) {
  .frm-hero,
  .cas-page .product-hero {
    min-height: 760px;
    padding: 58px 22px 250px;
    text-align: center;
  }

  .frm-hero::before,
  .cas-page .product-hero::before {
    right: -10%;
    bottom: 74px;
    width: 120%;
    height: 31%;
  }

  .frm-hero h1,
  .cas-page .product-hero h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .frm-hero .hero-price {
    left: 50%;
    bottom: 22px;
    width: min(250px, calc(100% - 44px));
    transform: translateX(-50%);
  }

  .frm-hero::before {
    inset: 0;
    width: auto;
    height: auto;
    background-position: 66% 64%;
  }

  .frm-hero::after {
    inset: 0;
    width: auto;
    height: auto;
    background: linear-gradient(180deg, rgba(3, 16, 11, .96) 0%, rgba(3, 19, 13, .9) 42%, rgba(3, 21, 14, .54) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .frm-hero::before,
  .cas-page .product-hero::before,
  .frm-hero::after,
  .cas-page .product-hero::after,
  .frm-hero > div:first-child,
  .cas-page .product-hero > div:first-child {
    animation: none;
  }
}