/* ============================================================
   nostrings — Design Tokens & Component Styles
   ============================================================ */

:root {
  --font: "Montserrat", Arial, Helvetica, sans-serif;

  /* ── Primary Brand — Hot Pink (use sparingly) ─────────────── */
  --primary-color:         #ed37ba;
  --primary-color-hover:   #f25fc8;
  --primary-color-active:  #d42da6;
  --primary-soft:          #cf89bf;
  --primary-subtle:        rgba(237, 55, 186, 0.12);
  --primary-glow:          rgba(237, 55, 186, 0.25);
  --primary-border:        rgba(237, 55, 186, 0.40);

  /* ── Splash Loader ────────────────────────────────────────── */
  --splash-line-fill:      var(--primary-color);
  --splash-line-track:     rgba(232, 239, 247, 0.14);

  /* ── Premium / Gold ───────────────────────────────────────── */
  --premium-color:         #d4a843;
  --premium-color-hover:   #e0b85a;
  --premium-color-active:  #b8922e;
  --premium-soft:          #a07828;
  --premium-text:          #f0c96a;
  --premium-subtle:        rgba(212, 168, 67, 0.14);
  --premium-glow:          rgba(212, 168, 67, 0.28);
  --premium-border:        rgba(212, 168, 67, 0.40);
  --premium-badge-bg:      rgba(212, 168, 67, 0.18);
  --premium-badge-border:  rgba(212, 168, 67, 0.45);

  /* ── Backgrounds ──────────────────────────────────────────── */
  --bg-page:           #141b21;
  --bg-page-2:         #1b2430;
  --bg-surface:        #232d37;
  --bg-surface-raised: #2a3542;
  --bg-surface-soft:   #314154;
  --bg-overlay:        rgba(14, 19, 25, 0.88);
  --bg-input:          #1a222b;
  --bg-modal:          #1e2a35;
  --bg-tooltip:        #0e1419;

  /* ── Text ─────────────────────────────────────────────────── */
  --text-primary:    #e8eff7;
  --text-secondary:  #b9c7d6;
  --text-muted:      #93a4b6;
  --text-disabled:   #526070;
  --text-inverse:    #0e1419;
  --text-on-primary: #ffffff;
  --text-on-premium: #1a1000;

  /* ── Borders ──────────────────────────────────────────────── */
  --border-subtle:  rgba(160, 181, 201, 0.10);
  --border-color:   rgba(160, 181, 201, 0.18);
  --border-normal:  rgba(160, 181, 201, 0.30);
  --border-strong:  rgba(160, 181, 201, 0.46);
  --border-focus:   rgba(237, 55, 186, 0.55);

  /* ── Semantic ─────────────────────────────────────────────── */
  --success:        #24c97a;
  --success-soft:   rgba(36, 201, 122, 0.12);
  --success-text:   #44e896;
  --success-border: rgba(36, 201, 122, 0.32);

  --warning:        #f0a020;
  --warning-soft:   rgba(240, 160, 32, 0.12);
  --warning-text:   #ffbe44;
  --warning-border: rgba(240, 160, 32, 0.32);

  --error:          #e84040;
  --error-soft:     rgba(232, 64, 64, 0.12);
  --error-text:     #ff6868;
  --error-border:   rgba(232, 64, 64, 0.32);

  --info:           #3b9de8;
  --info-soft:      rgba(59, 157, 232, 0.12);
  --info-text:      #6cc0ff;
  --info-border:    rgba(59, 157, 232, 0.32);

  /* ── Presence ─────────────────────────────────────────────── */
  --online:  #24c97a;
  --away:    #f0a020;
  --offline: #526070;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-button: 6px;
  --radius-input:  6px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --radius-2xl:    22px;
  --radius-full:   9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.20), 0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.22);
  --shadow-4: 0 8px 22px rgba(0, 0, 0, 0.20), 0 2px 5px rgba(0, 0, 0, 0.22);
  --shadow-5: 0 16px 36px rgba(0, 0, 0, 0.22), 0 4px 8px rgba(0, 0, 0, 0.24);
  --shadow-raised: inset 0 1px 0 rgba(255, 255, 255, 0.07),
                   0 2px 6px rgba(0, 0, 0, 0.32),
                   0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-press:  inset 0 1px 3px rgba(0, 0, 0, 0.45),
                   inset 0 0 0 1px rgba(0, 0, 0, 0.18);
  --shadow-pink:   0 4px 20px rgba(237, 55, 186, 0.30), 0 1px 6px rgba(237, 55, 186, 0.18);
  --shadow-gold:   0 4px 14px rgba(212, 168, 67, 0.26), 0 1px 4px rgba(212, 168, 67, 0.16);

  /* ── Gradients ────────────────────────────────────────────── */
  --grad-surface:      linear-gradient(160deg, #2a3542 0%, #1f2c38 55%, #1b2430 100%);
  --grad-surface-alt:  linear-gradient(135deg, #232d37 0%, #2a3040 40%, #1e2a35 100%);
  --grad-primary:      linear-gradient(135deg, #f760cc 0%, #ed37ba 38%, #c82a9e 72%, #b02290 100%);
  --grad-primary-h:    linear-gradient(135deg, #ff82d8 0%, #f25fc8 40%, #d632ac 75%, #c02898 100%);
  --grad-primary-soft: linear-gradient(135deg, rgba(237,55,186,.20) 0%, rgba(200,42,158,.10) 60%, rgba(176,34,144,.06) 100%);
  --grad-premium:      linear-gradient(135deg, #f0d070 0%, #d4a843 30%, #b8852a 62%, #c99430 82%, #e8c060 100%);
  --grad-premium-soft: linear-gradient(135deg, rgba(240,208,112,.18) 0%, rgba(212,168,67,.08) 50%, rgba(176,130,42,.05) 100%);
  --grad-overlay:      linear-gradient(to top,
                         rgba(10,15,20,.96) 0%,
                         rgba(10,15,20,.72) 22%,
                         rgba(10,15,20,.28) 50%,
                         rgba(10,15,20,.04) 72%,
                         transparent 100%);
  --grad-line-pink:    linear-gradient(90deg, transparent 0%, #ed37ba 35%, #f760cc 60%, transparent 100%);
  --grad-line-gold:    linear-gradient(90deg, transparent 0%, #c99030 20%, #f0d070 50%, #c99030 80%, transparent 100%);
  --grad-shimmer:      linear-gradient(90deg, #232d37 0%, #2a3542 30%, #314154 50%, #2a3542 70%, #232d37 100%);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:   0.12s ease;
  --transition-normal: 0.20s ease;
  --transition-slow:   0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  /* iOS Safari samples the root element's background for the status-bar area. */
  background-color: var(--bg-page);
}

body {
  font-family: var(--font);
  background-color: var(--bg-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  line-height: 1.5;
}

body.ns-modal-open {
  overflow: hidden;
}

.ns-page-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../img/background.jpg");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.ns-page-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(20, 27, 33, 0.34) 0%, rgba(20, 27, 33, 0.62) 48%, rgba(20, 27, 33, 0.9) 100%),
    radial-gradient(circle at 50% 16%, rgba(237, 55, 186, 0.14), transparent 42%);
}

.ns-navbar,
.ns-hero,
.ns-design-flow,
.ns-live,
.ns-faq,
.ns-cta,
.ns-footer {
  position: relative;
  z-index: 1;
}

img { display: block; }
button { font-family: var(--font); }
a { text-decoration: none; }

/* ── Layout ──────────────────────────────────────────────────── */
.ns-container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.ns-navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  transition: background var(--transition-normal),
              backdrop-filter var(--transition-normal),
              border-color var(--transition-normal);
  border-bottom: 1px solid transparent;
}

.ns-navbar.is-scrolled {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

.ns-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ns-logo {
    display: flex;
    align-items: center;
    gap: 6px;
  font-family: var(--font);
  font-size: 21px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.025em;
    flex-shrink: 0;
}

.ns-logo--image {
    gap: 0;
    line-height: 0;
    text-decoration: none;
}

.ns-logo-img {
    display: block;
    width: auto;
    height: 28px;
}

.ns-logo-img--dark {
    display: none;
}

.ns-logo-badge {
  font-size: 9.5px;
  font-weight: 700;
  background: var(--grad-primary);
  color: #fff;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.06em;
  line-height: 1.5;
  align-self: flex-start;
  margin-top: 2px;
}

.ns-splash .ns-logo-badge {
  background: linear-gradient(135deg, #f760cc 0%, #ed37ba 38%, #c82a9e 72%, #b02290 100%);
}

.ns-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.ns-nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}
.ns-nav-link:hover { color: var(--text-primary); }
.ns-nav-link--premium { color: var(--premium-text); }
.ns-nav-link--premium:hover { color: var(--premium-color-hover); }

.ns-btn-signin {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--border-normal);
  border-radius: var(--radius-button);
  padding: 9px 22px;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}
.ns-btn-signin:hover {
  border-color: var(--primary-border);
  color: var(--primary-color-hover);
}

/* signed-in account chip — swapped with .ns-btn-signin by applyUserChrome() */
.ns-btn-signin[hidden],
.ns-nav-account[hidden] { display: none !important; }

/* Session-chrome toggles (applyUserChrome / premium): these attributes carry
   the `hidden` attribute, but many targets set an explicit display, which beats
   the UA [hidden] rule. Force it so guest/auth/premium toggling always hides. */
[data-guest-only][hidden],
[data-auth-only][hidden],
[data-hide-premium][hidden] { display: none !important; }

/* Release gate: keep Virtual Dates implemented but out of the UI until launch. */
.feature-virtual-date { display: none !important; }
.ns-nav-account {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 14px 5px 6px;
  border: 1px solid var(--border-normal);
  border-radius: 999px;
  color: var(--text-primary);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.ns-nav-account:hover { border-color: var(--primary-border); color: var(--primary-color-hover); }
.ns-nav-account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

/* ── Buttons ─────────────────────────────────────────────────── */
.ns-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font);
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: box-shadow var(--transition-normal), opacity var(--transition-fast);
  white-space: nowrap;
  text-decoration: none;
}
.ns-btn:active { transform: none; }

.ns-btn--primary {
  background: var(--grad-primary);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 13px 32px;
  border-radius: var(--radius-full);
}
.ns-btn--primary:hover {
  box-shadow: var(--shadow-pink);
}

.ns-btn--outline {
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-normal);
}
.ns-btn--outline:hover {
  border-color: var(--border-strong);
  color: #fff;
}

/* ── Eyebrow Label ───────────────────────────────────────────── */
.ns-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--primary-soft);
}

/* ── Hero Section ────────────────────────────────────────────── */
.ns-hero {
  position: relative;
  background: transparent;
  padding: 58px 0 64px;
  overflow: hidden;
  isolation: isolate;
}

.ns-hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ns-hero-headline {
  font-size: clamp(52px, 7vw, 82px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 20px 0 22px;
}

.ns-hero-sub {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.ns-hero-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 610px;
  margin: 0 auto 30px;
}

.ns-hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.ns-hero-disclaimer {
  font-size: 11.5px;
  color: var(--text-disabled);
}

/* ── Hero Centered Carousel ─────────────────────────────────── */
.ns-hero-carousel {
  position: relative;
  z-index: 1;
  height: clamp(430px, 42vw, 590px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 28px;
  overflow: visible;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  contain: layout style;
  --cta-top: 50%;
}

.ns-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--online);
  box-shadow: 0 0 0 4px var(--success-soft);
  flex-shrink: 0;
}

.ns-hero-carousel.is-dragging {
  cursor: grabbing;
}

.ns-hcard {
  position: absolute;
  left: 50%;
  width: clamp(220px, 22vw, 400px);
  aspect-ratio: 400 / 522;
  border-radius: 34px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-surface);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.46s ease,
              filter 0.46s ease,
              box-shadow 0.52s ease;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  transform-origin: center center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), 0 4px 12px rgba(0, 0, 0, 0.22);
  --chrome-scale: 1;
  --chrome-opacity: 1;
}

