/* ═══════════════════════════════════════════════════════════
   NEXT RIDES UGANDA v5 — MASTER STYLESHEET
   Midnight Velocity Premium Automotive Design System
   Fonts: Bebas Neue · Syne · DM Sans
═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Syne:wght@400;500;600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ── CSS Variables ───────────────────────────────────────── */
:root {
  /* ── Automotive Color System ── */
  /* Reds */
  --red:    #B81F0A; --red2: #D62B12; --red3: #E03417;
  /* Steel accent */
  --gold:   #8C939D; --gold2:#A8B0BC; --gold3:#D9DEE5;
  /* ── LIGHT THEME backgrounds ── */
  --bg:     #F4F3EF; --bg1: #EEECEA; --bg2: #F9F8F5;
  --bg3:    #FFFFFF; --bg4: #E8E6E1;
  /* Dark premium backgrounds (for hero, car sections) */
  --dark:   #0A0A0B; --dark1:#121316; --dark2:#1B1D22; --dark3:#242629;
  /* Text — dark on light bg */
  --white:  #F5F5F5; --text: #1C1D20; --muted:#6B7280; --dim:#9CA3AF;
  /* Text for dark premium sections */
  --text-d: #D7DCE3; --muted-d:#9AA1AC;
  /* Borders */
  --border: rgba(0,0,0,0.08);
  --border2:rgba(0,0,0,0.13);
  --border-d: rgba(255,255,255,0.08);
  --border-d2:rgba(255,255,255,0.14);
  --glass:  rgba(255,255,255,0.85);
  --glass2: rgba(255,255,255,0.96);
  --glass-d: rgba(27,29,34,0.82);
  --glass-d2:rgba(27,29,34,0.95);

  /* Gradients */
  --g-red:  linear-gradient(135deg, #7A1207 0%, #B81F0A 45%, #E03417 100%);
  --g-gold: linear-gradient(135deg, #5A6070 0%, #8C939D 50%, #D9DEE5 100%);

  /* Shadows */
  --s-red:  0 0 44px rgba(184,31,10,0.38), 0 18px 40px rgba(0,0,0,0.6);
  --s-gold: 0 0 32px rgba(140,147,157,0.22), 0 16px 36px rgba(0,0,0,0.5);
  --s-card: 0 10px 30px rgba(0,0,0,0.45), 0 0 1px rgba(255,255,255,0.06);

  /* Spacing */
  --nav-h: 80px;

  /* Easing */
  --ease:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease2: cubic-bezier(0.65, 0, 0.35, 1);
  --t:     0.45s var(--ease);
  --t2:    0.28s var(--ease);

  /* Radius */
  --r:    10px; --r2: 16px; --r3: 26px; --r4: 40px;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: #F8F7F3;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
  cursor: none;
}
img { display: block; width: 100%; object-fit: cover; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; border: none; background: none; cursor: none; }
textarea, input, select { font-family: inherit; }
@media (hover: none) { body, button { cursor: auto; } }

/* ── Custom Cursor ───────────────────────────────────────── */
.cursor-dot {
  position: fixed; width: 8px; height: 8px;
  background: linear-gradient(135deg,#7A1207,#B81F0A); border-radius: 50%;
  pointer-events: none; z-index: 9999;
  transform: translate(-50%,-50%);
  transition: width .15s, height .15s, background .2s;
  will-change: left, top;
}
.cursor-ring {
  position: fixed; width: 36px; height: 36px;
  border: 1.5px solid rgba(214,43,18,0.55); border-radius: 50%;
  pointer-events: none; z-index: 9998;
  transform: translate(-50%,-50%);
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s;
  will-change: left, top;
}
.c-hover .cursor-dot  { width: 12px; height: 12px; background: #8C939D; }
.c-hover .cursor-ring { width: 52px; height: 52px; border-color: rgba(140,147,157,0.45); }
@media (hover: none) { .cursor-dot, .cursor-ring { display: none; } }

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

/* ── Layout ──────────────────────────────────────────────── */
.w   { max-width: 1380px; margin: 0 auto; padding: 0 44px; }
.wn  { max-width: 940px;  margin: 0 auto; padding: 0 44px; }
.sec { padding: 120px 0; }
.ss  { padding: 80px  0; }
@media (max-width: 640px) { .w, .wn { padding: 0 20px; } .sec { padding: 80px 0; } .ss { padding: 56px 0; } }

/* ── Typography ──────────────────────────────────────────── */
.f-d  { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; line-height: 0.9; }
.f-ui { font-family: 'Syne', sans-serif; }
.t-r  { background: var(--g-red);  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-g  { background: var(--g-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.t-sk { -webkit-text-stroke: 1.5px var(--red); color: transparent; }

/* ── Pill labels ─────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Syne', sans-serif; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px; margin-bottom: 22px;
  border: 1px solid rgba(184,31,10,0.3); background: rgba(184,31,10,0.07); color: var(--red3);
}
.pill::before {
  content: ''; width: 5px; height: 5px; background: var(--red);
  border-radius: 50%; box-shadow: 0 0 8px var(--red);
  animation: blink 2.2s ease-in-out infinite;
}
.pill-g { border-color: rgba(140,147,157,0.25); background: rgba(140,147,157,0.07); color: var(--gold3); }
.pill-g::before { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ── Section Heading ─────────────────────────────────────── */
.sh { margin-bottom: 68px; }
.sh h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3rem, 5.5vw, 6.8rem);
  letter-spacing: 0.02em; line-height: 0.9; color: var(--text);
  margin-bottom: 16px;
}
.sh p { font-size: 1rem; color: var(--muted); max-width: 490px; line-height: 1.8; }
.sh.c { text-align: center; }
.sh.c p { margin: 0 auto; }
.sh.split { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 24px; margin-bottom: 56px; }
.sh.split > *:first-child { flex: 1 1 400px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Syne', sans-serif; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 16px 36px; border-radius: var(--r);
  transition: all var(--t); white-space: nowrap;
  position: relative; overflow: hidden; cursor: none;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, transparent 55%);
  opacity: 0; transition: opacity 0.3s;
}
.btn:hover::after { opacity: 1; }
.btn > *  { position: relative; z-index: 1; }
.btn span { position: relative; z-index: 1; }

.btn-r  { background: var(--g-red);  color: #fff; box-shadow: var(--s-red); }
.btn-r:hover  { transform: translateY(-3px); box-shadow: 0 0 52px rgba(214,43,18,0.5), 0 20px 44px rgba(0,0,0,0.55); }
.btn-g  { background: var(--g-gold); color: #18140A; box-shadow: var(--s-gold); }
.btn-g:hover  { transform: translateY(-3px); box-shadow: 0 0 44px rgba(140,147,157,0.3), 0 20px 44px rgba(0,0,0,0.5); }
.btn-gl { background: #FFFFFF; color: var(--text); border: 1.5px solid rgba(0,0,0,0.13); box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.btn-gl:hover { background: #F0EEE9; transform: translateY(-3px); border-color: rgba(0,0,0,0.2); color: var(--text); }
.btn-out { background: transparent; color: var(--white); border: 1.5px solid var(--border2); }
.btn-out:hover { border-color: var(--red2); color: var(--red3); transform: translateY(-2px); }
.btn-sm  { padding: 11px 24px; font-size: 0.72rem; }
.btn-lg  { padding: 20px 52px; font-size: 0.86rem; }
@media (max-width: 640px) { .btn-lg { padding: 16px 36px; } }

/* ── Scroll Reveal ───────────────────────────────────────── */
/* reveal: defined in LIGHT THEME OVERRIDES below */
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s}
.d4{transition-delay:.32s} .d5{transition-delay:.40s} .d6{transition-delay:.50s}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h); padding: 0 44px;
  transition: all 0.5s var(--ease);
}
#nav::before {
  content: ''; position: absolute; inset: 0;
  background: var(--nav-glass, rgba(255,255,255,0.78));
  backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid rgba(0,0,0,0.07);
  transition: all 0.5s var(--ease);
}
#nav.sc::before {
  background: var(--nav-glass-sc, rgba(255,255,255,0.97));
  backdrop-filter: blur(32px) saturate(1.8);
  border-bottom-color: rgba(0,0,0,0.1);
  box-shadow: 0 2px 24px rgba(0,0,0,0.09);
}
.ni {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1380px; margin: 0 auto; height: 100%;
}
/* Logo */
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img {
  height: 46px; width: auto; object-fit: contain;
  /* Ensure logo stands out against dark navbar */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}
.logo-fallback { display: flex; align-items: center; gap: 0; }
.logo-nex {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; letter-spacing: 0.06em;
  background: var(--g-red); color: #fff;
  padding: 3px 13px 3px 10px;
  clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  border-radius: 4px 0 0 4px; box-shadow: 0 0 20px rgba(184,31,10,0.4);
}
.logo-t {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.45rem; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.07); border: 1px solid var(--border2); color: #fff;
  padding: 3px 10px 3px 13px;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 12% 100%, 0 50%);
  margin-left: -2px; border-radius: 0 4px 4px 0;
}
.logo-sub {
  font-family: 'Syne', sans-serif; font-size: 0.6rem; font-weight: 800;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim);
}
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-a {
  font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); padding: 8px 15px; border-radius: var(--r);
  transition: all 0.25s; position: relative;
}
.nav-a::after {
  content: ''; position: absolute; bottom: 3px; left: 50%; right: 50%;
  height: 1.5px; background: var(--red); border-radius: 2px;
  transition: all 0.3s var(--ease); pointer-events: none;
}
.nav-a:hover::after, .nav-a.act::after { left: 15px; right: 15px; }
.nav-a:hover, .nav-a.act { color: var(--red2); }
.nav-a.act { color: var(--red2); }
.nav-acts { display: flex; align-items: center; gap: 10px; }
/* Burger */
#burg { display: none; flex-direction: column; gap: 5px; padding: 10px; z-index: 1; }
#burg span { display: block; width: 22px; height: 1.5px; background: var(--white); border-radius: 2px; transition: all 0.4s var(--ease); }
#burg.on span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
#burg.on span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#burg.on span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
#mob-nav { display: flex; align-items: center; }

@media (max-width: 1000px) {
  #mob-nav {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: rgba(249,248,245,0.99); backdrop-filter: blur(32px);
    border-bottom: 1px solid var(--border);
    padding: 24px 28px 40px; gap: 0;
    transform: translateY(-110%); visibility: hidden;
    transition: transform 0.5s var(--ease), visibility 0.5s;
  }
  #mob-nav.on { transform: translateY(0); visibility: visible; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-a { padding: 14px 12px; font-size: 1rem; }
  .nav-acts { flex-direction: column; margin-top: 24px; gap: 10px; }
  .nav-acts .btn { width: 100%; justify-content: center; }
  #burg { display: flex; }
  #nav { padding: 0 24px; }
}

/* ═══════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════ */
.hero {
  min-height: 100svh; position: relative; overflow: hidden;
  display: flex; align-items: center; background: transparent;
}
.h-mesh {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 88% 68% at 66% 32%, rgba(184,31,10,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 48% 58% at 10% 80%, rgba(0,0,0,0.03) 0%, transparent 50%),
    radial-gradient(ellipse 38% 44% at 88% 82%, rgba(184,31,10,0.04) 0%, transparent 50%),
    var(--bg);
  animation: meshPulse 9s ease-in-out infinite;
}
.h-grid {
  position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 80%);
  animation: gridShift 22s linear infinite;
}
.h-orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }
.h-orb.o1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(184,31,10,0.13) 0%, transparent 70%); top: -10%; right: 8%; animation: orbF 13s ease-in-out infinite; }
.h-orb.o2 { width: 350px; height: 350px; background: radial-gradient(circle, rgba(180,185,195,0.08) 0%, transparent 70%); bottom: 8%; left: 3%; animation: orbF 16s ease-in-out infinite 3.5s; }
.h-orb.o3 { width: 230px; height: 230px; background: radial-gradient(circle, rgba(214,43,18,0.10) 0%, transparent 70%); bottom: 28%; right: 22%; animation: orbF 11s ease-in-out infinite 7s; }
.h-scan { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.015) 3px, rgba(0,0,0,0.015) 4px); }
.h-car { position: absolute; right: -4%; bottom: 0; width: 63%; height: 89%; z-index: 2; animation: carIn 1.4s var(--ease) 0.3s both; }
.h-car img {
  width: 100%; height: 100%; object-fit: cover; object-position: left center;
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 82%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 82%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  filter: contrast(1.06) saturate(1.1);
}
.h-glow { position: absolute; bottom: -50px; right: 0; left: 14%; height: 250px; background: radial-gradient(ellipse at 50% 100%, rgba(184,31,10,0.30) 0%, transparent 68%); filter: blur(42px); z-index: 1; }
.h-content { position: relative; z-index: 3; width: 100%; padding-top: var(--nav-h); }
.h-inner { max-width: 640px; padding: 100px 0; }
.h-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; animation: fadeUp 0.8s var(--ease) 0.3s both; }
.h-eye-line { width: 38px; height: 1.5px; background: var(--g-red); }
.h-eye-txt { font-family: 'Syne', sans-serif; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red3); }
.h-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(5rem,9.5vw,11rem); letter-spacing: 0.01em; line-height: 0.88; color: var(--text); margin-bottom: 26px; }
.h-title .ln { display: block; overflow: hidden; }
.h-title .ln span { display: block; animation: slideUp 0.8s var(--ease) both; }
.h-title .ln:nth-child(1) span { animation-delay: 0.38s; }
.h-title .ln:nth-child(2) span { animation-delay: 0.52s; }
.h-title .ln:nth-child(3) span { animation-delay: 0.68s; }
.h-sub { font-size: 1.05rem; color: var(--muted); line-height: 1.82; max-width: 455px; margin-bottom: 44px; animation: fadeUp 0.9s var(--ease) 0.85s both; }
.h-cta { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp 0.9s var(--ease) 1.0s both; }
.h-stats { display: flex; margin-top: 72px; border-top: 1px solid var(--border); animation: fadeUp 1s var(--ease) 1.2s both; flex-wrap: wrap; }
.h-stat { padding: 26px 32px 26px 0; flex: 1 1 90px; border-right: 1px solid var(--border); }
.h-stat:last-child { border-right: none; }
.h-stat-v { font-family: 'Bebas Neue', sans-serif; font-size: 2.7rem; letter-spacing: 0.04em; background: var(--g-red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.h-stat-l { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.h-scroll { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: fadeIn 1s var(--ease) 1.5s both; }
.h-scroll-t { font-family: 'Syne', sans-serif; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); writing-mode: vertical-rl; transform: rotate(180deg); }
.h-scroll-l { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--red2), rgba(184,31,10,0)); animation: scrollL 2.2s ease-in-out infinite; }
@media (max-width: 900px) { .h-car { width: 76%; opacity: 0.32; } }
@media (max-width: 640px) { .h-car { display: none; } .h-inner { padding: 75px 0 60px; } .h-stats { flex-direction: column; gap: 0; } .h-stat { border-right: none; border-bottom: 1px solid var(--border); padding: 18px 0; } }

