*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#000;--dark:#0a0a0a;--dark2:#111;--dark3:#1a1a1a;--dark4:#222;
  --gray:#777;--gray2:#555;--gray-light:#bbb;--white:#fff;
  --accent:#e54c4c;--accent2:#c73333;--accent-glow:rgba(229,76,76,0.15);
  --fd:'Barlow Condensed',sans-serif;--fb:'Inter',sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:var(--fb);font-size:16px;line-height:1.6;overflow-x:hidden}

/* ══════════════════ NAV ══════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:60px;padding:0 5vw;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,0);
  transition:background .35s,height .35s;
}
nav.scrolled{background:rgba(0,0,0,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.nav-logo img{height:30px;width:auto;filter:brightness(0) invert(1);display:block}

.nav-desktop{display:flex;align-items:center;gap:1.65rem;list-style:none}
.nav-desktop a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:color .2s}
.nav-desktop a:hover{color:#fff}
.nav-desktop .nav-btn{background:var(--accent);color:#fff !important;padding:8px 18px;border-radius:2px;font-weight:500}
.nav-desktop .nav-btn:hover{background:var(--accent2)}
@media(max-width:1180px){.nav-desktop{gap:1.15rem}}

/* Vehicles dropdown (desktop) */
.nav-item{position:relative}
.nav-dropdown-toggle{display:inline-flex;align-items:center;gap:5px}
.nav-caret{font-size:9px;transform:translateY(1px);transition:transform .2s;opacity:.7}
.nav-item.has-dropdown:hover .nav-caret,
.nav-item.has-dropdown.is-open .nav-caret{transform:translateY(1px) rotate(180deg)}
.nav-dropdown-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(6px);
  min-width:210px;background:rgba(8,8,8,.98);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(229,76,76,.4); /* was rgba(255,255,255,.08) */
  border-radius:2px;
  padding:6px;display:flex;flex-direction:column;gap:1px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.nav-dropdown-menu::before{
  content:'';position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;background:rgba(8,8,8,.98);
  border-left:1px solid rgba(229,76,76,.4);
  border-top:1px solid rgba(229,76,76,.4); /* match new border color */
  rotate:45deg;
}
.nav-item.has-dropdown::after{
  content:'';
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:14px; /* matches the gap so hover never drops */
}
.nav-item.has-dropdown:hover .nav-dropdown-menu,
.nav-item.has-dropdown:focus-within .nav-dropdown-menu,
.nav-item.has-dropdown.is-open .nav-dropdown-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
}
.nav-dropdown-menu a{
  padding:11px 14px;font-size:12px;letter-spacing:.05em;text-transform:none;
  color:rgba(255,255,255,.72);border-radius:1px;text-decoration:none;transition:background .15s,color .15s;
  display:flex;align-items:center;gap:9px;
}
.nav-dropdown-menu a .ndm-icon{font-size:14px;opacity:.7;flex-shrink:0}
.nav-dropdown-menu a:hover{background:rgba(229,76,76,.12);color:#fff}
.nav-dropdown-menu .ndm-divider{height:1px;background:rgba(255,255,255,.07);margin:4px 6px}

/* Mobile drawer submenu (Vehicles group) */
.drawer-group-toggle{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0;font-family:var(--fd);font-size:28px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:#fff;cursor:pointer;user-select:none;
}
.dg-caret{font-size:18px;color:var(--gray);transition:transform .25s}
.drawer-group.is-open .dg-caret{transform:rotate(45deg);color:var(--accent)}
.drawer-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease;display:flex;flex-direction:column}
.drawer-group.is-open .drawer-submenu{max-height:320px} 
.drawer-sublink{padding:11px 0 11px 4px;font-size:15px;color:var(--gray-light);text-decoration:none;letter-spacing:.03em;border-top:1px solid rgba(255,255,255,.05)}
.drawer-sublink:hover{color:var(--accent)}

