/* --- Wheel Background Rings --- */
.ring-container {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.dashed-ring {
  position:absolute;
  border-radius:50%;
  border:2px dashed #1944b4;
}

.ring-1 { width:200px; height:200px;border-width:1px;}
.ring-2 { width:280px; height:280px;border-width:1px;}
.ring-3 { width:360px; height:360px; }


/* --- Center Orb --- */
.center-orb {
  position:relative;
  width:12rem; height:12rem;
  border-radius:50%;
  border:4px solid transparent;
  background:radial-gradient(circle at 45% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 60%) padding-box, radial-gradient(circle at 35% 30%, #2575fc 0%, transparent 70%) padding-box, linear-gradient(135deg, #0d52d6 0%, #032270 80%, #01113a 100%) padding-box, linear-gradient(135deg, #0d52d6 0%, #032270 80%, #3068d0 100%) padding-box, linear-gradient(139deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 18%, #1948a8 42%, #0d3998 68%, #ffffff 88%, #ffffff 100%) border-box;
  box-shadow:0 25px 50px rgba(1, 16, 55, 0.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:0;
}

h3.tracking-wide{z-index:10;font-size:32px;}

.service-title {color:#2a4aa4;font-weight:400;line-height:100%;font-size:60px;}
.service-para{font-size:24px;color:#000;}



.chart-bar {
  background-color:#64748b;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
  box-shadow:inset -3px 0 8px rgba(0,0,0,0.6);
  width:16px;
}


/* --- Satellites --- */
.satellite-wrapper {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  transition:transform 0.1s linear; /* Smooth micro-movements */
  will-change:transform;
  z-index:10;
  cursor:pointer;
}

.satellite-node {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-color:white;
  transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  background:linear-gradient(#fff, #fff) padding-box, linear-gradient(138deg, #ffffff 0%, #f8f9ff 8%, #ffffff 15%, #c8ccff 25%, #24379d 45%, #24379d 68%, #2d9cff 88%, #ffffff 100%) border-box;
}

/* Inactive State */
.satellite-node.inactive {
  width:3rem; height:3rem;
  box-shadow:0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border:1px solid transparent;
  transform:scale(0.9);
  color:#64748b;
}


#scroll-container .sticky-top {
  z-index: 2;
}


.satellite-node.inactive:hover {
  transform:scale(1);
  opacity:1;
}

/* Active State */
.satellite-node.active {
  width:8rem; height:8rem;
  box-shadow:0 0 30px rgba(37, 99, 235, 0.2);
  border:3px solid transparent;
  transform:scale(1);
  opacity:1;
  color:#1d4ed8;
  font-size:1.5rem;
  background: radial-gradient(circle at 45% 25%, rgba(255, 255, 255, 0.2) 0%, transparent 60%) padding-box, radial-gradient(circle at 35% 30%, #2575fc 0%, transparent 70%) padding-box, linear-gradient(135deg, #0d52d6 0%, #032270 80%, #01113a 100%) padding-box, linear-gradient(135deg, #0d52d6 0%, #032270 80%, #3068d0 100%) padding-box, linear-gradient(139deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 18%, #1948a8 42%, #0d3998 68%, #ffffff 88%, #ffffff 100%) border-box;
}

.notification-dot {
  display:none;
  position:absolute;
  top:0; right:0;
  width:12px; height:12px;
  background-color:#ef4444;
  border-radius:50%;
  border:2px solid white;
  transform:translate(25%, -25%);
  opacity:0;
  transition:opacity 0.3s;
}

.satellite-node.active .notification-dot {
  opacity:1;
}

.content-container {
  position:relative;
  width:100%;
  height:800px;
}


.content-item {
  position:absolute;
  top:50%; 
  right:-50px;
  width:100%;
  transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display:flex;
  flex-direction:column;
}

.content-item.inactive {
  opacity:0;
  transform:translateY(3rem);
  pointer-events:none;
  z-index:0;
}

.content-item.active {
  opacity:1;
  transform:translateY(-50%);
  pointer-events:auto;
  z-index:10;
}

.blue-divider {
  width: 5rem;
  height: 2.5px;
  background-color: #56bbeb;
  margin-bottom: 1.5rem;
}

.btn-know-more {
  border:1px solid #cbd5e1;
  padding:0.75rem 1.5rem;
  color:#334155;
  font-size:0.875rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  background-color:white;
  transition:all 0.3s;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  width:fit-content;
}
.btn-know-more:hover {
  color:#1d4ed8;
  border-color:#1d4ed8;
}
.btn-know-more i {
  transition:transform 0.3s;
}
.btn-know-more:hover i {
  transform:translateX(4px);
}

.satellite-node img {
  transition:transform 0.3s;
  width:50%;
}
.satellite-node.active img {
  width: 70%;
  filter: brightness(0) saturate(100%) invert(97%) sepia(100%) saturate(0%) hue-rotate(29deg) brightness(102%) contrast(106%);
}

/* --- Scroll Guide --- */
.scroll-guide {
  position:absolute;
  bottom:2rem;
  left:2rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  opacity:0.4;
  animation:pulse 2s infinite;
}


.scroll-text {
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  transform-origin:left;
  transform:rotate(-90deg) translateY(2rem) translateX(-0.75rem);
  margin-bottom:0.5rem;
}
.scroll-line {
  width:1px;
  height:4rem;
  background-color:#64748b;
}
@keyframes pulse {
  0%, 100% { opacity:0.4; }
  50% { opacity:0.8; }
}


.service-icon{
  width: 80%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


@media (min-width:1121px) {

  .ring-1 { width:350px; height:350px; }
  .ring-2 { width:460px; height:460px;}
  .ring-3 { width:570px; height:570px; }

  .center-orb { width:16rem; height:16rem; }
  .chart-bar { width:24px; }

  .satellite-node.inactive { width:6rem; height:6rem; font-size:1.25rem;}
  .satellite-node.active { width:8rem; height:8rem; font-size:2rem;}
  .notification-dot { width:16px; height:16px; }
  .content-container { height:800px; }

  .scroll-guide { left:4rem; }
  
}