.ns-hcard.is-dragging {
  transition: none;
}

.ns-hcard-poster,
.ns-hcard-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
}

.ns-hcard-video {
  opacity: 0;
  transition: opacity 0.16s ease;
}

.ns-hcard.is-video-playing .ns-hcard-video {
  opacity: 1;
}

.ns-hcard-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(6, 10, 14, .97) 0%,
    rgba(6, 10, 14, .60) 28%,
    rgba(6, 10, 14, .12) 55%,
    transparent 100%);
  pointer-events: none;
}

.ns-hcard-top {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: var(--chrome-opacity);
  transition: opacity 0.34s ease;
}

.ns-hcard-views {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(7, 12, 18, 0.76);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 20px rgba(0,0,0,.22);
  color: rgba(255, 255, 255, 0.90);
  font-size: 12px;
  font-weight: 750;
  padding: 7px 13px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
  transform: scale(var(--chrome-scale));
  transform-origin: top left;
}

.ns-hcard-views svg {
  width: 14px;
  height: 14px;
}



.ns-hcard-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 10px;
  opacity: var(--chrome-opacity);
  transform: scale(var(--chrome-scale));
  transform-origin: bottom left;
  transition: opacity 0.34s ease;
}

.ns-hcard-name {
  grid-column: 1;
  grid-row: 1;
}