/* Hamburger */
.nav-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;background:none;border:none;flex-shrink:0;padding:4px}
.nav-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .28s ease,opacity .2s}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.is-open span:nth-child(2){opacity:0}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.nav-drawer{
  position:fixed;inset:0;z-index:999;
  display:flex;flex-direction:column;
  background:#000;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  padding:80px 6vw 40px;
  overflow-y:auto;
}
.nav-drawer.is-open{transform:translateX(0)}
.drawer-links{list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.08)}
.drawer-links li{border-bottom:1px solid rgba(255,255,255,.08)}
.drawer-links a{display:block;padding:18px 0;font-family:var(--fd);font-size:28px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#fff;text-decoration:none;transition:color .2s}
.drawer-links a:hover{color:var(--accent)}
.drawer-cta{margin-top:32px}
.drawer-cta a{display:block;text-align:center;padding:16px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px}

/* ══════════════════ HERO (fullscreen per-product) ══════════════════ */
.hero-section{
  position:relative;height:100svh;min-height:580px;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:hidden;
}
.hero-section .hero-bg{
  position:absolute;inset:0;z-index:0;
  background:#0d0808;
}
/* gradient overlay */
.hero-section .hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.3) 50%,rgba(0,0,0,.1) 100%);
}
/* animated grid */
.hero-section .hero-grid{
  position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(229,76,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(229,76,76,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,black 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse farthest-corner at 50% 50%,black 30%,transparent 100%);
}
/* ── Hero slideshow ── */
.hero-vehicle{
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.04);
  transition:opacity 1.4s ease,transform 6.5s ease;
  will-change:opacity,transform;
}
.hero-slide.is-active{
  opacity:.9;
  transform:scale(1);
}
.hero-slide-dots{
  position:absolute;z-index:4;
  right:5vw;bottom:clamp(9rem,16vw,11.5rem);
  display:flex;gap:8px;
  opacity:0;animation:fadeIn 1s 1s forwards;
}
.hsd-dot{
  width:22px;height:2px;border:none;padding:0;
  background:rgba(255,255,255,.28);cursor:pointer;
  transition:background .25s;
}
.hsd-dot.is-active{background:var(--accent)}
.hsd-dot:hover{background:rgba(255,255,255,.55)}

.hero-content{
  position:relative;z-index:3;
  padding:0 6vw clamp(3rem,7vw,6rem);
  max-width:900px;
}
#home .hero-content{
  padding-bottom:clamp(6.5rem,12vw,9.5rem);
}
.hero-category{
  display:inline-block;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
  opacity:0;animation:fadeUp .7s .2s forwards;
}
.hero-title{
  font-family:var(--fd);font-size:clamp(52px,13vw,130px);font-weight:800;
  line-height:.88;letter-spacing:-.02em;text-transform:uppercase;
  opacity:0;animation:fadeUp .7s .4s forwards;
}
.hero-title em{font-style:normal;color:var(--accent)}
.hero-model{
  font-family:var(--fd);font-size:clamp(20px,4vw,38px);font-weight:300;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.6);
  margin-top:.35rem;
  opacity:0;animation:fadeUp .7s .55s forwards;
}
.hero-actions{
  margin-top:2rem;display:flex;gap:.75rem;flex-wrap:wrap;
  opacity:0;animation:fadeUp .7s .7s forwards;
}
.btn-primary{background:var(--accent);color:#fff;padding:13px 28px;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:background .2s,transform .15s;white-space:nowrap;display:inline-block}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn-ghost{color:#fff;padding:13px 28px;font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid rgba(255,255,255,.3);border-radius:2px;transition:border-color .2s,transform .15s;white-space:nowrap;display:inline-block}
.btn-ghost:hover{border-color:#fff;transform:translateY(-1px)}

/* hero stats bar */
.hero-stats-bar{
  position:absolute;bottom:0;left:0;right:0;z-index:4;
  display:flex;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);
  opacity:0;animation:fadeIn 1s .9s forwards;
}
.hstat{
  flex:1;padding:clamp(.75rem,2vw,1.25rem) clamp(.75rem,2.5vw,2rem);
  text-align:center;
  border-right:1px solid rgba(255,255,255,.08);
}
.hstat:last-child{border-right:none}
.hstat-num{font-family:var(--fd);font-size:clamp(22px,4.5vw,40px);font-weight:700;line-height:1;color:#fff}
.hstat-lbl{font-size:clamp(9px,1.5vw,11px);letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-top:3px}

/* ══════════════════ SECTION SHARED ══════════════════ */
.sec{padding:clamp(3.5rem,9vw,8rem) 6vw}
.sec-label{font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:.75rem}
.sec-title{font-family:var(--fd);font-size:clamp(34px,7vw,72px);font-weight:700;line-height:.93;text-transform:uppercase;letter-spacing:-.01em}

/* ══════════════════ PRODUCT CATEGORIES ══════════════════ */
#categories{padding:0;background:var(--dark)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.cat-card{
  position:relative;aspect-ratio:3/4;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--dark2);
}
.cat-card-bg{
  position:absolute;inset:0;z-index:0;
  transition:transform .6s ease;
}
.cat-card:hover .cat-card-bg{transform:scale(1.04)}
.cat-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.15) 60%,transparent 100%)}
.cat-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);z-index:2;font-size:clamp(52px,8vw,90px);opacity:.12;transition:opacity .3s}
.cat-card:hover .cat-icon{opacity:.18}
.cat-content{position:relative;z-index:2;padding:clamp(1.25rem,3vw,2rem)}
.cat-label{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.cat-name{font-family:var(--fd);font-size:clamp(28px,5vw,48px);font-weight:700;text-transform:uppercase;line-height:1}
.cat-desc{font-size:12px;color:rgba(255,255,255,.6);margin-top:.5rem;line-height:1.6}
.cat-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:1rem;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);font-weight:500;text-decoration:none;
  transition:gap .2s;
}
.cat-card:hover .cat-link{gap:10px}

