/* ════════════════════════════════════════════════════════════
   ПОДБОР ПЛЁНКИ — DESIGN SYSTEM
   Aesthetic: techwear · cyberpunk refined · premium
   Inspired by: Linear, Spotify, Apple Wallet, Vercel
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Spectrum: Deep Void ──────────────────────────────── */
  --nv-void:       #07050d;   /* самый глубокий — фон body */
  --nv-abyss:      #0d0a18;   /* основной фон поверхностей */
  --nv-night:      #14102a;   /* фон карточек / поднятые поверхности */
  --nv-shadow:     #1c1736;   /* hover / активные состояния */

  /* ── Neon Accents ──────────────────────────────────────── */
  --nv-violet:     #8b5cff;   /* main violet — на 5% мягче чем было */
  --nv-violet-hi:  #a78bff;   /* hover */
  --nv-violet-lo:  #6b3df0;   /* pressed */
  --nv-magenta:    #ff3ec9;   /* акцент 2 — для редкого использования */
  --nv-electric:   #00e5ff;   /* электрик голубой — данные / интерактив */
  --nv-lime:       #b4ff39;   /* success / положительная динамика */
  --nv-amber:      #ffb01f;   /* warning */
  --nv-crimson:    #ff3563;   /* error */

  /* ── Strokes & Dividers ────────────────────────────────── */
  --nv-line:       rgba(167,139,255,0.08);
  --nv-line-hi:    rgba(167,139,255,0.16);
  --nv-line-vivid: rgba(139,92,255,0.32);

  /* ── Text ──────────────────────────────────────────────── */
  --nv-text:       #f4f1ff;            /* primary — почти белый с фиолетовым тоном */
  --nv-text-mute:  rgba(244,241,255,0.62);
  --nv-text-dim:   rgba(244,241,255,0.38);
  --nv-text-low:   rgba(244,241,255,0.22);

  /* ── Gradients ─────────────────────────────────────────── */
  --nv-gradient-violet:   linear-gradient(135deg, #8b5cff 0%, #b347ff 50%, #ff3ec9 100%);
  --nv-gradient-violet-2: linear-gradient(135deg, #8b5cff 0%, #6b3df0 100%);
  --nv-gradient-electric: linear-gradient(135deg, #00e5ff 0%, #8b5cff 100%);
  --nv-gradient-mesh:
    radial-gradient(at 0% 0%,   rgba(139,92,255,0.18) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(255,62,201,0.10) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(0,229,255,0.08) 0px, transparent 50%);

  /* ── Shadows ───────────────────────────────────────────── */
  --nv-shadow-sm:   0 1px 2px rgba(0,0,0,0.4);
  --nv-shadow-md:   0 4px 16px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --nv-shadow-lg:   0 16px 48px rgba(0,0,0,0.5), 0 4px 12px rgba(0,0,0,0.4);
  --nv-shadow-xl:   0 32px 80px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.4);
  --nv-glow-violet: 0 0 32px rgba(139,92,255,0.4);
  --nv-glow-violet-sm: 0 0 16px rgba(139,92,255,0.3);
  --nv-glow-electric:  0 0 24px rgba(0,229,255,0.4);

  /* ── Radii ─────────────────────────────────────────────── */
  --nv-r-xs: 6px;
  --nv-r-sm: 10px;
  --nv-r-md: 14px;
  --nv-r-lg: 20px;
  --nv-r-xl: 28px;
  --nv-r-full: 999px;

  /* ── Spacing (8pt grid) ────────────────────────────────── */
  --nv-1: 4px;
  --nv-2: 8px;
  --nv-3: 12px;
  --nv-4: 16px;
  --nv-5: 24px;
  --nv-6: 32px;
  --nv-7: 48px;
  --nv-8: 64px;
  --nv-9: 96px;

  /* ── Typography ────────────────────────────────────────── */
  --nv-font-display: 'Inter', system-ui, sans-serif;
  --nv-font-body:    'Inter', system-ui, sans-serif;
  --nv-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --nv-text-xs:   0.72rem;   /* labels, badges */
  --nv-text-sm:   0.84rem;   /* secondary */
  --nv-text-base: 0.94rem;   /* body */
  --nv-text-md:   1.06rem;   /* large body */
  --nv-text-lg:   1.32rem;   /* h3 */
  --nv-text-xl:   1.84rem;   /* h2 */
  --nv-text-2xl:  2.6rem;    /* h1 */
  --nv-text-3xl:  4.2rem;    /* hero */

  /* ── Motion ────────────────────────────────────────────── */
  --nv-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --nv-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --nv-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index scale ─────────────────────────────────────── */
  --nv-z-base:    1;
  --nv-z-nav:    100;
  --nv-z-modal:  500;
  --nv-z-toast: 1000;
}

/* ════════════════════════════════════════════════════════════
   RESET + BASE
   ════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  font-weight: 400;
  line-height: 1.55;
  color: var(--nv-text);
  background: var(--nv-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;

  /* Атмосферный фон с мешем */
  background-image: var(--nv-gradient-mesh);
  background-attachment: fixed;
}

