/* ==========================================================================
   DM STUDIO AI
   PREMIUM HOMEPAGE POLISH
   --------------------------------------------------------------------------
   Final public-facing refinement layer.

   Goals:
   - More sophisticated SaaS / EdTech finish
   - Reduce the "emoji card" appearance
   - Stronger visual hierarchy and depth
   - No jumping / translating hover effects
   - Preserve accessibility and reduced-motion preferences
   - Affect HOME only
   ========================================================================== */


/* ==========================================================================
   1. SHARED HOMEPAGE RHYTHM
   ========================================================================== */

body.route-home {
    --dm-premium-navy: #11173f;
    --dm-premium-indigo: #675ff0;
    --dm-premium-blue: #55a9f5;
    --dm-premium-cyan: #54cde2;
    --dm-premium-muted: #626a8a;
    --dm-premium-line: rgba(104, 99, 219, 0.13);
    --dm-premium-shadow: 0 18px 48px rgba(43, 50, 109, 0.09);
    --dm-premium-shadow-strong: 0 24px 62px rgba(43, 50, 109, 0.13);
}

body.route-home .section-heading {
    max-width: 820px;
}

body.route-home .section-kicker {
    color: #5f63db;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

body.route-home .section-heading h2 {
    color: var(--dm-premium-navy);
    letter-spacing: -0.03em;
    line-height: 1.08;
}

body.route-home .section-intro {
    color: var(--dm-premium-muted);
    line-height: 1.7;
}


/* ==========================================================================
   2. HEADER — SUBTLE COMMERCIAL SAAS FINISH
   ========================================================================== */

html body.route-home .dm-header {
    background:
        linear-gradient(
            90deg,
            #101840 0%,
            #121a46 48%,
            #101940 100%
        ) !important;
    border-bottom: 1px solid rgba(127, 137, 255, 0.12) !important;
    box-shadow:
        0 6px 24px rgba(7, 18, 61, 0.10),
        inset 0 -1px 0 rgba(255, 255, 255, 0.025) !important;
}

html body.route-home .dm-header .logo {
    letter-spacing: -0.045em !important;
}

html body.route-home .dm-header .nav-menu > a {
    letter-spacing: 0.01em !important;
    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease !important;
}

html body.route-home .dm-header .nav-menu > a:hover,
html body.route-home .dm-header .nav-menu > a:focus-visible {
    background: rgba(255, 255, 255, 0.065) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035) !important;
}

html body.route-home .dm-header .nav-menu > a.active,
html body.route-home .dm-header .nav-menu > a.active-link {
    color: #8e87ff !important;
    -webkit-text-fill-color: #8e87ff !important;
    background: rgba(109, 100, 242, 0.09) !important;
    box-shadow:
        inset 0 -2px 0 rgba(126, 116, 255, 0.88),
        inset 0 0 0 1px rgba(126, 116, 255, 0.06) !important;
}


/* ==========================================================================
   3. HERO BUTTONS — MORE REFINED, NO JUMPING
   ========================================================================== */

body.route-home .hero-buttons .primary-btn,
body.route-home .hero-buttons .secondary-btn {
    border-radius: 13px;
    font-weight: 800;
    transition:
        box-shadow 180ms ease,
        border-color 180ms ease,
        background-color 180ms ease !important;
    transform: none !important;
}