/* ═══════════════════════════════════════════════════════════
   SEARCH PANEL
═══════════════════════════════════════════════════════════ */
.search-wrap { background: var(--bg2); padding-bottom: 80px; }
.search-panel {
  background: var(--card-bg);
  border: 1px solid var(--bd);
  backdrop-filter: blur(28px) saturate(1.2);
  border-radius: var(--r4); padding: 28px 32px;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px; align-items: end;
  margin-top: -48px; position: relative; z-index: 10;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 1px rgba(255,255,255,0.08);
}
.sf { display: flex; flex-direction: column; gap: 7px; }
.sf label { font-family: 'Syne', sans-serif; font-size: 0.61rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.sf select, .sf input {
  background: #FFFFFF; border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: var(--r); padding: 13px 16px; color: var(--fg);
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; outline: none; appearance: none;
  transition: border-color 0.3s, background 0.3s; cursor: none;
}
.sf select:focus, .sf input:focus { border-color: rgba(184,31,10,0.6); background: #fff; box-shadow: 0 0 0 3px rgba(184,31,10,0.08); }
.sf select option { background: #FFFFFF; color: var(--text); }
@media (max-width: 1000px) { .search-panel { grid-template-columns: 1fr 1fr; } .search-panel .btn { grid-column: 1/-1; justify-content: center; } }
@media (max-width: 560px) { .search-panel { grid-template-columns: 1fr; padding: 20px; border-radius: var(--r3); margin-top: 0; } }

/* ═══════════════════════════════════════════════════════════
   CAR CARDS
═══════════════════════════════════════════════════════════ */
.cars-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 24px; }
.car-card {
  background: #FFFFFF; border: 1px solid rgba(0,0,0,0.07); border-radius: var(--r3);
  overflow: hidden; position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s, border-color 0.4s;
  transform-style: preserve-3d;
}
.car-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(184,31,10,0.3); border-color: rgba(184,31,10,0.3); }
.car-card::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(184,31,10,0.06) 0%, transparent 60%); opacity: 0; transition: opacity 0.5s; }
.car-card:hover::before { opacity: 1; }
.cc-img { position: relative; height: 240px; overflow: hidden; background: #E8E6E1; }
.cc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease), filter 0.4s; }
.car-card:hover .cc-img img { transform: scale(1.08); filter: brightness(1.07) saturate(1.1); }
.cc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.55) 100%); }
.cc-badge { position: absolute; top: 16px; left: 16px; z-index: 5; font-family: 'Syne', sans-serif; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 5px; }
.b-new  { background: linear-gradient(135deg,#7A1207,#B81F0A,#D62B12); color: #fff; }
.b-hot  { background: rgba(140,147,157,0.14); border: 1px solid rgba(140,147,157,0.42); color: var(--gold3); }
.b-rare { background: linear-gradient(135deg,rgba(184,31,10,0.14),rgba(140,147,157,0.14)); border: 1px solid rgba(140,147,157,0.32); color: var(--gold2); }
.b-feat { background: rgba(255,255,255,0.07); border: 1px solid var(--border2); color: var(--text); }
.cc-quick { position: absolute; bottom: 14px; right: 14px; z-index: 5; display: flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: all 0.3s var(--ease); }
.car-card:hover .cc-quick { opacity: 1; transform: none; }
.cc-q { width: 36px; height: 36px; background: rgba(255,255,255,0.92); border: 1px solid rgba(0,0,0,0.12); border-radius: 50%; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; color: var(--text); transition: all 0.25s; cursor: none; }
.cc-q:hover { background: var(--red); border-color: var(--red); box-shadow: 0 0 20px rgba(184,31,10,0.5); }
.cc-body { padding: 22px 22px 20px; position: relative; z-index: 1; }
.cc-brand { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red3); margin-bottom: 3px; }
.cc-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 0.03em; color: var(--fg); line-height: 1; margin-bottom: 13px; }
.cc-name em { font-style: normal; font-size: 1.15rem; color: var(--dim); }
.cc-specs { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 17px; }
.cc-spec { display: flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--muted); font-family: 'Syne', sans-serif; }
.cc-spec svg { width: 12px; height: 12px; opacity: 0.5; flex-shrink: 0; }
.cc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 15px; border-top: 1px solid var(--border); }
.cc-price { font-family: 'Bebas Neue', sans-serif; font-size: 2.1rem; letter-spacing: 0.04em; background: linear-gradient(135deg,#B81F0A,#D62B12); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.cc-ugx { font-size: 0.68rem; color: var(--dim); margin-top: 2px; font-family: 'Syne', sans-serif; }
@media (max-width: 640px) { .cars-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   RENTAL CARDS
═══════════════════════════════════════════════════════════ */
.rent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 24px; }
.rent-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r3); overflow: hidden; position: relative; transition: transform 0.5s var(--ease), box-shadow 0.5s, border-color 0.4s; }
.rent-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(140,147,157,0.2); border-color: rgba(140,147,157,0.25); }
.rc-img { height: 228px; overflow: hidden; position: relative; background: var(--bg3); }
.rc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.rent-card:hover .rc-img img { transform: scale(1.07); }
.rc-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.55) 100%); }
.rc-badge { position: absolute; top: 14px; left: 14px; z-index: 3; font-family: 'Syne', sans-serif; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 12px; border-radius: 5px; background: linear-gradient(135deg, rgba(140,147,157,0.12), rgba(232,180,64,0.12)); border: 1px solid rgba(140,147,157,0.35); color: var(--gold3); }
.rc-body { padding: 20px 22px 20px; }
.rc-brand { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; }
.rc-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.9rem; letter-spacing: 0.03em; color: var(--fg); line-height: 1; margin-bottom: 13px; }
.rc-feats { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.rc-feat { font-family: 'Syne', sans-serif; font-size: 0.65rem; font-weight: 500; color: var(--muted); padding: 4px 10px; border-radius: 100px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; border-top: 1px solid var(--border); gap: 12px; }
.rc-price { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 0.04em; background: var(--g-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.rc-sub { font-size: 0.68rem; color: var(--dim); margin-top: 2px; font-family: 'Syne', sans-serif; }
@media (max-width: 640px) { .rent-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   BRANDS MARQUEE
═══════════════════════════════════════════════════════════ */
.mq-sec { padding: 46px 0; overflow: hidden; background: var(--red); border-top: none; border-bottom: none; position: relative; }
.mq-sec::before, .mq-sec::after { content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 200px; }
.mq-sec::before { left: 0;  background: linear-gradient(to right, var(--red), transparent); }
.mq-sec::after  { right: 0; background: linear-gradient(to left,  var(--red), transparent); }
.mq-track { display: flex; animation: marquee 30s linear infinite; width: max-content; }
.mq-track:hover { animation-play-state: paused; }
.mq-item { display: flex; align-items: center; gap: 12px; padding: 10px 28px; border-right: 1px solid var(--border); white-space: nowrap; }
.mq-dot { width: 4px; height: 4px; background: var(--red); border-radius: 50%; opacity: 0.55; }
.mq-name { font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); transition: color 0.25s; }
.mq-item:hover .mq-name { color: var(--text); }

/* ═══════════════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════════════ */
.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 64px; }
.how-step { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--border); padding: 48px 34px; transition: background 0.4s, border-color 0.4s; }
.how-step:first-child { border-radius: var(--r3) 0 0 var(--r3); }
.how-step:last-child  { border-radius: 0 var(--r3) var(--r3) 0; }
.how-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--g-red); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.how-step:hover::before { transform: scaleX(1); }
.how-step:hover { background: rgba(184,31,10,0.04); border-color: rgba(184,31,10,0.22); }
.how-n { font-family: 'Bebas Neue', sans-serif; font-size: 5.5rem; letter-spacing: 0.04em; color: rgba(184,31,10,0.07); line-height: 1; margin-bottom: 16px; transition: color 0.4s; }
.how-step:hover .how-n { color: rgba(184,31,10,0.13); }
.how-ic { width: 52px; height: 52px; border-radius: var(--r); background: rgba(184,31,10,0.08); border: 1px solid rgba(184,31,10,0.18); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: all 0.4s; }
.how-step:hover .how-ic { background: rgba(184,31,10,0.15); box-shadow: 0 0 24px rgba(184,31,10,0.2); }
.how-ic svg { width: 22px; height: 22px; color: var(--red3); }
.how-step h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.65rem; letter-spacing: 0.04em; color: var(--fg); margin-bottom: 9px; }
.how-step p  { font-size: 0.85rem; color: var(--muted); line-height: 1.78; }
@media (max-width: 900px) { .how-grid { grid-template-columns: 1fr 1fr; } .how-step:first-child, .how-step:last-child { border-radius: 0; } }
@media (max-width: 600px) { .how-grid { grid-template-columns: 1fr; } .how-step:first-child { border-radius: var(--r3) var(--r3) 0 0; } .how-step:last-child { border-radius: 0 0 var(--r3) var(--r3); } }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════ */
.test-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(275px,1fr)); gap: 22px; }
.test-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r3); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; transition: transform 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s; position: relative; overflow: hidden; }
.test-card::before { content: '\201C'; position: absolute; top: -20px; left: 16px; font-size: 9rem; line-height: 1; background: var(--g-red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.1; font-family: Georgia, serif; pointer-events: none; }
.test-card:hover { transform: translateY(-6px); border-color: rgba(184,31,10,0.22); box-shadow: 0 32px 64px rgba(0,0,0,0.52); }
.test-stars { display: flex; gap: 3px; }
.test-star  { width: 13px; height: 13px; fill: #8C939D; }
.test-txt   { font-size: 0.9rem; color: var(--muted); line-height: 1.82; font-style: italic; }
.test-auth  { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.test-av    { width: 44px; height: 44px; border-radius: 50%; background: var(--g-red); display: flex; align-items: center; justify-content: center; font-family: 'Bebas Neue', sans-serif; font-size: 1.2rem; color: #fff; flex-shrink: 0; }
.test-name  { font-family: 'Syne', sans-serif; font-size: 0.88rem; font-weight: 700; color: var(--fg); }
.test-loc   { font-size: 0.7rem; color: var(--dim); }

/* ═══════════════════════════════════════════════════════════
   VIDEO / PINTEREST PINS
═══════════════════════════════════════════════════════════ */
.pin-card { background: var(--glass); border: 1px solid var(--border); border-radius: var(--r3); overflow: hidden; transition: all 0.4s var(--ease); }
.pin-card:hover { border-color: rgba(184,31,10,0.3); transform: translateY(-6px); box-shadow: var(--s-card); }
.pin-in { min-height: 280px; background: var(--bg3); display: flex; align-items: flex-start; }
.pin-in > a { width: 100% !important; }
.pin-ft { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 10px; font-family: 'Syne', sans-serif; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--dim); }
.pin-play { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; background: var(--g-red); display: flex; align-items: center; justify-content: center; font-size: 0.62rem; color: #fff; box-shadow: 0 0 14px rgba(184,31,10,0.45); animation: pulse 2.5s ease-in-out infinite; }
.vid-layout { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 18px; }
.vid-layout .pin-card:first-child { grid-row: span 2; }
.vid-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
@media (max-width: 960px) { .vid-layout { grid-template-columns: 1fr 1fr; } .vid-layout .pin-card:first-child { grid-row: auto; } }
@media (max-width: 560px) { .vid-layout { grid-template-columns: 1fr; } .vid-pair { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   BRANDS GRID PAGE
═══════════════════════════════════════════════════════════ */
.brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.brand-card {
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px;
  padding: 28px 20px 22px; text-align: center; cursor: none;
  transition: all 0.4s var(--ease); position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.brand-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(184,31,10,0.1),transparent 65%); opacity: 0; transition: opacity 0.4s; border-radius: inherit; }
.brand-card:hover { transform: translateY(-6px); border-color: rgba(184,31,10,0.4); box-shadow: 0 20px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(184,31,10,0.12); }
.brand-card:hover::before { opacity: 1; }
/* Logo container */
.bc-logo-wrap {
  width: 70px; height: 70px; border-radius: 16px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.brand-card:hover .bc-logo-wrap {
  background: rgba(184,31,10,0.1); border-color: rgba(184,31,10,0.3);
  box-shadow: 0 0 22px rgba(184,31,10,0.22);
}
.bc-logo-img {
  width: 42px; height: 42px; object-fit: contain;
  filter: invert(1);
  transition: filter 0.3s, transform 0.3s;
}
[data-theme="dark"] .bc-logo-img { filter: invert(0) brightness(1); }
.brand-card:hover .bc-logo-img {
  transform: scale(1.1);
  filter: brightness(0) drop-shadow(0 0 4px rgba(184,31,10,0.35));
}
/* Inline SVG logos — no CDN needed */
.bc-logo-svg {
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s;
}
.bc-logo-svg svg {
  width: 100%; height: 100%;
  color: rgba(100,110,125,0.65);
  transition: color 0.3s, filter 0.3s;
}
:not([data-theme="dark"]) .bc-logo-svg svg { color: rgba(40,40,50,0.55); }
.brand-card:hover .bc-logo-svg { transform: scale(1.1); }
.brand-card:hover .bc-logo-svg svg {
  color: rgba(184,31,10,0.85);
  filter: drop-shadow(0 0 4px rgba(184,31,10,0.3));
}
.bc-logo-init {
  width: 42px; height: 42px; border-radius: 8px;
  background: linear-gradient(135deg,#7A1207,#B81F0A);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.1rem; letter-spacing: .04em; color: #fff;
}
.bc-name { font-family: 'Bebas Neue', sans-serif; font-size: 1.25rem; letter-spacing: 0.04em; color: var(--fg); position: relative; z-index: 1; transition: color 0.3s; line-height: 1.1; }
.brand-card:hover .bc-name { color: #D62B12; }
.bc-tag { font-family: 'Syne', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   CTA BANNER
═══════════════════════════════════════════════════════════ */
.cta-banner {
  background: var(--g-red); border-radius: var(--r4); padding: 76px 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  position: relative; overflow: hidden;
}
.cta-banner::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.cta-banner::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54 22v-2h-2v2h-2v2h2v2h2v-2h2v-2zm0-20V0h-2v2h-2v2h2v2h2V4h2V2zM4 22v-2H2v2H0v2h2v2h2v-2h2v-2zm0-20V0H2v2H0v2h2v2h2V4h2V2z' fill='white' fill-opacity='.04'/%3E%3C/svg%3E"); }
.cta-txt { position: relative; z-index: 1; }
.cta-txt h2 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.5rem,5vw,5rem); letter-spacing: 0.03em; color: #fff; line-height: 0.9; margin-bottom: 13px; }
.cta-txt p  { font-size: 1rem; color: rgba(255,255,255,0.78); max-width: 440px; line-height: 1.78; }
.cta-acts   { display: flex; flex-direction: column; gap: 12px; min-width: 220px; position: relative; z-index: 1; }
@media (max-width: 700px) { .cta-banner { padding: 40px 28px; } .cta-acts .btn { justify-content: center; } }

/* ═══════════════════════════════════════════════════════════
   SOCIAL ROW
═══════════════════════════════════════════════════════════ */
.social-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 48px; }
.soc-card { display: flex; align-items: center; gap: 14px; padding: 18px 26px; border: 1px solid var(--border); border-radius: var(--r2); background: var(--glass); transition: all 0.4s var(--ease); min-width: 215px; cursor: none; }
.soc-card:hover { transform: translateY(-5px); box-shadow: var(--s-card); }
.soc-ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.s-ig { background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#bc1888); }
.s-tt { background: #010101; border: 1px solid #333; }
.s-fb { background: #1877F2; }
.s-th { background: #000; border: 1px solid #333; }
.soc-h { font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--fg); }
.soc-p { font-size: 0.7rem; color: var(--dim); }

/* ═══════════════════════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════════════════════ */
.contact-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: start; }
.ci-item { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 28px; }
.ci-ic { width: 48px; height: 48px; border-radius: var(--r); background: rgba(184,31,10,0.08); border: 1px solid rgba(184,31,10,0.18); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ci-ic svg { width: 20px; height: 20px; color: var(--red3); }
.ci-lbl { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.ci-val { font-size: 0.92rem; color: var(--text); line-height: 1.68; }
.ci-val a { color: var(--text); transition: color 0.25s; }
.ci-val a:hover { color: var(--red3); }
.form-panel { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--r4); padding: 44px 40px; box-shadow: var(--card-shadow); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.f-group { display: flex; flex-direction: column; gap: 8px; }
.f-group label { font-family: 'Syne', sans-serif; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.f-group input, .f-group select, .f-group textarea { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: var(--r); padding: 13px 16px; color: var(--fg); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.3s, background 0.3s; }
.f-group input:focus, .f-group select:focus, .f-group textarea:focus { border-color: rgba(184,31,10,0.5); background: rgba(184,31,10,0.03); }
.f-group input::placeholder, .f-group textarea::placeholder { color: var(--dim); }
.f-group select option { background: var(--card-bg); color: var(--fg); }
.f-group textarea { resize: vertical; min-height: 120px; }
.map-box { height: 320px; border-radius: var(--r3); overflow: hidden; border: 1px solid var(--border); margin-top: 28px; }
.map-box iframe { width: 100%; height: 100%; border: none; filter: grayscale(30%) brightness(0.95); border-radius: var(--r2); }
.form-ok { text-align: center; padding: 60px 20px; display: none; flex-direction: column; align-items: center; gap: 16px; }
.ok-ic { width: 72px; height: 72px; border-radius: 50%; background: rgba(184,31,10,0.1); border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--red); }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } .form-panel { padding: 28px 22px; } }

/* ═══════════════════════════════════════════════════════════
   PAGE HERO (inner pages)
═══════════════════════════════════════════════════════════ */
.pg-hero {
  padding: 160px 0 80px; position: relative; overflow: hidden;
  background: #F8F7F3; border-bottom: 1px solid var(--bd);
}
.pg-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 40%, rgba(184,31,10,0.14) 0%, transparent 55%), radial-gradient(ellipse 40% 60% at 20% 80%, rgba(140,147,157,0.05) 0%, transparent 50%); }
.pg-hero::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px); background-size: 66px 66px; mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 0%, transparent 80%); }
.pg-crumb { display: flex; gap: 9px; align-items: center; font-family: 'Syne', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 26px; position: relative; z-index: 1; }
.pg-crumb a { transition: color 0.25s; }
.pg-crumb a:hover { color: var(--red3); }
.pg-hero h1 { font-family: 'Bebas Neue', sans-serif; font-size: clamp(4rem, 9vw, 10rem); letter-spacing: 0.02em; line-height: 0.9; color: var(--white); position: relative; z-index: 1; }
.pg-hero > .w > .pill { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════
   FILTERS
═══════════════════════════════════════════════════════════ */
.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.fp { font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding: 9px 22px; border: 1px solid var(--border); border-radius: 100px; background: transparent; transition: all 0.3s; cursor: none; }
.fp:hover, .fp.on { background: linear-gradient(135deg,#7A1207,#B81F0A,#D62B12); border-color: transparent; color: #fff; box-shadow: 0 4px 22px rgba(184,31,10,0.4); }

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════════════════════════ */
.legal { max-width: 760px; margin: 0 auto; padding: 80px 0; }
.legal h2 { font-family: 'Bebas Neue', sans-serif; font-size: 2rem; letter-spacing: 0.04em; color: var(--white); margin: 52px 0 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.legal p  { font-size: 0.92rem; color: var(--muted); line-height: 1.9; margin-bottom: 12px; }
.legal ul { padding-left: 20px; list-style: disc; color: var(--muted); font-size: 0.92rem; line-height: 2; margin-bottom: 12px; }
.legal a  { color: var(--red3); }
.legal-meta { font-family: 'Syne', sans-serif; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); display: block; margin-bottom: 52px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
footer { background: linear-gradient(180deg, #FFFFFF 0%, #F7F5F0 50%, #F2EFE8 100%); border-top: 1px solid rgba(0,0,0,0.07); padding: 80px 0 0; color: var(--text); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.6fr; gap: 56px; padding-bottom: 56px; border-bottom: 1px solid var(--border); }
.footer-brand p { font-size: 0.88rem; color: var(--muted); line-height: 1.88; max-width: 285px; margin-top: 14px; }
.footer-soc { display: flex; gap: 10px; margin-top: 22px; }
.fsb { width: 38px; height: 38px; border: 1px solid rgba(0,0,0,0.12); border-radius: var(--r); display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.05); color: var(--text); transition: all 0.3s; }
.fsb:hover { border-color: var(--red2); color: #fff; background: var(--red2); box-shadow: 0 0 16px rgba(184,31,10,0.3); }
.fc h4 { font-family: 'Syne', sans-serif; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.fc nav { display: flex; flex-direction: column; gap: 11px; }
.fc nav a { font-size: 0.88rem; color: var(--dim); transition: color 0.25s; }
.fc nav a:hover { color: var(--red3); }
.fci { display: flex; flex-direction: column; gap: 14px; }
.fct { display: flex; gap: 10px; font-size: 0.84rem; color: var(--muted); align-items: flex-start; }
.fct svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 3px; color: var(--red3); }
.fct a { color: var(--dim); transition: color 0.25s; }
.fct a:hover { color: var(--text); }
.footer-bottom { padding: 22px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.78rem; color: var(--muted); }
.footer-bl { display: flex; gap: 20px; }
.footer-bl a { font-size: 0.78rem; color: var(--muted); transition: color 0.25s; }
.footer-bl a:hover { color: var(--red3); }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 36px; } .footer-bottom { flex-direction: column; align-items: flex-start; } }

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════════════════════ */
#btt { position: fixed; bottom: 28px; right: 28px; z-index: 900; width: 50px; height: 50px; border-radius: var(--r); background: var(--g-red); color: #fff; display: flex; align-items: center; justify-content: center; cursor: none; opacity: 0; pointer-events: none; transform: translateY(16px); transition: all var(--t); box-shadow: var(--s-red); }
#btt.on { opacity: 1; pointer-events: all; transform: none; }
#btt:hover { transform: translateY(-4px) scale(1.08); }

/* ═══════════════════════════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════════════════════════ */
@keyframes fadeUp   { from { opacity:0; transform:translateY(32px) } to { opacity:1; transform:none } }
@keyframes fadeIn   { from { opacity:0 } to { opacity:1 } }
@keyframes slideUp  { from { transform:translateY(105%) } to { transform:none } }
@keyframes carIn    { from { opacity:0; transform:translateX(80px) } to { opacity:1; transform:none } }
@keyframes scrollL  { 0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes blink    { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes pulse    { 0%,100%{box-shadow:0 0 0 0 rgba(184,31,10,0.4)} 50%{box-shadow:0 0 0 10px rgba(184,31,10,0)} }
@keyframes orbF     { 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(28px,-22px) scale(1.08)} 66%{transform:translate(-18px,18px) scale(0.93)} }
@keyframes meshPulse{ 0%,100%{opacity:1} 50%{opacity:0.72} }
@keyframes gridShift{ from{background-position:0 0} to{background-position:70px 70px} }
@keyframes marquee  { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══════════════════════════════════════════════════════════
   SOCIAL FEED — Instagram & TikTok
═══════════════════════════════════════════════════════════ */
.social-tabs { display:flex; gap:0; margin-bottom:48px; border-bottom:1px solid var(--border); }
.social-tab { font-family:'Syne',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:16px 36px; color:var(--muted); border-bottom:2px solid transparent; transition:all .3s; cursor:none; background:none; border-radius:0; margin-bottom:-1px; display:flex; align-items:center; gap:10px; }
.social-tab.on, .social-tab:hover { color:var(--red2); border-bottom-color:var(--red); }

.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ig-embed-wrap { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; min-height:500px; display:flex; align-items:stretch; }
.ig-embed-wrap .instagram-media { min-width:100% !important; margin:0 !important; border:none !important; border-radius:0 !important; background:transparent !important; }
@media (max-width:900px) { .ig-grid { grid-template-columns:1fr; } }

.tt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.tt-embed-wrap { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; min-height:700px; display:flex; align-items:stretch; }
.tt-embed-wrap .tiktok-embed { min-width:100% !important; margin:0 !important; }
@media (max-width:900px) { .tt-grid { grid-template-columns:1fr; } }

/* ══ VIDEO WALL (home page) ════════════════════════════════ */
.yt-wall-cell { min-height: 220px; }
.vp-cell.large.yt-wall-cell { min-height: 460px; }
@media (max-width:700px) { .yt-wall-cell,.vp-cell.large.yt-wall-cell { min-height:180px; } }

/* ══ IG POST CARDS ═══════════════════════════════════════ */
.ig-post-card {
  display:block; background:var(--card-bg); border:1px solid var(--card-border);
  border-radius:18px; overflow:hidden; text-decoration:none;
  transition:transform .35s,box-shadow .35s;
}
.ig-post-card:hover { transform:translateY(-6px); box-shadow:0 20px 44px rgba(0,0,0,.3); }
.ig-thumb-wrap { position:relative; overflow:hidden; }
.ig-thumb-wrap img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .5s; }
.ig-post-card:hover .ig-thumb-wrap img { transform:scale(1.06); }
.ig-play-layer {
  position:absolute; inset:0;
  background:linear-gradient(0deg,rgba(10,10,11,.8) 0%,rgba(10,10,11,.1) 60%);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s;
}
.ig-post-card:hover .ig-play-layer { opacity:1; }
.ig-play-btn {
  width:60px; height:60px; border-radius:50%;
  background:linear-gradient(135deg,#7A1207,#B81F0A);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 24px rgba(184,31,10,.5);
}
.ig-badge {
  position:absolute; top:12px; left:12px;
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  border-radius:8px; padding:5px 10px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Syne',sans-serif; font-size:.58rem; font-weight:700;
  color:#fff; text-transform:uppercase; letter-spacing:.06em;
}
.ig-caption { padding:16px 18px; }
.ig-caption p { font-size:.82rem; color:var(--fg-muted); line-height:1.55; margin-bottom:10px; }
.ig-caption span { font-family:'Syne',sans-serif; font-size:.63rem; font-weight:700; color:var(--fg-dim); letter-spacing:.07em; }

/* ══ YOUTUBE GRID ════════════════════════════════════════ */
.yt-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.yt-card { background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:var(--r2); overflow:hidden; transition:transform .3s,border-color .3s; }
.yt-card:hover { transform:translateY(-4px); border-color:rgba(255,0,0,.3); }
.yt-frame-wrap { position:relative; width:100%; aspect-ratio:16/9; background:#000; }
.yt-frame-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none; display:block; }
.yt-info { padding:14px 16px; }
.yt-brand { font-family:'Syne',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,100,100,.7); margin-bottom:4px; }
.yt-title { font-family:'Bebas Neue',sans-serif; font-size:1.15rem; letter-spacing:.04em; color:#F0EDE8; line-height:1.1; margin-bottom:3px; }
.yt-sub { font-size:.72rem; color:rgba(240,237,232,.45); letter-spacing:.03em; }
@media (max-width:900px) { .yt-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .yt-grid { grid-template-columns:1fr; } }

/* ══ CAR IMAGE SLIDESHOW ════════════════════════════════ */
.cc-slideshow { position:relative; overflow:hidden; }
.cc-slides { display:flex; transition:transform .45s cubic-bezier(.22,1,.36,1); height:100%; }
.cc-slide { flex:0 0 100%; position:relative; }
.cc-slide img,.cc-slide iframe,.cc-slide video { width:100%; height:100%; object-fit:cover; display:block; border:none; }
.cc-slide-video { position:relative; }
.cc-slide-video::before {
  content:'● LIVE';
  position:absolute; top:8px; right:8px; z-index:3;
  background:rgba(0,0,0,.55); color:rgba(255,255,255,.85); font-family:'Syne',sans-serif;
  font-size:.52rem; font-weight:800; letter-spacing:.14em;
  padding:3px 9px; border-radius:20px; backdrop-filter:blur(4px);
}
.cc-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:5px; z-index:4; }
.cc-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); border:none; padding:0; cursor:pointer; transition:background .2s,transform .2s; }
.cc-dot.on { background:#fff; transform:scale(1.3); }
.cc-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:4; width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transition:opacity .2s; font-size:.7rem; padding:0; }
.cc-slideshow:hover .cc-nav { opacity:1; }
.cc-nav.prev { left:8px; }
.cc-nav.next { right:8px; }


/* Profile CTA cards */
.profile-cta { background:var(--glass); border:1px solid var(--border2); border-radius:var(--r3); padding:52px 44px; text-align:center; position:relative; overflow:hidden; }
.profile-cta::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:300px; height:300px; border-radius:50%; filter:blur(80px); pointer-events:none; }
.profile-cta.p-ig::before { background:radial-gradient(circle, rgba(220,39,67,.18), transparent 70%); }
.profile-cta.p-tt::before { background:radial-gradient(circle, rgba(105,201,208,.12), transparent 70%); }
.profile-num { font-family:'Bebas Neue',sans-serif; font-size:4rem; letter-spacing:.02em; line-height:1; margin-bottom:4px; }
.profile-lbl { font-family:'Syne',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }

/* ═══════════════════════════════════════════════════════════
   PINTEREST VIDEO SECTION
═══════════════════════════════════════════════════════════ */
.pin-section { background:var(--bg1); }
.pin-masonry { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pin-card { background:var(--bg3); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t2), box-shadow var(--t2); }
.pin-card:hover { transform:translateY(-6px); box-shadow:0 32px 60px rgba(0,0,0,.6), 0 0 1px rgba(255,255,255,.08); }
.pin-inner { flex:1; min-height:320px; position:relative; overflow:hidden; background:var(--bg4); display:flex; align-items:center; justify-content:center; }
.pin-inner > span.PINIT { display:block !important; width:100% !important; }
.pin-inner iframe { width:100% !important; border:none; min-height:300px; }
/* Overlay while loading */
.pin-loading { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; z-index:0; pointer-events:none; }
.pin-loading svg { opacity:.25; }
.pin-loading-txt { font-family:'Syne',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.pin-bar { background:var(--bg4); padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--border); }
.pin-bar-ic { width:28px; height:28px; flex-shrink:0; }
.pin-bar-lbl { font-family:'Syne',sans-serif; font-size:.7rem; font-weight:700; color:var(--muted); flex:1; }
.pin-play-btn { width:34px; height:34px; border-radius:50%; background:var(--g-red); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s; cursor:none; }
.pin-play-btn:hover { transform:scale(1.15); }
/* Full embed mode — show large first pin */
.pin-hero-card { grid-column:span 2; }
.pin-hero-card .pin-inner { min-height:580px; }
@media (max-width:900px) { .pin-masonry { grid-template-columns:1fr; } .pin-hero-card { grid-column:span 1; } .pin-hero-card .pin-inner { min-height:380px; } }

/* ═══════════════════════════════════════════════════════════
   NEWS CARDS
═══════════════════════════════════════════════════════════ */
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.news-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; display:flex; flex-direction:column; transition:transform var(--t2), box-shadow var(--t2); }
.news-card:hover { transform:translateY(-6px); box-shadow:var(--s-card); }
.nc-img { height:200px; overflow:hidden; position:relative; flex-shrink:0; }
.nc-img img { height:100%; transition:transform .8s var(--ease); }
.news-card:hover .nc-img img { transform:scale(1.06); }
.nc-body { padding:26px; flex:1; display:flex; flex-direction:column; gap:10px; }
.nc-cat { font-family:'Syne',sans-serif; font-size:.58rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--red3); }
.nc-title { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; color:var(--white); line-height:1.45; }
.nc-summary { font-size:.84rem; color:var(--muted); line-height:1.8; flex:1; }
.nc-meta { display:flex; align-items:center; justify-content:space-between; font-family:'Syne',sans-serif; font-size:.65rem; font-weight:600; color:var(--dim); padding-top:14px; border-top:1px solid var(--border); margin-top:auto; }
@media (max-width:1000px) { .news-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:620px)  { .news-grid { grid-template-columns:1fr; } }

/* Newsletter input */
.newsletter-row { display:grid; grid-template-columns:1fr auto; gap:0; background:var(--bg3); border:1px solid var(--border2); border-radius:var(--r2); overflow:hidden; max-width:520px; }
.newsletter-row input { background:none; border:none; padding:18px 24px; font-size:.92rem; color:var(--white); outline:none; width:100%; }
.newsletter-row input::placeholder { color:var(--dim); }
.newsletter-row button { padding:14px 28px; background:var(--g-red); color:#fff; font-family:'Syne',sans-serif; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap; cursor:none; transition:opacity .2s; border-radius:0; }
.newsletter-row button:hover { opacity:.85; }

/* ═══════════════════════════════════════════════════════════
   EVENT CARDS
═══════════════════════════════════════════════════════════ */
.events-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.event-card { background:var(--glass); border:1px solid var(--border); border-radius:var(--r2); overflow:hidden; display:flex; gap:0; transition:transform var(--t2), box-shadow var(--t2); }
.event-card:hover { transform:translateY(-5px); box-shadow:var(--s-card); }
.ec-img { width:220px; flex-shrink:0; overflow:hidden; position:relative; }
.ec-img img { height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.event-card:hover .ec-img img { transform:scale(1.07); }
.ec-status { position:absolute; top:14px; left:14px; font-family:'Syne',sans-serif; font-size:.56rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding:5px 11px; border-radius:100px; }
.ec-status.upcoming { background:rgba(184,31,10,.15); border:1px solid rgba(184,31,10,.35); color:var(--red3); }
.ec-status.past { background:rgba(110,104,136,.12); border:1px solid var(--border); color:var(--muted); }
.ec-body { padding:28px 30px; flex:1; display:flex; flex-direction:column; gap:10px; }
.ec-date { font-family:'Syne',sans-serif; font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--red3); }
.ec-name { font-family:'Bebas Neue',sans-serif; font-size:1.6rem; letter-spacing:.03em; color:var(--white); line-height:1.1; }
.ec-loc { font-size:.8rem; color:var(--dim); display:flex; gap:7px; align-items:center; }
.ec-desc { font-size:.84rem; color:var(--muted); line-height:1.8; flex:1; }
@media (max-width:900px)  { .events-grid { grid-template-columns:1fr; } }
@media (max-width:620px)  { .event-card { flex-direction:column; } .ec-img { width:100%; height:180px; } }



/* ═══════════════════════════════════════════════════════════
   VIDEO WALL — anonymous autoplay clips
═══════════════════════════════════════════════════════════ */
.vp-section { background: linear-gradient(160deg, #0A0203 0%, #160405 40%, #0A0203 100%); color: #F0EDE8; position: relative; overflow: hidden; }
.vp-grid-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 60% at 10% 50%, rgba(184,31,10,.07) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 90% 30%, rgba(140,147,157,.05) 0%, transparent 55%);
}

/* ── Grid layout ── */
.vp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 260px;
  gap: 12px;
}
.vp-cell         { position: relative; border-radius: 14px; overflow: hidden;
                   background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,.08);
                   transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
                   cursor: pointer; }
.vp-cell:hover   { border-color: rgba(184,31,10,.35);
                   box-shadow: 0 0 36px rgba(184,31,10,.1), 0 24px 48px rgba(0,0,0,.65);
                   transform: translateY(-4px) scale(1.01); }
.vp-cell.large   { grid-column: span 2; grid-row: span 2; }

/* ── Thumbnail background ── */
.vp-thumb {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity .6s;
}
/* shimmer shown while thumbnail loads */
.vp-thumb::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, #1a0808 25%, #2a0c0c 50%, #1a0808 75%);
  background-size: 400% 400%;
  animation: vpShimmer 2.4s ease-in-out infinite;
}
.vp-thumb[style*="url"]::before { display: none; }
@keyframes vpShimmer { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* Dark gradient overlay on thumbnail */
.vp-thumb::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(2,2,9,.7) 0%, transparent 50%);
}

/* ── Play button ── */
.vp-play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg,#7A1207,#B81F0A);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(184,31,10,.4), 0 8px 32px rgba(0,0,0,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .4s, transform .2s;
  animation: vpPulse 2.4s ease-in-out infinite;
}
.vp-cell.large .vp-play-btn { width: 76px; height: 76px; }
.vp-play-btn:hover { transform: translate(-50%, -50%) scale(1.12); }
@keyframes vpPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(184,31,10,.4), 0 8px 32px rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 14px rgba(184,31,10,0), 0 8px 32px rgba(0,0,0,.6); }
}

