:root {
            --brand-navy: #1e2b58;
            --brand-red: #cf8a8a;
            --brand-green: #78b68a;
        }

        body {
          
            background: #ffffff;
            color: #1e293b;
            overflow-x: hidden;
        }

        /* --- 프리미엄 비주얼 스타일 --- */
        .hero-visual {
            position: relative;
            width: 260px;
            height: 260px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @media (min-width: 1280px) {
            .hero-visual { width: 320px; height: 320px; }
        }

        /* 배경 오로라 효과 */
        .nebula {
            position: absolute;
            width: 140%;
            height: 140%;
            filter: blur(60px);
            opacity: 0.3;
            animation: nebula-pulse 10s ease-in-out infinite alternate;
            z-index: 1;
        }

        @keyframes nebula-pulse {
            from { transform: scale(0.8) rotate(0deg); opacity: 0.2; }
            to { transform: scale(1.1) rotate(20deg); opacity: 0.5; }
        }

        /* 메인 코어 (중앙 원) */
        .main-core {
            position: relative;
            width: 85%;
            height: 85%;
            background: white;
            border-radius: 50%;
            z-index: 10;
            box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1.5rem;
            border: 1px solid rgba(0, 0, 0, 0.04);
            transition: all 0.4s ease;
        }

        .hero-visual:hover .main-core {
            transform: scale(1.05);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12);
        }

        /* 궤도 애니메이션 */
        .orbital-wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 5;
        }

        .orbital-path {
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border-radius: 50%;
            border: 1px dashed rgba(0, 0, 0, 0.08);
        }

        .node {
            position: absolute;
            border-radius: 50%;
            filter: blur(0.5px);
        }

        .spin-slow { animation: spin 25s linear infinite; }
        .spin-fast { animation: spin-reverse 18s linear infinite; }
        .partner-orbit { animation: float-orbit 12s ease-in-out infinite; }
        .pulse-orbit { animation: pulse-expand 4s ease-out infinite; }

        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes spin-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
        @keyframes float-orbit {
            0%, 100% { transform: scale(1) rotate(0deg); }
            50% { transform: scale(1.05) rotate(180deg); }
        }
        @keyframes pulse-expand {
            0% { transform: scale(0.85); opacity: 0.6; }
            100% { transform: scale(1.25); opacity: 0; }
        }

        .text-gradient-1 { background: linear-gradient(135deg, var(--brand-navy), #4a5d99); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .text-gradient-2 { background: linear-gradient(135deg, var(--brand-red), #e2b4b4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .text-gradient-3 { background: linear-gradient(135deg, var(--brand-green), #9fd4b0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

        .accent-line { width: 30px; height: 3px; border-radius: 2px; margin: 1.5rem auto 1rem auto; }