/* ================================================================
   PrimeShine AutoCare — Brand Override v2
   Colors extracted directly from logo:
     Red    #ce1212   (pure logo red)
     Chrome #e8e7ec   (logo chrome/silver)
   ================================================================ */

:root {
  /* ---- Core brand ---- */
  --red:          #ce1212;
  --red-dark:     #a00d0d;
  --red-mid:      #e01a1a;
  --red-glow:     rgba(206,18,18,0.45);
  --red-soft:     rgba(206,18,18,0.12);

  --chrome:       #e8e7ec;
  --chrome-mid:   #a8aebb;
  --chrome-dark:  #6a7585;
  --silver-hi:    #f4f4f6;

  /* ---- Surfaces — deep charcoal-black (like the logo card) ---- */
  --bg:           #090a0c;
  --bg-1:         #0f1014;
  --bg-2:         #161820;
  --bg-3:         #1d2028;
  --bg-card:      #13151a;

  /* ---- Lines ---- */
  --line:         rgba(255,255,255,0.07);
  --line-soft:    rgba(255,255,255,0.04);
  --line-red:     rgba(206,18,18,0.25);

  /* ---- Text ---- */
  --fg:           #f0f1f4;
  --muted:        #7a8898;
  --faint:        #3d4555;

  /* ---- Mapped to site.css vars ---- */
  --accent:       var(--red);
  --accent-2:     var(--chrome-mid);
  --accent-ink:   #ffffff;
  --navy:         #0e1520;
  --steel:        var(--chrome-mid);

  /* ---- Gradients ---- */
  --grad-red:     linear-gradient(135deg, var(--red-dark) 0%, var(--red-mid) 100%);
  --grad-chrome:  linear-gradient(135deg, #6a7585 0%, var(--chrome) 50%, #9aa0aa 100%);
  --grad-badge:   linear-gradient(100deg, var(--chrome) 0%, var(--red) 50%, #ff3333 100%);

  /* ---- Shadows ---- */
  --glow:         0 0 0 1px rgba(206,18,18,0.3), 0 8px 40px -8px rgba(206,18,18,0.5);
  --shadow-card:  0 2px 24px rgba(0,0,0,0.55);
}

/* ================================================================
   BODY & AMBIENT GLOW
   ================================================================ */
body {
  background: var(--bg);
  color: var(--fg);
}

body::before {
  background:
    radial-gradient(70vw 55vh at 85% -15%, rgba(206,18,18,0.13), transparent 60%),
    radial-gradient(55vw 45vh at -10% 95%, rgba(206,18,18,0.07), transparent 60%) !important;
}

/* Fine grain texture stays */
body::after { opacity: 0.035; }

/* ================================================================
   TYPOGRAPHY
   ================================================================ */
.grad-text {
  background: var(--grad-badge) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.eyebrow {
  color: var(--chrome-mid) !important;
}
.eyebrow::before {
  background: linear-gradient(90deg, var(--red), transparent) !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary {
  background: var(--grad-red) !important;
  color: #fff !important;
  box-shadow: 0 8px 28px -8px var(--red-glow) !important;
  border-color: transparent !important;
}
.btn-primary:hover {
  box-shadow: 0 14px 44px -10px var(--red-glow) !important;
  filter: brightness(1.08);
}
.btn-ghost {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: var(--fg) !important;
}
.btn-ghost:hover {
  border-color: var(--red) !important;
  background: rgba(206,18,18,0.08) !important;
  color: #fff !important;
}

/* ================================================================
   NAV
   ================================================================ */
.nav.scrolled {
  background: rgba(9,10,12,0.82) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  border-bottom-color: var(--line-red) !important;
}
.nav-links a.active::after {
  background: linear-gradient(90deg, var(--red), #ff4444) !important;
}
.nav-links a:hover { color: var(--fg) !important; }

/* Logo: on dark background the JPG logo reads cleanly */
.logo-chip {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.logo-chip img {
  /* PrimeShine transparent logo — sits directly on dark */
  height: 56px;
  width: auto;
  filter: drop-shadow(0 2px 12px rgba(206,18,18,0.3));
  display: block;
  border-radius: 0;
  background: transparent;
}
/* On mobile, mobile.css overrides with !important - do not add media queries here */
.brand:hover .logo-chip img {
  filter: drop-shadow(0 4px 18px rgba(206,18,18,0.4));
}

/* logo heights: mobile.css handles all breakpoints with !important */

/* Footer logo */
.logo-badge img {
  height: 80px;
  width: auto;
  max-width: 100%;
  display: block;
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: linear-gradient(180deg, var(--bg-card), var(--bg)) !important;
  border-color: var(--line) !important;
}
.glass {
  background: rgba(15,16,20,0.6) !important;
  border-color: var(--line) !important;
}

/* Floating hero cards */
.stage .float-card {
  background: rgba(13,14,18,0.82) !important;
}
.stage .fc-ic {
  background: var(--grad-red) !important;
}

/* ================================================================
   SERVICE CARDS (index.html)
   ================================================================ */
.svc-ic {
  background: rgba(206,18,18,0.1) !important;
  border-color: rgba(206,18,18,0.25) !important;
  color: var(--red) !important;
}
.svc:hover {
  border-color: rgba(206,18,18,0.45) !important;
  box-shadow: 0 24px 60px -30px rgba(206,18,18,0.5) !important;
}
.svc .svc-arrow { color: var(--chrome-mid) !important; }

/* ================================================================
   PROCESS STEPS
   ================================================================ */
.step .sn { color: var(--red) !important; }

/* ================================================================
   FEATURE CHECKS
   ================================================================ */
.feat .ck {
  background: rgba(206,18,18,0.12) !important;
  border-color: rgba(206,18,18,0.25) !important;
  color: var(--red) !important;
}

/* ================================================================
   CTA BAND
   ================================================================ */
.cta-band {
  background: linear-gradient(135deg, #12080a, #1a0d0f) !important;
  border-color: rgba(206,18,18,0.22) !important;
}
.cta-band::before {
  background: radial-gradient(80% 120% at 50% 0%, rgba(206,18,18,0.20), transparent 60%) !important;
}

/* ================================================================
   MARQUEE
   ================================================================ */
.marquee-item::before { background: var(--red) !important; }
.marquee { border-color: var(--line) !important; background: var(--bg-1) !important; }

/* ================================================================
   CHIP
   ================================================================ */
.chip { border-color: var(--line-red) !important; color: var(--chrome-mid) !important; }
.chip:hover { border-color: var(--red) !important; color: #fff !important; }
.dot { background: var(--red) !important; box-shadow: 0 0 10px rgba(206,18,18,0.8) !important; }

/* ================================================================
   SCROLL CUE
   ================================================================ */
.scroll-cue .bar { background: linear-gradient(var(--red), transparent) !important; }
.scroll-cue .bar::after { background: var(--chrome-mid) !important; }

/* ================================================================
   FOOTER
   ================================================================ */
.footer { background: var(--bg-1) !important; border-top-color: var(--line-red) !important; }
.footer h5 { color: var(--chrome-dark) !important; }
.footer-links a:hover { color: var(--red) !important; }
.footer-bottom { color: var(--faint) !important; border-top-color: var(--line) !important; }

/* ================================================================
   DRAWER
   ================================================================ */
.drawer {
  background: rgba(9,10,12,0.97) !important;
}
.drawer a { border-bottom-color: var(--line) !important; }

/* ================================================================
   GALLERY PLACEHOLDER
   ================================================================ */
/* Placeholder only shows when image hasn't loaded — .has-img class is added by JS once loaded */
.ph:not(.has-img) {
  background:
    repeating-linear-gradient(135deg, var(--bg-2) 0 10px, var(--bg-1) 10px 20px);
}
.ph {
  border-color: var(--line);
}

/* ================================================================
   HERO META NUMBERS
   ================================================================ */
.hero-meta .num { color: var(--fg); }
.hero-meta .lbl { color: var(--faint) !important; }

/* ================================================================
   SECTION HEAD
   ================================================================ */
h1, h2, h3, h4 { color: var(--fg); }
.muted { color: var(--muted) !important; }