.ns-hcard-meta {
  grid-column: 1 / -1;
  grid-row: 2;
}

.ns-hcard-name {
  font-size: clamp(18px, 2.1vw, 32px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.025em;
  line-height: 1;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .65);
}

.ns-hcard-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: clamp(10px, .8vw, 13px);
  font-weight: 700;
  color: var(--premium-text);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .75);
}

.ns-hcard-meta svg {
  width: 13px;
  height: 13px;
}

.ns-hcard-start-btn {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #0e1419;
  border: none;
  border-radius: var(--radius-full);
  padding: 8px 14px;
  font: 700 12px var(--font);
  cursor: pointer;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, box-shadow 0.18s ease;
}

.ns-hcard-start-icon {
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(14, 20, 25, 0.16));
}

.ns-hcard-start-label {
  line-height: 1;
}

.ns-hcard-start-label--mobile {
  display: none;
}

.ns-hcard.is-active .ns-hcard-start-btn {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.ns-hcard-start-btn:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

@media (max-width: 640px) {
  .ns-hcard-start-btn {
    gap: 5px;
    padding: 8px 12px;
  }

  .ns-hcard-start-label--desktop {
    display: none;
  }

  .ns-hcard-start-label--mobile {
    display: inline;
  }
}

/* ── Create Section ──────────────────────────────────────────── */
.ns-design-flow {
  background: transparent;
  padding: 72px 0 72px;
}

.ns-design-panel {
  max-width: 1080px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(ellipse 58% 100% at 0% 0%, rgba(237, 55, 186, 0.12) 0%, transparent 66%),
    radial-gradient(ellipse 54% 88% at 100% 14%, rgba(59, 157, 232, 0.08) 0%, transparent 64%),
    rgba(18, 27, 36, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.ns-create-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  overflow: hidden;
  max-width: none;
  min-height: 340px;
  margin: 0;
  padding: 44px 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ns-create-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0%, transparent 50%, rgba(255, 255, 255, 0.045) 71%, transparent 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 62%);
}

.ns-create-card::after {
  content: "";
  position: absolute;
  top: 34px;
  right: 300px;
  bottom: 34px;
  width: 150px;
  pointer-events: none;
  z-index: 2;
  opacity: 0.9;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent) 0 18% / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(237, 55, 186, 0.28), transparent) 0 58% / 100% 1px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px 18px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 36%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 36%, transparent 100%);
}

.ns-create-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 620px;
}

.ns-create-headline {
  max-width: 620px;
  font-size: clamp(36px, 4.1vw, 54px);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.06;
  margin: 10px 0 16px;
}

.ns-create-body {
  max-width: 540px;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 24px;
}

.ns-create-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.ns-create-cta {
  min-height: 44px;
  padding: 12px 28px;
  border-radius: var(--radius-button);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 8px 28px rgba(237, 55, 186, 0.28);
}

.ns-create-actions > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

/* ── Morphing Companion Slider ───────────────────────────────── */
.ns-morph-glyphs {
  position: absolute;
  right: 330px;
  top: 0;
  bottom: 0;
  width: 130px;
  pointer-events: none;
  z-index: 2;
}

.ns-glyph {
  position: absolute;
  animation: ns-twinkle var(--twinkle-dur, 3s) ease-in-out infinite var(--twinkle-del, 0s);
}

.ns-glyph--1 { width: 22px; height: 22px; top: 18%;  right: 10px; color: rgba(237, 55, 186, 0.80); --twinkle-dur: 3.4s; --twinkle-del: 0s;   }
.ns-glyph--2 { width: 10px; height: 10px; top: 44%;  left:  18px; color: rgba(255, 255, 255, 0.45); --twinkle-dur: 2.6s; --twinkle-del: 1.1s; }
.ns-glyph--3 { width: 15px; height: 15px; top: 58%;  right: 24px; color: rgba(237, 55, 186, 0.55); --twinkle-dur: 4.2s; --twinkle-del: 0.7s; }
.ns-glyph--4 { width:  7px; height:  7px; top: 28%;  left:  32px; color: rgba(180, 110, 255, 0.65); --twinkle-dur: 2.1s; --twinkle-del: 1.9s; }
.ns-glyph--5 { width: 14px; height: 14px; bottom: 26%; right: 8px; color: rgba(255, 255, 255, 0.28); --twinkle-dur: 3.8s; --twinkle-del: 0.4s; }
.ns-glyph--6 { width:  8px; height:  8px; top: 12%;  left:  10px; color: rgba(237, 55, 186, 0.40); --twinkle-dur: 2.9s; --twinkle-del: 2.3s; }

@keyframes ns-twinkle {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%       { transform: scale(0.55); opacity: 0.08; }
}

.ns-create-morph {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 430px;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24%);
  mask-image: linear-gradient(to right, transparent 0%, black 24%);
}

.ns-create-morph::before,
.ns-create-morph::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.ns-create-morph::before {
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(14, 21, 28, 0.82) 0%, rgba(14, 21, 28, 0.24) 24%, transparent 48%),
    linear-gradient(135deg, rgba(237, 55, 186, 0.22), transparent 34%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 18px);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.ns-create-morph::after {
  right: 22px;
  bottom: 22px;
  z-index: 3;
  width: 154px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)) 18px 18px / 46px 4px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 18px 34px / 112px 5px no-repeat,
    linear-gradient(rgba(237, 55, 186, 0.76), rgba(237, 55, 186, 0.76)) 18px 34px / 42px 5px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 18px 48px / 118px 5px no-repeat,
    linear-gradient(rgba(180, 110, 255, 0.68), rgba(180, 110, 255, 0.68)) 18px 48px / 68px 5px no-repeat,
    rgba(10, 14, 20, 0.48);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  animation: ns-morph-panel 12s ease-in-out infinite;
}

.ns-morph-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  animation: ns-morph 12s infinite;
  transform: scale(1.03);
  -webkit-user-drag: none;
  pointer-events: none;
}

