/* ===== Hero Logo Circle ===== */
.hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(200px, 24vw, 320px);
  overflow: visible;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: perspective(1000px) rotateY(-15deg) rotateX(10deg);
}

.hero-circle-wrap {
  position: relative;
  width: clamp(150px, 17vw, 230px);
  height: clamp(150px, 17vw, 230px);
  flex-shrink: 0;
}

.hero-circle {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    backdrop-filter: blur(16px);
    justify-content: center;
    box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.05);
    border: 1.5px solid rgba(15, 23, 42, 0.08);
    padding: 12%;
    transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-circle:hover {
  transform: scale(1.03);
  box-shadow: 0 18px 50px rgba(14, 43, 154, 0.22);
}

.hero-circle-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 20px rgb(41 43 154 / 30%));
}

/* Responsive */
@media (max-width: 991px) {
  .hero-circle-wrap {
    width: clamp(140px, 26vw, 190px);
    height: clamp(140px, 26vw, 190px);
  }
}

@media (max-width: 576px) {
  .hero-visual {
    min-height: clamp(200px, calc(40vw + 70px), 270px);
  }
  .hero-circle-wrap {
    width: clamp(125px, 36vw, 170px);
    height: clamp(125px, 36vw, 170px);
  }
}
.hero-circle-glow {
    position: absolute;
    width: 250px;
    height: 250px;
    border: 2px dashed rgb(0 8 209 / 20%);
    border-radius: 50%;
    animation: 25s linear infinite rotateCircle;
}
@keyframes rotateCircle {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* ===== Orbiting Icon Circles ===== */
.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 5;
  --orbit-r: clamp(120px, 15.5vw, 160px);
  animation: orbit-spin 20s linear infinite;
}

.orbit-item {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(56px, 5.5vw, 64px);
  height: clamp(56px, 5.5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 45deg)) translateY(calc(var(--orbit-r) * -1));
}

.orbit-ic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  /* Counter-rotate so icons stay upright while the orbit spins */
  animation: orbit-spin-rev 20s linear infinite;
}

.orbit-item:hover .orbit-ic {
  transform: scale(1.1);
  box-shadow: 0 14px 40px rgba(41, 43, 154, 0.25);
  border-color: var(--color-primary);
}

.orbit-ic i {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1;
}

.orbit-dot {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-whats);
    box-shadow: 0 0 8px rgb(0 120 4 / 80%);
}
.orbit-dot:after {
    content: '\f00c';
    font-family: 'FontAwesome';
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 9px;
}

/* Orbit rotates the whole ring */
@keyframes orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Icons counter-rotate to stay upright */
@keyframes orbit-spin-rev {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

/* ===== Hero Social Media Circles ===== */
.hero-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hero-social-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-social-circle i {
  font-size: 1.15rem;
  line-height: 1;
}

.hero-social-circle:hover {
  transform: scale(1.12);
  box-shadow: 0 14px 40px rgba(41, 43, 154, 0.25);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.hero-social-circle.fa-facebook-f:hover { color: #1877F2; border-color: #1877F2; }
.hero-social-circle.fa-instagram:hover { color: #E4405F; border-color: #E4405F; }
.hero-social-circle.fa-tiktok:hover { color: #000; border-color: #000; }
.hero-social-circle.fa-x-twitter:hover { color: #000; border-color: #000; }

@media (max-width: 576px) {
  .hero-social {
    gap: 8px;
  }
  .hero-social-circle {
    width: 44px;
    height: 44px;
  }
  .hero-social-circle i {
    font-size: 1rem;
  }
}