/* FIXEO — Hero Premium Sprint V1  hvps-v1b  2026-07-12
   Additive polish. #home scope only. Mobile-first. No layout changes.
   v1b changes: WCAG city-pill 44px, mobile navbar safety 72px fallback,
   removed dead focus-visible on non-focusable divs, !important audit pass */

/* ── !important policy ──────────────────────────────────────────────
   All contested properties (48 types) keep !important: hero-conversion-boost
   and hero-premium-upgrade both use !important on the same properties.
   Since those files load before sprint, sprint MUST use !important to win.
   Safely dropped (uncontested): animation-delay, outline/outline-offset on
   :focus-visible rules, filter, -webkit-text-fill-color, background-clip,
   transition-duration. These are sprint-only declarations.
   ──────────────────────────────────────────────────────────────────── */

/* BACKGROUND — richer depth */

section#home.hero.hero-section {
  background:
    radial-gradient(ellipse 80% 55% at 12% 28%, rgba(225,48,108,0.11) 0%, transparent 58%),
    radial-gradient(ellipse 70% 50% at 88% 72%, rgba(64,93,230,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 50% -5%, rgba(131,58,180,0.07) 0%, transparent 50%),
    linear-gradient(172deg, #07071a 0%, #0b0b1c 40%, #0f1024 75%, #0c0e20 100%) !important;
}

section#home.hero .hero-overlay {
  background:
    radial-gradient(ellipse 55% 45% at 15% 28%, rgba(225,48,108,0.13) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 85% 68%, rgba(64,93,230,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 35% at 50% 0%,  rgba(131,58,180,0.07) 0%, transparent 60%),
    linear-gradient(180deg, rgba(7,7,26,0.15) 0%, rgba(11,11,28,0.35) 100%) !important;
  opacity: 1 !important;
  z-index: 1 !important;
}

section#home .hero-bubble { opacity: 0.45 !important; }
section#home .hero-blob   { opacity: 0.5  !important; }

/* VERTICAL RHYTHM */

section#home .hero-content {
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

section#home .hero-content > .hero-title {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

section#home .hero-content > .hero-subtitle,
section#home .hero-content > p.hero-subtitle {
  margin-top: 0 !important;
  margin-bottom: 28px !important;
}

section#home .hero-content > #hero-quick-search,
section#home .hero-content > .search-box {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

section#home .hero-content > .hero-city-smart,
section#home .hero-content > #hero-city-smart {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

section#home .hero-content > .fxlps-signals {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

section#home .hero-content > .hero-secondary-link-wrap {
  margin-top: 20px !important;
  margin-bottom: 0 !important;
}

/* TYPOGRAPHY */

section#home h1.hero-title,
section#home .hero-title {
  font-size: clamp(2.9rem, 6.8vw, 5.4rem) !important;
  font-weight: 900 !important;
  line-height: 1.0 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance !important;
  max-width: 880px !important;
  color: #fff !important;
}

section#home .hero-title span:last-child {
  background: linear-gradient(130deg, #ff4d8a 0%, #e1306c 45%, #c92b61 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline !important;
  filter: drop-shadow(0 0 18px rgba(225,48,108,0.22));
}

section#home .hero-title::after {
  content: '' !important;
  display: block !important;
  width: 220px !important;
  height: 1.5px !important;
  background: linear-gradient(90deg, transparent, rgba(225,48,108,0.45), rgba(131,58,180,0.35), transparent) !important;
  margin: 18px auto 0 !important;
  border-radius: 2px !important;
}

section#home .hero-subtitle {
  font-size: clamp(1.02rem, 2.1vw, 1.18rem) !important;
  color: rgba(255,255,255,0.68) !important;
  line-height: 1.75 !important;
  letter-spacing: 0.012em !important;
  font-weight: 400 !important;
  max-width: 640px !important;
}

/* SEARCH CARD */

section#home #hero-quick-search.qsm-inline-host {
  border-radius: 24px !important;
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  backdrop-filter: blur(28px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(140%) !important;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.30),
    0 8px 24px rgba(0,0,0,0.18),
    0 0 0 1px rgba(255,255,255,0.03),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.12) !important;
  overflow: visible !important;
  transition:
    box-shadow 0.3s cubic-bezier(0.22,1,0.36,1),
    border-color 0.3s ease !important;
}

section#home #hero-quick-search.qsm-inline-host:focus-within {
  border-color: rgba(225,48,108,0.30) !important;
  box-shadow:
    0 36px 90px rgba(0,0,0,0.34),
    0 0 0 3px rgba(225,48,108,0.12),
    0 0 0 1px rgba(225,48,108,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

section#home .qsm-inline-host .qsm-bar-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 72px !important;
}