body.route-home .hero-buttons .primary-btn {
    box-shadow:
        0 12px 28px rgba(94, 81, 223, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.route-home .hero-buttons .primary-btn:hover,
body.route-home .hero-buttons .primary-btn:focus-visible {
    transform: none !important;
    box-shadow:
        0 0 0 4px rgba(108, 99, 255, 0.09),
        0 16px 36px rgba(94, 81, 223, 0.25);
}

body.route-home .hero-buttons .secondary-btn:hover,
body.route-home .hero-buttons .secondary-btn:focus-visible {
    transform: none !important;
    border-color: rgba(101, 96, 220, 0.24);
    box-shadow: 0 10px 24px rgba(49, 55, 121, 0.08);
}


/* ==========================================================================
   4. BENEFIT CARDS — PREMIUM VECTOR-STYLE ICONS
   ========================================================================== */

body.route-home .features {
    width: min(86%, 1380px);
    gap: 20px;
}

body.route-home .feature-card {
    position: relative;
    overflow: hidden;
    min-height: 205px;
    padding: 28px;
    border: 1px solid var(--dm-premium-line);
    background:
        linear-gradient(
            160deg,
            rgba(255, 255, 255, 0.99) 0%,
            rgba(251, 251, 255, 0.97) 100%
        );
    box-shadow: var(--dm-premium-shadow);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background-color 180ms ease;
}

body.route-home .feature-card::after {
    content: "";
    position: absolute;
    top: -54px;
    right: -58px;
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(109, 99, 255, 0.08),
            transparent 68%
        );
    pointer-events: none;
}

body.route-home .feature-card:hover,
body.route-home .feature-card:focus-within {
    border-color: rgba(104, 99, 219, 0.20);
    box-shadow: var(--dm-premium-shadow-strong);
    transform: none;
}

body.route-home .feature-card .icon {
    position: relative;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border: 1px solid rgba(105, 98, 221, 0.10);
    border-radius: 15px;
    color: transparent;
    font-size: 0;
    background:
        linear-gradient(
            135deg,
            rgba(112, 102, 241, 0.10),
            rgba(78, 183, 236, 0.09)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 8px 20px rgba(66, 72, 148, 0.08);
}

body.route-home .feature-card .icon::before {
    content: "";
    width: 25px;
    height: 25px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Spark / AI */
body.route-home .feature-card:nth-child(1) .icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.25 3.75L17 8l-3.75 1.25L12 13l-1.25-3.75L7 8l3.75-1.25L12 3z'/%3E%3Cpath d='M18.5 13.5l.75 2.25 2.25.75-2.25.75-.75 2.25-.75-2.25-2.25-.75 2.25-.75.75-2.25z'/%3E%3Cpath d='M5.5 13l.6 1.8 1.8.6-1.8.6-.6 1.8-.6-1.8-1.8-.6 1.8-.6.6-1.8z'/%3E%3C/svg%3E");
}

/* Steps */
body.route-home .feature-card:nth-child(2) .icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 18h4v-4h4v-4h4V6h2'/%3E%3Cpath d='M5 6v12h14'/%3E%3C/svg%3E");
}

/* Analytics */
body.route-home .feature-card:nth-child(3) .icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V9'/%3E%3Cpath d='M10 19V5'/%3E%3Cpath d='M16 19v-7'/%3E%3Cpath d='M22 19H2'/%3E%3C/svg%3E");
}

/* Accessibility */
body.route-home .feature-card:nth-child(4) .icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M5 8.5c2.2 1 4.5 1.5 7 1.5s4.8-.5 7-1.5'/%3E%3Cpath d='M12 10v10'/%3E%3Cpath d='M8.5 20L12 14l3.5 6'/%3E%3C/svg%3E");
}

body.route-home .feature-card h3 {
    color: var(--dm-premium-navy);
    letter-spacing: -0.015em;
}

body.route-home .feature-card p {
    color: var(--dm-premium-muted);
}


/* ==========================================================================
   5. LEARN IN FOUR SIMPLE STEPS — PRODUCT FLOW
   ========================================================================== */

body.route-home .learning-process {
    position: relative;
}

body.route-home .learning-process-grid {
    position: relative;
    width: min(82%, 1180px);
    margin-left: auto;
    margin-right: auto;
    gap: 20px;
}

body.route-home .learning-process-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 56px;
    left: 12%;
    right: 12%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(108, 99, 255, 0.24) 12%,
            rgba(83, 174, 241, 0.22) 50%,
            rgba(108, 99, 255, 0.24) 88%,
            transparent
        );
    pointer-events: none;
}

body.route-home .learning-step {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: 210px;
    border: 1px solid var(--dm-premium-line);
    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 1),
            rgba(250, 251, 255, 0.97)
        );
    box-shadow: var(--dm-premium-shadow);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

body.route-home .learning-step:hover,
body.route-home .learning-step:focus-within {
    transform: none;
    border-color: rgba(105, 99, 222, 0.21);
    box-shadow: var(--dm-premium-shadow-strong);
}

body.route-home .learning-step-number {
    background:
        linear-gradient(
            135deg,
            #685ff0,
            #6f8cf4
        );
    box-shadow:
        0 8px 20px rgba(95, 88, 221, 0.20),
        0 0 0 5px rgba(108, 99, 255, 0.06);
}

