/* App CSS for Auto Repair landing page */
:root{
  --bg: #0b0b0b;
  --card: #111;
  --muted: #bfc3c6;
  --accent: #ffd400;
  --accent-dark:#e6c600;
  --max-width: 1200px;
  --radius: 8px;
}
*{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;scroll-padding-top:90px}
body{
  margin:0;display:flex;flex-direction:column;min-height:100vh;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:var(--bg);color:#eee;line-height:1.6;font-size:clamp(15px,1.2vw,18px);
} 
.container{width:min(90%, var(--max-width));max-width:var(--max-width);margin:0 auto;padding:clamp(28px,4vw,60px) 0}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.site-header{position:sticky;top:0;z-index:1000;background:linear-gradient(rgba(11,11,11,0.45), rgba(11,11,11,0.12));backdrop-filter:blur(4px)}

main{flex:1}
.logo{display:flex;align-items:center;color:#fff;text-decoration:none;font-weight:700;gap:10px}
.logo-mark-svg{width:72px;height:72px;flex:0 0 72px;transition:transform .45s cubic-bezier(.2,.9,.2,1), filter .25s;transform-origin:center}
.logo-text{font-weight:700;font-size:1.05rem;margin-left:8px;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-dark));-webkit-background-clip:text;background-clip:text}

/* Logo switcher & variants */
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-viewport{width:72px;height:72px;display:grid;place-items:center}
.logo-variant{width:72px;height:72px;display:block}
.logo-variant:not(.active){display:none}
.logo-switcher{display:flex;gap:8px;align-items:center}
.logo-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;padding:6px 8px;border-radius:6px;cursor:pointer;transition:transform .12s ease,background-color .12s ease}
.logo-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.03)}
#downloadPack{background:linear-gradient(90deg,var(--accent),var(--accent-dark));color:#111;border:0;padding:6px 10px}
#downloadPack:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,0.5)}
.sr-only{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Variant animations triggered via .logo-animate on the SVG parent */
.logo-animate .wrench-path{stroke-dasharray:220;stroke-dashoffset:220;animation:draw 700ms forwards .14s}
.logo-animate .monogram rect{transform-origin:center center;animation:pop .6s cubic-bezier(.2,.9,.2,1) .12s both}
@keyframes pop{from{transform:scale(.9);opacity:.6}to{transform:scale(1);opacity:1}}
/* Auto-loop animation for tire-speed logo (continuous) */
.logo-variant.tire-speed circle:last-of-type {
  animation: pulse-glow 3s ease-in-out infinite;
  transform-origin: center;
}

.logo-variant.tire-speed .speed {
  animation: dash-flow 2.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes pulse-glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,212,0,0.4)); }
  50% { opacity: 0.85; filter: drop-shadow(0 0 12px rgba(255,212,0,0.8)); }
}

@keyframes dash-flow {
  0% { transform: translateX(-8px); opacity: 0.6; }
  50% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0.6; }
}

/* Enhanced hover animation - replay on hover */
.logo:hover .logo-variant.tire-speed {
  animation: logo-bounce 0.6s cubic-bezier(.2,.9,.2,1);
}

