/* =========================================================
   Metta Pic — Hero Lancer (standalone, overrides everything)
   Matches dark centered product-landing UI
   ========================================================= */

/* Kill ALL legacy hero layout when lancer is present */
body.mp-home section.mp-hero.mp-hero-lancer,
body.mp-home .mp-hero.mp-hero-lancer,
.mp-hero.mp-hero-lancer{
  /* all:unset removed — was breaking Elementor editor when CSS leaked */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 100svh !important;
  padding: 110px 20px 90px !important;
  margin: 0 !important;
  background: #050506 !important;
  color: #fff !important;
  overflow: hidden !important;
  isolation: isolate !important;
  font-family: "Estedad", Tahoma, sans-serif !important;
  direction: rtl !important;
}

.mp-hero.mp-hero-lancer *,
.mp-hero.mp-hero-lancer *::before,
.mp-hero.mp-hero-lancer *::after{
  box-sizing: border-box !important;
}

/* Background layers */
.mp-hero.mp-hero-lancer .mp-hero-bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(55,55,70,.5) 0%, transparent 68%),
    radial-gradient(ellipse 50% 35% at 50% 100%, rgba(25,25,30,.9) 0%, transparent 55%),
    #050506 !important;
}
.mp-hero.mp-hero-lancer .mp-hero-glow{
  position: absolute !important;
  width: min(480px, 60vw) !important;
  height: min(480px, 60vw) !important;
  border-radius: 50% !important;
  filter: blur(100px) !important;
  opacity: .18 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}
.mp-hero.mp-hero-lancer .mp-hero-glow-l{
  left: -10% !important;
  top: 18% !important;
  background: #4a4a5c !important;
}
.mp-hero.mp-hero-lancer .mp-hero-glow-r{
  right: -10% !important;
  top: 22% !important;
  background: #3a3a4a !important;
}

/* Stage: left card | center | right card */
.mp-hero.mp-hero-lancer .mp-hero-stage{
  position: relative !important;
  z-index: 3 !important;
  width: min(1180px, 100%) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(260px, 480px) 1fr !important;
  align-items: center !important;
  gap: 28px !important;
}

/* Center content */
.mp-hero.mp-hero-lancer .mp-hero-center{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 8px 10px !important;
  width: 100% !important;
}

.mp-hero.mp-hero-lancer .mp-hero-brand{
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
  color: #fff !important;
}
.mp-hero.mp-hero-lancer .mp-hero-logo-mark{
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.05) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
}
.mp-hero.mp-hero-lancer .mp-hero-logo-mark svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;
}
.mp-hero.mp-hero-lancer .mp-hero-brand-name{
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  color: #fff !important;
}