/* Atmospheric noise overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4;
  z-index: 0;
  mix-blend-mode: overlay;
}

main, section, article { position: relative; z-index: var(--nv-z-base); }

::selection { background: var(--nv-violet); color: #fff; }

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nv-font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--nv-3);
  color: var(--nv-text);
}

.nv-hero {
  font-size: clamp(2.2rem, 7vw, var(--nv-text-3xl));
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.nv-h1 { font-size: clamp(1.8rem, 5vw, var(--nv-text-2xl)); }
.nv-h2 { font-size: clamp(1.4rem, 3.5vw, var(--nv-text-xl)); }
.nv-h3 { font-size: clamp(1.1rem, 2.5vw, var(--nv-text-lg)); }

.nv-mono {
  font-family: var(--nv-font-mono);
  letter-spacing: -0.01em;
}

.nv-label {
  display: inline-block;
  font-family: var(--nv-font-mono);
  font-size: var(--nv-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--nv-text-mute);
}

.nv-eyebrow {
  display: inline-flex; align-items: center; gap: var(--nv-2);
  font-family: var(--nv-font-mono);
  font-size: var(--nv-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--nv-violet);
  padding: 6px 14px;
  background: rgba(139,92,255,0.08);
  border: 1px solid var(--nv-line-vivid);
  border-radius: var(--nv-r-full);
}

.nv-eyebrow::before {
  content: ''; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nv-violet);
  box-shadow: 0 0 8px var(--nv-violet);
  animation: nv-pulse 2s ease-in-out infinite;
}

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

a { color: var(--nv-violet-hi); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--nv-violet); }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.nv-btn {
  --pad-y: 13px;
  --pad-x: 22px;

  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--nv-2);
  padding: var(--pad-y) var(--pad-x);
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--nv-r-md);
  cursor: pointer;
  transition: transform 0.15s var(--nv-ease), background 0.2s, border-color 0.2s, box-shadow 0.25s;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.nv-btn:active { transform: scale(0.96); }

.nv-btn--primary {
  background: var(--nv-gradient-violet-2);
  color: #fff;
  box-shadow: var(--nv-glow-violet-sm), 0 8px 24px rgba(139,92,255,0.25);
}
.nv-btn--primary:hover {
  box-shadow: var(--nv-glow-violet), 0 12px 32px rgba(139,92,255,0.4);
  transform: translateY(-1px);
}

.nv-btn--secondary {
  background: var(--nv-night);
  color: var(--nv-text);
  border-color: var(--nv-line-hi);
}
.nv-btn--secondary:hover {
  background: var(--nv-shadow);
  border-color: var(--nv-line-vivid);
}

.nv-btn--ghost {
  background: transparent;
  color: var(--nv-text-mute);
  border-color: transparent;
}
.nv-btn--ghost:hover {
  background: var(--nv-line);
  color: var(--nv-text);
}

.nv-btn--outline {
  background: transparent;
  color: var(--nv-violet-hi);
  border-color: var(--nv-line-vivid);
}
.nv-btn--outline:hover {
  background: rgba(139,92,255,0.08);
  border-color: var(--nv-violet);
}

.nv-btn--electric {
  background: linear-gradient(135deg, var(--nv-electric), #00b8d4);
  color: #001318;
  font-weight: 800;
}

.nv-btn--lg { --pad-y: 16px; --pad-x: 32px; font-size: var(--nv-text-base); border-radius: var(--nv-r-lg); }
.nv-btn--sm { --pad-y: 8px; --pad-x: 14px; font-size: var(--nv-text-xs); }
.nv-btn--icon { padding: 10px; min-width: 40px; }
.nv-btn--full { width: 100%; }

.nv-btn[disabled], .nv-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   SURFACES (Cards)
   ════════════════════════════════════════════════════════════ */