@keyframes logo-bounce {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* New variant animations */
.logo-animate .gear-spark .teeth{animation:gear-spin 900ms linear .16s both}
.logo-animate .gear-spark rect{transform-origin:center;animation:pop .6s ease .14s both}
.logo-animate .tire-speed .speed{animation:speed-line .7s ease .14s both}
@keyframes speed-line{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
/* Shield-gear logo animations */
.logo-animate .shield{transform-origin:70px 68px;animation:shield-pop .6s cubic-bezier(.2,.9,.2,1) .15s both}
.logo-animate .gear{transform-origin:center center;animation:gear-spin .9s ease .2s both}
.logo-animate .wrench-path{stroke-dasharray:260;stroke-dashoffset:260;animation:draw 800ms forwards .25s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes gear-spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes shield-pop{from{transform:scale(.92);opacity:.6} to{transform:scale(1);opacity:1}}
.gear{transform-origin:center center;transition:transform .6s ease}
.wrench-path{stroke-dasharray:260;stroke-dashoffset:260}
/* JS-controlled animation: add .logo-animate to the SVG element to play */
.logo-animate .wrench-path{animation:draw 900ms forwards 160ms}
.logo-animate .gear{animation:gear-spin 900ms cubic-bezier(.2,.9,.2,1) 1 both}
.logo:hover .logo-mark-svg{transform:rotate(-6deg) scale(1.04);filter:drop-shadow(0 10px 24px rgba(255,212,0,0.12)) drop-shadow(0 2px 6px rgba(0,0,0,0.6))}
.logo:hover .gear{transform:rotate(20deg) scale(1.04)}
.logo:hover .wrench{transform:translateY(-2px)}
.logo-text::after{content:'';display:inline-block;width:10px;height:10px;margin-left:10px;border-radius:50%;background:var(--accent);box-shadow:0 6px 18px rgba(255,212,0,0.18);opacity:0;transform:scale(.6);transition:all .25s cubic-bezier(.2,.9,.2,1)}
.logo:hover .logo-text::after{opacity:1;transform:scale(1)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes gear-spin{to{transform:rotate(360deg)}}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .logo-animate .wrench-path, .logo-animate .gear, .logo:hover .logo-mark-svg{animation:none!important;transform:none!important}
}
.main-nav{display:flex;gap:22px}
.main-nav a{color:#ddd;text-decoration:none;font-weight:600;position:relative;padding:6px 4px;transition:color .18s ease, transform .12s ease}
.main-nav a:hover,.main-nav a:focus{color:var(--accent);transform:translateY(-2px)}
.main-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;background:transparent;transform:scaleX(0);transform-origin:left center;transition:transform .18s ease, background-color .18s ease}
.main-nav a:hover::after,.main-nav a:focus::after{background:var(--accent);transform:scaleX(1)}
.main-nav a.active{color:var(--accent);transform:translateY(-2px)}
.main-nav a.active::after{background:var(--accent);transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:12px}
.btn{display:inline-block;padding:12px 18px;border-radius:8px;text-decoration:none;font-weight:600;cursor:pointer;transition:transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s ease, background-color .18s ease, opacity .12s ease}
.btn-primary{background:var(--accent);color:#111;box-shadow:0 6px 18px rgba(0,0,0,0.35)}
.btn-primary:hover,.btn-primary:focus{background:var(--accent-dark);transform:translateY(-4px) scale(1.02);box-shadow:0 18px 36px rgba(0,0,0,0.6)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,0.06);color:#fff}
.btn-ghost:hover,.btn-ghost:focus{background:rgba(255,255,255,0.04);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.12);color:#fff}
.btn-outline:hover,.btn-outline:focus{background:rgba(255,255,255,0.03);border-color:rgba(255,255,255,0.22);transform:translateY(-3px);box-shadow:0 10px 30px rgba(0,0,0,0.45)}
.nav-toggle{display:none;background:transparent;border:0;color:#fff;font-size:18px}

/* Prevent media elements from overflowing the viewport */
img, video, svg {max-width:100%;height:auto;display:block}
iframe{max-width:100%;display:block}

/* Hero */
.hero{position:relative;color:#fff;padding:120px 0 160px;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:url('images/Bmw-1de.jpg');background-size:cover;background-position:center;filter:brightness(0.6)}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.9))}
.hero-inner{position:relative;z-index:2;max-width:920px;margin:40px auto 40px;text-align:center;padding:0 12px}
.hero h1{font-size:clamp(32px,5.5vw,54px);margin:0 0 12px;color:var(--accent);text-shadow:0 6px 24px rgba(0,0,0,0.6);line-height:1.03;font-weight:700}
.lead{color:#f2f2f2;margin:0 auto 18px;font-size:clamp(16px,2vw,22px);max-width:780px}
.hero-ctas{display:flex;gap:12px;margin-bottom:26px;justify-content:center;flex-wrap:wrap}
.stats{display:flex;gap:40px;list-style:none;padding:0;margin:30px 0 0}
.stats li{display:block;text-align:center}
.stats strong{display:block;font-size:clamp(20px,2.4vw,28px);color:var(--accent)}
.stats span{color:var(--muted);font-size:14px}

/* About */
.about{margin-top:30px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.about-image img{width:100%;height:auto;border-radius:8px;display:block}
.about-content h2{margin-top:0}
.about-content p{color:var(--muted)}

/* Services */
.section-dark{background:#0f0f0f;padding:60px 0}
.section-title{font-size:24px;margin-bottom:6px;text-align:left}
.section-sub{color:var(--muted);margin-bottom:20px}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-top:28px}
.service-card{background:var(--card);padding:22px;border-radius:8px;text-align:center;transition:all .3s cubic-bezier(.2,.9,.2,1);border:1px solid rgba(255,212,0,0.1);cursor:pointer;position:relative;overflow:hidden}
.service-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,212,0,0.15) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;pointer-events:none}
.service-card:hover{transform:translateY(-12px);box-shadow:0 20px 40px rgba(255,212,0,0.2),0 0 20px rgba(255,212,0,0.1);border-color:rgba(255,212,0,0.3)}
.service-card:hover::before{opacity:1}
.service-card i{color:var(--accent);margin-bottom:12px;transition:transform .4s cubic-bezier(.2,.9,.2,1),filter .3s ease;display:inline-block;font-size:2.5rem}
.service-card:hover i{transform:scale(1.15) rotate(8deg);filter:drop-shadow(0 8px 16px rgba(255,212,0,0.4))}
.service-card h4{margin:8px 0;transition:color .3s ease}
.service-card:hover h4{color:var(--accent)}
.center{text-align:center;margin-top:22px}

/* Why */
.why-grid{display:grid;grid-template-columns:1fr 420px;gap:30px;align-items:center}
.why-grid ul{color:var(--muted);padding-left:18px}
.why-grid img{width:100%;border-radius:6px}

/* CTA Small */
.cta-small{padding:36px 0}

/* Reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:18px}
.review-card{background:#111;padding:18px;border-radius:6px}
.review-card p{color:var(--muted)}
.stars{color:var(--accent);margin:12px 0}

/* Map */
.map iframe{border:0;display:block}

/* Footer */
.site-footer{background:#080808;color:#ccc;padding:40px 0 18px}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;align-items:start}
.footer-grid > div{min-width:0}
.site-footer h4{color:#f3f3f3;margin-bottom:8px}
.site-footer p{color:#d1d1d1}
.socials a{color:#ccc;margin-right:10px}
.copyright{padding:18px 0;text-align:center;color:#999}

/* Footer: small screens */
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-grid .logo{justify-content:center}
  .site-footer h4{font-size:1rem}
  .site-footer p{font-size:.95rem}
}

/* Responsive */
@media(max-width:1000px){
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:780px){
  .header-inner{gap:10px}
  .main-nav{position:fixed;top:68px;left:12px;right:12px;background:#0c0c0c;border-radius:8px;padding:14px;flex-direction:column;display:none;z-index:1000;box-shadow:0 10px 30px rgba(0,0,0,0.6);max-height:calc(100vh - 120px);overflow:auto;max-width:calc(100% - 28px);box-sizing:border-box}
  .main-nav.open{display:flex}
  .nav-toggle{display:block}
  .about-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .services-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .container{padding:20px 14px}
  .hero{padding:90px 0 120px}
  .hero-inner{margin:20px auto 20px}
  .hero h1{font-size:36px}
}

@media(max-width:420px){
  .hero{padding:70px 0 80px}
  .hero h1{font-size:28px}
  .stats{gap:18px}
  .header-inner{padding:12px 0}
}

/* Ensure anchor scrolling doesn't hide the contact area under the sticky header */
#contact{scroll-margin-top:110px}

/* small touch */
a:focus{outline:2px dashed var(--accent-dark);outline-offset:3px}