:root{
  --accent: #e30613; /* red */
  --dark: #0b0b0b;
  --muted: #9aa0a6;
  --card-bg: #111;
}

/* Basic resets */
*{box-sizing: border-box}
body{font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial; margin:0; background:linear-gradient(180deg,#070707 0%, #0d0d0d 100%); color:#fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
a{color:var(--accent)}
a:hover{color:#b40010}

/* Logo sizes */
.logo-sm{height:40px; width:auto; border-radius:6px}
.logo-hero{max-width:160px}

/* HERO */
.hero{
  background: linear-gradient(120deg, rgba(227,6,19,0.12), rgba(0,0,0,0));
  padding-top:4.5rem;
  padding-bottom:4.5rem;
}
.hero-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent);
  border:1px solid rgba(255,255,255,0.04);
  padding:2rem;
  border-radius:12px;
  display:inline-block;
  box-shadow: 0 6px 24px rgba(227,6,19,0.08);
}

/* Sections */
.section-title{color: #fff; font-weight:600}
.feature-card{background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); border-radius:10px; padding:1.5rem}
.feature-card i{color:var(--accent);}

/* Branch card and gallery */
.branch-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:10px; border:1px solid rgba(255,255,255,0.04)}
.gallery-item{height:140px; border-radius:8px; background-size:cover; background-position:center; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25);}

/* CTA */
.cta{background:linear-gradient(180deg, rgba(227,6,19,0.08), rgba(0,0,0,0)); border-top:1px solid rgba(255,255,255,0.03); padding:2.5rem 0}
.cta .btn-outline-light{border-color: rgba(255,255,255,0.12)}

/* Contact card */
.contact-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:10px; border:1px solid rgba(255,255,255,0.04)}

/* Small animation touches */
a.btn, .card{transition: transform .18s ease, box-shadow .18s ease}
a.btn:hover, .card:hover{transform: translateY(-4px)}

/* Responsive tweaks */
@media (max-width: 767px){
  .hero{padding-top:3rem;padding-bottom:3rem}
  .logo-sm{height:34px}
  .gallery-item{height:100px}
}

/* Utility */
.text-muted{color:var(--muted) !important}
.section-sub{color:rgba(255,255,255,0.8)}


/* Improve readability of card content */
.feature-card,
.branch-card,
.contact-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  color: rgba(255,255,255,0.92); /* brighter text */
}

/* Make muted text a bit brighter for visibility */
.text-muted {
  color: rgba(200, 200, 200, 0.85) !important;
}

/* Optional: Increase section subtitle brightness slightly */
.section-sub {
  color: rgba(255, 255, 255, 0.88);
}

section.bg-light .text-muted {
  color: #444 !important; /* Darker grey for better readability */
}