/* ── Iframe slot ── */
.vp-slot {
  position: absolute; inset: 0;
  display: none; overflow: hidden;
}
.vp-slot iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* Loading shimmer inside slot */
.vp-shimmer {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg,
    rgba(255,255,255,.01) 0%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,.01) 100%);
  background-size: 300% 100%;
  animation: shimmer 1.8s linear infinite;
  pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .vp-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .vp-cell.large { grid-column: span 2; }
  .vp-cell { min-height: 220px; }
}
@media (max-width: 560px) {
  .vp-grid { grid-template-columns: 1fr; }
  .vp-cell.large { grid-column: span 1; }
  .vp-cell { min-height: 200px; }
}

/* ═══════════════════════════════════════════════════════════
   CAR WEBSITE FX — Speed streaks · Sparks · Glitch · Glow
═══════════════════════════════════════════════════════════ */

/* ── Speed streak lines (hero background) ── */
.h-streaks {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.h-streak {
  position: absolute; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,31,10,.45), transparent);
  animation: streakSweep linear infinite;
  opacity: 0;
}
@keyframes streakSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  5%   { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translateX(120vw); opacity: 0; }
}

/* ── Tachometer RPM ring around stats ── */
.tach-ring {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
}
.tach-ring::before {
  content: '';
  position: absolute; inset: -8px;
  border-radius: 50%;
  background: conic-gradient(var(--red) var(--rpm, 0%), rgba(184,31,10,.08) 0%);
  mask: radial-gradient(circle, transparent 62%, #000 63%);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%);
  transition: --rpm 2s var(--ease);
  animation: rpmSpin 3s var(--ease) forwards;
}
@property --rpm { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@keyframes rpmSpin { to { --rpm: 78%; } }

/* ── Glitch text effect on section h2s ── */
@keyframes glitch1 {
  0%,100%{ clip-path: inset(0 0 100% 0); transform: none; }
  20%    { clip-path: inset(30% 0 50% 0); transform: translateX(-4px); }
  40%    { clip-path: inset(60% 0 20% 0); transform: translateX( 4px); }
  60%    { clip-path: inset(10% 0 80% 0); transform: translateX(-2px); }
  80%    { clip-path: inset(80% 0 10% 0); transform: translateX( 2px); }
}
@keyframes glitch2 {
  0%,100%{ clip-path: inset(0 0 100% 0); transform: none; }
  25%    { clip-path: inset(55% 0 30% 0); transform: translateX( 5px); }
  50%    { clip-path: inset(15% 0 65% 0); transform: translateX(-5px); }
  75%    { clip-path: inset(70% 0 10% 0); transform: translateX( 3px); }
}
.glitch {
  position: relative;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left: 0; top: 0; width: 100%;
  font-family: inherit; font-size: inherit; font-weight: inherit;
  letter-spacing: inherit; line-height: inherit;
  pointer-events: none;
}
.glitch::before {
  color: #ff0028; opacity: .55;
  animation: glitch1 6s step-once infinite 2s;
}
.glitch::after {
  color: #00f0ff; opacity: .35;
  animation: glitch2 6s step-once infinite 3.5s;
}

/* ── Ambient mouse glow on hero ── */
.h-mouse-glow {
  position: absolute; pointer-events: none; z-index: 2;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184,31,10,.14) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: left .08s linear, top .08s linear;
  filter: blur(40px);
}

/* ── Red light trail on card hover ── */
.car-card::after, .rent-card::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(184,31,10,.12) 0%,
    rgba(140,147,157,.06) 50%,
    transparent 100%);
  opacity: 0;
  transition: opacity .4s;
}
.car-card:hover::after, .rent-card:hover::after { opacity: 1; }

