
.stage {position: relative;
  width: 100%; max-width: 590px;
  aspect-ratio: 590 / 400;
  overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 0 auto;
}
/***** section-service1 *****/
.section-service1 .effect-bg {
  position: absolute; width: 100%; opacity: .4; filter: drop-shadow(0 0 20px rgba(255,255,255,0.1));
  animation: glowLoop 4s infinite alternate ease-in-out;
}
.section-service1 .effect-logo {
  position: absolute; width: 36.443%; z-index: 10;
  animation: breathe 5s infinite ease-in-out;
}
.section-service1 .effect-node {position: absolute; width: 17.797%; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); z-index: 5; cursor: pointer;}
.section-service1 .effect-node:hover {transform: scale(1.15) !important; filter: drop-shadow(0 0 25px rgba(255,255,255,0.4));}
.section-service1 .node-research { top: 12%; left: 15%; animation: float 4s infinite ease-in-out; }
.section-service1 .node-monitoring { top: 12%; right: 15%; animation: float 4s infinite ease-in-out 1s; }
.section-service1 .node-contents { bottom: 12%; left: 15%; animation: float 4s infinite ease-in-out 2s; }
.section-service1 .node-strategy { bottom: 12%; right: 15%; animation: float 4s infinite ease-in-out 3s; }
.section-service1 .effect-light {position: absolute; width: 400px;height: 400px; background: radial-gradient(circle, rgba(255,46,46,0.05) 0%, transparent 70%); z-index: 0; pointer-events: none;}

/*** 애니메이션 정의 ***/
@keyframes glowLoop {
  from { opacity: .3; filter: drop-shadow(0 0 10px rgba(255,255,255,0.05)); }
  to { opacity: .6; filter: drop-shadow(0 0 30px rgba(255,255,255,0.2)); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.13); }
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}


/***** .section-service2 *****/
.section-service2 .column {display: flex; flex-direction: column; align-items: center; transition: transform .6s cubic-bezier(0.2, 0.8, 0.2, 1);}
.section-service2 .column.col-1 {animation: floatCard1 4s ease-in-out infinite;}
.section-service2 .column.col-2 {transform: translateY(10px); animation: floatCard2 4s ease-in-out infinite;}
.section-service2 .column:hover {transform: scale(1.03) translateY(-10px) !important; filter: drop-shadow(0 0 30px rgba(74, 222, 128, .15)); z-index: 10;}
.section-service2 .pill-box {position: relative; z-index: 15; width: }
.section-service2 .card-box {position: absolute; left: 50%; top: 26%; width: 85.51%; transform: translateX(-50%);}
.section-service2 .pill-box img,
.section-service2 .card-box img {width: 100%;}
/* 카드 표면에 흐르는 아주 연한 광택 */
.section-service2 .card-box::after {
  position: absolute; top: 0; left: -150%; content: ''; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02), transparent); pointer-events: none;
  animation: shimmer 6s infinite ease-in-out;
}

/*** 애니메이션 정의 ***/
@keyframes floatCard1 {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}
@keyframes floatCard2 {
  0%, 100% { transform: translateY(10px); }
  50% { transform: translateY(0); }
}
@keyframes shimmer {
  0% { left: -150%; }
  50%, 100% { left: 150%; }
}


/***** .section-service3 *****/
.section-service3 .effect-node {position: absolute; border-radius: 16px; z-index: 5; cursor: pointer;}
.section-service3 .effect-node:hover {transform: scale(1.1) !important; filter: drop-shadow(0 0 25px rgba(255,255,255,0.4));}
.section-service3 .effect-node img {width: 100%;}
.section-service3 .main-ai {
  width: 33.5%; z-index: 10;
  animation: mainFloat 4s ease-in-out infinite;
}
.section-service3 .effect-node.l1 {
    top: 14%; right: 16%; width: 20.2%; transform: rotate(12deg);
    animation: floatSubtle 5s ease-in-out infinite;
    --rot: 12deg;
}
.section-service3 .effect-node.l2 {
  bottom: 16%; right: 22%; width: 15.5%; transform: rotate(8deg);
  animation: floatSubtle 6s ease-in-out infinite 0.5s;
  --rot: 8deg;
}
.section-service3 .effect-node.l3 {
  bottom: 20%; left: 18%; width: 13.5%; transform: rotate(-7deg);
  animation: floatSubtle 5.5s ease-in-out infinite 1s;
  --rot: -7deg;
}
.section-service3 .effect-node.l4 {
  top: 13%; left: 20%; width: 17%; transform: rotate(-12deg);
  animation: floatSubtle 6.5s ease-in-out infinite 1.5s;
  --rot: -12deg;
}
.section-service3 .soft-glass {
  overflow: hidden;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex; justify-content: center; align-items: center;
  box-shadow: 0 15px 45px rgba(0,0,0,.4);
  transition: transform 0.3s ease;
}
.section-service3 .soft-glass::after {
  position: absolute; top: -50%; left: -150%; content: ''; width: 100%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: rotate(-30deg);
  animation: shimmer 4s infinite ease-in-out;
}
.effect-deco {background: rgba(255,255,255,.2); border-radius: 6px; opacity: .1;}
.effect-deco.deco1 {left: 50px; top: 150px; width: 38px; height: 38px; transform: rotate(-30deg);}
.effect-deco.deco2 {right: 60px; bottom: 150px; width: 28px; height: 28px; transform: rotate(15deg);}


