/* ================================================================
   ROYSE CITY AUTO CARE — 2026 BRAND SYSTEM
   Glassmorphism · Conversion-Optimized · RJ Business Solutions
   ================================================================ */

/* ── GOOGLE FONTS (WebFont Loader fallback import) ── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Roboto+Condensed:wght@300;400;700&display=swap');

/* ================================================================
   ROOT DESIGN TOKENS — 2026 SYSTEM
   ================================================================ */
:root {
  /* BRAND CORE */
  --brand-blue:        #1c74bc;
  --brand-blue-light:  #3b9ee8;
  --brand-blue-dark:   #145fa0;
  --brand-blue-dim:    rgba(28,116,188,.18);
  --brand-blue-border: rgba(28,116,188,.35);
  --brand-red:         #cf2027;
  --brand-red-light:   #e53935;
  --brand-red-dark:    #a51a1f;

  /* OVERRIDE legacy primary with brand blue */
  --primary:           var(--brand-blue);
  --primary-light:     var(--brand-blue-light);
  --primary-dark:      var(--brand-blue-dark);
  --accent:            var(--brand-red);
  --accent-light:      var(--brand-red-light);

  /* NEUTRALS */
  --neutral-white:     #ffffff;
  --neutral-offwhite:  #fafafa;
  --neutral-200:       #cccccc;
  --neutral-400:       #9ca3af;
  --neutral-600:       #64748b;
  --neutral-800:       #1e293b;

  /* DARK SURFACES */
  --dark-bg:           #08090c;
  --dark-surface:      #0d1117;
  --dark-card:         #111827;
  --dark-elevated:     #1a2236;

  /* GLASS SYSTEM */
  --glass-06:          rgba(255,255,255,.06);
  --glass-10:          rgba(255,255,255,.10);
  --glass-14:          rgba(255,255,255,.14);
  --glass-20:          rgba(255,255,255,.20);
  --glass-border:      rgba(255,255,255,.12);
  --glass-border-blue: rgba(28,116,188,.40);
  --glass-blur:        blur(18px) saturate(180%);
  --glass-blur-heavy:  blur(32px) saturate(200%);

  /* STATUS */
  --success:   #027a48;
  --success-bg: rgba(2,122,72,.15);
  --warning:   #d97706;
  --error:     #b42318;

  /* GRADIENTS */
  --gradient-hero:   linear-gradient(135deg,#060c1a 0%,#0d1421 45%,#130810 100%);
  --gradient-brand:  linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark));
  --gradient-accent: linear-gradient(135deg,var(--brand-red),var(--brand-red-dark));
  --gradient-cta:    linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-red) 100%);
  --gradient-glass:  linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.04) 100%);
  --gradient-card:   linear-gradient(135deg,rgba(28,116,188,.12),rgba(207,32,39,.06));
  --gradient-text:   linear-gradient(135deg,var(--brand-blue-light),var(--brand-red-light));

  /* SHADOWS */
  --shadow-sm:       0 1px 4px rgba(0,0,0,.35);
  --shadow-md:       0 4px 18px rgba(0,0,0,.45);
  --shadow-lg:       0 8px 36px rgba(0,0,0,.55);
  --shadow-xl:       0 20px 60px rgba(0,0,0,.65);
  --shadow-glow-blue:   0 0 40px rgba(28,116,188,.40), 0 0 80px rgba(28,116,188,.15);
  --shadow-glow-red:    0 0 40px rgba(207,32,39,.30), 0 0 80px rgba(207,32,39,.12);
  --shadow-glass:       0 8px 32px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-card-hover:  0 24px 48px rgba(0,0,0,.60), 0 0 30px rgba(28,116,188,.25);

  /* BORDER RADIUS */
  --radius-xs:   .25rem;
  --radius-sm:   .375rem;
  --radius-md:   .5rem;
  --radius-lg:   .75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-3xl:  2rem;
  --radius-full: 9999px;

  /* TYPOGRAPHY */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Roboto Condensed', 'Inter', sans-serif;
  --font-data:    'Roboto Condensed', monospace;

  /* EASING */
  --ease-out-expo:  cubic-bezier(.16,1,.3,1);
  --ease-in-out:    cubic-bezier(.4,0,.2,1);
  --ease-bounce:    cubic-bezier(.34,1.56,.64,1);

  /* DURATIONS */
  --dur-fast:   120ms;
  --dur-base:   250ms;
  --dur-slow:   420ms;
  --dur-xslow:  700ms;

  /* TRANSITIONS */
  --transition-fast: var(--dur-fast) var(--ease-in-out);
  --transition-base: var(--dur-base) var(--ease-in-out);
  --transition-slow: var(--dur-slow) var(--ease-out-expo);

  /* SPACING SCALE */
  --space-xs:  .25rem;
  --space-sm:  .5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;

  /* LAYOUT */
  --max-width:      1200px;
  --nav-height:     72px;
  --sticky-bar-h:   64px;
  --z-sticky:       100;
  --z-nav:          200;
  --z-modal:        300;
  --z-chatbot:      400;
  --z-toast:        500;
}

