.guides-cosmic-section {
            position: relative;
            overflow: hidden;
            background: radial-gradient(ellipse at 30% 20%, #f0e8fa 0%, #dacef0 100%);
            isolation: isolate;
        }

        .guides-cosmic-orbits {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .guides-cosmic-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 9999px;
            transform: translate(-50%, -50%);
            animation: guidesRingSpin linear infinite;
        }

        .guides-cosmic-planet {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.72), rgba(180, 140, 230, 0.26));
            box-shadow: 0 0 40px rgba(160, 120, 210, 0.16), 0 0 80px rgba(140, 100, 200, 0.08);
            animation: guidesPlanetPulse 6s ease-in-out infinite alternate;
        }

        .guides-cosmic-ring.r1 { width: 80vmin; height: 80vmin; animation-duration: 42s; }
        .guides-cosmic-ring.r1 .guides-cosmic-planet { width: 78px; height: 78px; top: -39px; left: 50%; transform: translateX(-50%); }

        .guides-cosmic-ring.r2 { width: 55vmin; height: 55vmin; animation-duration: 50s; animation-direction: reverse; }
        .guides-cosmic-ring.r2 .guides-cosmic-planet { width: 58px; height: 58px; top: -29px; left: 20%; transform: translateX(-50%); animation-delay: -2s; }

        .guides-cosmic-ring.r3 { width: 32vmin; height: 32vmin; animation-duration: 30s; }
        .guides-cosmic-ring.r3 .guides-cosmic-planet { width: 42px; height: 42px; top: -21px; left: 70%; transform: translateX(-50%); animation-delay: -4s; }

        .guides-cosmic-ring.r4 { width: 18vmin; height: 18vmin; animation-duration: 24s; animation-direction: reverse; }
        .guides-cosmic-ring.r4 .guides-cosmic-planet { width: 28px; height: 28px; top: -14px; left: 40%; transform: translateX(-50%); animation-delay: -1s; }

        .guides-cosmic-dust {
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
            background: rgba(200, 180, 230, 0.07);
            animation: guidesDustFloat 40s linear infinite alternate;
        }

        .guides-cosmic-dust.d1 { width: 300px; height: 300px; top: 10%; left: -5%; animation-duration: 50s; }
        .guides-cosmic-dust.d2 { width: 400px; height: 400px; bottom: -10%; right: -8%; animation-duration: 60s; animation-delay: -10s; background: rgba(180, 150, 220, 0.05); }

        .guides-cosmic-wrap {
            position: relative;
            z-index: 2;
        }

        .guides-cosmic-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.7rem;
        }

        .guides-cosmic-title {
            font-size: clamp(2rem, 3.2vw, 3.35rem);
            line-height: 1.02;
            letter-spacing: -0.02em;
            color: #38265a;
            font-weight: 800;
            margin-bottom: 0.2rem;
        }

        .guides-cosmic-sub {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            color: #4a3b5c;
            font-size: clamp(0.95rem, 1.8vw, 1.15rem);
            font-weight: 400;
            opacity: 0.9;
        }

        .guides-cosmic-sub i {
            font-style: normal;
            font-size: 0.9rem;
            color: #5B3C8F;
        }

        .guides-cosmic-divider {
            width: 52px;
            border-top: 2px solid rgba(170, 136, 214, 0.48);
            margin-top: 0.55rem;
        }

        .guides-cosmic-view {
            color: #5f3cb2;
            font-weight: 700;
            font-size: 1rem;
            white-space: nowrap;
        }

        .guides-cosmic-view-all-btn {
            color: #5f3cb2;
            font-weight: 700;
            font-size: 1rem;
            white-space: nowrap;
            text-decoration: none;
        }

        .guides-cosmic-view-all-btn:hover { text-decoration: underline; }

        .guides-cosmic-cta-row {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
        }

        .guides-cosmic-cta-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: linear-gradient(135deg, #7b2fae, #9f4fd1);
            color: #fff;
            font-weight: 600;
            font-size: 1rem;
            padding: 0.82rem 2.2rem;
            border-radius: 9999px;
            text-decoration: none;
            box-shadow: 0 8px 26px rgba(106, 13, 173, 0.22);
            border: 1px solid rgba(255, 255, 255, 0.18);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .guides-cosmic-cta-btn:hover {
            transform: translateY(-2px) scale(1.02);
            box-shadow: 0 12px 32px rgba(106, 13, 173, 0.32);
        }

        .guides-cosmic-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1.2rem;
        }

        .guides-cosmic-card {
            position: relative;
            display: flex;
            flex-direction: column;
            min-height: 206px;
            border-radius: 2rem;
            padding: 1.2rem 1.1rem 1.22rem;
            border: 1px solid rgba(255, 255, 255, 0.62);
            background: rgba(255, 255, 255, 0.56);
            backdrop-filter: blur(12px) saturate(170%);
            box-shadow: 0 14px 36px -16px rgba(78, 45, 120, 0.16);
            transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
            overflow: hidden;
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(1) {
            background: linear-gradient(145deg, rgba(255, 244, 252, 0.86), rgba(240, 244, 255, 0.8));
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(2) {
            background: linear-gradient(145deg, rgba(241, 249, 255, 0.86), rgba(245, 239, 255, 0.8));
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(3) {
            background: linear-gradient(145deg, rgba(244, 255, 248, 0.84), rgba(239, 245, 255, 0.8));
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(4) {
            background: linear-gradient(145deg, rgba(255, 248, 238, 0.84), rgba(245, 239, 255, 0.8));
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(5) {
            background: linear-gradient(145deg, rgba(244, 238, 255, 0.86), rgba(255, 243, 250, 0.8));
        }

        .guides-cosmic-grid > .guides-cosmic-card:nth-child(6) {
            background: linear-gradient(145deg, rgba(238, 248, 255, 0.86), rgba(244, 255, 244, 0.8));
        }

        .guides-cosmic-card:hover {
            transform: translateY(-5px) scale(1.01);
            box-shadow: 0 24px 50px -16px rgba(88, 48, 140, 0.24);
            background: rgba(255, 255, 255, 0.76);
        }

        .guides-cosmic-particle {
            position: absolute;
            border-radius: 9999px;
            background: rgba(200, 170, 240, 0.08);
            pointer-events: none;
            animation: guidesParticleDrift 18s infinite alternate ease-in-out;
        }

        .guides-cosmic-particle.p1 { width: 58px; height: 58px; bottom: -10px; left: 18%; }
        .guides-cosmic-particle.p2 { width: 38px; height: 38px; top: 10%; right: 10%; animation-duration: 22s; animation-delay: -4s; background: rgba(180, 140, 220, 0.06); }

        .guides-cosmic-icon {
            width: 2rem;
            height: 2rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            color: #6d41a1;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.62);
            margin-bottom: 0;
            z-index: 1;
            flex-shrink: 0;
        }

        .guides-cosmic-card-head {
            display: flex;
            align-items: flex-start;
            gap: 0.62rem;
            margin-bottom: 0.48rem;
            z-index: 1;
        }

        .guides-cosmic-card h3 {
            font-size: 1.05rem;
            line-height: 1.28;
            letter-spacing: -0.01em;
            color: #2b1d43;
            font-weight: 700;
            margin-bottom: 0;
            z-index: 1;
        }

        .guides-cosmic-card p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: #3d2d56;
            flex: 1;
            margin-bottom: 0.82rem;
            z-index: 1;
        }

        .guides-cosmic-link {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            color: #4e2f86;
            font-size: 0.96rem;
            font-weight: 700;
            z-index: 1;
            margin-top: auto;
        }

        .guides-cosmic-link span:last-child {
            transition: transform .25s ease;
        }

        .guides-cosmic-card:hover .guides-cosmic-link span:last-child {
            transform: translateX(5px);
        }

        @keyframes guidesRingSpin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes guidesPlanetPulse {
            0% { opacity: 0.62; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1.08); }
        }

        @keyframes guidesDustFloat {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(40px, -30px) scale(1.2); }
        }

        @keyframes guidesParticleDrift {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(-20px, -30px) scale(1.2); }
        }

        @media (max-width: 1180px) {
            .guides-cosmic-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 900px) {
            .guides-cosmic-header {
                margin-bottom: 1.45rem;
            }

            .guides-cosmic-view {
                display: none;
            }

            .guides-cosmic-view-all-btn {
                display: none;
            }

            .guides-cosmic-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .guides-cosmic-card {
                min-height: 0;
                border-radius: 1.55rem;
                padding: 1.05rem 1rem 1.1rem;
            }

            .guides-cosmic-title {
                font-size: clamp(1.55rem, 8vw, 2.1rem);
            }

            .guides-cosmic-sub {
                font-size: 0.96rem;
            }

            .guides-cosmic-card h3 {
                font-size: 1.1rem;
                line-height: 1.24;
            }

            .guides-cosmic-card p {
                font-size: 0.93rem;
                line-height: 1.55;
                margin-bottom: 0.9rem;
            }

            .guides-cosmic-link {
                font-size: 0.95rem;
                gap: 0.36rem;
            }

            .guides-cosmic-card-head {
                align-items: center;
                gap: 0.52rem;
                margin-bottom: 0.42rem;
            }

            .guides-cosmic-ring.r1 .guides-cosmic-planet { width: 50px; height: 50px; top: -25px; }
            .guides-cosmic-ring.r2 .guides-cosmic-planet { width: 40px; height: 40px; top: -20px; }
            .guides-cosmic-ring.r3 .guides-cosmic-planet { width: 30px; height: 30px; top: -15px; }
            .guides-cosmic-ring.r4 .guides-cosmic-planet { width: 20px; height: 20px; top: -10px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .guides-cosmic-ring,
            .guides-cosmic-planet,
            .guides-cosmic-dust,
            .guides-cosmic-particle {
                animation: none !important;
            }

            .guides-cosmic-card,
            .guides-cosmic-link span:last-child {
                transition: none !important;
            }
        }

        .faq-cosmic-section {
            background: radial-gradient(circle at 16% 20%, rgba(193, 134, 241, 0.14), rgba(193, 134, 241, 0) 44%),
                        radial-gradient(circle at 86% 24%, rgba(168, 124, 236, 0.11), rgba(168, 124, 236, 0) 42%),
                        linear-gradient(140deg, #f4eefb 0%, #efe4fa 42%, #f3ede5 100%);
        }

        .faq-cosmic-item {
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(188, 164, 221, 0.32);
            border-radius: 1rem;
            box-shadow: 0 10px 26px -18px rgba(89, 54, 136, 0.26);
            backdrop-filter: blur(6px);
        }

        .faq-cosmic-btn {
            color: #2f2248;
            font-weight: 650;
        }

        .faq-cosmic-btn:hover {
            background: rgba(241, 231, 255, 0.65);
        }

        .faq-cosmic-answer {
            color: #4a3a64;
        }

/* ── CTA Banner ─────────────────────────────────────────── */
        .nl-cta-banner-section {
            position: relative;
            overflow: hidden;
            background: radial-gradient(ellipse at 30% 40%, #eee6f5 0%, #dcc8e8 70%, #c9aad8 100%);
            padding: 5rem 1.5rem;
            text-align: center;
            isolation: isolate;
        }

        .nl-cta-banner-glow {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse at 60% 0%, rgba(180, 130, 230, 0.18) 0%, transparent 60%),
                        radial-gradient(ellipse at 20% 100%, rgba(150, 100, 210, 0.12) 0%, transparent 50%);
            pointer-events: none;
        }

        .nl-cta-banner-stars {
            position: absolute;
            inset: 0;
            pointer-events: none;
        }

        .nl-cta-star {
            position: absolute;
            color: rgba(122, 74, 154, 0.3);
            font-size: 1.3rem;
            animation: nlCtaTwinkle 4s ease-in-out infinite alternate;
        }

        .nl-cta-star.s1 { top: 12%; left: 8%;  animation-delay: 0s;    font-size: 1rem; }
        .nl-cta-star.s2 { top: 20%; right: 10%; animation-delay: 1.2s;  font-size: 1.5rem; }
        .nl-cta-star.s3 { bottom: 18%; left: 15%; animation-delay: 0.6s; font-size: 0.9rem; }
        .nl-cta-star.s4 { bottom: 25%; right: 8%;  animation-delay: 1.8s; font-size: 1.2rem; }

        @keyframes nlCtaTwinkle {
            from { opacity: 0.2; transform: scale(0.9); }
            to   { opacity: 0.7; transform: scale(1.1); }
        }

        .nl-cta-banner-wrap {
            position: relative;
            z-index: 2;
            max-width: 780px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
        }

        .nl-cta-banner-title {
            color: #2d1a3a;
            font-size: clamp(1.65rem, 4vw, 2.4rem);
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin: 0;
        }

        .nl-cta-banner-desc {
            color: rgba(67, 46, 99, 0.88);
            font-size: clamp(0.92rem, 1.8vw, 1.05rem);
            line-height: 1.7;
            max-width: 640px;
            margin: 0;
        }

        .nl-cta-banner-pills {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
        }

        .nl-cta-banner-pills span {
            background: rgba(255, 255, 255, 0.55);
            border: 1px solid rgba(200, 170, 230, 0.5);
            border-radius: 9999px;
            color: #4a1a6b;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.28rem 0.85rem;
        }

        .nl-cta-banner-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            background: linear-gradient(135deg, #7b2fae, #9f4fd1);
            color: #fff;
            font-weight: 700;
            font-size: 1.05rem;
            padding: 0.95rem 2.4rem;
            border-radius: 9999px;
            text-decoration: none;
            box-shadow: 0 8px 28px rgba(106, 13, 173, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.22s ease, box-shadow 0.22s ease;
            margin-top: 0.5rem;
        }

        .nl-cta-banner-btn:hover {
            transform: translateY(-3px) scale(1.03);
            box-shadow: 0 14px 38px rgba(106, 13, 173, 0.36);
        }

        @media (max-width: 640px) {
            .nl-cta-banner-section { padding: 3.5rem 1.2rem; }
            .nl-cta-banner-btn { width: 100%; justify-content: center; font-size: 0.97rem; padding: 0.9rem 1.5rem; }
        }

.cvp-section {
            position: relative;
            overflow: hidden;
            background: radial-gradient(ellipse at 30% 20%, #f0e8fa 0%, #dacef0 100%);
            isolation: isolate;
        }

        .cvp-orbits {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .cvp-ring {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 9999px;
            transform: translate(-50%, -50%);
            animation: cvpSpin linear infinite;
        }

        .cvp-planet {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.72), rgba(180, 140, 230, 0.2));
            box-shadow: 0 0 40px rgba(160, 120, 210, 0.1);
            animation: cvpPulse 6s ease-in-out infinite alternate;
        }

        .cvp-ring.r1 { width: 80vmin; height: 80vmin; animation-duration: 42s; }
        .cvp-ring.r1 .cvp-planet { width: 80px; height: 80px; top: -40px; left: 50%; transform: translateX(-50%); }
        .cvp-ring.r2 { width: 55vmin; height: 55vmin; animation-duration: 50s; animation-direction: reverse; }
        .cvp-ring.r2 .cvp-planet { width: 60px; height: 60px; top: -30px; left: 20%; transform: translateX(-50%); animation-delay: -2s; }
        .cvp-ring.r3 { width: 32vmin; height: 32vmin; animation-duration: 30s; }
        .cvp-ring.r3 .cvp-planet { width: 44px; height: 44px; top: -22px; left: 70%; transform: translateX(-50%); animation-delay: -4s; }
        .cvp-ring.r4 { width: 18vmin; height: 18vmin; animation-duration: 24s; animation-direction: reverse; }
        .cvp-ring.r4 .cvp-planet { width: 28px; height: 28px; top: -14px; left: 40%; transform: translateX(-50%); animation-delay: -1s; }

        .cvp-wrap {
            position: relative;
            z-index: 2;
        }

        .cvp-head {
            margin-bottom: 1.6rem;
        }

        .cvp-sub {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            color: #4a3b5c;
            font-size: clamp(0.95rem, 1.8vw, 1.15rem);
            font-weight: 400;
            opacity: 0.9;
        }

        .cvp-sub .dot {
            color: #8b6bb0;
            font-size: 0.85rem;
        }

        .cvp-divider {
            width: 58px;
            border-top: 2px solid rgba(170, 136, 214, 0.46);
            margin-top: 0.58rem;
        }

        .cvp-card {
            
            padding: 2.2rem 2.4rem 2.6rem;
            
            transition: box-shadow .3s ease, background .3s ease;
        }

        .cvp-card:hover {
            box-shadow: 0 24px 56px -18px rgba(78, 45, 120, 0.18);
            background: rgba(255, 255, 255, 0.68);
        }

        .cvp-intro {
            font-size: 1.05rem;
            line-height: 1.7;
            color: #1f122e;
            margin-bottom: 1.9rem;
            padding-bottom: 1.4rem;
            border-bottom: 1px solid rgba(180, 150, 210, 0.15);
        }

        .cvp-intro strong {
            color: #3f1f66;
            font-weight: 700;
        }

        .cvp-table-wrap {
            overflow-x: auto;
            margin-bottom: 1.8rem;
            border-radius: 1.6rem;
            background: rgba(255, 255, 255, 0.3);
            padding: 0.1rem;
        }

        .cvp-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 560px;
            font-size: 0.95rem;
        }

        .cvp-table thead th {
            text-align: left;
            padding: 1rem 1.2rem;
            font-weight: 700;
            font-size: 0.9rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #4f3f68;
            background: rgba(255, 255, 255, 0.4);
            border-bottom: 2px solid rgba(180, 150, 210, 0.2);
        }

        .cvp-table thead th:first-child { border-radius: 1.6rem 0 0 0; }
        .cvp-table thead th:last-child { border-radius: 0 1.6rem 0 0; }

        .cvp-table tbody td {
            padding: 0.88rem 1.2rem;
            border-bottom: 1px solid rgba(180, 150, 210, 0.08);
            color: #1f122e;
            line-height: 1.5;
            vertical-align: top;
        }

        .cvp-table tbody tr:last-child td { border-bottom: none; }
        .cvp-table tbody tr:hover td { background: rgba(255, 255, 255, 0.3); }

        .cvp-feature { font-weight: 700; color: #35284a; white-space: nowrap; }
        .cvp-ch { font-weight: 600; color: #5a408f; }
        .cvp-py { font-weight: 600; color: #745d99; }

        .cvp-badge {
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 9999px;
            margin-right: 0.5rem;
        }

        .cvp-badge.ch { background: #7b5ca8; }
        .cvp-badge.py { background: #b394db; }

        .cvp-foot {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            padding-top: 1.35rem;
            border-top: 1px solid rgba(180, 150, 210, 0.15);
        }

        .cvp-note-text {
            font-size: 0.9rem;
            color: #4e3a64;
            opacity: 0.9;
            line-height: 1.6;
            margin: 0;
        }

        .cvp-note {
            font-size: 0.9rem;
            color: #4e3a64;
            opacity: 0.85;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .cvp-link {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            font-weight: 700;
            font-size: 0.96rem;
            color: #3f1f66;
            border-bottom: 2px solid transparent;
            padding-bottom: 2px;
            transition: color .24s ease, border-color .24s ease;
        }

        .cvp-link .arrow {
            transition: transform .24s ease;
            color: #6d41a1;
        }

        .cvp-link:hover {
            color: #28193e;
            border-bottom-color: #b394db;
        }

        .cvp-link:hover .arrow {
            transform: translateX(5px);
            color: #3f1f66;
        }

        @keyframes cvpSpin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        @keyframes cvpPulse {
            0% { opacity: 0.6; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1.1); }
        }

        @media (max-width: 780px) {
            .cvp-card {
                padding: 1.6rem 1.35rem 1.8rem;
                border-radius: 2rem;
            }

            .cvp-intro { font-size: 0.95rem; }

            .cvp-table {
                font-size: 0.85rem;
                min-width: 440px;
            }

            .cvp-table thead th,
            .cvp-table tbody td {
                padding: 0.72rem 0.88rem;
            }

            .cvp-foot {
                flex-direction: column;
                align-items: flex-start;
            }
        }

        @media (max-width: 500px) {
            .cvp-sub { font-size: 0.9rem; }

            .cvp-card {
                padding: 1.2rem 1rem 1.5rem;
                border-radius: 1.6rem;
            }

            .cvp-table {
                font-size: 0.78rem;
                min-width: 340px;
            }

            .cvp-table thead th,
            .cvp-table tbody td {
                padding: 0.5rem 0.62rem;
            }

            .cvp-feature { white-space: normal; }
            .cvp-note { font-size: 0.8rem; }
            .cvp-link { font-size: 0.85rem; }

            .cvp-ring.r1 .cvp-planet { width: 52px; height: 52px; top: -26px; }
            .cvp-ring.r2 .cvp-planet { width: 40px; height: 40px; top: -20px; }
            .cvp-ring.r3 .cvp-planet { width: 30px; height: 30px; top: -15px; }
            .cvp-ring.r4 .cvp-planet { width: 20px; height: 20px; top: -10px; }
        }

        @media (max-width: 640px) {
            .cvp-table-wrap {
                overflow: visible;
                background: transparent;
                border-radius: 0;
                padding: 0;
            }

            .cvp-table {
                min-width: 0;
                border-collapse: separate;
            }

            .cvp-table thead {
                display: none;
            }

            .cvp-table,
            .cvp-table tbody,
            .cvp-table tr,
            .cvp-table td {
                display: block;
                width: 100%;
            }

            .cvp-table tr {
                background: rgba(255, 255, 255, 0.62);
                border: 1px solid rgba(180, 150, 210, 0.22);
                border-radius: 1rem;
                padding: 0.24rem 0.72rem;
                margin-bottom: 0.7rem;
            }

            .cvp-table tbody td {
                border-bottom: 1px dashed rgba(180, 150, 210, 0.26);
                padding: 0.5rem 0;
            }

            .cvp-table tbody td:last-child {
                border-bottom: none;
            }

            .cvp-table tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 0.68rem;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: #7a5a8f;
                font-weight: 700;
                margin-bottom: 0.2rem;
            }

            .cvp-feature,
            .cvp-ch,
            .cvp-py {
                white-space: normal;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .cvp-ring,
            .cvp-planet {
                animation: none !important;
            }

            .cvp-card,
            .cvp-link,
            .cvp-link .arrow {
                transition: none !important;
            }
        }

    /* ═══════════════════════════════════════════════════════════
       CALCULATOR CHIPS - BEAUTIFUL LIGHT COLORS
    ═══════════════════════════════════════════════════════════ */
    /* Marquee container — same pattern as tools-cosmic-marquee */
    .calc-chips-marquee {
        overflow: hidden;
        position: relative;
        width: 100%;
        border-radius: 0.5rem;
    }

    /* Fade edges left and right */
    .calc-chips-marquee::before,
    .calc-chips-marquee::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 48px;
        z-index: 2;
        pointer-events: none;
    }

    /* .calc-chips-marquee::before {
        left: 0;
        background: linear-gradient(to right, rgba(240, 232, 250, 0.98), rgba(240, 232, 250, 0));
    } */

    /* .calc-chips-marquee::after {
        right: 0;
        background: linear-gradient(to left, rgba(218, 206, 240, 0.98), rgba(218, 206, 240, 0));
    } */

    /* Scrolling track — duplicated chips, translateX(-50%) loops seamlessly */
    .calc-chips-track {
        display: flex;
        gap: 0.75rem;
        width: max-content;
        animation: chipsMarquee 35s linear infinite;
        padding: 0.25rem 0;
    }

    .calc-chips-track:hover { animation-play-state: paused; }

    @keyframes chipsMarquee {
        0%   { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }

    .calc-chip {
        border-radius: 0.875rem;
        border: 1px solid transparent;
        padding: 0.75rem 0.875rem;
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.5;
        backdrop-filter: blur(4px);
        transition: all 0.35s cubic-bezier(0.15, 0.75, 0.3, 1.2);
        position: relative;
        overflow: hidden;
        flex: 0 0 auto;
        min-width: 240px;
        white-space: normal;
    }

    .calc-chip::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
        pointer-events: none;
    }

    /* Chip 1 - Soft Lavender */
    .calc-chip:nth-child(6n+1) {
        background: linear-gradient(135deg, rgba(219, 190, 255, 0.65), rgba(200, 160, 245, 0.55));
        border-color: rgba(179, 130, 240, 0.35);
        color: #4a3d6f;
    }

    .calc-chip:nth-child(6n+1):hover {
        background: linear-gradient(135deg, rgba(219, 190, 255, 0.8), rgba(200, 160, 245, 0.7));
        border-color: rgba(179, 130, 240, 0.5);
        box-shadow: 0 8px 20px -6px rgba(179, 130, 240, 0.3);
        transform: translateY(-2px);
    }

    /* Chip 2 - Soft Pink */
    .calc-chip:nth-child(6n+2) {
        background: linear-gradient(135deg, rgba(255, 200, 210, 0.65), rgba(255, 175, 200, 0.55));
        border-color: rgba(255, 140, 170, 0.35);
        color: #6f3d4a;
    }

    .calc-chip:nth-child(6n+2):hover {
        background: linear-gradient(135deg, rgba(255, 200, 210, 0.8), rgba(255, 175, 200, 0.7));
        border-color: rgba(255, 140, 170, 0.5);
        box-shadow: 0 8px 20px -6px rgba(255, 140, 170, 0.3);
        transform: translateY(-2px);
    }

    /* Chip 3 - Soft Blue */
    .calc-chip:nth-child(6n+3) {
        background: linear-gradient(135deg, rgba(190, 225, 255, 0.65), rgba(160, 210, 255, 0.55));
        border-color: rgba(130, 190, 255, 0.35);
        color: #3d5f6f;
    }

    .calc-chip:nth-child(6n+3):hover {
        background: linear-gradient(135deg, rgba(190, 225, 255, 0.8), rgba(160, 210, 255, 0.7));
        border-color: rgba(130, 190, 255, 0.5);
        box-shadow: 0 8px 20px -6px rgba(130, 190, 255, 0.3);
        transform: translateY(-2px);
    }

    /* Chip 4 - Soft Mint */
    .calc-chip:nth-child(6n+4) {
        background: linear-gradient(135deg, rgba(190, 255, 220, 0.65), rgba(160, 240, 200, 0.55));
        border-color: rgba(130, 220, 170, 0.35);
        color: #3d6f55;
    }

    .calc-chip:nth-child(6n+4):hover {
        background: linear-gradient(135deg, rgba(190, 255, 220, 0.8), rgba(160, 240, 200, 0.7));
        border-color: rgba(130, 220, 170, 0.5);
        box-shadow: 0 8px 20px -6px rgba(130, 220, 170, 0.3);
        transform: translateY(-2px);
    }

    /* Chip 5 - Soft Peach */
    .calc-chip:nth-child(6n+5) {
        background: linear-gradient(135deg, rgba(255, 220, 190, 0.65), rgba(255, 205, 170, 0.55));
        border-color: rgba(255, 170, 130, 0.35);
        color: #6f5a3d;
    }

    .calc-chip:nth-child(6n+5):hover {
        background: linear-gradient(135deg, rgba(255, 220, 190, 0.8), rgba(255, 205, 170, 0.7));
        border-color: rgba(255, 170, 130, 0.5);
        box-shadow: 0 8px 20px -6px rgba(255, 170, 130, 0.3);
        transform: translateY(-2px);
    }

    /* Chip 6 - Soft Yellow */
    .calc-chip:nth-child(6n+6) {
        background: linear-gradient(135deg, rgba(255, 240, 190, 0.65), rgba(255, 235, 160, 0.55));
        border-color: rgba(255, 210, 100, 0.35);
        color: #6f6a3d;
    }

    .calc-chip:nth-child(6n+6):hover {
        background: linear-gradient(135deg, rgba(255, 240, 190, 0.8), rgba(255, 235, 160, 0.7));
        border-color: rgba(255, 210, 100, 0.5);
        box-shadow: 0 8px 20px -6px rgba(255, 210, 100, 0.3);
        transform: translateY(-2px);
    }

    @media (max-width: 640px) {
        .calc-chips-track {
            gap: 0.5rem;
        }

        .calc-chip {
            font-size: 0.875rem;
            padding: 0.625rem 0.75rem;
            min-width: 200px;
        }
    }

/* ============================================== */
/* ===== TRUST STRIP (Animated Badge) ===== */
/* ============================================== */

.trust-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 60px;
    padding: 0.6rem 1.8rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
    animation: pulseGlow 3s infinite alternate ease-in-out;
}

.trust-strip:hover {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(122, 74, 154, 0.15);
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 20px rgba(122, 74, 154, 0.04);
    }
    100% {
        box-shadow: 0 0 40px rgba(122, 74, 154, 0.08);
    }
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4a3b5c;
    white-space: nowrap;
}

.trust-divider {
    width: 1px;
    height: 20px;
    background: rgba(122, 74, 154, 0.1);
}

/* ============================================== */
/* ===== WHY USE NUMEROLOGY - ELEGANT CARD ===== */
/* ============================================== */

.why-numerology-section {
    padding: 2.5rem 1rem;
    margin-bottom: 3rem;
    background: radial-gradient(ellipse at 30% 40%, #eee6f5 0%, #dcc8e8 70%, #c9aad8 100%);
   
}

/* Main Card Container */
.why-card {
    background: rgba(250, 248, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 170, 230, 0.4);
    border-radius: 2.4rem;
    padding: 3rem 3rem 2.8rem 3rem;
    box-shadow: 0 10px 40px -10px rgba(122, 74, 154, 0.12);
    transition: all 0.4s cubic-bezier(0.15, 0.75, 0.3, 1.2);
    position: relative;
    overflow: hidden;
}

.why-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(193, 134, 241, 0.05) 0%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: all 0.5s ease;
}

.why-card:hover::before {
    opacity: 1;
    transform: scale(1.2);
}

.why-card:hover {
    background: rgba(255, 252, 255, 0.98);
    box-shadow: 0 20px 50px -12px rgba(122, 74, 154, 0.18);
}

/* Header */
.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.card-header .icon-wrapper {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 16px;
    background: rgba(122, 74, 154, 0.08);
    border: 1px solid rgba(122, 74, 154, 0.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #7a4a9a;
    flex-shrink: 0;
    transition: all 0.3s ease;
    font-weight: 700;
    line-height: 1;
}

.why-card:hover .icon-wrapper {
    background: rgba(243, 183, 101, 0.08);
    border-color: rgba(243, 183, 101, 0.1);
    color: #e89a4a;
    transform: scale(1.05) rotate(-2deg);
}

.card-header h2 {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(145deg, #4a2c6d, #7a4a9a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -0.02em;
}

/* Features List */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem 0.6rem 0.8rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(122, 74, 154, 0.08);
    transform: translateX(4px);
}

/* Animated Checkmark */
.checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(122, 74, 154, 0.08);
    border: 1px solid rgba(122, 74, 154, 0.06);
    color: #7a4a9a;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.15, 0.75, 0.3, 1.2);
    line-height: 1;
}

.feature-item:hover .checkmark {
    background: rgba(243, 183, 101, 0.12);
    border-color: rgba(243, 183, 101, 0.15);
    color: #e89a4a;
    transform: scale(1.1) rotate(-5deg);
}

.feature-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: #2d1f3d;
    line-height: 1.4;
}

.feature-text .highlight {
    color: #7a4a9a;
    font-weight: 600;
}

.feature-text .highlight-gold {
    color: #e89a4a;
    font-weight: 600;
}

/* Decorative Accent Line */
.accent-line {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #7a4a9a, #f3b765);
    border-radius: 4px;
    margin-top: 1.8rem;
    transition: width 0.4s ease;
}

.why-card:hover .accent-line {
    width: 100px;
}

/* Responsive - Tablet */
@media (max-width: 768px) {
    .trust-strip {
        border-radius: 30px;
        padding: 0.5rem 1.2rem;
        gap: 0.8rem;
    }
    .trust-item {
        font-size: 0.78rem;
    }
    .trust-divider {
        height: 14px;
    }
}

@media (max-width: 640px) {
    .trust-strip {
        border-radius: 20px;
        padding: 0.5rem 1rem;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .trust-item {
        font-size: 0.75rem;
        gap: 0.35rem;
    }
    .trust-item i {
        font-size: 0.75rem;
    }
    .trust-divider {
        display: none;
    }

    .why-card {
        padding: 2rem 1.4rem 1.8rem 1.4rem;
        border-radius: 1.8rem;
    }

    .card-header h2 {
        font-size: 1.4rem;
    }

    .card-header .icon-wrapper {
        width: 3rem;
        height: 3rem;
        font-size: 1.3rem;
    }

    .feature-item {
        padding: 0.5rem 0.8rem 0.5rem 0.6rem;
    }

    .feature-text {
        font-size: 0.85rem;
    }

    .checkmark {
        width: 1.7rem;
        height: 1.7rem;
        font-size: 0.7rem;
    }

    .accent-line {
        width: 40px;
        margin-top: 1.4rem;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 400px) {
    .why-card {
        padding: 1.5rem 1rem 1.4rem 1rem;
        border-radius: 1.4rem;
    }

    .card-header h2 {
        font-size: 1.2rem;
    }

    .card-header .icon-wrapper {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.1rem;
    }

    .feature-text {
        font-size: 0.78rem;
    }

    .feature-item {
        padding: 0.4rem 0.6rem 0.4rem 0.4rem;
        border-radius: 0.8rem;
    }

    .checkmark {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.6rem;
    }
}