/* ==========================================
   ULTRAKIT MOUSE-FOLLOW SPOTLIGHT SECTION
   ========================================== */
.ultrakit-msp-wrapper { --msp-bg: #0b0b1e; --msp-a: #6c5ce7; --msp-b: #00cec9; --msp-r: 420px; --msp-h: 560px; --msp-rad: 28px; --mx: 50%; --my: 50%; position: relative; min-height: var(--msp-h); width: 100%; box-sizing: border-box; overflow: hidden; isolation: isolate; border-radius: var(--msp-rad); background: var(--msp-bg); color: #ffffff; font-family: inherit; display: flex; align-items: center; justify-content: center; }
.ultrakit-msp-wrapper *, .ultrakit-msp-wrapper *::before, .ultrakit-msp-wrapper *::after { box-sizing: border-box; }
.ultrakit-msp-layer { position: absolute; inset: 0; pointer-events: none; }
.ultrakit-msp-layer.is-light { z-index: 1; }
.ultrakit-msp-layer.is-pattern { z-index: 0; }

.msp-m-glow .is-light { background: radial-gradient(var(--msp-r) circle at var(--mx) var(--my), color-mix(in srgb, var(--msp-a) 45%, transparent), color-mix(in srgb, var(--msp-b) 12%, transparent) 45%, transparent 70%); }
.msp-m-grid .is-pattern { background-image: linear-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.09) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask: radial-gradient(var(--msp-r) circle at var(--mx) var(--my), #000, transparent 70%); mask: radial-gradient(var(--msp-r) circle at var(--mx) var(--my), #000, transparent 70%); }
.msp-m-grid .is-light { background: radial-gradient(calc(var(--msp-r) * 0.8) circle at var(--mx) var(--my), color-mix(in srgb, var(--msp-a) 30%, transparent), transparent 65%); }
.msp-m-flashlight .is-pattern { background: linear-gradient(135deg, var(--msp-a), var(--msp-b)); -webkit-mask: radial-gradient(calc(var(--msp-r) * 0.55) circle at var(--mx) var(--my), #000 0%, transparent 100%); mask: radial-gradient(calc(var(--msp-r) * 0.55) circle at var(--mx) var(--my), #000 0%, transparent 100%); opacity: 0.85; }
.msp-m-flashlight .is-light { background: radial-gradient(calc(var(--msp-r) * 0.9) circle at var(--mx) var(--my), transparent 0%, rgba(3,3,12,0.78) 75%); }
.msp-m-aurora .is-light { background: radial-gradient(calc(var(--msp-r) * 0.9) circle at var(--mx) var(--my), color-mix(in srgb, var(--msp-a) 55%, transparent), transparent 60%), radial-gradient(calc(var(--msp-r) * 0.7) circle at calc(var(--ax, 50%)) calc(var(--ay, 50%)), color-mix(in srgb, var(--msp-b) 40%, transparent), transparent 60%); filter: blur(30px); }

.ultrakit-msp-inner { position: relative; z-index: 3; width: 100%; max-width: 980px; padding: 64px 32px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.msp-al-left .ultrakit-msp-inner { align-items: flex-start; text-align: left; }
.ultrakit-msp-eyebrow { padding: 6px 16px; border-radius: 30px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); font-size: 12.5px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.ultrakit-msp-title { margin: 0; max-width: 760px; font-size: clamp(32px, 5.4vw, 64px); font-weight: 900; line-height: 1.05; letter-spacing: -2px; color: #ffffff; }
.ultrakit-msp-text { margin: 0; max-width: 620px; font-size: 17.5px; line-height: 1.65; color: rgba(255,255,255,0.78); }
.ultrakit-msp-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.ultrakit-msp-btn { display: inline-flex; padding: 14px 30px; border-radius: 50px; font-size: 15px; font-weight: 800; text-decoration: none !important; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ultrakit-msp-btn:hover { transform: translateY(-3px); }
.ultrakit-msp-btn.is-main { background: linear-gradient(135deg, var(--msp-a), var(--msp-b)); color: #ffffff !important; box-shadow: 0 14px 34px color-mix(in srgb, var(--msp-a) 45%, transparent); }
.ultrakit-msp-btn.is-ghost { background: rgba(255,255,255,0.08); color: #ffffff !important; border: 1.5px solid rgba(255,255,255,0.28); }
.ultrakit-msp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; width: 100%; margin-top: 30px; text-align: left; }
.ultrakit-msp-card { position: relative; padding: 1.5px; border-radius: 20px; background: rgba(255,255,255,0.1); overflow: hidden; }
.ultrakit-msp-cglow { position: absolute; inset: 0; background: radial-gradient(240px circle at var(--cx, -100px) var(--cy, -100px), var(--msp-b), transparent 70%); opacity: 0; transition: opacity 0.25s ease; }
.ultrakit-msp-wrapper:hover .ultrakit-msp-cglow { opacity: 1; }
.ultrakit-msp-cin { position: relative; height: 100%; padding: 24px; border-radius: 18.5px; background: rgba(12,12,32,0.92); }
.ultrakit-msp-cin h4 { margin: 0 0 8px; font-size: 18px; font-weight: 800; color: #ffffff; }
.ultrakit-msp-cin p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.7); }
@media (max-width: 767px) { .ultrakit-msp-inner { padding: 44px 20px; } }