/* ── Paint smear line under card on hover ── */
.car-card::before {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g-red);
  transform: scaleX(0);
  transition: transform .5s var(--ease);
  border-radius: 0 0 var(--r3) var(--r3);
  z-index: 2;
}
.car-card:hover::before { transform: scaleX(1); }

/* ── Spark burst on CTA buttons ── */
@keyframes sparkPop {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}
.btn-spark {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.btn-spark::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.25) 0%, transparent 65%);
  animation: sparkPop .6s var(--ease) both;
}

/* ── Redline border — pulsing red glow border on featured cards ── */
.redline-card {
  position: relative;
}
.redline-card::after {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, var(--red), var(--gold), var(--red));
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  transition: opacity .4s;
  animation: borderSpin 4s linear infinite;
}
.redline-card:hover::after { opacity: .6; }
@keyframes borderSpin { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ── Diagonal section divider ── */
.sec-slash {
  position: relative;
}
.sec-slash::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 60px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 30%, 0 100%);
  z-index: 1;
}

/* ── RPM counter — animated number surge ── */
@keyframes rpmCount {
  0%   { opacity: 0; transform: translateY(20px) scale(.88); }
  30%  { opacity: 1; transform: translateY(-4px)  scale(1.06); }
  60%  { transform: translateY(2px) scale(.99); }
  100% { opacity: 1; transform: none; }
}
.h-stat.visible .h-stat-v { animation: rpmCount .9s var(--ease) both; }

/* ── Carbon fibre texture on dark elements ── */
.carbon {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px,
    transparent 8px
  ), repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,.012) 0px,
    rgba(255,255,255,.012) 1px,
    transparent 1px,
    transparent 8px
  );
}

/* ── Neon underline on section headings ── */
.sh h2 .t-r {
  position: relative;
}
.sh.c h2 .t-r::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%; right: 50%;
  height: 2px;
  background: var(--g-red);
  border-radius: 2px;
  transition: left .6s var(--ease), right .6s var(--ease);
  box-shadow: 0 0 14px rgba(184,31,10,.6);
}
.sh.c.in-view h2 .t-r::after { left: 0; right: 0; }

/* ── Particle dots floating in hero bg ── */
.h-particles {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.h-particle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: linear-gradient(135deg,#7A1207,#B81F0A); opacity: 0;
  animation: particleFloat linear infinite;
}
@keyframes particleFloat {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: .6; }
  90%  { opacity: .3; }
  100% { transform: translateY(-160px) scale(0); opacity: 0; }
}

/* ── Fuel gauge progress bar for testimonial stars ── */
.star-fuel {
  display: inline-block; height: 3px; width: 60px; border-radius: 2px;
  background: rgba(255,255,255,.06); overflow: hidden; vertical-align: middle;
  margin-left: 8px;
}
.star-fuel-fill {
  height: 100%; border-radius: 2px;
  background: var(--g-gold);
  box-shadow: 0 0 8px rgba(140,147,157,.5);
  animation: fuelLoad 1.2s var(--ease) forwards;
  transform-origin: left;
  transform: scaleX(0);
}
@keyframes fuelLoad { to { transform: scaleX(1); } }

/* ── Wheel spin loader ── */
@keyframes wheelSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.wheel-loader {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(184,31,10,.2);
  border-top-color: var(--red);
  animation: wheelSpin .8s linear infinite;
}

/* ── Page transition — wipe from left ── */
.page-wipe {
  position: fixed; inset: 0; z-index: 9995;
  background: linear-gradient(135deg,#7A1207,#B81F0A);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  pointer-events: none;
}
.page-wipe.active { transform: scaleX(1); }

/* ── Hover scanline effect on car images ── */
.cc-img::before {
  content: '';
  position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(
    transparent 0px, transparent 3px,
    rgba(0,0,0,.04) 3px, rgba(0,0,0,.04) 4px
  );
  opacity: 0; transition: opacity .4s;
  pointer-events: none;
}
.car-card:hover .cc-img::before { opacity: 1; }

/* ── Red glow ring on featured badge ── */
.b-new { box-shadow: 0 0 14px rgba(184,31,10,.45); }

/* ── Magnetic button warp (scale + translate) ── */
.btn-r { 
  will-change: transform;
}
.btn-r:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 0 30px rgba(184,31,10,.3), 0 8px 24px rgba(0,0,0,.4);
}