/* Search button states */
section#home .qsm-inline-host .qsm-btn-search {
  min-height: 56px !important;
  min-width: 176px !important;
  border-radius: 18px !important;
  letter-spacing: 0.015em !important;
  transition:
    transform 0.18s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.18s ease,
    filter 0.18s ease,
    opacity 0.15s ease !important;
}

section#home .qsm-inline-host .qsm-btn-search:hover {
  transform: translateY(-2px) scale(1.02) !important;
  filter: brightness(1.08) saturate(1.15) !important;
}

section#home .qsm-inline-host .qsm-btn-search:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow:
    0 8px 24px rgba(225,48,108,0.28),
    0 0 14px rgba(131,58,180,0.16) !important;
  filter: brightness(0.95) !important;
  transition-duration: 0.08s;
}

section#home .qsm-inline-host .qsm-btn-search:focus-visible {
  outline: 2px solid rgba(255,255,255,0.9);
  outline-offset: 3px;
}

section#home .qsm-inline-host .qsm-btn-search[aria-busy="true"],
section#home .qsm-inline-host .qsm-btn-search.is-loading {
  opacity: 0.75 !important;
  cursor: wait !important;
  transform: none !important;
  pointer-events: none !important;
}

/* CITY DISPLAY PILL
   Note: .hero-city-smart is a display label, not an interactive control.
   The interactive city selector is .qsm-segment-city (min-height: 68-72px via QSM CSS).
   min-height here is defensive hygiene for potential future JS interactivity. */

section#home .hero-city-smart {
  background: rgba(255,255,255,0.055) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 12px !important;
  padding: 8px 16px !important;
  font-size: 0.83rem !important;
  color: rgba(255,255,255,0.70) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
  min-height: 44px !important;
}

/* Mouse hover only — not combined with :focus to avoid hiding browser default focus ring */
section#home .hero-city-smart:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.16) !important;
  color: rgba(255,255,255,0.88) !important;
}

/* LIVE PLATFORM SIGNALS */

.fxlps-signals {
  background: rgba(255,255,255,0.048) !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 100px !important;
  padding: 7px 14px 7px 10px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    0 4px 20px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.fxlps-dot {
  width: 6px !important;
  height: 6px !important;
  background: #22d165 !important;
  box-shadow: 0 0 0 0 rgba(34,209,101,0.6) !important;
}

.fxlps-text {
  font-size: 0.73rem !important;
  color: rgba(255,255,255,0.60) !important;
  font-weight: 500 !important;
  letter-spacing: 0.008em !important;
}

/* SECONDARY LINK — pill button */

.hero-secondary-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 22px !important;
  border-radius: 100px !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.78) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease !important;
  min-height: 44px !important;
}

.hero-secondary-link:hover {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.95) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.16) !important;
  text-decoration: none !important;
}

.hero-secondary-link:focus-visible {
  outline: 2px solid rgba(255,255,255,0.8);
  outline-offset: 2px;
  color: rgba(255,255,255,0.95) !important;
  background: rgba(255,255,255,0.11) !important;
}

.hero-secondary-link:active {
  background: rgba(255,255,255,0.06) !important;
  transform: scale(0.97) !important;
  transition-duration: 0.08s;
}

/* TRUST SECTION */

.trust-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 28px !important;
}

.trust-section-inner {
  gap: 10px !important;
  padding: 12px !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,0.032) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.trust-item {
  padding: 13px 12px !important;
  border-radius: 16px !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,0.78) !important;
  background: rgba(255,255,255,0.028) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease !important;
  min-height: 48px !important;
}

.trust-item:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.95) !important;
}

.trust-icon {
  font-size: 1.15rem !important;
}

/* MICRO-MOTION — staggered entrance */

@keyframes hvps-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: no-preference) {

  section#home .hero-title {
    animation: hvps-enter 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.05s;
  }

  section#home .hero-subtitle {
    animation: hvps-enter 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.13s;
  }

  section#home #hero-quick-search {
    animation: hvps-enter 0.6s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.22s;
  }

  section#home .hero-city-smart,
  section#home .fxlps-signals {
    animation: hvps-enter 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.32s;
  }

  section#home .hero-secondary-link-wrap {
    animation: hvps-enter 0.5s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.42s;
  }

  .trust-section {
    animation: hvps-enter 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
    animation-delay: 0.50s;
  }
}

/* FOCUS STATES — real interactive elements only */

section#home a:focus-visible,
section#home button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.80);
  outline-offset: 2px;
  border-radius: 4px;
}

/* RESPONSIVE — MOBILE (≤767px)
   padding-top fallback: 72px (realistic navbar height) + 28px = 100px minimum
   Provides ≥28px clearance above any standard mobile sticky header. */

