/* ==========================================================================
   TXT GROUP - YANGI YIL AKSIYASI (PROMOTION) STYLES
   ========================================================================== */

:root {
  --promo-emerald-dark: #031c11;
  --promo-emerald-base: #063823;
  --promo-emerald-light: #0d5437;
  --promo-emerald-accent: #1cd47a;
  --promo-gold: #e5b964;
  --promo-gold-light: #f7d78a;
  --promo-gold-dark: #b8862d;
  --promo-glass-bg: rgba(6, 40, 26, 0.65);
  --promo-glass-border: rgba(255, 255, 255, 0.12);
  --promo-card-bg: rgba(255, 255, 255, 0.04);
  --promo-card-border: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   FORCE UNLOCKED NATIVE SCROLL - ONLY FOR PROMOTION LANDING PAGE (AKSIYA.HTML)
   DO NOT TOUCH HOMEPAGE (INDEX.HTML) OR FULLPAGE.JS SCROLL SYSTEM!
   ========================================================================== */
body.promo-page-body,
body:has(.promo-page-wrapper) {
  position: static !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
  width: 100% !important;
  -webkit-overflow-scrolling: touch !important;
}

html:has(.promo-page-wrapper),
html:has(body.promo-page-body) {
  position: static !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  min-height: 100% !important;
}

body.promo-page-body #__nuxt,
body.promo-page-body #__layout,
body.promo-page-body .layout-default,
body:has(.promo-page-wrapper) #__nuxt,
body:has(.promo-page-wrapper) #__layout,
body:has(.promo-page-wrapper) .layout-default,
.promo-page-wrapper {
  position: static !important;
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
  width: 100% !important;
}

/* ==========================================================================
   HIDE UNUSED MENUDESK COMPLETELY
   The site uses #menuOverlay for the navigation menu.
   MenuDesk is completely hidden and will never flash or peek through during slider transitions.
   ========================================================================== */
.MenuDesk {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -9999 !important;
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ==========================================================================
   1. HERO SLIDER ON HOMEPAGE
   ========================================================================== */

.first-slide {
  background-color: #031c11;
}

.hero-slider-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
  background-color: #031c11;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transform: scale(1.03);
  pointer-events: none;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* ==========================================================================
   INTERACTIVE PROMO HERO STAGE (GELIK, COBALTS, UMRA TICKET)
   ========================================================================== */

.promo-stage-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  user-select: none;
}

/* Background Environment */
.promo-stage-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  background-color: #031c11;
}

.promo-stage-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.02);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.promo-stage-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 60% 40%, rgba(3, 28, 17, 0.2) 0%, rgba(2, 18, 11, 0.7) 70%, rgba(1, 10, 6, 0.92) 100%);
  pointer-events: none;
}

.promo-stage-glow {
  position: absolute;
  top: 15%;
  right: 25%;
  width: 650px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 212, 122, 0.18) 0%, rgba(28, 212, 122, 0) 70%);
  filter: blur(60px);
  pointer-events: none;
  animation: promoAtmosphereGlow 6s ease-in-out infinite alternate;
}

@keyframes promoAtmosphereGlow {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.12); opacity: 1; }
}

.promo-floor-reflection {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 42%;
  background: linear-gradient(180deg, rgba(3, 28, 17, 0) 0%, rgba(2, 18, 11, 0.45) 30%, rgba(1, 10, 6, 0.9) 100%);
  pointer-events: none;
}

/* Top-Left: Caption & Typography (Bigger, Bold, All-Caps, StapleExpanded) */
.promo-stage-caption {
  position: absolute;
  top: 13.5%;
  left: 5%;
  z-index: 12;
  max-width: 72rem;
  pointer-events: auto;
  text-transform: uppercase;
}

.promo-stage-title {
  font-family: "StapleExpanded", sans-serif;
  font-size: clamp(2.2rem, 2.7vw, 3.6rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.04em;
  color: #ffffff;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.7);
  margin: 0;
}

.promo-stage-title .title-line {
  display: block;
}

.promo-hl-accent {
  color: #1cd47a;
  font-weight: 800;
  text-shadow: 0 0 24px rgba(28, 212, 122, 0.5);
}

.promo-hl-gold {
  color: #fce588;
  font-weight: 800;
  text-shadow: 0 0 20px rgba(252, 229, 136, 0.45);
}

/* ==========================================================================
   INTERACTIVE GIFTS SCENE
   ========================================================================== */

.promo-gifts-scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 8;
  pointer-events: none;
}

.promo-gift {
  display: block;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  position: absolute;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
  will-change: transform, filter;
  -webkit-tap-highlight-color: transparent;
}

/* Badges (1x, 20x, 50x) */
.promo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 1.6rem;
  font-family: "Montserrat", sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
  border-radius: 999px;
  background: linear-gradient(135deg, #1cd47a 0%, #0d8a4e 60%, #064e2b 100%);
  border: 2.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(28, 212, 122, 0.6);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  letter-spacing: 0.04em;
  z-index: 10;
  pointer-events: none;
  white-space: nowrap;
}

.promo-badge--emerald {
  background: linear-gradient(135deg, #1cd47a 0%, #0d8a4e 60%, #064e2b 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 16px rgba(28, 212, 122, 0.6);
}

.promo-badge--gold {
  background: linear-gradient(135deg, #f7d78a 0%, #c9932a 60%, #875c12 100%);
  border-color: rgba(255, 255, 255, 0.95);
  color: #1a1202;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 18px rgba(247, 215, 138, 0.6);
}

/* Tooltip on Gift Hover */
.promo-gift-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(3, 28, 17, 0.94);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(28, 212, 122, 0.5);
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.7rem 1.6rem;
  border-radius: 2rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(28, 212, 122, 0.35);
  pointer-events: none;
  z-index: 25;
}

.promo-gift-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(3, 28, 17, 0.94);
}

@media (hover: hover) and (pointer: fine) {
  .promo-gift:hover .promo-gift-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}

