/* ==========================================================================
   RACHYET - MEGA MENUS · "STUDIO" DESIGN (desktop, ≥1025px)
   A light stage on the left of every menu, ~80% white with soft logo-colour
   light (live aurora, perspective grid
   floor, sparks, word-by-word title, ticker)
   and a light editorial canvas on the right (index numbers that fill with
   colour, hairline grid, one gliding highlight lens), plus a side card.
   Loaded after navbar.css and navbar-motion.css. Phones keep their own menus.
   ========================================================================== */

/* Desktop-only pieces stay out of the mobile drawer */
.nm-floor,
.nm-sparks,
.nm-marquee,
.nm-lens,
.nm-side,
.nm-cat-badge,
.mega-about-card .nm-num,
.ms-card-title .nm-num { display: none; }

@keyframes nmFlowSide { to { background-position: 200% 0; } }

/* Side card light flash (same sweep as the left panel) */
.nm-side > * { position: relative; z-index: 1; }
.nm-side::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 45%;
    transform: skewX(-18deg);
    pointer-events: none;
}

/* Words of a menu title (split by navbar-motion.js) */
.nm-word { display: inline-block; }
.nm-word > span { display: inline-block; }

/* Nav labels: lock the roll window to one line so it can never show half of each copy */
.nav-label { height: 1.3em; }
.nav-label > span { line-height: 1.3; }