/* ================================================================
   BRAND LOGO IMAGE — Consistent sizing across nav & footer
   ================================================================ */
.brand-logo {
  display: block;
  width:  auto;
  height: 42px;
  max-width: 180px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* makes the blue SVG white on dark BGs */
}

/* In glass-navbar the logo stays full colour */
.nav .brand-logo,
.navbar .brand-logo {
  filter: none;
}

/* Footer logo stays white on dark bg */
.footer .brand-logo,
.footer-logo .brand-logo,
.footer-brand .brand-logo {
  filter: brightness(0) invert(1);
  height: 38px;
}

/* Mobile nav logo */
.mobile-nav .brand-logo,
.mobile-nav-header .brand-logo {
  height: 32px;
  filter: brightness(0) invert(1);
}

/* ================================================================
   BODY OVERRIDE — Dark surface, Roboto Condensed body
   ================================================================ */
body {
  font-family: var(--font-body);
  background: var(--dark-bg);
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
}

/* ================================================================
   GLASSMORPHISM COMPONENTS
   ================================================================ */

/* Glass Card */
.glass-card {
  background:    var(--glass-06);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow:    var(--shadow-glass);
  transition:    all var(--transition-slow);
}
.glass-card:hover {
  background:    var(--glass-10);
  border-color:  var(--glass-border-blue);
  box-shadow:    var(--shadow-card-hover);
  transform:     translateY(-6px);
}
.glass-card-blue {
  background:    rgba(28,116,188,.08);
  border-color:  var(--brand-blue-border);
}
.glass-card-blue:hover {
  background:    rgba(28,116,188,.14);
  box-shadow:    var(--shadow-glow-blue);
}

/* Glass Navbar */
.glass-navbar {
  background:      rgba(8,9,12,.82);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom:   1px solid var(--glass-border);
}
.glass-navbar.scrolled {
  background:    rgba(8,9,12,.96);
  box-shadow:    var(--shadow-md);
}

/* Primary Button — Brand Blue */
.btn-primary {
  background:    var(--brand-blue);
  color:         #fff;
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-glow-blue);
  transition:    all var(--transition-base);
  font-family:   var(--font-heading);
  font-weight:   700;
  letter-spacing:.02em;
}
.btn-primary:hover {
  background:  var(--brand-blue-dark);
  transform:   translateY(-2px);
  box-shadow:  var(--shadow-glow-blue), 0 8px 24px rgba(0,0,0,.4);
}
.btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button — Glass */
.btn-secondary {
  background:    var(--glass-10);
  backdrop-filter: blur(10px);
  color:         #fff;
  border:        1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition:    all var(--transition-base);
  font-family:   var(--font-heading);
  font-weight:   600;
}
.btn-secondary:hover {
  background:   var(--glass-20);
  border-color: var(--brand-blue-border);
  transform:    translateY(-2px);
}

/* Accent Button — Brand Red */
.btn-accent {
  background:  var(--brand-red);
  color:       #fff;
  box-shadow:  var(--shadow-glow-red);
  transition:  all var(--transition-base);
  font-family: var(--font-heading);
  font-weight: 700;
}
.btn-accent:hover {
  background: var(--brand-red-dark);
  transform:  translateY(-2px);
}