.ns-morph-img:nth-child(1) { animation-delay: -0.67s; }
.ns-morph-img:nth-child(2) { animation-delay: 1.33s; }
.ns-morph-img:nth-child(3) { animation-delay: 3.33s; }
.ns-morph-img:nth-child(4) { animation-delay: 5.33s; }
.ns-morph-img:nth-child(5) { animation-delay: 7.33s; }
.ns-morph-img:nth-child(6) { animation-delay: 9.33s; }

@keyframes ns-morph {
  0%      { opacity: 0; }
  5.56%   { opacity: 1; }
  16.67%  { opacity: 1; }
  22.22%  { opacity: 0; }
  100%    { opacity: 0; }
}

@keyframes ns-morph-panel {
  0%, 100% {
    opacity: 0.88;
    background-size: 46px 4px, 112px 5px, 42px 5px, 118px 5px, 68px 5px, auto;
  }
  25% {
    opacity: 0.98;
    background-size: 58px 4px, 112px 5px, 78px 5px, 118px 5px, 42px 5px, auto;
  }
  50% {
    opacity: 0.92;
    background-size: 42px 4px, 112px 5px, 58px 5px, 118px 5px, 92px 5px, auto;
  }
  75% {
    opacity: 0.96;
    background-size: 64px 4px, 112px 5px, 96px 5px, 118px 5px, 54px 5px, auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ns-morph-img { animation: none; }
  .ns-morph-img:nth-child(1) { opacity: 1; }
  .ns-create-morph::after { animation: none; }
  .ns-live::after { animation: none; }
}

/* ── Proof Section ─────────────────────────────────────────────── */
.ns-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 0 24px 24px;
  background: rgba(160, 181, 201, 0.12);
}

.ns-proof-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  min-height: 148px;
  padding: 24px;
  border: 0;
  border-radius: 0;
  background: rgba(16, 25, 34, 0.82);
  box-shadow: none;
}

.ns-proof-item:first-child {
  border-bottom-left-radius: var(--radius-xl);
}

.ns-proof-item:last-child {
  border-right: 0;
  border-bottom-right-radius: var(--radius-xl);
}

.ns-proof-item h3 {
  color: var(--text-primary);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 7px;
}

.ns-proof-item p {
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ns-proof-visual {
  position: relative;
  height: 76px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
}

.ns-proof-visual--avatars {
  overflow: visible;
  border: 0;
  background: transparent;
}

.ns-proof-visual--avatars img {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 2px solid var(--bg-page-2);
  box-shadow: var(--shadow-3);
}

.ns-proof-visual--avatars img:nth-child(1) { left: 0; top: 6px; }
.ns-proof-visual--avatars img:nth-child(2) { right: 2px; top: 20px; }
.ns-proof-visual--avatars img:nth-child(3) { left: 20px; bottom: 2px; }

.ns-proof-visual--photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px) brightness(0.72);
  transform: scale(1.08);
}

.ns-proof-visual--photo span {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  text-align: center;
  padding: 6px 8px;
  border-radius: var(--radius-full);
  background: rgba(14, 19, 25, 0.78);
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.ns-proof-visual--status {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
}

.ns-proof-visual--status strong {
  color: var(--text-primary);
  font-size: 13px;
}

.ns-proof-visual--status small {
  color: var(--text-muted);
  font-size: 11px;
}

/* ── LIVE Section ────────────────────────────────────────────── */
.ns-live {
  position: relative;
  overflow-x: clip;
  border-top: 0;
  padding-bottom: 74px;
  isolation: isolate;
}

.ns-live::before,
.ns-live::after {
  content: "";
  position: absolute;
  inset: -18% 0 -8%;
  z-index: -1;
  pointer-events: none;
}

.ns-live::before {
  background:
    linear-gradient(180deg, rgba(20, 27, 33, 0.86) 0%, rgba(20, 27, 33, 0.58) 42%, rgba(20, 27, 33, 0.86) 100%),
    url("../img/background.jpg") center 38% / cover no-repeat;
  background-attachment: fixed;
  filter: blur(22px) saturate(1.08);
  transform: scaleX(-1) scale(1.08);
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 12%, black 24%, black 74%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 12%, black 24%, black 74%, rgba(0, 0, 0, 0.45) 88%, transparent 100%);
}

.ns-live::after {
  left: 50%;
  top: 14%;
  right: auto;
  bottom: auto;
  width: min(1420px, 112vw);
  height: min(820px, 64vw);
  border: 1px solid rgba(142, 70, 190, 0.10);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 32% 46% at 16% 42%, rgba(189, 41, 170, 0.12) 0%, rgba(111, 45, 142, 0.07) 34%, transparent 72%),
    radial-gradient(ellipse 34% 48% at 84% 43%, rgba(44, 104, 190, 0.12) 0%, rgba(28, 71, 136, 0.08) 36%, transparent 74%),
    radial-gradient(ellipse 42% 34% at 50% 58%, rgba(255, 255, 255, 0.035) 0%, transparent 66%);
  box-shadow:
    -64px 0 180px rgba(189, 41, 170, 0.06),
    70px 10px 190px rgba(44, 104, 190, 0.065),
    inset 0 0 80px rgba(255, 255, 255, 0.018);
  filter: blur(34px) saturate(1.18);
  opacity: 0.78;
  transform: translate3d(-50%, var(--live-glow-y, 0), 0) rotate(-7deg);
  animation: ns-live-glow-drift 18s ease-in-out infinite;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 74%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 14%, black 74%, transparent 100%);
}

.ns-live > .ns-container {
  position: relative;
  z-index: 1;
}

@keyframes ns-live-glow-drift {
  0%, 100% { transform: translate3d(-50%, -10px, 0) rotate(-7deg) scale(1); }
  50% { transform: translate3d(-50%, 16px, 0) rotate(-6deg) scale(1.015); }
}

.ns-live-grid {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--bg-surface);
  min-width: 0;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-5);
}

.ns-live-preview {
  position: relative;
  background: var(--bg-page-2);
  height: 430px;
  min-height: 300px;
  overflow: hidden;
}

.ns-live-poster,
.ns-live-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.ns-live-poster {
  z-index: 0;
}

.ns-live-video {
  z-index: 1;
}

.ns-live-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to right, rgba(14, 19, 25, 0.08) 0%, transparent 34%, rgba(14, 19, 25, 0.34) 100%),
    linear-gradient(to top, rgba(10,15,20,.40) 0%, transparent 45%);
  pointer-events: none;
}