/* Mobil versiyada sovg'alarni ustiga bosganda chiqadigan yozuvlarni butunlay yashirish */
@media (max-width: 991px), (hover: none), (pointer: coarse) {
  .promo-gift-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }
  .promo-gift:hover .promo-gift-tooltip,
  .promo-gift:focus .promo-gift-tooltip,
  .promo-gift:active .promo-gift-tooltip {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .promo-gift,
  .promo-gift * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
  }
}

/* --------------------------------------------------------------------------
   1. UMRA TICKET VOUCHER (Top-Right Floating Gift)
   -------------------------------------------------------------------------- */
.promo-gift--umra {
  top: 12%;
  right: 11%;
  width: clamp(220px, 24vw, 340px);
  z-index: 9;
}

.promo-gift-float {
  position: relative;
  width: 100%;
  animation: promoUmraIdle 5s ease-in-out infinite alternate;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
  will-change: transform;
}

@keyframes promoUmraIdle {
  0% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-8px) rotate(-2.5deg); }
  100% { transform: translateY(2px) rotate(-5deg); }
}

.promo-gift-media {
  position: relative;
  display: block;
}

.promo-umra-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.5));
  transition: filter 0.4s ease;
}

.promo-gift--umra .promo-badge {
  position: absolute;
  bottom: -10px;
  right: -8px;
}

/* Umra Hover Reaction */
.promo-gift--umra:hover .promo-gift-float {
  animation-play-state: paused;
  transform: translateY(-20px) scale(1.12) rotate(1deg);
  filter: drop-shadow(0 25px 45px rgba(28, 212, 122, 0.55)) brightness(1.06);
}

.promo-gift--umra:hover .promo-badge {
  transform: scale(1.24) rotate(4deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 25px #1cd47a;
}

/* --------------------------------------------------------------------------
   2. COBALT FLEET (Center-Left Receding Cars)
   -------------------------------------------------------------------------- */
.promo-gift--cobalt {
  left: 4%;
  bottom: 22%;
  width: clamp(240px, 26vw, 380px);
  z-index: 7;
}

.promo-fleet-wrap {
  position: relative;
  width: 100%;
  animation: promoCobaltIdle 4.8s ease-in-out infinite alternate;
  animation-delay: -1.2s;
  will-change: transform;
}

@keyframes promoCobaltIdle {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(0.35deg); }
  100% { transform: translateY(1.5px) rotate(-0.25deg); }
}

/* Receding Fleet Cars */
.promo-fleet-car {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
  will-change: transform;
}

.promo-fleet-car img {
  width: 100%;
  height: auto;
  display: block;
}

.promo-fleet-car.car-4 {
  transform: translate(-105px, -28px) scale(0.72);
  opacity: 0.65;
  filter: brightness(0.78);
  z-index: 1;
}

.promo-fleet-car.car-3 {
  transform: translate(-80px, -21px) scale(0.78);
  opacity: 0.75;
  filter: brightness(0.84);
  z-index: 2;
}

.promo-fleet-car.car-2 {
  transform: translate(-55px, -15px) scale(0.85);
  opacity: 0.85;
  filter: brightness(0.9);
  z-index: 3;
}

.promo-fleet-car.car-1 {
  transform: translate(-30px, -8px) scale(0.92);
  opacity: 0.94;
  filter: brightness(0.96);
  z-index: 4;
}

/* Front Lead Cobalt */
.promo-fleet-lead {
  position: relative;
  z-index: 5;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
  will-change: transform;
}

.promo-cobalt-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.7));
  transition: filter 0.4s ease;
}

.promo-gift--cobalt .promo-badge {
  position: absolute;
  bottom: 8%;
  right: -5%;
}

/* Cobalt Fleet Hover Reaction */
.promo-gift--cobalt:hover .promo-fleet-wrap {
  animation-play-state: paused;
}

.promo-gift--cobalt:hover .promo-fleet-lead {
  transform: translateY(-16px) scale(1.05);
  filter: brightness(1.08) drop-shadow(0 28px 40px rgba(0, 0, 0, 0.85));
}

.promo-gift--cobalt:hover .promo-badge {
  transform: scale(1.22) rotate(-5deg);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 25px #1cd47a;
}

.promo-gift--cobalt:hover .car-1 {
  transform: translate(-42px, -14px) scale(0.94);
  opacity: 1;
}

.promo-gift--cobalt:hover .car-2 {
  transform: translate(-78px, -23px) scale(0.88);
  opacity: 0.95;
}

.promo-gift--cobalt:hover .car-3 {
  transform: translate(-110px, -31px) scale(0.82);
  opacity: 0.88;
}

.promo-gift--cobalt:hover .car-4 {
  transform: translate(-140px, -38px) scale(0.76);
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   3. MERCEDES-BENZ G63 GELIK (Foreground Hero Right)
   -------------------------------------------------------------------------- */
.promo-gift--gelik {
  right: 2%;
  bottom: 7%;
  width: clamp(340px, 38vw, 620px);
  z-index: 8;
}

@media (min-width: 1680px) {
  .promo-gift--gelik {
    width: clamp(420px, 38vw, 660px);
    bottom: 7%;
    right: 2.5%;
  }
}

.promo-gelik-wrap {
  position: relative;
  width: 100%;
  animation: promoGelikIdle 5.4s ease-in-out infinite alternate;
  animation-delay: -2.7s;
  will-change: transform;
}

@keyframes promoGelikIdle {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-0.35deg); }
  100% { transform: translateY(2px) rotate(0.2deg); }
}

.promo-gelik-body {
  position: relative;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.45s ease;
  will-change: transform;
}

.promo-gelik-img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.75));
  transition: filter 0.4s ease;
}

.promo-gift--gelik .promo-badge {
  position: absolute;
  bottom: 12%;
  right: 12%;
}

/* Gelik Hover Reaction */
.promo-gift--gelik:hover .promo-gelik-wrap {
  animation-play-state: paused;
}

.promo-gift--gelik:hover .promo-gelik-body {
  transform: translateY(-14px) scale(1.035);
  filter: brightness(1.06) drop-shadow(0 35px 50px rgba(0, 0, 0, 0.9));
}

.promo-gift--gelik:hover .promo-badge {
  transform: scale(1.18);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(28, 212, 122, 0.5);
}