/* ── Section Separator ── */
.section-separator {
  width:            100%;
  height:           1px;
  background:       linear-gradient(90deg,transparent,var(--brand-blue-border),transparent);
  margin:           0 auto;
}
.section-separator-double {
  position: relative;
  height:   3px;
}
.section-separator-double::before,
.section-separator-double::after {
  content:    '';
  position:   absolute;
  left:       0; right: 0;
  height:     1px;
  background: linear-gradient(90deg,transparent,var(--brand-blue-border),transparent);
}
.section-separator-double::before { top: 0; }
.section-separator-double::after  { bottom: 0; }

/* ================================================================
   NAV — GLASSMORPHISM UPGRADE
   ================================================================ */
.nav {
  background:      rgba(8,9,12,.82) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-bottom:   1px solid var(--glass-border) !important;
}
.nav.scrolled {
  background: rgba(8,9,12,.97) !important;
}
.nav-logo-icon {
  background: linear-gradient(135deg,var(--brand-blue),var(--brand-red)) !important;
}
/* Real SVG logo image in nav */
.nav-logo-img {
  height: 38px;
  width:  auto;
  display: block;
  object-fit: contain;
}

/* ================================================================
   HERO — GLASSMORPHISM UPGRADE
   ================================================================ */
.hero {
  background: var(--gradient-hero);
}
.hero-bg {
  background: var(--gradient-hero) !important;
}

/* Animated orbs */
.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: orbFloat 8s ease-in-out infinite;
  pointer-events: none;
}
.hero-orb-1 {
  top: -10%; left: -8%;
  width: 540px; height: 540px;
  background: radial-gradient(circle,rgba(28,116,188,.22),transparent 68%);
  animation-delay: 0s;
}
.hero-orb-2 {
  bottom: -5%; right: -5%;
  width: 420px; height: 420px;
  background: radial-gradient(circle,rgba(207,32,39,.14),transparent 68%);
  animation-delay: 3s;
}
.hero-orb-3 {
  top: 40%; left: 45%;
  width: 300px; height: 300px;
  background: radial-gradient(circle,rgba(28,116,188,.10),transparent 68%);
  animation-delay: 6s;
}
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(20px,-30px) scale(1.05); }
  66%      { transform: translate(-15px,20px) scale(.95); }
}

