/* Cleaning-photo hero with SHARKZ purple as the primary brand color. */
.lp-home .shz-header {
  position: absolute;
  top: 28px;
  right: 0;
  left: 0;
  width: min(calc(100% - 112px), 1320px);
  height: 76px;
  margin-inline: auto;
  border: 0;
  border-radius: 999px;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.lp-home .shz-header__inner {
  width: calc(100% - 42px);
  gap: 22px;
}

.lp-home .shz-header__brand img { width: 126px; }
.lp-home .shz-header__navigation > a { color: #25233a; font-size: 0.8rem; }
.lp-home .shz-header__actions { gap: 10px; }

.lp-home .shz-header__login-button,
.lp-home .shz-header__menu-button {
  border: 0;
  border-radius: 999px !important;
  background: #efedff;
  color: var(--brand-dark, #4f43cf);
}

.lp-home .shz-header__city-search-trigger {
  border: 0;
  border-radius: 999px !important;
  background: var(--brand, #6558e8);
  color: #fff;
  box-shadow: none;
}

.lp-home .shz-header__city-search-trigger:hover { background: var(--brand-dark, #4f43cf); }
.lp-home .shz-header__city-search-trigger small { display: none; }

.lp-home .lp-hero--landscape {
  isolation: isolate;
  display: flex;
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: flex-end;
  padding: clamp(108px, 15vh, 148px) 0 clamp(24px, 5vh, 64px);
  padding: clamp(108px, 15dvh, 148px) 0 max(clamp(24px, 5dvh, 64px), env(safe-area-inset-bottom));
  background: #25233a;
  color: #fff;
}

.lp-home .lp-hero--landscape::before {
  z-index: -1;
  opacity: 1;
  background: linear-gradient(90deg, rgb(27 20 48 / 72%) 0%, rgb(27 20 48 / 48%) 34%, rgb(27 20 48 / 8%) 70%, transparent 100%),
    linear-gradient(0deg, rgb(27 20 48 / 67%), rgb(27 20 48 / 15%) 48%, transparent 80%);
  mask-image: none;
}

.lp-home .lp-hero__backdrop {
  position: absolute;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.lp-home .lp-hero__backdrop img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center 48%;
}

.lp-home .lp-hero__grid {
  display: flex;
  width: min(calc(100% - 128px), 1304px);
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  max-height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}

.lp-home .lp-hero__copy {
  flex: 0 1 690px;
  max-width: 690px;
  margin: 0;
  text-align: left;
}

.lp-home .lp-hero__eyebrow {
  display: block;
  margin-bottom: 18px;
  color: rgb(255 255 255 / 90%);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.lp-home .lp-hero__copy h1 {
  max-width: 690px;
  margin: 0 0 22px;
  color: #fff !important;
  font-size: clamp(4.6rem, 7.7vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.065em;
  line-height: 0.94;
  text-wrap: initial;
}

.lp-home .lp-hero__copy > p:not(.lp-hero__trust) {
  max-width: 440px;
  margin: 0;
  color: rgb(255 255 255 / 94%);
  font-size: 1rem;
  line-height: 1.7;
}

.lp-home .lp-hero__actions {
  display: flex;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 23px;
}

.lp-home .lp-hero__cta {
  min-height: 52px;
  justify-content: space-between;
  gap: 22px;
  width: auto;
  padding: 6px 7px 6px 20px;
  border: 1px solid var(--brand, #6558e8);
  border-radius: 999px !important;
  background: var(--brand, #6558e8);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
}

.lp-home .lp-hero__cta > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--brand, #6558e8);
}

.lp-home .lp-hero__cta > span > i { font-size: 0.85rem; transform: rotate(-45deg); }
.lp-home .lp-hero__cta:hover { background: var(--brand-dark, #4f43cf); border-color: var(--brand-dark, #4f43cf); }

.lp-home .lp-hero__cta--glass {
  border-color: rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 14%);
  color: #fff;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lp-home .lp-hero__cta--glass > span { background: transparent; color: #fff; }
.lp-home .lp-hero__cta--glass:hover { border-color: rgb(255 255 255 / 65%); background: rgb(255 255 255 / 23%); }

.lp-home .lp-hero__trust {
  justify-content: flex-start;
  margin-top: 17px;
  color: rgb(255 255 255 / 80%);
  font-size: 0.69rem;
  font-weight: 400;
}

.lp-home .lp-hero__trust > i { color: #ddd8ff; }
.lp-home .lp-hero a:focus-visible { outline: 3px solid #ddd8ff; outline-offset: 5px; }

.lp-home .lp-hero__coverage {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 42px;
}

.lp-home .lp-hero__coverage-icons { display: flex; padding-left: 10px; }
.lp-home .lp-hero__coverage-icons > span {
  display: grid;
  width: 37px;
  height: 37px;
  margin-left: -10px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 75%);
  border-radius: 50%;
  background: var(--brand, #6558e8);
  color: #fff;
  font-size: 0.8rem;
}

.lp-home .lp-hero__coverage-icons > span:nth-child(2) { background: #9185ed; }
.lp-home .lp-hero__coverage-icons > span:nth-child(3) { background: var(--brand-dark, #4f43cf); }
.lp-home .lp-hero__coverage > div:last-child { display: grid; gap: 4px; }
.lp-home .lp-hero__coverage strong { color: #ddd8ff; font-size: 0.95rem; letter-spacing: -0.025em; }
.lp-home .lp-hero__coverage > div > span { color: #fff; font-size: 0.73rem; white-space: nowrap; }

.lp-home .lp-hero-preview { background: #f8f7fc; }
.lp-home .lp-hero-preview__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 64px; }
.lp-home .lp-hero-preview .lp-section-heading { margin-bottom: 0; }
.lp-home .lp-hero-preview .lp-section-heading > a { margin-top: 22px; }
.lp-home .lp-hero-preview .lp-demo { width: 100%; min-width: 0; }

@media (max-width: 1080px) {
  .lp-home .shz-header { top: 22px; width: calc(100% - 64px); height: 70px; }
  .lp-home .shz-header__inner { grid-template-columns: auto 1fr auto; width: calc(100% - 32px); gap: 12px; }
  .lp-home .shz-header__menu-button { grid-column: 2; grid-row: 1; }
  .lp-home .shz-header__actions { grid-column: 3; grid-row: 1; }
  .lp-home .shz-header__navigation { top: 104px; right: 16px; bottom: auto; left: 16px; width: auto !important; height: auto; max-height: calc(100dvh - 122px); border: 0; border-radius: 24px; box-shadow: 0 20px 60px rgb(0 0 0 / 16%); }
  .lp-home .lp-hero__grid { width: calc(100% - 80px); gap: 28px; }
  .lp-home .lp-hero__coverage { flex-direction: column; align-items: flex-start; gap: 10px; }
  .lp-home .lp-hero-preview__grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 680px) {
  .lp-home .shz-header { top: 16px; width: calc(100% - 32px); height: 64px; }
  .lp-home .shz-header__inner { width: calc(100% - 24px); gap: 8px; }
  .lp-home .shz-header__brand img { width: 102px; }
  .lp-home .shz-header__city-search-trigger { display: none; }
  .lp-home .shz-header__login-button,
  .lp-home .shz-header__menu-button { width: 40px; height: 40px; min-height: 40px; }
  .lp-home .shz-header__navigation { top: 92px; max-height: calc(100dvh - 108px); }
  .lp-home .shz-header__login-panel { top: 92px; }
  .lp-home .lp-hero--landscape { padding: 104px 0 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .lp-home .lp-hero--landscape::before { background: linear-gradient(0deg, rgb(27 20 48 / 94%), rgb(27 20 48 / 72%) 36%, rgb(27 20 48 / 12%) 78%); }
  .lp-home .lp-hero__backdrop img { object-position: 72% 40%; }
  .lp-home .lp-hero__grid { display: grid; width: calc(100% - 48px); grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-home .lp-hero__eyebrow { margin-bottom: 15px; font-size: 0.65rem; letter-spacing: 0.025em; }
  .lp-home .lp-hero__copy h1 { margin-bottom: 20px; font-size: clamp(2.5rem, min(15.2vw, 9vh), 5.8rem); font-size: clamp(2.5rem, min(15.2vw, 9dvh), 5.8rem); }
  .lp-home .lp-hero__copy > p:not(.lp-hero__trust) { max-width: 380px; font-size: 0.88rem; line-height: 1.65; }
  .lp-home .lp-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .lp-home .lp-hero__actions .lp-button { width: auto; min-height: 48px; gap: 12px; padding-left: 15px; font-size: 0.71rem; }
  .lp-home .lp-hero__cta > span { width: 32px; height: 32px; flex-basis: 32px; }
  .lp-home .lp-hero__trust { font-size: 0.63rem; }
  .lp-home .lp-hero__coverage { flex-direction: row; align-items: center; gap: 11px; margin: 0; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 22%); }
  .lp-home .lp-hero__coverage strong { font-size: 0.85rem; }
  .lp-home .lp-hero__coverage > div > span { font-size: 0.68rem; }
}

/* Keep the content inside short phone screens and landscape viewports. */
@media (max-height: 760px) {
  .lp-home .lp-hero__copy h1 { font-size: clamp(2.25rem, min(7.7vw, 10vh), 5rem); font-size: clamp(2.25rem, min(7.7vw, 10dvh), 5rem); margin-bottom: 14px; }
  .lp-home .lp-hero__eyebrow { margin-bottom: 10px; }
  .lp-home .lp-hero__copy > p:not(.lp-hero__trust) { font-size: 0.88rem; line-height: 1.5; }
  .lp-home .lp-hero__actions { margin-top: 16px; }
  .lp-home .lp-hero__trust { margin-top: 12px; }
  .lp-home .lp-hero__grid { gap: 18px; }
  .lp-home .lp-hero__coverage { margin-bottom: 0; }
}

@media (max-width: 680px) and (max-height: 760px) {
  .lp-home .lp-hero__copy h1 { font-size: clamp(2.25rem, min(14vw, 8vh), 4rem); font-size: clamp(2.25rem, min(14vw, 8dvh), 4rem); }
  .lp-home .lp-hero__coverage { padding-top: 14px; }
  .lp-home .lp-hero__actions .lp-button { min-height: 44px; }
}

@media (max-height: 600px) {
  .lp-home .shz-header { top: 12px; height: 64px; }
  .lp-home .shz-header__navigation,
  .lp-home .shz-header__login-panel { top: 88px; max-height: calc(100vh - 104px); max-height: calc(100dvh - 104px); }
  .lp-home .lp-hero--landscape { padding-top: 92px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .lp-home .lp-hero__copy h1 { font-size: clamp(1.75rem, min(9vw, 9vh), 3rem); font-size: clamp(1.75rem, min(9vw, 9dvh), 3rem); margin-bottom: 10px; }
  .lp-home .lp-hero__eyebrow,
  .lp-home .lp-hero__trust,
  .lp-home .lp-hero__coverage { display: none; }
  .lp-home .lp-hero__copy > p:not(.lp-hero__trust) { max-width: 560px; font-size: 0.8rem; line-height: 1.45; }
  .lp-home .lp-hero__actions { gap: 8px; margin-top: 12px; }
  .lp-home .lp-hero__actions .lp-button { min-height: 44px; }
}

@keyframes sharkz-hero-reveal {
  /* Fade without moving content or expanding the scroll area. */
  from { opacity: 0; transform: none; }
  to { opacity: 1; transform: none; }
}

@keyframes sharkz-hero-photo {
  from { opacity: 0.7; transform: scale(1.025); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .lp-home .shz-header { animation: sharkz-hero-reveal 1.2s ease-in-out both; }
  .lp-home .lp-hero__backdrop img { animation: sharkz-hero-photo 6s cubic-bezier(0.2, 0.65, 0.3, 1) both; }
  .lp-home .lp-hero__copy > *,
  .lp-home .lp-hero__coverage { animation: sharkz-hero-reveal 1.4s ease-in-out both; }
  .lp-home .lp-hero__eyebrow { animation-delay: 100ms; }
  .lp-home .lp-hero__copy h1 { animation-delay: 200ms; }
  .lp-home .lp-hero__copy > p:not(.lp-hero__trust) { animation-delay: 300ms; }
  .lp-home .lp-hero__actions { animation-delay: 400ms; }
  .lp-home .lp-hero__trust { animation-delay: 500ms; }
  .lp-home .lp-hero__coverage { animation-delay: 600ms; }
  .lp-home .lp-hero__cta,
  .lp-home .shz-header__city-search-trigger { transition: background-color 400ms ease-in-out, border-color 400ms ease-in-out; }
  .lp-home .lp-hero__cta > span { transition: transform 400ms ease-in-out; }
  .lp-home .lp-hero__cta:hover > span,
  .lp-home .lp-hero__cta:focus-visible > span { transform: translate(2px, -2px); }
  .lp-home .lp-reveal { transform: translateY(8px); transition: opacity 1.1s ease-in-out, transform 1.1s ease-in-out; }
  .lp-home .lp-reveal.is-visible { transform: none; }
  .lp-home .lp-demo__stage { transition: opacity 700ms ease-in-out, transform 700ms ease-in-out, visibility 700ms; }
  .lp-home .lp-product-panel { animation-duration: 700ms; animation-timing-function: ease-in-out; }
  .lp-home .shz-header__login-panel,
  .lp-home .shz-header__city-search-results { animation-duration: 400ms; }
}

@media (prefers-reduced-motion: reduce) {
  .lp-home .shz-header,
  .lp-home .lp-hero__backdrop img,
  .lp-home .lp-hero__copy > *,
  .lp-home .lp-hero__coverage,
  .lp-home .lp-hero__cta > span { animation: none !important; transition: none !important; transform: none; }
}