body.route-home .learning-step-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: 18px auto 12px;
    border-radius: 14px;
    color: transparent;
    font-size: 0;
    background:
        linear-gradient(
            135deg,
            rgba(110, 100, 239, 0.09),
            rgba(85, 179, 239, 0.09)
        );
}

body.route-home .learning-step-icon::before {
    content: "";
    width: 23px;
    height: 23px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Choose */
body.route-home .learning-step:nth-child(1) .learning-step-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 4V2M20 12h2M12 20v2M4 12H2'/%3E%3C/svg%3E");
}

/* Learn */
body.route-home .learning-step:nth-child(2) .learning-step-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5A2.5 2.5 0 0 1 6.5 3H11v16H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M20 5.5A2.5 2.5 0 0 0 17.5 3H13v16h4.5a2.5 2.5 0 0 1 2.5 2.5z'/%3E%3C/svg%3E");
}

/* Create */
body.route-home .learning-step:nth-child(3) .learning-step-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='9' cy='9' r='1'/%3E%3Ccircle cx='15' cy='8' r='1'/%3E%3Ccircle cx='8' cy='14' r='1'/%3E%3Cpath d='M16 14.5c1.8 0 3 1 3 2.5S17.6 20 16 20h-1.5'/%3E%3C/svg%3E");
}

/* Share */
body.route-home .learning-step:nth-child(4) .learning-step-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l16-8-6 16-2.5-6.5z'/%3E%3Cpath d='M11.5 13.5L20 4'/%3E%3C/svg%3E");
}

body.route-home .learning-step h3 {
    color: var(--dm-premium-navy);
    letter-spacing: -0.015em;
}

body.route-home .learning-step p {
    color: var(--dm-premium-muted);
}


/* ==========================================================================
   6. MEET PIXEL — GLASS / PRODUCT DEMO FINISH
   ========================================================================== */

body.route-home .pixel-support-section {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(108, 99, 255, 0.11);
    background:
        radial-gradient(
            circle at 90% 12%,
            rgba(101, 90, 235, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 7% 88%,
            rgba(83, 199, 225, 0.10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f7f7ff 0%,
            #f3f2ff 50%,
            #eefaff 100%
        );
    box-shadow: var(--dm-premium-shadow-strong);
}

body.route-home .pixel-support-section::before {
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    right: -100px;
    top: -120px;
    border-radius: 50%;
    border: 1px solid rgba(122, 111, 239, 0.10);
    box-shadow:
        0 0 0 30px rgba(122, 111, 239, 0.025),
        0 0 0 62px rgba(82, 189, 233, 0.018);
    pointer-events: none;
}

body.route-home .pixel-demo-card {
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 22px 52px rgba(50, 42, 132, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.route-home .pixel-help-list span {
    border: 1px solid rgba(102, 96, 213, 0.08);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 8px 18px rgba(52, 60, 126, 0.045);
}


/* ==========================================================================
   7. STUDENT / TEACHER CARDS — LESS PLAYFUL, MORE PRODUCT-LIKE
   ========================================================================== */

body.route-home .user-path-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dm-premium-line);
    background:
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 1),
            rgba(250, 251, 255, 0.98)
        );
    box-shadow: var(--dm-premium-shadow);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

body.route-home .user-path-card:hover,
body.route-home .user-path-card:focus-within {
    transform: none;
    border-color: rgba(104, 99, 219, 0.20);
    box-shadow: var(--dm-premium-shadow-strong);
}

body.route-home .user-path-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(105, 99, 222, 0.10);
    border-radius: 16px;
    color: transparent;
    font-size: 0;
    background:
        linear-gradient(
            135deg,
            rgba(112, 102, 241, 0.10),
            rgba(78, 183, 236, 0.09)
        );
}

body.route-home .user-path-icon::before {
    content: "";
    width: 28px;
    height: 28px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Student */
body.route-home .user-path-card:nth-child(1) .user-path-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-5 9 5-9 5-9-5z'/%3E%3Cpath d='M7 11.5v4.5c2.7 2 7.3 2 10 0v-4.5'/%3E%3Cpath d='M21 9v6'/%3E%3C/svg%3E");
}