.vp-slot { display: none; position: absolute; inset: 0; }
.vp-label {
  position: absolute; bottom: 52px; left: 16px; right: 16px; z-index: 3;
  background: rgba(20,5,5,.75); backdrop-filter: blur(8px);
  border-radius: 8px; padding: 8px 12px;
  transform: translateY(4px); opacity: 0;
  transition: all .3s var(--ease);
}
.vp-yt-badge {
  position: absolute; bottom: 14px; left: 16px; z-index: 3;
  background: rgba(184,31,10,.85); backdrop-filter: blur(6px);
  border-radius: 6px; padding: 4px 10px;
  font-family: 'Syne', sans-serif; font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: white;
  display: flex; align-items: center; gap: 5px;
  opacity: 0; transform: translateY(4px);
  transition: all .3s var(--ease) .05s;
}
.vp-cell:hover .vp-label,
.vp-cell:hover .vp-yt-badge { opacity: 1; transform: translateY(0); }
.vp-cell:hover .vp-thumb { transform: scale(1.04); }
/* ── YouTube thumbnail image inside vp-cell ── */
.vp-ytthumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
  transition: transform 0.6s var(--ease);
}
.vp-cell:hover .vp-ytthumb { transform: scale(1.04); }
/* Make sure play button is always on top of thumbnail */
.vp-cell .vp-play-btn { z-index: 4; }
.vp-cell .vp-label { z-index: 4; }
.vp-cell .vp-yt-badge { z-index: 4; }


/* ═══════════════════════════════════════════════════════════
   DUAL THEME SYSTEM — NEXT RIDES UGANDA v6.1
   Light (default) · Dark (toggle via [data-theme="dark"])
   All components fully themed.
═══════════════════════════════════════════════════════════ */

/* ══ LIGHT THEME variables ══════════════════════════════════ */
:root {
  /* Page */
  --page-bg:     #F8F7F3;
  --sec-alt:     #F0EDE6;
  --sec-white:   #FFFFFF;
  /* Cards */
  --card-bg:     #FFFFFF;
  --card-border: rgba(0,0,0,0.07);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.06);
  --card-hover:  0 12px 40px rgba(0,0,0,0.11);
  /* Text — all semantic */
  --fg:          #1C1D20;
  --fg-muted:    #6B7280;
  --fg-dim:      #9CA3AF;
  /* Aliases for inline styles using var(--text)/var(--muted) */
  --text:        #1C1D20;
  --muted:       #6B7280;
  --dim:         #9CA3AF;
  /* Borders */
  --bd:          rgba(0,0,0,0.08);
  --bd2:         rgba(0,0,0,0.13);
  /* Nav */
  --nav-glass:   rgba(255,255,255,0.82);
  --nav-glass-sc:rgba(255,255,255,0.97);
  --nav-bd:      rgba(0,0,0,0.07);
  --nav-bd-sc:   rgba(0,0,0,0.10);
  --nav-shadow:  0 2px 24px rgba(0,0,0,0.08);
  /* Search/filter */
  --sf-bg:       #F0EDE6;
  --input-bg:    #FFFFFF;
  --input-bd:    rgba(0,0,0,0.10);
  /* Toggle */
  --toggle-bg:   #E8E5DF;
  --toggle-knob: #FFFFFF;
}

/* ══ DARK THEME variables ═════════════════════════════════════ */
[data-theme="dark"] {
  /* Page */
  --page-bg:     #0D0D0F;
  --sec-alt:     rgba(255,255,255,0.025);
  --sec-white:   #111113;
  /* Cards */
  --card-bg:     #18181C;
  --card-border: rgba(255,255,255,0.07);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.35);
  --card-hover:  0 12px 40px rgba(0,0,0,0.55);
  /* Text */
  --fg:          #E8E6E0;
  --fg-muted:    #9AA1AC;
  --fg-dim:      #5A6070;
  /* Aliases — keep inline styles using var(--text)/var(--muted) visible */
  --text:        #E8E6E0;
  --muted:       #9AA1AC;
  --dim:         #5A6070;
  /* Borders */
  --bd:          rgba(255,255,255,0.08);
  --bd2:         rgba(255,255,255,0.13);
  /* Nav */
  --nav-glass:   rgba(12,12,14,0.82);
  --nav-glass-sc:rgba(12,12,14,0.97);
  --nav-bd:      rgba(255,255,255,0.07);
  --nav-bd-sc:   rgba(255,255,255,0.10);
  --nav-shadow:  0 2px 24px rgba(0,0,0,0.4);
  /* Search/filter */
  --sf-bg:       #111113;
  --input-bg:    #1E1E23;
  --input-bd:    rgba(255,255,255,0.08);
  /* Toggle */
  --toggle-bg:   #2A2A30;
  --toggle-knob: #1A1A1F;
}

/* ══ Page base ════════════════════════════════════════════════ */
html { background: var(--page-bg); }
body {
  background: var(--page-bg);
  color: var(--fg);
  min-height: 100vh;
  transition: background 0.3s, color 0.3s;
}
[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184,31,10,0.08) 0%, transparent 60%),
    var(--page-bg);
}
:not([data-theme="dark"]) body {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(184,31,10,0.04) 0%, transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F7F6F2 30%, #F2F0EB 70%, var(--page-bg) 100%);
}

/* ══ Scroll Reveal ══════════════════════════════════════════ */
.rv  { opacity: 0; transform: translateY(36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rl  { opacity: 0; transform: translateX(-36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rr  { opacity: 0; transform: translateX(36px);  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.rv.in, .rv.vis, .rl.in, .rl.vis, .rr.in, .rr.vis { opacity: 1 !important; transform: none !important; }

/* ══ Section backgrounds ══════════════════════════════════ */
section, .sec, .ss { background: transparent; position: relative; }
section.alt { background: var(--sec-alt); }
section.wh  { background: var(--sec-white); }

/* ══ Typography — always use semantic vars ═════════════════ */
h1, h2, h3, h4, h5, h6 { color: var(--fg); }
p { color: var(--fg-muted); }
.sh h2 { color: var(--fg); }
.sh h2 .t-r { background: var(--g-red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.sh p { color: var(--fg-muted); }

/* ══ Pills ════════════════════════════════════════════════ */
.pill         { border-color: rgba(184,31,10,0.22); background: rgba(184,31,10,0.07); color: var(--red); }
.pill::before { background: var(--red); box-shadow: 0 0 7px var(--red); }
.pill-g       { border-color: rgba(100,110,125,0.22); background: rgba(100,110,125,0.06); color: var(--fg-muted); }
.pill-g::before { background: var(--fg-muted); }

/* ══ Navbar ═══════════════════════════════════════════════ */
#nav::before {
  background: var(--nav-glass);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--nav-bd);
  transition: all 0.4s var(--ease);
}
#nav.sc::before {
  background: var(--nav-glass-sc);
  backdrop-filter: blur(32px) saturate(2);
  border-bottom-color: var(--nav-bd-sc);
  box-shadow: var(--nav-shadow);
}
.nav-a        { color: var(--fg-muted); }
.nav-a:hover, .nav-a.act { color: var(--red2); }
.logo-t       { background: var(--card-bg) !important; border-color: var(--bd2) !important; color: var(--fg) !important; }
.logo-sub     { color: var(--fg-dim); }
#burg span    { background: var(--fg); }
/* Mobile nav panel */
@media (max-width: 1000px) {
  #mob-nav {
    background: var(--nav-glass-sc) !important;
    border-bottom: 1px solid var(--bd) !important;
    backdrop-filter: blur(32px);
  }
  .nav-a { color: var(--fg); font-size: 1rem; }
}

/* ══ Theme Toggle Button ═════════════════════════════════ */
#theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card-bg); border: 1.5px solid var(--bd2);
  color: var(--fg-muted); cursor: none;
  transition: all 0.3s var(--ease);
  flex-shrink: 0; position: relative; z-index: 1;
}
#theme-toggle:hover { border-color: var(--red2); color: var(--red2); background: rgba(184,31,10,0.07); transform: scale(1.1); }
#theme-toggle svg { width: 16px; height: 16px; pointer-events: none; }
.tt-sun, .tt-moon { position: absolute; transition: opacity 0.3s, transform 0.4s var(--ease); }
.tt-sun  { opacity: 1; transform: rotate(0deg) scale(1); }
.tt-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
[data-theme="dark"] .tt-sun  { opacity: 0; transform: rotate(90deg) scale(0.6); }
[data-theme="dark"] .tt-moon { opacity: 1; transform: rotate(0deg) scale(1); }

/* ══ Buttons ══════════════════════════════════════════════ */
.btn-gl { background: var(--card-bg); color: var(--fg); border: 1.5px solid var(--bd2); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.btn-gl:hover { background: var(--sec-alt); border-color: var(--bd2); color: var(--fg); transform: translateY(-3px); }
.btn-out { background: transparent; color: var(--fg); border: 1.5px solid var(--bd2); }
.btn-out:hover { border-color: var(--red2); color: var(--red2); transform: translateY(-2px); }
[data-theme="dark"] .btn-g { color: #F5F5F5; }

/* ══ Stats Bar ════════════════════════════════════════════ */
.stats-sec { background: var(--card-bg); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.stat-num  { color: var(--fg); }
.stat-lbl  { color: var(--fg-muted); }

/* ══ Car Cards ═════════════════════════════════════════════ */
.car-card  { background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.car-card:hover { box-shadow: var(--card-hover) !important; }
.cc-body   { background: var(--card-bg); }
.cc-name   { color: var(--fg); }
.cc-brand  { color: var(--red3); }
.cc-spec   { color: var(--fg-muted); }
.cc-spec span { color: var(--fg); }
.cc-foot   { border-top-color: var(--bd); }
.cc-badge  { background: rgba(184,31,10,0.09); color: var(--red); }
.cc-ugx    { color: var(--fg-dim); }

/* ══ Rental Cards ═════════════════════════════════════════ */
.rc, .rent-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; box-shadow: var(--card-shadow); }
.rc-name  { color: var(--fg) !important; }
.rc-brand { color: var(--gold); }
.rc-feat  { background: var(--sec-alt); border-color: var(--bd); color: var(--fg-muted); }
.rc-foot  { border-top-color: var(--bd); }
.rc-sub   { color: var(--fg-dim) !important; }

/* ══ Brand Cards ══════════════════════════════════════════ */
.brand-card, .bc {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow);
}
.brand-card:hover, .bc:hover {
  border-color: rgba(184,31,10,0.3) !important;
  box-shadow: var(--card-hover) !important;
}
.bc-name   { color: var(--fg) !important; }
.bc-origin, .bc-tag { color: var(--fg-muted) !important; }
.bc-logo-wrap {
  background: var(--sec-alt) !important;
  border: 1px solid var(--bd) !important;
}
:not([data-theme="dark"]) .bc-logo-img { filter: brightness(0) opacity(0.75) !important; }
:not([data-theme="dark"]) .brand-card:hover .bc-logo-img,
:not([data-theme="dark"]) .bc:hover .bc-logo-img {
  filter: brightness(0) opacity(0.9) drop-shadow(0 0 4px rgba(184,31,10,0.3)) !important;
}
[data-theme="dark"] .bc-logo-img { filter: brightness(0) invert(1) opacity(0.7) !important; }
[data-theme="dark"] .brand-card:hover .bc-logo-img { filter: brightness(0) invert(1) opacity(0.95) !important; }

/* ══ How It Works steps ═══════════════════════════════════ */
.how-step { background: var(--card-bg); border-color: var(--bd); }
.how-step h3 { color: var(--fg); }
.how-step p  { color: var(--fg-muted); }
.how-n { color: rgba(184,31,10,0.08); }
[data-theme="dark"] .how-n { color: rgba(184,31,10,0.15); }

/* ══ Testimonials ═════════════════════════════════════════ */
.testimonials-sec {
  background: var(--sec-alt) !important;
}
.testimonials-sec .sh h2 { color: var(--fg) !important; }
.testimonials-sec .sh p  { color: var(--fg-muted) !important; }
.testimonials-sec .pill  { border-color: rgba(184,31,10,0.22) !important; background: rgba(184,31,10,0.07) !important; color: var(--red) !important; }
.testimonials-sec .pill::before { background: var(--red) !important; }
.t-card, .test-card, .testimonial-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}
.test-txt, .t-body { color: var(--fg-muted) !important; }
.test-name, .t-name { color: var(--fg) !important; }
.test-loc, .t-role  { color: var(--fg-dim) !important; }
.t-stars { color: var(--red) !important; }
[data-theme="dark"] .test-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important; }

/* ══ Features / Why Us ════════════════════════════════════ */
.feat-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow);
}
.feat-title { color: var(--fg) !important; }
.feat-desc  { color: var(--fg-muted) !important; }

/* ══ Search / Filter ══════════════════════════════════════ */
.search-wrap { background: var(--sf-bg) !important; border-bottom: 1px solid var(--bd); }
.sf-inner, .search-panel { background: var(--card-bg) !important; border: 1px solid var(--bd) !important; box-shadow: var(--card-shadow) !important; }
.sf label, .sf-label { color: var(--fg-muted); }
.sf select, .sf input, .sf-select, .sf-input {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-bd) !important;
  color: var(--fg) !important;
}
.sf select option { background: var(--input-bg) !important; color: var(--fg) !important; }
/* Filter buttons */
.f-btn, .fp, .nf-btn, .origin-btn {
  background: var(--card-bg);
  border: 1.5px solid var(--bd2);
  color: var(--fg);
}
.f-btn:hover, .fp:hover, .nf-btn:hover, .origin-btn:hover {
  background: rgba(184,31,10,0.07);
  border-color: rgba(184,31,10,0.3);
  color: var(--red2);
}
.f-btn.act, .f-btn.on, .fp.on, .nf-btn.on, .origin-btn.act {
  background: var(--red2) !important;
  border-color: var(--red2) !important;
  color: #FFFFFF !important;
}

/* ══ News Cards ═══════════════════════════════════════════ */
.news-card, .nc {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow);
}
.news-card:hover { box-shadow: var(--card-hover) !important; }
.nc-body    { background: var(--card-bg) !important; }
.nc-title   { color: var(--fg) !important; }
.nc-summary { color: var(--fg-muted) !important; }
.nc-date    { color: var(--fg-dim) !important; }
.nc-author  { color: var(--fg-muted) !important; }
[data-theme="dark"] .nc-platform { filter: brightness(1.1); }

/* ══ Event Cards ══════════════════════════════════════════ */
.event-card, .ec {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: var(--card-shadow);
}
.ec-title  { color: var(--fg) !important; }
.ec-body   { background: var(--card-bg) !important; }
.ec-desc   { color: var(--fg-muted) !important; }
.ec-date   { color: var(--fg-dim) !important; }
.ec-location { color: var(--fg-muted) !important; }
.events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 28px; }
@media (max-width: 768px) { .events-grid { grid-template-columns: 1fr; } }

/* ══ Social / Instagram ══════════════════════════════════ */
.ig-card { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; }
.tab-btn { background: var(--card-bg); border: 1.5px solid var(--bd); color: var(--fg); }
.tab-btn:hover, .tab-btn.act { background: var(--red2) !important; border-color: var(--red2) !important; color: #FFFFFF !important; }
.soc-h { color: var(--fg) !important; }
.soc-p { color: var(--fg-dim) !important; }
.soc-card { background: var(--card-bg); border-color: var(--bd); }
[data-theme="dark"] .soc-card:hover { box-shadow: 0 16px 40px rgba(0,0,0,0.5) !important; }
.social-follow-sec { background: var(--sec-alt) !important; }

/* ══ Contact / About cards ════════════════════════════════ */
.contact-info, .about-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
}
.ci-label { color: var(--fg-muted) !important; }
.ci-val   { color: var(--fg) !important; }
.ci-title { color: var(--fg) !important; }