.ns-live-badge {
  position: absolute;
  z-index: 3;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--error);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  letter-spacing: 0.08em;
}

.ns-live-badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  animation: ns-pulse 1.6s ease-in-out infinite;
}

@keyframes ns-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%       { opacity: 0.25; transform: scale(0.7); }
}

/* ── Chat Panel ──────────────────────────────────────────────── */
.ns-chat {
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--bg-page-2);
  border-left: 1px solid var(--border-subtle);
  overflow: hidden;
  min-width: 0;
}

.ns-chat-header {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  background: rgba(27, 36, 48, 0.94);
}

.ns-chat-hdr-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 0 2px rgba(237, 55, 186, 0.12);
}
.ns-chat-hdr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-chat-hdr-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.ns-chat-hdr-status {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.1;
}

.ns-chat-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.ns-chat-icon-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ns-chat-icon-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.ns-chat-messages {
  flex: 1;
  min-width: 0;
  padding: 14px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  min-height: 0;
  background-image:
    radial-gradient(circle at 22% 16%, rgba(237, 55, 186, 0.035) 0%, transparent 38%),
    radial-gradient(circle at 82% 62%, rgba(59, 157, 232, 0.035) 0%, transparent 36%);
}

.ns-bubble {
  max-width: min(82%, 520px);
  padding: 10px 15px;
  font-size: 14.5px;
  line-height: 1.4;
  position: relative;
  word-wrap: break-word;
  animation: ns-bubble-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ns-bubble-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

.ns-bubble--ai {
  background: var(--bg-surface-raised);
  border: 0;
  color: var(--text-primary);
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
}

.ns-bubble--user {
  background: var(--grad-primary);
  border: 0;
  color: var(--text-on-primary);
  border-radius: 14px 14px 4px 14px;
  align-self: flex-end;
}

.ns-bubble-time {
  display: block;
  margin-top: 5px;
  color: currentColor;
  font-size: 10.5px;
  line-height: 1;
  opacity: 0.68;
  text-align: right;
}

.ns-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  background: var(--bg-surface-raised);
  border-radius: 14px 14px 14px 4px;
  align-self: flex-start;
  animation: ns-bubble-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ns-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-muted);
  animation: ns-typing-bounce 1.3s ease-in-out infinite;
}
.ns-typing-dot:nth-child(2) { animation-delay: 0.18s; }
.ns-typing-dot:nth-child(3) { animation-delay: 0.36s; }

@keyframes ns-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.ns-bubble--photo {
  padding: 0;
  overflow: hidden;
  max-width: 160px;
  cursor: pointer;
  border-radius: 14px;
  background: var(--bg-surface-raised);
  border: 0;
  text-align: left;
  aspect-ratio: 3 / 4;
}

.ns-bubble--photo img {
  width: 100%;
  display: block;
  filter: blur(12px) brightness(0.65) saturate(0.7);
}

.ns-bubble-photo-lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.ns-chat-input-row {
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  background: rgba(27, 36, 48, 0.96);
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.12);
}

.ns-chat-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 10px 14px;
  min-width: 0;
  font-size: 15px;
  color: var(--text-muted);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.ns-chat-input::placeholder {
  color: var(--text-muted);
}

.ns-chat-input:focus {
  color: var(--text-primary);
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

.ns-chat-tool-btn,
.ns-chat-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast),
              color var(--transition-fast);
}

.ns-chat-tool-btn {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.ns-chat-tool-btn--heart {
  color: var(--text-on-primary);
  background: var(--bg-surface-raised);
}

.ns-chat-tool-btn:hover {
  background: var(--bg-surface-soft);
}

.ns-chat-send {
  background: var(--grad-primary);
  color: var(--text-on-primary);
}

.ns-chat-send:disabled {
  opacity: 0.65;
  cursor: default;
}

.ns-chat-send:hover {
  box-shadow: var(--shadow-pink);
}

/* ── FAQ Section ─────────────────────────────────────────────── */
.ns-auth-modal[hidden] { display: none; }

.ns-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.ns-auth-modal.is-open { opacity: 1; }

.ns-auth-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 13, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.ns-auth-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(340px, 1fr);
  width: min(920px, 100%);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background: var(--bg-tooltip);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  transform: scale(0.96) translateY(10px);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ns-auth-modal.is-open .ns-auth-dialog { transform: none; }

.ns-auth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.ns-auth-close:hover {
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-primary);
}

.ns-auth-visual {
  position: relative;
  overflow: hidden;
}

.ns-auth-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.9) brightness(0.78);
  display: block;
}

.ns-auth-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(14, 19, 25, 0.90), rgba(14, 19, 25, 0.16) 58%, rgba(14, 19, 25, 0.08)),
    linear-gradient(135deg, rgba(237, 55, 186, 0.24), transparent 54%);
}

.ns-auth-visual-copy {
  position: absolute;
  left: 32px;
  right: 32px;
  bottom: 32px;
  z-index: 1;
}

.ns-auth-kicker {
  color: var(--primary-color-hover);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.ns-auth-promise {
  max-width: 300px;
  color: var(--text-primary);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: 0;
}

.ns-auth-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 34px 40px;
  background:
    linear-gradient(135deg, rgba(20, 27, 33, 0.98), rgba(13, 18, 23, 0.98));
}

.ns-auth-title {
  color: var(--text-primary);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 10px;
}

.ns-auth-subtitle {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 28px;
}

.ns-auth-form {
  display: grid;
  gap: 10px;
}

.ns-auth-label {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ns-auth-input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-button);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-primary);
  padding: 0 16px;
  font: 600 16px var(--font);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ns-auth-input::placeholder {
  color: var(--text-disabled);
  text-transform: uppercase;
}

.ns-auth-input:focus {
  border-color: var(--primary-border);
  box-shadow: 0 0 0 3px var(--primary-subtle);
}

.ns-auth-submit,
.ns-auth-google {
  height: 50px;
  border-radius: var(--radius-button);
  font: 800 16px var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.ns-auth-submit {
  margin-top: 12px;
  border: 0;
  background: var(--grad-primary);
  color: var(--text-on-primary);
  transition: box-shadow var(--transition-normal);
}

.ns-auth-submit:hover {
  box-shadow: var(--shadow-pink);
}

.ns-auth-forgot {
  text-align: right;
  margin-top: -4px;
}

.ns-auth-forgot a {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.ns-auth-forgot a:hover { color: var(--primary-color-hover); }

.ns-auth-switch {
  margin: 22px 0 18px;
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.ns-auth-switch a { color: var(--primary-color-hover); }

.ns-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-disabled);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.ns-auth-divider::before,
.ns-auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border-subtle);
}

