/* ============================================================
   NOVIN AUTO GROUP — Main Styles
   ============================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-fa);
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--c-gold); color: var(--c-bg); }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
svg, img { display: block; }

/* ── Film Grain overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9000;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px;
}

/* ── Progress bar ── */
#pg-bar { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9100; pointer-events: none; }
#pg-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--c-gold-d), var(--c-gold), var(--c-gold-l));
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(201,168,76,0.5);
}

/* ── Custom Cursor ── */
@media (hover: hover) and (pointer: fine) {
  body { cursor: none; }

  #cur-dot {
    position: fixed; top: 0; left: 0; z-index: 9998;
    width: 6px; height: 6px;
    background: var(--c-gold);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
                background 0.3s, opacity 0.3s;
    will-change: left, top;
  }
  #cur-ring {
    position: fixed; top: 0; left: 0; z-index: 9997;
    width: 36px; height: 36px;
    border: 1.5px solid rgba(201,168,76,0.35);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out),
                border-color 0.3s, opacity 0.4s;
    will-change: left, top;
  }
  body.cur-hover #cur-dot  { width: 12px; height: 12px; background: #fff; }
  body.cur-hover #cur-ring { width: 54px; height: 54px; border-color: rgba(201,168,76,0.6); }
  body.cur-click #cur-dot  { width: 4px; height: 4px; opacity: 0.6; }
  body.cur-click #cur-ring { width: 28px; height: 28px; opacity: 0.4; }
}

