.iot-hero, #iot-hero, [data-iot-hero],
section.hero, #hero.hero, #hero {
  position: relative;
  /* default bottom offset for the hint */
  --iot-hint-bottom: clamp(10px, 2.5vh, 26px);
}

/* Mobile: push the arrow a bit higher to avoid bottom browser UI */
@media (max-width: 800px) {
  .iot-hero, #iot-hero, [data-iot-hero],
  section.hero, #hero.hero, #hero {
    --iot-hint-bottom: clamp(26px, 8vh, 96px);
  }
}

.iot-hero__navhint {
  position: absolute;
  left: 50%;
  bottom: var(--iot-hint-bottom);
  transform: translateX(-50%) translateY(8px) scale(0.86);
  transform-origin: center bottom;
  /* default size */
  width: clamp(44px, 8vw, 80px);
  height: auto;
  opacity: 0;
  pointer-events: auto; /* clickable */
  z-index: 50;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
  will-change: transform, opacity;
  animation: iotNavPop .42s cubic-bezier(.2,.8,.2,1) forwards,
             iotNavHintFloat 2.4s ease-in-out .6s infinite;
}

/* Desktop: make it smaller */
@media (min-width: 1024px) {
  .iot-hero__navhint {
    width: clamp(36px, 2.2vw, 56px);
  }
}

@keyframes iotNavPop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.86); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.0); }
}

@keyframes iotNavHintFloat {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(1.0); }
  50%      { transform: translateX(-50%) translateY(-6px) scale(1.0); }
}

/* Avoid accidental gestures during auto-scroll */
body.iot-no-interrupt {
  overscroll-behavior: contain;
  touch-action: none;
}