.nv-card {
  background: var(--nv-night);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-lg);
  padding: var(--nv-5);
  transition: border-color 0.25s, transform 0.25s var(--nv-ease), box-shadow 0.3s;
}
.nv-card:hover {
  border-color: var(--nv-line-hi);
}

.nv-card--interactive {
  cursor: pointer;
}
.nv-card--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--nv-line-vivid);
  box-shadow: var(--nv-shadow-lg), var(--nv-glow-violet-sm);
}

.nv-card--glass {
  background: rgba(20, 16, 42, 0.5);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(244,241,255,0.06);
}

.nv-card--featured {
  background:
    linear-gradient(135deg, rgba(139,92,255,0.08), rgba(255,62,201,0.04)),
    var(--nv-night);
  border: 1px solid var(--nv-line-vivid);
}

.nv-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--nv-3);
  margin-bottom: var(--nv-4);
}
.nv-card-title {
  font-family: var(--nv-font-display);
  font-size: var(--nv-text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════ */
.nv-input, .nv-select, .nv-textarea {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-base);
  color: var(--nv-text);
  background: var(--nv-abyss);
  border: 1px solid var(--nv-line);
  border-radius: var(--nv-r-md);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.nv-input:focus, .nv-select:focus, .nv-textarea:focus {
  outline: none;
  border-color: var(--nv-violet);
  background: var(--nv-night);
  box-shadow: 0 0 0 4px rgba(139,92,255,0.12);
}
.nv-input::placeholder, .nv-textarea::placeholder { color: var(--nv-text-low); }

.nv-field {
  display: flex; flex-direction: column; gap: 6px;
}
.nv-field-label {
  font-family: var(--nv-font-mono);
  font-size: var(--nv-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nv-text-mute);
}
.nv-field-hint {
  font-size: var(--nv-text-xs);
  color: var(--nv-text-dim);
  margin-top: 2px;
}

/* Search input */
.nv-search {
  position: relative;
}
.nv-search input {
  padding-left: 44px;
}
.nv-search::before {
  content: '';
  position: absolute;
  top: 50%; left: 16px;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A78BFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.5' y2='16.5'/></svg>") center/contain no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════
   BADGES & CHIPS
   ════════════════════════════════════════════════════════════ */
.nv-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  font-family: var(--nv-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--nv-r-full);
  background: rgba(139,92,255,0.12);
  color: var(--nv-violet-hi);
  border: 1px solid rgba(139,92,255,0.2);
}
.nv-badge--success { background: rgba(180,255,57,0.1); color: var(--nv-lime); border-color: rgba(180,255,57,0.25); }
.nv-badge--warn    { background: rgba(255,176,31,0.1); color: var(--nv-amber); border-color: rgba(255,176,31,0.25); }
.nv-badge--error   { background: rgba(255,53,99,0.1); color: var(--nv-crimson); border-color: rgba(255,53,99,0.25); }
.nv-badge--electric{ background: rgba(0,229,255,0.1); color: var(--nv-electric); border-color: rgba(0,229,255,0.25); }

/* Chip-toggle (фильтры) */
.nv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--nv-font-body);
  font-size: var(--nv-text-sm);
  font-weight: 600;
  color: var(--nv-text-mute);
  background: transparent;
  border: 1px solid var(--nv-line-hi);
  border-radius: var(--nv-r-full);
  cursor: pointer;
  transition: all 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.nv-chip:hover {
  color: var(--nv-text);
  border-color: var(--nv-line-vivid);
  background: rgba(139,92,255,0.06);
}
.nv-chip--active {
  background: var(--nv-violet);
  color: #fff;
  border-color: var(--nv-violet);
  box-shadow: var(--nv-glow-violet-sm);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT HELPERS
   ════════════════════════════════════════════════════════════ */
.nv-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--nv-5);
}
.nv-container--narrow { max-width: 880px; }

.nv-section {
  padding: var(--nv-9) 0;
}
@media (max-width: 768px) {
  .nv-section { padding: var(--nv-7) 0; }
  .nv-container { padding: 0 var(--nv-4); }
}

.nv-stack {
  display: flex; flex-direction: column;
}
.nv-stack-2 { gap: var(--nv-2); }
.nv-stack-3 { gap: var(--nv-3); }
.nv-stack-4 { gap: var(--nv-4); }
.nv-stack-5 { gap: var(--nv-5); }
.nv-stack-6 { gap: var(--nv-6); }