.mp-hero.mp-hero-lancer .mp-hero-pill{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 16px !important;
  margin: 0 0 18px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.mp-hero.mp-hero-lancer .mp-hero-title{
  margin: 0 0 14px !important;
  padding: 0 !important;
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 750 !important;
  line-height: 1.28 !important;
  letter-spacing: -.03em !important;
  color: #ffffff !important;
  max-width: 15ch !important;
  text-align: center !important;
}

.mp-hero.mp-hero-lancer .mp-hero-lead{
  margin: 0 0 26px !important;
  padding: 0 !important;
  font-size: clamp(13px, 1.4vw, 15px) !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  color: rgba(255,255,255,.55) !important;
  max-width: 40ch !important;
  text-align: center !important;
}

.mp-hero.mp-hero-lancer .mp-hero-ctas{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

.mp-hero.mp-hero-lancer .mp-cta-primary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #0a0a0a !important;
  font-size: 13.5px !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.mp-hero.mp-hero-lancer .mp-cta-primary:hover{
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.45) !important;
  color: #0a0a0a !important;
}
.mp-hero.mp-hero-lancer .mp-cta-primary svg{
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

.mp-hero.mp-hero-lancer .mp-cta-secondary{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 50px !important;
  padding: 0 24px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 650 !important;
  text-decoration: none !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}
.mp-hero.mp-hero-lancer .mp-cta-secondary:hover{
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.4) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Floating product cards */
.mp-hero.mp-hero-lancer .mp-hero-float{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  min-width: 0 !important;
}
.mp-hero.mp-hero-lancer .mp-float-card{
  display: block !important;
  width: min(220px, 100%) !important;
  text-decoration: none !important;
  color: #fff !important;
  animation: mpHeroFloat 6s ease-in-out infinite !important;
}
.mp-hero.mp-hero-lancer .mp-hero-float-r .mp-float-card{
  animation-delay: 1.1s !important;
}
.mp-hero.mp-hero-lancer .mp-float-card:hover{
  animation-play-state: paused !important;
  transform: translateY(-8px) scale(1.02) !important;
}
@keyframes mpHeroFloat{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

.mp-hero.mp-hero-lancer .mp-float-frame{
  display: grid !important;
  place-items: center !important;
  aspect-ratio: 3 / 4 !important;
  padding: 10px !important;
  border-radius: 20px !important;
  background: linear-gradient(165deg, rgba(255,255,255,.12), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 28px 55px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  overflow: hidden !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}
.mp-hero.mp-hero-lancer .mp-float-frame img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 13px !important;
  display: block !important;
}

.mp-hero.mp-hero-lancer .mp-float-caption{
  margin-top: 12px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
.mp-hero.mp-hero-lancer .mp-float-caption span{
  font-size: 10px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.4) !important;
  letter-spacing: .04em !important;
}
.mp-hero.mp-hero-lancer .mp-float-caption strong{
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.9) !important;
  line-height: 1.4 !important;
}

/* Scroll hint */
.mp-hero.mp-hero-lancer .mp-hero-scroll-hint{
  position: absolute !important;
  bottom: 26px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 4 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(255,255,255,.32) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
}
.mp-hero.mp-hero-lancer .mp-hero-scroll-hint i{
  display: block !important;
  width: 1px !important;
  height: 26px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.4), transparent) !important;
}

/* Header over hero */
body.mp-home .site-header{
  background: transparent !important;
  border-bottom-color: transparent !important;
  color: #fff !important;
}
body.mp-home .site-header.scrolled{
  background: rgba(6,6,8,.88) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom-color: rgba(255,255,255,.06) !important;
}
body.mp-home .site-header .desktop-nav a{
  color: rgba(255,255,255,.7) !important;
}
body.mp-home .site-header .desktop-nav a:hover,
body.mp-home .site-header .desktop-nav a.active{
  color: #fff !important;
}
body.mp-home .site-header .brand strong,
body.mp-home .site-header .brand small{
  color: #fff !important;
}
body.mp-home .site-header .brand small{
  color: rgba(255,255,255,.5) !important;
}

/* Responsive */
@media (max-width: 980px){
  .mp-hero.mp-hero-lancer{
    min-height: auto !important;
    padding: 100px 16px 70px !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-stage{
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    max-width: 480px !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-center{
    order: 1 !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-float-l{
    order: 2 !important;
    display: flex !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-float-r{
    display: none !important;
  }
  .mp-hero.mp-hero-lancer .mp-float-card{
    width: min(200px, 72vw) !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-title{
    font-size: clamp(28px, 8vw, 40px) !important;
  }
}

@media (max-width: 560px){
  .mp-hero.mp-hero-lancer{
    padding: 88px 14px 56px !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-title{
    font-size: clamp(26px, 8.5vw, 34px) !important;
    max-width: 14ch !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-lead{
    font-size: 13px !important;
    max-width: 34ch !important;
  }
  .mp-hero.mp-hero-lancer .mp-cta-primary,
  .mp-hero.mp-hero-lancer .mp-cta-secondary{
    min-height: 46px !important;
    font-size: 12.5px !important;
    padding: 0 18px !important;
  }
  .mp-hero.mp-hero-lancer .mp-hero-scroll-hint{
    display: none !important;
  }
}