/* Teacher */
body.route-home .user-path-card:nth-child(2) .user-path-icon::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236760f0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Cpath d='M3.5 20v-3.5A3.5 3.5 0 0 1 7 13h2a3.5 3.5 0 0 1 3.5 3.5V20'/%3E%3Cpath d='M14 5h7v8h-7z'/%3E%3Cpath d='M16 8h3M16 10.5h2'/%3E%3C/svg%3E");
}

body.route-home .user-path-card h3 {
    color: var(--dm-premium-navy);
}

body.route-home .user-path-card p {
    color: var(--dm-premium-muted);
}

body.route-home .user-path-card a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    margin-top: 8px;
    padding: 0 14px;
    border-radius: 11px;
    background: rgba(104, 95, 237, 0.075);
    color: #5f5fd8;
    font-weight: 800;
    text-decoration: none;
    transition:
        background-color 180ms ease,
        box-shadow 180ms ease;
}

body.route-home .user-path-card a:hover,
body.route-home .user-path-card a:focus-visible {
    transform: none;
    background: rgba(104, 95, 237, 0.11);
    box-shadow: inset 0 0 0 1px rgba(104, 95, 237, 0.08);
}


/* ==========================================================================
   8. PROJECT SHOWCASE — MORE EDITORIAL / PREMIUM
   ========================================================================== */

body.route-home .student-showcase {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(143, 139, 255, 0.16);
    background:
        radial-gradient(
            circle at 85% 18%,
            rgba(109, 192, 255, 0.16),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #111840 0%,
            #25205e 48%,
            #6258df 100%
        );
    box-shadow:
        0 28px 68px rgba(32, 35, 94, 0.24);
}

body.route-home .student-showcase::before {
    content: "";
    position: absolute;
    right: -75px;
    top: -70px;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow:
        0 0 0 34px rgba(255, 255, 255, 0.025),
        0 0 0 72px rgba(255, 255, 255, 0.014);
    pointer-events: none;
}

