/* Masters Window Tinting — subtle visual polish only.
   Keeps the existing layout and content intact while improving readability,
   brand consistency, and the Liquid PPF marquee. */

:root{
  --muted:#c2c2c2;
  --muted-2:#9c9c9c;
}

/* Readability */
.hero p.lead{font-size:15px;color:#c9c9c9}
.svc p,.msvc p,.diff p,.feature p.body{color:#c2c2c2}

/* Brand-aligned button polish */
.btn-gold:hover{
  box-shadow:0 14px 36px -14px rgba(232,185,35,.58);
}
.btn-ghost:hover{
  border-color:rgba(232,185,35,.72);
  color:var(--gold);
}

/* Refined marquee — same content and structure */
.marquee{
  position:relative;
  background:linear-gradient(180deg,#090909 0%,#030303 100%);
  border-bottom-color:rgba(232,185,35,.22);
  box-shadow:inset 0 1px rgba(255,255,255,.025),inset 0 -1px rgba(0,0,0,.7);
}
.marquee.bottom{border-top-color:rgba(232,185,35,.22)}
.marquee::before,.marquee::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  z-index:3;
  pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,#050505,transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,#050505,transparent)}
.marquee-inner{
  animation-duration:34s;
  will-change:transform;
}
.marquee .track{
  gap:42px;
  padding:14px 0;
}
.marquee span{
  font-family:var(--body);
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:.16em;
  color:#f5f5f5;
  gap:42px;
  text-shadow:0 1px 12px rgba(255,255,255,.04);
}
.marquee span::after{
  color:var(--gold);
  font-size:8px;
  filter:drop-shadow(0 0 5px rgba(232,185,35,.22));
}
@media(hover:hover){
  .marquee:hover .marquee-inner{animation-play-state:paused}
}

/* Keep existing cards, just make interaction slightly calmer and more branded */
.svc:hover{transform:translateY(-5px);border-color:rgba(232,185,35,.22)}
.msvc:hover,.diff:hover{transform:translateY(-3px);border-color:rgba(232,185,35,.22)}

/* PPF interaction accents follow the Masters gold rather than introducing a new accent */
.lvl-c::before{background:var(--gold)}
.lvl-c:hover::after{color:var(--gold)}
.lvl-c-cov li::before{color:var(--gold)}

/* Social links/buttons: use the business palette instead of platform colors. */
a[href*="facebook.com"],a[href*="instagram.com"],a[href*="youtube.com"],a[href*="tiktok.com"]{
  transition:color .25s,border-color .25s,background .25s,transform .25s;
}
a[href*="facebook.com"]:hover,a[href*="instagram.com"]:hover,a[href*="youtube.com"]:hover,a[href*="tiktok.com"]:hover{
  color:var(--gold) !important;
  border-color:rgba(232,185,35,.55) !important;
}

@media(max-width:680px){
  .hero p.lead{font-size:15px;line-height:1.7}
  .marquee::before,.marquee::after{width:34px}
  .marquee .track{gap:34px;padding:13px 0}
  .marquee span{font-size:13px;letter-spacing:.13em;gap:34px}
}

@media(prefers-reduced-motion:reduce){
  .marquee-inner{will-change:auto}
}