/* ── Tokens ── */
:root {
  --bg:        #060f1c;
  --card-bg:   rgba(9, 20, 40, 0.82);
  --card-b:    rgba(255,255,255,.07);
  --blue:      #4f9cf9;
  --violet:    #a78bfa;
  --emerald:   #34d399;
  --gold:      #fbbf24;
  --tg:        #2aabee;
  --ig-a:      #f09433;
  --ig-b:      #bc1888;
  --text:      #e8f0fe;
  --muted:     rgba(180,206,255,.55);
  --step1:     #4f9cf9;
  --step2:     #a78bfa;
  --step3:     #34d399;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* ── Starfield ── */
#nr-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.nr-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: nr-twinkle var(--d, 3s) ease-in-out infinite alternate;
  opacity: 0;
}
@keyframes nr-twinkle {
  0%   { opacity: 0;   transform: scale(.7); }
  100% { opacity: var(--o, .7); transform: scale(1); }
}

/* ── Nebulae ── */
.nr-neb {
  position: fixed;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.nr-neb1 {
  width: 480px; height: 320px;
  background: radial-gradient(ellipse, rgba(79,156,249,.18), transparent 70%);
  top: -60px; left: -80px;
}
.nr-neb2 {
  width: 420px; height: 420px;
  background: radial-gradient(ellipse, rgba(167,139,250,.14), transparent 70%);
  bottom: 60px; right: -100px;
}
.nr-neb3 {
  width: 300px; height: 200px;
  background: radial-gradient(ellipse, rgba(52,211,153,.10), transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── Page wrap ── */
.nr-page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 64px;
  gap: 0;
}

/* ── Logo ── */
.nr-logo {
  margin-bottom: 28px;
  position: relative;
  display: inline-block;
}
.nr-logo-ring {
  width: 96px; height: 96px;
  border-radius: 50%;
  padding: 3px;
  background: conic-gradient(from 0deg, var(--blue), var(--violet), var(--gold), var(--emerald), var(--blue));
  animation: nr-spin 8s linear infinite;
  box-shadow: 0 0 32px rgba(79,156,249,.3);
}
.nr-logo-inner {
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.nr-logo-inner img {
  width: 76px; height: 76px;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(79,156,249,.4));
}
@keyframes nr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Header text ── */
.nr-heading {
  font-size: clamp(1.25rem, 4vw, 1.65rem);
  font-weight: 700;
  text-align: center;
  color: var(--text);
  letter-spacing: -.01em;
  text-wrap: balance;
  margin-bottom: 6px;
}
.nr-sub {
  font-size: .9rem;
  color: var(--muted);
  text-align: center;
  margin-bottom: 36px;
  line-height: 1.55;
}

/* ── Main card ── */
.nr-card {
  width: 100%;
  max-width: 560px;
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-b);
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 24px 64px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ── Alert ── */
.nr-alert {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(239,68,68,.09);
  border: 1px solid rgba(239,68,68,.25);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 24px;
  color: #fca5a5;
  font-size: .875rem;
  line-height: 1.5;
}
.nr-alert i { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }

/* ── Steps ── */
.nr-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nr-step {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  padding: 22px 22px 22px 20px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.nr-step:hover {
  border-color: rgba(255,255,255,.13);
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
}

/* left accent bar */
.nr-step::before {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  border-radius: 2px;
  background: var(--step-color);
}

/* ghost number */
.nr-step::after {
  content: var(--step-n);
  position: absolute;
  right: -4px; top: 50%;
  transform: translateY(-50%);
  font-size: 5rem;
  font-weight: 900;
  color: var(--step-color);
  opacity: .07;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.nr-step1 { --step-color: var(--step1); --step-n: "1"; }
.nr-step2 { --step-color: var(--step2); --step-n: "2"; }
.nr-step3 { --step-color: var(--step3); --step-n: "3"; }

/* icon badge */
.nr-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(var(--step-rgb), .12);
  flex-shrink: 0;
  font-size: 1.35rem;
}
.nr-step1 .nr-icon { background: rgba(79,156,249,.14); color: var(--step1); }
.nr-step2 .nr-icon { background: rgba(167,139,250,.14); color: var(--step2); }
.nr-step3 .nr-icon { background: rgba(52,211,153,.14);  color: var(--step3); }

/* content */
.nr-body { flex: 1; min-width: 0; }
.nr-step-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--step-color);
  margin-bottom: 4px;
}
.nr-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.3;
}
.nr-step-desc {
  font-size: .84rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 14px;
}
.nr-step-desc strong { color: rgba(220,232,255,.85); }
.nr-step-desc u { text-underline-offset: 3px; text-decoration-color: rgba(220,232,255,.3); }