.ns-auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text-primary);
}

.ns-faq {
  padding: 84px 0;
}

.ns-faq-header {
  text-align: center;
  margin-bottom: 42px;
}

.ns-faq-title {
  font-size: clamp(36px, 4.5vw, 50px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.03em;
  margin-top: 14px;
}

.ns-faq-title span { color: var(--primary-color); }

.ns-faq-list {
  max-width: none;
  margin: 0;
}

.ns-faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 52px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}

.ns-faq-item {
  border-bottom: 1px solid var(--border-subtle);
}

.ns-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  transition: color var(--transition-fast);
}
.ns-faq-trigger:hover { color: #fff; }

.ns-faq-icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-normal);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  font-weight: 300;
  transition: transform var(--transition-normal),
              border-color var(--transition-fast),
              background var(--transition-fast),
              color var(--transition-fast);
}

.ns-faq-item.is-open .ns-faq-icon {
  transform: rotate(45deg);
  border-color: var(--primary-border);
  background: var(--primary-subtle);
  color: var(--primary-color);
}

.ns-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.ns-faq-answer-inner {
  padding: 0 0 20px;
  font-size: 15.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

.ns-faq-card {
  position: sticky;
  top: 92px;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    var(--bg-page);
  box-shadow: var(--shadow-4);
}


/* ── Premium Promo Banner ────────────────────────────────────── */
.ns-promo-card {
  background: var(--bg-page);
  border-color: var(--premium-border);
  box-shadow: 0 4px 24px rgba(212, 168, 67, 0.18), var(--shadow-4);
  min-height: 400px;
  display: flex;
  flex-direction: column;
}

.ns-promo-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ns-promo-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.5) brightness(0.35);
}

.ns-promo-bg-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(212, 168, 67, 0.16) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(237, 55, 186, 0.10) 0%, transparent 60%),
    linear-gradient(to top, rgba(14, 22, 28, 0.98) 0%, rgba(14, 22, 28, 0.65) 55%, rgba(14, 22, 28, 0.20) 100%);
}

.ns-promo-body {
  position: relative;
  z-index: 1;
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.ns-promo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--radius-full);
  background: var(--grad-premium);
  color: #1a1000;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 22px;
  box-shadow: 0 3px 12px rgba(212, 168, 67, 0.32);
}

.ns-promo-deal {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  line-height: 1;
  margin-bottom: 4px;
}

.ns-promo-percent {
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  background: var(--grad-premium);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ns-promo-pct-sign {
  font-size: 48px;
  letter-spacing: -0.02em;
}

.ns-promo-off {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--premium-text);
  margin-bottom: 10px;
  opacity: 0.78;
}

.ns-promo-plan {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

.ns-promo-countdown {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 11px;
  border: 1px solid rgba(212, 168, 67, 0.28);
  border-radius: var(--radius-full);
  background: rgba(212, 168, 67, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ns-promo-countdown-label {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}

.ns-promo-countdown-time {
  color: var(--premium-text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1;
}

.ns-promo-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 28px;
}

.ns-promo-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.3;
}

.ns-promo-perks li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grad-premium);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(212, 168, 67, 0.55);
}

.ns-promo-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  border-radius: var(--radius-full);
  background: var(--grad-premium);
  color: #1a1000;
  font: 800 13.5px var(--font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(212, 168, 67, 0.36), 0 1px 4px rgba(212, 168, 67, 0.20);
  transition: box-shadow var(--transition-fast), filter var(--transition-fast);
  margin-top: auto;
  margin-bottom: 14px;
}

.ns-promo-cta:hover {
  box-shadow: 0 6px 28px rgba(212, 168, 67, 0.52), 0 2px 8px rgba(212, 168, 67, 0.28);
  filter: brightness(1.06);
  color: #1a1000;
}

.ns-promo-note {
  font-size: 11px;
  color: var(--text-disabled);
  text-align: center;
  width: 100%;
  letter-spacing: 0.01em;
}

/* ── Footer ──────────────────────────────────────────────────── */
.ns-footer {
  background: var(--bg-page);
  border-top: 1px solid var(--border-subtle);
}

.ns-footer-top {
  padding: 56px 0 34px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ns-footer-tagline {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 300px;
  line-height: 1.6;
}

.ns-footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px 20px;
  padding: 34px 0;
}

.ns-footer-col-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 16px;
}

.ns-footer-link {
  display: block;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-bottom: 10px;
  transition: color var(--transition-fast);
  line-height: 1.3;
}
.ns-footer-link:hover { color: var(--text-primary); }

.ns-footer-trust-list {
  display: grid;
  gap: 10px;
}

.ns-footer-trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.ns-footer-trust-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: var(--text-secondary);
}

.ns-footer-note {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 12px;
  line-height: 1.55;
  max-width: 260px;
}

.ns-footer-bottom {
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-disabled);
}

/* ── Scroll Reveal ───────────────────────────────────────────── */
/* Elements default to visible. Animations only apply after JS adds js-ready. */
.js-ready .ns-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-ready .ns-reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js-ready .ns-reveal--delay-1 { transition-delay: 0.08s; }
.js-ready .ns-reveal--delay-2 { transition-delay: 0.18s; }
.js-ready .ns-reveal--delay-3 { transition-delay: 0.28s; }
.js-ready .ns-reveal--delay-4 { transition-delay: 0.38s; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .ns-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Hero load animation (pure CSS — no JS dependency) ──────── */
@keyframes ns-fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ns-hero-animate {
  animation: ns-fade-up 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.ns-hero-animate--d1 { animation-delay: 0.08s; }
.ns-hero-animate--d2 { animation-delay: 0.15s; }
.ns-hero-animate--d3 { animation-delay: 0.22s; }
.ns-hero-animate--d4 { animation-delay: 0.30s; }
.ns-hero-animate--d5 { animation-delay: 0.40s; }

@media (prefers-reduced-motion: reduce) {
  .ns-hero-animate { animation: none; }
}

/* ── Hero Trust Strip ────────────────────────────────────────── */
.ns-hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 24px;
}

.ns-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-disabled);
  letter-spacing: 0.01em;
}

.ns-trust-item svg {
  flex-shrink: 0;
  color: var(--text-disabled);
}

.ns-trust-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bg-surface-soft);
  flex-shrink: 0;
}