/* ══ Forms ════════════════════════════════════════════════ */
.f-group label { color: var(--fg) !important; font-weight: 500; }
.f-group input, .f-group select, .f-group textarea {
  background: var(--input-bg) !important;
  border: 1.5px solid var(--input-bd) !important;
  color: var(--fg) !important;
}
.f-group input:focus, .f-group select:focus, .f-group textarea:focus {
  border-color: var(--red2) !important;
  box-shadow: 0 0 0 3px rgba(184,31,10,0.09) !important;
  background: var(--card-bg) !important;
}
.f-group input::placeholder, .f-group textarea::placeholder { color: var(--fg-dim); }
.f-group select option { background: var(--input-bg) !important; color: var(--fg) !important; }

/* ══ Import steps ════════════════════════════════════════ */
.import-step { background: var(--card-bg) !important; border: 1px solid var(--card-border) !important; box-shadow: var(--card-shadow); }
.import-step-num { color: rgba(184,31,10,0.2) !important; }
[data-theme="dark"] .import-step-num { color: rgba(184,31,10,0.3) !important; }
.import-step-title, .import-step h3 { color: var(--fg) !important; }
.import-step p { color: var(--fg-muted) !important; }

/* ══ Legal / Terms / Privacy ════════════════════════════ */
.legal-content h2, .legal-content h3 { color: var(--fg); }
.legal-content p, .legal-content li  { color: var(--fg-muted); }

/* ══ Breadcrumbs ══════════════════════════════════════════ */
.breadcrumb a, .breadcrumb span { color: var(--fg-muted) !important; }
.breadcrumb a:hover { color: var(--red2) !important; }
.breadcrumb .sep   { color: var(--fg-dim) !important; }