/* ==========================================================================
   BOTTOM CONTROLS & ACTION BUTTONS (PLACED UNDER COBALT)
   ========================================================================== */

.promo-stage-bottom {
  position: absolute;
  bottom: 11rem;
  left: 5%;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  pointer-events: auto;
}

.promo-bottom-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

/* Responsive Breakpoints - 1440px / 1400px */
@media (max-width: 1440px) {
  .promo-stage-caption {
    max-width: 58rem;
    top: 11%;
  }
  .promo-stage-title {
    font-size: 3rem;
  }
  .promo-gift--gelik {
    width: clamp(280px, 33vw, 470px);
    bottom: 7%;
    right: 2%;
  }
  .promo-gift--cobalt {
    width: clamp(220px, 23vw, 330px);
    bottom: 20%;
    left: 4%;
  }
}

/* Laptops / Displays like 1400x845 (height-constrained screens) */
@media (min-width: 992px) and (max-height: 900px) {
  .promo-gift--gelik {
    width: clamp(270px, 32vw, 450px) !important;
    bottom: 6% !important;
    right: 2% !important;
  }
  .promo-gift--cobalt {
    width: clamp(210px, 22vw, 310px) !important;
    bottom: 18% !important;
    left: 4% !important;
  }
  .promo-stage-caption {
    top: 9% !important;
  }
}

@media (max-width: 1100px) {
  .promo-stage-caption {
    top: 11%;
    max-width: 52rem;
  }
  .promo-stage-title {
    font-size: 2.6rem;
  }
  .promo-gift--cobalt {
    bottom: 24%;
  }
  .promo-stage-bottom {
    bottom: 9rem;
  }
}

/* Tablet & Intermediate Screens (581px - 860px) */
@media (max-width: 860px) and (min-width: 581px) {
  .promo-stage-caption {
    top: 110px !important;
    left: 24px !important;
    right: 24px !important;
    max-width: none !important;
    text-align: center !important;
  }
  .promo-stage-title {
    font-size: clamp(16px, 2.8vw, 22px) !important;
    line-height: 1.25 !important;
  }
  .promo-gift--umra {
    top: 15% !important;
    bottom: auto !important;
    right: 6% !important;
    width: clamp(150px, 20vw, 200px) !important;
  }
  .promo-gift--gelik {
    right: 0% !important;
    bottom: 14% !important;
    width: clamp(340px, 50vw, 460px) !important;
  }
  .promo-gift--cobalt {
    left: 2% !important;
    bottom: 23% !important;
    width: clamp(250px, 38vw, 340px) !important;
  }
  .promo-badge {
    font-size: 14px !important;
    padding: 3px 12px !important;
  }
  .promo-stage-bottom {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 8rem !important;
    margin-bottom: 10rem !important;
    width: calc(100% - 32px) !important;
    z-index: 15 !important;
    pointer-events: auto !important;
  }
  .promo-bottom-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .promo-bottom-actions .glass-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 50px !important;
    border-radius: 6px !important;
    padding: 0 20px !important;
    font-size: 14px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hero-slider-arrow {
    width: 44px !important;
    height: 44px !important;
  }
  .hero-slider-arrow.prev {
    left: 12px !important;
  }
  .hero-slider-arrow.next {
    right: 12px !important;
  }
  .hero-slider-dots {
    bottom: 24px !important;
  }
}

/* ==========================================================================
   SMARTPHONE MOBILE VIEW (MAX-WIDTH: 580PX)
   - Caption positioned cleanly BELOW the logo (top: 130px)
   - Non-overlapping gift placement:
     * Upper Tier: Centered Mercedes-Benz G63 Gelik (1x)
     * Lower Tier: Chevrolet Cobalt (20x) on left, Umra ticket (50x) on right
   - Action buttons placed in exact same position as slide 2 text__bottom
     (bottom: 8rem !important; margin-bottom: 10rem !important; left: 16px; border-radius: 6px;)
   ========================================================================== */
