:root {
  --nazar-primary: #6C63FF;
  --nazar-danger: #D92E51;
  --nazar-success: #00C9A7;
  --gradient: linear-gradient(135deg, #6C63FF 0%, #A58CFF 50%, #6C63FF 100%);
}

html {
  scroll-padding-top: 63px;
}

body {
  padding-top: 63px;
}

ul {
  list-style: none;
  padding-left: 0px;
}

.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn-nazar {
  --bs-btn-bg: var(--nazar-primary);
  --bs-btn-border-color: var(--nazar-primary);
  --bs-btn-hover-bg: #5b53e6;
  --bs-btn-hover-border-color: #5b53e6;
  --bs-btn-active-bg: #4a44cc;
  --bs-btn-active-border-color: #4a44cc;
  color: #fff;
}

.alert-danger {
  background-color: var(--nazar-danger);
  color: #fff;
}

.alert-success {
  background-color: var(--nazar-success);
  color: #fff;
}

.badge-soft {
  background: rgba(108,99,255,.12);
  color: var(--nazar-primary);
  border: 1px solid rgba(108,99,255,.24);
}

.hero {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 5rem;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(108,99,255,.12), transparent 60%),
              radial-gradient(1000px 600px at 90% 0%, rgba(165,140,255,.12), transparent 60%);
  overflow: hidden;
}

.hero .orb {
  position: absolute;
  width: 420px; height: 420px;
  background: radial-gradient(circle at 30% 30%, #A58CFF, #6C63FF 60%, transparent 61%);
  filter: blur(35px);
  opacity: .15;
  border-radius: 50%;
  top: -120px; right: -120px;
  pointer-events: none;
}

.glass {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
}

[data-bs-theme="dark"] .glass { background: rgba(0,0,0,.2); border-color: rgba(255,255,255,.08); }

.feature-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 12px; background: rgba(108,99,255,.12); color: var(--nazar-primary);
  border: 1px solid rgba(108,99,255,.24);
}

.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.08); }

.marquee {
  display: flex; gap: 3rem; overflow: hidden; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.marquee .track { display: flex; gap: 3rem; animation: scroll 30s linear infinite; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.code-card { background: #0f1226; color: #c9d1d9; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); }
.code-card .lead { color: #9ca3af; }

.divider-x { height: 1px; background: linear-gradient(90deg, transparent, rgba(0,0,0,.1), transparent); }
[data-bs-theme="dark"] .divider-x { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }

.pricing .card { border: 1px solid rgba(108,99,255,.25); }
.pricing .popular { border-width: 2px; }

.avatar {
  width: 44px; height: 44px; border-radius: 50%; background: #e5e7eb; display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  color: #374151;
}

.cta {
  background: var(--gradient);
  color: #fff;
}

.link-arrow { transition: transform .2s ease; }
.link-arrow:hover { transform: translateX(4px); }

.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1040; display: none;
}