/* bg colours per category */
.cat-bike .cat-card-bg{background:linear-gradient(145deg,#1a0808,#280d0d)}
.cat-scooter .cat-card-bg{background:linear-gradient(145deg,#0d0808,#1f1010)}
.cat-three .cat-card-bg{background:linear-gradient(145deg,#120808,#221010)}

/* ══════════════════ LINEUP (products grid) ══════════════════ */
#lineup{background:var(--black)}
.lineup-tabs{display:flex;gap:0;margin-top:2rem;margin-bottom:3rem;border:1px solid rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none}
.lineup-tabs::-webkit-scrollbar{display:none}
.ltab{
  flex-shrink:0;padding:12px 24px;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gray);cursor:pointer;background:var(--dark2);border:none;
  border-right:1px solid rgba(255,255,255,.07);font-family:var(--fb);
  transition:color .2s,background .2s;white-space:nowrap;
}
.ltab:last-child{border-right:none}
.ltab.active{background:var(--accent);color:#fff}
.ltab:hover:not(.active){color:#fff;background:var(--dark3)}

.lineup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05)}
.product-card{
  background:var(--dark2);cursor:pointer;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:background .25s;
}
.product-card:hover{background:var(--dark3)}
.product-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.product-card:hover::after{transform:scaleX(1)}

.pc-thumb{
    overflow: hidden;
}

.pc-thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pc-body{padding:clamp(1.25rem,3vw,2rem)}
.pc-tag{display:inline-block;background:var(--accent-glow);color:var(--accent);font-size:9px;letter-spacing:.2em;text-transform:uppercase;padding:3px 8px;border-radius:1px;margin-bottom:1rem}
.pc-name{font-family:var(--fd);font-size:clamp(26px,4vw,36px);font-weight:700;text-transform:uppercase;line-height:1;margin-bottom:.3rem}
.pc-tagline{font-size:12px;color:var(--gray);margin-bottom:1.5rem}
.pc-specs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.06);margin-bottom:1.5rem}
.pcs-val{font-family:var(--fd);font-size:clamp(20px,3vw,26px);font-weight:600;line-height:1}
.pcs-unit{font-size:12px;color:var(--gray);font-weight:400}
.pcs-key{font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-top:3px}
.pc-cta{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);font-weight:500;text-decoration:none;transition:gap .2s}
.product-card:hover .pc-cta{gap:10px}

/* product thumb bg colours */
.tbg-bike1{background:linear-gradient(135deg,#1a0808,#2a1010)}
.tbg-bike2{background:linear-gradient(135deg,#120606,#200e0e)}
.tbg-scooter1{background:linear-gradient(135deg,#0e1018,#161c2a)}
.tbg-scooter2{background:linear-gradient(135deg,#0a0e16,#131b28)}
.tbg-scooter3{background:linear-gradient(135deg,#0d1218,#182030)}
.tbg-three1{background:linear-gradient(135deg,#0e1a10,#162818)}
.tbg-three2{background:linear-gradient(135deg,#101a0e,#1a2a14)}

/* ══════════════════ CINEMATIC BANNER ══════════════════ */
#cinematic{
  min-height:clamp(260px,45vw,520px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--dark2);position:relative;overflow:hidden;padding:4rem 6vw;
}
.cin-bg{position:absolute;inset:0;background:radial-gradient(ellipse 110% 90% at 40% 50%,rgba(140,25,25,.3) 0%,transparent 65%),#0e0505;z-index:0}
.cin-streaks{position:absolute;inset:0;z-index:1;overflow:hidden}
.streak{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(229,76,76,.35),transparent);animation:streakMove 3.5s ease-in-out infinite}
@keyframes streakMove{0%{transform:translateX(-120%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(220%);opacity:0}}
.cin-content{position:relative;z-index:2}
.cin-title{font-family:var(--fd);font-size:clamp(44px,12vw,120px);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.02em}
.cin-title em{font-style:normal;color:var(--accent)}
.cin-sub{margin-top:1.25rem;font-size:11px;color:var(--gray);letter-spacing:.3em;text-transform:uppercase}

/* ══════════════════ WHY ADORA ══════════════════ */
#why{background:var(--dark)}
.why-inner{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;max-width:1200px;margin:0 auto}
.why-sticky{position:sticky;top:80px}
.why-title{font-family:var(--fd);font-size:clamp(36px,6vw,68px);font-weight:700;text-transform:uppercase;line-height:.92;margin-top:.75rem}
.why-list{display:flex;flex-direction:column}
.why-item{padding:1.75rem 0;border-bottom:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:2.5rem 1fr;gap:1.25rem;opacity:0;transform:translateY(18px);transition:opacity .5s,transform .5s}
.why-item.visible{opacity:1;transform:none}
.wi-icon{font-size:20px;padding-top:3px}
.wi-title{font-family:var(--fd);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.35rem}
.wi-desc{font-size:13px;color:var(--gray);line-height:1.7}

/* ══════════════════ TECHNOLOGY ══════════════════ */
#technology{background:var(--black)}
.tech-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;max-width:1200px;margin:0 auto}
.tech-vis{
  position:relative;aspect-ratio:4/3;
  background:var(--dark2);border:1px solid rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.tech-circuit{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}
.tech-badge{position:absolute;top:1.25rem;left:1.25rem;background:rgba(229,76,76,.12);border:1px solid rgba(229,76,76,.25);color:var(--accent);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:5px 10px}
.tech-glyph{font-size:60px;opacity:.55;position:relative;z-index:1}
.tech-feats{display:flex;flex-direction:column;gap:1.1rem;margin-top:2rem}
.tf{display:flex;gap:1rem;align-items:flex-start;padding:1.1rem 1.25rem;border:1px solid rgba(255,255,255,.06);background:var(--dark2);transition:border-color .2s}
.tf:hover{border-color:rgba(229,76,76,.3)}
.tf-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);margin-top:8px;flex-shrink:0}
.tf-name{font-size:13px;font-weight:500;margin-bottom:2px}
.tf-desc{font-size:12px;color:var(--gray);line-height:1.6}

/* ══════════════════ SPECS ══════════════════ */
#specs{background:var(--dark)}
.specs-wrap{max-width:1100px;margin:0 auto}
.specs-tabs{display:flex;margin-top:2rem;margin-bottom:2.5rem;border:1px solid rgba(255,255,255,.07);overflow-x:auto;scrollbar-width:none}
.specs-tabs::-webkit-scrollbar{display:none}
.stab{flex-shrink:0;padding:11px 20px;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);cursor:pointer;background:var(--dark2);border:none;border-right:1px solid rgba(255,255,255,.07);font-family:var(--fb);transition:color .2s,background .2s;white-space:nowrap}
.stab:last-child{border-right:none}
.stab.active{background:var(--accent);color:#fff}
.stab:hover:not(.active){color:#fff;background:var(--dark3)}
.specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05)}
.spec-cell{background:var(--dark2);padding:clamp(1.1rem,2.5vw,1.75rem) clamp(.9rem,2vw,1.5rem)}
.sc-val{font-family:var(--fd);font-size:clamp(22px,3.5vw,36px);font-weight:700;line-height:1;transition:opacity .25s}
.sc-unit{font-size:12px;color:var(--gray);font-weight:400}
.sc-key{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gray);margin-top:5px}

/* ══════════════════ GALLERY ══════════════════ */
#gallery{padding:clamp(3.5rem,9vw,8rem) 0;background:var(--dark2)}
.gallery-hd{padding:0 6vw;margin-bottom:2.5rem}
.gal-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:220px 220px;gap:2px;padding:0 2px}
.gi{overflow:hidden;cursor:pointer;position:relative}
.gi:nth-child(1){grid-column:span 5}
.gi:nth-child(2){grid-column:span 4}
.gi:nth-child(3){grid-column:span 3}
.gi:nth-child(4){grid-column:span 3}
.gi:nth-child(5){grid-column:span 5}
.gi:nth-child(6){grid-column:span 4}
.gi-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;opacity:.09;transition:transform .6s ease,opacity .3s;position:relative}
.gi:hover .gi-inner{transform:scale(1.05);opacity:.14}
.gc1{background:linear-gradient(135deg,#1a0808,#280f0f)}
.gc2{background:linear-gradient(135deg,#0a0a0a,#141414)}
.gc3{background:linear-gradient(135deg,#180a0a,#240e0e)}
.gc4{background:linear-gradient(135deg,#100d0d,#1c1414)}
.gc5{background:linear-gradient(135deg,#1a0808,#261010)}
.gc6{background:linear-gradient(135deg,#0e0e0e,#181818)}
.gi-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.gi:hover .gi-overlay{opacity:1}

/* ══════════════════ DEALERS ══════════════════ */
#dealers{background:var(--black)}
.dealers-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;max-width:1200px;margin:0 auto}
.dealer-map{aspect-ratio:4/3;background:var(--dark2);border:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.map-grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(229,76,76,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(229,76,76,.06) 1px,transparent 1px);background-size:36px 36px}
.mdot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(229,76,76,.2)}
.mdot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(229,76,76,.3);animation:ping 2s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:1}100%{transform:scale(2.8);opacity:0}}
.map-label-inner{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.dealer-count{font-family:var(--fd);font-size:clamp(48px,9vw,76px);font-weight:800;line-height:1;margin:.5rem 0}
.dealer-count span{color:var(--accent)}
.dealer-subtitle{font-family:var(--fd);font-size:clamp(14px,2.5vw,20px);text-transform:uppercase;color:var(--gray-light);letter-spacing:.05em;margin-bottom:.6rem}
.dealer-desc{font-size:13px;color:var(--gray);line-height:1.8;margin-bottom:1.75rem}
.cities-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:1.75rem}
.city-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--gray-light)}
.city-dot{width:4px;height:4px;border-radius:50%;background:var(--accent);flex-shrink:0}
.cta-row{display:flex;gap:.75rem;flex-wrap:wrap}

/* ══════════════════ FOOTER ══════════════════ */
footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.06);padding:clamp(2.5rem,6vw,4rem) 6vw 1.75rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:1.5rem}
.flogo img{height:26px;width:auto;filter:brightness(0) invert(1);margin-bottom:1rem;display:block}
.fbrand-desc{font-size:13px;color:var(--gray);line-height:1.8;max-width:240px}
.fcol-title{font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--gray);margin-bottom:1rem}
.fcol-links{list-style:none;display:flex;flex-direction:column;gap:.5rem}
.fcol-links a{font-size:13px;color:var(--gray-light);text-decoration:none;transition:color .2s}
.fcol-links a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:11px;color:var(--gray)}
.footer-bottom a{color:var(--gray);text-decoration:none;transition:color .2s}
.footer-bottom a:hover{color:#fff}

/* Footer socials */
.footer-socials{display:flex;align-items:center;gap:.6rem}
.fsoc{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.12);color:var(--gray-light);
  transition:border-color .2s,color .2s,background .2s,transform .2s;
  flex-shrink:0;
}
.fsoc svg{width:15px;height:15px}
.fsoc:hover{border-color:var(--accent);background:rgba(229,76,76,.12);color:#fff;transform:translateY(-2px)}
.footer-legal-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.25rem;padding-top:1.5rem}
@media(max-width:768px){.footer-legal-row{flex-direction:column;align-items:flex-start}}

/* ══════════════════ ANIMATIONS ══════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s ease}
.reveal.visible{opacity:1;transform:none}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media(max-width:1024px){
  .cat-grid{grid-template-columns:1fr}
  .cat-card{aspect-ratio:16/7}
  .why-inner{grid-template-columns:1fr;gap:2.5rem}
  .why-sticky{position:static}
  .tech-inner{grid-template-columns:1fr;gap:2.5rem}
  .dealers-inner{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
}

@media(max-width:768px){
  .nav-desktop{display:none}
  .nav-burger{display:flex}

  .hero-title{font-size:clamp(46px,14vw,90px)}
  .hero-content{padding-bottom:clamp(4.5rem,14vw,6rem)}

  .hero-stats-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .hero-stats-bar::-webkit-scrollbar{display:none}
  .hstat{flex-shrink:0;min-width:100px}

  .lineup-grid{grid-template-columns:1fr}
  .specs-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,160px)}
  .gi{grid-column:span 1 !important}
  .footer-grid{grid-template-columns:1fr;gap:1.75rem}
  .fbrand-desc{max-width:100%}
  .cta-row{flex-direction:column}
  .cta-row .btn-primary,.cta-row .btn-ghost{text-align:center}
}

@media(max-width:480px){
  .cat-card{aspect-ratio:4/3}
  .hstat{min-width:85px}
  .hstat-num{font-size:clamp(18px,7vw,28px)}
  .specs-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid{grid-template-rows:repeat(3,130px)}
  .cities-grid{grid-template-columns:1fr 1fr}
}

/* ══════════════════════════════════════════════════════════
   DYNAMIC PRODUCT CARD (now an <a>, used on home + product pg)
   ══════════════════════════════════════════════════════════ */
.product-card{color:inherit;text-decoration:none}
.product-card .pc-name,.product-card .pc-tagline,.product-card .pcs-val,.product-card .pcs-key{color:inherit}
.lineup-loading{grid-column:1/-1;padding:3rem;text-align:center;color:var(--gray);font-size:13px;letter-spacing:.1em;text-transform:uppercase}

/* ══════════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════════ */
.breadcrumb{
  position:relative;z-index:5;
  padding:calc(60px + 1.25rem) 6vw .5rem;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);
  background:var(--black);
}
.breadcrumb a{color:var(--gray);text-decoration:none;transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb #bc-name{color:rgba(255,255,255,.85)}
.bc-sep{color:rgba(255,255,255,.2)}

/* ══════════════════════════════════════════════════════════
   PRODUCT HERO (modifier on .hero-section)
   ══════════════════════════════════════════════════════════ */
.product-hero{height:min(72svh,640px);min-height:420px}
.product-hero .hero-bg{background-size:cover;background-position:center;opacity:.85}
.product-badge{
  display:inline-block;background:rgba(229,76,76,.14);border:1px solid rgba(229,76,76,.3);
  color:var(--accent);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:5px 12px;border-radius:2px;margin-bottom:1rem;
  opacity:0;animation:fadeUp .7s .1s forwards;
}
.product-price-row{
  display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  opacity:0;animation:fadeUp .7s .7s forwards;
}
.product-price{font-family:var(--fd);font-size:clamp(24px,4vw,34px);font-weight:700;color:#fff}
.product-price-note{font-size:11px;color:var(--gray);letter-spacing:.05em;margin-top:2px}

/* ══════════════════════════════════════════════════════════
   PRODUCT GALLERY
   ══════════════════════════════════════════════════════════ */
.pgal-wrap{margin-top:2rem;display:grid;grid-template-columns:2fr 1fr;gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05)}
.pgal-main{aspect-ratio:4/3;overflow:hidden;background:var(--dark2)}
.pgal-main img{width:100%;height:100%;object-fit:cover;display:block}
.pgal-thumbs{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:2px}
.pgal-thumb{position:relative;overflow:hidden;background:var(--dark2);display:flex;align-items:center;justify-content:center}
.pgal-image img{width:100%;height:100%;object-fit:cover;display:block}
.pgal-swatch{flex-direction:column;gap:6px;min-height:78px}
.pgal-icon{font-size:26px;opacity:.5}
.pgal-label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
@media(max-width:768px){
  .pgal-wrap{grid-template-columns:1fr}
  .pgal-thumbs{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto}
}

/* ══════════════════════════════════════════════════════════
   OVERVIEW
   ══════════════════════════════════════════════════════════ */
.po-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;max-width:1200px;margin:0 auto;align-items:start}
.po-title{margin-bottom:1.25rem}
.po-desc{font-size:15px;color:var(--gray-light);line-height:1.85;max-width:60ch;margin-bottom:1.75rem}
.po-highlights{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.po-highlights li{
  position:relative;padding-left:1.4rem;font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;
}
.po-highlights li::before{content:'';position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--accent)}
.po-side{display:flex;flex-direction:column;gap:1.75rem}
.pc-colors-label{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--gray);margin-bottom:.9rem}
.color-swatches{display:flex;flex-direction:column;gap:.5rem}
.color-swatch{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;
  background:var(--dark2);border:1px solid rgba(255,255,255,.07);cursor:pointer;
  font-family:var(--fb);text-align:left;transition:border-color .2s,background .2s;
}
.color-swatch .sw-dot{width:16px;height:16px;border-radius:50%;background:var(--sw-color);flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.color-swatch .sw-name{font-size:12px;color:var(--gray-light)}
.color-swatch:hover{border-color:rgba(255,255,255,.2)}
.color-swatch.active{border-color:var(--accent);background:var(--dark3)}
.color-swatch.active .sw-name{color:#fff}
.po-warranty-card{
  display:flex;gap:1rem;padding:1.25rem;background:var(--dark2);border:1px solid rgba(255,255,255,.06);
}
.pwc-icon{font-size:22px;flex-shrink:0}
.pwc-title{font-size:13px;font-weight:600;margin-bottom:.35rem;color:#fff}
.pwc-desc{font-size:12px;color:var(--gray);line-height:1.7}
@media(max-width:1024px){
  .po-grid{grid-template-columns:1fr;gap:2.5rem}
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CTA
   ══════════════════════════════════════════════════════════ */
.product-cta{min-height:auto;padding:clamp(3rem,8vw,5.5rem) 6vw}

/* ══════════════════════════════════════════════════════════
   NOT FOUND
   ══════════════════════════════════════════════════════════ */
.not-found{text-align:center;padding-top:calc(60px + 6rem)}

/* Fade root in once JS has populated content, to avoid FOUC of empty containers */
#product-root{opacity:0;transition:opacity .3s}
#product-root.is-ready{opacity:1}
#category-root{opacity:0;transition:opacity .3s}
#category-root.is-ready{opacity:1}

/* ══════════════════════════════════════════════════════════
   CATEGORY PAGE
   ══════════════════════════════════════════════════════════ */
.category-hero .hero-bg{background-size:cover;background-position:center;opacity:.55}
.about-hero,
.contact-hero,
.category-hero{
  height:min(50svh,460px);
  min-height:340px;
}

.about-hero .hero-title,
.contact-hero .hero-title,
.category-hero .hero-title{
  font-size:clamp(38px,5.5vw,68px);
}
.cat-hero-desc{font-size:14px;color:rgba(255,255,255,.6);max-width:56ch;margin-top:1rem;line-height:1.75;
  opacity:0;animation:fadeUp .7s .6s forwards;}
#category-lineup{padding-top:clamp(2.5rem,6vw,4rem)}

/* ══════════════════════════════════════════════════════════
   ABOUT PAGE
   ══════════════════════════════════════════════════════════ */
.about-hero .hero-bg{background:radial-gradient(ellipse 90% 70% at 30% 20%,rgba(197,51,51,.16),transparent 60%),#0a0505}

.about-intro{max-width:1100px;margin:0 auto}
.about-intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:start}
.about-lead{font-family:var(--fd);font-size:clamp(22px,3vw,32px);font-weight:400;line-height:1.4;color:rgba(255,255,255,.92)}
.about-body p{font-size:14px;color:var(--gray-light);line-height:1.9;margin-bottom:1.1rem}
.about-body p:last-child{margin-bottom:0}

.about-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(255,255,255,.05); /* change 2 to 4 for dealer and road vehicles  */
  border:1px solid rgba(255,255,255,.05);max-width:1100px;margin:0 auto;
}
.ast-cell{background:var(--dark2);padding:clamp(1.5rem,3vw,2.25rem) 1.5rem;text-align:center}
.ast-num{font-family:var(--fd);font-size:clamp(32px,5vw,52px);font-weight:800;color:#fff;line-height:1}
.ast-lbl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray);margin-top:6px}

.timeline{max-width:900px;margin:0 auto;position:relative}
.timeline::before{content:'';position:absolute;left:74px;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.1)}
.tl-item{display:grid;grid-template-columns:74px 1fr;gap:2rem;padding:1.75rem 0;position:relative}
.tl-year{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--accent);padding-top:2px}
.tl-item::after{content:'';position:absolute;left:70px;top:2.1rem;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--black)}
.tl-title{font-size:15px;font-weight:600;color:#fff;margin-bottom:.4rem;letter-spacing:.02em}
.tl-desc{font-size:13px;color:var(--gray);line-height:1.75;max-width:56ch}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);max-width:1100px;margin:0 auto}
.val-card{background:var(--dark2);padding:clamp(1.75rem,3vw,2.5rem);transition:background .25s}
.val-card:hover{background:var(--dark3)}
.val-icon{font-size:26px;margin-bottom:1rem;display:block}
.val-title{font-family:var(--fd);font-size:20px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;margin-bottom:.6rem}
.val-desc{font-size:13px;color:var(--gray);line-height:1.75}

.about-cta-inline{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:2rem;
  padding:clamp(2.5rem,5vw,3.5rem);border:1px solid rgba(255,255,255,.08);background:var(--dark2)}
.about-cta-inline h3{font-family:var(--fd);font-size:clamp(24px,3.5vw,34px);font-weight:700;text-transform:uppercase;line-height:1.05;max-width:14ch}

@media(max-width:900px){
  .about-intro-grid{grid-template-columns:1fr;gap:2rem}
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .values-grid{grid-template-columns:1fr}
  .timeline::before{left:50px}
  .tl-item{grid-template-columns:50px 1fr;gap:1.25rem}
  .tl-item::after{left:46px}
}

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE
   ══════════════════════════════════════════════════════════ */

.contact-hero .hero-bg{background:radial-gradient(ellipse 90% 80% at 70% 30%,rgba(197,51,51,.16),transparent 60%),#0a0505}

.contact-inner{display:grid;grid-template-columns:1fr 1.15fr;gap:4rem;max-width:1150px;margin:0 auto;align-items:start}

.contact-info-list{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}
.ci-item{display:flex;gap:1rem;padding:1.25rem;background:var(--dark2);border:1px solid rgba(255,255,255,.06)}
.ci-icon{font-size:20px;flex-shrink:0;padding-top:2px}
.ci-title{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--gray);margin-bottom:.35rem}
.ci-val{font-size:14px;color:#fff}
.ci-val a{color:inherit;text-decoration:none}
.ci-val a:hover{color:var(--accent)}

.contact-form{display:flex;flex-direction:column;gap:1.25rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.form-field{display:flex;flex-direction:column;gap:.5rem}
.form-field label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--gray)}
.form-field input,.form-field select,.form-field textarea{
  background:var(--dark2);border:1px solid rgba(255,255,255,.1);color:#fff;
  font-family:var(--fb);font-size:14px;padding:13px 14px;border-radius:2px;
  transition:border-color .2s,background .2s;width:100%;
}
.form-field select{cursor:pointer}
.form-field input::placeholder,.form-field textarea::placeholder{color:rgba(255,255,255,.3)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{
  outline:none;border-color:var(--accent);background:var(--dark3);
}
.form-field textarea{resize:vertical;min-height:140px;line-height:1.6}
.form-submit{
  background:var(--accent);color:#fff;border:none;padding:15px 32px;font-size:12px;
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border-radius:2px;
  transition:background .2s,transform .15s;align-self:flex-start;
}
.form-submit:hover{background:var(--accent2);transform:translateY(-1px)}
.form-submit:disabled{opacity:.55;cursor:not-allowed;transform:none}
.form-status{font-size:13px;padding:12px 14px;border-radius:2px;display:none}
.form-status.is-visible{display:block}
.form-status.is-success{background:rgba(38,166,91,.12);border:1px solid rgba(38,166,91,.35);color:#5fd68a}
.form-status.is-error{background:rgba(197,51,51,.12);border:1px solid rgba(197,51,51,.35);color:#f08a8a}

.contact-map{aspect-ratio:16/9;margin-top:2.5rem;max-width:1150px;margin-left:auto;margin-right:auto}

@media(max-width:900px){
  .contact-inner{grid-template-columns:1fr;gap:2.5rem}
  .form-row{grid-template-columns:1fr}
}