/* ---- custom cursor ---- */
          @media (hover: hover) and (pointer: fine) {
            *, *::before, *::after { cursor: none !important; }
          }
          .x-cursor-dot, .x-cursor-ring {
            position: fixed; left: 0; top: 0;
            pointer-events: none; z-index: 100000;
            border-radius: 50%; will-change: transform;
            mix-blend-mode: difference;
          }
          .x-cursor-dot { width: 6px; height: 6px; background: #fff; }
          .x-cursor-ring {
            width: 38px; height: 38px;
            border: 1.5px solid rgba(255,255,255,.75);
            transition: width .25s var(--ease-b), height .25s var(--ease-b),
                        background-color .2s, border-color .2s;
          }
          .x-cursor-ring.hover {
            width: 64px; height: 64px;
            background: rgba(255,255,255,.18);
            border-color: rgba(255,255,255,.95);
          }
          .x-cursor-ring.click { width: 28px; height: 28px; }
          @media (hover: none) {
            .x-cursor-dot, .x-cursor-ring { display: none; }
          }

          /* ---- soft mouse spotlight ---- */
          .x-spot {
            position: fixed; left: 50%; top: 50%;
            width: 620px; height: 620px;
            border-radius: 50%; pointer-events: none;
            z-index: 1; transform: translate(-50%, -50%);
            background: radial-gradient(circle,
              rgba(139,96,192,.16) 0%,
              rgba(107,63,160,.08) 30%,
              transparent 62%);
            filter: blur(28px);
            mix-blend-mode: multiply;
          }

          /* ---- hero particle network ---- */
          .x-particles {
            position: absolute; inset: 0; z-index: 1;
            pointer-events: none;
          }

          /* ---- 3D tilt sheen layer ---- */
          .x-sheen {
            position: absolute; inset: 0;
            pointer-events: none;
            border-radius: inherit;
            background: radial-gradient(280px circle at var(--mx,50%) var(--my,50%),
              rgba(184,152,224,.25), transparent 60%);
            opacity: 0; transition: opacity .35s var(--ease);
            mix-blend-mode: plus-lighter;
            z-index: 1;
          }
          .pc-compact:hover .x-sheen,
          .nc:hover .x-sheen,
          .evc:hover .x-sheen,
          .pub-c:hover .x-sheen,
          .tm-c:hover .x-sheen,
          .ts-c:hover .x-sheen { opacity: 1; }

          /* ---- magnetic & tilt baseline ---- */
          .x-mag, .x-tilt { will-change: transform; }
          .pc-compact, .nc, .evc, .pub-c, .tm-c, .ts-c, .ab-im {
            transform-style: preserve-3d;
          }

          /* ---- click ripple ---- */
          .x-ripple {
            position: absolute; border-radius: 50%;
            pointer-events: none;
            background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
            transform: translate(-50%, -50%) scale(0);
            animation: x-ripple .7s var(--ease) forwards;
          }
          @keyframes x-ripple {
            0%   { transform: translate(-50%,-50%) scale(0);  opacity: .9; }
            100% { transform: translate(-50%,-50%) scale(8);  opacity: 0; }
          }

          /* ---- marquee hover pause ---- */
          .marq:hover { animation-play-state: paused; }

          /* ---- scroll progress: flowing gradient + glow ---- */
          .scroll-progress {
            height: 3px !important;
            background: linear-gradient(90deg,
              #6b3fa0 0%, #8b60c0 25%, #d4a94e 50%,
              #8b60c0 75%, #6b3fa0 100%) !important;
            background-size: 220% 100% !important;
            animation: x-progFlow 4s linear infinite;
            box-shadow:
              0 0 12px rgba(107,63,160,.55),
              0 0 24px rgba(184,137,46,.32);
          }
          @keyframes x-progFlow {
            0%   { background-position: 0% 0; }
            100% { background-position: 220% 0; }
          }

          /* ---- shimmer headline accent ---- */
          .hero h1 .acc {
            background: linear-gradient(110deg,
              #6b3fa0 0%, #8b60c0 25%, #d4a94e 45%,
              #b898e0 65%, #6b3fa0 100%) !important;
            background-size: 280% 100% !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
            animation: x-titleShimmer 7s ease-in-out infinite;
          }
          @keyframes x-titleShimmer {
            0%, 100% { background-position: 0% 50%; }
            50%      { background-position: 100% 50%; }
          }

          /* ---- split-text reveal ---- */
          .x-split { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.18; }
          .x-split .x-char {
            display: inline-block;
            transform: translateY(108%);
            opacity: 0;
            transition: transform .85s cubic-bezier(.22,1,.36,1),
                        opacity .55s var(--ease);
          }
          .x-split.x-in .x-char { transform: translateY(0); opacity: 1; }

          /* ---- section title underline draw ---- */
          .s-title {
            position: relative; display: inline-block;
          }
          .s-title::after {
            content: '';
            position: absolute; left: 0; bottom: -10px;
            height: 2px; width: 64px;
            background: linear-gradient(90deg, #6b3fa0, #d4a94e);
            transform: scaleX(0); transform-origin: left;
            transition: transform .9s cubic-bezier(.22,1,.36,1) .25s;
            border-radius: 2px;
          }
          .rv.vis .s-title::after,
          .s-head.rv.vis .s-title::after { transform: scaleX(1); }

          /* ---- ambient shooting stars layer ---- */
          .x-stars {
            position: fixed; inset: 0; z-index: 2;
            pointer-events: none; overflow: hidden;
          }
          .x-star {
            position: absolute; width: 2px; height: 2px;
            background: #b898e0; border-radius: 50%;
            box-shadow:
              0 0 6px #b898e0,
              0 0 14px rgba(184,152,224,.65),
              0 0 30px rgba(184,152,224,.35);
            opacity: 0;
          }

          /* ---- page-load fade ---- */
          body { animation: x-bodyIn .85s var(--ease) both; }
          @keyframes x-bodyIn { from { opacity: 0; } to { opacity: 1; } }

          /* ---- subtle glow on featured CTAs ---- */
          .btn-v::before, .h-cta::before {
            content: ''; position: absolute; inset: -2px;
            border-radius: inherit;
            background: linear-gradient(135deg, #8b60c0, #d4a94e, #8b60c0);
            background-size: 200% 200%;
            opacity: 0; transition: opacity .35s;
            z-index: -1; filter: blur(14px);
            animation: x-progFlow 5s linear infinite;
          }
          .btn-v, .h-cta { position: relative; isolation: isolate; }
          .btn-v:hover::before, .h-cta:hover::before { opacity: .8; }