/* ── Social Sidebar ── */
#social-bar {
  position: fixed;
  left: clamp(14px, 2.2vw, 26px);
  bottom: clamp(28px, 4vw, 52px);
  z-index: 700;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-16px);
  transition: opacity 0.7s var(--ease-out) 1.2s,
              transform 0.7s var(--ease-out) 1.2s;
}
[dir=ltr] #social-bar { left: auto; right: clamp(14px, 2.2vw, 26px); transform: translateX(16px); }
#social-bar.visible { opacity: 1; transform: translateX(0); }
.sb-link {
  position: relative;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.sb-link:hover { transform: translateY(-3px) scale(1.1); }
.sb-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.sb-wa  { background: #25D366; }
.sb-ble { background: #2196F3; }
.sb-ig  { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.sb-wa:hover  { box-shadow: 0 4px 20px rgba(37,211,102,0.45); }
.sb-ble:hover { box-shadow: 0 4px 20px rgba(33,150,243,0.4); }
.sb-ig:hover  { box-shadow: 0 4px 20px rgba(214,36,159,0.4); }
/* pulse ring */
.sb-link::before {
  content: ''; position: absolute; inset: -4px;
  border-radius: 50%; border: 1px solid currentColor; opacity: 0;
  animation: sb-pulse 2.8s ease-out infinite;
}
.sb-wa::before  { color: #25D366; }
.sb-ble::before { color: #2196F3; }
.sb-ig::before  { display: none; }
@keyframes sb-pulse { 0%{transform:scale(1);opacity:.5} 100%{transform:scale(1.6);opacity:0} }
/* tooltip */
.sb-tip {
  position: absolute; left: calc(100% + 11px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  background: var(--c-bg4); border: 1px solid rgba(201,168,76,0.15);
  color: var(--c-text2); font-family: var(--f-fa); font-size: 13px;
  padding: 5px 10px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
[dir=ltr] .sb-tip { left: auto; right: calc(100% + 11px); transform: translateY(-50%) translateX(4px); }
.sb-link:hover .sb-tip { opacity: 1; transform: translateY(-50%) translateX(0); }
.sb-line { width: 1px; height: 36px; background: linear-gradient(to bottom, var(--c-rim), transparent); }

/* ── Live Toast ── */
#live-toast {
  position: fixed;
  right: clamp(14px, 2.2vw, 26px);
  bottom: clamp(28px, 4vw, 52px);
  z-index: 700;
  background: var(--c-bg4);
  border: 1px solid rgba(201,168,76,0.18);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 11px;
  max-width: 280px;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  pointer-events: none;
}
[dir=ltr] #live-toast { right: auto; left: clamp(14px, 2.2vw, 26px); }
#live-toast.show { opacity: 1; transform: translateY(0); pointer-events: all; }
.lt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-green); flex-shrink: 0; animation: lt-blink 1.8s ease-in-out infinite; }
@keyframes lt-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.lt-body { flex: 1; }
.lt-title { font-size: 13px; font-weight: 400; color: var(--c-text); line-height: 1.4; }
.lt-sub   { font-family: var(--f-mono); font-size: 11px; color: var(--c-text3); letter-spacing: 0.06em; margin-top: 1px; }
.lt-close { background: none; border: none; color: var(--c-text3); font-size: 14px; cursor: pointer; padding: 0 2px; margin-right: auto; line-height: 1; }
[dir=ltr] .lt-close { margin-right: 0; margin-left: auto; }
.lt-close:hover { color: var(--c-text2); }
@media (max-width: 520px) { #live-toast { display: none; } }

/* ── Navigation ── */
#main-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px var(--pad-x);
  transition: background 0.5s var(--ease-out), padding 0.5s var(--ease-out), border-color 0.5s;
  border-bottom: 1px solid transparent;
}
#main-nav.scrolled {
  background: rgba(8,12,23,0.95);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  padding-top: 15px; padding-bottom: 15px;
  border-color: rgba(201,168,76,0.07);
}
.nav-brand { display: flex; flex-direction: column; gap: 3px; }
.nav-brand-name { font-size: 15px; font-weight: 500; letter-spacing: 0.03em; color: var(--c-text); }
.nav-brand-tag { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-gold); }
.nav-links { display: flex; gap: 30px; list-style: none; }
.nav-links a {
  font-size: 13.5px; font-weight: 300; color: var(--c-text3); letter-spacing: 0.03em;
  transition: color 0.25s; position: relative; padding-bottom: 3px;
}
.nav-links a::after {
  content: ''; position: absolute; bottom: 0; right: 0; width: 0; height: 1px;
  background: var(--c-gold); transition: width 0.35s var(--ease-out);
}
[dir=ltr] .nav-links a::after { right: auto; left: 0; }
.nav-links a:hover, .nav-links a.active { color: var(--c-text); }
.nav-links a.active::after, .nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 16px; }
.lang-group { display: flex; gap: 0; }
.lang-group button {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 8px; color: var(--c-text4);
  border-right: 1px solid var(--c-rim);
  transition: color 0.2s;
}
[dir=ltr] .lang-group button { border-right: none; border-left: 1px solid var(--c-rim); }
.lang-group button:first-child { border: none; }
.lang-group button.active { color: var(--c-gold); }
.lang-group button:hover { color: var(--c-text); }
.nav-cta {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.06em;
  color: var(--c-gold); border: 1px solid rgba(201,168,76,0.35);
  padding: 12px 20px; position: relative; overflow: hidden;
  transition: color 0.3s var(--ease-out);
}
.nav-cta::before {
  content: ''; position: absolute; inset: 0; background: var(--c-gold);
  transform: translateY(101%); transition: transform 0.35s var(--ease-out);
}
.nav-cta:hover { color: var(--c-bg); }
.nav-cta:hover::before { transform: translateY(0); }
.nav-cta span { position: relative; z-index: 1; }
.nav-burger { display: none; flex-direction: column; gap: 5px; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--c-text); transition: all 0.4s; }
@media (max-width: 900px) { .nav-links { display: none; } }
@media (max-width: 600px) { .nav-cta { display: none; } .nav-burger { display: flex; } }
/* Mobile overlay */
#mob-nav {
  position: fixed; inset: 0; z-index: 790;
  background: rgba(8,12,23,0.99);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease-out);
}
#mob-nav.open { opacity: 1; pointer-events: all; }
#mob-nav a {
  font-size: clamp(28px, 6vw, 44px); font-weight: 200; color: var(--c-text);
  transition: color 0.25s;
}
#mob-nav a:hover { color: var(--c-gold); }
.mob-close { position: absolute; top: 24px; right: 24px; font-size: 24px; color: var(--c-text3); cursor: pointer; background: none; border: none; }
[dir=ltr] .mob-close { right: auto; left: 24px; }