@media (min-width: 1025px) {
    :root {
        --nm-ink: #0B1438;
        /* Soft lavender top with logo-colour light, settling into a deep navy base */
        --nm-dark-h: 140px;
        --nm-stage:
            radial-gradient(70% 30% at 15% 100%, rgba(123, 60, 245, 0.55) 0%, transparent 70%),
            radial-gradient(60% 26% at 100% 100%, rgba(255, 61, 154, 0.42) 0%, transparent 70%),
            linear-gradient(to top, #0B1438 0px, #151F55 calc(var(--nm-dark-h) - 50px), rgba(21, 31, 85, 0.55) calc(var(--nm-dark-h) - 15px), rgba(21, 31, 85, 0) var(--nm-dark-h)),
            radial-gradient(90% 50% at 100% 0%, rgba(76, 198, 255, 0.28) 0%, transparent 65%),
            radial-gradient(80% 45% at 0% 40%, rgba(168, 123, 255, 0.16) 0%, transparent 65%),
            linear-gradient(170deg, #F4F6FE 0%, #ECEFFB 100%);
        --nm-glide: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ---------------------------------------------------------------
       STAGE: About / Why us feature column and the Services rail
    --------------------------------------------------------------- */
    .mega-about-feature,
    .ms-rail {
        color: var(--gray-800);
        background: var(--nm-stage);
        border-right: 1px solid rgba(31, 39, 184, 0.08);
    }
    .mega-about-feature { padding-bottom: 3.4rem; }
    .ms-rail { --nm-dark-h: 190px; }
    /* Keep the rail's buttons pinned to the dark base however tall the rail grows */
    .mega-dropdown .ms-rail .ms-rail-links { margin-top: auto; }

    .mega-about-feature .maf-aurora-blue,
    .ms-rail .maf-aurora-blue   { background: rgba(76, 198, 255, 0.3); }
    .mega-about-feature .maf-aurora-green,
    .ms-rail .maf-aurora-green  { background: rgba(168, 123, 255, 0.24); }
    .mega-about-feature .maf-aurora-orange,
    .ms-rail .maf-aurora-orange { background: rgba(255, 154, 46, 0.24); }
    .mega-about-feature .maf-sheen,
    .ms-rail .maf-sheen,
    .nm-side::after {
        background: linear-gradient(100deg, transparent 0%, rgba(76, 198, 255, 0.14) 32%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 61, 154, 0.12) 68%, transparent 100%);
    }

    /* Richer light stage: dotted texture, a slowly turning colour ring in the
       corner, a spectrum edge along the top and a gradient divider */
    .mega-about-feature .maf-bg::before,
    .ms-rail .maf-bg::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(rgba(45, 91, 255, 0.13) 1px, transparent 1.4px) 0 0 / 14px 14px;
        -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
                mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
    }
    .mega-about-feature .maf-bg::after,
    .ms-rail .maf-bg::after {
        content: '';
        position: absolute;
        top: -120px;
        right: -120px;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        padding: 2px;
        background: conic-gradient(from var(--nav-rim-angle), rgba(76, 198, 255, 0.75), rgba(123, 60, 245, 0.55), rgba(255, 61, 154, 0.5), rgba(255, 154, 46, 0.55), rgba(76, 198, 255, 0.75));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0.55;
    }
    .mega-about-feature::before,
    .ms-rail::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        z-index: 2;
        background: linear-gradient(90deg, var(--rc-navy), var(--rc-blue), var(--rc-azure), var(--rc-violet), var(--rc-pink), var(--rc-orange), var(--rc-blue));
        background-size: 200% 100%;
        animation: nmFlowSide 6s linear infinite;
    }
    .mega-about-feature,
    .ms-rail { border-right: 0; }
    .mega-about-feature::after,
    .ms-rail::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 1px;
        z-index: 2;
        background: linear-gradient(180deg, rgba(76, 198, 255, 0.6), rgba(123, 60, 245, 0.35) 45%, rgba(255, 61, 154, 0.35) 75%, rgba(255, 154, 46, 0.5));
    }

    /* ~5% dark ink: the label chip, the ticker band and the clock face */
    .mega-dropdown .maf-eyebrow {
        color: #ffffff;
        background: linear-gradient(135deg, #0B1438 0%, #151F55 100%);
        border-color: rgba(11, 20, 56, 0.9);
        box-shadow: 0 8px 18px -10px rgba(11, 20, 56, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .mega-dropdown .maf-dot { background: var(--rc-azure); box-shadow: 0 0 6px rgba(76, 198, 255, 0.9); }

    .mega-dropdown .maf-emblem {
        box-shadow: 0 0 0 1px rgba(31, 39, 184, 0.08), 0 0 0 6px rgba(76, 198, 255, 0.08), 0 14px 28px -12px rgba(45, 91, 255, 0.45);
    }
    .mega-dropdown .maf-title,
    .mega-dropdown .ms-rail-title { color: var(--nm-ink); }
    .mega-dropdown .maf-desc { color: var(--gray-600); }
    .mega-dropdown .maf-proof li { color: var(--gray-800); }
    .mega-dropdown .maf-stat { background: #ffffff; border-color: rgba(31, 39, 184, 0.08); }

    /* CTA: brand gradient pill with a white arrow disc */
    .mega-dropdown .maf-cta,
    .mega-dropdown .maf-cta:hover {
        color: var(--nm-ink);
        background: #ffffff;
        box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25);
    }
    .mega-dropdown .maf-cta-arrow { color: #ffffff; background: var(--rc-gradient-brand); }
    .mega-dropdown .maf-cta:hover .maf-cta-arrow { color: #ffffff; background: linear-gradient(135deg, var(--rc-orange), var(--rc-pink)); }

    /* Perspective grid floor + sparks */
    .nm-floor {
        display: block;
        position: absolute;
        left: -25%;
        right: -25%;
        bottom: -12px;
        height: 46%;
        background-image:
            linear-gradient(rgba(138, 217, 255, 0.28) 1px, transparent 1px),
            linear-gradient(90deg, rgba(168, 123, 255, 0.2) 1px, transparent 1px);
        background-size: 28px 28px;
        transform: perspective(240px) rotateX(58deg);
        transform-origin: 50% 100%;
        -webkit-mask-image: linear-gradient(to top, #000 5%, transparent 90%);
                mask-image: linear-gradient(to top, #000 5%, transparent 90%);
        opacity: 0.6;
    }
    .nm-sparks { display: block; position: absolute; inset: 0; }
    .nm-sparks i {
        position: absolute;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: var(--rc-azure);
        box-shadow: 0 0 8px 2px rgba(76, 198, 255, 0.6);
        opacity: 0;
    }
    .nm-sparks i:nth-child(1) { top: 16%; left: 74%; }
    .nm-sparks i:nth-child(2) { top: 31%; left: 90%; background: var(--rc-violet-light); box-shadow: 0 0 8px 2px rgba(168, 123, 255, 0.6); }
    .nm-sparks i:nth-child(3) { top: 52%; left: 66%; background: var(--rc-pink); box-shadow: 0 0 8px 2px rgba(255, 61, 154, 0.5); }
    .nm-sparks i:nth-child(4) { top: 9%; left: 44%; }
    .nm-sparks i:nth-child(5) { top: 66%; left: 86%; background: var(--rc-orange); box-shadow: 0 0 8px 2px rgba(255, 154, 46, 0.55); }
    .nm-sparks i:nth-child(6) { top: 42%; left: 16%; background: var(--rc-violet-light); box-shadow: 0 0 8px 2px rgba(168, 123, 255, 0.6); }

    /* Ticker along the foot of the stage */
    .nm-marquee {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        padding: 0.7rem 0;
        overflow: hidden;
        border-top: 1px solid rgba(11, 20, 56, 0.9);
        background: linear-gradient(90deg, #0B1438 0%, #151F55 50%, #0B1438 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
                mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
    }
    .nm-marquee-track { display: flex; width: max-content; animation: nmMarquee 24s linear infinite; animation-play-state: paused; }
    .nm-marquee span {
        display: inline-flex;
        align-items: center;
        margin-right: 1.3rem;
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        white-space: nowrap;
        color: rgba(226, 232, 255, 0.8);
    }
    .nm-marquee span::after { content: '\2726'; margin-left: 1.3rem; letter-spacing: 0; font-size: 0.55rem; color: var(--rc-orange); }
    @keyframes nmMarquee { to { transform: translateX(-50%); } }

    /* ---------------------------------------------------------------
       CANVAS: About / Why us tiles
    --------------------------------------------------------------- */
    .mega-about { width: min(1080px, calc(100vw - 2rem)); }
    .mega-about-inner { background: #ffffff; }
    .mega-about-grid {
        position: relative;
        gap: 0;
        padding: 1.1rem;
        background: radial-gradient(rgba(31, 39, 184, 0.07) 1px, transparent 1.3px) 0 0 / 16px 16px;
    }
    /* Hairline cross between the four tiles */
    .mega-about-grid::before,
    .mega-about-grid::after { content: ''; position: absolute; pointer-events: none; }
    .mega-about-grid::before {
        top: 1.4rem; bottom: 1.4rem; left: 50%; width: 1px;
        background: linear-gradient(transparent, rgba(31, 39, 184, 0.16), transparent);
    }
    .mega-about-grid::after {
        left: 1.4rem; right: 1.4rem; top: 50%; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(31, 39, 184, 0.16), transparent);
    }

    .mega-dropdown .mega-about-card {
        z-index: 1;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.3rem 1.3rem 1.15rem;
        border: 0;
        border-radius: 18px;
        background: transparent;
    }
    .mega-dropdown .mega-about-card:hover,
    .mega-dropdown .mega-about-card:focus-visible {
        background: transparent;
        box-shadow: none;
        transform: translateY(-2px);
    }
    .mega-dropdown .mega-about-card.is-current { background: transparent; }
    .mega-dropdown .mega-about-card::after { display: none; }
    .mega-dropdown .mega-about-card-icon { width: 46px; height: 46px; border-radius: 14px; }
    .mega-dropdown .mega-about-card-title { font-size: 1rem; }
    .mega-dropdown .mega-about-card-desc { margin-bottom: 0.7rem; }

    /* Index numbers: outlined, then fill with colour from the bottom on hover */
    .mega-about-card .nm-num {
        display: block;
        position: absolute;
        top: 1.05rem;
        right: 1.2rem;
        font-family: var(--font-heading);
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        color: transparent;
        -webkit-text-stroke: 1px color-mix(in srgb, var(--card-color) 34%, transparent);
        background: linear-gradient(160deg, var(--card-color), var(--rc-pink)) no-repeat 0 100% / 100% 0%;
        -webkit-background-clip: text;
                background-clip: text;
        transition: background-size 0.55s var(--nm-glide), transform 0.5s var(--nm-glide), -webkit-text-stroke-color 0.4s ease;
    }
    .mega-about-card:hover .nm-num,
    .mega-about-card.is-current .nm-num {
        background-size: 100% 100%;
        -webkit-text-stroke-color: transparent;
        transform: translateY(-3px);
    }

    /* "Learn more" underline draws in */
    .mega-dropdown .mega-about-card-more { position: relative; align-self: flex-start; padding-bottom: 2px; }
    .mega-dropdown .mega-about-card-more::after {
        content: '';
        position: absolute;
        left: 0;
        right: 1rem;
        bottom: -1px;
        height: 1.5px;
        border-radius: 2px;
        background: currentColor;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.45s var(--nm-glide);
    }
    .mega-dropdown .mega-about-card:hover .mega-about-card-more::after { transform: scaleX(1); }

    /* ---------------------------------------------------------------
       GLIDING HIGHLIGHT LENS (positioned by navbar-motion.js)
    --------------------------------------------------------------- */
    .nm-lens {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 0;
        height: 0;
        border-radius: 18px;
        pointer-events: none;
        background: #ffffff;
        box-shadow:
            0 24px 46px -24px color-mix(in srgb, var(--lens-c, #2D5BFF) 65%, transparent),
            0 2px 10px -3px rgba(21, 31, 85, 0.12);
        opacity: 0;
        transition: transform 0.5s var(--nm-glide), width 0.5s var(--nm-glide), height 0.5s var(--nm-glide),
            opacity 0.3s ease, box-shadow 0.4s ease;
    }
    .nm-lens::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(135deg, var(--lens-c, #2D5BFF), transparent 45%, transparent 60%, var(--rc-pink));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0.6;
    }
    .has-lens > .nm-lens { opacity: 1; }
    .nm-lens.nm-snap { transition: opacity 0.3s ease; }

    /* ---------------------------------------------------------------
       SIDE CARDS (wide screens)
    --------------------------------------------------------------- */
    .nm-side-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.64rem;
        font-weight: 700;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: var(--gray-500);
    }
    .nm-live-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #22C55E;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
        animation: nmLive 2s ease-out infinite;
    }
    @keyframes nmLive { 70%, 100% { box-shadow: 0 0 0 7px rgba(34, 197, 94, 0); } }
    .nm-side-link {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        padding: 0.7rem 1rem;
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--nm-ink);
        background: #ffffff;
        box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.25);
        transition: transform 0.35s var(--nm-glide), box-shadow 0.35s ease;
    }
    .nm-side-link i { font-size: 0.7rem; transition: transform 0.35s var(--nm-glide); }
    .nm-side-link:hover { color: var(--nm-ink); transform: translateY(-2px); box-shadow: 0 18px 30px -14px rgba(123, 60, 245, 0.85); }
    .nm-side-link:hover i { transform: translateX(4px); }

    /* Live clock */
    .nm-clock { position: relative; width: 148px; height: 148px; margin: 1.15rem auto 1rem; }
    .nm-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
    .nm-clock-track { fill: none; stroke: rgba(31, 39, 184, 0.08); stroke-width: 6; }
    .nm-clock-ring {
        fill: none;
        stroke: url(#nmClockGrad);
        stroke-width: 6;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition: stroke-dashoffset 1s linear;
        filter: drop-shadow(0 0 5px rgba(123, 60, 245, 0.45));
    }
    .nm-clock-ring.nm-wrap { transition: none; }
    .nm-clock-ticks line { stroke: rgba(31, 39, 184, 0.22); stroke-width: 2; stroke-linecap: round; }
    .nm-clock-face {
        position: absolute;
        inset: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background:
            radial-gradient(80% 60% at 30% 20%, rgba(76, 198, 255, 0.28), transparent 70%),
            linear-gradient(160deg, #151F55 0%, #0B1438 100%);
        box-shadow: 0 14px 28px -14px rgba(11, 20, 56, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .nm-clock-time {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.03em;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
        color: #ffffff;
    }
    .nm-clock-date { margin-top: 0.3rem; font-size: 0.7rem; color: rgba(226, 232, 255, 0.7); }
    .nm-side-note { margin: 0 0 1.1rem; font-size: 0.78rem; line-height: 1.55; text-align: center; color: var(--gray-600); }

    /* How-we-work track */
    .nm-steps-list {
        position: relative;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.05rem;
        margin: 1.25rem 0 1.35rem;
        padding: 0 0 0 1.6rem;
    }
    .nm-steps-list::before,
    .nm-steps-list::after {
        content: '';
        position: absolute;
        left: 5px;
        top: 6px;
        bottom: 6px;
        width: 2px;
        border-radius: 2px;
        background: linear-gradient(var(--rc-azure), var(--rc-violet), var(--rc-pink), var(--rc-orange));
    }
    .nm-steps-list::before { opacity: 0.2; }
    .nm-steps-list::after { transform-origin: top; transform: scaleY(0); box-shadow: 0 0 10px rgba(123, 60, 245, 0.6); }
    .nm-steps-list li { position: relative; }
    .nm-step-dot {
        position: absolute;
        left: -1.6rem;
        top: 3px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ffffff;
        border: 2px solid rgba(31, 39, 184, 0.2);
        transition: transform 0.4s var(--nm-glide);
    }
    .nm-steps-list strong { display: block; font-family: var(--font-heading); font-size: 0.92rem; line-height: 1.2; color: var(--gray-900); }
    .nm-steps-list small { display: block; margin-top: 0.15rem; font-size: 0.72rem; color: var(--gray-500); }

    /* ---------------------------------------------------------------
       SERVICES: dark rail, badge, numbered rows, light showcase
    --------------------------------------------------------------- */
    .mega-dropdown .ms-tab-indicator { box-shadow: 0 10px 24px -14px rgba(31, 39, 184, 0.45), 0 0 0 1px rgba(31, 39, 184, 0.07); }
    .mega-dropdown .ms-rail-links .ms-all-link {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.28);
    }
    .mega-dropdown .ms-rail-links .ms-all-link:hover {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.45);
    }
    .mega-dropdown .ms-rail .ms-expert,
    .mega-dropdown .ms-rail .ms-expert:hover {
        color: var(--nm-ink);
        background: #ffffff;
        box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6);
    }
    .mega-dropdown .ms-rail .ms-expert::after { background: radial-gradient(circle, rgba(123, 60, 245, 0.18), transparent 70%); }
    .mega-dropdown .ms-rail .ms-expert-icon { color: #ffffff; background: var(--rc-gradient-brand); }
    .mega-dropdown .ms-rail .ms-expert-text strong { color: var(--nm-ink); }
    .mega-dropdown .ms-rail .ms-expert-text span { color: var(--gray-600); }

    .ms-panel { position: relative; }
    .ms-panel > .ms-panel-head,
    .ms-panel > .ms-cards,
    .ms-panel > .ms-panel-foot { position: relative; z-index: 1; }

    .mega-dropdown .ms-panel-head { display: flex; align-items: center; gap: 1rem; }
    .nm-cat-badge {
        position: relative;
        flex-shrink: 0;
        display: grid;
        place-items: center;
        width: 54px;
        height: 54px;
        border-radius: 16px;
        font-size: 1.25rem;
        color: var(--ms-color);
        background: var(--ms-tint);
    }
    .nm-cat-badge::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 19px;
        padding: 2px;
        background: conic-gradient(from var(--nav-rim-angle), var(--ms-color), transparent 35%, var(--rc-pink) 55%, transparent 80%, var(--ms-color));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    .ms-card-title .nm-num {
        display: block;
        position: absolute;
        top: 0.55rem;
        right: 0.75rem;
        font-family: var(--font-sans);
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        font-variant-numeric: tabular-nums;
        color: var(--ms-color);
        opacity: 0.6;
    }
    .mega-dropdown .ms-card,
    .mega-dropdown .ms-card:hover,
    .mega-dropdown .ms-card:focus-visible { background: transparent; border-color: transparent; box-shadow: none; }
    .mega-dropdown .ms-card::after { display: none; }
    .mega-dropdown .ms-card.is-current { background: var(--ms-tint); }
    .mega-dropdown .ms-cards:not(:has(> :nth-child(5))) .ms-card {
        background: #FAFBFF;
        border: 1px solid rgba(31, 39, 184, 0.07);
    }
    .mega-dropdown .ms-cards:not(:has(> :nth-child(5))) .ms-card:hover { background: transparent; border-color: transparent; }
    .mega-dropdown .ms-cards:not(:has(> :nth-child(5))) .nm-num { top: auto; bottom: 1rem; right: 1.2rem; font-size: 0.7rem; }

    /* Explore banner: light card with a turning spectrum border */
    .mega-dropdown .ms-showcase,
    .mega-dropdown .ms-showcase:hover {
        color: var(--nm-ink);
        background:
            linear-gradient(#ffffff, #ffffff) padding-box,
            conic-gradient(from var(--nav-rim-angle), var(--ms-color), var(--rc-pink), var(--rc-orange), var(--rc-azure), var(--ms-color)) border-box;
        border: 1.5px solid transparent;
        box-shadow: 0 20px 38px -26px color-mix(in srgb, var(--ms-color) 75%, transparent);
    }
    .mega-dropdown .ms-showcase-glow { background: radial-gradient(240px circle at var(--mx) var(--my), var(--ms-tint), transparent 70%); }
    .mega-dropdown .ms-showcase-mark { color: var(--ms-color); opacity: 0.1; }
    .mega-dropdown .ms-showcase-icon { color: var(--ms-color); background: var(--ms-tint); box-shadow: none; }
    .mega-dropdown .ms-showcase-eyebrow { color: var(--gray-500); }
    .mega-dropdown .ms-showcase-text strong { color: var(--nm-ink); }
    .mega-dropdown .ms-showcase-arrow { color: #ffffff; background: var(--rc-gradient-brand); }
}

/* Side cards only where there is room */
@media (min-width: 1280px) {
    .nm-side {
        position: relative;
        display: flex;
        flex-direction: column;
        flex: 0 0 236px;
        padding: 1.5rem 1.35rem 1.35rem;
        border-left: 1px solid rgba(31, 39, 184, 0.08);
        background:
            radial-gradient(80% 22% at 0% 100%, rgba(123, 60, 245, 0.5), transparent 70%),
            radial-gradient(70% 20% at 100% 100%, rgba(255, 61, 154, 0.38), transparent 70%),
            linear-gradient(to top, #0B1438 0px, #151F55 60px, rgba(21, 31, 85, 0.55) 92px, rgba(21, 31, 85, 0) 120px),
            radial-gradient(100% 40% at 100% 0%, rgba(76, 198, 255, 0.2), transparent 65%),
            linear-gradient(180deg, #F4F6FE 0%, #ECEFFB 100%);
        overflow: hidden;
    }
    .nm-side::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--rc-navy), var(--rc-blue), var(--rc-azure), var(--rc-violet), var(--rc-pink), var(--rc-orange));
        background-size: 200% 100%;
        animation: nmFlowSide 6s linear infinite;
    }
}
@media (min-width: 1025px) and (max-width: 1279px) {
    .mega-about { width: min(820px, calc(100vw - 2rem)); }
}

/* Short laptop screens: keep the Services menu inside the viewport */
@media (min-width: 1025px) and (max-height: 860px) {
    .nm-cat-badge { width: 46px; height: 46px; border-radius: 14px; font-size: 1.05rem; }
    .nm-cat-badge::before { border-radius: 17px; }
}
@media (min-width: 1025px) and (max-height: 720px) {
    .nm-cat-badge { display: none; }
}

/* ===================================================================
   MOTION (real mouse pointers, motion allowed)
=================================================================== */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {

    /* Curtain reveal: the panel unrolls from the top edge, where the pointer enters */
    .mega-dropdown {
        transform: translateX(-50%) translateY(10px);
        filter: none;
        clip-path: inset(-24px -90px calc(100% + 24px) -90px round 28px);
        transition:
            opacity 0.2s ease 0.1s,
            transform 0.35s var(--ease-premium) 0.08s,
            clip-path 0.35s cubic-bezier(0.7, 0, 0.3, 1) 0.08s,
            visibility 0s linear 0.45s;
    }
    .has-dropdown:hover .mega-dropdown,
    .has-dropdown:focus-within .mega-dropdown {
        transform: translateX(-50%);
        filter: none;
        clip-path: inset(-24px -90px -160px -90px round 28px);
        transition:
            opacity 0.2s ease,
            transform 0.7s var(--ease-premium),
            clip-path 0.7s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0s;
    }
    .navbar.dd-switch .mega-dropdown { clip-path: inset(-24px -90px -160px -90px round 28px); }

    /* Stage comes alive while the menu is open */
    .has-dropdown:hover .nm-floor { animation: nmFloor 1.6s linear infinite; }
    @keyframes nmFloor { to { background-position: 0 28px, 0 0; } }
    .has-dropdown:hover .nm-sparks i { animation: nmTwinkle 2.8s ease-in-out infinite; }
    .has-dropdown:hover .nm-sparks i:nth-child(2) { animation-delay: 0.5s; }
    .has-dropdown:hover .nm-sparks i:nth-child(3) { animation-delay: 1.1s; }
    .has-dropdown:hover .nm-sparks i:nth-child(4) { animation-delay: 1.6s; }
    .has-dropdown:hover .nm-sparks i:nth-child(5) { animation-delay: 2.1s; }
    .has-dropdown:hover .nm-sparks i:nth-child(6) { animation-delay: 0.8s; }
    @keyframes nmTwinkle { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 0.95; transform: scale(1); } }
    .has-dropdown:hover .nm-marquee-track { animation-play-state: running; }

    /* The light flash across the side panels: on open, then again every 10 seconds */
    .has-dropdown:hover .maf-sheen,
    .has-dropdown:focus-within .maf-sheen,
    .has-dropdown:hover .nm-side::after,
    .has-dropdown:focus-within .nm-side::after { animation: nmSheenLoop 10s var(--ease-premium) 0.15s infinite; }
    @keyframes nmSheenLoop {
        0% { left: -60%; }
        14%, 100% { left: 130%; }
    }
    .has-dropdown:hover .mega-about-feature .maf-bg::after,
    .has-dropdown:hover .ms-rail .maf-bg::after { animation: navRimSpin 12s linear infinite; }

    /* Title: words rise out of a mask one after another */
    .nm-word { overflow: hidden; vertical-align: top; padding: 0 0.04em 0.12em; margin: 0 -0.04em -0.12em; }
    .has-dropdown:hover .mega-about-feature > .maf-title,
    .has-dropdown:focus-within .mega-about-feature > .maf-title { animation: none; }
    .has-dropdown:hover .nm-word > span,
    .has-dropdown:focus-within .nm-word > span {
        animation: nmWordUp 0.85s var(--nm-glide) backwards;
        animation-delay: calc(0.16s + var(--w, 0) * 0.07s);
    }
    @keyframes nmWordUp { from { transform: translateY(110%) rotate(5deg); } }

    /* Canvas: hairlines draw, numbers count in, icons flip on hover */
    .has-dropdown:hover .mega-about-grid::before { animation: nmLineY 0.9s var(--nm-glide) 0.2s backwards; }
    .has-dropdown:hover .mega-about-grid::after { animation: nmLineX 0.9s var(--nm-glide) 0.28s backwards; }
    @keyframes nmLineY { from { transform: scaleY(0); } }
    @keyframes nmLineX { from { transform: scaleX(0); } }
    .has-dropdown:hover .mega-about-card .nm-num { animation: nmNumIn 0.8s var(--nm-glide) backwards; }
    .has-dropdown:hover .mega-about-card:nth-child(1) .nm-num { animation-delay: 0.22s; }
    .has-dropdown:hover .mega-about-card:nth-child(2) .nm-num { animation-delay: 0.3s; }
    .has-dropdown:hover .mega-about-card:nth-child(3) .nm-num { animation-delay: 0.38s; }
    .has-dropdown:hover .mega-about-card:nth-child(4) .nm-num { animation-delay: 0.46s; }
    @keyframes nmNumIn { from { opacity: 0; transform: translateY(14px) scale(0.85); } }
    .mega-dropdown .mega-about-card:hover .mega-about-card-icon i,
    .mega-dropdown .ms-card:hover .ms-card-icon i { animation: nmFlip 0.7s var(--nm-glide); }
    @keyframes nmFlip { from { transform: perspective(200px) rotateY(-180deg) scale(0.8); } }

    /* Side cards rise in; the steps light up one after another */
    .has-dropdown:hover .nm-side > * { animation: navRiseIn 0.7s var(--ease-premium) backwards; }
    .has-dropdown:hover .nm-side > :nth-child(1) { animation-delay: 0.25s; }
    .has-dropdown:hover .nm-side > :nth-child(2) { animation-delay: 0.32s; }
    .has-dropdown:hover .nm-side > :nth-child(3) { animation-delay: 0.39s; }
    .has-dropdown:hover .nm-side > :nth-child(4) { animation-delay: 0.46s; }
    .has-dropdown:hover .nm-clock-ticks { animation: nmSpinIn 1.1s var(--nm-glide) 0.3s backwards; transform-origin: 60px 60px; }
    @keyframes nmSpinIn { from { transform: rotate(-120deg); opacity: 0; } }

    .has-dropdown:hover .nm-steps-list::after { animation: nmStepFill 6s linear infinite; }
    @keyframes nmStepFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
    .has-dropdown:hover .nm-step-dot { animation: nmStepDot 6s linear infinite; animation-delay: calc(var(--s) * 1.5s); }
    .has-dropdown:hover .nm-steps-list strong { animation: nmStepText 6s linear infinite; animation-delay: calc(var(--s) * 1.5s); }
    @keyframes nmStepDot {
        0%, 22% {
            border-color: transparent;
            background: linear-gradient(135deg, var(--rc-blue), var(--rc-pink));
            box-shadow: 0 0 0 4px rgba(123, 60, 245, 0.15), 0 0 12px rgba(123, 60, 245, 0.7);
            transform: scale(1.2);
        }
        30%, 100% { border-color: rgba(31, 39, 184, 0.2); background: #ffffff; box-shadow: none; transform: none; }
    }
    @keyframes nmStepText { 0%, 22% { color: var(--rc-violet); } 30%, 100% { color: var(--gray-900); } }

    /* Services: badge pops in with its ring turning; rows flip their icons on hover */
    .ms-panel.is-active .nm-cat-badge { animation: nmBadgeIn 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s backwards; }
    .nm-cat-badge::before { animation: navRimSpin 4s linear infinite; }
    @keyframes nmBadgeIn { from { opacity: 0; transform: scale(0.5) rotate(-60deg); } }
    .mega-dropdown .ms-panel.is-active .ms-showcase { animation: navRiseIn 0.6s var(--ease-premium) 0.3s backwards, navRimSpin 6s linear infinite; }
    .mega-dropdown .ms-showcase:hover { transform: translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .nm-marquee-track,
    .nm-live-dot,
    .nm-cat-badge::before { animation: none !important; }
    .nm-lens,
    .nm-clock-ring { transition: none !important; }
}

/* ===================================================================
   PHONES & TABLETS: the same light, brand-touched stage on each open section's header
=================================================================== */
@media (max-width: 1024px) {
    .navbar .mega-about-feature,
    .navbar .mm-hero {
        border-color: rgba(31, 39, 184, 0.08);
        background:
            radial-gradient(90% 70% at 100% 0%, rgba(76, 198, 255, 0.2) 0%, transparent 65%),
            radial-gradient(85% 80% at 0% 100%, rgba(123, 60, 245, 0.13) 0%, transparent 65%),
            radial-gradient(70% 70% at 100% 100%, rgba(255, 154, 46, 0.13) 0%, transparent 65%),
            linear-gradient(170deg, #FFFFFF 0%, #F7F8FF 100%);
    }

    .navbar .mega-about-feature .maf-eyebrow,
    .navbar .mm-hero .maf-eyebrow {
        color: #ffffff;
        background: linear-gradient(135deg, #0B1438 0%, #151F55 100%);
        border-color: rgba(11, 20, 56, 0.9);
        box-shadow: none;
    }
    .navbar .mega-about-feature .maf-dot,
    .navbar .mm-hero .maf-dot { background: var(--rc-azure); box-shadow: 0 0 6px rgba(76, 198, 255, 0.9); }

    /* A few sparks drift over the header while the section is open */
    .navbar .mega-about-feature .nm-sparks,
    .navbar .mm-hero .nm-sparks { display: block; position: absolute; inset: 0; pointer-events: none; }
    .navbar .nm-sparks i {
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: var(--rc-azure);
        box-shadow: 0 0 8px 2px rgba(76, 198, 255, 0.6);
        opacity: 0;
    }
    .navbar .nm-sparks i:nth-child(1) { top: 22%; left: 78%; }
    .navbar .nm-sparks i:nth-child(2) { top: 60%; left: 90%; }
    .navbar .nm-sparks i:nth-child(3) { top: 35%; left: 62%; box-shadow: 0 0 8px 2px rgba(255, 61, 154, 0.8); }
    .navbar .nm-sparks i:nth-child(n+4) { display: none; }
}
@media (max-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .navbar .dropdown-open .nm-sparks i { animation: nmTwinkleM 2.6s ease-in-out infinite; }
    .navbar .dropdown-open .nm-sparks i:nth-child(2) { animation-delay: 0.9s; }
    .navbar .dropdown-open .nm-sparks i:nth-child(3) { animation-delay: 1.7s; }
    @keyframes nmTwinkleM { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 0.95; transform: scale(1); } }
    .navbar .dropdown-open .nm-word > span { animation: nmWordUpM 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(0.15s + var(--w, 0) * 0.06s); }
    .navbar .dropdown-open .nm-word { overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
    @keyframes nmWordUpM { from { transform: translateY(110%); } }
}

/* ===================================================================
   BAR LIGHTS: an orbiting beam around the link pill, a flowing spectrum
   line along the bar, a light ring that runs around the CTA, and a
   glowing gradient rim on the sliding hover pill
=================================================================== */
@property --nm-orbit {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.nm-orbit,
.nm-cta-ring { display: none; }

/* Flowing spectrum line on the bar's bottom edge (all screen sizes) */
.nm-bar-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(76, 198, 255, 0) 0%, #4CC6FF 14%, #2D5BFF 26%, #7B3CF5 38%, #FF3D9A 50%, #FF9A2E 62%, rgba(255, 154, 46, 0) 76%, rgba(76, 198, 255, 0) 100%);
    background-size: 200% 100%;
    opacity: 0.7;
    transition: left 0.5s var(--ease-premium), right 0.5s var(--ease-premium), bottom 0.5s var(--ease-premium), opacity 0.3s ease;
}
@media (min-width: 1025px) {
    .navbar.scrolled .nm-bar-line {
        left: calc(max(10px, calc(50% - 664px)) + 22px);
        right: calc(max(10px, calc(50% - 664px)) + 22px);
        bottom: 6px;
    }

    /* Beam orbiting the link pill */
    .nm-orbit {
        display: block;
        position: absolute;
        inset: -1px;
        z-index: 0;
        border-radius: inherit;
        pointer-events: none;
        filter: drop-shadow(0 0 3px rgba(123, 60, 245, 0.7)) drop-shadow(0 0 8px rgba(76, 198, 255, 0.45));
    }
    .nm-orbit > span {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1.5px;
        background: conic-gradient(from var(--nm-orbit),
            transparent 0deg, transparent 240deg,
            rgba(76, 198, 255, 0.9) 290deg, #7B3CF5 325deg, #FF3D9A 348deg, transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0.85;
        transition: opacity 0.4s ease;
    }
    .navbar-nav-container:hover .nm-orbit > span { opacity: 1; }

    /* Light running around the CTA */
    .nm-cta-ring {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 1;
        border-radius: inherit;
        padding: 1.5px;
        pointer-events: none;
        background: conic-gradient(from var(--nm-orbit), transparent 0deg, transparent 260deg, rgba(255, 255, 255, 0.95) 330deg, transparent 360deg);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    }

    /* Hover pill: soft brand glow and a gradient rim */
    .nav-indicator {
        box-shadow: 0 8px 20px -8px rgba(45, 91, 255, 0.4), 0 2px 6px rgba(21, 31, 85, 0.08);
    }
    .nav-indicator::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        padding: 1px;
        background: linear-gradient(120deg, rgba(76, 198, 255, 0.95), rgba(123, 60, 245, 0.75), rgba(255, 61, 154, 0.75));
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
                mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0.75;
    }
}
@media (max-width: 1024px) {
    .navbar.scrolled .nm-bar-line { left: 26px; right: 26px; bottom: 6px; }
}
@media (prefers-reduced-motion: no-preference) {
    .nm-bar-line { animation: nmBarFlow 7s linear infinite; }
    .nm-orbit > span { animation: nmOrbit 7s linear infinite; }
    .nm-cta-ring { animation: nmOrbit 3.2s linear infinite; }
    @keyframes nmBarFlow { to { background-position: -200% 0; } }
    @keyframes nmOrbit { to { --nm-orbit: 360deg; } }
}

/* ===================================================================
   SHORT SCREENS (phones in landscape): give the links the room
=================================================================== */
@media (max-width: 1024px) and (max-height: 500px) {
    .drawer-header { padding: 0.45rem 1.25rem; }
    .drawer-brand img { height: 28px; }
    .drawer-close { width: 36px; height: 36px; font-size: 1rem; }
    .navbar-nav { padding: 0.6rem 1rem 1rem; }
    .navbar .nav-link { min-height: 44px; padding: 0.45rem 0.75rem; }
    .navbar .nav-link-icon { width: 30px; height: 30px; font-size: 0.8rem; }
    .drawer-footer { padding: 0.55rem 1.25rem calc(0.55rem + env(safe-area-inset-bottom)); }
    .drawer-cta { padding: 0.6rem 1rem; font-size: 0.88rem; }
    .drawer-contact { display: none; }
}

/* ===================================================================
   SIDE PANEL THEME
   One solid, rich tone for every side panel (About / Why us stage,
   Services rail, right side cards, phone section headers), set by a
   single variable (Slate Navy). Overrides the earlier light-stage rules above.
=================================================================== */
:root {
    /* Slate Navy */
    --nm-panel:
        radial-gradient(90% 50% at 100% 0%, rgba(76, 198, 255, 0.16) 0%, transparent 62%),
        radial-gradient(80% 50% at 0% 100%, rgba(123, 60, 245, 0.12) 0%, transparent 65%),
        linear-gradient(165deg, #27324F 0%, #1F2944 55%, #19223A 100%);
    --nm-caret: #27324F;
}

@media (min-width: 1025px) {
    .navbar .mega-about-feature,
    .navbar .ms-rail,
    .navbar .nm-side { color: #E6EAFF; background: var(--nm-panel); }
    .navbar .nm-side { border-left: 0; }

    .navbar .mega-about-feature .maf-aurora-blue,
    .navbar .ms-rail .maf-aurora-blue   { background: rgba(76, 198, 255, 0.22); }
    .navbar .mega-about-feature .maf-aurora-green,
    .navbar .ms-rail .maf-aurora-green  { background: rgba(168, 123, 255, 0.24); }
    .navbar .mega-about-feature .maf-aurora-orange,
    .navbar .ms-rail .maf-aurora-orange { background: rgba(255, 154, 46, 0.16); }
    .navbar .mega-about-feature .maf-bg::before,
    .navbar .ms-rail .maf-bg::before { background: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1.4px) 0 0 / 14px 14px; }
    .navbar .mega-about-feature .maf-sheen,
    .navbar .ms-rail .maf-sheen,
    .navbar .nm-side::after {
        background: linear-gradient(100deg, transparent 0%, rgba(76, 198, 255, 0.1) 32%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 61, 154, 0.1) 68%, transparent 100%);
    }

    /* Type and chips */
    .navbar .mega-dropdown .maf-eyebrow {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .navbar .mega-dropdown .maf-emblem { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 0 6px rgba(255, 255, 255, 0.06), 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
    .navbar .mega-dropdown .maf-title,
    .navbar .mega-dropdown .ms-rail-title { color: #ffffff; }
    .navbar .mega-dropdown .maf-title-accent { background: linear-gradient(90deg, #9EE6FF 0%, #D2BBFF 50%, #FFC2DE 100%); -webkit-background-clip: text; background-clip: text; }
    .navbar .mega-dropdown .maf-desc { color: rgba(230, 234, 255, 0.74); }
    .navbar .mega-dropdown .maf-proof li { color: #ffffff; }
    .navbar .mega-dropdown .maf-proof i { background: #ffffff; color: var(--rc-violet); box-shadow: none; }
    .navbar .mega-dropdown .maf-stat { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.14); }
    .navbar .mega-dropdown .maf-stat-value { color: #ffffff; }
    .navbar .mega-dropdown .maf-stat-label { color: rgba(230, 234, 255, 0.65); }

    /* Stage details */
    .navbar .nm-floor {
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
    }
    .navbar .nm-sparks i { background: #ffffff; }
    .navbar .nm-marquee { background: rgba(0, 0, 0, 0.18); border-top-color: rgba(255, 255, 255, 0.08); }
    .navbar .nm-marquee span { color: rgba(230, 234, 255, 0.6); }

    /* Services rail */
    .navbar .mega-dropdown .ms-tab-name { color: rgba(240, 244, 255, 0.86); }
    .navbar .mega-dropdown .ms-tab.is-active .ms-tab-name { color: #ffffff; }
    .navbar .mega-dropdown .ms-tab-icon { background: rgba(255, 255, 255, 0.08); color: color-mix(in srgb, var(--tab-color) 45%, #ffffff); }
    .navbar .mega-dropdown .ms-tab.is-active .ms-tab-icon { background: #ffffff; color: var(--tab-color); }
    .navbar .mega-dropdown .ms-tab-chevron { color: #ffffff; }
    .navbar .mega-dropdown .ms-tab-indicator {
        background: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 14px 30px -18px rgba(0, 0, 0, 0.7);
    }
    .navbar .mega-dropdown .ms-tab-indicator::before { background: #ffffff; box-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }

    /* Side cards */
    .navbar .nm-side-eyebrow { color: rgba(230, 234, 255, 0.65); }
    .navbar .nm-clock-track { stroke: rgba(255, 255, 255, 0.12); }
    .navbar .nm-clock-ticks line { stroke: rgba(255, 255, 255, 0.3); }
    .navbar .nm-clock-face {
        background: rgba(255, 255, 255, 0.06);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
    }
    .navbar .nm-side-note { color: rgba(230, 234, 255, 0.72); }
    .navbar .nm-steps-list::before { opacity: 0.35; }
    .navbar .nm-step-dot { background: #1F2944; border-color: rgba(255, 255, 255, 0.35); }
    .navbar .nm-steps-list strong { color: #ffffff; }
    .navbar .nm-steps-list small { color: rgba(230, 234, 255, 0.6); }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .navbar .has-dropdown:hover .nm-steps-list strong { animation-name: nmStepTextDark; }
    .navbar .has-dropdown:hover .nm-step-dot { animation-name: nmStepDotDark; }
    @keyframes nmStepTextDark { 0%, 22% { color: #9EE6FF; } 30%, 100% { color: #ffffff; } }
    @keyframes nmStepDotDark {
        0%, 22% {
            border-color: transparent;
            background: linear-gradient(135deg, var(--rc-azure), var(--rc-pink));
            box-shadow: 0 0 0 4px rgba(76, 198, 255, 0.18), 0 0 12px rgba(76, 198, 255, 0.8);
            transform: scale(1.2);
        }
        30%, 100% { border-color: rgba(255, 255, 255, 0.35); background: #1F2944; box-shadow: none; transform: none; }
    }
}

/* Phones: the same panel tone on each open section's header */
@media (max-width: 1024px) {
    .navbar .mega-about-feature,
    .navbar .mm-hero { color: #E6EAFF; border-color: rgba(255, 255, 255, 0.08); background: var(--nm-panel); }
    .navbar .mega-about-feature .maf-eyebrow,
    .navbar .mm-hero .maf-eyebrow { color: #ffffff; background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); }
    .navbar .maf-title,
    .navbar .mm-hero-title { color: #ffffff; }
    .navbar .mega-about-feature .maf-title-accent,
    .navbar .mm-hero .maf-title-accent { background: linear-gradient(90deg, #9EE6FF 0%, #D2BBFF 50%, #FFC2DE 100%); -webkit-background-clip: text; background-clip: text; }
    .navbar .mm-hero-meta { color: rgba(230, 234, 255, 0.7); }
    .navbar .nm-sparks i { background: #ffffff; }
}

/* ===================================================================
   SERVICES "EXPLORE" CARD (Slate Navy) + roomier rows for 5–6 services
=================================================================== */
@media (min-width: 1025px) {
    .navbar .mega-dropdown .ms-showcase,
    .navbar .mega-dropdown .ms-showcase:hover {
        gap: 1.1rem;
        padding: 1.1rem 1.2rem 1.1rem 1.25rem;
        border: 0;
        color: #ffffff;
        background:
            radial-gradient(90% 120% at 100% 0%, rgba(76, 198, 255, 0.18), transparent 60%),
            radial-gradient(80% 120% at 0% 100%, rgba(123, 60, 245, 0.16), transparent 60%),
            linear-gradient(165deg, #27324F 0%, #1F2944 55%, #19223A 100%);
        box-shadow: 0 22px 40px -24px rgba(25, 34, 58, 0.9);
    }
    .navbar .mega-dropdown .ms-showcase-mark { display: none; }
    .navbar .mega-dropdown .ms-showcase-glow { background: radial-gradient(240px circle at var(--mx) var(--my), rgba(255, 255, 255, 0.1), transparent 70%); }
    .navbar .mega-dropdown .ms-showcase-icon {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    }
    .navbar .mega-dropdown .ms-showcase-text strong { margin-top: 0; color: #ffffff; }
    .ms-showcase-desc {
        margin-top: 0.2rem;
        font-size: 0.8rem;
        line-height: 1.5;
        color: rgba(230, 234, 255, 0.72);
    }
    .ms-showcase-more {
        margin-top: 0.3rem;
        font-size: 0.66rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: #9EE6FF;
    }
    .ms-showcase-btn {
        position: relative;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.6rem 1.05rem;
        border-radius: var(--radius-full);
        font-family: var(--font-heading);
        font-size: 0.8rem;
        font-weight: 700;
        color: #19223A;
        background: #ffffff;
        box-shadow: 0 10px 20px -12px rgba(0, 0, 0, 0.6);
    }
    .ms-showcase-btn i { font-size: 0.72rem; transition: transform 0.3s var(--ease-premium); }
    .ms-showcase:hover .ms-showcase-btn i { transform: translateX(4px); }

    /* The light flash sweeps across this card too */
    .ms-showcase::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -60%;
        width: 40%;
        transform: skewX(-18deg);
        pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.14), transparent);
    }

    /* Categories with 5–6 services: roomier rows with full descriptions */
    .navbar .mega-dropdown .ms-cards:has(> :nth-child(5)):not(:has(> :nth-child(7))) { gap: 0.6rem 0.9rem; }
    .navbar .mega-dropdown .ms-cards:has(> :nth-child(5)):not(:has(> :nth-child(7))) .ms-card {
        padding: 1.1rem;
        border-radius: 16px;
        border: 1px solid rgba(31, 39, 184, 0.07);
        background: #FAFBFF;
    }
    .navbar .mega-dropdown .ms-cards:has(> :nth-child(5)):not(:has(> :nth-child(7))) .ms-card-desc { -webkit-line-clamp: 3; margin-top: 0.3rem; font-size: 0.8rem; }
    .navbar .mega-dropdown .ms-cards:has(> :nth-child(5)):not(:has(> :nth-child(7))) .ms-card-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 1rem; }
}
@media (min-width: 1025px) and (max-height: 720px) {
    .ms-showcase-desc { display: none; }
}
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .navbar .mega-dropdown .ms-panel.is-active .ms-showcase { animation: navRiseIn 0.6s var(--ease-premium) 0.3s backwards; }
    .navbar .has-dropdown:hover .ms-panel.is-active .ms-showcase::after { animation: nmSheenLoop 10s var(--ease-premium) 0.6s infinite; }
}