/* 별빛(Sparkle) 애니메이션 */
.section-service3 .sparkles {position: absolute; top: 20%; width: 11.017%; z-index: 15;}
.section-service3 .sparkles .star {
  position: absolute; left: 50%; transform: translateX(-50%);
  animation: twinkle 2s infinite alternate;
}
.section-service3 .star:nth-child(1) {left: 75%; width: 55.4%; margin-top: 16%;}
.section-service3 .star:nth-child(2) {left: 25%; width: 43.1%; margin-top: 8%; animation-delay: 0.5s; }
.section-service3 .star:nth-child(3) {left: 55%; width: 32.33%; margin-top: -15%; animation-delay: 1s; }
.section-service3 .star img {width: 100%;}

/*** 애니메이션 정의 ***/
@keyframes shimmer {
  0% { left: -150%; }
  100% { left: 250%; }
}
@keyframes mainFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}
@keyframes floatSubtle {
  0%, 100% { transform: translate(0, 0) rotate(var(--rot, -10deg)); }
  33% { transform: translate(5px, -8px) rotate(var(--rot, -10deg)); }
  66% { transform: translate(-3px, 5px) rotate(var(--rot, -10deg)); }
}
@keyframes twinkle {
  0% { opacity: .3; transform: scale(.9) translateX(-50%); filter: blur(1px); }
  100% { opacity: .8; transform: scale(1) translateX(-50%); filter: blur(0px); }
}


/***** .section-service4 *****/
.section-service4 .effect-ring {
  position: absolute; width: 46.102%; z-index: 1;
  animation: slowSpin 45s linear infinite;
}
.section-service4 .effect-ring img {width: 100%;}
.section-service4 .fluid-chart {position: absolute; display: flex; align-items: flex-end; gap: 6px; width: 12.7%; height: 15%; z-index: 5;}
.section-service4 .bar-fluid {
  width: 25%; background: linear-gradient(to bottom, rgba(255,255,255,.1) 0%, rgba(255,255,255,.5) 100%); border-radius: 3px; opacity: .3; transform-origin: bottom;
  animation: barElastic 5s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
.bar-fluid:nth-child(1) { height: 45%; animation-delay: 0.2s; }
.bar-fluid:nth-child(2) { height: 65%; animation-delay: 0.6s; }
.bar-fluid:nth-child(3) { height: 60%; animation-delay: 1.0s; }
.bar-fluid:nth-child(4) { height: 80%; animation-delay: 0.4s; }
.bar-fluid:nth-child(5) { height: 100%; animation-delay: 0.8s; }

.section-service4 .effect-node {position: absolute; transition: all .5s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; z-index: 10;}
.section-service4 .effect-node:hover {transform: scale(1.1) !important; filter: drop-shadow(0 0 25px rgba(255,255,255,0.4));}
.section-service4 .soft-glass {
  overflow: hidden; position: relative; display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 15px 45px rgba(0,0,0,0.4);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* 상하좌우가 결합된 부드러운 유영 */
  animation: drifting 12s ease-in-out infinite;
}
.section-service4 .soft-glass::after {
  position: absolute; top: -50%; left: -150%; content: ''; width: 100%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); transform: rotate(30deg);
  animation: shimmer 4s infinite ease-in-out;
}

.section-service4 .effect-node.l1 {top: 11%; left: 32%; width: 11.017%;}
.section-service4 .effect-node.l2 {top: 15%; right: 21%; width: 17.29%;}
.section-service4 .effect-node.l3 {top: 57%; right: 22%; width: 11.187%;}
.section-service4 .effect-node.l4 {bottom: 4%; left: 45%; width: 14.068%;}
.section-service4 .effect-node.l5 {top: 45%; left: 18%; width: 15.255%;}
.section-service4 .effect-node.l1 .soft-glass {animation-delay: 0s;}
.section-service4 .effect-node.l2 .soft-glass {animation-delay: -3s;}
.section-service4 .effect-node.l3 .soft-glass {animation-delay: -9s;}
.section-service4 .effect-node.l4 .soft-glass {animation-delay: -4s;}
.section-service4 .effect-node.l5 .soft-glass {animation-delay: -6s;}
.section-service4 .effect-node img {width: 100%;}

/*** 애니메이션 정의 ***/
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes barElastic {
  0%, 100% { transform: scaleY(.8); opacity: .3; }
  50% { transform: scaleY(1); opacity: .8; filter: brightness(1.2); }
}
@keyframes drifting {
  0%, 100% { transform: translate(0, 0) scale(1); filter: blur(0px); opacity: 0.8; }
  33% { transform: translate(15px, -20px) scale(1.05); filter: blur(0px); opacity: 1; }
  66% { transform: translate(-10px, -10px) scale(0.95); opacity: 0.8; }
}
@keyframes shimmer {
  0% { left: -150%; }
  100% { left: 250%; }
}
