:root {
  --page: #f4f6fb;
  --ink: #0f172a;
  --blue: #2f6bff;
  --blueSoft: rgba(47, 107, 255, 0.18);
  --shadow2: 0 25px 70px rgba(15, 23, 42, 0.12);

  --headerH: 112px;

  --avatarSize: clamp(86px, 11.5vh, 145px);
  --circleSize: clamp(580px, 78vh, 900px);
  --videoSize: clamp(360px, 40vh, 550px);
}

/* =======================================================
   DESKTOP / LAPTOP  
======================================================= */
@media (min-width: 1024px) {
    .soundToggleBtn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
  width: 34px;  /* ya apni icon ke size ke hisaab se */
  height: 34px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}
.videoCard button#soundToggleBtn:hover {
    background: transparent !important;
}
.soundToggleBtn img {
  width: 100%;
  height: 100%;
  display: none;
}

.soundToggleBtn .icon-muted {
  display: block;  /* default: muted icon visible */
}

.soundToggleBtn.is-on .icon-muted {
  display: none;
}
.soundToggleBtn.is-on .icon-unmuted {
  display: block;
}

 #bgWrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("https://impliway.com/wp-content/uploads/2025/12/Group-1171279620.png.webp");
  background-size: auto;
  background-repeat: no-repeat;
  background-position:center;
  pointer-events: none;
}

  .pin-section {
    position: relative;
    min-height: 225vh;
  }

  .stage {
    width: 100vw;
    height: calc(110vh - var(--headerH));
    position: sticky;
    top: var(--headerH);
    overflow: hidden;
    background: linear-gradient(
      180deg,
      rgba(240, 241, 242, 0) 0%,
      #f0f1f2 100%
    );
  }

  .copy {
    position: absolute;
    left: 50%;
    top: 4.6vh;
    transform: translateX(-50%);
    text-align: center;
    z-index: 6;
    padding: 0 4vw;
    width: min(58vw, 860px);
  }

  .avatar-layer {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  .avatar {
    position: absolute;
    width: var(--avatarSize);
    height: var(--avatarSize);
    border-radius: 999px;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition: opacity 0.4s ease, transform 0.6s ease;
    filter: drop-shadow(0 16px 30px rgba(15, 23, 42, 0.18));
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .a1 { --px: 5;  --py: 18; }
  .a2 { --px: 12; --py: 50; }
  .a3 { --px: 10; --py: 82; }

  .a4 { --px: 95; --py: 18; }
  .a5 { --px: 88; --py: 50; }
  .a6 { --px: 90; --py: 82; }

  .center-stack {
    position: absolute;
    left: 50%;
    top: 43vh;
    transform: translate(-50%, -50%);
    z-index: 5;
    display: grid;
    justify-items: center;
    row-gap: 2.5vh;
  }

  /* Default hidden state for video */
  .videoCard {
    width: var(--videoSize);
    aspect-ratio: 10 / 16;
    border-radius: clamp(18px, 2vh, 26px);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow2);

    opacity: 0;
    transform: scale(0.8) translateY(40px);
    transition: opacity 0.5s ease, transform 0.6s ease;
  }

  .videoEl {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ctaBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins";
    font-weight: 500;
    font-size: 15px;
    line-height: 22px;
    background: #273d88;
    color: #fff;
    padding: 12px 20px;
    border-radius: 6px;
  }
  .ctaBtn:hover {
    background: #00b5d3;
    color:#fff;
  }
}

/* Short height screens */
@media (min-width: 1024px) and (max-height: 820px) {
  :root {
    --videoSize: clamp(280px, 30vh, 420px);
    --circleSize: clamp(540px, 72vh, 820px);
  }
  .center-stack { top: 47.5vh; }
  .copy { top: 1vh; }
}