/* ── Create Feature List ─────────────────────────────────────── */
.ns-create-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 14px 0 22px;
}

.ns-create-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.3;
}

.ns-create-features li svg {
  flex-shrink: 0;
  color: var(--primary-soft);
}

/* ── Live Section Intro ──────────────────────────────────────── */
.ns-live-intro {
  padding: 38px 0 34px;
  text-align: center;
}

.ns-live-intro-heading {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 14px 0 18px;
}

.ns-live-intro-body {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 540px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── FAQ Zone ────────────────────────────────────────────────── */
.ns-faq-subtitle {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 440px;
  margin: 8px auto 0;
  text-align: center;
  line-height: 1.6;
}

/* ── CTA Section ─────────────────────────────────────────────── */
.ns-cta {
  position: relative;
  background: var(--bg-page);
  padding: 92px 0;
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}

.ns-cta-glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  background: radial-gradient(ellipse at center top,
    rgba(255, 252, 245, 0.06) 0%,
    rgba(230, 238, 255, 0.024) 40%,
    transparent 68%);
  pointer-events: none;
}

.ns-cta-inner {
  position: relative;
  z-index: 1;
}

.ns-cta-heading {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin: 16px 0 20px;
}

.ns-cta-body {
  font-size: 16px;
  color: var(--text-muted);
  max-width: 420px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

.ns-cta-btn {
  font-size: 17px;
  font-weight: 800;
  padding: 16px 52px;
}

.ns-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-disabled);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ns-container { padding-left: 16px; padding-right: 16px; }
  .ns-btn-signin {
    padding: 8px 16px;
    font-size: 13px;
  }
  .ns-hero { padding-top: 32px; padding-bottom: 0; }
  .ns-page-media {
    background-image: url(../img/background-mobile.jpg);
  }
  .ns-hero-carousel {
    height: 320px;
    margin-top: 30px;
  }
  .ns-hero-headline { font-size: 48px; }
  .ns-hero-sub { font-size: 15px; }
  .ns-hero-body { font-size: 14.5px; margin-bottom: 24px; }
  .ns-hero-body,
  .ns-create-body,
  .ns-proof-item p,
  .ns-auth-subtitle,
  .ns-live-intro-body,
  .ns-faq-subtitle,
  .ns-cta-body,
  .ns-footer-tagline,
  .ns-footer-note {
    line-height: 1.45;
  }
  .ns-hero-trust { display: none; }
  .ns-hcard { width: clamp(172px, 56vw, 215px); }
  .ns-design-flow { padding: 54px 0 34px; }
  .ns-design-panel {
    border-radius: var(--radius-xl);
  }
  .ns-create-card {
    min-height: 0;
    padding: 22px;
    width: 100%;
  }
  .ns-create-card::after {
    content: none;
  }
  .ns-hcard-views {
    padding: 4px 8px;
  }
  .ns-hcard-fav-btn {
    width: 32px; 
    height: 32px;
  }
  .ns-hcard-fav-btn svg {
    width: 16px;
    height: 16px;
  }
  .ns-hcard-bottom {
    gap: 4px 10px;
    padding: 16px;
  }
  .ns-create-copy {
    max-width: none;
  }
  .ns-create-headline {
    font-size: 30px;
  }
  .ns-create-body {
    max-width: none;
    margin-bottom: 16px;
  }
  .ns-create-step {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
  }
  .ns-create-preview {
    grid-template-columns: 1fr;
  }
  .ns-create-phone {
    min-height: 360px;
  }
  .ns-create-phone img {
    min-height: 360px;
  }
  .ns-create-controls {
    grid-template-columns: 1fr;
    padding-bottom: 0;
  }
  .ns-morph-glyphs {
    display: none;
  }
  .ns-create-morph {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: calc(100% + 44px);
    height: 220px;
    margin: 28px -22px -22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
  }
  .ns-create-morph .ns-morph-img {
    object-position: center 15%;
  }
  .ns-proof-grid {
    grid-template-columns: 1fr;
    padding: 0 14px 14px;
  }
  .ns-proof-item {
    grid-template-columns: 42px minmax(0, 1fr);
    min-height: 120px;
    padding: 16px 14px;
    border-right: 0;
    border-top: 1px solid var(--border-subtle);
  }
  .ns-proof-item:first-child,
  .ns-proof-item:last-child {
    border-radius: 0;
  }
  .ns-proof-item:last-child {
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
  }
  .ns-proof-visual {
    height: 76px;
  }
  .ns-live {
    padding-bottom: 12px;
  }
  .ns-live::before {
    background-attachment: scroll;
    opacity: 0.44;
  }
  .ns-live::after {
    opacity: 0.34;
  }
  .ns-live-intro {
    padding: 32px 0 28px;
  }
  .ns-live-intro-heading,
  .ns-cta-heading {
    font-size: 34px;
  }
  .ns-live-preview {
    height: 390px;
  }
  .ns-chat-messages {
    min-height: 420px;
  }
  .ns-bubble {
    max-width: min(300px, calc(100vw - 72px));
  }
  .ns-bubble.ns-bubble--photo {
    max-width: 160px;
  }
  .ns-bubble--user {
    align-self: flex-start;
    margin-left: 32px;
  }
  .ns-auth-modal {
    padding: 14px;
  }
  .ns-auth-dialog {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
    max-height: calc(100vh - 28px);
    overflow-y: auto;
  }
  .ns-auth-visual img {
    aspect-ratio: 6 / 2;
  }
  .ns-auth-visual-copy {
    display: none;
  }
  .ns-auth-panel {
    padding: 28px 22px 24px;
  }
  .ns-auth-title {
    font-size: 28px;
  }
  .ns-faq { padding: 0 0 58px; }
  .ns-faq-header {
    margin-bottom: 28px;
  }
  .ns-faq-layout {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .ns-faq-trigger {
    font-size: 15px;
    padding: 20px 0;
  }
  .ns-faq-card {
    position: relative;
    top: auto;
  }

  .ns-cta {
    padding: 66px 0;
  }
  .ns-cta-btn {
    width: 100%;
    justify-content: center;
    padding: 15px 24px;
  }
  .ns-footer-top,
  .ns-footer-cols {
    padding-left: 0;
    padding-right: 0;
  }
  .ns-nav-links { display: none !important; }
}