/* ── Hero ── */
#hero {
  position: relative; min-height: max(100svh, 600px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-x) clamp(48px, 7vw, 96px);
  overflow: hidden;
}
/* Content sits at bottom, z-index above scene */
.hero-content   { position: relative; z-index: 5; max-width: 740px; }
.hero-eyebrow   { position: relative; z-index: 5; }
.hero-stats     { position: relative; z-index: 5; }
.hero-actions   { position: relative; z-index: 5; }
.hero-sub       { position: relative; z-index: 5; }
.hero-scroll-hint { z-index: 5; }
/* Gradient that fades scene into text area at bottom */
#hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 52%;
  background: linear-gradient(to top,
    rgba(8,12,23,1)   0%,
    rgba(8,12,23,.92) 25%,
    rgba(8,12,23,.6)  55%,
    transparent       100%);
  z-index: 4;
  pointer-events: none;
}
.hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hbg-base {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 60% at 28% 82%, #0C1525 0%, transparent 55%),
    radial-gradient(ellipse 50% 65% at 76% 18%, #090E1A 0%, transparent 50%),
    linear-gradient(155deg, #080C17 0%, #0D1322 35%, #101826 65%, #080C17 100%);
}
.hbg-glow {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 70%; height: 45%;
  background: radial-gradient(ellipse, rgba(201,168,76,0.06) 0%, transparent 65%);
  filter: blur(32px);
  animation: glow-breathe 9s ease-in-out infinite alternate;
}
@keyframes glow-breathe { from{opacity:.5;transform:translateX(-50%) scale(1)} to{opacity:1;transform:translateX(-50%) scale(1.08)} }
.hbg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201,168,76,0.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,168,76,0.014) 1px, transparent 1px);
  background-size: 88px 88px;
  animation: grid-drift 40s linear infinite;
}
@keyframes grid-drift { to { transform: translateY(88px); } }
.hbg-scan {
  position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.08) 30%, rgba(201,168,76,0.2) 50%, rgba(201,168,76,0.08) 70%, transparent 100%);
  animation: scan-line 12s ease-in-out infinite;
}
@keyframes scan-line { 0%{top:-2%;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:102%;opacity:0} }
/* Floating particles */
.hbg-pt {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--c-gold); opacity: 0;
  animation: pt-float var(--d, 8s) ease-in-out var(--dl, 0s) infinite;
}
@keyframes pt-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 0.4; }
  80%  { opacity: 0.15; }
  100% { opacity: 0; transform: translateY(-60px) scale(1.2); }
}
/* ── Hero Cinematic Scene ── */
#hero-canvas {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
  display: block;
}
/* Dashboard overlay layer */
.hero-dash {
  position: absolute;
  bottom: 28%; right: var(--pad-x);
  z-index: 3;
  width: clamp(180px, 22vw, 280px);
  opacity: 0;
  transform: translateY(16px);
  animation: fade-up 1s var(--ease-out) 1.8s forwards;
}
.dash-panel {
  background: rgba(8,12,22,.82);
  border: 1px solid rgba(201,168,76,.18);
  backdrop-filter: blur(12px);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.dash-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.dash-label {
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(201,168,76,.55);
}
.dash-val {
  font-family: var(--f-mono); font-size: 13px;
  color: var(--c-text); letter-spacing: .06em;
  animation: dash-count 0.6s var(--ease-out) var(--dc,2s) both;
}
@keyframes dash-count { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
.dash-val.gold { color: var(--c-gold); }
.dash-bar-wrap { flex: 1; height: 2px; background: rgba(255,255,255,.07); border-radius: 2px; overflow: hidden; }
.dash-bar-fill {
  height: 100%; border-radius: 2px;
  background: var(--c-gold);
  animation: bar-grow 1s var(--ease-out) var(--dc,2.2s) both;
  transform-origin: right;
}
[dir=ltr] .dash-bar-fill { transform-origin: left; }
@keyframes bar-grow { from{width:0} to{width:var(--w,60%)} }
.dash-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); animation: dot-pulse 2s ease-in-out infinite; flex-shrink:0; }
@keyframes dot-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.dash-sep { height: 1px; background: rgba(201,168,76,.09); }
@media (max-width:640px) { .hero-dash { display:none; } }
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  #hero-canvas { display: none; }
  .hero-dash { opacity:1; animation:none; }
  .dash-bar-fill { animation:none; width:var(--w,60%); }
  .dash-val { animation:none; }
}
/* Hero copy */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: clamp(16px, 2vw, 26px);
  opacity: 0; transform: translateY(14px);
  animation: fade-up 0.9s var(--ease-out) 0.25s forwards;
}
.hero-eyebrow-line { width: 22px; height: 1px; background: var(--c-gold); flex-shrink: 0; }
.hero-eyebrow-text { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-gold); }
@keyframes fade-up { to { opacity: 1; transform: translateY(0); } }
.hero-h1 {
  font-family: var(--f-fa); font-size: clamp(28px, 5.5vw, 60px);
  font-weight: 120; line-height: 1.5; color: var(--c-text);
  opacity: 0; transform: translateY(22px);
  animation: fade-up 1.1s var(--ease-out) 0.42s forwards;
}
.hero-h1 .gold { color: var(--c-gold); }
.tw-cursor {
  display: inline-block; width: 2.5px; height: 0.82em;
  background: var(--c-gold); vertical-align: middle; margin-right: 2px;
  animation: cursor-blink 0.85s step-end infinite;
}
@keyframes cursor-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.hero-sub {
  margin-top: clamp(14px, 1.8vw, 22px);
  font-size: clamp(13px, 1.1vw, 14.5px); color: var(--c-text3); line-height: 1.95; max-width: 420px;
  opacity: 0; transform: translateY(14px);
  animation: fade-up 1s var(--ease-out) 0.66s forwards;
}
.hero-actions {
  margin-top: clamp(22px, 3vw, 36px);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  opacity: 0; transform: translateY(14px);
  animation: fade-up 0.9s var(--ease-out) 0.84s forwards;
}
.hero-stats {
  display: flex; align-items: center; gap: clamp(18px, 3vw, 44px);
  margin-top: clamp(28px, 4vw, 48px);
  opacity: 0; transform: translateY(14px);
  animation: fade-up 0.9s var(--ease-out) 1.02s forwards;
}
.hs { display: flex; flex-direction: column; gap: 4px; }
.hs-num {
  font-family: var(--f-display); font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 300; color: var(--c-text); line-height: 1;
}
.hs-num sup { font-size: 0.45em; color: var(--c-gold); vertical-align: super; }
.hs-label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--c-gold); opacity: 0.75; }
.hs-sep { width: 1px; align-self: stretch; background: var(--c-rim); margin: 2px 0; }
.hero-scroll-hint {
  position: absolute; bottom: clamp(22px, 3.5vw, 40px); left: var(--pad-x);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; animation: fade-up 0.8s var(--ease-out) 1.5s forwards;
}
[dir=ltr] .hero-scroll-hint { left: auto; right: var(--pad-x); }
.scroll-bar { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--c-gold), transparent); animation: scroll-pulse 2s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100%{opacity:.25} 50%{opacity:.9} }
.scroll-text { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--c-text4); writing-mode: vertical-rl; }
@media (max-width: 580px) { .hero-stats, .hero-scroll-hint { display: none; } }

/* ── Marquee ── */
.marquee-wrap {
  overflow: hidden;
  border-top: 1px solid rgba(201,168,76,0.07);
  border-bottom: 1px solid rgba(201,168,76,0.07);
  padding: 12px 0;
  background: rgba(201,168,76,0.018);
}
.marquee-track { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; }
[dir=rtl] .marquee-track { animation-direction: reverse; }
@keyframes marquee-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-item {
  display: flex; align-items: center; gap: 20px; padding: 0 20px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-text3); white-space: nowrap;
}
.marquee-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--c-gold); opacity: 0.5; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .marquee-track, .wheel-spin { animation: none; } }

/* ── Mobile Order Button in Nav ── */
.nav-order-mobile {
  display: none;
  font-family: var(--f-fa);
  font-size: 12px; font-weight: 400;
  color: var(--c-bg);
  background: var(--c-gold);
  border: none; cursor: pointer;
  padding: 8px 16px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .nav-order-mobile { display: block; }
  .nav-cta { display: none; }
}