/* ═══════════════════════════════════════════════════════════
   GLOBAL FONT SIZING STANDARDIZATION
═══════════════════════════════════════════════════════════ */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(67, 46, 99, 0.78);
}

/* Performance mode for small screens / low-power devices. */
.nl-reduced-effects .cosmic-bg-layer,
.nl-reduced-effects .nm-acc-bg,
.nl-reduced-effects .usp-motion-layer,
.nl-reduced-effects .tools-cosmic-outer,
.nl-reduced-effects .tools-cosmic-bg,
.nl-reduced-effects .guides-cosmic-orbits {
    display: none !important;
}

.nl-reduced-effects .guides-cosmic-card,
.nl-reduced-effects .nm-acc-item {
    animation: none !important;
    transition: none !important;
}

/* Standard font size definitions */
h1, .h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.2; }
h2, .h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); font-weight: 700; line-height: 1.3; }
h3, .h3 { font-size: clamp(1.1rem, 2.5vw, 1.6rem); font-weight: 700; line-height: 1.4; }
h4, .h4 { font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
h5, .h5 { font-size: 1rem; font-weight: 600; line-height: 1.5; }
h6, .h6 { font-size: 0.875rem; font-weight: 600; line-height: 1.6; }

p { font-size: 0.95rem !important; line-height: 1.7; margin-bottom: 1rem; color: rgba(67, 46, 99, 0.78) !important; }
p.text-gray-600, .text-gray-600 { color: rgba(67, 46, 99, 0.78) !important; }
small, .small { font-size: 0.875rem; line-height: 1.6; }
.tiny { font-size: 0.75rem; line-height: 1.5; }

/* Form elements */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.5;
}

label {
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.5;
}

button,
.btn,
a.btn {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 768px) {
  html {
    font-size: 15px;
  }
  
  h1, .h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  h2, .h2 { font-size: clamp(1.2rem, 4vw, 1.8rem); }
  h3, .h3 { font-size: clamp(1rem, 3vw, 1.4rem); }
  
  p { font-size: 0.95rem; }
  label { font-size: 0.9rem; }
  button, .btn, a.btn { font-size: 0.95rem; }
}

@media (max-width: 480px) {
  html {
    font-size: 14px;
  }
  
  h1, .h1 { font-size: clamp(1.3rem, 7vw, 1.8rem); }
  h2, .h2 { font-size: clamp(1rem, 5vw, 1.5rem); }
  h3, .h3 { font-size: clamp(0.9rem, 4vw, 1.2rem); }
  
  p { font-size: 0.9rem; }
  small, .small { font-size: 0.8rem; }
  label { font-size: 0.85rem; }
  button, .btn, a.btn { font-size: 0.9rem; }
}