/* ══ Tag / badge overrides (themed) ══════════════════════ */
.b-new  { background: linear-gradient(135deg,#7A1207,#B81F0A,#D62B12) !important; color: #fff !important; }
.b-hot  { background: rgba(184,31,10,0.1) !important; border: 1px solid rgba(184,31,10,0.22) !important; color: var(--red) !important; }
.b-rare { background: rgba(100,110,125,0.08) !important; border: 1px solid rgba(100,110,125,0.22) !important; color: var(--fg-muted) !important; }
.b-feat { background: var(--sec-alt) !important; border: 1px solid var(--bd) !important; color: var(--fg-muted) !important; }
[data-theme="dark"] .b-hot  { background: rgba(184,31,10,0.2) !important; }
[data-theme="dark"] .b-rare { background: rgba(100,110,125,0.15) !important; }

/* ══ Social platform buttons ════════════════════════════ */
.s-wa { background: #25D366 !important; }
.s-tt, #theme-toggle.s-tt { background: #1a1a1a !important; border: 1px solid #444 !important; color: #fff !important; }
.s-fb { background: #1877F2 !important; }
.s-th { background: #111 !important; border: 1px solid #444 !important; color: #fff !important; }
.s-pi { background: #E60023 !important; }

/* ══ Video cell overlay ═══════════════════════════════════ */
.vp-cell .vp-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,.1) 45%, transparent 70%);
  transition: background .4s var(--ease);
}
.vp-cell:hover .vp-overlay { background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,.06) 100%); }
.vp-cell .vp-thumb { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; transition: transform .65s var(--ease); }
.vp-cell:hover .vp-thumb { transform: scale(1.06); }
.vp-play-btn, .vp-label, .vp-yt-badge, .vp-cell .vp-yt-badge { z-index: 5 !important; }

/* ══ News card image hover ═══════════════════════════════ */
.news-card .nc-img, .nc .nc-img { overflow: hidden; }
.news-card .nc-img img, .nc .nc-img img { transition: transform .6s ease; }
.news-card:hover .nc-img img { transform: scale(1.04); }

/* ══ YouTube modal ═══════════════════════════════════════ */
#yt-modal, #yt-modal-soc { background: rgba(0,0,0,0.94) !important; }

/* ══ Hero Section (always themed — light/dark) ════════════ */
.hero, .pg-hero, .inv-hero, .feat-hero, .rental-hero, .brands-hero {
  position: relative;
  overflow: hidden;
}
/* LIGHT hero */
:not([data-theme="dark"]) .hero,
:not([data-theme="dark"]) .pg-hero,
:not([data-theme="dark"]) .inv-hero {
  background: linear-gradient(160deg, #FFFFFF 0%, #FAF8F3 50%, #F0EDE6 100%);
}
:not([data-theme="dark"]) .h-mesh {
  background:
    radial-gradient(ellipse 88% 68% at 66% 32%, rgba(184,31,10,0.09) 0%, transparent 55%),
    radial-gradient(ellipse 48% 58% at 10% 80%, rgba(0,0,0,0.02) 0%, transparent 50%),
    transparent;
}
:not([data-theme="dark"]) .h-grid {
  background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
:not([data-theme="dark"]) .h-title { color: var(--text) !important; }
:not([data-theme="dark"]) .h-sub   { color: var(--muted) !important; }
:not([data-theme="dark"]) .h-eye-txt { color: var(--red3); }
:not([data-theme="dark"]) .h-stat-l  { color: var(--dim); }
:not([data-theme="dark"]) .h-stat  { border-color: rgba(0,0,0,0.08); }
:not([data-theme="dark"]) .h-stats { border-color: rgba(0,0,0,0.08); }
:not([data-theme="dark"]) .h-scroll-t { color: var(--dim); }
:not([data-theme="dark"]) .h-orb.o1 { background: radial-gradient(circle, rgba(184,31,10,0.13) 0%, transparent 70%); }
:not([data-theme="dark"]) .h-orb.o2 { background: radial-gradient(circle, rgba(0,0,0,0.05) 0%, transparent 70%); }
:not([data-theme="dark"]) .h-orb.o3 { background: radial-gradient(circle, rgba(184,31,10,0.07) 0%, transparent 70%); }
:not([data-theme="dark"]) .h-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(184,31,10,0.18) 0%, transparent 68%); }
:not([data-theme="dark"]) .hero .pill { border-color: rgba(184,31,10,0.22) !important; background: rgba(184,31,10,0.07) !important; color: var(--red) !important; }
:not([data-theme="dark"]) .hero .pill::before { background: var(--red) !important; box-shadow: 0 0 6px var(--red) !important; }
:not([data-theme="dark"]) .hero .btn-gl { background: #FFFFFF !important; border: 1.5px solid rgba(0,0,0,0.14) !important; color: var(--text) !important; }
:not([data-theme="dark"]) .pg-hero .pill,
:not([data-theme="dark"]) .inv-hero .pill { border-color: rgba(184,31,10,0.22) !important; background: rgba(184,31,10,0.07) !important; color: var(--red) !important; }
:not([data-theme="dark"]) .pg-hero h1,
:not([data-theme="dark"]) .pg-hero h2,
:not([data-theme="dark"]) .pg-hero p  { color: var(--text) !important; }
:not([data-theme="dark"]) .inv-hero h1,
:not([data-theme="dark"]) .inv-hero h2,
:not([data-theme="dark"]) .inv-hero p { color: var(--text) !important; }
:not([data-theme="dark"]) .breadcrumb a,
:not([data-theme="dark"]) .breadcrumb span { color: var(--muted) !important; }

/* DARK hero */
[data-theme="dark"] .hero,
[data-theme="dark"] .pg-hero,
[data-theme="dark"] .inv-hero {
  background: linear-gradient(160deg, #0D0D0F 0%, #131318 50%, #18181C 100%);
}
[data-theme="dark"] .h-mesh {
  background:
    radial-gradient(ellipse 88% 68% at 66% 32%, rgba(184,31,10,0.22) 0%, transparent 55%),
    radial-gradient(ellipse 48% 58% at 10% 80%, rgba(140,147,157,0.07) 0%, transparent 50%),
    transparent;
}
[data-theme="dark"] .h-grid {
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}
[data-theme="dark"] .h-title { color: #F0EDE8 !important; }
[data-theme="dark"] .h-sub   { color: rgba(224,218,210,0.68) !important; }
[data-theme="dark"] .h-stat  { border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .h-stats { border-color: rgba(255,255,255,0.07); }
[data-theme="dark"] .h-stat-l { color: rgba(180,175,168,0.55); }
[data-theme="dark"] .h-scroll-t { color: rgba(180,175,168,0.45); }
[data-theme="dark"] .h-orb.o1 { background: radial-gradient(circle, rgba(214,43,18,0.26) 0%, transparent 70%); }
[data-theme="dark"] .h-orb.o2 { background: radial-gradient(circle, rgba(140,147,157,0.1) 0%, transparent 70%); }
[data-theme="dark"] .h-orb.o3 { background: radial-gradient(circle, rgba(214,43,18,0.13) 0%, transparent 70%); }
[data-theme="dark"] .h-glow   { background: radial-gradient(ellipse at 50% 100%, rgba(184,31,10,0.4) 0%, transparent 68%); }
[data-theme="dark"] .hero .pill,
[data-theme="dark"] .pg-hero .pill,
[data-theme="dark"] .inv-hero .pill {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.82) !important;
}
[data-theme="dark"] .hero .pill::before,
[data-theme="dark"] .pg-hero .pill::before { background: #fff !important; box-shadow: 0 0 7px rgba(255,255,255,0.5) !important; }
[data-theme="dark"] .hero .btn-gl { background: rgba(255,255,255,0.07) !important; border: 1.5px solid rgba(255,255,255,0.14) !important; color: rgba(255,255,255,0.9) !important; }
[data-theme="dark"] .pg-hero h1, [data-theme="dark"] .pg-hero h2, [data-theme="dark"] .pg-hero p { color: #F0EDE8 !important; }
[data-theme="dark"] .inv-hero h1, [data-theme="dark"] .inv-hero h2, [data-theme="dark"] .inv-hero p { color: #F0EDE8 !important; }
[data-theme="dark"] .breadcrumb a, [data-theme="dark"] .breadcrumb span { color: rgba(200,195,188,0.6) !important; }
[data-theme="dark"] .breadcrumb a:hover { color: var(--red3) !important; }

/* ══ MARQUEE — always red, white text, white borders ══════ */
.mq-sec {
  background: var(--red) !important;
  border-top: none !important;
  border-bottom: none !important;
}
.mq-sec::before { background: linear-gradient(to right,  var(--red), transparent) !important; }
.mq-sec::after  { background: linear-gradient(to left,   var(--red), transparent) !important; }
.mq-item  { border-right: 1px solid rgba(255,255,255,0.2) !important; }
.mq-name  { color: rgba(255,255,255,0.82) !important; }
.mq-name:hover, .mq-item:hover .mq-name { color: #fff !important; }
.mq-dot   { background: rgba(255,255,255,0.6) !important; opacity: 1 !important; }

/* ══ VIDEO SECTION — always dark red (fixed, never overridden) ══ */
.vp-section {
  background: linear-gradient(160deg, #0A0203 0%, #160405 40%, #0A0203 100%) !important;
  color: #F0EDE8 !important;
  position: relative !important;
  overflow: hidden !important;
  /* Guarantee this wins over any section selector */
  isolation: isolate;
}
.vp-section::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(ellipse 80% 55% at 60% 25%, rgba(184,31,10,0.32) 0%, transparent 65%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.vp-section > * { position: relative !important; z-index: 1 !important; }
.vp-section .sh h2 { color: #F0EDE8 !important; -webkit-text-fill-color: #F0EDE8 !important; }
.vp-section .sh h2 .t-r { -webkit-text-fill-color: transparent !important; background: linear-gradient(135deg, #FF7A6B, #E03417); -webkit-background-clip: text; background-clip: text; }
.vp-section .sh p  { color: rgba(225,218,210,0.62) !important; }
.vp-section .pill  { border-color: rgba(255,255,255,0.16) !important; background: rgba(255,255,255,0.06) !important; color: rgba(255,255,255,0.84) !important; }
.vp-section .pill::before { background: #fff !important; box-shadow: 0 0 7px rgba(255,255,255,0.45) !important; }

/* ══ CTA / Newsletter — always dark red ═══════════════════ */
.cta-sec, .nl-sec {
  background: linear-gradient(135deg, #120304 0%, #200608 50%, #120304 100%) !important;
  color: #F0EDE8 !important;
  position: relative !important;
  overflow: hidden !important;
}
.cta-sec::before, .nl-sec::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(184,31,10,0.38) 0%, transparent 65%);
  pointer-events: none; z-index: 0;
}
.cta-sec > *, .nl-sec > * { position: relative; z-index: 1; }
.cta-sec h2, .cta-sec .sh h2, .nl-sec h2, .nl-sec .sh h2 {
  color: #F0EDE8 !important; -webkit-text-fill-color: #F0EDE8 !important;
}
.cta-sec h2 .t-r, .nl-sec h2 .t-r {
  -webkit-text-fill-color: transparent !important;
  background: linear-gradient(135deg, #FF7A6B, #E03417);
  -webkit-background-clip: text; background-clip: text;
}
.cta-sec p, .nl-sec p { color: rgba(225,218,210,0.7) !important; }
.cta-sec .pill, .nl-sec .pill {
  border-color: rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.07) !important;
  color: rgba(255,255,255,0.85) !important;
}
.cta-sec .pill::before, .nl-sec .pill::before { background: #fff !important; box-shadow: 0 0 7px rgba(255,255,255,0.4) !important; }


/* ═══════════════════════════════════════════════════════════
   DEFINITIVE THEME + FIX SYSTEM — v6.3 FINAL
   Single source of truth for all overrides
═══════════════════════════════════════════════════════════ */

/* ══ PAGE BASE ════════════════════════════════════════════ */
:not([data-theme="dark"]) body {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8F6F2 35%, #F2F0EB 100%) !important;
  color: var(--text) !important;
}
[data-theme="dark"] body {
  background: radial-gradient(ellipse 80% 40% at 50% 0%, rgba(184,31,10,0.07) 0%, transparent 55%), #0D0D0F !important;
  color: #E8E4DE !important;
}

/* ══ SECTIONS ════════════════════════════════════════════ */
section, .sec, .ss { background: transparent; position: relative; }
section.alt { background: var(--sec-alt); }
section.wh  { background: var(--sec-white); }
[data-theme="dark"] section.alt { background: rgba(255,255,255,0.025); }
[data-theme="dark"] section.wh  { background: #111113; }

/* ══ PAGE HERO (inner pages) ════════════════════════════ */
.pg-hero {
  padding: 160px 0 80px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
}
:not([data-theme="dark"]) .pg-hero {
  background: linear-gradient(160deg, #FFFFFF 0%, #FAF7F2 55%, #F0EDE6 100%) !important;
}
[data-theme="dark"] .pg-hero {
  background: linear-gradient(160deg, #0A0A0D 0%, #111115 55%, #18181C 100%) !important;
}
.pg-hero > .w { position: relative; z-index: 10; }
.pg-hero + * { position: relative; z-index: 1; }

/* light pg-hero text */
:not([data-theme="dark"]) .pg-hero h1,
:not([data-theme="dark"]) .pg-hero h2 { color: #1C1D20 !important; }
:not([data-theme="dark"]) .pg-crumb,
:not([data-theme="dark"]) .pg-crumb a,
:not([data-theme="dark"]) .pg-crumb span { color: #7A8090 !important; }
:not([data-theme="dark"]) .pg-hero .pill,
:not([data-theme="dark"]) .pg-hero .pill-g {
  background: rgba(100,110,125,0.08) !important;
  border-color: rgba(100,110,125,0.22) !important;
  color: #4A5568 !important;
}
/* dark pg-hero text */
[data-theme="dark"] .pg-hero h1,
[data-theme="dark"] .pg-hero h2 { color: #F0EDE8 !important; }
[data-theme="dark"] .pg-crumb,
[data-theme="dark"] .pg-crumb a { color: rgba(200,196,188,0.6) !important; }
[data-theme="dark"] .pg-crumb a:hover { color: var(--red3) !important; }
[data-theme="dark"] .pg-hero .pill,
[data-theme="dark"] .pg-hero .pill-g {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(200,196,188,0.8) !important;
}

/* ══ VIDEO SECTION — always dark-maroon ════════════════ */
.vp-section {
  background-color: #0A0203;
  background: linear-gradient(160deg, #0A0203 0%, #180607 40%, #0A0203 100%) !important;
  color: #F0EDE8 !important;
  isolation: isolate;
}
.vp-section .sh h2 { color: #F0EDE8 !important; -webkit-text-fill-color: #F0EDE8 !important; }
.vp-section .sh h2 .t-r { -webkit-text-fill-color: transparent !important; background: linear-gradient(135deg,#FF7A6B,#E03417); -webkit-background-clip: text; background-clip: text; }
.vp-section .sh p { color: rgba(220,214,206,0.65) !important; }

/* ══ CTA / NEWSLETTER — always dark-maroon ════════════ */
.cta-sec, .nl-sec {
  background-color: #120304;
  background: linear-gradient(135deg, #120304 0%, #200608 50%, #120304 100%) !important;
  color: #F0EDE8 !important;
}
.cta-sec h2, .cta-sec .sh h2,
.nl-sec h2, .nl-sec .sh h2 { color: #F0EDE8 !important; -webkit-text-fill-color: #F0EDE8 !important; }
.cta-sec h2 .t-r, .nl-sec h2 .t-r { -webkit-text-fill-color: transparent !important; background: linear-gradient(135deg,#FF7A6B,#E03417); -webkit-background-clip: text; background-clip: text; }
.cta-sec p, .nl-sec p { color: rgba(220,215,206,0.7) !important; }
.cta-sec .pill::before, .nl-sec .pill::before { background: #fff !important; }

/* ══ MARQUEE — always red ════════════════════════════ */
.mq-sec { background: var(--red) !important; border: none !important; }
.mq-sec::before { background: linear-gradient(to right, var(--red), transparent) !important; }
.mq-sec::after  { background: linear-gradient(to left,  var(--red), transparent) !important; }
.mq-item  { border-right: 1px solid rgba(255,255,255,0.2) !important; }
.mq-name  { color: rgba(255,255,255,0.85) !important; }
.mq-item:hover .mq-name { color: #fff !important; }
.mq-dot   { background: rgba(255,255,255,0.55) !important; opacity: 1 !important; }

/* ══ FOOTER — white gradient (light) / dark (dark theme) ══ */
footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7F5F0 40%, #F2EFE8 100%) !important;
  border-top: 1px solid rgba(0,0,0,0.07) !important;
  position: relative;
  color: #1C1D20 !important;
}
footer::before { content: none !important; }
footer h4, .fc h4 {
  color: #1C1D20 !important;
  font-family: 'Syne', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
footer .fc a { color: #5A6070 !important; font-size: 0.88rem; display: block; padding: 3px 0; transition: color 0.2s; }
footer .fc a:hover { color: var(--red2) !important; }
.footer-brand p { color: #5A6070 !important; }
.fct { color: #5A6070 !important; }
.fct a { color: #5A6070 !important; }
.fct a:hover { color: var(--red2) !important; }
.footer-bottom { border-top: 1px solid rgba(0,0,0,0.07) !important; }
.footer-bottom p { color: #9AA1AC !important; }
.footer-bl a { color: #9AA1AC !important; }
.footer-bl a:hover { color: var(--red2) !important; }

/* Footer social icon buttons on light bg */
.fsb {
  background: rgba(0,0,0,0.06) !important;
  border: 1.5px solid rgba(0,0,0,0.10) !important;
  color: #3A3C42 !important;
  fill: #3A3C42 !important;
}
.fsb svg, .fsb svg path { fill: #3A3C42 !important; }
.fsb:hover, .fsb:hover svg, .fsb:hover svg path {
  background: var(--red2);
  border-color: var(--red2);
  color: #fff !important;
  fill: #fff !important;
}
.fsb:hover { background: var(--red2) !important; border-color: var(--red2) !important; }

/* Dark footer */
[data-theme="dark"] footer {
  background: linear-gradient(180deg, #0C0C10 0%, #09090C 60%, #070710 100%) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: #E8E4DE !important;
}
[data-theme="dark"] footer h4, [data-theme="dark"] .fc h4 { color: rgba(240,236,230,0.92) !important; }
[data-theme="dark"] footer .fc a { color: rgba(190,186,178,0.6) !important; }
[data-theme="dark"] footer .fc a:hover { color: var(--red3) !important; }
[data-theme="dark"] .footer-brand p { color: rgba(190,186,178,0.55) !important; }
[data-theme="dark"] .fct { color: rgba(190,186,178,0.6) !important; }
[data-theme="dark"] .fct a { color: rgba(190,186,178,0.6) !important; }
[data-theme="dark"] .fct a:hover { color: var(--red3) !important; }
[data-theme="dark"] .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .footer-bottom p { color: rgba(150,146,140,0.45) !important; }
[data-theme="dark"] .footer-bl a { color: rgba(150,146,140,0.45) !important; }
[data-theme="dark"] .footer-bl a:hover { color: var(--red3) !important; }

/* Dark footer social buttons */
[data-theme="dark"] .fsb {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.14) !important;
  color: rgba(220,216,208,0.75) !important;
  fill: rgba(220,216,208,0.75) !important;
}
[data-theme="dark"] .fsb svg, [data-theme="dark"] .fsb svg path { fill: rgba(220,216,208,0.8) !important; }
[data-theme="dark"] .fsb:hover { background: var(--red2) !important; border-color: var(--red2) !important; color: #fff !important; }
[data-theme="dark"] .fsb:hover svg, [data-theme="dark"] .fsb:hover svg path { fill: #fff !important; }

/* ══ NAV — light/dark ════════════════════════════════════ */
:not([data-theme="dark"]) #nav::before {
  background: rgba(255,255,255,0.88) !important;
  border-bottom-color: rgba(0,0,0,0.07) !important;
}
:not([data-theme="dark"]) #nav.sc::before {
  background: rgba(255,255,255,0.97) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
}
:not([data-theme="dark"]) .nav-a { color: #3A3C42 !important; }
:not([data-theme="dark"]) .nav-a:hover,
:not([data-theme="dark"]) .nav-a.act { color: var(--red2) !important; }
:not([data-theme="dark"]) .logo-t { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.14) !important; color: #1C1D20 !important; }
:not([data-theme="dark"]) .logo-sub { color: rgba(70,72,80,0.5) !important; }
:not([data-theme="dark"]) #burg span { background: #3A3C42 !important; }

[data-theme="dark"] #nav::before {
  background: rgba(8,8,11,0.85) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
[data-theme="dark"] #nav.sc::before {
  background: rgba(8,8,11,0.97) !important;
  box-shadow: 0 2px 24px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .nav-a { color: rgba(200,196,188,0.7) !important; }
[data-theme="dark"] .nav-a:hover,
[data-theme="dark"] .nav-a.act { color: var(--red3) !important; }
[data-theme="dark"] .logo-t { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.14) !important; color: #E8E4DE !important; }
[data-theme="dark"] .logo-sub { color: rgba(200,196,188,0.45) !important; }
[data-theme="dark"] #burg span { background: rgba(220,218,212,0.85) !important; }
[data-theme="dark"] #mob-nav { background: rgba(8,8,11,0.98) !important; }

/* Theme toggle button */
:not([data-theme="dark"]) #theme-toggle { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.12) !important; color: #5A6070 !important; }
[data-theme="dark"] #theme-toggle { background: rgba(255,255,255,0.07) !important; border-color: rgba(255,255,255,0.14) !important; color: rgba(200,196,188,0.8) !important; }

/* ══ DARK THEME CARDS — zero white ══════════════════════ */

/* Car sale cards */
[data-theme="dark"] .car-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .cc-q { background: rgba(30,30,36,0.92) !important; border-color: rgba(255,255,255,0.14) !important; color: rgba(240,237,232,0.9) !important; }
[data-theme="dark"] .cc-q:hover { background: var(--red) !important; border-color: var(--red) !important; color: #fff !important; }
[data-theme="dark"] .cc-body { background: #18181C !important; }
[data-theme="dark"] .cc-name { color: #E8E4DE !important; }
[data-theme="dark"] .cc-brand { color: var(--red3) !important; }
[data-theme="dark"] .cc-spec { color: rgba(150,146,140,0.7) !important; }
[data-theme="dark"] .cc-foot { border-top-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .cc-ugx { color: rgba(130,126,120,0.6) !important; }
[data-theme="dark"] .car-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(184,31,10,0.35) !important; }

/* Rental cards */
[data-theme="dark"] .rent-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .rc-name { color: #E8E4DE !important; }
[data-theme="dark"] .rc-brand { color: var(--gold2) !important; }
[data-theme="dark"] .rc-feat { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.08) !important; color: rgba(170,166,158,0.7) !important; }
[data-theme="dark"] .rc-foot { border-top-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .rc-sub { color: rgba(140,136,130,0.65) !important; }

/* Brand cards */
[data-theme="dark"] .brand-card,
[data-theme="dark"] .bc { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }

/* News cards */
[data-theme="dark"] .news-card,
[data-theme="dark"] .nc { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .nc-body { background: #18181C !important; }
[data-theme="dark"] .nc-title { color: #E8E4DE !important; }
[data-theme="dark"] .nc-summary { color: rgba(170,166,158,0.75) !important; }
[data-theme="dark"] .nc-date, [data-theme="dark"] .nc-author { color: rgba(140,136,130,0.6) !important; }

/* Event cards */
[data-theme="dark"] .event-card,
[data-theme="dark"] .ec { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .ec-body { background: #18181C !important; }

/* About / value cards (feat-card) */
[data-theme="dark"] .feat-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .feat-card h3, [data-theme="dark"] .feat-title { color: #E8E4DE !important; }
[data-theme="dark"] .feat-card p, [data-theme="dark"] .feat-desc { color: rgba(170,166,158,0.8) !important; }
/* icon box inside feat-card */
[data-theme="dark"] .feat-card .how-ic,
[data-theme="dark"] .feat-card > div > div:first-child { background: rgba(184,31,10,0.12) !important; border-color: rgba(184,31,10,0.22) !important; }
[data-theme="dark"] .feat-card svg { stroke: var(--red3) !important; }

/* How-step cards */
[data-theme="dark"] .how-step { background: #18181C !important; border-color: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .how-step h3 { color: #E8E4DE !important; }
[data-theme="dark"] .how-step p { color: rgba(170,166,158,0.75) !important; }
[data-theme="dark"] .how-step:hover { background: rgba(184,31,10,0.08) !important; border-color: rgba(184,31,10,0.28) !important; }

/* Testimonial cards */
[data-theme="dark"] .test-card,
[data-theme="dark"] .t-card { background: #1C1C21 !important; border-color: rgba(255,255,255,0.07) !important; }

/* Social/platform cards */
[data-theme="dark"] .soc-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .soc-h { color: #E8E4DE !important; }
[data-theme="dark"] .soc-p { color: rgba(140,136,130,0.65) !important; }
[data-theme="dark"] .ig-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .pin-card { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }

/* Instagram / TikTok section bg */
[data-theme="dark"] .social-follow-sec { background: #111113 !important; }

/* Contact & import steps */
[data-theme="dark"] .contact-info { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .import-step { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }

/* About person profile */
[data-theme="dark"] .profile-cta { background: #18181C !important; border-color: rgba(255,255,255,0.07) !important; }
[data-theme="dark"] .p-name { color: #E8E4DE !important; }
[data-theme="dark"] .p-title { color: rgba(190,186,178,0.65) !important; }
[data-theme="dark"] .p-bio { color: rgba(170,166,158,0.75) !important; }

/* Stats bar */
[data-theme="dark"] .stats-sec { background: #111113 !important; border-color: rgba(255,255,255,0.06) !important; }

/* Search panel */
[data-theme="dark"] .search-panel { background: #18181C !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .sf-inner { background: #18181C !important; }
[data-theme="dark"] .sf label { color: rgba(150,146,140,0.7) !important; }

/* Filter / origin buttons */
[data-theme="dark"] .f-btn,
[data-theme="dark"] .fp,
[data-theme="dark"] .nf-btn,
[data-theme="dark"] .origin-btn { background: #1C1C21 !important; border-color: rgba(255,255,255,0.10) !important; color: var(--fg) !important; }

/* Form inputs */
[data-theme="dark"] .f-group input,
[data-theme="dark"] .f-group select,
[data-theme="dark"] .f-group textarea,
[data-theme="dark"] .sf select,
[data-theme="dark"] .sf input { background: #111113 !important; border-color: rgba(255,255,255,0.08) !important; color: var(--fg) !important; }

/* Inline bg overrides from HTML attributes */
[data-theme="dark"] [style*="background:#F0EDE"] { background: #111113 !important; }
[data-theme="dark"] [style*="background: #F0EDE"] { background: #111113 !important; }
[data-theme="dark"] [style*="background:var(--bg)"] { background: #111113 !important; }
[data-theme="dark"] [style*="background: var(--bg)"] { background: #111113 !important; }
[data-theme="dark"] [style*="background:#F7F6"] { background: #111113 !important; }
[data-theme="dark"] [style*="background:rgba(255,255,255,"] { background: transparent !important; }
[data-theme="dark"] [style*="background: rgba(255,255,255,"] { background: transparent !important; }
[data-theme="dark"] .testimonials-sec { background: #111113 !important; }

/* ══ HEADINGS in dark ════════════════════════════════════ */
[data-theme="dark"] .sh h2 { color: #E8E4DE !important; }
[data-theme="dark"] .sh p { color: rgba(170,166,158,0.75) !important; }
/* keep gradient text on .t-r */
[data-theme="dark"] .sh h2 .t-r { -webkit-text-fill-color: transparent !important; }

/* ══ HERO SECTION (homepage) ════════════════════════════ */
:not([data-theme="dark"]) .h-title { color: #1C1D20 !important; }
:not([data-theme="dark"]) .h-sub { color: #5A6070 !important; }
[data-theme="dark"] .h-title { color: #F0EDE8 !important; }
[data-theme="dark"] .h-sub { color: rgba(190,186,178,0.7) !important; }

/* ══ SCROLL REVEAL — smooth transitions ════════════════ */
.car-card, .rent-card, .rc, .brand-card, .bc,
.news-card, .nc, .event-card, .ec,
.how-step, .test-card, .feat-card,
.contact-info, .about-card, .import-step,
.ig-card, .soc-card,
#nav::before, body {
  transition: background 0.3s, border-color 0.25s, color 0.25s, box-shadow 0.3s;
}

/* ══ LOGO — dark theme: white pill behind logo image ══════ */
[data-theme="dark"] .logo-img {
  background: radial-gradient(ellipse 90% 100% at 50% 50%,
    #ffffff 0%,
    #ffffff 45%,
    rgba(255,255,255,0) 100%
  );
  border-radius: 10px;
  padding: 4px 10px;
}

/* ══ ORDER PAGE — dark theme form panel ══════════════════ */
[data-theme="dark"] .form-panel {
  background: #18181C !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4) !important;
}
[data-theme="dark"] .form-panel h3,
[data-theme="dark"] .form-panel .pill { color: #E8E4DE !important; }
[data-theme="dark"] .f-group label { color: rgba(170,166,158,0.75) !important; }
[data-theme="dark"] .f-group input,
[data-theme="dark"] .f-group select,
[data-theme="dark"] .f-group textarea {
  background: #111113 !important;
  border-color: rgba(255,255,255,0.09) !important;
  color: #E8E4DE !important;
}
[data-theme="dark"] .f-group input::placeholder,
[data-theme="dark"] .f-group textarea::placeholder { color: rgba(140,136,130,0.5) !important; }
[data-theme="dark"] .f-group select option { background: #18181C !important; color: #E8E4DE !important; }
[data-theme="dark"] .f-group input:focus,
[data-theme="dark"] .f-group select:focus,
[data-theme="dark"] .f-group textarea:focus {
  border-color: rgba(184,31,10,0.5) !important;
  background: rgba(184,31,10,0.05) !important;
}
/* Order info panel (left side stats) */
[data-theme="dark"] [style*="background:var(--glass)"] { background: rgba(255,255,255,0.04) !important; }

/* ══ COMPREHENSIVE DARK THEME OVERRIDES ════════════════ */
/* Social tab */
[data-theme="dark"] .social-tab { color: rgba(180,176,168,0.6); }
[data-theme="dark"] .social-tab.on,
[data-theme="dark"] .social-tab:hover { color: var(--red3) !important; border-bottom-color: var(--red3); }

/* Profile CTA cards */
[data-theme="dark"] .profile-cta { background: var(--card-bg); }

/* TikTok embed wrapper */
[data-theme="dark"] .tt-embed-wrap { background: #111113 !important; }

/* IG post caption text */
[data-theme="dark"] .ig-caption p { color: rgba(180,176,168,0.8); }
[data-theme="dark"] .ig-caption span { color: rgba(130,126,118,0.7); }

/* Events stat boxes — fix hardcoded #FFFFFF in events.html */
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"] {
  background: #18181C !important;
  color: #E8E4DE !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Rent page section bg fix */
[data-theme="dark"] .rv-perks-strip { background: var(--page-bg) !important; }

/* Generic white bg catch for any inline white panels */
[data-theme="dark"] .news-card,
[data-theme="dark"] .event-card { background: var(--card-bg) !important; }

/* Light mode social tab needs dark text not var(--muted) */
:not([data-theme="dark"]) .social-tab.on,
:not([data-theme="dark"]) .social-tab:hover { color: var(--red2) !important; }

/* ══ SOCIAL LINK CARDS (inside always-dark nl-sec) ════════ */
.soc-link-card { background: rgba(255,255,255,0.06) !important; }
.nl-sec .soc-link-card [style*="color:var(--fg)"],
.nl-sec .soc-link-card div:not([style*="color:"]) {
  color: rgba(240,237,232,0.92) !important;
}
/* Force text visible in nl-sec always-dark context */
.nl-sec .soc-link-card { color: rgba(240,237,232,0.92) !important; }

/* soc-link-card — theme-specific fg colors */
:not([data-theme="dark"]) .soc-link-card { background: rgba(0,0,0,0.08) !important; border-color: rgba(255,255,255,0.12) !important; }
:not([data-theme="dark"]) .soc-link-card:hover { background: rgba(255,255,255,0.14) !important; transform: translateY(-4px); }
[data-theme="dark"] .soc-link-card { background: rgba(255,255,255,0.06) !important; }
[data-theme="dark"] .soc-link-card:hover { background: rgba(255,255,255,0.1) !important; transform: translateY(-4px); }

/* ══ COMPREHENSIVE DARK THEME TEXT FIXES ═══════════════════ */

/* General body text */
[data-theme="dark"] body { color: var(--fg) !important; }
[data-theme="dark"] p { color: var(--fg-muted); }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5 { color: var(--fg) !important; }

/* Card bodies */
[data-theme="dark"] .cc-brand { color: var(--red3) !important; }
[data-theme="dark"] .cc-name  { color: var(--fg) !important; }
[data-theme="dark"] .cc-name em { color: var(--fg-dim) !important; }
[data-theme="dark"] .cc-spec  { color: var(--fg-muted) !important; }
[data-theme="dark"] .cc-price { color: var(--fg) !important; }
[data-theme="dark"] .cc-badge { color: #fff !important; }

/* Rental cards */
[data-theme="dark"] .rc-brand { color: var(--red3) !important; }
[data-theme="dark"] .rc-name  { color: var(--fg) !important; }
[data-theme="dark"] .rc-price { color: var(--fg) !important; }
[data-theme="dark"] .rc-feat  { color: var(--fg-muted) !important; }
[data-theme="dark"] .rc-badge { color: #fff !important; }

/* Brand cards */
[data-theme="dark"] .bc-name  { color: var(--fg) !important; }
[data-theme="dark"] .bc-tag   { color: var(--fg-muted) !important; }

/* Section headings / pill labels */
[data-theme="dark"] .pill     { color: var(--fg-muted) !important; border-color: var(--bd2) !important; }
[data-theme="dark"] .sh h2    { color: var(--fg) !important; -webkit-text-fill-color: var(--fg) !important; }
[data-theme="dark"] .sh h2 .t-r { -webkit-text-fill-color: transparent !important; }
[data-theme="dark"] .sh p     { color: var(--fg-muted) !important; }

/* Stats section */
[data-theme="dark"] .stat-val { color: var(--fg) !important; }
[data-theme="dark"] .stat-lbl { color: var(--fg-muted) !important; }

/* Testimonials */
[data-theme="dark"] .test-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
[data-theme="dark"] .test-txt  { color: var(--fg-muted) !important; }
[data-theme="dark"] .test-name { color: var(--fg) !important; }
[data-theme="dark"] .test-loc  { color: var(--fg-dim) !important; }

/* About page */
[data-theme="dark"] .about-section { color: var(--fg) !important; }
[data-theme="dark"] .about-section p { color: var(--fg-muted) !important; }

/* News page */
[data-theme="dark"] .news-card { background: var(--card-bg) !important; border-color: var(--card-border) !important; }
[data-theme="dark"] .nc-title  { color: var(--fg) !important; }
[data-theme="dark"] .nc-sum    { color: var(--fg-muted) !important; }
[data-theme="dark"] .nc-date   { color: var(--fg-dim) !important; }

/* Events page */
[data-theme="dark"] .event-card { color: var(--fg) !important; }
[data-theme="dark"] .event-card h3 { color: var(--fg) !important; }
[data-theme="dark"] .event-card p { color: var(--fg-muted) !important; }

/* Contact / form text */
[data-theme="dark"] label { color: var(--fg-muted) !important; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: #111113 !important; color: var(--fg) !important;
  border-color: rgba(255,255,255,0.1) !important;
}
[data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--fg-dim) !important; }

/* Social page tabs */
[data-theme="dark"] .social-tabs { border-bottom-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .social-tab  { color: rgba(180,176,168,0.5) !important; background: none !important; }
[data-theme="dark"] .social-tab.on { color: var(--red3) !important; border-bottom-color: var(--red3) !important; }
[data-theme="dark"] .social-tab:hover { color: var(--fg) !important; }

/* IG card text */
[data-theme="dark"] .ig-post-card { background: #1A1A1F !important; border-color: rgba(255,255,255,0.08) !important; }
[data-theme="dark"] .ig-caption p { color: rgba(200,196,188,0.8) !important; }
[data-theme="dark"] .ig-caption span { color: rgba(130,126,120,0.7) !important; }

/* YT card text (already dark-only section but still) */
[data-theme="dark"] .yt-title { color: #F0EDE8 !important; }
[data-theme="dark"] .yt-brand { color: rgba(255,120,120,0.75) !important; }

/* Social-tab always dark bg section (vp-section inherits) */
.social-tabs { background: transparent; }

/* Inline generic dark text overrides */
[data-theme="dark"] [style*="color:#1C1D20"],
[data-theme="dark"] [style*="color: #1C1D20"],
[data-theme="dark"] [style*="color:#1c1d20"] { color: var(--fg) !important; }
[data-theme="dark"] [style*="color:#6B7280"],
[data-theme="dark"] [style*="color: #6B7280"],
[data-theme="dark"] [style*="color:#6b7280"] { color: var(--fg-muted) !important; }
[data-theme="dark"] [style*="color:#9CA3AF"],
[data-theme="dark"] [style*="color: #9CA3AF"] { color: var(--fg-dim) !important; }

/* Footer YT icon fix */
.fsb svg polygon { fill: currentColor !important; }
[data-theme="dark"] .fsb svg polygon { fill: rgba(220,216,208,0.8) !important; }
[data-theme="dark"] .fsb:hover svg polygon { fill: #fff !important; }
:not([data-theme="dark"]) .fsb svg polygon { fill: #3A3C42 !important; }
:not([data-theme="dark"]) .fsb:hover svg polygon { fill: #fff !important; }

/* ══ ABOUT PAGE SPECIFIC ════════════════════════════════ */
[data-theme="dark"] .about-lead { color: var(--fg) !important; }
[data-theme="dark"] .founder-sec { background: var(--card-bg) !important; }
[data-theme="dark"] .founder-sec p { color: var(--fg-muted) !important; }

/* ══ TERMS / PRIVACY ══════════════════════════════════ */
[data-theme="dark"] .legal-content h2 { color: var(--fg) !important; }
[data-theme="dark"] .legal-content p, [data-theme="dark"] .legal-content li { color: var(--fg-muted) !important; }

/* ══ GENERAL INLINE STYLE OVERRIDES ══════════════════ */
[data-theme="dark"] section.alt { background: rgba(255,255,255,0.025) !important; }
[data-theme="dark"] .soc-note { color: var(--fg-muted) !important; }

/* ══ YOUTUBE FOOTER BUTTON — always visible ═══════════════ */
/* Light mode: YouTube red background so it's unmissable */
.fsb-yt {
  background: rgba(255,0,0,0.08) !important;
  border-color: rgba(255,0,0,0.22) !important;
  color: #CC0000 !important;
}
.fsb-yt svg, .fsb-yt svg path, .fsb-yt svg polygon {
  fill: #CC0000 !important;
}
.fsb-yt:hover {
  background: #FF0000 !important;
  border-color: #FF0000 !important;
  color: #fff !important;
}
.fsb-yt:hover svg, .fsb-yt:hover svg path, .fsb-yt:hover svg polygon {
  fill: #fff !important;
}
[data-theme="dark"] .fsb-yt {
  background: rgba(255,0,0,0.12) !important;
  border-color: rgba(255,0,0,0.28) !important;
  color: #FF4444 !important;
}
[data-theme="dark"] .fsb-yt svg, [data-theme="dark"] .fsb-yt svg path,
[data-theme="dark"] .fsb-yt svg polygon { fill: #FF4444 !important; }
[data-theme="dark"] .fsb-yt:hover { background: #FF0000 !important; border-color: #FF0000 !important; }
[data-theme="dark"] .fsb-yt:hover svg, [data-theme="dark"] .fsb-yt:hover svg path,
[data-theme="dark"] .fsb-yt:hover svg polygon { fill: #fff !important; }

/* ═══════════════════════════════════════════════════════════
   EN ROUTE BADGE + VIEW DETAILS BUTTON + MODAL TWEAKS
═══════════════════════════════════════════════════════════ */

/* EN ROUTE badge */
.b-enroute {
  background: linear-gradient(135deg,#1E3A8A,#2563EB) !important;
  color: #fff !important;
  box-shadow: 0 0 14px rgba(37,99,235,.4);
}

/* View Details button on car cards */
.cc-preview-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border, #eee);
  color: var(--red, #B81F0A);
  font-family: 'Syne', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
  text-transform: uppercase;
  transition: background .2s, color .2s;
}
.cc-preview-btn:hover {
  background: rgba(184,31,10,.06);
}
[data-theme="dark"] .cc-preview-btn {
  border-top-color: rgba(255,255,255,0.08) !important;
  color: var(--red2, #D62B12) !important;
}
[data-theme="dark"] .cc-preview-btn:hover {
  background: rgba(184,31,10,.15) !important;
}

/* Modal overlay scrollbar */
#car-modal-overlay::-webkit-scrollbar { width: 6px; }
#car-modal-overlay::-webkit-scrollbar-track { background: transparent; }
#car-modal-overlay::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }

/* Modal surface adapts to theme */
#car-modal {
  background: var(--surface, #fff);
}
[data-theme="dark"] #car-modal {
  background: #18181C !important;
}
[data-theme="dark"] #car-modal input,
[data-theme="dark"] #car-modal textarea {
  background: #111 !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #E8E4DE !important;
}
[data-theme="dark"] #car-modal input::placeholder,
[data-theme="dark"] #car-modal textarea::placeholder {
  color: rgba(255,255,255,.3) !important;
}
[data-theme="dark"] #nm-rev-name,
[data-theme="dark"] #nm-rev-text {
  background: #0D0D0F !important;
  border-color: rgba(255,255,255,.1) !important;
  color: #E8E4DE !important;
}
[data-theme="dark"] #car-modal .nr-star-pick button {
  color: #888 !important;
}
[data-theme="dark"] #car-modal div[style*="surface2"],
[data-theme="dark"] #car-modal > div > div > div[style*="surface2"] {
  background: #111116 !important;
}

/* Responsive modal */
@media (max-width: 600px) {
  #car-modal-overlay { padding: 0 0 40px; }
  #car-modal { border-radius: 0; }
  #car-modal-body > div:last-child { padding: 16px 16px 24px; }
}