/* Hero glass stat cards */
.hero-stat {
  background:      var(--glass-06) !important;
  border:          1px solid var(--glass-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:      all var(--transition-base);
}
.hero-stat:hover {
  background:   var(--glass-10) !important;
  border-color: var(--brand-blue-border) !important;
  transform:    translateY(-4px);
}
.hero-stat-num {
  color: var(--brand-blue-light) !important;
}

/* Hero eyebrow glass chip */
.hero-eyebrow {
  background:      rgba(28,116,188,.14) !important;
  border:          1px solid var(--brand-blue-border) !important;
  backdrop-filter: blur(8px);
}

/* ================================================================
   TRUST BADGES — GLASS
   ================================================================ */
.trust-badges {
  background:      rgba(13,17,23,.88) !important;
  backdrop-filter: blur(12px);
  border-top:      1px solid var(--glass-border) !important;
  border-bottom:   1px solid var(--glass-border) !important;
}
.trust-badge-num {
  color: var(--brand-blue-light) !important;
}

/* ================================================================
   SERVICE CARDS — GLASS UPGRADE
   ================================================================ */
.service-card {
  background:      rgba(17,24,39,.70) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:          1px solid var(--glass-border) !important;
}
.service-card::before {
  background: linear-gradient(90deg,var(--brand-blue),var(--brand-red)) !important;
}
.service-card:hover {
  border-color: var(--brand-blue-border) !important;
  box-shadow:   var(--shadow-card-hover) !important;
}
.service-card-icon {
  background:  linear-gradient(135deg,rgba(28,116,188,.18),rgba(207,32,39,.08)) !important;
  border-color: var(--brand-blue-border) !important;
}
.service-card-arrow {
  color: var(--brand-blue-light) !important;
}

/* ================================================================
   SPECIAL / OFFER CARDS — GLASS
   ================================================================ */
.special-card {
  background:      linear-gradient(135deg,rgba(17,24,39,.80),rgba(13,17,23,.90)) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:          1px solid var(--glass-border) !important;
}
.special-card:hover {
  border-color: var(--brand-blue-border) !important;
  box-shadow:   var(--shadow-glow-blue) !important;
  transform:    translateY(-6px);
}
.special-badge {
  background: var(--brand-red) !important;
}
.special-price {
  color: var(--brand-blue-light) !important;
}

/* ================================================================
   REVIEW CARDS — GLASS (dark-mode optimized)
   ================================================================ */
.review-card {
  background:      rgba(255,255,255,.96) !important;
  border:          1px solid rgba(28,116,188,.12) !important;
}
.review-card:hover {
  box-shadow: var(--shadow-glow-blue) !important;
  transform:  translateY(-6px);
}

/* ================================================================
   FAQ — GLASS
   ================================================================ */
.faq-item {
  border:     1px solid var(--glass-border) !important;
  background: rgba(17,24,39,.60);
  backdrop-filter: blur(8px);
}
.faq-question {
  background: rgba(17,24,39,.80) !important;
}
.faq-question.open {
  background:  rgba(28,116,188,.14) !important;
  color:       var(--brand-blue-light) !important;
}
.faq-icon {
  background: rgba(255,255,255,.10) !important;
}
.faq-question.open .faq-icon {
  background: var(--brand-blue) !important;
}
.faq-answer {
  background: rgba(13,17,23,.70) !important;
}

/* ================================================================
   SECTION HEADER — BRAND COLOR
   ================================================================ */
.section-label {
  color: var(--brand-blue-light) !important;
}
.section-label::before,
.section-label::after {
  background: var(--brand-blue-light) !important;
}
.text-blue { color: var(--brand-blue-light) !important; }
.text-gradient {
  background:  var(--gradient-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* ================================================================
   STICKY CTA BAR — GLASS
   ================================================================ */
.sticky-cta-bar {
  background:      rgba(8,9,12,.90) !important;
  backdrop-filter: blur(16px) !important;
  border-top:      1px solid var(--glass-border) !important;
}
.sticky-cta-btn.call  { background: var(--brand-red) !important; }
.sticky-cta-btn.book  { background: var(--brand-blue) !important; }

/* ================================================================
   MOBILE NAV — GLASS
   ================================================================ */
.mobile-nav {
  background:      rgba(8,9,12,.97) !important;
  backdrop-filter: blur(20px) !important;
}

/* ================================================================
   PROMO BANNER — BRAND RED
   ================================================================ */
.promo-banner {
  background: linear-gradient(90deg,var(--brand-red-dark) 0%,var(--brand-red) 50%,var(--brand-red-dark) 100%) !important;
}
.promo-item .dot {
  background: var(--brand-blue-light) !important;
}

/* ================================================================
   CONVERSION: URGENCY TIMER CARD
   ================================================================ */
.urgency-timer {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  background:      rgba(207,32,39,.12);
  border:          1px solid rgba(207,32,39,.35);
  border-radius:   var(--radius-full);
  padding:         .35rem 1rem;
  font-family:     var(--font-data);
  font-size:       .82rem;
  font-weight:     700;
  color:           var(--brand-red-light);
  letter-spacing:  .05em;
}
.urgency-timer .timer-pulse {
  width:            8px;
  height:           8px;
  background:       var(--brand-red);
  border-radius:    50%;
  animation:        pulse-dot 1.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform: scale(1); }
  50%      { opacity:.4; transform: scale(1.4); }
}

/* ================================================================
   CONVERSION: TRUST ROW
   ================================================================ */
.trust-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             1.25rem;
  padding:         1rem 0;
}
.trust-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             .4rem;
  background:      var(--glass-06);
  border:          1px solid var(--glass-border);
  border-radius:   var(--radius-full);
  padding:         .4rem 1rem;
  font-size:       .8rem;
  font-weight:     600;
  color:           var(--neutral-200);
  transition:      all var(--transition-fast);
}
.trust-chip:hover {
  background:   var(--glass-10);
  border-color: var(--brand-blue-border);
  color:        #fff;
}

/* ================================================================
   CONVERSION: SOCIAL PROOF MARQUEE
   ================================================================ */
.marquee-track {
  display:        flex;
  gap:            2rem;
  animation:      marquee 40s linear infinite;
  white-space:    nowrap;
}
.marquee-track:hover {
  animation-play-state: paused;
}
.marquee-item {
  display:         inline-flex;
  align-items:     center;
  gap:             .75rem;
  background:      var(--glass-06);
  border:          1px solid var(--glass-border);
  border-radius:   var(--radius-xl);
  padding:         .75rem 1.25rem;
  flex-shrink:     0;
}