@media (min-width: 521px) and (max-width: 640px) {
  .ns-create-card {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 22px;
  }
  .ns-create-headline {
    font-size: 24px;
    white-space: normal;
  }
  .ns-create-body {
    font-size: 14px;
    line-height: 1.55;
  }
  .ns-morph-glyphs {
    display: none;
  }
  .ns-create-morph {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: calc(100% + 44px);
    height: 220px;
    margin: 28px -22px -22px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 18%);
  }
  .ns-create-morph .ns-morph-img {
    object-position: center 15%;
  }
}

@media (max-width: 900px) {
  .ns-proof-grid {
    grid-template-columns: 1fr;
  }
  .ns-faq-layout {
    grid-template-columns: 1fr;
  }
  .ns-faq-card {
    position: relative;
    top: auto;
  }
}

@media (min-width: 768px) {
  .ns-footer-cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

@media (min-width: 1024px) {
  .ns-live-grid {
    grid-template-columns: 0.85fr 1.15fr;
    height: 620px;
  }
  .ns-live-preview { min-height: 0; }
  .ns-live-preview { height: auto; }
  .ns-chat {
    min-height: 0;
    height: 100%;
  }
}

/* Premium splash */
.ns-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(237, 55, 186, 0.20), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(212, 168, 67, 0.13), transparent 34%),
    linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page-2) 100%);
  color: var(--text-primary);
  transition: opacity 0.46s ease, visibility 0.46s ease;
}

.ns-splash::before {
  content: "";
  position: absolute;
  width: min(68vw, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 180deg, transparent 0deg, rgba(237, 55, 186, 0.8) 78deg, rgba(240, 201, 106, 0.8) 128deg, transparent 210deg),
    radial-gradient(circle, transparent 61%, rgba(255,255,255,0.08) 62%, transparent 64%);
  filter: blur(0.2px);
  opacity: 0.7;
  animation: ns-splash-spin 2.6s linear infinite;
}

.ns-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
  transform: translateX(-120%);
  animation: ns-splash-sheen 1.7s ease 0.22s both;
}

.ns-splash-orbit {
  position: absolute;
  width: min(44vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 0 36px rgba(237,55,186,0.10),
    0 0 70px rgba(237,55,186,0.16);
  animation: ns-splash-pulse 1.45s ease-in-out infinite;
}

.ns-splash-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transform: translateY(8px) scale(0.96);
  opacity: 0;
  animation: ns-splash-mark-in 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.12s forwards;
}

.ns-splash-logo-img {
  display: block;
  width: min(190px, 56vw);
  height: auto;
}

.ns-splash-logo-img--dark {
  display: none;
}

.ns-splash-logo {
  font-family: var(--font);
  font-size: clamp(34px, 7vw, 72px);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--text-primary);
  text-shadow: 0 18px 48px rgba(0,0,0,0.38);
}

.ns-splash-badge {
  align-self: flex-start;
  margin-top: clamp(1px, 0.8vw, 8px);
  padding: 5px 7px;
  border-radius: 999px;
  background: var(--grad-premium);
  color: var(--text-on-premium);
  font-size: clamp(10px, 1.6vw, 14px);
  font-weight: 900;
  line-height: 1;
  box-shadow: var(--shadow-gold);
}

.ns-splash-line {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% + clamp(46px, 8vw, 78px));
  width: min(180px, 46vw);
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.12);
}

.ns-splash-line::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-line-pink);
  transform: translateX(-100%);
  animation: ns-splash-load 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.28s forwards;
}

.ns-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes ns-splash-mark-in {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ns-splash-spin {
  to { transform: rotate(360deg); }
}

@keyframes ns-splash-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.72; }
  50% { transform: scale(1.04); opacity: 1; }
}

@keyframes ns-splash-sheen {
  to { transform: translateX(120%); }
}

@keyframes ns-splash-load {
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .ns-splash,
  .ns-splash::before,
  .ns-splash::after,
  .ns-splash-orbit,
  .ns-splash-mark,
  .ns-splash-line::before {
    animation: none;
  }

  .ns-splash-mark {
    opacity: 1;
    transform: none;
  }

  .ns-splash-line::before {
    transform: none;
  }
}

/* Minimal corporate splash refinement */
.ns-splash {
  background:
    linear-gradient(180deg, var(--bg-page-2) 0%, var(--bg-page) 100%);
}

.ns-splash::before,
.ns-splash::after,
.ns-splash-orbit {
  display: none;
}

.ns-splash-mark {
  gap: 8px;
  padding: 0 22px;
  transform: translateY(6px);
  animation: ns-splash-minimal-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.08s forwards;
}

.ns-splash-logo {
  font-family: var(--font);
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 850;
  text-shadow: none;
}

.ns-splash-badge {
  margin-top: clamp(2px, 0.7vw, 6px);
  padding: 4px 7px;
  background: var(--primary-color);
  color: #ffffff;
  box-shadow: none;
}

.ns-splash-line {
  top: calc(50% + clamp(40px, 7vw, 62px));
  width: min(132px, 36vw);
  height: 1px;
  background: var(--splash-line-track);
}

.ns-splash-line::before {
  background: var(--splash-line-fill);
  animation: ns-splash-load 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

@keyframes ns-splash-minimal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Shared loading system — spinner, button busy state, panel loader, skeleton
   ========================================================================== */

/* Standalone spinner: sized by font-size, colored by --spinner-color. */
.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--spinner-color, currentColor) 30%, transparent);
  border-top-color: var(--spinner-color, currentColor);
  animation: shared-spin 0.6s linear infinite;
}

/* Busy submit button: label hides, centered spinner takes over.
   Accent CTAs have light text, so the spinner defaults to white;
   override --spinner-color on quiet/secondary controls. */
.is-busy {
  position: relative;
  pointer-events: none;
  cursor: progress;
  color: transparent !important;
}

.is-busy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1em;
  height: 1.1em;
  margin: -0.55em 0 0 -0.55em;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--spinner-color, #fff) 30%, transparent);
  border-top-color: var(--spinner-color, #fff);
  animation: shared-spin 0.6s linear infinite;
}

/* Centered loader for modal/panel bodies that fetch on open. */
.panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 120px;
  color: var(--text-secondary);
  font-size: 14px;
}

.panel-loading .spinner {
  font-size: 20px;
  --spinner-color: var(--primary-color);
}

/* Skeleton shimmer for content areas awaiting data. */
.skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--text-primary) 10%, transparent),
    transparent
  );
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes shared-spin {
  to { transform: rotate(360deg); }
}

@keyframes skeleton-shimmer {
  to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .is-busy::after {
    animation-duration: 1.1s;
  }
  .skeleton::after {
    animation: none;
  }
}