/* buttons */
.nr-btns { display: flex; gap: 8px; flex-wrap: wrap; }

.nr-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: .84rem; font-weight: 600;
  text-decoration: none;
  border: none; cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.nr-btn i { font-size: 1.05rem; }

/* bot button */
.nr-btn-bot {
  background: rgba(79,156,249,.14);
  border: 1px solid rgba(79,156,249,.35);
  color: #93c5fd;
}
.nr-btn-bot:hover {
  background: rgba(79,156,249,.26);
  color: #bfdbfe;
  transform: translateY(-1px);
}

/* tg button */
.nr-btn-tg {
  background: var(--tg);
  color: #fff;
}
.nr-btn-tg:hover {
  background: #1a9bd5;
  transform: translateY(-1px);
}

/* ig button */
.nr-btn-ig {
  background: linear-gradient(135deg, var(--ig-a), var(--ig-b));
  color: #fff;
}
.nr-btn-ig:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* ── Divider ── */
.nr-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0;
  color: rgba(255,255,255,.2);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.nr-divider::before, .nr-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}

/* ── Telegram widget panel ── */
.nr-tg-panel {
  background: linear-gradient(135deg, rgba(42,171,238,.1), rgba(79,156,249,.06));
  border: 1px solid rgba(42,171,238,.2);
  border-radius: 16px;
  padding: 22px 22px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nr-tg-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(42,171,238,.12) 0%, transparent 60%);
  pointer-events: none;
}
.nr-tg-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  position: relative;
}
.nr-tg-hint {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
  position: relative;
}
.nr-widget-wrap {
  display: flex;
  justify-content: center;
  position: relative;
}

/* pulse ring around widget */
.nr-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 180px; height: 54px;
  border-radius: 12px;
  box-shadow: 0 0 0 0 rgba(42,171,238,.5);
  animation: nr-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes nr-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(42,171,238,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(42,171,238,.0); }
  100% { box-shadow: 0 0 0 0 rgba(42,171,238,.0); }
}

/* ── Navbar override (dark bg uchun) ── */

/* Mobile hamburger tugmasi */
.navbar .navbar-toggler {
  border-color: rgba(255,255,255,.25) !important;
  filter: invert(1) !important;
}
.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(79,156,249,.35) !important;
}

/* Mobile ochilganda menu foni */
.navbar .navbar-collapse.show,
.navbar .navbar-collapse.collapsing {
  background: rgba(6, 15, 28, 0.97) !important;
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 16px 16px;
  padding: 12px 16px;
  margin-top: 8px;
}


.scroll-header {
  background: rgba(6, 15, 28, 0.92) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.07) !important;
}
.scroll-header .nav-link,
.scroll-header .navbar-brand,
.scroll-header .lang-change a,
.scroll-header .lang-change span {
  color: rgba(220, 235, 255, .85) !important;
}
.scroll-header .nav-link:hover,
.scroll-header .lang-change a:hover {
  color: #fff !important;
}

/* page dastlabki load da (scroll-header class qo'shilishidan oldin) */
.navbar {
  background: rgba(6, 15, 28, 0.85) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.navbar .nav-link,
.navbar-brand,
.lang-change a,
.lang-change span,
.navbar .nav-link span {
  color: rgba(220, 235, 255, .85) !important;
}
.navbar .nav-link:hover {
  color: #fff !important;
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .nr-card { padding: 24px 16px; border-radius: 18px; }
  .nr-step { padding: 18px 16px 18px 16px; gap: 14px; }
  .nr-step::after { font-size: 3.5rem; }
  .nr-heading { font-size: 1.2rem; }
  .nr-logo-ring { width: 80px; height: 80px; }
  .nr-logo-inner img { width: 62px; height: 62px; }
}