@media (max-width: 767px) {

  section#home.hero.hero-section {
    padding-top: calc(var(--navbar-h, var(--navbar-height, 72px)) + 28px) !important;
    padding-bottom: 48px !important;
  }

  section#home h1.hero-title {
    font-size: clamp(2.3rem, 11vw, 3.1rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 16px !important;
  }

  section#home .hero-subtitle {
    font-size: 0.97rem !important;
    line-height: 1.65 !important;
    padding: 0 6px !important;
    margin-bottom: 22px !important;
  }

  section#home .hero-title::after {
    width: 160px !important;
    margin: 12px auto 0 !important;
  }

  section#home #hero-quick-search.qsm-inline-host {
    border-radius: 20px !important;
  }

  section#home .hero-city-smart {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    border-radius: 14px !important;
    padding: 10px 16px !important;
    min-height: 48px !important;
  }

  .fxlps-signals {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 90vw !important;
  }

  .hero-secondary-link {
    width: 100% !important;
    max-width: 360px !important;
    font-size: 0.9rem !important;
    min-height: 48px !important;
  }

  section#home .hero-content > .hero-city-smart {
    margin-top: 8px !important;
  }

  section#home .hero-content > .fxlps-signals {
    margin-top: 8px !important;
  }

  section#home .hero-content > .hero-secondary-link-wrap {
    margin-top: 16px !important;
  }

  .trust-section {
    margin-top: 20px !important;
  }

  .trust-section-inner {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px !important;
    padding: 9px !important;
    border-radius: 18px !important;
  }

  .trust-item {
    padding: 11px 8px !important;
    font-size: 0.78rem !important;
    gap: 6px !important;
    min-height: 52px !important;
  }

  .trust-icon {
    font-size: 1.05rem !important;
  }
}

/* RESPONSIVE — TABLET (768–1199px) */

@media (min-width: 768px) and (max-width: 1199px) {

  section#home h1.hero-title {
    font-size: clamp(2.8rem, 5.8vw, 4.0rem) !important;
  }

  section#home .hero-subtitle {
    font-size: clamp(1.0rem, 2.0vw, 1.12rem) !important;
  }

  section#home #hero-quick-search.qsm-inline-host {
    max-width: 740px !important;
  }

  .trust-section-inner {
    max-width: 880px !important;
  }
}

/* RESPONSIVE — DESKTOP LARGE (≥1200px) */

@media (min-width: 1200px) {

  section#home.hero.hero-section {
    padding-top: calc(var(--navbar-h, var(--navbar-height, 72px)) + 68px) !important;
    padding-bottom: 88px !important;
  }

  section#home .hero-content {
    max-width: 960px !important;
  }

  section#home h1.hero-title {
    font-size: clamp(3.8rem, 5.6vw, 5.6rem) !important;
  }

  section#home .hero-subtitle {
    font-size: clamp(1.08rem, 1.8vw, 1.22rem) !important;
    max-width: 660px !important;
  }

  section#home #hero-quick-search.qsm-inline-host {
    max-width: 860px !important;
  }

  .trust-section-inner {
    max-width: 1060px !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .trust-item {
    padding: 14px 14px !important;
    font-size: 0.86rem !important;
  }
}

/* LAPTOP COMPACT (≥769px, ≤820px height) */

@media (min-width: 769px) and (max-height: 820px) {

  section#home.hero.hero-section {
    padding-top: 112px !important;
    padding-bottom: 52px !important;
    min-height: auto !important;
  }

  section#home .hero-content > .hero-title {
    margin-bottom: 14px !important;
  }

  section#home .hero-content > .hero-subtitle {
    margin-bottom: 20px !important;
  }

  section#home .hero-content > .hero-secondary-link-wrap {
    margin-top: 14px !important;
  }

  .trust-section {
    margin-top: 18px !important;
  }

  section#home .hero-title    { animation-duration: 0.38s !important; }
  section#home .hero-subtitle { animation-duration: 0.38s !important; }
  section#home #hero-quick-search { animation-duration: 0.40s !important; }
}

/* PREFERS-REDUCED-MOTION */

@media (prefers-reduced-motion: reduce) {

  section#home .hero-title,
  section#home .hero-subtitle,
  section#home #hero-quick-search,
  section#home .hero-city-smart,
  section#home .fxlps-signals,
  section#home .hero-secondary-link-wrap,
  .trust-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  section#home .qsm-inline-host .qsm-btn-search {
    transition: opacity 0.15s ease !important;
  }

  section#home .hero-city-smart,
  section#home .hero-secondary-link,
  .trust-item {
    transition: background 0.15s ease, color 0.15s ease !important;
  }
}