@media (max-width: 580px) {
  /* Studio lighting overlay & showroom floor */
  .promo-stage-bg-img {
    object-position: center center !important;
  }
  .promo-stage-overlay {
    background: radial-gradient(circle at 50% 32%, rgba(3, 28, 17, 0.45) 0%, rgba(2, 18, 11, 0.78) 65%, rgba(1, 10, 6, 0.95) 100%) !important;
  }
  .promo-stage-glow {
    top: 25% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 320px !important;
    height: 260px !important;
    filter: blur(50px) !important;
    opacity: 0.8 !important;
  }
  .promo-floor-reflection {
    height: 42% !important;
    background: linear-gradient(180deg, rgba(3, 28, 17, 0) 0%, rgba(2, 18, 11, 0.45) 25%, rgba(1, 10, 6, 0.95) 100%) !important;
  }

  /* 1. Caption: positioned cleanly below the logo */
  .promo-stage-caption {
    top: clamp(118px, 15vh, 136px) !important;
    left: 14px !important;
    right: 14px !important;
    max-width: none !important;
    width: auto !important;
    text-align: center !important;
    z-index: 15 !important;
    pointer-events: none !important;
  }
  .promo-stage-title {
    font-family: "StapleExpanded", sans-serif !important;
    font-size: clamp(12.5px, 3.4vw, 15px) !important;
    line-height: 1.28 !important;
    letter-spacing: 0.025em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
    margin: 0 !important;
  }
  .promo-stage-title .title-line {
    display: block !important;
  }

  /* 2. Sovg'alar bir qatorda: 1-o'rinda Umra yo'llanmasi */
  .promo-gift--umra {
    top: clamp(216px, 27.5vh, 252px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: clamp(135px, 38vw, 165px) !important;
    z-index: 9 !important;
  }
  .promo-gift--umra .promo-badge {
    bottom: -6px !important;
    right: 0 !important;
    left: auto !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 2.5px 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(28, 212, 122, 0.6) !important;
  }
  .promo-gift--umra:hover .promo-gift-float,
  .promo-gift--umra:active .promo-gift-float {
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.06) rotate(1deg) !important;
    filter: drop-shadow(0 18px 30px rgba(28, 212, 122, 0.5)) brightness(1.05) !important;
  }

  /* 3. Sovg'alar bir qatorda: 2-o'rinda Chevrolet Cobalt (G63 dan ozroq yuqoriga ko'tarilgan) */
  .promo-gift--cobalt {
    top: clamp(305px, 40vh, 360px) !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: clamp(200px, 58vw, 250px) !important;
    z-index: 8 !important;
  }
  .promo-fleet-car.car-4,
  .promo-fleet-car.car-3,
  .promo-fleet-car.car-2 {
    display: none !important;
  }
  .promo-fleet-car.car-1 {
    display: block !important;
    transform: translate(-12px, -4px) scale(0.93) !important;
    opacity: 0.85 !important;
  }
  .promo-gift--cobalt .promo-badge {
    bottom: 6% !important;
    right: 4% !important;
    left: auto !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 2.5px 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(28, 212, 122, 0.6) !important;
  }
  .promo-gift--cobalt:hover .promo-fleet-wrap,
  .promo-gift--cobalt:active .promo-fleet-wrap {
    animation-play-state: paused;
  }
  .promo-gift--cobalt:hover .promo-fleet-lead,
  .promo-gift--cobalt:active .promo-fleet-lead {
    transform: translateY(-6px) scale(1.03) !important;
    filter: brightness(1.06) drop-shadow(0 18px 25px rgba(0, 0, 0, 0.8)) !important;
  }

  /* 4. Sovg'alar bir qatorda: 3-o'rinda Mercedes-Benz G63 Gelik (eng pastda, knopkalar tepasida) */
  .promo-gift--gelik {
    top: auto !important;
    bottom: clamp(140px, 18.5vh, 165px) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: clamp(260px, 76vw, 320px) !important;
    z-index: 7 !important;
  }
  .promo-gift--gelik .promo-badge {
    bottom: 6% !important;
    right: 8% !important;
    left: auto !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    padding: 2.5px 10px !important;
    border: 2px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6), 0 0 14px rgba(28, 212, 122, 0.6) !important;
  }
  .promo-gift--gelik:hover .promo-gelik-wrap,
  .promo-gift--gelik:active .promo-gelik-wrap {
    animation-play-state: paused;
  }
  .promo-gift--gelik:hover .promo-gelik-body,
  .promo-gift--gelik:active .promo-gelik-body {
    transform: translateY(-6px) scale(1.025) !important;
    filter: brightness(1.05) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.85)) !important;
  }

  /* 5. Action Buttons: exact same placement and styling as slide 2 text__bottom */
  .promo-stage-bottom {
    position: absolute !important;
    left: 16px !important;
    right: auto !important;
    bottom: 8rem !important;
    margin-bottom: 10rem !important;
    width: calc(100% - 32px) !important;
    z-index: 15 !important;
    pointer-events: auto !important;
    display: block !important;
  }
  .promo-bottom-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .promo-bottom-actions .glass-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 0 14px !important;
    font-size: clamp(12.5px, 3.2vw, 14.5px) !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
  }
  .promo-bottom-actions .glass-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .promo-bottom-actions .glass-btn svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0 !important;
    margin-left: 6px !important;
  }

  /* 6. Slider Dots */
  .hero-slider-dots {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding: 4px 10px !important;
    gap: 6px !important;
    z-index: 22 !important;
  }
  .hero-dot {
    width: 7px !important;
    height: 7px !important;
  }
  .hero-dot.active {
    width: 22px !important;
  }

  /* 7. Side Navigation Arrows */
  .hero-slider-arrow {
    width: 36px !important;
    height: 36px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(3, 28, 17, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
  }
  .hero-slider-arrow.prev {
    left: 6px !important;
  }
  .hero-slider-arrow.next {
    right: 6px !important;
  }
  .hero-slider-arrow svg {
    width: 16px !important;
    height: 16px !important;
  }
}