body.route-home .showcase-card {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(255, 255, 255, 0.11);
    box-shadow:
        0 20px 44px rgba(8, 12, 56, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

body.route-home .showcase-card > span {
    background: rgba(255, 255, 255, 0.94);
    color: #5d5ad5;
    letter-spacing: 0.03em;
}


/* ==========================================================================
   9. TESTIMONIALS — QUIETER, HIGHER-END
   ========================================================================== */

body.route-home .testimonial {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(106, 100, 221, 0.10);
    background:
        linear-gradient(
            135deg,
            rgba(248, 247, 255, 0.98),
            rgba(242, 248, 255, 0.98)
        );
    box-shadow: var(--dm-premium-shadow);
}

body.route-home .testimonial > div {
    position: relative;
}

body.route-home .testimonial > div::before {
    content: "“";
    display: block;
    height: 34px;
    color: rgba(102, 94, 229, 0.25);
    font-family: Georgia, serif;
    font-size: 3.5rem;
    line-height: 0.8;
}

body.route-home .testimonial p {
    color: #363c63;
    font-size: 1.05rem;
    line-height: 1.7;
}

body.route-home .testimonial strong {
    color: #666c8d;
    font-size: 0.82rem;
    letter-spacing: 0.025em;
}


/* ==========================================================================
   10. PATHWAYS CTA — SINGLE STRONG CTA
   ========================================================================== */

body.route-home .dm-pathways-actions {
    margin-top: 32px;
}

body.route-home .dm-pathways-primary-action {
    min-height: 52px;
    padding-left: 22px;
    padding-right: 22px;
    border: 1px solid rgba(91, 84, 215, 0.18);
    box-shadow:
        0 14px 30px rgba(91, 80, 219, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

body.route-home .dm-pathways-primary-action:hover,
body.route-home .dm-pathways-primary-action:focus-visible {
    transform: none;
    box-shadow:
        0 0 0 4px rgba(104, 95, 236, 0.09),
        0 18px 38px rgba(91, 80, 219, 0.27);
}


/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {

    body.route-home .features {
        width: min(92%, 760px);
    }

    body.route-home .learning-process-grid::before {
        display: none;
    }

}


@media (max-width: 600px) {

    body.route-home .feature-card,
    body.route-home .learning-step,
    body.route-home .user-path-card {
        min-height: 0;
    }

    body.route-home .feature-card {
        padding: 24px;
    }

    body.route-home .testimonial p {
        font-size: 1rem;
    }

}


/* ==========================================================================
   12. ACCESSIBILITY / REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    body.route-home *,
    body.route-home *::before,
    body.route-home *::after {
        transition-duration: 0.001ms !important;
    }

    body.route-home .feature-card,
    body.route-home .learning-step,
    body.route-home .user-path-card,
    body.route-home .hero-buttons a,
    body.route-home .dm-pathways-primary-action {
        transform: none !important;
    }

}


/* ==========================================================================
   13. CREATIVE PATHWAYS HUB — FINAL PREMIUM FIX
   --------------------------------------------------------------------------
   Rebuilds only the centre of the animated Creative Pathways graphic.

   Goals:
   - Full, crisp circular technology core
   - Clear central sparkle
   - Elegant concentric orbit rings
   - Tiny light particles
   - No cut-off / half-circle appearance
   - No changes to pathway cards or layout
   ========================================================================== */

body.route-home .dm-pathways-visual {
    overflow: visible;
}


/* Main hub shell */
body.route-home .dm-pathways-hub {
    z-index: 3;
    width: 126px;
    height: 126px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: dmPremiumHubFloat 5.8s ease-in-out infinite;
}


/* Large outer orbit */
body.route-home .dm-pathways-hub::before {
    content: "";
    position: absolute;
    inset: -58px;
    border: 1px dashed rgba(101, 96, 225, 0.26);
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 34px rgba(100, 95, 226, 0.055);
    opacity: 0.95;
    animation: dmPremiumHubOrbit 22s linear infinite;
    pointer-events: none;
}


/* Middle orbit */
body.route-home .dm-pathways-hub::after {
    content: "";
    position: absolute;
    inset: -32px;
    border: 1px solid rgba(84, 169, 235, 0.23);
    border-radius: 50%;
    background: transparent;
    box-shadow:
        0 0 24px rgba(84, 169, 235, 0.075);
    opacity: 0.95;
    animation: dmPremiumHubPulse 4s ease-in-out infinite;
    pointer-events: none;
}


/* Inner glass ring */
body.route-home .dm-pathways-hub-ring {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(111, 102, 234, 0.28);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.68) 0%,
            rgba(238, 240, 255, 0.42) 52%,
            rgba(100, 98, 231, 0.06) 72%,
            transparent 74%
        );
    box-shadow:
        0 0 0 9px rgba(113, 104, 235, 0.035),
        0 0 32px rgba(93, 117, 236, 0.10);
    animation: none;
    pointer-events: none;
}


/* Small orbiting light dots */
body.route-home .dm-pathways-hub-ring::before,
body.route-home .dm-pathways-hub-ring::after {
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 0 0 4px rgba(112, 104, 239, 0.10),
        0 0 18px rgba(91, 142, 244, 0.60);
}

body.route-home .dm-pathways-hub-ring::before {
    top: 8px;
    left: 24px;
    animation: dmPremiumParticleOne 4.6s ease-in-out infinite;
}

body.route-home .dm-pathways-hub-ring::after {
    right: 12px;
    bottom: 22px;
    animation: dmPremiumParticleTwo 5.1s ease-in-out infinite;
}


/* Main technology core */
body.route-home .dm-pathways-hub-core {
    position: relative;
    z-index: 4;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 50%;
    background:
        radial-gradient(
            circle at 34% 28%,
            #a9a0ff 0%,
            #8276fa 26%,
            #6d69f2 52%,
            #568fe9 76%,
            #55c4df 100%
        );
    color: #ffffff;
    font-size: 2.7rem;
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 0 12px rgba(255, 255, 255, 0.92),
        0 0 24px rgba(198, 225, 255, 0.70);
    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.58),
        inset 0 -8px 20px rgba(54, 68, 184, 0.16),
        0 12px 28px rgba(76, 71, 194, 0.26),
        0 0 26px rgba(95, 114, 244, 0.30),
        0 0 56px rgba(78, 190, 226, 0.16);
    animation: dmPremiumCoreGlow 3.8s ease-in-out infinite;
}


/* Tiny sparkle in the upper-right of the core */
body.route-home .dm-pathways-hub-core::before {
    content: "✦";
    position: absolute;
    top: 12px;
    right: 15px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.75rem;
    line-height: 1;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.9);
    animation: dmPremiumSparkle 2.8s ease-in-out infinite;
}


