:root{
  --bg:#0b0d11; --bg-elev:#121620; --fg:#e9eef7; --muted:#b7c0cf;
  --accent:#d0d7e3; --brand:#e11d2e; --brand-dark:#7f0f18;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{width:min(1200px,92vw);margin-inline:auto}

/* Header/Nav (light header for contrast with black text logo) */
header{position:sticky;top:0;z-index:40;backdrop-filter:saturate(160%) blur(10px);
  background:#f5f5f5;border-bottom:2px solid var(--brand)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{height:120px;filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.6))}
nav ul{display:flex;gap:1.1rem;list-style:none;margin:0;padding:0}
nav a{color:#111;text-decoration:none;font-weight:700;opacity:.85}
nav a:hover{opacity:1;color:var(--brand)}
.nav-cta{display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:860px){
  nav ul{display:none}
  .logo{height:90px}
}

/* Buttons, cards, badges */
.btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--brand);color:#fff;
  padding:.85rem 1.1rem;border-radius:999px;border:1px solid #00000033;box-shadow:var(--shadow);
  font-weight:800;letter-spacing:.2px}
.btn:hover{transform:translateY(-1px)}
.btn.outline{background:transparent;border:2px solid var(--accent);color:#111}
.badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;padding:.35rem .6rem;
  border-radius:999px;border:1px solid #c7ccd6;color:#111;background:#fff}
.card{background:linear-gradient(180deg,#161b27,#0c1018);border:1px solid #232a3a;
  border-radius:var(--radius);box-shadow:var(--shadow)}

/* Hero */
.hero{padding:clamp(48px,8vw,96px) 0;
  background:radial-gradient(1200px 600px at 50% -10%, #1a2030 10%, transparent 60%), linear-gradient(180deg,#0b0d11,#0f1115)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;margin:0}
.hero p{color:var(--muted);font-size:clamp(1rem,2vw,1.125rem)}
.mt-2{margin-top:.75rem}.mt-3{margin-top:1rem}

/* Sections */
.section{padding:clamp(48px,7vw,84px) 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.section-head h2{margin:0;font-size:clamp(1.4rem,2.8vw,2rem)}
.kicker{color:#f59e0b;font-weight:700;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase}

/* Grids */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.service{padding:1.1rem}
.service h3{margin:.2rem 0 .6rem;font-size:1.1rem}
.service p{color:var(--muted)}

/* ADAS */
.adas{display:grid;grid-template-columns:1.1fr .9fr;gap:1.2rem;align-items:center}
@media(max-width:980px){.adas{grid-template-columns:1fr}}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
@media(max-width:980px){.gallery{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.gallery{grid-template-columns:repeat(2,1fr)}}
.thumb{position:relative;border-radius:12px;overflow:hidden;border:1px solid #232a3a}

/* Testimonials */
.quotes{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
@media(max-width:980px){.quotes{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.quotes{grid-template-columns:1fr}}
.quote{padding:1rem;display:flex;flex-direction:column;gap:.6rem}

/* Contact */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:1.2rem}

/* Footer */
footer{padding:30px 0;border-top:2px solid var(--brand);color:#a9b3c3}



/* === UI Visibility Tweaks === */

/* Make header logo bigger */
header .logo {
  height: 180px !important;
}

/* Footer logo with background so it doesn't blend */


/* Outline buttons visible on dark background */
.btn.outline {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid var(--brand) !important;
}
.btn.outline:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Mobile responsiveness: slightly reduce header logo on small screens */
@media (max-width: 860px) {
  header .logo { height: 130px !important; }
  .nav-cta .btn { padding: .7rem .9rem; }
}

/* Keep image aspect ratio consistent */
.card img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto}


/* === Corrected Logo Sizes === */
header .logo { height: 150px !important; }
@media (max-width: 860px) {
  header .logo { height: 110px !important; }
}



/* === Mobile Nav (Hamburger) === */
.nav-toggle{
  display:none; border:none; background:transparent; cursor:pointer; padding:.4rem; margin-left:auto;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; background:#111; margin:5px 0;
  transition:transform .2s ease, opacity .2s ease;
}
.site-menu{ display:flex; align-items:center; gap:1.1rem; }
.site-menu ul{ display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; }
.site-menu a{ color:#111; text-decoration:none; font-weight:700; opacity:.85; }
.site-menu a:hover{ opacity:1; color:var(--brand); }

@media (max-width: 860px){
  .nav{ gap:.6rem; }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .site-menu{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); height:100dvh;
    background:linear-gradient(180deg,#0f1115,#0b0d11); border-left:1px solid #232a3a;
    color:#e9eef7; flex-direction:column; align-items:stretch; gap:0;
    padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.45);
    transform:translateX(100%); transition:transform .2s ease-in-out; z-index:60;
  }
  .site-menu.open{ transform:translateX(0); }
  .site-menu ul{ flex-direction:column; gap:.2rem; margin-top:.25rem; }
  .site-menu a{ color:#e9eef7; padding:.7rem .4rem; display:block; border-radius:8px; }
  .site-menu a:hover{ background:#121620; color:#fff; }
  .site-menu .nav-cta{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
  .site-menu .btn{ width:100%; justify-content:center; }
  .menu-backdrop{
    position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
    z-index:50;
  }
  body.no-scroll{ overflow:hidden; }
}

/* === Footer logo transparent === */
footer .logo{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(2px 2px 4px rgba(0,0,0,.6));
}



/* === CSS-only Hamburger Drawer === */
.nav-toggle{
  display:none; border:none; background:transparent; cursor:pointer; padding:.4rem; margin-left:auto;
}
.nav-toggle .bar{
  display:block; width:24px; height:2px; background:#111; margin:5px 0;
}
.site-menu{ display:flex; align-items:center; gap:1.1rem; }
.site-menu ul{ display:flex; gap:1.1rem; list-style:none; margin:0; padding:0; }
.site-menu a{ color:#111; text-decoration:none; font-weight:700; opacity:.85; }
.site-menu a:hover{ opacity:1; color:var(--brand); }
.menu-backdrop{ display:none; }

@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .site-menu{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); height:100dvh;
    background:linear-gradient(180deg,#0f1115,#0b0d11); border-left:1px solid #232a3a;
    color:#e9eef7; flex-direction:column; align-items:stretch; gap:0;
    padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.45);
    transform:translateX(100%); transition:transform .2s ease-in-out; z-index:60;
  }
  .site-menu ul{ flex-direction:column; gap:.2rem; margin-top:.25rem; }
  .site-menu a{ color:#e9eef7; padding:.7rem .4rem; display:block; border-radius:8px; }
  .site-menu a:hover{ background:#121620; color:#fff; }
  .site-menu .nav-cta{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
  .site-menu .btn{ width:100%; justify-content:center; }
  /* CSS toggle: when checkbox is checked, show drawer and backdrop */
  #navchk:checked ~ nav.site-menu{ transform:translateX(0); }
  #navchk:checked ~ .menu-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:50;
  }
}

/* === Footer logo transparent === */
footer .logo{
  background:none !important;
  padding:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(2px 2px 4px rgba(0,0,0,.6));
}



/* === Guaranteed CSS-only Drawer Toggle (structure-sensitive) === */
@media (max-width: 860px){
  #navchk ~ nav.site-menu{ transform: translateX(100%); }
  #navchk:checked ~ nav.site-menu{ transform: translateX(0); }
  #navchk ~ .menu-backdrop{ display: none; }
  #navchk:checked ~ .menu-backdrop{
    display:block; position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px); z-index:50;
  }
  .nav-toggle{ display:block; border:none; background:transparent; cursor:pointer; padding:.4rem; margin-left:auto; z-index:61; }
  .nav-toggle .bar{ display:block; width:24px; height:2px; background:#111; margin:5px 0; }
  .site-menu{
    position:fixed; inset:0 0 0 auto; width:min(86vw, 360px); height:100dvh;
    background:linear-gradient(180deg,#0f1115,#0b0d11); border-left:1px solid #232a3a;
    color:#e9eef7; display:flex; flex-direction:column; align-items:stretch; gap:0;
    padding:18px 16px; box-shadow:0 10px 30px rgba(0,0,0,.45);
    transition:transform .2s ease-in-out; z-index:60;
  }
  .site-menu ul{ display:flex; flex-direction:column; gap:.2rem; margin:0; padding:0; list-style:none; }
  .site-menu a{ color:#e9eef7; padding:.7rem .4rem; display:block; border-radius:8px; }
  .site-menu a:hover{ background:#121620; color:#fff; }
}