/* ================================================================
   CHATBOT — GLASS
   ================================================================ */
.chatbot-window {
  background:      rgba(13,17,23,.95) !important;
  backdrop-filter: blur(24px) !important;
  border:          1px solid var(--glass-border) !important;
}
.chatbot-header {
  background: linear-gradient(135deg,var(--brand-blue),var(--brand-blue-dark)) !important;
}
.chatbot-send {
  background: var(--brand-blue) !important;
}
.chatbot-send:hover {
  background: var(--brand-blue-dark) !important;
}

/* ================================================================
   FOOTER — GLASS
   ================================================================ */
.site-footer {
  background: rgba(8,9,12,.98) !important;
  border-top:  1px solid var(--glass-border) !important;
}

/* ================================================================
   ANIMATIONS (CSS-only Framer-Motion equivalents)
   ================================================================ */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes ctaPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(28,116,188,.55); }
  50%      { box-shadow: 0 0 0 14px rgba(28,116,188,.0); }
}
.animate-fade-in-up  { animation: fadeInUp  .8s var(--ease-out-expo) both; }
.animate-fade-in     { animation: fadeIn    .7s ease both; }
.animate-scale-in    { animation: scaleIn   .6s var(--ease-bounce) both; }
.animate-slide-left  { animation: slideInLeft  .7s var(--ease-out-expo) both; }
.animate-slide-right { animation: slideInRight .7s var(--ease-out-expo) both; }

/* Stagger delays */
.delay-100 { animation-delay:.10s; }
.delay-200 { animation-delay:.20s; }
.delay-300 { animation-delay:.30s; }
.delay-400 { animation-delay:.40s; }
.delay-500 { animation-delay:.50s; }
.delay-600 { animation-delay:.60s; }

/* CTA pulse on primary button */
.btn-cta-pulse {
  animation: ctaPulse 2.2s ease-in-out infinite;
}

/* Hover float */
.hover-float {
  transition: transform var(--transition-slow);
}
.hover-float:hover {
  transform: translateY(-8px);
}

/* ================================================================
   SCROLL-REVEAL (IntersectionObserver driven)
   ================================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(32px);
  transition: opacity var(--dur-xslow) var(--ease-out-expo),
              transform var(--dur-xslow) var(--ease-out-expo);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}
.reveal-left {
  opacity:    0;
  transform:  translateX(-40px);
  transition: opacity var(--dur-xslow) var(--ease-out-expo),
              transform var(--dur-xslow) var(--ease-out-expo);
}
.reveal-left.visible {
  opacity:   1;
  transform: translateX(0);
}
.reveal-right {
  opacity:    0;
  transform:  translateX(40px);
  transition: opacity var(--dur-xslow) var(--ease-out-expo),
              transform var(--dur-xslow) var(--ease-out-expo);
}
.reveal-right.visible {
  opacity:   1;
  transform: translateX(0);
}

/* ================================================================
   BADGE UPGRADES
   ================================================================ */
.badge-blue {
  background:   rgba(28,116,188,.18) !important;
  color:        var(--brand-blue-light) !important;
  border-color: var(--brand-blue-border) !important;
}
.badge-red {
  background:   rgba(207,32,39,.15) !important;
  color:        var(--brand-red-light) !important;
  border-color: rgba(207,32,39,.35) !important;
}

/* ================================================================
   LOGO — when image loads
   ================================================================ */
.brand-logo {
  height:      42px;
  width:       auto;
  object-fit:  contain;
  display:     block;
}
.brand-logo-sm {
  height: 32px;
}
.brand-logo-lg {
  height: 56px;
}

/* ================================================================
   UTILITY OVERRIDES
   ================================================================ */
.bg-dark   { background: var(--dark-bg) !important; }
.bg-surface{ background: var(--dark-surface) !important; }
.bg-card   { background: var(--dark-card) !important; }
.bg-glass  { background: var(--glass-06); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); }

/* ================================================================
   RESPONSIVE HELPERS
   ================================================================ */
@media (max-width:767px) {
  .hide-mobile { display:none !important; }
}
@media (min-width:768px) {
  .hide-desktop { display:none !important; }
}