.nv-grid {
  display: grid;
  gap: var(--nv-5);
}
.nv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.nv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nv-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nv-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
@media (max-width: 900px) {
  .nv-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .nv-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .nv-grid--4, .nv-grid--3, .nv-grid--2 { grid-template-columns: 1fr; }
  .nv-grid { gap: var(--nv-4); }
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes nv-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

@keyframes nv-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes nv-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes nv-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.nv-animate-up      { animation: nv-fade-up 0.6s var(--nv-ease-out) both; }
.nv-animate-in      { animation: nv-fade-in 0.4s ease-out both; }
.nv-animate-delay-1 { animation-delay: 0.08s; }
.nv-animate-delay-2 { animation-delay: 0.16s; }
.nv-animate-delay-3 { animation-delay: 0.24s; }
.nv-animate-delay-4 { animation-delay: 0.32s; }
.nv-animate-delay-5 { animation-delay: 0.40s; }

.nv-shimmer {
  background: linear-gradient(
    90deg,
    var(--nv-night) 0%,
    var(--nv-shadow) 50%,
    var(--nv-night) 100%
  );
  background-size: 200% 100%;
  animation: nv-shimmer 1.4s linear infinite;
}

/* ════════════════════════════════════════════════════════════
   UTILITIES
   ════════════════════════════════════════════════════════════ */
.nv-flex { display: flex; }
.nv-flex-center { display: flex; align-items: center; justify-content: center; }
.nv-flex-between { display: flex; align-items: center; justify-content: space-between; }
.nv-gap-2 { gap: var(--nv-2); }
.nv-gap-3 { gap: var(--nv-3); }
.nv-gap-4 { gap: var(--nv-4); }

.nv-text-mute  { color: var(--nv-text-mute); }
.nv-text-dim   { color: var(--nv-text-dim); }
.nv-text-violet { color: var(--nv-violet-hi); }
.nv-text-electric { color: var(--nv-electric); }
.nv-text-lime  { color: var(--nv-lime); }
.nv-text-center { text-align: center; }
.nv-text-bold  { font-weight: 700; }
.nv-text-mono  { font-family: var(--nv-font-mono); }

.nv-divider {
  height: 1px;
  background: var(--nv-line);
  border: none;
  margin: var(--nv-5) 0;
}

.nv-divider--vivid { background: var(--nv-line-vivid); }

/* Glow text accent */
.nv-glow {
  text-shadow: 0 0 24px rgba(139,92,255,0.6);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--nv-abyss); }
::-webkit-scrollbar-thumb {
  background: var(--nv-shadow);
  border-radius: var(--nv-r-full);
  border: 3px solid var(--nv-abyss);
}
::-webkit-scrollbar-thumb:hover { background: var(--nv-line-vivid); }

/* Focus rings */
:focus-visible {
  outline: 2px solid var(--nv-violet);
  outline-offset: 2px;
  border-radius: var(--nv-r-sm);
}

/* ════════════════════════════════════════════════════════════
   BACKWARD COMPAT — старые переменные через :root тоже
   Чтобы не ломать существующие страницы которые используют
   --primary, --text, --muted etc.
   ════════════════════════════════════════════════════════════ */
:root {
  --primary:    var(--nv-violet);
  --primary-2:  var(--nv-magenta);
  --text:       var(--nv-text);
  --muted:      var(--nv-text-mute);
  --bg:         var(--nv-void);
  --bg-2:       var(--nv-abyss);
  --panel:      var(--nv-night);
  --stroke:     var(--nv-line-hi);
  --success:    var(--nv-lime);
  --danger:     var(--nv-crimson);
  --cyan:       var(--nv-electric);
  --radius:     var(--nv-r-lg);
}


/* ════════════════════════════════════════════════════════════
   ПЕРЕОПРЕДЕЛЕНИЯ — апгрейд старых стилей проекта
   ════════════════════════════════════════════════════════════ */

body {
  font-family: var(--nv-font-body) !important;
  background: var(--nv-void) !important;
  color: var(--nv-text) !important;
}