/* Small technology label below the core */
body.route-home .dm-pathways-hub-core::after {
    content: "CREATIVE MEDIA";
    position: absolute;
    left: 50%;
    top: calc(100% + 18px);
    width: max-content;
    transform: translateX(-50%);
    padding: 6px 10px;
    border: 1px solid rgba(102, 96, 221, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.84);
    color: #6969d8;
    font-size: 0.57rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.12em;
    text-shadow: none;
    box-shadow:
        0 8px 22px rgba(59, 66, 142, 0.10);
}


/* Keep pathway cards above the visual hub */
body.route-home .dm-pathway-mini-card {
    z-index: 5;
}


/* Keep the four floating media symbols visible */
body.route-home .dm-pathways-floating-symbol {
    z-index: 6;
}


/* --------------------------------------------------------------------------
   HUB ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes dmPremiumHubFloat {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%, -50%)
            translateY(-6px);
    }
}


@keyframes dmPremiumHubOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


@keyframes dmPremiumHubPulse {
    0%,
    100% {
        opacity: 0.56;
        transform: scale(0.97);
    }

    50% {
        opacity: 1;
        transform: scale(1.045);
    }
}


@keyframes dmPremiumCoreGlow {
    0%,
    100% {
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.58),
            inset 0 -8px 20px rgba(54, 68, 184, 0.16),
            0 12px 28px rgba(76, 71, 194, 0.26),
            0 0 24px rgba(95, 114, 244, 0.25),
            0 0 42px rgba(78, 190, 226, 0.12);
    }

    50% {
        box-shadow:
            inset 0 2px 0 rgba(255, 255, 255, 0.72),
            inset 0 -8px 20px rgba(54, 68, 184, 0.12),
            0 14px 32px rgba(76, 71, 194, 0.30),
            0 0 38px rgba(95, 114, 244, 0.38),
            0 0 64px rgba(78, 190, 226, 0.20);
    }
}


@keyframes dmPremiumSparkle {
    0%,
    100% {
        opacity: 0.38;
        transform: scale(0.82) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.22) rotate(18deg);
    }
}


@keyframes dmPremiumParticleOne {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.18);
    }
}


@keyframes dmPremiumParticleTwo {
    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(0.75);
    }
}


/* --------------------------------------------------------------------------
   RESPONSIVE HUB
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

    body.route-home .dm-pathways-hub {
        width: 112px;
        height: 112px;
    }

    body.route-home .dm-pathways-hub::before {
        inset: -46px;
    }

    body.route-home .dm-pathways-hub::after {
        inset: -26px;
    }

    body.route-home .dm-pathways-hub-core {
        width: 82px;
        height: 82px;
        font-size: 2.25rem;
    }

    body.route-home .dm-pathways-hub-core::after {
        top: calc(100% + 14px);
        font-size: 0.52rem;
    }

}


/* --------------------------------------------------------------------------
   REDUCED MOTION
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    body.route-home .dm-pathways-hub,
    body.route-home .dm-pathways-hub::before,
    body.route-home .dm-pathways-hub::after,
    body.route-home .dm-pathways-hub-core,
    body.route-home .dm-pathways-hub-core::before,
    body.route-home .dm-pathways-hub-ring::before,
    body.route-home .dm-pathways-hub-ring::after {
        animation: none !important;
    }

}

/* ==========================================================================
   HOMEPAGE PIXEL — TWO ORBITING SHINING STARS
   --------------------------------------------------------------------------
   Homepage only.
   Pixel remains stationary while two stars orbit independently.
   ========================================================================== */

body.route-home .hero-studio .pixel-ring {
    overflow: visible;
}

/* Remove old fixed ring particles from the homepage Pixel graphic. */
body.route-home .hero-studio .pixel-ring::before,
body.route-home .hero-studio .pixel-ring::after {
    content: none !important;
    display: none !important;
}

/* Full-size rotating carrier for each star. */
body.route-home .hero-studio .pixel-orbit-dot {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    border-radius: 50%;
    pointer-events: none;
    transform-origin: 50% 50%;
    will-change: transform;
}

