:root{
  --bg:#07111f;
  --bg2:#0b1730;
  --card:rgba(14,26,48,.72);
  --line:rgba(135,208,255,.18);
  --text:#f4fbff;
  --muted:#9db3c9;
  --cyan:#6ee7ff;
  --blue:#4da3ff;
  --blue2:#1d6fff;
  --shadow:0 22px 70px rgba(0,0,0,.28);
  --radius:24px;
  --max:1200px;
  --lightText:#0f172a;
  --lightMuted:#475569;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  min-height:100vh;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(calc(100% - 32px), var(--max));margin:0 auto}

/* PREVIOUS LOADER */
.loader{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  z-index:9999;
  background:radial-gradient(circle at center, rgba(29,111,255,.14), rgba(7,17,31,.98) 58%);
  transition:opacity .45s ease, visibility .45s ease;
}
.loader.hidden{opacity:0;visibility:hidden}
.loader-wrap{text-align:center}
.tire{
  width:118px;
  height:118px;
  border-radius:50%;
  position:relative;
  margin:0 auto 18px;
  background:
    radial-gradient(circle at center, #0a1324 0 20%, #cfd8e6 20% 24%, #101a2f 24% 42%, #202f47 42% 48%, #0a1324 48% 58%, #050a14 58% 100%);
  box-shadow:0 0 40px rgba(77,163,255,.25);
  animation:spin 1s linear infinite;
}
.tire::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  border:2px dashed rgba(110,231,255,.42);
  animation:spinReverse 3s linear infinite;
}
.tire::after{
  content:"";
  position:absolute;
  inset:28px;
  border-radius:50%;
  background:radial-gradient(circle, #f3f7fb 0 14%, #95a8be 14% 18%, #182438 18% 100%);
  box-shadow:inset 0 0 16px rgba(255,255,255,.18);
}
.loader p{
  letter-spacing:.28em;
  text-transform:uppercase;
  font-size:.78rem;
  color:var(--cyan);
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spinReverse{to{transform:rotate(-360deg)}}

/* HEADER STAYS BLUE */
.siteHeader{
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(14px);
  background:linear-gradient(135deg, #0f5fff, #3fa3ff);
  border-bottom:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(13,62,151,.22);
}
.nav{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.brandIcon{
  width:46px;height:46px;border-radius:16px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.25);
  font-size:1.2rem;
}
.brandText strong{display:block;font-size:1rem;color:#fff}
.brandText span{display:block;color:rgba(255,255,255,.82);font-size:.82rem;margin-top:3px}
.navLinks{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.navLinks a{color:#fff;font-weight:600}
.menuToggle{
  display:none;
  background:transparent;
  border:none;
  color:#fff;
  font-size:1.7rem;
  cursor:pointer;
}

.btn{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(110,231,255,.22);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-weight:700;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{
  background:linear-gradient(135deg, var(--blue), var(--cyan));
  color:#04111b;
  border:none;
}
.smallBtn{min-height:42px;padding:0 14px}
.wide{width:100%}

/* WHITE HERO */
.heroTop{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  padding:44px 0 68px;
  min-height:620px;
}

/* CAR BACKGROUND UNDER HEADER */
.carsLane{
  position:absolute;
  left:0;
  right:0;
  height:170px;
  top:70px;
  z-index:1;
  pointer-events:none;
}
.carsLane.lane2{
  top:290px;
  height:170px;
}

.car{
  position:absolute;
  width:min(230px, 24vw);
  opacity:.6;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.carA{top:10px;left:-260px;animation:slideCar1 16s linear infinite}
.carB{top:72px;left:-340px;animation:slideCar2 20s linear infinite}
.carC{top:22px;left:-300px;animation:slideCar3 18s linear infinite}
.carD{top:14px;left:-270px;animation:slideCar4 17s linear infinite}
.carE{top:74px;left:-350px;animation:slideCar5 22s linear infinite}

@keyframes slideCar1{
  from{transform:translateX(0)}
  to{transform:translateX(calc(100vw + 620px))}
}
@keyframes slideCar2{
  from{transform:translateX(0) scaleX(-1)}
  to{transform:translateX(calc(100vw + 700px)) scaleX(-1)}
}
@keyframes slideCar3{
  from{transform:translateX(0)}
  to{transform:translateX(calc(100vw + 650px))}
}
@keyframes slideCar4{
  from{transform:translateX(0) scaleX(-1)}
  to{transform:translateX(calc(100vw + 620px)) scaleX(-1)}
}
@keyframes slideCar5{
  from{transform:translateX(0)}
  to{transform:translateX(calc(100vw + 710px))}
}

.heroGrid{
  position:relative;
  z-index:3;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:22px;
}
.lightGlass{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 16px 44px rgba(15,23,42,.08);
  backdrop-filter:blur(7px);
  border-radius:24px;
}
.heroCopy,.heroVisual{padding:28px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 14px;
  border-radius:999px;
  background:rgba(110,231,255,.08);
  color:var(--cyan);
  border:1px solid rgba(110,231,255,.18);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:16px;
}
.lightEyebrow{
  background:rgba(37,99,235,.08);
  color:#2563eb;
  border:1px solid rgba(37,99,235,.12);
}
.heroCopy h1{
  font-size:clamp(2.3rem, 5vw, 4.8rem);
  line-height:.95;
  letter-spacing:-.04em;
  max-width:12ch;
  color:#0f172a;
}
.heroCopy h1 span{color:#2563eb}
.heroCopy p{
  margin-top:18px;
  color:var(--lightMuted);
  font-size:1.05rem;
  line-height:1.75;
  max-width:58ch;
}
.heroActions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.lightBtn{
  background:#fff;
  color:#0f172a;
  border:1px solid rgba(15,23,42,.12);
}
.quickStats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:22px;
}
.lightStat{
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(15,23,42,.08);
}
.lightStat strong{display:block;margin-bottom:6px;color:#0f172a}
.lightStat span{color:#475569;font-size:.92rem}

.heroVisual{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
}
.scanBox{
  position:relative;
  min-height:280px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:22px;
}
.lightScan{
  background:rgba(255,255,255,.45);
  border:1px solid rgba(15,23,42,.08);
}
.ring{
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(37,99,235,.22);
}
.ring1{width:210px;height:210px;animation:spin 10s linear infinite}
.ring2{width:145px;height:145px;border-style:dashed;animation:spinReverse 7s linear infinite}
.centerBadge{
  width:92px;height:92px;border-radius:50%;
  display:grid;place-items:center;
  font-weight:900;font-size:1.4rem;
  background:linear-gradient(135deg, rgba(79,140,255,.32), rgba(110,231,255,.34));
  box-shadow:0 0 28px rgba(110,231,255,.18);
  border:1px solid rgba(110,231,255,.24);
  color:#0f172a;
}
.visualCards{display:grid;gap:12px}
.lightMini{
  padding:15px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.62);
  border:1px solid rgba(15,23,42,.08);
}
.lightMini span{
  display:block;
  color:#2563eb;
  font-size:.82rem;
  margin-bottom:5px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.lightMini strong{color:#0f172a;font-size:1rem}

/* DARK LOWER HALF */
.darkWrap{
  position:relative;
  margin-top:-8px;
  padding-top:24px;
  background:
    radial-gradient(circle at top left, rgba(79,140,255,.16), transparent 26%),
    radial-gradient(circle at 85% 10%, rgba(110,231,255,.12), transparent 22%),
    linear-gradient(180deg, #07101e 0%, #091426 45%, #0c1a34 100%);
  color:var(--text);
  border-top-left-radius:36px;
  border-top-right-radius:36px;
}
.darkWrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.4), transparent 92%);
  border-top-left-radius:36px;
  border-top-right-radius:36px;
}
.section{position:relative;z-index:1;padding:18px 0 16px}
.sectionHead{margin-bottom:18px}
.sectionHead h2{font-size:clamp(1.8rem, 3vw, 2.8rem);margin-top:6px}
.sectionHead p{color:var(--muted);margin-top:10px;max-width:68ch;line-height:1.75}

.glass{
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  backdrop-filter:blur(14px);
  border-radius:var(--radius);
}
.cardGrid{display:grid;gap:18px}
.cardGrid.three{grid-template-columns:repeat(3,1fr)}
.serviceCard,.priceCard,.contactCard,.formCard{padding:22px}
.iconCircle{
  width:54px;height:54px;border-radius:18px;
  display:grid;place-items:center;
  margin-bottom:16px;
  background:linear-gradient(135deg, rgba(110,231,255,.12), rgba(79,140,255,.18));
  border:1px solid rgba(110,231,255,.18);
  font-size:1.25rem;
}
.serviceCard h3,.priceCard h3{margin-bottom:10px}
.serviceCard p,.priceCard li{color:var(--muted);line-height:1.75}
.price{font-size:2rem;font-weight:900;color:#9ff2ff;margin:14px 0}
.priceCard ul{list-style:none;display:grid;gap:10px;margin-bottom:18px}
.priceCard ul li::before{content:"• ";color:var(--cyan)}
.priceCard.featured{outline:1px solid rgba(110,231,255,.28)}
.planTag{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  background:rgba(110,231,255,.1);
  color:var(--cyan);
  border:1px solid rgba(110,231,255,.18);
  margin-bottom:12px;
}
.areasWrap{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.areaCard{padding:18px;text-align:center;font-weight:700}
.mapCard{overflow:hidden;padding:12px}
.mapCard iframe{width:100%;min-height:420px;border:0;border-radius:18px}

.contactGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.contactCard p{color:var(--muted)}
.contactRows{display:grid;gap:12px;margin-top:18px}
.infoLine{
  padding:14px 16px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  color:#e7f0fb;
  line-height:1.6;
}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1 / -1}
label{font-size:.92rem;color:#dbe9f8;font-weight:600}
input,textarea{
  width:100%;
  border:none;
  outline:none;
  color:var(--text);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px 15px;
  font:inherit;
}
input::placeholder,textarea::placeholder{color:#91a6bb}
textarea{resize:vertical;min-height:140px}
.formNote{margin-top:14px;color:var(--muted);font-size:.92rem;line-height:1.65}

.siteFooter{
  background:#0c1a34;
  padding:26px 0 40px;
}
.footerInner{
  padding:20px 22px;
  border-radius:22px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:#fff;
}
.footerInner p{color:var(--muted);margin-top:4px}

/* MOBILE */
@media (max-width: 1024px){
  .heroGrid,.contactGrid{grid-template-columns:1fr}
  .cardGrid.three,.areasWrap{grid-template-columns:1fr 1fr}
  .carsLane.lane2{top:360px}
}
@media (max-width: 760px){
  .menuToggle{display:block}
  .nav{
    min-height:76px;
    flex-wrap:wrap;
    padding:12px 0;
  }
  .navLinks{
    width:100%;
    display:none;
    flex-direction:column;
    align-items:flex-start;
    padding:12px 0 4px;
  }
  .navLinks.show{display:flex}
  .heroTop{
    padding-top:30px;
    padding-bottom:52px;
    min-height:auto;
  }
  .heroCopy,.heroVisual,.serviceCard,.priceCard,.contactCard,.formCard{padding:20px}
  .heroCopy h1{max-width:10ch}
  .quickStats,.cardGrid.three,.areasWrap,.formGrid{grid-template-columns:1fr}
  .heroActions{flex-direction:column}
  .heroActions .btn{width:100%}
  .mapCard iframe{min-height:300px}
  .car{
    width:150px;
    opacity:.5;
  }
  .carsLane{top:84px;height:130px}
  .carsLane.lane2{top:430px;height:130px}
}
/* 24/7 card car image */
.scanBox{
  position: relative;
  overflow: hidden;
}

/* 24/7 card car image FIXED RIGHT */
.scanBox{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* keeps 24/7 centered */
  overflow: hidden;
}

/* CAR IMAGE */
.scanCar{
  position: absolute;
  right: 8px;   /* 👈 move to RIGHT edge */
  bottom: 6px;
  width: 170px;
  height: auto;
  object-fit: contain;
  transform: scaleX(-1); /* faces LEFT */
  opacity: 0.92;
  pointer-events: none;
  z-index: 1;
}

/* KEEP BADGE PERFECTLY CENTERED */
.centerBadge{
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* RINGS ABOVE IMAGE */
.ring{
  position: absolute;
  z-index: 2;
}

/* MOBILE */
@media (max-width: 768px){
  .scanCar{
    width: 120px;
    right: 6px;
    bottom: 6px;
    opacity: 0.85;
  }
}

.scanCar{
  width: 100%;
  height: auto;
  object-fit: contain;
 transform: scaleX(1);
  opacity: 0.95;
}

.centerBadge{
  position: relative;
  z-index: 2;
}

.ring{
  z-index: 2;
}

@media (max-width: 768px){
  .scanCarWrap{
    width: 120px;
    left: 6px;
    bottom: 6px;
    opacity: 0.85;
  }
}
/* ===== DARKER 24/7 SPIN RINGS ===== */
.scanBox.lightScan{
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(15,23,42,.12);
}

.scanBox .ring{
  position: absolute;
  border-radius: 50%;
  z-index: 2;
}

.scanBox .ring1{
  width: 210px;
  height: 210px;
  border: 2px solid rgba(15,23,42,.32);
  box-shadow:
    0 0 0 1px rgba(37,99,235,.08) inset,
    0 0 18px rgba(15,23,42,.08);
  animation: spin 10s linear infinite;
}

.scanBox .ring2{
  width: 145px;
  height: 145px;
  border: 2px dashed rgba(15,23,42,.42);
  box-shadow: 0 0 14px rgba(15,23,42,.08);
  animation: spinReverse 7s linear infinite;
}

.scanBox .centerBadge{
  position: relative;
  z-index: 3;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(79,140,255,.42), rgba(110,231,255,.42));
  border: 1px solid rgba(15,23,42,.18);
  color: #0f172a;
  box-shadow: 0 10px 24px rgba(15,23,42,.12);
}

/* ===== COLOR THE 3 MINI CARDS ===== */
.visualCards{
  display: grid;
  gap: 12px;
}

.visualCards .miniCard{
  border-radius: 18px;
  padding: 15px 16px;
  border: 1px solid rgba(15,23,42,.08);
}

/* Diagnostics */
.visualCards .miniCard:nth-child(1){
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(96,165,250,.22));
  border-color: rgba(37,99,235,.22);
}
.visualCards .miniCard:nth-child(1) span{
  color: #1d4ed8;
}
.visualCards .miniCard:nth-child(1) strong{
  color: #0f172a;
}

/* Roadside */
.visualCards .miniCard:nth-child(2){
  background: linear-gradient(135deg, rgba(245,158,11,.20), rgba(251,191,36,.24));
  border-color: rgba(245,158,11,.24);
}
.visualCards .miniCard:nth-child(2) span{
  color: #b45309;
}
.visualCards .miniCard:nth-child(2) strong{
  color: #0f172a;
}

/* Maintenance */
.visualCards .miniCard:nth-child(3){
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(52,211,153,.22));
  border-color: rgba(16,185,129,.22);
}
.visualCards .miniCard:nth-child(3) span{
  color: #047857;
}
.visualCards .miniCard:nth-child(3) strong{
  color: #0f172a;
}
/* ===== MOBILE CARD FIXES ===== */
@media (max-width: 900px){

  /* force mechanic app cards to single column */
  #mechanicCards{
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* better spacing inside each card */
  .mechanicAppCard{
    padding: 16px !important;
  }

  /* stack top row content cleanly */
  .mechanicAppCard > div:first-child{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* make mechanic image fit better */
  .mechanicAppCard img{
    width: 100% !important;
    max-width: 140px;
    height: auto !important;
    margin: 0 auto;
  }

  /* stack card buttons */
  .mechanicAppCard .btn{
    width: 100%;
  }

  .mechanicAppCard div[style*="display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;"]{
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* pricing rows inside card */
  .mechanicAppCard div[style*="display:grid; gap:8px;"] > div{
    font-size: 14px;
    line-height: 1.45;
  }

  /* map height smaller on tablet/mobile */
  .mechanicAppCard iframe{
    height: 200px !important;
  }
}

@media (max-width: 640px){

  .sectionHead h2{
    font-size: 1.7rem;
  }

  .sectionHead p{can i add to the bottom of css
  
    font-size: 0.95rem;
    line-height: 1.6;
  }

  /* search/filter bar to single column */
  #mechanics .glass div[style*="grid-template-columns:2fr 1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }

  /* tighter card spacing */
  .mechanicAppCard{
    border-radius: 18px !important;
  }

  .mechanicAppCard h3{
    font-size: 1.15rem;
  }

  .mechanicAppCard p{
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .mechanicAppCard iframe{
    height: 180px !important;
  }

  /* keep badges from crowding */
  .badge{
    font-size: 12px;
    padding: 7px 10px;
  }
}
/* ===== FIX MECHANICS TITLE MOBILE ===== */
@media (max-width: 640px){
  #mechanics h2{
    white-space: nowrap;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    text-align: center;
  }
}