@charset "UTF-8";

/* Rhymix Section Styling */
.service-dev-section { padding: 150px 0; overflow: hidden; }
.service-dev-section.dev-rhymix { background: #fafafa; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }

.dev-rhymix .dev-header { text-align: center; max-width: 800px; margin: 0 auto 80px; }
.rhymix-content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 80px; }
.rhymix-item { background: #fff; padding: 40px; border-radius: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.03); border: 1px solid #eee; }
.rhymix-item .item-icon { color: var(--electric-blue); margin-bottom: 25px; }
.rhymix-item .item-icon svg { width: 40px; height: 40px; }
.rhymix-item h3 { font-size: 22px; font-weight: 800; margin-bottom: 15px; color: var(--black); }
.rhymix-item p { font-size: 15px; color: #666; line-height: 1.6; }

.ecosystem-map { position: relative; height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.core-circle { width: 160px; height: 160px; background: var(--black); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-en); font-weight: 900; font-size: 18px; z-index: 10; box-shadow: 0 0 50px rgba(0,102,255,0.4); }
.orbit-item { position: absolute; width: 100px; height: 100px; background: #fff; border: 1px solid #eee; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 800; font-size: 13px; color: var(--electric-blue); z-index: 5; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.orbit-line { position: absolute; width: 340px; height: 340px; border: 1px dashed #ddd; border-radius: 50%; z-index: 1; animation: rotate 40s linear infinite; }

.orbit-item.t1 { top: 20px; left: 50%; transform: translateX(-50%); animation: float 6s infinite ease-in-out; }
.orbit-item.t2 { bottom: 20px; left: 50%; transform: translateX(-50%); animation: float 6s infinite ease-in-out -3s; }
.orbit-item.t3 { left: 10%; top: 50%; transform: translateY(-50%); animation: float 7s infinite ease-in-out -1s; }
.orbit-item.t4 { right: 10%; top: 50%; transform: translateY(-50%); animation: float 7s infinite ease-in-out -4s; }

@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -20px); } }
.orbit-item.t3, .orbit-item.t4 { animation-name: floatSide; }
@keyframes floatSide { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(20px, -50%); } }

@media (max-width: 1199px) {
    .rhymix-content-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 991px) {
    .service-dev-section { padding: 100px 0; }
}

@media (max-width: 767px) {
    .rhymix-content-grid { grid-template-columns: 1fr; }
    .ecosystem-map { height: 300px; }
    .core-circle { width: 120px; height: 120px; font-size: 14px; }
    .orbit-item { width: 70px; height: 70px; font-size: 11px; }
}