/* Compact Mobile Devices (max-height: 700px, e.g. iPhone SE, 375x667) */
@media (max-height: 700px) and (max-width: 580px) {
  .promo-stage-caption {
    top: clamp(100px, 14.5vh, 114px) !important;
  }
  .promo-stage-title {
    font-size: 11.5px !important;
    line-height: 1.25 !important;
  }
  /* 1-o'rinda Umra */
  .promo-gift--umra {
    top: clamp(168px, 24vh, 188px) !important;
    bottom: auto !important;
    width: clamp(110px, 32vw, 135px) !important;
  }
  /* 2-o'rinda Cobalt (G63 dan ozroq yuqorida) */
  .promo-gift--cobalt {
    top: clamp(250px, 36vh, 275px) !important;
    bottom: auto !important;
    width: clamp(165px, 48vw, 200px) !important;
  }
  /* 3-o'rinda G63 (eng pastda) */
  .promo-gift--gelik {
    top: auto !important;
    bottom: clamp(120px, 18vh, 135px) !important;
    width: clamp(220px, 66vw, 260px) !important;
  }
  .promo-stage-bottom {
    bottom: 5.5rem !important;
    margin-bottom: 7rem !important;
  }
  .promo-bottom-actions .glass-btn {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    font-size: 12px !important;
    padding: 0 10px !important;
  }
  .hero-slider-dots {
    bottom: 12px !important;
  }
  .hero-slider-arrow {
    width: 32px !important;
    height: 32px !important;
  }
  .hero-slider-arrow svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* Ultra-Short Mobile / Landscape (max-height: 520px) */
@media (max-height: 520px) {
  .promo-stage-caption {
    top: 70px !important;
  }
  .promo-stage-title {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  .promo-gift--gelik {
    top: auto !important;
    bottom: 14% !important;
    right: 4% !important;
    left: auto !important;
    margin: 0 !important;
    width: 38vw !important;
  }
  .promo-gift--cobalt {
    bottom: 16% !important;
    left: 4% !important;
    width: 30vw !important;
  }
  .promo-gift--umra {
    bottom: 40% !important;
    right: 8% !important;
    width: 18vw !important;
  }
  .promo-stage-bottom {
    bottom: 3.5rem !important;
    margin-bottom: 3rem !important;
  }
  .hero-slider-dots {
    bottom: 8px !important;
  }
}

/* Glass button variants */
.glass-btn--emerald {
  background: linear-gradient(135deg, rgba(28, 212, 122, 0.25), rgba(13, 84, 55, 0.4)) !important;
  border-color: rgba(28, 212, 122, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(28, 212, 122, 0.25);
}

.glass-btn--emerald:hover {
  background: linear-gradient(135deg, rgba(28, 212, 122, 0.4), rgba(13, 84, 55, 0.6)) !important;
  border-color: #1cd47a !important;
  box-shadow: 0 12px 40px rgba(28, 212, 122, 0.4);
  transform: translateY(-2px);
}

.glass-btn--gold {
  background: linear-gradient(135deg, rgba(229, 185, 100, 0.25), rgba(184, 134, 45, 0.4)) !important;
  border-color: rgba(229, 185, 100, 0.5) !important;
  color: #fff !important;
  box-shadow: 0 8px 32px rgba(229, 185, 100, 0.2);
}

.glass-btn--gold:hover {
  background: linear-gradient(135deg, rgba(229, 185, 100, 0.4), rgba(184, 134, 45, 0.6)) !important;
  border-color: #e5b964 !important;
  box-shadow: 0 12px 40px rgba(229, 185, 100, 0.35);
  transform: translateY(-2px);
}

/* Hero Slider Navigation & Controls */
/* Hero Slider Navigation & Controls (Arrows on Left & Right sides) */
.hero-slider-nav {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 20;
}

.hero-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: rgba(3, 28, 17, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(28, 212, 122, 0.25);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 25;
}

.hero-slider-arrow.prev {
  left: 3rem;
}

.hero-slider-arrow.next {
  right: 3rem;
}

.hero-slider-arrow svg {
  width: 2.4rem;
  height: 2.4rem;
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.hero-slider-arrow.prev:hover svg {
  transform: translateX(-3px);
}

.hero-slider-arrow.next:hover svg {
  transform: translateX(3px);
}

.hero-slider-arrow:hover {
  background: rgba(28, 212, 122, 0.3);
  border-color: rgba(28, 212, 122, 0.85);
  color: #ffffff;
  transform: translateY(-50%) scale(1.12);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(28, 212, 122, 0.6);
}

.hero-slider-arrow:active {
  transform: translateY(-50%) scale(0.95);
}

.hero-slider-dots {
  position: absolute;
  bottom: 3.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 1.4rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 4rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  z-index: 22;
  transition: all 0.3s ease;
}

.hero-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-dot.active {
  width: 2.8rem;
  background: linear-gradient(90deg, #1cd47a, #34d399);
  box-shadow: 0 0 12px rgba(28, 212, 122, 0.6);
}


/* ==========================================================================
   2. DEDICATED PROMOTION PAGE (AKSIYA.HTML) - HEADER & LOGO (PROJECTS STYLE)
   ========================================================================== */

/* Logo at Top of Content (Natural page flow, scrolls with page, like projects.html) */
.promo-main .logo {
  margin-bottom: 5rem;
  padding: 0;
  display: block;
}

.promo-main .logo a {
  display: inline-block;
  text-decoration: none;
}

.promo-main .logo .Icon-logo {
  width: 23.2rem;
  height: 5.829rem;
}

@media (max-width: 768px) {
  .promo-main .logo {
    margin-bottom: 6rem;
  }
}

/* HeaderDesk: Sticky Fixed Menu Button (Only for dedicated promotion landing page) */
body.promo-page-body .HeaderDesk,
body:has(.promo-page-wrapper) .HeaderDesk {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  z-index: 999 !important;
  pointer-events: none !important;
  height: 0 !important;
  background: transparent !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button {
  position: fixed !important;
  top: 7.5rem !important;
  right: 6.7rem !important;
  left: auto !important;
  bottom: auto !important;
  width: 4rem !important;
  height: 4rem !important;
  cursor: pointer !important;
  pointer-events: all !important;
  background-color: #000 !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  z-index: 1000 !important;
  color: #fff !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button:hover,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button:hover {
  transform: scale(1.08) !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button.hidden,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button.hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button .Icon,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button .Icon {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  transition: opacity 0.2s ease !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button .Icon.Icon-menu,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button .Icon.Icon-menu {
  opacity: 1 !important;
}

body.promo-page-body .HeaderDesk .HeaderDesk__menu-button .Icon.Icon-close,
body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button .Icon.Icon-close {
  opacity: 0 !important;
}

body.promo-page-body .HeaderDesk.HeaderDesk_menu-opened .HeaderDesk__menu-button .Icon.Icon-menu,
body:has(.promo-page-wrapper) .HeaderDesk.HeaderDesk_menu-opened .HeaderDesk__menu-button .Icon.Icon-menu {
  opacity: 0 !important;
}

body.promo-page-body .HeaderDesk.HeaderDesk_menu-opened .HeaderDesk__menu-button .Icon.Icon-close,
body:has(.promo-page-wrapper) .HeaderDesk.HeaderDesk_menu-opened .HeaderDesk__menu-button .Icon.Icon-close {
  opacity: 1 !important;
}

@media (max-width: 1200px) {
  body.promo-page-body .HeaderDesk .HeaderDesk__menu-button,
  body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button {
    top: 6.5rem !important;
    right: 4rem !important;
    left: auto !important;
  }
}

@media (max-width: 768px) {
  body.promo-page-body .HeaderDesk,
  body:has(.promo-page-wrapper) .HeaderDesk {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 200 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  body.promo-page-body .HeaderDesk .HeaderDesk__menu-button,
  body:has(.promo-page-wrapper) .HeaderDesk .HeaderDesk__menu-button {
    position: absolute !important;
    top: 6.5rem !important;
    right: 4rem !important;
    left: auto !important;
    bottom: auto !important;
    width: 4rem !important;
    height: 4rem !important;
    background-color: #000 !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
  }
}

/* Page wrapper & Ambient Glow */
.promo-page-wrapper {
  min-height: 100vh;
  background: #03140c;
  color: #fff;
  font-family: 'Factor A', 'FactorA', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
  position: relative;
}

.promo-ambient-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: 
    radial-gradient(circle at 15% 20%, rgba(28, 212, 122, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(13, 84, 55, 0.18) 0%, transparent 55%),
    radial-gradient(circle at 50% 90%, rgba(229, 185, 100, 0.08) 0%, transparent 50%);
}

.promo-main {
  position: relative;
  z-index: 1;
  padding-top: 7.5rem;
  padding-bottom: 8rem;
}

@media (max-width: 768px) {
  .promo-main {
    padding-top: 7.5rem;
    padding-bottom: 6rem;
  }
}

/* Container - Aligned with projects.html grid (9rem desktop, 4rem tablet/mobile) */
.promo-container {
  max-width: 144rem;
  margin: 0 auto;
  padding: 0 9rem;
}

@media (max-width: 1200px) {
  .promo-container {
    padding: 0 4rem;
  }
}

@media (max-width: 768px) {
  .promo-container {
    padding: 0 4rem;
  }
}

/* Header Top Bar in Aksiya page */
.promo-page-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.promo-back-link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem;
  padding: 1rem 1.8rem;
  border-radius: 3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.25s ease;
}

.promo-back-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(-3px);
}

.promo-year-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.8rem;
  border-radius: 3rem;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(28, 212, 122, 0.15);
  border: 1px solid rgba(28, 212, 122, 0.35);
  color: #1cd47a;
}

.promo-pulse-dot {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: #1cd47a;
  box-shadow: 0 0 10px #1cd47a;
  animation: promoPulse 2s infinite;
}

@keyframes promoPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(28, 212, 122, 0.7); }
  70% { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(28, 212, 122, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(28, 212, 122, 0); }
}

/* --------------------------------------------------------------------------
   HERO BANNER CARD (REFERENCE ARTWORK SHOWCASE)
   -------------------------------------------------------------------------- */
.promo-hero-card {
  position: relative;
  border-radius: 2.8rem;
  overflow: hidden;
  margin-bottom: 6rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #042114;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(28, 212, 122, 0.15);
}

.promo-hero-card .promo-stage-container {
  position: relative;
  inset: auto;
  width: 100%;
  height: clamp(560px, 45vw, 680px);
  min-height: 520px;
  overflow: hidden;
  display: block;
}

.promo-hero-card .promo-stage-caption {
  top: 9%;
  left: 5%;
  max-width: 68rem;
}

.promo-hero-card .promo-gift--umra {
  top: 9%;
  right: 7%;
  width: clamp(160px, 16vw, 240px);
}

.promo-hero-card .promo-gift--cobalt {
  left: 4%;
  bottom: 15%;
  width: clamp(210px, 23vw, 320px);
}

.promo-hero-card .promo-gift--gelik {
  right: 1.5%;
  bottom: 5%;
  width: clamp(320px, 38vw, 550px);
}

@media (max-width: 1440px) {
  .promo-hero-card .promo-gift--cobalt {
    left: 3.5%;
    bottom: 14%;
    width: clamp(190px, 21vw, 290px);
  }
  .promo-hero-card .promo-gift--gelik {
    right: 1%;
    bottom: 4%;
    width: clamp(260px, 30vw, 430px);
  }
}

.promo-hero-card picture {
  display: block;
  width: 100%;
}

.promo-hero-card img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Quick Bar below hero banner */
.promo-quick-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.2rem 3.5rem;
  background: rgba(5, 33, 20, 0.85);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 2rem;
  box-sizing: border-box;
  width: 100%;
}

.promo-contacts-chips {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.promo-chip {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 2.2rem;
  border-radius: 4rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: #fff;
  transition: all 0.25s ease;
  text-decoration: none;
  box-sizing: border-box;
}

.promo-chip--phone {
  background: linear-gradient(135deg, #1cd47a, #0fa95c);
  color: #032012;
  box-shadow: 0 6px 20px rgba(28, 212, 122, 0.35);
}

.promo-chip--phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(28, 212, 122, 0.5);
  color: #000;
}

.promo-chip--tg {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.promo-chip--tg:hover {
  background: #229ed9;
  border-color: #229ed9;
  transform: translateY(-2px);
}

.promo-chip-action {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 2.8rem;
  border-radius: 4rem;
  font-size: 1.5rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(229, 185, 100, 0.9), rgba(184, 134, 45, 0.95));
  color: #0d1e13;
  box-shadow: 0 6px 24px rgba(229, 185, 100, 0.3);
  transition: all 0.25s ease;
  box-sizing: border-box;
}

.promo-chip-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(229, 185, 100, 0.5);
  background: #f7d78a;
}

/* Tablet & Medium Breakpoint for Promo Hero Card Stage (769px - 1100px) */
@media (max-width: 1100px) and (min-width: 769px) {
  .promo-hero-card .promo-stage-container {
    height: 490px !important;
  }
  .promo-hero-card .promo-stage-caption {
    top: 6% !important;
    left: 4% !important;
    max-width: 44rem !important;
  }
  .promo-hero-card .promo-stage-title {
    font-size: 2.2rem !important;
  }
  .promo-hero-card .promo-gift--umra {
    top: 6% !important;
    right: 3% !important;
    width: clamp(150px, 18vw, 190px) !important;
  }
  .promo-hero-card .promo-gift--cobalt {
    bottom: 12% !important;
    left: 3% !important;
    width: clamp(230px, 30vw, 300px) !important;
  }
  .promo-hero-card .promo-gift--gelik {
    bottom: 5% !important;
    right: 1% !important;
    width: clamp(300px, 40vw, 420px) !important;
  }
}

/* Mobile View for Promo Hero Card & Quick Bar (<= 768px) */
@media (max-width: 768px) {
  .promo-hero-card {
    border-radius: 2rem;
    margin-bottom: 4rem;
    overflow: hidden;
  }
  .promo-quick-bar {
    padding: 1.4rem 1.4rem;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
    gap: 1rem;
    background: rgba(3, 22, 14, 0.92);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  .promo-contacts-chips {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 1rem !important;
  }
  .promo-chip {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1.2rem !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border-radius: 1.4rem !important;
    gap: 0.8rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  .promo-chip--phone {
    background: rgba(28, 212, 122, 0.12) !important;
    border: 1px solid rgba(28, 212, 122, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  .promo-chip--phone svg {
    color: #1cd47a !important;
    filter: drop-shadow(0 0 6px rgba(28, 212, 122, 0.4)) !important;
  }
  .promo-chip--tg {
    background: rgba(34, 158, 217, 0.12) !important;
    border: 1px solid rgba(34, 158, 217, 0.35) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  .promo-chip--tg svg {
    color: #38bdf8 !important;
    filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.4)) !important;
  }
  .promo-chip-action {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 1.8rem !important;
    font-size: 1.55rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    border-radius: 1.4rem !important;
    background: linear-gradient(135deg, #e5b964 0%, #b8862d 100%) !important;
    border: 1px solid rgba(255, 235, 175, 0.45) !important;
    color: #051a10 !important;
    box-shadow: 0 6px 20px rgba(229, 185, 100, 0.3) !important;
    gap: 0.9rem !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
  }
  .promo-chip svg,
  .promo-chip-action svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  /* Single-column vertical stage on mobile: caption -> umra -> cobalt -> gelik */
  .promo-hero-card .promo-stage-container {
    height: 550px !important;
    min-height: 550px !important;
  }
  .promo-hero-card .promo-stage-caption {
    top: 18px !important;
    left: 12px !important;
    right: 12px !important;
    text-align: center !important;
    max-width: none !important;
    width: auto !important;
    pointer-events: none !important;
    z-index: 12 !important;
  }
  .promo-hero-card .promo-stage-title {
    font-family: "StapleExpanded", sans-serif !important;
    font-size: clamp(11.5px, 3.2vw, 14px) !important;
    line-height: 1.25 !important;
    letter-spacing: 0.02em !important;
    color: #ffffff !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9) !important;
  }
  .promo-hero-card .promo-gift--umra {
    top: 126px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: clamp(115px, 32vw, 145px) !important;
    z-index: 9 !important;
  }
  .promo-hero-card .promo-gift--cobalt {
    top: 230px !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: clamp(175px, 50vw, 220px) !important;
    z-index: 10 !important;
  }
  .promo-hero-card .promo-gift--gelik {
    top: auto !important;
    bottom: 18px !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    width: clamp(240px, 70vw, 300px) !important;
    z-index: 11 !important;
  }
}

/* Smartphone Small View (Max-Width: 420px) */
@media (max-width: 420px) {
  .promo-hero-card .promo-stage-container {
    height: 530px !important;
    min-height: 530px !important;
  }
  .promo-hero-card .promo-stage-caption {
    top: 16px !important;
    left: 10px !important;
    right: 10px !important;
  }
  .promo-hero-card .promo-stage-title {
    font-size: clamp(11px, 3vw, 12.5px) !important;
  }
  .promo-hero-card .promo-gift--umra {
    top: 118px !important;
    width: clamp(110px, 30vw, 135px) !important;
  }
  .promo-hero-card .promo-gift--cobalt {
    top: 218px !important;
    width: clamp(165px, 48vw, 205px) !important;
  }
  .promo-hero-card .promo-gift--gelik {
    bottom: 16px !important;
    width: clamp(230px, 66vw, 280px) !important;
  }
}

/* --------------------------------------------------------------------------
   SECTION HEADINGS
   -------------------------------------------------------------------------- */
.promo-section-header {
  text-align: center;
  max-width: 82rem;
  margin: 0 auto 5rem;
}

.promo-section-tag {
  display: inline-block;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1cd47a;
  margin-bottom: 1.2rem;
}

.promo-section-title {
  font-size: 4.4rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.6rem;
  background: linear-gradient(135deg, #ffffff 40%, #c1ebd6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.promo-section-desc {
  font-size: 1.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 768px) {
  .promo-section-title {
    font-size: 3rem;
  }
  .promo-section-desc {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   GRAND PRIZES SECTION (SOVRINLAR)
   -------------------------------------------------------------------------- */
.promo-prizes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  margin-bottom: 7rem;
}

.promo-prize-card {
  position: relative;
  background: linear-gradient(180deg, rgba(8, 48, 30, 0.6) 0%, rgba(4, 28, 17, 0.8) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2.4rem;
  padding: 3.5rem 2.8rem 3rem;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}

.promo-prize-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(28, 212, 122, 0.8), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.promo-prize-card:hover {
  transform: translateY(-8px);
  border-color: rgba(28, 212, 122, 0.35);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(28, 212, 122, 0.2);
}

.promo-prize-card:hover::before {
  opacity: 1;
}

/* Featured G63 card */
.promo-prize-card--featured {
  background: linear-gradient(180deg, rgba(14, 68, 42, 0.7) 0%, rgba(4, 30, 18, 0.9) 100%);
  border-color: rgba(229, 185, 100, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(229, 185, 100, 0.15);
}

.promo-prize-card--featured::before {
  background: linear-gradient(90deg, transparent, #e5b964, transparent);
  opacity: 1;
}

.promo-prize-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.promo-prize-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.6rem;
  border-radius: 3rem;
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  background: #0f8548;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 14px rgba(15, 133, 72, 0.4);
}

.promo-prize-count-badge--gold {
  background: linear-gradient(135deg, #b8862d, #e5b964);
  color: #051a0f;
  box-shadow: 0 4px 18px rgba(229, 185, 100, 0.4);
}

.promo-prize-status-label {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.promo-prize-img-box {
  height: 19rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.promo-prize-img-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.45s ease;
  filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.6));
}

.promo-prize-card:hover .promo-prize-img-box img {
  transform: scale(1.06) translateY(-4px);
}

.promo-prize-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: #fff;
}

.promo-prize-desc {
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 2rem;
  flex-grow: 1;
}

.promo-prize-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.8rem;
}

.promo-prize-features li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.4rem;
  color: rgba(255, 255, 255, 0.85);
}

.promo-prize-features li svg {
  color: #1cd47a;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .promo-prizes-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .promo-prize-img-box {
    height: 22rem;
  }
}

/* --------------------------------------------------------------------------
   DETAILS & RULES (SHARTLAR VA ISHTIROKCHILAR)
   -------------------------------------------------------------------------- */
.promo-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
  margin-bottom: 6rem;
}

.promo-rules-grid--3cols {
  grid-template-columns: repeat(3, 1fr);
}

.promo-rule-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2.4rem;
  padding: 3.5rem;
  position: relative;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.promo-rule-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-4px);
}

.promo-rule-icon {
  width: 5.6rem;
  height: 5.6rem;
  min-width: 52px;
  min-height: 52px;
  max-width: 56px;
  max-height: 56px;
  border-radius: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.2rem;
  background: rgba(28, 212, 122, 0.15);
  color: #1cd47a;
  border: 1px solid rgba(28, 212, 122, 0.3);
  box-sizing: border-box;
  flex-shrink: 0;
}

.promo-rule-icon svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
  display: block;
  flex-shrink: 0;
}

.promo-rule-title {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
  color: #fff;
}

.promo-rule-text {
  font-size: 1.6rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
}

.promo-highlight-box {
  margin-top: 2rem;
  padding: 1.6rem 2rem;
  border-radius: 1.4rem;
  background: rgba(28, 212, 122, 0.08);
  border-left: 3px solid #1cd47a;
  font-size: 1.45rem;
  line-height: 1.5;
  color: #a7f3d0;
}

@media (max-width: 768px) {
  .promo-rules-grid,
  .promo-rules-grid--3cols {
    grid-template-columns: 1fr !important;
    gap: 1.6rem !important;
  }
  .promo-rule-card {
    padding: 2.2rem 2rem !important;
    border-radius: 2rem !important;
  }
  .promo-rule-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    border-radius: 1.4rem !important;
    margin-bottom: 1.6rem !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  .promo-rule-icon svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  .promo-rule-card > div[style*="display: flex"] {
    gap: 1.6rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .promo-rule-card > div > div[style*="min-width"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  .promo-rule-title {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------
   NEW BUYERS & PURCHASE TERMS (HALI XONADON OLMAGANLAR UCHUN)
   -------------------------------------------------------------------------- */
.promo-banner-opportunity {
  background: linear-gradient(135deg, rgba(8, 48, 30, 0.85) 0%, rgba(4, 25, 15, 0.95) 100%);
  border: 1px solid rgba(28, 212, 122, 0.25);
  border-radius: 2.8rem;
  padding: 5rem 6rem;
  margin-bottom: 7rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

.promo-opportunity-glow {
  position: absolute;
  top: -40%;
  right: -20%;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 212, 122, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.promo-opportunity-content {
  position: relative;
  z-index: 1;
}

.promo-opportunity-header {
  max-width: 80rem;
  margin-bottom: 4rem;
}

.promo-opportunity-header h2 {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.6rem;
  color: #fff;
}

.promo-opportunity-header p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
}

.promo-stats-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 4rem;
}

.promo-stat-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 2rem;
  padding: 2.6rem 2.2rem;
  text-align: center;
  transition: all 0.3s ease;
}

.promo-stat-box:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(28, 212, 122, 0.4);
  transform: translateY(-4px);
}

.promo-stat-number {
  font-size: 4rem;
  font-weight: 800;
  color: #1cd47a;
  line-height: 1;
  margin-bottom: 1rem;
}

.promo-stat-number--gold {
  color: #e5b964;
}

.promo-stat-label {
  font-size: 1.5rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.promo-opportunity-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}

.promo-opportunity-actions .promo-btn-large {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 5.4rem !important;
  min-height: 5.4rem !important;
  max-height: 5.4rem !important;
  padding: 0 3.2rem !important;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: 4rem !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

.promo-opportunity-actions .promo-btn-primary {
  border: 1px solid transparent !important;
}

.promo-opportunity-actions .promo-btn-secondary {
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}

@media (max-width: 900px) {
  .promo-banner-opportunity {
    padding: 3.5rem 2.5rem;
  }
  .promo-opportunity-header h2 {
    font-size: 2.6rem;
  }
  .promo-stats-cards {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .promo-opportunity-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 1.2rem !important;
    box-sizing: border-box !important;
  }
  .promo-opportunity-actions .promo-btn-large {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.3rem 2rem !important;
    font-size: clamp(13.5px, 3.6vw, 15px) !important;
    font-weight: 600 !important;
    border-radius: 3rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .promo-opportunity-actions .promo-btn-primary {
    border: 1px solid transparent !important;
  }
  .promo-opportunity-actions .promo-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }
  .promo-opportunity-actions .promo-btn-large svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }

  .promo-cta-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 1.2rem !important;
    box-sizing: border-box !important;
  }
  .promo-cta-buttons .promo-btn-large {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    height: auto !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 1.3rem 2rem !important;
    font-size: clamp(13.5px, 3.6vw, 15px) !important;
    font-weight: 600 !important;
    border-radius: 3rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }
  .promo-cta-buttons .promo-btn-primary {
    border: 1px solid transparent !important;
  }
  .promo-cta-buttons .promo-btn-secondary {
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
  }
  .promo-cta-buttons .promo-btn-large svg {
    flex-shrink: 0 !important;
    width: 18px !important;
    height: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   CTA SECTION & LEGAL DISCLAIMER
   -------------------------------------------------------------------------- */
.promo-cta-section {
  text-align: center;
  margin-bottom: 6rem;
  padding: 5rem 3rem;
  border-radius: 2.8rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.promo-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.promo-btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.6rem 3.4rem;
  border-radius: 4rem;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  font-family: inherit;
  box-sizing: border-box;
  vertical-align: middle;
  border: 1px solid transparent;
}

.promo-btn-primary {
  background: linear-gradient(135deg, #1cd47a 0%, #0d9651 100%);
  border: 1px solid transparent;
  color: #032012;
  box-shadow: 0 10px 30px rgba(28, 212, 122, 0.4);
}

.promo-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(28, 212, 122, 0.6);
  color: #000;
}

.promo-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
}

.promo-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-3px);
}

.promo-legal-card {
  padding: 2.5rem 3rem;
  border-radius: 1.6rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1.3rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
  max-width: 100rem;
  margin: 0 auto;
}