/* ── Lead4Pro V2 Shared Styles ── */

/* Navbar enhancements — works with .navbar or nav */
.navbar, nav {
  transition: background .3s, box-shadow .3s;
}
.navbar.scrolled, nav.scrolled {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
}

/* ── CTA animated border ── */
@property --cta-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.cta-border-wrap {
  padding: 3px;
  border-radius: 27px;
  background: conic-gradient(from var(--cta-angle), #0099cc, #7B2FBE, #e040fb, #0099cc);
  animation: cta-rotate 3s linear infinite;
}
@keyframes cta-rotate { to { --cta-angle: 360deg; } }
.cta-border-wrap .cta-banner { border: none !important; }

/* Button shimmer */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: btn-shimmer 2.4s linear infinite;
}
@keyframes btn-shimmer { to { left: 160%; } }

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* ── 3D Card tilt ── */
.tilt-host { perspective: 800px; }
.svc-card .card-gloss {
  position: absolute; inset: 0; border-radius: 20px;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.35) 0%, transparent 60%);
  opacity: 0; transition: opacity .3s;
}
.svc-card:hover .card-gloss { opacity: 1; }

/* ── FOMO widget ── */
#fomo-widget {
  position: fixed;
  bottom: 24px; left: 24px;
  z-index: 9999;
  max-width: 320px;
  transform: translateX(-120%);
  transition: transform .5s cubic-bezier(.23,1,.32,1);
  opacity: 0;
}

/* ── Marquee ── */
.marquee-section { overflow: hidden; }
.marquee-row {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-row-1 { background: #fff; border-top: 1px solid rgba(0,0,0,0.06); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 14px 0; }
.marquee-row-2 { background: linear-gradient(135deg, #0099cc, #7B2FBE); padding: 12px 0; }
.marquee-track { display: flex; gap: 12px; width: max-content; animation: marquee-left 32s linear infinite; }
.marquee-track-rev { animation: marquee-right 28s linear infinite; }
.marquee-row:hover .marquee-track { animation-play-state: paused; }
.mtag { display: inline-flex; align-items: center; white-space: nowrap; background: #f0f7ff; color: #0099cc; border: 1px solid rgba(0,153,204,0.2); border-radius: 100px; padding: 6px 16px; font-size: .82rem; font-weight: 700; }
.mtag-grad { background: rgba(255,255,255,0.18); color: #fff; border-color: rgba(255,255,255,0.25); }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

/* Footer color + text contrast */
footer.footer, .footer {
  background: #dde4f0 !important;
  color: #1e293b !important;
}
footer.footer a, .footer a {
  color: #374151 !important;
}
footer.footer a:hover, .footer a:hover {
  color: #0099cc !important;
}
footer.footer p, .footer p,
footer.footer span, .footer span {
  color: #374151 !important;
}
footer.footer h4, .footer h4,
footer.footer h3, .footer h3 {
  color: #1e293b !important;
}
footer .footer-cities a,
footer .footer-cities a:link,
footer .footer-cities a:visited,
footer * a,
footer a:link,
footer a:visited { color: #1e293b !important; font-weight: 500 !important; opacity: 1 !important; }
footer a:hover { color: #0099cc !important; }
footer * { color: #1e293b; }
/* City grid contrast fix */
footer .footer-bottom h4 { color: #0f172a !important; }
footer div[style*="grid-template-columns:repeat"] a { color: #334155 !important; font-weight: 500 !important; }
footer div[style*="grid-template-columns:repeat"] a:hover { color: #0099cc !important; }
/* Social links */
footer.footer .social-link, .footer .social-link {
  color: #374151 !important;
  border-color: rgba(0,0,0,0.15) !important;
  background: rgba(255,255,255,0.5) !important;
}