:root{
  --nx-bg: rgba(3, 8, 20, 0.78);
  --nx-panel: rgba(7, 14, 28, 0.78);
  --nx-line: rgba(255,255,255,0.12);
  --nx-text: #f4f7ff;
  --nx-muted: rgba(244,247,255,0.78);
  --nx-blue: #5da9ff;
  --nx-green: #5ee6a8;
  --nx-pink: #b86cff;
  --nx-shadow: 0 25px 80px rgba(0,0,0,.42);
}

body.nx-intro-lock{
  overflow: hidden;
}

#nxIntroOverlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 20%, rgba(93,169,255,.18), transparent 24%),
    radial-gradient(circle at 85% 18%, rgba(184,108,255,.18), transparent 26%),
    radial-gradient(circle at 50% 86%, rgba(94,230,168,.14), transparent 22%),
    linear-gradient(180deg, rgba(2,6,14,.84), rgba(2,6,14,.94));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility .55s ease;
}

#nxIntroOverlay.is-hidden{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#nxIntroOverlay::before,
#nxIntroOverlay::after{
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(8px);
  opacity: .65;
  animation: nxOrbFloat 9s ease-in-out infinite;
}
#nxIntroOverlay::before{
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(93,169,255,.28), transparent 70%);
  left: -40px;
  top: 8%;
}
#nxIntroOverlay::after{
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(184,108,255,.22), transparent 70%);
  right: -20px;
  bottom: 6%;
  animation-delay: -3s;
}

.nx-intro-stars,
.nx-intro-stars::before,
.nx-intro-stars::after{
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(255,255,255,.95) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 70%, rgba(255,255,255,.75) 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 48% 38%, rgba(255,255,255,.72) 0 1px, transparent 1.4px),
    radial-gradient(circle at 62% 18%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 80%, rgba(255,255,255,.86) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 85% 44%, rgba(255,255,255,.7) 0 1.1px, transparent 1.7px);
  animation: nxStarsTwinkle 7s linear infinite;
  opacity: .6;
}
.nx-intro-stars::before{ transform: scale(1.15); opacity: .34; animation-duration: 10s; }
.nx-intro-stars::after{ transform: scale(.92); opacity: .24; animation-duration: 12s; }

.nx-intro-card{
  position: relative;
  width: min(980px, 100%);
  padding: clamp(26px, 4vw, 40px);
  border-radius: 32px;
  border: 1px solid var(--nx-line);
  background: linear-gradient(180deg, rgba(10,18,36,.88), rgba(8,13,24,.92));
  box-shadow: var(--nx-shadow);
  overflow: hidden;
  transform: translateY(18px) scale(.985);
  animation: nxCardIn .9s cubic-bezier(.2,.8,.2,1) forwards;
}

.nx-intro-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(93,169,255,.10), transparent 36%),
    linear-gradient(300deg, rgba(94,230,168,.10), transparent 36%);
  pointer-events:none;
}

.nx-intro-grid{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 38px);
  align-items: center;
}

.nx-logo-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.nx-logo-orb{
  position: relative;
  width: clamp(180px, 28vw, 270px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.22), transparent 26%),
    radial-gradient(circle at 50% 50%, rgba(93,169,255,.16), rgba(184,108,255,.10) 58%, transparent 74%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.08),
    0 0 55px rgba(93,169,255,.18);
  animation: nxOrbFloat 7s ease-in-out infinite;
}

.nx-logo-orb::before,
.nx-logo-orb::after{
  content:"";
  position:absolute;
  border-radius:50%;
  inset: -12px;
  border: 1px solid rgba(93,169,255,.16);
  animation: nxSpin 16s linear infinite;
}
.nx-logo-orb::after{
  inset: -24px;
  border-color: rgba(184,108,255,.14);
  animation-direction: reverse;
  animation-duration: 22s;
}

.nx-logo{
  width: clamp(88px, 14vw, 128px);
  height: clamp(88px, 14vw, 128px);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
  animation: nxPulse 5s ease-in-out infinite;
}

.nx-intro-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--nx-muted);
  font: 600 13px/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}

.nx-intro-badge::before{
  content:"";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--nx-green), var(--nx-blue));
  box-shadow: 0 0 14px rgba(94,230,168,.5);
}

.nx-intro-title{
  margin: 18px 0 14px;
  color: var(--nx-text);
  font: 800 clamp(2.2rem, 4.3vw, 4.4rem)/.94 Inter, system-ui, sans-serif;
  letter-spacing: -.04em;
}

.nx-intro-subtitle{
  margin: 0 0 14px;
  color: #cfe2ff;
  font: 700 clamp(1.02rem, 1.5vw, 1.24rem)/1.35 Inter, system-ui, sans-serif;
}

.nx-intro-text{
  margin: 0;
  color: var(--nx-muted);
  font: 500 clamp(.98rem, 1.22vw, 1.08rem)/1.78 Inter, system-ui, sans-serif;
  max-width: 64ch;
}

.nx-intro-text + .nx-intro-text{
  margin-top: 12px;
}

.nx-intro-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.nx-btn{
  appearance: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 16px;
  font: 700 15px/1 Inter, system-ui, sans-serif;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}

.nx-btn:hover{ transform: translateY(-2px); }
.nx-btn:active{ transform: translateY(0); }

.nx-btn-primary{
  color: #08111f;
  background: linear-gradient(135deg, var(--nx-blue), var(--nx-green));
  box-shadow: 0 12px 28px rgba(93,169,255,.28);
}

.nx-btn-paypal,
.nx-btn-kofi,
.nx-btn-secondary{
  color: var(--nx-text);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.nx-btn-paypal:hover,
.nx-btn-kofi:hover,
.nx-btn-secondary:hover{
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
}

.nx-intro-note{
  margin-top: 16px;
  color: rgba(244,247,255,.6);
  font: 500 .9rem/1.5 Inter, system-ui, sans-serif;
}

.nx-btn svg{ width: 18px; height: 18px; flex: none; }

@media (max-width: 860px){
  .nx-intro-grid{ grid-template-columns: 1fr; text-align: center; }
  .nx-logo-wrap{ min-height: auto; }
  .nx-intro-actions{ justify-content: center; }
  .nx-intro-text{ max-width: none; }
}

@media (max-width: 560px){
  #nxIntroOverlay{ padding: 16px; }
  .nx-intro-card{ border-radius: 24px; padding: 22px 18px; }
  .nx-intro-actions{ flex-direction: column; }
  .nx-btn{ width: 100%; }
  .nx-intro-title{ margin-top: 14px; }
}

@keyframes nxCardIn{
  0%{ opacity: 0; transform: translateY(24px) scale(.975); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nxOrbFloat{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-10px); }
}
@keyframes nxPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.04); }
}
@keyframes nxSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
@keyframes nxStarsTwinkle{
  0%,100%{ opacity: .45; }
  50%{ opacity: .8; }
}