/* Home page extracted styles */
.nl-section-anim {
        opacity: 1;
        transform: none;
    }

    .nl-motion .nl-section-anim {
        opacity: 1;
        transform: none;
        will-change: transform, opacity;
    }

    .nl-motion .nl-section-anim.is-in[data-anim="left"] {
        animation: nlRevealLeft 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .nl-motion .nl-section-anim.is-in[data-anim="right"] {
        animation: nlRevealRight 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .nl-motion .nl-section-anim.is-in[data-anim="zoom"] {
        animation: nlRevealZoom 0.78s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .nl-motion .nl-section-anim.is-in:not([data-anim]) {
        animation: nlRevealUp 0.78s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    .nl-bg-flow,
    .nl-bg-stars,
    .nl-bg-orbits {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .nl-bg-flow::before {
        content: '';
        position: absolute;
        inset: -20% -15%;
        
        
        
        pointer-events: none;
        z-index: 0;
    }

    .nl-bg-stars::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(circle at 12% 22%, rgba(255, 255, 255, 0.34) 0 1.2px, transparent 1.3px),
            radial-gradient(circle at 84% 18%, rgba(255, 255, 255, 0.26) 0 1.1px, transparent 1.2px),
            radial-gradient(circle at 34% 68%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.1px),
            radial-gradient(circle at 64% 78%, rgba(255, 255, 255, 0.22) 0 1.2px, transparent 1.3px),
            radial-gradient(circle at 92% 62%, rgba(255, 255, 255, 0.2) 0 0.9px, transparent 1px);
        animation: nlStarDrift 24s linear infinite;
        pointer-events: none;
        z-index: 0;
    }

    .nl-bg-orbits::before,
    .nl-bg-orbits::after {
        content: '';
        position: absolute;
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        pointer-events: none;
        z-index: 0;
    }

    .nl-bg-orbits::before {
        width: 420px;
        height: 420px;
        right: -120px;
        top: -120px;
        animation: nlOrbitSpin 26s linear infinite;
    }

    .nl-bg-orbits::after {
        width: 280px;
        height: 280px;
        left: -90px;
        bottom: -90px;
        animation: nlOrbitSpinReverse 20s linear infinite;
    }

    .nl-bg-flow > :not(.absolute),
    .nl-bg-stars > :not(.absolute),
    .nl-bg-orbits > :not(.absolute) {
        
        z-index: 1;
    }

    .nl-parallax {
        will-change: transform;
        transition: transform 0.12s linear;
    }

    .nl-aura-title {
        position: relative;
        display: inline-block;
        isolation: isolate;
    }

    .nl-aura-title::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 54%;
        width: 118%;
        height: 74%;
        transform: translate(-50%, -50%);
        background: radial-gradient(circle, rgba(124, 58, 237, 0.22), rgba(245, 158, 11, 0.14) 45%, transparent 74%);
        filter: blur(22px);
        z-index: -1;
        opacity: 0.9;
        animation: nlAuraPulse 6s ease-in-out infinite;
        pointer-events: none;
    }

    .nl-stagger > * {
        opacity: 1;
        transform: none;
    }

    .nl-motion .nl-stagger > * {
        opacity: 0;
        transform: translateY(20px) scale(0.985);
        transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: var(--stagger-delay, 0ms);
    }

    .nl-motion .nl-section-anim.is-in .nl-stagger > * {
        opacity: 1;
        transform: none;
    }

    .nl-card-tilt {
        transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.45s ease;
        transform-style: preserve-3d;
        will-change: transform;
    }

    .nl-card-tilt:hover {
        transform: translateY(-6px) rotateX(3.8deg) rotateY(-2.6deg);
        box-shadow: 0 20px 40px -24px rgba(15, 23, 42, 0.42);
    }

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

    .nl-runes span {
        position: absolute;
        font-size: clamp(1.2rem, 2.2vw, 2rem);
        font-weight: 700;
        color: rgba(76, 29, 149, 0.14);
        text-shadow: 0 6px 16px rgba(91, 33, 182, 0.12);
        animation: nlRuneFloat 11s ease-in-out infinite;
    }

    .nl-runes span:nth-child(1) { left: 4%; top: 12%; animation-delay: 0s; }
    .nl-runes span:nth-child(2) { left: 18%; top: 74%; animation-delay: -2.5s; }
    .nl-runes span:nth-child(3) { left: 48%; top: 9%; animation-delay: -4.4s; }
    .nl-runes span:nth-child(4) { left: 70%; top: 62%; animation-delay: -1.2s; }
    .nl-runes span:nth-child(5) { left: 90%; top: 18%; animation-delay: -3.7s; }

    @keyframes nlFlowShift {
        0% { transform: translateX(-13%) skewX(-3deg); }
        100% { transform: translateX(9%) skewX(3deg); }
    }

    @keyframes nlStarDrift {
        0% { transform: translateY(0); }
        100% { transform: translateY(-18px); }
    }

    @keyframes nlOrbitSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes nlOrbitSpinReverse {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }

    @keyframes nlAuraPulse {
        0%, 100% { opacity: 0.74; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    }

    @keyframes nlRuneFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-12px) rotate(5deg); }
    }

    @keyframes nlRevealUp {
        0% { opacity: 1; transform: translateY(16px) scale(0.992); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes nlRevealLeft {
        0% { opacity: 1; transform: translateX(-20px) scale(0.992); }
        100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes nlRevealRight {
        0% { opacity: 1; transform: translateX(20px) scale(0.992); }
        100% { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes nlRevealZoom {
        0% { opacity: 1; transform: scale(0.965); }
        100% { opacity: 1; transform: scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .nl-section-anim,
        .nl-parallax,
        .nl-bg-flow::before,
        .nl-bg-stars::before,
        .nl-bg-orbits::before,
        .nl-bg-orbits::after {
            animation: none !important;
            transition: none !important;
            transform: none !important;
            opacity: 1 !important;
        }

        .nl-stagger > * {
            opacity: 1 !important;
            transform: none !important;
        }
    }

    /* --- Hero Design Styles --- */
    .hero-gradient-bg {
        background: radial-gradient(ellipse at 30% 20%, #f0e8fa 0%, #dacef0 100%);
    }

    .hero-gradient-bg,
    #calculator {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .cosmic-bg-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        
        opacity: 1;
        animation: cosmicLayerFloat 14s ease-in-out infinite alternate;
    }

    .cosmic-bg-layer::before {
        content: '';
        position: absolute;
        inset: -25% -20%;
        background:
            conic-gradient(from 0deg, rgba(140, 104, 210, 0.18), rgba(255, 255, 255, 0) 26%, rgba(118, 76, 186, 0.22) 54%, rgba(255, 255, 255, 0) 80%, rgba(140, 104, 210, 0.18));
        filter: blur(14px);
        opacity: 0.85;
        animation: cosmicBgSpin 26s linear infinite;
    }

    .cosmic-bg-layer::after {
        content: '';
        position: absolute;
        inset: -8% -10%;
        background-image:
            radial-gradient(circle at 8% 18%, rgba(255, 255, 255, 0.55) 0 1.3px, transparent 1.4px),
            radial-gradient(circle at 24% 72%, rgba(138, 100, 206, 0.5) 0 1.5px, transparent 1.6px),
            radial-gradient(circle at 48% 26%, rgba(255, 255, 255, 0.48) 0 1.2px, transparent 1.3px),
            radial-gradient(circle at 66% 64%, rgba(129, 84, 194, 0.52) 0 1.6px, transparent 1.7px),
            radial-gradient(circle at 84% 34%, rgba(255, 255, 255, 0.5) 0 1.3px, transparent 1.4px),
            radial-gradient(circle at 92% 78%, rgba(129, 84, 194, 0.45) 0 1.2px, transparent 1.3px);
        opacity: 0.95;
        animation: cosmicStarfieldDrift 4.8s linear infinite;
    }

    .cosmic-bg-layer > * {
        position: absolute;
        pointer-events: none;
        display: block;
    }

    .cosmic-orbit {
        top: 50%;
        left: 50%;
        border-radius: 9999px;
        border: 1px solid rgba(129, 84, 194, 0.3);
        transform: translate(-50%, -50%);
        animation: cosmicOrbitSpin linear infinite;
        will-change: transform;
    }

    .cosmic-orbit.o1 { width: 76vmin; height: 76vmin; animation-duration: 24s; }
    .cosmic-orbit.o2 { width: 52vmin; height: 52vmin; animation-duration: 18s; animation-direction: reverse; }
    .cosmic-orbit.o3 { width: 30vmin; height: 30vmin; animation-duration: 12s; }

    .cosmic-planet {
        position: absolute;
        border-radius: 9999px;
        border: 1px solid rgba(255, 255, 255, 0.42);
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(149, 108, 210, 0.24));
        box-shadow: 0 0 24px rgba(124, 84, 187, 0.18);
        animation: cosmicPlanetPulse 5.8s ease-in-out infinite alternate;
    }

    .cosmic-orbit.o1 .cosmic-planet { width: 56px; height: 56px; top: -28px; left: 52%; --planet-x: -50%; }
    .cosmic-orbit.o2 .cosmic-planet { width: 40px; height: 40px; top: -20px; left: 24%; --planet-x: -50%; animation-delay: -1.8s; }
    .cosmic-orbit.o3 .cosmic-planet { width: 28px; height: 28px; top: -14px; left: 72%; --planet-x: -50%; animation-delay: -3.1s; }

    .cosmic-sun {
        top: 16%;
        right: 13%;
        width: 84px;
        height: 84px;
        border-radius: 9999px;
        background: radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.96), rgba(171, 130, 226, 0.64) 55%, rgba(136, 88, 198, 0.22));
        box-shadow: 0 0 36px rgba(142, 100, 207, 0.3);
        animation: cosmicSunPulse 6.4s ease-in-out infinite;
    }

    .cosmic-star {
        color: rgba(121, 78, 182, 0.46);
        font-size: 1rem;
        animation: cosmicStarFloat 10s ease-in-out infinite;
    }

    .cosmic-star.s1 { top: 16%; left: 10%; animation-delay: 0s; }
    .cosmic-star.s2 { top: 36%; right: 10%; font-size: 0.9rem; animation-delay: -2.4s; }
    .cosmic-star.s3 { bottom: 24%; left: 16%; font-size: 1.2rem; animation-delay: -4.1s; }
    .cosmic-star.s4 { bottom: 14%; right: 22%; font-size: 0.95rem; animation-delay: -1.4s; }

    .cosmic-comet {
        width: 140px;
        height: 2px;
        border-radius: 9999px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95), rgba(155, 118, 218, 0));
        box-shadow: 0 0 18px rgba(255, 255, 255, 0.65);
        opacity: 0.72;
        animation: cosmicCometArc 4.6s ease-in-out infinite;
    }

    .cosmic-comet.c1 { top: 18%; left: -8%; animation-delay: 0s; }
    .cosmic-comet.c2 { top: 74%; right: -10%; animation-delay: -3.4s; }

    .cosmic-num-wheel {
        top: 50%;
        left: 50%;
        width: 88vmin;
        height: 88vmin;
        transform: translate(-50%, -50%);
        animation: cosmicNumSpin 34s linear infinite;
        opacity: 0.48;
        will-change: transform;
    }

    .cosmic-num-wheel span {
        position: absolute;
        width: 2rem;
        height: 2rem;
        border-radius: 9999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        font-weight: 800;
        color: rgba(98, 58, 153, 0.72);
        background: rgba(255, 255, 255, 0.34);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 6px 14px rgba(121, 84, 176, 0.14);
        animation: cosmicNumCounter 34s linear infinite;
    }

    .cosmic-num-wheel span:nth-child(1) { top: 2%; left: 49%; }
    .cosmic-num-wheel span:nth-child(2) { top: 14%; left: 70%; }
    .cosmic-num-wheel span:nth-child(3) { top: 31%; left: 84%; }
    .cosmic-num-wheel span:nth-child(4) { top: 54%; left: 86%; }
    .cosmic-num-wheel span:nth-child(5) { top: 77%; left: 71%; }
    .cosmic-num-wheel span:nth-child(6) { top: 88%; left: 48%; }
    .cosmic-num-wheel span:nth-child(7) { top: 77%; left: 24%; }
    .cosmic-num-wheel span:nth-child(8) { top: 54%; left: 8%; }
    .cosmic-num-wheel span:nth-child(9) { top: 31%; left: 10%; }

    .hero-gradient-bg > :not(.cosmic-bg-layer):not(.absolute),
    #calculator > :not(.cosmic-bg-layer):not(.absolute) {
        
        z-index: 2;
    }

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

    @keyframes cosmicBgSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes cosmicLayerFloat {
        0% { transform: translateY(0); }
        100% { transform: translateY(-12px); }
    }

    @keyframes cosmicStarfieldDrift {
        0% { transform: translate3d(-4%, 0, 0); }
        100% { transform: translate3d(4%, -5.5%, 0); }
    }

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

    @keyframes cosmicNumCounter {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(-360deg); }
    }

    @keyframes cosmicPlanetPulse {
        0% { opacity: 0.6; transform: translateX(var(--planet-x, -50%)) scale(0.94); }
        100% { opacity: 1; transform: translateX(var(--planet-x, -50%)) scale(1.08); }
    }

    @keyframes cosmicSunPulse {
        0%, 100% { transform: scale(0.95); opacity: 0.82; }
        50% { transform: scale(1.07); opacity: 1; }
    }

    @keyframes cosmicStarFloat {
        0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.5; }
        50% { transform: translateY(-12px) rotate(22deg); opacity: 0.95; }
    }

    @keyframes cosmicCometArc {
        0% { transform: translate3d(0, 0, 0) rotate(-8deg); opacity: 0.45; }
        45% { opacity: 0.95; }
        100% { transform: translate3d(115vw, -18vh, 0) rotate(-8deg); opacity: 0.45; }
    }

    #calculator .cosmic-bg-layer,
    #calculator .cosmic-bg-layer * {
        animation-play-state: running !important;
    }

    @media (max-width: 640px) {
        /* #calculator .cosmic-bg-layer {
            display: none;
        } */

        #calculator {
            background: radial-gradient(ellipse at 30% 20%, #f4eefb 0%, #e8dcf5 100%) !important;
        }

        .cosmic-sun {
            width: 58px;
            height: 58px;
            top: 11%;
            right: 8%;
        }

        .cosmic-num-wheel span {
            width: 1.62rem;
            height: 1.62rem;
            font-size: 0.74rem;
        }

        .cosmic-star {
            font-size: 0.82rem;
        }
    }

    /* Keep calculator cosmic layer animated for clear visual effect. */

    .hero-section {
        animation: none;
    }

    @keyframes heroFadeSlide {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .hero-badge {
        display: inline-block;
        background: rgba(255, 255, 255, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        padding: 0.2rem 1.2rem;
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #5a4a6a;
        border: 1px solid rgba(255, 255, 255, 0.3);
        margin-bottom: 0.8rem;
    }

    .calc-fade-in {
        opacity: 1;
        animation: heroFadeSlide 0.62s cubic-bezier(0.15, 0.75, 0.3, 1.2) both;
    }

    .calc-fade-in.d1 { animation-delay: 0.05s; }
    .calc-fade-in.d2 { animation-delay: 0.14s; }
    .calc-fade-in.d3 { animation-delay: 0.22s; }
    .calc-fade-in.d4 { animation-delay: 0.3s; }

    .calc-entry {
        animation: heroFadeSlide 0.82s cubic-bezier(0.15, 0.75, 0.3, 1.2) both;
    }

    @keyframes calcSectionReveal {
        0% {
            opacity: 0;
            transform: translateY(28px) scale(0.988);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes calcItemReveal {
        0% {
            opacity: 0;
            transform: translateY(24px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    #calculator.calc-entry {
        animation: calcSectionReveal 0.9s cubic-bezier(0.15, 0.75, 0.3, 1.2) both !important;
    }

    #calculator.calc-entry .calc-fade-in {
        opacity: 0;
        animation-name: calcItemReveal !important;
        animation-duration: 0.72s !important;
        animation-fill-mode: both !important;
        animation-timing-function: cubic-bezier(0.2, 0.75, 0.2, 1) !important;
    }

    /* ═══════════════════════════════════════════════════════════
       CONSISTENT SECTION TITLES
    ═══════════════════════════════════════════════════════════ */
    .section-title {
        font-size: clamp(2rem, 5.5vw, 2.8rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        background: linear-gradient(145deg, #5B3C8F, #8A5BA3);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        margin-bottom: 1rem;
    }

    .section-subtitle {
        font-size: clamp(0.95rem, 1.8vw, 1.15rem);
        color: #4a3b5c;
        line-height: 1.7;
        font-weight: 400;
        opacity: 0.9;
    }

    @media (max-width: 640px) {
        .section-title {
            font-size: clamp(1.6rem, 8vw, 2rem);
            line-height: 1.16;
            margin-bottom: 0.75rem;
        }

        .section-subtitle {
            font-size: 0.95rem;
            line-height: 1.62;
        }
    }

    /* ═══════════════════════════════════════════════════════════
       CONSISTENT BODY TEXT COLORS
    ═══════════════════════════════════════════════════════════ */
    p {
        color: #3d3d46;
    }

    .hero-title {
        font-size: clamp(2rem, 5.5vw, 2.8rem);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.02em;
        background: linear-gradient(145deg, #6a4a8a, #9a7ab0);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 0.2rem;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 600;
        background: linear-gradient(145deg, #7a5a9a, #a07ab0);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.2rem;
    }

    .hero-description {
        font-size: clamp(0.85rem, 1.8vw, 1rem);
        line-height: 1.7;
        color: #2d221c;
        opacity: 0.85;
        margin-bottom: 2rem;
        font-weight: 450;
        max-width: 90%;
    }

    .hero-pills {
        display: flex;
        flex-wrap: wrap;
        gap: 0.6rem 0.8rem;
        margin-bottom: 2.2rem;
    }

    .hero-pill {
        padding: 0.4rem 1.3rem;
        border-radius: 60px;
        font-size: clamp(0.7rem, 1.5vw, 0.85rem);
        font-weight: 600;
        border: none;
        transition: all 0.3s cubic-bezier(0.15, 0.75, 0.3, 1.2);
        cursor: default;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
        letter-spacing: 0.01em;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
    }

    @keyframes heroPillUp {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .hero-pill:nth-child(1) {
        background: linear-gradient(135deg, #f093fb, #f5576c);
        color: #4a0e2b;
    }
    .hero-pill:nth-child(2) {
        background: linear-gradient(135deg, #4facfe, #00f2fe);
        color: #003366;
    }
    .hero-pill:nth-child(3) {
        background: linear-gradient(135deg, #43e97b, #38f9d7);
        color: #004d33;
    }
    .hero-pill:nth-child(4) {
        background: linear-gradient(135deg, #fa709a, #fee140);
        color: #5a3a0a;
    }
    .hero-pill:nth-child(5) {
        background: linear-gradient(135deg, #a18cd1, #fbc2eb);
        color: #3d2e5e;
    }
    .hero-pill:nth-child(6) {
        background: linear-gradient(135deg, #f6d365, #fda085);
        color: #5a2e1a;
    }

    .hero-pill:hover {
        transform: translateY(-4px) scale(1.03);
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15);
    }

    .hero-pill::before {
        content: '✦';
        font-size: 0.5rem;
        opacity: 0.6;
        transition: transform 0.3s;
    }

    .hero-pill:hover::before {
        transform: rotate(90deg) scale(1.2);
    }

    .hero-cta {
        display: inline-block;
        padding: 0.8rem 2.6rem;
        font-size: clamp(0.9rem, 2vw, 1.05rem);
        font-weight: 700;
        color: #fff;
        background: linear-gradient(145deg, #7a5a9a, #a07ab0);
        border: none;
        border-radius: 60px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.15, 0.75, 0.3, 1.2);
        box-shadow: 0 8px 24px -8px rgba(122, 90, 154, 0.4);
        letter-spacing: 0.02em;
        font-family: 'Inter', sans-serif;
        position: relative;
        overflow: hidden;
        width: auto;
        text-decoration: none;
        display: inline-block;
    }

    .hero-cta::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.5s;
        transform: scale(0.8);
    }

    .hero-cta:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 32px -10px rgba(122, 90, 154, 0.5);
        background: linear-gradient(145deg, #8a6aaa, #b08ac0);
    }

    .hero-cta:hover::after {
        opacity: 1;
        transform: scale(1);
    }

    .hero-cta:active {
        transform: scale(0.96);
    }

    @media (max-width: 600px) {
        .hero-description {
            max-width: 100%;
        }
        .hero-pills {
            gap: 0.5rem;
        }
        .hero-pill {
            padding: 0.3rem 1rem;
            font-size: 0.7rem;
        }
        .hero-cta {
            width: 100%;
            padding: 0.7rem 1.5rem;
        }
    }

    @media (max-width: 400px) {
        .hero-title {
            font-size: 1.6rem;
        }
        .hero-badge {
            font-size: 0.6rem;
            padding: 0.15rem 0.8rem;
        }
        .hero-pill {
            font-size: 0.6rem;
            padding: 0.2rem 0.8rem;
        }
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       NEW USP SECTION — LIGHT ETHEREAL DESIGN
    ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    .usp-section {
        min-height: auto;
        padding: 4rem 1.5rem;
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: radial-gradient(circle at 16% 20%, rgba(193, 134, 241, 0.18), rgba(193, 134, 241, 0) 44%),
                    radial-gradient(circle at 84% 26%, rgba(168, 124, 236, 0.14), rgba(168, 124, 236, 0) 40%),
                    linear-gradient(140deg, #f4eefb 0%, #efe4fa 42%, #f3ede5 100%);
        color: #2d1f3d;
    }

    .usp-motion-layer {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }

    .usp-motion-layer .usp-ring,
    .usp-motion-layer .usp-orb,
    .usp-motion-layer .usp-spark {
        position: absolute;
        display: block;
    }

    .usp-motion-layer .usp-ring {
        border-radius: 9999px;
        border: 1px solid rgba(124, 84, 194, 0.2);
        animation: uspRingSpin linear infinite;
    }

    .usp-motion-layer .usp-ring.r1 {
        width: 420px;
        height: 420px;
        top: -180px;
        right: -140px;
        animation-duration: 34s;
    }

    .usp-motion-layer .usp-ring.r2 {
        width: 300px;
        height: 300px;
        bottom: -130px;
        left: -100px;
        animation-duration: 26s;
        animation-direction: reverse;
    }

    .usp-motion-layer .usp-orb {
        border-radius: 9999px;
        filter: blur(1px);
        animation: uspOrbFloat ease-in-out infinite;
    }

    .usp-motion-layer .usp-orb.o1 {
        width: 86px;
        height: 86px;
        top: 18%;
        left: 8%;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(166, 120, 232, 0.28));
        animation-duration: 8s;
    }

    .usp-motion-layer .usp-orb.o2 {
        width: 56px;
        height: 56px;
        top: 64%;
        right: 11%;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.74), rgba(243, 183, 101, 0.24));
        animation-duration: 6.5s;
        animation-delay: -2.1s;
    }

    .usp-motion-layer .usp-spark {
        color: rgba(122, 74, 154, 0.48);
        text-shadow: 0 0 12px rgba(122, 74, 154, 0.3);
        animation: uspSparkDrift ease-in-out infinite;
    }

    .usp-motion-layer .usp-spark.s1 { top: 16%; left: 22%; font-size: 1rem; animation-duration: 5.8s; }
    .usp-motion-layer .usp-spark.s2 { top: 30%; right: 18%; font-size: 1.15rem; animation-duration: 7.2s; animation-delay: -1.7s; }
    .usp-motion-layer .usp-spark.s3 { bottom: 20%; left: 14%; font-size: 0.95rem; animation-duration: 6.4s; animation-delay: -2.4s; }

    .usp-content {
        position: relative;
        z-index: 1;
        max-width: 1280px;
        width: 100%;
        margin: 0 auto;
    }

    @keyframes uspRingSpin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes uspOrbFloat {
        0%, 100% { transform: translateY(0) scale(1); }
        50% { transform: translateY(-14px) scale(1.06); }
    }

    @keyframes uspSparkDrift {
        0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; }
        50% { transform: translateY(-11px) rotate(16deg); opacity: 1; }
    }

    .usp-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 4rem auto;
    }

    .usp-badge {
        display: inline-block;
        background: rgba(122, 74, 154, 0.10);
        backdrop-filter: blur(4px);
        border: 1px solid rgba(122, 74, 154, 0.15);
        padding: 0.35rem 1.2rem;
        border-radius: 60px;
        font-size: 0.7rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #6d3a8a;
        margin-bottom: 1.2rem;
    }

    .usp-badge i {
        color: #f3b765;
        margin-right: 6px;
    }

    .usp-title {
        font-family: 'Inter', sans-serif;
        font-weight: 800;
        font-size: clamp(2.2rem, 6vw, 3.6rem);
        line-height: 1.1;
        background: linear-gradient(145deg, #4a2c6d, #7a4a9a);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-bottom: 1.2rem;
        letter-spacing: -0.02em;
    }

    .usp-subtitle {
        font-size: clamp(1rem, 2vw, 1.2rem);
        color: #4a3b5c;
        line-height: 1.7;
        font-weight: 400;
        max-width: 700px;
        margin: 0 auto;
        opacity: 0.9;
    }

    .usp-subtitle strong {
        color: #7a4a9a;
        font-weight: 600;
    }

    .usp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.8rem;
        margin-bottom: 3.5rem;
    }

    .usp-card {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 2rem;
        padding: 2rem 1.8rem;
        transition: all 0.4s cubic-bezier(0.15, 0.75, 0.3, 1.2);
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 10px 40px -10px rgba(90, 60, 130, 0.08);
    }

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

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

    .usp-card:hover {
        transform: translateY(-8px) scale(1.01);
        border-color: rgba(122, 74, 154, 0.15);
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 25px 50px -12px rgba(90, 60, 130, 0.15);
    }

    .usp-grid .usp-card:nth-child(1) { background: linear-gradient(145deg, #f4ecff, #edf5ff) !important; }
    .usp-grid .usp-card:nth-child(2) { background: linear-gradient(145deg, #edf6ff, #f4efff) !important; }
    .usp-grid .usp-card:nth-child(3) { background: linear-gradient(145deg, #effff4, #eef2ff) !important; }
    .usp-grid .usp-card:nth-child(4) { background: linear-gradient(145deg, #fff4e8, #f1ecff) !important; }
    .usp-grid .usp-card:nth-child(5) { background: linear-gradient(145deg, #f2eeff, #fff0f8) !important; }
    .usp-grid .usp-card:nth-child(6) { background: linear-gradient(145deg, #ecf8ff, #f0fff0) !important; }
    .usp-grid .usp-card:nth-child(7) { background: linear-gradient(145deg, #ffe8e0, #fff5eb) !important; }
    .usp-grid .usp-card:nth-child(8) { background: linear-gradient(145deg, #e8f5f0, #f0f7ff) !important; }
    .usp-grid .usp-card:nth-child(9) { background: linear-gradient(145deg, #fffaf0, #f0f0ff) !important; }

    .usp-card-header {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1rem;
        width: 100%;
    }

    .usp-card-icon {
        font-size: 1.6rem;
        color: #7a4a9a;
        background: rgba(122, 74, 154, 0.06);
        padding: 0.5rem;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border: 1px solid rgba(122, 74, 154, 0.04);
        flex-shrink: 0;
        width: 3.2rem;
        height: 3.2rem;
    }

    .usp-card-icon svg {
        width: 1.6rem;
        height: 1.6rem;
        display: block;
    }

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

    .usp-card-title {
        font-size: 1.3rem;
        font-weight: 700;
        color: #2d1f3d;
        letter-spacing: -0.01em;
        margin: 0;
        flex: 1;
    }

    .usp-card-desc {
        font-size: 0.95rem;
        line-height: 1.7;
        color: #4a3b5c;
        font-weight: 400;
        flex: 1;
        margin-bottom: 0.5rem;
    }

    .usp-card-desc strong {
        color: #7a4a9a;
        font-weight: 600;
    }

    .usp-card-line {
        width: 30px;
        height: 2px;
        background: linear-gradient(90deg, #7a4a9a, transparent);
        margin-top: 0.5rem;
        border-radius: 4px;
        transition: all 0.4s ease;
    }

    .usp-card:hover .usp-card-line {
        width: 50px;
        background: linear-gradient(90deg, #f3b765, transparent);
    }

    .usp-cta {
        text-align: center;
        margin-top: 1rem;
    }

    .usp-btn {
        display: inline-block;
        padding: 1rem 3.2rem;
        font-family: 'Inter', sans-serif;
        font-size: 1.1rem;
        font-weight: 700;
        color: #1f112d;
        background: linear-gradient(145deg, #f3b765, #e89a4a);
        border: none;
        border-radius: 60px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.15, 0.75, 0.3, 1.2);
        box-shadow: 0 8px 30px -6px rgba(243, 183, 101, 0.3);
        letter-spacing: 0.02em;
        position: relative;
        overflow: hidden;
        text-decoration: none;
        display: inline-block;
    }

    .usp-btn::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
        opacity: 0;
        transition: opacity 0.5s ease;
        transform: scale(0.8);
    }

    .usp-btn:hover {
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 16px 40px -8px rgba(243, 183, 101, 0.45);
        background: linear-gradient(145deg, #fcc47a, #f0a850);
    }

    .usp-btn:hover::after {
        opacity: 1;
        transform: scale(1);
    }

    .usp-btn:active {
        transform: scale(0.96);
    }

    @media (max-width: 992px) {
        .usp-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }
    }

    @media (max-width: 640px) {
        .usp-section {
            padding: 2.5rem 0.8rem;
        }
        .usp-motion-layer .usp-ring.r1 {
            width: 280px;
            height: 280px;
            right: -110px;
            top: -120px;
        }
        .usp-motion-layer .usp-ring.r2 {
            width: 210px;
            height: 210px;
            left: -90px;
            bottom: -90px;
        }
        .usp-motion-layer .usp-orb.o1 {
            width: 62px;
            height: 62px;
            left: 5%;
        }
        .usp-motion-layer .usp-orb.o2 {
            width: 44px;
            height: 44px;
            right: 6%;
        }
        .usp-motion-layer .usp-spark {
            font-size: 0.82rem !important;
        }
        .usp-grid {
            grid-template-columns: 1fr;
            gap: 1.2rem;
        }
        .usp-card {
            padding: 1.6rem 1.4rem;
            border-radius: 1.6rem;
        }
        .usp-card-header {
            gap: 0.8rem;
        }
        .usp-card-icon {
            width: 2.8rem;
            height: 2.8rem;
            font-size: 1.4rem;
        }
        .usp-card-title {
            font-size: 1.15rem;
        }
        .usp-card-desc {
            font-size: 0.85rem;
        }
        .usp-btn {
            width: 100%;
            justify-content: center;
            text-align: center;
            padding: 0.9rem 1.5rem;
            font-size: 1rem;
        }
        .usp-header {
            margin-bottom: 2.5rem;
        }
        .usp-title {
            font-size: 2rem;
        }
        .usp-subtitle {
            font-size: 0.95rem;
        }
    }

    @media (max-width: 400px) {
        .usp-card {
            padding: 1.2rem 1rem;
            border-radius: 1.2rem;
        }
        .usp-card-header {
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .usp-card-icon {
            width: 2.4rem;
            height: 2.4rem;
            font-size: 1.2rem;
        }
    }

    /* Trust Strip Section */
    .trust-strip {
        background: linear-gradient(135deg, #f5f3ff 0%, #f0f8ff 100%);
        padding: 3rem 2rem;
        margin: 2rem 0;
        border-radius: 1.5rem;
    }

    .trust-strip h2 {
        font-size: clamp(1.5rem, 3vw, 2rem);
        font-weight: 700;
        color: rgba(67, 46, 99, 0.78);
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .trust-strip ul {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
        padding: 0;
        margin: 0;
    }

    .trust-strip li {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        color: rgba(67, 46, 99, 0.78);
        font-size: 1rem;
        line-height: 1.6;
    }

    .trust-strip li::before {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        background: rgba(122, 74, 154, 0.12);
        color: #7a4a9a;
        font-weight: 700;
        border-radius: 50%;
        flex-shrink: 0;
    }

    @media (max-width: 480px) {
        .hide-on-mobile {
            display: none;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .usp-motion-layer .usp-ring,
        .usp-motion-layer .usp-orb,
        .usp-motion-layer .usp-spark {
            animation: none !important;
        }
    }

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

        .nm-acc-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .nm-acc-number-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 92vmin;
            height: 92vmin;
            transform: translate(-50%, -50%);
            animation: nmAccNumberOrbit 96s linear infinite;
            opacity: 0.44;
        }

        .nm-acc-number-orbit span {
            position: absolute;
            width: 2.4rem;
            height: 2.4rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.05rem;
            font-weight: 800;
            color: rgba(92, 58, 138, 0.78);
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.42);
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
            box-shadow: 0 10px 22px rgba(118, 78, 174, 0.1);
            animation: nmAccNumberCounter 96s linear infinite;
        }

        .nm-acc-number-orbit span:nth-child(1) { top: 1%; left: 49%; }
        .nm-acc-number-orbit span:nth-child(2) { top: 12%; left: 72%; }
        .nm-acc-number-orbit span:nth-child(3) { top: 31%; left: 86%; }
        .nm-acc-number-orbit span:nth-child(4) { top: 56%; left: 86%; }
        .nm-acc-number-orbit span:nth-child(5) { top: 78%; left: 70%; }
        .nm-acc-number-orbit span:nth-child(6) { top: 88%; left: 47%; }
        .nm-acc-number-orbit span:nth-child(7) { top: 77%; left: 24%; }
        .nm-acc-number-orbit span:nth-child(8) { top: 55%; left: 8%; }
        .nm-acc-number-orbit span:nth-child(9) { top: 30%; left: 10%; }

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

        .nm-acc-planet {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            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.12);
            animation: nmAccPulse 6s ease-in-out infinite alternate;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .nm-acc-planet-num {
            color: rgba(79, 41, 128, 0.85);
            font-weight: 800;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.45);
            animation: nmAccNumSpin 7s linear infinite;
            line-height: 1;
        }

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

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

        .nm-acc-head {
            margin-bottom: 1.45rem;
        }

        .nm-acc-head p {
            display: flex;
            align-items: center;
            gap: 0.45rem;
            font-size: 1.02rem;
            color: rgba(67, 46, 99, 0.78);
        }

        .nm-acc-head p .dot { color: rgba(126, 89, 176, 0.84); }

        .nm-acc-divider {
            width: 56px;
            border-top: 2px solid rgba(170, 136, 214, 0.48);
            margin-top: 0.6rem;
        }

        .nm-accordion {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.62rem;
            justify-content: flex-start;
            padding: 0.1rem 0.5rem 1rem;
            scroll-behavior: smooth;
            overflow-x: auto;
            contain: paint;
            scrollbar-width: none;
            -ms-overflow-style: none;
            touch-action: pan-x;
        }

        @media (min-width: 900px) {
            .nm-accordion {
                justify-content: flex-start;
                padding: 0.1rem 0.5rem 1rem;
            }
        }

        .nm-carousel-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            justify-content: space-between;
            flex-wrap: nowrap;
        }

        @media (max-width: 899px) {
            .nm-carousel-container {
                justify-content: center;
            }
        }

        .nm-carousel-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background: rgba(122, 74, 154, 0.1);
            border: 1px solid rgba(122, 74, 154, 0.2);
            color: #7a4a9a;
            cursor: pointer;
            transition: all 0.3s ease;
            flex-shrink: 0;
        }

        .nm-carousel-btn svg {
            width: 1.1rem;
            height: 1.1rem;
            stroke-width: 2.5;
        }

        .nm-carousel-btn:hover {
            background: rgba(122, 74, 154, 0.2);
            border-color: rgba(122, 74, 154, 0.35);
            transform: scale(1.08);
        }

        @media (max-width: 899px) {
            .nm-carousel-btn {
                display: none;
            }
        }

        .nm-accordion::-webkit-scrollbar { display: none; }

        .nm-acc-item {
            position: relative;
            flex: 0 0 140px;
            min-height: 390px;
            height: 390px;
            border-radius: 1.8rem;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 24px -10px rgba(78, 45, 120, 0.14);
            background-size: cover;
            background-position: center;
            transition: flex-basis 1.8s cubic-bezier(0.22, 1, 0.36, 1), min-width 1.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease, flex 1.8s cubic-bezier(0.22, 1, 0.36, 1);
            cursor: pointer;
            text-decoration: none;
            color: #fff;
            will-change: flex-basis, min-width, flex;
            touch-action: pan-x;
        }

        .nm-acc-item:hover {
            /* Pause transition on hover */
            transition: none;
        }

        .nm-acc-item.touch-paused {
            /* Pause transition on touch */
            transition: none;
        }

        @media (max-width: 899px) {
            .nm-acc-item {
                transition: flex-basis 2.2s cubic-bezier(0.22, 1, 0.36, 1), min-width 2.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease, flex 2.2s cubic-bezier(0.22, 1, 0.36, 1);
                touch-action: pan-x;
            }
        }

        .nm-acc-item::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            border-radius: inherit;
            background: linear-gradient(180deg, rgba(10, 5, 20, 0.16) 0%, rgba(10, 5, 20, 0.56) 42%, rgba(10, 5, 20, 0.86) 100%);
            transition: background .35s ease;
        }

        .nm-acc-item:hover::before {
            background: linear-gradient(180deg, rgba(10, 5, 20, 0.1) 0%, rgba(10, 5, 20, 0.5) 42%, rgba(10, 5, 20, 0.78) 100%);
        }

        .nm-acc-item.is-active {
            flex: 1 1 300px;
            min-width: 250px;
            height: 390px;
            box-shadow: 0 18px 42px -16px rgba(88, 48, 140, 0.34);
            border-color: rgba(255, 255, 255, 0.52);
        }

        @media (max-width: 899px) {
            .nm-acc-item.is-active {
                min-width: 280px;
                flex: 0 0 280px;
            }
        }

        .nm-acc-item > * {
            position: relative;
            z-index: 1;
        }

        .nm-acc-headline {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            letter-spacing: 0.01em;
            gap: 0.65rem;
            min-height: auto;
            padding: 0.92rem 1rem;
            transition: all .35s ease;
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        }

        .nm-acc-item.is-active .nm-acc-headline {
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            gap: 0.65rem;
            min-height: auto;
            padding: 0.92rem 1rem;
        }

        .nm-acc-num {
            font-size: 1.35rem;
            font-weight: 700;
            opacity: 0.9;
        }

        .nm-acc-item.is-active .nm-acc-num {
            font-size: 1.95rem;
            opacity: 1;
            line-height: 1;
        }

        .nm-acc-title h3 {
            font-size: 0.84rem;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            line-height: 1.2;
        }

        .nm-acc-item.is-active .nm-acc-title h3 {
            font-size: 1.15rem;
            letter-spacing: 0.02em;
        }

        .nm-acc-sub {
            display: none;
            font-size: 0.74rem;
            opacity: 0.9;
            margin-top: 0.08rem;
        }

        .nm-acc-item.is-active .nm-acc-sub {
            display: block;
        }

        .nm-acc-caret {
            font-size: 0.78rem;
            opacity: 0.66;
            margin-top: 0.2rem;
            transition: transform .3s ease;
        }

        .nm-acc-item.is-active .nm-acc-caret {
            margin-left: auto;
            margin-top: 0;
            transform: rotate(180deg);
            opacity: 0.95;
        }

        .nm-acc-content {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            padding: 0 1rem;
            transition: max-height .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .3s ease, padding .3s ease;
        }

        .nm-acc-item.is-active .nm-acc-content {
            max-height: 360px;
            opacity: 1;
            padding: 0.1rem 1rem 1rem;
            overflow-y: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .nm-acc-item.is-active .nm-acc-content::-webkit-scrollbar { display: none; }

        .nm-acc-desc {
            font-size: 0.92rem;
            line-height: 1.52;
            margin-bottom: 0.74rem;
            text-shadow: 0 2px 14px rgba(0, 0, 0, 0.44);
        }

        .nm-acc-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.34rem;
            margin-bottom: 0.76rem;
        }

        .nm-acc-tags span {
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.24);
            padding: 0.12rem 0.72rem;
            font-size: 0.66rem;
            font-weight: 600;
            letter-spacing: 0.03em;
            text-transform: uppercase;
        }

        .nm-acc-link {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.8rem;
            font-weight: 700;
            border-bottom: 2px solid rgba(255, 255, 255, 0.45);
            padding-bottom: 2px;
        }

        .nm-acc-link span:last-child {
            transition: transform .2s ease;
        }

        .nm-acc-link:hover span:last-child {
            transform: translateX(4px);
        }

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

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

        @keyframes nmAccNumSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

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

        @keyframes nmAccNumberCounter {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(-360deg); }
        }

        @media (max-width: 820px) {
            .nm-acc-item {
                flex-basis: 68px;
                min-height: 430px;
                height: 430px;
            }

            .nm-acc-item.is-active {
                min-width: 180px;
                height: 430px;
            }
        }

        @media (max-width: 600px) {
            .nm-acc-item {
                flex-basis: 56px;
                min-height: 420px;
                height: 420px;
                border-radius: 1.35rem;
            }

            .nm-acc-item.is-active {
                min-width: 140px;
                flex: 0 0 140px;
                height: 420px;
                scroll-margin-left: 0.5rem;
            }

            .nm-acc-item.is-active .nm-acc-content {
                padding: 0.05rem 0.74rem 0.78rem;
            }

            .nm-acc-desc {
                font-size: 0.76rem;
            }

            .nm-acc-title h3 {
                font-size: 0.62rem;
            }

            .nm-acc-item.is-active .nm-acc-title h3 {
                font-size: 0.82rem;
            }
        }

        @media (max-width: 480px) {
            .nm-acc-item {
                flex-basis: 52px;
                min-height: 280px;
                height: 290px;
                border-radius: 1.2rem;
            }

            .nm-acc-item.is-active {
                min-width: 130px;
                flex: 0 0 130px;
                height: 290px;
                scroll-margin-left: 1rem;
                scroll-margin-right: 1rem;
            }

            .nm-acc-item.is-active .nm-acc-content {
                max-height: 260px;
                padding: 0 0.6rem 0.6rem;
            }

            .nm-acc-desc {
                font-size: 0.72rem;
            }

            .nm-acc-title h3 {
                font-size: 0.58rem;
            }

            .nm-acc-item.is-active .nm-acc-title h3 {
                font-size: 0.75rem;
            }

            .nm-acc-headline {
                padding: 0.8rem 0.8rem;
            }

            .nm-acc-num {
                font-size: 1.2rem;
            }

            .nm-acc-item.is-active .nm-acc-num {
                font-size: 1.7rem;
            }
        }

        @media (max-width: 380px) {
            .nm-acc-item {
                flex-basis: 48px;
                min-height: 260px;
                height: 270px;
            }

            .nm-acc-item.is-active {
                min-width: 120px;
                flex: 0 0 120px;
                height: 270px;
            }

            .nm-acc-item.is-active .nm-acc-content {
                max-height: 240px;
            }

            .nm-acc-headline {
                padding: 0.7rem 0.7rem;
            }
        }

            .nm-acc-item,
            .nm-acc-headline,
            .nm-acc-content,
            .nm-acc-caret,
            .nm-acc-link span:last-child {
                transition: none !important;
            }
        }

.nl-what-wrap {
            position: relative;
            overflow: hidden;
            padding: 2.3rem 1rem;
            background: radial-gradient(ellipse at 30% 40%, #e8def5 0%, #d0c0e6 70%, #b8a6d4 100%);
            isolation: isolate;
        }

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

        .nl-what-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 9999px;
            transform: translate(-50%, -50%);
            animation: nlWhatSpin linear infinite;
        }

        .nl-what-planet {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: radial-gradient(circle at 28% 28%, rgba(240, 225, 255, 0.9), rgba(160, 115, 220, 0.28));
            box-shadow: 0 0 44px rgba(160, 120, 210, 0.24), 0 0 74px rgba(140, 100, 200, 0.12);
            animation: nlWhatPulse 6s ease-in-out infinite alternate;
        }

        .nl-what-orbit.o1 { width: 78vmin; height: 78vmin; animation-duration: 38s; }
        .nl-what-orbit.o1 .nl-what-planet { width: 74px; height: 74px; top: -37px; left: 50%; transform: translateX(-50%); }

        .nl-what-orbit.o2 { width: 54vmin; height: 54vmin; animation-duration: 46s; animation-direction: reverse; }
        .nl-what-orbit.o2 .nl-what-planet { width: 54px; height: 54px; top: -27px; left: 20%; transform: translateX(-50%); animation-delay: -2s; }

        .nl-what-orbit.o3 { width: 32vmin; height: 32vmin; animation-duration: 28s; }
        .nl-what-orbit.o3 .nl-what-planet { width: 40px; height: 40px; top: -20px; left: 68%; transform: translateX(-50%); animation-delay: -4s; }

        .nl-what-orbit.o4 { width: 18vmin; height: 18vmin; animation-duration: 22s; animation-direction: reverse; }
        .nl-what-orbit.o4 .nl-what-planet { width: 24px; height: 24px; top: -12px; left: 42%; transform: translateX(-50%); animation-delay: -1s; }

        .nl-what-dust {
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
            background: rgba(200, 180, 230, 0.1);
            animation: nlWhatDust 42s linear infinite alternate;
        }

        .nl-what-d1 {
            width: 300px;
            height: 300px;
            top: 8%;
            left: -6%;
            animation-duration: 50s;
        }

        .nl-what-d2 {
            width: 410px;
            height: 410px;
            bottom: -12%;
            right: -8%;
            background: rgba(180, 150, 220, 0.08);
            animation-duration: 60s;
            animation-delay: -10s;
        }

        .nl-what-card {
            position: relative;
            z-index: 2;
            width: min(100%, 1280px);
            max-width: none;
            box-sizing: border-box;
            margin: 0 auto;
            border-radius: 2.2rem;
            padding: 1.5rem 1.45rem 1.8rem;
            
            animation: nlWhatFloatIn 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
        }

        .nl-shared-card-width {
            width: min(1280px, calc(100vw - 2rem));
            max-width: none !important;
            box-sizing: border-box;
            margin-left: auto;
            margin-right: auto;
        }

        .nl-what-badges {
            display: flex;
            flex-wrap: wrap;
            gap: 0.62rem;
            margin-bottom: 1.15rem;
        }

        .nl-what-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.42rem;
            padding: 0.42rem 0.92rem;
            border-radius: 9999px;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.78);
            color: #47395f;
            font-size: 0.9rem;
            font-weight: 600;
        }

        .nl-what-badge i {
            width: 1rem;
            height: 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 9999px;
            font-style: normal;
            font-size: 0.67rem;
            line-height: 1;
            font-weight: 700;
            color: #ffffff;
            background: linear-gradient(135deg, #8f61c5, #6f45ab);
            box-shadow: 0 2px 6px rgba(111, 69, 171, 0.28);
        }

        .nl-what-title {
            font-size: clamp(1.7rem, 2.5vw, 2.55rem);
            line-height: 1.1;
            letter-spacing: -0.01em;
            color: #3c245f;
            font-weight: 800;
            margin-bottom: 0.26rem;
        }

        .nl-what-sub {
            color: #4a3b5c;
            font-size: clamp(0.95rem, 1.8vw, 1.15rem);
            font-weight: 400;
            opacity: 0.9;
            margin-bottom: 1.15rem;
        }

        .nl-what-desc {
            border-radius: 1.75rem;
            border: 1px solid rgba(255, 255, 255, 0.56);
            background: rgba(255, 255, 255, 0.38);
            padding: 1.35rem 1.35rem;
            box-shadow: 0 8px 20px rgba(90, 50, 130, 0.06);
        }

        .nl-what-desc p {
            /* max-width: 860px; */
            color: #2e1e45;
            line-height: 1.7;
            font-size: 1.04rem;
        }

        .nl-what-desc strong {
            color: #43226c;
            font-weight: 700;
        }

        .nl-what-hl {
            border-radius: 9999px;
            padding: 0.08rem 0.38rem;
            background: linear-gradient(120deg, rgba(206, 178, 245, 0.32) 0%, rgba(206, 178, 245, 0.08) 80%);
            font-weight: 600;
            color: #4b2b77;
        }

        .nl-what-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.95rem;
            margin-top: 1.2rem;
        }

        .nl-what-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            border-radius: 9999px;
            padding: 0.62rem 1.25rem;
            font-weight: 700;
            color: #3d285e;
            background: rgba(255, 255, 255, 0.74);
            border: 1px solid rgba(255, 255, 255, 0.82);
            transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
        }

        .nl-what-link:hover {
            transform: translateY(-2px);
            background: rgba(255, 255, 255, 0.94);
            box-shadow: 0 16px 30px -14px rgba(92, 52, 148, 0.38);
        }

        .nl-what-foot {
            color: rgba(89, 62, 124, 0.72);
            font-size: 0.9rem;
        }

        .nl-what-divider {
            width: 50px;
            border-top: 1px solid rgba(126, 89, 176, 0.32);
            margin-top: 1.28rem;
        }

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

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

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

        @keyframes nlWhatFloatIn {
            0% { opacity: 0; transform: translateY(24px) scale(0.97); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }

        @media (max-width: 900px) {
            .nl-what-wrap {
                padding: 1.55rem 0.72rem;
            }

            .nl-what-card {
                border-radius: 1.7rem;
                padding: 1.15rem 0.95rem 1.25rem;
            }

            .nl-what-badges {
                gap: 0.5rem;
            }

            .nl-what-badge {
                font-size: 0.8rem;
                padding: 0.34rem 0.72rem;
            }

            .nl-what-sub {
                font-size: 0.95rem;
            }

            .nl-what-desc {
                border-radius: 1.25rem;
                padding: 1rem;
            }

            .nl-what-desc p {
                font-size: 0.96rem;
            }

            .nl-what-row {
                flex-direction: column;
                align-items: flex-start;
            }

            .nl-what-link {
                width: 100%;
                justify-content: center;
            }

            .nl-what-orbit.o1 .nl-what-planet { width: 52px; height: 52px; top: -26px; }
            .nl-what-orbit.o2 .nl-what-planet { width: 40px; height: 40px; top: -20px; }
            .nl-what-orbit.o3 .nl-what-planet { width: 30px; height: 30px; top: -15px; }
            .nl-what-orbit.o4 .nl-what-planet { width: 20px; height: 20px; top: -10px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .nl-what-orbit,
            .nl-what-planet,
            .nl-what-dust,
            .nl-what-card {
                animation: none !important;
            }

            .nl-what-link {
                transition: none !important;
            }
        }

#tools {
            position: relative;
            overflow: visible;
            isolation: isolate;
            background:
                radial-gradient(circle at 16% 20%, rgba(193, 134, 241, 0.18), rgba(193, 134, 241, 0) 44%),
                radial-gradient(circle at 84% 26%, rgba(168, 124, 236, 0.14), rgba(168, 124, 236, 0) 40%),
                linear-gradient(140deg, #f4eefb 0%, #efe4fa 42%, #f3ede5 100%);
        }

        #tools::before,
        #tools::after {
            content: '';
            position: absolute;
            pointer-events: none;
            z-index: 0;
        }

        #tools::before {
            inset: -1.2rem 0;
            background:
                radial-gradient(circle at 22% 24%, rgba(139, 59, 191, 0.2), rgba(139, 59, 191, 0) 38%),
                radial-gradient(circle at 76% 68%, rgba(176, 106, 217, 0.22), rgba(176, 106, 217, 0) 42%);
            animation: toolsSectionAura 13s ease-in-out infinite alternate;
        }

        #tools::after {
            inset: -1rem 0;
            background-image:
                radial-gradient(circle at 12% 22%, rgba(141, 76, 197, 0.26) 0 1.2px, transparent 1.3px),
                radial-gradient(circle at 86% 36%, rgba(141, 76, 197, 0.22) 0 1.2px, transparent 1.3px),
                radial-gradient(circle at 42% 82%, rgba(141, 76, 197, 0.2) 0 1px, transparent 1.1px),
                radial-gradient(circle at 68% 86%, rgba(141, 76, 197, 0.18) 0 0.9px, transparent 1px);
            animation: toolsSectionStars 17s linear infinite;
            opacity: 0.64;
        }

        #tools.nl-bg-flow::before {
            content: none;
        }

        .tools-cosmic-outer {
            position: absolute;
            inset: -3.5rem -0.5rem;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }

        .tools-cosmic-center-glow {
            position: absolute;
            left: 50%;
            top: 8%;
            width: min(72vw, 1020px);
            height: 78%;
            transform: translateX(-50%);
            pointer-events: none;
            opacity: 0.9;
            border-radius: 9999px;
            filter: blur(0.5px);
            background:
                radial-gradient(circle at 50% 24%, rgba(173, 126, 230, 0.34), rgba(173, 126, 230, 0) 62%),
                radial-gradient(circle at 50% 78%, rgba(139, 59, 191, 0.28), rgba(139, 59, 191, 0) 64%);
            animation: toolsSidePulse 11s ease-in-out infinite;
        }

        .tools-cosmic-center-stars {
            position: absolute;
            left: 50%;
            top: 12%;
            width: min(62vw, 860px);
            height: 70%;
            transform: translateX(-50%);
            pointer-events: none;
            opacity: 0.95;
            background-image:
                radial-gradient(circle at 14% 20%, rgba(141, 76, 197, 0.44) 0 1.5px, transparent 1.6px),
                radial-gradient(circle at 32% 68%, rgba(141, 76, 197, 0.38) 0 1.3px, transparent 1.4px),
                radial-gradient(circle at 68% 36%, rgba(141, 76, 197, 0.42) 0 1.4px, transparent 1.5px),
                radial-gradient(circle at 86% 76%, rgba(141, 76, 197, 0.34) 0 1.2px, transparent 1.3px);
            animation: toolsSideStars 13s linear infinite;
        }

        .tools-cosmic-outer-star {
            position: absolute;
            color: rgba(141, 76, 197, 0.34);
            font-size: 1.7rem;
            animation: toolsOuterStarDrift 18s ease-in-out infinite;
        }

        .tools-cosmic-outer-star.s1 { top: 10%; left: 1.4%; animation-delay: 0s; }
        .tools-cosmic-outer-star.s2 { top: 24%; right: 2.3%; animation-delay: 2.5s; font-size: 1.25rem; }
        .tools-cosmic-outer-star.s3 { bottom: 22%; left: 4.8%; animation-delay: 1.4s; font-size: 2.2rem; }
        .tools-cosmic-outer-star.s4 { bottom: 10%; right: 6.4%; animation-delay: 4.2s; font-size: 1.45rem; }

        .tools-cosmic-outer-ring {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(139, 59, 191, 0.13);
            animation: toolsOuterRingSpin 36s linear infinite;
        }

        .tools-cosmic-outer-ring.r1 {
            width: 430px;
            height: 430px;
            right: -190px;
            top: -150px;
        }

        .tools-cosmic-outer-ring.r2 {
            width: 300px;
            height: 300px;
            left: -130px;
            bottom: -150px;
            animation-direction: reverse;
            animation-duration: 30s;
        }

        .tools-cosmic-outer-orb {
            position: absolute;
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(176, 106, 217, 0.34), rgba(176, 106, 217, 0));
            filter: blur(1px);
            animation: toolsOuterOrbFloat 16s ease-in-out infinite;
        }

        .tools-cosmic-outer-orb.o1 {
            width: 240px;
            height: 240px;
            top: 40%;
            right: -56px;
            animation-delay: 0s;
        }

        .tools-cosmic-outer-orb.o2 {
            width: 190px;
            height: 190px;
            bottom: 4%;
            left: -44px;
            animation-delay: 3.6s;
        }

        @keyframes toolsOuterStarDrift {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.52; }
            50% { transform: translateY(-26px) rotate(42deg); opacity: 1; }
        }

        @keyframes toolsOuterRingSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes toolsOuterOrbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.48; }
            50% { transform: translate(20px, -24px) scale(1.12); opacity: 0.88; }
        }

        @keyframes toolsSectionAura {
            0% { transform: translate3d(-10px, 0, 0) scale(1); opacity: 0.68; }
            100% { transform: translate3d(10px, -8px, 0) scale(1.05); opacity: 1; }
        }

        @keyframes toolsSectionStars {
            0% { transform: translateY(0); }
            100% { transform: translateY(-24px); }
        }

        @keyframes toolsSidePulse {
            0%, 100% { transform: translateY(0) scale(1); opacity: 0.72; }
            50% { transform: translateY(-14px) scale(1.09); opacity: 1; }
        }

        @keyframes toolsSideStars {
            0% { transform: translateY(0); }
            100% { transform: translateY(-28px); }
        }

        .tools-cosmic-wrap {
            position: relative;
            width: min(100%, 1280px);
            max-width: none;
            box-sizing: border-box;
            margin: 0 auto;
            border-radius: 3.4rem;
            padding: 2.45rem 2rem;
            
            backdrop-filter: blur(6px);
            
            overflow: hidden;
            isolation: isolate;
        }

        .tools-cosmic-bg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0;
        }

        .tools-cosmic-orb {
            position: absolute;
            border-radius: 9999px;
            pointer-events: none;
            background: radial-gradient(circle, rgba(139, 59, 191, 0.12), rgba(139, 59, 191, 0));
            filter: blur(2px);
            animation: toolsOrbFloat 16s ease-in-out infinite;
        }

        .tools-cosmic-orb.o1 { width: 320px; height: 320px; top: 24%; right: 8%; animation-delay: 0s; }
        .tools-cosmic-orb.o2 { width: 220px; height: 220px; bottom: 8%; left: 12%; animation-delay: 4s; }

        .tools-cosmic-star {
            position: absolute;
            color: rgba(139, 59, 191, 0.14);
            animation: toolsStarFloat 14s ease-in-out infinite;
            font-weight: 700;
        }

        .tools-cosmic-star:nth-child(1) { top: 8%; left: 2%; font-size: 1.4rem; animation-delay: 0s; }
        .tools-cosmic-star:nth-child(2) { top: 15%; right: 8%; font-size: 1rem; animation-delay: 2s; }
        .tools-cosmic-star:nth-child(3) { top: 50%; left: 1.5%; font-size: 2rem; animation-delay: 4s; }
        .tools-cosmic-star:nth-child(4) { bottom: 13%; right: 6%; font-size: 1.6rem; animation-delay: 3s; }

        .tools-cosmic-ring {
            position: absolute;
            border-radius: 9999px;
            border: 1px solid rgba(139, 59, 191, 0.08);
            animation: toolsRingSpin 36s linear infinite;
        }

        .tools-cosmic-ring.r1 { width: 420px; height: 420px; right: -110px; top: -130px; }
        .tools-cosmic-ring.r2 { width: 320px; height: 320px; left: -90px; bottom: -120px; animation-direction: reverse; animation-duration: 30s; }

        .tools-cosmic-num {
            position: absolute;
            font-size: 3.2rem;
            font-weight: 700;
            color: rgba(139, 59, 191, 0.05);
            animation: toolsNumFloat 18s ease-in-out infinite;
            pointer-events: none;
        }

        .tools-cosmic-num.n1 { top: 14%; left: 18%; animation-delay: 0s; }
        .tools-cosmic-num.n3 { bottom: 16%; right: 24%; animation-delay: 3s; }
        .tools-cosmic-num.n9 { top: 52%; right: 34%; animation-delay: 5s; font-size: 2.4rem; }

        .tools-cosmic-content {
            position: relative;
            z-index: 1;
        }

        .tools-cosmic-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 0.8rem;
            flex-wrap: wrap;
            margin-bottom: 2rem;
        }

        .tools-cosmic-headline {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .tools-cosmic-header small {
            color: #4a2a5f;
            font-size: 0.94rem;
            font-weight: 500;
            background: rgba(255, 255, 255, 0.6);
            padding: 0.35rem 1rem;
            border-radius: 9999px;
            border: 1px solid rgba(255, 255, 255, 0.8);
        }

        .tools-cosmic-mini-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            color: #5b2d86;
            font-size: 0.86rem;
            font-weight: 600;
            background: rgba(139, 59, 191, 0.12);
            border: 1px solid rgba(139, 59, 191, 0.18);
            border-radius: 9999px;
            padding: 0.26rem 0.92rem;
        }

        .tools-cosmic-featured {
            background: linear-gradient(145deg, rgba(255, 240, 248, 0.94), rgba(240, 225, 255, 0.88));
            border: 1px solid rgba(255, 255, 255, 0.9);
            border-radius: 2.55rem;
            padding: 2rem 2.2rem;
            box-shadow: 0 10px 28px rgba(106, 13, 173, 0.08);
            margin-bottom: 2.2rem;
        }

        .tools-cosmic-featured-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1rem;
        }

        .tools-cosmic-title {
            display: flex;
            align-items: center;
            gap: 0.95rem;
        }

        .tools-cosmic-icon {
            width: 66px;
            height: 66px;
            border-radius: 9999px;
            background: rgba(139, 59, 191, 0.22);
            border: 2px solid rgba(139, 59, 191, 0.35);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.9rem;
            color: #4a1a6b;
            box-shadow: 0 4px 16px rgba(139, 59, 191, 0.18);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .tools-cosmic-featured:hover .tools-cosmic-icon {
            transform: scale(1.04);
            box-shadow: 0 8px 24px rgba(139, 59, 191, 0.28);
        }

        .tools-cosmic-title h3 {
            color: #1f112b;
            font-size: clamp(1.55rem, 2.2vw, 2.05rem);
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .tools-cosmic-title p {
            color: #4a2a5f;
            font-size: 0.98rem;
            background: rgba(255, 255, 255, 0.44);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 9999px;
            padding: 0.4rem 0.9rem;
            width: fit-content;
            max-width: 100%;
            line-height: 1.45;
            display: grid;
            grid-template-columns: 0.75rem 1fr;
            column-gap: 0.45rem;
            align-items: start;
            text-wrap: pretty;
        }

        .tools-cosmic-featured-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.2rem;
            margin-top: 2rem;
            padding: 1.8rem;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 1.8rem;
        }

        .tools-cosmic-featured-column {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .tools-cosmic-featured-label {
            font-size: 0.78rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #6a4a8a;
            opacity: 0.8;
        }

        .tools-cosmic-featured-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .tools-cosmic-featured-column li {
            font-size: 0.95rem;
            color: #3a2050;
            line-height: 1.4;
            font-weight: 500;
        }

        .tools-cosmic-title p::before {
            content: '•';
            font-weight: 900;
            line-height: 1.35;
        }

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

        .tools-cosmic-cta:hover {
            transform: translateY(-1px) scale(1.02);
            box-shadow: 0 12px 30px rgba(106, 13, 173, 0.32);
        }

        .tools-cosmic-grid {
            display: grid;
            grid-template-columns: repeat(4, minmax(120px, 1fr));
            gap: 0.8rem 1.2rem;
            background: rgba(255, 255, 255, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 1.5rem;
            padding: 1rem 1.1rem;
        }

        .tools-cosmic-col strong {
            display: block;
            font-size: 0.73rem;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #7a5a8f;
            margin-bottom: 0.35rem;
        }

        .tools-cosmic-col span {
            display: grid;
            grid-template-columns: 0.72rem 1fr;
            column-gap: 0.4rem;
            font-size: 0.93rem;
            color: #2d1a3a;
            font-weight: 500;
            margin: 0.15rem 0;
            line-height: 1.4;
            align-items: start;
        }

        .tools-cosmic-col span::before {
            content: '•';
            line-height: 1.35;
            font-weight: 800;
            color: #3c1e57;
        }

        .tools-cosmic-marquee {
            overflow: hidden;
            border-radius: 2rem;
            position: relative;
        }

        .tools-cosmic-marquee::before,
        .tools-cosmic-marquee::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 46px;
            z-index: 2;
            pointer-events: none;
        }

        .tools-cosmic-marquee {
            overflow: hidden;
            border-radius: 2rem;
            position: relative;
            -webkit-user-select: none;
            user-select: none;
        }
        
        .tools-cosmic-marquee::before {
            left: 0;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0));
        }

        .tools-cosmic-marquee::after {
            right: 0;
            background: linear-gradient(to left, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0));
        }

        .tools-cosmic-track {
            display: flex;
            gap: 1.45rem;
            width: max-content;
            animation: toolsMarquee 28s linear infinite;
            padding: 0.2rem 0;
        }

        /* Only pause on hover for real mouse devices — mobile tap would stick */
        @media (hover: hover) and (pointer: fine) {
            .tools-cosmic-track:hover { animation-play-state: paused !important; }
        }
        .tools-cosmic-track.is-paused { animation-play-state: paused !important; }

        .tools-cosmic-card {
            width: 272px;
            min-width: 272px;
            flex-shrink: 0;
            border-radius: 1.9rem;
            padding: 1.45rem 1.35rem;
            border: 1px solid rgba(255, 255, 255, 0.8);
            box-shadow: 0 6px 18px rgba(106, 13, 173, 0.08);
            display: flex;
            flex-direction: column;
            gap: 0.55rem;
            background: rgba(255, 255, 255, 0.66);
            position: relative;
            overflow: hidden;
            transition: transform 0.28s ease, box-shadow 0.28s ease;
            word-break: break-word;
            overflow-wrap: break-word;
        }

        .tools-cosmic-card::after {
            content: '';
            position: absolute;
            top: -45%;
            right: -40%;
            width: 140px;
            height: 140px;
            border-radius: 9999px;
            background: radial-gradient(circle, rgba(201, 140, 255, 0.15), rgba(201, 140, 255, 0));
            pointer-events: none;
            transition: transform 0.35s ease, opacity 0.35s ease;
            opacity: 0.5;
        }

        .tools-cosmic-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 16px 34px rgba(106, 13, 173, 0.14);
        }

        .tools-cosmic-card:hover::after {
            transform: scale(1.4);
            opacity: 0.85;
        }

        .tools-cosmic-card-head {
            display: flex;
            align-items: center;
            gap: 0.65rem;
        }

        .tools-cosmic-card-icon {
            width: 2.55rem;
            height: 2.55rem;
            border-radius: 9999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: #4a1a6b;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.7);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .tools-cosmic-card.c1 { background: linear-gradient(135deg, rgba(255, 230, 240, 0.88), rgba(255, 240, 248, 0.74)); }
        .tools-cosmic-card.c2 { background: linear-gradient(135deg, rgba(230, 240, 255, 0.88), rgba(240, 248, 255, 0.74)); }
        .tools-cosmic-card.c3 { background: linear-gradient(135deg, rgba(235, 255, 235, 0.88), rgba(245, 255, 245, 0.74)); }
        .tools-cosmic-card.c4 { background: linear-gradient(135deg, rgba(255, 245, 225, 0.88), rgba(255, 250, 235, 0.74)); }
        .tools-cosmic-card.c5 { background: linear-gradient(135deg, rgba(240, 230, 255, 0.88), rgba(248, 240, 255, 0.74)); }
        .tools-cosmic-card.c6 { background: linear-gradient(135deg, rgba(255, 235, 245, 0.88), rgba(255, 245, 250, 0.74)); }
        .tools-cosmic-card.c7 { background: linear-gradient(135deg, rgba(255, 240, 220, 0.88), rgba(255, 248, 235, 0.74)); }
        .tools-cosmic-card.c8 { background: linear-gradient(135deg, rgba(220, 240, 255, 0.88), rgba(235, 248, 255, 0.74)); }
        .tools-cosmic-card.c9 { background: linear-gradient(135deg, rgba(245, 230, 255, 0.88), rgba(250, 240, 255, 0.74)); }
        .tools-cosmic-card.c10 { background: linear-gradient(135deg, rgba(255, 245, 230, 0.88), rgba(255, 250, 240, 0.74)); }

        .tools-cosmic-card h4 {
            color: #1f112b;
            font-size: 1.08rem;
            font-weight: 700;
            line-height: 1.2;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            max-width: 100%;
        }

        .tools-cosmic-card p {
            color: #3f2a4f;
            font-size: 0.92rem;
            line-height: 1.5;
            opacity: 0.84;
            min-height: 58px;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
            max-width: 100%;
            white-space: normal;
        }

        .tools-cosmic-tags {
            display: flex;
            gap: 0.45rem;
            flex-wrap: wrap;
            margin-bottom: 0.2rem;
        }

        .tools-cosmic-tags span {
            background: rgba(255, 255, 255, 0.62);
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 9999px;
            font-size: 0.72rem;
            color: #4a1a6b;
            font-weight: 600;
            padding: 0.12rem 0.66rem;
        }

        .tools-cosmic-link {
            display: none;
        }

        .tools-cosmic-footer {
            margin-top: 2.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.8rem;
            color: #3f2a4f;
            border-top: 1px solid rgba(139, 59, 191, 0.08);
            padding-top: 1.35rem;
            font-size: 0.92rem;
            flex-wrap: wrap;
        }

        .tools-cosmic-footer-pills {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }

        .tools-cosmic-footer-pills span {
            background: rgba(255, 255, 255, 0.64);
            border: 1px solid rgba(255, 255, 255, 0.85);
            border-radius: 9999px;
            padding: 0.2rem 0.9rem;
        }

        @keyframes toolsStarFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.32; }
            50% { transform: translateY(-22px) rotate(50deg); opacity: 0.76; }
        }

        @keyframes toolsRingSpin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes toolsNumFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-16px) rotate(8deg); }
        }

        @keyframes toolsOrbFloat {
            0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.34; }
            50% { transform: translate(20px, -24px) scale(1.08); opacity: 0.58; }
        }

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

        @media (max-width: 900px) {
            .tools-cosmic-featured { padding: 1.45rem; border-radius: 2rem; }
            .tools-cosmic-grid { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
            .tools-cosmic-card { width: 232px; }
        }

        @media (max-width: 640px) {
            .tools-cosmic-wrap { border-radius: 2.1rem; padding: 1.25rem 0.95rem; }
            .tools-cosmic-featured {
                padding: 1.1rem 0.9rem;
                border-radius: 1.35rem;
                margin-bottom: 1.3rem;
            }
            .tools-cosmic-featured-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 0.9rem;
                padding: 1.1rem;
                border-radius: 1.1rem;
                margin-top: 1rem;
            }
            .tools-cosmic-featured-label { font-size: 0.72rem; }
            .tools-cosmic-featured-column li { font-size: 0.88rem; }
            .tools-cosmic-featured-head {
                align-items: stretch;
                gap: 0.8rem;
                margin-bottom: 0.75rem;
            }
            .tools-cosmic-title {
                align-items: flex-start;
                gap: 0.6rem;
                width: 100%;
            }
            .tools-cosmic-icon {
                width: 52px;
                height: 52px;
                font-size: 1.4rem;
            }
            .tools-cosmic-title h3 {
                font-size: 1.08rem;
                line-height: 1.2;
                margin-bottom: 0.3rem;
            }
            .tools-cosmic-grid { grid-template-columns: 1fr; }
            .tools-cosmic-grid {
                padding: 0.8rem 0.85rem;
                border-radius: 1.1rem;
                gap: 0.52rem;
            }
            .tools-cosmic-col strong {
                margin-bottom: 0.2rem;
                font-size: 0.68rem;
            }
            .tools-cosmic-cta {
                width: 100%;
                padding: 0.72rem 1rem;
                font-size: 0.95rem;
            }
            .tools-cosmic-card {
                width: min(82vw, 230px);
                padding: 1.1rem 0.95rem;
            }
            .tools-cosmic-card-head {
                align-items: center;
                gap: 0.52rem;
            }
            .tools-cosmic-card-icon {
                width: 2.15rem;
                height: 2.15rem;
                font-size: 1.05rem;
            }
            .tools-cosmic-title p {
                width: 100%;
                border-radius: 0.95rem;
                padding: 0.5rem 0.7rem 0.5rem 1rem;
                font-size: 0.84rem;
                position: relative;
                display: block;
                line-height: 1.5;
            }
            .tools-cosmic-title p::before {
                position: absolute;
                left: 0.45rem;
                top: 0.52rem;
            }
            .tools-cosmic-col span { font-size: 0.87rem; }
            .tools-cosmic-card h4 {
                font-size: 0.92rem;
                line-height: 1.25;
            }
            .tools-cosmic-card p {
                min-height: 0;
                font-size: 0.84rem;
                line-height: 1.45;
                margin-bottom: 0.1rem;
            }
            .tools-cosmic-track { gap: 0.85rem; animation-duration: 32s; }
            .tools-cosmic-card { width: 240px; min-width: 240px; padding: 1.2rem 1.1rem; }
            .tools-cosmic-card h4 { font-size: 0.95rem; }
            .tools-cosmic-card p { font-size: 0.85rem; min-height: 50px; }
            .tools-cosmic-marquee::before,
            .tools-cosmic-marquee::after { width: 26px; }
            .tools-cosmic-center-glow {
                width: min(88vw, 760px);
                height: 74%;
            }
            .tools-cosmic-center-stars {
                width: min(82vw, 690px);
                height: 66%;
            }
        }

        @media (max-width: 600px) {
            .tools-cosmic-track { animation-duration: 40s; }
            .tools-cosmic-card { width: 200px; min-width: 200px; padding: 1rem 0.95rem; overflow: hidden; }
            .tools-cosmic-card h4 { font-size: 0.88rem; white-space: normal; overflow-wrap: anywhere; }
            .tools-cosmic-card p { font-size: 0.78rem; min-height: 48px; white-space: normal; overflow-wrap: anywhere; overflow: hidden; }
            .tools-cosmic-marquee { margin: 0 -12px; padding: 0.2rem 12px; }
        }

        @media (prefers-reduced-motion: reduce) {
            #tools::before,
            #tools::after,
            .tools-cosmic-outer-star,
            .tools-cosmic-outer-ring,
            .tools-cosmic-outer-orb,
            .tools-cosmic-center-glow,
            .tools-cosmic-center-stars,
            .tools-cosmic-star,
            .tools-cosmic-ring,
            .tools-cosmic-orb,
            .tools-cosmic-num,
            .tools-cosmic-track {
                animation: none !important;
            }

            .calc-fade-in {
                opacity: 1 !important;
                animation: none !important;
            }

            .calc-entry {
                animation: none !important;
            }
        }