/* correct.css — EV Crossover Dark Glass (blue→teal→green, glowing logo) */
/* v2025-10-23d */

:root{
  --navy-950:#030A11;
  --navy-900:#06131C;
  --blue-800:#0A2C4D;
  --teal-700:#0A464F;
  --green-700:#09492F;
  --brand:#00b894;
  --accent:#00d2ff;
  --glow:rgba(0,210,255,.45);
  --glass:rgba(10,22,26,.55);
  --glass-soft:rgba(255,255,255,.10);
  --muted:rgba(255,255,255,.85);
  --muted-dim:rgba(255,255,255,.6);
  --input-bg:rgba(255,255,255,.9);
  --input-border:rgba(255,255,255,.18);
}

/* ===== Animated dark diagonal gradient ===== */
body.hero-bg{
  color:#fff;
  background:
    linear-gradient(135deg,
      var(--navy-950) 0%,
      var(--blue-800) 25%,
      var(--teal-700) 55%,
      var(--green-700) 100%);
  background-size:320% 320%;
  animation:evDiagonal 55s ease-in-out infinite;
}
body.hero-bg::before{
  content:"";
  position:fixed; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.48));
  pointer-events:none;
  z-index:-1;
}
@keyframes evDiagonal{
  0%{background-position:0% 0%}
  50%{background-position:100% 100%}
  100%{background-position:0% 0%}
}
@media(prefers-reduced-motion:reduce){
  body.hero-bg{animation:none;background-size:cover}
}

/* ===== Navbar ===== */
.navbar-site{
  background:linear-gradient(135deg,rgba(5,13,20,.88),rgba(10,44,78,.88));
  border-bottom:1px solid var(--glass-soft);
  backdrop-filter:blur(12px) saturate(130%);
  position:relative;
  z-index:20;
}

/* ✅ Extra-large logo + glowing cyan pulse */
.navbar-site .logo-img{
  height:clamp(180px,16vw,220px)!important;
  width:auto!important;
  object-fit:contain;
  position:relative;
  z-index:2;
  filter:drop-shadow(0 0 25px var(--glow))
          drop-shadow(0 0 55px rgba(0,184,148,.35));
  animation:logoGlow 6s ease-in-out infinite;
}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 0 18px var(--glow)) drop-shadow(0 0 45px rgba(0,184,148,.35));}
  50%{filter:drop-shadow(0 0 32px rgba(0,210,255,.75)) drop-shadow(0 0 70px rgba(0,184,148,.55));}
}

/* Footer logo slightly smaller */
.footer-logo{height:80px;width:auto}

/* ===== Buttons ===== */
.btn-primary,.btn-success,.btn-ev-cta{
  --bs-btn-bg:linear-gradient(90deg,var(--brand),var(--accent));
  border:0;border-radius:14px;
  font-weight:800;color:#021;
  box-shadow:0 8px 24px rgba(0,210,255,.18);
}
.btn-outline-light{
  background:transparent;
  color:#fff;border:1px solid var(--glass-soft);border-radius:12px;
}

/* ===== Glass cards ===== */
.detail-card,.side-card,.dash-box,.calc-card,.card,.modal-content{
  background:var(--glass);
  border:1px solid var(--glass-soft);
  box-shadow:0 10px 36px rgba(0,0,0,.35);
  border-radius:16px;color:#fff;
}

/* ===== Floating labels ===== */
.form-control,.form-select{
  background:var(--input-bg);
  border:1px solid var(--input-border);
  color:#0c1819;border-radius:12px;
}
.form-floating>label{
  color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.45);
}
.form-control:focus,.form-select:focus{
  border-color:rgba(0,184,148,.85);
  box-shadow:0 0 0 .25rem rgba(0,184,148,.25);
}

/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(180deg,rgba(8,20,30,.9),rgba(8,20,30,.98));
  border-top:1px solid var(--glass-soft);
}
.text-footer-dim{color:var(--muted-dim)}
<style>
/* ===== CONTRAST FIXES (scoped to listing page) ===== */
.page-detail .detail-card,
.page-detail .side-card { color:#eaf6f5; } /* default text inside cards */

.page-detail .text-muted { color:rgba(233, 248, 246, .78) !important; }  /* brighter muted */
.page-detail .text-white-70{ color:rgba(255,255,255,.82) !important; }   /* helper you used */

.page-detail .chip,
.page-detail .chip-soft{
  color:#e9f8f6;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}

.page-detail .price{ color:#ffffff; text-shadow:0 1px 0 rgba(0,0,0,.25); }

.page-detail h1,.page-detail h2,.page-detail h3,.page-detail h4,
.page-detail .title,.page-detail .fw-bold { color:#f5fffd; }

/* Paragraphs and list text inside cards */
.page-detail .detail-card p,
.page-detail .detail-card li,
.page-detail .side-card p,
.page-detail .side-card li { color:#dff4f1; }

/* Meta rows (labels like “Warranty”, “Year”, etc.) */
.page-detail .chip .text-muted,
.page-detail .small.text-muted { color:rgba(200, 240, 235, .86) !important; }

/* Suggestion tiles */
.page-detail .sugg-title{ color:#f3fffd; }
.page-detail .sugg-price{ color:#ffffff; }
.page-detail .sugg-meta{ color:rgba(233,248,246,.8); }

/* Image header: add a soft overlay so light photos don’t wash text above/below */
.page-detail .detail-card:first-of-type{
  position:relative;
}
.page-detail .detail-card:first-of-type::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.12) 50%, rgba(0,0,0,.20));
  pointer-events:none; border-radius:inherit;
}

/* Inputs/labels inside calc + reveal boxes already bright, but bump any lingering labels */
.page-detail label{ color:#e6faf7; }
</style>