:root{
      --bg1:#fff7fb; --bg2:#ffe3ef;
      --shadow2: 0 10px 25px rgba(0,0,0,.10);
      --red1:#ff2e2e; --red2:#b80012;
      --muted:#6b6b75;
    }
    *{box-sizing:border-box}

    .wrap{ width:min(1180px,94vw); margin:0 auto; padding:26px 0 22px; }

    .topBadge{ display:flex; justify-content:center; margin:6px 0 12px; }
.badge {
    padding: 43px 42px;
    border-radius: 18px;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 34px;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fe801a, #fe801a);
    box-shadow: 0 14px 30px rgba(184, 0, 18, .35);
    position: relative;
    margin-bottom: -164px;
    margin-top: 46px;
    z-index: 999;
}
    .badge:after{
      content:""; position:absolute; inset:8px 10px auto 10px; height:12px; border-radius:999px;
      background:linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,0));
      opacity:.75;
    }

    .stageArea{ display:flex; justify-content:center; padding:6px 0 0; }
    .orbitWrap{ width:min(900px,96vw); position:relative; display:flex; justify-content:center; padding:10px 0 22px; }

.orbitGlow {
    position: absolute;
    width: min(820px, 92vw);
    height: min(560px, 80vw);
    border-radius: 999px;
    background: radial-gradient(circle at 47% 45%, #fe801a5e, rgba(255, 0, 40, 0) 48%), radial-gradient(circle at 50% 55%, rgba(255, 255, 255, .65), rgba(255, 255, 255, 0) 55%);
    opacity: .95;
    z-index: 1;
    pointer-events: none;
}
    .circleZone{
      width:min(740px,96vw);
      aspect-ratio:1/1;
      position:relative;
      z-index:5;
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .heroHalo{ position:absolute; inset:0; display:grid; place-items:center; z-index:3; pointer-events:none; }
    .haloMain{
      width:68%; aspect-ratio:1/1; border-radius:50%;

      transform: translateY(10px);
    }
    .haloRing{
      position:absolute; width:88%; height:88%; border-radius:50%;
      opacity:.95;
    }
    .haloRing2{
      position:absolute; width:104%; height:104%; border-radius:50%;
    }
    .haloBubbles{
      position:absolute; width:78%; height:78%; border-radius:50%;
      background:
        radial-gradient(10px 10px at 18% 28%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(8px 8px at 34% 70%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(12px 12px at 70% 32%, rgba(255,255,255,.65), transparent 60%),
        radial-gradient(9px 9px at 78% 68%, rgba(255,255,255,.7), transparent 60%),
        radial-gradient(7px 7px at 50% 18%, rgba(255,255,255,.6), transparent 60%);
      opacity:.9; filter: blur(.2px);
    }

    .categoryCircle{
      position:absolute; inset:0; border-radius:50%;
      z-index:8;
      pointer-events:none;
      opacity:0; visibility:hidden;
      transform-origin:center;
    }
    .categoryCircle.active{
      opacity:1; visibility:visible;
    }

    .brandDot{
      position:absolute;
      width:140px; height:136px;
      border-radius:50%;
      background: radial-gradient(circle at 50% 55%, rgba(240, 245, 255, 0.9), #ffffff0a 40%, #fe801a63 60%, #fe801a6b);
      box-shadow: var(--shadow2);
      display:flex; align-items:center; justify-content:center;
      pointer-events:auto; cursor:pointer; user-select:none;
      transform: translate(-50%, -50%);
      overflow:hidden;
    }
.brandDot.active {
    outline: 3px solid #fe801a;
    box-shadow: 0 14px 35px #fdfdfd;
}
    .brandDot .dotInner{
      width:120px; height:109px;
      border-radius:50%;
    padding:6px;
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .brandDot .dotInner img{
      width:150px;
      height:90%;
      object-fit:contain;
      display:block;
    }

    .centerMockups{
      position:absolute;
      z-index:9;
      display:flex;
      align-items:center;
      justify-content:center;
      transform: translateY(18px);
      pointer-events:none;
    }
    .singleMock{
      width:min(540px, 76vw);
      height:min(320px, 44vw);
      display:flex;
      align-items:center;
      justify-content:center;
      filter: drop-shadow(0 22px 45px rgba(0,0,0,.22));
    }
    .singleMock img{
      max-width:74%;
      max-height:100%;
      object-fit:contain;
      transform-origin:center;
    }

    .podium::before{
  content:'';
  position:absolute;
  top:12px;
  left:8%;
  width:84%;
  height:40px;
  border-radius:999px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.55),
    rgba(255,255,255,0)
  );
}

/* bottom shadow ring */
.podium::after{
  content:'';
  position:absolute;
  bottom:-18px;
  left:50%;
  transform:translateX(-50%);
  width:80%;
  height:40px;
  border-radius:50%;
  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.35),
    transparent 70%
  );
}


.podium{
      position:absolute; bottom:15px; width:88%; height:140px; border-radius:999px; z-index:8;
    background:linear-gradient(180deg, #fe801a 0%, #fe801a 50%, #fe801a 100%);
      box-shadow:
    0 20px 40px rgba(180, 0, 20, 0.35),
    inset 0 4px 0 rgba(255,255,255,0.45),
    inset 0 -10px 20px rgba(0,0,0,0.18);
      overflow:hidden; pointer-events:none;
    }
    
.podium:hover, .allProductsBtn2:hover .podium{
     background:
    linear-gradient(
      180deg,
      #ff5e5e 0%,
      #ff2b2b 50%,
      #b3001b 100%
    );
  } 
  .podium{
  pointer-events: auto;
  cursor: pointer;
}
  
  
  body:has(.allProductsBtn2:hover) .podium{
  background: linear-gradient(
    180deg,
    #ff5e5e 0%,
    #ff2b2b 50%,
    #b3001b 100%
  );
}  
    
.allProductsBtn2{
  background: transparent !important;
  box-shadow: none !important;
  font-size: 22px !important;
  letter-spacing: 2px !important;
}
.allProductsBtn2::before{
  display: none !important;
}
    .allProductsBtn{
      position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
      padding:12px 42px; border-radius:999px; color:#fff;
      font-weight:900; letter-spacing:1px; text-transform:uppercase;
      background: linear-gradient(180deg, #ff3a3a, #b80012);
      margin-bottom:40px;
      box-shadow:
        0 18px 34px rgba(184,0,18,.30),
        inset 0 2px 0 rgba(255,255,255,.35),
        inset 0 -6px 16px rgba(0,0,0,.12);
      cursor:pointer; user-select:none; z-index:10; overflow:hidden;
    }
    .allProductsBtn::before{
      content:""; position:absolute; left:12px; right:12px; top:6px;
      height:45%; border-radius:999px;
      background: linear-gradient(90deg, rgba(255,255,255,.55), rgba(255,255,255,0));
      opacity:.75;
    }

    .cats{ margin-top:18px; display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
    .cat{ cursor:pointer; }
    .cat .mini img{
      width:100%;
      height:auto;
      object-fit:contain;
      border-radius:17px;
      display:block;
    }
.cat.active .mini img {
    outline: 3px solid #fe801a;
    box-shadow: 0 18px 30px rgba(255, 0, 40, .25), 0 0 0 8px rgba(251, 114, 130, .15), 0 0 28px rgba(251, 114, 130, .55);
    transform: scale(1.08);
    transition: .35s ease;
}

    .hint{
      text-align:center;
      color:var(--muted);
      font-size:12px;
      margin-top:10px;
    }

/*.bubbles {*/
/*    position: relative;*/
/*    width: 100%;*/
/*    height: 300px;*/
/*}*/

/* common bubble style */
.bubble {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.15), rgb(255 0 0 / 5%));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 0 20px rgb(255 208 208 / 25%), 0 -15px 30px rgb(0 0 0 / 1%);
}

/* individual bubbles */
.bubble1 {
    width: 120px;
    height: 120px;
    top: 20px;
    left: 40px;
}

.bubble2 {
    width: 80px;
    height: 80px;
    top: 140px;
    left: 120px;
}

.bubble3 {
    width: 150px;
    height: 150px;
    top: 60px;
    right: 80px;
}

.bubble4 {
    width: 60px;
    height: 60px;
    bottom: 30px;
    right: 160px;
}
.bubble5 {
    width: 150px;
    height: 150px;
    bottom: 10px;
    right: 480px;
}
.bubble6 {
    width: 100px;
    height: 100px;
    bottom: 50px;
    left: 290px;
}
.bubble7 {
    width: 50px;
    height: 50px;
    bottom: 50px;
    left: 490px;
}
.bubble8 {
    width: 80px;
    height: 80px;
    bottom: 150px;
    right: 420px;
}
.bubble9 {
    width: 120px;
    height: 120px;
    bottom: 220px;
    left: 414px;
}
.bubble10 {
    width: 75px;
    height: 75px;
    bottom: 150px;
    right: 550px;
}

.heroSection {
    width: 100%;
    position: relative;
    overflow: hidden;
     background: linear-gradient(180deg, rgb(247 136 40 / 10%) 90%, rgba(254, 200, 162, 1) 100%);
}

 .stageArea{
  position: relative;
  overflow: hidden;
}

.stageArea .bubbles{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.stageArea .orbitWrap,
.stageArea .topBadge{
  position: relative;
  z-index: 5;
}
@media (max-width:980px){
      .badge{font-size:28px}
      .brandDot{width:66px;height:66px}
      .brandDot .dotInner{width:56px;height:56px}
      .cats{grid-template-columns:repeat(3,1fr)}
}
    
    .outside-box-left-17{
    margin-left: -17vw;
}.slide-img {
    position: relative;
}

.slide-img img {
    width: 100%;
    height: auto;
    display: block;
}

.slide-img .overlay {
    position: absolute;
    inset: 0;
    background: rgb(217 0 0 / 25%);
    z-index: 2;
}