/* Bright star centre. */
body.route-home .hero-studio .pixel-orbit-dot::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    width: 15px;
    height: 15px;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    transform: translateX(-50%);
    background:
        radial-gradient(
            circle at 34% 30%,
            #ffffff 0%,
            #ffffff 18%,
            #edf5ff 36%,
            #a8b6ff 61%,
            #7064f3 100%
        );
    box-shadow:
        0 0 5px rgba(255, 255, 255, 1),
        0 0 11px rgba(228, 239, 255, 0.96),
        0 0 20px rgba(112, 100, 245, 0.82),
        0 0 36px rgba(75, 188, 236, 0.42);
    animation:
        dmHomepagePixelStarTwinkle 1.75s ease-in-out infinite;
}

/* Four-point shining star. */
body.route-home .hero-studio .pixel-orbit-dot::after {
    content: "✦";
    position: absolute;
    top: -16px;
    left: 50%;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.99);
    font-size: 1.5rem;
    line-height: 1;
    text-align: center;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 1),
        0 0 9px rgba(226, 240, 255, 1),
        0 0 18px rgba(122, 109, 248, 0.78),
        0 0 28px rgba(75, 190, 236, 0.42);
    animation:
        dmHomepagePixelStarSparkle 1.75s ease-in-out infinite;
}

/* First star: faster clockwise orbit. */
body.route-home .hero-studio .pixel-orbit-dot-one {
    animation:
        dmHomepagePixelOrbitOne 8.5s linear infinite;
}

body.route-home .hero-studio .pixel-orbit-dot-one::before {
    background:
        radial-gradient(
            circle at 34% 30%,
            #ffffff 0%,
            #ffffff 18%,
            #ecebff 38%,
            #aa9dff 62%,
            #675cf0 100%
        );
}

/* Second star: slower counter-clockwise orbit. */
body.route-home .hero-studio .pixel-orbit-dot-two {
    animation:
        dmHomepagePixelOrbitTwo 13.5s linear infinite;
    animation-delay: -5.25s;
}

body.route-home .hero-studio .pixel-orbit-dot-two::before {
    top: -7px;
    width: 13px;
    height: 13px;
    background:
        radial-gradient(
            circle at 34% 30%,
            #ffffff 0%,
            #ffffff 18%,
            #e5fbff 38%,
            #82ddec 62%,
            #8370f7 100%
        );
    box-shadow:
        0 0 5px rgba(255, 255, 255, 1),
        0 0 11px rgba(226, 251, 255, 0.98),
        0 0 20px rgba(70, 202, 229, 0.80),
        0 0 36px rgba(123, 102, 245, 0.42);
    animation-duration: 2.15s;
    animation-delay: -0.65s;
}

body.route-home .hero-studio .pixel-orbit-dot-two::after {
    top: -15px;
    font-size: 1.35rem;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 1),
        0 0 10px rgba(226, 251, 255, 1),
        0 0 18px rgba(70, 202, 229, 0.78),
        0 0 27px rgba(123, 102, 245, 0.42);
    animation-duration: 2.15s;
    animation-delay: -0.65s;
}

@keyframes dmHomepagePixelOrbitOne {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dmHomepagePixelOrbitTwo {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

@keyframes dmHomepagePixelStarTwinkle {
    0%,
    100% {
        opacity: 0.80;
        filter: brightness(0.96);
    }

    45% {
        opacity: 1;
        filter: brightness(1.28);
    }

    65% {
        opacity: 0.92;
        filter: brightness(1.08);
    }
}

@keyframes dmHomepagePixelStarSparkle {
    0%,
    100% {
        opacity: 0.54;
        transform: translateX(-50%) scale(0.72) rotate(0deg);
    }

    48% {
        opacity: 1;
        transform: translateX(-50%) scale(1.18) rotate(18deg);
    }

    66% {
        opacity: 0.82;
        transform: translateX(-50%) scale(0.94) rotate(28deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.route-home .hero-studio .pixel-orbit-dot-one,
    body.route-home .hero-studio .pixel-orbit-dot-two,
    body.route-home .hero-studio .pixel-orbit-dot-one::before,
    body.route-home .hero-studio .pixel-orbit-dot-one::after,
    body.route-home .hero-studio .pixel-orbit-dot-two::before,
    body.route-home .hero-studio .pixel-orbit-dot-two::after {
        animation: none !important;
    }

    body.route-home .hero-studio .pixel-orbit-dot-one {
        transform: rotate(35deg);
    }

    body.route-home .hero-studio .pixel-orbit-dot-two {
        transform: rotate(215deg);
    }
}