/* Заголовки получают новый шрифт */
h1, h2, h3, h4, h5, h6,
.hero-copy h1,
.section-title,
.brand-card__name,
.detailing-card__name {
  font-family: var(--nv-font-display) !important;
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* Eyebrow / лейблы */
.eyebrow,
.label,
.section-eyebrow {
  font-family: var(--nv-font-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.18em !important;
  font-size: 0.72rem !important;
  color: var(--nv-violet-hi) !important;
}

/* Карточки получают новый радиус и фон */
.card,
.neon-card,
.brand-card,
.detailing-card,
.product-card,
.film-card {
  background: var(--nv-night) !important;
  border-color: var(--nv-line) !important;
  border-radius: var(--nv-r-lg) !important;
  transition: border-color 0.25s, transform 0.25s cubic-bezier(0.22,0.61,0.36,1) !important;
}

.brand-card:hover,
.detailing-card:hover,
.product-card:hover {
  border-color: var(--nv-line-vivid) !important;
  transform: translateY(-3px);
  box-shadow: var(--nv-shadow-lg), var(--nv-glow-violet-sm);
}

/* Кнопки primary */
.btn-primary,
.btn--primary,
button[type="submit"]:not(.btn-ghost):not(.btn-danger),
.cta-button,
.hero-cta button {
  background: var(--nv-gradient-violet-2) !important;
  border: none !important;
  border-radius: var(--nv-r-md) !important;
  font-family: var(--nv-font-display) !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: var(--nv-glow-violet-sm), 0 8px 24px rgba(139,92,255,0.25);
  transition: transform 0.15s, box-shadow 0.25s;
}

.btn-primary:hover,
.btn--primary:hover,
.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--nv-glow-violet), 0 12px 32px rgba(139,92,255,0.4);
}

/* Кнопки secondary / ghost */
.btn-ghost,
.btn--ghost {
  background: transparent !important;
  border: 1px solid var(--nv-line-hi) !important;
  border-radius: var(--nv-r-md) !important;
  color: var(--nv-text-mute) !important;
  font-family: var(--nv-font-display) !important;
}
.btn-ghost:hover {
  background: var(--nv-line) !important;
  color: var(--nv-text) !important;
  border-color: var(--nv-line-vivid) !important;
}

/* Инпуты */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
input:not([type]),
select,
textarea {
  background: var(--nv-abyss) !important;
  border: 1px solid var(--nv-line) !important;
  border-radius: var(--nv-r-md) !important;
  color: var(--nv-text) !important;
  font-family: var(--nv-font-body) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}
input:focus, select:focus, textarea:focus {
  outline: none !important;
  border-color: var(--nv-violet) !important;
  box-shadow: 0 0 0 4px rgba(139,92,255,0.12) !important;
}

/* Чипы / фильтры */
.filter-btn,
.det-filter-btn,
.chip {
  border-radius: var(--nv-r-full) !important;
  font-family: var(--nv-font-body) !important;
  font-weight: 600;
  transition: all 0.18s !important;
}
.filter-btn.active,
.det-filter-btn.active,
.chip.active {
  background: var(--nv-violet) !important;
  color: #fff !important;
  border-color: var(--nv-violet) !important;
  box-shadow: var(--nv-glow-violet-sm) !important;
}

/* Бейджи */
.badge,
.tag,
.detailing-card__badge {
  font-family: var(--nv-font-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--nv-r-full) !important;
}

/* Bottom nav — апгрейд иконок и активного состояния */
.bottom-nav {
  background: rgba(13, 10, 24, 0.92) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  border-top: 1px solid var(--nv-line-hi) !important;
}
.bn-item--active {
  color: var(--nv-text) !important;
}
.bn-item--active::before {
  background: var(--nv-gradient-violet) !important;
  box-shadow: 0 0 12px var(--nv-violet) !important;
}

/* Topbar */
.topbar {
  background: rgba(13, 10, 24, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--nv-line) !important;
}

/* Mobile top */
.mobile-top {
  background: rgba(13, 10, 24, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
}

/* Drawer */
.drawer {
  background: linear-gradient(180deg, var(--nv-night) 0%, var(--nv-abyss) 100%) !important;
  border-top-color: var(--nv-line-vivid) !important;
}
.drawer-item--active {
  background: rgba(139, 92, 255, 0.12) !important;
  border-left: 3px solid var(--nv-violet) !important;
}

/* Скроллбар */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--nv-abyss); }
::-webkit-scrollbar-thumb {
  background: var(--nv-line-hi);
  border-radius: var(--nv-r-full);
  border: 2px solid var(--nv-abyss);
}
::-webkit-scrollbar-thumb:hover { background: var(--nv-line-vivid); }

/* Селекшен */
::selection { background: var(--nv-violet) !important; color: #fff !important; }

/* Атмосферный фон — мягкий мэш на body */
body {
  background-image: var(--nv-gradient-mesh) !important;
  background-attachment: fixed !important;
}