/* Car2Fix Static Site (no build, no server) */
/* Palette target: 70% white, 20% blue, 10% red accent */

:root{
  --bg: #ffffff;            /* white */
  --ink: #0f172a;           /* slate-900 */
  /*--muted: #475569;*/         /* slate-600 */
  --muted: #4f4f68;
  --line: #e2e8f0;          /* slate-200 */

  /*--blue: #1d4ed8;*/          /* blue-700 */
  --blue: #30318E;
  /*--blue-2: #2563eb;*/        /* blue-600 */
  --blue-2: #282975;
  --blue-50: #eff6ff;       /* blue-50 */
  --blue-100:#dbeafe;       /* blue-100 */

  /*--red: #ef4444;  */         /* red-500 */
  --red: #C91D35;  
  /*--red-2:#dc2626;*/          /* red-600 */
  --red-2:#AF192D;

  --radius-xl: 24px;
  --radius-2xl: 28px;

  --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 1px 0 rgba(15, 23, 42, 0.05);
}

*{ box-sizing: border-box; }
html,body{ height:auto; overflow-x: clip; }
body{
  margin:0;
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  position: relative;
}

a{ color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
img { max-width: 100%; display:block; }

.container{
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar{
  font-size: 13px;
  color: var(--muted);
  background: rgba(255,255,255,0.82);
  border-bottom: 1px solid var(--line);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}
.topbar .muted{ opacity: .95; }
.topbar .mini-links{ display:flex; gap: 10px; flex-wrap: wrap; }

.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header .container{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
}

/*.brand{
  display:flex;
  align-items:center;
  gap: 12px;
}*/

/*.logo{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background: var(--blue);
  display:grid;
  place-items:center;
  box-shadow: var(--shadow-sm);
}
.logo span{ color:white; font-weight: 700; letter-spacing: -0.02em; }*/
/* Logo container: supports inline SVG or <img> */
.logo{
  width: 200px;

  /* keep your color system */
/*  background: var(--blue);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-sm);*/
}

/* If you use <img src="logo.svg"> */
.logo img{
  width: 72%;
  height: 72%;
  display: block;
  object-fit: contain;
}
/*.brand .name{ font-weight: 700; line-height: 1.1; }
.brand .tag{ font-size: 12px; color: var(--muted); margin-top: 2px; }*/

.nav{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  color: #334155;
  font-weight: 700;
  font-size: 14px;
  background: white;
  transition: .15s ease;
}
.nav a:hover{ background: var(--blue-50); border-color: var(--blue-100); }
.nav a.active{
  background: var(--blue);
  border-color: var(--blue);
  color:white;
}

.actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 16px;
  border-radius: 18px;
  font-weight: 700;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: .15s ease;
  user-select: none;
  font-size: 14px;
}
.btn:active{ transform: scale(.99); }

.btn-primary{ background: var(--blue); color:white; }
/*.btn-primary:hover{ background: #1e40af; }*/
.btn-primary:hover{ background: #282975; }

.btn-accent{ background: var(--red); color:white; }
.btn-accent:hover{ background: var(--red-2); }

.btn-ghost{
  background: white;
  border-color: var(--blue-100);
  color: var(--blue);
}
.btn-ghost:hover{ background: var(--blue-50); }

.icon{
  width: 18px;
  height: 18px;
  display:inline-block;
  vertical-align: middle;
}

.mobile-toggle{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: white;
  font-weight: 700;
  cursor:pointer;
}
.mobile-nav{
  display:none;
  border-top: 1px solid var(--line);
  background: white;
}
.mobile-nav .container{
  padding: 14px 0;
  display:grid;
  gap: 10px;
  justify-content: normal;
}
.mobile-row{ display:flex; gap: 10px; }
.mobile-row a{ flex:1; }

.hero{
  background: linear-gradient(180deg, var(--blue-50) 0%, #fff 70%);
  padding: 52px 0 52px;

  border-bottom: 1px solid var(--line);
}
.hero-grid{
  display:grid;
  gap: 28px;
  grid-template-columns: 1.25fr .75fr;
  align-items: start;
}
.pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--blue-100);
  box-shadow: var(--shadow-sm);
  color: #1e293b;
  font-weight: 700;
  font-size: 13px;
}
.pill .icon{ width: 16px; height:16px; color: var(--blue); }

.h1{
  margin: 14px 0 0;
  font-size: clamp(32px, 3vw, 48px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-weight: 600;
}
.lead{
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 56ch;
}

.hero-cta{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.mini-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-top: 18px;
}
.card{
  background: white;
  border: 1px solid #f1f5f9;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sm);
}
.card.pad{ padding: 18px; }
.card-title{
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card-text{
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.quick{
  padding: 18px;
}
.quick-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.quick-top .badge{
  padding: 8px 10px;
  border-radius: 18px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 12px;
}
.row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-top: 12px;
}
.row .bubble{
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  display:grid;
  place-items:center;
}
.row .bubble .icon{ width: 16px; height:16px; color: var(--blue); }
.row .meta{
  display:grid;
  gap: 3px;
}
.row .label{ font-size: 11px; color: #64748b; font-weight: 700; text-transform: uppercase; letter-spacing:.06em; }
.row .value{ font-size: 14px; font-weight: 700; color: var(--ink); }

.quick-callout{
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--blue-100);
  background: rgba(239,246,255,0.65);
}

.section{
  padding: 54px 0;
}
.eyebrow{
  text-transform: uppercase;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 12px;
}
.section h2{
  margin: 14px 0 0;
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.02em;
}
.section p.desc{
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.6;
  max-width: 70ch;
}

.grid-2{
  margin-top: 20px;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.grid-3{
  margin-top: 20px;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}

.shop-card{
  padding: 20px;
}
.shop-card .top{
  display:flex;
  justify-content: space-between;
  gap: 12px;
}
.shop-card .chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  color: #1e3a8a;
  font-weight: 700;
  font-size: 12px;
}
.shop-card h3{
  margin: 12px 0 0;
  font-size: 20px;
  letter-spacing: -0.02em;
}
.shop-card p{ margin: 10px 0 0; color: var(--muted); line-height: 1.6; }
.shop-card .btns{ margin-top: 16px; display:flex; gap: 10px; flex-wrap: wrap; }

.list{
  margin: 14px 0 0;
  padding-left: 18px;
  color: #334155;
}
.list li{ margin: 7px 0; }

.services{
  margin-top: 20px;
  display:grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.service{
  padding: 18px;
}
.service .service-top{
  display:flex;
  justify-content: space-between;
  gap: 14px;
  align-items:flex-start;
}
.service h4{ margin: 0; font-size: 16px; letter-spacing: -0.01em; }
.service p{ margin: 8px 0 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.service .tick{
  width: 36px;
  height: 36px;
  border-radius: 16px;
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  display:grid;
  place-items:center;
}

.form{
  margin-top: 20px;
  padding: 20px;
}
.form-grid{
  margin-top: 14px;
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.field{ display:grid; gap: 7px; }
.field span{
  font-size: 12px;
  color: #475569;
  font-weight: 700;
}
input, textarea{
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 14px;
  outline: none;
  background: white;
  font-size: 14px;
}
textarea{ resize: vertical; min-height: 110px; }
input:focus, textarea:focus{
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(147,197,253,0.35);
}

.form-actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.micro{ font-size: 12px; color: #64748b; }

.faq{
  margin-top: 18px;
  display:grid;
  gap: 10px;
}
.qa button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: white;
  border: 0;
  cursor:pointer;
  text-align:left;

  border-radius: var(--radius-2xl);
}
.qa .q{ font-weight: 700; color: var(--ink); }
.qa .plus{
  width: 34px;
  height: 34px;
  border-radius: 16px;
  border: 1px solid #f1f5f9;
  background: white;
  display:grid;
  place-items:center;
  color: #1e3a8a;
  font-weight: 700;

  padding-bottom: 3px;

}
.qa .a{
  padding: 0 18px 16px;
  color: var(--muted);
  line-height: 1.6;
  display:none;
}
.qa[data-open="true"] .a{ display:block; }
.qa[data-open="true"] .plus{ background: var(--blue-50); border-color: var(--blue-100); }

.map-wrap{
  overflow:hidden;
  border-radius: var(--radius-2xl);
  border: 1px solid #f1f5f9;
}
.map{
  width: 100%;
  height: 360px;
  border: 0;
  display:block;
}

.footer{
  border-top: 1px solid var(--line);
  padding: 44px 0;
  background: white;
}
.footer-grid{
  display:grid;
  gap: 14px;
  grid-template-columns: 1fr 1fr;
  align-items:start;
}
.footer small{ color: #64748b; }
.footer .cards{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0,1fr));
}
.footer .note{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sticky-cta{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 14px;
  z-index: 60;
  pointer-events: none;
}
.sticky-cta .container{
  pointer-events: auto;
}
.sticky-cta .card{
  padding: 10px 12px;
  border-radius: 22px;
  box-shadow: var(--shadow);
}
.sticky-cta .cta-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.sticky-cta .cta-row .label{
  font-weight: 700;
}
.sticky-cta .cta-row .btn{ padding: 10px 12px; border-radius: 16px; }

.parallax-img-1{
  position: absolute;
  /*right: -400px;
  margin-top: -150px;
  z-index: -1;*/


  right: -250px;
  width: 700px;
  
  z-index: -1;
  /*width: 600px;*/
}

.parallax-img-2{
  position: absolute;
  left: -300px;
  width: 600px;
  z-index: 0;
  /*transform: rotate(45deg);*/
  /*margin-top: -150px;*/
}

.parallax-float{
  position: absolute;
  display: inline;
  overflow: hidden;
  transform: translate3d(0, var(--parallax, 0px), 0) rotate(-10deg);
  will-change: transform;
  pointer-events: none;
  user-select: none;
}

.section--parallax{
  overflow: hidden;

  isolation: isolate;
}

.unhide-mob{
  display: flex;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .mini-cards{ grid-template-columns: 1fr; }
  .services{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .footer .cards{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
  .nav, .actions{ display:none; }
  .mobile-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  .mobile-nav.open{ display:block; }
  .form-grid{ grid-template-columns: 1fr; }
  .sticky-cta{ display:block; }

  .hide-mob{
    display:none;
  }
}

@media (min-width: 821px){
  .sticky-cta{ display:none; }
}